/* ============================================================================
   ODNews — Pacific Cataract and Laser Institute quarterly eNewsletter
   Desktop build (1024 px) from Figma file ccj0RYWP39AKvDf5t0swHN
     page 1 — node 2:21  "ODNews Fall 2026"
     page 2 — node 5:276 "Help Patients Explore RLE"
   Mobile layout is added later as a media-query layer; the markup is already
   ordered semantically so it can reflow.
   ========================================================================= */

/* ---------- Typeface: Source Sans Pro (self-hosted, OFL) ---------------- */
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 300;
  font-display: swap; src: url("../assets/fonts/source-sans-pro-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("../assets/fonts/source-sans-pro-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: italic; font-weight: 400;
  font-display: swap; src: url("../assets/fonts/source-sans-pro-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("../assets/fonts/source-sans-pro-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Source Sans Pro"; font-style: normal; font-weight: 700;
  font-display: swap; src: url("../assets/fonts/source-sans-pro-latin-700-normal.woff2") format("woff2"); }

/* ---------- Tokens ------------------------------------------------------ */
:root {
  --page-w:        1024px;
  --margin:        104px;   /* outer page margin used by masthead + footer   */

  --ink:           #000000;
  --heading:       #04789e; /* section headings, social icons                */
  --title:         #2673b5; /* page-2 display title                          */
  --cyan:          #00abc7; /* pcli.com link, active nav                     */
  --cyan-line:     #00abc8; /* podcast pill border                           */
  --orange:        #fa6900; /* buttons                                       */
  --orange-dark:   #ee5300; /* button hover (Figma button/Variant2)          */
  --red:           #ff4c37; /* Questions marker                              */
  --cream:         #f7f5ef; /* about-the-author band                         */
  --rule:          #d8d8d8; /* hairlines on white                            */
  --rule-reverse:  #ffffff; /* hairlines on black                            */

  --font: "Source Sans Pro", "Source Sans 3", "Segoe UI", Helvetica, Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;
}

/* ---------- Base -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: #ffffff;
  color: var(--ink);
  font: 400 16px/2 var(--font);
  letter-spacing: -0.8px;
  overflow-x: hidden;               /* contains the full-bleed band edges   */
}

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

a { color: inherit; }

p { margin: 0; }

/* The fixed 1024 px canvas the Figma frames are drawn on. */
.page {
  width: var(--page-w);
  margin: 0 auto;
  position: relative;
}

/* ---------- Full-bleed bands -------------------------------------------- */
/* The canvas stays 1024 px so every element keeps its Figma coordinate, but
   the coloured bands run the full width of the browser. */
.bleed { position: relative; }

.bleed::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  background: inherit;
  z-index: -1;
}

/* ---------- Shared type ------------------------------------------------- */
.h-section {                       /* 24 px section heads, e.g. "Conclusion" */
  margin: 0;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.36;               /* matches the ~32.5 px box Figma renders */
  letter-spacing: -1.2px;
  color: var(--heading);
}

.body-copy p + p            { margin-top: 18px; }
.body-copy p + .h-section   { margin-top: 18px; }
.body-copy .h-section + p   { margin-top: 0; }
/* .tight = a block Figma sets to 0 bottom margin */
.body-copy .tight + p { margin-top: 0; }

.eyebrow {                          /* 12 px semibold caps                   */
  font-size: 12px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: normal;
  text-transform: uppercase;
}

/* ---------- Masthead (page 1) ------------------------------------------- */
.masthead {
  position: relative;
  height: 270px;
  background: #000;
  text-align: center;
}

.masthead__wordmark {
  width: 453px;
  height: 14.38px;
  margin: 0 auto;
  padding-top: 54px;
  box-sizing: content-box;
}

.masthead__banner {
  width: 816px;
  height: 153px;
  margin: 14.62px auto 0;
}

.masthead__meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 28px;
  margin-top: 6px;
  color: #fff;
  font-size: 12px;
  line-height: normal;
  letter-spacing: normal;
}

.masthead__meta .rule-v { height: 28px; }

/* ---------- Masthead (page 2, compact) ---------------------------------- */
.masthead--compact {
  position: relative;
  height: 86px;
  background: #000;
  text-align: left;
}

.masthead--compact .masthead__banner {
  position: absolute;
  left: var(--margin);
  top: 46px;
  width: 219px;
  height: 41px;
  margin: 0;
}

.masthead--compact .masthead__wordmark {
  position: absolute;
  left: 335px;
  top: 65px;
  width: 315px;
  height: 10px;
  margin: 0;
  padding: 0;
}

/* ---------- Issue menu (mobile only) ------------------------------------ */
/* The hamburger and its panel are a mobile affordance; on the 1024 px canvas
   the Figma design is the source of truth, so both stay hidden. */
.menu-toggle,
.menu { display: none; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- Hairlines --------------------------------------------------- */
.rule-v { width: 1px; background: var(--rule); flex: none; }
.rule-v--reverse { background: var(--rule-reverse); }
.rule-h { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* ---------- Editor strip (page 1) --------------------------------------- */
.editor {
  position: relative;
  height: 183px;
  border-bottom: 1px solid var(--rule);
}

.editor__portrait {
  position: absolute;
  top: -21px;                       /* overlaps the black masthead          */
  right: 104px;
  width: 147px;
  height: 204px;
  object-fit: cover;
  object-position: center top;
}

.editor__text {
  margin-left: 187px;
  padding-top: 27px;
  width: 566px;
}

.editor__note {
  font-size: 15px;
  font-weight: 300;
  line-height: normal;
  letter-spacing: normal;
}

.editor__note b { font-weight: 700; }

.editor__sign {
  margin-top: 0;
  text-align: right;
  line-height: normal;
  letter-spacing: normal;
}

.editor__sign .name { display: block; font-size: 18px; }
.editor__sign .place { display: block; font-size: 12px; font-weight: 600; }

/* ---------- Nav bar ----------------------------------------------------- */
.nav {
  display: flex;
  align-items: center;
}

.nav a,
.nav span {
  padding: 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: normal;
  text-decoration: none;
  white-space: nowrap;
}

.nav .rule-v { height: 31px; }
.nav .is-current { color: var(--cyan); }

/* ---------- Page-2 head block ------------------------------------------- */
.masthead-block {
  position: relative;
  height: 148px;                    /* 86 → 234                             */
  border-bottom: 1px solid var(--rule);
}

.masthead-block .nav { position: absolute; left: var(--margin); top: 8px; }

.masthead-block__portrait {
  position: absolute;
  right: 104px;
  top: 0;
  width: 107px;
  height: 148px;
  object-fit: cover;
  object-position: center top;
}

.masthead-block__eyebrow { position: absolute; left: 114px; top: 128px; }

.masthead-block__byline {
  position: absolute;
  right: 223px;
  top: 77px;                        /* y 163                                */
  text-align: right;
  line-height: normal;
  letter-spacing: normal;
}

.masthead-block__byline .name { display: block; font-size: 18px; }
.masthead-block__byline .role { display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; }

.masthead-block__byline .email {
  display: block;
  font-size: 14px;
  color: var(--cyan);
  text-decoration: none;
}

/* ---------- Author byline (page 1) -------------------------------------- */
.byline {
  display: flex;
  align-items: stretch;
  gap: 11px;
  font-size: 14px;
  line-height: normal;
  letter-spacing: -0.7px;
  text-transform: uppercase;
}

.byline .by { font-family: var(--serif); font-style: italic; }
.byline .who { font-weight: 600; }
.byline .rule-v { align-self: stretch; }

/* ---------- Article (page 1 two-column body) ---------------------------- */
.article {
  position: relative;
  z-index: 1;                       /* closing copy sits over the photo band */
  height: 3448px;                   /* 453 → 3901                           */
}

/* Display headline (page 1) */
.article__title {
  position: absolute;
  left: 96px;
  top: 62px;                        /* y 515                                */
  width: 740px;
  margin: 0;
  font-size: 117px;
  font-weight: 400;
  line-height: 80px;
  letter-spacing: -5.85px;
  color: var(--title);
}

.article__subtitle {
  position: absolute;
  left: 105px;
  top: 234px;                       /* y 687                                */
  width: 813px;
  margin: 0;
  font-size: 59px;
  font-weight: 400;
  line-height: 80px;
  letter-spacing: -2.95px;
  color: var(--ink);
}

.article__divider {                 /* vertical hairline at x = 344         */
  position: absolute;
  left: 344px;
  top: 398px;
  width: 1px;
  height: 1122px;
  background: var(--rule);
}

.article__byline { position: absolute; left: 189px; top: 337px; }

.article__hero {
  position: absolute;
  left: 0;
  top: 372px;
  width: 344px;
  height: 606px;
  object-fit: cover;
  object-position: left center;
}

.article__aside {                   /* "Life After Reading Glasses"          */
  position: absolute;
  left: 105px;
  top: 1014px;
  width: 230px;
}

.article__podcast { position: absolute; left: 104px; top: 1309px; }

.article__questions { position: absolute; left: 104px; top: 3161px; width: 231px; }

/* The main column runs in normal flow so that any small difference between
   Figma's text metrics and the browser's is absorbed by the column instead of
   colliding with the blocks below it. */
.article__column {
  position: absolute;
  left: 355px;
  top: 398px;                       /* y 851                                */
  width: 571px;
}

.article__main { width: 558px; }

/* 27 px above balances the 31 px below: the line above the table carries ~8 px
   of half-leading under it, the heading below only ~4 px, so equal margins do
   not read as equal space. Measured optical gap is 38 px on both sides. */
.article__table { width: 564px; margin-top: 27px; }

.article__close { width: 571px; margin-top: 31px; }   /* 3458 → 3489        */

/* Numbered considerations */
.factors { margin-top: 18px; }

.factor + .factor { margin-top: 22px; }

.factor__head {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 700;
  line-height: 2;
}

.factor__body { padding-left: 20px; }

/* Aside + questions marker */
.marker {
  display: block;
  width: 63px;
  height: 9px;
  background: var(--red);
  margin-bottom: 3px;
}

/* ---------- Podcast pill ------------------------------------------------ */
.podcast {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 9px;
  border: 1px solid var(--cyan-line);
  border-radius: 20px;
  text-decoration: none;
  color: var(--ink);
  white-space: nowrap;
  line-height: 1.08;
}

.podcast img { width: 24px; height: 24px; }

/* ---------- "When to consider" table ------------------------------------ */
.rle-table {
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: 0 12px;
}

.rle-table__title {
  margin: 1px 0 5px;
  font-size: 24px;
  font-weight: 400;
  line-height: 41px;
  letter-spacing: -1.2px;
  color: var(--heading);
}

.rle-table table { width: 100%; border-collapse: collapse; }

.rle-table th {
  padding: 0 7px 3px 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 2;
  letter-spacing: -0.7px;
  text-transform: uppercase;
  text-align: left;
}

.rle-table th:first-child { width: 237px; }

.rle-table td {
  padding: 7px 7px 7px 0;
  font-size: 16px;
  line-height: 1.26;
  letter-spacing: -0.8px;
  vertical-align: top;
}

.rle-table td:first-child { width: 237px; font-weight: 700; }

.rle-table tbody tr + tr td { border-top: 1px solid var(--rule); }

/* ---------- Share button ------------------------------------------------ */
.share {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 12px 0;
  background: #fff;
  border-radius: 20px;
  text-decoration: none;
  color: var(--ink);
}

.share img { width: 50px; height: 49.18px; }

.share span {
  font-weight: 600;
  line-height: 2;
  text-align: center;
}

/* ---------- Buttons ----------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 213px;
  padding: 10px;
  border-radius: 39px;
  background: var(--orange);
  color: #fff;
  font-size: 20px;
  line-height: 1.09;
  letter-spacing: -1px;
  text-align: center;
  text-decoration: none;
}

.btn--center { position: absolute; left: 50%; transform: translateX(-50%); }

/* ---------- Author band (page 1) ---------------------------------------- */
.author-band {
  position: relative;
  height: 951px;                    /* 3901 → 4852                          */
}

.author-band__cream {
  position: absolute;
  top: 576px;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  height: 375px;
  background: var(--cream);
}

/* Bleeds with the cream band below it — otherwise the photo leaves white
   shoulders sitting above a full-width tan band. */
.author-band__image {
  position: absolute;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;                     /* an <img> with width:auto falls back
                                       to its intrinsic width, so set it   */
  max-width: none;
  height: 578px;
  object-fit: cover;
  object-position: left top;
}

.author-band__share { position: absolute; left: 857px; top: 78px; }

.author-band__portrait {
  position: absolute;
  left: 104px;
  top: 524px;
  width: 148px;
  height: 185px;
  object-fit: cover;
  object-position: center top;
}

.author-band__text { position: absolute; left: 271px; top: 597px; width: 649px; }

.author-band__text .label {
  font-weight: 700;
  line-height: 2;
  letter-spacing: 0.48px;
  text-transform: uppercase;
  color: var(--heading);
  margin-bottom: 24px;
}

.author-band__text .who { line-height: 2; margin-bottom: 18px; }

.author-band .btn--center { top: 879px; }

/* ---------- Page-2 body ------------------------------------------------- */
.pr-body {
  position: relative;
  height: 932px;                    /* 234 → 1166                           */
}

.pr-body__title {
  position: absolute;
  left: var(--margin);
  top: 42px;
  width: 740px;
  margin: 0;
  font-size: 98px;
  font-weight: 400;
  line-height: 80px;
  letter-spacing: -4.9px;
  color: var(--title);
}

.pr-body__copy { position: absolute; top: 232px; }        /* y 466        */
.pr-body__copy--1 { left: 187px; width: 399px; }
.pr-body__copy--2 { left: 606px; width: 310px; }
.pr-body__copy b { font-weight: 700; }

.pr-body__booklet {
  position: absolute;
  left: 56px;
  top: 318px;                       /* y 552                                */
  width: 894px;
  height: 596px;
}

.pr-body__cta { position: absolute; left: 654px; top: 135px; }  /* y 369    */
.pr-body .btn--center { top: 856px; }                           /* y 1090   */

/* ---------- Footer ------------------------------------------------------ */
.footer {
  position: relative;
  height: 252px;
  background: #000;
  color: #fff;
}

.footer__inner {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 816px;
  margin: 0 var(--margin);
  padding-top: 31px;
}

.footer__mark { width: 147px; height: 52px; flex: none; }

.footer__cols {
  display: flex;
  gap: 10px;
  width: 564px;
  padding-top: 30px;
  flex: none;
}

.footer__mission { width: 314px; flex: none; }

.footer__cols .rule-v { height: 160px; }

.footer__address {
  width: 230px;
  padding-top: 5px;
  flex: none;
  line-height: 1.48;
}

.footer__address .label {
  display: block;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.42px;
}

.footer__address a { color: var(--cyan); font-weight: 600; text-decoration: none; }

.footer__social {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  width: 61.4px;
  height: 190px;
  flex: none;
}

.footer__social img { width: 23.7px; height: 23.7px; }

/* ---------- Hover / focus states ----------------------------------------
   Taken from the component variants in Figma:
     button    Default #fa6900        → Variant2 #ee5300
     nav_link  Default #000  hover #04789e  active #00abc7
     podcast   Default black text     → Variant2 #00abc8 text
     share     mail_default           → mail_hover
     social    Default #00abc7        → Variant2 #04789e
   ------------------------------------------------------------------------ */
.btn,
.nav a,
.menu a,
.podcast,
.footer__address a { transition: color 0.15s ease, background-color 0.15s ease; }

.btn:hover,
.btn:focus-visible { background: var(--orange-dark); }

.nav a:hover,
.nav a:focus-visible { color: var(--heading); }

.podcast:hover,
.podcast:focus-visible { color: var(--cyan-line); }

.share .share__hover { display: none; }
.share:hover .share__default,
.share:focus-visible .share__default { display: none; }
.share:hover .share__hover,
.share:focus-visible .share__hover { display: block; }

.footer__social .icon-hover { display: none; }
.footer__social a:hover .icon-default,
.footer__social a:focus-visible .icon-default { display: none; }
.footer__social a:hover .icon-hover,
.footer__social a:focus-visible .icon-hover { display: block; }

.masthead-block__byline .email { transition: color 0.15s ease; }
.masthead-block__byline .email:hover,
.masthead-block__byline .email:focus-visible { color: var(--heading); }

/* Not a Figma component — the issue menu follows the nav's behaviour. */
.menu a:hover,
.menu a:focus-visible { color: var(--cyan); }

/* ---------- Placeholder for assets still to be exported from Figma ------ */
.asset-missing {
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #f2f2f2, #f2f2f2 6px, #e6e6e6 6px, #e6e6e6 12px);
  outline: 1px dashed #999;
  color: #666;
  font-size: 11px;
  letter-spacing: 0;
  line-height: 1.2;
  text-align: center;
}

/* ============================================================================
   MOBILE / FLUID  —  everything below the 1024 px desktop canvas
   The desktop build positions blocks at their Figma coordinates; here those
   coordinates are released and the page reflows to a single column.
   ========================================================================= */

/* The promo wrapper is invisible on desktop so its two children keep their
   own Figma positions; on mobile it becomes a single card. */
.promo { display: contents; }

@media (max-width: 1023px) {

  :root { --gutter: 24px; --measure: 640px; }

  .page { width: 100%; overflow: visible; }

  /* ---- hamburger ---- */
  .masthead { position: relative; }

  .menu-toggle {
    display: flex;
    position: absolute;
    top: 12px;
    right: calc(var(--gutter) - 10px);
    z-index: 2;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .menu-toggle__bars { position: relative; }

  .menu-toggle__bars,
  .menu-toggle__bars::before,
  .menu-toggle__bars::after {
    display: block;
    width: 26px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
  }

  .menu-toggle__bars::before,
  .menu-toggle__bars::after {
    content: "";
    position: absolute;
    left: 0;
    transition: transform 0.22s ease;
  }

  .menu-toggle__bars::before { transform: translateY(-8px); }
  .menu-toggle__bars::after  { transform: translateY(8px); }

  .menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__bars::after  { transform: rotate(-45deg); }

  /* ---- menu panel ---- */
  .menu { display: block; background: #000; padding: 0 var(--gutter) 20px; }
  .menu[hidden] { display: none; }

  .menu ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: var(--measure);
    border-top: 1px solid rgba(255, 255, 255, 0.2);
  }

  .menu li + li { border-top: 1px solid rgba(255, 255, 255, 0.2); }

  .menu a {
    display: block;
    padding: 15px 0;
    color: #fff;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: normal;
    text-decoration: none;
  }

  .menu a[aria-current="page"] { color: var(--cyan); }

  /* page 2's inline nav is replaced by the menu on small screens */
  .masthead-block .nav { display: none; }

  /* ---- shared rhythm ---- */
  .article > *,
  .pr-body > *,
  .author-band__text,
  .editor__text { max-width: var(--measure); margin-left: auto; margin-right: auto; }

  /* ---- masthead (page 1) ---- */
  /* Extra top padding gives the hamburger its own row above the lockup. */
  .masthead { height: auto; padding: 62px var(--gutter) 24px; }

  .masthead__wordmark {
    width: 100%;
    max-width: 453px;
    height: auto;
    padding-top: 0;
  }

  .masthead__banner {
    width: 100%;
    max-width: 816px;
    height: auto;
    margin: 14px auto 0;
  }

  .masthead__meta {
    height: auto;
    margin-top: 14px;
    gap: 4px;
    flex-direction: column;
    font-size: 11px;
    text-align: center;
  }

  .masthead__meta .rule-v { display: none; }

  /* ---- masthead (page 2) ---- */
  .masthead--compact {
    height: auto;
    padding: 58px var(--gutter) 24px;
    text-align: center;
  }

  .masthead--compact .masthead__banner,
  .masthead--compact .masthead__wordmark {
    position: static;
    margin: 0 auto;
    height: auto;
  }

  .masthead--compact .masthead__banner { width: 190px; }
  .masthead--compact .masthead__wordmark { width: 100%; max-width: 315px; margin-top: 12px; }

  /* ---- editor strip ---- */
  .editor {
    height: auto;
    max-width: calc(var(--measure) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 24px var(--gutter) 28px;
  }

  .editor__portrait {
    position: static;
    float: right;
    width: 96px;
    height: 133px;
    margin: 4px 0 10px 16px;
  }

  .editor__text { margin-left: 0; padding-top: 0; width: auto; }
  .editor__note { font-size: 15px; line-height: 1.5; }
  .editor__sign { clear: both; padding-top: 14px; }

  /* ---- page-2 nav + contributor ---- */
  .masthead-block {
    height: auto;
    padding: 18px var(--gutter) 22px;
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: center;
    gap: 0 16px;
  }

  .masthead-block .nav {
    position: static;
    grid-column: 1 / -1;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 18px;
  }

  .nav a, .nav span { padding: 7px 0; font-size: 15px; }
  .nav .rule-v { display: none; }

  .masthead-block__portrait {
    position: static;
    grid-column: 1;
    grid-row: 2 / span 2;
    width: 88px;
    height: 122px;
  }

  .masthead-block__eyebrow { position: static; grid-column: 2; grid-row: 2; align-self: end; }

  .masthead-block__byline {
    position: static;
    grid-column: 2;
    grid-row: 3;
    text-align: left;
    align-self: start;
    padding-top: 2px;
  }

  /* ---- article: release the canvas ---- */
  .article {
    height: auto;
    display: flex;
    flex-direction: column;
    padding: 30px var(--gutter) 8px;
  }

  .article__divider { display: none; }

  .article > *,
  .article__column > *,
  .promo > * { position: static; left: auto; top: auto; width: auto; }

  .article__title     { order: 1; font-size: clamp(40px, 11.5vw, 117px); line-height: 1.02; letter-spacing: -0.05em; }
  .article__subtitle  { order: 2; font-size: clamp(23px, 6.4vw, 59px);  line-height: 1.12; letter-spacing: -0.05em; margin-top: 10px; }
  /* Full-bleed lead image: cancels the article gutter so it meets both edges.
     The cut-out keeps its natural proportions; max-height stops it running away
     on wider handsets and small tablets. */
  .article__hero {
    order: 4;
    width: calc(100% + var(--gutter) * 2);
    max-width: none;
    height: auto;
    aspect-ratio: auto;
    max-height: 620px;
    object-fit: cover;
    object-position: center top;
    margin: 24px calc(var(--gutter) * -1) 0;
  }
  .article__byline    { order: 3; justify-content: flex-start; margin-top: 18px; }
  .article__column    { order: 5; margin-top: 26px; }
  .promo              { order: 6; display: block; margin: 34px auto 0; }
  .article__questions { order: 7; margin-top: 30px; }

  .article__main,
  .article__table,
  .article__close { max-width: none; }

  .article__table { margin-top: 34px; }
  .article__close { margin-top: 28px; }

  .factors { margin-top: 34px; }
  .factor__body { padding-left: 14px; }

  /* The lead paragraph runs straight into "Exploring the Options" on desktop;
     on mobile that needs air. */
  .body-copy .tight + .h-section { margin-top: 26px; }

  /* copy sizing */
  .body-copy,
  .article__aside,
  .article__questions,
  .author-band__text { font-size: 16px; line-height: 1.85; letter-spacing: -0.02em; }

  .h-section { font-size: clamp(21px, 5.6vw, 24px); line-height: 1.25; letter-spacing: -0.03em; }

  /* ---- promo card ---- */
  .promo {
    background: var(--cream);
    border-radius: 20px;
    padding: 24px 22px 26px;
    max-width: var(--measure);
  }

  .promo .article__aside { margin: 0; }
  .marker { margin-bottom: 10px; }
  .promo .article__podcast { margin-top: 18px; }

  /* ---- "when to consider" table ----
     Stays a real two-column table so the column headings keep doing their job;
     only the type size and column split change. */
  .rle-table { padding: 4px 16px 12px; }
  .rle-table__title { line-height: 1.25; margin: 14px 0 8px; }

  .rle-table table { table-layout: fixed; }

  .rle-table th {
    padding: 0 12px 8px 0;
    font-size: 12px;
    line-height: 1.35;
    vertical-align: bottom;
  }

  .rle-table td {
    padding: 11px 12px 11px 0;
    font-size: 14px;
    line-height: 1.35;
  }

  /* these need :first-child to outrank the desktop 237px rule */
  .rle-table th:first-child,
  .rle-table td:first-child { width: 46%; }

  .rle-table th:last-child,
  .rle-table td:last-child { width: 54%; padding-right: 0; }

  /* ---- author band ---- */
  .author-band {
    height: auto;
    background: var(--cream);
    padding: 24px 0 40px;
  }

  .author-band__cream { display: none; }

  /* The cyclists photo is desktop-only. */
  .author-band__image { display: none; }

  .author-band__share {
    position: static;
    display: flex;
    width: fit-content;
    margin: 0 var(--gutter) 0 auto;
  }

  .author-band__portrait {
    position: static;
    width: 132px;
    height: 165px;
    margin: 12px var(--gutter) 0;
  }

  .author-band__text {
    position: static;
    width: auto;
    padding: 18px var(--gutter) 0;
  }

  .author-band .btn--center {
    position: static;
    transform: none;
    display: flex;
    margin: 32px auto 0;
  }

  /* ---- page-2 body ---- */
  .pr-body { height: auto; padding: 30px var(--gutter) 44px; }

  .pr-body > * { position: static; left: auto; top: auto; width: auto; }

  .pr-body__title {
    font-size: clamp(40px, 11.5vw, 98px);
    line-height: 1.02;
    letter-spacing: -0.05em;
  }

  /* Order on small screens: pitch → order online → order by phone → product */
  .pr-body__copy--1 { margin-top: 30px; }
  .pr-body__copy--2 { margin-top: 26px; }

  .pr-body__booklet {
    width: 100%;
    max-width: none;
    height: auto;
    margin: 32px auto 0;
  }

  .pr-body__cta,
  .pr-body .btn--center {
    transform: none;
    display: flex;
    margin: 28px auto 0;
  }

  .pr-body .btn--center { margin-top: 32px; }

  /* Buttons keep a pill shape but grow into a comfortable tap target */
  .btn { width: 100%; max-width: 240px; padding: 13px 10px; }

  /* ---- footer (centred) ---- */
  .footer { height: auto; padding: 34px var(--gutter) 36px; text-align: center; }

  .footer__inner {
    display: block;
    width: auto;
    max-width: var(--measure);
    margin: 0 auto;
    padding-top: 0;
  }

  .footer__mark { width: 124px; height: auto; margin: 0 auto; }

  .footer__cols { display: block; width: auto; padding-top: 22px; }
  .footer__mission { width: auto; }
  .footer__cols .rule-v { display: none; }

  .footer__address {
    width: auto;
    padding-top: 22px;
    margin-top: 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
  }

  .footer__social { width: auto; height: auto; margin-top: 26px; justify-content: center; }
}

/* Very small handsets */
@media (max-width: 400px) {
  :root { --gutter: 20px; }
  .masthead-block { grid-template-columns: 76px 1fr; }
  .masthead-block__portrait { width: 76px; height: 105px; }
}