/* Layout: a vintage recipe-card journal. Maroon masthead band, parchment pages, gold rules, one featured card. */
:root{
  --paper:#f3ead8; --card:#fbf5e8; --ink:#2b1a17; --muted:#6b5a4c;
  --maroon:#6e1f2a; --olive:#5c6338; --gold:#b48a3c; --rule:#d9c69e;
  --on-maroon:#f6ecd6;
  --display:"Cormorant Garamond","Garamond","Times New Roman",serif;
  --sc:"Cormorant SC","Cormorant Garamond",Georgia,serif;
  --body:"Libre Caslon Text",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#1d1513; --card:#271c19; --ink:#f0e4cc; --muted:#b9a68c;
  --maroon:#4a141c; --olive:#9aa36a; --gold:#d4ab5c; --rule:#4a3a2c; --on-maroon:#f3e6cb; color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#1d1513; --card:#271c19; --ink:#f0e4cc; --muted:#b9a68c;
  --maroon:#4a141c; --olive:#9aa36a; --gold:#d4ab5c; --rule:#4a3a2c; --on-maroon:#f3e6cb; color-scheme:dark}

body{background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.7}
.wrap{max-width:1040px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.1;text-wrap:balance;margin:0}
.label{font-family:var(--sc);letter-spacing:.14em;text-transform:lowercase;font-size:1rem;color:var(--gold)}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* Masthead */
.mast{background:var(--maroon);color:var(--on-maroon)}
.mast .wrap{padding-block:28px 0;display:grid;gap:18px;justify-items:center;text-align:center}
.mast .est{font-family:var(--sc);letter-spacing:.3em;font-size:.95rem;color:var(--gold)}
.mast h1{font-size:clamp(2.6rem,8vw,4.6rem);font-style:italic;font-weight:500}
.mast h1 span{font-style:normal;font-family:var(--sc);font-size:.42em;letter-spacing:.35em;display:block;margin-top:6px;color:var(--gold)}
nav{width:100%;border-top:1px solid color-mix(in srgb,var(--gold) 55%,transparent)}
nav ul{list-style:none;margin:0;padding:12px 0;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 28px;font-family:var(--sc);letter-spacing:.16em;font-size:1.05rem}
nav a{text-decoration:none;padding:4px 2px;border-bottom:1px solid transparent}
nav a[aria-current]{border-color:var(--gold);color:var(--gold)}
nav .soon{opacity:.6}
nav .soon small{font-family:var(--body);font-size:.62rem;letter-spacing:.08em;margin-left:4px}

/* Hero: the ratio itself */
.hero{padding-block:56px 40px;display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.hero p{max-width:34em;color:var(--muted)}
.hero h2{font-size:clamp(2rem,5vw,3rem);margin-block:8px 16px}
.ratio{display:flex;align-items:baseline;justify-content:center;gap:clamp(8px,2vw,18px);font-family:var(--display);color:var(--maroon)}
:root[data-theme="dark"] .ratio{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ratio{color:var(--gold)}}
.ratio .n{font-size:clamp(5rem,16vw,9.5rem);font-weight:500;line-height:.9;font-variant-numeric:lining-nums}
.ratio .c{font-size:clamp(3rem,9vw,5rem);color:var(--gold)}
.ratio-key{display:flex;justify-content:center;gap:clamp(18px,5vw,48px);font-family:var(--sc);letter-spacing:.14em;color:var(--olive);margin-top:6px}

.orn{display:flex;align-items:center;gap:14px;color:var(--gold);margin-block:8px 36px}
.orn::before,.orn::after{content:"";flex:1;height:1px;background:var(--rule)}

/* Recipe card */
.card{background:var(--card);border:1px solid var(--rule);outline:1px solid var(--rule);outline-offset:-8px;padding:clamp(22px,4vw,44px);display:grid;grid-template-columns:1fr 1.25fr;gap:40px}
.card > *{min-width:0}
.card h3{font-size:1.9rem;margin-bottom:6px}
.card h4{font-family:var(--sc);font-weight:600;letter-spacing:.14em;font-size:1.1rem;color:var(--olive);margin:26px 0 8px;border-bottom:1px solid var(--rule);padding-bottom:4px}
.card h4:first-of-type{margin-top:12px}
.ing{list-style:none;padding:0;margin:0}
.ing li{display:grid;grid-template-columns:5.5em 1fr;gap:12px;padding:7px 0;border-bottom:1px dotted var(--rule)}
.ing b{font-family:var(--display);font-size:1.2rem;color:var(--maroon);font-variant-numeric:tabular-nums}
:root[data-theme="dark"] .ing b{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ing b{color:var(--gold)}}
.batch{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}

fieldset{border:0;padding:0;margin:0}
.seg{display:inline-flex;border:1px solid var(--gold)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label{padding:6px 14px;cursor:pointer;font-family:var(--sc);letter-spacing:.1em;font-size:1rem}
.seg label+input+label{border-left:1px solid var(--gold)}
.seg input:checked+label{background:var(--olive);color:var(--card)}
.seg input:focus-visible+label{outline:2px solid var(--gold);outline-offset:2px}

.texture{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--rule)}
.texture button{all:unset;cursor:pointer;padding:16px;display:grid;gap:4px;border-right:1px solid var(--rule)}
.texture button:last-child{border-right:0}
.texture button[aria-pressed="true"]{background:color-mix(in srgb,var(--gold) 16%,var(--card));box-shadow:inset 0 -3px 0 var(--maroon)}
.texture button:focus-visible{outline:2px solid var(--gold);outline-offset:-2px}
.texture strong{font-family:var(--display);font-size:1.35rem;font-weight:600}
.texture span{font-size:.85rem;color:var(--muted)}
.result{margin-top:16px;padding:14px 18px;border-left:2px solid var(--gold);font-style:italic}
.rule-list{padding-left:1.1em;margin:0}
.rule-list li{margin-bottom:6px}
.addins{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.addins span{font-family:var(--display);font-style:italic;font-size:1.1rem;padding:2px 12px;border:1px solid var(--rule);border-radius:999px}
.note{font-size:.8rem;color:var(--muted);margin-top:10px}
.social{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 14px}
.social a{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 10px;border:1px solid color-mix(in srgb,var(--gold) 60%,transparent);border-radius:999px;text-decoration:none;font-family:var(--sc);letter-spacing:.12em;font-size:1rem;color:var(--on-maroon);transition:background .2s,color .2s}
.social a:hover{background:var(--gold);color:var(--maroon)}
.social svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
footer .handle{font-family:var(--display);font-style:italic;font-size:1.1rem;color:var(--gold);margin-bottom:6px}
@media (prefers-reduced-motion:reduce){.social a{transition:none}}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
[id]{scroll-margin-top:20px}
.index{padding-bottom:40px}
.index-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;border-bottom:1px solid var(--gold);padding-bottom:8px}
.index-head h2{font-size:1.9rem;font-style:italic;font-weight:500}
.index-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:18px}
.idx{display:grid;gap:4px;align-content:start;padding:18px 20px;background:var(--card);border:1px solid var(--rule);text-decoration:none;transition:border-color .2s,transform .2s}
a.idx:hover{border-color:var(--gold);transform:translateY(-2px)}
.idx .tag{font-family:var(--sc);letter-spacing:.14em;color:var(--olive)}
.idx strong{font-family:var(--display);font-size:1.45rem;font-weight:600;line-height:1.15}
.idx .meta{font-size:.8rem;color:var(--muted)}
.idx .go{font-family:var(--sc);letter-spacing:.1em;color:var(--maroon);margin-top:6px}
:root[data-theme="dark"] .idx .go{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .idx .go{color:var(--gold)}}
.soon-card{background:transparent;border-style:dashed}
@media (max-width:820px){.index-grid{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.idx{transition:none}a.idx:hover{transform:none}}

.post{display:grid;gap:0;padding-bottom:56px}
.post + .post{border-top:1px solid var(--rule);padding-top:48px}
.post-card{grid-template-columns:1fr}
.post-card.has-video{grid-template-columns:minmax(0,1fr) minmax(0,340px)}
.bake4{grid-template-columns:repeat(4,1fr);margin-top:0}
.bake4 div+div{border-left:1px solid var(--rule)}
.bake4 b{font-size:1.6rem}
.pending{border:1px dashed var(--rule);padding:22px 24px;display:grid;gap:6px}
.pending .tag,.tiktok-embed .tag{font-family:var(--sc);letter-spacing:.14em;color:var(--olive)}
.pending p{margin:0;color:var(--muted)}
.video{min-width:0}
.tiktok-embed{margin:0;max-width:605px;min-width:0}
.tiktok-embed section{display:grid;gap:8px;padding:28px 24px;border:1px solid var(--gold);background:var(--paper);text-align:center;aspect-ratio:9/12;align-content:center}
.tiktok-embed strong{font-family:var(--display);font-size:1.6rem;font-weight:600;line-height:1.15}
.tiktok-embed a{font-family:var(--sc);letter-spacing:.1em;font-size:1.1rem;color:var(--maroon)}
:root[data-theme="dark"] .tiktok-embed a{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tiktok-embed a{color:var(--gold)}}
.tiktok-embed .meta{font-size:.8rem;color:var(--muted)}
@media (max-width:820px){.post-card.has-video{grid-template-columns:1fr}.tiktok-embed section{aspect-ratio:auto}}
@media (max-width:520px){.bake4{grid-template-columns:1fr 1fr!important}.bake4 div:nth-child(3){border-left:0}.bake4 div:nth-child(n+3){border-top:1px solid var(--rule)}}
.posts{padding-top:48px}
.posts .orn{margin-bottom:28px}
.post-title{font-size:clamp(2.2rem,6vw,3.4rem);font-style:italic;font-weight:500;margin-top:6px}
.dek{max-width:36em;color:var(--muted);margin:10px 0 24px}
.bake{display:grid;grid-template-columns:1fr 1fr;margin-top:18px;border-top:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.bake div{padding:12px 16px;display:grid;gap:2px;text-align:center}
.bake div+div{border-left:1px solid var(--rule)}
.bake .tag{font-family:var(--sc);letter-spacing:.14em;color:var(--olive)}
.bake b{font-family:var(--display);font-size:2rem;font-weight:600;line-height:1;font-variant-numeric:lining-nums}

/* Categories */
.cats{padding-block:64px 24px}
.cats h2{font-size:2.2rem;margin-top:6px}
.cat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin-top:24px;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.cat{padding:22px 18px;border-right:1px solid var(--rule);display:grid;gap:4px}
.cat:last-child{border-right:0}
.cat h3{font-size:1.5rem}
.cat p{margin:0;font-size:.85rem;color:var(--muted)}
.cat .tag{font-family:var(--sc);letter-spacing:.12em;font-size:.9rem;color:var(--olive)}
.cat.live h3{color:var(--maroon)}
:root[data-theme="dark"] .cat.live h3{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .cat.live h3{color:var(--gold)}}

footer{margin-top:56px;background:var(--maroon);color:var(--on-maroon);text-align:center}
footer .wrap{padding-block:30px}
footer .sig{font-family:var(--display);font-style:italic;font-size:1.8rem}
footer small{font-family:var(--sc);letter-spacing:.2em;color:var(--gold)}

@media (max-width:820px){
  .hero,.card{grid-template-columns:1fr}
  .cat-grid{grid-template-columns:1fr 1fr}
  .cat:nth-child(2){border-right:0}
  .cat:nth-child(-n+2){border-bottom:1px solid var(--rule)}
}
@media (max-width:440px){.texture{grid-template-columns:1fr}.texture button{border-right:0;border-bottom:1px solid var(--rule)}.texture button:last-child{border-bottom:0}}

/* Multi-page additions */
.brand{text-decoration:none;color:inherit;display:block}
.mast .h1{font-family:var(--display);font-style:italic;font-weight:500;line-height:1.1;font-size:clamp(2rem,6vw,2.8rem)}
.mast .h1 span,.mast h1 span{font-style:normal;font-family:var(--sc);font-size:.42em;letter-spacing:.35em;display:block;margin-top:6px;color:var(--gold)}
.mast.compact .wrap{padding-block:20px 0;gap:12px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 22px;min-height:44px;background:var(--maroon);color:var(--on-maroon);text-decoration:none;font-family:var(--sc);letter-spacing:.12em;font-size:1.1rem;border:1px solid var(--maroon);transition:background .2s,color .2s}
.btn:hover{background:var(--gold);border-color:var(--gold);color:var(--maroon)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--gold)}
.btn.ghost:hover{background:var(--gold);color:var(--maroon)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:24px}
.recipes-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;padding:clamp(24px,4vw,40px);background:var(--card);border:1px solid var(--rule);outline:1px solid var(--rule);outline-offset:-8px}
.recipes-band .band-text{flex:1 1 380px;min-width:0}
.recipes-band h2{font-size:clamp(2.2rem,5vw,3rem);font-style:italic;font-weight:500;margin-block:4px 8px}
.recipes-band p{margin:0;color:var(--muted);max-width:40em}
.page-head{padding-block:40px 28px}
.page-head .post-title{margin-top:4px}
.post{padding-top:36px}
.crumbs{color:var(--muted);margin-bottom:4px}
.crumbs a,.page-head .label a{color:inherit}
.soon-row{padding-top:36px;opacity:.7}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--rule);padding-top:24px}
.pn a{display:grid;gap:2px;text-decoration:none;font-family:var(--display);font-size:1.3rem;font-weight:600;line-height:1.2}
.pn a:hover{color:var(--maroon)}
.pn .next{text-align:right}
.pn .tag{font-family:var(--sc);font-weight:500;letter-spacing:.14em;font-size:.95rem;color:var(--olive)}
@media (max-width:520px){.pn{grid-template-columns:1fr}.pn .next{text-align:left}}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}
.about{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,56px);align-items:start;padding-block:64px 8px}
.about-card{position:relative;overflow:hidden;background:var(--maroon);color:var(--on-maroon);padding:clamp(28px,4vw,40px);border:1px solid var(--gold);outline:1px solid var(--gold);outline-offset:-8px;display:grid;gap:6px}
.about-mark{position:absolute;right:-10px;bottom:-60px;font-family:var(--display);font-style:italic;font-size:15rem;line-height:1;color:color-mix(in srgb,var(--gold) 22%,transparent);pointer-events:none}
.about-card h2{font-size:clamp(2.2rem,5vw,2.9rem);font-style:italic;font-weight:500;position:relative}
.about-card .from{margin:0;font-family:var(--sc);letter-spacing:.12em;color:var(--gold);position:relative}
.about-text{min-width:0;max-width:36em}
.about-text p{margin:0 0 14px}
.about-text p:first-child::first-letter{font-family:var(--display);font-size:3.4em;float:left;line-height:.8;padding:6px 8px 0 0;color:var(--maroon)}
:root[data-theme="dark"] .about-text p:first-child::first-letter{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .about-text p:first-child::first-letter{color:var(--gold)}}
.about-text .sign{font-family:var(--display);font-style:italic;font-size:1.6rem;color:var(--olive)}
@media (max-width:820px){.about{grid-template-columns:1fr}}
.pdf-msg{align-self:center;font-size:.85rem;color:var(--muted)}

/* Photos */
.hero-photo{display:block;width:100%;max-height:520px;object-fit:cover;margin-bottom:24px;border:1px solid var(--rule)}
.idx img{display:block;width:calc(100% + 40px);max-width:none;margin:-18px -20px 12px;aspect-ratio:4/3;object-fit:cover}
button.btn{cursor:pointer;font:inherit;font-family:var(--sc);letter-spacing:.12em;font-size:1.1rem}

/* Print: a one-page recipe card */
.print-brand,.print-url,.print-notes{display:none}
@media print{
  @page{size:letter;margin:.55in .6in}
  :root{--paper:#fff;--card:#fff;--ink:#2b1a17;--muted:#5a4a3e;--maroon:#6e1f2a;--olive:#5c6338;--gold:#b48a3c;--rule:#d9c69e;color-scheme:light}
  body{background:#fff;font-size:9.5pt;line-height:1.4}
  .mast,footer,.actions,.video,.pn,.crumbs,.hero-photo,.tiktok-embed{display:none!important}
  .wrap{max-width:none;padding:0}
  .post{padding:0}
  .print-brand{display:block;font-family:var(--display);font-style:italic;font-weight:600;font-size:17pt;color:var(--maroon);border-bottom:2pt solid var(--maroon);padding-bottom:4pt;margin-bottom:12pt}
  .print-brand span{font-family:var(--sc);font-style:normal;font-size:9pt;letter-spacing:3pt;color:var(--gold)}
  .post-title{font-size:28pt;margin-top:2pt}
  .dek{font-style:italic;margin:4pt 0 10pt}
  .card,.post-card,.post-card.has-video{display:block;border:0;outline:0;padding:0;background:none}
  .recipe-body{display:grid;grid-template-columns:2.6in 1fr;column-gap:24pt}
  .recipe-body .bake{grid-column:1/-1}
  .recipe-body h4:nth-of-type(1),.recipe-body .ing{grid-column:1}
  .recipe-body h4:nth-of-type(2),.recipe-body .rule-list,.recipe-body .result{grid-column:2}
  .recipe-body h4:nth-of-type(1){grid-row:2}.recipe-body .ing{grid-row:3/span 3}
  .recipe-body h4:nth-of-type(2){grid-row:2}.recipe-body .rule-list{grid-row:3}.recipe-body .result{grid-row:4}
  .recipe-body .print-notes{grid-column:1;grid-row:6}
  .card h4,.card h4:first-of-type{margin:10pt 0 4pt}
  .ing li{padding:2pt 0;grid-template-columns:.95in 1fr;break-inside:avoid}
  .ing b{font-size:11pt}
  .ing span::before{content:"";display:inline-block;width:7pt;height:7pt;border:.75pt solid #8a7a6a;margin-right:6pt;vertical-align:-.5pt}
  .rule-list li{margin-bottom:4pt;break-inside:avoid}
  .result{background:#fbf5e8}
  .bake b{font-size:16pt}.bake div{padding:5pt}
  .print-notes{display:block;margin-top:12pt}
  .print-notes div{border-bottom:.5pt solid var(--rule);height:18pt}
  .print-notes div:nth-of-type(3){display:none}
  .print-url{display:block;position:fixed;bottom:0;left:0;right:0;border-top:.75pt solid var(--rule);padding-top:5pt;font-size:8.5pt;color:var(--muted)}
  a{text-decoration:none}
  /* base recipe page */
  .seg,.texture,.batch,fieldset,.addins+.note,h4:has(+ .texture){display:none!important}
  #base-recipe{display:grid!important;grid-template-columns:1fr 1.25fr;gap:20pt}
  #base-recipe .result{margin-top:0}
  .post-title{font-size:26pt}
}

/* FAQs and related links */
.faq,.keep{max-width:760px;margin:0 auto;padding-block:40px 8px}
.faq h2,.keep h2{font-size:clamp(1.8rem,4vw,2.4rem);font-style:italic;font-weight:500;margin-block:4px 18px}
.faq details{border-top:1px solid var(--rule)}
.faq details:last-of-type{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px;padding:14px 0;font-family:var(--display);font-size:1.3rem;font-weight:600;line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--display);color:var(--gold);font-size:1.5rem;line-height:1;flex:none}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 16px;color:var(--muted)}
.faq a,.keep a,.about-text a.more{color:var(--maroon)}
.keep ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.keep li{display:grid;gap:2px;padding:12px 0;border-top:1px dotted var(--rule)}
.keep li:last-child{border-bottom:1px dotted var(--rule)}
.keep li a{font-family:var(--display);font-size:1.3rem;font-weight:600;text-decoration:none}
.keep li a:hover{text-decoration:underline}
.keep li span{font-size:.85rem;color:var(--muted)}
.about-text a.more{font-family:var(--sc);letter-spacing:.1em;text-decoration:none}
:root[data-theme="dark"] .faq a,:root[data-theme="dark"] .keep a,:root[data-theme="dark"] .about-text a.more{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .faq a,:root:not([data-theme="light"]) .keep a,:root:not([data-theme="light"]) .about-text a.more{color:var(--gold)}}
.post + .faq{padding-top:0}
.keep + .pn{margin-top:32px}
@media print{.faq,.keep{display:none!important}}

/* Blog */
.blog-post{max-width:760px;margin:0 auto}
.blog-body{font-size:1.05rem}
.blog-body h2{font-size:clamp(1.7rem,4vw,2.2rem);font-style:italic;font-weight:500;margin:36px 0 10px}
.blog-body p{margin:0 0 16px}
.blog-body ol,.blog-body ul{margin:0 0 18px;padding-left:1.4em}
.blog-body li{margin-bottom:8px}
.blog-body a{color:var(--maroon)}
:root[data-theme="dark"] .blog-body a{color:var(--gold)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .blog-body a{color:var(--gold)}}
.blog-video{margin:8px 0 24px;display:flex;justify-content:center}