/* =====================================================================
   Nouraro - nouraro.com
   Built from the brand identity board. The board is a fixed 1440px canvas
   with every value inline and no variables; the tokens below are that board
   turned into something a site can be built on.

   Usage ratio, from the board: Bone 70% · Ink 18% · Ember 8% · Dusk 3% · Halo/Fern 1%
   Standing instruction, from the board: "Deliberately not green."
   ===================================================================== */

:root{
  --ember:#E2552B;                 /* primary */
  --clay:#A83A1C;                 /* press / hover */
  --ember-12:#FBE7DC;                 /* tint / badges */
  --dusk:#2F3A56;                 /* secondary */
  --halo:#F3B95F;                 /* accent */
  --fern:#3E6B5A;                 /* data only */
  --bone:#FBF7F1;                 /* page background */
  --surface:#FFFFFF;                 /* cards */
  --sand:#F2ECE2;                 /* inset */
  --line:#E6DFD5;                 /* borders */
  --stone:#6E655A;                 /* body 2 */
  --ink:#16130F;                 /* text */

  --ink-2:#3A342D;                 /* nav items and deck text; borders on Ink */
  --muted:#746B60;                 /* mono meta on light - darkened from the board's #8C8378, which reads 3.49:1 on Bone */
  --on-ink-2:#B8AFA3;                 /* body text on Ink */
  --disabled:#A9A096;                 /* disabled control label */
  --on-ember:#FFF3EC;                 /* text on Ember */
  --on-tint:#7A3016;                 /* text on Ember 12 */
  --select:#F7DCCF;                 /* ::selection background */
  --on-dusk:#DCE1EC;                 /* text on Dusk */
  --on-halo:#5A3F0E;                 /* text on Halo */

  --f-ui:'Schibsted Grotesk', Helvetica, Arial, sans-serif;
  --f-read:Newsreader, Georgia, 'Times New Roman', serif;
  --f-mono:'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --measure:68ch;

  --r-chip:6px;
  --r-input:10px;
  --r-card:18px;
  --r-media:28px;
  --r-pill:999px;

  --shadow:0 1px 2px rgba(22,19,15,.05);
  --shadow-hi:0 12px 32px rgba(22,19,15,.08);
  --shadow-float:0 16px 40px rgba(22,19,15,.10);
  --wrap:1264px;
  --gutter:88px;
  --ease:cubic-bezier(.2,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bone); color:var(--ink);
  font-family:var(--f-ui); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased}
::selection{background:var(--select); color:var(--ink)}
img,svg{max-width:100%}
img{height:auto}
/* Ember marks, Clay carries text. The board specifies Ember for link text and
   for the button fill under white, but those measure 3.53:1 and 3.77:1 - both
   below AA. Clay is the board's own hover tone and its "text on Ember 12", so
   the family is unchanged; only the tone that sits under words moves. Ember
   keeps every non-text job: the mark, the chip dot, the active nav underline,
   the bars, the rules. Those are graphics and clear 3:1 comfortably. */
a{color:var(--clay); text-decoration:none}
a:hover{color:var(--ember)}
:focus-visible{outline:2px solid #E2552B; outline-offset:3px; border-radius:2px}

h1,h2,h3{margin:0; font-weight:700; text-wrap:balance}
p,ul,ol{margin:0}
.skip{position:absolute; left:-9999px; top:0; background:var(--ink); color:var(--bone);
  padding:.8rem 1.2rem; z-index:60}
.skip:focus{left:0}

.wrap{width:min(var(--wrap), calc(100% - 2.4rem)); margin-inline:auto}
.wrap-read{width:min(720px, calc(100% - 2.4rem)); margin-inline:auto}

/* ------------------------------- type scale ------------------------------ */
/* The board's figures are the 1440px end. It defines no breakpoints, so the
   small end is set here - clamped rather than stepped, so nothing jumps. */
h1{font-size:clamp(2.4rem,1.4rem + 3.6vw,3.875rem); line-height:.98;
  letter-spacing:-0.055em}
h2{font-size:clamp(1.75rem,1.2rem + 1.9vw,2.5rem); line-height:1.1; letter-spacing:-.04em}
h3{font-size:clamp(1.25rem,1.05rem + .6vw,1.625rem); line-height:1.23; letter-spacing:-.02em;
  font-weight:600}
.lead{font-family:var(--f-read); font-size:clamp(1.06rem,1rem + .4vw,1.3125rem);
  line-height:1.6; color:var(--ink-2); max-width:30rem; margin-top:1.1rem}
.eyebrow{font-family:var(--f-mono); font-size:.75rem; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted)}

/* --------------------------------- buttons ------------------------------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--clay); color:#fff; font-size:1rem; font-weight:600;
  padding:1rem 1.875rem; border-radius:var(--r-pill); border:1.5px solid transparent;
  text-decoration:none; cursor:pointer; transition:background .18s var(--ease)}
.btn:hover{background:var(--ember); color:#fff}
.btn-out{background:transparent; color:var(--ink); border-color:var(--ink)}
.btn-out:hover{background:var(--sand); color:var(--ink)}
.btn-light{background:var(--bone); color:var(--ink)}
.btn-light:hover{background:#fff; color:var(--ink)}
.btn-sm{font-size:.9375rem; padding:.75rem 1.5rem}
/* The board's documented Disabled variant. script.js applies this to any
   .cta-link while CAMPAIGN_URL is empty, so nothing that cannot be clicked
   ever looks as though it can. */
.btn[aria-disabled="true"],
.nav a.btn[aria-disabled="true"]{background:var(--sand); color:var(--stone);
  border-color:transparent; cursor:default; pointer-events:none}
.cta-row{display:flex; flex-wrap:wrap; gap:.875rem; margin-top:2.125rem}

/* ------------------------------ announcement ----------------------------- */
.announce{background:var(--ink); color:var(--line)}
.announce-in{display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:.625rem 0; font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase}
.announce-in a{color:var(--halo); white-space:nowrap}
.announce-in a:hover{color:#fff}

/* --------------------------------- header -------------------------------- */
.top{background:var(--bone); border-bottom:1px solid var(--line); position:sticky; top:0;
  z-index:50}
.bar{display:flex; align-items:center; gap:2.5rem; padding:1.25rem 0}
.logo{display:inline-flex; align-items:center; gap:.6875rem; color:var(--ink); flex:none}
.logo span{font-size:1.6875rem; font-weight:700; letter-spacing:-0.055em}
.logo:hover{color:var(--ink)}
.logo svg{flex:none}
.nav{display:flex; align-items:center; gap:1.75rem; margin-left:auto}
.nav ul{display:flex; gap:1.75rem; list-style:none; padding:0; margin:0}
.nav a{font-size:.9375rem; font-weight:500; color:var(--ink-2); padding-bottom:3px;
  border-bottom:2px solid transparent}
.nav a:hover{color:var(--clay)}
.nav a.is-on{color:var(--ink); border-bottom-color:var(--ember)}
.nav a.btn{color:#fff}
.nav a.btn:hover{color:#fff}
.burger{display:none; width:44px; height:44px; margin-left:auto; background:none;
  border:1px solid var(--line); border-radius:var(--r-pill); cursor:pointer}
.burger span,.burger span::before,.burger span::after{display:block; width:17px; height:1.5px;
  background:var(--ink); margin-inline:auto; content:""}
.burger span::before{transform:translateY(-5px)}
.burger span::after{transform:translateY(3.5px)}

/* ---------------------------------- hero --------------------------------- */
.hero{padding-block:clamp(2.5rem,5vw,4.5rem)}
.hero-grid{display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,4vw,4rem);
  align-items:center; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:clamp(1.75rem,4vw,4.5rem)}
.chip{display:inline-flex; align-items:center; gap:.625rem; background:var(--ember-12);
  color:var(--clay); font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.12em;
  text-transform:uppercase; padding:.5625rem 1rem; border-radius:var(--r-pill)}
.chip .dot{width:7px; height:7px; border-radius:var(--r-pill); background:var(--ember)}
.hero h1{margin-top:1.625rem}
.stats{display:grid; grid-template-columns:repeat(4,auto); justify-content:start;
  gap:1.25rem 2.25rem; margin-top:2.5rem; padding-top:1.75rem;
  border-top:1px solid var(--line)}
.stat-v{font-family:var(--f-display); font-size:clamp(1.5rem,1.2rem + 1vw,1.875rem);
  font-weight:700; letter-spacing:-.03em; line-height:1}
.stat-l{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-top:.25rem}
/* the last figure is the way in rather than another item in the catalogue */
.stat-free{padding-left:2.25rem; border-left:1px solid var(--line)}
.stat-free .stat-v{color:var(--ember)}
.stat-free .stat-l{color:var(--clay)}
.hero-r{position:relative}
.hero-img{width:100%; border-radius:var(--r-media); display:block; object-fit:cover;
  aspect-ratio:4/5}
/* "Warm neutral grade, +8 warmth, lifted blacks" - the board's photography
   rule, applied here rather than baked into the files. */
.hero-img,.sec-img,.doc-img,.brief-img{filter:saturate(.92) contrast(.96) brightness(1.02)}
/* The board floats a telemetry card here. There is no app and no telemetry, so
   the geometry is kept and the contents are the issue's table of contents. */
.float{position:absolute; left:-2.5rem; bottom:3.5rem; width:15rem; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-card); padding:1.125rem 1.25rem;
  box-shadow:var(--shadow-float)}
.float-l{font-family:var(--f-mono); font-size:.625rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted)}
.float-list{list-style:none; padding:0; margin:.75rem 0 0}
.float-list li{display:flex; flex-direction:column; padding:.4375rem 0;
  border-top:1px solid var(--line)}
.float-list li:first-child{border-top:0; padding-top:0}
.float-list b{font-size:.9375rem; font-weight:600}
.float-list span{font-size:.8125rem; color:var(--stone)}
.float-bars{display:flex; align-items:flex-end; gap:5px; height:1.5rem; margin-top:.875rem}
.float-bars i{flex:1; background:var(--line); border-radius:3px; height:40%}
.float-bars i:nth-child(2){height:62%} .float-bars i:nth-child(3){height:48%}
.float-bars i:nth-child(4){height:78%} .float-bars i:nth-child(5){height:92%}
.float-bars i:nth-child(6){height:70%} .float-bars i:nth-child(7){height:100%}
.b-halo{background:var(--halo) !important} .b-ember{background:var(--ember) !important}
.b-dusk{background:var(--dusk) !important}

/* -------------------------------- sections ------------------------------- */
.section{padding-block:clamp(2.5rem,5vw,4.5rem)}
.band-sand{background:var(--sand); border-block:1px solid var(--line)}
.band-ink{background:var(--ink); color:var(--bone); padding-block:clamp(3rem,6vw,5.5rem)}
.sec-head{max-width:44rem; margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.sec-head p{margin-top:.75rem; font-family:var(--f-read); font-size:1.0625rem;
  line-height:1.6; color:var(--stone)}
.sec-h{font-size:clamp(1.4rem,1.1rem + 1vw,1.875rem); font-weight:700; letter-spacing:-.03em;
  margin-bottom:1.25rem}

/* --------------------------------- cards --------------------------------- */
.cards-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.5rem;
  align-items:start}
.cards-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem;
  align-items:start}
.cards-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem;
  align-items:start}
.three{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:1.5rem; align-items:start}
.acard{display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:.875rem; color:var(--ink); min-width:0;
  box-shadow:var(--shadow); transition:box-shadow .18s var(--ease), transform .18s var(--ease)}
.acard:hover{box-shadow:var(--shadow-hi); transform:translateY(-2px); color:var(--ink)}
.acard-b{padding:1.25rem .875rem 1rem}
.acard-s{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--clay)}
.acard h3{margin-top:0}
.acard-d{margin-top:.625rem; font-family:var(--f-read); font-size:1.0625rem; line-height:1.55;
  color:var(--stone)}

/* The board's card image: a photograph in a 12px inner frame with the section
   as a pill over the top-left corner. */
.cov-wrap{position:relative; display:block; border-radius:12px; overflow:hidden}
.cov-img{width:100%; height:auto; display:block; aspect-ratio:16/10; object-fit:cover;
  background:var(--sand); filter:saturate(.92) contrast(.96) brightness(1.02)}
.cov-lg .cov-img{aspect-ratio:16/9}
.cov-pill{position:absolute; top:.75rem; left:.75rem; background:var(--bone);
  color:var(--clay); font-family:var(--f-mono); font-size:.625rem; letter-spacing:.11em;
  text-transform:uppercase; padding:.375rem .75rem; border-radius:var(--r-pill)}

/* Kept as the fallback for a guide with no photograph. */
.cov{display:flex; flex-direction:column; justify-content:space-between; padding:1.125rem;
  border-radius:12px; aspect-ratio:16/10; background:var(--sand); color:var(--ink)}
.cov-lg{aspect-ratio:16/9}
.cov-s{font-family:var(--f-mono); font-size:.625rem; letter-spacing:.12em;
  text-transform:uppercase; opacity:.7}
.cov-t{font-size:1.125rem; font-weight:600; letter-spacing:-.02em; line-height:1.2;
  max-width:16ch}
.cov-fitness{background:var(--ink); color:var(--bone)}
.cov-nutrition{background:var(--ember-12); color:var(--on-tint)}
.cov-recovery{background:var(--dusk); color:var(--on-dusk)}
.cov-wellness{background:var(--halo); color:var(--on-halo)}

.brief-card{border-radius:var(--r-card); padding:2rem; min-width:0}
.brief-card{background:var(--ink); color:var(--bone)}
.brief-card h3{margin-top:.875rem}
.brief-card p{margin-top:.625rem; font-family:var(--f-read); font-size:1.0625rem;
  line-height:1.55; color:var(--on-ink-2)}
.brief-card .btn{margin-top:1.25rem}
.strip{font-family:var(--f-mono); font-size:.625rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-ink-2); margin-top:1.25rem !important}
.strip-dark{color:var(--on-ink-2); margin-top:1.5rem !important}

/* ------------------------------ latest / hww ----------------------------- */
.latest{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem}
.lcol h3 a{color:var(--ink)} .lcol h3 a:hover{color:var(--clay)}
.lcol > p{margin-top:.5rem; font-family:var(--f-read); font-size:.9375rem; line-height:1.5;
  color:var(--stone)}
.lcol ul{list-style:none; padding:0; margin:1rem 0 0}
.lcol li{padding:.625rem 0; border-top:1px solid var(--line)}
.lcol li a{color:var(--ink); font-size:.9375rem; font-weight:500}
.lcol li a:hover{color:var(--clay)}

.hww{display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,4vw,4rem)}
.hww .eyebrow{color:var(--halo)}
.hww-lead{font-family:var(--f-read); font-size:clamp(1.4rem,1.1rem + 1.2vw,1.9rem);
  line-height:1.3; margin-top:1rem; max-width:20ch}
.hww .btn{margin-top:1.75rem}
.hww-r{display:grid; gap:1.75rem; align-content:start}
.hww-r h3{color:var(--bone)}
.hww-r p{margin-top:.5rem; font-family:var(--f-read); font-size:1.0625rem; line-height:1.6;
  color:var(--on-ink-2)}

.prog-panel{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,4vw,4rem);
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-media);
  padding:clamp(1.75rem,3.5vw,3rem); align-items:center}
.prog-panel h2{margin-top:.75rem}
.prog-panel > div > p{margin-top:.875rem; font-family:var(--f-read); font-size:1.0625rem;
  line-height:1.6; color:var(--stone); max-width:36ch}
.prog-panel .btn{margin-top:1.5rem}
.pps{display:grid; gap:1rem}
.pp{background:var(--sand); border-radius:var(--r-card); padding:1.25rem 1.375rem}
.pp-m{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--stone); margin-top:.375rem}

.scale{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem;
  padding:clamp(1.4rem,3vw,2rem) 0; border-block:1px solid var(--line)}
.sc-v{font-family:var(--f-display); font-size:clamp(1.9rem,1.4rem + 1.8vw,2.75rem);
  font-weight:700; letter-spacing:-.03em; line-height:1}
.sc-l{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted); margin-top:.4rem}

/* --------------------------- the offer, on home -------------------------- */
/* The conversion block. It was the last thing before the footer, which is the
   one place on a page nobody scrolls to on purpose; it now sits directly after
   the four sections, where the line "ninety-two more sit behind the
   subscription" hands straight to it. */
.offer{padding-block:clamp(3rem,6vw,5rem)}
.offer-head{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,4vw,4rem);
  align-items:end}
.offer .eyebrow{color:var(--halo)}
.offer h2{margin-top:.875rem; color:var(--bone);
  font-size:clamp(1.9rem,1.3rem + 2.4vw,3rem); line-height:1.08}
.offer-lead{font-family:var(--f-read); font-size:clamp(1.02rem,1rem + .35vw,1.1875rem);
  line-height:1.65; color:var(--on-ink-2)}

.offer-scale{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem;
  margin-top:clamp(2rem,4vw,3rem); padding-block:clamp(1.4rem,3vw,2rem);
  border-block:1px solid var(--ink-2)}
.osc-v{font-family:var(--f-display); font-size:clamp(2rem,1.4rem + 2.2vw,3rem); font-weight:700;
  letter-spacing:-.03em; line-height:1; color:var(--bone)}
.osc-l{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--on-ink-2); margin-top:.4rem}

.offer-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,2.6vw,2.25rem); margin-top:clamp(1.75rem,3.5vw,2.5rem)}
.op{display:grid; grid-template-columns:auto 1fr; gap:.875rem; align-items:start}
.op-n{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em; color:var(--halo);
  padding-top:.3rem}
.op h3{font-size:1.06rem; color:var(--bone)}
.op p{margin-top:.375rem; font-family:var(--f-read); font-size:.9875rem; line-height:1.55;
  color:var(--on-ink-2)}

.offer-cta{display:flex; flex-wrap:wrap; align-items:center; gap:.875rem 1.25rem;
  margin-top:clamp(2rem,4vw,3rem)}
.btn-ghost-l{background:transparent; color:var(--bone); border-color:var(--ink-2)}
.btn-ghost-l:hover{background:var(--ink-2); color:var(--bone)}
.offer-note{flex:1 1 20rem; font-size:.875rem; line-height:1.6; color:var(--on-ink-2)}

/* ------------------------- what a subscription is ------------------------ */
.mem{display:grid; gap:clamp(1.25rem,2.6vw,2rem); margin-top:clamp(1.6rem,3vw,2.4rem);
  grid-template-columns:repeat(3,minmax(0,1fr)); align-items:start}
.mem-i{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:clamp(1.4rem,2.6vw,1.875rem)}
.mem-n{font-family:var(--f-display); font-size:2rem; font-weight:700; line-height:1;
  color:var(--ember); opacity:.9}
.mem-i h3{margin-top:.75rem}
.mem-d{margin-top:.625rem; font-family:var(--f-read); font-size:1.0625rem; line-height:1.6;
  color:var(--stone)}
.mem-i ul{list-style:none; padding:0; margin:1.125rem 0 0}
.mem-i li{position:relative; padding:.5rem 0 .5rem 1.375rem; font-size:.9375rem; line-height:1.5;
  border-top:1px solid var(--line)}
.mem-i li::before{content:""; position:absolute; left:0; top:1.05rem; width:7px; height:7px;
  border-radius:var(--r-pill); background:var(--ember)}

/* free against paid, side by side, with the free column deliberately first
   and deliberately full - it is the larger half of the promise */
.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.25rem,2.6vw,2rem)}
.split-free,.split-paid{border-radius:var(--r-card); padding:clamp(1.4rem,2.6vw,1.875rem)}
.split-free{background:var(--surface); border:1px solid var(--line)}
.split-paid{background:var(--ink); color:var(--bone)}
.split-h{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--clay); margin-bottom:.5rem}
.split-paid .split-h{color:var(--halo)}
.sp{padding:1rem 0; border-top:1px solid var(--line)}
.split-paid .sp{border-top-color:var(--ink-2)}
.sp h3{font-size:1.06rem}
.split-paid .sp h3{color:var(--bone)}
.sp p{margin-top:.375rem; font-family:var(--f-read); font-size:.9875rem; line-height:1.55;
  color:var(--stone)}
.split-paid .sp p{color:var(--on-ink-2)}

/* -------------------------------- articles ------------------------------- */
.art{padding-block:clamp(2.5rem,5vw,4rem)}
.crumb{font-family:var(--f-mono); font-size:.6875rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--muted)}
.crumb a{color:var(--clay)}
.crumb span{margin-inline:.4rem}
.art h1{margin-top:1rem}
.standfirst{font-family:var(--f-read); font-size:clamp(1.1rem,1rem + .5vw,1.3125rem);
  line-height:1.55; color:var(--ink-2); margin-top:1rem}
/* The guide masthead. Wider than the 720px reading column so it frames the
   piece instead of interrupting it; capped at its own 1440px so it is never
   enlarged. */
.art-hero-wrap{margin:1.75rem 0 0;
  width:min(1000px, calc(100vw - 2.4rem)); max-width:1440px;
  margin-inline:calc((min(720px, 100vw - 2.4rem) - min(1000px, 100vw - 2.4rem)) / 2)}
.art-hero{width:100%; height:auto; display:block; border-radius:var(--r-media);
  background:var(--sand); filter:saturate(.92) contrast(.96) brightness(1.02)}
.disc{background:var(--sand); border-radius:var(--r-input); padding:1rem 1.25rem;
  margin-top:1.75rem; font-size:.9375rem; line-height:1.6; color:var(--ink-2)}
.art h2{margin-top:2.75rem; font-size:clamp(1.4rem,1.15rem + .9vw,1.75rem)}
.art h3{margin-top:1.75rem}
.art p{font-family:var(--f-read); font-size:1.125rem; line-height:1.67; margin-top:1.1rem;
  max-width:var(--measure)}
.art ul,.art ol{font-family:var(--f-read); font-size:1.125rem; line-height:1.6;
  margin-top:1.1rem; padding-left:1.25rem; max-width:var(--measure)}
.art li{margin-top:.55rem}
.art blockquote{margin:1.5rem 0 0; padding:1rem 0 1rem 1.25rem;
  border-left:2px solid var(--ember); font-family:var(--f-read); font-size:1.25rem;
  line-height:1.45; color:var(--ink)}
.art blockquote p{margin-top:0; font-size:inherit}
.art strong{font-weight:600}
.doc-fig{margin:1.75rem 0 0}
.doc-img{width:100%; border-radius:var(--r-media); display:block}

.limits{background:var(--ink); color:var(--bone); border-radius:var(--r-media);
  padding:clamp(1.5rem,3vw,2.25rem); margin-top:2.75rem}
.limits h2{margin-top:0; color:var(--bone); font-size:1.375rem}
.lim{margin-top:1.375rem; padding-top:1.125rem; border-top:1px solid var(--ink-2)}
.lim-l{font-family:var(--f-mono); font-size:.625rem !important; letter-spacing:.11em;
  text-transform:uppercase; color:var(--halo); max-width:none !important}
.limits p:not(.lim-l){font-family:var(--f-read); font-size:1rem !important; line-height:1.6;
  color:var(--on-ink-2); margin-top:.5rem}

/* The way through at the foot of a guide. Deliberately quiet and deliberately
   honest about what it is: the guide is complete, the program is a different
   thing you may or may not want. */
.gcta{margin-top:2.5rem; padding:1.5rem 1.625rem; background:var(--sand);
  border-radius:var(--r-card)}
.gcta-l{font-family:var(--f-mono) !important; font-size:.6875rem !important; letter-spacing:.11em;
  text-transform:uppercase; color:var(--clay); max-width:none !important}
.gcta p:not(.gcta-l){font-family:var(--f-read); font-size:1rem !important; line-height:1.6;
  color:var(--stone); margin-top:.625rem !important}
.gcta .btn{margin-top:1.125rem}
.corr{margin-top:2rem !important; padding-top:1.25rem; border-top:1px solid var(--line);
  font-size:.875rem !important; font-family:var(--f-ui) !important; color:var(--stone)}

.prevnext{display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-top:2.5rem}
.pn{display:block; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-card); padding:1rem 1.25rem; color:var(--ink); font-weight:600;
  line-height:1.3}
.pn:hover{border-color:var(--ember); color:var(--ink)}
.pn span{display:block; font-family:var(--f-mono); font-size:.625rem; letter-spacing:.11em;
  text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:.35rem}
.pn.next{text-align:right} .pn.next:only-child{grid-column:2}

/* ------------------------------ section pages ---------------------------- */
.sec-hero{padding-block:clamp(2.25rem,4.5vw,3.75rem)}
.sec-hero-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem);
  align-items:center}
.sec-img{width:100%; border-radius:var(--r-media); display:block; object-fit:cover;
  aspect-ratio:16/10}
.status{display:inline-block; font-family:var(--f-mono); font-size:.6875rem;
  letter-spacing:.11em; text-transform:uppercase; background:var(--ember-12);
  color:var(--clay); padding:.5rem 1rem; border-radius:var(--r-pill); margin-bottom:1.25rem}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,4vw,4rem);
  align-items:start}
.two-col p{font-family:var(--f-read); font-size:1.0625rem; line-height:1.65;
  color:var(--stone); margin-top:.875rem}
.never,.seq{font-family:var(--f-read); font-size:1.0625rem; line-height:1.6; padding-left:1.2rem;
  margin-top:.5rem}
.never li,.seq li{margin-top:.6rem; color:var(--stone)}
.seq li a{color:var(--ink); font-weight:500} .seq li a:hover{color:var(--clay)}
.prog{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:1.5rem}
.prog-chip{display:inline-block; font-family:var(--f-mono); font-size:.625rem;
  letter-spacing:.1em; text-transform:uppercase; background:var(--sand); color:var(--stone);
  padding:.375rem .75rem; border-radius:var(--r-chip); margin-bottom:.875rem}
.prog h3{margin-bottom:.375rem}
.prog p{font-family:var(--f-read); font-size:1rem; line-height:1.55; color:var(--stone);
  margin-top:.5rem}
.prog-m{font-family:var(--f-mono) !important; font-size:.6875rem !important;
  letter-spacing:.1em; text-transform:uppercase; color:var(--clay) !important}
.bi{background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card);
  padding:1.5rem}
.bi p{margin-top:.5rem; font-family:var(--f-read); font-size:1.0625rem; color:var(--stone)}

.brief-band{padding-block:0}
.brief-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:clamp(2rem,4vw,4rem);
  align-items:center; padding-block:clamp(2.5rem,5vw,4rem)}
.brief-grid h2{margin-top:1.25rem; color:var(--bone)}
.brief-lead{font-family:var(--f-read); font-size:clamp(1.1rem,1rem + .6vw,1.4rem);
  line-height:1.5; color:var(--on-ink-2); margin-top:.875rem; max-width:34ch}
.brief-grid .btn{margin-top:1.5rem}
.brief-img{width:100%; border-radius:var(--r-media); display:block; object-fit:cover;
  aspect-ratio:2/1}

/* --------------------------------- footer -------------------------------- */
.foot{background:var(--ink); color:var(--on-ink-2); padding-block:clamp(2.5rem,5vw,4rem)}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem}
.foot .logo{color:var(--bone)}
.foot-tag{margin-top:1rem; font-family:var(--f-read); font-size:1rem; line-height:1.5;
  color:var(--on-ink-2); max-width:26ch}
.foot-mail{margin-top:1rem; font-size:.9375rem}
.foot-mail a{color:var(--halo)}
.foot h2{font-family:var(--f-mono); font-size:.6875rem; font-weight:500; letter-spacing:.11em;
  text-transform:uppercase; color:var(--on-ink-2)}
.foot ul{list-style:none; padding:0; margin:1rem 0 0}
.foot li{margin-top:.6rem}
.foot li a{color:var(--bone); font-size:.9375rem}
.foot li a:hover{color:var(--halo)}
/* Centred, and the promoter paragraph capped in measure - the block is a
   statutory disclosure rather than reading matter, and it sits apart from the
   navigation above it. */
.foot-base{margin-top:2.5rem; padding-top:1.75rem; border-top:1px solid var(--ink-2);
  font-size:.8125rem; line-height:1.65; color:var(--on-ink-2); text-align:center}
.foot-base a{color:var(--halo)}
.foot-op{max-width:64rem; margin-inline:auto}
.foot-copy{margin-top:1.25rem; color:var(--bone); font-weight:600}
.foot-addr{margin-top:.375rem}

/* ------------------------------- responsive ------------------------------ */
@media (max-width:1080px){
  .cards-4,.latest{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mem,.offer-head{grid-template-columns:1fr}
  .offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .three{grid-template-columns:1fr 1fr}
  .three .acard-lead{grid-column:1 / -1}
  .foot-grid{grid-template-columns:1fr 1fr 1fr; gap:2rem}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:900px){
  .hero-grid,.sec-hero-grid,.hww,.prog-panel,.two-col,.brief-grid{grid-template-columns:1fr}
  .float{position:static; width:auto; margin-top:-2.5rem; margin-inline:1.25rem}
  .cards-3,.cards-2,.mem,.split{grid-template-columns:1fr}
  .scale,.offer-scale{grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.25rem}
  .offer-grid{grid-template-columns:1fr}
  .prevnext{grid-template-columns:1fr}
  .pn.next{text-align:left; grid-column:1}
  .burger{display:block}
  .nav{position:absolute; left:0; right:0; top:100%; display:none; margin:0;
    flex-direction:column; align-items:stretch; gap:0; background:var(--bone);
    border-bottom:1px solid var(--line); padding:.5rem 1.2rem 1.2rem}
  .top[data-open="true"] .nav{display:flex}
  .nav ul{flex-direction:column; gap:0}
  .nav a{display:block; padding:.85rem 0; border-bottom:1px solid var(--line)}
  .nav a.is-on{border-bottom-color:var(--ember)}
  .nav .btn{margin-top:1rem}
}
@media (max-width:640px){
  .art-hero-wrap{width:100%; margin-inline:0}
  .art-hero{aspect-ratio:16/10; object-fit:cover}
  .cards-4,.latest,.three{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr}
  .announce-in{font-size:.625rem; gap:.75rem}
  .stats{grid-template-columns:repeat(2,auto); gap:1.25rem 2rem}
  .stat-free{padding-left:0; border-left:0; padding-top:1rem; border-top:1px solid var(--line);
    grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important; scroll-behavior:auto !important}
}