/* ==========================================================================
   Desktop ≥ 1024px. Loaded with media="(min-width: 1024px)".
   Source: the ten *_desktop Stitch screens (same tokens as mobile):
   max-w-[1440px] mx-auto px-margin containers, 12-column grids,
   a fixed three-row broadsheet header (142px) and pt-44 main.
   ========================================================================== */

/* ---- Frame ------------------------------------------------------------- */
:root { --desk-header-h: 11rem; }

.site-main,
.site-main.has-compact-header,
.site-main.has-reader-header { padding-top: var(--desk-header-h); padding-bottom: 0; min-height: calc(100vh - 160px); }
html { scroll-padding-top: calc(var(--desk-header-h) + var(--space-sm)); }

.wrap { max-width: 1440px; margin-left: auto; margin-right: auto; }
.desk-wrap { width: 100%; max-width: 1440px; margin: 0 auto; padding-left: var(--margin); padding-right: var(--margin); }

.is-desk { display: revert; }
.is-mobile { display: none !important; }
.dock, .menu-panel { display: none !important; }

/* ---- Broadsheet header -------------------------------------------------- */
.masthead { background: rgb(250 249 245 / 0.95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: var(--sh-header); }
.masthead-inner { display: none; }
.masthead .progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; }
.broadsheet { display: block; }

.wire {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.25rem var(--margin);
  overflow: hidden;
  background: var(--c-inverse-surface);
  color: var(--c-inverse-on-surface);
  font-family: var(--font-mono);
  font-size: var(--t-label-sm-size);
  line-height: var(--t-label-sm-lh);
  letter-spacing: var(--ls-wider);
  font-weight: 600;
  text-transform: uppercase;
}
.wire-lead { display: flex; align-items: center; gap: var(--space-md); flex-shrink: 0; }
.wire-chip { padding: 0.125rem 0.375rem; background: var(--c-primary); color: var(--c-on-primary); font-weight: 700; }
.wire-issue { color: var(--c-tertiary-fixed-dim); }
.wire-cities { color: var(--c-secondary-fixed-dim); }
.wire-cities a:hover { color: var(--c-inverse-on-surface); }
.wire-ticker { flex: 1; min-width: 0; margin: 0 var(--gutter); overflow: hidden; white-space: nowrap; }
.wire-track { display: flex; align-items: center; gap: var(--space-lg); width: max-content; animation: marquee 32s linear infinite; }
.wire-track > * { flex-shrink: 0; }
.wire-track > :nth-child(even) { color: var(--c-primary-fixed); }
.wire-ticker:hover .wire-track { animation-play-state: paused; }
.wire-edition { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.wire-month { display: none; color: var(--c-secondary-fixed-dim); }
.wire-count { font-weight: 700; color: var(--c-primary-fixed-dim); }
@media (min-width: 1280px) { .wire-month { display: inline; } }
@media (prefers-reduced-motion: reduce) { .wire-track { animation: none; } }

.broadsheet-inner { max-width: 1440px; margin: 0 auto; padding: 0 var(--margin); }
.nameplate { display: flex; align-items: center; justify-content: space-between; gap: var(--gutter); padding: var(--space-sm) 0 var(--space-xs); }
.nameplate-strap { display: flex; align-items: center; gap: var(--space-xs); flex-shrink: 0; font-family: var(--font-mono); font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--ls-widest); font-weight: 700; text-transform: uppercase; }
.nameplate-strap .strap-label { color: var(--c-on-surface-variant); }
.nameplate-strap .strap-value { color: var(--c-primary); }
.nameplate-brand { flex: 1; min-width: 0; text-align: center; }
.nameplate-title {
  display: inline-block;
  font-family: var(--font-display);
  font-size: var(--t-headline-lg-size);
  line-height: var(--t-headline-lg-lh);
  letter-spacing: var(--ls-tight);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-on-surface);
  transition: color var(--dur) var(--ease);
}
.nameplate-title:hover { color: var(--c-primary); }
.nameplate-tagline { margin-top: -0.25rem; font-family: var(--font-mono); font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); letter-spacing: var(--t-body-sm-ls); font-style: italic; color: var(--c-on-surface-variant); }
.nameplate-actions { display: flex; align-items: center; gap: var(--space-sm); flex-shrink: 0; }
.btn-strap {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem var(--space-sm);
  background: var(--c-surface-high);
  color: var(--c-on-surface);
  font-family: var(--font-mono);
  font-size: var(--t-label-sm-size);
  line-height: var(--t-label-sm-lh);
  letter-spacing: var(--ls-wider);
  font-weight: 600;
  text-transform: uppercase;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-strap:hover { background: var(--c-surface-highest); }
.btn-strap.is-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-strap.is-primary:hover { background: var(--c-primary-container); color: var(--c-on-primary-container); }
.round-btn { width: 2rem; height: 2rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-surface-container); color: var(--c-on-surface-variant); }
.round-btn:hover { color: var(--c-on-surface); }
.round-btn .icon, .nameplate-actions .avatar-btn .icon { width: 18px; height: 18px; }
.nameplate-actions .avatar-btn { margin-left: 0; }

.desk-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); min-height: 2.5rem; padding: 0.25rem 0 var(--space-xs); }
.desk-nav ul { display: flex; align-items: center; gap: var(--space-xs); white-space: nowrap; overflow-x: auto; scrollbar-width: none; }
.desk-nav a {
  display: inline-block;
  padding: 0.25rem var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--t-label-md-size);
  line-height: var(--t-label-md-lh);
  letter-spacing: var(--ls-wider);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--c-on-surface-variant);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.desk-nav a:hover { color: var(--c-on-surface); background: var(--c-surface-high); }
.desk-nav li.nav-current a,
.desk-nav a.nav-current { background: var(--c-primary); color: var(--c-on-primary); }
.desk-nav-press { flex-shrink: 0; padding-left: var(--space-md); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-widest); font-weight: 700; text-transform: uppercase; color: var(--c-tertiary); }

/* ---- Footer: 12-column colophon ---------------------------------------- */
.site-footer { margin-top: var(--space-xl); padding: var(--space-xl) 0 var(--space-lg); }
.site-footer .footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--margin);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 0;
}
.site-footer .footer-about { grid-column: span 4; gap: 0; padding-bottom: var(--space-lg); }
.site-footer .footer-bureaus { grid-column: span 3; }
.site-footer .footer-desks { grid-column: span 2; }
.site-footer .footer-charter { grid-column: span 3; }
.site-footer .footer-col { display: block; padding-bottom: var(--space-lg); }
.site-footer .footer-pitch,
.site-footer .footer-tag,
.site-footer .footer-chips .chip.is-nav { display: none; }
.site-footer .footer-brand { font-size: var(--t-headline-md-size); line-height: var(--t-headline-md-lh); letter-spacing: var(--t-headline-md-ls); font-weight: 700; color: var(--c-on-surface); }
.site-footer .footer-blurb { display: block; max-width: 24rem; margin-top: var(--space-xs); font-family: var(--font-serif); font-size: var(--t-body-md-size); line-height: var(--t-body-md-lh); color: var(--c-on-surface-variant); }
.site-footer .footer-chips { margin-top: var(--space-md); }
.site-footer .footer-chips .chip,
.site-footer .footer-chips .chip:nth-child(n) { padding: 0.125rem var(--space-xs); border-radius: 0; background: var(--c-surface-container); color: var(--c-on-surface); font-size: var(--t-label-sm-size); }
.site-footer .footer-chips .chip.is-press { display: inline-flex; background: var(--c-primary-fixed); color: var(--c-on-primary-fixed); font-weight: 700; }
.site-footer .footer-chips .chip:last-child:not(.is-press) { background: var(--c-surface-highest); color: var(--c-on-surface-variant); }
.footer-head { margin-bottom: var(--space-sm); font-family: var(--font-mono); font-size: var(--t-label-lg-size); line-height: var(--t-label-lg-lh); letter-spacing: var(--ls-wider); font-weight: 700; text-transform: uppercase; color: var(--c-primary); }
.footer-col ul { display: flex; flex-direction: column; gap: 0.375rem; font-family: var(--font-mono); font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--ls-wider); font-weight: 700; text-transform: uppercase; color: var(--c-on-surface-variant); }
.footer-col a:hover { color: var(--c-primary); }
.footer-bureaus li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.footer-bureaus li span + span { color: var(--c-outline); font-weight: 400; text-align: right; }
.footer-charter p { font-family: var(--font-mono); font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); letter-spacing: var(--t-body-sm-ls); color: var(--c-on-surface-variant); }
.footer-link { display: inline-block; margin-top: var(--space-md); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-ls); font-weight: 700; text-transform: uppercase; color: var(--c-primary); text-decoration: underline; text-underline-offset: 4px; }
.footer-link:hover { color: var(--c-primary-container); }
.site-footer .footer-legal { grid-column: 1 / -1; padding-top: var(--space-md); letter-spacing: var(--ls-wider); }
.site-footer .footer-legal .is-desk { display: inline; }
.footer-legal-links { display: flex; align-items: center; gap: var(--space-md); }
.site-footer .footer-legal .nav-legal { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.site-footer .footer-legal .nav-legal a.nav-current { color: var(--c-on-surface); }
.footer-desks a.nav-current { color: var(--c-primary); }
.site-footer .footer-legal a:hover { color: var(--c-on-surface); }

/* ==========================================================================
   Desktop modules (partials/desk/*). Shared atoms first.
   ========================================================================== */
.dk { display: block; }
.dk-section { width: 100%; max-width: 1440px; margin: 0 auto; padding: var(--space-sm) var(--margin); }
.dk-section.is-tight-top { padding-top: var(--space-xs); }
.dk-section.is-md { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.dk-section.is-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.dk-section.is-cta { padding-top: var(--space-md); padding-bottom: var(--space-lg); }

.dk-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.dk-grid[hidden] { display: none; }
.dk-grid.is-start { align-items: start; }
.dk-grid.is-stretch { align-items: stretch; }
.dk-grid.is-center { align-items: center; }
.dk-grid.is-inner { padding-top: var(--space-xs); }
.dk-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dk-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
.dk-grid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dk-grid.is-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.dk-grid.is-sm { gap: var(--space-sm); }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; } .span-6 { grid-column: span 6; } .span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; } .span-9 { grid-column: span 9; } .span-12 { grid-column: 1 / -1; }

.dk-card { background: var(--c-surface-lowest); padding: var(--space-md); border-radius: var(--r); box-shadow: var(--sh-sm); }
.dk-card.is-lg, .dk-ink-card.is-lg { padding: var(--space-lg); }
.dk-ink-card { display: flex; flex-direction: column; padding: var(--space-md); border-radius: var(--r); background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); box-shadow: var(--sh-md); }
.dk-soft-card { padding: var(--space-md); border-radius: var(--r); background: var(--c-surface-container); }
.dk-col { display: flex; flex-direction: column; justify-content: space-between; }

.chip.is-dk { padding: 0.125rem var(--space-xs); border-radius: 0; letter-spacing: var(--ls-widest); font-weight: 700; }
.chip.is-dk.is-high { font-weight: 600; letter-spacing: var(--t-label-sm-ls); }
.chip.is-dk.is-lowest { background: var(--c-surface-lowest); color: var(--c-on-surface); font-weight: 600; letter-spacing: var(--t-label-sm-ls); }
.chip.is-dk.is-tl { position: absolute; top: 0.5rem; left: 0.5rem; }
.chip.is-dk.is-br { position: absolute; bottom: 0.5rem; right: 0.5rem; }

.dk-on-surface { color: var(--c-on-surface); }
.dk-outline { color: var(--c-outline); }
.dk-dim { color: var(--c-secondary-fixed-dim); }
.dk-fixed { color: var(--c-primary-fixed); }
.dk-fixed-variant { color: var(--c-on-primary-fixed-variant); }
.dk-micro { display: block; font-family: var(--font-mono); font-size: 9px; line-height: 1.4; letter-spacing: var(--ls-wider); text-transform: uppercase; }
.dk-underline { text-decoration: underline; }
.dk-hover a:hover, a.dk-hover:hover { color: var(--c-primary); }
.dk-pad-b { padding-bottom: var(--space-sm); }
.dk-pad-b-xs { padding-bottom: var(--space-xs); }
.dk-pad-t { padding-top: var(--space-md); }
.dk-pad-t-xs { padding-top: var(--space-xs); }
.dk-mt-1 { margin-top: 0.25rem; }
.dk-mt-2 { margin-top: 0.125rem; }
.dk-mt-3 { margin-top: var(--space-md); }
.dk-mb-3 { margin-bottom: var(--space-md); }
.dk-square { width: 0.625rem; height: 0.625rem; background: var(--c-primary); flex-shrink: 0; }
.dk-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--c-primary); flex-shrink: 0; }
.dk-dot.is-tertiary { background: var(--c-tertiary); }

.dk-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-sm); padding-bottom: var(--space-md); }
.dk-head-note { max-width: 28rem; }

.dk-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); margin-bottom: var(--space-md); border-radius: var(--r); background: var(--c-surface-low); }
.dk-strip.is-foot { margin: var(--space-md) 0 0; padding: var(--space-sm); }
.dk-strip.is-dark { background: rgb(227 226 223 / 0.1); }

.dk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  font-family: var(--font-mono);
  font-size: var(--t-label-md-size);
  line-height: var(--t-label-md-lh);
  letter-spacing: var(--ls-wider);
  font-weight: 700;
  text-transform: uppercase;
  white-space: nowrap;
  background: var(--c-surface-high);
  color: var(--c-on-surface);
  box-shadow: var(--sh-md);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dk-btn.is-primary { background: var(--c-primary); color: var(--c-on-primary); }
.dk-btn.is-primary:hover { background: var(--c-primary-container); }
.dk-btn.is-ink { background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); }
.dk-btn.is-ink:hover { background: var(--c-primary); }
.dk-btn.is-surface { background: var(--c-surface); color: var(--c-on-surface); }
.dk-btn.is-surface:hover { background: var(--c-surface-high); }
.dk-btn.is-sm { padding: var(--space-xs) var(--space-sm); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); border-radius: var(--r); box-shadow: var(--sh); }
.dk-btn.is-lg { letter-spacing: var(--ls-widest); border-radius: var(--r); }
.dk-btn.is-block { width: 100%; }

/* ---- Cover ------------------------------------------------------------- */
.dk-dateline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xs) var(--space-md); border-radius: var(--r); background: var(--c-surface-high); }
.dk-dateline-lead { min-width: 0; }
.dk-dateline-lead > * { flex-shrink: 0; }
.dk-dateline-lead > .dk-dateline-text { flex-shrink: 1; min-width: 0; max-width: 32rem; }
.dk-lead { display: flex; flex-direction: column; position: relative; }
.dk-lead-title { margin: var(--space-xs) 0 var(--space-sm); }
.dk-lead-title a:hover { color: var(--c-primary); }
/* the whole cover card opens the story: the headline link stretches over it, the card's other links sit above */
.dk-lead-title a::after { content: ""; position: absolute; inset: 0; }
.dk-lead a:not(.dk-lead-title a) { position: relative; z-index: 1; }
.dk-lead-media { position: relative; display: block; height: 440px; margin-bottom: var(--space-md); overflow: hidden; border-radius: var(--r); box-shadow: var(--sh-inner); }
.dk-lead-media img { width: 100%; height: 100%; object-fit: cover; }
.dk-lead-caption { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-xs); padding: var(--space-md); background: linear-gradient(to top, rgb(48 49 46 / 0.9), rgb(48 49 46 / 0.6), transparent); color: var(--c-inverse-on-surface); }
.dk-lead-caption .t-body-sm { max-width: 36rem; color: var(--c-surface-high); }
.dk-lead-caption .t-label-sm { flex-shrink: 0; color: var(--c-primary-fixed); }
.dk-dropcap { color: var(--c-on-surface); }
.dk-dropcap::first-letter { float: left; padding-right: var(--space-xs); font-family: var(--font-display); font-size: 64px; line-height: 52px; font-weight: 700; color: var(--c-primary); }
.dk-teaser p + p { margin-top: var(--space-sm); }
.dk-quote { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-md); border-radius: var(--r); background: var(--c-tertiary-fixed); color: var(--c-on-tertiary-fixed); overflow: hidden; }
.dk-quote .t-headline-sm { display: block; margin-top: var(--space-xs); line-height: 1.375; font-weight: 600; }
svg.dk-quote-mark { display: block; width: 36px; height: 36px; color: var(--c-tertiary); opacity: 0.4; }
.dk-quote[hidden] { display: none; }
.dk-grid.is-inner:not(:has(> .dk-quote:not([hidden]))) > .span-7 { grid-column: 1 / -1; }
.dk-quote:hover .t-headline-sm { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

.dk-rank { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs); border-radius: var(--r); background: rgb(227 226 223 / 0.1); transition: background-color var(--dur) var(--ease); }
.dk-rank:hover { background: rgb(227 226 223 / 0.2); }
.dk-rank-num { font-family: var(--font-display); font-size: 28px; line-height: 1.5; font-weight: 700; color: var(--c-primary-fixed); flex-shrink: 0; }
.dk-rank-score { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex-shrink: 0; }
.dk-rank-score .dk-micro { color: var(--c-tertiary-fixed-dim); }
.dk-ink-card .dk-micro.dk-dim { font-size: 10px; }
.dk-specs { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--r); background: var(--c-primary-fixed); color: var(--c-on-primary-fixed); }

.dk-banner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
.dk-zine-thumb { width: 4rem; height: 5rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: var(--r); background: var(--c-primary-container); color: var(--c-on-primary-container); font-family: var(--font-display); font-size: 28px; font-weight: 700; box-shadow: var(--sh); }
.dk-zine-thumb img { width: 100%; height: 100%; object-fit: cover; }

.dk-story { display: flex; flex-direction: column; justify-content: space-between; transition: box-shadow var(--dur) var(--ease); }
.dk-story:hover { box-shadow: var(--sh-md); }
.dk-story-media { position: relative; display: block; height: 14rem; margin-bottom: var(--space-sm); overflow: hidden; border-radius: var(--r); }
.dk-story-media img { width: 100%; height: 100%; object-fit: cover; }
.dk-meta { display: block; margin-bottom: 0.25rem; }

.dk-panel { padding: var(--space-lg); border-radius: var(--r); background: var(--c-surface-low); box-shadow: var(--sh-sm); }
.dk-tabs { display: flex; gap: var(--space-xs); overflow-x: auto; padding-bottom: var(--space-sm); scrollbar-width: none; }
.dk-tab { flex-shrink: 0; max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: var(--space-xs) var(--space-md); border-radius: var(--r); background: var(--c-surface-high); color: var(--c-on-surface); font-family: var(--font-mono); font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--ls-wider); font-weight: 700; text-transform: uppercase; cursor: pointer; }
.dk-tab:hover { background: var(--c-surface-highest); }
.dk-tab.is-active { background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--sh-sm); }
.dk-tab-stage { margin-top: var(--space-xs); padding: var(--space-lg); border-radius: var(--r); background: var(--c-surface-lowest); box-shadow: var(--sh-sm); }
.dk-stat-box { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-md); border-radius: var(--r); background: var(--c-surface-low); }
.dk-stat-img { width: 100%; height: 12rem; object-fit: cover; border-radius: var(--r); }
.dk-ring { width: 12rem; height: 12rem; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 12px solid var(--c-primary); border-radius: 50%; }
.dk-stat-box .dk-grid { width: 100%; text-align: center; }
.dk-stat { display: flex; flex-direction: column; padding: var(--space-xs); border-radius: var(--r); background: var(--c-surface-lowest); }

.dk-fit { position: relative; display: block; height: 16rem; overflow: hidden; border-radius: var(--r); box-shadow: var(--sh-inner); }
.dk-fit img { width: 100%; height: 100%; object-fit: cover; }
.dk-fit-cap { position: absolute; left: 0.5rem; bottom: 0.5rem; padding: 0.125rem var(--space-xs); background: rgb(48 49 46 / 0.8); color: var(--c-inverse-on-surface); font-family: var(--font-mono); font-size: 10px; line-height: 14px; text-transform: uppercase; }
.dk-play { width: 2rem; height: 2rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: rgb(227 226 223 / 0.3); color: var(--c-inverse-on-surface); }
.dk-play.is-on, .dk-rank:hover .dk-play { background: var(--c-primary); color: var(--c-on-primary); }
.dk-track-title { font-size: 18px; line-height: 1.25; font-weight: 600; }

.dk-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md); border-radius: var(--r); background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--sh-md); }
.dk-cta-mark { width: 3rem; height: 3rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: var(--r); background: var(--c-on-primary); color: var(--c-primary); font-size: 24px; font-weight: 700; }
.dk-cta-sub { color: var(--c-primary-fixed); }

/* paged archive (/page/2/ …) */
.feed .feed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }

/* ---- Feature story (post.hbs) ----------------------------------------- */
.share-dock, .article-hero-top, .byline-strip { display: none; }
.dk-status { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm) var(--margin); background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-widest); font-weight: 600; text-transform: uppercase; }
.dk-status a:hover { color: var(--c-primary-fixed); }
.dk-status .dot-live { width: 0.625rem; height: 0.625rem; }
.dk-status-chip { padding: 0.125rem 0.5rem; border-radius: var(--r); background: var(--c-surface-highest); color: var(--c-on-surface-variant); }

.article-hero { display: flex; flex-direction: column; gap: var(--space-sm); max-width: 1440px; margin: 0 auto; padding-top: var(--space-lg); padding-bottom: var(--space-xl); }
.article-kicker { display: flex; flex-wrap: wrap; gap: var(--space-xs); font-family: var(--font-mono); font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--ls-widest); font-weight: 700; text-transform: uppercase; color: var(--c-primary); }
.article-title,
.article-title.is-long { max-width: 72rem; margin-bottom: 0; font-size: var(--t-display-xl-size); line-height: var(--t-display-xl-lh); letter-spacing: var(--ls-tight); text-transform: uppercase; }
.article-standfirst { max-width: 56rem; margin-bottom: 0; padding-top: var(--space-xs); color: var(--c-on-surface-variant); }
.article-figure { height: 520px; margin-top: var(--space-lg); border-radius: var(--r-xl); box-shadow: var(--sh-xl); }
.article-figure-img { height: 100%; }
.article-figure-cap { align-items: flex-end; gap: var(--space-md); padding: 1.5rem; background: linear-gradient(to top, rgb(48 49 46 / 0.9), transparent 60%); }
.article-figure-note { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; max-width: 36rem; }
.article-figure-note .chip.is-dk { display: inline-flex; padding: 0.25rem 0.625rem; letter-spacing: var(--ls-wider); }
.article-figure-note .t-label-sm { font-family: var(--font-mono); font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); letter-spacing: var(--t-body-sm-ls); font-weight: 400; text-transform: none; color: rgb(242 241 237 / 0.9); }
.article-figure-note .dot-live { display: none; }
.article-figure-fig { display: none; }
.article-figure-pin { display: block; flex-shrink: 0; padding: 0.625rem 1rem; border-radius: var(--r-lg); background: rgb(250 249 245 / 0.9); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); color: var(--c-on-surface); box-shadow: var(--sh-md); font-family: var(--font-mono); font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--t-label-md-ls); font-weight: 700; text-transform: uppercase; }

.article-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; max-width: 1440px; margin: 0 auto; padding: 0 var(--margin) var(--space-xl); }
.article-grid > .article-body { grid-column: 4 / span 6; max-width: none; padding: 0; }
.article-grid > .article-rail.is-left { grid-column: 1 / span 3; grid-row: 1; position: sticky; top: 12rem; }
.article-grid > .article-rail.is-right { grid-column: 10 / span 3; grid-row: 1; }
.article-grid > .article-rail { display: flex; flex-direction: column; gap: var(--space-lg); }
.dk-rail-card { display: flex; flex-direction: column; padding: var(--space-md); border-radius: var(--r-xl); box-shadow: var(--sh-sm); }
.dk-rail-card[hidden] { display: none; }
.dk-rail-card.is-low { background: var(--c-surface-low); }
.dk-rail-card.is-mid { gap: var(--space-xs); background: var(--c-surface-container); }
.dk-rail-card.is-white { background: var(--c-surface-lowest); box-shadow: var(--sh-md); }
.dk-rail-card.is-ink { background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); box-shadow: var(--sh-xl); }
.dk-rail-card.is-ink h4 { color: var(--c-surface-bright); }
.dk-rail-head { padding-bottom: var(--space-xs); margin-bottom: var(--space-sm); border-bottom: 1px solid var(--c-surface-highest); }
.dk-count { padding: 0.125rem 0.5rem; border-radius: var(--r); background: var(--c-surface-highest); color: var(--c-on-surface); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-ls); font-weight: 600; text-transform: uppercase; }
.dk-toc { display: flex; flex-direction: column; gap: 0.5rem; }
.dk-toc a { display: flex; align-items: flex-start; gap: var(--space-xs); padding: 0.5rem; border-radius: var(--r); transition: background-color var(--dur) var(--ease); }
.dk-toc a:hover { background: var(--c-surface-container); }
.dk-toc-num, .dk-toc-title { font-family: var(--font-mono); font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--t-label-md-ls); font-weight: 700; }
.dk-toc-num { color: var(--c-primary); }
.dk-toc-title { color: var(--c-on-surface); }
.dk-toc a:hover .dk-toc-title { color: var(--c-primary); }
.dk-toc-sub { font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--c-on-surface-variant); }
.dk-byline-photo { display: flex; flex-direction: column; padding: 0.5rem; border-radius: var(--r); background: var(--c-surface); box-shadow: var(--sh-sm); text-align: center; }
.dk-byline-photo .t-label-sm { margin-top: 0.5rem; text-transform: none; }
.dk-byline-img { display: flex; align-items: center; justify-content: center; width: 100%; height: 11rem; overflow: hidden; border-radius: var(--r); background: var(--c-surface-high); color: var(--c-outline); }
.dk-byline-img img { width: 100%; height: 100%; object-fit: cover; }
.dk-byline-img .icon { width: 48px; height: 48px; }
.dk-rail-label { display: block; margin-bottom: var(--space-xs); }
.dk-nodes { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.dk-nodes a { padding: 0.25rem 0.625rem; border-radius: var(--r); background: var(--c-surface); color: var(--c-on-surface); box-shadow: var(--sh-sm); font-family: var(--font-mono); font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--t-label-md-ls); font-weight: 700; text-transform: uppercase; }
.dk-nodes a:hover { color: var(--c-primary); }
.dk-share { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.25rem; }
.dk-share a, .dk-share button { display: flex; align-items: center; justify-content: center; gap: 0.375rem; padding: 0.5rem 0; border-radius: var(--r); background: var(--c-surface); color: var(--c-on-surface); box-shadow: var(--sh-sm); font-family: var(--font-mono); font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--t-label-md-ls); font-weight: 700; text-transform: uppercase; cursor: pointer; }
.dk-share a:hover, .dk-share button:hover { background: var(--c-surface-highest); }
.dk-rail-card.is-dossier { gap: var(--space-sm); }
.dk-rail-card.is-dossier:hover .t-headline-sm { color: var(--c-primary); }
.dk-dossier-img { display: block; height: 9rem; margin-top: 0.25rem; overflow: hidden; border-radius: var(--r); box-shadow: var(--sh-sm); }
.dk-dossier-img img { width: 100%; height: 100%; object-fit: cover; }
.dk-kv { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.625rem; border-radius: var(--r-lg); background: var(--c-surface-low); font-family: var(--font-mono); font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--t-label-md-ls); text-transform: uppercase; }
.dk-kv > span { display: flex; justify-content: space-between; gap: 0.5rem; }
.dk-kv b { color: var(--c-on-surface); }
.dk-kv b.is-primary { color: var(--c-primary); }
.dk-kv b.is-tertiary { color: var(--c-tertiary); }
.dk-intel { display: flex; flex-direction: column; gap: 0.625rem; font-family: var(--font-mono); font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); color: var(--c-secondary-fixed-dim); }
.dk-intel li { display: flex; align-items: flex-start; gap: 0.5rem; }
.dk-intel a:hover { color: var(--c-inverse-on-surface); }
.dk-sector { position: relative; display: block; height: 11rem; overflow: hidden; border-radius: var(--r-lg); background: var(--c-surface-high) center / cover no-repeat; box-shadow: var(--sh-inner); }
.dk-sector::before { content: ""; position: absolute; inset: 0; background: rgb(180 30 4 / 0.1); mix-blend-mode: multiply; }
.dk-sector-pin { position: absolute; left: 0.5rem; bottom: 0.5rem; padding: 0.25rem 0.5rem; border-radius: var(--r); background: rgb(250 249 245 / 0.9); color: var(--c-on-surface); box-shadow: var(--sh); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-ls); font-weight: 700; text-transform: uppercase; }

/* story body at broadsheet measure: numbered dispatch chips, body-lg, framed photos, tilted pull quote */
.article .gh-content { counter-reset: dispatch; font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); }
.article .gh-content > * + * { margin-top: var(--space-md); }
.article .gh-content > h2 { counter-increment: dispatch; margin-top: var(--space-xl); font-family: var(--font-display); font-size: var(--t-headline-lg-size); line-height: var(--t-headline-lg-lh); letter-spacing: var(--ls-tight); font-weight: 700; text-transform: none; }
.article .gh-content > h2::before { content: "Dispatch " counter(dispatch, decimal-leading-zero); display: table; margin-bottom: var(--space-md); padding: 0.125rem 0.5rem; border-radius: var(--r); background: var(--c-primary); color: var(--c-on-primary); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-ls); font-weight: 700; text-transform: uppercase; }
.article .gh-content > h2:first-child { margin-top: 0; }
/* a heading 6 right above a heading 2 is that chapter's kicker: the Dispatch chip moves onto it.
   Kept as separate rules so browsers without :has() still show the plain chip on the heading 2. */
.article .gh-content > h6:has(+ h2) { counter-increment: dispatch; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); margin-top: var(--space-xl); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-wider); color: var(--c-on-surface-variant); }
.article .gh-content > h6:has(+ h2):first-child { margin-top: 0; }
.article .gh-content > h6:has(+ h2)::before { content: "Dispatch " counter(dispatch, decimal-leading-zero); padding: 0.125rem 0.5rem; border-radius: var(--r); background: var(--c-primary); color: var(--c-on-primary); letter-spacing: var(--t-label-sm-ls); }
.article .gh-content > h6:has(+ h2) + h2 { counter-increment: none; margin-top: var(--space-md); }
.article .gh-content > h6:has(+ h2) + h2::before { content: none; }
.article .gh-content > p:first-child::first-letter,
.article .gh-content > h2:first-child + p::first-letter,
.article .gh-content > h6:first-child + h2 + p::first-letter { font-size: 72px; line-height: 1; padding: 0.25rem 0.75rem 0 0; font-weight: 800; }
.article .gh-content figure.kg-image-card { margin-top: var(--space-md); margin-bottom: var(--space-sm); padding: 0.75rem; border-radius: var(--r-xl); background: var(--c-surface-low); box-shadow: var(--sh-md); }
.article .gh-content figure.kg-image-card img { height: 20rem; object-fit: cover; }
/* the story sits between two rails: wide and full-width cards (galleries are wide by default) stay in its column */
.article .gh-content .kg-width-wide,
.article .gh-content .kg-width-full { width: 100%; margin-left: 0; }
.article .gh-content figure.kg-image-card figcaption { margin-top: 0; padding: 0.5rem 0.25rem 0; font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-ls); font-style: normal; font-weight: 600; text-transform: uppercase; color: var(--c-on-surface-variant); }
.article .gh-content figure.kg-image-card figcaption { flex-wrap: nowrap; }
.article .gh-content figure.kg-image-card figcaption > :is(b, strong):last-child { flex: 0 1 auto; max-width: 50%; margin-left: auto; text-align: right; }
.article .gh-content blockquote:not(.kg-blockquote-alt) { padding: var(--space-md); border-left: 0; border-radius: var(--r-lg); font-family: var(--font-serif); font-size: var(--t-body-md-size); line-height: var(--t-body-md-lh); }
.article .gh-content aside,
.article .gh-content blockquote.kg-blockquote-alt { padding: var(--space-lg); background: var(--c-tertiary-fixed); color: var(--c-on-tertiary-fixed); box-shadow: var(--sh-lg); transform: rotate(-1deg); transition: transform var(--dur) var(--ease); font-family: var(--font-display); font-size: var(--t-headline-md-size); line-height: 1.25; letter-spacing: var(--ls-tight); }
.article .gh-content aside:hover,
.article .gh-content blockquote.kg-blockquote-alt:hover { transform: none; }
.article .gh-content aside::before,
.article .gh-content blockquote.kg-blockquote-alt::before { font-size: 128px; color: var(--c-tertiary); opacity: 0.1; }

.article-suite { padding: var(--space-xl) var(--margin); background: var(--c-surface-low); }
.dk-tipjar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); max-width: 1440px; margin: 0 auto var(--space-xl); padding: var(--space-lg); border-radius: var(--r-2xl); background: var(--c-surface-container); box-shadow: var(--sh-md); }
.dk-tipjar-text { max-width: 42rem; }
.dk-mb-1 { margin-bottom: 0.25rem; }
.dk-btn.is-tip { padding: 0.625rem 1.25rem; border-radius: var(--r-lg); }
.article-suite-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); max-width: 1440px; margin: 0 auto; }
.article-suite-grid > .scrawl { grid-column: span 8; padding: 0; max-width: none; background: transparent; }
.article-suite-grid > .dk-next { grid-column: span 4; }
.scrawl-head { padding-bottom: var(--space-xs); border-bottom: 1px solid var(--c-surface-highest); }
.dk-next { display: flex; flex-direction: column; gap: var(--space-md); }
.dk-rule { padding-bottom: var(--space-xs); border-bottom: 1px solid var(--c-surface-highest); }
.dk-next-card { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--r-xl); background: var(--c-surface); box-shadow: var(--sh-sm); transition: box-shadow var(--dur) var(--ease); }
.dk-next-card:hover { box-shadow: var(--sh-md); }
.dk-next-card .chip { align-self: flex-start; border-radius: var(--r); }
.dk-next-card:hover .t-headline-sm { color: var(--c-primary); }

/* ---- City beat (city-beat.hbs) ---------------------------------- */
.dk-band { width: 100%; padding: var(--space-lg) var(--margin); margin-bottom: var(--space-lg); }
.dk-band.is-low { background: var(--c-surface-low); }
.dk-band.is-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.dk-band-inner { max-width: calc(1440px - 2 * var(--margin)); margin: 0 auto; }
.dk-mb-lg { margin-bottom: var(--space-lg); }
.dk-mb-xl { margin-bottom: var(--space-xl); }
.dk-mb-1 { margin-bottom: 0.25rem; }
.dk-mb-2 { margin-bottom: var(--space-sm); }
.dk-measure { max-width: 42rem; }
.dk-measure-sm { max-width: 36rem; }
.dk-surface { color: var(--c-surface); }
.dk-serif-accent { font-family: var(--font-serif); font-style: italic; color: var(--c-primary); text-transform: none; letter-spacing: 0; }
.dk-serif-accent.is-tertiary { color: var(--c-tertiary); }
.dk-city-banner { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-md); }
.dk-live-pill { display: inline-flex; align-items: center; gap: var(--space-xs); padding: 0.25rem var(--space-sm); background: var(--c-surface); color: var(--c-on-surface); box-shadow: var(--sh-sm); }
.dk-btn.is-flat { box-shadow: none; }
.dk-pills { margin-bottom: var(--space-xl); padding-top: 0; padding-bottom: 0; }
.dk-pills ul { display: flex; align-items: center; gap: var(--space-xs); overflow-x: auto; padding-bottom: var(--space-xs); scrollbar-width: none; }
.dk-pills .pill { display: inline-flex; padding: 0.375rem var(--space-sm); border: 0; border-radius: 0; background: var(--c-surface-high); color: var(--c-on-surface); box-shadow: none; font-family: var(--font-mono); font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--ls-wider); font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.dk-pills .pill:hover { background: var(--c-surface-highest); transform: none; }
.dk-pills .pill.is-active { background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--sh-sm); }
.dk-split a { display: block; }
.dk-split-sub { display: block; font-family: var(--font-serif); font-size: var(--t-headline-md-size); line-height: var(--t-headline-md-lh); font-style: italic; font-weight: 600; text-transform: lowercase; letter-spacing: 0; color: var(--c-primary); }
.dk-byline-badge { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm); background: var(--c-surface-low); }
.dk-initials { width: 2.5rem; height: 2.5rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); font-family: var(--font-mono); font-size: var(--t-label-md-size); font-weight: 700; }
.dk-city-media { position: relative; display: block; overflow: hidden; background: var(--c-surface-container); box-shadow: var(--sh-md); }
.dk-city-media img { width: 100%; height: 460px; object-fit: cover; transition: transform 500ms var(--ease); }
.dk-city-media:hover img { transform: scale(1.05); }
.dk-city-bar { position: absolute; left: 1rem; right: 1rem; bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm); background: rgb(48 49 46 / 0.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--c-inverse-on-surface); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-ls); font-weight: 600; text-transform: uppercase; }
.dk-city-tape { position: absolute; top: 0.75rem; right: 0.75rem; padding: 0.25rem var(--space-xs); background: var(--c-tertiary); color: var(--c-on-tertiary); box-shadow: var(--sh-sm); transform: rotate(-2deg); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-wider); font-weight: 700; text-transform: uppercase; }
.dk-dropcap.is-sm { line-height: 1.625; }
.dk-dropcap.is-sm::first-letter { font-family: var(--font-serif); font-size: 48px; line-height: 1; padding: 0.125rem var(--space-sm) 0 0; }
.dk-city-quote { position: relative; display: flex; flex-direction: column; gap: var(--space-sm); margin: var(--space-xs) 0; padding: var(--space-lg); overflow: hidden; background: var(--c-surface-container); box-shadow: var(--sh-sm); }
svg.dk-city-quote-mark { position: absolute; top: -1rem; left: -1rem; width: 72px; height: 72px; color: var(--c-primary); opacity: 0.1; }
.dk-city-quote .t-headline-sm { position: relative; line-height: 1.375; }
.dk-telemetry { margin-top: var(--space-xs); padding: var(--space-md); background: var(--c-surface-high); }
.dk-tele { display: flex; flex-direction: column; padding: var(--space-xs); background: var(--c-surface); color: var(--c-on-surface); }
.dk-tele .t-headline-md { font-weight: 700; }
.dk-tele small { font-family: var(--font-mono); font-size: var(--t-label-md-size); font-weight: 400; }
.dk-tele-note { margin-top: 0.125rem; font-family: var(--font-mono); font-size: 11px; line-height: 1.4; color: var(--c-on-surface-variant); }
.dk-grid.is-xs { gap: var(--space-xs); }
.dk-frame { position: relative; display: block; overflow: hidden; background: var(--c-surface-container); }
.dk-frame img { width: 100%; height: 8rem; object-fit: cover; }
.dk-frame span { position: absolute; left: 0.25rem; bottom: 0.25rem; padding: 0 0.25rem; background: rgb(250 249 245 / 0.9); color: var(--c-on-surface); font-family: var(--font-mono); font-size: 10px; line-height: 14px; text-transform: uppercase; }
.dk-desk { padding: var(--space-md); box-shadow: var(--sh-sm); }
.dk-desk.is-low { background: var(--c-surface-low); }
.dk-desk.is-mid { background: var(--c-surface-container); }
.dk-tier { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm); background: var(--c-surface); box-shadow: var(--sh-sm); transition: transform var(--dur) var(--ease); }
.dk-tier:hover { transform: translateY(-2px); }
.dk-tier .chip { align-self: flex-start; padding: 0.125rem 0.375rem; }
.chip.is-tier-1 { background: var(--c-primary); color: var(--c-on-primary); }
.chip.is-tier-2 { background: var(--c-surface-highest); color: var(--c-on-surface); }
.chip.is-tier-3 { background: var(--c-tertiary-fixed); color: var(--c-on-tertiary-fixed); }
.dk-radar { position: relative; display: flex; flex-direction: column; justify-content: space-between; height: 12rem; margin-bottom: var(--space-sm); padding: var(--space-xs); overflow: hidden; background: var(--c-surface-high) center / cover no-repeat; box-shadow: var(--sh-inner); }
.dk-radar-tag { align-self: flex-start; padding: 0.125rem var(--space-xs); background: rgb(250 249 245 / 0.9); color: var(--c-on-surface); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-ls); font-weight: 700; text-transform: uppercase; }
.dk-radar-bar { display: flex; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xs); background: rgb(48 49 46 / 0.9); color: var(--c-inverse-on-surface); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-ls); font-weight: 600; text-transform: uppercase; }
.dk-node { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-xs); background: var(--c-surface); box-shadow: var(--sh-sm); }
.dk-node:hover .t-label-md { color: var(--c-primary); }
.dk-node-text { text-transform: none; letter-spacing: 0; font-weight: 400; }
.dk-time { flex-shrink: 0; padding: 0 0.25rem; background: rgb(180 30 4 / 0.1); color: var(--c-primary); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); font-weight: 700; text-transform: uppercase; }
.dk-head.is-flush { padding-bottom: var(--space-xs); }
.dk-fitcard { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-sm); background: var(--c-surface); box-shadow: var(--sh-sm); }
.dk-fitcard-img { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; background: var(--c-surface-container); }
.dk-fitcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease); }
.dk-fitcard:hover img { transform: scale(1.05); }
.dk-fitcard .chip.is-dk { padding: 0.125rem 0.375rem; letter-spacing: var(--t-label-sm-ls); }
.dk-chief { position: relative; padding: var(--space-xl); overflow: hidden; background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); box-shadow: var(--sh-xl); }
.dk-chief .dk-grid { position: relative; z-index: 1; }
.dk-chief-glow { position: absolute; right: -3rem; bottom: -3rem; width: 16rem; height: 16rem; border-radius: 50%; background: rgb(180 30 4 / 0.2); filter: blur(64px); pointer-events: none; }
.dk-square.is-pulse { width: 0.5rem; height: 0.5rem; animation: pulse 2s var(--ease) infinite; }
.dk-perks { display: flex; flex-wrap: wrap; gap: var(--space-sm); padding-top: var(--space-xs); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-ls); font-weight: 600; text-transform: uppercase; color: var(--c-surface-dim); }
.dk-perks span { padding: 0.25rem var(--space-xs); background: rgb(250 249 245 / 0.1); }
.dk-credential { padding: var(--space-md); background: var(--c-surface); color: var(--c-on-surface); box-shadow: var(--sh-md); }
.dk-checklist { display: flex; flex-direction: column; gap: var(--space-xs); }
.dk-checklist li { display: flex; align-items: center; gap: var(--space-sm); padding: 0.5rem var(--space-sm); background: var(--c-surface-low); box-shadow: var(--sh-inner); }
.dk-mt-2 { margin-top: var(--space-sm); }

/* ---- Section pages (tag.hbs) ------------------------------------------ */
.dk-accent { color: var(--section-accent); }
.chip.is-accent { background: var(--section-accent); color: var(--section-on-accent); }
.dk-btn.is-accent { background: var(--section-accent); color: var(--section-on-accent); }
.dk-btn.is-accent:hover { filter: brightness(1.08); }
.dk-section-head { padding-top: var(--space-md); padding-bottom: var(--space-md); }
.dk-section-top { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gutter); }
.dk-measure-lg { flex: 1 1 auto; min-width: 0; max-width: 56rem; }
.dk-section-title a { color: var(--c-on-background); }
.dk-section-title .dk-split-sub { display: inline; font-family: var(--font-display); font-size: inherit; line-height: inherit; font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: inherit; color: var(--section-accent); }
.dk-statpill { display: flex; align-items: center; gap: var(--space-lg); flex-shrink: 0; padding: var(--space-md); border-radius: var(--r-lg); background: var(--c-surface-high); box-shadow: var(--sh-sm); }
.dk-statpill > span { display: flex; flex-direction: column; }
.dk-statpill i { width: 1px; height: 2.5rem; background: var(--c-surface-variant); }
.dk-filterbar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm); border-radius: var(--r-lg); background: var(--c-surface-low); box-shadow: var(--sh-sm); }
.dk-pillbar { flex: 1; min-width: 0; padding: 0; margin: 0; overflow: hidden; }
.dk-pillbar ul { display: flex; flex-wrap: nowrap; gap: var(--space-xs); min-width: 0; overflow-x: auto; scrollbar-width: none; }
.dk-pillbar li { flex-shrink: 0; }
.dk-pillbar .pill { padding: 0.375rem var(--space-md); border: 0; border-radius: var(--r); background: var(--c-surface-container); color: var(--c-on-surface); box-shadow: none; font-family: var(--font-mono); font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--ls-wider); font-weight: 700; text-transform: uppercase; }
.dk-pillbar .pill:hover { background: var(--c-surface-highest); transform: none; }
.dk-pillbar .pill.is-active, .dk-pillbar .pill.is-ink.is-active { background: var(--section-accent); color: var(--section-on-accent); box-shadow: var(--sh-sm); }
.dk-sectionpage .dk-section:nth-child(2) { padding-bottom: var(--space-lg); }
.dk-feed-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.dk-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row dense; gap: var(--gutter); align-items: start; }
.dk-feed > .is-wide, .dk-feed > .pagination { grid-column: 1 / -1; }
.dk-feed > [hidden] { display: none; }
.dk-derby { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); background: var(--c-surface-lowest); box-shadow: var(--sh-md); transition: box-shadow 300ms var(--ease); }
.dk-derby:hover { box-shadow: var(--sh-xl); }
.dk-derby-media { position: relative; display: block; height: 18rem; overflow: hidden; background: var(--c-surface-dim); }
.dk-derby.is-lead .dk-derby-media { height: 20rem; }
.dk-derby-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.dk-derby:hover .dk-derby-media img { transform: scale(1.05); }
.dk-derby-chips { position: absolute; top: var(--space-md); left: var(--space-md); display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.dk-rank-chip { padding: 0.25rem var(--space-sm); background: var(--c-surface-highest); color: var(--c-on-surface); box-shadow: var(--sh-md); font-family: var(--font-serif); font-size: var(--t-headline-sm-size); line-height: var(--t-headline-sm-lh); font-weight: 700; letter-spacing: var(--ls-tight); }
.dk-rank-chip.is-lead { background: var(--section-accent); color: var(--section-on-accent); }
.chip.is-dk.is-md { padding: 0.25rem var(--space-sm); font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--ls-wider); font-weight: 700; box-shadow: var(--sh-md); }
.dk-derby-cap { position: absolute; right: var(--space-md); bottom: var(--space-md); max-width: 60%; padding: 0.25rem var(--space-sm); border-radius: var(--r); background: rgb(48 49 46 / 0.9); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--c-inverse-on-surface); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-widest); font-weight: 600; text-transform: uppercase; }
.dk-derby-body { display: flex; flex-direction: column; gap: var(--space-md); padding: var(--space-lg); }
.dk-derby-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-xs); }
.dk-derby-head a:hover { color: var(--section-accent); }
.dk-derby-head .t-label-sm { flex-shrink: 0; max-width: 40%; text-align: right; }
.dk-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); padding: var(--space-sm) var(--space-md); border-radius: var(--r-lg); background: var(--c-surface-low); }
.dk-metrics > span { display: flex; flex-direction: column; min-width: 0; }
.dk-metrics .t-headline-sm { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dk-wire { display: flex; flex-direction: column; padding: var(--space-lg); border-radius: var(--r-xl); background: var(--c-surface-lowest); box-shadow: var(--sh-md); transition: box-shadow var(--dur) var(--ease); }
.dk-wire:hover { box-shadow: var(--sh-xl); }
.dk-wire a:hover { color: var(--section-accent); }
.dk-wire-foot { margin-top: var(--space-md); padding-top: var(--space-sm); border-top: 1px solid var(--c-surface-high); }
.dk-sticky { position: sticky; top: 12rem; }
.dk-radar-head { padding: var(--space-md); border-radius: var(--r-xl); background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); box-shadow: var(--sh-md); }
.dk-dir { display: flex; flex-direction: column; gap: var(--space-xs); padding: var(--space-md); border-radius: var(--r-xl); background: var(--c-surface-lowest); box-shadow: var(--sh-sm); transition: box-shadow var(--dur) var(--ease); }
.dk-dir:hover { box-shadow: var(--sh-md); }
.dk-dir:hover .t-label-lg { color: var(--section-accent); }
.dk-dir-strip { padding: 0.25rem var(--space-xs); border-radius: var(--r); background: var(--c-surface-low); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-ls); font-weight: 600; text-transform: uppercase; color: var(--c-on-surface-variant); }
.dk-dir-strip b { color: var(--section-accent); }
.dk-topics { display: flex; flex-wrap: wrap; gap: 0.375rem; }
.dk-topics a { padding: 0.125rem var(--space-xs); border-radius: var(--r); background: var(--c-surface); color: var(--c-on-surface); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-ls); font-weight: 700; }
.dk-topics a:hover { color: var(--section-accent); }
.dk-tipcard { display: flex; align-items: flex-start; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--r-xl); background: var(--c-surface-high); }
.dk-tipcard .icon { flex-shrink: 0; margin-top: 0.125rem; }
.dk-tipline { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding: var(--space-lg); border-radius: var(--r-xl); background: var(--c-surface-container); box-shadow: var(--sh-sm); }

/* ---- Fest guide (fests.hbs) ------------------------------------ */
.dk-strip-dark { padding: var(--space-sm) var(--margin); background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); font-family: var(--font-mono); font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--ls-wider); font-weight: 700; text-transform: uppercase; }
.dk-tertiary-dim { color: var(--c-tertiary-fixed-dim); }
.dk-tertiary-fixed { color: var(--c-tertiary-fixed); }
.dk-section.is-hero { padding-top: var(--space-lg); padding-bottom: var(--space-md); }
.dk-dossier { position: relative; padding: var(--space-xl); overflow: hidden; border-radius: var(--r-xl); background: var(--c-surface-low); box-shadow: var(--sh-sm); }
.dk-watermark { position: absolute; right: -3rem; top: -3rem; opacity: 0.1; pointer-events: none; user-select: none; font-family: var(--font-display); font-size: var(--t-display-xl-size); line-height: 1; font-weight: 800; text-transform: uppercase; color: var(--section-accent); }
.dk-dossier-row { position: relative; z-index: 1; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-lg); }
.dk-dossier-chip { display: inline-flex; align-items: center; gap: 0.5rem; margin-bottom: var(--space-sm); padding: 0.25rem var(--space-sm); background: var(--section-accent); color: var(--section-on-accent); box-shadow: var(--sh-sm); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-widest); font-weight: 600; text-transform: uppercase; }
.dk-filter-cluster { display: flex; flex-direction: column; gap: var(--space-xs); flex-shrink: 0; max-width: 28rem; }
.dk-minipills { padding: 0; margin: 0; overflow: visible; }
.dk-minipills ul { display: flex; flex-wrap: wrap; gap: 0.375rem; min-width: 0; }
.dk-minipills .pill { padding: 0.25rem var(--space-sm); border: 0; border-radius: var(--r); background: var(--c-surface-high); color: var(--c-on-surface); box-shadow: none; font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-wider); font-weight: 600; text-transform: uppercase; }
.dk-minipills .pill:hover { background: var(--c-surface-highest); transform: none; }
.dk-minipills .pill.is-active, .dk-minipills .pill.is-ink.is-active { background: var(--section-accent); color: var(--section-on-accent); box-shadow: var(--sh-sm); }
.dk-dot.is-lg { width: 0.875rem; height: 0.875rem; background: var(--section-accent); }
#dk-fest-grid > [hidden] { display: none; }
.dk-fest { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--r-xl); background: var(--c-surface-lowest); box-shadow: var(--sh-md); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.dk-fest:hover { transform: translateY(-4px); box-shadow: var(--sh-xl); }
.dk-fest-media { position: relative; display: block; height: 16rem; overflow: hidden; background: var(--c-inverse-surface); }
.dk-fest-img { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform 500ms var(--ease); }
.dk-fest:hover .dk-fest-img { transform: scale(1.05); }
.dk-fest-shade { position: absolute; inset: 0; background: linear-gradient(to top, var(--c-inverse-surface), rgb(48 49 46 / 0.3), transparent); }
.dk-fest-chips { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; flex-wrap: wrap; gap: 0.25rem; }
.dk-fest-chips .chip.is-dk { padding: 0.125rem 0.5rem; letter-spacing: var(--ls-wider); }
.dk-fest-title { position: absolute; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; display: flex; flex-direction: column; color: var(--c-inverse-on-surface); }
.dk-fest-title .t-headline-lg { margin-top: 0.125rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.dk-fest-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-md); }
.dk-fest-body .t-headline-sm { font-weight: 600; }
.dk-nextup { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md); border-radius: var(--r-xl); background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); box-shadow: var(--sh-md); }
.dk-nextup a:hover { color: var(--c-primary-fixed); }
.dk-nextup-dot { width: 3.5rem; height: 3.5rem; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: var(--section-accent); color: var(--section-on-accent); font-family: var(--font-display); font-size: 20px; line-height: 1; font-weight: 800; }
.dk-nextup-dot small { font-family: var(--font-mono); font-size: 9px; letter-spacing: var(--ls-wider); text-transform: uppercase; }
.dk-culsec { position: relative; padding: var(--space-lg); overflow: hidden; border-radius: var(--r-xl); background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); box-shadow: var(--sh-xl); }
.chip.is-dk.is-lime { background: var(--c-lime); color: var(--c-on-surface); }
.dk-deck { padding: var(--space-md); border-radius: var(--r-xl); background: var(--c-surface-lowest); box-shadow: var(--sh-md); }
.dk-deck-head { padding-bottom: var(--space-sm); border-bottom: 1px solid var(--c-surface-highest); }
.dk-deck-window { margin: var(--space-md) 0; padding: var(--space-md); border-radius: var(--r-lg); background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); }
.dk-deck-reels { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-sm); border-radius: var(--r); background: rgb(219 218 214 / 0.2); }
.dk-reel { width: 3rem; height: 3rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border: 2px solid rgb(200 197 202 / 0.4); border-radius: 50%; animation: spin 4s linear infinite; }
.dk-reel::after { content: ""; width: 1rem; height: 1rem; border-radius: 50%; background: var(--section-accent); }
.dk-bars { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 0.25rem; height: 3rem; padding: 0.25rem 0; }
.dk-bars i { width: 0.375rem; border-radius: 2px 2px 0 0; background: var(--section-accent); animation: pulse 1.2s var(--ease) infinite; }
.dk-bars i:nth-child(1) { height: 50%; } .dk-bars i:nth-child(2) { height: 85%; background: var(--c-primary-fixed); animation-delay: .1s; }
.dk-bars i:nth-child(3) { height: 35%; animation-delay: .2s; } .dk-bars i:nth-child(4) { height: 75%; background: var(--c-tertiary-fixed); animation-delay: .15s; }
.dk-bars i:nth-child(5) { height: 95%; animation-delay: .3s; } .dk-bars i:nth-child(6) { height: 40%; background: var(--c-primary-fixed); animation-delay: .05s; }
.dk-bars i:nth-child(7) { height: 65%; animation-delay: .25s; } .dk-bars i:nth-child(8) { height: 25%; background: var(--c-tertiary-fixed); animation-delay: .4s; }
.dk-bars i:nth-child(9) { height: 60%; animation-delay: .18s; }
@media (prefers-reduced-motion: reduce) { .dk-reel, .dk-bars i { animation: none; } }
.dk-track { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm); border-radius: var(--r-lg); background: var(--c-surface-low); transition: background-color var(--dur) var(--ease); }
.dk-track.is-on { background: var(--c-surface-container); }
.dk-track:hover { background: var(--c-surface-high); }
.dk-track-play { width: 2rem; height: 2rem; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r); background: var(--c-surface-highest); color: var(--c-on-surface); }
.dk-track.is-on .dk-track-play, .dk-track:hover .dk-track-play { background: var(--section-accent); color: var(--section-on-accent); }
.icon-24 { width: 24px !important; height: 24px !important; }

/* ---- Correspondent profile (author.hbs) ------------------------------- */
.dk-profile .dk-section.is-md { padding-top: var(--space-md); padding-bottom: var(--space-xl); }
.chip.is-dk.is-highest { background: var(--c-surface-highest); color: var(--c-on-surface); padding: 0.25rem var(--space-xs); }
.dk-idcard { position: relative; padding: var(--space-md); background: var(--c-surface-lowest); box-shadow: var(--sh-xl); }
.dk-idcard-tape { position: absolute; top: -0.75rem; left: -0.75rem; z-index: 2; padding: 0.25rem var(--space-sm); background: var(--c-tertiary-fixed); color: var(--c-on-tertiary-fixed); box-shadow: var(--sh-sm); transform: rotate(-3deg); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-wider); font-weight: 700; text-transform: uppercase; }
.dk-idcard-id { position: absolute; bottom: -0.5rem; right: -0.5rem; z-index: 2; padding: 0.125rem var(--space-sm); background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); transform: rotate(2deg); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-widest); font-weight: 600; text-transform: uppercase; }
.dk-idcard-photo { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c-surface-dim); }
.dk-idcard-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.25); }
.dk-idcard-stamp { position: absolute; top: 0.5rem; left: 0.5rem; padding: 0.125rem 0.375rem; background: rgb(250 249 245 / 0.85); color: var(--c-on-surface); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-ls); font-weight: 700; text-transform: uppercase; }
.dk-idcard-place { position: absolute; bottom: 0.5rem; right: 0.5rem; max-width: 80%; padding: 0.125rem 0.5rem; background: var(--c-primary); color: var(--c-on-primary); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-wider); font-weight: 700; text-transform: uppercase; }
.dk-idcard-note { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-sm); padding: var(--space-md) 0 var(--space-xs); color: var(--c-on-surface); }
.dk-idcard-note:hover .t-headline-sm { color: var(--c-primary); }
.dk-pass { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: var(--space-md); padding: var(--space-sm); background: var(--c-surface-high); box-shadow: var(--sh-sm); }
.dk-dossier-card { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-xl); background: var(--c-surface-low); box-shadow: var(--sh-lg); }
.dk-measure-xl { max-width: 48rem; }
.dk-bigstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); margin: var(--space-md) 0; padding: var(--space-md); background: var(--c-surface-container); box-shadow: var(--sh-sm); }
.dk-bigstats > span { display: flex; flex-direction: column; }
.dk-bigstats b { font-family: var(--font-display); font-size: var(--t-display-lg-size); line-height: 1; letter-spacing: var(--t-display-lg-ls); font-weight: 800; color: var(--c-on-surface); }
.dk-bigstats b.dk-accent-primary { color: var(--c-primary); }
.dk-bigstats b.is-tertiary { color: var(--c-tertiary); }
.dk-bigstats b.dk-outline { color: var(--c-outline); }
.dk-bigstats small { margin-top: 0.25rem; font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-widest); font-weight: 600; text-transform: uppercase; color: var(--c-on-surface-variant); }
.dk-btn.is-big { padding: var(--space-sm) var(--space-md); font-size: var(--t-label-lg-size); line-height: var(--t-label-lg-lh); }
.dk-btn.is-big:not(.is-primary):not(.is-tertiary) { background: var(--c-surface-highest); box-shadow: var(--sh-sm); }
.dk-socials a { padding: 0.25rem var(--space-sm); background: var(--c-surface); color: var(--c-on-surface); box-shadow: var(--sh-sm); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-wider); font-weight: 600; text-transform: uppercase; }
.dk-socials a:hover { background: var(--c-surface-container); }
.dk-archive-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-sm); background: var(--c-surface-container); box-shadow: var(--sh-sm); }
.dk-lead-h { position: relative; display: flex; gap: var(--space-md); padding: var(--space-md); overflow: hidden; background: var(--c-surface-low); box-shadow: var(--sh-xl); }
.dk-lead-h-stamp { position: absolute; top: 1rem; right: 1rem; z-index: 2; padding: 0.125rem var(--space-xs); background: var(--c-tertiary); color: var(--c-on-tertiary); transform: rotate(1deg); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--t-label-sm-ls); font-weight: 700; text-transform: uppercase; }
.dk-lead-h-img { position: relative; display: block; flex: 0 0 41.666%; min-height: 16rem; overflow: hidden; background: var(--c-surface-dim); }
.dk-lead-h-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 500ms var(--ease); }
.dk-lead-h:hover .dk-lead-h-img img { transform: scale(1.05); }
.dk-lead-h-img span { position: absolute; left: 0.5rem; bottom: 0.5rem; padding: 0.125rem 0.5rem; background: rgb(250 249 245 / 0.9); color: var(--c-on-surface); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); font-weight: 700; text-transform: uppercase; }
.dk-lead-h-body { flex: 1; display: flex; flex-direction: column; justify-content: space-between; padding-top: var(--space-xs); padding-right: 6rem; }
.dk-lead-h-body h2 a:hover { color: var(--c-primary); }
.icon-14 { width: 14px !important; height: 14px !important; }
.dk-grid.is-cards { gap: var(--space-md); align-items: start; }
.dk-essay { display: flex; flex-direction: column; justify-content: space-between; padding: var(--space-md); background: var(--c-surface-low); box-shadow: var(--sh-md); }
.dk-essay-img { position: relative; display: block; aspect-ratio: 4 / 3; margin-bottom: var(--space-sm); overflow: hidden; background: var(--c-surface-dim); }
.dk-essay-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 300ms var(--ease); }
.dk-essay:hover .dk-essay-img img { transform: scale(1.05); }
.dk-essay-img .chip { position: absolute; top: 0.5rem; left: 0.5rem; }
.dk-essay-title { display: block; line-height: 1.375; }
.dk-essay:hover .dk-essay-title { color: var(--c-primary); }
.dk-pick { padding: var(--space-md); background: var(--c-surface-high); box-shadow: var(--sh-md); }
.dk-pick h3 a:hover { color: var(--c-primary); }
.dk-pick-img { position: relative; display: block; aspect-ratio: 16 / 9; margin-bottom: var(--space-sm); overflow: hidden; background: var(--c-surface-dim); box-shadow: var(--sh-sm); }
.dk-pick-img img { width: 100%; height: 100%; object-fit: cover; }
.dk-pick-img span { position: absolute; right: 0.5rem; bottom: 0.5rem; padding: 0.125rem 0.5rem; background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); font-weight: 700; text-transform: uppercase; }
.dk-pick-rows { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: var(--space-md); font-family: var(--font-mono); font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); }
.dk-pick-rows > span { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); padding: var(--space-xs); background: var(--c-surface); }
.dk-pick-rows b { color: var(--c-on-surface); }
.dk-pick-rows b.is-tertiary { color: var(--c-tertiary); }
.dk-pick-rows b.is-primary { color: var(--c-primary); }
.dk-pick-quote { padding: var(--space-sm); background: var(--c-surface-container); box-shadow: var(--sh-inner); color: var(--c-on-surface); }
.dk-rotation { position: relative; display: flex; flex-direction: column; padding: var(--space-md); overflow: hidden; background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); box-shadow: var(--sh-xl); }
.dk-chief-glow.is-tr { top: -3rem; right: -3rem; bottom: auto; width: 10rem; height: 10rem; filter: blur(40px); }
.dk-tape { margin-bottom: var(--space-md); padding: var(--space-sm); background: rgb(255 255 255 / 0.1); }
.dk-spools { display: flex; align-items: center; justify-content: center; gap: 2rem; padding: var(--space-sm) 0; background: var(--c-inverse-surface); }
.dk-spools span { width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--c-surface-container); box-shadow: var(--sh-inner); animation: spin 8s linear infinite; }
.dk-spools span::after { content: ""; width: 1rem; height: 1rem; border-radius: 50%; background: var(--c-inverse-surface); }
.dk-spools i { width: 5rem; height: 0.5rem; border-radius: 999px; background: rgb(200 197 202 / 0.4); }
@media (prefers-reduced-motion: reduce) { .dk-spools span { animation: none; } }
.dk-cut { display: flex; align-items: center; justify-content: space-between; gap: var(--space-xs); padding: var(--space-xs); background: rgb(227 226 223 / 0.1); color: var(--c-inverse-on-surface); transition: background-color var(--dur) var(--ease); }
.dk-cut:hover { background: rgb(227 226 223 / 0.2); }
.dk-cut.is-on { background: var(--c-primary-container); color: var(--c-on-primary-container); box-shadow: var(--sh-sm); }
.dk-cut small { display: block; font-size: 12px; opacity: 0.8; }
.dk-cut .t-label-sm { padding-left: 0.5rem; color: inherit; opacity: 0.9; }
.dk-charter { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-lg); background: var(--c-surface-lowest); box-shadow: var(--sh-md); }
.dk-charter-mark { width: 3rem; height: 3rem; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--sh-sm); }

/* ---- Pitch desk (write-for-us.hbs) ------------------------------
   One markup: .pitch-intro / .manifesto / .gh-content dissolve (display: contents)
   so the page body's blocks sit in the 12-column grid. The console spans the
   right 5 columns and stays sticky beside the desks, photo strip and rules. */
.pitch-layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 0; padding-top: var(--space-lg); }
.pitch-layout > * { min-width: 0; }
.pitch-intro, .pitch-intro .manifesto, .pitch-intro .gh-content { display: contents; }
.pitch-intro .chip-row { grid-column: 1 / -1; grid-row: 1; margin-bottom: var(--space-sm); gap: var(--space-sm) !important; }
.pitch-intro .chip-row .sticker { padding: 0.25rem var(--space-sm); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-widest); }
.pitch-intro h1 { grid-column: 1 / span 8; grid-row: 2; align-self: end; margin: 0 !important; font-size: var(--t-display-xl-size); line-height: var(--t-display-xl-lh); letter-spacing: var(--ls-tighter); text-transform: uppercase; }
.pitch-intro h1 br { display: none; }
.pitch-intro h1 .t-headline-sm { display: inline; font-family: var(--font-display); font-size: inherit; line-height: inherit; font-style: normal; font-weight: 800 !important; letter-spacing: inherit !important; text-transform: uppercase !important; color: var(--c-on-background); }
.manifesto-num { display: none; }
.pitch-intro .gh-content > :first-child { grid-column: 9 / span 4; grid-row: 2; align-self: end; margin: 0; padding-bottom: 0.5rem; font-family: var(--font-serif); font-size: var(--t-body-lg-size); line-height: 1.625; color: var(--c-on-surface-variant); }
.pitch-intro .gh-content > :first-child::first-letter { float: none; padding: 0; font: inherit; color: inherit; }
.pitch-intro .gh-content > :not(:first-child) { grid-column: 1 / span 7; margin-top: var(--space-lg); }
.pitch-apply-row { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); margin-top: var(--space-md); }
.pitch-apply-row > * { grid-column: 9 / span 4; }
.dk-pitchbar { grid-column: 1 / -1; grid-row: 4; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); margin: var(--space-lg) 0 var(--space-xl); padding: var(--space-sm); background: var(--c-surface-high); color: var(--c-on-surface); }
.pitch-ticker { display: none; }
.pitch-desks { grid-column: 1 / span 7; grid-row: 5; margin-bottom: var(--space-xl); }
.pitch-desks .section-head { border-bottom: 0 !important; }
.pitch-desks .section-head h2 { font-size: var(--t-headline-lg-size); line-height: var(--t-headline-lg-lh); letter-spacing: var(--ls-tight); text-transform: uppercase; }
.pitch-desks .desk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.pitch-desks .desk { justify-content: space-between; background: var(--c-surface-low); }
.pitch-desks .desk:hover { transform: none; box-shadow: var(--sh-md); }
.desk .desk-beat { display: inline-block; align-self: flex-start; margin-bottom: var(--space-sm); padding: 0.125rem 0.375rem; background: var(--section-accent); color: var(--section-on-accent); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-wider); font-weight: 600; text-transform: uppercase; }
.pitch-desks .desk > .row-start { order: -1; }
.pitch-desks .desk-title { font-family: var(--font-display); font-size: var(--t-headline-md-size); line-height: var(--t-headline-md-lh); font-weight: 700; text-transform: uppercase; }
.dk-photostrip { grid-column: 1 / span 7; grid-row: 6; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); margin-bottom: 0; }
.dk-photostrip a { position: relative; display: block; overflow: hidden; box-shadow: var(--sh-sm); }
.dk-photostrip img { width: 100%; height: 12rem; object-fit: cover; transition: transform 300ms var(--ease); }
.dk-photostrip a:hover img { transform: scale(1.05); }
.dk-photostrip span { position: absolute; left: 0; right: 0; bottom: 0; padding: 0.5rem; background: rgb(48 49 46 / 0.8); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); color: var(--c-inverse-on-surface); font-family: var(--font-mono); font-size: var(--t-label-sm-size); line-height: var(--t-label-sm-lh); letter-spacing: var(--ls-wider); font-weight: 600; text-transform: uppercase; }
.pitch-figure { display: none; }
.pitch-layout > .console { scroll-margin-top: 0; grid-column: 8 / span 5; grid-row: 5 / span 40; align-self: start; position: sticky; top: 12rem; padding: var(--space-lg); background: var(--c-surface-lowest); box-shadow: var(--sh-xl); }
.dk-console-bar { display: flex; align-items: center; justify-content: space-between; }
.console .section-head h2 { font-size: var(--t-headline-lg-size); line-height: var(--t-headline-lg-lh); letter-spacing: var(--ls-tight); text-transform: uppercase; }
.console-steps li { background: var(--c-surface-low); box-shadow: none; }
.pitch-intro .gh-content > .kg-header-card { padding: var(--space-lg) !important; box-shadow: var(--sh-sm); text-align: left; }
.pitch-intro .gh-content > h4 { font-family: var(--font-display); font-size: var(--t-headline-lg-size); line-height: var(--t-headline-lg-lh); letter-spacing: var(--ls-tight); text-transform: uppercase; }
.pitch-intro .gh-content > .kg-toggle-card { margin-top: var(--space-sm); background: var(--c-surface-container); box-shadow: var(--sh-sm); }
.pitch-intro .gh-content > h4 + .kg-toggle-card { margin-top: var(--space-md); }
.dk-pitchcta { grid-column: 1 / span 7; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-xl); padding: var(--space-lg); background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); box-shadow: var(--sh-md); }
.pitch-after { display: block; padding-bottom: var(--space-xl); }
.pitch-staff { margin-top: var(--space-xl); padding: var(--space-xl) 0; position: relative; }
.pitch-staff::before { content: ""; position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; background: var(--c-surface-low); }
.pitch-staff .section-head h2 { font-size: var(--t-headline-lg-size); line-height: var(--t-headline-lg-lh); letter-spacing: var(--ls-tight); text-transform: uppercase; }
.pitch-staff .masthead-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.pitch-staff .staff { padding: var(--space-md); background: var(--c-surface-lowest); box-shadow: var(--sh-sm); }
.pitch-staff .staff:hover { box-shadow: var(--sh-md); }
.pitch-staff .staff-photo { height: 16rem; margin-bottom: var(--space-md); }
.pitch-staff .staff .staff-name { font-family: var(--font-display); font-size: var(--t-headline-md-size); line-height: var(--t-headline-md-lh); text-transform: uppercase; white-space: normal; }
.pitch-staff .staff .t-label-sm.is-muted { color: var(--c-primary); font-weight: 700; }
.pitch-staff .staff-bio { margin-top: var(--space-xs); }
.pitch-staff .staff .staff-count { margin-top: var(--space-sm); padding: var(--space-xs); background: var(--c-surface-container); font-size: var(--t-label-sm-size); }
.pitch-stats b { color: var(--c-primary); font-weight: 700; }
.pitch-final { flex-direction: row; align-items: flex-end; flex-wrap: wrap; justify-content: space-between; gap: var(--space-md) var(--space-lg); margin-top: var(--space-xl); padding: var(--space-xl) var(--space-lg); }
.pitch-final-kicker { flex-basis: 100%; }
.pitch-final h2 { font-size: var(--t-display-xl-size); line-height: var(--t-display-xl-lh); }
.pitch-final-btn { min-width: 20rem; margin: 0; }
.pitch-foot { margin-top: var(--space-md); }

/* ---- Vault (vault.hbs): same markup, desktop grid ------------- */
.vault-ticker { display: none; }
.vault-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-md); align-items: end; padding-top: var(--space-md) !important; padding-bottom: var(--space-lg) !important; }
.vault-head > * { grid-column: 1; max-width: 48rem; }
.vault-head > .row .chip { border-radius: 0; padding: 0.125rem var(--space-xs); font-weight: 700; }
.vault-head h1 { text-transform: uppercase; letter-spacing: var(--ls-tight); }
.vault-head > p { font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); font-style: normal; }
.dk-vault-metrics { grid-column: 2; grid-row: 1 / span 3; align-self: end; display: flex; align-items: center; gap: var(--space-sm); padding: var(--space-sm); border-radius: var(--r-lg); background: var(--c-surface-low); box-shadow: var(--sh-sm); }
.dk-vault-metrics > span { display: flex; flex-direction: column; text-align: right; }
.dk-vault-metrics i { width: 1px; height: 2rem; background: var(--c-surface-highest); }
.vault-drop { display: grid; grid-template-columns: 7fr 5fr; gap: var(--gutter); align-items: stretch; padding-bottom: var(--space-xl) !important; }
.vault .drop-card { display: grid; grid-template-columns: 5fr 7fr; grid-template-rows: auto 1fr; overflow: hidden; border-radius: var(--r-xl); box-shadow: var(--sh-md) !important; }
.vault .drop-card > .row-between { grid-column: 1 / -1; }
.vault .drop-card > .stack-sm:nth-child(2) { padding: var(--space-lg) !important; }
.vault .drop-card .polaroid-frame { aspect-ratio: 3 / 4; }
.vault .drop-card > .stack-sm:nth-child(3) { justify-content: space-between; padding: var(--space-lg) var(--space-lg) var(--space-lg) 0 !important; }
.vault .drop-card h2 { font-family: var(--font-display); font-size: var(--t-headline-lg-size); line-height: var(--t-headline-lg-lh); letter-spacing: var(--ls-tight); font-weight: 700; text-transform: uppercase; }
.vault .drop-card .btn.is-block { width: auto; }
.vault .drop-card > .stack-sm:nth-child(3) > .stack-sm { flex-direction: row; flex-wrap: wrap; }
.vault .drop-card > .stack-sm:nth-child(3) > .stack-sm .btn { flex: 1 1 12rem; }
.dk-pass-card { position: relative; display: flex; flex-direction: column; padding: var(--space-lg); border-radius: var(--r-xl); background: var(--c-surface-low); box-shadow: var(--sh-md); }
.dk-pass-decal { position: absolute; top: -0.25rem; right: -0.25rem; padding: 0.25rem var(--space-sm); background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--sh-md); transform: rotate(-2deg); font-family: var(--font-mono); font-size: var(--t-label-md-size); line-height: var(--t-label-md-lh); letter-spacing: var(--ls-widest); font-weight: 700; text-transform: uppercase; }
.dk-benefits { display: flex; flex-direction: column; gap: 0.375rem; margin-top: var(--space-md); font-family: var(--font-mono); font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); color: var(--c-on-surface); }
.dk-benefits li { display: flex; align-items: center; gap: var(--space-xs); }
.dk-pass-card > .row-between:last-child { margin-top: auto; padding-top: var(--space-md); }
.dk-btn.is-tertiary { background: var(--c-tertiary); color: var(--c-on-tertiary); border-radius: var(--r); }
.dk-btn.is-tertiary:hover { background: var(--c-tertiary-container); }
.vault-catalogue { padding-bottom: var(--space-xl) !important; }
.vault-catalogue .section-head h2 { font-family: var(--font-display); font-size: var(--t-headline-lg-size); line-height: var(--t-headline-lg-lh); letter-spacing: var(--ls-tight); text-transform: uppercase; }
.vault .catalogue { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); }
.vault .catalogue .post-card.is-row { flex-direction: column; justify-content: space-between; border-radius: var(--r-xl); background: var(--c-surface-lowest); box-shadow: var(--sh-sm); }
.vault .catalogue .post-card.is-row:hover { box-shadow: var(--sh-md); }
.vault .catalogue .card-thumb, .vault .catalogue .card-thumb.is-tall { width: 100%; height: auto; aspect-ratio: 3 / 4; border-radius: var(--r); }
.vault .catalogue .card-thumb img { mix-blend-mode: normal !important; transition: transform 300ms var(--ease); }
.vault .catalogue .post-card:hover .card-thumb img { transform: scale(1.05); }
.vault .catalogue .card-title { white-space: normal; font-family: var(--font-serif); font-size: var(--t-headline-sm-size); line-height: var(--t-headline-sm-lh); text-transform: uppercase; }
.vault .catalogue .card-body > .row { justify-content: space-between; }
.vault-about .post-card { padding: var(--space-lg); }
.vault-syndicate .post-card.is-ink { display: grid; grid-template-columns: 7fr 5fr; column-gap: var(--space-xl); align-items: center; padding: var(--space-xl); }
.vault-syndicate .post-card.is-ink > * { grid-column: 1; }
.vault-syndicate .post-card.is-ink > form { grid-column: 2; grid-row: 1 / span 3; margin-top: 0 !important; }
.vault-syndicate .post-card.is-ink > span:last-child { grid-column: 2; justify-content: flex-start !important; }
.vault-syndicate h2 { font-family: var(--font-display); font-size: var(--t-headline-lg-size); line-height: var(--t-headline-lg-lh); letter-spacing: var(--ls-tight); }
.vault-syndicate .form-fields { flex-direction: row !important; }
.vault-syndicate .form-fields .field { flex: 1; }
.vault-syndicate .form-fields .btn { width: auto; flex-shrink: 0; }

/* ---- Plain pages (page.hbs) and errors: broadsheet measure ------------ */
.article > .article-body { max-width: 48rem; margin: 0 auto; padding-bottom: var(--space-xl); }
.error-page .feed-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); }
.error-page > .wrap { max-width: 1440px; }

.nameplate-title { overflow-wrap: break-word; }

/* ---- Canteen Radio: the show page puts the latest episode beside the back catalogue ---- */
.radio-hero { padding-top: var(--space-xl); }
.radio-ribbon { max-width: 36rem; }
.radio-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); align-items: start; }
.radio-layout > :only-child { grid-column: 1 / -1; }
/* the first episode on its own: cover on the left, the rest beside it, rather than one huge photo */
.radio-latest:only-child .radio-deck.has-art { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto auto 1fr auto; align-items: start; gap: var(--space-md) var(--space-xl); }
.radio-latest:only-child .radio-deck.has-art > :not(.radio-vinyl) { grid-column: 2; }
.radio-latest:only-child .radio-deck.has-art > .radio-deck-art { grid-column: 1; grid-row: 1 / 5; align-self: stretch; aspect-ratio: auto; min-height: 20rem; }
.radio-deck.is-show { padding: var(--space-lg); gap: var(--space-md); }
.radio-deck.is-show .radio-deck-art { aspect-ratio: 16 / 9; }
.radio-deck.is-show .radio-deck-title { font-size: 1.75rem; line-height: 1.15; }
.radio-list .section-head { margin-bottom: var(--space-xs); }
.radio-pitch .casting { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md) var(--space-xl); padding: var(--space-lg); }
.radio-pitch .casting > .row-between { flex-basis: 100%; }
.radio-pitch .casting > .stack-xs { flex: 1 1 32rem; }
.radio-pitch .casting > .btn { flex: 0 0 auto; width: auto; padding-left: var(--space-lg); padding-right: var(--space-lg); }

/* the desktop homepage strip: show, episode and player in one row, the record half out of the right edge */
.radio-deck.is-band { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(20rem, 30rem); align-items: center; column-gap: var(--space-xl); padding: var(--space-md) 7rem var(--space-md) var(--space-lg); }
.radio-deck.is-band .radio-deck-head { flex-direction: column; align-items: flex-start; gap: 0.625rem; padding-right: 0; }
.radio-deck.is-band .radio-vinyl { top: 50%; right: -3.5rem; margin-top: -4.25rem; }
.radio-deck.is-band .radio-deck-title { font-size: 1.5rem; line-height: 1.2; }
.article-hero .radio-deck { max-width: 48rem; }