/* ============================================================================
   SHEEN — execution 01, "The One Line"
   Loud through scale. One idea per page. Restraint at the top of a page,
   substance underneath it.

   The system, lifted from the approved plate:
     Didone for the mast (letterspaced hard) and for headlines (set tight, set large).
     A neutral grotesque for anything with a job: nav, labels, tables, forms.
     Four colours. One of them is hot, and it is rationed.
   ========================================================================= */

:root {
  --ink:      #0B0B0C;
  --paper:    #FFFFFF;
  --oat:      #EDE9E2;
  --oat-deep: #E2DDD4;
  --rule:     #E7E3DC;
  --hot:      #C6321E;
  --hot-wash: #F7E4DF;
  --grey:     #6F6A63;
  --grey-soft:#97918A;

  --serif: "Bodoni Moda", "Didot", "Bodoni 72", "Playfair Display", Georgia, serif;
  --sans:  "Helvetica Neue", "Inter", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  --gutter: 44px;
  --max: 1280px;
  --measure: 68ch;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Bodoni Moda is variable on opsz 6..96. Left on `auto`, a 132px headline asks
     for the 96 cut, whose hairlines round below one device pixel — the s loses its
     spine, the T crossbar breaks and the i dots float off. Pin the optical size to
     a subhead cut and the hairlines survive at every size we set. Inherited. */
  font-optical-sizing: none;
  font-variation-settings: "opsz" 20;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.wrap-narrow { max-width: 900px; margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- the working type: labels, kickers, anything with a job ---------- */
.label,
.kicker {
  font: 500 10px/1 var(--sans);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--grey-soft);
  margin: 0;
}
.kicker--hot { color: var(--hot); }
.kicker--ink { color: var(--ink); }

.rule { border: 0; border-top: 1px solid var(--rule); margin: 0; }
.rule--ink { border-top-color: var(--ink); }

/* ---------- masthead ---------- */
.mast-bar {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--rule);
}
.mast-inner {
  display: flex; align-items: baseline; gap: 30px;
  padding: 20px var(--gutter) 17px;
  max-width: var(--max); margin: 0 auto;
}
.mast {
  font: 400 27px/1 var(--serif);
  letter-spacing: .26em; text-indent: .26em;
  text-decoration: none; color: var(--ink);
  white-space: nowrap;
}
.mast-nav { display: flex; align-items: baseline; gap: 26px; margin-left: 8px; }
.mast-nav a {
  font: 500 10px/1 var(--sans);
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--grey); text-decoration: none;
  padding-bottom: 3px; border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.mast-nav a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.mast-nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--hot); }
.mast-cta { margin-left: auto; }
.mast-cta a {
  font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--paper); background: var(--ink); text-decoration: none;
  padding: 11px 16px; display: inline-block;
  transition: background .18s ease;
}
.mast-cta a:hover { background: var(--hot); }

.mast-toggle { display: none; }

/* ---------- THE ONE LINE — the hero ---------- */
.one-line { padding: 104px 0 0; }
.one-line .kicker { margin-bottom: 40px; }
.one-line h1 {
  margin: 0;
  font: 400 clamp(52px, 8.4vw, 132px)/0.95 var(--serif);
  letter-spacing: -.03em;
  max-width: 17ch;
}
.one-line h1 em { font-style: normal; color: var(--hot); }
.one-line .dek {
  margin: 40px 0 0;
  font: 400 20px/1.6 var(--sans);
  color: var(--grey);
  max-width: 52ch;
}
.one-line .by {
  margin: 30px 0 0;
  font: 500 10px/1 var(--sans); letter-spacing: .22em;
  text-transform: uppercase; color: var(--grey-soft);
}
.one-line .by a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hot); padding-bottom: 2px; }
.one-line .by a:hover { color: var(--hot); }

.hero-shot { margin-top: 64px; height: 46vh; min-height: 320px; overflow: hidden; background: var(--oat); }
.hero-shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; }

/* the three-slot strip that closes the hero — the plate's hp-strip, full size */
.strip {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px;
  border-top: 1px solid var(--rule); margin-top: 0; padding: 30px 0 0;
}
.strip a { text-decoration: none; display: block; padding-bottom: 30px; }
.strip b {
  display: block; font: 500 9px/1 var(--sans); letter-spacing: .24em;
  text-transform: uppercase; color: var(--grey-soft); margin-bottom: 12px;
}
.strip p {
  margin: 0; font: 400 24px/1.2 var(--serif); letter-spacing: -.01em;
  transition: color .18s ease;
}
.strip a:hover p { color: var(--hot); }

/* ---------- section headers ---------- */
.sec { padding: 92px 0 0; }
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 30px; border-bottom: 1px solid var(--ink); padding-bottom: 16px; margin-bottom: 42px;
}
.sec-head h2 {
  margin: 0; font: 400 clamp(30px, 3.6vw, 46px)/1 var(--serif); letter-spacing: -.02em;
}
.sec-head .more {
  font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--grey); text-decoration: none; white-space: nowrap; padding-bottom: 3px;
}
.sec-head .more:hover { color: var(--hot); }
.sec-note { margin: -26px 0 42px; font-size: 15px; color: var(--grey); max-width: var(--measure); }

/* ---------- editorial rail — how the homepage earns density below the fold ---------- */
.rail { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1px; background: var(--rule); }
.rail > * { background: var(--paper); padding: 0 0 34px; }
.rail-lead { grid-row: span 2; padding-right: 34px; }
.rail article { padding-right: 30px; }
.rail-shot { overflow: hidden; background: var(--oat); margin-bottom: 22px; }
.rail-lead .rail-shot { height: 340px; }
.rail-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.3,1); }
.rail a { text-decoration: none; display: block; }
.rail a:hover .rail-shot img { transform: scale(1.04); }
.rail h3 {
  margin: 0 0 12px; font: 400 clamp(21px, 2vw, 30px)/1.12 var(--serif); letter-spacing: -.02em;
  transition: color .18s ease;
}
.rail-lead h3 { font-size: clamp(30px, 3.2vw, 44px); }
.rail a:hover h3 { color: var(--hot); }
.rail p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--grey); max-width: 46ch; }
.rail .kicker { margin-bottom: 12px; }
.rail-side { padding-left: 34px; }
.rail-side + .rail-side { padding-left: 34px; }

/* ---------- the register rail on the homepage ---------- */
.reg-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); }
.reg-strip a {
  background: var(--paper); padding: 26px 24px 28px; text-decoration: none;
  display: flex; flex-direction: column; min-height: 190px;
  transition: background .2s ease;
}
.reg-strip a:hover { background: var(--oat); }
.reg-strip h4 { margin: 0 0 10px; font: 400 21px/1.15 var(--serif); letter-spacing: -.01em; }
.reg-strip .who { margin: 0; font-size: 13px; color: var(--grey); }
.reg-strip .pending {
  margin-top: auto; padding-top: 18px;
  font: 500 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey-soft);
}

/* ---------- the register ---------- */
.reg-tools {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  padding: 26px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--ink);
  position: sticky; top: 65px; background: var(--paper); z-index: 40;
}
.reg-search {
  flex: 1 1 280px; min-width: 200px;
  font: 400 15px/1 var(--sans); color: var(--ink);
  border: 0; border-bottom: 1px solid var(--ink); background: transparent;
  padding: 12px 2px; outline: none;
}
.reg-search::placeholder { color: var(--grey-soft); }
.reg-search:focus { border-bottom-color: var(--hot); }
.chip {
  font: 500 10px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--grey); background: transparent; border: 1px solid var(--rule);
  padding: 11px 14px; cursor: pointer; transition: all .16s ease;
}
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.reg-count {
  margin-left: auto; font: 500 10px/1 var(--sans); letter-spacing: .2em;
  text-transform: uppercase; color: var(--grey-soft); white-space: nowrap;
}

.reg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); margin-top: 1px; }
.reg-card {
  background: var(--paper); padding: 30px 28px 26px; text-decoration: none;
  display: flex; flex-direction: column; min-height: 240px;
  transition: background .2s ease;
}
.reg-card:hover { background: var(--oat); }
.reg-card .num { font: 500 9px/1 var(--sans); letter-spacing: .2em; color: var(--grey-soft); margin-bottom: 16px; }
.reg-card h3 { margin: 0 0 6px; font: 400 26px/1.1 var(--serif); letter-spacing: -.02em; }
.reg-card .loc { margin: 0 0 20px; font: 500 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey-soft); }
.reg-card dl { margin: 0; display: grid; gap: 9px; }
.reg-card dl div { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; border-bottom: 1px solid var(--rule); padding-bottom: 8px; }
.reg-card dt { font: 400 12px/1.3 var(--sans); color: var(--grey); }
.reg-card dd { margin: 0; font: 500 13px/1.3 var(--sans); text-align: right; }
.reg-card .foot {
  margin-top: auto; padding-top: 20px;
  font: 500 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey-soft);
  display: flex; justify-content: space-between; gap: 12px;
}
.reg-card .foot .go { color: var(--hot); }
.reg-empty { padding: 80px 0; text-align: center; color: var(--grey); font-size: 16px; display: none; }

/* ---------- one clinic ---------- */
.cl-head { padding: 76px 0 0; }
.cl-head .back { font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey); text-decoration: none; }
.cl-head .back:hover { color: var(--hot); }
.cl-top { display: flex; align-items: flex-start; gap: 40px; border-bottom: 1px solid var(--ink); padding: 34px 0 30px; margin-top: 26px; }
.cl-top h1 { margin: 0 0 12px; font: 400 clamp(38px, 5.6vw, 76px)/0.98 var(--serif); letter-spacing: -.03em; }
.cl-top .loc { margin: 0; font: 500 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--grey-soft); }
.cl-score { margin-left: auto; text-align: right; flex: 0 0 auto; max-width: 240px; }
.cl-score b { display: block; font: 400 64px/.85 var(--serif); color: var(--oat-deep); }
.cl-score span { display: block; margin-top: 12px; font: 500 9px/1.5 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey-soft); }

.cl-body { display: grid; grid-template-columns: 1fr 340px; gap: 70px; padding: 46px 0 0; align-items: start; }
.cl-facts { margin: 0; display: grid; gap: 0; }
.cl-facts div { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; border-bottom: 1px solid var(--rule); padding: 15px 0; }
.cl-facts dt { font: 400 14px/1.4 var(--sans); color: var(--grey); }
.cl-facts dd { margin: 0; font: 500 16px/1.4 var(--sans); text-align: right; }
.cl-facts dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hot); }
.cl-facts dd a:hover { color: var(--hot); }
.cl-facts dd .none { color: var(--grey-soft); font-weight: 400; font-style: italic; }

.cl-aside { border-top: 1px solid var(--ink); padding-top: 22px; }
.cl-aside h3 { margin: 0 0 14px; font: 400 24px/1.15 var(--serif); letter-spacing: -.01em; }
.cl-aside p { margin: 0 0 16px; font-size: 15px; line-height: 1.65; color: var(--grey); }
.cl-actions { display: grid; gap: 10px; margin-top: 24px; }
.btn {
  display: block; text-align: center; text-decoration: none;
  font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  padding: 17px 18px; border: 1px solid var(--ink); color: var(--ink); background: var(--paper);
  transition: all .18s ease; cursor: pointer;
}
.btn:hover { background: var(--ink); color: var(--paper); }
.btn--hot { background: var(--hot); border-color: var(--hot); color: var(--paper); }
.btn--hot:hover { background: var(--ink); border-color: var(--ink); }
.btn--quiet { border-color: var(--rule); color: var(--grey); }
.btn--quiet:hover { border-color: var(--ink); background: var(--paper); color: var(--ink); }
.btn[aria-disabled="true"] { border-color: var(--rule); color: var(--grey-soft); pointer-events: none; }

.cl-note {
  margin-top: 40px; padding: 26px 28px; background: var(--oat);
  font-size: 14px; line-height: 1.7; color: var(--grey);
}
.cl-note b { display: block; font: 500 9px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }

.cl-near { padding: 80px 0 0; }

/* ---------- long-form feature ---------- */
.feat-hero { padding: 84px 0 0; }
.feat-hero .kicker { margin-bottom: 34px; }
.feat-hero h1 {
  margin: 0; font: 400 clamp(44px, 7vw, 108px)/0.94 var(--serif); letter-spacing: -.03em; max-width: 18ch;
}
.feat-hero h1 em { font-style: normal; color: var(--hot); }
.feat-hero .dek { margin: 34px 0 0; font: 400 21px/1.62 var(--sans); color: var(--grey); max-width: 56ch; }
.feat-meta {
  display: flex; flex-wrap: wrap; gap: 34px; margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--rule);
  font: 500 10px/1.6 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--grey-soft);
}
.feat-meta b { color: var(--ink); font-weight: 500; }
.feat-shot { margin: 54px 0 0; height: 52vh; min-height: 340px; overflow: hidden; background: var(--oat); }
.feat-shot img { width: 100%; height: 100%; object-fit: cover; }
.feat-cap { margin: 12px 0 0; font-size: 12px; color: var(--grey-soft); }

.prose { max-width: var(--measure); margin: 0 auto; padding: 66px 0 0; }
.prose p { margin: 0 0 26px; font-size: 18.5px; line-height: 1.72; }
.prose p.lead { font-size: 22px; line-height: 1.6; }
.prose p.lead::first-letter {
  float: left; font: 400 84px/.72 var(--serif); color: var(--ink);
  padding: 8px 12px 0 0; margin-top: 2px;
}
.prose h2 {
  margin: 58px 0 22px; font: 400 clamp(27px, 3vw, 38px)/1.12 var(--serif); letter-spacing: -.02em;
}
.prose h3 { margin: 42px 0 14px; font: 500 12px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--hot); }
.prose a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hot); }
.prose a:hover { color: var(--hot); }
.prose ul, .prose ol { margin: 0 0 26px; padding-left: 22px; }
.prose li { margin-bottom: 12px; font-size: 18px; line-height: 1.68; }
.prose strong { font-weight: 600; }
.prose hr { border: 0; border-top: 1px solid var(--rule); margin: 48px 0; }

.pull {
  margin: 52px 0; padding: 0 0 0 30px; border-left: 2px solid var(--hot);
}
.pull p { margin: 0; font: 400 clamp(24px, 3vw, 34px)/1.24 var(--serif); letter-spacing: -.02em; }
.pull cite { display: block; margin-top: 16px; font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey-soft); font-style: normal; }

.stat-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule);
  margin: 52px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.stat-row div { background: var(--paper); padding: 26px 22px; }
.stat-row b { display: block; font: 400 40px/1 var(--serif); color: var(--hot); margin-bottom: 10px; letter-spacing: -.02em; }
.stat-row span { font-size: 13px; line-height: 1.5; color: var(--grey); display: block; }

.tbl { width: 100%; border-collapse: collapse; margin: 40px 0; }
.tbl caption { text-align: left; font: 500 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--grey-soft); padding-bottom: 14px; }
.tbl th {
  text-align: left; font: 500 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--grey-soft); padding: 0 14px 12px 0; border-bottom: 1px solid var(--ink);
}
.tbl th:last-child, .tbl td:last-child { text-align: right; padding-right: 0; }
.tbl td { padding: 15px 14px 15px 0; border-bottom: 1px solid var(--rule); font-size: 15px; vertical-align: top; }
.tbl td b { font-weight: 600; }
.tbl tr:hover td { background: #FBFAF8; }

.feat-end { margin: 62px 0 0; padding-top: 26px; border-top: 1px solid var(--ink); font-size: 14px; color: var(--grey); }
.feat-end b { color: var(--ink); }

/* ---------- the magazine cover, as an object ---------- */
.vol { background: var(--oat); padding: 96px 0; }
.vol-inner { display: grid; grid-template-columns: 420px 1fr; gap: 84px; align-items: center; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.cover {
  width: 100%; aspect-ratio: 3 / 4; position: relative; overflow: hidden; background: var(--paper);
  box-shadow: 0 34px 70px -30px rgba(0,0,0,.55);
}
.cover > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 100%; }
.cover .lines { position: absolute; inset: 0; }
.cov-mast {
  position: absolute; top: 6.6%; left: 0; right: 0; text-align: center;
  font: 400 clamp(30px, 3.4vw, 52px)/1 var(--serif); letter-spacing: .30em; text-indent: .30em; color: var(--ink);
}
.cov-rule { position: absolute; top: 19.4%; left: 8%; right: 8%; height: 1px; background: rgba(11,11,12,.4); }
.cov-sub {
  position: absolute; top: 21.4%; left: 0; right: 0; text-align: center;
  font: 500 9px/1 var(--sans); letter-spacing: .34em; text-transform: uppercase; color: rgba(11,11,12,.55);
}
.cov-hed {
  position: absolute; top: 32%; left: 8%; width: 60%;
  font: 400 clamp(24px, 2.9vw, 42px)/1.05 var(--serif); letter-spacing: -.02em; color: var(--ink);
}
.cov-hed em { font-style: normal; color: var(--hot); }
.cov-vol {
  position: absolute; left: 8%; bottom: 5.5%;
  font: 500 9px/1.8 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(11,11,12,.5);
}
.vol-copy h2 { margin: 0 0 26px; font: 400 clamp(34px, 4.4vw, 60px)/1.02 var(--serif); letter-spacing: -.03em; }
.vol-copy p { margin: 0 0 22px; font-size: 17px; line-height: 1.7; color: var(--grey); max-width: 50ch; }
.vol-copy .btn { display: inline-block; margin-top: 12px; }

/* ---------- contents page ---------- */
.contents { border-top: 1px solid var(--ink); }
.contents a {
  display: grid; grid-template-columns: 72px 1fr 200px; gap: 34px; align-items: baseline;
  padding: 30px 0; border-bottom: 1px solid var(--rule); text-decoration: none;
  transition: background .2s ease, padding .2s ease;
}
.contents a:hover { background: var(--oat); padding-left: 18px; padding-right: 18px; }
.contents .no { font: 400 30px/1 var(--serif); color: var(--oat-deep); }
.contents h3 { margin: 0 0 10px; font: 400 clamp(24px, 2.6vw, 36px)/1.1 var(--serif); letter-spacing: -.02em; }
.contents p { margin: 0; font-size: 15px; color: var(--grey); max-width: 60ch; }
.contents .meta { font: 500 9px/1.7 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey-soft); text-align: right; }

/* ---------- injectors ---------- */
.inj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); }
.inj-card { background: var(--paper); padding: 30px 28px; display: flex; flex-direction: column; min-height: 230px; }
.inj-card h3 { margin: 0 0 6px; font: 400 25px/1.1 var(--serif); letter-spacing: -.02em; }
.inj-card .cred { margin: 0 0 18px; font: 500 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--hot); }
.inj-card .aff { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--grey); }
.inj-card .num { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-top: 18px; border-top: 1px solid var(--rule); }
.inj-card .num b { font: 400 30px/1 var(--serif); letter-spacing: -.02em; }
.inj-card .num a { font: 500 10px/1 var(--sans); letter-spacing: .16em; color: var(--grey); text-decoration: none; }
.inj-card .num a:hover { color: var(--hot); }

/* ---------- guides ---------- */
.guide-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--rule); }
.guide-card { background: var(--paper); padding: 40px 36px 36px; text-decoration: none; display: block; transition: background .2s ease; }
.guide-card:hover { background: var(--oat); }
.guide-card h3 { margin: 0 0 14px; font: 400 clamp(28px, 3vw, 40px)/1.05 var(--serif); letter-spacing: -.025em; }
.guide-card p { margin: 0 0 24px; font-size: 15.5px; line-height: 1.65; color: var(--grey); max-width: 46ch; }
.guide-card .band { display: flex; gap: 30px; padding-top: 20px; border-top: 1px solid var(--rule); }
.guide-card .band div b { display: block; font: 500 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey-soft); margin-bottom: 8px; }
.guide-card .band div span { font: 400 20px/1 var(--serif); }

.gd-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); margin: 48px 0 0; border: 1px solid var(--rule); }
.gd-facts div { background: var(--paper); padding: 24px 22px; }
.gd-facts b { display: block; font: 500 9px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey-soft); margin-bottom: 12px; }
.gd-facts span { font: 400 24px/1.15 var(--serif); letter-spacing: -.01em; display: block; }
.gd-facts small { display: block; margin-top: 8px; font-size: 12.5px; line-height: 1.5; color: var(--grey); }

.ask { background: var(--ink); color: var(--paper); padding: 54px 46px; margin: 56px 0; }
.ask h3 { margin: 0 0 26px; font: 400 30px/1.1 var(--serif); letter-spacing: -.02em; color: var(--paper); text-transform: none; }
.ask ol { margin: 0; padding-left: 20px; }
.ask li { margin-bottom: 16px; font-size: 17px; line-height: 1.6; color: rgba(255,255,255,.82); }
.ask li b { color: var(--paper); font-weight: 600; }

.skip { border: 1px solid var(--hot); background: var(--hot-wash); padding: 30px 32px; margin: 48px 0; }
.skip b { display: block; font: 500 9px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--hot); margin-bottom: 14px; }
.skip p { margin: 0 0 12px; font-size: 16px; line-height: 1.65; }
.skip p:last-child { margin-bottom: 0; }

/* ---------- the money tool ---------- */
.tool { padding: 60px 0 0; }
.tool-dial { border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule); padding: 40px 0 44px; }
.tool-amount { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.tool-amount b { font: 400 clamp(56px, 9vw, 128px)/0.9 var(--serif); letter-spacing: -.04em; }
.tool-amount span { font: 500 10px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--grey-soft); }
input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 2px; background: var(--oat-deep); margin: 42px 0 14px; outline: none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 26px; height: 26px; border-radius: 50%; background: var(--hot); cursor: grab; border: 0; }
input[type="range"]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: var(--hot); cursor: grab; border: 0; }
input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }
.tool-ticks { display: flex; justify-content: space-between; font: 500 9px/1 var(--sans); letter-spacing: .18em; color: var(--grey-soft); }
.tool-presets { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }

.basket { display: grid; grid-template-columns: 1fr 380px; gap: 66px; padding: 52px 0 0; align-items: start; }
.basket h3 { margin: 0 0 6px; font: 400 32px/1.05 var(--serif); letter-spacing: -.02em; }
.basket .sub { margin: 0 0 28px; font-size: 15px; color: var(--grey); }
.basket-list { display: grid; }
.basket-list div { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: baseline; padding: 17px 0; border-bottom: 1px solid var(--rule); }
.basket-list .what { font-size: 16.5px; }
.basket-list .what small { display: block; margin-top: 6px; font-size: 13px; color: var(--grey); }
.basket-list .cost { font: 500 16px/1 var(--sans); white-space: nowrap; }
.basket-total { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0 0; margin-top: 6px; border-top: 1px solid var(--ink); }
.basket-total span { font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--grey-soft); }
.basket-total b { font: 400 34px/1 var(--serif); letter-spacing: -.02em; }
.basket-aside { background: var(--oat); padding: 32px 30px; }
.basket-aside h4 { margin: 0 0 14px; font: 400 22px/1.15 var(--serif); letter-spacing: -.01em; }
.basket-aside p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.66; color: var(--grey); }
.basket-aside p:last-child { margin-bottom: 0; }
.basket-aside .verdict { color: var(--ink); font-weight: 500; }

/* ---------- forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px 34px; }
.field { display: block; }
.field.full { grid-column: 1 / -1; }
.field > span {
  display: block; font: 500 9px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: var(--grey-soft); margin-bottom: 11px;
}
.field input, .field select, .field textarea {
  width: 100%; font: 400 16px/1.4 var(--sans); color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink);
  padding: 12px 2px; outline: none; border-radius: 0;
  transition: border-color .18s ease;
}
.field select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%); background-position: calc(100% - 12px) 50%, calc(100% - 7px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 28px; }
.field input:focus, .field select:focus, .field textarea:focus { border-bottom-color: var(--hot); }
.field input::placeholder { color: var(--grey-soft); }
.consent { grid-column: 1 / -1; display: flex; gap: 14px; align-items: flex-start; padding: 26px 0 0; border-top: 1px solid var(--rule); }
.consent input { margin-top: 4px; width: 17px; height: 17px; accent-color: var(--hot); flex: 0 0 auto; }
.consent span { font-size: 14.5px; line-height: 1.65; color: var(--grey); }
.form-submit { grid-column: 1 / -1; display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.form-submit .btn { min-width: 240px; }
.form-msg { font-size: 14.5px; line-height: 1.6; }
.form-msg.err { color: var(--hot); }
.form-msg.ok { color: var(--ink); }

/* ---------- newsletter ---------- */
.news { background: var(--ink); color: var(--paper); padding: 92px 0; margin-top: 100px; }
.news-inner { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1fr 440px; gap: 70px; align-items: center; }
.news h2 { margin: 0 0 18px; font: 400 clamp(30px, 4vw, 52px)/1.02 var(--serif); letter-spacing: -.03em; }
.news h2 em { font-style: normal; color: var(--hot); }
.news p { margin: 0; font-size: 16px; line-height: 1.7; color: rgba(255,255,255,.6); max-width: 48ch; }
.news form { display: flex; gap: 0; border-bottom: 1px solid rgba(255,255,255,.4); }
.news input {
  flex: 1; background: transparent; border: 0; outline: none; color: var(--paper);
  font: 400 17px/1 var(--sans); padding: 16px 2px;
}
.news input::placeholder { color: rgba(255,255,255,.4); }
.news button {
  background: transparent; border: 0; cursor: pointer; color: var(--hot);
  font: 500 10px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; padding: 16px 0 16px 20px;
}
.news button:hover { color: var(--paper); }
.news small { display: block; margin-top: 14px; font-size: 12.5px; color: rgba(255,255,255,.4); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); margin-top: 0; padding: 66px 0 80px; }
.foot-inner { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; }
.foot .mast { font-size: 22px; display: inline-block; margin-bottom: 20px; }
.foot-blurb { font-size: 14px; line-height: 1.7; color: var(--grey); max-width: 34ch; margin: 0; }
.foot h4 { margin: 0 0 18px; font: 500 9px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--grey-soft); }
.foot ul { list-style: none; margin: 0; padding: 0; }
.foot li { margin-bottom: 11px; }
.foot li a { font-size: 14px; color: var(--grey); text-decoration: none; }
.foot li a:hover { color: var(--hot); }
.foot-legal { margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 26px; flex-wrap: wrap; font-size: 12.5px; color: var(--grey-soft); }

/* ---------- 404 ---------- */
.lost { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; padding: 90px 0; }
.lost h1 { margin: 0 0 26px; font: 400 clamp(48px, 9vw, 132px)/0.94 var(--serif); letter-spacing: -.03em; max-width: 16ch; }
.lost h1 em { font-style: normal; color: var(--hot); }
.lost p { margin: 0 0 36px; font-size: 19px; line-height: 1.65; color: var(--grey); max-width: 50ch; }
.lost .btn { display: inline-block; width: max-content; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .rail { grid-template-columns: 1fr 1fr; }
  .rail-lead { grid-row: auto; grid-column: 1 / -1; padding-right: 0; }
  .rail-side { padding-left: 0; }
  .reg-grid, .inj-grid { grid-template-columns: repeat(2, 1fr); }
  .reg-strip { grid-template-columns: repeat(2, 1fr); }
  .cl-body { grid-template-columns: 1fr; gap: 44px; }
  .basket { grid-template-columns: 1fr; gap: 40px; }
  .vol-inner { grid-template-columns: 320px 1fr; gap: 48px; }
  .news-inner { grid-template-columns: 1fr; gap: 34px; }
  .foot-inner { grid-template-columns: 1fr 1fr; gap: 40px 30px; }
}

@media (max-width: 760px) {
  :root { --gutter: 22px; }
  .mast-inner { flex-wrap: wrap; gap: 14px 20px; padding: 16px var(--gutter) 14px; }
  .mast { font-size: 22px; letter-spacing: .22em; text-indent: .22em; }
  .mast-nav { order: 3; width: 100%; gap: 18px; overflow-x: auto; padding-bottom: 4px; margin-left: 0; -webkit-overflow-scrolling: touch; }
  .mast-nav::-webkit-scrollbar { display: none; }
  .mast-cta a { padding: 9px 12px; font-size: 9px; }
  .one-line { padding: 56px 0 0; }
  .one-line h1 { max-width: none; }
  .one-line .dek { font-size: 17px; }
  .hero-shot { height: 40vh; min-height: 240px; margin-top: 40px; }
  .strip { grid-template-columns: 1fr; gap: 0; }
  .strip a { padding: 22px 0; border-bottom: 1px solid var(--rule); }
  .strip a:last-child { border-bottom: 0; }
  .sec { padding: 62px 0 0; }
  .sec-head { margin-bottom: 30px; }
  .rail { grid-template-columns: 1fr; }
  .rail article { padding-right: 0; }
  .rail-lead .rail-shot { height: 240px; }
  .reg-grid, .inj-grid, .reg-strip, .guide-grid, .gd-facts, .stat-row { grid-template-columns: 1fr; }
  .reg-tools { position: static; }
  .reg-count { margin-left: 0; width: 100%; }
  .cl-top { flex-direction: column; gap: 24px; }
  .cl-score { margin-left: 0; text-align: left; }
  .contents a { grid-template-columns: 1fr; gap: 12px; }
  .contents .meta { text-align: left; }
  .contents .no { font-size: 22px; }
  .vol-inner { grid-template-columns: 1fr; }
  .cover { max-width: 340px; }
  .form-grid { grid-template-columns: 1fr; }
  .prose { padding-top: 44px; }
  .prose p { font-size: 17.5px; }
  .ask { padding: 36px 26px; }
  .foot-inner { grid-template-columns: 1fr; }
  .tbl, .tbl tbody, .tbl tr, .tbl td, .tbl th { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl tr { border-bottom: 1px solid var(--ink); padding: 14px 0; }
  .tbl td { border: 0; padding: 4px 0; }
  .tbl td:last-child { text-align: left; font-weight: 600; }
  .tbl td::before { content: attr(data-th) " "; font: 500 9px/1 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--grey-soft); display: block; margin-bottom: 5px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- appended for the frontpage build (27 Aug 2026) ----------
   Three rules the system did not have. Nothing above this line was touched.
   1. The hero closes on the three-slot strip; it needs air above the rule.
   2. A contents row that is NOT a link. The issue is not published, so the
      titles are front matter rather than destinations, and .contents a
      would have meant a link to a file that does not exist.
   3. The newsletter confirmation that replaces the form, which posts nowhere.
   ------------------------------------------------------------------- */
.hero-close { margin-top: 96px; }

.contents .entry {
  display: grid; grid-template-columns: 72px 1fr 200px; gap: 34px; align-items: baseline;
  padding: 30px 0; border-bottom: 1px solid var(--rule);
}

.news-done {
  margin: 0; padding-bottom: 10px;
  font: 400 21px/1.35 var(--serif); letter-spacing: -.01em; color: var(--paper);
  border-bottom: 1px solid rgba(255,255,255,.4);
}

@media (max-width: 760px) {
  .hero-close { margin-top: 56px; }
  .contents .entry { grid-template-columns: 1fr; gap: 12px; }
  .contents .entry .no { font-size: 22px; }
  .contents .entry .meta { text-align: left; }
}

/* The injector grid runs 19 cards, so its last row is short at every breakpoint.
   The closing note fills it rather than leaving the rule colour showing through. */
.inj-note { background: var(--oat); justify-content: center; grid-column: span 2; }
.inj-note h3 { margin-bottom: 14px; }
.inj-note .aff { margin: 0; max-width: 52ch; }
.tbl .none { color: var(--grey-soft); font-style: italic; }

@media (max-width: 1100px) { .inj-note { grid-column: span 1; } }
@media (max-width: 760px)  { .inj-note { grid-column: 1 / -1; min-height: 0; } }

/* Two things the phone breakpoint did not cover, found by looking at it at 390px.
   A <caption> inside a .tbl that has been flattened to display:block shrinks to
   the width of a word, so the register's caption stacked one word per line.
   And the mast nav scrolls sideways, so its items must not wrap. */
@media (max-width: 760px) {
  .tbl caption { display: block; width: 100%; }
  .mast-nav a { white-space: nowrap; }
}

/* ---------------------------------------------------------------------------
   The long-name pass, 28 Aug 2026.
   The brand token went from "Sheen" (5 characters) to "Waitlist Society" (16).
   Everything below is the letterspaced didone mastheads absorbing that, and
   nothing else. Written as overrides at the end so the rename stays reversible
   and the system above is untouched.
   ------------------------------------------------------------------------ */

/* The cover masthead is centred and letterspaced hard inside a 340px object.
   Sixteen characters wrap to two lines there, and at the old size the descender
   of the second line sat on the rule beneath it. Smaller, tighter, and the rule
   moves down to clear two lines instead of one. */
.cov-mast {
  font-size: clamp(17px, 1.8vw, 25px);
  line-height: 1.16;
  letter-spacing: .22em; text-indent: .22em;
  padding: 0 7%;
}
.cov-rule { top: 21.5%; }
.cov-sub  { top: 23.6%; }

/* The header masthead is nowrap by design — a masthead that breaks in half is
   not a masthead. At 390px the old 22px cut ran 253px wide, which put the row
   over the viewport with the CTA beside it and dragged every section below into
   a horizontal scroll. Smaller cut, tighter tracking, tighter row gap. */
@media (max-width: 760px) {
  .mast { font-size: 18px; letter-spacing: .11em; text-indent: .11em; }
  .mast-inner { column-gap: 12px; }
  .mast-nav { min-width: 0; }
}

/* Nothing may exceed the viewport. If a future token is longer still, this is
   the line that keeps the page readable while somebody fixes the real cause. */
html, body { max-width: 100%; }

/* --------------------------------------------------------------------------
   THE OPSZ PIN, RE-ASSERTED — and why it has to be here and !important.

   The rule on `html` at the top of this file is correct and never reached a
   single headline. Per CSS Fonts 4, the `font:` SHORTHAND resets
   font-optical-sizing and font-variation-settings to their initial values.
   This stylesheet sets type with the shorthand in 33 places, every one of
   them at a specificity that beats a later `*` rule — so Bodoni Moda went
   back to `auto`, a 132px headline asked for the opsz 96 display cut, and its
   hairlines rounded below one device pixel. That is the thin, broken masthead
   Mike photographed on 28 Aug, and it is the SECOND time this has shipped.

   Enumerating the 33 selectors would fix it until somebody writes the 34th.
   The blanket + !important is deliberate: it is the only form the shorthand
   cannot silently undo. Inter is loaded as static instances and has no opsz
   axis, so an unknown axis is ignored there.
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  font-optical-sizing: none !important;
  font-variation-settings: "opsz" 20 !important;
}