/* ============================================================
   The LA Brief — shared stylesheet
   1. Tokens            5. Hero + rail
   2. Base + a11y       6. Section blocks / cards
   3. Eyebrow system    7. Articles
   4. Chrome            8. Editor / policy  9. Footer  10. Responsive
   ============================================================ */

/* ===== 1. Tokens ===== */
:root {
  /* Ink & paper */
  --ink: #16161a;
  --ink-soft: #3c3c46;
  --bg: #ffffff;
  --muted: #5f5f6b;
  --credit: #6b6b77;          /* AA-compliant on white — credits stay legible */
  --wash: #f6f6f9;

  /* Brand */
  --blue: #1e40c0;
  --blue-dark: #16308f;
  --blue-soft: #b9c4ec;
  --blue-wash: #eef1fb;
  --gold: #d9a441;
  --gold-ink: #9c6d15;

  /* Rules */
  --rule: #dcdce3;
  --rule-soft: #ebebf1;

  /* Type */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', Times, serif;
  --sans: 'Helvetica Neue', Helvetica, Arial, 'Segoe UI', sans-serif;

  /* Measure & rhythm */
  --measure: 720px;
  --measure-art: 820px;
  --gutter: clamp(24px, 2.8vw, 36px);
  --nav-h: 46px;
}

/* ===== 2. Base + a11y ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.6;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

.wrap { max-width: 1140px; margin: 0 auto; padding: 0 20px; }
.sans { font-family: var(--sans); }

a { color: inherit; text-decoration: none; }

/* Body-copy links: blue, restrained underline that firms up on hover */
p a, .press a, .elsewhere a, .about a, .policy a {
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: var(--blue-soft);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.16em;
  transition: text-decoration-color .18s ease, color .18s ease;
}
p a:hover, .press a:hover, .elsewhere a:hover, .about a:hover, .policy a:hover {
  color: var(--blue-dark);
  text-decoration-color: currentColor;
  text-decoration-thickness: 2px;
}

/* Headline links: colour shift only — no underline noise */
h1 a, h2 a, h3 a, h4 a { transition: color .18s ease; }

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
  border-radius: 1px;
}
.btn:focus-visible { outline-offset: 3px; }

::selection { background: #fbe8c2; color: var(--ink); }

img { max-width: 100%; }

/* Anchors clear the sticky nav */
[id] { scroll-margin-top: calc(var(--nav-h) + 18px); }

/* ===== 3. Eyebrow system =====
   One kicker treatment, used everywhere a label sits above content.
   The short gold tick is the only place the accent colour appears in type. */
.cat,
.kicker,
.rail-head,
.read-next h3,
.box h3,
.policy h2,
.lead > .stamp:first-child {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--blue);
  line-height: 1.2;
  display: flex;
  align-items: center;
  gap: 9px;
}
.cat::before,
.kicker::before,
.rail-head::before,
.read-next h3::before,
.box h3::before,
.policy h2::before,
.lead > .stamp:first-child::before {
  content: "";
  flex: 0 0 auto;
  width: 16px;
  height: 3px;
  background: var(--gold);
}

/* ===== 4. Chrome ===== */

/* --- Utility bar --- */
.utility {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 11px 0 10px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: 0.005em;
  color: var(--muted);
}
.utility .left b { color: var(--ink); font-weight: 700; }
.utility .btns { display: flex; gap: 8px; flex: 0 0 auto; }

.btn {
  display: inline-block;
  background: var(--blue); color: #fff;
  font-family: var(--sans);
  font-size: 11.5px; font-weight: 700;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 8px 18px; border-radius: 2px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn:hover { background: var(--blue-dark); }
.btn.ghost {
  background: transparent; color: var(--blue);
  box-shadow: inset 0 0 0 1px var(--blue-soft);
  padding: 8px 17px;
}
.btn.ghost:hover { background: var(--blue-wash); box-shadow: inset 0 0 0 1px var(--blue); color: var(--blue-dark); }

/* --- Masthead --- */
.masthead { text-align: center; padding: 26px 0 20px; }
.masthead.small { padding: 18px 0 16px; }
.masthead h1 { line-height: 0; font-weight: inherit; }
/* shrink-wrap the logo link so its focus ring hugs the mark, not the page */
.masthead h1 > a, .masthead > a { display: inline-block; max-width: 100%; }
.masthead svg.logo {
  display: block; margin: 0 auto;
  width: min(84vw, 420px); height: auto;
}
.masthead.small svg.logo { width: min(70vw, 315px); }

.masthead .tagline {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: var(--sans);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.34em; text-indent: 0.34em;
  color: var(--muted);
  margin-top: 16px;
}
.masthead .tagline::before,
.masthead .tagline::after {
  content: ""; height: 1px; background: var(--rule);
  flex: 1 1 auto; max-width: 74px; min-width: 18px;
}

/* --- Section nav --- */
nav.sections {
  position: sticky; top: 0; z-index: 30;
  background: var(--bg);
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
  display: flex; justify-content: center; flex-wrap: wrap;
}
/* Depth only once the bar is actually stuck — no shadow sitting on the
   trending row at rest. Progressive enhancement; degrades to no shadow. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    nav.sections {
      animation: nav-lift linear both;
      animation-timeline: scroll(root block);
      animation-range: 150px 215px;
    }
  }
}
@keyframes nav-lift { to { box-shadow: 0 12px 18px -16px rgba(22, 22, 26, 0.55); } }
nav.sections a {
  position: relative;
  font-family: var(--sans);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--ink);
  padding: 15px 15px 14px;
  display: block; white-space: nowrap;
  transition: color .16s ease;
}
nav.sections a::after {
  content: ""; position: absolute; left: 15px; right: 15px; bottom: -1px;
  height: 2px; background: var(--blue);
  transform: scaleX(0); transform-origin: center;
  transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
nav.sections a:hover { color: var(--blue); }
nav.sections a:hover::after { transform: scaleX(1); }
nav.sections a.here { color: var(--blue); }
nav.sections a.here::after { transform: scaleX(1); height: 3px; }

/* --- Trending ticker --- */
.trending {
  display: flex; align-items: stretch;
  overflow-x: auto; overscroll-behavior-x: contain;
  border-bottom: 1px solid var(--rule);
  white-space: nowrap;
  font-family: var(--sans);
  scrollbar-width: none; -ms-overflow-style: none;
}
.trending::-webkit-scrollbar { display: none; }
.trending .lbl {
  flex: 0 0 auto;
  display: flex; align-items: center;
  color: var(--blue); font-weight: 800;
  letter-spacing: 0.13em; font-size: 10.5px;
  padding: 11px 16px 11px 0;
}
.trending a {
  flex: 0 0 auto;
  display: flex; align-items: center;
  font-size: 13px; color: var(--ink-soft);
  padding: 11px 15px;
  border-left: 1px solid var(--rule-soft);
  transition: color .16s ease, background-color .16s ease;
}
.trending a:first-of-type { border-left: 1px solid var(--rule); }
.trending a:hover { color: var(--blue); background: var(--blue-wash); }

/* ===== 5. Hero + rail ===== */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 1fr);
  gap: var(--gutter);
  padding: 30px 0 4px;
}

.lead > .stamp:first-child { margin-bottom: 12px; }
.lead h2 {
  font-size: clamp(2rem, 1.15rem + 2.9vw, 3.05rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
.lead h2 a:hover { color: var(--blue); }
.lead .dek {
  font-size: clamp(1.06rem, 1rem + 0.3vw, 1.2rem);
  line-height: 1.48;
  color: var(--ink-soft);
  margin: 14px 0 0;
  text-wrap: pretty;
}

/* Art + captions */
.art {
  display: block; margin-top: 20px;
  background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--rule);
  overflow: hidden;
}
.art img, .card .thumb img {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .8s cubic-bezier(.16,.84,.44,1), filter .3s ease;
}
a.art:hover img, .card .thumb:hover img { transform: scale(1.028); }

.caption {
  font-family: var(--sans);
  font-size: 12.5px; line-height: 1.5;
  color: var(--ink-soft);
  margin-top: 9px; max-width: 72ch;
}
.caption .cr { color: var(--credit); }

/* Byline / dateline stamps */
.stamp {
  font-family: var(--sans);
  font-size: 12.5px; color: var(--muted);
  letter-spacing: 0.005em;
}
.stamp b { color: var(--ink); font-weight: 700; }
.lead .dek + .stamp {
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--rule-soft);
}

/* --- Rail --- */
.rail {
  border-left: 1px solid var(--rule);
  padding-left: var(--gutter);
}
.rail .rail-head {
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  margin-bottom: 2px;
}
.rail ul { list-style: none; }
.rail li { border-bottom: 1px solid var(--rule-soft); padding: 14px 0 13px; }
.rail li:last-child { border-bottom: none; }
.rail li a {
  font-weight: 600; font-size: 1.02rem; line-height: 1.28;
  letter-spacing: -0.01em; display: block;
  text-wrap: pretty;
}
.rail li a:hover { color: var(--blue); }
.rail li .stamp { margin-top: 6px; font-size: 11.5px; letter-spacing: 0.03em; }

.columnist {
  margin-top: 22px; padding-top: 18px;
  border-top: 2px solid var(--ink);
  display: flex; gap: 15px; align-items: center;
}
.columnist .ph {
  flex: 0 0 66px; width: 66px; height: 66px; border-radius: 50%; overflow: hidden;
  background: var(--blue-wash); box-shadow: inset 0 0 0 1px var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 9.5px; line-height: 1.3; color: var(--muted);
  text-align: center; padding: 6px;
}
.columnist .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.columnist .who b {
  font-family: var(--sans); font-size: 14px; font-weight: 700;
  letter-spacing: 0.005em;
}
.columnist .who > div {
  font-family: var(--sans); font-size: 12px; color: var(--muted);
  margin-top: 3px; line-height: 1.45;
}
.columnist .who a { transition: color .16s ease; }
.columnist .who a:hover { color: var(--blue-dark) !important; text-decoration: underline; }

/* ===== 6. Section blocks / cards ===== */
.home-section { padding: 34px 0 8px; border-top: 1px solid var(--rule-soft); margin-top: 26px; }
.home-section .sec-head {
  position: relative;
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 9px; margin-bottom: 22px;
}
.home-section .sec-head::after {
  content: ""; position: absolute; left: 0; bottom: -2px;
  width: 58px; height: 2px; background: var(--gold);
}
.home-section .sec-head h3 {
  font-family: var(--sans);
  font-size: 15px; font-weight: 800;
  letter-spacing: 0.15em; text-transform: uppercase;
}
.home-section .sec-head h3 a:hover { color: var(--blue); }
.home-section .sec-head span {
  font-family: var(--serif); font-style: italic;
  font-size: 14.5px; color: var(--muted);
}

/* Card grid: two-up by default; three-up as soon as a section holds 3+ items,
   so the 6-story archive lands as 3 + 3 with no orphan tracks. */
.cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter) var(--gutter);
}
.cards:has(> .card:nth-child(3)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.card { container: card / inline-size; display: flex; flex-direction: column; }
.card .thumb {
  display: block; background: var(--wash);
  box-shadow: inset 0 0 0 1px var(--rule);
  overflow: hidden; margin-bottom: 13px;
}
.card .thumb img { aspect-ratio: 16 / 10; }
.card h4 {
  font-size: 1.13rem; line-height: 1.24; font-weight: 700;
  letter-spacing: -0.012em; text-wrap: pretty;
}
.card h4 a:hover { color: var(--blue); }
.card .dek {
  font-size: 0.95rem; line-height: 1.47; color: var(--muted);
  margin-top: 7px; text-wrap: pretty;
}
.card > .stamp {
  margin-top: auto; padding-top: 11px;
  font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--credit);
}

/* Container query: cards in a two-up row get display-scale headlines */
@container card (min-width: 400px) {
  .card h4 { font-size: 1.42rem; line-height: 1.16; letter-spacing: -0.018em; }
  .card .dek { font-size: 1rem; margin-top: 9px; }
  /* the brief panel carries no photo, so the type does the work */
  .card:not(:has(.thumb)) h4 { font-size: 1.62rem; line-height: 1.13; }
  .card:not(:has(.thumb)) .dek { font-size: 1.04rem; margin-top: 12px; }
}

/* Text-only items read as a deliberate column of briefs, not a missing photo */
.card:not(:has(.thumb)) {
  background: var(--wash);
  border-top: 3px solid var(--ink);
  padding: 26px 26px 28px;
  justify-content: center;
}
.card:not(:has(.thumb)) > .stamp { margin-top: 16px; }

/* ===== 7. Articles ===== */
.articles { border-top: 3px solid var(--ink); margin-top: 44px; padding-top: 8px; }
.articles.story-page { border-top: none; margin-top: 10px; padding-top: 0; }

article.story {
  max-width: var(--measure); margin: 0 auto;
  padding: 34px 0 42px;
  border-bottom: 1px solid var(--rule);
}
article.story:last-of-type { border-bottom: none; }

article.story h2 {
  font-size: clamp(1.75rem, 1.1rem + 2.3vw, 2.5rem);
  line-height: 1.1; letter-spacing: -0.022em;
  margin: 14px 0 0; text-wrap: balance;
}
article.story h1.headline {
  font-size: clamp(2rem, 1.15rem + 3.1vw, 3.1rem);
  line-height: 1.04; font-weight: 700; letter-spacing: -0.025em;
  margin: 14px 0 0; text-wrap: balance;
}

article.story .byline {
  font-family: var(--sans);
  font-size: 12.5px; line-height: 1.55; color: var(--muted);
  letter-spacing: 0.005em;
  margin: 20px 0 26px;
  padding: 12px 0 13px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
article.story .byline b {
  color: var(--ink); font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; font-size: 12px;
}

article.story .art { margin: 0; }
article.story .art img { aspect-ratio: 16 / 9; }
article.story .caption { margin-bottom: 28px; }

article.story p {
  font-size: 1.115rem; line-height: 1.65;
  margin-bottom: 1.05em;
  text-wrap: pretty;
}
article.story p:last-child { margin-bottom: 0; }

/* Photography breaks the measure on wide viewports — a real editorial move */
@media (min-width: 940px) {
  article.story > .art,
  article.story > .caption {
    width: var(--measure-art);
    margin-left: calc((var(--measure) - var(--measure-art)) / 2);
    max-width: none;
  }
}

/* Drop cap. Float fallback sinks two lines and lands its baseline on line two;
   where `initial-letter` exists it becomes a true three-line sink, optically
   aligned by the engine instead of by hand-tuned padding. */
.drop::first-letter {
  float: left;
  font-size: 3.42em;
  line-height: 0.79;
  font-weight: 700;
  color: var(--blue);
  padding: 0.07em 0.07em 0 0;
  margin-right: 0.02em;
  -webkit-font-smoothing: antialiased;
}
@supports (initial-letter: 3) {
  .drop::first-letter {
    float: none;
    font-size: inherit;
    line-height: inherit;
    initial-letter: 3;
    /* em here resolves against the inherited body size, not the sunk cap */
    padding: 0 0.42em 0 0;
    margin-right: 0;
  }
}

/* ===== Read next ===== */
.read-next {
  max-width: var(--measure); margin: 0 auto;
  padding: 28px 0 10px;
  border-top: 3px solid var(--ink);
}
.read-next h3 { margin-bottom: 16px; }
.read-next ul {
  list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
}
.read-next li {
  padding: 14px 0 15px;
  border-top: 1px solid var(--rule-soft);
}
.read-next li a {
  font-weight: 600; font-size: 1.06rem; line-height: 1.26;
  letter-spacing: -0.012em; display: block; text-wrap: pretty;
  transition: color .16s ease;
}
.read-next li a:hover { color: var(--blue); }
.read-next li span {
  display: block; font-family: var(--sans);
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--credit); margin-top: 7px;
}

/* ===== 8. Editor page ===== */
/* The editor page runs on its own, narrower column grid so the portrait,
   the bio measure, the panels and the contact line all share two edges. */
.editor-hero, .boxes, .contact { max-width: 1020px; margin-left: auto; margin-right: auto; }

.editor-hero {
  display: grid; grid-template-columns: 340px minmax(0, 1fr);
  gap: clamp(30px, 4vw, 52px);
  padding: 44px 0 24px; align-items: start;
}
.portrait {
  box-shadow: inset 0 0 0 1px var(--rule);
  overflow: hidden;
  background: linear-gradient(165deg, #eef1fb, #dfe3f0);
  aspect-ratio: 3 / 4; display: flex; align-items: center; justify-content: center;
  font-family: var(--sans); font-size: 12px; line-height: 1.5;
  color: var(--muted); text-align: center; padding: 20px;
}
.portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }

.editor-hero .kicker { margin-bottom: 12px; }
.editor-hero h1 {
  font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.2rem);
  line-height: 1.03; letter-spacing: -0.028em; margin: 0 0 10px;
  text-wrap: balance;
}
.role {
  font-family: var(--sans); font-size: 12.5px;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted);
  padding-bottom: 20px; margin-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}
.editor-hero p {
  font-size: 1.09rem; line-height: 1.64;
  margin-bottom: 1.05em; text-wrap: pretty;
}
.editor-hero p:last-child { margin-bottom: 0; }

figure.inset { max-width: 560px; margin: 22px 0 8px; }
figure.inset img {
  width: 100%; display: block;
  box-shadow: inset 0 0 0 1px var(--rule);
}
figure.inset figcaption {
  font-family: var(--sans); font-size: 12.5px; line-height: 1.5;
  color: var(--ink-soft); margin-top: 9px;
}

.boxes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter); padding: 26px 0 12px;
  align-items: start;   /* panels take their natural height, not the row's */
}
.box {
  background: var(--wash);
  border-top: 3px solid var(--ink);
  padding: 20px 22px 8px;
}
.box h3 { margin-bottom: 14px; }
.box ul { list-style: none; }
.box li {
  padding: 11px 0 12px;
  border-bottom: 1px solid var(--rule);
  font-size: 1rem; line-height: 1.45;
}
.box li:last-child { border-bottom: none; }
.box li .src {
  display: block; font-family: var(--sans);
  font-size: 11.5px; line-height: 1.5; color: var(--muted); margin-top: 4px;
}
.contact {
  padding: 22px 0 10px; margin-top: 14px;
  border-top: 1px solid var(--rule);
}
.contact p { max-width: 70ch; font-size: 1.03rem; }

/* ===== Masthead / policy page ===== */
.policy { max-width: var(--measure); margin: 0 auto; padding: 40px 0 10px; }
.policy h1 {
  font-size: clamp(2rem, 1.3rem + 2.6vw, 2.85rem);
  line-height: 1.05; letter-spacing: -0.025em;
  padding-bottom: 20px; margin-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  text-wrap: balance;
}
.policy h2 { margin: 34px 0 12px; }
.policy p { margin-bottom: 0.85em; font-size: 1.06rem; line-height: 1.62; text-wrap: pretty; }

/* ===== 9. About + footer ===== */
.about { border-top: 3px solid var(--ink); margin-top: 40px; padding: 30px 0 34px; }
.about h3 {
  font-family: var(--sans); font-size: 15px; font-weight: 800;
  letter-spacing: 0.15em; text-transform: uppercase;
  margin-bottom: 18px; column-span: all;
}
.about p {
  margin-bottom: 0.9em; font-size: 1.02rem; line-height: 1.6;
  text-wrap: pretty;
}
.about p:last-child { margin-bottom: 0; }
/* Two balanced text columns — copy flows across the break the way it would
   in print, rather than stranding a short paragraph in column two. */
@media (min-width: 820px) {
  .about { columns: 2; column-gap: 52px; column-rule: 1px solid var(--rule-soft); }
}

footer {
  background: var(--ink); color: #b9b9c4;
  border-top: 3px solid var(--gold);
  margin-top: 46px;
  font-family: var(--sans); font-size: 12px; line-height: 1.6;
}
footer .wrap {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 16px 30px;
  padding-top: 30px; padding-bottom: 34px;
}
/* colophon line drops full-width beneath the wordmark and the link row */
footer .wrap > div:last-child {
  flex: 1 1 100%;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 11px; color: #90909d; letter-spacing: 0.015em;
}
footer b {
  color: #fff; font-family: var(--serif); font-weight: 700;
  font-size: 17px; letter-spacing: -0.015em;
}
footer a { color: #e4e4ee; transition: color .16s ease; }
footer a:hover { color: #fff; }
footer .ftr-links { display: flex; flex-wrap: wrap; align-items: center; }
footer .ftr-links a {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.11em; text-transform: uppercase;
  padding: 2px 14px;
  border-left: 1px solid rgba(255, 255, 255, 0.18);
}
footer .ftr-links a:first-child { border-left: none; padding-left: 0; }
footer .ftr-links a:hover { color: var(--gold); }

/* ===== 10. Responsive ===== */
@media (max-width: 1000px) {
  .cards:has(> .card:nth-child(3)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  :root { --nav-h: 42px; }

  .utility { font-size: 11.5px; }
  .masthead { padding: 22px 0 18px; }
  .masthead .tagline { letter-spacing: 0.26em; text-indent: 0.26em; gap: 12px; }

  nav.sections {
    justify-content: flex-start; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  nav.sections::-webkit-scrollbar { display: none; }
  nav.sections a { padding: 13px 13px 12px; font-size: 11.5px; }
  nav.sections a::after { left: 13px; right: 13px; }

  /* Scroll affordance for the two horizontal bars. A sticky pseudo-element
     rides the right edge and paints over the content beneath it — unlike a
     mask, it leaves the sticky nav opaque and the bottom rules unbroken. */
  nav.sections::after,
  .trending::after {
    content: ""; flex: 0 0 32px; align-self: stretch;
    position: sticky; right: 0; margin-left: -32px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff 72%);
    pointer-events: none;
  }

  .hero { grid-template-columns: 1fr; gap: 0; padding-top: 24px; }
  .rail {
    border-left: none; padding-left: 0;
    margin-top: 34px; padding-top: 24px;
    border-top: 3px solid var(--ink);
  }
  .rail .rail-head { border-bottom-width: 1px; }

  .editor-hero { grid-template-columns: 1fr; padding-top: 32px; }
  .portrait { max-width: 300px; }
  .boxes { grid-template-columns: 1fr; }
  .read-next ul { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  body { font-size: 16.5px; }

  .utility { flex-wrap: wrap; gap: 11px; padding-bottom: 12px; }
  .utility .left { flex: 1 1 100%; font-size: 11.5px; }
  .utility .btns { flex: 1 1 100%; }
  .utility .btns .btn { flex: 1 1 0; text-align: center; }

  .portrait { max-width: 260px; }
  .editor-hero { gap: 26px; }

  .masthead { padding: 20px 0 16px; }
  .masthead svg.logo { width: min(84vw, 320px); }
  .masthead.small svg.logo { width: min(70vw, 250px); }
  /* Full width for the tagline so "LOS ANGELES" can't orphan onto two lines */
  .masthead .tagline { font-size: 8.5px; letter-spacing: 0.17em; text-indent: 0.17em; margin-top: 14px; }
  .masthead .tagline::before, .masthead .tagline::after { display: none; }

  .cards,
  .cards:has(> .card:nth-child(3)) { grid-template-columns: 1fr; }
  .home-section { padding-top: 26px; margin-top: 20px; }

  .lead .dek { max-width: none; }
  .art { margin-top: 16px; }

  article.story { padding: 24px 0 32px; }
  article.story .byline { margin: 16px 0 22px; }
  article.story .caption { margin-bottom: 22px; }
  .drop::first-letter { font-size: 3.05em; }
  @supports (initial-letter: 3) {
    .drop::first-letter { font-size: inherit; initial-letter: 2; }
  }

  .about { padding-top: 26px; }
  footer .wrap { padding-top: 26px; padding-bottom: 28px; gap: 18px; }
  /* dividers can't survive a wrap cleanly — drop them and space the links */
  footer .ftr-links { gap: 9px 0; }
  footer .ftr-links a { border-left: none; padding: 2px 22px 2px 0; }
}

@media (max-width: 400px) {
  .columnist { gap: 13px; }
  .columnist .ph { flex-basis: 58px; width: 58px; height: 58px; }
  .card:not(:has(.thumb)) { padding: 18px 18px 20px; }
}

/* ===== Print ===== */
@media print {
  :root { --ink: #000; }
  body { font-size: 11pt; line-height: 1.45; }
  .utility .btns, nav.sections, .trending, .columnist, .read-next { display: none; }
  nav.sections { position: static; }
  .art, .card .thumb, .portrait { box-shadow: none; border: 1px solid #bbb; }
  .hero { grid-template-columns: 1fr; }
  .rail { border-left: none; padding-left: 0; }
  article.story > .art, article.story > .caption { width: auto; margin-left: 0; }
  footer { background: none; color: #000; border-top: 1px solid #000; }
  footer a, footer b { color: #000; }
  article.story p a[href^="http"]::after,
  .policy p a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-family: var(--sans); font-size: 8.5pt; color: #444; word-break: break-all;
  }
  a { text-decoration: none; }
}

/* ============================================================
   Pacific Horizon retheme — brand concept 4
   Midnight Navy #0D1B2A · Pale Cream #F6F1E6 · Solar Yellow #FFC83D
   Masthead face: Marcellus (licensed stand-in for Canela)
   ============================================================ */
:root {
  --ink: #0D1B2A;
  --ink-soft: #24374d;
  --bg: #F6F1E6;
  --muted: #5b6472;
  --credit: #667080;
  --wash: #EFE8D9;
  --blue: #16334f;
  --blue-dark: #0D1B2A;
  --blue-soft: #E2CD9C;
  --blue-wash: #EFE6D2;
  --gold: #FFC83D;
  --gold-ink: #8a6a10;
  --rule: #DCD3C0;
  --rule-soft: #E9E1D0;
  --display: 'Marcellus', 'Times New Roman', serif;
}
body { background: var(--bg); }
::selection { background: #FFE9AE; color: var(--ink); }

/* Chrome on cream */
nav.sections { background: var(--bg); }
nav.sections a::after { background: var(--gold); }
nav.sections a.here { color: var(--ink); }
.trending .lbl { color: var(--ink); }

/* Buttons: navy primary, quiet ghost */
.btn { background: var(--ink); color: #FBF7EC; }
.btn:hover { background: #1d3350; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px #C9BC9F; }
.btn.ghost:hover { background: var(--blue-wash); box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }

/* Masthead lockup + tagline */
.masthead svg.logo { width: min(92vw, 560px); }
.masthead.small svg.logo { width: min(82vw, 420px); }
.masthead .tagline { color: var(--muted); }
.masthead .tagline .tag-dot { color: var(--gold-ink); font-weight: 700; }

/* Footer: midnight navy */
footer { background: var(--ink); color: #C7CFDA; }
footer b { color: #F6F1E6; }
footer a { color: #E8E2D2; }
footer a:hover { color: var(--gold); }
.masthead .tagline .tag-dot { margin-left: -0.30em; color: var(--gold); font-weight: 800; }

/* ============================================================
   Glossy white edition — reference-mock layout
   Navy horizon masthead band · white paper · editorial blue accent
   ============================================================ */
:root {
  --bg: #ffffff;
  --wash: #f7f7f9;
  --rule: #e3e3e8;
  --rule-soft: #eeeef2;
  --muted: #5d6470;
  --credit: #6d7480;
  --blue: #1E56D6;
  --blue-dark: #123FA8;
  --blue-soft: #c4d2f4;
  --blue-wash: #eef2fc;
  --band: #000e27;
}
body { background: var(--bg); }
::selection { background: #dbe6ff; color: var(--ink); }

/* --- Masthead: full-bleed navy band with the horizon banner --- */
.masthead {
  position: relative;
  padding: 0 0 6px;
}
.masthead::before {
  content: "";
  position: absolute;
  top: 0; bottom: 40px;
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: var(--band);
  z-index: -1;
}
.masthead img.logo-band {
  display: block;
  margin: 0 auto;
  width: min(96vw, 680px);
  height: auto;
}
.masthead.small img.logo-band { width: min(86vw, 480px); }
.masthead .tagline { margin-top: 14px; }
.masthead .tagline::before, .masthead .tagline::after { background: var(--rule); }

/* utility bar sits above the band on white */
.utility { border-bottom: none; }

/* --- Nav: crisp white, blue active --- */
nav.sections { border-top: 2px solid var(--ink); }
nav.sections a::after { background: var(--blue); }
nav.sections a.here { color: var(--blue); }

/* --- The Latest strip --- */
.trending .lbl { color: var(--blue); }

/* --- Hero: photo left, story right --- */
.lead { display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: start; }
.lead .art { margin-top: 0; }
.lead .lead-text .stamp:first-child { margin-top: 0; }
.lead h2 { font-size: clamp(1.7rem, 2.9vw, 2.5rem); }
@media (max-width: 800px) { .lead { grid-template-columns: 1fr; } }

/* --- Editor's Picks: numbered rail --- */
.rail ul.picks { counter-reset: pick; }
.rail ul.picks li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; }
.rail ul.picks li::before {
  counter-increment: pick;
  content: counter(pick, decimal-leading-zero);
  font-family: var(--sans);
  font-weight: 800; font-size: 15px;
  color: var(--blue);
  border-bottom: 2px solid var(--blue);
  align-self: start; line-height: 1.5;
}

/* --- Newsletter box --- */
.orbit {
  margin-top: 26px; border: 1px solid var(--rule); border-radius: 4px;
  padding: 20px 22px; background: var(--bg);
}
.orbit h3 {
  font-family: var(--sans); font-size: 13px; font-weight: 800;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink);
  margin-bottom: 8px;
}
.orbit p { font-size: 0.98rem; color: var(--muted); margin-bottom: 14px; }
.orbit form { display: flex; gap: 8px; }
.orbit input[type="email"] {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--sans); font-size: 14px;
  padding: 10px 12px; border: 1px solid var(--rule); border-radius: 3px;
  background: var(--bg); color: var(--ink);
}
.orbit input[type="email"]:focus { outline: 2px solid var(--blue); outline-offset: 1px; }
.orbit button {
  font-family: var(--sans); font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--blue); color: #fff; border: none; border-radius: 3px;
  padding: 10px 18px; cursor: pointer;
}
.orbit button:hover { background: var(--blue-dark); }
.orbit .fine { font-size: 11.5px; color: var(--credit); margin: 10px 0 0; }

/* --- In Focus row --- */
.in-focus .cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 22px; }
.in-focus .card h4 { font-size: 1.02rem; text-align: center; }
.in-focus .card .dek { font-size: 0.88rem; text-align: center; }
.in-focus .card .thumb img { aspect-ratio: 16 / 11; }
.in-focus .card .cat-label {
  font-family: var(--sans); font-size: 11px; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink);
  text-align: center; margin-bottom: 8px;
}

/* footer stays navy */
footer { background: #0D1B2A; }

/* --- glossy fixes: band wraps the banner exactly; picks stamps align --- */
.masthead::before { content: none; }
.masthead h1, .masthead.small > a {
  position: relative; display: block; padding: 22px 0;
}
.masthead h1::before, .masthead.small > a::before {
  content: ""; position: absolute;
  top: 0; bottom: 0;
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: var(--band); z-index: -1;
}
.masthead.small > a { padding: 14px 0; }
.rail ul.picks li .stamp { grid-column: 2; margin-top: 4px; }
.home-section.in-focus > .cards { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)) !important; }