/* JEJE STUDIOS — built on the same house system as halfsies.jejestudios.com.
 *
 * The look is not a set of effects bolted on. It is four things working
 * together, and the Halfsies site already had them right:
 *   1. a hand-drawn frame around every section, whose line boils
 *   2. body copy that boils very slightly, so nothing sits perfectly still
 *   3. centred composition, narrow measure, generous air
 *   4. one display face (Wantedo), one body face (Garamond), nothing else
 *
 * Earlier attempts invented a parallel language: sticker shadows, scattered
 * gifs, hard-edged panels. That is why it did not match. This file borrows the
 * established one instead. */

@font-face { font-family:'Wantedo'; src:url('../fonts/Wantedo.otf') format('opentype'); font-display:swap; }
@font-face { font-family:'GaramondJ'; src:url('../fonts/Garamond.otf') format('opentype'); font-display:swap; }

:root{
  --paper:#efe1c1; --paper2:#e6d3ac; --paper-dk:#d9c197;
  --ink:#211a10; --ink2:#3d2817; --saddle:#54341a;
  --amber:#d8a537; --amber-dk:#b9862a; --red:#b23a2e; --dusk:#cf7d3a;
  --cream:#fbf3df; --night:#140d06;
  --maxw:1180px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:'GaramondJ',Georgia,serif;font-weight:700;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{max-width:100%;display:block}

/* ---------------------------------------------------------------- grain */
.grain{position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.14;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  animation:grainshift 700ms steps(1) infinite}
@keyframes grainshift{0%{background-position:0 0}20%{background-position:-34px 22px}
  40%{background-position:26px -31px}60%{background-position:-22px -18px}
  80%{background-position:31px 12px}100%{background-position:0 0}}

/* ------------------------------------------------------- the boiled frame
 * The signature. A drawn rounded rectangle inset inside every section, whose
 * stroke wobbles between two displacement maps. */
.boilframe{position:absolute;inset:0;z-index:27;pointer-events:none}
.boilframe svg{width:100%;height:100%;overflow:visible;display:block}
/* Three pre-jittered traces of the same rectangle, cross-cut one at a time.
 * The wobble is baked into the path data, so there is no filter to rasterize —
 * see the note above wobblePath() in site.js for the measurements that forced
 * this. Only opacity changes per frame, which the compositor handles. */
.boilframe path{fill:none;stroke:var(--ink);stroke-width:5;stroke-linejoin:round;
  opacity:0;animation:boilcut .36s steps(1) infinite}
.boilframe path:nth-child(2){animation-delay:-.12s}
.boilframe path:nth-child(3){animation-delay:-.24s}
.boilframe.cream path{stroke:rgba(247,238,216,.92)}
@keyframes boilcut{0%,33.33%{opacity:1}33.34%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){
  .boilframe path{animation:none;opacity:0}
  .boilframe path:first-child{opacity:1}}
.seam{position:absolute;top:0;left:0;right:0;height:5px;z-index:0;pointer-events:none}

/* Short display text breathes too, just barely.
 *
 * PERFORMANCE, and why this list is short on purpose.
 * An SVG feDisplacementMap cannot run on the GPU compositor: swapping the
 * filter re-rasterizes the element's whole box on the CPU, and this animation
 * swaps three times every .42s, forever, whether or not the element is on
 * screen. Cost scales with box AREA, so long body paragraphs were the most
 * expensive elements on the page while showing the least wobble — a 1.4px
 * displacement is invisible at 16px body size but very visible on a 3rem
 * heading. `.lead p` and `.copy p` were dropped for exactly that reason: all
 * of the cost, none of the effect.
 *
 * The rest is paused when off screen and while scrolling; see site.js. */
.eyebrow,.subcta,.entry .sub,.foot{animation:tboil .42s steps(1) infinite}
@keyframes tboil{0%{filter:url(#tboil1)}33%{filter:url(#tboil2)}66%{filter:url(#tboil3)}}

/* Anything out of view, or the whole page mid-scroll, stops re-rasterizing.
 * Scrolling is when jank is actually felt, and it is also the one moment the
 * wobble cannot be perceived, so freezing it there costs nothing visually. */
.boil-idle{animation-play-state:paused!important}
body.is-scrolling .eyebrow,body.is-scrolling .subcta,body.is-scrolling .entry .sub,
body.is-scrolling .foot{animation-play-state:paused!important}

/* Off-screen sections skip layout and paint entirely. The intrinsic size keeps
 * the scrollbar honest so the page does not jump as bands come into view. */
.band{content-visibility:auto;contain-intrinsic-size:auto 720px}

/* ---------------------------------------------------------------- layout */
.wrap{width:min(var(--maxw),90vw);margin:0 auto}
section,header{position:relative}

.eyebrow{font-family:'GaramondJ',Georgia,serif;letter-spacing:.42em;text-transform:uppercase;
  font-size:.72rem;color:var(--amber-dk);margin:0 0 1.1rem}
.band.dark .eyebrow{color:var(--amber);text-shadow:0 2px 8px rgba(0,0,0,.7)}

h1,h2,h3{font-family:'Wantedo',Georgia,serif;text-transform:uppercase;margin:0;line-height:.92}
.lead{max-width:760px;margin:0 auto;text-align:center}
.lead h2{font-size:clamp(2.3rem,6.5vw,4.6rem);color:var(--ink2)}
.lead p{font-size:clamp(1.05rem,2.2vw,1.32rem);line-height:1.5;color:var(--saddle);
  margin:1.2rem auto 0;max-width:52ch;font-weight:700}
.band.dark .lead h2{color:var(--cream)}
.band.dark .lead p{color:#f0e3c4}

/* ------------------------------------------------------------------ nav */
.nav{position:sticky;top:0;z-index:200;background:rgba(239,225,193,.94);
  backdrop-filter:blur(7px);border-bottom:3px solid var(--ink)}
.nav .wrap{display:flex;align-items:center;gap:26px;height:60px}
.nav a{font-family:'Wantedo',Georgia,serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:13px;color:var(--ink);text-decoration:none;white-space:nowrap}
.nav a:hover{color:var(--red)}
.nav .brand{font-size:18px;letter-spacing:.05em;margin-right:auto;display:flex;align-items:center}
/* The real drawn mark, not type set to look like it. Height is fixed and width
 * is auto so the wobbly hand-drawn border never gets squashed to fit. */
.nav .brand img{height:34px;width:auto;display:block}
@media(max-width:520px){.nav .brand img{height:27px}}
footer .brandmark{width:132px;height:auto;display:block;margin-bottom:1rem;opacity:.92}
@media(max-width:720px){.nav .wrap{gap:16px;overflow-x:auto;scrollbar-width:none}
  .nav .wrap::-webkit-scrollbar{display:none}}

/* ----------------------------------------------------------------- bands */
.band{padding:clamp(76px,11vh,140px) 0;position:relative;overflow:hidden}
.band.dark{background:var(--night);color:var(--cream)}
.band.paper2{background:var(--paper2)}
.band-media{position:absolute;inset:-10% 0;z-index:0}
.band-media video,.band-media img{width:100%;height:100%;object-fit:cover;
  filter:saturate(1.06) contrast(1.03)}
.band-media::after{content:'';position:absolute;inset:0}
.band.dark .band-media::after{background:linear-gradient(to bottom,
  rgba(20,13,6,.62),rgba(20,13,6,.80) 60%,rgba(20,13,6,.93))}
.band.light .band-media::after{background:linear-gradient(to bottom,
  rgba(239,225,193,.88),rgba(239,225,193,.95))}
.band-inner{position:relative;z-index:2}

/* ------------------------------------------------------------------ hero */
.hero{min-height:100svh;display:flex;align-items:center;justify-content:center;
  text-align:center;background:var(--night);overflow:hidden;position:relative}
.hero .band-media::after{background:linear-gradient(to bottom,
  rgba(20,13,6,.35),rgba(20,13,6,.55) 55%,rgba(20,13,6,.92))}
.hero-in{position:relative;z-index:2;padding:0 5vw}
.hero h1{color:var(--cream);font-size:clamp(2.6rem,9vw,7rem);
  text-shadow:-1.8px 0 rgba(214,58,46,.6),1.8px 0 rgba(43,176,205,.5),
    0 3px 0 rgba(0,0,0,.30),0 16px 36px rgba(0,0,0,.5)}
.kick{font-family:'GaramondJ',Georgia,serif;font-size:clamp(1.05rem,2.5vw,1.4rem);
  color:#f3e6cb;max-width:38ch;line-height:1.35;margin:1.4rem auto 0;
  text-shadow:0 2px 10px rgba(0,0,0,.6);font-weight:700}
.subcta{font-family:'GaramondJ',Georgia,serif;letter-spacing:.24em;text-transform:uppercase;
  font-size:.7rem;color:#cbb08a;margin-top:1.1rem}

/* ------------------------------------------------------------------- cta */
.cta{display:inline-flex;align-items:center;gap:.6rem;background:var(--ink);color:var(--cream);
  font-family:'Wantedo',Georgia,serif;font-size:clamp(1.05rem,2.4vw,1.45rem);letter-spacing:.02em;
  padding:.72em 1.5em;border-radius:999px;text-decoration:none;
  border:2px solid rgba(255,240,210,.18);box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .18s,box-shadow .18s;margin-top:1.8rem}
.cta:hover{transform:translateY(-2px) scale(1.02);
  box-shadow:0 16px 40px rgba(0,0,0,.5),-2px 0 0 rgba(227,51,51,.5),2px 0 0 rgba(43,190,221,.5)}
.cta.light{background:var(--cream);color:var(--ink)}
.cta .apple{width:.86em;height:.86em;margin-top:-.12em;fill:currentColor;flex:0 0 auto}

/* ----------------------------------------------------------- game posters
 * Three separate products, not three panels. Each gets its own drawn frame,
 * its own genre line, and a hover that lifts and pushes into the art, so it
 * is obvious you are looking at distinct games rather than one long strip. */
.shelf{display:grid;gap:clamp(26px,4vw,52px);margin-top:clamp(36px,5vw,60px)}
.tile{position:relative;display:block;text-decoration:none;color:var(--cream);
  min-height:clamp(320px,52vh,520px);overflow:hidden;background:var(--night);
  border:4px solid var(--ink);box-shadow:0 18px 44px rgba(0,0,0,.34);
  transition:transform .3s cubic-bezier(.2,.9,.3,1), box-shadow .3s ease, border-color .2s ease}
.band.dark .tile{border-color:rgba(247,238,216,.5)}

/* HOVER. The old one lifted 6px and scaled the art 4.5%, which on a dark card
 * behind a heavy scrim is invisible unless you already know to look. Four
 * things move at once now, and the loudest is the hard offset shadow: a
 * silkscreen register shift, not a soft glow, because a soft glow is the thing
 * every template does and it disappears against a dark tile anyway. */
/* Specificity note: the reveal rule `.js .rev.in{transform:none}` and
 * `.band.dark .tile{border-color:...}` are both (0,3,0), so a plain
 * `.tile:hover` at (0,2,0) lost silently — the shadow appeared but the lift and
 * the red border never did. Qualifying with .shelf and .rev outranks both. */
.shelf .tile.rev:hover,.shelf .tile.rev:focus-visible,
.shelf .tile:hover,.shelf .tile:focus-visible{
  transform:translateY(-12px);
  border-color:var(--red);
  box-shadow:14px 14px 0 var(--red), 0 34px 70px rgba(0,0,0,.55)}
.tile-media{position:absolute;inset:0;z-index:0;
  transition:transform .55s cubic-bezier(.2,.9,.3,1), filter .35s ease}
.shelf .tile:hover .tile-media,.shelf .tile:focus-visible .tile-media{
  transform:scale(1.10);
  /* The art is deliberately desaturated at rest so the hovered tile is the only
   * saturated thing on screen. That contrast reads faster than any motion. */
  filter:saturate(1.25) contrast(1.06) brightness(1.1)}

.tile-media video,.tile-media img{width:100%;height:100%;object-fit:cover}
.tile-media::after{content:'';position:absolute;inset:0;transition:background .3s ease;
  background:linear-gradient(to bottom,rgba(20,13,6,.10),rgba(20,13,6,.62) 58%,rgba(20,13,6,.94))}
.shelf .tile:hover .tile-media::after,.shelf .tile:focus-visible .tile-media::after{
  background:linear-gradient(to bottom,rgba(20,13,6,0),rgba(20,13,6,.30) 55%,rgba(20,13,6,.85))}

/* One blade pass on enter. Halfsies is a cutting game and the studio mark is a
 * drawn box; a diagonal wipe is the house gesture. It runs once and stops —
 * a looping shine is a carousel tell. */
.tile::before{content:'';position:absolute;z-index:1;top:-60%;bottom:-60%;left:-30%;width:14%;
  background:linear-gradient(100deg,transparent,rgba(255,247,225,.5),transparent);
  transform:rotate(14deg) translateX(-40vw);opacity:0;pointer-events:none}
.shelf .tile:hover::before,.shelf .tile:focus-visible::before{
  animation:bladepass .62s cubic-bezier(.3,.7,.4,1) forwards}
@keyframes bladepass{
  0%{opacity:0;transform:rotate(14deg) translateX(-40vw)}
  12%{opacity:1}
  100%{opacity:0;transform:rotate(14deg) translateX(110vw)}}
.tile-in{position:relative;z-index:2;padding:clamp(24px,3.2vw,44px);
  height:100%;display:flex;flex-direction:column;justify-content:flex-end;min-height:inherit}
.tile h3{font-size:clamp(1.8rem,4.6vw,3.2rem);
  text-shadow:-1.4px 0 rgba(214,58,46,.55),1.4px 0 rgba(43,176,205,.45),0 12px 30px rgba(0,0,0,.55)}
.tile .meta{font-family:'GaramondJ',Georgia,serif;letter-spacing:.28em;text-transform:uppercase;
  font-size:.66rem;color:var(--amber);margin:0 0 .7rem}
.tile p{font-family:'GaramondJ',Georgia,serif;font-size:1rem;color:#e7d9ba;margin:.7rem 0 0;
  max-width:44ch;font-weight:700;text-shadow:0 2px 10px rgba(0,0,0,.7)}
.tile .more{display:inline-block;margin-top:1.1rem;font-family:'Wantedo',Georgia,serif;
  text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;color:var(--cream);
  border-bottom:2px solid var(--red);padding-bottom:3px;
  opacity:.85;transition:opacity .25s ease,transform .25s ease}
.shelf .tile:hover .more{opacity:1;transform:translateX(5px)}
.pin{position:absolute;top:clamp(18px,2vw,26px);right:clamp(18px,2vw,26px);z-index:3;
  font-family:'Wantedo',Georgia,serif;text-transform:uppercase;letter-spacing:.16em;font-size:11px;
  background:var(--red);color:var(--cream);padding:7px 14px;border:2px solid var(--ink)}
.pin.soon{background:var(--ink);color:var(--amber)}

/* The Halfsies wordmark, used at real size instead of set as type. */
.wordmark{max-width:min(330px,58vw);margin:0 auto 1.2rem;
  filter:drop-shadow(0 14px 34px rgba(0,0,0,.4))}

/* ------------------------------------------------------------------ list */
.stack{margin-top:2.2rem}
.entry{display:grid;grid-template-columns:64px 1fr auto;gap:clamp(14px,2.4vw,32px);
  align-items:baseline;padding:clamp(18px,2.6vw,30px) 0;
  border-top:1px solid rgba(84,52,26,.28);text-decoration:none;color:inherit}
.entry:last-child{border-bottom:1px solid rgba(84,52,26,.28)}
.entry>span{display:block;min-width:0}
.entry .no{font-family:'Wantedo',Georgia,serif;font-size:1.2rem;color:var(--amber-dk)}
.entry .ttl{display:block;font-family:'Wantedo',Georgia,serif;text-transform:uppercase;
  font-size:clamp(1.25rem,2.6vw,1.9rem);line-height:1.05}
.entry .sub{display:block;font-family:'GaramondJ',Georgia,serif;font-size:.98rem;
  color:var(--saddle);margin-top:.5rem;max-width:56ch;font-weight:700}
.entry .go{font-family:'Wantedo',Georgia,serif;font-size:11px;letter-spacing:.14em;
  color:var(--red);text-transform:uppercase;white-space:nowrap}
.entry:hover .ttl{color:var(--red)}
.band.dark .entry{border-color:rgba(251,243,223,.2)}
.band.dark .entry .sub{color:#c9b391}
@media(max-width:640px){.entry{grid-template-columns:40px 1fr}.entry .go{grid-column:2;margin-top:.6rem}}

/* ------------------------------------------------------------------ faq */
.faq{border-top:1px solid rgba(84,52,26,.28);padding:1.3rem 0;max-width:760px;margin:0 auto}
.faq h3{font-size:clamp(1.05rem,2.2vw,1.3rem);margin-bottom:.5rem}
.faq p{font-family:'GaramondJ',Georgia,serif;color:var(--saddle);margin:0;font-weight:700}

/* --------------------------------------------------------------- footer */
footer{background:var(--night);color:var(--cream);padding:70px 0 46px;position:relative}
footer a{color:var(--amber);text-decoration:none}
footer a:hover{text-decoration:underline}
.footgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:32px}
.footgrid h4{font-family:'Wantedo',Georgia,serif;text-transform:uppercase;letter-spacing:.1em;
  font-size:12px;color:var(--amber);margin:0 0 10px}
.footgrid ul{list-style:none;padding:0;margin:0;font-size:.98rem;line-height:2}
.foot{font-family:'GaramondJ',Georgia,serif;font-size:.85rem;color:#c9b391;margin-top:2.4rem;font-weight:700}

/* --------------------------------------------------------------- motion */
.js .rev{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s ease}
.js .rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .grain,.boilframe rect,.eyebrow,.lead p,.copy p,.subcta,.entry .sub,.foot{animation:none!important}
  .js .rev{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  [data-par]{transform:none!important}
}


/* ============================================ the cuttable Halfsies hero
 * Lifted from halfsies.jejestudios.com rather than reimplemented: the logo,
 * the brass scale and the drag-to-cut interaction are the studio's own proven
 * code, and a second version of them would only drift out of sync. Drag across
 * the mark and it splits; the halves fall into the pans and get weighed. */
.logoscale{width:min(74vw,460px);display:flex;flex-direction:column;align-items:center;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.5));animation:logopop 1.1s cubic-bezier(.2,1.1,.3,1) both}
.lg-arc{width:86%;display:block}
.lg-scale{width:78%;margin-top:-4.5%;display:block;overflow:visible}
.lg-scale text{font-family:'Wantedo';font-size:82px;fill:#fbf3df}
.lg-scale g[id^=ls-wg]{opacity:0}
.lg-word{width:100%;margin-top:-14%;display:block;position:relative;z-index:2}
.cuttable{touch-action:none;cursor:crosshair;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
#cutline{position:fixed;inset:0;z-index:90;pointer-events:none}
#cutline polyline{fill:none;stroke:rgba(255,255,255,.92);stroke-width:3.5;stroke-linecap:round;
  stroke-dasharray:1 12;filter:drop-shadow(0 1px 4px rgba(0,0,0,.45));animation:march .3s linear infinite}
.cutpiece{position:absolute;z-index:85;pointer-events:none;will-change:transform;
  transition:transform .85s cubic-bezier(.3,.75,.25,1.05)}
.cutpiece.back{transition:transform .6s cubic-bezier(.4,0,.2,1)}
.ghost{position:absolute;left:50%;top:54%;z-index:7;pointer-events:none;opacity:0;
  animation:ghostswipe 4.4s ease-in-out 1.6s infinite}
.hero-inner{position:relative;z-index:5;padding:6vh 22px 12vh;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.scrollcue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);z-index:6;
  color:#f0e2c4;font-family:Garamond;letter-spacing:.3em;font-size:.66rem;text-transform:uppercase;
  opacity:.8;animation:bob 1.8s ease-in-out infinite}
.subcta{font-family:'Garamond';font-size:.9rem;letter-spacing:.28em;text-transform:uppercase;color:#f6edd8;opacity:1}
.subcta,.trio .n,.trio h4,.trio p,.foot{
  animation:tboil .42s steps(1) infinite;
}
.tint{position:absolute;inset:0;z-index:2;background:
  linear-gradient(180deg,rgba(30,20,10,.28),rgba(30,20,10,.12) 30%,rgba(30,20,10,.30) 70%,rgba(20,14,7,.75) 90%,rgb(24,16,9));}
.tint{position:absolute;inset:0;z-index:1;background:radial-gradient(120% 120% at 50% 30%,rgba(20,14,7,.4),rgba(16,10,5,.86))}
.vb{opacity:0}
/* Scoped adjustments for this page: the hero here is a studio hero, so the
   mark sits a little smaller and the cue sits under it. */
.hero .logoscale{margin:0 auto}
.hero-in .cuttable{cursor:crosshair}
.cuthint{font-family:'GaramondJ',Georgia,serif;letter-spacing:.26em;text-transform:uppercase;
  font-size:.66rem;color:#cbb08a;margin:1.1rem 0 0}


/* ---------------------------------------------------- the cut verdict
 * After the scale settles, say what the cut was worth. Same thresholds and
 * the same lines the game uses, so the site never grades you differently
 * from the thing it is advertising. */
.verdict{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.92);
  z-index:96;pointer-events:none;text-align:center;opacity:0;
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,1.1,.3,1)}
.verdict.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.verdict .pct{font-family:'Wantedo',Georgia,serif;font-size:clamp(3.4rem,15vw,10rem);
  line-height:.86;color:var(--cream);
  text-shadow:-2.4px 0 rgba(214,58,46,.75),2.4px 0 rgba(43,176,205,.65),
    0 4px 0 rgba(0,0,0,.35),0 18px 46px rgba(0,0,0,.6)}
.verdict .say{font-family:'Wantedo',Georgia,serif;text-transform:uppercase;
  font-size:clamp(.85rem,2.4vw,1.35rem);letter-spacing:.06em;margin-top:.6rem;
  color:var(--amber);text-shadow:0 3px 16px rgba(0,0,0,.8);max-width:22ch;margin-inline:auto;
  line-height:1.2}
.verdict.good .say{color:#8fd07a}
.verdict.ugly .say{color:#e0704f}

/* ------------------------------------------------------------ responsive
 * The hero mark, the cue and the verdict all key off viewport width so the
 * whole rig scales together instead of the logo outgrowing the phone. */
@media (max-width:900px){
  .logoscale{width:min(82vw,380px)}
  .hero .ca{font-size:clamp(1.5rem,7.4vw,2.6rem)}
}
@media (max-width:560px){
  .logoscale{width:min(88vw,320px)}
  .lg-scale text{font-size:104px}
  .cuthint{font-size:.6rem;letter-spacing:.2em}
  .hero-in{padding:0 4vw}
  .verdict .pct{font-size:clamp(3rem,19vw,5.4rem)}
}


/* Headings boil as well, at a slower cadence than body copy so the page does
   not shimmer uniformly. Wantedo is already a rough face; this stops it
   sitting perfectly still, which is what read as mechanical. */
.hero h1, .lead h2, .tile h3, .entry .ttl, .faq h3, .footgrid h4, .nav .brand{
  animation: tboilslow .58s steps(1) infinite;
}
@keyframes tboilslow{
  0%{filter:url(#tboil1)} 33%{filter:url(#tboil3)} 66%{filter:url(#tboil2)}
}
/* The verdict number is the one thing that must stay crisp: it is a reading. */
.verdict .pct, .verdict .say{animation:none}

@media (prefers-reduced-motion: reduce){
  .hero h1,.lead h2,.tile h3,.entry .ttl,.faq h3,.footgrid h4,.nav .brand,
  .boilframe rect,.eyebrow,.lead p,.copy p,.subcta,.entry .sub,.foot,.grain{
    animation:none!important; filter:none!important;
  }
}


/* ====================================================== nav, drawer, social
 * The old nav jumped to sections on this same page, which is not navigation.
 * It is now: brand, socials, and a drawer that opens the rest of the studio's
 * actual properties. */
.nav .wrap{gap:18px}
.burger{display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:34px;height:34px;background:none;border:0;cursor:pointer;padding:0;margin-right:4px}
.burger span{display:block;height:2.5px;background:var(--ink);border-radius:2px;
  transition:transform .25s ease,opacity .2s ease}
.burger span:nth-child(1){width:22px}
.burger span:nth-child(2){width:16px}
.burger span:nth-child(3){width:20px}
.burger:hover span{background:var(--red)}
.nav .social{display:inline-flex;gap:14px;align-items:center;margin-left:auto}
.nav .social a{font-size:12px;letter-spacing:.08em}

/* Left drawer: every property the studio actually runs. */
.drawer{position:fixed;top:0;bottom:0;left:-380px;width:min(360px,86vw);z-index:900;
  background:var(--night);color:var(--cream);
  transition:left .34s cubic-bezier(.2,.9,.3,1);overflow-y:auto;
  border-right:4px solid var(--ink);padding:26px 26px 40px}
.drawer.open{left:0}
.drawer h4{font-family:'Wantedo',Georgia,serif;text-transform:uppercase;letter-spacing:.14em;
  font-size:11px;color:var(--amber);margin:26px 0 10px}
.drawer h4:first-of-type{margin-top:8px}
.drawer a{display:block;color:var(--cream);text-decoration:none;font-family:'Wantedo',Georgia,serif;
  text-transform:uppercase;font-size:1.02rem;padding:9px 0;border-bottom:1px solid rgba(251,243,223,.14)}
.drawer a:hover{color:var(--amber);padding-left:6px}
.drawer a small{display:block;font-family:'GaramondJ',Georgia,serif;text-transform:none;
  letter-spacing:0;font-size:.78rem;color:#c9b391;margin-top:2px}
.drawer .close{position:absolute;top:16px;right:18px;background:none;border:0;color:var(--cream);
  font-size:26px;line-height:1;cursor:pointer;font-family:'Wantedo',Georgia,serif}
.scrim{position:fixed;inset:0;background:rgba(10,7,3,.6);z-index:880;opacity:0;
  pointer-events:none;transition:opacity .3s ease}
.scrim.on{opacity:1;pointer-events:auto}
body.locked{overflow:hidden}

/* Footer socials + legal, on every page. */
.social-row{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px}
.social-row a{font-family:'Wantedo',Georgia,serif;text-transform:uppercase;letter-spacing:.08em;
  font-size:.82rem}
.legalbar{margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgba(251,243,223,.18);
  font-family:'GaramondJ',Georgia,serif;font-size:.85rem;color:#c9b391}
.legalbar a{color:var(--amber)}

/* Blog */
.postlist{display:grid;gap:0;margin-top:2rem}
.post-link{display:grid;grid-template-columns:120px 1fr;gap:22px;padding:22px 0;
  border-top:1px solid rgba(84,52,26,.28);text-decoration:none;color:inherit;align-items:baseline}
.post-link:last-child{border-bottom:1px solid rgba(84,52,26,.28)}
.post-link time{font-family:'GaramondJ',Georgia,serif;letter-spacing:.16em;text-transform:uppercase;
  font-size:.68rem;color:var(--amber-dk)}
.post-link h3{font-family:'Wantedo',Georgia,serif;text-transform:uppercase;
  font-size:clamp(1.15rem,2.4vw,1.7rem);line-height:1.06}
.post-link p{font-family:'GaramondJ',Georgia,serif;font-size:.96rem;color:var(--saddle);
  margin:.5rem 0 0;font-weight:700}
.post-link:hover h3{color:var(--red)}
.prose{max-width:70ch;margin:0 auto;font-family:'GaramondJ',Georgia,serif;font-weight:700;
  color:var(--ink2);line-height:1.65}
.prose h2{font-size:clamp(1.4rem,3vw,2rem);margin:2.2rem 0 .7rem;color:var(--ink2)}
.prose p{margin:0 0 1.1rem;max-width:none}
@media(max-width:640px){.post-link{grid-template-columns:1fr;gap:6px}}


/* The cut hint belongs to everyone except people who asked for less motion. */
@media (prefers-reduced-motion: reduce){ .ghost{ display:none } }

/* Header mark sizing lives with the rest of the nav rules further up. A second
   copy used to sit here from when the logo was still missing, and because it
   came later in the file it quietly won the cascade and pinned the mark to
   26px — the height set upstream never applied. */


/* The ghost hint's animation. Without these keyframes the element renders at
   opacity 0 forever, which is exactly how it looked absent. */
@keyframes ghostswipe{
  0%{opacity:0;transform:translate(-240px,4px) rotate(-7deg)}
  10%{opacity:1;transform:translate(-170px,-18px) rotate(-4deg)}
  22%{transform:translate(-90px,22px) rotate(2deg)}
  34%{transform:translate(0px,-20px) rotate(-3deg)}
  46%{opacity:1;transform:translate(95px,20px) rotate(4deg)}
  56%{opacity:0;transform:translate(180px,-6px) rotate(6deg)}
  100%{opacity:0;transform:translate(180px,-6px)}
}

/* Social marks, not words. */
.social a, .social-row a, .drawer .soc a{display:inline-flex;align-items:center;gap:7px}
.social svg, .social-row svg, .drawer svg.icon{width:17px;height:17px;fill:currentColor;flex:0 0 auto}
.nav .social a{font-size:0}                 /* mark only in the bar */
.nav .social a svg{width:19px;height:19px}
.nav .social a.cta-lite{font-size:13px;font-family:'Wantedo',Georgia,serif;
  letter-spacing:.08em;text-transform:uppercase}
.social-row a{font-family:'GaramondJ',Georgia,serif;font-size:.88rem;letter-spacing:.02em}
.drawer .soc{display:flex;gap:16px;padding:10px 0;border-bottom:1px solid rgba(251,243,223,.14)}
.drawer .soc a{padding:0;border:0}
.drawer .soc svg{width:20px;height:20px}