/* =========================================================================
   Components
   Requires tokens.css + base.css.
   Measurements in comments are from the reference at desktop width.
   ========================================================================= */

/* -------------------------------------------------------------------------
   BUTTONS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  border: 0;
  background: none;
  text-decoration: none;
  font-family: var(--font-sans);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}

/* Primary CTA — filled, 8px radius. Ref: "Join" header button 14/700, 6×8 pad, 30h */
.btn--cta {
  min-height: 1.875rem;
  padding: var(--space-6) var(--space-8);
  border-radius: var(--radius-sm);
  background: var(--color-cta-bg);
  color: var(--color-cta-text);
  font-size: var(--fs-14);
  line-height: var(--lh-130);
}
.btn--cta:hover { filter: brightness(0.92); }
.btn--cta.btn--lg { min-height: 2rem; padding-inline: var(--space-32); }

/* Outline — brand 3px border, uppercase label. Ref: footer "Newsletters" 300×48 */
.btn--outline {
  min-height: 3rem;
  padding: 0 var(--space-32);
  border: var(--border-3) solid var(--color-border-brand);
  border-radius: var(--radius-0);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-label-300);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
}
.btn--outline:hover { background: var(--color-border-brand); color: var(--color-text-inverse); }

/* Secondary — thin grey border, square. Ref: "Add us on Google" 14/700, 0×12 pad */
.btn--secondary {
  min-height: 2rem;
  padding: 0 var(--space-12);
  border: var(--border-1) solid var(--color-border-strong);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--fs-14);
}
.btn--secondary:hover { border-color: var(--color-border-ink); }

/* Icon button — 36px circle, brand border. Ref: "Was this page helpful?" */
.btn-icon {
  display: inline-grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: var(--border-1) solid var(--color-action);
  border-radius: var(--radius-full);
  background: var(--color-bg);
  color: var(--color-action);
}
.btn-icon svg { width: var(--icon-16); height: var(--icon-16); }
.btn-icon:hover,
.btn-icon[aria-pressed="true"] { background: var(--color-action); color: var(--color-text-inverse); }

/* Text button — plain link-style UI action */
.btn--text {
  padding: 0;
  color: var(--color-text);
  font-size: var(--fs-14);
  font-weight: var(--fw-regular);
}
.btn--text:hover { text-decoration: underline; }

/* -------------------------------------------------------------------------
   CHIPS (tags). Ref: 14/400, 1px ink border, 8×12 pad, 36h, pill radius
   ------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  padding: var(--space-8) var(--space-12);
  border: var(--border-1) solid var(--color-border-ink);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  font: var(--fw-regular) var(--fs-14)/var(--lh-130) var(--font-sans);
  text-decoration: none;
}
.chip:hover { background: var(--color-text); color: var(--color-text-inverse); }

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-8) var(--space-12);
  padding-block: var(--space-24);
  border-bottom: var(--border-1) solid var(--color-border);
}
.chip-row__label {
  font: var(--fw-semibold) var(--fs-16)/var(--lh-130) var(--font-display);
  margin-right: var(--space-4);
}

/* -------------------------------------------------------------------------
   SITE HEADER
   Full state at top (logo row + nav row), compact sticky bar (64px) when
   scrolled — add .is-compact via JS. Ref: white, shadow 0 2 6 black-15.
   ------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--color-bg);
  box-shadow: var(--shadow-header);
}
.site-header__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  min-height: var(--header-height);
}
.site-header__logo {
  display: inline-flex;
  color: var(--color-text-brand);
  font: var(--fw-semibold) var(--fs-29)/1 var(--font-display);
  letter-spacing: -0.01em;
  text-decoration: none;
}
.site-header__logo img, .site-header__logo svg { height: 2.25rem; width: auto; }

.site-header__utility {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font: var(--fw-regular) var(--fs-14)/var(--lh-130) var(--font-sans);
}
.site-header__utility a { text-decoration: none; }
.site-header__utility a:hover { text-decoration: underline; }
.site-header__utility .divider {
  width: 1px; height: 1.25rem; background: var(--color-border);
}
.site-header__search {
  display: grid; place-items: center;
  width: 2rem; height: 2rem;
  border: 0; background: none; padding: 0;
}
.site-header__search svg { width: var(--icon-20); height: var(--icon-20); }

/* Main nav — Ref: 14/700, 1px tracking, uppercase */
.site-nav { overflow-x: auto; scrollbar-width: none; }
.site-nav::-webkit-scrollbar { display: none; }
.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-28);
  min-height: 2.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-nav__link {
  display: inline-block;
  padding-block: var(--space-12);
  font: var(--fw-bold) var(--fs-label-300)/var(--lh-140) var(--font-sans);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-text);
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--color-border-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}
.site-nav__link--feature { color: #8b7a2b; } /* gold "feature" nav item, e.g. a hub page */

/* Compact sticky state: logo + nav on one 64px row, utility trimmed */
.site-header.is-compact .site-header__inner {
  display: flex; align-items: center; gap: var(--space-16);
  min-height: var(--header-height);
}
.site-header.is-compact .site-header__top { display: contents; }
.site-header.is-compact .site-header__logo { order: 0; font-size: var(--fs-20); }
.site-header.is-compact .site-nav { order: 1; flex: 1; min-width: 0; }
.site-header.is-compact .site-header__utility { order: 2; }
.site-header.is-compact .site-header__utility .is-full-only { display: none; }

/* Hide utility text links + nav row on small screens (use a menu button) */
@media (max-width: 49.9375em) {
  .site-header__utility .is-full-only { display: none; }
  .site-header__logo { font-size: var(--fs-23); }
  .site-nav__list { gap: var(--space-20); }
  .site-header.is-compact .site-nav { visibility: hidden; }
}

/* Reading progress — 2px track under the sticky bar */
.reading-progress {
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 2px;
  background: var(--color-progress-track);
}
.reading-progress__bar {
  height: 100%;
  width: var(--progress, 0%);
  background: var(--color-progress-fill);
}

/* -------------------------------------------------------------------------
   PAGE LAYOUT
   Article: 996 wide; content column 600 + right rail 300 (≥64em).
   Ref: main margin-top ≈ header height + 32; padding-bottom 64.
   ------------------------------------------------------------------------- */
.page-main { padding-bottom: var(--space-64); }

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-48);
}
@media (min-width: 64em) {
  .article-layout {
    grid-template-columns: minmax(0, var(--w-content)) var(--w-rail);
    justify-content: space-between;
  }
}
.article-layout__main { max-width: var(--w-content); }
.article-layout__rail { display: none; }
@media (min-width: 64em) {
  .article-layout__rail { display: block; }
  .article-layout__rail > .sticky { position: sticky; top: calc(var(--header-height) + var(--space-24)); }
}

/* -------------------------------------------------------------------------
   BREADCRUMB (kicker above H1)
   ------------------------------------------------------------------------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: var(--space-8);
  margin: var(--space-32) 0 0; padding: 0; list-style: none;
  font: var(--fw-bold) var(--fs-label-200)/var(--lh-140) var(--font-sans);
  letter-spacing: var(--ls-label-sm);
  text-transform: uppercase;
}
.breadcrumb a { color: var(--color-text-brand); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb li + li::before { content: "›"; margin-right: var(--space-8); color: var(--color-text-secondary); }

/* -------------------------------------------------------------------------
   ARTICLE HEADER
   Ref: H1 46/55 (600) margin 32 0 16 · dek 16/22.4 margin 16 0 ·
   byline 14/20 · header margin-bottom 32
   ------------------------------------------------------------------------- */
.article-header { margin-bottom: var(--space-32); }
.article-header__title {
  margin: var(--space-32) 0 var(--space-16);
  font-size: var(--fs-headline-400);
  max-width: 62.25rem;
}
.breadcrumb + .article-header__title { margin-top: var(--space-12); }
.article-header__dek {
  margin: var(--space-16) 0;
  font: var(--fw-regular) var(--fs-utility-300)/var(--lh-140) var(--font-sans);
}

.byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-12);
  row-gap: var(--space-4);
  margin-bottom: var(--space-8);
  font: var(--fw-regular) var(--fs-utility-200)/1.4286 var(--font-sans);
}
.byline__author a {
  font-weight: var(--fw-bold);
  color: var(--color-link-quiet);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 1.68px;
}
.byline__item + .byline__item {
  padding-left: var(--space-12);
  border-left: var(--border-1) solid var(--color-border);
}
.byline__date { color: var(--color-text-secondary); }

.article-header__actions {
  display: flex; gap: var(--space-12); align-items: center;
  margin-top: var(--space-16);
}

/* -------------------------------------------------------------------------
   FIGURE + CAPTION
   Ref: figure margin-bottom 48; caption 12/15.6 black-65, margin-top 8.
   Images are square-cornered.
   ------------------------------------------------------------------------- */
.figure { margin: 0 0 var(--space-48); }
.figure img { width: 100%; border-radius: var(--radius-0); }
.figure__caption {
  margin-top: var(--space-8);
  font: var(--fw-regular) var(--fs-utility-100)/var(--lh-130) var(--font-sans);
  color: var(--color-text-secondary);
}
.figure__credit { text-transform: uppercase; letter-spacing: 0.02em; }
.figure--hero img { aspect-ratio: 4 / 5; object-fit: cover; }

/* -------------------------------------------------------------------------
   NUMBERED LIST ITEM (listicle entry)
   Ref: number column 27 wide, centered: "01" display 23/600 + "of 63"
   12/400 secondary. Title has 1px black-15 left rule, 16 padding,
   sits 44px from the left. Media indented 60px, max 480.
   ------------------------------------------------------------------------- */
.list-item {
  position: relative;
  margin-top: var(--space-48);
}
.list-item__number {
  position: absolute;
  top: 0; left: 0;
  width: 1.75rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.list-item__index {
  font: var(--fw-semibold) var(--fs-title-200)/var(--lh-120) var(--font-display);
}
.list-item__total {
  font: var(--fw-regular) var(--fs-utility-100)/var(--lh-130) var(--font-sans);
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.list-item__title {
  margin: 0 0 var(--space-16) 2.75rem;
  padding-left: var(--space-16);
  border-left: var(--border-1) solid var(--color-border);
  min-height: 2.5rem;
  display: flex;
  align-items: center;
  font-size: var(--fs-title-200);
}
.list-item__media {
  margin: var(--space-16) 0 var(--space-48);
}
@media (min-width: 34em) {
  .list-item__media { margin-inline: 3.75rem; max-width: var(--w-list-media); }
}
.list-item__body { margin-left: 0; }
@media (min-width: 34em) {
  .list-item__body { margin-left: 3.75rem; }
}

/* -------------------------------------------------------------------------
   CALLOUT / FAQ BOX
   Ref: 1px brand-secondary border, 24 padding, margin 48 0.
   Title 29/34.8 display; question 18/27 bold sans.
   ------------------------------------------------------------------------- */
.callout {
  margin: var(--space-48) 0;
  padding: var(--space-24);
  border: var(--border-1) solid var(--color-border-accent);
}
.callout__title {
  margin-bottom: var(--space-8);
  font-size: var(--fs-title-300);
}
.faq__item { padding-block: var(--space-16); }
.faq__item + .faq__item { margin-top: var(--space-16); }
.faq__question {
  margin-bottom: var(--space-16);
  font: var(--fw-bold) var(--fs-body-100)/var(--lh-150) var(--font-sans);
}
.faq__answer p { font-size: var(--fs-body-100); line-height: var(--lh-body); }

/* Collapsible variant using <details> */
details.faq__item summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; gap: var(--space-16);
}
details.faq__item summary::-webkit-details-marker { display: none; }
details.faq__item summary::after {
  content: "+"; font-weight: var(--fw-regular); color: var(--color-action);
}
details.faq__item[open] summary::after { content: "–"; }

/* Pull quote */
.pull-quote {
  margin: var(--space-48) 0;
  padding: var(--space-8) 0 var(--space-8) var(--space-24);
  border-left: var(--border-3) solid var(--color-border-accent);
  font: var(--fw-semibold) var(--fs-title-200)/var(--lh-130) var(--font-display);
}

/* Highlight / tip box (cream) */
.tip {
  margin: var(--space-32) 0;
  padding: var(--space-24);
  background: var(--color-bg-brand);
}
.tip__label {
  display: block;
  margin-bottom: var(--space-8);
  font: var(--fw-bold) var(--fs-label-200)/var(--lh-140) var(--font-sans);
  letter-spacing: var(--ls-label-sm);
  text-transform: uppercase;
  color: var(--color-text-brand);
}

/* -------------------------------------------------------------------------
   FEEDBACK ROW — "Was this page helpful?"
   ------------------------------------------------------------------------- */
.feedback {
  display: flex; align-items: center; gap: var(--space-12);
  padding-block: var(--space-24);
}
.feedback__label {
  margin-right: var(--space-4);
  font: var(--fw-semibold) var(--fs-16)/var(--lh-130) var(--font-display);
}

/* -------------------------------------------------------------------------
   DIVIDER
   ------------------------------------------------------------------------- */
.divider-rule {
  height: 0; margin: var(--space-24) 0;
  border: 0; border-top: var(--border-1) solid var(--color-border);
}

/* -------------------------------------------------------------------------
   CARD (recirculation / listing)
   Ref: 1px black-15 border, white, square. Image 285×190 (3:2).
   Content padding 12. Kicker 12/700 0.75 uppercase secondary, mb 8.
   Title 23/27.6 display 600. Byline 14/18.2 secondary.
   ------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  border: var(--border-1) solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  text-decoration: none;
}
.card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-bg-subtle-opaque); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-standard); }
.card:hover .card__media img { transform: scale(1.03); }
.card__content { padding: var(--space-12) var(--space-12) var(--space-16); }
.card__kicker {
  display: block;
  margin-bottom: var(--space-8);
  font: var(--fw-bold) var(--fs-label-200)/var(--lh-140) var(--font-sans);
  letter-spacing: var(--ls-label-sm);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.card__title {
  font: var(--fw-semibold) var(--fs-title-200)/var(--lh-120) var(--font-display);
}
.card:hover .card__title { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.card__byline {
  margin-top: var(--space-8);
  font: var(--fw-regular) var(--fs-utility-200)/var(--lh-130) var(--font-sans);
  color: var(--color-text-secondary);
}

/* Horizontal card (lists, search results, mobile) */
.card--row { flex-direction: row; }
.card--row .card__media { flex: 0 0 38%; aspect-ratio: 1 / 1; }

.card-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-24);
  margin-block: 0; padding-block: 0; list-style: none;
}
.card-grid:not(.container) { padding-inline: 0; }
@media (min-width: 34em) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64em) { .card-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.card-grid--3 { }
@media (min-width: 64em) { .card-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Recirculation section — grey band begins 32px below the card tops */
.recirc { padding-top: var(--space-48); }
.recirc__title {
  margin-bottom: var(--space-32);
  font-size: var(--fs-headline-200);
}
.recirc__band {
  background: linear-gradient(to bottom, transparent var(--space-32), var(--color-bg-subtle) var(--space-32));
  padding-bottom: var(--space-48);
}

/* -------------------------------------------------------------------------
   AUTHOR — byline tooltip / mini bio (end of article)
   ------------------------------------------------------------------------- */
.author-card {
  display: grid;
  grid-template-columns: 4rem 1fr;
  gap: var(--space-16);
  align-items: start;
  padding: var(--space-24) 0;
  border-top: var(--border-1) solid var(--color-border);
}
.author-card__avatar { width: 4rem; height: 4rem; border-radius: var(--radius-full); object-fit: cover; }
.author-card__name { font: var(--fw-semibold) var(--fs-title-100)/var(--lh-120) var(--font-display); }
.author-card__bio { margin-top: var(--space-4); font: var(--fw-regular) var(--fs-utility-200)/var(--lh-140) var(--font-sans); color: var(--color-text-secondary); }
.author-card__more { display: inline-block; margin-top: var(--space-8); font: var(--fw-bold) var(--fs-utility-200)/var(--lh-130) var(--font-sans); }

/* -------------------------------------------------------------------------
   AUTHOR PAGE
   Ref: cream band 180px full-bleed behind header; header flex, gap 16,
   margin-top 32. Photo ≈184×172, square corners. Name 29/34.8 display.
   Fields 16/22.4, label bold, mb 8. Content column 600 centered.
   Section H2 23/27.6, margin 48 0 16.
   ------------------------------------------------------------------------- */
.bio-hero { position: relative; isolation: isolate; }
.bio-hero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 11.25rem; /* 180 */
  background: var(--color-bg-brand);
  z-index: -1;
}
.bio-header {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
  padding-top: var(--space-32);
}
.bio-header__photo {
  flex: 0 0 auto;
  width: 9rem;
  aspect-ratio: 184 / 172;
  object-fit: cover;
  background: var(--color-bg-subtle-opaque);
}
@media (min-width: 50em) { .bio-header__photo { width: 11.5rem; } }
.bio-header__name { font-size: var(--fs-title-300); padding-top: var(--space-8); }
.bio-header__role {
  margin-top: var(--space-8);
  font: var(--fw-bold) var(--fs-label-200)/var(--lh-140) var(--font-sans);
  letter-spacing: var(--ls-label-sm);
  text-transform: uppercase;
  color: var(--color-text-brand);
}
.bio-social { display: flex; gap: var(--space-12); margin-top: var(--space-12); }
.bio-social a { display: grid; place-items: center; width: 2rem; height: 2rem; color: var(--color-text); }
.bio-social svg { width: var(--icon-20); height: var(--icon-20); }

.bio-fields { margin-top: var(--space-24); }
.bio-fields__row {
  margin-bottom: var(--space-8);
  font: var(--fw-regular) var(--fs-utility-300)/var(--lh-140) var(--font-sans);
}
.bio-fields__label { font-weight: var(--fw-bold); }

.bio-body { margin-top: var(--space-40); }
.bio-section__title {
  margin: var(--space-48) 0 var(--space-16);
  font-size: var(--fs-title-200);
}

/* -------------------------------------------------------------------------
   SITE FOOTER
   Ref: bg black-05, top border; logo; CTA; outline "Newsletters" 300w;
   "Follow us" + 24px social icons; nav col uppercase 14/700 1px;
   link cols 14/400. Bottom publisher strip on white.
   ------------------------------------------------------------------------- */
.site-footer {
  margin-top: var(--space-48);
  border-top: var(--border-1) solid var(--color-border);
  background: var(--color-bg-subtle);
}
.site-footer__inner {
  display: grid;
  gap: var(--space-40);
  padding-block: var(--space-32) var(--space-32);
}
@media (min-width: 64em) {
  .site-footer__inner { grid-template-columns: 5fr 2fr 2.2fr 2.2fr; gap: var(--space-24); }
  .site-footer__brand { grid-row: span 2; }
}
.site-footer__logo {
  display: inline-block;
  margin-bottom: var(--space-24);
  color: var(--color-text-brand);
  font: var(--fw-semibold) var(--fs-41)/1 var(--font-display);
  text-decoration: none;
}
.site-footer__stack { display: grid; gap: var(--space-16); justify-items: start; }
.site-footer__stack .btn--outline { width: 100%; max-width: 18.75rem; }
.site-footer__follow { margin-top: var(--space-16); font: var(--fw-regular) var(--fs-14)/var(--lh-130) var(--font-sans); }
.social-list { display: flex; gap: var(--space-20); margin: var(--space-12) 0 0; padding: 0; list-style: none; }
.social-list a { display: grid; place-items: center; width: var(--icon-24); height: var(--icon-24); color: var(--color-text); }
.social-list svg { width: var(--icon-24); height: var(--icon-24); }

.footer-nav { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-12); }
.footer-nav a {
  font: var(--fw-bold) var(--fs-label-300)/var(--lh-140) var(--font-sans);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  text-decoration: none;
}
.footer-links { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-12); align-content: start; }
.footer-links a {
  font: var(--fw-regular) var(--fs-14)/var(--lh-130) var(--font-sans);
  text-decoration: none;
}
.footer-nav a:hover, .footer-links a:hover { text-decoration: underline; }

.site-footer__legal {
  background: var(--color-bg);
  padding-block: var(--space-16);
  font: var(--fw-regular) var(--fs-14)/var(--lh-130) var(--font-sans);
  color: var(--color-text-secondary);
}

/* -------------------------------------------------------------------------
   AD / RAIL SLOT placeholder
   ------------------------------------------------------------------------- */
.ad-slot {
  display: grid; place-items: center;
  min-height: 15.625rem; /* 250 */
  background: var(--color-bg-subtle);
  color: var(--color-text-secondary);
  font: var(--fw-bold) var(--fs-label-100)/1 var(--font-sans);
  letter-spacing: var(--ls-label-sm);
  text-transform: uppercase;
}
.ad-slot--rail { min-height: 37.5rem; } /* 300×600 */