/* Aisle & Cradle, site stylesheet v3.0, 2026-09-27. The editorial redesign.

   The feeling, written before any rule: a calm, confident magazine for the two
   biggest buying seasons of a young family's life, that shows you the answer
   first and never pretends to a lab it does not have.

   What changed from v2, and why (research in _DESIGN_SPEC.md section 10):
   - Type. Playfair Display plus Inter read as a template. Fraunces carries the
     display, Source Serif 4 carries long reading, Inter is kept for labels and
     controls only. All three are Google Fonts.
   - Verdict first. Every post opens on a chapter band, then the short answer,
     then the picks at a glance, then a jump bar, before a word of method.
     NN/g: "Make the table easy to scan for differences, similarities, and
     keywords." The pick cards and the table are the product here.
   - The locked palette is unchanged. Every hex below is in _palette.json; the
     terracotta and navy a benchmark pass suggested were rejected once already
     (2026-08-13) and were not reopened.
   - Every accessibility fix v2 paid for is carried: the ring tokens, 44px taps,
     the scroll-hint chip and its currentColor edge, reduced motion, print,
     scroll-margin, dark mode on tier-2 tokens only. v2 is kept whole at
     _evidence/v2-css/site_v2_2026-09-27.css.
*/

/* ---------- TIER 1: primitives. Never referenced by a component. ---------- */
:root{
  /* 2026-10-03 (branch brandfix-2026-10-03, owner-approved palette): one sage, the logo's #56654F;
     the baby line moves to dusty blue #4E6A7A with mist #E3EAEE as its tint and #9DB4C2 as its
     dark-theme text; the wedding accent is plum only; the page ground is the logo kit's cream. */
  /* D131 (2026-10-06): the dark-theme accent is a light tint of the approved sage (#56654F mixed 50/50 with
     the kit cream #F7F4EF), replacing the off-palette mint (78B48C, retired). As text it measures 5.43:1 on the
     lightest night surface #343330 and 7.55:1 on #1A1917; #1A1917 text on it measures 7.55:1. */
  --sage-500:#56654F; --sage-400:#A6AC9F;
  /* BLUSH RULE (D136). Owner decision 2026-10-06 18:50 CDT ("Blush text ok on dark"): blush #F0C6C9 is a fill on light grounds and is never text there; it IS allowed as text on dark grounds only: the charcoal footer, the dark "who runs this" band, and the night surfaces of the dark theme. Measured 8.20:1 to 11.40:1 as text on those grounds. Checked on every
     page in both themes at 1280 and 390: no blush text on a light ground. */
  --blush-400:#E8B4B8; --blush-300:#F0C6C9;
  --gold-500:#C9A15A; --gold-700:#7D6219;
  --cream-050:#F7F4EF; --cream-100:#F7F2E8; --cream-200:#F5EFE3; --cream-300:#F1E9DC;
  --sand-300:#E7DDCB;
  --ink-900:#2B2B2B; --ink-500:#5B6566;
  --green-600:#2E6B3E; --green-050:#EEF5EE; --sienna-600:#A0522D;
  --wed-500:#6E4249; --wed-050:#FBEFEF; --wed-800:#6E4249;
  --baby-500:#4E6A7A; --baby-050:#E3EAEE; --baby-800:#4E6A7A; --baby-300:#9DB4C2;
  --night-900:#1A1917; --night-800:#201F1C; --night-700:#2A2926; --night-600:#343330;
  --night-100:#EDE8DF; --night-300:#A8A296; --night-500:#6E6A62;

  --f-display:'Fraunces',Georgia,'Times New Roman',serif;
  --f-read:'Source Serif 4',Georgia,'Times New Roman',serif;
  --f-ui:'Inter',-apple-system,'Segoe UI',Roboto,sans-serif;

  /* Fluid type 390px to 1280px, rem at both ends (WCAG 1.4.4, W3C F94). */
  --step--1: clamp(0.833rem, 0.80rem + 0.14vw, 0.889rem);
  --step-0 : clamp(1.000rem, 0.96rem + 0.18vw, 1.125rem);
  --step-1 : clamp(1.200rem, 1.14rem + 0.28vw, 1.406rem);
  --step-2 : clamp(1.440rem, 1.34rem + 0.45vw, 1.758rem);
  --step-3 : clamp(1.728rem, 1.57rem + 0.71vw, 2.197rem);
  --step-4 : clamp(2.074rem, 1.72rem + 1.45vw, 3.052rem);
  --step-5 : clamp(2.488rem, 1.95rem + 2.20vw, 3.815rem);
  --step-6 : clamp(2.986rem, 2.20rem + 3.20vw, 4.768rem);

  --space-3xs: clamp(0.25rem, 0.24rem + 0.05vw, 0.28rem);
  --space-2xs: clamp(0.50rem, 0.48rem + 0.09vw, 0.56rem);
  --space-xs : clamp(0.75rem, 0.72rem + 0.14vw, 0.84rem);
  --space-s  : clamp(1.00rem, 0.96rem + 0.18vw, 1.13rem);
  --space-m  : clamp(1.50rem, 1.44rem + 0.27vw, 1.69rem);
  --space-l  : clamp(2.00rem, 1.91rem + 0.36vw, 2.25rem);
  --space-xl : clamp(3.00rem, 2.60rem + 1.60vw, 4.00rem);
  --space-2xl: clamp(4.00rem, 3.20rem + 3.20vw, 6.50rem);

  --measure: 62ch; /* D163 (round 7): held so full lines of reading text run about 60 to 80 characters (was 68ch) */
  --page: 1200px;
  --radius: 14px;
  --radius-s: 8px;
  --tap: 44px;
  --head-h: 68px;
}

/* ---------- TIER 2: semantic. The only tier a theme redefines. ---------- */
:root{
  color-scheme: light dark;
  --surface        : light-dark(var(--cream-050), var(--night-900));
  --surface-raised : light-dark(var(--cream-100), var(--night-800));
  --surface-sunken : light-dark(var(--cream-200), var(--night-700));
  --surface-deep   : light-dark(var(--cream-300), var(--night-600));
  --surface-inverse: light-dark(var(--sage-500),  var(--night-700));
  --text           : light-dark(var(--ink-900),   var(--night-100));
  --text-muted     : light-dark(var(--ink-500),   var(--night-300));
  --text-inverse   : light-dark(var(--cream-050), var(--night-100));
  --rule           : light-dark(var(--sand-300),  var(--night-600));
  --accent         : light-dark(var(--sage-500),  var(--sage-400));
  --accent-text    : light-dark(var(--gold-700),  var(--gold-500));
  /* --positive stays #6FBF83 in dark: a functional "pros" green, not a brand color (the dark twin of #2E6B3E);
     5.69:1 or better on every night surface, and #1A1917 on it 7.91:1. Kept by decision D131. */
  --positive       : light-dark(var(--green-600), #6FBF83);
  --negative       : light-dark(var(--sienna-600), #E0916A);
  --focus-ring     : light-dark(var(--ink-900),   var(--night-100));
  --ring           : var(--focus-ring);
  --ring-dark      : var(--cream-050);
  --ring-inner     : light-dark(#FFFFFF, var(--night-900));
  --link           : light-dark(var(--sage-500),  var(--sage-400));
  --shadow         : 0 1px 2px rgba(43,43,43,.05), 0 12px 32px -18px rgba(43,43,43,.28);

  /* Chapter tokens. Neutral on shared pages, re-pointed by the body class. */
  --ch             : var(--accent);
  --ch-base        : var(--sage-500);
  --ch-dark        : light-dark(var(--sage-500), var(--night-600));
  --ch-tint        : var(--surface-sunken);
  --ch-text        : light-dark(var(--sage-500), var(--sage-400));
  --ch-on-dark     : var(--blush-300);
}
body.side-wed{
  --ch      : light-dark(var(--wed-500), var(--blush-300));
  --ch-base : var(--wed-500);
  --ch-dark : light-dark(var(--wed-800), var(--night-600));
  --ch-tint : light-dark(var(--wed-050), var(--night-800));
  --ch-text : light-dark(var(--wed-800), var(--blush-300));
}
body.side-baby{
  --ch      : light-dark(var(--baby-500), var(--baby-300));
  --ch-base : var(--baby-500);
  --ch-dark : light-dark(var(--baby-800), var(--night-600));
  --ch-tint : light-dark(var(--baby-050), var(--night-800));
  --ch-text : light-dark(var(--baby-800), var(--baby-300));
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;background:var(--surface);color:var(--text);
  font-family:var(--f-ui);font-size:var(--step-0);line-height:1.6;
  font-optical-sizing:auto;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;color:var(--text);
  font-variation-settings:"SOFT" 50;text-wrap:balance;margin:0 0 .5em}
h1{font-size:var(--step-5);line-height:1.06;letter-spacing:-.02em}
h2{font-size:var(--step-3);line-height:1.15;letter-spacing:-.012em;margin-top:var(--space-xl)}
/* D146 (round 5, grader B2 S4): h3 is step-2, at least 1.3 times the paragraph text at every width (was step-1, 1.14x
   on /about). Headings break a long word rather than push the page sideways at 200% text (WCAG 1.4.4, 1.4.10). */
h3{font-size:var(--step-2);line-height:1.2;letter-spacing:-.005em}
h1,h2,h3,h4{overflow-wrap:break-word}
body{overflow-wrap:break-word}
p,li{text-wrap:pretty}
p{margin:0 0 1em}
a{color:var(--link);text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
img{max-width:100%;height:auto;display:block}
strong{font-weight:650}
.wrap{max-width:var(--page);margin-inline:auto;padding-inline:clamp(16px,4vw,40px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
[id]{scroll-margin-top:calc(var(--head-h) + 16px)}

/* ---------- Accessibility floor, carried from v2 ---------- */
.skip{position:absolute;left:12px;top:0;transform:translateY(calc(-100% - 12px));z-index:100;background:var(--text);
  color:var(--surface);padding:12px 18px;border-radius:var(--radius-s);font-weight:600;
  text-decoration:none;min-height:var(--tap)}
.skip:focus{top:12px;transform:none} /* D161 (grader A3 M-2): hidden by its own height, so it never peeks at 200% text */
:focus-visible{outline:3px solid var(--ring);outline-offset:3px;border-radius:4px}
header.site :focus-visible,
footer.site :focus-visible,
.band :focus-visible{outline-color:var(--ring)}
footer.site :focus-visible,.band :focus-visible{outline-color:var(--ring-dark)}
.skip:focus-visible,a.cta:focus-visible,button.cta:focus-visible,
.stage-card:focus-visible,.fork-card:focus-visible,.guide-card:focus-visible,
.glance-card a:focus-visible{outline:3px solid var(--ring);outline-offset:3px}
/* Filled controls. The outer ring is measured against the control's own fill by
   the web gate's probe (bgOf the focused element), and a dark ring on a dark
   button measured 1.0 to 1.4:1 on 696 elements in the first v3 probe. The inner
   ring is the light half of a dual indicator, which SC 2.4.11 accepts. */
.skip:focus-visible,a.cta:focus-visible,button.cta:focus-visible,
.stage-card:focus-visible,.fork-card:focus-visible{
  box-shadow:inset 0 0 0 3px var(--ring-inner)}
main:focus{outline:none}

/* ---------- Masthead ---------- */
.read-progress{display:none}
header.site{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  -webkit-backdrop-filter:saturate(1.4) blur(14px);backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid var(--rule);
}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-s);min-height:var(--head-h)}
.logo{display:inline-flex;align-items:center;min-height:var(--tap);flex:none;
  color:var(--text);text-decoration:none}
/* v4.4 (D126, branch brandfix-2026-10-03): the v3.0 kit wordmark (apply_v44_brand.py writes the markup,
   make_brand_assets.py the files). The letters are the kit's own drawing; only the frame is sized here.
   20px tall at a phone, 24px at a desktop: cap height 15 to 18px, the typed wordmark's old cap height. */
.logo picture{display:block}
.logo img{display:block;width:auto;height:clamp(20px,1.1rem + .35vw,24px)}
nav.main{display:flex;align-items:center;gap:clamp(4px,1.4vw,20px)}
nav.main a{font-size:.9375rem;font-weight:500;color:var(--text);text-decoration:none;
  display:inline-flex;align-items:center;gap:.45em;min-height:var(--tap);padding:0 .35em;
  border-radius:6px;white-space:nowrap;min-width:var(--tap);justify-content:center}
nav.main a:hover{color:var(--ch-text)}
nav.main a.side-w::before,nav.main a.side-b::before{content:"";width:8px;height:8px;
  border-radius:50%;background:light-dark(var(--wed-500),var(--blush-300));flex:none}
nav.main a.side-b::before{background:light-dark(var(--baby-500),var(--baby-300))}
nav.main a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--ch)}

/* ---------- Buttons ---------- */
.cta,a.cta{display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  min-height:var(--tap);padding:.7em 1.35em;border-radius:999px;border:0;
  background:var(--ch-dark);color:#FFFFFF;font:600 .9375rem/1.2 var(--f-ui);
  letter-spacing:.01em;text-decoration:none;cursor:pointer;
  transition:transform .15s ease}
.cta::after{content:"\2192";transition:transform .15s ease}
.cta:hover{box-shadow:0 8px 20px -10px rgba(43,43,43,.55)}
.cta:hover::after{transform:translateX(3px)}
.ghost{display:inline-flex;align-items:center;min-height:var(--tap);padding:.7em 1.1em;
  border-radius:999px;border:1.5px solid var(--text);color:var(--text);
  font:600 .9375rem/1.2 var(--f-ui);text-decoration:none}
.ghost:hover{background:var(--text);color:var(--surface)}

/* ---------- Shared labels ---------- */
.eyebrow,.post-kicker,.side-pill,.section-kicker{font:600 .75rem/1.3 var(--f-ui);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ch-text);margin:0 0 var(--space-xs)}
.crumbs{font-size:var(--step--1);color:var(--text-muted);margin:0 0 var(--space-s)}
.crumbs a{color:var(--text-muted);display:inline-flex;align-items:center;min-height:var(--tap)}
.lede{font-family:var(--f-read);font-size:var(--step-1);line-height:1.5;color:var(--text);
  max-width:60ch}

/* ==========================================================================
   HOME
   ========================================================================== */
.home-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(24px,5vw,72px);align-items:center;padding-block:var(--space-xl) var(--space-l)}
.home-hero h1{font-size:var(--step-6);line-height:1.02;letter-spacing:-.028em;margin-bottom:var(--space-s)}
.home-hero h1 em{font-style:italic;font-weight:400;color:var(--wed-800);
  font-variation-settings:"SOFT" 100,"WONK" 1}
.home-hero .lede{margin-bottom:var(--space-m)}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin:0}
.diptych{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.4vw,18px);margin:0;position:relative}
.diptych figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:3/4;background:var(--surface-sunken)}
.diptych figure:last-child{transform:translateY(12%)}
.diptych img{width:100%;height:100%;object-fit:cover}
.diptych .d-wed img{object-position:50% 35%}
.diptych .d-baby img{object-position:40% 30%}
/* A real backing colour, not only a gradient: text over a photograph has to
   clear contrast against the worst pixel, and the probe (rightly) cannot see a
   background-image. The soft fade sits on the figure above the caption. */
.diptych figure::after{content:"";position:absolute;left:0;right:0;bottom:0;height:45%;
  background:linear-gradient(to top, rgba(26,25,23,.62), rgba(26,25,23,0));pointer-events:none}
.diptych figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:12px 16px 14px;
  background-color:rgba(26,25,23,.94);
  color:#FFFFFF;font-family:var(--f-display);font-style:italic;
  font-size:clamp(1.4rem,1rem + 1.4vw,2.2rem);line-height:1;font-variation-settings:"SOFT" 100}
.diptych figcaption small{display:block;font:500 .75rem/1.3 var(--f-ui);font-style:normal;
  letter-spacing:.12em;text-transform:uppercase;margin-top:6px;opacity:.92}

.proof-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  margin-block:var(--space-2xl) var(--space-xl);border-block:1px solid var(--rule)}
.proof-strip div{padding:var(--space-m) var(--space-s)}
.proof-strip div + div{border-left:1px solid var(--rule)}
.proof-strip b{display:block;font-family:var(--f-display);font-weight:600;
  font-size:var(--step-4);line-height:1;letter-spacing:-.02em;color:var(--text);margin-bottom:8px}
.proof-strip span{font-size:var(--step--1);color:var(--text-muted);line-height:1.45;display:block}

.section-head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-s);
  flex-wrap:wrap;margin:var(--space-2xl) 0 var(--space-m)}
.section-head h2,.section-title{margin:0;font-size:var(--step-4)}
.section-head p{margin:0;color:var(--text-muted);max-width:44ch}
.section-head a{font-weight:600;display:inline-flex;align-items:center;min-height:var(--tap)}

.stage-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);
  margin:0 0 var(--space-l)}
.stage-card{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  min-height:clamp(220px,26vw,340px);border-radius:var(--radius);overflow:hidden;
  color:#FFFFFF;text-decoration:none;background:var(--night-700);isolation:isolate}
.stage-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;
  transition:transform .6s ease}
.stage-card::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(26,25,23,.86) 0%, rgba(26,25,23,.60) 55%, rgba(26,25,23,.05) 100%)}
.stage-card .stage-body{padding:var(--space-s)}
/* D128 (audit F07): white, not blush (blush is a fill only), over a deeper middle scrim stop. Measured
   from the photo's own pixels, because a CSS sweep only sees the card's fallback color. */
.stage-n{font:600 .75rem/1 var(--f-ui);letter-spacing:.14em;color:#FFFFFF;display:block;margin-bottom:8px}
.stage-card h3{color:#FFFFFF;margin:0 0 4px;font-size:var(--step-2)}
.stage-card p{margin:0;font-size:var(--step--1);line-height:1.45;color:#FFFFFF;opacity:.95}
.stage-card:hover img{transform:scale(1.04)}
/* Stage cards with no photograph (the /start page) keep the printed-card look. */
.stage-card:not(:has(img)){background:var(--surface-raised);color:var(--text);border:1px solid var(--rule);
  min-height:0;justify-content:flex-start;padding:var(--space-m)}
.stage-card:not(:has(img))::before{content:none}
.stage-card:not(:has(img)) h3{color:var(--text)}
.stage-card:not(:has(img)) p{color:var(--text-muted)}
.stage-card:not(:has(img)) .stage-n{color:var(--accent-text)}
.stage-card:not(:has(img)):hover{box-shadow:var(--shadow)}

.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);
  list-style:none;padding:0;margin:0}
.guide-card{display:flex;flex-direction:column;height:100%;padding:var(--space-m);
  border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--rule);
  text-decoration:none;color:var(--text);position:relative;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease}
.guide-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:transparent}
.guide-card .gc-ch{font:600 .75rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:.5em;margin-bottom:var(--space-s)}
.guide-card .gc-ch::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.guide-card.w .gc-ch{color:var(--wed-800)}
.guide-card.b .gc-ch{color:var(--baby-800)}
.guide-card h3{font-size:var(--step-1);margin:0 0 var(--space-2xs)}
.guide-card p{font-size:var(--step--1);color:var(--text-muted);margin:0 0 var(--space-s);line-height:1.5}
.guide-card .gc-go{margin-top:auto;font:600 .875rem/1 var(--f-ui);color:var(--text)}
.guide-card .gc-go::after{content:" \2192"}

.fork{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.6vw,24px);margin:0}
.fork-card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  text-decoration:none;color:#FFFFFF;min-height:clamp(320px,38vw,480px);isolation:isolate;
  background:var(--night-700)}
.fork-fig{position:absolute;inset:0;margin:0;z-index:-2}
.fork-fig img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.fork-card::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top, rgba(26,25,23,.84), rgba(26,25,23,.1) 60%)}
.fork-body{position:absolute;left:0;right:0;bottom:0;padding:var(--space-m)}
.fork-body h3{color:#FFFFFF;font-size:var(--step-4);margin:0 0 6px;font-style:italic;font-weight:500;
  font-variation-settings:"SOFT" 100}
.fork-body p{color:#FFFFFF;margin:0 0 var(--space-s);max-width:40ch}
.fork-go{display:inline-flex;align-items:center;min-height:var(--tap);font:600 .9375rem/1 var(--f-ui);
  border-bottom:2px solid var(--blush-300);padding-bottom:2px}
.fork-card:hover .fork-fig img{transform:scale(1.03)}

/* The evidence specimen: the three levels, shown as the product. */
.tiers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0;
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--surface-raised)}
.tier{padding:var(--space-m);position:relative}
.tier + .tier{border-left:1px solid var(--rule)}
.tier h3{font-size:var(--step-2);margin:0 0 6px}
.tier p{margin:0;color:var(--text-muted);font-size:var(--step--1);line-height:1.5}
.tier .tier-tag{display:inline-block;font:600 .75rem/1 var(--f-ui);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);margin-bottom:var(--space-s)}
.tier.now{background:var(--surface-inverse);color:var(--text-inverse)}
.tier.now h3,.tier.now p,.tier.now .tier-tag{color:var(--text-inverse)}
.tier.now .tier-tag{color:var(--blush-300)}
.tiers-note{margin:var(--space-s) 0 0;color:var(--text-muted);font-size:var(--step--1);max-width:70ch}

/* The moment: one dark band, one photograph, one line. */
/* 2026-10-03 (audit F11): the band and the footer sit on the brand charcoal #2B2B2B, not a
   second near-black; every text color on them was re-measured (contrast_sweep 0 failures). */
.band{margin-top:var(--space-2xl);background:var(--ink-900);color:var(--night-100);
  border-image:conic-gradient(var(--ink-900) 0 0) fill 0//0 100vw}
.band-inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:clamp(24px,5vw,72px);align-items:center;padding-block:var(--space-2xl)}
.band figure{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5}
.band figure img{width:100%;height:100%;object-fit:cover;object-position:80% 45%}
.band figcaption{font-size:var(--step--1);color:var(--night-300);margin-top:10px}
.band h2{color:var(--night-100);font-size:var(--step-4);margin-top:0;font-weight:500}
.band h2 em{color:var(--blush-300);font-style:italic;font-variation-settings:"SOFT" 100}
.band p{color:var(--night-100);font-family:var(--f-read);font-size:var(--step-0);max-width:52ch}
.band a{color:var(--blush-300)}
.band .eyebrow{color:var(--blush-300)}

/* ==========================================================================
   HUBS, STAGES, TRUST PAGES
   ========================================================================== */
.page-hero{margin:var(--space-m) 0 0;border-radius:var(--radius);overflow:hidden;
  aspect-ratio:21/9;background:var(--surface-sunken)}
.page-hero img{width:100%;height:100%;object-fit:cover;object-position:50% 26%}
.article-head{margin:var(--space-l) 0 var(--space-s)}
.article-head h1{font-size:var(--step-5);margin:0}
.side-pill{display:inline-block}
.hub-more{margin:var(--space-l) 0}
.guide-list{list-style:none;padding:0;margin:var(--space-l) 0;display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);counter-reset:g}
/* v3.1 (critic r2 B6, N7): no counters, which read as a ranking the guides are not in;
   a chapter dot instead, every card ends on the same "Read" line, and the first card
   spans the row only when the count is odd, so no card is ever left alone at the end. */
.guide-list li{position:relative;display:flex;flex-direction:column;padding:var(--space-m);
  border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--rule);
  transition:transform .2s ease, box-shadow .2s ease}
.guide-list li:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.guide-list li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--ch);
  margin-bottom:var(--space-s)}
.guide-list li a{font-family:var(--f-display);font-weight:600;font-size:var(--step-1);
  line-height:1.25;color:var(--text);text-decoration:none;display:block;margin-bottom:8px}
.guide-list li a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.guide-list li p{margin:0 0 var(--space-s);color:var(--text-muted);font-size:var(--step--1);line-height:1.5}
.guide-list .gl-go{margin-top:auto;font:600 .875rem/1 var(--f-ui);color:var(--ch-text)}
.guide-list .gl-go::after{content:" \2192"}
/* v3.2 (critic r3 B6): the lead guide is chosen by the build (li.lead), never by an odd
   count. Whatever is left over is squared off so no card sits alone on the last row:
   with a full-width lead the rest pair up unless the total is even; without one, unless
   the total is odd. */
.guide-list > li.lead{grid-column:1 / -1;background:var(--ch-tint);border-color:transparent}
.guide-list > li.lead a{font-size:var(--step-3)}
/* D148: the odd card is no longer stretched across the row; see the D148 block at the end of the file. */

article > p,article > ul,article > ol,
main > p:not(.lede):not(.hub-more):not(.tiers-note),main > ul:not(.guide-list):not(.guide-grid),main > ol,main > h2,main > h3{max-width:var(--measure)}

/* Posts read down one centred column; the answer blocks run a little wider. */
body.side-wed article > :not(.post-head),
body.side-baby article > :not(.post-head){max-width:46rem;margin-inline:auto}
body.side-wed article > :is(.glance,.jump,.table-scroll),
body.side-baby article > :is(.glance,.jump,.table-scroll){max-width:62rem}
.post-head .ph-copy{max-width:46rem}
main:not(:has(article)) > p{font-family:var(--f-read);font-size:var(--step-0);line-height:1.7}
article{font-family:var(--f-read)}
article p,article li{font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);line-height:1.72}
article li{margin-bottom:.4em}
article h2{font-family:var(--f-display)}

.contact-form{max-width:36rem;font-family:var(--f-ui);margin:var(--space-m) 0}
.contact-form label{display:block;font-weight:600;font-size:.9375rem;margin-bottom:6px}
.contact-form input,.contact-form select,.contact-form textarea{width:100%;min-height:var(--tap);
  font:inherit;font-size:1rem;padding:.65em .8em;border-radius:var(--radius-s);
  border:1.5px solid var(--text-muted);background:var(--surface-raised);color:var(--text)}
.contact-form textarea{min-height:9rem}
.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible{
  outline:3px solid var(--ring);outline-offset:2px}
.contact-form button{margin-top:var(--space-2xs)}
.hp-wrap{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   POSTS
   ========================================================================== */
/* The chapter band. border-image paints full bleed without widening the page,
   so there is no horizontal scroll at any width. */
.post-head{background:var(--ch-tint);border-image:conic-gradient(var(--ch-tint) 0 0) fill 0//0 100vw;
  padding-block:var(--space-l) var(--space-xl);margin-bottom:var(--space-l);
  display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-l);align-items:center}
.post-head.has-fig{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}
.post-head .ph-copy{min-width:0}
.post-head h1{font-size:var(--step-5);line-height:1.06;margin-bottom:var(--space-m);max-width:22ch}
.post-kicker{display:flex;align-items:center;gap:.8em;margin-bottom:var(--space-s)}
.post-kicker .n{font-family:var(--f-display);font-size:1.1rem;letter-spacing:0;font-weight:600;
  color:#FFFFFF;background:var(--ch-dark);border-radius:999px;min-width:2.3em;height:2.3em;
  display:inline-flex;align-items:center;justify-content:center}
.post-fig{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/5;
  box-shadow:var(--shadow);background:var(--surface-sunken)}
.post-fig img{width:100%;height:100%;object-fit:cover}
.byline-person{display:flex;align-items:center;gap:14px;font-family:var(--f-ui)}
.byline-mark{flex:none;width:48px;height:48px;border-radius:50%;background:var(--ch-dark);
  color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;
  font:600 .8rem/1 var(--f-display);letter-spacing:.02em}
.byline-person p{margin:0;line-height:1.4}
.byline-who{font-weight:600;font-size:.9375rem}
.byline-who a{color:var(--text);display:inline-flex;align-items:center;min-height:var(--tap)}
.byline-cred{font-size:.8125rem;color:var(--text-muted);max-width:52ch}
.byline-dates{font-size:.8125rem;color:var(--text-muted)}
.byline-dates a{color:var(--ch-text);display:inline-flex;align-items:center;min-height:var(--tap)}

.inline-disclosure{font:400 .8125rem/1.5 var(--f-ui);color:var(--text-muted);
  max-width:var(--measure);margin:0 0 var(--space-m);padding-left:12px;border-left:2px solid var(--rule)}
.inline-disclosure a{color:var(--text-muted);display:inline-block;padding-block:.3em}
.hub-more a{display:inline-flex;align-items:center;min-height:var(--tap)}

/* The short answer. The biggest type in the body is the verdict. */
.verdict{position:relative;max-width:52rem;margin:0 0 var(--space-l);
  padding:var(--space-m) var(--space-m) var(--space-m) calc(var(--space-m) + 6px);
  background:var(--surface-raised);border-radius:var(--radius);
  box-shadow:inset 6px 0 0 var(--ch)}
.verdict-label{display:block;font:600 .75rem/1 var(--f-ui);letter-spacing:.14em;
  text-transform:uppercase;color:var(--ch-text);margin-bottom:var(--space-xs)}
.verdict p{font-family:var(--f-display);font-weight:400;font-size:var(--step-1);line-height:1.45;
  margin:0;font-variation-settings:"SOFT" 50}
.verdict p strong{font-weight:600}

/* Picks at a glance: the answer before the method. */
.glance{margin:0 0 var(--space-m)}
.glance h2{font-size:var(--step-2);margin:0 0 var(--space-s)}
.glance-grid{list-style:none;padding:0;margin:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:12px}
.glance-card{position:relative;display:flex;flex-direction:column;gap:6px;padding:var(--space-s);
  border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--rule);
  font-family:var(--f-ui);transition:transform .2s ease, box-shadow .2s ease}
.glance-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.glance-card.top{background:var(--ch-tint);border-color:var(--ch)}
.glance-n{font:600 .75rem/1 var(--f-ui);letter-spacing:.14em;color:var(--ch-text);text-transform:uppercase}
.glance-card a.gname{font-family:var(--f-display);font-weight:600;font-size:1.125rem;line-height:1.25;
  color:var(--text);text-decoration:none;min-height:var(--tap);display:flex;align-items:center}
.glance-card a.gname::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.glance-card .gfor{font-size:.875rem;color:var(--text-muted);line-height:1.45;margin:0}
.glance-card .gbadge{align-self:flex-start;font:600 .75rem/1 var(--f-ui);letter-spacing:.06em;
  color:#FFFFFF;background:var(--ch-dark);padding:.45em .7em;border-radius:999px}

/* Jump bar. Sticky under the masthead, never covering content. */
.jump{position:sticky;top:var(--head-h);z-index:20;display:flex;gap:6px;overflow-x:auto;
  scrollbar-width:none;margin:0 0 var(--space-l);padding:10px 0;
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);font-family:var(--f-ui)}
.jump::-webkit-scrollbar{display:none}
.jump a{flex:none;display:inline-flex;align-items:center;min-height:var(--tap);padding:0 14px;
  border-radius:999px;border:1px solid var(--rule);background:var(--surface-raised);
  color:var(--text);font-size:.875rem;font-weight:500;text-decoration:none;white-space:nowrap}
.jump a:hover{border-color:var(--ch);color:var(--ch-text)}
.jump span{flex:none;display:inline-flex;align-items:center;font:600 .75rem/1 var(--f-ui);
  letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted);padding-right:6px}

/* The evidence label, set like a specification plate. */
.evidence{font-family:var(--f-ui);max-width:52rem;margin:var(--space-l) 0;
  background:var(--surface-raised);border:1px solid var(--rule);border-top:4px solid var(--text);
  border-radius:4px var(--radius-s) var(--radius) var(--radius);padding:var(--space-m)}
.evidence-tier{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin:0 0 var(--space-s);
  font:600 .75rem/1.3 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--text-muted)}
.evidence-tier strong{text-transform:none;letter-spacing:0;font-size:.9375rem;font-weight:600;
  background:var(--accent);color:var(--text-inverse);padding:.35em .9em;border-radius:999px}
.evidence p{font-family:var(--f-ui);font-size:.9375rem;line-height:1.6}
.evidence-list{display:grid;grid-template-columns:max-content 1fr;gap:10px var(--space-s);margin:0;
  border-top:1px solid var(--rule);padding-top:var(--space-s);font-size:.9375rem;line-height:1.55}
.evidence-list dt{font-weight:600;white-space:nowrap}
.evidence-list dd{margin:0;color:var(--text-muted)}
.evidence-more{margin:var(--space-s) 0 0;font-size:.875rem}
.evidence-more a{display:inline-block;padding-block:.3em}

/* The comparison table: the second half of the product. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:var(--space-m) 0 var(--space-l);
  border-radius:var(--radius);position:relative;container-type:inline-size}
@supports (container-type:scroll-state){.table-scroll{container-type:inline-size scroll-state}}
.table-scroll:focus-visible{outline:3px solid var(--ring);outline-offset:2px}
.compare-table{width:100%;min-width:560px;border-collapse:separate;border-spacing:0;
  font-family:var(--f-ui);font-size:.9375rem;line-height:1.45;
  border:1px solid var(--rule);border-radius:var(--radius);overflow:hidden;background:var(--surface-raised)}
.compare-table th{background:var(--ch-dark);color:#FFFFFF;font-size:.75rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;text-align:left;padding:14px 16px;white-space:nowrap}
.compare-table td{padding:14px 16px;border-top:1px solid var(--rule);vertical-align:middle}
.compare-table tr:nth-child(even) td{background:var(--surface-sunken)}
.compare-table td:first-child{font-weight:600;font-family:var(--f-display);font-size:1rem}
/* v3.1 (critic r2 B3): the highlight follows the Editor's Pick row the build marks,
   never the first row. The old nth-child rule pointed at the wrong product on 3 guides. */
.compare-table tr.is-pick td{background:var(--ch-tint)}
.compare-table tr.is-pick td:first-child{box-shadow:inset 4px 0 0 var(--ch)}
.compare-table tr.is-pick td:first-child::after{content:"Editor's pick";display:block;width:max-content;
  margin-top:6px;font:600 .75rem/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;
  color:#FFFFFF;background:var(--ch-dark);padding:.45em .65em;border-radius:999px}
.compare-table .cta{padding:.55em 1em;font-size:.8125rem;white-space:nowrap}
/* The scroll hint chip, carried from v2 unchanged in behaviour. Its edge is
   currentColor because --rule measured 1.22:1 against the ground and WCAG
   1.4.11 wants 3:1 on a component boundary (chip_contrast.py, 2026-09-13). */
.table-scroll::before{content:none;position:sticky;left:0;display:block;width:max-content;
  margin:0 0 8px;padding:5px 11px;font:600 12px/1.2 var(--f-ui);letter-spacing:.06em;
  text-transform:uppercase;color:var(--accent-text);background:var(--surface-sunken);
  border:1px solid currentColor;border-radius:999px}
@supports not (container-type:scroll-state){
  @container (max-width:559px){.table-scroll::before{content:"Scroll the table \2192"}}
}
@supports (container-type:scroll-state){
  @container scroll-state(scrollable:right){.table-scroll::before{content:"Scroll the table \2192"}}
}

/* A pick. Big numeral, the name, the argument, then the ledger. */
.product-block{position:relative;margin:0 0 var(--space-m);padding:var(--space-l) var(--space-m) var(--space-m);
  background:var(--surface-raised);border:1px solid var(--rule);border-radius:var(--radius);max-width:52rem}
.product-block > div{min-width:0}
.product-block h3{display:flex;align-items:baseline;gap:.55em;font-size:var(--step-3);line-height:1.1;
  margin:0 0 var(--space-s);flex-wrap:wrap}
.pick-n{font-family:var(--f-display);font-style:italic;font-weight:400;font-size:1.3em;line-height:1;
  color:var(--ch);font-variation-settings:"SOFT" 100,"WONK" 1}
.rating{display:inline-flex;align-items:center;gap:.4em;font:600 .75rem/1 var(--f-ui);letter-spacing:.1em;
  text-transform:uppercase;color:#FFFFFF;background:var(--ch-dark);padding:.55em .85em;border-radius:999px;
  margin:0 0 var(--space-s)}
.product-block > div > p{max-width:var(--measure)}
.pros-cons{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:var(--space-s) 0;font-family:var(--f-ui)}
.pros,.cons{padding:var(--space-s);border-radius:var(--radius-s);font-size:.9375rem;line-height:1.55}
.pros{background:light-dark(var(--green-050),var(--night-700))}
.cons{background:light-dark(var(--wed-050),var(--night-700))}
.pros strong,.cons strong{display:flex;align-items:center;gap:.5em;font-size:.75rem;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:6px}
.pros strong{color:var(--positive)}
.cons strong{color:var(--negative)}
.pros strong::before,.cons strong::before{content:"+";display:inline-flex;align-items:center;justify-content:center;
  width:1.5em;height:1.5em;border-radius:50%;font-size:.95rem;letter-spacing:0;color:#FFFFFF;background:var(--positive)}
.cons strong::before{content:"\2212";background:var(--negative)}
.who-for{font-family:var(--f-ui);font-size:.9375rem;margin:var(--space-s) 0;padding:12px 14px;
  border-radius:var(--radius-s);background:var(--surface-sunken);border-left:3px solid var(--ch)}
.verified-line{font:400 .8125rem/1.5 var(--f-ui);color:var(--text-muted);margin:var(--space-s) 0}
.product-block .cta{margin-top:var(--space-2xs)}

.lede-break{font-family:var(--f-display);font-size:var(--step-2);line-height:1.3;font-weight:500;
  max-width:36ch;margin:var(--space-l) 0 var(--space-m);font-variation-settings:"SOFT" 50}

.faq{margin:var(--space-xl) 0;max-width:52rem;font-family:var(--f-ui)}
.faq details{border-bottom:1px solid var(--rule)}
.faq details:first-of-type{border-top:1px solid var(--rule)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:var(--tap);padding:18px 0;font-family:var(--f-display);font-weight:600;
  font-size:var(--step-1);line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:32px;height:32px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font:400 1.25rem/1 var(--f-ui);
  background:var(--surface-sunken);color:var(--text);transition:transform .2s ease}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{font-family:var(--f-read);font-size:1.0625rem;line-height:1.7;margin:0 0 var(--space-s);max-width:var(--measure)}

.who-wrote{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;align-items:start;
  margin:var(--space-xl) 0 var(--space-l);padding:var(--space-m);max-width:52rem;
  border-radius:var(--radius);background:var(--surface-sunken);font-family:var(--f-ui)}
.who-wrote::before{content:"A&C";grid-row:1 / span 2;width:56px;height:56px;border-radius:50%;
  background:var(--ch-dark);color:#FFFFFF;display:inline-flex;align-items:center;justify-content:center;
  font:600 .9rem/1 var(--f-display)}
.who-wrote h3{margin:0;font-size:var(--step-2)}
.who-wrote p{margin:0;font-size:.9375rem;line-height:1.6;color:var(--text-muted);max-width:52ch}
.who-wrote a{color:var(--text)}

.related{margin:var(--space-l) 0 var(--space-xl);max-width:52rem;font-family:var(--f-ui)}
.related h3{font-size:var(--step-2);margin-bottom:var(--space-s)}
.related p{margin:0;display:grid;gap:10px;font-size:0}
.related p a{font-family:var(--f-display);font-weight:600;font-size:1.0625rem;line-height:1.35;
  color:var(--text);text-decoration:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 18px;border-radius:var(--radius-s);background:var(--surface-raised);border:1px solid var(--rule);
  min-height:var(--tap)}
.related p a::after{content:"\2192";font-family:var(--f-ui);color:var(--ch-text);flex:none}
.related p a:hover{border-color:var(--ch)}

/* Home reuses two post components inside other shapes; these undo the post look. */
.evidence.tiers{max-width:none;padding:0;margin:0;display:grid;background:var(--surface-raised)}
.band .who-wrote{display:block;background:none;padding:0;margin:0;max-width:none}
.band .who-wrote::before{content:none}
.band .who-wrote p{color:var(--night-100);font-family:var(--f-read);font-size:var(--step-0)}
.band .who-wrote p.eyebrow{color:var(--blush-300);font:600 .75rem/1.3 var(--f-ui)}
.band .who-wrote a{color:var(--blush-300);font-family:var(--f-ui);font-weight:600;
  display:inline-flex;align-items:center;min-height:var(--tap)}

/* ---------- Footer ---------- */
footer.site{margin-top:var(--space-2xl);background:var(--ink-900);color:var(--night-100);
  padding-block:var(--space-xl) var(--space-l);font-size:.875rem}
main:has(> .band:last-child) + footer.site{margin-top:0;border-top:1px solid var(--night-600)}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-m);
  flex-wrap:wrap;padding-bottom:var(--space-m);border-bottom:1px solid var(--night-600)}
.foot-mark img{display:block;width:auto;height:26px}
footer.site a{color:var(--blush-300);display:inline-block;padding-block:.6em;min-height:var(--tap)}
.disclosure{color:var(--night-300);font-size:.8125rem;line-height:1.6;max-width:80ch;padding-top:var(--space-s)}

/* ==========================================================================
   v3.1, 2026-09-27. Closes blind design critique r2 (_proof/v3-2026-09-27/critic_r2.md).
   Each rule names the finding it answers.
   ========================================================================== */
/* B6: hubs, stages and about lead with a two-column head, text beside the photograph. */
.page-head{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--space-l);
  align-items:center;margin:var(--space-l) 0 var(--space-m)}
.page-head .article-head{margin:0 0 var(--space-s)}
.page-head .lede{margin:0}
.page-head .page-hero{margin:0;aspect-ratio:4/5;max-height:560px;width:100%}
/* B1, B2: the founders' photograph is soft; it never runs wider than it can hold. */
.page-head .page-hero.portrait{aspect-ratio:4/5;max-width:420px;justify-self:end;overflow:visible;
  border-radius:0;background:none}
.page-hero.portrait img{border-radius:var(--radius);object-position:76% 45%;aspect-ratio:4/5;
  width:100%;height:auto}
.page-hero.portrait figcaption{font:500 .8125rem/1.4 var(--f-ui);color:var(--text-muted);margin-top:8px}
.band-inner{grid-template-columns:minmax(0,420px) minmax(0,1fr)}
.band figure{max-width:420px}
.band figure img{object-position:78% 40%}
/* P1: captions sit under the photographs, no slab. The headline drops one step so it
   sets in four or five lines and the photographs stand level with it, centred. */
.home-hero{align-items:center}
.home-hero h1{font-size:var(--step-5);line-height:1.04}
.page-head + .evidence{max-width:none}
.diptych figure{overflow:visible;background:none;aspect-ratio:auto}
.diptych figure::after{content:none}
/* height:auto is required beside aspect-ratio, or the HTML height attribute wins and the
   image keeps its height and grows sideways out of its column (G-DESIGN, v31-r1 probe). */
.diptych img{aspect-ratio:3/4;border-radius:var(--radius);width:100%;height:auto}
.diptych{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.diptych figure{min-width:0}
.diptych figcaption{position:static;background:none;color:var(--text);padding:10px 2px 0}
.diptych figcaption small{color:var(--text-muted);opacity:1}
.diptych figure:last-child{transform:translateY(8%)}
/* P2: a post runs on two edges, wide and body, both centred on the same axis. */
.post-head{padding-inline:max(0px, calc((100% - 62rem) / 2))}
/* P3: the verdict bar is a straight rule, not a hook around a rounded corner. */
.verdict{box-shadow:none}
.verdict::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;
  border-radius:2px;background:var(--ch)}
/* P4: one card, one voice. Hairlines, not four tinted boxes. */
.pros-cons{align-items:start}
.pros,.cons{background:none;padding:0 0 0 14px;border-radius:0;border-left:2px solid var(--rule)}
.who-for{background:none;border-left:0;padding:0;font-weight:600}
/* P5: glance cards share a baseline and the badge sits at the foot. */
.glance-card a.gname{text-wrap:balance;align-items:flex-start}
@media (min-width:641px){.glance-card a.gname{min-height:2.6em}}
.glance-card .gbadge{margin-top:auto}
/* P6, P7: the plate takes the chapter colour instead of a warning-label black. */
.evidence{border-top:3px solid var(--ch)}
/* P11: one wordmark. Since v4.4 (D126) it is the v3.0 kit drawing in header and footer alike. */
.foot-links{display:flex;flex-wrap:wrap;gap:0 .5em;justify-content:flex-end}
/* P12: the pick numeral always sits left of the name, however the name wraps. */
.product-block h3{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:.55em}
/* P13: faces sit above the dark part of the gradient. */
.fork-card::before{background:linear-gradient(to top,rgba(26,25,23,.9) 0%,rgba(26,25,23,.6) 38%,rgba(26,25,23,0) 70%)}
.fork-fig img{object-position:50% 20%}
/* N1: zero reads as a stance, not an absence. N2: the kicker number said the pick count twice. */
.proof-strip div:last-child b{font-style:italic;font-weight:500;color:var(--wed-800)}
.post-kicker .n{display:none}
@media (max-width:820px){
  .page-head{grid-template-columns:1fr}
  .page-head .page-hero{aspect-ratio:16/10;max-height:none;order:-1}
  .page-head .page-hero.portrait{order:0;justify-self:start;max-width:320px}
  /* P9: on a phone the shoes guide keeps the feet and drops the faces. */
  .post-fig img[src*="DYdKc2emxb0"]{object-position:50% 85%}
  .band-inner{grid-template-columns:1fr}
}
@media (max-width:600px){
  /* P10: the first recommendation comes sooner on a phone. */
  .post-fig{aspect-ratio:16/9;max-height:200px}
  .byline-cred{display:none}
  /* B4: a table row becomes a card, every value labelled, the button in reach. */
  .table-scroll{overflow:visible}
  .table-scroll::before{content:none !important}
  .compare-table{min-width:0;border:0;background:none}
  .compare-table,.compare-table tbody,.compare-table tr,.compare-table td{display:block;width:100%}
  .compare-table tr:first-child{display:none}
  .compare-table tr{margin:0 0 12px;padding:14px 16px;border:1px solid var(--rule);
    border-radius:var(--radius);background:var(--surface-raised)}
  .compare-table tr:nth-child(even) td{background:none}
  .compare-table td{border:0;padding:4px 0}
  .compare-table td[data-label]:not(:first-child)::before{content:attr(data-label);display:block;
    font:600 .75rem/1.4 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
  .compare-table td:first-child{font-size:1.125rem;padding-bottom:6px}
  .compare-table td.td-act{padding-top:10px}
  .compare-table tr.is-pick{background:var(--ch-tint);border-color:var(--ch)}
  .compare-table tr.is-pick td{background:none}
  .compare-table tr.is-pick td:first-child{box-shadow:none}
}
@media (prefers-color-scheme: dark){
  .tier.now{background:var(--baby-800)}
  .band{border-block:1px solid var(--rule)}
  .proof-strip div:last-child b{color:var(--blush-300)}
}

/* ==========================================================================
   v3.2, 2026-09-27. Closes blind design critique r3 (_proof/v3-2026-09-27/critic_r3.md).
   ========================================================================== */
/* B4: a post headline sets in three or four lines, not seven. */
.post-head h1{font-size:var(--step-4);line-height:1.1;max-width:24ch}
/* B1: the evidence plate is one line; the detail opens on request. */
.evidence:has(.ev-more){padding:14px var(--space-m)}
.evidence:has(.ev-more) .evidence-tier{margin:0;gap:8px 12px;letter-spacing:.12em}
.ev-note{text-transform:none;letter-spacing:0;font-weight:400;font-size:.9375rem;color:var(--text-muted);
  flex:1 1 20rem}
.ev-more{margin-top:10px;border-top:1px solid var(--rule);padding-top:8px}
.ev-more summary{cursor:pointer;min-height:var(--tap);display:flex;align-items:center;
  font:600 .875rem/1.2 var(--f-ui);color:var(--ch-text)}
.ev-more[open] summary{margin-bottom:8px}
.ev-more .evidence-list{border-top:0;padding-top:0}
/* P5: one badge component. The Editor's Pick is filled; every other label is an outline;
   the evidence level is a quiet outline too, so it never reads as a pick. */
.evidence-tier strong{background:none;color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.glance-card .gbadge,.rating{align-self:flex-start;font:600 .75rem/1.35 var(--f-ui);letter-spacing:.08em;
  text-transform:uppercase;color:var(--ch-text);background:none;box-shadow:none;
  padding:0;border-radius:0;margin:0 0 4px;text-wrap:balance}
.glance-card.top .gbadge,.rating.rating-pick{color:#FFFFFF;background:var(--ch-dark);box-shadow:none;
  padding:.45em .75em;border-radius:999px}
.glance-card .gbadge{margin-top:0}
/* B3: the pick's review card carries the same mark as its glance card and table row. */
.product-block:has(.rating-pick){background:var(--ch-tint);border-color:var(--ch)}
/* P3: section heads in a post share the body's left edge; only the grid and table go wide. */
/* v3.6 (critic r6 B3) reverses r3 P3: a heading shares the left edge of the block it
   names. The glance heading stays on the glance grid's edge, and the table's own heading
   runs at the table's wide measure. */
/* P7: the "if you want X" lines are the most scannable thing on the page. */
.if-list{list-style:none;padding:0;margin:var(--space-s) auto var(--space-m);display:grid;gap:8px;
  font-family:var(--f-ui)}
.if-list li{padding:12px 14px;border-radius:var(--radius-s);background:var(--surface-raised);
  border:1px solid var(--rule);font-size:.9375rem;line-height:1.5;margin:0}
.if-list li strong{display:block;font-weight:600;margin-bottom:2px}
/* P1: hub and stage heads start at the top; no empty field above the breadcrumb. */
.page-head{align-items:start}
.page-head .page-hero{aspect-ratio:4/3;max-height:420px}
.page-head .page-hero.portrait{aspect-ratio:auto;max-height:none}
/* P10: the founders' snapshot is shown at a size its sharpness can hold, as a print. */
.page-hero.portrait,.band figure{max-width:300px;background:#FFFFFF;padding:10px 10px 0;
  box-shadow:0 1px 2px rgba(43,43,43,.08),0 14px 30px -18px rgba(43,43,43,.4);border-radius:4px}
.page-hero.portrait img,.band figure img{border-radius:2px}
.page-hero.portrait figcaption,.band figcaption{color:#5B6566;padding:8px 2px 10px;margin:0;
  font:500 .8125rem/1.3 var(--f-ui)}
.band figure{aspect-ratio:auto;overflow:visible}
.band figure img{aspect-ratio:4/5;height:auto}
.band-inner{grid-template-columns:minmax(0,300px) minmax(0,1fr)}
/* P2: the three levels are equal weight; the current one is outlined, not inverted. */
.tier.now{background:var(--surface-raised);color:var(--text);box-shadow:inset 0 0 0 2px var(--accent)}
.tier.now h3,.tier.now p{color:var(--text)}
.tier.now .tier-tag{color:var(--accent)}
/* P9: zero in the same ink as the other two figures. */
.proof-strip div:last-child b{font-style:normal;font-weight:600;color:var(--text)}
/* P12: footer links separated by space. */
.foot-links{gap:0 1.1em}
/* P14: a card carries its own chapter colour wherever it appears. */
.guide-list li.w{--ch:light-dark(var(--wed-500),var(--blush-300));--ch-base:var(--wed-500);--ch-text:light-dark(var(--wed-800),var(--blush-300));
  --ch-tint:light-dark(var(--wed-050),var(--night-800))}
.guide-list li.b{--ch:light-dark(var(--baby-500),var(--baby-300));--ch-base:var(--baby-500);--ch-text:light-dark(var(--baby-800),var(--baby-300));
  --ch-tint:light-dark(var(--baby-050),var(--night-800))}
.guide-list li.w::before,.guide-list li.b::before{width:auto;height:auto;border-radius:0;background:none;
  font:600 .75rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--ch-text)}
.guide-list li.w::before{content:"Wedding"}
.guide-list li.b::before{content:"Baby"}
@media (max-width:640px){
  /* P4: on a phone the picks show once, as the glance cards; the full table waits for a
     wider screen, and the jump bar stops pointing at it. */
  .table-scroll,.jump a[href="#compare"]{display:none}
  /* P16: the header photograph runs the full column width. */
  .post-fig{aspect-ratio:auto;height:220px;width:100%;max-height:none}
  /* P9: the three figures stay one compact row. */
  .proof-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
  .proof-strip div + div{border-top:0;border-left:1px solid var(--rule)}
  .proof-strip div{padding:14px 10px}
  .proof-strip b{font-size:var(--step-3)}
  /* P13: the chapter card's words sit over the dresses, not the faces. */
  .fork-card{min-height:420px}
  .fork-fig img{object-position:50% 0%}
  /* D143 (grader A M-A2): at phone width the chapter heading sits higher on the photo than the desktop
     gradient's dark band; the band now holds its weight further up. */
  .fork-card::before{background:linear-gradient(to top,rgba(26,25,23,.92) 0%,rgba(26,25,23,.74) 50%,rgba(26,25,23,0) 85%)}
  .page-hero.portrait,.band figure{max-width:260px}
}
@media (prefers-color-scheme: dark){
  .page-hero.portrait,.band figure{background:var(--night-800)}
  .page-hero.portrait figcaption,.band figcaption{color:var(--night-300)}
  .tier.now{background:var(--surface-raised);box-shadow:inset 0 0 0 2px var(--sage-400)}
  .proof-strip div:last-child b{color:var(--text)}
  .evidence-tier strong{color:var(--sage-400);background:none}
}

/* ==========================================================================
   v3.3, 2026-09-27. Closes blind design critique r4 (_proof/v3-2026-09-27/critic_r4.md).
   ========================================================================== */
/* B5: the pick is named under the headline, in the first screen. */
.pick-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:0 0 var(--space-m);
  font:500 1rem/1.4 var(--f-ui)}
.pick-line span{font:600 .75rem/1 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:#FFFFFF;
  background:var(--ch-dark);padding:.5em .75em;border-radius:999px}
.pick-line a{font-family:var(--f-display);font-weight:600;font-size:1.125rem;color:var(--text);
  text-decoration-color:var(--ch);text-underline-offset:.25em;display:inline-block;padding-block:.35em}
/* B7: cards pack without holes. */
.guide-list{grid-auto-flow:dense}
@media (max-width:640px){
  /* B6: the table's heading hides with the table. */
  .compare-h{display:none}
}
/* B4: the pick mark survives dark mode. A tint mixed from the chapter colour into the
   dark ground, and a filled accent badge, instead of grey on grey. */
@media (prefers-color-scheme: dark){
  body.side-wed,body.side-baby{--ch-tint:color-mix(in srgb, var(--ch-base) 22%, var(--night-900))}
  .guide-list li.w,.guide-list li.b{--ch-tint:color-mix(in srgb, var(--ch-base) 22%, var(--night-900))}
  .compare-table th{background:color-mix(in srgb, var(--ch-base) 40%, var(--night-800))}
}

/* ==========================================================================
   v3.4, 2026-09-27. Closes blind design critique r5 (_proof/v3-2026-09-27/critic_r5.md).
   ========================================================================== */
/* B3: a post with no photograph of its own carries a type-only band, set on purpose:
   the chapter's own word, large and quiet, where a photograph would stand. */
.post-head:not(.has-fig){grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);position:relative}
.post-head:not(.has-fig)::after{content:"Cradle";align-self:center;justify-self:end;
  font:italic 400 clamp(4rem,2rem + 8vw,9rem)/1 var(--f-display);font-variation-settings:"SOFT" 100,"WONK" 1;
  color:var(--ch);opacity:.28;letter-spacing:-.03em;pointer-events:none;user-select:none}
body.side-wed .post-head:not(.has-fig)::after{content:"Aisle"}
/* B4: on /about the body text runs beside the founders' photograph, not below it. */
.page-head:has(.page-hero.portrait){display:block}
.page-head:has(.page-hero.portrait) .ph-text{max-width:46rem}
.page-hero.portrait{float:right;margin:0 0 var(--space-m) var(--space-l)}
article:has(.page-hero.portrait)::after{content:"";display:block;clear:both}
/* The disclosure widget shows it opens. */
.ev-more summary{list-style:none;gap:8px}
.ev-more summary::-webkit-details-marker{display:none}
.ev-more summary::before{content:"+";display:inline-flex;align-items:center;justify-content:center;
  width:20px;height:20px;border-radius:50%;background:var(--surface-sunken);font:500 1rem/1 var(--f-ui)}
.ev-more[open] summary::before{content:"\2212"}
@media (max-width:820px){
  .post-head:not(.has-fig){grid-template-columns:1fr}
  .post-head:not(.has-fig)::after{content:none !important}
  .page-hero.portrait{float:none;margin:0 0 var(--space-m)}
}
@media (max-width:640px){
  .foot-links{justify-content:flex-start}
  .jump{padding-right:16px}
  .jump::after{content:"";flex:0 0 8px}
}

/* /contact: the form's own confirmation, shown by the #sent or #failed fragment the
   Pages Function redirects to. Works with scripts off. */
.form-note{display:none;max-width:36rem;padding:14px 16px;border-radius:var(--radius-s);
  font:500 .9375rem/1.5 var(--f-ui);margin:var(--space-s) 0}
.form-note:target{display:block}
.form-note.ok{background:light-dark(var(--green-050),var(--night-700));border-left:3px solid var(--positive)}
.form-note.fail{background:light-dark(var(--wed-050),var(--night-700));border-left:3px solid var(--negative)}

/* v3.6, critic r6. */
body.side-wed article > h2.compare-h,body.side-baby article > h2.compare-h{max-width:62rem}
/* B2: a jump lands below the masthead AND the sticky jump bar, never under them. */
body.side-wed [id],body.side-baby [id]{scroll-margin-top:calc(var(--head-h) + 84px)}
@media (max-width:640px){
  body.side-wed [id],body.side-baby [id]{scroll-margin-top:80px}
}

/* v3.7, critic r7. */
/* P1: the badge sits at the foot of its card, so every card's title shares a baseline. */
.glance-card .gbadge{order:5;margin-top:auto}
/* The stage page intro, moved into the head. */
.ph-intro{font-family:var(--f-read);font-size:var(--step-0);line-height:1.65;color:var(--text-muted);
  margin:var(--space-s) 0 0;max-width:60ch}
/* The jump label reads at full ink over a translucent bar. */
.jump span{color:var(--text)}
/* A hub that is one chapter does not label every card with that chapter. */
body.side-wed .guide-list li::before,body.side-baby .guide-list li::before{content:none}
@media (max-width:820px){
  /* P5: phone crops keep faces, which sit high in these frames. */
  .post-fig img{object-position:50% 25%}
}
@media (max-width:640px){
  /* P2: one-line names do not carry a blank second line; the whole card is the link. */
  .glance-card a.gname{min-height:0}
}

/* v3.8, critic r8 polish. */
/* Five picks fit one row at the wide measure; four or three still fill it. */
.glance-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
/* The affiliate note sits under the glance grid, so it takes the grid's edge. */
body.side-wed article > .inline-disclosure,body.side-baby article > .inline-disclosure{max-width:62rem}
/* /guides by stage: a heading with a quiet link to the stage page. */
.stage-group + .stage-group{margin-top:var(--space-l)}
.stage-group h2{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sg-more{font:600 .875rem/1 var(--f-ui);display:inline-flex;align-items:center;gap:.35em;min-height:var(--tap)}
.sg-more::after{content:"\2192"}
/* Stage cards: titles share a line whatever the length of the text under them. */
.stage-card:has(img) .stage-body p{min-height:2.9em}
@media (max-width:640px){
  /* The jump bar shows it scrolls: the last chip fades instead of being cut hard. */
  .jump{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
  /* The three home figures read as three short rows, number then caption. */
  .proof-strip{grid-template-columns:1fr}
  .proof-strip div + div{border-left:0;border-top:1px solid var(--rule)}
  .proof-strip div{display:grid;grid-template-columns:3.2rem 1fr;align-items:baseline;gap:10px;padding:12px 4px}
  .proof-strip b{margin:0;font-size:var(--step-3)}
}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  .stage-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .home-hero{grid-template-columns:1fr;padding-top:var(--space-l)}
  .diptych figure{aspect-ratio:4/5}
  .diptych figure:last-child{transform:translateY(8%)}
  .post-head.has-fig{grid-template-columns:1fr}
  .post-fig{aspect-ratio:16/10;order:-1}
  .band-inner{grid-template-columns:1fr}
  .band figure{aspect-ratio:16/11}
  .tiers{grid-template-columns:1fr}
  .tier + .tier{border-left:0;border-top:1px solid var(--rule)}
}
@media (max-width:640px){
  :root{--head-h:60px}
  header.site .wrap{flex-wrap:wrap;gap:0;padding-block:4px}
  nav.main{width:100%;overflow-x:auto;scrollbar-width:none;gap:2px;margin-inline:-6px}
  nav.main::-webkit-scrollbar{display:none}
  header.site{position:static}
  .jump{top:0}
  .guide-grid,.guide-list,.fork{grid-template-columns:1fr}
  .stage-grid{grid-template-columns:repeat(4,78%);overflow-x:auto;scroll-snap-type:x mandatory;
    padding-bottom:8px;scrollbar-width:thin}
  .stage-grid > *{scroll-snap-align:start}
  .pros-cons{grid-template-columns:1fr}
  .product-block{padding:var(--space-m) var(--space-s) var(--space-s)}
  .evidence-list{grid-template-columns:1fr;gap:2px}
  .evidence-list dt{margin-top:8px}
  .page-hero{aspect-ratio:16/10}
  .who-wrote{grid-template-columns:1fr}
  .who-wrote::before{grid-row:auto}
}

/* ---------- Motion: felt, never required. Content is never hidden. ---------- */
@media (prefers-reduced-motion: no-preference){
  @supports (animation-timeline: view()){
    .guide-card,.stage-card,.product-block,.glance-card,.guide-list li,.tier{
      animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}
    @keyframes rise{from{transform:translateY(14px)}to{transform:none}}
  }
  .diptych img,.page-hero img{animation:settle 9s ease-out both}
  @keyframes settle{from{transform:scale(1.045)}to{transform:scale(1)}}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* ---------- Dark theme, the parts tokens cannot express ---------- */
@media (prefers-color-scheme: dark){
  img{filter:brightness(.9) contrast(1.05)}
  .logo img,.foot-mark img{filter:none}
  .home-hero h1 em{color:var(--blush-300)}
  .guide-card.w .gc-ch{color:var(--blush-300)}
  .guide-card.b .gc-ch{color:var(--baby-300)}
  .cta,a.cta{background:var(--sage-400);color:var(--night-900)}
  body.side-wed .cta,body.side-wed a.cta{background:var(--blush-300);color:var(--night-900)}
  body.side-baby .cta,body.side-baby a.cta{background:var(--baby-300);color:var(--night-900)}
  .post-kicker .n,.byline-mark,.who-wrote::before{background:var(--night-600);color:var(--night-100)}
  /* v3.2: only the Editor's Pick badge is filled in dark too; the rest stay outlines. */
  /* v3.3 (critic r4 B4): filled with the chapter's light accent, not grey on grey. */
  .glance-card.top .gbadge,.rating.rating-pick,.pick-line span,
  .compare-table tr.is-pick td:first-child::after{background:var(--ch-text);color:var(--night-900)}
  .compare-table th{background:var(--night-600);color:var(--night-100)}
  .evidence-tier strong{color:var(--sage-400);background:none}
  .band,footer.site{background:var(--night-800);border-image:conic-gradient(var(--night-800) 0 0) fill 0//0 100vw}
  footer.site{border-image:none}
}

/* ---------- Print ---------- */
@media print{
  header.site,.jump,.skip,.read-progress,.hero-cta,.cta,.ghost,.diptych{display:none!important}
  body{background:#FFFFFF;color:#000000;font-size:11pt}
  .post-head,.band{border-image:none;background:none}
  .band,footer.site{color:#000000;background:none}
  .product-block,.evidence,.verdict{break-inside:avoid;box-shadow:none}
  .table-scroll{overflow:visible}
  .table-scroll::before{content:none}
  a{color:#000000}
  article a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;word-break:break-all}
}

/* v3.9, critic r9 P2: per-photo focal points, keyed on the file so each header keeps
   its subject (the held baby, the face) in the phone crop. */
.page-hero img[src*="Nvn0GxuiZNk"]{object-position:60% 15%}
@media (max-width:820px){
  .post-fig img[src*="Z4GKcFAGck4"]{object-position:45% 70%}
  .post-fig img[src*="AwgKaU127aU"]{object-position:60% 35%}
  .post-fig img[src*="mcKqoZh0DkI"]{object-position:60% 30%}
  .post-fig img[src*="FgN7IJCAYvc"]{object-position:50% 28%}
  .post-fig img[src*="eu2kC-USATA"]{object-position:50% 40%}
  .post-fig img[src*="NIZeg731LxM"]{object-position:50% 45%}
}

/* v3.9, critic r9 P4: each hub, stage and /guides card leads with its guide's own
   header photo, bled to the card's edges; the lead card takes a wide band. */
.guide-list li:has(> .gl-thumb){overflow:hidden}
.guide-list li > .gl-thumb{order:-1;display:block;width:calc(100% + 2 * var(--space-m));max-width:none;
  height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 30%;
  margin:calc(-1 * var(--space-m)) calc(-1 * var(--space-m)) var(--space-s)}
.guide-list > li.lead > .gl-thumb{aspect-ratio:21/8}
@media (max-width:640px){
  .guide-list li > .gl-thumb,.guide-list > li.lead > .gl-thumb{aspect-ratio:16/9}
}
@media (prefers-reduced-motion:no-preference){
  .guide-list li > .gl-thumb{transition:transform .5s ease}
  .guide-list li:hover > .gl-thumb{transform:scale(1.03)}
}

/* ==========================================================================
   v4.0, 2026-09-27. The visual pass: product plates, one role set, tier meters,
   lists, the couple's byline, cards off the posts (gap_review_v40.md G1-G10,
   critic r9 P5 P7-P10 N1 N3 N6 N11). Locked palette only: every colour below is
   a token, white, or the ink primitive on a white plate.
   ========================================================================== */

/* P9: a post runs on two edges. The summaries (evidence, short answer, affiliate
   note, glance, jump, table, decision list) share the wide edge; long reading and
   the reviews keep the body edge. */
:root{--evid-edge:62rem}
body.side-wed article > :is(.evidence,.verdict,.inline-disclosure),
body.side-baby article > :is(.evidence,.verdict,.inline-disclosure){max-width:var(--evid-edge)}
body.side-wed article > .buy-run,body.side-baby article > .buy-run{max-width:none}
body.side-wed .buy-run > *,body.side-baby .buy-run > *{max-width:46rem;margin-inline:auto}
body.side-wed .buy-run > :is(.table-scroll,h2.compare-h,.if-list,.ksp-lanes),
body.side-baby .buy-run > :is(.table-scroll,h2.compare-h,.if-list,.ksp-lanes){max-width:var(--evid-edge)}

/* P5: the short answer lands in one glance; the rest reads at body size. */
.verdict p{font-size:inherit}
.verdict .v-lead{display:block;font:500 var(--step-2)/1.3 var(--f-display);font-variation-settings:"SOFT" 50}
.verdict .v-more{display:block;margin-top:.7em;font:400 var(--step-0)/1.65 var(--f-read);color:var(--text-muted)}
.verdict .v-more strong{color:var(--text)}

/* G1: the product plate. White, because product shots are made on white: a white
   plate hides the photograph's own edge and the product floats. */
.pimg{margin:0;min-width:0}
.pimg-link{display:block;position:relative;z-index:2;border-radius:var(--radius-s);text-decoration:none}
.pimg img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:contain;
  background:#FFFFFF;padding:8%;border-radius:var(--radius-s);box-shadow:inset 0 0 0 1px var(--rule);
  font:500 .8125rem/1.35 var(--f-ui);color:var(--ink-500);text-align:center}
/* Round 11 (critic r10 B1): a pick with no photograph yet shows a designed tile: the
   maker's initial in Fraunces on a cream plate inside a thin chapter-colour ring, and the
   product category in small caps. Never a box repeating the name, never a stock photo. */
.ptile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;
  width:100%;aspect-ratio:1/1;background:var(--cream-100);border-radius:var(--radius-s);
  box-shadow:inset 0 0 0 1px var(--ch),inset 0 0 0 5px var(--cream-100),inset 0 0 0 6px var(--rule)}
.ptile::before{content:attr(data-mono);font:italic 400 3rem/1 var(--f-display);color:var(--ch-dark);
  font-variation-settings:"SOFT" 100,"WONK" 1}
.ptile::after{content:attr(data-cat);font:600 .75rem/1.2 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-500);text-align:center;padding:0 8%}
.ptile--sm{flex:none;gap:0}
.ptile--sm::before{font-size:1.5rem}
.ptile--sm::after{content:none}
.tname .ptile--sm{width:56px;height:56px}
.gl-picks .ptile--sm{width:48px;height:48px}
.gl-picks .ptile--sm::before{font-size:1.25rem}
.pick-bar .ptile--sm{width:44px;height:44px}
.if-list .ptile--sm.if-thumb{float:left;width:44px;height:44px;margin:2px 12px 4px 0}
.pimg-link:hover .ptile{box-shadow:inset 0 0 0 2px var(--ch),inset 0 0 0 5px var(--cream-100),inset 0 0 0 6px var(--rule)}
.pimg-link:hover img{box-shadow:inset 0 0 0 2px var(--ch)}
.pimg-src{margin-top:6px;font:500 .75rem/1.3 var(--f-ui);color:var(--text-muted)}
@media (prefers-reduced-motion:no-preference){
  .pimg img{transition:transform .25s ease}
  .pimg-link:hover img{transform:scale(1.02)}
}
.pthumb{display:block;flex:none;background:#FFFFFF;object-fit:contain;border-radius:6px;
  box-shadow:inset 0 0 0 1px var(--rule)}

/* G2: glance cards lead with the plate and end on a price tier and a way to buy. */
.glance-card{gap:6px;padding:var(--space-s)}
.glance-card .pimg{order:-1;margin:calc(-1 * var(--space-s)) calc(-1 * var(--space-s)) 6px}
.glance-card .pimg .ptile{height:150px;aspect-ratio:auto;border-radius:var(--radius) var(--radius) 0 0}
.glance-card .pimg img{height:150px;aspect-ratio:auto;border-radius:var(--radius) var(--radius) 0 0;
  padding:14px;box-shadow:inset 0 -1px 0 var(--rule)}
.glance-card .glance-n{order:0}
.glance-card .gbadge:has(> .role),.glance-card.top .gbadge:has(> .role){order:1;margin:0;padding:0;background:none;
  box-shadow:none;border-radius:0;color:var(--text)}
.glance-card > .vword{order:1;align-self:flex-start;margin:0}
.glance-card a.gname{order:2}
.glance-card .gavail{order:3}
.glance-card .gfor{order:4}
.glance-card .gmeta{order:6;margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:8px;flex-wrap:wrap;padding-top:8px;border-top:1px solid var(--rule)}
.gbuy{position:relative;z-index:2;display:inline-flex;align-items:center;min-height:var(--tap);
  font:600 .875rem/1 var(--f-ui);color:var(--ch-text);text-decoration:none}
.gbuy::after{content:"\2192";margin-left:.35em}
.gbuy:hover{text-decoration:underline}
.gavail{align-self:flex-start;font:500 .75rem/1.3 var(--f-ui);color:var(--text-muted);
  padding-left:8px;border-left:2px solid var(--accent-text)}

/* G5: one fixed role set, learnable at a glance. */
.role,.rating.role{display:inline-flex;align-items:center;align-self:flex-start;width:max-content;
  font:600 .75rem/1 var(--f-ui);letter-spacing:.08em;text-transform:uppercase;padding:.5em .75em;
  border-radius:999px;white-space:nowrap;background:none;color:var(--text-muted);box-shadow:inset 0 0 0 1px var(--rule)}
.role--pick,.rating.role--pick{background:var(--ch-dark);color:#FFFFFF;box-shadow:none}
.role--budget,.rating.role--budget{color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}
.rating.role{margin:0 0 6px}
.role-for{margin:0 0 var(--space-2xs);font:500 .875rem/1.4 var(--f-ui);color:var(--text-muted)}

/* Addendum: a pick that could not be bought on the update date says so, quietly. */
.avail-note{margin:0 0 var(--space-xs);padding:6px 10px;border-radius:6px;background:var(--surface-sunken);
  font:500 .875rem/1.45 var(--f-ui);color:var(--text-muted);max-width:none}

/* Addendum 4: a safety note reads as a note, not a verdict. */
.safety-note{margin:0 0 var(--space-xs);padding:8px 12px;border-left:3px solid var(--negative);border-radius:0 6px 6px 0;
  background:var(--surface-sunken);font:500 .875rem/1.5 var(--f-ui);color:var(--text)}
.safety-note a{color:var(--link);font-weight:600}

/* G3: the review block. The plate sits left of the heading lines; the argument,
   the lists and the button run the full width under it. */
.product-block > div:has(> .pimg){display:grid;grid-template-columns:200px minmax(0,1fr);
  grid-template-rows:repeat(6,auto) 1fr;column-gap:var(--space-m);align-items:start}
.product-block > div:has(> .pimg) > *{grid-column:1 / -1}
.product-block > div:has(> .pimg) > :is(h3,.rating,.role-for,.avail-note,.safety-note,.pb-meta){grid-column:2}
.product-block > div > .pimg{grid-column:1;grid-row:1 / span 7;width:200px;margin:0 0 var(--space-s)}
.product-block > div:has(> .pimg) > :is(.cta,.rating){justify-self:start;align-self:start}
.product-block h3{margin-bottom:var(--space-2xs)}
.pb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:4px 0 var(--space-s)}
.spec-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-family:var(--f-ui)}
.spec-chips li{margin:0;display:inline-flex;align-items:baseline;gap:.4em;padding:.4em .75em;border-radius:999px;
  background:var(--surface-sunken);font:600 .8125rem/1.3 var(--f-ui);color:var(--text)}
.spec-chips li span{font-weight:500;color:var(--text-muted)}
.no-buy{font:500 .875rem/1.45 var(--f-ui);color:var(--text-muted)}
/* N3: the review numeral holds a fixed width, so every name starts on one line. */
.pick-n{min-width:1.6em;font-variant-numeric:tabular-nums}

/* G7: price tier as a four-step meter; the value is in the sr-only text. */
.tier-m{display:inline-flex;font:700 .9375rem/1 var(--f-ui);letter-spacing:.08em;white-space:nowrap}
.tier-m b{color:var(--text);font-weight:700}
.tier-m b.rng{color:var(--accent-text)}
/* unfilled steps: muted ink at a lighter weight, still 4.5:1 (the web gate measured the
   first draft's rule-colour steps at 1.2:1 on 628 elements) */
.tier-m i{font-style:normal;font-weight:400;color:var(--text-muted)}

/* G3: pros and cons as lists, the authors' own phrases. */
.pros strong,.cons strong{margin-bottom:8px}
.pc-list{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.pc-list li{position:relative;margin:0;padding-left:1.15em;font:400 .9375rem/1.5 var(--f-ui)}
.pros .pc-list li::before,.cons .pc-list li::before{position:absolute;left:0;top:0;font-weight:700}
.pros .pc-list li::before{content:"+";color:var(--positive)}
.cons .pc-list li::before{content:"\2212";color:var(--negative)}

/* G4: the table. A plate or the pick's numeral beside every name; yes/no as a dot
   plus the word, never colour alone; published widths drawn to scale. */
.tname{display:flex;align-items:center;gap:12px}
.tname .pthumb{width:56px;height:56px;padding:4px}
.fact{display:inline-flex;align-items:center;gap:.45em;font-weight:600;white-space:nowrap}
.fact::before{content:"";width:.6em;height:.6em;border-radius:50%;border:2px solid currentColor;flex:none}
.fact--yes::before{background:currentColor}
.compare-table th.spec{white-space:normal;min-width:7em}
.compare-table tr.is-pick td:first-child::after{margin-left:68px}

/* G2 / P7: the phone pick bar. Sticky inside the buy run, so it shows only from the
   picks to the last review, and never covers what a keyboard user lands on. */
.pick-bar{display:none}
@media (max-width:640px){
  .pick-bar{display:flex;align-items:center;gap:10px;position:sticky;bottom:0;z-index:30;
    margin:var(--space-m) -16px 0;padding:10px 16px calc(10px + env(safe-area-inset-bottom));max-width:none !important;
    background:color-mix(in srgb, var(--surface) 94%, transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--rule)}
  .pick-bar .pthumb{width:44px;height:44px;padding:3px}
  .pick-bar .pb-text{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
  .pick-bar .role{font-size:.75rem}
  /* D147 (round 5, grader B2 S1): the link is the 44 px target and centres its text; the clamp sits on the inner
     span, so the box can be taller than two lines without showing part of a third. */
  .pick-bar .pb-name{font:600 .9375rem/1.2 var(--f-display);color:var(--text);text-decoration:none;min-height:var(--tap);
    display:flex;align-items:center}
  .pick-bar .pb-name-t{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .pick-bar .cta{flex:none;padding:.55em 1em;font-size:.8125rem}
  /* D160 (grader A3 SF-2, WCAG 2.4.11): the reserve follows the bar, which grows with the reader's text size
     (93 px at default, up to 322 px at 200% text with 1.4.12 spacing at 320 px); 84 px let it cover focused links. */
  html:has(.pick-bar){scroll-padding-bottom:calc(10.5rem + env(safe-area-inset-bottom))}
}

/* The jump bar doubles as a pick index. N11: the phone fade reads as "scrolls". */
.jump .jp{flex:none;display:inline-flex;align-items:center;gap:4px;margin-left:6px;padding-left:10px;
  border-left:1px solid var(--rule)}
.jump .jp a{min-width:var(--tap);justify-content:center;padding:0 10px;font-variant-numeric:tabular-nums}
@media (max-width:640px){
  .jump{-webkit-mask-image:linear-gradient(to right,#000 70%,transparent);mask-image:linear-gradient(to right,#000 70%,transparent)}
  .jump::after{flex:0 0 48px}
}

/* Gap 3 P4: "If you want X" as a decision grid, each ending on the pick. */
@media (min-width:641px){.if-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.if-list .if-thumb{float:left;width:44px;height:44px;padding:3px;margin:2px 12px 4px 0}
.if-go{font-weight:600;color:var(--ch-text)}

/* Gap 4.4, P3: the method paragraph lives inside the evidence detail. */
.ev-how{margin:var(--space-s) 0 0;font-size:.9375rem;line-height:1.6;color:var(--text-muted)}

/* G6: KEEP / SKIP / SPLURGE as chips in the heading text, and the framework as lanes. */
.vword{display:inline-block;vertical-align:.2em;margin-left:.35em;font:700 .75rem/1 var(--f-ui);letter-spacing:.14em;
  text-transform:uppercase;padding:.5em .8em;border-radius:4px}
.vword--keep{background:var(--green-600);color:#FFFFFF}
.vword--splurge{background:var(--gold-700);color:#FFFFFF}
.vword--skip{background:none;color:var(--text);box-shadow:inset 0 0 0 1.5px var(--text-muted)}
.ksp-lanes{list-style:none;padding:0;margin:var(--space-m) auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;font-family:var(--f-ui)}
.ksp-lanes > li{margin:0;padding:var(--space-s);border-radius:var(--radius);background:var(--surface-raised);
  border:1px solid var(--rule)}
.ksp-lanes .vword{margin:0 0 10px}
.ksp-lanes p{font:400 .9375rem/1.55 var(--f-ui);margin:0 0 8px;color:var(--text-muted)}
.ksp-lanes p.lane-lead{font-weight:600;color:var(--text)}
.ksp-lanes ul{list-style:none;margin:10px 0 0;padding:10px 0 0;border-top:1px solid var(--rule)}
.ksp-lanes ul li{margin:0;font:600 .9375rem/1.4 var(--f-ui)}
.ksp-lanes ul a{display:inline-block;padding-block:.45em;color:var(--text)}

/* G8 / P7: the couple, not a monogram. */
.byline-photo{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none;
  box-shadow:0 0 0 2px var(--surface),0 0 0 3px var(--ch)}
.who-wrote:has(> .byline-photo)::before{content:none}
.who-wrote > .byline-photo{width:64px;height:64px;grid-row:1 / span 2}

/* G10: related reads as cards, each showing the products its guide compares. */
.rel-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.rel-list li{position:relative;margin:0;display:flex;flex-direction:column;gap:8px;padding:var(--space-s);
  border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--rule);
  transition:border-color .2s ease}
.rel-list li:hover{border-color:var(--ch)}
.rel-list a{font:600 1.0625rem/1.3 var(--f-display);color:var(--text);text-decoration:none}
.rel-list a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.rel-list .gl-meta{margin-top:auto}
.gl-picks{display:flex;gap:6px;flex-wrap:wrap}
.gl-picks .pthumb{width:48px;height:48px;padding:4px}
.gl-meta{margin:0 0 var(--space-2xs);font:500 .8125rem/1.4 var(--f-ui);color:var(--text-muted)}
.gl-meta b{color:var(--text);font-weight:600}
.guide-list li .gl-picks{margin:0 0 var(--space-s)}

/* G9: /guides three-up, a stage that leaves one over opens on a wide card; a
   sticky chip bar; the count in each heading. */
.chipbar{display:flex;flex-wrap:wrap;gap:8px;margin:var(--space-s) 0 var(--space-m);font-family:var(--f-ui)}
.chipbar a{display:inline-flex;align-items:center;gap:.5em;min-height:var(--tap);padding:0 14px;border-radius:999px;
  border:1px solid var(--rule);background:var(--surface-raised);color:var(--text);font:500 .875rem/1 var(--f-ui);
  text-decoration:none}
.chipbar a span{font-weight:600;color:var(--ch-text)}
.chipbar a:hover{border-color:var(--ch)}
main:has(.stage-group) > .chipbar{position:sticky;top:var(--head-h);z-index:20;padding:8px 0;margin-bottom:0;
  background:color-mix(in srgb, var(--surface) 92%, transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.sg-n{font:500 .875rem/1 var(--f-ui);color:var(--text-muted);margin-right:auto}
.stage-group .guide-list li > .gl-thumb{aspect-ratio:16/9}

/* G9: home. The guide cards lead with their products; a shelf of Editor's picks. */
.guide-card:has(.gc-plates){padding-top:0;overflow:hidden}
.gc-plates{display:flex;justify-content:center;gap:8px;height:170px;margin:0 calc(-1 * var(--space-m)) var(--space-s);
  padding:14px;background:#FFFFFF;border-bottom:1px solid var(--rule)}
.gc-plates .pthumb{flex:0 1 auto;min-width:0;width:auto;max-width:calc((100% - 16px) / 3);height:100%;aspect-ratio:1/1;
  box-shadow:none;padding:4px}
.gc-plates .pthumb:only-child{max-width:100%}
.shelf-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(12px,1.6vw,20px)}
.shelf-grid > li{position:relative;margin:0;display:flex;flex-direction:column;gap:8px;padding:var(--space-s);
  border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--rule);font-family:var(--f-ui);
  transition:transform .2s ease, box-shadow .2s ease}
.shelf-grid > li:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.shelf-grid > li.w{--ch:light-dark(var(--wed-500),var(--blush-300));--ch-base:var(--wed-500);--ch-dark:light-dark(var(--wed-800),var(--night-600));--ch-text:light-dark(var(--wed-800),var(--blush-300))}
.shelf-grid > li.b{--ch:light-dark(var(--baby-500),var(--baby-300));--ch-base:var(--baby-500);--ch-dark:light-dark(var(--baby-800),var(--night-600));--ch-text:light-dark(var(--baby-800),var(--baby-300))}
.shelf-plate{display:block;margin:calc(-1 * var(--space-s)) calc(-1 * var(--space-s)) 4px}
.shelf-plate .ptile{height:210px;aspect-ratio:auto;border-radius:var(--radius) var(--radius) 0 0}
.shelf-plate img{display:flex;width:100%;height:210px;object-fit:contain;background:#FFFFFF;padding:18px;
  border-radius:var(--radius) var(--radius) 0 0;box-shadow:inset 0 -1px 0 var(--rule)}
.shelf-grid a{font:600 1.125rem/1.3 var(--f-display);color:var(--text);text-decoration:none}
.shelf-grid a::after{content:"";position:absolute;inset:0;border-radius:var(--radius)}
.shelf-grid .pimg-src{margin:0}
.shelf-go{margin-top:auto;font:600 .875rem/1 var(--f-ui);color:var(--ch-text)}
.shelf-go::after{content:" \2192"}
.diptych figcaption a{color:inherit;text-decoration:none;display:block}
.diptych figcaption a:hover{text-decoration:underline;text-decoration-thickness:1px}

/* G10: stage pages. The decisions in order, then the neighbouring stages. */
.stage-steps{list-style:none;margin:var(--space-l) 0 var(--space-m);padding:var(--space-s) 0 0;display:grid;
  grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--space-s);counter-reset:s;
  border-top:2px solid var(--ch);font-family:var(--f-ui)}
.stage-steps li{counter-increment:s;margin:0;display:flex;flex-direction:column;gap:4px;font-size:.9375rem;line-height:1.45}
.stage-steps li::before{content:counter(s,decimal-leading-zero);font:italic 400 var(--step-3)/1 var(--f-display);
  color:var(--ch-text);font-variation-settings:"SOFT" 100,"WONK" 1;margin-bottom:4px}
.ss-when{font:600 .75rem/1.3 var(--f-ui);letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted)}
.stage-steps a,.ss-what{font:600 1.0625rem/1.3 var(--f-display);color:var(--text)}
.stage-steps a{text-decoration-color:var(--ch);display:inline-flex;align-items:center;min-height:var(--tap)}
.stage-pager{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin:var(--space-xl) 0 var(--space-s)}
.stage-pager .stage-card{min-height:200px}
.stage-pager [data-rel="next"]{grid-column:2;text-align:right}
.sp-title{display:block;font:600 var(--step-2)/1.15 var(--f-display);color:#FFFFFF}

/* /start: the four stages on one line, the gap between the chapters named. */
.ribbon{list-style:none;padding:0;margin:var(--space-m) 0 var(--space-s);display:flex;align-items:flex-start;position:relative;
  font-family:var(--f-ui)}
.ribbon::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--rule)}
.ribbon li{position:relative;flex:1 1 0;margin:0;padding-top:26px;font:600 .9375rem/1.3 var(--f-ui)}
.ribbon li::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;
  background:light-dark(var(--wed-500),var(--blush-300));box-shadow:0 0 0 4px var(--surface)}
.ribbon li.b::before{background:light-dark(var(--baby-500),var(--baby-300))}
.ribbon li a{color:var(--text);display:inline-block;padding-block:.35em}
.ribbon li.gap{flex:1.4 1 0;padding-top:22px}
.ribbon li.gap::before{content:none}
.ribbon li.gap span{display:block;font:italic 400 1rem/1.3 var(--f-display);color:var(--text-muted);text-align:center;
  border-top:2px dashed var(--text-muted);padding-top:8px;margin-top:-15px}
/* P8: stage-card titles share one line whatever the length of the text under them. */
.stage-card:has(img) .stage-body p{min-height:4.35em}

/* /about: the numbers, and the correction as a before and after. */
.about-nums{grid-template-columns:repeat(4,minmax(0,1fr));margin-block:var(--space-l);max-width:none !important;
  width:100%;box-sizing:border-box} /* D157: the strip spans the article column (its edge sat 12.8 px off any column line) */
.then-now{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:var(--space-s) 0 var(--space-m);
  font-family:var(--f-ui);max-width:var(--measure)}
.then-now > div{padding:var(--space-s);border-radius:var(--radius);border:1px solid var(--rule);background:var(--surface-raised)}
.then-now .now{box-shadow:inset 0 0 0 2px var(--accent)}
.tn-label{display:block;font:600 .75rem/1.3 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:8px}
.then-now p{margin:0;font:400 1rem/1.55 var(--f-ui)}
.then-now s{font:italic 400 1.25rem/1.3 var(--f-display);color:var(--text-muted);text-decoration-color:var(--negative);
  text-decoration-thickness:2px}
.tn-tier{display:inline-block;margin:0 6px 6px 0;padding:.3em .8em;border-radius:999px;font:600 .8125rem/1.2 var(--f-ui);
  color:var(--accent);box-shadow:inset 0 0 0 1.5px var(--accent)}

/* /how-we-review: may and may not, and a post's anatomy. */
.tier-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;border-top:0;padding-top:0}
.tier-cards > div{padding:var(--space-s);border-radius:var(--radius-s);background:var(--surface-sunken)}
.tier-cards > div.now{background:var(--surface-raised);box-shadow:inset 0 0 0 2px var(--accent)}
.tier-cards dt{font:600 var(--step-1)/1.2 var(--f-display);margin:0 0 6px;white-space:normal}
.tier-cards dd{margin:0;color:var(--text-muted)}
.tier-cards dd.tc-now{font:600 .75rem/1.3 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:6px}
@media (max-width:820px){.tier-cards{grid-template-columns:1fr}}
.maynot{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:var(--space-s) 0 var(--space-m);
  max-width:var(--measure);font-family:var(--f-ui)}
.maynot > div{padding:var(--space-s);border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--rule)}
.maynot h3{font-size:var(--step-2);margin:0 0 10px}
.maynot ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.maynot li{margin:0;padding:.35em .75em;border-radius:999px;background:var(--surface-sunken);font-size:.875rem}
.maynot .fact--yes{color:var(--positive)}
.maynot .fact--no{color:var(--negative)}
/* L9-4 (2026-09-29): .fact is nowrap, so the longest "May say" phrase drew a 379px pill on a 320px
   phone and the whole page scrolled sideways. Inside the grid the phrase wraps; the pill never
   grows past its column. apply_v40 --verify holds this rule. */
.maynot li{max-width:100%;min-width:0}
.maynot .fact{white-space:normal;overflow-wrap:break-word}
.anatomy{margin:var(--space-m) 0;max-width:var(--measure)}
.anatomy svg{display:block;width:100%;height:auto;font-family:var(--f-ui)}
.an-page{fill:var(--surface-raised);stroke:var(--rule);stroke-width:2}
.an-ink{fill:var(--surface-deep)}
.an-photo{fill:var(--surface-deep)}
.an-box{fill:var(--surface-sunken)}
.an-accent{stroke:var(--ch);stroke-width:3}
.an-cards rect{fill:var(--surface-sunken);stroke:var(--rule);stroke-width:1.5}
.an-plates rect{fill:#FFFFFF;stroke:var(--rule)}
.an-n circle{fill:var(--ch-dark)}
.an-n text{fill:#FFFFFF;font:600 15px var(--f-ui);text-anchor:middle}
.anatomy-key{margin:var(--space-s) 0 0;padding-left:1.4em;font:400 .9375rem/1.55 var(--f-ui)}
.anatomy-key li{margin-bottom:6px}

/* /contact: the form beside what happens next. */
.contact-grid{display:grid;grid-template-columns:minmax(0,36rem) minmax(0,1fr);gap:var(--space-xl);align-items:start}
.contact-grid .contact-form{margin-top:0}
.contact-side{padding:var(--space-m);border-radius:var(--radius);background:var(--surface-raised);border:1px solid var(--rule)}
.contact-side h2{font-size:var(--step-2);margin:0 0 var(--space-s)}
.contact-steps{list-style:none;margin:0;padding:0;counter-reset:c;display:grid;gap:var(--space-s);font-family:var(--f-ui)}
.contact-steps li{counter-increment:c;margin:0;display:grid;grid-template-columns:3.2rem 1fr;gap:4px 10px;font-size:.9375rem;line-height:1.5}
.contact-steps li::before{content:counter(c,decimal-leading-zero);grid-row:1 / span 2;font:italic 400 var(--step-3)/1 var(--f-display);
  color:var(--accent);font-variation-settings:"SOFT" 100,"WONK" 1}
.contact-steps b{display:block}

/* N1: the Researched highlight takes the container's corner. */
.tier.now{border-radius:0 var(--radius) var(--radius) 0}
/* /wedding hero: the woman's forehead stays in the 4:3 frame. */
.page-hero img[src*="Nvn0GxuiZNk"]{object-position:60% 0%}

@media (max-width:1000px){
  .shelf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:820px){
  .product-block > div:has(> .pimg){grid-template-columns:168px minmax(0,1fr)}
  .product-block > div > .pimg{width:168px}
  .tier.now{border-radius:0 0 var(--radius) var(--radius)}
  .ksp-lanes{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr;gap:var(--space-l)}
  .about-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-nums div:nth-child(3){border-left:0}
  .about-nums div:nth-child(n+3){border-top:1px solid var(--rule)}
}
@media (max-width:640px){
  .product-block > div:has(> .pimg){display:flex;flex-direction:column}
  .product-block > div > .pimg{order:-1;width:min(100%,240px);align-self:center;margin:0 auto var(--space-s)}
  .glance-card:has(> .pimg){display:grid;grid-template-columns:88px minmax(0,1fr);column-gap:12px;row-gap:4px;align-items:start}
  .glance-card:has(> .pimg) > *{grid-column:2}
  .glance-card:has(> .pimg) > :is(.vword,.gbadge,.gavail,.glance-n){justify-self:start}
  .glance-card > .pimg{grid-column:1;grid-row:1 / span 5;margin:0}
  .glance-card .pimg .ptile{width:88px;height:88px;border-radius:var(--radius-s)}
  .glance-card .pimg .ptile::before{font-size:2rem}
  .glance-card .pimg .ptile::after{font-size:.75rem;letter-spacing:0;padding:0 4px}
  .glance-card .pimg img{width:88px;height:88px;padding:6px;border-radius:var(--radius-s);
    box-shadow:inset 0 0 0 1px var(--rule)}
  .glance-card .gmeta{grid-column:1 / -1}
  .rel-list,.shelf-grid{grid-template-columns:1fr}
  .shelf-grid{grid-auto-flow:column;grid-auto-columns:72%;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;padding-bottom:8px}
  .shelf-grid > li{scroll-snap-align:start}
  .guide-grid{grid-auto-flow:column;grid-auto-columns:82%;grid-template-columns:none;overflow-x:auto;
    scroll-snap-type:x mandatory;padding-bottom:8px}
  .guide-grid > li{scroll-snap-align:start}
  .stage-steps{grid-auto-flow:row;grid-auto-columns:auto}
  .stage-steps li{display:grid;grid-template-columns:2.6rem 1fr;align-items:baseline;column-gap:8px}
  .stage-steps li::before{grid-row:1 / span 2;margin:0}
  .stage-pager{grid-template-columns:1fr}
  .stage-pager [data-rel="next"]{grid-column:auto}
  .ribbon{flex-direction:column;gap:14px;padding-left:26px}
  .ribbon::before{left:7px;right:auto;top:0;bottom:0;width:2px;height:auto}
  .ribbon li{padding:0}
  .ribbon li::before{left:-26px;top:2px}
  .ribbon li.gap{padding:0}
  .ribbon li.gap span{border-top:0;text-align:left;margin:0;padding:0}
  .then-now,.maynot{grid-template-columns:1fr}
}

/* Dark. Product plates stay white, like the print mat, and are never filtered: a
   maker's photograph is shown as the maker made it. */
@media (prefers-color-scheme: dark){
  .pimg img,.pthumb,.shelf-plate img{filter:none}
  .pimg img{box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 18px -10px rgba(0,0,0,.7)}
  .role--pick,.rating.role--pick{background:var(--ch-text);color:var(--night-900)}
  .vword--keep{background:var(--positive);color:var(--night-900)}
  .vword--splurge{background:var(--gold-500);color:var(--night-900)}
  .pros strong::before,.cons strong::before{color:var(--night-900)}
  .an-n text{fill:var(--night-900)}
  .an-n circle{fill:var(--ch-text)}
  /* P10: the founders' print keeps its cream mat. */
  .page-hero.portrait,.page-head .page-hero.portrait{background:var(--cream-300)}
  .band figure{background:var(--cream-300)}
  .page-hero.portrait figcaption,.band figcaption{color:var(--ink-500)}
}

/* /start: the tiers specimen keeps its distance from the next line. */
main > .evidence.tiers{margin-bottom:var(--space-m)}

/* ==========================================================================
   v4.1, 2026-09-27. Round 11: critic r10 and content audit r10.
   ========================================================================== */
/* B3, P2: the phone pick bar never clips. The button always reads "Check price" (the
   retailer is in its accessible name), the product name takes up to two lines. */
@media (max-width:640px){
  .pick-bar .pb-name{font-size:.875rem;line-height:1.25}
  .pick-bar .pb-name-t{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .pick-bar .role{white-space:nowrap;overflow:visible;flex:none;align-self:flex-start}
  .pick-bar .cta{padding:.55em .85em}
  /* P1: the bar's own background no longer fades, so text cannot show through; a fade
     painted on top of the last chip says the bar scrolls. */
  .jump{-webkit-mask-image:none;mask-image:none}
  .jump::after{content:"";position:sticky;right:0;flex:0 0 48px;margin-left:-48px;
    background:linear-gradient(to right,transparent,var(--surface) 75%);pointer-events:none}
}
/* P4: every glance footer is the same shape: tier, then "Check price", then the maker
   (if the product is sold by its maker) on a small line of its own. */
.glance-card .gmeta{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:2px}
.gbuy{flex-direction:column;align-items:flex-start;min-height:var(--tap);justify-content:center}
.gbuy::after{content:none}
.gbuy-t::after{content:" \2192"}
.gbuy-at{font:500 .75rem/1.3 var(--f-ui);color:var(--text-muted)}
/* N2: a price range reads as a range. */
.tier-m b.rng::before{content:"\2013";color:var(--text-muted);margin:0 .1em;font-weight:400}
/* N5: related reads carry their chapter and a read cue, like the hub cards. */
.rel-list li.w,.rel-list li.b{padding-top:calc(var(--space-s) + 18px)}
.rel-list li.w::before,.rel-list li.b::before{position:absolute;top:var(--space-s);left:var(--space-s);
  font:600 .75rem/1 var(--f-ui);letter-spacing:.14em;text-transform:uppercase}
.rel-list li.w::before{content:"Wedding";color:light-dark(var(--wed-800),var(--blush-300))}
.rel-list li.b::before{content:"Baby";color:light-dark(var(--baby-800),var(--baby-300))}
.rel-list li::after{content:"Read the comparison \2192";margin-top:auto;font:600 .8125rem/1 var(--f-ui);color:var(--ch-text)}
.rel-list .gl-meta{margin-top:0}
/* D132 (2026-10-06): `.related p{font-size:0}` (written for an older link list) also matched this meta line,
   so "4 picks, Editor's pick: ..." rendered at 0 px in every related-reads card. Restated at the size
   `.gl-meta` declares, with enough specificity to win. */
.related .rel-list .gl-meta{display:block;font-size:.8125rem}
/* The Doona+: one Handled pick in a Researched guide, said where you read it. */
.ev-mixed{margin:10px 0 0;font:400 .9375rem/1.55 var(--f-ui);color:var(--text)}
.ev-mixed strong,.ev-pick strong{font-weight:600;color:var(--accent)}
.ev-pick{margin:0 0 var(--space-xs);padding:6px 10px;border-radius:6px;background:var(--surface-sunken);
  font:500 .875rem/1.45 var(--f-ui);color:var(--text)}
.recall-note{font:400 .875rem/1.55 var(--f-ui);color:var(--text-muted);margin:var(--space-s) 0}
.recall-note a{color:var(--link)}
/* /about: the dated correction. */
.corr-date{font:600 .75rem/1.3 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:.4em}
/* D78: the everyday shoe picks, a second list after the guide's own picks, set off by a rule
   so it reads as its own short guide; its glance cards run two to a row at the 46rem column. */
.everyday{margin-top:var(--space-xl);padding-top:var(--space-l);border-top:1px solid var(--rule)}
.everyday > h2{margin-top:0}
.everyday-intro{margin:0 0 var(--space-m);max-width:var(--measure)}
.everyday .glance-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));margin-bottom:var(--space-l)}
/* v4.2 registry + shop note (apply_v42_registry.py) */
.hub-note{max-width:46rem;margin:var(--space-l) 0;padding:var(--space-m);background:var(--surface-raised);
  border:1px solid var(--rule);border-radius:var(--radius)}
.hub-note h2{margin:0 0 .4em;font-size:var(--step-2);line-height:1.2}
.hub-note p{margin:0 0 var(--space-s);max-width:var(--measure)}
.hub-note p:last-child{margin-bottom:0}
.hub-note .paid{font:400 .875rem/1.5 var(--f-ui);color:var(--text-muted)}
.hub-note .shop-icon{display:block;width:56px;height:56px;border-radius:50%;margin:0 0 var(--space-xs)}
/* end v4.2 */
/* v4.3 evidence fine print (apply_v43_evidence_footnote.py) */
.fineprint{max-width:var(--measure);margin:var(--space-xl) 0 var(--space-m);padding-top:var(--space-s);
  border-top:1px solid var(--rule)}
.fineprint .evidence{max-width:none;margin:0;padding:0;background:none;border:0;border-radius:0}
.fineprint .evidence-tier{margin:0 0 6px;font-size:.75rem;letter-spacing:.12em}
.fineprint .evidence-tier strong{background:none;color:var(--text);padding:0;font-size:.8125rem}
.fineprint .evidence :is(p,dt,dd,span,a){font-size:.8125rem;line-height:1.55}
.fineprint .evidence :is(p,dd,.ev-note){color:var(--text-muted)}
.fineprint .ev-more summary{font-size:.8125rem;color:var(--text-muted)}
.anatomy-note{margin:var(--space-s) 0 0;font:400 .875rem/1.55 var(--f-ui);color:var(--text-muted)}
/* end v4.3 */
/* D133 (2026-10-06, blind check SF-4): 44 px tap targets site-wide at phone width. Each of these links measured
   23 to 38 px tall (or 33 to 39 px wide in the footer) at a true 390 px. The glance-card name keeps its whole-card
   ::after target; its own box now also reaches 44 px, centered so a one-line name carries no blank second line. */
.pick-line a,.inline-disclosure a,.evidence-more a,.lane li a{display:inline-flex;align-items:center;min-height:var(--tap)}
.shelf-grid > li > a{display:flex;align-items:center;min-height:var(--tap)}
.foot-links a{min-width:var(--tap);text-align:center}
.crumbs a{min-width:var(--tap);justify-content:center}
.ribbon li a{display:inline-flex;align-items:center;min-height:var(--tap)}
@media (max-width:640px){
  .glance-card a.gname{min-height:var(--tap);align-items:center}
}
/* D138 (2026-10-06): a guide-list title that fits on one line was 27 px tall at desktop widths (the /baby card that
   spans the last row). The whole card is already the target through its ::after; the title's own box now reaches
   44 px too, its text centered, so a one-line title gains no blank line. */
.guide-list li a{min-height:var(--tap);display:flex;align-items:center}

/* D149 (round 5, grader B2 S5): at 200% text a pill label wraps inside its card instead of pushing the page wide. */
.role,.rating.role,.glance-card .gbadge{white-space:normal;max-width:100%;width:fit-content}
/* D149, continued: the components that still widened a phone page at 200% text with WCAG 1.4.12 spacing.
   Grid and flex children may shrink below their longest word, and long names break inside the card. */
.pros-cons{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:640px){.pros-cons,.proof-strip,.contact-grid{grid-template-columns:minmax(0,1fr)}
  .proof-strip div{grid-template-columns:3.2rem minmax(0,1fr)}}
.glance-card a.gname,.proof-strip span,.faq summary,.pc-list li,.pick-bar .pb-name-t{overflow-wrap:break-word}
/* D165 (round 7 check): the product name is a flex box, and its text is an anonymous flex item that min-width cannot
   reach, so break-word left "Professional" 215 px wide in a 122 px box and the phone page scrolled sideways at 200%
   text (29 findings, all SIDEWAYS). anywhere lets that one box shrink; the line still wraps at spaces first, so a
   word splits only when it alone is wider than the line. */
.glance-card a.gname,.faq summary{overflow-wrap:anywhere}
.pick-bar .role{white-space:normal;max-width:100%}
.ptile{overflow:hidden;min-width:0}
.ptile::before,.ptile::after{max-width:100%;overflow-wrap:break-word;text-align:center}
@media (max-width:640px){
  /* when the text is enlarged the phone pick bar wraps its button under the name instead of widening the page;
     6rem grows with the reader's text size, so at the default size the bar stays one row */
  .pick-bar{flex-wrap:wrap}
  .pick-bar .pb-text{flex:1 1 0;min-width:6rem}
}
/* At any width: the contact form and its side panel stack when the text is large (24rem grows with it), the
   numbered steps, the evidence tiers and the verdict words shrink or wrap inside their boxes. */
.contact-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,24rem),1fr))}
.contact-steps li{grid-template-columns:3.2rem minmax(0,1fr)}  /* D166: was 2.4rem; "02" is 41 px wide at 1280 and wrapped to "0" over "2" */
@media (max-width:640px){.tiers{grid-template-columns:minmax(0,1fr)}}
.tier .tier-tag,.vword,.contact-steps b{max-width:100%;overflow-wrap:break-word}
.cta,a.cta{max-width:100%;text-align:center}
/* Wider than a phone the main menu wraps to a second line when the text is large, instead of running off the page.
   On a phone every box in the page body may shrink below its longest word (zero-specificity :where, so any
   explicit minimum still wins), and text breaks inside it. */
@media (min-width:641px){header.site .wrap{flex-wrap:wrap}nav.main{flex-wrap:wrap;min-width:0}}
@media (max-width:640px){
  /* D155: .rel-list only. The home shelf scrolls sideways on its own column flow (grid-template-columns:none);
     an explicit track here collapsed its first card to 34 px (grader B3 B1). layout_guard.py now fails that. */
  .rel-list{grid-template-columns:minmax(0,1fr)}
}
.rel-list a,.spec-chips li,.recall-note,.pb-meta{overflow-wrap:break-word}
.spec-chips li{max-width:100%}
main :where(p,li,dd,dt,figcaption,summary,blockquote){overflow-wrap:break-word}
/* D158 (round 6, layout guard): at 320 px with 200% text the pick numeral took the review heading's width and the
   product name ran down a 77 px strip. The numeral still sits left of the name; when the name cannot keep 8rem
   (which grows with the reader's text size) beside it, the name moves under the numeral instead. */
.product-block h3{display:flex;flex-wrap:wrap;align-items:baseline}
.product-block h3 > span:not(.pick-n){flex:1 1 8rem;min-width:0}
/* D158: labels break between words, never inside one; card text around them may still break a long word. */
.role,.rating,.glance-card .gbadge,.gavail{overflow-wrap:break-word}
/* D159 (grader A3 SF-1, WCAG 1.4.4): menu words never shrink into each other. On a phone the menu already scrolls
   sideways; wider, it wraps (D149). */
nav.main a{flex-shrink:0}
/* end D148 / D149 */
/* D162 (round 7, grader B4 S1 and S2): card grids are sized by their own container in rem, so they drop to fewer
   columns as the reader's text grows (rem follows the root text size; a media query in px does not), and they end on
   full rows for any count. Words break only between words: overflow-wrap is break-word everywhere, which splits a
   word only when the word alone is wider than its line. Replaces the D148 and D156 width rules.
   Guide lists (hubs, stage pages): one column under 31rem; two up from 31rem, with an odd count laid out as one
   column below 42rem and ending on a row of three from 42rem. /guides groups: three up from 47rem (one left over ends
   on two rows of two, two left over on a row of two). Glance grids: one column under 23rem; two across from 23rem
   for an even count; three across with the same re-deal from 34rem; one row of up to five (six as 3+3, seven as 4+3,
   eight as 4+4) from 58rem. Related reads: three across from 41rem with the same re-deal, one column below. */
main :where(div,p,li,a,span,b,strong,em,section,article,ul,ol,dl,dd,dt,figure,figcaption,h2,h3,h4,aside,nav,details,summary,table){min-width:0}
/* break-word cannot shrink a box below its longest word, so a text box never grows past its parent (zero
   specificity: any explicit max-width, such as the reading measure, still wins) */
main :where(h1,h2,h3,h4,p,li,dd,dt,figcaption,summary,blockquote){max-width:100%}
main:has(> .guide-list),.stage-group,.glance,.related{container:cards / inline-size}
@media (max-width:640px){.glance .glance-grid{grid-template-columns:minmax(0,1fr)}} /* phones: one column of row cards (D156) */
@media (min-width:641px){
  .guide-list{grid-template-columns:minmax(0,1fr);grid-auto-flow:row}
  .guide-list > li{grid-column:auto}
  @container cards (width >= 31rem){
    .guide-list{grid-template-columns:repeat(6,minmax(0,1fr))}
    .guide-list > li{grid-column:span 3}
    .guide-list > li.lead,.guide-list > li:only-child{grid-column:1 / -1}
  }
  @container cards (31rem <= width < 42rem){
    .guide-list:has(> li.lead):has(> li:last-child:nth-child(even)),
    .guide-list:not(:has(> li.lead)):has(> li:last-child:nth-child(odd)){grid-template-columns:minmax(0,1fr)}
    .guide-list:has(> li.lead):has(> li:last-child:nth-child(even)) > li,
    .guide-list:not(:has(> li.lead)):has(> li:last-child:nth-child(odd)) > li{grid-column:auto}
  }
  @container cards (width >= 42rem){
    :not(.stage-group) > .guide-list:has(> li.lead):has(> li:last-child:nth-child(even)) > li:nth-last-child(-n+3):not(.lead),
    :not(.stage-group) > .guide-list:not(:has(> li.lead)):has(> li:last-child:nth-child(odd)) > li:nth-last-child(-n+3):not(:only-child){grid-column:span 2}
  }
  @container cards (42rem <= width < 47rem){
    .stage-group > .guide-list:has(> li:last-child:nth-child(odd)) > li:nth-last-child(-n+3):not(:only-child){grid-column:span 2}
  }
  @container cards (width >= 47rem){
    .stage-group > .guide-list > li{grid-column:span 2}
    .stage-group > .guide-list:has(> li:last-child:nth-child(3n+1)) > li:nth-last-child(-n+4):not(:only-child),
    .stage-group > .guide-list:has(> li:last-child:nth-child(3n+2)) > li:nth-last-child(-n+2){grid-column:span 3}
    .stage-group > .guide-list > li:only-child{grid-column:1 / -1}
  }

  .glance .glance-grid{grid-template-columns:minmax(0,1fr)}
  .glance .glance-grid > li{grid-column:auto}
  @container cards (23rem <= width < 34rem){
    .glance .glance-grid:has(> li:last-child:nth-child(even)){grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @container cards (34rem <= width < 58rem){
    .glance .glance-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
    .glance .glance-grid > li{grid-column:span 2}
    .glance .glance-grid:has(> li:last-child:nth-child(3n+1)) > li:nth-last-child(-n+4),
    .glance .glance-grid:has(> li:last-child:nth-child(3n+2)) > li:nth-last-child(-n+2){grid-column:span 3}
    .glance .glance-grid > li:only-child{grid-column:1 / -1}
  }
  @container cards (width >= 58rem){
    .glance .glance-grid:has(> li:last-child:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}
    .glance .glance-grid:has(> li:last-child:nth-child(3)),
    .glance .glance-grid:has(> li:last-child:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}
    .glance .glance-grid:has(> li:last-child:nth-child(4)),
    .glance .glance-grid:has(> li:last-child:nth-child(8)){grid-template-columns:repeat(4,minmax(0,1fr))}
    .glance .glance-grid:has(> li:last-child:nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
    .glance .glance-grid:has(> li:last-child:nth-child(7)){grid-template-columns:repeat(12,minmax(0,1fr))}
    .glance .glance-grid:has(> li:last-child:nth-child(7)) > li{grid-column:span 3}
    .glance .glance-grid:has(> li:last-child:nth-child(7)) > li:nth-child(n+5){grid-column:span 4}
  }

  .rel-list{grid-template-columns:minmax(0,1fr)}
  @container cards (width >= 41rem){
    .rel-list{grid-template-columns:repeat(6,minmax(0,1fr))}
    .rel-list > li{grid-column:span 2}
    .rel-list:has(> li:last-child:nth-child(3n+1)) > li:nth-last-child(-n+4):not(:only-child),
    .rel-list:has(> li:last-child:nth-child(3n+2)) > li:nth-last-child(-n+2){grid-column:span 3}
    .rel-list > li:only-child{grid-column:1 / -1}
  }
}
/* D164: the contact page's numbered steps put the numeral above the text when the side panel is narrow for the
   reader's text size (320 px at 200% text split "some/thing" in a 100 px column). */
.contact-side{container:side / inline-size}
@container side (width < 16rem){.contact-steps li{display:block}.contact-steps li::before{display:block;margin:0 0 4px}}
/* D163 (round 7, grader B4 S3): the short answer's text keeps the reading measure (the box keeps its width). */
.verdict .v-more,.verdict p:not(:has(.v-more)){max-width:var(--measure)}
/* the buy-run's prose ran a median 84 characters a full line: it keeps the measure, its left edge on the column */
body.side-wed .buy-run > p,body.side-baby .buy-run > p,body.side-wed article > p:not(.post-head),body.side-baby article > p:not(.post-head){max-width:var(--measure);margin-inline:max(0px, calc((100% - 46rem) / 2)) auto}