/* HADEN — structural clone of us.usecadence.com.
   Layout numbers come from docs/cadence-teardown.md, measured in a browser.
   Typography and colour are ours, by instruction. */

:root{
  /* colour — four values, nothing else */
  --ink:#0F0F0E;
  --white:#FFFFFF;
  --neutral:#F5F4F2;
  --oxblood:#6E1622;
  --ink-2:rgba(15,15,14,.72);   /* 7.3:1 on white  */
  --ink-3:rgba(15,15,14,.60);   /* 4.8:1 on white  */
  --rule:rgba(15,15,14,.14);
  --white-2:rgba(255,255,255,.72);
  --rule-inv:rgba(255,255,255,.22);
  --slot:#E8E6E3;

  --display:"Playfair Display",Georgia,serif;
  --text:"Archivo",system-ui,-apple-system,sans-serif;

  /* type — ours. Cadence runs 10–48px; our floor is 1rem, so the small end diverges. */
  --t-display:clamp(2.25rem,6.6vw,5rem);
  --t-h2:clamp(1.75rem,3.2vw,2.75rem);
  --t-h3:1.375rem;
  --t-body:1.0625rem;          /* 17px — the brief's floor */
  --t-lede:1.1875rem;
  --t-label:1rem;              /* nothing below 1rem anywhere */

  /* layout — Cadence's measured frame */
  --maxw:1440px;
  --gutter:20px;               /* 390: measured 20 */
  --section:20px;              /* 390: mode 20/20 */
  --section-lg:40px;
  --grid-gap:20px;
  --hdr-h:72px;                /* measured 72 at both widths */
}
@media (min-width:768px){
  :root{ --gutter:40px; --section:50px; --section-lg:80px; --grid-gap:32px }
}

*,*::before,*::after{box-sizing:border-box;border-radius:0}   /* exceptions: the section cards
   (Why Haden, the science card, the Haden100), 8px by founder instruction — see docs/design-system.md */
html{font-size:16px;-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} }
body{margin:0;background:var(--white);color:var(--ink);
  font-family:var(--text);font-size:var(--t-body);line-height:1.6;letter-spacing:0;
  font-synthesis:none;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input{font:inherit;color:inherit}
ul{list-style:none;margin:0;padding:0}
p{margin:0}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.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}
.gotcha{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.skip{position:absolute;left:var(--gutter);top:-4rem;z-index:100;background:var(--ink);color:var(--white);padding:.6rem 1rem;transition:top 120ms ease}
.skip:focus{top:.6rem}
:focus-visible{outline:2px solid currentColor;outline-offset:3px}

/* ── type roles — tracking is size-specific, per the brief ─────────────── */
h1,h2,h3,.display{font-family:var(--display);font-weight:400;font-optical-sizing:auto;margin:0}
.display{font-size:var(--t-display);line-height:1.04;letter-spacing:-.02em}
h2{font-size:var(--t-h2);line-height:1.08;letter-spacing:-.02em}
h3{font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em}
.lede{font-size:var(--t-lede);line-height:1.5;color:var(--ink-2);max-width:46ch}
.note{font-size:var(--t-body);line-height:1.5;color:var(--ink-3);max-width:50ch}
.eyebrow{font-family:var(--text);font-size:var(--t-label);font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);margin:0 0 1rem}
.eyebrow-inv{color:var(--white-2)}
.lede-inv,.note-inv{color:var(--white-2)}
.club{white-space:normal}
.club-stem,.club-num{white-space:nowrap}
.club-num{font-family:var(--display);font-style:italic;font-weight:400;letter-spacing:inherit}

/* ── buttons — Cadence: uppercase, radius 0 ────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.35em;
  font-family:var(--text);font-size:var(--t-label);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;padding:.85rem 1.4rem;min-height:48px;
  border:1px solid transparent;cursor:pointer;background:none;
  transition:transform 100ms ease-out,background-color 140ms ease,color 140ms ease}
.btn:active{transform:scale(.97)}
.btn-accent{background:var(--oxblood);color:#fff;border-color:var(--oxblood)}
.btn-accent:hover{background:#581019}
.btn-ghost{border-color:var(--rule);color:var(--ink-3);cursor:not-allowed}
.btn-line{border-color:var(--rule-inv);color:var(--white)}
.btn-line:hover{background:var(--white);color:var(--ink)}
@media (prefers-reduced-motion:reduce){ .btn:active{transform:none} }

/* ── image slots — empty by instruction. No src, nothing loaded. ───────── */
.slot{position:relative;background:var(--slot);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:.5rem;padding:1.25rem;
  color:var(--ink-3);overflow:hidden}
.slot::before{content:attr(data-slot);font-family:var(--display);font-weight:400;
  font-size:clamp(3rem,7vw,6rem);line-height:1;letter-spacing:-.02em;color:var(--ink)}
.slot::after{content:attr(data-meta);display:block;max-width:40ch;
  font-family:var(--text);font-size:var(--t-label);line-height:1.45;letter-spacing:0;color:var(--ink-3)}

/* ── privacy page — one reading column, the site's tokens, nothing new ─── */
.legal{padding-block:calc(var(--hdr-h) + var(--section-lg)) var(--section-lg)}
.legal-in{max-width:calc(62ch + 2 * var(--gutter))}
.legal-h{font-size:clamp(2.25rem,4.6vw,3.5rem);line-height:1.06;letter-spacing:-.02em}
.legal-date{margin-top:1rem;font-size:var(--t-label);color:var(--ink-3)}
.legal .lede{margin-top:2rem;max-width:none}
.legal h2{font-size:1.5rem;line-height:1.2;margin-top:2.75rem;padding-top:1.25rem;border-top:1px solid var(--rule)}
.legal p{margin-top:.9rem}
.legal-list{margin-top:.9rem}
.legal-list li{padding:.6rem 0 .6rem 1.25rem;position:relative}
.legal-list li::before{content:"";position:absolute;left:0;top:1.35em;width:.5rem;height:1px;background:var(--ink)}
.legal a{color:inherit;text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:1px}

/* ── header — plain text over the hero, nothing behind it ──────────────────
   No container: no fill, border, shadow or radius. Standard page width and gutters (.wrap).
   Grid 1fr | auto | 1fr, so the wordmark sits on the page's centre line, not the centre of the
   space the links leave. Absolute over the hero, so it scrolls away with it: with nothing behind
   the type, a fixed nav would put white text on the white sections. */
.hdr{position:absolute;inset:0 0 auto;z-index:50;color:var(--white)}
.hdr--ink{color:var(--ink)}                    /* pages with no hero behind the nav */
.hdr-bar{height:var(--hdr-h);display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;color:inherit}

/* the four items: the three links and the CTA are one set — same size, weight, colour, tracking,
   hover and focus. Only the wordmark is set differently. */
.hdr-links{grid-column:1;justify-self:start;display:flex;align-items:center;gap:2rem}
.hdr-links a,.hdr-cta{display:inline-block;line-height:44px;   /* not flex: flex drops the space
     between "Join" and the club mark (it rendered "JOINTHE") */
  font-family:var(--text);font-size:var(--t-label);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:inherit;
  text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.35em;
  text-decoration-color:transparent;transition:text-decoration-color 200ms ease-out}
.hdr-links a:hover,.hdr-cta:hover{text-decoration-color:currentColor}
.hdr-links a:focus-visible,.hdr-cta:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.hdr-cta{grid-column:3;justify-self:end}
.hdr-cta .club{line-height:1}   /* Playfair's metrics in a 44px line pushed the baseline down 1px */
.brand{grid-column:2;justify-self:center;font-family:var(--display);font-size:1.75rem;line-height:1;
  letter-spacing:-.02em;color:inherit;text-decoration:none;
  --brand-dy:-.5px;transform:translateY(var(--brand-dy))}   /* optical trim: Playfair's cap-to-baseline
   centre sat .5-.75px below the caps-text links; measured on drawn pixels */
/* Phones: links go (the footer carries every anchor); wordmark centred, CTA right. */
@media (max-width:767px){
  .hdr-links{display:none}
  .brand{font-size:1.5rem;--brand-dy:-1px}   /* at 1.5rem it sat .75-1.25px low */
}
@media (max-width:479px){ .hdr-cta .club{display:none} }   /* "Join" alone fits beside the wordmark */
@media (prefers-reduced-motion:reduce){ .hdr-links a,.hdr-cta{transition:none} }

/* ── 1. hero — one screen tall ─────────────────────────────────────────────
   Was min-height:1000px (Cadence's measured hero). That was the clipping bug: the copy is
   anchored to the bottom of the hero BOX, and on any screen shorter than ~1000px the box's
   bottom is below the fold — at 1440x900 the headline ended at y 904 and the subline at 950,
   so descenders and the subline were cut by the viewport, not by overflow. The hero is now
   exactly one screen (svh, so mobile browser chrome cannot push it under either), with the
   copy a fixed padding above the visible bottom. 560px floor for very short landscape screens. */
.hero{position:relative;min-height:max(560px,100vh);min-height:max(560px,100svh);display:flex;
  flex-direction:column;justify-content:flex-end;padding-bottom:var(--section-lg);background:var(--neutral)}
@media (min-width:768px){ .hero{padding-bottom:var(--section)} }
/* the headline is ONE line at every width: sized to the space between the gutters. The line
   measures 11.83em (Chromium) / 11.88em (WebKit) in Playfair at -.02em; /12.2 leaves ~3% spare.
   390 -> 28.7px, 768 -> 56px, capped at 5rem (80px) from ~1050 up. nowrap is the guarantee. */
.hero .display{font-size:clamp(1.5rem,calc((100vw - 2 * var(--gutter)) / 12.2),5rem);
  white-space:nowrap;line-height:1.1;text-align:center}   /* centred on the page axis */
/* slot 01 is filled: a real image replaces the placeholder */
.hero-pic{position:absolute;inset:0;display:block}
.hero-img{width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block}
@media (max-width:767px){ .hero-img{object-position:50% 50%} }
/* Hero type is WHITE, not ink. Measured against the real pixels: ink on this frame
   gives 2.64:1 for the wordmark and 2.11:1 for the H1 — both fail. The sky's relative
   luminance (0.10–0.14) is far lower than it looks. White clears it with room.
   No scrim, no dimming: the ink follows the photograph. */
.hero-copy .display{color:var(--white)}
.hero-copy{position:relative;z-index:1}

/* ── 2. fact strip — Cadence 60px ──────────────────────────────────────── */
.strip{border-block:1px solid var(--rule);background:var(--white)}
.strip-row{min-height:60px;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 2rem;
  padding-block:12px}
.strip-row li{font-size:var(--t-label);font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-2)}

/* ── 3. the can — Cadence 80/52 ────────────────────────────────────────── */
.range{padding-block:var(--section-lg) var(--section);background:var(--white)}
.range .eyebrow{margin-bottom:2rem;text-align:center}   /* no headline here: the eyebrow is the whole heading block,
   so it takes the site's heading-to-content gap (32px, as in Moments, Science, FAQ) */
/* the product band spans the full width, then the body sits below it in two columns.
   A three-can lockup is a landscape composition; the 4:5 portrait slot would cut cans. */
.range-grid{display:grid;gap:var(--grid-gap)}
/* product cards — a matched pair. Same material as the Why Haden cards (warm neutral, 8px). Each
   card is a 6-row subgrid of the list, so gallery, dots, name, spec rows and buy line sit on shared
   rows across both cards: equal heights and shared baselines whatever the copy length. */
.pcards{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}
@media (min-width:768px){ .pcards{grid-template-columns:repeat(2,minmax(0,1fr));max-width:760px;
  width:100%;justify-self:center} }   /* 2 x ~370px: small enough
   that the can's small print is not legible */
.pcard{background:var(--neutral);border-radius:8px;padding:6px 6px 1.5rem;
  display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0}
.pc-gal{position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:2px;background:var(--slot);
  touch-action:pan-y;outline-offset:3px}
.pc-track{display:flex;height:100%;transition:transform 360ms cubic-bezier(.33,1,.68,1);will-change:transform}
.pc-slide{flex:0 0 100%;height:100%}
.pc-slide .slot{height:100%}
.pc-slide picture,.pc-slide img{display:block;width:100%;height:100%}
.pc-slide img{object-fit:cover;object-position:50% 50%}
.pc-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:0;
  background:rgba(255,255,255,.88);color:var(--ink);font-size:1.1rem;cursor:pointer;
  transition:opacity 160ms ease-out}
.pc-prev{left:10px} .pc-next{right:10px}
.pc-arrow:disabled{opacity:0;pointer-events:none}
.pc-arrow:active{transform:translateY(-50%) scale(.94)}
@media (hover:none),(pointer:coarse){ .pc-arrow{display:none} }   /* touch: swipe and dots */
.pc-dots{display:flex;justify-content:center;gap:0;padding-top:.25rem}
.pc-dots button{width:44px;height:36px;border:0;background:none;cursor:pointer;position:relative}
.pc-dots button::after{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;
  transform:translate(-50%,-50%);background:rgba(15,15,14,.22);transition:background-color 200ms}
.pc-dots button[aria-current]::after{background:var(--ink)}
.pc-name,.pc-spec,.pc-buy{padding-inline:1rem}
.pc-name{font-size:var(--t-h3);margin-top:.5rem}
.pc-spec{margin-top:.75rem}
.pc-spec li{padding:.55rem 0;border-top:1px solid var(--rule);color:var(--ink-2);font-variant-numeric:tabular-nums}
.pc-spec li:last-child{border-bottom:1px solid var(--rule)}
.pc-buy{margin-top:1.25rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem 1rem}
.pc-price{font-family:var(--display);font-size:var(--t-h3);letter-spacing:-.02em}
@supports not (grid-template-rows:subgrid){ .pcard{display:flex;flex-direction:column} }
/* reduced motion: no slide — slides stack and cross-fade */
@media (prefers-reduced-motion:reduce){
  .pc-track{display:grid;transform:none!important;transition:none}
  .pc-slide{grid-area:1/1;opacity:0;transition:opacity 200ms linear}
  .pc-slide.is-on{opacity:1}
}
@media (min-width:900px){
}
/* stacked: the cards centred as a pair, then the text block and the spec table on the gutter */
.range-grid{row-gap:0}
/* text block: centred on the cards' axis (both centre in the same full-width grid column), close
   enough to read as the cards' caption; the spec table below stays on the gutter */
.range-body{margin:2rem auto 0;max-width:48ch;width:100%;text-align:center;justify-self:center}
.range-body .lede{margin:0 auto .75rem;max-width:none}
.range-body .note{margin:0 auto;max-width:none}
/* spec: label | value rows; 4 + 4 column-first from 768, rows share grid rows across columns */
/* the spec table's own heading: a section break above (the page's section rhythm), a tight gap
   below, so the heading groups with the table, not with the text block above it */
.spec-h{text-align:center;margin:var(--section-lg) 0 1.5rem}
.spec{margin:0;display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:768px){
  .spec{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(4,auto);
    grid-auto-flow:column;column-gap:var(--grid-gap)}
}
.spec-row{display:grid;grid-template-columns:46% minmax(0,1fr);align-items:baseline;
  padding:.85rem 0;border-top:1px solid var(--rule)}
.spec-row:last-child{border-bottom:1px solid var(--rule)}
@media (min-width:768px){ .spec-row:nth-child(4){border-bottom:1px solid var(--rule)} }
.spec dt{font-weight:500;font-size:var(--t-body)}
.spec dd{margin:0;font-size:var(--t-body);color:var(--ink-2)}
.spec .v{color:var(--ink);font-variant-numeric:tabular-nums}
.spec .n{display:block;color:var(--ink-3);font-size:var(--t-label)}

/* ── 4. why — Cadence 3 cols, 50/50 ────────────────────────────────────── */
.why{padding-block:var(--section-lg);background:var(--white)}
/* centred, uppercase, our display serif — Revivr's optical weight, not their typeface */
.why-h{text-align:center;text-transform:uppercase;font-size:clamp(2.5rem,5vw,4.5rem);
  line-height:1.1;letter-spacing:-.01em;max-width:24ch;margin:0 auto}
.why-sub{text-align:center;max-width:46ch;margin:1.25rem auto 0;color:var(--ink-2)}

/* No panel. The section is the page's own white from headline to labels, so there is
   no tonal edge anywhere. (The grey panel was itself the rectangle that made the stones
   read as pasted on — the PNGs are genuinely transparent; see the report.) */
.mineral-panel{background:transparent;margin-top:var(--section);padding:var(--section-lg) 0}
/* minmax(0,1fr): plain 1fr is sized by each column's text min-content, so "Magnesium"
   made its column wider and the three specimens rendered at 73/98/111px at 390. */
.mineral-row{display:grid;gap:var(--grid-gap);grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:start}
.mineral{text-align:center}
/* contact shadow: a radial-gradient pseudo-element, NOT a drop-shadow filter — a filter
   traces the stone's irregular silhouette and reads as a sticker. Width is 60% of each
   stone's own width (passed as --stone-w), so the treatment is identical relative to each
   specimen rather than identical in absolute size. All three stones are bottom-anchored to
   a shared baseline at 90% of the cell, so one offset serves all three. */
.mineral figure{margin:0 0 1.5rem;aspect-ratio:1/1;position:relative}
.mineral figure::after{
  content:"";position:absolute;left:50%;top:90%;transform:translate(-50%,-30%);
  width:calc(var(--stone-w,70%) * .6);height:4.5%;pointer-events:none;
  background:radial-gradient(ellipse closest-side,rgba(70,70,70,.10) 0%,rgba(70,70,70,.05) 45%,rgba(70,70,70,0) 100%)}
.mineral picture{position:relative;z-index:1}
.mineral picture{display:block;width:100%;height:100%}
.mineral img{width:100%;height:100%;object-fit:contain;display:block}  /* no crop, no border, no shadow */
.m-name{font-family:var(--display);font-size:var(--t-h3);line-height:1.2;letter-spacing:-.02em}
.m-dose{font-family:var(--display);font-size:clamp(1.75rem,3vw,2.5rem);line-height:1.1;
  letter-spacing:-.02em;margin-top:.25rem}
.m-form{font-size:var(--t-label);color:var(--ink-3);margin-top:.35rem}
@media (max-width:560px){
  /* Three-across left each column 90px at 390 (the panel's gutter doubled the wrap's), so
     "Magnesium" and the doses overran their cells. Under 560 the row becomes a spec list:
     stone left at a usable size, name / dose / salt form left-aligned beside it. */
  .mineral-panel{padding:var(--section) 0}
  .mineral-row{grid-template-columns:1fr;gap:1.5rem}
  .mineral{display:grid;grid-template-columns:8rem minmax(0,1fr);column-gap:1.25rem;
    align-items:center;text-align:left}
  .mineral figure{grid-row:1/span 3;margin:0}
  .m-name,.m-dose,.m-form{grid-column:2}
  .m-name{align-self:end}
  .m-form{align-self:start}
}


/* ── 5. why haden — Cadence §3 "Why Cadence?", 50/50 ─────────────────────
   Measured on theirs at 1440: centred heading, three 440px cards 20px apart on #F7F7F7, card text
   inset 22px, image inset 6px and seated at the bottom. Ours: same shape, square, --neutral ground.
   Each card is a 3-row subgrid of the list, so headings, bodies and image slots sit on shared rows
   across all three cards whatever the copy length: equal heights, one heading line, one body edge. */
.whyh{padding-block:var(--section);background:var(--white)}
.whyh-h{text-align:center;font-size:clamp(2.25rem,4.6vw,3.75rem);margin-bottom:3.25rem}   /* larger than h2: the section's title */
.whyh-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem}   /* Cadence: 20px */
@media (min-width:900px){ .whyh-grid{grid-template-columns:repeat(3,minmax(0,1fr))} }
.whyh-card{background:var(--neutral);padding:1.375rem 6px 6px;border-radius:8px;   /* Cadence's measured 8px */
  
  display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
.whyh-card h3{font-size:clamp(1.5rem,2.2vw,2rem);line-height:1.15;padding-inline:1rem}
.whyh-card p{color:var(--ink-2);margin-top:.75rem;padding-inline:1rem;max-width:52ch}
.whyh-card .slot,.whyh-fig{aspect-ratio:4/3;margin:1.5rem 0 0;align-self:end}
.whyh-fig{overflow:hidden;background:var(--slot)}
.whyh-card .slot,.whyh-fig{border-radius:2px}   /* concentric: card 8px − 6px inset */
.whyh-fig picture,.whyh-fig img{display:block;width:100%;height:100%}
.whyh-fig img{object-fit:cover}   /* the file is already 4:3; cover only absorbs sub-pixel rounding */
@supports not (grid-template-rows:subgrid){
  .whyh-card{display:flex;flex-direction:column}
  .whyh-card .slot,.whyh-fig{margin-top:auto}
  .whyh-card p{margin-bottom:1.5rem}
}

/* ── 6. science — banner then numbered rows ────────────────────────────── */
/* ── 6. science card — Cadence §6: photograph fills an inset card, copy on the right ──
   ≥900: the card is 21:9 at minimum and grows if a row is opened; the photograph covers it,
   bottom-anchored so the feet and road stay. A dark gradient on the right half only, under the copy:
   it is the card's own material (Cadence's photograph is dark there), not a page-wide scrim.
   <900: photograph on top at 16:10, copy beneath on ink. Square throughout. */
.science{padding-block:var(--section);background:var(--white)}
.sci-card{position:relative;background:var(--ink);color:var(--white);border-radius:8px}   /* no overflow:hidden: it pins
   the 21:9 box and an opened row would be clipped; with it off, aspect-ratio grows with the copy */
.sci-fig{margin:0;aspect-ratio:16/10;background:var(--slot);border-radius:8px 8px 0 0;overflow:hidden}
.sci-fig picture,.sci-fig img{display:block;width:100%;height:100%}
.sci-fig img{object-fit:cover;object-position:51% 100%}   /* 51%: the athlete's x in the frame */
.sci-copy{padding:1.75rem 1.25rem 1.5rem}
.sci-copy h2{color:var(--white);margin-bottom:1.25rem}
@media (min-width:900px){
  .sci-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,40%);aspect-ratio:21/9;
    align-items:center}
  .sci-fig{position:absolute;inset:0;aspect-ratio:auto;border-radius:8px}
  .sci-card::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:8px;
    background:linear-gradient(90deg,rgba(15,15,14,0) 45%,rgba(15,15,14,.72) 100%)}   /* .55 left "Magnesium" at 4.50:1; .65 left open-row body at 4.62 */
  .sci-copy{grid-column:2;position:relative;z-index:1;padding:2.5rem 2.5rem 2.5rem 0}
}
/* rows on a dark ground: each its own 1px box, as Cadence boxes theirs. ".rows.rows--inv" so these
   outrank the base .rows/.row rules, which come later in the file at equal specificity. */
.rows.rows--inv .row,.rows.rows--inv .row:last-child{border:1px solid rgba(255,255,255,.32);margin-top:.6rem;padding-inline:1rem}
.rows.rows--inv .row summary{padding:.8rem 0;color:var(--white)}
.rows.rows--inv .row summary:hover{color:var(--white);text-decoration:underline;text-underline-offset:.25em}
.rows.rows--inv .row .n-num,.rows.rows--inv .row .sign{color:var(--white-2)}
.rows.rows--inv .row .body{color:var(--white);padding:0 0 1rem}   /* .72 white measured 3.43:1 over the grass */
.rows.rows--inv .row .body .lead{color:var(--white);margin-bottom:.5rem}
.rows.rows--inv :focus-visible{outline-color:var(--white)}

/* rows — shared by science and faq */
.rows .row{border-top:1px solid var(--rule)}
.rows .row:last-child{border-bottom:1px solid var(--rule)}
.row summary{display:flex;gap:1rem;align-items:baseline;padding:1.1rem 0;cursor:pointer;
  list-style:none;font-family:var(--display);font-size:var(--t-h3);line-height:1.25;letter-spacing:-.02em}
.row summary::-webkit-details-marker{display:none}
.row summary:hover{color:var(--oxblood)}
.row .n-num{font-family:var(--text);font-size:var(--t-label);font-weight:600;letter-spacing:.06em;
  color:var(--oxblood);flex:0 0 2.5rem;line-height:1.7}
.row .sign{margin-left:auto;font-family:var(--text);font-size:1.25rem;color:var(--ink-3);line-height:1}
.row[open] .sign{transform:rotate(45deg)}
.row .body{padding:0 0 1.3rem;color:var(--ink-2);max-width:62ch}
@media (min-width:480px){ .row .body{padding-left:3.5rem} }


/* ── 8. the Haden100 ───────────────────────────────────────────────────── */
/* ── 8. the Haden100 — light, not black. The section is the page's own white; the block is a
   rounded card on the warm neutral, the same material as the Why Haden cards. The form sits on it as
   a white panel. Ink type throughout. */
.join{background:var(--white);padding-block:var(--section)}
.join-card{background:var(--neutral);border-radius:8px;padding:clamp(1.5rem,4vw,3rem)}
.join-grid{display:grid;gap:var(--grid-gap)}
@media (min-width:900px){ .join-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(2rem,5vw,4rem)} }
.join-h{font-size:clamp(2rem,4.4vw,3.25rem);margin-bottom:1rem}
.terms{margin-top:1.75rem;max-width:42ch}
.terms li{padding:.75rem 0;border-top:1px solid var(--rule);color:var(--ink-2)}
.terms li:last-child{border-bottom:1px solid var(--rule);color:var(--ink)}
.join-form{background:var(--white);border:1px solid var(--rule);border-radius:4px;padding:1.75rem;align-self:start}
.form-h{margin-bottom:1rem}
.join-form label{display:block;font-size:var(--t-label);color:var(--ink-2);margin-bottom:.5rem}
.join-form input[type=email]{width:100%;background:var(--white);color:var(--ink);
  border:1px solid rgba(15,15,14,.35);padding:.8rem .9rem;min-height:48px}
.join-form input::placeholder{color:var(--ink-3)}
.join-form input:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.join-form .btn{width:100%;margin-top:1rem}
.join-form .note{margin-top:1rem}
.status{margin-top:1rem;font-size:var(--t-label);min-height:1.5em}
.join .status{color:var(--ink)}

/* ── 9. faq ────────────────────────────────────────────────────────────── */
.faq{padding-block:var(--section);background:var(--white)}
.faq h2{margin-bottom:2rem}
.faq .row summary{font-size:var(--t-h3)}

/* ── 10. club ──────────────────────────────────────────────────────────── */
.club-cta{background:var(--neutral);padding-block:var(--section);border-top:1px solid var(--rule)}
.club-in{display:grid;gap:var(--grid-gap);align-items:center}
@media (min-width:900px){ .club-in{grid-template-columns:minmax(0,1fr) minmax(0,26rem)} }
.news-row{display:flex;gap:.5rem;flex-wrap:wrap}
.news-row input{flex:1 1 12rem;min-width:0;background:transparent;color:var(--ink);
  border:1px solid var(--rule);padding:.8rem .9rem;min-height:48px}
.club-cta .btn-line{border-color:var(--ink);color:var(--ink)}
.club-cta .btn-line:hover{background:var(--ink);color:var(--white)}

/* ── footer — black, link lists ────────────────────────────────────────── */
.footer{background:var(--ink);color:var(--white);padding-block:var(--section-lg) var(--section)}
.footer-grid{display:grid;gap:2rem var(--grid-gap)}
@media (min-width:768px){ .footer-grid{grid-template-columns:repeat(4,1fr)} }
.footer-brand{font-family:var(--display);font-size:1.75rem;line-height:1;letter-spacing:-.02em;margin-bottom:.5rem}
.footer-line{color:var(--white-2);max-width:28ch}
.footer li+li{margin-top:.5rem}
.footer a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--rule-inv);padding-bottom:1px}
.footer a:hover{border-bottom-color:var(--white)}
.footer .pending{color:var(--white-2)}
.footer-legal{grid-column:1/-1;margin-top:1.5rem;padding-top:1.5rem;
  border-top:1px solid var(--rule-inv);color:var(--white-2);font-size:var(--t-label)}