/* ============================================================
   SOUL — shared design system
   Ground: cool porcelain. Warmth comes only from photography.
   Signature: the glass slipcase — frost that clears on approach.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
img{display:block;max-width:100%}
button,input{font:inherit;color:inherit}

/* ---------- tokens ---------- */
:root{
  /* Sunlit blush-cream ground. The earlier cool porcelain read as a gallery;
     this reads as morning light through a window — warm, alive, welcoming. */
  --porcelain:#F6EAE4;
  --frost:#FFFCFA;
  --ink:#2A1C22;          /* warm plum-brown near-black, never cold gray */
  --ink-2:#3F2C34;
  --muted:#6B5560;
  --hair:rgba(42,28,34,.10);

  --f-d:'Fraunces',Georgia,serif;
  --f-b:'Literata',Georgia,'Times New Roman',serif;  /* commissioned for long-form screen reading */
  --f-u:'Literata',Georgia,serif;                    /* labels + UI */

  /* Vibrant warm rose. Saturation more than doubled from the old #915E71 (0.21 →
     0.50) so the site feels alive rather than hushed — but solved for, not picked
     by eye: this is the darkest 50%-saturation rose that still clears WCAG AA on
     both the ground (5.02:1) and glass (5.44:1). Pushing saturation higher went
     neon and read cheap. */
  --accent:#B83D5C;
  --accent-soft:#FBE4E6;   /* tinted fills, chips, halos */
  --gold:#C98A3C;          /* secondary warm — sparkles and small flourishes */

  /* Blooms: warmer and considerably more present than before (opacity .42 → .62),
     because the photography is now warm too and no longer fights them. */
  --b1:#FFD9C7; --b2:#FFCBC9; --b3:#FFE6C2; --b4:#FBD3DE;

  /* Surfaces, borrowed from the ALM console's system: the ground is deliberately
     a shade dimmer than the surfaces sitting on it, so every panel reads as a lit
     island floating above it rather than a patch of the same paper. */
  --surface:#FFFCFA;
  --surface-2:#FDF6F2;
  --ground:#F3E7E0;

  /* One radius scale, used everywhere. iOS is consistent above all else — the
     previous mix of 999px arches, 120px corners and 26px cards was the thing
     that read as untidy. */
  --r-island:1.9rem;   /* header, hero panels, big surfaces */
  --r-lg:1.5rem;       /* cards */
  --r-md:1.1rem;       /* inner blocks, images inside cards */
  --r-sm:.75rem;       /* chips, small controls */
  --r-pill:999px;

  --gut:clamp(1.15rem,4vw,2.75rem);
  --rad:var(--r-lg);
  --ease:cubic-bezier(.2,.85,.25,1);

  /* iOS-style elevation: tight, soft, never a hard drop shadow */
  --lift-1:0 1px 0 rgba(255,255,255,.7) inset, 0 8px 22px -18px rgba(90,45,45,.30);
  --lift-2:0 1px 0 rgba(255,255,255,.75) inset, 0 14px 34px -26px rgba(90,45,45,.34),
           0 4px 12px -8px rgba(90,45,45,.14);
  --lift-3:0 1px 0 rgba(255,255,255,.8) inset, 0 22px 50px -34px rgba(90,45,45,.40),
           0 8px 22px -16px rgba(90,45,45,.18);
}

/* client themes — one template, different light */
body.t-jh{                       /* Janet Howard · fashion — warm terracotta */
  --accent:#B4473C;
  --accent-soft:#FBE5DF;
  --b1:#FFDCC9; --b2:#FFD3C4; --b3:#FFE9CC; --b4:#F7DCD2;
}
body.t-bg{                       /* Beetles Gel · nails — vivid plum-rose */
  --accent:#B63C79;
  --accent-soft:#FBE0EC;
  --b1:#FFD4E4; --b2:#FFCFD6; --b3:#FFE6C8; --b4:#F3D9EE;
}

/* ---------- ground ---------- */
body{
  font-family:var(--f-b);
  font-size:clamp(1rem,.96rem + .2vw,1.06rem);
  line-height:1.72;                 /* serif needs a little more air than a grotesque */
  color:var(--ink);
  background:var(--porcelain);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* page-spanning color blooms — positioned down the whole document,
   never background-attachment:fixed (breaks on iOS Safari) */
body::before{
  content:"";position:absolute;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(46rem 32rem at  6%  0%, var(--b1) 0%, transparent 62%),
    radial-gradient(42rem 30rem at 97% 10%, var(--b2) 0%, transparent 60%),
    radial-gradient(40rem 28rem at  2% 34%, var(--b3) 0%, transparent 58%),
    radial-gradient(44rem 30rem at 95% 52%, var(--b4) 0%, transparent 60%),
    radial-gradient(40rem 28rem at  4% 70%, var(--b2) 0%, transparent 58%),
    radial-gradient(44rem 32rem at 88% 88%, var(--b1) 0%, transparent 60%);
  background-repeat:no-repeat;
  opacity:.62;
}

/* ---------- type ---------- */
.d1,.d2,.d3{font-family:var(--f-d);font-weight:400;line-height:1.02;letter-spacing:-.026em}
.d1{font-size:clamp(2.85rem,7.4vw,5.5rem);font-variation-settings:'opsz' 144,'SOFT' 30}
.d2{font-size:clamp(2.05rem,4.4vw,3.3rem);font-variation-settings:'opsz' 100,'SOFT' 24;line-height:1.06}
.d3{font-size:clamp(1.35rem,2.2vw,1.75rem);font-variation-settings:'opsz' 40;line-height:1.18;letter-spacing:-.018em}
.lede{font-size:clamp(1.06rem,1.02rem + .4vw,1.28rem);color:var(--muted);line-height:1.6;max-width:46ch}

/* the small wide-tracked label — used for section eyebrows */
.eyebrow{
  /* 12.5px minimum: wide-tracked uppercase below 12px is legible in a mockup and
     a strain on a real phone, whatever the contrast ratio says */
  font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);display:flex;align-items:center;gap:.7rem;
}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:currentColor;opacity:.5}

/* ---------- layout ---------- */
.wrap{width:min(1180px,100% - var(--gut)*2);margin-inline:auto}
.sec{padding-block:clamp(4rem,9vw,7.5rem)}
.sec-head{max-width:56ch;margin-bottom:clamp(2.2rem,4vw,3.4rem);display:grid;gap:1rem}

/* ---------- glass ---------- */
/* The island material, straight from the console: a flat translucent surface
   over heavy blur, a hairline white rim, and tight low-spread elevation. */
.glass{
  background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,.45)),
             rgba(255,252,250,.72);
  -webkit-backdrop-filter:blur(24px) saturate(1.35);
  backdrop-filter:blur(24px) saturate(1.35);
  border:1px solid rgba(255,255,255,.72);
  border-radius:var(--r-lg);
  box-shadow:var(--lift-2);
}

/* ---------- buttons ----------
   Deep cool ink, matte, hairline top light, accent only in the cast glow.
   Never glossy: gloss on a pale ground reads cheap. */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1.02rem 1.95rem;border:0;border-radius:999px;
  font-family:var(--f-b);font-size:.94rem;font-weight:600;letter-spacing:-.004em;
  color:#fff;cursor:pointer;text-decoration:none;white-space:nowrap;
  background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.17),
    inset 0 -1px 0 rgba(0,0,0,.32),
    0 10px 24px -13px color-mix(in oklab,var(--accent) 62%,var(--ink)),
    0 3px 8px -3px rgba(23,22,29,.26);
  transition:transform .42s var(--ease),box-shadow .42s var(--ease);
}
.btn::after{                      /* sheen sweep — the one gloss, and it moves */
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.17) 47%,transparent 62%);
  transform:translateX(-135%);
  transition:transform .8s cubic-bezier(.3,.8,.3,1);
}
.btn:hover{
  transform:translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.2),
    inset 0 -1px 0 rgba(0,0,0,.32),
    0 20px 38px -16px color-mix(in oklab,var(--accent) 74%,var(--ink)),
    0 4px 10px -4px rgba(23,22,29,.3);
}
.btn:hover::after{transform:translateX(135%)}
.btn:active{transform:translateY(0) scale(.988)}

.btn-ghost{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.98rem 1.6rem;border-radius:999px;text-decoration:none;
  font-size:.92rem;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.56);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 8px 20px -14px rgba(28,20,40,.4),inset 0 1px 0 rgba(255,255,255,.9);
  transition:transform .38s var(--ease),background .38s,box-shadow .38s;
}
.btn-ghost:hover{transform:translateY(-2px);background:rgba(255,255,255,.78);
  box-shadow:0 14px 28px -16px rgba(28,20,40,.42),inset 0 1px 0 rgba(255,255,255,.95)}

/* hero quick-links: a way into the rooms that doesn't require an email first */
.qlinks{display:flex;flex-wrap:wrap;gap:.6rem;margin:0 0 1.6rem}
.qlink{
  display:inline-flex;align-items:center;min-height:44px;
  padding:.55rem 1.1rem;border-radius:999px;text-decoration:none;
  font-size:.86rem;font-weight:600;color:var(--ink);
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 6px 16px -13px rgba(28,20,40,.4),inset 0 1px 0 rgba(255,255,255,.85);
  transition:transform .35s var(--ease),background .35s,box-shadow .35s;
}
.qlink:hover{transform:translateY(-2px);background:rgba(255,255,255,.78);
  box-shadow:0 10px 22px -14px rgba(28,20,40,.42),inset 0 1px 0 rgba(255,255,255,.95)}
.qlink:active{transform:translateY(0)}

/* text link with a rule that draws itself */
.tlink{
  display:inline-flex;align-items:center;gap:.45rem;text-decoration:none;
  color:var(--ink);font-weight:600;font-size:.94rem;position:relative;padding-bottom:2px;
}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;
  background:var(--accent);transform:scaleX(0);transform-origin:left;
  transition:transform .45s var(--ease)}
.tlink:hover::after{transform:scaleX(1)}
.tlink svg{transition:transform .45s var(--ease)}
.tlink:hover svg{transform:translateX(4px)}

:where(a,button,input,summary):focus-visible{
  outline:2px solid var(--accent);outline-offset:3px;border-radius:8px;
}

/* ---------- header: a floating island ----------
   Detached from the top edge and from the page width, so it reads as a piece of
   frosted chrome hovering over the content — the same material and elevation the
   ALM console uses for its header and rails. */
.hdr{
  position:sticky;top:.85rem;z-index:60;
  width:min(1180px,100% - var(--gut)*2);
  margin:.85rem auto 0;
  padding:.5rem .6rem .5rem 1.2rem;
  border-radius:var(--r-island);
  background:linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),
             rgba(255,252,250,.72);
  -webkit-backdrop-filter:blur(24px) saturate(1.35);
  backdrop-filter:blur(24px) saturate(1.35);
  border:1px solid rgba(255,255,255,.75);
  box-shadow:var(--lift-2);
}
.hdr .wrap{width:100%}
.hdr-in{display:flex;align-items:center;justify-content:space-between;gap:1.5rem}
.mark{
  font-family:var(--f-d);font-size:1.32rem;font-weight:500;letter-spacing:.34em;
  text-transform:uppercase;text-decoration:none;color:var(--ink);
  font-variation-settings:'opsz' 40;padding-left:.06em;
  display:inline-flex;align-items:center;min-height:44px;   /* thumb-sized */
}
.nav{display:flex;align-items:center;gap:1.9rem}
.nav a{text-decoration:none;color:var(--muted);font-size:.9rem;font-weight:500;
  transition:color .3s}
.nav a:hover{color:var(--ink)}
@media(max-width:760px){.nav a:not(.btn):not(.btn-ghost){display:none}}

/* ---------- hero ---------- */
.hero{padding-block:clamp(3.2rem,7vw,6rem) clamp(3rem,6vw,5rem)}
.hero-grid{display:grid;gap:clamp(2.4rem,5vw,4rem);align-items:center}
@media(min-width:940px){.hero-grid{grid-template-columns:1.06fr .94fr}}
.hero-copy{display:grid;gap:1.5rem;justify-items:start}

/* choreographed load: each line rises out of its own mask */
.rise{overflow:hidden;display:block}
.rise>*{display:block;transform:translateY(105%);opacity:0;
  animation:riseIn .95s var(--ease) forwards;animation-delay:calc(var(--i,0)*95ms + 120ms)}
@keyframes riseIn{to{transform:translateY(0);opacity:1}}
.fade{opacity:0;animation:fadeIn .9s var(--ease) forwards;
  animation-delay:calc(var(--i,0)*95ms + 260ms)}
@keyframes fadeIn{to{opacity:1}}

/* Hero portrait — an ARCH, not a rectangle.
   The arch is the shape motif of the whole site now: soft, architectural and
   warm, and it reads as feminine without being cute-for-the-sake-of-it.
   It also fixes the "huge window" problem — a 4/5 box at this column width ran
   to ~650px tall and dominated the page. Capped height plus the domed top makes
   it feel like a window into somewhere nice rather than a slab. */
.portrait{position:relative;overflow:hidden;
  border-radius:999px 999px 30px 30px;
  max-height:clamp(380px,52vw,540px);
  box-shadow:0 34px 70px -34px rgba(120,60,60,.42),inset 0 1px 0 rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.75);
  animation:portraitIn 1.1s var(--ease) both}
.portrait img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;
  max-height:clamp(380px,52vw,540px)}
@keyframes portraitIn{
  from{opacity:0;transform:translateY(22px) scale(.97)}
  to{opacity:1;transform:none}
}
.portrait figcaption{
  position:absolute;left:.85rem;right:.85rem;bottom:.85rem;
  padding:.85rem 1.15rem;border-radius:var(--r-md);
  font-size:.83rem;color:var(--ink);
  background:linear-gradient(150deg,rgba(255,255,255,.8),rgba(255,255,255,.55));
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.85);
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
}

/* ---------- SIGNATURE: the glass slipcase ---------- */
.edits{display:grid;gap:clamp(1.1rem,2.2vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr))}

/* The slipcase, rebuilt around a hard constraint it previously ignored:
   ~80% of this site's traffic arrives from Pinterest, on a phone, where there
   is no hover. The frost was a permanent backdrop-filter:blur(7px) with no
   hover-capability guard, so on touch it never cleared — every category card
   was an unrecognisable smudge, and the photography was effectively invisible
   to most visitors.

   So the default state is now the photograph, legible, on every device. The
   frost survives as what its own comment always said it was — a tease that
   clears on approach — but only where a real pointer exists to clear it. */
.edit{
  position:relative;display:block;text-decoration:none;color:inherit;
  border-radius:var(--r-island);overflow:hidden;aspect-ratio:4/5;
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 30px 70px -34px rgba(28,20,40,.44);
  transition:transform .8s var(--ease),box-shadow .8s var(--ease);
}
.edit>img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  /* The photographs are composed with the subject centred, and the copy block
     covers the bottom ~40% — so a centred crop buried the actual product
     behind the text. Biasing the crop upward lifts the subject clear of it.
     scale 1.06 -> 1.02: the old value pushed more of the subject out of frame
     than the hover zoom-out ever gave back. */
  object-position:center 34%;
  transform:scale(1.02);filter:saturate(.94) brightness(1.01);
  transition:transform 1.2s var(--ease),filter 1s var(--ease);
}
.edit .frost{
  position:absolute;inset:0;opacity:0;          /* off unless hover exists */
  background:linear-gradient(to top,
    rgba(255,251,248,.52) 0%, rgba(255,251,248,.40) 30%,
    rgba(255,251,248,.20) 58%, rgba(255,251,248,0) 84%);
  -webkit-backdrop-filter:blur(3px) saturate(108%);
  backdrop-filter:blur(3px) saturate(108%);
  transition:opacity .85s var(--ease);
}
/* Always on now. It is what makes white copy legible over a photograph of any
   tone — the jewelry shot is dark terracotta, the fashion shot is near-white,
   and a single dark scrim is the only thing that carries both. */
.edit .scrim{
  position:absolute;inset:0;opacity:1;
  /* Weighted so the whole copy block sits over reliably dark ground, not just
     the last line. The fashion shot is near-white (mean 237) — over a weaker
     scrim the eyebrow dropped to roughly 2:1 against it. */
  background:linear-gradient(to top,
    rgba(16,12,22,.86) 0%, rgba(16,12,22,.72) 36%,
    rgba(16,12,22,.30) 60%, transparent 82%);
  transition:opacity .85s var(--ease);
}
.edit-body{
  position:absolute;left:0;right:0;bottom:0;padding:clamp(1.3rem,2.6vw,1.9rem);
  display:grid;gap:.5rem;color:#fff;transition:color .85s var(--ease);
}
/* --accent-soft (#FBE4E6) is a fill tint, not a text color — at 12px over the
   scrim it read as dirty white. This is the accent lifted for a dark ground,
   saturated enough to still read as the brand rose. */
.edit-kind{font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#FFBECD;transition:color .85s var(--ease)}
.edit-name{font-family:var(--f-d);font-size:clamp(1.7rem,3vw,2.3rem);font-weight:400;
  letter-spacing:-.022em;line-height:1.04;font-variation-settings:'opsz' 90;
  text-shadow:0 1px 20px rgba(16,12,22,.32)}
.edit-note{font-size:.94rem;color:rgba(255,255,255,.86);max-width:34ch;
  transition:color .85s var(--ease)}
.edit-cue{display:inline-flex;align-items:center;gap:.45rem;margin-top:.35rem;
  font-size:.88rem;font-weight:600}

.edit:hover,.edit:focus-visible{transform:translateY(-6px);
  box-shadow:0 46px 92px -38px rgba(28,20,40,.52)}
.edit:hover>img,.edit:focus-visible>img{transform:scale(1.06);filter:none}

/* The slipcase flourish, on pointer devices only. At rest the card carries a
   light frost; approaching wipes it and pushes the photograph forward. A touch
   device never enters this block, so it simply gets the clear state. */
@media (hover:hover) and (pointer:fine){
  .edit .frost{opacity:1}
  .edit:hover .frost,.edit:focus-visible .frost{opacity:0}
  .edit .scrim{opacity:.82}
  .edit:hover .scrim,.edit:focus-visible .scrim{opacity:1}
}

/* ---------- criteria (not a sequence — no numbers) ---------- */
.crit{display:grid;gap:clamp(1rem,2vw,1.4rem)}
@media(min-width:820px){.crit{grid-template-columns:repeat(3,1fr)}}
.crit-card{padding:clamp(1.5rem,2.6vw,2rem);display:grid;gap:.75rem;align-content:start}
.crit-q{font-family:var(--f-d);font-size:1.16rem;font-weight:400;letter-spacing:-.015em;
  font-variation-settings:'opsz' 36;line-height:1.24}
.crit-a{font-size:.96rem;color:var(--muted)}
.crit-ico{width:34px;height:34px;color:var(--accent);margin-bottom:.15rem}
.crit-ico svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.25}

/* ---------- gallery ---------- */
.looks{display:grid;gap:clamp(.85rem,1.8vw,1.25rem)}
@media(min-width:640px){.looks{grid-template-columns:repeat(3,1fr)}}
.look{position:relative;border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/4;
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 22px 48px -28px rgba(28,20,40,.42)}
.look img{width:100%;height:100%;object-fit:cover;
  transition:transform 1.1s var(--ease),filter .8s}
.look:hover img{transform:scale(1.05)}
/* Caption pill. Previously a single long caption overflowed its pill and got
   clipped by the tile — it now wraps and the pill grows with it. */
.look figcaption{position:absolute;left:.6rem;bottom:.6rem;right:.6rem;
  padding:.55rem .85rem;border-radius:var(--r-sm);
  font-size:.8rem;font-weight:500;line-height:1.4;
  color:var(--ink);
  overflow-wrap:anywhere;hyphens:auto;
  background:rgba(255,252,250,.86);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  backdrop-filter:blur(16px) saturate(1.3);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:var(--lift-1)}

.look-wide{aspect-ratio:3/2}
@media(min-width:640px){.look-wide{grid-column:span 2}}

/* a non-image tile that closes the grid with a click target */
.look-more{
  /* Was locked to the same 3/4 portrait ratio as the photo tiles, which left a
     tall, almost-empty card with its two lines stranded at opposite ends.
     It now sizes to the row and centres its content. */
  aspect-ratio:auto;
  display:flex;flex-direction:column;justify-content:center;gap:.9rem;
  padding:clamp(1.5rem,3vw,2.2rem);text-decoration:none;color:inherit;
  background:linear-gradient(158deg,rgba(255,255,255,.78),rgba(255,255,255,.46));
  -webkit-backdrop-filter:blur(20px) saturate(165%);
  backdrop-filter:blur(20px) saturate(165%);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 22px 48px -28px rgba(28,20,40,.4),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.look-more:hover{transform:translateY(-4px);
  box-shadow:0 32px 62px -30px rgba(28,20,40,.46),inset 0 1px 0 rgba(255,255,255,.95)}
.look-more:hover .tlink::after{transform:scaleX(1)}
.look-more:hover .tlink svg{transform:translateX(4px)}

/* ---------- shade studio (cosmetics clients) ---------- */
.studio{display:grid;gap:clamp(1.6rem,3.4vw,3rem);align-items:center;
  padding:clamp(1.7rem,3.4vw,3rem)}
@media(min-width:840px){.studio{grid-template-columns:minmax(0,.8fr) minmax(0,1fr)}}
.drop{
  --sh:#BE4C68;
  position:relative;aspect-ratio:1;width:min(270px,72vw);border-radius:50%;
  margin-inline:auto;
  background:radial-gradient(circle at 34% 26%,
    color-mix(in oklab,var(--sh) 52%,#fff) 0%,
    var(--sh) 46%,
    color-mix(in oklab,var(--sh) 68%,#000) 100%);
  box-shadow:
    inset 0 -20px 36px -18px rgba(0,0,0,.62),
    inset 0 10px 20px -10px rgba(255,255,255,.6),
    0 32px 62px -28px color-mix(in oklab,var(--sh) 66%,#000);
  transition:background .65s var(--ease),box-shadow .65s var(--ease);
}
.drop::after{
  content:"";position:absolute;left:23%;top:15%;width:29%;height:19%;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.88),transparent 72%);
  filter:blur(2px);
}
.shade-meta{display:grid;gap:.35rem;margin:1.5rem 0 1.1rem}
.shade-name{font-family:var(--f-d);font-size:1.55rem;font-weight:400;letter-spacing:-.02em;
  font-variation-settings:'opsz' 60}
.shade-note{color:var(--muted);font-size:.95rem}
.chips{display:flex;flex-wrap:wrap;gap:.65rem}
.chips button{
  width:46px;height:46px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:radial-gradient(circle at 36% 28%,
    color-mix(in oklab,var(--c) 46%,#fff) 0%, var(--c) 52%,
    color-mix(in oklab,var(--c) 72%,#000) 100%);
  box-shadow:
    inset 0 -7px 11px -7px rgba(0,0,0,.6),
    inset 0 4px 7px -4px rgba(255,255,255,.7),
    0 7px 15px -9px rgba(28,20,40,.55);
  transition:transform .32s var(--ease),box-shadow .32s var(--ease);
}
.chips button:hover{transform:translateY(-3px) scale(1.05)}
.chips button[aria-pressed="true"]{
  transform:translateY(-2px);
  box-shadow:
    inset 0 -7px 11px -7px rgba(0,0,0,.6),
    inset 0 4px 7px -4px rgba(255,255,255,.7),
    0 0 0 2px var(--porcelain),0 0 0 4px var(--ink),
    0 9px 18px -10px rgba(28,20,40,.55);
}

/* ---------- offer band ---------- */
.band{position:relative;isolation:isolate;overflow:hidden;border-radius:var(--r-island);
  padding:clamp(2.4rem,5vw,4.2rem);
  border:1px solid rgba(255,255,255,.7);
  box-shadow:0 36px 80px -40px rgba(28,20,40,.48)}
.band>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 30%;z-index:-2}
.band::before{content:"";position:absolute;inset:0;z-index:-1;
  -webkit-backdrop-filter:blur(6px) saturate(130%);
  backdrop-filter:blur(6px) saturate(130%);
  /* strong where the copy sits, falling away to let the photograph read */
  background:linear-gradient(100deg,
    rgba(255,255,255,.93) 0%, rgba(255,255,255,.86) 34%,
    rgba(255,255,255,.55) 66%, rgba(255,255,255,.34) 100%)}
@media(max-width:780px){
  .band::before{background:linear-gradient(180deg,
    rgba(255,255,255,.90) 0%,rgba(255,255,255,.84) 60%,rgba(255,255,255,.78) 100%)}
}
.band-in{display:grid;gap:1.35rem;justify-items:start;max-width:44ch}

/* ---------- email capture ---------- */
.capture{display:flex;flex-wrap:wrap;gap:.6rem;width:100%;max-width:480px}
.capture input{
  flex:1 1 210px;min-width:0;
  padding:1.02rem 1.25rem;border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 2px 5px rgba(28,20,40,.07),0 6px 16px -12px rgba(28,20,40,.3);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  backdrop-filter:blur(12px) saturate(150%);
  font-size:.95rem;transition:border-color .3s,box-shadow .3s,background .3s;
}
.capture input::placeholder{color:#8d879c}
.capture input:focus{outline:none;background:rgba(255,255,255,.9);
  border-color:color-mix(in oklab,var(--accent) 55%,#fff);
  box-shadow:inset 0 2px 5px rgba(28,20,40,.06),0 0 0 4px color-mix(in oklab,var(--accent) 18%,transparent)}
.fineprint{font-size:.8rem;color:var(--muted);max-width:44ch}
.said{font-size:.92rem;font-weight:600;color:var(--accent);min-height:1.4em}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:.7rem;max-width:800px}
.faq details{border-radius:var(--r-md);padding:0 clamp(1.1rem,2vw,1.5rem);overflow:hidden;
  transition:box-shadow .4s}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 0;
  display:flex;align-items:center;justify-content:space-between;gap:1.2rem;
  font-weight:600;font-size:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";width:11px;height:11px;flex:none;
  border-right:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .4s var(--ease)}
.faq details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.faq-a{padding:0 0 1.25rem;color:var(--muted);font-size:.97rem;max-width:64ch}

/* ---------- footer ---------- */
.ftr{padding-block:clamp(2.6rem,5vw,4rem) 2.2rem;border-top:1px solid var(--hair);margin-top:2rem}
.ftr-in{display:flex;flex-wrap:wrap;gap:1.6rem;justify-content:space-between;align-items:flex-start}
.ftr-nav{display:flex;flex-wrap:wrap;gap:1.3rem}
.ftr a{color:var(--muted);text-decoration:none;font-size:.88rem;transition:color .3s}
.ftr a:hover{color:var(--ink)}
.disclose{font-size:.78rem;color:var(--muted);max-width:62ch;line-height:1.55;
  padding-top:1.6rem;margin-top:1.6rem;border-top:1px solid var(--hair)}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(18px);
  transition:opacity .85s var(--ease),transform .85s var(--ease);
  transition-delay:calc(var(--i,0)*70ms)}
.reveal.in{opacity:1;transform:none}

/* ---------- utility ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;padding:.8rem 1.2rem;
  background:var(--ink);color:#fff;border-radius:0 0 12px 0;font-size:.9rem}
.skip:focus{left:0}
.btn-sm{padding:.72rem 1.25rem;font-size:.86rem}
.cta-row{display:flex;flex-wrap:wrap;gap:.7rem}
.sec-more{margin-top:2rem}

/* ---------- navigation ---------- */
.nav{gap:1.55rem;font-family:var(--f-u)}
.nav>a,.nav-drop>button{
  font-size:.92rem;font-weight:500;color:var(--muted);text-decoration:none;
  background:none;border:0;cursor:pointer;padding:.35rem 0;
  display:inline-flex;align-items:center;gap:.34rem;transition:color .3s;
}
.nav>a:hover,.nav-drop>button:hover,.nav>a[aria-current],.nav-drop[data-open]>button{color:var(--ink)}
.nav-drop{position:relative}
.nav-drop>button svg{transition:transform .35s var(--ease)}
.nav-drop:hover>button svg,.nav-drop:focus-within>button svg{transform:rotate(180deg)}
.nav-menu{
  position:absolute;top:calc(100% + .7rem);left:50%;transform:translate(-50%,-6px);
  min-width:210px;padding:.5rem;display:grid;gap:.1rem;border-radius:var(--r-md);
  opacity:0;visibility:hidden;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility .3s;
  background:linear-gradient(158deg,rgba(255,255,255,.9),rgba(255,255,255,.72));
  -webkit-backdrop-filter:blur(20px) saturate(168%);
  backdrop-filter:blur(20px) saturate(168%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 22px 46px -22px rgba(28,20,40,.34),inset 0 1px 0 rgba(255,255,255,.96);
}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
.nav-menu a{padding:.6rem .85rem;border-radius:var(--r-sm);font-size:.9rem;color:var(--muted);
  text-decoration:none;transition:background .25s,color .25s}
.nav-menu a:hover,.nav-menu a[aria-current]{background:rgba(255,255,255,.8);color:var(--ink)}

.burger{display:none;width:42px;height:42px;border:0;background:none;cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:6px}
.burger span{display:block;width:20px;height:1.5px;background:var(--ink);
  transition:transform .35s var(--ease),opacity .3s}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.mobile-nav{display:none;padding:.4rem 0 1.2rem;border-top:1px solid var(--hair)}
.mobile-nav .wrap{display:grid;gap:.1rem}
.mobile-nav a{padding:.8rem .2rem;font-size:1rem;color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--hair)}
.mobile-nav .nav-drop{position:static}
.mobile-nav .nav-drop>button{width:100%;justify-content:space-between;padding:.8rem .2rem;
  font-size:1rem;color:var(--ink);border-bottom:1px solid var(--hair)}
.mobile-nav .nav-menu{position:static;transform:none;opacity:1;visibility:visible;
  min-width:0;background:none;border:0;box-shadow:none;backdrop-filter:none;
  -webkit-backdrop-filter:none;padding:.2rem 0 .4rem .9rem}
.mobile-nav .nav-menu a{border-bottom:0;padding:.55rem .2rem;font-size:.95rem;color:var(--muted)}

@media(max-width:900px){
  .nav{display:none}
  .burger{display:flex}
  .mobile-nav{display:block}
  .mobile-nav[hidden]{display:none}
  .nav-cta{display:none}
}

/* ---------- breadcrumbs ---------- */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  padding-top:1.5rem;font-size:.82rem;color:var(--muted)}
.crumbs a{color:var(--muted);text-decoration:none;transition:color .3s;
  padding:.5rem 0;display:inline-flex;align-items:center;min-height:40px}
.crumbs a:hover{color:var(--ink)}
.crumbs .sep{opacity:.45}
.crumbs [aria-current]{color:var(--ink)}

/* ---------- journal cards ---------- */
.posts{display:grid;gap:clamp(1.1rem,2.4vw,1.7rem)}
@media(min-width:760px){.posts{grid-template-columns:repeat(3,1fr)}}
.post{
  display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:inherit;
  border-radius:var(--r-lg);overflow:hidden;
  background:linear-gradient(158deg,rgba(255,255,255,.78),rgba(255,255,255,.46));
  -webkit-backdrop-filter:blur(20px) saturate(165%);
  backdrop-filter:blur(20px) saturate(165%);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 20px 46px -26px rgba(28,20,40,.36),inset 0 1px 0 rgba(255,255,255,.95);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.post:hover{transform:translateY(-5px);
  box-shadow:0 32px 62px -28px rgba(28,20,40,.44),inset 0 1px 0 rgba(255,255,255,.95)}
.post-img{display:block;aspect-ratio:16/10;overflow:hidden}
.post-img img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
.post:hover .post-img img{transform:scale(1.05)}
.post-body{display:grid;gap:.55rem;align-content:start;padding:clamp(1.15rem,2.2vw,1.5rem)}
.post-meta{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.post-title{font-family:var(--f-d);font-size:1.18rem;font-weight:400;line-height:1.24;
  letter-spacing:-.016em;font-variation-settings:'opsz' 40}
.post-desc{font-size:.92rem;color:var(--muted);line-height:1.6}
.post .tlink{margin-top:.3rem;font-size:.88rem}
.post:hover .tlink::after{transform:scaleX(1)}
.posts-lg .post-title{font-size:1.3rem}

/* ---------- article ---------- */
.art{max-width:760px;padding-top:1.4rem}
.art-head{display:grid;gap:1rem;margin-bottom:2rem}
.art-h1{letter-spacing:-.022em}
.art-meta{font-size:.85rem;color:var(--muted);display:flex;gap:.5rem;flex-wrap:wrap}
/* The byline link had no rule of its own and fell through to the UA default —
   #0000EE and underlined, in the middle of a warm serif page. A byline is
   attribution, not a call to action, so it stays the weight of the line it sits
   in and only picks up the accent on hover. */
.art-meta a{color:var(--ink-2);text-decoration:none;font-weight:600;
  border-bottom:1px solid color-mix(in oklab,var(--accent) 34%,transparent);
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.art-meta a:hover{color:var(--accent);
  border-bottom-color:color-mix(in oklab,var(--accent) 70%,transparent)}
.art-img{border-radius:var(--r-lg);overflow:hidden;margin-bottom:2.4rem;
  border:1px solid rgba(255,255,255,.75);
  box-shadow:0 30px 66px -32px rgba(28,20,40,.42)}
.art-img img{width:100%;height:auto;display:block;max-height:520px;object-fit:cover}

.prose{font-size:1.06rem;line-height:1.78;color:#2C2836}
.prose>*+*{margin-top:1.15rem}
.prose h2{font-family:var(--f-d);font-size:clamp(1.5rem,2.6vw,1.95rem);font-weight:400;
  line-height:1.2;letter-spacing:-.02em;font-variation-settings:'opsz' 60;
  margin-top:2.6rem;color:var(--ink)}
.prose h3{font-family:var(--f-d);font-size:1.18rem;font-weight:400;letter-spacing:-.014em;
  font-variation-settings:'opsz' 30;margin-top:1.9rem;color:var(--ink)}
.prose strong{font-weight:700;color:var(--ink)}
.prose ol,.prose ul{padding-left:1.35rem;display:grid;gap:.75rem}
.prose li{padding-left:.25rem}
.prose li::marker{color:var(--accent)}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);
  text-underline-offset:3px;text-decoration-thickness:1px}

/* ---------- notes & empty state ---------- */
.note{padding:clamp(1.5rem,3vw,2.2rem);display:grid;gap:.85rem;max-width:760px}
.note p{color:var(--muted);font-size:.98rem}
.empty{padding:clamp(2rem,4.5vw,3.4rem);display:grid;gap:1.1rem;justify-items:start;max-width:720px}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:clamp(1.2rem,2.6vw,2rem);align-items:start}
@media(min-width:900px){.contact-grid{grid-template-columns:1.15fr .85fr}}
.contact-form{padding:clamp(1.5rem,3vw,2.4rem);display:grid;gap:1.1rem}
.field{display:grid;gap:.42rem}
.field label{font-size:.82rem;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;padding:.85rem 1.05rem;border-radius:var(--r-md);font-family:var(--f-b);font-size:.96rem;
  background:rgba(255,255,255,.74);border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 2px 5px rgba(28,20,40,.06);
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.field textarea{resize:vertical;min-height:120px;line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;background:rgba(255,255,255,.93);
  border-color:color-mix(in oklab,var(--accent) 55%,#fff);
  box-shadow:inset 0 2px 5px rgba(28,20,40,.05),0 0 0 4px color-mix(in oklab,var(--accent) 18%,transparent)}
.contact-form .btn{justify-self:start;margin-top:.2rem}
.contact-aside{display:grid;gap:1rem}
.contact-aside .note{max-width:none}

/* ---------- footer ---------- */
.ftr-top{display:grid;gap:2rem;padding-bottom:2.4rem}
@media(min-width:820px){.ftr-top{grid-template-columns:1.6fr 1fr 1fr 1fr}}
.ftr-brand{display:grid;gap:.9rem;align-content:start;max-width:34ch}
.ftr-tag{font-size:.9rem;color:var(--muted);line-height:1.65}
.ftr-col{display:grid;gap:.1rem;align-content:start}
.ftr-h{font-size:.78rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);margin-bottom:.25rem}
/* Full-row tap targets: 14px text alone is a 25px-tall hit area, which is well
   under the ~44px a thumb needs. Padding does the work rather than font size. */
.ftr-col a{font-size:.92rem;display:block;padding:.55rem 0;min-height:44px;
  display:flex;align-items:center}
.ftr-nav a{padding:.5rem 0;min-height:44px;display:inline-flex;align-items:center}
.disclose strong{color:var(--ink)}

/* ============================================================
   Conversion + trust layer
   ============================================================ */

/* ---------- verdict box ---------- */
.verdict{display:grid;gap:clamp(1.4rem,3vw,2.4rem);padding:clamp(1.5rem,3.2vw,2.6rem);
  margin-top:.5rem}
@media(min-width:820px){.verdict{grid-template-columns:1fr auto;align-items:start}}
.verdict-main{display:grid;gap:.9rem;justify-items:start}
.verdict-h{margin-top:.1rem}
.verdict-sum{color:var(--muted);max-width:56ch}
.verdict-fit{display:grid;gap:.55rem;margin:.2rem 0 .4rem;width:100%}
.verdict-fit>div{display:grid;grid-template-columns:7.5rem 1fr;gap:.9rem;align-items:baseline}
.verdict-fit dt{font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent)}
.verdict-fit dd{font-size:.96rem;color:var(--ink)}
@media(max-width:520px){
  .verdict-fit>div{grid-template-columns:1fr;gap:.2rem}
}
.verdict-jump{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.3rem}
.verdict-jump a{font-size:.82rem;color:var(--muted);text-decoration:none;
  padding:.35rem .75rem;border-radius:999px;background:rgba(255,255,255,.6);
  border:1px solid rgba(255,255,255,.85);transition:color .3s,background .3s}
.verdict-jump a:hover{color:var(--ink);background:rgba(255,255,255,.9)}

.verdict-score{display:grid;justify-items:center;align-content:start;gap:.45rem;
  padding:clamp(1rem,2vw,1.4rem) clamp(1.2rem,2.4vw,1.9rem);border-radius:var(--r-lg);
  background:linear-gradient(170deg,rgba(255,255,255,.8),rgba(255,255,255,.42));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 12px 30px -20px rgba(28,20,40,.35)}
@media(min-width:820px){.verdict-score{min-width:190px}}
.score-num{font-family:var(--f-d);font-size:clamp(2.4rem,5vw,3.1rem);font-weight:400;
  line-height:1;letter-spacing:-.03em;font-variation-settings:'opsz' 100}
.score-of{font-size:.42em;color:var(--muted);letter-spacing:0}
.stars{display:flex;gap:3px}
.star{width:13px;height:13px;background:rgba(28,20,40,.16);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.star.on{background:var(--accent)}
.star.half{background:linear-gradient(90deg,var(--accent) 50%,rgba(28,20,40,.16) 50%)}
.score-label{font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  text-align:center}

/* ---------- pros / cons ---------- */
.pc{display:grid;gap:clamp(1rem,2vw,1.4rem)}
@media(min-width:760px){.pc{grid-template-columns:1fr 1fr}}
.pc-col{padding:clamp(1.3rem,2.6vw,1.9rem);border-radius:var(--r-lg);
  background:linear-gradient(158deg,rgba(255,255,255,.74),rgba(255,255,255,.44));
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 18px 42px -26px rgba(28,20,40,.32),inset 0 1px 0 rgba(255,255,255,.95)}
.pc-h{display:flex;align-items:center;gap:.6rem;font-family:var(--f-d);font-weight:400;
  font-size:1.1rem;letter-spacing:-.014em;margin-bottom:.9rem;
  font-variation-settings:'opsz' 30}
.pc-ico{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-b);font-size:.9rem;font-weight:700;line-height:1;flex:none}
.pc-pro .pc-ico{background:color-mix(in oklab,var(--accent) 18%,#fff);color:var(--accent)}
.pc-con .pc-ico{background:rgba(28,20,40,.08);color:var(--muted)}
.pc ul{display:grid;gap:.6rem;padding-left:1.1rem}
.pc li{font-size:.96rem;color:var(--muted);line-height:1.6}
.pc li::marker{color:var(--accent)}
.pc-con li::marker{color:rgba(28,20,40,.3)}

/* ---------- comparison table ---------- */
.table-wrap{margin:2rem 0}
.table-cap{font-family:var(--f-d);font-size:1.1rem;font-weight:400;letter-spacing:-.014em;
  margin-bottom:.8rem;font-variation-settings:'opsz' 30}
.table-scroll{overflow-x:auto;border-radius:var(--r-md);
  background:linear-gradient(158deg,rgba(255,255,255,.76),rgba(255,255,255,.46));
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 16px 40px -26px rgba(28,20,40,.3),inset 0 1px 0 rgba(255,255,255,.95)}
.table-scroll:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ctable{width:100%;border-collapse:collapse;font-size:.92rem;min-width:520px}
.ctable th,.ctable td{padding:.85rem 1rem;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(28,20,40,.07)}
.ctable thead th{font-family:var(--f-b);font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);white-space:nowrap}
.ctable tbody th{font-weight:600;color:var(--ink);white-space:nowrap}
.ctable td{color:var(--muted)}
.ctable tbody tr:last-child th,.ctable tbody tr:last-child td{border-bottom:0}
.ctable .win{background:color-mix(in oklab,var(--accent) 7%,transparent);color:var(--ink)}
.ctable thead .win{color:var(--accent)}
.table-note{font-size:.82rem;color:var(--muted);margin-top:.7rem}

/* ---------- takeaways / answer box ---------- */
.takeaway{padding:clamp(1.2rem,2.6vw,1.7rem) clamp(1.3rem,2.8vw,1.9rem);border-radius:var(--r-lg);
  margin-bottom:2rem;
  background:linear-gradient(158deg,
    color-mix(in oklab,var(--accent) 9%,rgba(255,255,255,.8)),
    color-mix(in oklab,var(--accent) 4%,rgba(255,255,255,.5)));
  border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 14px 34px -24px rgba(28,20,40,.3)}
.takeaway-h{font-family:var(--f-b);font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:.7rem}
.takeaway ul{display:grid;gap:.5rem;padding-left:1.15rem}
.takeaway li{font-size:1rem;line-height:1.62;color:var(--ink)}
.takeaway li::marker{color:var(--accent)}

/* ---------- table of contents ---------- */
.toc{padding:1.2rem 1.5rem;border-radius:var(--r-md);margin-bottom:2rem;
  background:rgba(255,255,255,.5);border:1px solid rgba(255,255,255,.85)}
.toc-h{font-family:var(--f-b);font-size:.78rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.toc ol{display:grid;gap:0;padding-left:1.2rem}
.toc li{font-size:.94rem}
.toc li::marker{color:var(--accent);font-size:.8rem}
/* padded to a thumb-sized row — a contents list is only useful on a phone if
   the entries can actually be tapped without aiming */
.toc a{color:var(--muted);text-decoration:none;transition:color .3s;
  display:block;padding:.6rem 0;min-height:44px}
.toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---------- author box ---------- */
.author{display:flex;gap:1.1rem;align-items:flex-start;padding:clamp(1.2rem,2.6vw,1.7rem);
  margin:2.4rem 0 0}
.author-mark{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--f-d);font-size:1.25rem;color:#fff;letter-spacing:.02em;
  background:linear-gradient(180deg,var(--ink-2),var(--ink));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 14px -8px rgba(28,20,40,.5)}
.author-body{display:grid;gap:.4rem}
.author-name{font-weight:700;font-size:.98rem}
.author-bio{font-size:.9rem;color:var(--muted);line-height:1.6;max-width:60ch}

/* ---------- trust bar ---------- */
.trust-bar{display:grid;gap:.9rem;margin-top:1.6rem;padding-top:1.4rem;
  border-top:1px solid var(--hair)}
@media(min-width:700px){.trust-bar{grid-template-columns:repeat(3,1fr);gap:1.6rem}}
.trust-item{display:grid;gap:.2rem}
.trust-t{font-size:.82rem;font-weight:700;color:var(--ink)}
.trust-d{font-size:.82rem;color:var(--muted);line-height:1.5}

/* ---------- updated line ---------- */
.updated{font-size:.82rem;color:var(--muted)}

/* ---------- reading progress ---------- */
.progress{position:fixed;top:0;left:0;height:2px;width:100%;z-index:80;
  background:transparent;pointer-events:none}
.progress span{display:block;height:100%;width:0;background:var(--accent);
  transition:width .12s linear}

/* ---------- sticky mobile CTA ---------- */
.sticky-cta{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  padding:.7rem clamp(1rem,4vw,1.5rem) calc(.7rem + env(safe-area-inset-bottom,0px));
  background:linear-gradient(180deg,rgba(252,252,254,.72),rgba(252,252,254,.95));
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  border-top:1px solid rgba(255,255,255,.8);
  box-shadow:0 -8px 26px -18px rgba(28,20,40,.4);
  transform:translateY(110%);transition:transform .45s var(--ease);
}
.sticky-cta.show{transform:translateY(0)}
.sticky-cta .btn{width:100%}
@media(max-width:760px){.sticky-cta[data-enabled]{display:block}}

/* ---------- exit-intent / scroll capture ---------- */
.modal{position:fixed;inset:0;z-index:120;display:grid;place-items:center;
  padding:clamp(1rem,4vw,2rem);opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),visibility .4s}
.modal.open{opacity:1;visibility:visible}
.modal-veil{position:absolute;inset:0;background:rgba(22,18,28,.42);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.modal-card{position:relative;width:min(500px,100%);padding:clamp(1.6rem,4vw,2.6rem);
  border-radius:var(--r-island);display:grid;gap:1rem;justify-items:start;
  transform:translateY(14px) scale(.98);transition:transform .45s var(--ease);
  background:linear-gradient(158deg,rgba(255,255,255,.94),rgba(255,255,255,.8));
  -webkit-backdrop-filter:blur(24px) saturate(170%);
  backdrop-filter:blur(24px) saturate(170%);
  border:1px solid rgba(255,255,255,.95);
  box-shadow:0 40px 90px -40px rgba(28,20,40,.6),inset 0 1px 0 rgba(255,255,255,.98)}
.modal.open .modal-card{transform:none}
.modal-close{position:absolute;top:.7rem;right:.7rem;width:44px;height:44px;border:0;
  border-radius:50%;cursor:pointer;background:rgba(28,20,40,.06);color:var(--muted);
  font-size:1.05rem;line-height:1;display:grid;place-items:center;transition:background .3s,color .3s}
.modal-close:hover{background:rgba(28,20,40,.12);color:var(--ink)}
.modal-card .capture{max-width:none}

/* ---------- back to top ---------- */
.totop{position:fixed;right:clamp(1rem,3vw,1.8rem);bottom:clamp(1rem,3vw,1.8rem);z-index:65;
  width:42px;height:42px;border:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .35s,visibility .35s,transform .35s var(--ease),background .3s;
  background:linear-gradient(158deg,rgba(255,255,255,.86),rgba(255,255,255,.6));
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  backdrop-filter:blur(16px) saturate(160%);
  border:1px solid rgba(255,255,255,.9);color:var(--ink);
  box-shadow:0 12px 28px -16px rgba(28,20,40,.4)}
.totop.show{opacity:1;visibility:visible;transform:none}
@media(max-width:760px){.totop{bottom:calc(4.6rem + env(safe-area-inset-bottom,0px))}}

/* ---------- 404 ---------- */
.nf{display:grid;gap:1.3rem;justify-items:start;padding-block:clamp(3rem,8vw,6rem);
  max-width:60ch}
.nf-links{display:flex;flex-wrap:wrap;gap:1.2rem;margin-top:.4rem}

/* ---------- promise block ---------- */
.promise{padding:clamp(1.8rem,4vw,3rem);display:grid;gap:1rem;max-width:820px}
.promise-list{display:grid;gap:.9rem;margin-top:.4rem;padding-left:1.2rem}
.promise-list li{font-size:1rem;line-height:1.68;color:var(--muted)}
.promise-list li::marker{color:var(--accent)}
.promise-list strong{color:var(--ink)}

/* ---------- journal search + filter ---------- */
.jfilter{display:grid;gap:.9rem;margin-bottom:.5rem}
@media(min-width:760px){.jfilter{grid-template-columns:1fr auto;align-items:center}}
.jsearch-wrap{position:relative;display:flex;align-items:center}
.jsearch-ico{position:absolute;left:1.05rem;color:var(--muted);pointer-events:none}
.jfilter input{
  width:100%;padding:.9rem 1.1rem .9rem 2.8rem;border-radius:999px;
  font-family:var(--f-b);font-size:.95rem;
  background:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.9);
  box-shadow:inset 0 2px 5px rgba(28,20,40,.06);
  -webkit-backdrop-filter:blur(12px) saturate(150%);
  backdrop-filter:blur(12px) saturate(150%);
  transition:border-color .3s,box-shadow .3s,background .3s;
}
.jfilter input::placeholder{color:#8d879c}
.jfilter input:focus{outline:none;background:rgba(255,255,255,.92);
  border-color:color-mix(in oklab,var(--accent) 55%,#fff);
  box-shadow:inset 0 2px 5px rgba(28,20,40,.05),0 0 0 4px color-mix(in oklab,var(--accent) 18%,transparent)}
.jfilter input::-webkit-search-cancel-button{cursor:pointer}
.jcats{display:flex;flex-wrap:wrap;gap:.45rem}
.jcats button{
  padding:.5rem 1rem;border-radius:999px;border:1px solid rgba(255,255,255,.9);cursor:pointer;
  font-family:var(--f-b);font-size:.85rem;color:var(--muted);
  background:rgba(255,255,255,.5);transition:color .3s,background .3s,box-shadow .3s;
}
.jcats button:hover{color:var(--ink);background:rgba(255,255,255,.8)}
.jcats button[aria-pressed="true"]{color:#fff;border-color:transparent;
  background:linear-gradient(180deg,var(--ink-2),var(--ink));
  box-shadow:0 6px 16px -10px rgba(28,20,40,.5)}
.jempty{margin-top:1.5rem;color:var(--muted);font-size:.98rem}
.linkish{background:none;border:0;padding:0;cursor:pointer;font:inherit;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--accent)}
.post[hidden]{display:none}

/* ---------- selectivity proof ---------- */
.proof-bar{display:grid;gap:1.4rem;margin-top:clamp(2rem,4vw,3rem);
  padding-top:clamp(1.6rem,3vw,2.2rem);border-top:1px solid var(--hair)}
@media(min-width:760px){.proof-bar{grid-template-columns:repeat(3,1fr);gap:2rem}}
.proof-item{display:grid;gap:.28rem;align-content:start}
.proof-n{font-family:var(--f-d);font-size:clamp(2.2rem,4.4vw,2.9rem);font-weight:400;
  line-height:1;letter-spacing:-.03em;color:var(--accent);
  font-variation-settings:'opsz' 100}
.proof-l{font-size:.86rem;font-weight:700;color:var(--ink)}
.proof-d{font-size:.86rem;color:var(--muted);line-height:1.55;max-width:34ch}

/* ---------- reader voices ---------- */
.voices{display:grid;gap:clamp(1rem,2vw,1.4rem)}
@media(min-width:820px){.voices{grid-template-columns:repeat(3,1fr)}}
.voice{padding:clamp(1.4rem,2.8vw,2rem);border-radius:var(--r-lg);display:grid;gap:1rem;
  background:linear-gradient(158deg,rgba(255,255,255,.76),rgba(255,255,255,.46));
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,.88);
  box-shadow:0 18px 44px -26px rgba(28,20,40,.32),inset 0 1px 0 rgba(255,255,255,.95)}
.voice blockquote{font-family:var(--f-d);font-size:1.05rem;line-height:1.5;
  letter-spacing:-.012em;font-variation-settings:'opsz' 30;position:relative;
  padding-top:1.4rem}
.voice blockquote::before{content:"\201C";position:absolute;top:-.35rem;left:-.1rem;
  font-family:var(--f-d);font-size:3rem;line-height:1;color:var(--accent);opacity:.32}
.voice figcaption{display:grid;gap:.12rem}
.voice-who{font-size:.88rem;font-weight:700}
.voice-where{font-size:.82rem;color:var(--muted)}
.voices-empty{padding:clamp(1.7rem,3.6vw,2.6rem);display:grid;gap:.9rem;
  justify-items:start;max-width:660px}
.voices-empty-h{font-family:var(--f-d);font-size:1.25rem;letter-spacing:-.016em;
  font-variation-settings:'opsz' 36}
.voices-empty p{color:var(--muted);max-width:56ch}

/* ============================================================
   Warmth layer — shapes and motion
   Everything here animates transform/opacity only (compositor-friendly),
   and every single piece is switched off under prefers-reduced-motion.
   ============================================================ */

/* ---------- one shape language ----------
   The alternating oversized corners were the thing that looked broken: every
   tile a different silhouette, and the big corner ate into the content. iOS is
   relentlessly consistent instead — one radius per size class, everywhere. */
.edit{border-radius:var(--r-island)}
.edit>img{border-radius:inherit}
.look{border-radius:var(--r-lg)}
.look img{border-radius:inherit}
.post{border-radius:var(--r-lg)}
.crit-card,.note,.voice,.pc-col,.contact-form,.promise,.empty,
.verdict,.studio,.takeaway,.toc,.author,.table-scroll{border-radius:var(--r-lg)}
.faq details{border-radius:var(--r-md)}
.band{border-radius:var(--r-island)}
.portrait{border-radius:var(--r-island)}
.modal-card{border-radius:var(--r-island)}
.look-more{border-radius:var(--r-lg)}

/* ---------- floating decorative blobs ---------- */
/* Purely atmospheric: three soft shapes drifting behind the content so the page
   breathes instead of sitting still. Fixed count, tiny, transform-only. */
.blob{position:absolute;border-radius:50%;pointer-events:none;z-index:-2;
  filter:blur(2px);opacity:.5}
.blob-1{width:190px;height:190px;top:14%;right:4%;
  background:radial-gradient(circle at 34% 30%,var(--b1),transparent 70%);
  animation:drift1 19s ease-in-out infinite}
.blob-2{width:150px;height:150px;top:52%;left:2%;
  background:radial-gradient(circle at 40% 34%,var(--b4),transparent 70%);
  animation:drift2 24s ease-in-out infinite}
.blob-3{width:120px;height:120px;top:78%;right:9%;
  background:radial-gradient(circle at 36% 32%,var(--b3),transparent 70%);
  animation:drift1 21s ease-in-out infinite reverse}
@keyframes drift1{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(-16px,-26px,0) scale(1.09)}
}
@keyframes drift2{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%{transform:translate3d(20px,-20px,0) scale(1.12)}
}

/* ---------- the eyebrow rule now breathes ---------- */
.eyebrow::before{animation:ruleGrow 3.4s var(--ease) infinite}
@keyframes ruleGrow{
  0%,100%{transform:scaleX(1);opacity:.5}
  50%{transform:scaleX(1.35);opacity:.9}
}

/* ---------- glass gets a slow traveling sheen ---------- */
.glass{position:relative;overflow:hidden}
.glass::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.4) 50%,transparent 62%);
  transform:translateX(-120%);
  animation:sheen 7s ease-in-out infinite;
}
@keyframes sheen{
  0%,72%{transform:translateX(-120%)}
  100%{transform:translateX(120%)}
}

/* ---------- reveal now scales in, which reads warmer than a slide ---------- */
.reveal{transform:translateY(20px) scale(.985)}
.reveal.in{transform:none}

/* ---------- cards lift and tilt a touch on hover ---------- */
.post:hover,.crit-card:hover{transform:translateY(-6px) rotate(-.4deg)}
.crit-card{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.crit-card:hover{box-shadow:0 30px 60px -30px rgba(120,60,60,.34)}

/* the criteria icons get a warm tinted disc behind them */
.crit-ico{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--accent-soft);padding:10px;
  transition:transform .5s var(--ease)}
.crit-card:hover .crit-ico{transform:scale(1.08) rotate(6deg)}

/* ---------- buttons get a warm glow and a gentle press ---------- */
.btn{background:linear-gradient(180deg,var(--ink-2) 0%,var(--ink) 100%)}
.btn:hover{transform:translateY(-3px) scale(1.015)}

/* ---------- section headings: the first letter warms up ---------- */
.sec-head .d2::first-letter{color:var(--accent)}

/* ---------- proof numbers count into view ---------- */
.proof-n{animation:popIn .8s var(--ease) both}
@keyframes popIn{
  from{opacity:0;transform:scale(.8)}
  to{opacity:1;transform:none}
}

/* ---------- reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
  .reveal{opacity:1;transform:none}
  .rise>*,.fade{opacity:1;transform:none}
  .edit .frost{opacity:1}
  .edit .scrim{opacity:0}
  .progress span{transition:none}
  .sticky-cta,.modal,.modal-card,.totop{transition:none}
  /* every decorative motion added by the warmth layer stops dead here */
  .blob{animation:none}
  .eyebrow::before{animation:none;transform:none;opacity:.5}
  .glass::after{animation:none;opacity:0}
  .portrait{animation:none}
  .proof-n{animation:none}
  .post:hover,.crit-card:hover{transform:none}
  .crit-card:hover .crit-ico{transform:none}
  .btn:hover{transform:none}
}

/* ============================================================
   COMMERCIAL LAYER
   The pick card, the category pick, and the above-fold
   disclosure. Design rule: a commercial block must read as the
   continuation of the advice, never as an advert dropped into
   it — so these borrow the editorial card language rather than
   the loud conventions of affiliate design. No badges, no
   countdowns, no fake urgency.
   ============================================================ */

/* ---- above-fold disclosure ---- */
/* display:block, not flex — flex promoted each bare text node either side of
   the <strong> into its own anonymous flex item, splitting one sentence into
   three ragged columns. */
.disclose-inline{
  display:block;
  margin:1.1rem 0 0;padding:.62rem .95rem;
  font-size:.79rem;line-height:1.55;color:var(--muted);
  background:color-mix(in oklab,var(--accent) 5%,transparent);
  border-left:2px solid color-mix(in oklab,var(--accent) 45%,transparent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  max-width:62ch;text-wrap:pretty;
}
.disclose-inline strong{color:var(--ink);font-weight:600}
.pick .disclose-inline,.catpick .disclose-inline{margin-top:1rem}

/* ---- in-article pick ---- */
.pick{
  display:grid;grid-template-columns:minmax(0,190px) minmax(0,1fr);
  gap:clamp(1.1rem,2.6vw,1.7rem);align-items:center;
  margin:2.6rem 0;padding:clamp(1.1rem,2.4vw,1.5rem);
  background:var(--surface);
  border:1px solid color-mix(in oklab,var(--accent) 20%,var(--hair));
  border-radius:var(--r-lg);
  box-shadow:var(--lift-2);
}
.pick-media{border-radius:var(--r-md);overflow:hidden;background:var(--surface-2)}
.pick-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.pick-body{display:grid;gap:.55rem;min-width:0}
.pick-eyebrow{
  font-family:var(--f-b);font-size:.68rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);
}
.pick-h{font-family:var(--f-d);font-size:clamp(1.15rem,2.5vw,1.42rem);line-height:1.18;
  letter-spacing:-.012em;text-wrap:balance}
.pick-note{font-size:.95rem;line-height:1.6;color:var(--ink-2)}
.pick-fit,.pick-price{font-size:.86rem;color:var(--muted);line-height:1.5}
.pick-fit strong{color:var(--ink);font-weight:600}
.pick-price{
  justify-self:start;padding:.3rem .7rem;border-radius:var(--r-pill);
  background:color-mix(in oklab,var(--gold) 15%,transparent);
  color:var(--ink-2);font-size:.8rem;
}
.pick-actions{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.2rem;margin-top:.35rem}
.pick-actions .btn{padding:.82rem 1.5rem;font-size:.94rem}

@media (max-width:640px){
  .pick{grid-template-columns:1fr}
  .pick-media{max-width:210px}
  .pick-media img{aspect-ratio:1/1}
}

/* ---- category pick ---- */
.catpick{
  display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  gap:clamp(1.3rem,3.4vw,2.6rem);align-items:center;
  padding:clamp(1.2rem,3vw,2rem);border-radius:var(--r-island);
}
.catpick-media{border-radius:var(--r-md);overflow:hidden}
.catpick-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.catpick-body{display:grid;gap:.7rem;min-width:0}
.catpick-body .lede{margin:0}
@media (max-width:760px){
  .catpick{grid-template-columns:1fr}
  .catpick-media{max-width:280px}
  .catpick-media img{aspect-ratio:3/2}
}

/* ---- author credentials ---- */
.author-role{color:var(--muted);font-weight:400}
.author-name a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,var(--accent) 50%,transparent)}
.author-name a:hover{color:var(--accent)}
.author-creds{display:grid;gap:.3rem;margin:.15rem 0 .4rem;padding:0;list-style:none}
.author-creds li{
  position:relative;padding-left:1.25rem;font-size:.85rem;color:var(--muted);line-height:1.5;
}
.author-creds li::before{
  content:"";position:absolute;left:0;top:.52em;width:.5rem;height:.28rem;
  border-left:1.6px solid var(--accent);border-bottom:1.6px solid var(--accent);
  transform:rotate(-45deg);
}

/* ============================================================
   READING LAYER
   Literata replaces Lora as the body face. Three things follow
   from that, and one bug fix that had nothing to do with fonts.
   ============================================================ */

/* ---- 1. the measure ----
   The article column had no max-width at all, so prose ran 87
   characters average and 95 on the longest line against a
   comfortable range of 45-75. Measured by rendering the real
   font at the real size to canvas, not estimated. This is the
   single largest readability gain available on the site, and it
   is also commercial: the affiliate blocks sit after the advice,
   so a reader who gives up two thirds down never reaches them. */
/* A three-column grid rather than a plain max-width. Capping .prose with
   max-width alone left the text hard against the left edge with dead space
   on the right, and it also trapped the comparison tables at the text
   measure - where they are least useful. This centres the reading column
   and lets tables and figures break out to the full article width.
   64ch, not 68: ch keys off the narrow '0' glyph, and 68 measured 74
   average characters against a 45-75 target. 64 lands at 69. */
.prose{
  display:grid;
  grid-template-columns:1fr min(64ch,100%) 1fr;
  max-width:none;
}
.prose > *{grid-column:2}
.prose > .table-wrap,
.prose > figure{grid-column:1/-1}

/* ---- 2. optical sizing ----
   Literata carries a real opsz axis (7-72). Wiring it to each
   role is the whole reason to choose this face over Lora: small
   text gets sturdier letterforms and looser spacing, display
   text gets finer ones. Left unset, the browser picks one value
   and the advantage is wasted. */
.prose{font-variation-settings:'opsz' 16}
.lede{font-variation-settings:'opsz' 24}
.art-meta,.fineprint,.disclose,.disclose-inline,
.pick-fit,.pick-price,.author-creds li{font-variation-settings:'opsz' 9}

/* ---- 3. typographic detail ----
   text-wrap:pretty asks the browser to avoid single-word last
   lines. Cheap, and it removes the orphans that make otherwise
   careful pages look careless. */
.prose p,.prose li,.pv-lede,.pick-note,.crit-a{text-wrap:pretty}
.prose h2,.prose h3{text-wrap:balance}

/* accent list markers - the one decorative flourish in the prose */
.prose ul{list-style:none;padding-left:1.15rem}
.prose ul > li{position:relative}
.prose ul > li::before{
  content:"";position:absolute;left:-1.15rem;top:.72em;
  width:.36rem;height:.36rem;border-radius:50%;
  background:color-mix(in oklab,var(--accent) 62%,transparent);
}
.prose ol{padding-left:1.35rem}
.prose ol > li::marker{color:var(--accent);font-weight:700;font-size:.9em}

/* prose links: readable, not shouty */
.prose a{color:var(--ink);text-decoration:none;
  border-bottom:1px solid color-mix(in oklab,var(--accent) 40%,transparent);
  transition:color .3s var(--ease),border-color .3s var(--ease)}
.prose a:hover{color:var(--accent);
  border-bottom-color:color-mix(in oklab,var(--accent) 80%,transparent)}

/* ---- 4. the sticky-anchor bug ----
   The header is position:sticky and nothing declared scroll-margin,
   so every table-of-contents jump, every FAQ anchor and every
   "jump to section" sitelink Google renders landed with the target
   heading sitting exactly underneath the island - measured at 78px
   of overlap, i.e. completely hidden. */
:target{scroll-margin-top:6.5rem}
.prose h2,.prose h3,.faq details,section[id],[id^="pick-"]{scroll-margin-top:6.5rem}
html{scroll-padding-top:6.5rem}

/* ============================================================
   PAPER GRAIN
   You asked for warmer and cuter. The palette already measures
   clean (6.3-15.1:1 throughout) and tinting the ground further
   is exactly the mistake we just undid - the page went heavy,
   not warm. So the warmth here comes from texture instead of
   pigment: a very fine fractal grain, fixed to the viewport so
   it composites once rather than repainting on scroll.

   Two SVG stops rather than a raster: it is under 400 bytes,
   scales to any DPR, and costs no request.
   ============================================================ */
body::after{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  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='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  background-size:140px 140px;
  opacity:.032;                 /* felt, never seen - above ~.05 it reads as dirt */
  mix-blend-mode:multiply;
}
@media (prefers-color-scheme:dark){
  body::after{mix-blend-mode:screen;opacity:.026}
}
/* The grain is decoration; anything that needs to read as clean
   paper opts out. */
.pick-media,.catpick-media,.edit,.look,.art-img,.post-img{isolation:isolate}

/* ---- 5. hierarchy, compensated ----
   Choosing Literata over a sans keeps the editorial register but
   forfeits the one thing a sans body would have bought: formal
   contrast against Fraunces. Both faces are now serifs with
   similar proportions, so the headings have to work harder on the
   axes that remain - size, weight, space and color - or the page
   reads as one continuous grey block, which is exactly what it
   did with Lora. */
.prose h2{
  font-size:clamp(1.62rem,2.9vw,2.15rem);
  font-weight:600;                       /* was 400 */
  margin-top:3.1rem;                     /* was 2.6 - space is hierarchy too */
  font-variation-settings:'opsz' 72,'SOFT' 18;
}
.prose h2 + p{margin-top:.85rem}         /* pull the first line up under it */
.prose h3{
  font-weight:600;font-size:1.24rem;margin-top:2.1rem;
  font-variation-settings:'opsz' 36,'SOFT' 12;
  color:var(--ink);
}
.prose h3 + p{margin-top:.7rem}

/* a hairline above each h2 - the cheapest possible way to make a
   long article scannable without adding weight to the page */
.prose h2::before{
  content:"";display:block;width:2.2rem;height:1px;
  background:color-mix(in oklab,var(--accent) 55%,transparent);
  margin-bottom:1.05rem;
}

/* ============================================================
   TOUCH & TARGET SIZE
   Audited against WCAG 2.2 Target Size (24px minimum for web)
   and the 44px platform comfort standard, measured live at a
   375px viewport rather than assumed.
   ============================================================ */

/* The burger was declared 42x42 - the single most important
   control on mobile, two pixels under the comfort threshold and
   the only target on the page that failed it. */
.burger{width:44px;height:44px}

/* .tlink rendered 27px tall: above the 24px WCAG minimum, below
   comfortable. The hit area is expanded with a pseudo-element
   rather than padding, so nothing in the surrounding layout moves. */
.tlink::before{
  content:"";position:absolute;left:0;right:0;
  top:50%;transform:translateY(-50%);
  height:44px;min-height:100%;
}

/* Adjacent-target spacing. Measured 10 pairs sitting closer than
   the 8px minimum at mobile width - mostly the header CTA against
   the burger, and the hero quick-links against each other. */
@media (max-width:900px){
  .hdr-in{gap:.75rem}
  .nav-cta{margin-right:.25rem}
  .qlinks{gap:.7rem}
  .mobile-nav .wrap > a{padding-block:.15rem}
}

/* Pointer-coarse devices get the comfort size everywhere, since
   there is no cursor to aim with. */
@media (pointer:coarse){
  .tlink,.prose a{min-height:44px;display:inline-flex;align-items:center}
  .ftr-col a{min-height:40px;display:inline-flex;align-items:center}
}

/* Removes the legacy ~300ms tap delay without disabling pinch-zoom
   (touch-action:none would break zoom, which is an accessibility
   failure - manipulation keeps zoom and kills only double-tap). */
a,button,[role="button"],summary,input,label,.qlink,.edit,.post{touch-action:manipulation}

/* ============================================================
   DIMENSIONAL CARDS
   You asked for "3D things". Literal 3D on a reading site is the
   wrong call — a WebGL scene would cost more than your entire
   current page weight, push LCP, and fight the minimalism you
   asked for in the same sentence.

   What belongs here is depth you feel rather than notice: the
   card tilts a few degrees toward the pointer, its shadow and
   highlight track the tilt, and the image sits on a nearer plane
   than the copy. Real 3D transforms, GPU-composited, no
   libraries, and it costs nothing on a phone because it is
   pointer-only.
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  .edits,.posts,.looks{perspective:1400px}
  .edit,.post{
    transform-style:preserve-3d;
    transition:transform .5s var(--ease), box-shadow .5s var(--ease);
    will-change:transform;
  }
  /* --rx/--ry are written by soul.js from the pointer position.
     Falling back to 0deg means the card is simply flat until the
     pointer arrives, and stays flat if the script never runs. */
  .edit:hover,.post:hover{
    transform:
      perspective(1400px)
      rotateX(var(--rx,0deg))
      rotateY(var(--ry,0deg))
      translate3d(0,-6px,14px);
  }
  /* the photograph lifts onto a nearer plane than the copy */
  .edit:hover > img{transform:scale(1.06) translateZ(26px)}
  .edit:hover .edit-body{transform:translateZ(38px)}
  .edit .edit-body{transition:transform .5s var(--ease)}

  /* a specular sweep that tracks the tilt, so the surface reads
     as something with a finish rather than a rectangle that moved */
  .edit::after{
    content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
    border-radius:inherit;opacity:0;transition:opacity .5s var(--ease);
    background:radial-gradient(38% 55% at var(--mx,50%) var(--my,50%),
      rgba(255,255,255,.30), rgba(255,255,255,.05) 46%, transparent 72%);
  }
  .edit:hover::after{opacity:1}
}

/* Motion-sensitive visitors get the lift and nothing that rotates. */
@media (prefers-reduced-motion:reduce){
  .edit:hover,.post:hover{transform:translateY(-4px)}
  .edit:hover > img,.edit:hover .edit-body{transform:none}
  .edit::after{display:none}
}

/* ---- footer legal row ----
   The copyright and the disclosure used to be welded into one dense
   paragraph, so the legal links had nowhere to live. Splitting them
   gives Privacy and Terms a proper home without adding a fourth
   column of visual weight to a footer that was already full. */
.ftr-legal{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.4rem;
  padding-top:1.1rem;margin-top:1.1rem;
  border-top:1px solid var(--hair);
}
.ftr-copy{font-size:.78rem;color:var(--muted)}
.ftr-fine{display:flex;flex-wrap:wrap;gap:.4rem 1.3rem;margin-left:auto}
.ftr-fine a{
  font-size:.78rem;color:var(--muted);text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center;
  border-bottom:1px solid transparent;
  transition:color var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
}
.ftr-fine a:hover{color:var(--ink);
  border-bottom-color:color-mix(in oklab,var(--accent) 50%,transparent)}
@media (max-width:620px){
  .ftr-fine{margin-left:0}
  .ftr-legal{gap:.2rem 1.2rem}
}

/* Legal prose runs long and dry — a dated stamp at the top tells the
   reader immediately whether they are looking at a current version. */
/* A child of .prose, so the centring grid places it on exactly the same
   column as the body text. The earlier attempt styled it as a sibling and
   sized it with `max-width:min(64ch,100%)` alongside `font-size:0` — but
   `ch` is derived from font-size, so 64ch resolved to 0 and the box
   collapsed. Letting the grid do the work removes the arithmetic. */
.legal-stamp{margin:0 0 1.8rem}
.legal-stamp span{
  font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--muted);
  padding:.4rem .8rem;border-radius:var(--r-pill);
  background:color-mix(in oklab,var(--accent) 7%,transparent);
  display:inline-block;
}
}

/* ============================================================
   MOTION SCALE
   Colour was reverted to the production palette on request — this
   block previously also redefined the ground, the blooms and the
   bloom opacity. Only the motion tokens remain.
   ============================================================ */
:root{
  /* One motion scale, three steps. The anti-pattern is a single
     duration copied onto everything; the other is fifteen arbitrary
     ones. Distance and complexity pick the step:
       fast  - colour, opacity, a border appearing
       med   - a control changing state, a link underline
       slow  - something physically moving or revealing */
  --t-fast:.18s;
  --t-med:.32s;
  --t-slow:.6s;
  --ease-out:cubic-bezier(.22,.9,.3,1);      /* decelerate: things arriving */
  --ease-soft:cubic-bezier(.4,.14,.3,1);     /* both ends: things changing state */
}

/* Unify the transitions that were previously one-off values.
   Everything keeps its own duration *step*, so the page still has
   rhythm, but the steps now come from the scale. */
.btn,.btn-ghost,.qlink,.tlink,.ftr-col a,.nav a,.nav-drop button{
  transition-timing-function:var(--ease-soft);
}
.prose a,.art-meta a,.ftr-fine a{transition-duration:var(--t-med)}
.edit,.post,.look{transition-timing-function:var(--ease-out)}

/* The disclosure carried its own border-top, but .disclose is capped at
   62ch so the rule stopped mid-footer while the legal row's rule ran the
   full width — two hairlines of different lengths stacked 60px apart.
   One divider, full width, on the legal row only. */
.disclose{border-top:0;padding-top:0;margin-top:1.9rem}