/* glp1medication.guide — neo-memphis design system (locked from riff direction-4) */
:root{
  --bg:#fff6e9; --ink:#1c1530; --paper:#ffffff;
  --pink:#ff6f91; --yellow:#ffcc4d; --mint:#5fd7c0; --purple:#e4572e;
  --muted:#6a6280; --line:#1c1530;
  --shadow:6px 6px 0 var(--ink);
  --shadow-lg:9px 9px 0 var(--ink);
  --radius:18px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Archivo',system-ui,sans-serif;overflow-x:hidden;line-height:1.6}
a{color:var(--ink)}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
/* Left edge matches the title row. Previously 780px centred, so the body
   started at x=274 while the headline started at x=24 and nothing lined up.
   The readable measure now lives on the prose itself, not on the container. */
.wrap-narrow{max-width:1280px;margin:0 auto;padding:0 24px}
.wrap-narrow > article > *{max-width:780px}
/* Quick answers are the exception: they are a card row, not prose, so they use
   the full width the title has. */
.wrap-narrow > article > .execsum,
.wrap-narrow > article > .authorbox,
.wrap-narrow > article > .quick-answers,
.wrap-narrow > article > details.faq,
.wrap-narrow > article > .note,
.wrap-narrow > article > table{max-width:none}

/* header */
header.site{position:sticky;top:0;z-index:50;border-bottom:3px solid var(--ink);
  /* Dark as of 2026-09-04. It was a half-step off --bg, which read as part of
     the page rather than as chrome; against a cream body the ink bar separates
     the navigation from the content at a glance and survives scrolling over the
     hero shapes. The lockup switches to logo-reversed.svg to match. */
  --hdr:#1c1530;
  background:var(--hdr);padding:14px 0}
header.site .mark img{display:block}
header.site nav a{color:var(--bg)}
header.site nav a:hover,header.site nav a[aria-current]{border-bottom-color:var(--yellow)}
/* Header and body share one measure. The header used to pad the ELEMENT while
   .wrap pads inside its own 1280 box, so on any viewport above 1328px the nav
   started 24px to the left of the text under it and nothing lined up. Padding
   both on the inner container fixes it at every width. */
header.site .bar,footer.site .bar{max-width:1280px;margin:0 auto;width:100%;padding:0 24px}
header.site .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
/* The hero shapes are absolutely positioned and would otherwise slide over a sticky
   header on scroll, so the header gets its own stacking context above them. */
/* Underlay for the sticky bar. Must track the header tone, not --bg, or the
   header shows its old colour the moment the page scrolls under it. */
header.site::after{content:'';position:absolute;inset:0;z-index:-1;background:var(--hdr)}
.mark{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px;display:flex;align-items:center;gap:8px;text-decoration:none}
.mark .pill{background:var(--purple);color:#fff;font-size:11px;padding:4px 9px;border-radius:100px;font-weight:600}
header.site nav{display:flex;flex-wrap:wrap;gap:18px}
header.site nav a{text-decoration:none;font-weight:700;font-size:14px;padding:4px 0;border-bottom:3px solid transparent}
header.site nav a:hover,header.site nav a[aria-current]{border-bottom-color:var(--pink)}

/* decorative shapes */
.shape{position:absolute;z-index:0;pointer-events:none}
.sq{border-radius:16px}.ci{border-radius:50%}
.tri{width:0;height:0;border-left:34px solid transparent;border-right:34px solid transparent;border-bottom:58px solid var(--pink)}

/* type */
h1,h2,h3,h4{font-family:'Space Grotesk',sans-serif;line-height:1.08;margin:0 0 14px}
h1{font-weight:700;font-size:clamp(32px,5.4vw,58px)}
h2{font-weight:700;font-size:clamp(23px,3vw,32px);margin-top:44px}
h3{font-weight:700;font-size:19px;margin-top:28px}
.hi{background:var(--pink);padding:0 10px;border-radius:8px;display:inline-block;transform:rotate(-1.5deg)}
.hi-y{background:var(--yellow);padding:0 8px;border-radius:6px}
.lede{font-size:18px;font-weight:500;max-width:60ch}
.eyebrow{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--purple);margin:0 0 10px}
.muted{color:var(--muted)}
small,.small{font-size:13px}

/* hero */
.hero{position:relative;padding:52px 24px 44px;z-index:2}
.hero .lede{margin-top:6px}

/* blocks */
.card{--card-pad:22px;background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);padding:var(--card-pad);box-shadow:var(--shadow);position:relative;z-index:2}
.card.tight{padding:16px}
/* Full-bleed illustration band at the top of a home-page card. The card has
   22px of padding, so the image pulls back out of it with a negative margin
   rather than the card losing its padding for every other child. Radius is the
   card's minus its 3px border, or the corner shows a sliver of paper. */
/* <picture> is inline, so a percentage width on the <img> inside resolves
   against the shrink-wrapped picture box, not the card. On mobile that pushed
   the band out past the card's right border. display:contents removes the
   picture from layout entirely and lets the img be the card's own child. */
.card picture{display:contents}
.card-img{display:block;width:calc(100% + var(--card-pad) * 2);
  margin:calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 18px;height:170px;
  object-fit:cover;border-bottom:3px solid var(--ink);
  border-radius:calc(var(--radius) - 3px) calc(var(--radius) - 3px) 0 0}
.card-wide .card-img{height:150px}
@media(max-width:620px){.card-img{height:140px}}
/* Card tags. NOT .chip: that is a pressable filter control with a 3px border and
   a pointer cursor, and these are labels you cannot click. */
.tags{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;padding:0;list-style:none}
.tag{border:2px solid var(--ink);border-radius:100px;padding:3px 10px;font-size:12px;
  font-weight:700;line-height:1.5;background:var(--paper);white-space:nowrap}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.g3,.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}

.badge{display:inline-block;font-weight:800;font-size:12px;padding:4px 11px;border-radius:100px;border:2px solid var(--ink)}
.b-yes{background:var(--mint)}.b-some{background:var(--yellow)}.b-no{background:var(--pink);color:#fff}
.b-flat{background:var(--paper)}
.b-purple{background:var(--purple);color:#fff}

/* forms / controls */
label{display:block;font-weight:700;font-size:13px;margin:0 0 6px}
input[type=number],input[type=text],select{width:100%;border:3px solid var(--ink);border-radius:12px;padding:11px 13px;font-family:inherit;font-size:15px;font-weight:600;background:var(--paper);color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--purple);height:26px}
.btn{border:3px solid var(--ink);background:var(--yellow);border-radius:100px;padding:12px 22px;font-weight:800;font-family:'Space Grotesk',sans-serif;font-size:15px;cursor:pointer;box-shadow:4px 4px 0 var(--ink);transition:transform .12s,box-shadow .12s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.btn.alt{background:var(--mint)}
.btn.ghost{background:var(--paper)}
.field{margin-bottom:16px}
.hint{font-size:12px;font-weight:500;color:var(--muted);margin-top:5px}

/* toggle chips */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{border:3px solid var(--ink);background:var(--paper);border-radius:100px;padding:8px 14px;font-weight:700;font-size:13px;cursor:pointer;user-select:none;font-family:inherit}
.chip[aria-pressed=true]{background:var(--mint);box-shadow:3px 3px 0 var(--ink)}

/* newsletter signup */
.signup{background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);
  padding:26px 26px 22px;box-shadow:var(--shadow);margin:38px 0 8px}
.signup h2{margin:6px 0 10px;font-size:clamp(21px,3.4vw,27px)}
.signup-lede{margin:0 0 12px;font-size:15px}
.signup-anti{margin:0 0 18px;font-size:14px;color:var(--muted)}
.signup-anti strong{color:var(--ink)}
.signup-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.signup-input{flex:1 1 260px;min-width:0;border:3px solid var(--ink);border-radius:100px;
  padding:11px 18px;font-family:inherit;font-size:15px;font-weight:600;
  background:var(--bg);color:var(--ink)}
.signup-form .btn{flex:0 0 auto}
.signup-msg{flex:1 0 100%;margin:2px 0 0;font-size:14px;font-weight:700;min-height:1px}
.signup-msg.ok{color:var(--ink)}
.signup-msg.err{color:var(--pink)}
.signup-fine{margin:14px 0 0;font-size:12px;color:var(--muted);line-height:1.6}
/* Honeypot. Off-screen rather than display:none: some bots skip hidden inputs
   but happily fill one that is merely positioned away. */
.signup .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.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}
@media(max-width:620px){
  .signup{padding:20px 17px 18px}
  .signup-form .btn{width:100%}
}

/* results */
.result{background:var(--ink);color:#fff;border-radius:var(--radius);padding:24px;border:3px solid var(--ink)}
.result h3{color:#fff;margin-top:0}
.bignum{font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:clamp(34px,6vw,54px);line-height:1;display:block}
.result .unit{font-size:16px;font-weight:600;opacity:.8}
.readout{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:620px){.readout{grid-template-columns:1fr}}

/* tables */
table{width:100%;border-collapse:collapse;background:var(--paper);border:3px solid var(--ink);border-radius:var(--radius);overflow:hidden;font-size:14px}
th,td{padding:10px 12px;text-align:left;border-bottom:2px solid #e7e2f0}
th{background:var(--yellow);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:13px}
tr:last-child td{border-bottom:none}

/* callouts */
.note{border:3px solid var(--ink);border-radius:14px;padding:14px 16px;background:var(--paper);margin:20px 0;font-size:14px;font-weight:500}
/* The coloured left rail is gone on purpose. It is the default look of every
   generated explainer on the internet and it read as exactly that. The note
   types now differ by the colour of their lead-in strong, which is the part a
   reader is looking at anyway. */
.note.warn > strong:first-child{color:var(--pink)}
.note.info > strong:first-child{color:var(--ink)}
.note.key > strong:first-child{color:var(--purple)}
.note strong{font-family:'Space Grotesk',sans-serif}

/* evidence tiers */
.tier{font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:3px 9px;border-radius:100px;border:2px solid var(--ink)}
.t-strong{background:var(--mint)}.t-moderate{background:var(--yellow)}.t-weak{background:#e9e4f5}.t-none{background:var(--pink);color:#fff}

/* faq */
details.faq{border:3px solid var(--ink);border-radius:14px;background:var(--paper);padding:0;margin:12px 0;box-shadow:4px 4px 0 var(--ink)}
details.faq summary{cursor:pointer;padding:14px 16px;font-weight:700;font-family:'Space Grotesk',sans-serif;list-style:none}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:'+';float:right;font-weight:800}
details.faq[open] summary::after{content:'–'}
details.faq .body{padding:0 16px 16px;font-size:15px}

/* link lists */
.linklist{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.linklist a{display:block;text-decoration:none;background:var(--paper);border:3px solid var(--ink);border-radius:14px;padding:13px 16px;font-weight:700;box-shadow:4px 4px 0 var(--ink);transition:transform .12s}
.linklist a:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.linklist .sub{display:block;font-weight:500;font-size:13px;color:var(--muted);margin-top:3px}

/* sources */
.sources{font-size:13px;padding-left:20px}
.sources li{margin-bottom:6px}

/* disclaimer + footer */
.disclaimer{background:var(--purple);color:#fff;border:3px solid var(--ink);border-radius:var(--radius);padding:18px 20px;font-size:14px;font-weight:600;margin:36px 0}
/* Footer runs on the display face (design/tokens.json font-family/display),
   not the body face. Archivo 400 at 13px on a dark ground reads flat and
   dated; Space Grotesk 500 with slightly tighter tracking is the same two-font
   system, just the other half of it. No third family, no extra font request. */
footer.site{background:var(--ink);color:#fff;padding:30px 24px;margin-top:60px;font-family:'Space Grotesk',sans-serif;font-size:13px;font-weight:500;letter-spacing:-.005em}
footer.site a{color:var(--yellow)}
footer.site .cols{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:760px){footer.site .cols{grid-template-columns:repeat(2,1fr)}}
footer.site h4{color:#fff;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;margin:0 0 12px}
footer.site ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
footer.site ul a{text-decoration:none;color:#d9d2ee;font-weight:500}
footer.site ul a:hover{color:var(--yellow)}
.footnote{max-width:1280px;margin:26px auto 0;padding-top:18px;border-top:1px solid #443c60;color:#a99fc4;letter-spacing:-.005em}
article p{max-width:68ch}


/* ---------------------------------------------------------------
 * Mobile. The neo-memphis borders and offset shadows are the identity,
 * so they stay; what shrinks is padding, type scale and the shadow offset,
 * because a 9px offset on a 360px viewport eats real width.
 * ------------------------------------------------------------- */
@media (max-width: 760px){
  :root{--shadow:4px 4px 0 var(--ink);--shadow-lg:6px 6px 0 var(--ink)}
  .wrap,.wrap-narrow,header.site .bar,footer.site .bar{padding:0 16px}
  header.site{padding:11px 16px}
  header.site nav{gap:13px;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px}
  header.site nav::-webkit-scrollbar{display:none}
  header.site nav a{font-size:13px;white-space:nowrap}
  .hero{padding:30px 16px 26px}
  h1{font-size:clamp(27px,7.4vw,38px)}
  h2{font-size:clamp(20px,5.4vw,25px);margin-top:32px}
  h3{font-size:17px}
  .lede{font-size:16px}
  .card{--card-pad:17px;box-shadow:4px 4px 0 var(--ink)}
  .card:hover{transform:none;box-shadow:4px 4px 0 var(--ink)}
  .btn{width:100%;box-shadow:3px 3px 0 var(--ink)}
  .linklist a{box-shadow:3px 3px 0 var(--ink)}
  .linklist a:hover{transform:none;box-shadow:3px 3px 0 var(--ink)}
  details.faq{box-shadow:3px 3px 0 var(--ink)}
  .note{padding:12px 13px}
  .disclaimer{padding:15px 16px}
  article p{max-width:none}
  /* Decorative shapes are noise at phone width and push the layout around. */
  .shape{display:none}
  .hero .s1,.hero .s2,.hero .s3{display:none}
  footer.site{padding:24px 16px}
}
@media (max-width: 420px){
  h1{font-size:clamp(24px,8vw,31px)}
  .readout{gap:13px}
  .bignum{font-size:30px}
}
/* Respect a user's motion preference: every hover here is a transform. */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important}
  .card:hover,.linklist a:hover,.btn:hover{transform:none}
}

/* Wide tables (the peptides tier table is 5 columns of prose) blow past the
   viewport well before phone width. Scroll them from tablet down rather than
   letting them widen the page and produce a horizontal scrollbar on the body. */
@media (max-width: 1100px){
  table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}
  th,td{padding:9px 11px}
  /* The hero shapes are absolutely positioned outside the content column by
     design. Above 1100px there is gutter for them; below it they stick out past
     the viewport and give the whole page a horizontal scrollbar. They are
     decoration, so they go rather than the layout bending around them.
     Using overflow-x:hidden on body instead would create a scroll container
     and break the sticky header. */
  .shape{display:none}
}
@media (max-width: 760px){
  table{font-size:13px;white-space:nowrap}
  th,td{padding:8px 10px}
}


/* ---------------------------------------------------------------
 * Clinician-contact block. Every other section on the page is there to
 * be read; this one is there to be noticed by someone skimming, because
 * it is the block that says stop and phone a doctor. It gets the pink
 * accent (used nowhere else at this size), a full border, its own
 * background and a marker in the margin.
 * ------------------------------------------------------------- */
.redflag{
  border:3px solid var(--ink);
  border-radius:var(--radius);
  background:#fff2f5;
  padding:22px 24px 20px;
  margin:38px 0;
  box-shadow:var(--shadow);
}
.redflag h2{
  margin:0 0 12px;
  font-size:clamp(19px,2.4vw,24px);
  display:flex;align-items:center;gap:11px;
}
.redflag .rf-icon{
  flex:0 0 auto;width:30px;height:30px;border-radius:50%;
  background:var(--pink);color:#fff;border:3px solid var(--ink);
  font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:17px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
}
.redflag ul{margin:0;padding-left:22px}
.redflag li{margin-bottom:7px;font-weight:500}
.redflag li::marker{color:var(--pink);font-weight:800}
.redflag p{max-width:none}
.redflag p:last-child,.redflag ul:last-child{margin-bottom:0}
.redflag .note{background:#fff;margin:14px 0 0}
@media (max-width:760px){
  .redflag{padding:17px 16px 15px;margin:28px 0}
  .redflag h2{font-size:18px;gap:9px}
  .redflag .rf-icon{width:26px;height:26px;font-size:15px}
}
@media print{ .redflag{break-inside:avoid} }

/* ============ Search ============
   The header is position:sticky at z-index 50, so the overlay must clear it.
   No backdrop blur: the neo-memphis idiom is hard edges and flat fills, and a
   blur reads as a different design system bolted on. */
.search-trigger{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:13px;
  color:var(--ink);background:var(--paper);
  border:3px solid var(--ink);border-radius:100px;padding:6px 12px;
  box-shadow:3px 3px 0 var(--ink);transition:transform .08s,box-shadow .08s;
}
.search-trigger:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.search-trigger:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.search-trigger kbd{
  font-family:inherit;font-size:11px;font-weight:700;background:var(--yellow);
  border:2px solid var(--ink);border-radius:5px;padding:0 5px;line-height:1.5;
}

.search-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(28,21,48,.45);
  display:flex;align-items:flex-start;justify-content:center;
  padding:9vh 20px 20px;
}
.search-overlay[hidden]{display:none}
.search-panel{
  width:100%;max-width:640px;background:var(--paper);
  border:3px solid var(--ink);border-radius:var(--radius);box-shadow:var(--shadow-lg);
  padding:18px;max-height:78vh;display:flex;flex-direction:column;
}
.search-input{
  width:100%;box-sizing:border-box;font-family:'Space Grotesk',sans-serif;
  font-size:18px;font-weight:500;color:var(--ink);background:var(--bg);
  border:3px solid var(--ink);border-radius:12px;padding:12px 14px;outline:none;
}
.search-input:focus{border-color:var(--purple)}
.search-input::placeholder{color:#7a7290;font-weight:400}

.search-results{list-style:none;margin:14px 0 0;padding:0;overflow-y:auto}
.search-results li{margin:0 0 8px}
.search-results a{
  display:flex;align-items:flex-start;gap:10px;text-decoration:none;
  border:3px solid var(--ink);border-radius:12px;padding:10px 12px;background:var(--paper);
}
.search-results li[aria-selected="true"] a{background:var(--yellow);box-shadow:3px 3px 0 var(--ink)}
.sr-kind{
  flex:0 0 auto;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  border:2px solid var(--ink);border-radius:100px;padding:1px 7px;margin-top:2px;
}
.sr-article{background:var(--mint)} .sr-hub{background:var(--pink)} .sr-tool{background:var(--purple);color:#fff}
.sr-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
.sr-title{font-weight:700;font-size:14px;line-height:1.35}
.sr-sub{font-size:12px;color:#5b5473;line-height:1.4}
.sr-cluster{flex:0 0 auto;font-size:11px;font-weight:700;color:#7a7290;margin-top:3px}
.search-empty{margin:14px 2px 0;font-size:14px;color:#5b5473}
.search-hint{margin:12px 2px 0;font-size:11px;color:#7a7290;display:flex;gap:6px;align-items:center}
.search-hint kbd{
  font-family:inherit;font-weight:700;background:var(--bg);
  border:2px solid var(--ink);border-radius:4px;padding:0 4px;
}

@media (max-width:760px){
  /* The trigger label costs more than it earns on a wrapped mobile header. */
  .search-trigger span,.search-trigger kbd{display:none}
  .search-trigger{padding:7px 9px}
  .search-overlay{padding:0}
  /* The cluster label costs ~90px of a 390px row and pushes every title to
     three or four lines. The kind badge already says what the result is. */
  .sr-cluster{display:none}
  .search-panel{max-width:none;height:100%;max-height:none;border-radius:0;border-width:0 0 3px}
  .search-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .search-trigger{transition:none}
}

/* Title row: image beside the headline, not beneath it.
   Stacked, the hero pushed the opening paragraph below the fold at 1280x1000,
   so the page led with decoration instead of its subject. */
.title-row{display:flex;gap:34px;align-items:center}
.title-row .title-col{flex:1 1 auto;min-width:0}
.title-row .hero-col{flex:0 0 340px;max-width:340px}

/* Hero image. Decorative only — alt="" and role="presentation", because the
   illustration carries no information the prose does not. Anything that carries
   data is a programmatic diagram, not a generated picture. */
.page-hero{
  display:block;width:100%;height:auto;aspect-ratio:1200/624;
  border:3px solid var(--ink);border-radius:var(--radius);
  box-shadow:var(--shadow);background:var(--paper);
}
/* On a cluster hub the wrap is full width, so an unconstrained .page-hero
   renders ~880px tall and pushes every link on the page below the fold. Capped
   by WIDTH, not by object-fit:cover: cropping is what beheaded these objects on
   the cards, and the hub image is the same illustration. */
.hero .page-hero{max-width:520px;margin:22px 0 0}

@media (max-width:900px){
  /* Two columns stack here, not at 760: a 340px image beside a headline is
     already cramped at 800px. The hero moves AFTER the title so the headline
     still leads. */
  .title-row{flex-direction:column;align-items:stretch;gap:16px}
  .title-row .hero-col{flex:1 1 auto;max-width:none;order:2}
  .title-row .title-col{order:1}
}

/* Quick answers. First thing under the headline, because the commonest visit
   is one question deep and the answer should not be four scrolls away. */
.quick-answers{margin:0 0 34px}
.qa-head{font-size:15px !important;letter-spacing:.12em;text-transform:uppercase;
  color:var(--purple);margin:0 0 14px !important}
.qa-grid{list-style:none;margin:0;padding:0;display:grid;gap:14px;grid-template-columns:repeat(3,1fr);align-items:stretch}
.qa-card{
  border:3px solid var(--ink);border-radius:14px;background:var(--paper);
  box-shadow:4px 4px 0 var(--ink);padding:14px 16px 12px;
  display:flex;flex-direction:column;
}
/* Expander, so the short answer stays short and the full one is one click away
   rather than a scroll away. These questions are omitted from the block further
   down the page, so this is the only copy of the full text. */
.qa-full{margin-top:auto}
.qa-full summary{
  cursor:pointer;list-style:none;font-size:12px;font-weight:700;color:var(--purple);
  border-bottom:2px solid var(--yellow);display:inline-block;padding-bottom:1px;
}
.qa-full summary::-webkit-details-marker{display:none}
.qa-full summary::after{content:' ▾'}
.qa-full[open] summary::after{content:' ▴'}
.qa-full summary:hover{border-bottom-color:var(--pink)}
.qa-full .body{font-size:14px;line-height:1.6;margin-top:10px;color:#3b3552}
.qa-full .body p{margin:0 0 10px}
.qa-full .body p:last-child{margin-bottom:0}
.qa-q{margin:0 0 6px;font-weight:700;font-size:15px;line-height:1.35}
/* Fixed block so the expander sits at the same height in all three cards.
   align-items:start plus content-sized answers put 'read the full answer' at
   three different heights, which reads as a rendering fault rather than a
   design. min-height holds the row; .qa-full keeps margin-top:auto. */
.qa-a{margin:0 0 8px;font-size:14px;line-height:1.5;color:#4a4363;min-height:6.3em}
.qa-more{
  font-size:12px;font-weight:700;color:var(--purple);text-decoration:none;
  border-bottom:2px solid var(--yellow);
}
.qa-more:hover{border-bottom-color:var(--pink)}

@media (max-width:760px){
  /* These two lost their @media opener when the title-row stacking rules were
     moved out of this block: the declarations then applied at every width and
     the orphaned closing brace made everything after it dead CSS, which is why
     the 1080px card breakpoint silently never fired. */
  .page-hero{border-radius:12px;box-shadow:4px 4px 0 var(--ink)}
  .qa-card{box-shadow:3px 3px 0 var(--ink)}
}

@media (max-width:1080px){
  /* Three cards need ~300px each to avoid a two-word-per-line question. */
  .qa-grid{grid-template-columns:1fr}
  /* One per row: nothing to align against, so let the answer size itself. */
  .qa-a{min-height:0}
}

/* Brand marks. The header lockup replaced a text wordmark, so .mark no longer
   needs its type rules; they stay harmless for any fallback text. */
.mark img{display:block;height:54px;width:auto}
.site-footer .foot-mark,footer.site .foot-mark{height:34px;width:auto;margin-bottom:18px;opacity:.95}
@media(max-width:600px){.mark img{height:40px}}

/* Executive summary. Built from the page's own established key_facts rather than
   written separately, so it cannot drift from the body: it IS the body's
   evidence, hoisted. Sits above the quick answers because a reader who reads
   nothing else should still leave with the sourced claims. */
.execsum{border:3px solid var(--ink);border-radius:14px;background:var(--paper);
  box-shadow:4px 4px 0 var(--ink);padding:16px 18px 14px;margin:0 0 22px}
.execsum-head{font-family:'Space Grotesk',sans-serif;font-size:15px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin:0 0 10px}
.execsum ul{margin:0;padding-left:20px}
.execsum li{margin:0 0 8px;font-size:15px;line-height:1.5}
.execsum li:last-child{margin-bottom:0}

/* Provenance box. Carries a real byline as of 2026-09-04: Thomas Prommer, named
   because he is the actual publisher, linked to his entity home on prommer.net,
   with the same tagline used verbatim on the other properties so the three sites
   corroborate one identity rather than describing three similar people.
   The rule this box was built on has not changed: no invented author, no
   fabricated credential. A byline says who did the research; the
   "not clinically reviewed" line directly below says no clinician checked it,
   and both statements are true at once. */
.authorbox{border:3px solid var(--ink);border-radius:14px;background:var(--bg);
  padding:15px 17px;margin:26px 0 0}
.authorbox-head{font-family:'Space Grotesk',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink);margin:0 0 8px}
.authorbox p{margin:0 0 6px}
.authorbox p:last-child{margin-bottom:0}
/* Topline byline: the quiet one, under the H1. Muted and small on purpose —
   see topline_byline() in gen.py. The foot-of-page credit is the prominent one. */
.topline{font-size:13px;line-height:1.5;color:var(--muted,#6b7280);margin:6px 0 0;
  font-weight:400;letter-spacing:.01em}
.topline a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.authorbox .byline{font-weight:600}
.authorbox .byline a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

@media (max-width:760px){
  .execsum{box-shadow:3px 3px 0 var(--ink);padding:14px 15px 12px}
}

/* Floating table of contents.
   Positioned in the gutter the 780px prose measure already leaves inside the
   1280px column, so it costs no layout: the article does not move to make room
   for it. Hidden below 1180px rather than reflowed above the article, because a
   horizontal TOC is one more thing to scroll past on the viewport that can least
   afford it, and the page already opens with an executive summary. */
.toc{position:sticky;top:96px;float:right;width:280px;margin:0 0 20px 32px;
  border:3px solid var(--ink);border-radius:14px;background:var(--paper);
  box-shadow:4px 4px 0 var(--ink);padding:14px 16px;max-height:calc(100vh - 140px);
  overflow-y:auto}
.toc-head{font-family:'Space Grotesk',sans-serif;font-size:12px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin:0 0 10px}
.toc ul{list-style:none;margin:0;padding:0}
.toc li{margin:0 0 9px;line-height:1.35}
.toc li:last-child{margin-bottom:0}
.toc a{font-size:13px;color:var(--ink);text-decoration:none;border-bottom:2px solid transparent}
.toc a:hover{border-bottom-color:var(--purple)}
.toc a.here{font-weight:700;border-bottom-color:var(--purple)}

/* A float only pushes INLINE content. The executive summary, quick-answer row
   and callouts are full-width block boxes, so they ran underneath the TOC rather
   than beside it: correct float behaviour, wrong result. The article is indented
   instead, which is also the honest answer to "boxes at 1280": with a TOC on the
   page the content column genuinely is narrower, and pretending otherwise is
   what caused the overlap. */
@media (min-width:1181px){
  .wrap-narrow.has-toc > article{margin-right:312px}
}
@media (max-width:1180px){ .toc{display:none} }

/* Sticky header is 3px-bordered and ~72px tall; without this an anchor jump
   lands with the heading hidden underneath it. */
h2[id]{scroll-margin-top:96px}

/* Not-clinically-reviewed line. Deliberately legible rather than fine print:
   the whole point is that a reader who assumes a clinician checked this should
   stop assuming it. Pink is the site's warning colour and is used nowhere else
   inside the provenance box. */
.authorbox .notrev{border-top:2px solid var(--ink);margin-top:10px;padding-top:9px}
.authorbox .notrev strong{color:var(--pink)}


/* About page author card. 4x5 portrait, fixed aspect so the text column does
   not reflow while the image loads. */
.authorcard{display:grid;grid-template-columns:200px 1fr;gap:22px;align-items:start;
  border:3px solid var(--ink);border-radius:var(--radius);background:var(--paper);
  padding:18px;margin:0 0 22px;box-shadow:var(--shadow)}
.authorcard-photo{width:200px;height:250px;object-fit:cover;border-radius:12px;
  border:3px solid var(--ink);display:block}
.authorcard-name{font-family:'Space Grotesk',sans-serif;font-size:22px;font-weight:700;margin:0 0 2px}
.authorcard-tag{font-size:15px;color:var(--muted);margin:0 0 10px}
@media (max-width:640px){
  .authorcard{grid-template-columns:1fr}
  .authorcard-photo{width:100%;height:auto;aspect-ratio:4/5}
}

/* Hand-authored long-form pages (/about/, /privacy/) sit in .wrap, which is
   1280 wide because hubs need it. Unconstrained that gives ~1170px lines, about
   double a readable measure. The measure goes on the prose, not the container,
   so the h1 above still lines up with the header. */
main.prose > *{max-width:780px}
main.prose > .authorcard{max-width:780px}