:root{
  --paper:#F1EEE3;
  --paper-raised:#FBF9F2;
  --ink:#2A2620;
  --ink-muted:#6B6A5E;
  --line:#DAD5C4;
  --indigo:#26415E;
  --indigo-strong:#16232F;
  --accent:#B96A2C;
  --accent-soft:#EFD9BC;
  --accent-ink:#5A3A16;

  --g-meat:#2C4A6E;   --g-meat-soft:#DDE5EE;
  --g-fish:#2F6B6A;   --g-fish-soft:#DCE9E8;
  --g-noodle:#B96A2C; --g-noodle-soft:#F1E1CE;
  --g-side:#5C7A3E;   --g-side-soft:#E5EBDA;
  --g-soup:#5B6E8C;   --g-soup-soft:#E1E5EC;
  --g-base:#7A5570;   --g-base-soft:#EBE1E8;
  --g-drink:#A24B4E;  --g-drink-soft:#F1DEDE;
  --g-other:#6B6A5E;  --g-other-soft:#E4E1D4;

  --shadow: 0 1px 2px rgba(42,38,32,.06), 0 6px 20px -8px rgba(42,38,32,.18);
  --radius: 3px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#161C22;
    --paper-raised:#1E262E;
    --ink:#EDE8DA;
    --ink-muted:#A6A18D;
    --line:#333B42;
    --indigo:#8FB2DA;
    --indigo-strong:#CFE0F2;
    --accent:#E3A34C;
    --accent-soft:#3A2E1C;
    --accent-ink:#F0CE97;

    --g-meat:#7FA8D6;   --g-meat-soft:#22303F;
    --g-fish:#6FB8B2;   --g-fish-soft:#1C2E2C;
    --g-noodle:#E3A34C; --g-noodle-soft:#332417;
    --g-side:#9DBD79;   --g-side-soft:#242E1C;
    --g-soup:#9EB2D6;   --g-soup-soft:#232A38;
    --g-base:#C79FBC;   --g-base-soft:#2E2430;
    --g-drink:#DB8E90;  --g-drink-soft:#332022;
    --g-other:#A6A18D;  --g-other-soft:#2A3038;
  }
}
:root[data-theme="dark"]{
  --paper:#161C22;
  --paper-raised:#1E262E;
  --ink:#EDE8DA;
  --ink-muted:#A6A18D;
  --line:#333B42;
  --indigo:#8FB2DA;
  --indigo-strong:#CFE0F2;
  --accent:#E3A34C;
  --accent-soft:#3A2E1C;
  --accent-ink:#F0CE97;

  --g-meat:#7FA8D6;   --g-meat-soft:#22303F;
  --g-fish:#6FB8B2;   --g-fish-soft:#1C2E2C;
  --g-noodle:#E3A34C; --g-noodle-soft:#332417;
  --g-side:#9DBD79;   --g-side-soft:#242E1C;
  --g-soup:#9EB2D6;   --g-soup-soft:#232A38;
  --g-base:#C79FBC;   --g-base-soft:#2E2430;
  --g-drink:#DB8E90;  --g-drink-soft:#332022;
  --g-other:#A6A18D;  --g-other-soft:#2A3038;
}

*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;
  -webkit-font-smoothing:antialiased;
}
::selection{ background:var(--accent-soft); }

h1,h2,h3,h4,.disp{ font-family:"Shippori Mincho", "Hiragino Mincho ProN", serif; text-wrap:balance; }

a{ color:inherit; }
img{ max-width:100%; }

/* ---- mini site header (recipe pages) ---- */
.site-header-mini{
  max-width:980px; margin:0 auto; padding:1.6rem 1.5rem 0;
}
.brand-link{
  font-size:.72rem; letter-spacing:.14em; color:var(--accent-ink);
  background:var(--accent-soft); border-radius:999px; text-decoration:none;
  padding:.22rem .65rem; font-weight:700; display:inline-block;
}

/* ---- site header (home) ---- */
.site-header{ padding: 2.6rem 1.5rem 1.6rem; max-width: 980px; margin:0 auto; }
.brand{ display:flex; align-items:baseline; gap:.7rem; flex-wrap:wrap; }
.brand-mark{
  font-size:.72rem; letter-spacing:.14em; color:var(--accent-ink);
  background:var(--accent-soft); border-radius:999px;
  padding:.22rem .65rem; font-weight:700;
}
.site-header h1{ margin:.5rem 0 .3rem; font-weight:800; font-size:clamp(1.9rem,4vw,2.6rem); letter-spacing:.02em; }
.site-header p.tagline{ margin:0; color:var(--ink-muted); font-size:.95rem; }

/* ---- search / filter ---- */
.filter-panel{ max-width:980px; margin:0 auto; padding: 0 1.5rem 1.6rem; }
.search-row{
  display:flex; gap:.6rem; align-items:center;
  background:var(--paper-raised); border:1px solid var(--line);
  border-radius:999px; padding:.5rem .6rem .5rem 1.1rem; box-shadow:var(--shadow);
}
.search-row svg{ flex:none; opacity:.55; }
.search-row input{ flex:1; border:none; background:transparent; outline:none; font:inherit; font-size:.98rem; color:var(--ink); min-width:0; }
.search-row input::placeholder{ color:var(--ink-muted); }
.search-count{ flex:none; font-size:.76rem; color:var(--ink-muted); white-space:nowrap; font-variant-numeric:tabular-nums; padding:.3rem .8rem; border-left:1px solid var(--line); }

.chip-row{ display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1rem; }
#genre-chips{ gap:.7rem; margin-top:1.2rem; }
.chip{
  font:inherit; font-size:.85rem; cursor:pointer;
  border:1px solid var(--line); background:var(--paper-raised); color:var(--ink);
  border-radius:999px; padding:.4rem 1rem; display:flex; align-items:center; gap:.45rem;
  transition:background .15s, border-color .15s, color .15s;
}
.chip .dot{ width:8px; height:8px; border-radius:50%; }
.chip[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.chip-genre{ font-size:1rem; font-weight:700; padding:.75rem 1.4rem; border-width:1.5px; box-shadow:var(--shadow); }
.chip-genre .dot{ width:11px; height:11px; }

details.advanced{ margin-top:1rem; }
details.advanced summary{ cursor:pointer; font-size:.85rem; color:var(--ink-muted); list-style:none; display:inline-flex; align-items:center; gap:.35rem; }
details.advanced summary::-webkit-details-marker{ display:none; }
details.advanced summary:before{ content:"▸"; font-size:.7em; transition:transform .15s; }
details.advanced[open] summary:before{ transform:rotate(90deg); }
.advanced-body{ display:flex; flex-wrap:wrap; gap:1.4rem; margin-top:.9rem; }
.advanced-group label{ display:block; font-size:.76rem; color:var(--ink-muted); margin-bottom:.35rem; letter-spacing:.03em; }
.advanced-group select{ font:inherit; font-size:.85rem; color:var(--ink); background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:.4rem .6rem; }

/* ---- recipe grid ---- */
.grid-wrap{ max-width:980px; margin:0 auto; padding:0 1.5rem 4rem; }
.grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:1rem; }
.card{
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column;
  text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s;
}
.card:hover{ transform:translateY(-2px); box-shadow:0 2px 4px rgba(42,38,32,.08), 0 14px 28px -10px rgba(42,38,32,.24); }
.card-band{ height:7px; }
.card-body{ padding:1.1rem 1.15rem 1.2rem; display:flex; flex-direction:column; gap:.55rem; flex:1; }
.card-genre{ font-size:.72rem; letter-spacing:.04em; font-weight:700; }
.card h3{ margin:0; font-size:1.12rem; line-height:1.4; font-weight:700; font-family:"Zen Kaku Gothic New",sans-serif; }
.card p{ margin:0; font-size:.83rem; color:var(--ink-muted); line-height:1.6; flex:1; }
.card-tags{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.2rem; }
.tag{ font-size:.72rem; border-radius:4px; padding:.18rem .5rem; background:var(--paper); border:1px solid var(--line); color:var(--ink-muted); }

.empty-state{ text-align:center; padding:4rem 1rem; color:var(--ink-muted); display:none; }
.empty-state.show{ display:block; }

/* ---- recipe detail ---- */
.detail{ max-width:900px; margin:0 auto; padding:1.4rem 1.5rem 5rem; }
.back-link{ display:inline-flex; align-items:center; gap:.4rem; font-size:.85rem; color:var(--ink-muted); text-decoration:none; margin-bottom:1.4rem; }
.back-link:hover{ color:var(--ink); }
.detail-head h1{ font-size:clamp(1.7rem,3.6vw,2.3rem); margin:.3rem 0 .6rem; font-weight:800; }
.detail-lead{ color:var(--ink-muted); font-size:.95rem; line-height:1.8; max-width:60ch; margin:0 0 1.1rem; }
.detail-lead p{ margin:0; }
.detail-lead p + p{ margin-top:.7rem; }
.meta-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:2rem; }
.meta-chip{ font-size:.78rem; border-radius:999px; padding:.32rem .85rem; background:var(--g-meat-soft); color:var(--g-meat); font-weight:700; }
.meta-chip.alt{ background:var(--accent-soft); color:var(--accent-ink); }

.detail-layout{ display:grid; grid-template-columns: 260px 1fr; gap:2.4rem; align-items:start; }
.detail-layout.no-ingredients{ grid-template-columns:1fr; }
@media (max-width:720px){ .detail-layout{ grid-template-columns:1fr; } }

.ingredients{
  position:sticky; top:1.2rem;
  background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.3rem 1.3rem 1.5rem; box-shadow:var(--shadow);
}
@media (max-width:720px){ .ingredients{ position:static; } }
.ingredients-label{ margin:0 0 .9rem; font-size:.78rem; letter-spacing:.06em; color:var(--ink-muted); text-transform:uppercase; }
.ingredients h2{ margin:1.1rem 0 .5rem; font-size:.88rem; font-weight:700; color:var(--indigo); font-family:"Zen Kaku Gothic New",sans-serif; }
.ingredients h2:first-of-type{ margin-top:0; }
.ingredients h3{ margin:.9rem 0 .4rem; font-size:.82rem; font-weight:700; color:var(--ink-muted); font-family:"Zen Kaku Gothic New",sans-serif; }
.ing-list{ list-style:none; margin:0 0 .3rem; padding:0; display:flex; flex-direction:column; gap:.42rem; }
.ing-list li{ display:flex; justify-content:space-between; gap:.6rem; font-size:.87rem; border-bottom:1px dashed var(--line); padding-bottom:.42rem; }
.ing-name{ color:var(--ink); }
.ing-amt{ color:var(--ink-muted); font-variant-numeric:tabular-nums; white-space:nowrap; text-align:right; }

.recipe-body{ display:flex; flex-direction:column; gap:1.1rem; }
.recipe-body h2{ margin:1.6rem 0 0; font-size:1.15rem; font-weight:700; color:var(--indigo); padding-top:1.1rem; border-top:1px solid var(--line); font-family:"Zen Kaku Gothic New",sans-serif; }
.recipe-body > h2:first-child{ margin-top:0; padding-top:0; border-top:none; }
.recipe-body h3{ margin:.4rem 0 0; font-size:1rem; font-weight:700; color:var(--ink); font-family:"Zen Kaku Gothic New",sans-serif; }
.recipe-body p{ margin:0; line-height:1.9; font-size:.95rem; }
.recipe-body strong{ color:var(--accent-ink); background:var(--accent-soft); padding:.03rem .3rem; border-radius:3px; font-weight:700; }

.recipe-body ul{ margin:0; padding-left:1.3rem; display:flex; flex-direction:column; gap:.4rem; font-size:.95rem; line-height:1.8; }
.recipe-body ul.ing-list{ padding-left:0; }

.recipe-body ol{ list-style:none; margin:0; padding:0; counter-reset:step; display:flex; flex-direction:column; gap:1.4rem; }
.recipe-body ol > li{ counter-increment:step; position:relative; padding-left:3rem; line-height:1.9; font-size:.95rem; min-height:2.1rem; }
.recipe-body ol > li::before{
  content:counter(step); position:absolute; left:0; top:0; width:2.1rem; height:2.1rem; border-radius:50%;
  background:var(--indigo); color:var(--paper-raised); display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:.92rem; font-family:"Shippori Mincho",serif;
}

.callout{ margin-top:.2rem; background:var(--g-side-soft); border-left:3px solid var(--g-side); border-radius:0 var(--radius) var(--radius) 0; padding:.85rem 1rem; font-size:.87rem; line-height:1.8; }
.callout p{ font-size:.87rem; line-height:1.8; }
.callout .callout-title{ font-weight:700; color:var(--g-side); margin-bottom:.3rem; font-size:.82rem; }

.recipe-table{ border-collapse:collapse; width:100%; font-size:.88rem; }
.recipe-table th, .recipe-table td{ border:1px solid var(--line); padding:.5rem .7rem; text-align:left; }
.recipe-table th{ background:var(--paper); color:var(--ink-muted); font-weight:700; font-size:.8rem; }
.table-wrap{ overflow-x:auto; }

.related{ margin-top:3rem; padding-top:1.8rem; border-top:1px solid var(--line); }
.related h2{ font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-muted); margin:0 0 1rem; font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; }
.related-list{ display:flex; flex-wrap:wrap; gap:.6rem; }
.related-list a{ font-size:.85rem; text-decoration:none; background:var(--paper-raised); border:1px solid var(--line); border-radius:999px; padding:.4rem 1rem; color:var(--ink); }
.related-list a:hover{ border-color:var(--indigo); color:var(--indigo); }
.related-list span{ font-size:.85rem; background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:.4rem 1rem; color:var(--ink-muted); }

/* ---- about / contact ---- */
.about-contact{ max-width:980px; margin:0 auto; padding:0 1.5rem 1rem; display:grid; grid-template-columns:1fr 1fr; gap:1.4rem; align-items:start; }
@media (max-width:680px){ .about-contact{ grid-template-columns:1fr; } }
.about-card, .message-card{ background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius); padding:1.5rem 1.5rem 1.6rem; box-shadow:var(--shadow); }
.about-card h2, .message-card h2{ margin:0 0 .6rem; font-size:1.05rem; font-weight:700; font-family:"Zen Kaku Gothic New",sans-serif; }
.avatar{ width:2.8rem; height:2.8rem; border-radius:50%; background:var(--indigo); color:var(--paper-raised); display:flex; align-items:center; justify-content:center; font-family:"Shippori Mincho",serif; font-weight:700; font-size:.95rem; margin-bottom:.9rem; }
.about-card p{ margin:0; font-size:.9rem; line-height:1.85; color:var(--ink-muted); }
.placeholder-note{ background:var(--accent-soft); color:var(--accent-ink); border-radius:var(--radius); padding:.7rem .9rem; }

.message-sub{ margin:0 0 1rem; font-size:.85rem; line-height:1.7; color:var(--ink-muted); }
#msg-form{ display:flex; flex-direction:column; gap:.9rem; }
#msg-form label{ display:flex; flex-direction:column; gap:.35rem; font-size:.8rem; color:var(--ink-muted); }
#msg-form input, #msg-form textarea{ font:inherit; font-size:.9rem; color:var(--ink); background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:.6rem .7rem; resize:vertical; }
#msg-form input:focus, #msg-form textarea:focus{ outline:2px solid var(--indigo); outline-offset:1px; }
.btn-primary{ font:inherit; font-size:1rem; font-weight:700; cursor:pointer; background:var(--indigo); color:var(--paper-raised); border:none; border-radius:999px; padding:.85rem 1.6rem; align-self:flex-start; box-shadow:var(--shadow); transition:transform .15s, opacity .15s; }
.btn-primary:hover{ opacity:.92; transform:translateY(-1px); }
.msg-done{ background:var(--g-side-soft); color:var(--g-side); border-radius:var(--radius); padding:.8rem 1rem; font-size:.9rem; font-weight:700; }
.mail-fallback{ margin:1rem 0 0; font-size:.8rem; color:var(--ink-muted); }
.mail-fallback a{ color:var(--indigo); text-decoration:none; }
.mail-fallback a:hover{ text-decoration:underline; }

footer.site-footer{ text-align:center; color:var(--ink-muted); font-size:.78rem; padding:2rem 1rem 3rem; }