/* ─────────────────────────────────────────────────────────────────
   The Scottsdale Signal — v0.3 design system
   Built directly from the Figma file (gc6asjBvHS7dwRTeNi6543) at
   1440px desktop. Every color, font-size, tracking, and spacing
   value here was lifted out of the design context the Figma MCP
   returned. Do not eyeball it; if a value seems off, the source of
   truth is the React/Tailwind output of get_design_context, not
   prior versions of this stylesheet.

   Typography stack:
     'News Cycle' Bold        — eyebrows, ALLCAPS labels, nav links
     'Newsreader' SemiBold    — display titles + article headlines
     'Newsreader' Regular     — display subheads + wire-strip headlines
     'Inter' Medium / SemiBold — meta, buttons, body UI

   Color tokens:
     #0A0A0A   ink black
     #F7F6F2   news white (page bg)
     #6B6B6B   lead gray (muted text + hairlines)
     #E7321E   signal red / accent
     #D9D9D9   image placeholder
   ─────────────────────────────────────────────────────────────────*/

@import url('https://fonts.googleapis.com/css2?family=News+Cycle:wght@400;700&family=Newsreader:opsz,wght@6..72,400;6..72,600&family=Inter:wght@400;500;600;700&display=swap');

:root {
  --ink:       #0A0A0A;
  --bg:        #F7F6F2;
  --bg-dark:   #0A0A0A;
  --muted:     #6B6B6B;
  --rule:      #6B6B6B;
  --rule-soft: #D9D5C8;
  --accent:    #E7321E;
  --placeholder: #D9D9D9;

  --serif:  "Newsreader", Georgia, "Times New Roman", serif;
  --label:  "News Cycle", Impact, "Helvetica Neue Condensed", sans-serif;
  --ui:     "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  --wrap-pad-x: 60px;     /* utility bar / masthead / nav use 60px gutters */
  --wrap-pad-x-wide: 144px; /* hero / sections use 144px gutters */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: var(--ui); font-size: 16px; line-height: 1.5; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; }

/* Layout wrappers — no max-width. Match the Figma which uses full-bleed
   to the page edge with internal section padding. */
.wrap-60  { padding-left: 60px;  padding-right: 60px; }
.wrap-144 { padding-left: 144px; padding-right: 144px; }


/* ─── Utility bar (date / weather / AQI) ───────────────────────── */
.util {
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 49px;
  padding: 13px 60px;
  background: transparent;
  min-height: 54px;
}
@media (max-width: 1280px) {
  /* 4 pills (date + weather + AQI + pollen) — tighten the gap so they
     fit on a 1280px laptop without dropping pills below the masthead. */
  .util { gap: 28px; }
}
@media (max-width: 900px) {
  .util { gap: 16px; padding: 10px 24px; }
  .util-date { font-size: 11px; letter-spacing: 1px; }
}
.util-date {
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--ink);
  white-space: nowrap;
}
.util-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.util-pill-icon {
  width: 14px;
  height: 14px;
  display: inline-block;
}
.util-pill-text,
.util-pill-text-muted {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.12px;
  color: var(--ink);
  line-height: 1;
  white-space: nowrap;
}
.aqi-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #2EBD64;
  display: inline-block;
}
.aqi-label,
.aqi-status {
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--ink);
  white-space: nowrap;
}


/* ─── Masthead ─────────────────────────────────────────────────── */
.mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 60px;
  gap: 24px;
}
.mast-tag-left {
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2.4px;
  color: var(--ink);
  text-align: center;
  width: 249px;
  flex-shrink: 0;
}
.mast-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}
.mast-logotype {
  /* Stacked logotype, Figma 16:50 / 99:3236: 520 × 137 wordmark with
     "The" stacked on top of "Scottsdale Signal" instead of the older
     three-words-inline layout. Container width drives the rendered
     size; percentage insets on the 3 slices keep them aligned at any
     scale, so we don't need separate mobile rules. */
  position: relative;
  width: 520px;
  max-width: 100%;
  aspect-ratio: 520 / 137;
  height: auto;
  overflow: hidden;
}
.mast-logotype-part {
  position: absolute;
  display: block;
}
/* Top row — "The" centered at ~14.5% wide, top-anchored. */
.mast-logotype-part--the        { inset: 0 42.76% 61.6% 42.76%; }
/* Bottom row — "Scottsdale" left half, "Signal" right half. */
.mast-logotype-part--scottsdale { inset: 36.92% 39.76% 9.56% 0; }
.mast-logotype-part--signal     { inset: 37.44% 0 0 62.18%; }
.mast-logotype-part img { width: 100%; height: 100%; object-fit: contain; }
.mast-tagline {
  font-family: var(--label);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 5.6px;
  color: var(--accent);
  text-align: center;
  margin-top: 4px;
}
.mast-cta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.mast-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 18px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;          /* Figma spec: leading-none. Without this, the
                              body's default 1.5 line-height inflated each
                              button's vertical size by ~7px. */
  letter-spacing: -0.45px;
  border-radius: 4px;
  text-decoration: none !important;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.mast-btn--ghost {
  border: 1.5px solid var(--ink);
  color: var(--ink);
  background: transparent;
}
.mast-btn--ghost:hover { opacity: 0.7; }
.mast-btn--cta {
  background: var(--accent);
  color: var(--bg);
  border: 1.5px solid var(--accent);
}
.mast-btn--cta:hover { opacity: 0.9; }

/* Mobile-only auth row (hamburger + Sign In + Subscribe). Hidden on
   desktop; mobile.css makes it a flex row at <=760px. */
.mast-mobile-actions { display: none; }
.mast-menu-btn       { display: none; }


/* ─── Section nav ─────────────────────────────────────────────── */
.nav {
  display: flex;
  gap: 36px;
  align-items: center;
  justify-content: center;
  padding: 18px 60px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);

  /* Sticky on scroll — once the masthead + utility bar scroll away,
     the section nav pins to the top of the viewport so beat links
     stay one click away from anywhere on the page. Background is
     opaque cream so the content scrolling underneath doesn't show
     through. */
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
/* When the nav is in sticky-pinned mode (detected via JS adding the
   .nav--stuck class), drop the heavy top/bottom borders and add a
   subtle drop-shadow instead so it reads as a floating bar rather
   than a section divider. */
.nav.nav--stuck {
  border-top-color: transparent;
  border-bottom-color: transparent;
  box-shadow: 0 1px 0 rgba(10,10,10,0.06), 0 8px 16px -12px rgba(10,10,10,0.18);
}
.nav a {
  font-family: var(--label);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 2.8px;
  color: var(--ink);
  white-space: nowrap;
  text-transform: uppercase;
  text-decoration: none;
}
.nav a:hover { color: var(--accent); }


/* ─── Right Now strip (dark, 3-col wire) — Figma node 13:252 ────── */
.rightnow {
  background: var(--bg-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  padding: 24px 60px;
}
.rightnow-eyebrow-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  justify-content: center;
  flex-shrink: 0;
}
.rightnow-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 1.2px;
  color: var(--accent);
  white-space: nowrap;
}
.rightnow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(231,50,30,0.55);
  animation: pulse 2.2s ease-out infinite;
  flex-shrink: 0;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(231,50,30,0.55); }
  70%  { box-shadow: 0 0 0 6px rgba(231,50,30,0); }
  100% { box-shadow: 0 0 0 0 rgba(231,50,30,0); }
}
.rightnow-updated {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.12px;
  color: var(--muted);
  white-space: nowrap;
}
.rightnow-cards {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 18px;
  min-width: 0;
}
.rightnow-card {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 18px;
  min-width: 0;
  text-decoration: none !important;
  color: var(--bg);
}
.rightnow-divider {
  /* 1.5px × 69px white hairline that separates each card from the
     next. Was --muted (gray) which read as washed-out against the
     ink background; Figma 13:252 calls for the same near-white as
     the headline copy. */
  flex-shrink: 0;
  width: 1.5px;
  height: 69px;
  background: var(--bg);
  display: block;
}
.rightnow-card-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; flex: 1 1 0; }
.rightnow-headline {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.36px;
  line-height: 1.1;
  color: var(--bg);
}
.rightnow-card:hover .rightnow-headline { color: var(--accent); }
.rightnow-meta {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 1;
  letter-spacing: -0.12px;
  color: var(--muted);
}


/* ─── Hero / Today's Focus — Figma node 14:304 ──────────────────
   Frame is 1440px wide with px-216 (left+right) giving a 1008px
   content column. The eyebrow + headstack take w-full inside that
   column; the "How it works" CTA is inline-flex (intrinsic width)
   and centered by the parent's align-items. The subhead also takes
   w-full so the long line wraps to two lines instead of overflowing
   on wide viewports. */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  padding: 60px 24px;
  background: var(--bg);
}
.hero-inner {
  width: 100%;
  max-width: 1008px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.hero-eyebrow,
.hero-headstack { width: 100%; }
.hero-headstack .hero-title,
.hero-headstack .hero-sub { width: 100%; }
.hero-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--accent);
  text-align: center;
  text-transform: uppercase;
}
.hero-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 60px;
  letter-spacing: -2.4px;
  line-height: 1;
  color: var(--ink);
  text-align: center;
  margin: 0;
}
.hero-sub {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.44px;
  line-height: 1.3;
  color: var(--muted);
  text-align: center;
  margin: 0;
}
.hero-headstack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.15px;
  color: var(--ink);
  text-decoration: none !important;
}
.hero-cta-arrow { width: 12px; height: 12px; stroke: var(--accent); }


/* ─── Beats grid (Business / Real Estate / Dining 3-col) ───────── */
.beats {
  display: flex;
  gap: 36px;
  align-items: flex-start;
  padding: 48px 144px 60px;
  background: var(--bg);
}
.beat-col {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.beat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.beat-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  text-decoration: none;
}
.beat-viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.12px;
  color: var(--ink);
  text-decoration: none !important;
}
.beat-viewall-arrow { width: 8.5px; height: 8.5px; stroke: var(--accent); }
.beat-lead { display: flex; flex-direction: column; gap: 18px; }
.beat-lead-image,
.beat-lead-placeholder {
  width: 100%;
  height: 211px;
  border-radius: 8px;
  background: var(--placeholder);
  object-fit: cover;
  display: block;
}
.beat-card-body { display: flex; flex-direction: column; gap: 8px; }
.beat-lead-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.48px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}
.beat-lead-title a { color: var(--ink); text-decoration: none; }
.beat-lead-title a:hover { color: var(--accent); text-decoration: none; }
.beat-item-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.36px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.beat-item-title a { color: var(--ink); text-decoration: none; }
.beat-item-title a:hover { color: var(--accent); text-decoration: none; }
.beat-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 12px;
  width: 100%;
}
.beat-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.12px;
  color: var(--muted);
}
.beat-bookmark {
  width: 12px;
  height: 14.97px;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  color: var(--muted);
}
.beat-bookmark:hover { color: var(--accent); }
.beat-bookmark svg { width: 100%; height: 100%; }
.beat-rule {
  height: 1px;
  width: 100%;
  background: var(--muted);
  opacity: 0.5;
}


/* ─── Scottsdale Table (lifestyle 4-col) ───────────────────────── */
.lifestyle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 60px 144px;
  background: var(--bg);
}
.lifestyle-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.lifestyle-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.lifestyle-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
}
.lifestyle-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 60px;
  letter-spacing: -2.4px;
  line-height: 1;
  color: var(--ink);
  text-align: center;
  margin: 0;
}
.lifestyle-sub {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.44px;
  line-height: 1.3;
  color: var(--muted);
  text-align: center;
  margin: 0;
}
.lifestyle-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.15px;
  color: var(--ink);
  text-decoration: none !important;
}
.lifestyle-cta-arrow { width: 12px; height: 12px; stroke: var(--accent); }
.lifestyle-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 36px;
  width: 100%;
}
.lifestyle-card { display: flex; flex-direction: column; gap: 18px; }
.lifestyle-card-image,
.lifestyle-card-placeholder {
  width: 100%;
  height: 325px;
  border-radius: 8px;
  background: var(--placeholder);
  object-fit: cover;
}
.lifestyle-chip {
  align-self: flex-start;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 4px;
  text-decoration: none;
  line-height: 1.5;
  margin-bottom: 8px;
  display: inline-block;
}
.lifestyle-card-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.48px;
  line-height: 1.1;
  color: var(--ink);
  margin: 0 0 8px;
}
.lifestyle-card-title a { color: var(--ink); }
.lifestyle-card-title a:hover { color: var(--accent); text-decoration: none; }


/* ─── Events rail ───────────────────────────────────────────────
   "EVENTS" eyebrow on the left, "All Events →" link on the right,
   1px black rule below, then a 2×3 grid of compact event cards.
   Each card is a horizontal row: small thumb (with overlay venue +
   time pill) + headline. Designed to surface ~6 fancy/curated
   upcoming events at a glance. */
.events {
  background: var(--bg);
  padding: 60px 144px 72px;
}
.events-inner { max-width: 1440px; margin: 0 auto; }
.events-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.events-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  text-decoration: none;
}
.events-viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--accent);
  text-transform: uppercase;
  text-decoration: none;
}
.events-viewall svg { width: 10px; height: 10px; stroke: var(--accent); }
.events-rule {
  height: 1px;
  background: var(--ink);
  margin-bottom: 28px;
}
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(96px, auto);
  gap: 24px 36px;
}
.events-card {
  display: flex;
  align-items: stretch;
  gap: 18px;
  text-decoration: none;
  color: var(--ink);
}
.events-card-image {
  position: relative;
  flex-shrink: 0;
  width: 154px;
  height: 96px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--placeholder);
}
.events-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.events-card-meta {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8px 10px;
  background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,0.55) 100%);
  color: var(--bg);
}
.events-card-venue {
  font-family: var(--label);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--bg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.events-card-when {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11px;
  line-height: 1.2;
  color: var(--bg);
  letter-spacing: -0.1px;
  margin-top: 1px;
}
.events-card-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.34px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0;
  align-self: center;
}
.events-card:hover .events-card-title { color: var(--accent); }
.events-empty {
  grid-column: 1 / -1;
  font-family: var(--ui);
  font-weight: 400;
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
  padding: 24px 0;
}

@media (max-width: 1100px) {
  .events { padding: 48px 24px; }
  .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .events-grid { grid-template-columns: 1fr; }
  .events-card { flex-direction: row; }
  .events-card-image { width: 120px; height: 80px; }
}


/* ─── AI Notice block (dark) ───────────────────────────────────── */
.ainotice {
  background: var(--bg-dark);
  color: var(--bg);
  padding: 120px 144px;
  display: flex;
  flex-direction: column;
  gap: 36px;
}
.ainotice-top {
  display: flex;
  gap: 36px;
  align-items: flex-start;
}
.ainotice-pitch {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}
.ainotice-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
}
.ainotice-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 48px;
  letter-spacing: -1.92px;
  line-height: 1.05;
  color: var(--bg);
  margin: 0;
}
.ainotice-body {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.44px;
  line-height: 1.3;
  color: var(--muted);
  margin: 0;
}
.ainotice-emphasis {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.54px;
  line-height: 1.3;
  color: var(--accent);
  margin: 0;
}
.ainotice-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.15px;
  color: var(--bg);
  text-decoration: none !important;
}
.ainotice-cta-arrow { width: 12px; height: 12px; stroke: var(--bg); }

/* AI tool tile cluster — designer-supplied iOS-style PNG tiles.
   Each PNG contains the chip background + icon + shadow baked in,
   so the .ainotice-tile rule is just absolute-position + size with
   no border or chip styling. Layout transcribed from Figma node
   21:931 (485px × 380px frame). */
.ainotice-tiles {
  position: relative;
  width: 485px;
  height: 380px;
  flex-shrink: 0;
}
.ainotice-tile {
  position: absolute;
  display: block;
  width: auto;
  height: auto;
  object-fit: contain;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* Grok — top-left (replaces the speech-bubble cluster slot) */
.ainotice-tile-grok {
  top: 25px;
  left: 53px;
  width: 159px;
  height: 159px;
}

/* ChatGPT — mid-left */
.ainotice-tile-chatgpt {
  top: 158px;
  left: 0;
  width: 187px;
  height: 187px;
}

/* Claude — top-right */
.ainotice-tile-claude {
  top: 0;
  left: 292px;
  width: 193px;
  height: 193px;
}

/* Gemini — bottom-right */
.ainotice-tile-gemini {
  top: 204px;
  left: 289px;
  width: 175px;
  height: 175px;
}

/* Scottsdale Signal — center, on top, slightly larger to dominate */
.ainotice-tile-signal {
  top: 91px;
  left: 137px;
  width: 221px;
  height: 221px;
  z-index: 2;
}

/* Three numbered methodology cards */
.ainotice-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}
.ainotice-card { display: flex; flex-direction: column; gap: 18px; }
.ainotice-card-image {
  /* Now an <img> rendering one of the methodology-card SVGs. The
     SVGs are 1:1 with their own internal background (cream or ink)
     so we let aspect-ratio drive height instead of the legacy 325px
     placeholder rule. object-fit:cover handles the rare case where
     the column gets very narrow on a 1024-1100px breakpoint and
     the image needs to crop slightly rather than letterbox. */
  width: 100%;
  aspect-ratio: 1 / 1;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  display: block;
  background: #1a1410;   /* matches the ink-bg variants so the corners
                            blend on cards with dark-bg SVGs */
}
.ainotice-card-body { display: flex; flex-direction: column; gap: 8px; }
.ainotice-card-num {
  align-self: flex-start;
  background: var(--accent);
  color: var(--bg);
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  padding: 2px 8px;
  border-radius: 4px;
  margin-bottom: 8px;
}
.ainotice-card-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  letter-spacing: -0.48px;
  line-height: 1.1;
  color: var(--bg);
  margin: 0;
}
.ainotice-card-body p {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.48px;
  line-height: 1.3;
  color: var(--muted);
  margin: 0;
}


/* ─── Subscribe block (dark, two-col) ──────────────────────────── */
/* Subscribe block — Figma 25:1383 (May 2026 cream-mode redesign).
   Was previously dark mode (--bg-dark + cream text); flipped to
   cream + ink so the section reads as a continuation of the article
   surface instead of a separate dark zone. Tier cards now use a
   layered visual hierarchy: PREMIUM (white card, 2px ink border,
   floating black "MOST CHOSEN" badge) is the visual focus; STANDARD
   (warm tan card, muted border) reads as the secondary tier. */
.subscribe {
  background: var(--bg);
  color: var(--ink);
  display: flex;
  gap: 36px;
  /* Per Figma spec the pitch + pricing columns are TOP-aligned (the S
     mark is the highest element on the left). To drop the pricing
     cards visually lower than the BECOME A MEMBER eyebrow, we use an
     explicit margin-top on .subscribe-pricing below — better than
     align-items: center, which made the cards float to the middle of
     the section regardless of how long the pitch column got. */
  align-items: flex-start;
  justify-content: center;
  padding: 120px 144px;
}
.subscribe-pitch {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
  min-width: 0;
}
/* The S logomark is the standalone red blackletter PNG (230×230
   square). Sized to ~76px to match Figma 25:1383's 76.6px container.
   Explicit width + height on the IMAGE (not just the container)
   guarantees consistent rendering regardless of grid/flex parent
   weirdness — the previous version used height: 100% on a grid item
   which fell back to natural 230px in some browsers. */
.subscribe-mark {
  display: block;
}
.subscribe-mark img {
  display: block;
  width: 76px;
  height: 76px;
  object-fit: contain;
}
.subscribe-headstack { display: flex; flex-direction: column; gap: 24px; }
.subscribe-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
}
.subscribe-title-stack { display: flex; flex-direction: column; gap: 8px; }
.subscribe-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 60px;
  letter-spacing: -2.4px;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.subscribe-sub {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.44px;
  line-height: 1.3;
  color: var(--muted);
  margin: 0;
}
.subscribe-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.subscribe-benefits li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-soft);
  font-family: var(--ui);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.48px;
  line-height: 1.3;
  color: var(--ink);
}
.subscribe-benefits li:last-child {
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.subscribe-benefits li strong { font-weight: 600; }
.subscribe-check { width: 22px; height: 22px; flex-shrink: 0; }

/* Pricing column. 485px wide per Figma spec.
   margin-top intentionally drops the pricing card start point below
   the BECOME A MEMBER eyebrow + serif headline on the left column.
   Without this the Premium card top edge lined up with the very top
   of the pitch column and visually competed with the headline.
   ~180px lands the Premium card top roughly at the start of the
   benefits list ("The AM Brief at 6 a.m. sharp") on the left. */
.subscribe-pricing {
  width: 485px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 180px;
}
.tier {
  position: relative;
  background: var(--bg);
  border: 1px solid var(--muted);
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* Premium — bold focus card. White on cream with a 2px ink frame,
   "MOST CHOSEN" pill floating across the top edge. */
.tier--featured {
  border: 2px solid var(--ink);
  background: var(--bg);
}
/* Standard — warmer tan card so it reads as the secondary tier
   without disappearing into the page bg. */
.tier--standard {
  background: #e5e2da;
  border: 1px solid var(--muted);
}
.tier-badge {
  position: absolute;
  top: -13px;
  left: 113px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.tier-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
.tier-eyebrow--accent { color: var(--accent); }
.tier-eyebrow--ink    { color: var(--ink); }
.tier-eyebrow--bg     { color: var(--ink); }   /* legacy alias — kept so older
                                                  callers still render correctly
                                                  on the cream-mode redesign */
.tier-price-stack { display: flex; flex-direction: column; }
.tier-price-row { display: inline-flex; align-items: center; gap: 4px; }
.tier-amount {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 36px;
  letter-spacing: -1.44px;
  color: var(--ink);
  line-height: 1;
}
.tier-period {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.48px;
  color: var(--muted);
  line-height: 1.3;
}
.tier-saving {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.12px;
  color: var(--muted);
}
.tier-desc {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 16px;
  letter-spacing: -0.48px;
  line-height: 1.3;
  color: var(--muted);
  margin: 0;
}
/* Default tier button = outline ink-on-cream (matches Standard +
   Try Free style). The .tier-btn--cta override below paints the
   Premium button red. */
.tier-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 18px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.42px;
  border-radius: 4px;
  text-decoration: none !important;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
}
.tier-btn--cta {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
.tier-btn:hover { opacity: 0.9; }
.tier-arrow { width: 12px; height: 12px; }

.subscribe-trial {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.subscribe-trial-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--accent);
}
.subscribe-trial-row { display: flex; gap: 8px; }
.subscribe-trial-input {
  flex: 1 1 0;
  border: 1px solid var(--muted);
  background: transparent;
  border-radius: 4px;
  padding: 14px 18px;
  font-family: var(--ui);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.42px;
  color: var(--ink);                  /* was --bg (cream-on-dark) — flipped */
  min-width: 0;
}
.subscribe-trial-input::placeholder { color: var(--muted); }
.subscribe-trial-input:focus { outline: none; border-color: var(--accent); }
.subscribe-trial-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  border: 1px solid var(--ink);       /* was --bg — outline ink-on-cream */
  background: transparent;
  color: var(--ink);                  /* was --bg — flipped */
  border-radius: 4px;
  font-family: var(--ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.42px;
  cursor: pointer;
}
.subscribe-trial-fineprint {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.12px;
  color: var(--muted);
}
.subscribe-trial-fineprint a { color: inherit; text-decoration: underline; }


/* ─── Article (post) page ──────────────────────────────────────── */
.article {
  max-width: 760px;
  margin: 60px auto;
  padding: 0 24px;
}
/* Article header — matches Figma 26:2407.
   Three-segment meta row (chip / authored-by / date) on the left,
   Share button on the right. The row uses 24px column gaps between
   segments and 8px gaps inside the authored-by cluster — the Figma
   spec is two different gaps in the same axis, which is why it's
   structured as nested flex containers instead of one big row. */
.article-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 24px;
}
.article-meta-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;          /* graceful wrap on narrow screens */
  font-family: var(--ui);
  font-size: 12px;
  color: var(--muted);
  letter-spacing: -0.12px;
  line-height: 1;
}
.article-chip {
  background: var(--accent);
  color: var(--bg);
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: 1.5;
  padding: 2px 8px;
  border-radius: 4px;
  text-transform: uppercase;
}
/* The "Authored by The Scottsdale Signal [logo]" cluster.
   Uses an 8px gap (vs. the 24px outer gap) because Figma 26:2321
   tightens spacing inside the authored-by group. */
.article-byline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.article-byline__label {
  color: var(--muted);
  font-weight: 400;
}
.article-byline__name {
  color: var(--ink);
  font-weight: 600;
}
.article-byline__icon {
  width: 22px;
  height: 22px;
  border-radius: 2.265px;   /* Figma 104:3272 — matches the favicon tile */
  display: block;
  flex-shrink: 0;
}
.article-date {
  color: var(--muted);
  font-weight: 500;
}
/* "Share" pill, right-aligned. Border-only style, neutral muted color
   per Figma 26:2404 (px-8 py-6 rounded-30 border-#6b6b6b). */
.article-share {
  appearance: none;
  background: transparent;
  border: 1px solid var(--muted);
  border-radius: 30px;
  color: var(--muted);
  font-family: var(--ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.36px;
  padding: 6px 12px;
  cursor: pointer;
  flex-shrink: 0;
  line-height: 1.3;
}
.article-share:hover { color: var(--ink); border-color: var(--ink); }
/* Article typography — Figma May 2026 facelift.
   Four levels, with explicit Figma source ratios so future tweaks
   can be applied per-level without disturbing the rest:

     h1 (.article-headline)  Newsreader SemiBold  60 / auto / -4%
     dek (.article-dek)       Newsreader Regular   22 / 130% / -2%
     h2 (.article-body h2)    Newsreader SemiBold  36 / 110% / -4%
     body (.article-body p)   News Cycle           22 / 150% / +2%

   Letter-spacing px values are font-size * percentage:
     60 * -0.04 = -2.4px
     22 * -0.02 = -0.44px
     36 * -0.04 = -1.44px
     22 *  0.02 =  0.44px

   Note: body switches from Newsreader Regular (the previous default)
   to News Cycle. News Cycle is the condensed sans the Figma calls
   for at body level. We import the 400 weight via the @import at the
   top of this file (the existing import only had 700 for eyebrows).
*/
.article-headline {
  font-family: var(--serif);     /* Newsreader */
  font-weight: 600;              /* SemiBold */
  font-size: 60px;
  letter-spacing: -2.4px;        /* -4% */
  line-height: 1.05;             /* "Auto" — slight breathing room over
                                    pure 1.0 keeps descenders from
                                    crashing into the next line */
  margin: 0 0 6px;
  color: var(--ink);
}
.article-dek {
  font-family: var(--serif);
  font-weight: 400;              /* Regular */
  font-size: 22px;
  line-height: 1.3;              /* 130% */
  letter-spacing: -0.44px;       /* -2% */
  color: var(--muted);
  margin: 0 0 24px;
}

/* ─── Article stats pill row (Figma 26:2334) ─────────────────────────
   Lives between the dek and the feature image. Hairline rule + a
   left descriptor pill ("An original report from..." or evergreen
   variant) and a right "All claims sourced • N sources" trigger.
   The trigger is a button — clicking opens .src-drawer (defined
   below). Mobile reflow (<=760px) drops the pill onto two rows. */
.article-stats {
  margin: 0 0 28px;
}
.article-stats-rule {
  height: 1px;
  background: var(--ink);
  opacity: 0.85;
  margin: 0 0 14px;
}
.article-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.article-stats-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 12px;
  background: #E5E2DA;          /* Figma fill — warm putty on cream */
  border-radius: 999px;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  letter-spacing: 0.1px;
  max-width: 100%;
}
.article-stats-search {
  width: 14px;
  height: 14px;
  flex: 0 0 14px;
  color: var(--muted);
}
.article-stats-pill-text {
  /* Truncate gracefully on narrow viewports rather than wrapping
     into a tall blob. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.article-stats-sources {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: 0;
  padding: 6px 4px;
  cursor: pointer;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.3;
  color: var(--muted);
  letter-spacing: 0.1px;
  transition: color 0.15s ease;
}
.article-stats-sources:hover,
.article-stats-sources:focus-visible {
  color: var(--ink);
  outline: none;
}
.article-stats-sources:hover .article-stats-dot,
.article-stats-sources:focus-visible .article-stats-dot {
  transform: scale(1.15);
}
.article-stats-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: inline-block;
  flex: 0 0 6px;
  transition: transform 0.15s ease;
}
.article-stats-bullet {
  color: var(--muted);
  opacity: 0.6;
  font-weight: 400;
  margin: 0 -2px;
}
.article-stats [data-source-count] {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.article-feature img {
  width: 100%;
  height: auto;          /* override the CLS-hinted height attr; the
                            attribute seeds aspect ratio for layout
                            but the rendered size scales with width */
  border-radius: 8px;
  margin: 0;             /* margin moved to figcaption rule below so
                            the caption sits flush under the image */
}
.article-feature {
  margin: 0 0 32px;       /* outer spacing for the figure as a whole */
}
.article-feature figcaption {
  /* Center-aligned to the image width (the figure IS the image width
     because <img> takes width:100% of the article column). 13px Inter
     muted with a small top gap below the image. */
  margin: 10px 0 0;
  text-align: center;
  font-family: var(--ui);
  font-weight: 400;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--muted);
}
.article-body {
  font-family: var(--label);     /* News Cycle (condensed sans) */
  font-weight: 400;
  font-size: 22px;
  line-height: 1.5;              /* 150% */
  letter-spacing: 0.44px;        /* +2% — News Cycle reads better with
                                    a touch of looseness at body size */
  color: var(--ink);
}
.article-body p { margin: 0 0 1.2em; }
.article-body strong,
.article-body b      { font-weight: 700; }
.article-body em,
.article-body i      { font-style: italic; }
.article-body h2 {
  font-family: var(--serif);     /* Newsreader */
  font-weight: 600;              /* SemiBold */
  font-size: 36px;
  letter-spacing: -1.44px;       /* -4% */
  line-height: 1.1;              /* 110% */
  margin: 2em 0 0.5em;
  color: var(--ink);
}
.article-body h3 {
  /* Subordinate to h2 but still Newsreader to keep the editorial
     hierarchy consistent. Figma didn't spec h3 directly; sized half-
     way between body (22) and h2 (36). */
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.78px;       /* -3% */
  line-height: 1.2;
  margin: 1.6em 0 0.4em;
  color: var(--ink);
}
.article-body a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}
.article-body a:hover { color: var(--accent); }
.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.5em;
  margin: 1.5em 0;
  font-style: italic;
  color: var(--muted);
}

/* Ghost editor "wide" and "full" content widths — required by Ghost's
   theme linter so editor-set image/embed widths render correctly.
   Article body is normally 760px (.article max-width). Wide cards
   break out 100px on each side. Full-width breaks the entire viewport. */
.article-body .kg-width-wide,
.article-body .kg-image-card.kg-width-wide,
.article-body .kg-card.kg-width-wide {
  width: calc(100% + 200px);
  max-width: calc(100vw - 48px);
  margin-left: -100px;
  margin-right: -100px;
}
.article-body .kg-width-full,
.article-body .kg-image-card.kg-width-full,
.article-body .kg-card.kg-width-full {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.article-body .kg-width-wide img,
.article-body .kg-width-full img {
  width: 100%;
  height: auto;
  border-radius: 0;
}


/* ─── Tag / archive pages ──────────────────────────────────────── */
.archive {
  padding: 60px 144px;
}
.archive-head {
  text-align: center;
  margin-bottom: 48px;
}
.archive-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.archive-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 60px;
  letter-spacing: -2.4px;
  line-height: 1;
  color: var(--ink);
  margin: 0;
}
.archive-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
}
.archive-card { display: flex; flex-direction: column; gap: 18px; }
.archive-card img { width: 100%; height: 240px; border-radius: 8px; object-fit: cover; }
.archive-card-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.44px;
  line-height: 1.15;
  margin: 0;
}
.archive-card-title a { color: var(--ink); }
.archive-card-title a:hover { color: var(--accent); text-decoration: none; }


/* ─── Mobile / smaller screens ─────────────────────────────────── */
@media (max-width: 1200px) {
  .wrap-144, .hero, .lifestyle, .ainotice, .subscribe, .archive,
  .beats { padding-left: 60px; padding-right: 60px; }
  .hero { padding-left: 80px; padding-right: 80px; }
}
@media (max-width: 1000px) {
  .util, .nav, .rightnow { padding-left: 24px; padding-right: 24px; }
  .mast { padding: 18px 24px; gap: 12px; }
  .mast-tag-left { display: none; }
  .mast-logotype { width: 100%; height: auto; aspect-ratio: 674/95; }
  .nav { gap: 16px; flex-wrap: wrap; }
  .nav a { font-size: 12px; letter-spacing: 1.6px; }
  .rightnow { flex-direction: column; align-items: flex-start; gap: 16px; }
  .rightnow-cards { width: 100%; flex-direction: column; align-items: stretch; gap: 12px; }
  .rightnow-divider { display: none; }
  .rightnow-card + .rightnow-card { padding-top: 12px; border-top: 1px solid var(--muted); }
  .hero { padding: 48px 24px; }
  .hero-title, .lifestyle-title, .subscribe-title { font-size: 38px; letter-spacing: -1.2px; }
  .hero-sub, .lifestyle-sub, .subscribe-sub { font-size: 18px; }
  .ainotice-title { font-size: 32px; letter-spacing: -1px; }
  .beats { flex-direction: column; padding: 32px 24px; }
  .lifestyle, .ainotice, .subscribe { padding: 60px 24px; }
  .lifestyle-grid, .ainotice-cards, .archive-grid { grid-template-columns: 1fr; }
  .ainotice-top { flex-direction: column; }
  .ainotice-tiles { width: 100%; max-width: 360px; height: 320px; }
  .subscribe { flex-direction: column; }
  .subscribe-pricing { width: 100%; }
  .article-headline { font-size: 32px; letter-spacing: -1.28px; line-height: 1.05; }
  .article-dek { font-size: 18px; letter-spacing: -0.36px; }
  /* News Cycle body scales 22 → 18 on phones; the condensed sans is
     still readable but doesn't crowd a 390px column. */
  .article-body { font-size: 18px; line-height: 1.5; letter-spacing: 0.36px; }
  .article-body h2 { font-size: 26px; letter-spacing: -1.04px; line-height: 1.15; }
  .article-body h3 { font-size: 20px; letter-spacing: -0.6px; }
  .article-header { flex-wrap: wrap; gap: 12px; }
  .article-meta-row { gap: 12px; row-gap: 8px; }
  .article-share { order: 2; }
  /* Stats pill: stack the descriptor pill above the sources trigger,
     and let the pill text wrap rather than ellipsis-truncating on
     narrow viewports. */
  .article-stats { margin-bottom: 24px; }
  .article-stats-row { flex-direction: column; align-items: flex-start; gap: 10px; }
  .article-stats-pill { padding: 8px 12px; font-size: 11px; }
  .article-stats-pill-text { white-space: normal; }
  .article-stats-sources { font-size: 11px; padding-left: 0; }
}


/* ─── Top Closings strip (real-estate tag page) ─────────────────────
   Same visual cadence as .events: red eyebrow, hairline rule, 4-up
   image-card grid. Sits at the top of /tag/real-estate/ and renders
   the most recent per-sale pages from real_estate.page_generator. */
.closings {
  background: var(--bg);
  padding: 60px 144px 24px;
}
.closings-inner { max-width: 1440px; margin: 0 auto; }
.closings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.closings-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 3px;
  color: var(--accent);
  text-transform: uppercase;
  text-decoration: none;
}
.closings-viewall {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--accent);
  text-transform: uppercase;
  text-decoration: none;
}
.closings-viewall svg { width: 10px; height: 10px; stroke: var(--accent); }
.closings-rule {
  height: 1px;
  background: var(--ink);
  margin-bottom: 20px;
}
.closings-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 44px;
  letter-spacing: -1px;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 8px;
}
.closings-sub {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 620px;
}
.closings-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
}
.closing-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
}
.closing-image-wrap {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px;
  overflow: hidden;
  background: var(--placeholder);
  margin-bottom: 14px;
}
.closing-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.closing-image-placeholder {
  width: 100%;
  height: 100%;
  background: var(--placeholder);
}
.closing-headline {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.3px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 6px;
}
.closing-card:hover .closing-headline { color: var(--accent); }
.closing-meta {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--muted);
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .closings { padding: 48px 24px 16px; }
  .closings-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .closings-title { font-size: 34px; }
}
@media (max-width: 640px) {
  .closings-grid { grid-template-columns: 1fr; }
  .closings-title { font-size: 28px; }
}


/* ─── Premium nav link (right-most) ─────────────────────────────── */
.nav .nav-premium {
  color: var(--accent);
  font-weight: 700;
  position: relative;
  padding-left: 14px;
  margin-left: 6px;
}
.nav .nav-premium::before {
  /* Hairline divider so Premium reads as separate from the beat list */
  content: "";
  position: absolute;
  left: -2px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 14px;
  background: var(--rule);
}
.nav .nav-premium:hover { color: var(--ink); }


/* ─── Premium hub page (page-premium.hbs) ───────────────────────── */
.premium-hub {
  background: var(--bg);
  padding: 72px 144px 96px;
  max-width: 1440px;
  margin: 0 auto;
}
.premium-hub-head {
  text-align: center;
  margin-bottom: 56px;
}
.premium-hub-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.6px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.premium-hub-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 64px;
  letter-spacing: -1.6px;
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 16px;
}
.premium-hub-sub {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 19px;
  line-height: 1.5;
  color: var(--muted);
  max-width: 680px;
  margin: 0 auto;
}
.premium-hub-intro {
  max-width: 680px;
  margin: 32px auto 48px;
  font-family: var(--serif-body, var(--ui));
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
}
.premium-hub-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
}
.premium-tile {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.premium-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(10, 10, 10, 0.06);
  border-color: var(--ink);
}
.premium-tile-image {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  background: var(--placeholder);
}
.premium-tile-image-placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--placeholder);
}
.premium-tile-body {
  padding: 24px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.premium-tile-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 2px;
  color: var(--accent);
  text-transform: uppercase;
}
.premium-tile-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.6px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}
.premium-tile-sub {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 15px;
  line-height: 1.5;
  color: var(--muted);
  margin: 0;
}
.premium-tile-cta {
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--accent);
  text-transform: uppercase;
  margin-top: 6px;
}

@media (max-width: 1100px) {
  .premium-hub { padding: 56px 60px 72px; }
  .premium-hub-title { font-size: 48px; }
}
@media (max-width: 720px) {
  .premium-hub { padding: 40px 24px 56px; }
  .premium-hub-title { font-size: 36px; letter-spacing: -1px; }
  .premium-hub-sub { font-size: 16px; }
  .premium-hub-grid { grid-template-columns: 1fr; gap: 20px; }
  .premium-tile-title { font-size: 22px; }
}


/* ─── Right Now strip — kind eyebrow on each card ───────────────── */
.rightnow-kind {
  font-family: var(--label);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  margin-bottom: 4px;
  line-height: 1;
}
.rightnow-card--skeleton .rightnow-headline {
  opacity: 0.6;
}


/* ─── Real Estate page — Top Closings hero ──────────────────────── */
.closings-hero {
  background: var(--bg);
  padding: 56px 144px 24px;
}
.closings-hero-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: start;
}

/* LEFT — section header column */
.closings-hero-left { padding-top: 8px; }
.closings-hero-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.6px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.closings-hero-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 72px;
  letter-spacing: -2px;
  line-height: 1.02;
  color: var(--ink);
  margin: 0 0 20px;
}
.closings-hero-sub {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 0 28px;
  max-width: 460px;
}
.closings-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.5px;
  color: var(--accent);
  text-transform: uppercase;
  text-decoration: none;
}
.closings-hero-cta svg { width: 12px; height: 12px; stroke: var(--accent); }

/* RIGHT — top closings panel */
.closings-hero-right { display: flex; flex-direction: column; }
/* Header row: eyebrow + week label on the left, prev/next arrows
   right-aligned. Drops below into a hairline rule, then the cards. */
.closings-hero-rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.closings-hero-rail-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--ink);
  text-transform: uppercase;
}
.closings-hero-rail-nav {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.closings-hero-rail-arrow {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink);
  cursor: pointer;
  padding: 0;
  transition: opacity 0.15s ease;
}
.closings-hero-rail-arrow svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
}
.closings-hero-rail-arrow:hover:not(:disabled) {
  background: var(--ink);
  color: var(--bg);
}
.closings-hero-rail-arrow:disabled {
  border-color: var(--rule-soft);
  color: var(--rule-soft);
  cursor: not-allowed;
}
.closings-hero-rail-rule {
  height: 1px;
  background: var(--ink);
  margin: 10px 0 18px;
}
.closings-hero-lead {
  display: block;
  text-decoration: none;
  color: var(--ink);
  margin-bottom: 18px;
}
.closings-hero-lead-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  overflow: hidden;
  background: var(--placeholder);
  margin-bottom: 12px;
}
.closings-hero-lead-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.closings-hero-lead-placeholder {
  width: 100%;
  height: 100%;
  background: var(--placeholder);
}
.closings-hero-lead-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.5px;
  line-height: 1.2;
  color: var(--ink);
  margin: 0 0 6px;
}
.closings-hero-lead:hover .closings-hero-lead-title { color: var(--accent); }
.closings-hero-lead-meta {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.2px;
  color: var(--muted);
  text-transform: uppercase;
}

/* Compact follow-on rows */
.closings-hero-row {
  display: flex;
  gap: 14px;
  text-decoration: none;
  color: var(--ink);
  padding: 12px 0;
  border-top: 1px solid var(--rule-soft);
}
.closings-hero-row-thumb {
  flex: 0 0 96px;
  width: 96px;
  height: 64px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--placeholder);
}
.closings-hero-row-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.closings-hero-row-placeholder {
  width: 100%;
  height: 100%;
  background: var(--placeholder);
}
.closings-hero-row-body {
  flex: 1;
  min-width: 0;
}
.closings-hero-row-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.2px;
  line-height: 1.25;
  color: var(--ink);
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.closings-hero-row:hover .closings-hero-row-title { color: var(--accent); }
.closings-hero-row-meta {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.2px;
  color: var(--muted);
  text-transform: uppercase;
}

@media (max-width: 1100px) {
  .closings-hero { padding: 44px 60px 16px; }
  .closings-hero-inner { grid-template-columns: 1fr; gap: 40px; }
  .closings-hero-title { font-size: 56px; }
}
@media (max-width: 720px) {
  .closings-hero { padding: 32px 24px 12px; }
  .closings-hero-title { font-size: 40px; letter-spacing: -1.2px; }
  .closings-hero-sub { font-size: 15px; }
  .closings-hero-lead-title { font-size: 22px; }
}


.rightnow-card--empty {
  opacity: 0.7;
}


/* ─── "Latest in" strip — homepage between Beats and Scottsdale Table
   Figma node 19:262. Background is a slightly darker cream than the
   page bg so the strip reads as a distinct module without needing a
   border. Each column gets a vertical hairline divider on its left
   edge (rendered via .latest-col-rule, NOT a CSS border, so the
   first column also gets one to match the Figma frame). ─────────── */
.latest-strip {
  background: #E5E2DA;
  padding: 48px 60px;
}
.latest-strip-inner {
  max-width: 1440px;
  margin: 0 auto;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 18px;
}
.latest-col {
  /* No longer a link — it's a div containing two sibling links
     (eyebrow → tag page, stack → article). Layout-only. */
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 18px;
  color: var(--ink);
}
.latest-col-rule {
  flex: 0 0 1.5px;
  width: 1.5px;
  background: var(--rule);
  align-self: stretch;
}
.latest-col-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}
.latest-col-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: 1.5;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  /* Inline-block so the hover hit target is just the text width, not
     the whole row. Reader can mouse over headline area without
     accidentally hovering the eyebrow. */
  align-self: flex-start;
  transition: opacity 0.12s ease;
}
.latest-col-eyebrow:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  opacity: 0.85;
}
.latest-col-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
}
.latest-col-title {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: -0.42px;
  line-height: 1.3;
  color: var(--ink);
  margin: 0;
}
.latest-col-stack:hover .latest-col-title { color: var(--accent); }
.latest-col-title--empty {
  color: var(--muted);
  font-style: italic;
}
.latest-col-meta {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: -0.12px;
  color: var(--muted);
  line-height: 1;
}

@media (max-width: 1100px) {
  .latest-strip { padding: 36px 24px; }
  .latest-strip-inner { flex-wrap: wrap; gap: 24px; }
  .latest-col { flex: 1 1 calc(50% - 12px); }
}
@media (max-width: 640px) {
  .latest-col { flex: 1 1 100%; }
}




/* ─── Site footer (Figma node 87:3042) ─────────────────────────────
   Direct port. Every value (paddings, gaps, font sizes, tracking,
   colors, dimensions) lifted from the Figma React/Tailwind output of
   get_design_context, NOT eyeballed. */
.footer {
  background: #0A0A0A;
  color: #F7F6F2;
  padding: 64px 144px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* 1. Top brand row — split flex */
.footer__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.footer__brand {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
}
.footer__logotype {
  position: relative;
  width: 519px;
  max-width: 100%;
  height: 73px;
  display: block;
  overflow: hidden;
}
.footer__logotype-part { position: absolute; display: block; }
.footer__logotype-part--1 { inset: 30.75% 87.55% 8.68% 0; }
.footer__logotype-part--2 { inset: 0 34.17% 15.59% 14.06%; }
.footer__logotype-part--3 { inset: 0.82% 0 0.51% 67.5%; }
.footer__logotype-part img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* Black-on-cream SVGs need to render white on the dark footer */
  filter: invert(1) brightness(1.05);
}
.footer__tagline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 22px;
  letter-spacing: -0.44px;
  line-height: 1.3;
  color: #A8A8A8;
  margin: 0;
  width: 520px;
  max-width: 100%;
}
.footer__badges {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.footer__badge {
  background: #E7321E;
  color: #F7F6F2;
  font-family: var(--label);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 1.2px;
  line-height: 1.5;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
  text-align: center;
}

.footer__app {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.footer__mark {
  width: 102.77px;
  height: 102.77px;
  background: #E7321E;
  border-radius: 10.545px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.footer__mark img {
  width: 51.84px;
  height: 83.671px;
  object-fit: contain;
}
.footer__app-label {
  font-family: var(--ui);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.54px;
  line-height: 1.3;
  color: #F7F6F2;
  text-align: center;
  white-space: nowrap;
}
.footer__app-badges {
  display: flex;
  gap: 8px;
  align-items: center;
}
.footer__app-badges a {
  display: block;
  width: 154.615px;
  height: 45.096px;
  flex-shrink: 0;
}
.footer__app-badges img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 2. Hairline divider */
.footer__rule {
  border: 0;
  border-top: 1px solid #2A2A2A;
  margin: 0;
  width: 100%;
  height: 1px;
}

/* 3. Four-column link grid */
.footer__cols {
  display: flex;
  gap: 40px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.footer__col {
  flex: 0 0 240px;
  width: 240px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.footer__col-head {
  font-family: var(--label);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1.2px;
  color: #E7321E;
  text-transform: uppercase;
  line-height: 1;
  width: 240px;
  text-align: left;
}
.footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 240px;
}
.footer__list li { margin: 0; line-height: 1; }
.footer__list a {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: -0.15px;
  line-height: 19.5px;
  color: #F7F6F2;
  text-decoration: none;
  transition: color 0.12s ease;
  display: inline-block;
}
.footer__list a:hover {
  color: #E7321E;
  text-decoration: none;
}

/* 4. Bottom bar */
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding-top: 12px;
  font-family: var(--ui);
  font-weight: 500;
  font-size: 12px;
  line-height: 12px;
  letter-spacing: -0.12px;
  color: #6B6B6B;
}
.footer__tips a {
  color: #E7321E;
  text-decoration: none;
}
.footer__tips a:hover { text-decoration: underline; }

@media (max-width: 1280px) {
  .footer { padding: 56px 60px; }
  .footer__cols { flex-wrap: wrap; gap: 32px; }
  .footer__col { flex: 1 1 calc(50% - 16px); width: auto; }
  .footer__col-head, .footer__list { width: 100%; }
}
@media (max-width: 720px) {
  .footer { padding: 40px 24px; gap: 32px; }
  .footer__top { flex-direction: column; align-items: flex-start; gap: 32px; }
  .footer__app { align-items: flex-start; }
  .footer__logotype { width: 100%; height: auto; aspect-ratio: 519/73; }
  .footer__tagline { font-size: 18px; width: 100%; }
  .footer__col { flex: 1 1 100%; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }
}


/* ─── Tag-page hero (used by tag-{slug}.hbs templates) ─────────────
   Bigger, richer than the generic .archive-head — carries 60-120 words
   of beat-specific intro copy so the URL stops reading as a soft-404
   to Google's quality classifier. Mirrors the real-estate hero but
   single-column (no right rail) for non-real-estate beats. */
.tag-hero {
  background: var(--bg);
  padding: 64px 144px 32px;
}
.tag-hero-inner {
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
}
.tag-hero-eyebrow {
  font-family: var(--label);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 2.6px;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.tag-hero-tagline {
  font-family: var(--ui);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.4px;
  color: var(--muted);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.tag-hero-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 76px;
  letter-spacing: -2.2px;
  line-height: 1;
  color: var(--ink);
  margin: 0 0 24px;
}
.tag-hero-intro {
  font-family: var(--ui);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.55;
  color: var(--muted);
  margin: 0 auto;
  max-width: 720px;
}
@media (max-width: 1100px) {
  .tag-hero { padding: 48px 60px 24px; }
  .tag-hero-title { font-size: 60px; }
}
@media (max-width: 720px) {
  .tag-hero { padding: 32px 24px 16px; }
  .tag-hero-title { font-size: 40px; letter-spacing: -1.4px; }
  .tag-hero-intro { font-size: 16px; }
}


/* ─── Sources drawer (slide-in side panel) ───────────────────────────
   Triggered from the article stats pill ("All claims sourced • N
   sources") in post.hbs. Lives in default.hbs as the last partial in
   <body>, so it overlays everything when open. JS in main.js reads
   citations from up to four sources (data attribute → script tag →
   visible OL → external links from body) and populates this list. */
.src-drawer {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  visibility: hidden;
}
.src-drawer[aria-hidden="false"] { visibility: visible; }
.src-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(14, 17, 22, 0.45);
  opacity: 0;
  transition: opacity 0.22s ease;
  pointer-events: none;
}
.src-drawer[aria-hidden="false"] .src-drawer-backdrop {
  opacity: 1;
  pointer-events: auto;
}
.src-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(520px, 100vw);
  background: var(--bg);
  border-left: 1px solid var(--ink);
  box-shadow: -16px 0 60px -24px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.28s cubic-bezier(0.2, 0.7, 0.2, 1);
  pointer-events: auto;
}
.src-drawer[aria-hidden="false"] .src-drawer-panel {
  transform: translateX(0);
}
.src-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
  border-bottom: 1px solid var(--rule-soft);
}
.src-drawer-eyebrow {
  font-family: var(--label);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.src-drawer-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
  color: var(--ink);
}
.src-drawer-close {
  background: none;
  border: 1px solid var(--rule-soft);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  cursor: pointer;
  flex: 0 0 auto;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.src-drawer-close:hover {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.src-drawer-intro {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--muted);
  padding: 14px 24px 8px;
  margin: 0;
  line-height: 1.55;
}
.src-drawer-intro a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.src-drawer-list {
  flex: 1;
  overflow-y: auto;
  list-style: none;
  padding: 8px 24px 24px;
  margin: 0;
  counter-reset: src-counter;
}
.src-drawer-list li {
  border-bottom: 1px dashed var(--rule-soft);
  padding: 16px 0;
  counter-increment: src-counter;
  position: relative;
  padding-left: 32px;
}
.src-drawer-list li::before {
  content: counter(src-counter);
  position: absolute;
  left: 0;
  top: 16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #EFEDE5;
  border: 1px solid var(--rule-soft);
  color: var(--muted);
  font: 600 11px var(--ui);
  display: flex;
  align-items: center;
  justify-content: center;
  font-feature-settings: 'tnum' 1;
}
.src-drawer-list .src-claim {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 8px;
}
.src-drawer-list .src-claim::before { content: '"'; color: var(--muted); }
.src-drawer-list .src-claim::after  { content: '"'; color: var(--muted); }
.src-drawer-list .src-quote {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--muted);
  line-height: 1.55;
  background: #EFEDE5;
  border-left: 2px solid var(--accent);
  padding: 10px 12px;
  border-radius: 0 4px 4px 0;
  margin: 0 0 10px;
}
.src-drawer-list .src-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--ui);
  font-size: 11px;
  color: var(--muted);
}
.src-drawer-list .src-meta a {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  word-break: break-all;
}
.src-drawer-empty {
  font-size: 13px;
  color: var(--muted);
  font-style: italic;
  padding: 14px 0;
  padding-left: 0 !important;
  counter-increment: none;
}
.src-drawer-empty::before { content: none !important; }
.src-drawer-empty a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.src-drawer-foot {
  border-top: 1px solid var(--rule-soft);
  padding: 14px 24px;
  background: #EFEDE5;
  font-family: var(--ui);
  font-size: 12px;
  color: var(--muted);
}
.src-drawer-foot-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.src-drawer-foot a {
  color: var(--accent);
  font-weight: 600;
}
@media (max-width: 600px) {
  .src-drawer-panel { width: 100vw; border-left: none; }
  .src-drawer-head { padding: 18px 20px 14px; }
  .src-drawer-intro { padding: 12px 20px 6px; }
  .src-drawer-list { padding: 6px 20px 20px; }
  .src-drawer-foot { padding: 12px 20px; }
}