/* ══════════════════════════════════════════════════════════════════════════
   SCONE SOURCERY — "Old-World Bakehouse"
   A vintage bakery with a whisper of magic (the name winks at sorcery). Warm
   parchment & antique gold by day; a candlelit bakehouse by night. An engraved
   shop-seal, woodcut illustration, ornamental rules, letterpress panels — and
   a scrappy first-person voice as the twist on the ornate sign.
   Self-contained; system serif now, drop-in vintage faces later. Inline SVG.
   ══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Fraunces';src:url('assets/fonts/Fraunces.woff2') format('woff2');font-weight:300 900;font-display:swap}
@font-face{font-family:'Fraunces';src:url('assets/fonts/Fraunces-Italic.woff2') format('woff2');font-weight:300 900;font-style:italic;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0}

/* ── PARCHMENT & GOLD (light) ────────────────────────────────────────────── */
:root{
  color-scheme:light;
  --paper:#F1E7CE;         /* warm parchment */
  --paper-2:#E9DBB8;       /* deeper panel */
  --ink:#2A1C10;           /* printed espresso-ink */
  --ink-soft:#6E5735;      /* faded sepia */
  --gold:#A97C2C;          /* antique gold — the accent */
  --gold-lit:#C89A3E;      /* brighter gold */
  --ox:#7C2A20;            /* oxblood — wax seal / ribbon */
  --line:#C9B183;          /* thin rule */
  --glow:transparent;
  --seal-ink:var(--ink);
  --font-d:'Fraunces',"Hoefler Text",Constantia,"Palatino Linotype",Palatino,Georgia,serif;
  --font-b:"Hoefler Text",Constantia,"Iowan Old Style",Palatino,Georgia,serif;
  --font-l:ui-monospace,"SF Mono",Menlo,Consolas,monospace; /* letterpressed labels */
  --wrap:72rem;--r:0;--ease:cubic-bezier(.2,.7,.2,1);
}
/* ── CANDLELIT BAKEHOUSE (dark) ──────────────────────────────────────────── */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --paper:#1C1409;--paper-2:#241A0C;--ink:#F0E3C4;--ink-soft:#C1A97C;
    --gold:#D3A94E;--gold-lit:#EBC673;--ox:#C0574A;--line:#4B3A1E;
    --glow:radial-gradient(60% 55% at 68% 26%,rgba(211,169,78,.16),transparent 62%);
    --seal-ink:var(--gold);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --paper:#1C1409;--paper-2:#241A0C;--ink:#F0E3C4;--ink-soft:#C1A97C;
  --gold:#D3A94E;--gold-lit:#EBC673;--ox:#C0574A;--line:#4B3A1E;
  --glow:radial-gradient(60% 55% at 68% 26%,rgba(211,169,78,.16),transparent 62%);
  --seal-ink:var(--gold);
}

body{
  background:var(--paper);color:var(--ink);
  font-family:var(--font-b);font-size:clamp(1.04rem,1rem + .3vw,1.18rem);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:clip;
  /* faint printed-paper speckle */
  background-image:radial-gradient(rgba(110,87,53,.05) .5px,transparent .6px);
  background-size:5px 5px;
}

h1,h2,h3{font-family:var(--font-d);font-weight:500;line-height:1.02;margin:0;letter-spacing:-.005em}
h1{font-size:clamp(2.8rem,1.9rem + 4.4vw,5.6rem);font-weight:400}
h2{font-size:clamp(2rem,1.5rem + 2.3vw,3.3rem);font-weight:400}
h3{font-size:clamp(1.3rem,1.1rem + .7vw,1.7rem);font-weight:500}
p{margin:0}
em,.it{font-style:italic}
a{color:var(--ox);text-underline-offset:3px;text-decoration-thickness:1px}
:root[data-theme="dark"] a,@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) a{color:var(--gold-lit)}}

.wrap{width:min(100% - 2.6rem,var(--wrap));margin-inline:auto}
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
.measure{max-width:44ch}
.soft{color:var(--ink-soft)}

/* letterpressed label — small caps, gold, tracked */
.label{font-family:var(--font-l);font-weight:600;font-size:.72rem;letter-spacing:.28em;
  text-transform:uppercase;color:var(--gold);display:inline-flex;align-items:center;gap:.6rem}
.label .star{color:var(--gold);font-size:.8em}

/* ornamental rule: —— ✦ —— */
.orn{display:flex;align-items:center;gap:1rem;color:var(--gold);margin:0}
.orn::before,.orn::after{content:"";height:1px;flex:1;background:var(--line)}
.orn .m{font-size:1.1rem;color:var(--gold)}

/* ── buttons — letterpress ───────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-l);font-weight:700;
  font-size:.86rem;letter-spacing:.1em;text-transform:uppercase;padding:.95rem 1.6rem;
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);cursor:pointer;text-decoration:none;
  line-height:1;transition:background .18s,color .18s,transform .1s,border-color .18s}
.btn:hover{background:var(--ink);color:var(--paper)}
.btn.gold{background:var(--gold);border-color:var(--gold);color:#241A0C}
.btn.gold:hover{background:var(--gold-lit);border-color:var(--gold-lit);color:#241A0C}
.btn.ox{background:var(--ox);border-color:var(--ox);color:#F1E7CE}
.btn.ox:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
:root[data-theme="dark"] .btn:focus-visible,@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .btn:focus-visible{outline-color:var(--gold-lit)}}
.actions{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;margin-top:2rem}

/* ── framed panel (double-rule, letterpress card) ────────────────────────── */
.frame{border:1.5px solid var(--ink);padding:clamp(1.3rem,3vw,2rem);position:relative;background:var(--paper)}
.frame::after{content:"";position:absolute;inset:5px;border:1px solid var(--line);pointer-events:none}

/* ── top bar ─────────────────────────────────────────────────────────────── */
.bar{position:sticky;top:0;z-index:50;background:color-mix(in oklab,var(--paper) 90%,transparent);
  backdrop-filter:blur(8px);border-bottom:1.5px solid var(--line)}
.bar-in{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding-block:.85rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;color:var(--ink)}
.brand .bn{font-family:var(--font-d);font-weight:500;font-size:1.3rem;letter-spacing:-.01em}
.brand .bn i{font-style:italic;color:var(--ox)}
:root[data-theme="dark"] .brand .bn i,@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .bn i{color:var(--gold-lit)}}
.bar-nav{display:flex;align-items:center;gap:.15rem}
.bar-link{font-family:var(--font-l);font-weight:600;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;padding:.5rem .7rem;position:relative}
.bar-link::after{content:"";position:absolute;left:.7rem;right:.7rem;bottom:.35rem;height:1.5px;background:var(--gold);
  transform:scaleX(0);transform-origin:left;transition:transform .22s var(--ease)}
.bar-link:hover::after,.bar-link[aria-current="page"]::after{transform:scaleX(1)}
.iconbtn{width:2.3rem;height:2.3rem;border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  cursor:pointer;display:grid;place-items:center;margin-left:.3rem}
.iconbtn:hover{background:var(--ink);color:var(--paper)}
.theme-btn .moon{display:none}
:root[data-theme="dark"] .theme-btn .sun{display:none}
:root[data-theme="dark"] .theme-btn .moon{display:block}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-btn .sun{display:none}:root:not([data-theme="light"]) .theme-btn .moon{display:block}}
.bar-toggle{display:none}
@media (max-width:52rem){
  .bar-toggle{display:grid}
  .bar-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    padding:.5rem max(1.3rem,env(safe-area-inset-left)) 1.1rem;background:var(--paper);border-bottom:1.5px solid var(--ink);
    visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
  .bar.open .bar-nav{visibility:visible;opacity:1;transform:none;transition-delay:0s}
  .bar-link{font-size:.95rem;padding:.7rem 0}
  .bar-nav .btn{margin-top:.5rem;justify-content:center}
}

/* ── hero ────────────────────────────────────────────────────────────────── */
.hero{position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none}
.hero-in{position:relative;display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center;
  padding-block:clamp(2.5rem,6vw,5rem)}
@media (max-width:56rem){.hero-in{grid-template-columns:1fr;gap:2.2rem;text-align:center}.hero .actions{justify-content:center}.hero .orn{max-width:24rem;margin-inline:auto}}
.hero h1{margin:1rem 0 0}
.hero .tag{margin-top:1.3rem;font-family:var(--font-d);font-style:italic;font-size:clamp(1.3rem,1rem+1vw,1.9rem);color:var(--ox)}
:root[data-theme="dark"] .hero .tag,@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero .tag{color:var(--gold-lit)}}
.hero .sub{margin-top:1rem;color:var(--ink-soft);max-width:34ch}
@media (max-width:56rem){.hero .sub{margin-inline:auto}}
.hero-art{display:grid;place-items:center}
.hero-art svg{width:100%;max-width:26rem;height:auto;display:block}

/* the seal glows faintly in the dark bakehouse */
:root[data-theme="dark"] .seal,@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .seal{filter:drop-shadow(0 0 22px rgba(211,169,78,.28))}}

/* ── the four (menu) ─────────────────────────────────────────────────────── */
.menu{margin-top:2.5rem;border-top:1.5px solid var(--line)}
.item{display:grid;grid-template-columns:auto 1fr auto;gap:1.2rem;align-items:center;
  padding:1.35rem .2rem;border-bottom:1.5px solid var(--line)}
.item-cut{width:4.6rem;height:4.6rem;flex:0 0 auto}
.item-cut svg{width:100%;height:100%;display:block}
.item-main{min-width:0}
.item-top{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap}
.item .no{font-family:var(--font-l);color:var(--gold);font-size:.85rem;letter-spacing:.1em}
.item h3{font-size:clamp(1.3rem,2.6vw,1.9rem)}
.item .tag-sv{font-family:var(--font-l);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ox);border:1px solid var(--ox);padding:.05rem .35rem}
:root[data-theme="dark"] .item .tag-sv,@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .item .tag-sv{color:var(--gold-lit);border-color:var(--gold-lit)}}
.item .desc{color:var(--ink-soft);font-size:.95rem;margin-top:.2rem}
.item-right{display:flex;flex-direction:column;align-items:flex-end;gap:.5rem}
.item .price{font-family:var(--font-d);font-size:1.35rem}
/* vintage stepper */
.qty{display:inline-flex;align-items:center;border:1.5px solid var(--ink)}
.qty button{width:2rem;height:2rem;border:0;background:transparent;color:var(--ink);font-family:var(--font-d);
  font-size:1.2rem;line-height:1;cursor:pointer;display:grid;place-items:center}
.qty button:hover:not(:disabled){background:var(--gold);color:#241A0C}
.qty button:disabled{opacity:.32;cursor:not-allowed}
.qty .n{min-width:2rem;text-align:center;font-family:var(--font-l);font-weight:700;border-inline:1.5px solid var(--ink)}

/* the box tally line */
.tally{margin-top:2.2rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem 1.2rem;
  font-family:var(--font-d);font-size:clamp(1.15rem,2.2vw,1.5rem)}
.tally .sum{color:var(--ox)}
:root[data-theme="dark"] .tally .sum,@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .tally .sum{color:var(--gold-lit)}}
.tally .save{font-family:var(--font-l);font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft)}
.tally .btn{font-size:.78rem}

/* ── three services ──────────────────────────────────────────────────────── */
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,3vw,2rem);margin-top:2.5rem}
@media (max-width:54rem){.trio{grid-template-columns:1fr;gap:1.2rem}}
.svc h3{margin:.6rem 0 .5rem}
.svc p{color:var(--ink-soft);font-size:.97rem}
.svc .em{color:var(--ink);font-style:italic;font-family:var(--font-d)}

/* ── the RUSH — candlelit, always-warm ───────────────────────────────────── */
.rush{background:#1C1409;color:#F0E3C4;position:relative;overflow:hidden}
.rush::before{content:"";position:absolute;inset:0;background:radial-gradient(55% 60% at 50% 18%,rgba(211,169,78,.2),transparent 60%);pointer-events:none}
.rush .wrap{position:relative}
.rush .label{color:var(--gold-lit)}
.rush h2{color:#F5EBD0;font-size:clamp(2.6rem,8vw,5.2rem)}
.rush .measure{color:#E3D4B0;margin-top:1.3rem;font-size:clamp(1.1rem,1rem+.6vw,1.45rem);max-width:38ch}
.rush .cheddar{font-style:italic;font-family:var(--font-d);color:var(--gold-lit)}
.rush .fine{color:rgba(240,227,196,.5);font-size:.88rem;margin-top:1rem}
.rush .btn{border-color:#F0E3C4;color:#F0E3C4;margin-top:1.8rem}
.rush .btn:hover{background:var(--gold-lit);border-color:var(--gold-lit);color:#1C1409}

/* ── how it works ────────────────────────────────────────────────────────── */
.steps{list-style:none;margin:2rem 0 0;padding:0;display:grid;gap:1.3rem;max-width:42ch}
.steps li{display:grid;grid-template-columns:auto 1fr;gap:1rem;align-items:baseline}
.steps .s{font-family:var(--font-d);font-size:1.6rem;color:var(--gold);width:1.5rem}

/* ── forms ───────────────────────────────────────────────────────────────── */
.field{display:grid;gap:.4rem;margin-bottom:1.1rem}
.field label{font-family:var(--font-l);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.input{width:100%;min-height:52px;padding:.8rem 1rem;background:var(--paper);border:1.5px solid var(--ink);color:var(--ink);
  font-family:var(--font-b);font-size:1.02rem}
.input::placeholder{color:color-mix(in oklab,var(--ink-soft) 85%,transparent)}
.input:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--ink)}
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.twos{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media (max-width:38rem){.twos{grid-template-columns:1fr}}

/* ── footer ──────────────────────────────────────────────────────────────── */
.foot{border-top:1.5px solid var(--ink);background:var(--paper-2)}
.foot-in{padding-block:clamp(2.5rem,5vw,3.5rem);display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem}
@media (max-width:52rem){.foot-in{grid-template-columns:1fr;gap:1.5rem}}
.foot .bn{font-family:var(--font-d);font-size:1.4rem}
.foot p{color:var(--ink-soft);margin-top:.7rem;max-width:38ch;font-size:.95rem}
.foot h4{font-family:var(--font-l);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:.7rem}
.foot a{display:block;color:var(--ink);text-decoration:none;padding:.2rem 0;font-size:.97rem}
.foot a:hover{color:var(--ox)}
:root[data-theme="dark"] .foot a:hover,@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .foot a:hover{color:var(--gold-lit)}}
.foot-legal{border-top:1px solid var(--line);padding-block:1.2rem;color:var(--ink-soft);font-size:.82rem;
  font-family:var(--font-l);letter-spacing:.04em;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}

/* banner */
.banner{background:var(--ink);color:var(--paper);text-align:center;font-family:var(--font-l);font-weight:600;
  font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;padding:.6rem 1rem}
.banner a{color:var(--gold-lit);text-decoration:underline;text-underline-offset:2px}

/* reveal */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}html{scroll-behavior:auto}}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.7rem 1rem;z-index:100}
.skip:focus{left:0}

/* no-JS: everything visible (reveals only animate WITH js via .js gate) */
.no-js .reveal{opacity:1;transform:none}

/* ══ POLISH — folk-craft ornament, the bakehouse scene, interactives ══════ */

/* folk divider (a bespoke SVG ornament sits inside) */
.folk{display:flex;justify-content:center;padding-block:clamp(1.5rem,4vw,2.5rem)}
.folk svg{width:min(100%,20rem);height:auto;color:var(--gold)}

/* ornamental frame corners (knotwork ticks) */
.frame{--c:var(--gold)}
.frame .corner{position:absolute;width:22px;height:22px;color:var(--gold);pointer-events:none}
.frame .corner.tl{top:-2px;left:-2px}
.frame .corner.tr{top:-2px;right:-2px;transform:scaleX(-1)}
.frame .corner.bl{bottom:-2px;left:-2px;transform:scaleY(-1)}
.frame .corner.br{bottom:-2px;right:-2px;transform:scale(-1)}

/* drop cap — illuminated initial */
.dropcap::first-letter{font-family:var(--font-d);font-weight:500;float:left;font-size:3.6em;line-height:.72;
  padding:.06em .12em .02em 0;color:var(--ox)}
:root[data-theme="dark"] .dropcap::first-letter,@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .dropcap::first-letter{color:var(--gold-lit)}}

/* ── the bakehouse scene ─────────────────────────────────────────────────── */
.bakehouse{display:grid;grid-template-columns:.95fr 1.05fr;gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
@media (max-width:56rem){.bakehouse{grid-template-columns:1fr;gap:2rem;text-align:center}.bakehouse .heritage{max-width:46ch;margin-inline:auto}}
.scene{position:relative}
.scene svg{width:100%;max-width:30rem;height:auto;display:block;margin-inline:auto}
/* the oven fire flickers (candlelight); still under reduced-motion */
.fire{transform-origin:center;transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
  .fire{animation:flicker 2.8s ease-in-out infinite}
  :root[data-theme="dark"] .scene{filter:drop-shadow(0 0 26px rgba(211,169,78,.18))}
}
@keyframes flicker{0%,100%{opacity:.9}45%{opacity:1}70%{opacity:.82}}

/* seal star twinkles on hover/focus */
.seal .twinkle{transform-origin:center;transform-box:fill-box;transition:transform .4s var(--ease),opacity .4s var(--ease)}
.hero-art:hover .seal .twinkle,.seal:focus-within .twinkle{transform:scale(1.35) rotate(15deg)}
@media (prefers-reduced-motion:no-preference){:root[data-theme="dark"] .seal .twinkle{animation:twinkle 3.5s ease-in-out infinite}}
@keyframes twinkle{0%,100%{opacity:1}50%{opacity:.55}}

/* menu item hover — a gold folk-tick slides in + name shifts warm */
.item{transition:background .2s var(--ease)}
.item:hover{background:color-mix(in oklab,var(--gold) 8%,transparent)}
.item .no{transition:color .2s}
.item:hover .no{color:var(--ox)}
:root[data-theme="dark"] .item:hover .no{color:var(--gold-lit)}
.item h3{position:relative}
.item h3::before{content:"❧";position:absolute;left:-1.4em;color:var(--gold);opacity:0;transform:translateX(.3em);
  transition:opacity .2s,transform .2s}
.item:hover h3::before{opacity:1;transform:translateX(0)}
@media (max-width:40rem){.item h3::before{display:none}}

/* section heading flourish */
.hgroup{position:relative}

/* ══ ELEGANCE PASS — the crest, background ornament, watermarks ═══════════ */

/* the coin crest in the wordmark */
.brand .crest{width:38px;height:38px;flex:0 0 auto;display:inline-block;line-height:0;
  filter:drop-shadow(0 1px 2px rgba(60,40,15,.3))}
:root[data-theme="dark"] .brand .crest,@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .crest{filter:drop-shadow(0 0 8px rgba(211,169,78,.35))}}
.foot .brand .crest{width:34px;height:34px}

/* a faint engraved fleuron, tiled across the whole page — texture, not noise */
body{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%236E5735' stroke-width='.8' opacity='.09'%3E%3Cpath d='M42 30 q4 8 0 16 q-4 -8 0 -16 M30 42 q8 4 16 0 q-8 -4 -16 0'/%3E%3Ccircle cx='42' cy='42' r='2.2'/%3E%3Cpath d='M42 20 l1 3 3 .2-2.4 1.8.8 3-2.4-1.7-2.4 1.7.8-3-2.4-1.8 3-.2z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(rgba(110,87,53,.045) .5px,transparent .6px);
  background-size:84px 84px,5px 5px;
}
:root[data-theme="dark"] body,@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) body{
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='84' height='84' viewBox='0 0 84 84'%3E%3Cg fill='none' stroke='%23D3A94E' stroke-width='.8' opacity='.07'%3E%3Cpath d='M42 30 q4 8 0 16 q-4 -8 0 -16 M30 42 q8 4 16 0 q-8 -4 -16 0'/%3E%3Ccircle cx='42' cy='42' r='2.2'/%3E%3Cpath d='M42 20 l1 3 3 .2-2.4 1.8.8 3-2.4-1.7-2.4 1.7.8-3-2.4-1.8 3-.2z'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(rgba(211,169,78,.05) .5px,transparent .6px);
  background-size:84px 84px,5px 5px;
}

/* hero filigree corners + a ghosted radiance behind the seal */
.hero{position:relative}
.hero .filigree{position:absolute;width:96px!important;height:96px!important;color:var(--gold);opacity:.32;pointer-events:none;z-index:0}
.hero .filigree.tl{top:1rem;left:0}
.hero .filigree.br{bottom:1rem;right:0;transform:rotate(180deg)}
.hero-in{position:relative;z-index:1}
.hero-art{position:relative}
.hero-art::before{content:"";position:absolute;inset:-16% ;z-index:-1;
  background:radial-gradient(circle,color-mix(in oklab,var(--gold) 12%,transparent),transparent 62%);
  opacity:.7}
@media (prefers-reduced-motion:no-preference){:root[data-theme="dark"] .hero-art::before{animation:breathe 6s ease-in-out infinite}}
@keyframes breathe{0%,100%{opacity:.5}50%{opacity:.85}}


/* ornamental section rule with a centered fleuron (upgrade of .orn) */
.orn .m{font-size:1.3rem;filter:drop-shadow(0 0 6px color-mix(in oklab,var(--gold) 40%,transparent))}

/* frame + panels get a faint inner parchment so ornament reads on them */
.frame{background:linear-gradient(var(--paper),var(--paper)) padding-box}

/* ── sound toggle: note icon → dancing equaliser bars when playing ────────── */
.sound-btn .bars{display:none;align-items:flex-end;gap:2px;height:15px}
.sound-btn .bars i{width:2.5px;background:currentColor;height:5px;border-radius:1px}
.sound-btn.on .off{display:none}
.sound-btn.on .bars{display:flex}
@media (prefers-reduced-motion:no-preference){
  .sound-btn.on .bars i{animation:eq .9s ease-in-out infinite}
  .sound-btn.on .bars i:nth-child(2){animation-delay:.15s}
  .sound-btn.on .bars i:nth-child(3){animation-delay:.3s}
  .sound-btn.on .bars i:nth-child(4){animation-delay:.45s}
}
@keyframes eq{0%,100%{height:4px}50%{height:14px}}
.sound-btn.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* — richer scone medallions in the menu — */
.item-cut{filter:drop-shadow(0 1px 1px rgba(60,40,15,.18))}

/* the interactive hearth */
.hearth{cursor:crosshair}
:root[data-theme="dark"] .hero-art:has(.hearth)::before,@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-art:has(.hearth)::before{opacity:.9}}