/* Design layer 2026-10-14 — loaded after style.css */
:root{--cran:#8f1626;--cran2:#b3263a;--pine:#1c3a2e;--gold:#c9a24a;--cream:#faf6ef;--paper:#fff;--ink:#1f1a17;--muted:#6b5f57;--line:#eadfce;--shadow:0 1px 2px rgba(31,26,23,.05),0 8px 24px rgba(31,26,23,.07);--shadow-h:0 2px 4px rgba(31,26,23,.06),0 18px 40px rgba(31,26,23,.14);--ease:cubic-bezier(.2,.7,.2,1);color-scheme:light}
html[data-theme=dark]{--cran:#ff8a8f;--cran2:#ffb0b3;--pine:#7fc8a5;--gold:#e5c27a;--cream:#14110f;--paper:#1f1a17;--ink:#f3ece4;--muted:#b9aca1;--line:#3a312b;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35);--shadow-h:0 18px 40px rgba(0,0,0,.55);color-scheme:dark}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:var(--cream);color:var(--ink);-webkit-font-smoothing:antialiased;transition:background-color .3s,color .3s}
h1,h2,h3,.logo,.hero h1{font-family:Fraunces,Georgia,serif;letter-spacing:-.01em}
h1,h2,.hero h1{color:var(--cran)}a{color:var(--cran)}
.hero h1{font-weight:700;font-size:clamp(2rem,5vw,3.2rem);line-height:1.08;background:linear-gradient(100deg,var(--cran) 0%,var(--cran2) 45%,var(--gold) 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
/* sticky blurred header */
.top{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--cran) 88%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);transition:box-shadow .3s,padding .3s}
html[data-theme=dark] .top{background:rgba(20,17,15,.78);border-bottom:1px solid var(--line)}
html[data-theme=dark] .top .logo,html[data-theme=dark] .top nav a{color:var(--ink)}
.top.scrolled{box-shadow:0 6px 20px rgba(0,0,0,.15)}
.top nav a{position:relative}.top nav a::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}.top nav a:hover::after{transform:scaleX(1)}
.theme-tg{margin-left:14px;background:transparent;border:1px solid rgba(255,255,255,.5);color:#fff;border-radius:99px;width:34px;height:34px;cursor:pointer;font-size:1rem;line-height:1;transition:transform .3s var(--ease),background .2s}.theme-tg:hover{background:rgba(255,255,255,.15);transform:rotate(-20deg)}
html[data-theme=dark] .theme-tg{color:var(--ink);border-color:var(--line)}
/* reading progress */
.rprog{position:fixed;top:0;left:0;height:3px;width:100%;z-index:60;background:linear-gradient(90deg,var(--gold),var(--cran2));transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
/* animated gradient accent strip on disclosure bar */
.disc{background:var(--paper);color:var(--muted);border-bottom:1px solid var(--line);position:relative}
.disc::before{content:"";position:absolute;inset:auto 0 -1px 0;height:2px;background:linear-gradient(90deg,var(--cran),var(--gold),var(--pine),var(--cran));background-size:300% 100%;animation:sheen 12s linear infinite}
@keyframes sheen{to{background-position:300% 0}}
/* cards: lift + image zoom */
.card,.pc,.prod,.author,.faq details,.qp{background:var(--paper);color:var(--ink);box-shadow:var(--shadow);transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.card:hover,.pc:hover{transform:translateY(-4px);box-shadow:var(--shadow-h)}
.card img,.pc .pimg img,.pc .ph{transition:transform .6s var(--ease)}.card,.pc .pimg{overflow:hidden}
.card:hover img,.pc:hover .pimg img,.pc:hover .ph{transform:scale(1.05)}
.card small,.pc p,.gmeta,.price{color:var(--muted)}
.pc .pimg{background:var(--paper)}
/* Amazon button micro-interactions */
.btn{position:relative;overflow:hidden;background:linear-gradient(180deg,#f6c560,#ecac34);color:#1f1a17;box-shadow:0 2px 0 #c98d1c,0 6px 14px rgba(201,141,28,.25);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);transform:translateX(-120%);transition:transform .6s var(--ease)}
.btn:hover{transform:translateY(-2px);box-shadow:0 4px 0 #c98d1c,0 10px 22px rgba(201,141,28,.35)}.btn:hover::after{transform:translateX(120%)}
.btn:active{transform:translateY(1px);box-shadow:0 1px 0 #c98d1c}
.btn:focus-visible,a:focus-visible,summary:focus-visible,.theme-tg:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
/* jump links pills */
.jump a{background:var(--pine);transition:transform .2s var(--ease),background .2s}.jump a:hover{transform:translateY(-2px);background:var(--cran)}
.tier,[id]{scroll-margin-top:80px}
.qp{border-color:var(--cran)}
/* FAQ smooth open */
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:8px}.faq summary::after{content:"+";font-weight:400;transition:transform .3s var(--ease)}.faq details[open] summary::after{transform:rotate(45deg)}
.faq details[open] > :not(summary){animation:fadeup .35s var(--ease)}
/* skeleton shimmer while images load */
.pc .pimg img,.card img{background:linear-gradient(100deg,var(--line) 40%,color-mix(in srgb,var(--line) 40%,var(--paper)) 50%,var(--line) 60%) 0 0/200% 100%;}
.pc .pimg img.ld,.card img.ld{background:none}
@keyframes skel{to{background-position:-200% 0}}
/* scroll reveal (only when JS adds .js-reveal) */
.js-reveal .rv{opacity:0;transform:translateY(18px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js-reveal .rv.in{opacity:1;transform:none}
@keyframes fadeup{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
footer{border-top:1px solid var(--line);color:var(--muted)}
html[data-theme=dark] .ph{background:linear-gradient(135deg,#2a211c,#3a2a22)}html[data-theme=dark] .ph span{color:var(--muted)}
html[data-theme=dark] .shopbox,html[data-theme=dark] .disc{background:var(--paper)}
html[data-theme=dark] img{filter:brightness(.92)}
/* View Transitions (cross-document, progressive) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .25s var(--ease) both}::view-transition-new(root){animation:vt-in .35s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}
/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.js-reveal .rv{opacity:1;transform:none}@view-transition{navigation:none}.rprog{display:none}}
html[data-theme=dark] .jump a{color:#14110f}html[data-theme=dark] .jump a:hover{color:#14110f}
html[data-theme=dark] .tag{background:var(--pine);color:#14110f}
@media(max-width:480px){.top .w{flex-wrap:nowrap}.top nav{display:flex;align-items:center}.top nav a{margin-left:10px;font-size:.88rem}.theme-tg{margin-left:10px;width:30px;height:30px}.logo{font-size:1.15rem;white-space:nowrap}}
.qp .lbl,.pc .gf{color:var(--pine)}