/* ==========================================================
   AIWine · Learn as you grow — v2 showcase styles
   Modern CSS: scroll-driven animations (with graceful
   fallback), view transitions, container queries, :has(),
   @property, oklch, text-wrap, scroll-snap, 3D transforms.
   ========================================================== */

:root{
  --r1:#C2452F; --r2:#3F7D54; --r3:#9A6B2B; --r4:#3E6E86; --r5:#7A4E86; --r6:#B0823B;
  --vine:#5E8C3A;
}
@property --shine { syntax:'<angle>'; inherits:false; initial-value:0deg; }

html{ scroll-behavior:smooth; scroll-padding-top:76px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{ background:var(--bg); color:var(--ink); }
a{ color:inherit; }
.mono{ font-family:'JetBrains Mono',monospace; }
.serif{ font-family:'Cormorant Garamond',serif; }
.lw{ max-width:1120px; margin:0 auto; padding:0 24px; }
h1,h2,h3{ text-wrap:balance; }
p{ text-wrap:pretty; }

/* ---------- top scroll progress ---------- */
.scroll-progress{ position:fixed; top:0; left:0; right:0; height:3px; z-index:80;
  background:linear-gradient(90deg,var(--brass),var(--claret));
  transform-origin:0 50%; transform:scaleX(var(--sp,0)); }
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion: no-preference){
    .scroll-progress{ animation:sp-grow linear both; animation-timeline:scroll(root); transform:none; }
  }
}
@keyframes sp-grow{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }

/* ---------- nav ---------- */
.lnav{ position:sticky; top:0; z-index:90; background:color-mix(in oklab,var(--bg),transparent 10%);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--line); }
.lnav-in{ display:flex; align-items:center; gap:16px; padding:12px 24px; max-width:1200px; margin:0 auto; }
.lnav .mark{ font-family:'Cormorant Garamond',serif; font-size:28px; white-space:nowrap; cursor:pointer; display:inline-flex; align-items:baseline; }
.lnav .mark .dot{ width:7px; height:7px; border-radius:50%; background:var(--claret); display:inline-block; margin:0 4px; transform:translateY(-3px); }
.lnav .mark .sfx{ font-family:'Fredoka','Manrope',sans-serif; font-size:14px; font-weight:600; letter-spacing:.01em; text-transform:none; color:var(--l-gold,#C49A3A); margin-left:8px; align-self:baseline; }
.chips{ display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; margin-left:auto; }
.chips::-webkit-scrollbar{ display:none; }
.chip{ flex:none; font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 12px; border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--ink-soft);
  cursor:pointer; text-decoration:none; transition:.18s; white-space:nowrap; }
.chip:hover{ border-color:var(--claret); color:var(--claret); }
.chip.on{ background:var(--ink); color:var(--bg); border-color:var(--ink); }

/* ---------- vine progress rail ---------- */
.vine-rail{ position:fixed; left:14px; top:90px; bottom:24px; width:44px; z-index:50; pointer-events:none; }
.vine-rail svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.vine-rail .stem-bg{ stroke:color-mix(in oklab,var(--line),transparent 20%); }
.vine-rail .stem{ stroke:var(--vine); }
.vine-node{ position:absolute; left:50%; width:13px; height:13px; border-radius:50%;
  transform:translate(-50%,-50%) scale(.62); background:var(--bg); border:2px solid var(--line);
  pointer-events:auto; cursor:pointer; transition:transform .35s cubic-bezier(.34,1.56,.64,1), background .3s, border-color .3s; }
.vine-node.past{ background:var(--vine); border-color:var(--vine); transform:translate(-50%,-50%) scale(.8); }
.vine-node.on{ background:var(--ac,var(--claret)); border-color:var(--ac,var(--claret)); transform:translate(-50%,-50%) scale(1.15); }
.vine-node .tip{ position:absolute; left:22px; top:50%; transform:translateY(-50%) translateX(-6px);
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--ink); color:var(--bg); padding:4px 9px; border-radius:6px; white-space:nowrap;
  opacity:0; transition:.2s; }
.vine-node:hover .tip{ opacity:1; transform:translateY(-50%) translateX(0); }
@media (max-width:1220px){ .vine-rail{ display:none; } }

/* ---------- hero ---------- */
.lhero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center;
  background:
    radial-gradient(120% 90% at 80% -10%, #7A2E3A 0%, transparent 55%),
    linear-gradient(175deg,#3A0E18 0%, #5C1B27 58%, #431019 100%);
  color:#F4EFE5; overflow:hidden; }
.lhero::after{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.25'/%3E%3C/svg%3E"); }
.lhero canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.lhero .lw{ position:relative; z-index:2; padding-top:64px; padding-bottom:120px; }
.lhero .kick{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--brass-soft);
  display:inline-flex; align-items:center; gap:10px; }
.lhero .kick::before{ content:''; width:26px; height:1px; background:var(--brass-soft); }
.lhero h1{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(42px,7.4vw,86px); line-height:1.0;
  letter-spacing:-.015em; margin:22px 0 0; max-width:15ch; }
.lhero h1 em{ font-style:italic; color:var(--brass-soft); }
.lhero h1 .w{ display:inline-block; }
.lhero p.lede{ font-size:clamp(15px,2.2vw,18.5px); line-height:1.65; color:color-mix(in oklab,#F4EFE5,transparent 22%); max-width:58ch; margin:24px 0 0; }
.lhero .note{ margin-top:24px; font-size:13px; color:color-mix(in oklab,#F4EFE5,transparent 32%); display:inline-flex; align-items:center; gap:9px;
  border:1px dashed color-mix(in oklab,#F4EFE5,transparent 65%); border-radius:999px; padding:8px 16px; }
.scroll-cue{ position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  color:color-mix(in oklab,#F4EFE5,transparent 40%); }
.scroll-cue .line{ width:1px; height:34px; background:currentColor; overflow:hidden; position:relative; }
.scroll-cue .line::after{ content:''; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--brass-soft); animation:cue-drop 1.8s ease-in-out infinite; }
@keyframes cue-drop{ 0%{ top:-100%; } 60%,100%{ top:100%; } }
@media (prefers-reduced-motion: reduce){ .scroll-cue .line::after{ animation:none; } }

/* hero word reveal */
@media (prefers-reduced-motion: no-preference){
  .lhero .w{ opacity:0; transform:translateY(28px) rotate(2deg); animation:word-in .8s cubic-bezier(.22,1,.36,1) both; animation-delay:calc(.25s + var(--wi) * .07s); }
  .lhero .kick, .lhero p.lede, .lhero .note{ opacity:0; animation:soft-in .9s ease both; }
  .lhero p.lede{ animation-delay:.9s; } .lhero .note{ animation-delay:1.1s; } .lhero .kick{ animation-delay:.1s; }
}
@keyframes word-in{ from{ opacity:0; transform:translateY(28px) rotate(2deg);} to{ opacity:1; transform:none;} }
@keyframes soft-in{ from{ opacity:0; transform:translateY(12px);} to{ opacity:1; transform:none;} }

/* ---------- topic index (scroll-snap strip) ---------- */
.topic-strip{ padding:26px 0 30px; border-bottom:1px solid var(--line); }
.topic-scroll{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(215px,1fr); gap:13px;
  overflow-x:auto; scroll-snap-type:x mandatory; padding:6px 24px 18px; max-width:1200px; margin:0 auto;
  scrollbar-width:thin; scrollbar-color:var(--line) transparent; }
.topic{ scroll-snap-align:start; text-align:left; border:1px solid var(--line); border-radius:15px; background:var(--card);
  padding:18px; cursor:pointer; display:flex; flex-direction:column; gap:9px; text-decoration:none; color:inherit;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), border-color .2s, box-shadow .25s; }
.topic:hover{ transform:translateY(-4px); border-color:color-mix(in oklab,var(--ac),var(--line) 30%); box-shadow:0 18px 44px rgba(27,20,16,.1); }
.topic:active{ transform:translateY(-1px) scale(.985); }
.topic .ti{ width:40px; height:40px; border-radius:11px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in oklab,var(--ac),transparent 86%); color:var(--ac); transition:transform .25s; }
.topic:hover .ti{ transform:rotate(-6deg) scale(1.08); }
.topic h3{ font-family:'Cormorant Garamond',serif; font-weight:600; font-size:20px; }
.topic p{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }

/* ---------- sections ---------- */
section.block{ padding:88px 0; border-top:1px solid var(--line); position:relative; }
.blab{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--ac,var(--brass));
  display:inline-flex; align-items:center; gap:9px; }
.blab::before{ content:''; width:22px; height:1px; background:currentColor; }
.bt{ font-family:'Cormorant Garamond',serif; font-weight:500; font-size:clamp(30px,4.8vw,48px); line-height:1.05; letter-spacing:-.01em; margin:12px 0 0; }
.bt em{ font-style:italic; color:var(--ac,var(--claret)); }
.bsub{ font-size:15.5px; color:var(--ink-soft); line-height:1.65; max-width:62ch; margin:14px 0 0; }

/* ---------- scroll reveals ---------- */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .rv{ animation:rv-rise .8s cubic-bezier(.22,1,.36,1) both; animation-timeline:view(); animation-range:entry 4% entry 52%; }
  }
}
html.io .rv{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1); transition-delay:var(--rvd,0s); }
html.io .rv.in{ opacity:1; transform:none; }
@keyframes rv-rise{ from{ opacity:0; transform:translateY(30px);} to{ opacity:1; transform:none;} }

/* ---------- regions ---------- */
.reg-wrap{ display:grid; grid-template-columns:280px 1fr; gap:24px; margin-top:32px; container-type:inline-size; }
.reg-list{ display:flex; flex-direction:column; gap:6px; }
.reg-btn{ display:flex; align-items:center; gap:11px; text-align:left; padding:12px 14px; border:1px solid var(--line);
  border-radius:11px; background:var(--card); cursor:pointer; transition:.16s; font-size:14px; font-weight:600; }
.reg-btn:hover{ border-color:var(--r1); transform:translateX(3px); }
.reg-btn.on{ background:var(--ink); color:var(--bg); border-color:var(--ink); }
.reg-btn .pin{ width:9px; height:9px; border-radius:50%; flex:none; transition:transform .3s cubic-bezier(.34,1.56,.64,1); }
.reg-btn.on .pin{ transform:scale(1.5); }
.reg-btn .seen{ margin-left:auto; opacity:0; transform:scale(.4); transition:.3s cubic-bezier(.34,1.56,.64,1); color:var(--vine); display:flex; }
.reg-btn.was .seen{ opacity:1; transform:none; }
.reg-btn.on .seen{ color:var(--brass-soft); }
.reg-stage{ perspective:1100px; }
.reg-detail{ border:1px solid var(--line); border-radius:18px; overflow:hidden; background:var(--card);
  view-transition-name:reg-card; transform-style:preserve-3d; will-change:transform;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .18s ease-out; position:relative; }
.reg-detail .glare{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:var(--go,0);
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.22), transparent 60%); }
.reg-art{ min-height:190px; position:relative; display:flex; align-items:flex-end; padding:18px 20px 20px; padding-top:44px;
  background-color:var(--bg-alt); background-size:cover; background-position:center; color:#fff; }
.reg-art.loaded::after{ content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(18,11,9,.12) 0%, rgba(18,11,9,.10) 45%, rgba(18,11,9,.58) 100%); }
.reg-art{ opacity:0; transition:opacity .4s ease; }
.reg-art.loaded{ opacity:1; }
.reg-art .rn{ font-family:'Cormorant Garamond',serif; font-size:34px; font-weight:600; line-height:1.02; position:relative; z-index:2; }
.reg-art .rk{ position:absolute; top:16px; left:20px; z-index:2; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; opacity:.9; }
.reg-art .ridx{ position:absolute; top:12px; right:18px; z-index:2; font-family:'Cormorant Garamond',serif; font-size:44px; font-style:italic; opacity:.38; }
.reg-body{ padding:22px; }
.reg-facts{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:16px; }
.reg-fact .k{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.reg-fact .v{ font-size:15px; font-weight:600; margin-top:3px; }
.reg-did{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; border-left:2px solid var(--rc,#C2452F); padding-left:13px; }
.reg-progress{ margin-top:14px; display:flex; align-items:center; gap:10px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.reg-progress .bar{ flex:1; height:4px; border-radius:99px; background:var(--bg-alt); overflow:hidden; }
.reg-progress .bar i{ display:block; height:100%; border-radius:99px; background:var(--r1); width:var(--w,0%); transition:width .5s cubic-bezier(.22,1,.36,1); }
@container (max-width:680px){ .reg-wrap{ grid-template-columns:1fr; } }
::view-transition-old(reg-card), ::view-transition-new(reg-card){ animation-duration:.45s; }

/* ---------- seasons scroll-scrub ---------- */
.seasons-scrub{ height:380vh; position:relative; }
.ss-sticky{ position:sticky; top:0; height:100svh; overflow:hidden; }
.ss-sky{ position:absolute; inset:0; opacity:0; transition:opacity .3s linear; }
.ss-sun{ position:absolute; width:88px; height:88px; border-radius:50%; z-index:2;
  background:radial-gradient(circle at 38% 34%, #F7E7B0, #E5C36A 62%, #C9A23A);
  box-shadow:0 0 70px 24px rgba(229,195,106,.45); left:var(--sx,10%); top:var(--sy,60%); }
.ss-ground{ position:absolute; left:0; right:0; bottom:0; height:26%; z-index:2;
  background:linear-gradient(180deg, transparent, rgba(15,12,8,.55)); }
.ss-vines{ position:absolute; left:50%; bottom:-4%; transform:translateX(-50%); width:min(1300px,125%); z-index:3; opacity:.9;
  filter:drop-shadow(0 -8px 30px rgba(0,0,0,.25)); }
.ss-hud{ position:absolute; z-index:5; left:0; right:0; bottom:0; padding:0 24px calc(34px + env(safe-area-inset-bottom)); display:flex; justify-content:center; }
.ss-card{ width:min(660px,100%); background:color-mix(in oklab,#14100C,transparent 18%); backdrop-filter:blur(10px);
  border:1px solid rgba(244,239,229,.16); border-radius:18px; padding:22px 26px; color:#F4EFE5; }
.ss-card .mo{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--brass-soft); }
.ss-card h4{ font-family:'Cormorant Garamond',serif; font-size:clamp(26px,4vw,36px); font-weight:600; line-height:1; display:flex; align-items:center; gap:12px; }
.ss-card h4 .sym{ font-size:.7em; }
.ss-card p{ font-size:14px; line-height:1.62; color:color-mix(in oklab,#F4EFE5,transparent 18%); margin-top:9px; min-height:4.8em; }
.ss-dots{ display:flex; gap:8px; margin-top:16px; }
.ss-dots button{ flex:1; height:4px; border-radius:99px; background:rgba(244,239,229,.22); cursor:pointer; position:relative; overflow:hidden; border:none; padding:0; }
.ss-dots button i{ position:absolute; inset:0; background:var(--brass-soft); transform:scaleX(var(--f,0)); transform-origin:0 50%; display:block; }
.ss-title{ position:absolute; z-index:5; top:calc(76px + 4vh); left:0; right:0; text-align:center; color:#F4EFE5; padding:0 24px; pointer-events:none; }
.ss-title .blab{ color:var(--brass-soft); }
.ss-title .bt{ color:#F4EFE5; }
.ss-title .bt em{ color:var(--brass-soft); }
.ss-hint{ position:absolute; z-index:5; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(244,239,229,.75); background:rgba(20,16,12,.5); border:1px solid rgba(244,239,229,.2);
  padding:10px 18px; border-radius:999px; backdrop-filter:blur(6px); transition:opacity .5s; }
.ss-hint.off{ opacity:0; }

/* ---------- winemaking timeline ---------- */
.make-line{ position:relative; margin-top:36px; padding-left:34px; }
.make-line::before{ content:''; position:absolute; left:16px; top:8px; bottom:8px; width:2px; background:var(--line); border-radius:2px; }
.make-line .fill{ position:absolute; left:16px; top:8px; bottom:8px; width:2px; border-radius:2px; background:var(--r3);
  transform-origin:0 0; transform:scaleY(var(--mf,0)); }
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .make-line .fill{ animation:mf-grow linear both; animation-timeline:view(); animation-range:entry 20% exit 80%; transform:none; }
  }
}
@keyframes mf-grow{ from{ transform:scaleY(0);} to{ transform:scaleY(1);} }
.wstep{ position:relative; border:1px solid var(--line); border-radius:14px; background:var(--card); padding:18px 20px;
  cursor:pointer; transition:border-color .2s, box-shadow .25s; margin-bottom:12px; }
.wstep:hover{ border-color:var(--r3); }
.wstep::before{ content:''; position:absolute; left:-24px; top:26px; width:14px; height:14px; border-radius:50%;
  background:var(--bg); border:2px solid var(--line); transition:.3s cubic-bezier(.34,1.56,.64,1); }
.wstep.open::before{ background:var(--r3); border-color:var(--r3); transform:scale(1.25); }
.wstep .wh{ display:flex; align-items:center; gap:14px; }
.wstep .wn{ width:36px; height:36px; flex:none; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-family:'Cormorant Garamond',serif; font-weight:600; font-size:19px; background:color-mix(in oklab,var(--r3),transparent 85%); color:var(--r3); }
.wstep .wt{ font-weight:600; font-size:16px; flex:1; }
.wstep .wtag{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
.wstep .chev{ color:var(--muted); transition:transform .3s; display:flex; }
.wstep.open .chev{ transform:rotate(180deg); }
.wstep .wbody{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .38s cubic-bezier(.22,1,.36,1); }
.wstep.open .wbody{ grid-template-rows:1fr; }
.wstep .wbody > div{ overflow:hidden; }
.wstep .wd{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; padding-top:12px; }
.bubbles{ display:flex; gap:6px; align-items:flex-end; height:26px; margin-top:10px; }
.bubbles i{ width:8px; height:8px; border-radius:50%; background:color-mix(in oklab,var(--r3),transparent 40%); }
@media (prefers-reduced-motion: no-preference){
  .wstep.open .bubbles i{ animation:bub 1.6s ease-in-out infinite; animation-delay:calc(var(--bi) * .22s); }
}
@keyframes bub{ 0%,100%{ transform:translateY(0) scale(.8); opacity:.5;} 50%{ transform:translateY(-14px) scale(1.15); opacity:1;} }

/* ---------- aroma wheel ---------- */
.taste-top{ display:flex; align-items:center; gap:clamp(20px,4vw,52px); flex-wrap:wrap; }
.taste-nose{ flex:none; width:clamp(160px,22vw,240px); height:auto; mix-blend-mode:multiply; }
@media (prefers-reduced-motion: no-preference){ .taste-nose{ animation:noseWobble 5s ease-in-out infinite; transform-origin:50% 80%; } }
@keyframes noseWobble{ 0%,100%{ transform:rotate(-3deg);} 50%{ transform:rotate(4deg) translateY(-4px);} }
.aroma-lab{ display:grid; grid-template-columns:minmax(300px,430px) 1fr; gap:clamp(24px,4vw,54px); align-items:center; margin-top:34px; container-type:inline-size; }
.aroma-wheel{ width:100%; aspect-ratio:1; position:relative; }
.aroma-wheel svg{ width:100%; height:100%; overflow:visible; }
.aroma-wheel g.seg{ cursor:pointer; transition:transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s, filter .3s; transform-origin:50% 50%; transform-box:view-box; }
.aroma-wheel g.seg:hover{ transform:scale(1.045); }
.aroma-wheel g.seg.on{ transform:scale(1.08); filter:drop-shadow(0 10px 22px rgba(27,20,16,.3)); }
.aroma-wheel.has-sel g.seg:not(.on){ opacity:.42; }
.aroma-wheel text{ font-family:'JetBrains Mono',monospace; font-size:7.1px; letter-spacing:.08em; text-transform:uppercase; fill:#fff; pointer-events:none; }
.aroma-hub{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; width:38%; pointer-events:none; }
.aroma-hub .h-k{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
.aroma-hub .h-n{ font-family:'Cormorant Garamond',serif; font-size:clamp(18px,2.4cqw,24px); font-weight:600; line-height:1.05; margin-top:4px; }
.aroma-detail{ border:1px solid var(--line); border-radius:18px; background:var(--card); padding:26px 28px; view-transition-name:aroma-card; }
.aroma-detail .swatch{ width:34px; height:34px; border-radius:10px; margin-bottom:14px; transition:background .4s; }
.aroma-detail h5{ font-family:'Cormorant Garamond',serif; font-size:27px; font-weight:600; }
.aroma-detail p{ font-size:14px; color:var(--ink-soft); line-height:1.65; margin-top:9px; }
.aroma-detail .count{ margin-top:16px; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
@container (max-width:640px){ .aroma-lab{ grid-template-columns:1fr; } }

/* ---------- card grids (stories/food/careers/earth) ---------- */
.cwrap{ container-type:inline-size; }
.cgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(235px,1fr)); gap:14px; margin-top:30px; }
.card-l{ border:1px solid var(--line); border-radius:15px; background:var(--card); padding:20px; transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, border-color .2s; }
.card-l:hover{ transform:translateY(-4px); box-shadow:0 16px 40px rgba(27,20,16,.09); border-color:color-mix(in oklab,var(--ac),var(--line) 40%); }
.card-l .ci{ width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  background:color-mix(in oklab,var(--ac),transparent 86%); color:var(--ac); margin-bottom:12px; transition:transform .3s; }
.card-l:hover .ci{ transform:rotate(-7deg) scale(1.1); }
.card-l h4{ font-family:'Cormorant Garamond',serif; font-size:21px; font-weight:600; }
.card-l .role{ font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--ac); margin-top:2px; }
.card-l p{ font-size:13px; color:var(--ink-soft); line-height:1.55; margin-top:9px; }

.stories{ display:grid; grid-template-columns:repeat(auto-fill,minmax(255px,1fr)); gap:16px; margin-top:30px; perspective:1200px; }
.story{ border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--card);
  transform-style:preserve-3d; transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)); transition:transform .2s ease-out, box-shadow .25s; position:relative; }
.story:hover{ box-shadow:0 22px 50px rgba(27,20,16,.13); }
.story .glare{ position:absolute; inset:0; pointer-events:none; opacity:var(--go,0); z-index:2;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.2), transparent 60%); }
.story .art{ height:128px; background:linear-gradient(150deg,var(--sc),color-mix(in oklab,var(--sc),black 35%)); position:relative; }
.story .art .tag{ position:absolute; top:12px; left:14px; font-family:'JetBrains Mono',monospace; font-size:9.5px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.92); }
.story .sb{ padding:16px 18px; }
.story h4{ font-family:'Cormorant Garamond',serif; font-size:20px; font-weight:600; }
.story p{ font-size:13px; color:var(--ink-soft); line-height:1.55; margin-top:7px; }

.food{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:13px; margin-top:30px; }
.fp{ border:1px solid var(--line); border-radius:14px; background:var(--card); padding:18px; transition:.2s; position:relative; overflow:hidden; }
.fp::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--r6); transform:scaleX(0); transform-origin:0 50%; transition:transform .35s cubic-bezier(.22,1,.36,1); }
.fp:hover::after{ transform:scaleX(1); }
.fp .big{ font-family:'Cormorant Garamond',serif; font-size:30px; font-weight:600; color:var(--r6); font-style:italic; }
.fp h5{ font-size:14.5px; font-weight:700; margin-top:6px; }
.fp p{ font-size:12.5px; color:var(--ink-soft); line-height:1.55; margin-top:6px; }

/* ---------- quiz ---------- */
.quiz-wrap{ display:grid; grid-template-columns:auto 1fr; gap:clamp(24px,4vw,50px); align-items:start; margin-top:34px; container-type:inline-size; }
.q-ring{ position:relative; width:150px; height:150px; }
.q-ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.q-ring circle{ fill:none; stroke-width:7; }
.q-ring .track{ stroke:var(--bg-alt); }
.q-ring .prog{ stroke:var(--claret); stroke-linecap:round; transition:stroke-dashoffset .6s cubic-bezier(.22,1,.36,1); }
.q-ring .mid{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.q-ring .mid .n{ font-family:'Cormorant Garamond',serif; font-size:38px; font-weight:600; line-height:1; }
.q-ring .mid .k{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:3px; }
.quiz{ border:1px solid var(--line); border-radius:18px; background:var(--card); padding:28px; max-width:680px; view-transition-name:quiz-card; }
.q-prog{ font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.q-q{ font-family:'Cormorant Garamond',serif; font-size:27px; font-weight:600; line-height:1.15; margin:10px 0 18px; }
.q-opts{ display:flex; flex-direction:column; gap:9px; }
.q-opt{ text-align:left; padding:14px 16px; border:1px solid var(--line); border-radius:12px; background:var(--bg); cursor:pointer; font-size:14.5px;
  transition:border-color .15s, background .2s, transform .12s; }
.q-opt:hover{ border-color:var(--claret); transform:translateX(3px); }
.q-opt:active{ transform:scale(.985); }
.q-opt.correct{ background:color-mix(in oklab,var(--r2),transparent 84%); border-color:var(--r2); color:#1c4a30; font-weight:600; }
@media (prefers-reduced-motion: no-preference){
  .q-opt.correct{ animation:q-pop .45s cubic-bezier(.34,1.56,.64,1); }
  .q-opt.wrong{ animation:q-shake .4s ease; }
}
@keyframes q-pop{ 0%{ transform:scale(1);} 40%{ transform:scale(1.025);} 100%{ transform:scale(1);} }
@keyframes q-shake{ 0%,100%{ transform:translateX(0);} 25%{ transform:translateX(-6px);} 60%{ transform:translateX(5px);} }
.q-opt.wrong{ background:color-mix(in oklab,var(--claret),transparent 86%); border-color:var(--claret); }
.q-opt:disabled{ cursor:default; }
.quiz:has(.q-opt.correct) .q-q{ color:var(--ink); }
.q-exp{ font-size:13.5px; color:var(--ink-soft); line-height:1.6; margin-top:14px; padding:13px 15px; background:var(--bg); border-radius:11px; border-left:2px solid var(--brass); display:none; }
.q-exp.show{ display:block; }
.q-next{ margin-top:16px; }
.q-done{ text-align:center; padding:14px 0; }
.q-done .score{ font-family:'Cormorant Garamond',serif; font-size:56px; font-weight:600; color:var(--claret); line-height:1; }
@container (max-width:560px){ .quiz-wrap{ grid-template-columns:1fr; } .q-ring{ margin:0 auto; } }
::view-transition-old(quiz-card), ::view-transition-new(quiz-card){ animation-duration:.35s; }

/* ---------- badges (medallions) ---------- */
.badges{ display:grid; grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); gap:16px; margin-top:30px; }
.badge{ border:1px solid var(--line); border-radius:16px; background:var(--card); padding:22px 16px 18px; text-align:center; transition:.3s; }
.badge .coin{ width:74px; height:74px; border-radius:50%; margin:0 auto 12px; display:flex; align-items:center; justify-content:center;
  background:var(--bg-alt); color:var(--muted); border:2px solid var(--line); position:relative; }
.badge.earned{ border-color:color-mix(in oklab,var(--brass),var(--line) 30%); box-shadow:0 12px 34px rgba(169,134,84,.16); }
.badge.earned .coin{ color:#5C4322; border-color:transparent;
  background:conic-gradient(from var(--shine), #E7CD9A, #A98654 28%, #D9BC85 52%, #8A6A3E 74%, #E7CD9A);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.35), 0 6px 18px rgba(169,134,84,.35); }
@media (prefers-reduced-motion: no-preference){
  .badge.earned .coin{ animation:coin-shine 5s linear infinite; }
  .badge.earned.fresh .coin{ animation:coin-flip 1s cubic-bezier(.22,1,.36,1), coin-shine 5s linear 1s infinite; }
}
@keyframes coin-shine{ from{ --shine:0deg; } to{ --shine:360deg; } }
@keyframes coin-flip{ from{ transform:rotateY(0);} to{ transform:rotateY(720deg);} }
.badge h5{ font-family:'Cormorant Garamond',serif; font-size:18px; font-weight:600; }
.badge p{ font-size:11.5px; color:var(--muted); line-height:1.45; margin-top:4px; }
.badge:not(.earned){ opacity:.62; }
.badge:not(.earned) .coin svg{ opacity:.5; }

/* ---------- toast & confetti ---------- */
.ltoast{ position:fixed; left:50%; bottom:28px; transform:translate(-50%,16px); z-index:90; opacity:0; pointer-events:none;
  background:var(--ink); color:var(--bg); font-size:13.5px; font-weight:600; padding:12px 20px; border-radius:999px;
  display:flex; align-items:center; gap:9px; box-shadow:0 16px 40px rgba(0,0,0,.3); transition:.35s cubic-bezier(.22,1,.36,1); }
.ltoast.show{ opacity:1; transform:translate(-50%,0); }
#confetti{ position:fixed; inset:0; z-index:95; pointer-events:none; }

/* ---------- footer ---------- */
.lfoot{ border-top:1px solid var(--line); padding:70px 0 90px; text-align:center;
  background:linear-gradient(180deg, var(--bg), var(--bg-alt)); }
.lfoot .serif{ font-size:clamp(28px,4vw,38px); font-weight:500; font-style:italic; color:var(--claret); }
.lfoot p{ font-size:14.5px; color:var(--ink-soft); max-width:48ch; margin:14px auto 0; line-height:1.65; }
.lfoot .fnote{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:26px; }

/* ---------- responsive ---------- */
@media (max-width:720px){
  section.block{ padding:64px 0; }
  .reg-wrap{ grid-template-columns:1fr; }
  .quiz-wrap{ grid-template-columns:1fr; }
  .q-ring{ margin:0 auto; }
  .aroma-lab{ grid-template-columns:1fr; }
  .lnav .mark .sfx{ display:none; }
}