/* ClimbNear Digest theme for the Magazine Opus kit: tokens only (skill §2). The Digest's own components
   (photo plates, vibe check, picker) live in digest/digest.css; the builder ships both as /new/assets/theme.css.
   Brand: chalk-black. Secondary: hold-teal. Signal: ClimbNear hold-yellow, used only for the dot, the dock label,
   the primary button and glance bullets (it fails as text on paper: 1.8:1, so it never carries text).
   Contrast on light paper #f6f3ec: ink 17:1, muted #5a6069 5.9:1, teal #1f7a7a 4.7:1.
   Dark paper #0f1114: ink 15:1, muted #9ca3ad 7.4:1, teal #5cc2c2 8.9:1. */
:root {
  --paper: #f6f3ec;
  --paper-2: #ece7dc;
  --card: #fbf9f4;
  --ink: #15171c;
  --ink-2: #2c3038;
  --muted: #5a6069;
  --rule: #dcd5c6;
  --rule-strong: #b9af9c;
  --brand: #15171c;
  --brand-2: #1f7a7a;
  --signal: #e9b000;
  --signal-ink: #15171c;
  --inv-bg: #15171c;
  --inv-fg: #f6f3ec;
  --cover-bg: #0d0f13;
  --teal-ink: #ffffff;
  /* Level colours, the same as the journey (src/journey/journey.css). Used for dots, never for text. */
  --lv-starter: #1f9d55;
  --lv-amateur: #e9b000;
  --lv-advanced: #ec5f13;
  --lv-pro: #7b3fe4;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #0f1114; --paper-2: #171a1f; --card: #14171b; --ink: #ece8df; --ink-2: #d0ccc3; --muted: #9ca3ad;
    --rule: #262a31; --rule-strong: #3b414b; --brand: #ece8df; --brand-2: #5cc2c2; --signal: #f2c230;
    --inv-bg: #1a1e24; --inv-fg: #ece8df; --teal-ink: #0f1114;
    --lv-starter: #2fbf6d; --lv-amateur: #f2c230; --lv-advanced: #ff7a33; --lv-pro: #9d6bff;
  }
}
:root[data-theme="dark"] {
  --paper: #0f1114; --paper-2: #171a1f; --card: #14171b; --ink: #ece8df; --ink-2: #d0ccc3; --muted: #9ca3ad;
  --rule: #262a31; --rule-strong: #3b414b; --brand: #ece8df; --brand-2: #5cc2c2; --signal: #f2c230;
  --inv-bg: #1a1e24; --inv-fg: #ece8df; --teal-ink: #0f1114;
  --lv-starter: #2fbf6d; --lv-amateur: #f2c230; --lv-advanced: #ff7a33; --lv-pro: #9d6bff;
}

/* ClimbNear Digest components on top of the Magazine Opus kit: masthead tweaks, photo plates (Instagram embeds,
   typographic plates), the vibe check, the vibe picker, standalone-page cards and the quiet-week page.
   Colours come only from tokens (digest/theme.css). The builder appends this file to /new/assets/theme.css. */
/* ── Masthead ─────────────────────────────────────────── */
.cover-mast { font-size: clamp(54px, 11.4vw, 172px); text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.cover-mast span { white-space: nowrap; }
.bar-brand span { color: var(--brand-2); opacity: 1; }
.bar:not(.is-solid) .bar-brand span { color: #f2c230; }
.bar-back img { border-radius: 7px; }
.cover-issue .badge { padding: 3px 9px; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; letter-spacing: .14em; }
.cover-issue span.badge:first-child { color: #fff; }
.cover-issue .badge + span::before { margin-left: 0; }
@media (max-width: 760px) {
  .cover-mast span { display: block; }
}
.cover-credit .illus { margin-right: 10px; padding: 1px 6px; border: 1px solid rgba(255,255,255,.4); border-radius: 3px; text-transform: uppercase; letter-spacing: .1em; }

/* ── Letter: the photo under the signature ──────────────── */
.welcome > * { min-width: 0; }
.welcome-photo { margin: 26px 0 0; }
.welcome-photo img { width: 100%; max-width: var(--w, 100%); height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 6px; background: var(--paper-2); }
.welcome-photo figcaption, .chapter-photo figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; padding-top: 8px; font: 400 11.5px/1.5 var(--mono); color: var(--muted); }
.welcome-photo figcaption a, .chapter-photo figcaption a { color: inherit; }
.illus-tag { color: var(--ink-2); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; font-size: 10px; }
.chapter-card--type { background: color-mix(in srgb, var(--accent) 9%, var(--card)); }
.cards-credit { margin: 10px 0 0; font: 400 10.5px/1.6 var(--mono); color: var(--muted); }
.cards-credit a { color: inherit; }

/* ── Chapter opener photograph ─────────────────────────── */
.chapter-photo { grid-column: 1 / -1; margin: 28px 0 0; position: relative; z-index: 1; }
.chapter-photo { min-width: 0; }
.chapter-photo img { width: 100%; max-width: var(--w, 100%); margin-inline: auto; height: clamp(220px, 42vw, 520px); object-fit: cover; object-position: var(--pos, 50% 45%); border-radius: 6px; background: var(--paper-2); }
@media (max-width: 760px) {
  .chapter-photo img { border-radius: 4px; height: 62vw; }
}

/* ── Picker: "Your vibe in 10 seconds" ─────────────────── */
.vibe-picker { max-width: 1280px; margin: 0 auto; padding: 0 var(--gutter); scroll-margin-top: calc(var(--bar-h) + 12px); }
.vibe-picker[hidden] { display: none; }
.picker-in { border: 1px solid var(--rule-strong); border-radius: 18px; background: var(--card); padding: clamp(20px, 3vw, 32px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 18px clamp(24px, 4vw, 56px); }
.picker-head h2 { margin: 0; font: italic 500 clamp(28px, 3.4vw, 40px)/1.02 var(--serif); letter-spacing: -.02em; }
.picker-head p { margin: 10px 0 0; font: 400 15px/1.45 var(--sans); color: var(--muted); }
.picker-groups { display: grid; gap: 16px; }
.picker-group { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); gap: 8px 14px; align-items: start; }
.picker-label { padding-top: 10px; font: 500 10.5px/1.2 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.picker-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: transparent; color: var(--ink); cursor: pointer; font: 500 14px/1 var(--sans); transition: background .2s var(--ease), color .2s var(--ease), border-color .2s; }
.chip:hover { border-color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.chip small { font: 400 11px/1 var(--mono); opacity: .7; }
.select { position: relative; display: inline-flex; }
.select select { appearance: none; -webkit-appearance: none; min-height: 40px; padding: 0 38px 0 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: var(--card); color: var(--ink); font: 500 14px/1 var(--sans); cursor: pointer; max-width: 100%; }
.select::after { content: ""; position: absolute; right: 16px; top: 50%; width: 7px; height: 7px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-70%) rotate(45deg); pointer-events: none; }
.select select:hover { border-color: var(--ink); }
.select select:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.chip:disabled { opacity: .45; cursor: default; }
.lv-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; background: var(--lv, var(--muted)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 25%, transparent); }
.lv-starter { --lv: var(--lv-starter); } .lv-amateur { --lv: var(--lv-amateur); } .lv-advanced { --lv: var(--lv-advanced); } .lv-pro { --lv: var(--lv-pro); }
.picker-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; padding-top: 16px; border-top: 1px solid var(--rule); }
.picker-status { margin: 0; font: 500 16px/1.35 var(--serif); }
.picker-status b { font-weight: 600; }
.picker-reset { border: 0; background: none; padding: 8px 0; cursor: pointer; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 1020px) { .picker-in { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .picker-group { grid-template-columns: 1fr; gap: 6px; }
  .picker-label { padding-top: 0; }
  .chip { min-height: 44px; }
}

/* "For you" */
.foryou { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: var(--brand-2); color: var(--teal-ink); font: 600 10.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.foryou[hidden] { display: none; }
.story-meta .foryou { order: -1; }

/* ── Plates: the picture of a story ────────────────────── */
.plate { grid-column: 2; margin: 4px 0 28px; }
.plate-frame { position: relative; width: min(100%, 400px); height: var(--plate-h, 540px); margin-inline: auto; border-radius: 10px; overflow: hidden; background: var(--paper-2); border: 1px solid var(--rule); }
.plate-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #fff; }
.plate-ph { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 10px; padding: 24px; text-align: center; background:
  radial-gradient(circle at 22% 24%, color-mix(in srgb, var(--brand-2) 22%, transparent) 0 7%, transparent 7.4%),
  radial-gradient(circle at 74% 64%, color-mix(in srgb, var(--signal) 32%, transparent) 0 5%, transparent 5.4%),
  radial-gradient(circle at 40% 82%, color-mix(in srgb, var(--ink) 12%, transparent) 0 4%, transparent 4.4%),
  var(--paper-2); }
.plate-ph strong { font: 500 clamp(26px, 3vw, 34px)/1.05 var(--serif); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.plate-ph span { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.plate.is-live .plate-ph { visibility: hidden; }
.plate figcaption { width: min(100%, 400px); margin: 10px auto 0; font: 400 12px/1.5 var(--mono); color: var(--muted); }
.plate figcaption a { color: var(--ink-2); }
/* Typographic plate: no embed and no good photo; never a fake photograph. */
.plate--type .plate-frame { width: 100%; height: auto; min-height: 240px; display: grid; align-content: end; gap: 14px; padding: clamp(22px, 4vw, 40px); background: var(--inv-bg); color: var(--inv-fg); border: 0; }
.plate--type .plate-frame::before { content: ""; position: absolute; right: -40px; top: -40px; width: 220px; height: 220px; border-radius: 50%; border: 26px solid color-mix(in srgb, var(--brand-2) 55%, transparent); }
.plate--type .plate-frame::after { content: ""; position: absolute; right: 70px; top: 46px; width: 18px; height: 18px; border-radius: 50%; background: var(--signal); }
.plate--type strong { position: relative; font: 500 clamp(34px, 5vw, 60px)/.95 var(--serif); letter-spacing: -.03em; max-width: 14ch; }
.plate--type .tags { position: relative; }
.plate--type .tag { border-color: color-mix(in srgb, var(--inv-fg) 35%, transparent); color: var(--inv-fg); }
.story .photo + .plate, .story .plate + .photo { margin-top: 0; }
@media (max-width: 760px) {
  .plate-frame { border-radius: 8px; }
  .plate--type .plate-frame { border-radius: 0; margin-inline: calc(var(--gutter) * -1); width: auto; }
}
.illus-label { display: inline-block; margin-right: 8px; padding: 1px 6px; border: 1px solid var(--rule-strong); border-radius: 3px; font: 500 10px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* ── Vibe check (kit .glance) ──────────────────────────── */
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.tag { display: inline-flex; align-items: center; padding: 4px 10px; border: 1px solid var(--rule-strong); border-radius: 999px; font: 500 12px/1.2 var(--mono); letter-spacing: .02em; color: var(--ink-2); }
.vibe { margin-top: 26px; padding: 18px 20px 20px; border: 1px solid var(--rule-strong); border-top: 1px solid var(--rule-strong); border-radius: 14px; background: var(--card); }
.vibe .glance-label { display: flex; align-items: center; gap: 8px; }
.vibe .glance-label::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 30%, transparent); }
.vibe-line { margin: 12px 0 0; font: italic 400 19px/1.4 var(--serif); color: var(--ink); }
.vibe-row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 6px 14px; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--rule); }
.vibe-row > span { font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.levels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.levels li { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 8px; border-radius: 999px; background: var(--paper-2); font: 500 13px/1.3 var(--sans); color: var(--ink); }
.levels li small { font: 400 11px/1 var(--mono); color: var(--muted); }
/* The kit's .glance turns every list into a bulleted grid: keep that for "Know before you go" only. */
.vibe.glance ul.tags, .vibe.glance ul.levels { display: flex; flex-wrap: wrap; gap: 6px; grid-template-columns: none; }
.vibe.glance ul.tags li, .vibe.glance ul.levels li { padding-left: 11px; }
.vibe.glance ul.levels li { padding-left: 8px; }
.vibe.glance ul.tags li::before, .vibe.glance ul.levels li::before { content: none; }
.vibe.glance ul.tags li { font: 500 12px/1.2 var(--mono); padding: 4px 10px; }
.vibe.glance ul.know { grid-template-columns: 1fr; gap: 6px; }
@media (max-width: 760px) { .vibe { padding: 16px; } .vibe-row { grid-template-columns: 1fr; } }

/* Source line under a story */
.story-source { margin: 18px 0 0; font: 400 13px/1.5 var(--sans); color: var(--muted); }
.story-source a { color: var(--ink-2); }
.story-gyms { margin: 14px 0 0; font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.story-gyms a { color: var(--ink-2); }

/* ── In brief (compact vibe) ───────────────────────────── */
.brief .story-meta { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.brief .plate--mini { margin: 0; }
.brief .plate--mini .plate-frame { min-height: 0; aspect-ratio: 3 / 2; padding: 18px; border-radius: 6px; margin: 0; width: 100%; }
.brief .plate--mini strong { font-size: clamp(24px, 2.4vw, 30px); }
.brief .plate--mini .plate-frame::before { width: 140px; height: 140px; border-width: 18px; right: -30px; top: -30px; }
.brief .plate--mini .plate-frame::after { right: 46px; top: 30px; width: 12px; height: 12px; }
.brief .photo-credit-line { font: 400 10.5px/1.45 var(--mono); color: var(--muted); }
.brief .photo-credit-line a { color: inherit; }
.brief-vibe { display: grid; gap: 6px; margin-top: 2px; padding-top: 10px; border-top: 1px solid var(--rule); }
.brief-vibe em { font: italic 400 15px/1.4 var(--serif); color: var(--ink-2); }
.brief-vibe .levels li { font-size: 12px; padding: 3px 9px 3px 7px; }
.brief[hidden], .story[hidden], .chapter[hidden], .briefs[hidden] { display: none; }

/* ── Standalone page: gym card, source card ────────────── */
.gymcard { margin-top: 26px; padding: 18px 20px; border: 1px solid var(--rule); border-radius: 14px; background: var(--card); }
.gymcard h2 { margin: 0 0 4px; font: 500 22px/1.15 var(--serif); letter-spacing: -.01em; }
.gymcard dl { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 6px 14px; margin: 12px 0 0; font: 400 15px/1.45 var(--sans); }
.gymcard dt { font: 500 10.5px/1.9 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.gymcard dd { margin: 0; color: var(--ink-2); overflow-wrap: anywhere; }
.gymcard dd a { color: var(--ink); }
.gymcard + .gymcard { margin-top: 12px; }
.source-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; margin-top: 18px; padding: 14px 18px; border-radius: 12px; background: var(--paper-2); font: 400 14px/1.45 var(--sans); color: var(--ink-2); }
.source-card a { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.more-card .plate-mini-type { position: relative; overflow: hidden; display: grid; align-content: end; aspect-ratio: 3 / 2; margin-bottom: 6px; padding: 16px; background: var(--inv-bg); color: var(--inv-fg); font: 500 26px/1 var(--serif); letter-spacing: -.02em; text-transform: none; }
.more-card .plate-mini-type::before { content: ""; position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; border-radius: 50%; border: 16px solid color-mix(in srgb, var(--brand-2) 55%, transparent); }
.more-card .plate-mini-type::after { content: ""; position: absolute; right: 44px; top: 30px; width: 12px; height: 12px; border-radius: 50%; background: var(--signal); }
@media (max-width: 760px) { .gymcard dl { grid-template-columns: 1fr; gap: 2px; } .gymcard dd { margin-bottom: 8px; } }

/* ── Quiet week ────────────────────────────────────────── */
.quiet { max-width: 44rem; margin: 0 auto; padding: clamp(48px, 8vw, 96px) var(--gutter); text-align: center; }
.quiet h2 { margin: 0; font: italic 500 clamp(36px, 6vw, 64px)/1 var(--serif); letter-spacing: -.03em; }
.quiet p { margin: 16px auto 0; max-width: 34rem; font-size: 19px; line-height: 1.5; color: var(--ink-2); }
.quiet .btn { margin-top: 26px; color: var(--signal-ink); }

/* Finale button text stays dark on the yellow signal in both themes. */
.btn--primary { color: var(--signal-ink); }
.dock-vibe { width: auto; padding: 0 12px 0 10px; border-radius: 999px; gap: 6px; display: inline-flex; align-items: center; font: 500 10.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: inherit; text-decoration: none; }
.dock-vibe svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@media (max-width: 380px) { .dock-vibe span { display: none; } .dock-now { min-width: 120px; } }

/* ── First paint (polish round) ────────────────────────── */
/* No black field: the cover paints its photo's own colour and a blurred 24px preview at once, and the photo
   draws over it as it arrives, with no fade and no slow zoom. */
.cover-photo { background-color: #1a1d22; }
.cover-lqip { position: absolute; inset: -40px; z-index: 0; background: center / cover no-repeat; filter: blur(22px) saturate(1.1); transform: scale(1.06); }
.cover-photo img { position: relative; z-index: 0; animation: none; transform: none; background: transparent; }
.cover-photo::after { z-index: 1; }
/* Every other photograph: its average colour (or --paper-2) until it loads; alt text never shows as a grey box. */
.digest main img:not(.finale-mark), .digest .bar img { color: transparent; }
.digest main img:not(.finale-mark):not(.cover-photo img) { background-color: var(--ph, var(--paper-2)); }
/* A free-text date line (recurring events) sits where the <time> does. */
.story-meta .when { margin-left: auto; letter-spacing: .06em; }
@media (max-width: 760px) { .story-meta .when { margin-left: 0; } }
/* Credits under a row of story cards on a story page. */
.more .cards-credit { margin-top: 10px; }
.more-card .more-credit { display: block; margin: -2px 0 8px; font: 400 10px/1.4 var(--mono); letter-spacing: .02em; color: var(--muted); }