/* ============================================================================
   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:       #2673b5; /* ALL blue title + subheading text (client, 9/24;
                               replaced #04789e everywhere, text and artwork) */
  --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: normal;           /* the revised design sets tracking to 0 */
  overflow-x: hidden;               /* contains the full-bleed band edges   */
}

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

/* Art-direction wrappers for the portraits: display:contents keeps the <img>
   itself as the floated / grid-placed / absolutely-positioned element, so every
   existing rule that targets the image class still applies. */
picture { display: contents; }

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: 2;                  /* 47 px box in the revised design        */
  letter-spacing: normal;
  text-transform: uppercase;
  color: var(--heading);
}

/* A section = uppercase head + body indented 20px. */
.sec + .sec,
.body-copy > p + .sec { margin-top: 14px; }
.sec__body  { padding-left: 20px; }

.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; }

/* ---------- 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 contributor block ------------------------------------ */
/* The 127 px Secondary Header sits above this block, outside .page, so every
   coordinate here is the Figma y minus 127. */
.pr-head {
  position: relative;
  height: 107px;                    /* y 127 → 234                          */
}

/* The rule at y 234 runs the full width of the frame, so it bleeds. */
.pr-head::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: calc(50% - 50vw);
  right: calc(50% - 50vw);
  height: 1px;
  background: var(--rule);
}

/* The portrait starts at Figma y 86 — 41 px up inside the header band. It is
   painted above the header at rest and tucks under it once the header sticks
   (see .subhead.is-stuck). */
.pr-head__portrait {
  position: absolute;
  left: 813px;
  top: -41px;
  width: 107px;
  height: 148px;
  object-fit: cover;
  object-position: center top;
  z-index: 45;
}

.pr-head__eyebrow { position: absolute; left: 114px; top: 87px; }   /* y 214 */

.pr-head__byline {
  position: absolute;
  right: 223px;                     /* right edge at x 801                  */
  top: 36px;                        /* y 163                                */
  text-align: right;
  line-height: normal;
  letter-spacing: normal;
}

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

.pr-head__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;
  text-transform: none;             /* "By", not "BY"                       */
}
.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 */
  /* Figma starts the photo band at y 4103, which is ABOVE where the closing
     copy ends (last line bottom ≈ 4210) — the text was sitting on the pale top
     of the photo, and the SHARE pill landed beside it. The client asked for
     real separation, so the band starts at 4250 instead: ~40px of white below
     the last line. Everything in .author-band (photo, SHARE, portrait, bio,
     Next button, cream band) is positioned inside it and moves together.
     RE-MEASURE after any page-1 copy change — nothing enforces this gap. */
  height: 3797px;                   /* 453 → 4250                           */
}

/* Display headline (page 1) */
.article__title {
  position: absolute;
  left: 96px;
  top: 81px;                        /* y 534                                */
  width: 740px;
  margin: 0;
  font-size: 107px;
  font-weight: 400;
  line-height: 80px;
  letter-spacing: -5.35px;
  text-transform: uppercase;
  color: var(--heading);
}

.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: 3331px;
  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 { width: 100%; }    /* sidebar promo, inside .promo          */

.article__podcast { margin-top: 0; }

.article__questions { position: absolute; left: 104px; top: 3535px; 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: 394px;                       /* y 847                                */
  width: 565px;
}

.article__main { width: 565px; }

/* 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; }   /* 3277 → 3304      */

.article__close { width: 565px; margin-top: 26px; }   /* 3590 → 3616      */

/* Numbered considerations — indented with the rest of the section body */
.factors { margin-top: 0; padding-left: 20px; }

.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;
  background: var(--orange);
  border: 1px solid #fff;
  border-radius: 20px;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
  line-height: 1.08;
  letter-spacing: -0.8px;           /* -5%, per the Sidebar Card component */
}

.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: 187px;
  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;
}

/* The Next / Previous button aligns its left edge with the footer's
   CORPORATE OFFICE column (x 605 in Figma; 606 as the footer actually renders,
   the 1px being the hairline's own width). Client's call, all three pages. */
.btn--footer-col { position: absolute; left: 606px; }

/* ---------- Author band (page 1) ---------------------------------------- */
.author-band {
  position: relative;
  height: 931px;                    /* 4103 → 5034                          */
}

.author-band__cream {
  position: absolute;
  top: 556px;                       /* y 4659                               */
  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. */
/* Fixed 984 px band inset 20 px in the 1024 column — the client asked that it
   stop growing with the browser, so this one no longer bleeds. */
.author-band__image {
  position: absolute;
  top: 0;
  left: 20px;
  width: 984px;
  max-width: none;
  height: 556px;                    /* y 4103 → 4659                        */
  object-fit: cover;
  object-position: left top;
}

.author-band__share { position: absolute; left: 857px; top: 58px; }  /* y 4161 */

.author-band__portrait {
  position: absolute;
  left: 104px;
  top: 504px;                       /* y 4607                               */
  width: 148px;
  height: 185px;
  object-fit: cover;
  object-position: center top;
}

.author-band__text { position: absolute; left: 271px; top: 577px; 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 {
  margin: 0;
  font-size: 30px;
  line-height: 0.74;
}

.author-band__text .where {
  margin: 0 0 6px;
  font-weight: 700;
  line-height: 2;
}

.author-band__text .where .place { text-transform: uppercase; }

.author-band .btn--footer-col { top: 859px; }          /* y 4962             */

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

.pr-body__title {
  position: absolute;
  left: var(--margin);
  top: 42px;                        /* y 276                                */
  width: 740px;
  margin: 0;
  font-size: 84px;
  font-weight: 400;
  line-height: 80px;
  letter-spacing: -4.2px;
  text-transform: uppercase;
  color: var(--heading);
}

.pr-body__copy { position: absolute; top: 220px; }              /* y 454    */
.pr-body__copy--1 { left: 187px; width: 438px; letter-spacing: -0.8px; }
.pr-body__copy--2 { left: 669px; width: 214px; line-height: 1.48; }
.pr-body__copy--1 b { text-transform: uppercase; }
.pr-body__copy b { font-weight: 700; }

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

.pr-body__cta { position: absolute; left: 654px; top: 138px; width: 213px; }

.pr-body .btn--footer-col { top: 856px; }                       /* y 1090   */

/* ---------- Past Issues archive ----------------------------------------- */
/* Unlike the article pages this one has no Figma frame and no fixed height —
   the list grows a row every quarter, so it runs in normal flow inside the
   1024 canvas and simply gets taller. */
.archive {
  padding: 48px var(--margin) 104px;
}

.archive__title {
  margin: 0;
  font-size: 84px;
  font-weight: 400;
  line-height: 80px;
  letter-spacing: -4.2px;
  text-transform: uppercase;
  color: var(--heading);
}

.archive__intro {
  max-width: 565px;
  margin-top: 0;
  margin-left: 20px;                /* matches .sec__body's 20px indent */
}

.year { margin-top: 56px; }

/* Indented 20px so the year number and its marker line up with the card
   content, which the card's own 20px padding insets. */
.year__label {
  margin: 0 0 3px 20px;
  font-size: 36px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -1.8px;
  color: var(--ink);
}

/* On this page the marker sits UNDER the year number and butts against the
   list's top rule, so it loses the 3px it carries elsewhere. */
.year .marker { margin-bottom: 0; margin-left: 20px; }

.issues {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Archive Issue Card (Figma component 41:275). Thumbnail + text, with the
   hairline on the card itself rather than the list, so it follows the hover
   state's rounded corner instead of cutting straight across it. */
.issue a {
  display: flex;
  align-items: flex-end;            /* card is bottom-aligned (component, 10/2) */
  gap: 24px;
  padding: 18px 20px;
  border-top: 1px solid var(--rule);
  text-decoration: none;
  color: var(--ink);
  transition: background-color 0.15s ease, border-radius 0.15s ease;
}

.issue__thumb {
  flex: none;
  width: 120px;
  height: 155px;
  object-fit: cover;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
}

.issue__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;                     /* lets a long title wrap rather than push */
  padding-bottom: 5px;              /* lifts the copy off the thumbnail's base */
}

.issue__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.issue__season {
  font-size: 12px;
  font-weight: 700;
  line-height: normal;
  letter-spacing: normal;
  text-transform: uppercase;
  color: rgba(0, 0, 0, 0.5);
}

.issue__title {
  font-size: 24px;
  line-height: 1.25;
  transition: color 0.15s ease;
}

.issue__tag {
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--orange);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Radius belongs to the hover variant only — at rest the card is square so the
   hairline runs the full width of the list. The fill is the issue's cream
   token, and the card carries no shadow of its own (2026-10-01 component
   update); only the thumbnail keeps one. */
.issue a:hover,
.issue a:focus-visible {
  background: var(--cream);
  border-radius: 15px;
}

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

.issue a:focus-visible { outline: 2px solid var(--heading); outline-offset: 2px; }

/* ---------- 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   (hover now --heading)
     podcast   Default black text     → Variant2 #00abc8 text
     share     mail_default           → mail_hover
     social    Default #00abc7        → Variant2 #04789e   (hover now #2673b5)
   ------------------------------------------------------------------------ */
.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); }

/* The Figma master still carries the old outlined hover; the pill is now a
   solid button, so it darkens like the other buttons. */
.podcast:hover,
.podcast:focus-visible { background: var(--orange-dark); }

.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; }

.pr-head__byline .email { transition: color 0.15s ease; }
.pr-head__byline .email:hover,
.pr-head__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;
}

/* ============================================================================
   SECONDARY HEADER AND NAV  (Figma component 15:167, 1024 x 127)
   The page header on pages 2 and 3, and the bar that fades in on page 1.
   ========================================================================= */
/* Sits outside .page so the black and white bands span the browser, with an
   inner 1024 column so the lockup and nav still line up with the page grid. */
.subhead {
  position: sticky;
  top: 0;
  z-index: 40;
}

.subhead__bar { background: #000; }
.subhead__nav { background: #fff; padding-bottom: 1px; }

.subhead__inner {
  position: relative;
  width: var(--page-w);
  margin: 0 auto;
}

.subhead__bar .subhead__inner { height: 86px; }

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

.subhead__wordmark {
  position: absolute;
  left: 335px;
  top: 65px;
  width: 315px;
  height: 10px;
}

.subhead__nav .nav { padding-left: 103px; }

.subhead__nav .nav a,
.subhead__nav .nav span { padding: 11px 10px; }

/* Inside page 1's fade-in bar the header is already fixed. */
.sticky-head .subhead { position: static; }

/* Page content may overlap the header at rest (page 2's contributor portrait).
   Once the header is stuck, it is raised so that content passes underneath. */
.subhead.is-stuck { z-index: 60; }

.sticky-sentinel { display: block; height: 1px; margin-bottom: -1px; }

/* ---------- Page-1 scroll-in header -------------------------------------- */
.sticky-head {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  opacity: 0;
  transform: translateY(-100%);
  transition: opacity 0.28s ease, transform 0.28s ease;
  pointer-events: none;
}

.sticky-head .subhead { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }

.sticky-head.is-visible {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

@media (prefers-reduced-motion: reduce) {
  .sticky-head { transition: none; }
}

/* ============================================================================
   PAGE 3 — 6-Hour CE Event
   ========================================================================= */
.ce-body {
  position: relative;
  height: 612px;                    /* 127 → 739                            */
}

.ce-body__eyebrow { position: absolute; left: 114px; top: 28px; }   /* y 155 */

.ce-body__title {
  position: absolute;
  left: 187px;
  top: 90px;                        /* y 217                                */
  width: 740px;
  margin: 0;
  font-size: 84px;
  font-weight: 400;
  line-height: 80px;
  letter-spacing: -4.2px;
  text-transform: uppercase;
  color: var(--heading);
}

.ce-body__rule {                    /* vertical hairline down the text column */
  position: absolute;
  left: 418px;
  top: 171px;                       /* y 298                                */
  width: 1px;
  height: 268px;
  background: var(--rule);
}

.ce-body__badge {
  position: absolute;
  left: 418px;
  top: 171px;                       /* y 298                                */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 242px;
  padding: 10px;
  background: var(--orange);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  line-height: 24px;
  letter-spacing: 7.02px;
  text-transform: uppercase;
}

.ce-body__calendar {
  position: absolute;
  left: 224px;
  top: 215px;                       /* y 342                                */
  width: 176px;
  height: 153px;
}

.ce-body__details {
  position: absolute;
  left: 438px;
  top: 249px;                       /* y 376                                */
  width: 398px;
}

.ce-body__when {
  font-weight: 700;
  line-height: 2;
  text-transform: uppercase;
  letter-spacing: normal;
}

.ce-body__note { line-height: 2; letter-spacing: normal; }
.ce-body__note p + p { margin-top: 18px; }

.ce-body .btn--footer-col { top: 530px; }                /* y 657              */

/* ============================================================================
   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.
   ========================================================================= */

/* Bordered sidebar card. Square on the right so it meets the vertical rule
   at x 344; the pill follows the copy in flow, so the card takes sidebar copy
   of any length without collisions. */
.promo {
  position: absolute;
  left: 104px;
  top: 3033px;                      /* y 3486                               */
  width: 241px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  padding: 16px;
  border: 1px solid var(--ink);
  border-radius: 20px 0 0 20px;
}

.promo__head {
  margin: 0 0 8px;
  font-size: 36px;
  font-weight: 400;
  line-height: 0.91;
  letter-spacing: -1.8px;
  color: var(--red);
}

.article__aside p { line-height: 1.48; }

@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); }

  /* ---- 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; }

  /* ---- 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 contributor ---- */
  .nav a, .nav span { padding: 7px 0; font-size: 15px; }
  .nav .rule-v { display: none; }

  .pr-head {
    height: auto;
    max-width: calc(var(--measure) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 20px var(--gutter) 22px;
    display: grid;
    grid-template-columns: 88px 1fr;
    align-items: center;
    gap: 0 16px;
  }

  .pr-head__portrait {
    position: static;
    z-index: auto;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 88px;
    height: 122px;
  }

  /* "Professional relations" duplicates the role line directly under Marlin's
     name, so the standalone eyebrow is cut on small screens (client, 9/30). */
  .pr-head__eyebrow { display: none; }

  .pr-head__byline {
    position: static;
    grid-column: 2;
    grid-row: 1 / span 2;
    text-align: left;
    align-self: center;
    padding-top: 0;
  }

  /* ---- 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(38px, 10.6vw, 107px); 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: 0; padding-left: 14px; }
  .factor__body { padding-left: 14px; }
  .sec__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 ---- */
  /* No divider rule to butt against on mobile, so the card rounds all four
     corners rather than only the left pair. */
  .promo {
    border-radius: 20px;
    padding: 22px 20px 24px;
    gap: 18px;
    max-width: var(--measure);
  }

  .promo__head { font-size: clamp(28px, 8vw, 36px); }
  .promo .article__aside { margin: 0; }

  /* Pill hangs off the right edge of the card on small screens (client, 9/30).
     display:flex makes it block-level so margin-left:auto can push it over —
     as inline-flex it would just sit at the start of its line box. */
  .promo .article__podcast {
    display: flex;
    width: fit-content;
    margin-left: auto;
  }
  .marker { margin-bottom: 10px; }

  /* ---- "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--footer-col {
    position: static;
    transform: none;
    display: flex;
    margin: 32px auto 0;
  }

  /* ---- page-2 body ---- */
  /* Reading order on small screens (Figma mobile frame, 10/2):
     title → booklet → pitch → order online → order by phone → Next. */
  .pr-body {
    height: auto;
    padding: 30px var(--gutter) 30px;
    display: flex;
    flex-direction: column;
  }

  .pr-body__title           { order: 1; }
  .pr-body__booklet         { order: 2; }
  .pr-body__copy--1         { order: 3; }
  .pr-body__cta             { order: 4; }
  .pr-body__copy--2         { order: 5; }
  .pr-body .btn--footer-col { order: 6; }

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

  .pr-body__title {
    font-size: clamp(38px, 10.5vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.045em;
  }

  .pr-body__copy--1 { margin-top: 0; letter-spacing: normal; }
  .pr-body__copy--2 { margin-top: 24px; line-height: 2; }

  /* Runs edge to edge on mobile. The PNG carries transparent padding at its
     foot, so a negative bottom margin pulls the copy up to where the artwork
     actually ends rather than where its box does. */
  .pr-body__booklet {
    width: 100vw;
    max-width: none;
    height: auto;
    margin: 0 calc(50% - 50vw) -21px;
  }

  .pr-body__cta,
  .pr-body .btn--footer-col {
    transform: none;
    display: flex;
    margin: 24px auto 0;
  }

  /* The CTA keeps the component's 213x64 rather than the full-width tap
     target. Scoped to .pr-body so it outranks the generic .btn rule below. */
  .pr-body .pr-body__cta { width: 213px; max-width: none; padding: 10px; }

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

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

  /* ---- secondary header ---- */
  .subhead {
    position: relative;
    text-align: center;
  }

  .subhead__bar {
    height: auto;
    padding: 58px var(--gutter) 24px;
  }

  .subhead { position: static; }

  .subhead__inner { width: auto; }
  .subhead__bar .subhead__inner { height: auto; }

  .subhead__banner,
  .subhead__wordmark {
    position: static;
    margin: 0 auto;
    height: auto;
  }

  .subhead__banner { width: 190px; }
  .subhead__wordmark { width: 100%; max-width: 315px; margin-top: 12px; }

  /* the inline nav is replaced by the hamburger menu */
  .subhead__nav { display: none; }

  /* the scroll-in bar is a desktop affordance; mobile has the hamburger */
  .sticky-head { display: none; }

  /* ---- page 3 ---- */
  .ce-body {
    height: auto;
    padding: 26px var(--gutter) 44px;
  }

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

  .ce-body > *,
  .ce-body__details { max-width: var(--measure); margin-left: auto; margin-right: auto; }

  .ce-body__title {
    width: auto;
    margin-top: 16px;
    font-size: clamp(38px, 10.2vw, 84px);
    line-height: 1.04;
    letter-spacing: -0.05em;
  }

  .ce-body__rule { display: none; }

  .ce-body__badge {
    width: -moz-fit-content;
    width: fit-content;
    margin-top: 26px;
    margin-left: 0;
    font-size: 16px;
    letter-spacing: 5px;
  }

  .ce-body__calendar {
    width: 140px;
    height: auto;
    margin-top: 28px;
    margin-left: 0;
  }

  .ce-body__details { width: auto; margin-top: 26px; }

  .ce-body .btn--footer-col {
    position: static;
    transform: none;
    display: flex;
    max-width: 240px;               /* .ce-body > * would otherwise widen it */
    margin: 36px auto 0;
  }

  /* ---- past issues ---- */
  .archive {
    max-width: calc(var(--measure) + var(--gutter) * 2);
    margin: 0 auto;
    padding: 34px var(--gutter) 48px;
  }

  .archive__title {
    font-size: clamp(38px, 10.5vw, 84px);
    line-height: 1.02;
    letter-spacing: -0.045em;
  }

  .archive__intro { margin-top: 20px; }

  .year { margin-top: 38px; }
  .year__label { font-size: clamp(28px, 8vw, 36px); }

  .issue a { padding: 15px 10px; gap: 16px; }
  .issue__title { font-size: clamp(18px, 4.8vw, 22px); }

  .issue a:hover,
  .issue a:focus-visible { border-radius: 12px; }

  /* Thumbnail keeps its 120:155 proportion but shrinks so the title still has
     a usable measure at 320px. */
  .issue__thumb { width: 84px; height: 108px; }

  /* ---- 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; }
  .pr-head { grid-template-columns: 76px 1fr; }
  .pr-head__portrait { width: 76px; height: 105px; }
}