/*
Theme Name: Hippora
Theme URI: https://hippora.org
Author: Lyndon Davis
Description: Premium midnight and champagne theme for Hippora, a lifelong thinking partner. Living logo aperture, drifting starfield, the Thread, parallax depth, full blog support with featured images.
Version: 1.7.0
Requires PHP: 7.4
License: Proprietary
Text Domain: hippora
*/

/* ============================================================
   HIPPORA DESIGN SYSTEM
   Extracted from the app reference screens and the logo mark.
   ============================================================ */
:root{
  /* Sampled from the approved full-site preview. Never black: a lifted
     blue-navy base, with card surfaces that step UP to a lighter navy so
     they read with contrast, not washed into the background. */
  --ink-void:#06121D; --ink:#091825; --ink-raised:#0D1B29;
  --ink-deep:#050F18;
  /* Cards are solid lifted navy (#0D1B29), a clear step above the base.
     A cool top-edge highlight gives the iOS glass read without going washed. */
  --card:#0D1B29; --card-hi:#122334;
  --surface:#0D1B29; --surface-hi:#122334;
  --glass:rgba(18,35,52,.72); --glass-hi:rgba(22,42,62,.80);
  --glass-edge:rgba(150,180,220,.16);
  --hairline:rgba(160,190,225,.13); --hairline-soft:rgba(160,190,225,.07);
  --ivory:#F2EBDF; --ivory-80:rgba(242,235,223,.80); --ivory-60:rgba(242,235,223,.60);
  --ivory-42:rgba(242,235,223,.42); --ivory-26:rgba(242,235,223,.26);
  --gold:#E3C08A; --gold-bright:#FFE3A7; --gold-deep:#A8814D;
  --display:"Newsreader","Iowan Old Style",Georgia,serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --r-sm:12px; --r-md:18px; --r-card:24px; --r-lg:32px; --r-pill:999px;
  --gutter:clamp(22px,5vw,40px); --measure:1180px; --narrow:760px;
  --section-y:clamp(92px,12vw,175px);
  --rail:clamp(14px,3.4vw,52px);
  --sky-a:rgba(227,192,138,.085); --sky-b:rgba(60,92,140,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{max-width:100%;overflow-x:hidden}
body{color:var(--ivory);font-family:var(--body);font-size:17px;
  font-weight:300;line-height:1.72;letter-spacing:.004em;-webkit-font-smoothing:antialiased;
  overflow-wrap:break-word;
  /* Exact target: lifted navy #091825 at top, easing to #06121D. Never black. */
  background:
    radial-gradient(120% 70% at 50% -6%, #10243A 0%, rgba(16,36,58,0) 52%),
    linear-gradient(180deg, #091825 0%, #071521 45%, var(--ink-deep) 100%);
  background-attachment:fixed}
img,canvas,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:rgba(227,192,138,.22);color:var(--ivory)}
:focus-visible{outline:1.5px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{width:100%;max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.wrap.narrow{max-width:var(--narrow)}
.skip{position:absolute;left:-9999px;top:12px;z-index:99}
.skip:focus{left:12px}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--display);font-weight:300;line-height:1.15;letter-spacing:-.012em}
h1{font-size:clamp(41px,6.6vw,74px);line-height:1.06}
h2{font-size:clamp(30px,4.3vw,49px)}
h3{font-size:clamp(20px,2.2vw,25px);line-height:1.3;letter-spacing:-.006em}
h4{font-size:19px;line-height:1.4}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}
.lede{font-size:clamp(17px,1.6vw,20px);line-height:1.75;color:var(--ivory-60);font-weight:300}
.eyebrow{font-family:var(--body);font-size:11px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold);opacity:.72;margin:0 0 22px}
em.gold,.accent{font-style:italic;color:var(--gold)}
.accent{font-style:normal}

/* ---------- Sky and aura ---------- */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none}
.aura{position:fixed;inset:0;z-index:0;pointer-events:none;transition:background 3s linear;background:
  radial-gradient(58vw 46vw at 50% -6%,var(--sky-a),transparent 66%),
  radial-gradient(72vw 62vw at 88% 32%,var(--sky-b),transparent 68%),
  radial-gradient(60vw 55vw at 6% 84%,rgba(227,192,138,.03),transparent 70%)}
.page{position:relative;z-index:2}
main{position:relative;z-index:2}

/* ---------- Nav ---------- */
#sitenav{position:fixed;top:0;left:0;right:0;z-index:60;border-bottom:1px solid transparent;
  transition:background .8s ease,border-color .8s ease}
#sitenav.is-set{background:rgba(9,24,37,.82);backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);border-bottom-color:var(--hairline-soft)}
.nav__in{display:flex;align-items:center;gap:clamp(18px,2.4vw,30px);height:76px;width:100%;
  max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.mark{display:flex;align-items:center;gap:12px;margin-right:auto}
.mark .glyph{width:28px;height:28px;flex:none}
.mark b{font-family:var(--display);font-size:22px;font-weight:300;letter-spacing:.075em;color:var(--ivory)}
.links{display:flex;gap:clamp(16px,1.9vw,24px);align-items:center}
.links a{font-size:14px;white-space:nowrap;color:var(--ivory-60);transition:color .4s ease;position:relative}
.links a::after{content:"";position:absolute;left:0;right:100%;bottom:-6px;height:1px;
  background:var(--gold);opacity:.6;transition:right .6s cubic-bezier(.2,.8,.2,1)}
.links a:hover{color:var(--ivory)}
.links a:hover::after{right:0}
.links a.active{color:var(--gold)}
.links a.active::after{right:0}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--body);
  font-size:14px;font-weight:500;letter-spacing:.012em;padding:12px 24px;border-radius:var(--r-pill);
  border:1px solid transparent;cursor:pointer;white-space:nowrap;position:relative;overflow:hidden;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease,border-color .5s ease,color .5s ease}
.btn-primary{background:linear-gradient(178deg,#F0D3A4,var(--gold) 58%,#CFA870);color:#1B1206}
.btn-primary::after{content:"";position:absolute;inset:0;transform:translateX(-120%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent)}
.btn-primary:hover{box-shadow:0 16px 46px rgba(227,192,138,.2);transform:translateY(-1px)}
.btn-primary:hover::after{transform:translateX(120%);transition:transform 1.1s cubic-bezier(.2,.8,.2,1)}
.btn-ghost{border-color:var(--hairline);color:var(--ivory-80);background:var(--surface);backdrop-filter:blur(10px)}
.btn-ghost:hover{border-color:rgba(227,192,138,.36);color:var(--ivory)}
.btn-lg{padding:15px 30px;font-size:15px}

/* ---------- Mobile menu ---------- */
.orb-btn{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:var(--surface);border:1px solid var(--hairline);border-radius:var(--r-pill);cursor:pointer;
  transition:border-color .5s ease}
.orb-btn:hover{border-color:rgba(227,192,138,.35)}
.orb-btn i{display:block;width:16px;height:1px;background:var(--ivory-80);position:relative;
  transition:background .3s ease}
.orb-btn i::before,.orb-btn i::after{content:"";position:absolute;left:0;width:16px;height:1px;
  background:var(--ivory-80);transition:transform .5s cubic-bezier(.2,.8,.2,1),top .3s ease}
.orb-btn i::before{top:-5px}
.orb-btn i::after{top:5px}
body.menu-open .orb-btn i{background:transparent}
body.menu-open .orb-btn i::before{top:0;transform:rotate(45deg)}
body.menu-open .orb-btn i::after{top:0;transform:rotate(-45deg)}

.menu-overlay{position:fixed;inset:0;z-index:55;background:rgba(1,6,15,.985);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  display:flex;flex-direction:column;padding:96px var(--gutter) 40px;overflow-y:auto;
  opacity:0;visibility:hidden;transition:opacity .7s ease,visibility .7s}
body.menu-open .menu-overlay{opacity:1;visibility:visible}
.menu-overlay .bigmark{width:64px;margin:0 auto 26px;opacity:0;transform:scale(.8);
  transition:opacity .9s ease .1s,transform 1s cubic-bezier(.16,1,.3,1) .1s}
body.menu-open .menu-overlay .bigmark{opacity:1;transform:none}
.mlink{display:flex;align-items:baseline;gap:16px;font-family:var(--display);font-size:clamp(26px,7vw,34px);
  font-weight:300;padding:13px 0;border-bottom:1px solid var(--hairline-soft);color:var(--ivory-80);
  opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1),color .4s ease}
body.menu-open .mlink{opacity:1;transform:none}
.mlink .n{font-family:var(--body);font-size:11px;letter-spacing:.2em;color:var(--gold);opacity:.5;
  min-width:26px}
.mlink:hover,.mlink.active{color:var(--gold)}
.legalrow{display:flex;gap:20px;flex-wrap:wrap;margin-top:30px;font-size:13.5px;color:var(--ivory-42)}
.legalrow a:hover{color:var(--gold)}
.menu-overlay .mcta{margin-top:28px;margin-bottom:8px;align-self:flex-start}

/* ---------- The Aperture (living logo) ---------- */
.aperture{width:clamp(250px,32vw,360px);height:clamp(250px,32vw,360px);position:relative}
.aperture svg{width:100%;height:100%;overflow:visible}
.aperture .orb{transform-origin:200px 200px;opacity:0}
.aperture .star{transform-origin:200px 200px;opacity:0}
.aperture.ready .orb{opacity:1}
.aperture.ready .star{opacity:1}
.a1{animation:apIn 1.9s cubic-bezier(.16,1,.3,1) 0s forwards,spin 168s linear 1.9s infinite}
.a2{animation:apIn 1.9s cubic-bezier(.16,1,.3,1) .16s forwards,spin 128s linear reverse 2.06s infinite}
.a3{animation:apIn 1.9s cubic-bezier(.16,1,.3,1) .32s forwards,spin 86s linear 2.22s infinite}
.a4{animation:apIn 1.9s cubic-bezier(.16,1,.3,1) .48s forwards,spin 62s linear reverse 2.38s infinite}
.starIn{animation:bloom 2.2s cubic-bezier(.16,1,.3,1) .55s forwards}
.starIn .pulse{animation:breathe 9s ease-in-out 2.7s infinite}
.halo{animation:haze 11s ease-in-out infinite}
@keyframes apIn{from{opacity:0;transform:rotate(-26deg) scale(.82)}to{opacity:1;transform:rotate(0) scale(1)}}
@keyframes bloom{from{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.045);opacity:1}}
@keyframes haze{0%,100%{opacity:.5}50%{opacity:.85}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blip{0%,100%{opacity:.35}50%{opacity:1}}

/* ---------- The Thread ---------- */
.thread{position:absolute;left:var(--rail);top:0;bottom:0;width:1px;z-index:1;pointer-events:none;
  background:var(--hairline-soft)}
.thread .lit{position:absolute;left:0;top:0;width:1px;height:0;
  background:linear-gradient(180deg,rgba(227,192,138,0),var(--gold) 12%,var(--gold-bright));
  box-shadow:0 0 12px rgba(227,192,138,.5)}
.thread .node{position:absolute;left:-4.5px;width:10px;height:10px;opacity:.22;transform:scale(.7);
  transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.thread .node svg{width:10px;height:10px}
.thread .node.lit{opacity:1;transform:scale(1)}
.thread .node.lit svg{filter:drop-shadow(0 0 7px rgba(227,192,138,.85))}
@media(max-width:900px){.thread{display:none}}

/* ---------- Word-by-word resolve ---------- */
.resolve span{display:inline-block;opacity:0;filter:blur(14px);transform:translateY(16px);
  transition:opacity 1.5s cubic-bezier(.16,1,.3,1),filter 1.5s cubic-bezier(.16,1,.3,1),
             transform 1.5s cubic-bezier(.16,1,.3,1)}
.resolve.on span{opacity:1;filter:blur(0);transform:none}

/* ---------- Heroes ---------- */
.hero{position:relative;padding-top:128px;padding-bottom:var(--section-y);text-align:center}
.hero__in{display:flex;flex-direction:column;align-items:center;width:100%;
  max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}
.hero .aperture{margin-bottom:clamp(30px,4.5vw,48px)}
.hero h1{max-width:16ch}
.hero .lede{max-width:52ch;margin:24px auto 0}
.hero-cta{display:flex;gap:13px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.hero-note{margin-top:30px;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ivory-26);display:flex;align-items:center;gap:11px;justify-content:center}
.hero-note::before,.hero-note::after{content:"";width:34px;height:1px;background:var(--hairline)}

.phero{padding-top:152px;padding-bottom:clamp(56px,8vw,92px);position:relative}
.phero__in{max-width:800px}
.phero.mid .phero__in{margin-inline:auto;text-align:center}
.phero h1{max-width:18ch}
.phero.mid h1{margin-inline:auto}
.phero .lede{margin-top:24px;max-width:58ch}
.phero.mid .lede{margin-inline:auto}
.crumbs{font-size:12.5px;color:var(--ivory-26);margin-bottom:26px;letter-spacing:.02em}
.crumbs a{color:var(--ivory-42);transition:color .35s ease}
.crumbs a:hover{color:var(--gold)}
.crumbs span{margin:0 8px;opacity:.5}

/* ---------- Sections ---------- */
section{padding-block:var(--section-y);position:relative}
section.tight{padding-block:clamp(60px,8vw,110px)}
section.ruled::before{content:"";position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:1px;
  background:linear-gradient(90deg,rgba(227,192,138,.45),var(--hairline-soft) 40%,transparent);
  transform:scaleX(0);transform-origin:left;transition:transform 1.9s cubic-bezier(.16,1,.3,1)}
section.ruled.in::before{transform:scaleX(1)}
.head{max-width:640px}
.head.mid{margin-inline:auto;text-align:center}
.head .lede{margin-top:22px}

.statement{text-align:center}
.statement p{font-family:var(--display);font-weight:200;font-size:clamp(25px,3.6vw,41px);
  line-height:1.42;letter-spacing:-.01em;max-width:20ch;margin:0 auto;color:var(--ivory-60)}
.statement p+p{margin-top:.5em}
.statement .hold{color:var(--ivory)}

/* The final line on the About page. Given all the room it needs. */
.coda{text-align:center;padding-block:clamp(120px,18vw,240px);position:relative}
.coda::before{content:"";position:absolute;left:50%;top:50%;width:min(760px,92%);height:420px;
  transform:translate(-50%,-50%);pointer-events:none;filter:blur(30px);
  background:radial-gradient(closest-side,rgba(227,192,138,.10),transparent 72%)}
.coda p{position:relative;font-family:var(--display);font-weight:200;
  font-size:clamp(26px,3.9vw,44px);line-height:1.44;letter-spacing:-.012em;
  max-width:22ch;margin:0 auto;color:var(--ivory)}
.coda p .soft{color:var(--ivory-60)}

/* ---------- Cards ---------- */
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.mt-lg{margin-top:62px}
/* Card: a SOLID lifted-navy surface (#0D1B29), a clear step above the page
   background so it reads with contrast. A cool top-edge highlight gives the
   premium iOS glass feel without the washed-out translucency. */
.card{position:relative;overflow:hidden;border:1px solid var(--hairline);
  border-radius:var(--r-card);padding:34px 32px 36px;
  background:linear-gradient(160deg,var(--card-hi) 0%,var(--card) 55%);
  box-shadow:0 1px 0 rgba(190,214,248,.09) inset, 0 20px 46px -30px rgba(0,0,0,.75);
  transition:border-color .9s ease,background .9s ease,transform .9s cubic-bezier(.2,.8,.2,1),box-shadow .9s ease}
.card::after{content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(190,214,248,.30) 22%,rgba(190,214,248,.30) 78%,transparent)}
.card::before{content:"";position:absolute;width:340px;height:340px;border-radius:50%;
  left:var(--mx,50%);top:var(--my,50%);transform:translate(-50%,-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(227,192,138,.13),transparent 72%);
  opacity:0;transition:opacity .7s ease}
.card:hover{border-color:rgba(190,214,248,.22);transform:translateY(-4px);
  background:linear-gradient(160deg,#152741 0%,var(--card-hi) 55%);
  box-shadow:0 1px 0 rgba(190,214,248,.14) inset, 0 28px 58px -26px rgba(0,0,0,.8)}
.card:hover::before{opacity:1}
.card>*{position:relative}
.card .ico{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;margin-bottom:24px;
  border:1px solid rgba(227,192,138,.22);
  background:radial-gradient(70% 70% at 50% 20%,rgba(227,192,138,.15),rgba(227,192,138,.03))}
.card h3{margin-bottom:11px}
.card p{font-size:15.5px;line-height:1.7;color:var(--ivory-60)}
.card .clink{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-size:13.5px;
  font-weight:500;letter-spacing:.045em;color:var(--gold);opacity:.8;transition:opacity .5s ease,gap .5s ease}
.card:hover .clink{opacity:1;gap:12px}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,1fr);margin-top:64px}
.steps.s4{grid-template-columns:repeat(4,1fr)}
.step{padding:0 34px;border-left:1px solid var(--hairline-soft)}
.step:first-child{padding-left:0;border-left:0}
.step:last-child{padding-right:0}
.step .n{font-family:var(--display);font-size:13px;letter-spacing:.2em;color:var(--gold);
  opacity:.6;display:block;margin-bottom:20px}
.step h3{margin-bottom:12px}
.step p{font-size:15.5px;color:var(--ivory-60);line-height:1.7}

/* ---------- Split ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,7vw,96px);align-items:center}
.split.flip .media{order:-1}
.split .copy .lede{margin-top:22px}
.plate{position:relative;border-radius:var(--r-lg);border:1px solid var(--hairline);
  background:linear-gradient(160deg,var(--card-hi) 0%,var(--card) 55%);
  padding:26px;box-shadow:0 1px 0 rgba(190,214,248,.10) inset, 0 20px 50px -30px rgba(0,0,0,.72)}
.plate::before{content:"";position:absolute;inset:-34% -14% auto -14%;height:70%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(227,192,138,.17),transparent 74%);filter:blur(28px)}
.thr{position:relative;display:flex;flex-direction:column;gap:13px}
.bub{max-width:84%;padding:15px 19px;border-radius:20px;font-size:15px;line-height:1.62;
  opacity:0;transform:translateY(14px);
  transition:opacity 1.1s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.in .bub{opacity:1;transform:none}
.in .bub:nth-child(2){transition-delay:.35s}
.in .bub:nth-child(3){transition-delay:.7s}
.b-them{align-self:flex-start;background:rgba(242,235,223,.055);border:1px solid var(--hairline);
  color:var(--ivory-80);border-bottom-left-radius:7px}
.b-you{align-self:flex-end;color:#1B1206;border-bottom-right-radius:7px;
  background:linear-gradient(170deg,#F0D3A4,#DCB77F)}
.recall{margin-top:20px;padding:16px 19px;border-radius:var(--r-md);position:relative;
  border:1px solid rgba(227,192,138,.22);background:rgba(227,192,138,.045);
  opacity:0;transform:translateY(12px);
  transition:opacity 1.2s ease 1.05s,transform 1.2s cubic-bezier(.16,1,.3,1) 1.05s}
.in .recall{opacity:1;transform:none}
.recall .lt{position:absolute;left:26px;top:-26px;width:1px;height:26px;
  background:linear-gradient(180deg,transparent,var(--gold));transform:scaleY(0);transform-origin:bottom;
  transition:transform 1s cubic-bezier(.16,1,.3,1) 1.5s}
.in .recall .lt{transform:scaleY(1)}
.recall span.lbl{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);opacity:.78}
.recall p{margin:8px 0 0;font-family:var(--display);font-style:italic;font-size:17px;
  line-height:1.55;color:var(--ivory-80)}

.dials{display:flex;flex-direction:column;gap:20px;position:relative}
.dial-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:9px}
.dial-name{font-size:14.5px;color:var(--ivory-80)}
.dial-val{font-family:var(--display);font-size:14px;color:var(--gold);letter-spacing:.06em}
.bar{height:3px;border-radius:var(--r-pill);background:rgba(242,235,223,.08);overflow:hidden}
.bar i{display:block;height:100%;width:0;border-radius:inherit;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright));
  transition:width 2.6s cubic-bezier(.16,1,.3,1)}
.in .bar i{width:var(--w)}

/* ---------- Quiet rows ---------- */
.quiet{display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(40px,6vw,80px);margin-top:56px}
.quiet.one{grid-template-columns:1fr}
.qrow{display:flex;gap:18px;padding:26px 0;border-top:1px solid var(--hairline-soft)}
.qdot{flex:none;width:6px;height:6px;border-radius:50%;margin-top:11px;background:var(--gold);
  box-shadow:0 0 12px rgba(227,192,138,.5)}
.qrow h4{font-family:var(--body);font-size:15.5px;font-weight:500;margin:0 0 5px;letter-spacing:.004em}
.qrow p{font-size:14.5px;color:var(--ivory-60);line-height:1.68;margin:0}
.qrow a{color:var(--gold)}

/* ---------- Store badges ---------- */
/* Store badges.
   The eyebrow used to be gold uppercase at wide tracking, which fought the
   store name for attention and made the accent colour cheap. It is now quiet
   ivory, so the name carries the badge and gold stays rare. */
.store{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.store.mid{justify-content:center}
.badge{position:relative;display:inline-flex;align-items:center;gap:13px;
  padding:11px 22px 12px 17px;border:1px solid var(--hairline);border-radius:15px;
  background:linear-gradient(160deg,var(--card-hi),var(--card));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);overflow:hidden;
  transition:border-color .8s ease,background .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.badge::before{content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(242,235,223,.16) 30%,rgba(242,235,223,.16) 70%,transparent)}
.badge:hover{border-color:rgba(227,192,138,.28);transform:translateY(-1px);
  background:linear-gradient(160deg,#152741,var(--card-hi))}
.badge svg{flex:none;opacity:.78;transition:opacity .8s ease}
.badge:hover svg{opacity:.95}
.badge b{display:block;font-family:var(--body);font-size:15px;font-weight:400;
  color:var(--ivory-80);line-height:1.3;letter-spacing:.005em}
.badge small{display:block;font-size:9px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--ivory-42);line-height:1.6;margin-bottom:1px}
.ribbon{display:inline-flex;align-items:center;gap:9px;padding:7px 16px;border-radius:var(--r-pill);
  border:1px solid rgba(227,192,138,.26);background:rgba(227,192,138,.06);font-size:11.5px;
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ribbon i{width:5px;height:5px;border-radius:50%;background:var(--gold-bright);
  box-shadow:0 0 10px var(--gold);animation:blip 4s ease-in-out infinite}
.store-band{border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft);
  padding-block:clamp(56px,7vw,88px);text-align:center;position:relative}
.store-band::after{content:"";position:absolute;left:50%;top:0;width:min(640px,92%);height:100%;
  transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(closest-side,rgba(227,192,138,.10),transparent 72%)}
.store-band .wrap{position:relative;z-index:1}
.store-band h2{max-width:17ch;margin-inline:auto}

/* ---------- Pricing ---------- */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:60px;align-items:start}
.tier{position:relative;overflow:hidden;border:1px solid var(--hairline);border-radius:var(--r-lg);
  padding:38px 32px 36px;
  background:linear-gradient(160deg,var(--card-hi) 0%,var(--card) 55%);
  box-shadow:0 1px 0 rgba(190,214,248,.09) inset, 0 20px 46px -30px rgba(0,0,0,.75)}
.tier::after{content:"";position:absolute;inset:0 0 auto;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(190,214,248,.28) 25%,rgba(190,214,248,.28) 75%,transparent)}
.tier.feature{border-color:rgba(227,192,138,.32);
  background:linear-gradient(172deg,rgba(227,192,138,.08),rgba(242,235,223,.02))}
.tier .tag{position:absolute;top:-11px;left:32px;font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:#1B1206;background:linear-gradient(178deg,#F0D3A4,#DCB77F);padding:5px 13px;border-radius:var(--r-pill)}
.tier-eyebrow{font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);opacity:.85;margin-bottom:14px}
.tier.feature .tier-eyebrow{display:none}
.notice{display:flex;align-items:flex-start;gap:12px;max-width:760px;margin:0 auto 44px;
  padding:15px 20px;border:1px solid var(--hairline);border-radius:var(--r-md);
  background:linear-gradient(160deg,var(--card-hi),var(--card))}
.notice svg{flex:none;margin-top:2px;opacity:.85}
.notice p{font-size:14px;line-height:1.6;color:var(--ivory-60);margin:0}
.tier h3{font-family:var(--display);font-size:24px;margin-bottom:8px}
.tier .sub{font-size:14.5px;color:var(--ivory-42);margin-bottom:26px}
.tier .price{display:flex;align-items:baseline;gap:7px;margin-bottom:8px}
.tier .price b{font-family:var(--display);font-size:46px;font-weight:300;color:var(--ivory);letter-spacing:-.02em}
.tier .price span{font-size:14px;color:var(--ivory-42)}
.tier .note{font-size:13px;color:var(--ivory-26);margin-bottom:28px}
.tier ul{list-style:none;display:flex;flex-direction:column;gap:12px;margin-bottom:30px}
.tier li{display:flex;gap:11px;font-size:15px;color:var(--ivory-60);line-height:1.6}
.tier li svg{flex:none;margin-top:5px}
.tier .btn{width:100%}
.later{margin-top:52px;padding:30px 32px;border:1px dashed var(--hairline);border-radius:var(--r-card)}
.later h4{font-family:var(--body);font-size:12px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gold);opacity:.75;margin-bottom:6px}
.later .lrow{display:flex;justify-content:space-between;gap:20px;padding:14px 0;
  border-top:1px solid var(--hairline-soft);font-size:15px;color:var(--ivory-60)}
.later .lrow b{font-family:var(--display);color:var(--ivory-80);font-weight:400}
.later .lrow span{color:var(--ivory-26);font-size:13.5px;text-align:right}

/* ---------- FAQ ---------- */
.faq{max-width:820px;margin-top:56px}
.faq details{border-top:1px solid var(--hairline-soft)}
.faq details:last-child{border-bottom:1px solid var(--hairline-soft)}
.faq summary{list-style:none;cursor:pointer;padding:26px 44px 26px 0;position:relative;
  font-family:var(--display);font-size:clamp(19px,2vw,22px);font-weight:300;color:var(--ivory-80);
  transition:color .4s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--ivory)}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:11px;height:11px;
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold);
  transform:translateY(-70%) rotate(45deg);transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.faq details[open] summary::after{transform:translateY(-20%) rotate(-135deg)}
.faq .a{padding:0 44px 30px 0}
.faq .a p{font-size:16px;color:var(--ivory-60);line-height:1.75}
.faq .a a{color:var(--gold)}

/* ---------- Prose / WP content ---------- */
.prose,.page-content,.post-body .wrap{max-width:70ch}
.prose h2,.page-content h2,.post-body h2{font-size:clamp(25px,3vw,33px);margin:2.1em 0 .65em}
.prose h2:first-child{margin-top:0}
.prose h3,.page-content h3,.post-body h3{font-size:21px;margin:1.9em 0 .55em}
.prose p,.prose li,.page-content p,.page-content li,.post-body p,.post-body li{
  color:var(--ivory-60);font-size:16.5px;line-height:1.78}
.prose strong,.page-content strong,.post-body strong{color:var(--ivory-80);font-weight:500}
.prose a,.page-content a,.post-body a{color:var(--gold);border-bottom:1px solid rgba(227,192,138,.3)}
.prose a:hover,.page-content a:hover,.post-body a:hover{border-bottom-color:var(--gold)}
.prose ul,.prose ol,.page-content ul,.page-content ol,.post-body ul,.post-body ol{padding-left:20px;margin:0 0 1.3em}
.prose li,.page-content li,.post-body li{margin-bottom:.5em}
.prose li::marker,.page-content li::marker,.post-body li::marker{color:var(--gold)}
.prose blockquote,.page-content blockquote,.post-body blockquote{margin:2em 0;padding:22px 26px;
  border-left:1px solid rgba(227,192,138,.35);background:var(--surface);border-radius:0 var(--r-md) var(--r-md) 0}
.prose blockquote p,.page-content blockquote p,.post-body blockquote p{
  font-family:var(--display);font-style:italic;font-size:20px;color:var(--ivory-80);line-height:1.6}
.prose hr,.page-content hr,.post-body hr{border:0;border-top:1px solid var(--hairline-soft);margin:2.6em 0}
.prose table,.post-body table{width:100%;border-collapse:collapse;margin:1.6em 0;font-size:15px}
.prose th,.prose td,.post-body th,.post-body td{padding:13px 14px;
  border-bottom:1px solid var(--hairline-soft);text-align:left}
.prose th,.post-body th{color:var(--gold);font-weight:500;font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.prose td,.post-body td{color:var(--ivory-60)}
.updated{font-size:13px;color:var(--ivory-26);letter-spacing:.02em;margin-bottom:44px}
.page-main{padding-top:152px;padding-bottom:var(--section-y)}
.wp-page{width:100%;max-width:var(--narrow);margin:0 auto;padding-inline:var(--gutter)}
.page-header{margin-bottom:44px}
.page-title{font-size:clamp(34px,5vw,56px)}
.alignwide,.alignfull{max-width:none;margin-inline:0}
.wp-caption,figure{margin:2em 0}
figcaption,.wp-caption-text{font-size:13px;color:var(--ivory-26);margin-top:10px;text-align:center}
img.aligncenter{margin-inline:auto}
.sticky,.gallery-caption,.bypostauthor{display:block}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ---------- Blog ---------- */
.pagehead{padding-top:152px;padding-bottom:clamp(40px,6vw,70px)}
.pagehead .sub{color:var(--ivory-60);max-width:60ch;margin-top:22px;font-size:clamp(17px,1.6vw,19px)}
.cats{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:44px}
.cat-pill{padding:8px 17px;border-radius:var(--r-pill);border:1px solid var(--hairline);
  font-size:13px;color:var(--ivory-60);background:var(--surface);transition:all .45s ease}
.cat-pill:hover{border-color:rgba(227,192,138,.3);color:var(--ivory)}
.cat-pill.active{background:rgba(227,192,138,.1);border-color:rgba(227,192,138,.36);color:var(--gold)}
.featured{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--hairline);
  border-radius:var(--r-lg);overflow:hidden;background:var(--surface);margin-bottom:20px;
  transition:border-color .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.featured:hover{border-color:rgba(227,192,138,.26);transform:translateY(-3px)}
.featured .fbody{padding:clamp(30px,4vw,54px);display:flex;flex-direction:column;justify-content:center}
.featured .fimage{background-size:cover;background-position:center;min-height:300px}
.featured h2{font-size:clamp(26px,3.4vw,38px);line-height:1.18;margin-bottom:14px}
.featured p{font-size:16px;color:var(--ivory-60)}
.featured .cat,.post-card .cat{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);opacity:.72;margin-bottom:14px}
.featured .meta,.post-card .meta{font-size:13px;color:var(--ivory-26);margin-top:18px}
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.post-card{display:flex;flex-direction:column;border:1px solid var(--hairline);border-radius:var(--r-card);
  overflow:hidden;background:var(--surface);backdrop-filter:blur(14px);
  transition:border-color .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.post-card:hover{border-color:rgba(227,192,138,.26);transform:translateY(-4px)}
.post-card .thumb{aspect-ratio:16/10;background-size:cover;background-position:center;
  background-color:#0A1524}
.post-card .thumb.placeholder{display:grid;place-items:center;
  background:radial-gradient(70% 90% at 55% 30%,rgba(227,192,138,.16),var(--ink) 70%)}
.post-card .thumb.placeholder img{width:58px;height:58px;opacity:.85}
.post-card .pbody{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.post-card h3{font-size:21px;margin-bottom:10px}
.post-card p{font-size:14.5px;color:var(--ivory-60);line-height:1.68}
.post-card .meta{margin-top:auto;padding-top:14px}
.post-hero{padding-top:152px;padding-bottom:clamp(30px,4vw,50px)}
.post-hero .cat{display:inline-block;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold);margin-bottom:20px}
.post-hero h1{max-width:20ch}
.post-hero .meta{margin-top:24px;font-size:13.5px;color:var(--ivory-26);display:flex;gap:10px;flex-wrap:wrap}
.post-feature{width:100%;max-width:1100px;margin:0 auto;padding-inline:var(--gutter)}
.post-feature img{width:100%;border-radius:var(--r-lg);border:1px solid var(--hairline)}
.post-body{padding-block:clamp(40px,6vw,70px)}
.post-body .wrap{max-width:var(--narrow)}
.post-tags{width:100%;max-width:var(--narrow);margin:0 auto;padding-inline:var(--gutter);
  display:flex;gap:9px;flex-wrap:wrap}
.post-tags a{padding:7px 15px;border-radius:var(--r-pill);border:1px solid var(--hairline);
  font-size:12.5px;color:var(--ivory-42)}
.post-tags a:hover{color:var(--gold);border-color:rgba(227,192,138,.3)}
.post-cta{text-align:center;margin-top:clamp(60px,8vw,100px);padding:clamp(50px,7vw,80px) var(--gutter);
  border-top:1px solid var(--hairline-soft);border-bottom:1px solid var(--hairline-soft);position:relative}
.post-cta h2{max-width:18ch;margin:0 auto 30px}
.related h3{margin-bottom:34px}
.pagination{display:flex;gap:9px;justify-content:center;margin-top:56px}
.pagination .page-numbers{width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--hairline);font-size:14px;color:var(--ivory-60);transition:all .45s ease}
.pagination .page-numbers:hover{border-color:rgba(227,192,138,.3);color:var(--ivory)}
.pagination .page-numbers.current{background:rgba(227,192,138,.1);
  border-color:rgba(227,192,138,.36);color:var(--gold)}

/* ---------- Forms ---------- */
.form{display:grid;gap:18px;max-width:560px;margin-top:44px}
.form.wide{max-width:100%}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field label{display:block;font-size:12.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ivory-42);margin-bottom:9px}
.field input,.field textarea,.field select{width:100%;padding:14px 18px;border-radius:var(--r-md);
  border:1px solid var(--hairline);background:var(--surface);color:var(--ivory);
  font-family:var(--body);font-size:15.5px;font-weight:300;outline:none;transition:border-color .45s ease}
.field input:focus,.field textarea:focus,.field select:focus{border-color:rgba(227,192,138,.4)}
.field textarea{min-height:150px;resize:vertical;line-height:1.65}
.field select option{background:#0C1F30;color:var(--ivory)}
.hp{position:absolute;left:-9999px}
.form .btn{justify-self:start}
.form-note{font-size:13px;color:var(--ivory-26)}

/* Confirmation note. Hidden until there is something to say, then it settles
   in as a small panel rather than a line of loose text. */
.form-result{font-size:14.5px;line-height:1.6;margin:0}
.form-result:empty{display:none}
.form-result.is-ok,.form-result.is-error{
  display:flex;gap:11px;align-items:flex-start;padding:14px 18px 15px;
  border-radius:var(--r-md);border:1px solid;opacity:0;transform:translateY(7px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1)}
.form-result.is-in{opacity:1;transform:none}
.form-result svg{flex:none;width:15px;height:15px;margin-top:4px}
.form-result.is-ok{border-color:rgba(227,192,138,.30);background:rgba(227,192,138,.065);color:var(--gold)}
.form-result.is-ok span{color:var(--ivory-80)}
.form-result.is-error{border-color:rgba(226,140,124,.34);background:rgba(226,140,124,.06);color:#E28C7C}
.form-result.is-error span{color:rgba(242,235,223,.78)}
.subscribe{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px;max-width:480px}
.subscribe input{flex:1 1 220px;padding:14px 18px;border-radius:var(--r-pill);
  border:1px solid var(--hairline);background:var(--surface);color:var(--ivory);
  font-family:var(--body);font-size:15px;font-weight:300;outline:none}
.subscribe input:focus{border-color:rgba(227,192,138,.4)}
.subscribe.mid{margin-inline:auto;justify-content:center}

/* ---------- Timeline / rows / swatches / stats ---------- */
.timeline{margin-top:60px;border-left:1px solid var(--hairline-soft);padding-left:34px}
.tl{position:relative;padding-bottom:44px}
.tl:last-child{padding-bottom:0}
.tl::before{content:"";position:absolute;left:-39px;top:9px;width:9px;height:9px;border-radius:50%;
  background:var(--gold);box-shadow:0 0 14px rgba(227,192,138,.5)}
.tl .yr{font-family:var(--display);font-size:14px;letter-spacing:.16em;color:var(--gold);
  opacity:.75;display:block;margin-bottom:9px}
.tl h3{margin-bottom:9px}
.tl p{font-size:15.5px;color:var(--ivory-60);line-height:1.7}
.rows{margin-top:52px;border-top:1px solid var(--hairline-soft)}
.row{display:flex;align-items:center;gap:20px;padding:26px 0;
  border-bottom:1px solid var(--hairline-soft);transition:padding-left .5s ease}
.row:hover{padding-left:8px}
.row .rmain{flex:1}
.row h3{font-family:var(--display);font-size:22px;margin-bottom:5px}
.row p{font-size:14.5px;color:var(--ivory-42);margin:0}
.row .rmeta{font-size:13px;color:var(--ivory-42);text-align:right;flex:none}
.row .rarrow{flex:none;color:var(--gold);opacity:.6}
.swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:44px}
.sw{border:1px solid var(--hairline);border-radius:var(--r-md);overflow:hidden}
.sw .chip{height:104px}
.sw .sbody{padding:16px 18px}
.sw b{display:block;font-family:var(--body);font-size:14px;font-weight:500;margin-bottom:3px}
.sw code{font-size:12px;color:var(--ivory-42);font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:60px}
.stat{padding:0 30px;border-left:1px solid var(--hairline-soft);text-align:center}
.stat:first-child{border-left:0}
.stat b{display:block;font-family:var(--display);font-size:clamp(38px,5vw,56px);font-weight:200;
  color:var(--gold);line-height:1;margin-bottom:12px}
.stat span{font-size:14px;color:var(--ivory-42)}

/* ---------- Closing ---------- */
.closing{text-align:center;position:relative}
.closing::before{content:"";position:absolute;left:50%;top:-10%;width:min(720px,92%);height:360px;
  transform:translateX(-50%);pointer-events:none;filter:blur(20px);
  background:radial-gradient(closest-side,rgba(227,192,138,.14),transparent 72%)}
.closing h2{max-width:15ch;margin-inline:auto;position:relative}
.closing .lede{max-width:44ch;margin:24px auto 0;position:relative}
.closing .cta{margin-top:38px;display:flex;gap:13px;justify-content:center;flex-wrap:wrap;position:relative}
.closing .store{margin-top:34px;position:relative}

/* ---------- Footer ---------- */
.sitefooter{border-top:1px solid var(--hairline-soft);padding:clamp(54px,6.4vw,72px) 0 28px;
  background:var(--ink-void);position:relative;z-index:2}
.fgrid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:0 clamp(22px,2.8vw,38px);
  width:100%;max-width:var(--measure);margin:0 auto;padding-inline:var(--gutter)}

.fbrand{padding-right:clamp(14px,2.6vw,38px)}
.fbrand .mark b{font-size:21px}
.fbrand p{font-size:14px;color:var(--ivory-42);max-width:27ch;margin-top:14px;line-height:1.66}
.fmail{display:inline-block;margin-top:15px;font-size:13.5px;color:var(--ivory-60);
  border-bottom:1px solid rgba(227,192,138,.22);transition:color .4s ease,border-color .4s ease}
.fmail:hover{color:var(--gold);border-bottom-color:var(--gold)}

/* Groups are <details> so mobile gets a real accordion with no extra markup.
   On desktop JS forces them open and the summary stops behaving like a control. */
.fcol{border:0}
.fcol summary{list-style:none;display:block;cursor:default;pointer-events:none}
.fcol summary::-webkit-details-marker{display:none}
.sitefooter h5{font-family:var(--body);font-size:10.5px;font-weight:500;letter-spacing:.19em;
  text-transform:uppercase;color:rgba(242,235,223,.34);margin:0 0 16px}
.fchev{display:none}
.sitefooter ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.sitefooter ul a{font-size:14px;color:rgba(242,235,223,.72);transition:color .38s ease}
.sitefooter ul a:hover{color:var(--gold)}

.fdivide{width:100%;max-width:var(--measure);margin:clamp(42px,5vw,54px) auto 0;padding-inline:var(--gutter)}
.fdivide i{display:block;height:1px;background:linear-gradient(90deg,
  rgba(227,192,138,.20),var(--hairline) 26%,var(--hairline) 74%,rgba(227,192,138,.20))}
.fbase{width:100%;max-width:var(--measure);margin:0 auto;padding:20px var(--gutter) 0;
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  font-size:12.5px;color:var(--ivory-26)}
.fbase em{font-style:normal;color:var(--ivory-42)}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity 1.35s cubic-bezier(.16,1,.3,1),transform 1.35s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:none}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* ---------- Centre stage (404, coming soon) ---------- */
.center-stage{min-height:100svh;display:grid;place-items:center;text-align:center;
  padding:130px var(--gutter) 90px}
.center-stage h1{max-width:16ch;margin-inline:auto}
.center-stage .lede{max-width:46ch;margin:24px auto 0}
.center-stage .aperture{margin:0 auto clamp(30px,5vw,46px)}
.code404{font-family:var(--display);font-size:clamp(74px,13vw,150px);font-weight:200;
  color:var(--gold);opacity:.28;line-height:1;margin-bottom:18px;letter-spacing:.04em}

/* ---------- Responsive ---------- */
@media(max-width:1100px){
  .links,#sitenav .btn{display:none}
  .orb-btn{display:flex}
  .g3,.g4,.tiers,.posts,.swatches{grid-template-columns:repeat(2,1fr)}
  .featured{grid-template-columns:1fr}
  .featured .fimage{min-height:240px;order:-1}
  .fgrid{grid-template-columns:1fr 1fr;gap:34px clamp(24px,4vw,52px)}
  .fbrand{grid-column:1 / -1;padding-right:0;margin-bottom:6px}
  .fbrand p{max-width:44ch}
}
@media(max-width:760px){
  body{font-size:16px}
  .g2,.g3,.g4,.tiers,.posts,.swatches,.frow{grid-template-columns:1fr}
  .steps,.steps.s4{grid-template-columns:1fr}
  .step{padding:30px 0 0;border-left:0;border-top:1px solid var(--hairline-soft)}
  .step:first-child{padding-top:0;border-top:0}
  .split{grid-template-columns:1fr}
  .split.flip .media{order:0}
  .quiet{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr;gap:34px}
  .stat{padding:0;border-left:0}
  .fgrid{grid-template-columns:1fr;gap:0}
  .fbrand{margin-bottom:10px}
  .fcol{border-top:1px solid var(--hairline-soft)}
  .fcol summary{cursor:pointer;pointer-events:auto;display:flex;align-items:center;
    justify-content:space-between;padding:15px 0}
  .sitefooter h5{margin:0;font-size:11px;color:rgba(242,235,223,.58)}
  .fchev{display:block;width:8px;height:8px;border-right:1px solid var(--gold);
    border-bottom:1px solid var(--gold);opacity:.7;transform:translateY(-2px) rotate(45deg);
    transition:transform .45s cubic-bezier(.2,.8,.2,1)}
  .fcol[open] .fchev{transform:translateY(1px) rotate(-135deg)}
  .fcol ul{padding:2px 0 18px;gap:13px}
  .fdivide{margin-top:30px}
  .fbase{flex-direction:column;align-items:center;text-align:center;gap:8px;padding-top:18px}
  .row{flex-wrap:wrap;gap:10px}
  .row .rmeta{text-align:left}
  .badge{flex:1 1 100%}
  .later .lrow{flex-direction:column;gap:4px}
  .later .lrow span{text-align:left}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal,.bub,.recall{opacity:1;transform:none}
  .resolve span{opacity:1;filter:none;transform:none}
  .aperture .orb,.aperture .star{opacity:1}
  .bar i{width:var(--w)}
  section.ruled::before{transform:scaleX(1)}
  html{scroll-behavior:auto}
}