/* ==========================================================================
   Templates: index · post · tag · city · fests · author · write-for-us · vault
   Mobile first; desktop (≥1024px) at the bottom.
   ========================================================================== */

.icon-14 { width: 14px !important; height: 14px !important; }
.icon-16 { width: 16px !important; height: 16px !important; }
.icon-20 { width: 20px !important; height: 20px !important; }
.icon-28 { width: 28px !important; height: 28px !important; }
.is-primary-fixed { color: var(--c-primary-fixed); }
.is-tertiary-fixed { color: var(--c-tertiary-fixed); }
.is-primary-container { color: var(--c-primary-container); }

/* ---- Cover (index) ----------------------------------------------------- */
.cover-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 580px;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-surface-highest);
  box-shadow: var(--sh-xl);
}

.cover-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--c-inverse-surface);
}

.cover-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, var(--c-inverse-surface) 0%, rgb(48 49 46 / 0.6) 50%, transparent 100%);
}

.cover-tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, rgb(180 30 4 / 0.3), transparent 50%, rgb(181 0 98 / 0.2));
  mix-blend-mode: overlay;
}

.cover-stickers {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xs);
  padding: var(--space-md);
  pointer-events: none;
}

/* the whole card opens the story: .cover-link fills it, the text layer lets taps through except on its own links */
.cover-link { position: absolute; inset: 0; z-index: 1; }
.cover-text { pointer-events: none; }
.cover-text a { pointer-events: auto; }
.cover-read { color: rgb(255 255 255 / 0.9); text-shadow: 0 1px 2px rgb(0 0 0 / 0.3); }

.cover-text {
  position: relative;
  z-index: 2;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  color: var(--c-on-primary-container);
}

.cover-stamp {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  align-self: flex-start;
  padding: 0.25rem 0.625rem;
  border-radius: var(--r);
  background: rgb(255 255 255 / 0.95);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--c-on-surface);
  box-shadow: var(--sh-sm);
}

.cover-title {
  color: var(--c-surface-lowest);
  text-shadow: 0 4px 6px rgb(0 0 0 / 0.2);
  letter-spacing: var(--ls-tight);
}

.cover-title em,
.cover-title .hl {
  font-style: normal;
  color: var(--c-primary-fixed);
  text-decoration: underline wavy var(--c-primary);
  text-underline-offset: 4px;
}

.cover-blurb {
  max-width: 32rem;
  color: var(--c-surface-low);
  line-height: 1.625;
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.3);
}

.cover-foot { padding: 0 0.25rem; color: var(--c-surface-dim); }
.cover-foot .is-wider { color: var(--c-surface-high); }

/* The Drop bento */
.drop-grid { display: flex; flex-direction: column; gap: var(--space-md); }
.drop .section-head .chip { background: var(--c-surface-high); color: var(--c-on-surface-variant); padding: 0.25rem 0.5rem; }

/* Heavy rotation tape deck */
.tape-deck {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--r-xl);
  background: var(--c-inverse-surface);
  color: var(--c-inverse-on-surface);
  box-shadow: var(--sh-xl);
}

.tape-deck > *:not(.glow) { position: relative; z-index: 1; }
.tape-deck .glow { z-index: 0; }

.deck-now {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0.5rem;
  border-radius: var(--r-lg);
  background: rgb(48 49 46 / 0.8);
}

.vinyl {
  position: relative;
  width: 4rem;
  height: 4rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-surface-lowest);
  box-shadow: var(--sh-lg);
}

.vinyl-disc {
  width: 3.5rem;
  height: 3.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-inverse-surface);
  animation: spin 6s linear infinite;
}

.vinyl-label {
  width: 1.25rem;
  height: 1.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primary);
}

.vinyl-label span { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: var(--c-surface-lowest); }

.deck-meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.deck-title { color: var(--c-inverse-on-surface); }

.deck-play {
  width: 2.75rem;
  height: 2.75rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: var(--sh);
}

.deck-play .icon { width: 24px; height: 24px; }

.deck-scrub { display: flex; flex-direction: column; gap: 0.25rem; }
.deck-scrub .track { width: 100%; height: 0.375rem; border-radius: var(--r-full); background: rgb(227 226 223 / 0.2); overflow: hidden; }
.deck-scrub .track span { display: block; height: 100%; width: 0; border-radius: var(--r-full); background: var(--c-primary-container); animation: scrub 40s linear infinite; }
.deck-scrub .times { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; color: var(--c-surface-dim); }
@keyframes scrub { to { width: 100%; } }
@media (prefers-reduced-motion: reduce) { .deck-scrub .track span { animation: none; width: 33%; } }
.deck-list { display: flex; flex-direction: column; gap: 0.375rem; padding-top: 0.25rem; }

.deck-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem;
  border-radius: var(--r);
  background: rgb(227 226 223 / 0.05);
  transition: background-color var(--dur) var(--ease);
}

.deck-row.is-active { background: rgb(227 226 223 / 0.1); }
.deck-row:hover { background: rgb(227 226 223 / 0.2); }
.deck-row .deck-num { color: var(--c-surface-dim); }
.deck-row.is-active .deck-num { color: var(--c-primary-fixed); }

.deck-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem;
  border-radius: var(--r);
  background: rgb(227 226 223 / 0.2);
  color: var(--c-surface-bright);
  font-family: var(--font-mono);
  font-size: var(--t-label-md-size);
  letter-spacing: var(--ls-wider);
  font-weight: 700;
  text-transform: uppercase;
}

.deck-cta:hover { background: rgb(227 226 223 / 0.3); }
.deck-cta .icon { width: 18px; height: 18px; }

@media (prefers-reduced-motion: reduce) { .vinyl-disc { animation: none; } }
/* the fest radar version of the deck: a date block where the play button was, and a record that doesn't spin */
.vinyl.is-still .vinyl-disc { animation: none; }
.deck-when { display: flex; align-items: baseline; gap: 0.5rem; color: var(--c-surface-dim); }
.deck-when span { overflow: hidden; text-overflow: ellipsis; }
.deck-when b { flex-shrink: 0; padding: 0.125rem 0.375rem; border-radius: var(--r-sm); background: var(--c-primary-fixed); color: var(--c-on-primary-fixed); white-space: nowrap; }
.deck-row-when { flex-shrink: 0; color: var(--c-surface-dim); white-space: nowrap; }
.deck-row.is-active .deck-row-when { color: var(--c-primary-fixed); }

/* ---- Canteen Radio ------------------------------------------------------
   tag-canteen-radio.hbs (the show), partials/radio-deck.hbs (one episode in an On air box), radio-row.hbs (the list),
   on-air.hbs (homepage). The player skin itself sits with the audio card in content.css. */
.radio-sign {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 0.5rem;
  padding: 0.375rem 0.75rem;
  border-radius: var(--r-full);
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: 0 0 0 4px rgb(180 30 4 / 0.22);
  font-family: var(--font-mono);
  font-size: var(--t-label-sm-size);
  font-weight: 700;
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  white-space: nowrap;
}

.radio-sign.is-lg { padding: 0.5rem 1rem; font-size: var(--t-label-md-size); transform: rotate(-2deg); }
.radio-lamp { width: 0.5rem; height: 0.5rem; flex-shrink: 0; border-radius: 50%; background: var(--c-white); box-shadow: 0 0 0.5rem 0.125rem rgb(255 255 255 / 0.8); animation: lamp 2.4s ease-in-out infinite; }
@keyframes lamp { 50% { opacity: 0.35; box-shadow: none; } }

.radio-deck {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--r-xl);
  background: var(--c-inverse-surface);
  color: var(--c-inverse-on-surface);
  box-shadow: var(--sh-xl);
}

.radio-deck > :not(.radio-vinyl) { position: relative; z-index: 1; }

/* a record in the corner that turns while the episode plays */
.radio-vinyl {
  position: absolute;
  top: -3rem;
  right: -3rem;
  width: 8.5rem;
  height: 8.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: repeating-radial-gradient(circle, #1b1c1a 0 2px, #2c2d2a 2px 4px);
  box-shadow: 0 0 0 1px rgb(227 226 223 / 0.08);
  animation: spin 5s linear infinite paused;
}

.radio-vinyl span, .radio-row-art.is-vinyl span { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: radial-gradient(circle, var(--c-inverse-surface) 0 0.25rem, var(--c-primary) 0.3rem); }
.radio-deck.is-playing .radio-vinyl { animation-play-state: running; }

.radio-deck-head { display: flex; align-items: center; gap: 0.75rem; padding-right: 4.5rem; }
.radio-deck-show { font-family: var(--font-mono); font-size: var(--t-label-sm-size); font-weight: 700; letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--c-primary-fixed); white-space: nowrap; }
.radio-deck-show:hover { text-decoration: underline; }
.radio-deck-meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.radio-deck-date { color: var(--c-surface-dim); }
.radio-deck-title { color: var(--c-inverse-on-surface); }
.radio-deck-title a:hover { color: var(--c-primary-fixed); }
.radio-deck-excerpt { color: var(--c-surface-variant); }
.radio-deck-art { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-lg); background: var(--c-surface-lowest); }
.radio-deck-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

.radio-deck-notes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem;
  border-radius: var(--r);
  background: rgb(227 226 223 / 0.15);
  color: var(--c-surface-bright);
  font-family: var(--font-mono);
  font-size: var(--t-label-md-size);
  letter-spacing: var(--ls-wider);
  font-weight: 700;
  text-transform: uppercase;
}

.radio-deck-notes:hover { background: rgb(227 226 223 / 0.25); }
.radio-deck-notes .icon { width: 18px; height: 18px; }

/* stands in for the player until radio.js lifts it out of the story, at the same size so nothing jumps */
.radio-wait { display: flex; align-items: center; gap: 0.875rem; height: 3.5rem; }
.radio-wait-play { width: 3.5rem; height: 3.5rem; flex-shrink: 0; display: grid; place-items: center; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); opacity: 0.6; }
.radio-wait-play .icon { width: 1.125rem; height: 1.125rem; }
.radio-wait-bar { flex: 1; height: 4px; border-radius: 2px; background: rgb(227 226 223 / 0.25); }

/* the show page */
.radio-hero { display: flex; flex-direction: column; gap: var(--space-sm); padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.radio-hero-title { margin-top: var(--space-sm); }
.radio-ribbon .star { color: var(--c-primary); }
.radio-layout { display: flex; flex-direction: column; gap: var(--space-xl); }
.radio-list { display: flex; flex-direction: column; gap: var(--space-sm); }

.radio-row {
  display: flex;
  gap: 0.875rem;
  padding: 0.875rem;
  border-radius: var(--r-lg);
  background: var(--c-surface-low);
  box-shadow: var(--sh-sm);
  transition: box-shadow var(--dur) var(--ease);
}

.radio-row.is-playing { box-shadow: inset 0 0 0 2px var(--c-primary), var(--sh-sm); }
.radio-row-art { width: 3.5rem; height: 3.5rem; flex-shrink: 0; overflow: hidden; border-radius: var(--r); background: var(--c-surface-high); }
.radio-row-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.radio-row-art.is-vinyl { display: grid; place-items: center; border-radius: 50%; background: repeating-radial-gradient(circle, #1b1c1a 0 2px, #2c2d2a 2px 4px); }
.radio-row-art.is-vinyl span { width: 1.25rem; height: 1.25rem; background: radial-gradient(circle, var(--c-inverse-surface) 0 0.125rem, var(--c-primary) 0.175rem); }
.radio-row.is-playing .radio-row-art.is-vinyl { animation: spin 5s linear infinite; }
.radio-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.radio-row-title a:hover { color: var(--c-primary); }
.radio-row .radio-player { margin-top: var(--space-xs); }

/* the compact player sits on paper, not on the dark deck */
.radio-row .kg-audio-card .kg-audio-current-time { color: var(--c-on-surface); }
.radio-row .kg-audio-card .kg-audio-time { color: var(--c-on-surface-variant); }
.radio-row .kg-audio-card .kg-audio-seek-slider { color: var(--c-primary); }
.radio-row .kg-card.kg-audio-card input[type="range"]::-webkit-slider-runnable-track { background: rgb(27 28 26 / 0.14); }
.radio-row .kg-card.kg-audio-card input[type="range"]::-moz-range-track { background: rgb(27 28 26 / 0.14); }
.radio-row .kg-card.kg-audio-card input[type="range"]::-webkit-slider-thumb { background: var(--c-primary); box-shadow: none; }
.radio-row .kg-card.kg-audio-card input[type="range"]::-moz-range-thumb { background: var(--c-primary); box-shadow: none; }

@media (prefers-reduced-motion: reduce) { .radio-vinyl, .radio-lamp, .radio-row.is-playing .radio-row-art.is-vinyl { animation: none; } }

/* Confessions on the cover */
.confessions .section-head .chip { padding: 0.125rem 0.5rem; }
.post-card.is-sticky { gap: var(--space-xs); box-shadow: var(--sh-md); }
.post-card.is-sticky .card-quote a:hover { color: var(--c-primary); }
.post-card.is-sticky .card-foot .chip { background: var(--c-surface-container); }
.post-card.is-sticky.is-highest .card-foot .chip { background: var(--c-surface-container); }
.post-card.is-sticky.is-container .card-foot .chip,
.post-card.is-sticky.is-low .card-foot .chip { background: var(--c-surface-high); }

/* Subscribe sticker bomb */
.subscribe-box {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--r-2xl);
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: var(--sh-xl);
}

.subscribe-box > *:not(.glow) { position: relative; z-index: 1; }
.subscribe-box .glow { z-index: 0; }
.subscribe-form { display: flex; flex-direction: column; gap: 0.5rem; padding-top: 0.25rem; }

/* generic feed grid (paged index, 404) */
.feed-grid { display: flex; flex-direction: column; gap: var(--space-md); }

/* ---- Article (post / page) --------------------------------------------- */
.article-hero { padding-top: 1.5rem; padding-bottom: 1rem; }
.article-title { margin-bottom: 0.75rem; }
.article-title em { color: var(--c-primary); font-family: var(--font-serif); font-weight: 600; font-style: italic; text-transform: none; letter-spacing: 0; }
.article-standfirst { margin-bottom: 1.5rem; }

.byline-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  padding: 0.75rem;
  border-radius: var(--r-lg);
  background: var(--c-surface-container);
}

.byline-strip .byline-right { align-items: flex-end; text-align: right; flex-shrink: 0; padding-left: 0.5rem; }
.byline-strip .initials.is-lg { color: var(--c-on-primary-fixed); }
.byline-strip .initials.is-lg .icon { width: 22px; height: 22px; }

.article-figure {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--c-surface-dim);
  box-shadow: var(--sh-md);
}

.article-figure-img { width: 100%; height: 20rem; background-size: cover; background-position: center; }

.article-figure-cap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 1rem;
  background: linear-gradient(to top, rgb(48 49 46 / 0.9), transparent 50%);
  color: var(--c-inverse-on-surface);
}

.article-figure-fig { opacity: 0.75; }

.article-body { padding-top: 0.75rem; padding-bottom: 1.5rem; }

.scrawl { padding-top: 1.5rem; padding-bottom: 1.5rem; background: var(--c-surface-high); }

.article-credits { padding-top: 2rem; padding-bottom: 2rem; display: flex; flex-direction: column; gap: 2rem; }

.bio-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.25rem;
  border-radius: var(--r-2xl);
  background: var(--c-surface-container);
}

.bio-card .initials.is-xl .icon { width: 26px; height: 26px; }
.next-feature .post-card { box-shadow: var(--sh-md); }
.next-feature .card-media { height: 11rem; border-radius: 0; }

/* ---- Section page (tag.hbs) -------------------------------------------- */
.section-banner > .row-between { flex-wrap: wrap; gap: 0.5rem; }
.section-banner > .row-between .chip { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.section-banner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  padding-bottom: var(--space-md);
}

.section-title { margin-top: 0.25rem; line-height: 1.05; }

.stat-ribbon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--r);
  background: var(--c-surface-high);
  color: var(--c-on-surface);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: var(--ls-wider);
  font-weight: 600;
  text-transform: uppercase;
  white-space: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
}

.stat-ribbon .star { color: var(--section-accent); }

.section-layout { display: flex; flex-direction: column; }
.section-rail .pill-filter { padding-top: 0.5rem; padding-bottom: 1rem; }

.section-feed { display: flex; flex-direction: column; gap: var(--space-lg); }
.section-feed .post-card.is-polaroid { box-shadow: var(--sh-md); }
.section-feed > .post-card.is-polaroid:first-child .card-media.is-ratio { aspect-ratio: 4 / 5; }
.section-feed .post-card.is-polaroid .card-media.is-ratio { aspect-ratio: 4 / 3; }
.article-title.is-long { font-size: var(--t-display-lg-size); line-height: var(--t-display-lg-lh); letter-spacing: var(--t-display-lg-ls); }
.section-feed .post-card[hidden] { display: none; }

/* Open casting call */
.casting {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  border-radius: var(--r-2xl);
  background: var(--c-inverse-surface);
  color: var(--c-inverse-on-surface);
  box-shadow: var(--sh-xl);
}

.casting > *:not(.glow) { position: relative; z-index: 1; }
.casting .glow { z-index: 0; }

/* ---- City beat --------------------------------------------------------- */
.city-banner { display: flex; flex-direction: column; gap: var(--space-xs); padding-top: var(--space-md); padding-bottom: var(--space-sm); }

.city-block {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  box-shadow: var(--sh-sm);
}

.city-block.is-high { background: var(--c-surface-high); }
.city-block.is-container { background: var(--c-surface-container); }
.city .post-card.is-hero { border-radius: 0; box-shadow: var(--sh-md); }
.city .post-card.is-hero .card-media { height: 20rem; border-radius: 0; }

.critique-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  background: var(--c-surface-lowest);
  box-shadow: var(--sh-sm);
}

.critique-row:hover .t-label-lg { color: var(--c-primary); }

.fit-duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); }
.fit-duo > * { min-width: 0; }

.radar-map {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 12rem;
  padding: var(--space-sm);
  background: var(--c-surface-highest) center / cover no-repeat;
  box-shadow: var(--sh-sm);
}

.radar-map-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgb(27 28 26 / 0.9);
  color: var(--c-surface);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.outpost {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-sm);
  background: var(--c-surface);
  box-shadow: var(--sh-sm);
}

.outpost-icon {
  width: 2.5rem;
  height: 2.5rem;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  background: rgb(180 30 4 / 0.1);
  color: var(--c-primary);
}

.outpost:hover .t-label-lg { color: var(--c-primary); }

.bureau-callout {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--c-primary);
  color: var(--c-on-primary);
  box-shadow: var(--sh-lg);
}

.bureau-watermark {
  position: absolute;
  right: -2rem;
  bottom: -2.5rem;
  font-family: var(--font-display);
  font-size: 140px;
  line-height: 1;
  font-weight: 800;
  text-transform: uppercase;
  opacity: 0.1;
  user-select: none;
  pointer-events: none;
}

/* ---- Fests ------------------------------------------------------------- */
.fests .pill-filter { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.post-card.is-fest { box-shadow: var(--sh-md); }
.post-card.is-fest.is-ink { box-shadow: var(--sh-xl); }
.post-card.is-fest .card-media { height: 12rem; border-radius: 0; }
.post-card.is-fest .card-media.is-taller { height: 22rem; }
.post-card.is-fest .card-media img { filter: contrast(1.1); }
.post-card.is-fest .fest-badges { position: absolute; top: 0.75rem; left: 0.75rem; display: flex; gap: 0.25rem; z-index: 2; }
.post-card.is-fest .fest-title-row {
  position: absolute;
  left: 0.75rem;
  right: 0.75rem;
  bottom: 0.75rem;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.5rem;
  color: #fff;
}
.post-card.is-fest .fest-title-row .card-title { color: #fff; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin-top: 0.125rem; font-size: var(--t-headline-md-size); line-height: 1.05; }
.post-card.is-fest.is-ink .fest-title-row .card-title { font-size: var(--t-headline-lg-size); }
.post-card.is-fest .fest-title-row > span:first-child { min-width: 0; }
.post-card.is-fest .fest-date { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex-shrink: 0; }
.post-card.is-fest .lineup { display: flex; flex-direction: column; gap: 0.375rem; padding: var(--space-sm); border-radius: var(--r-lg); background: rgb(227 226 223 / 0.1); }
.post-card.is-fest:not(.is-ink) .lineup { background: var(--c-surface-low); }
.post-card.is-fest:not(.is-ink) .lineup .t-label-sm { color: var(--c-primary) !important; }
.post-card.is-fest:not(.is-ink) .lineup .chip { background: var(--c-surface-high); color: var(--c-on-surface); }
.post-card.is-fest.is-ink .lineup .chip { color: #fff; }
.post-card.is-fest .card-body { gap: var(--space-md); }
.post-card.is-fest .fest-save { width: 2.75rem; height: 2.75rem; border-radius: var(--r-lg); background: rgb(227 226 223 / 0.2); color: inherit; }
.post-card.is-fest:not(.is-ink) .fest-save { background: var(--c-surface-container); }
.post-card.is-fest .card-excerpt { color: var(--c-surface-highest); }
.post-card.is-fest:not(.is-ink) .card-excerpt { color: var(--c-on-surface-variant); }

.month-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-family: var(--font-display);
  font-size: var(--t-headline-md-size);
  letter-spacing: var(--ls-tight);
  font-weight: 800;
  text-transform: uppercase;
}

.month-divider::after { content: ""; flex: 1; height: 2px; background: var(--c-on-surface); }
.month-divider .chip { background: var(--c-lime); color: var(--c-on-surface); }

/* ---- Profile (author) -------------------------------------------------- */
.profile-card { gap: 0; }
.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
  padding: 0.75rem;
  text-align: center;
  background: var(--c-surface-high);
}
.profile-feed .post-card.is-polaroid.is-square { box-shadow: var(--sh-md); }
.profile-feed .post-card.is-polaroid.is-square .card-media { height: 12rem; aspect-ratio: auto; }
.profile-feed .post-card.is-polaroid.is-square .card-body { padding: var(--space-md); }

/* ---- Pitch desk -------------------------------------------------------- */
.manifesto {
  position: relative;
  overflow: hidden;
  padding: var(--space-md);
  background: var(--c-surface-low);
  box-shadow: var(--sh-sm);
}

.manifesto-num {
  position: absolute;
  right: -0.75rem;
  bottom: -1rem;
  font-family: var(--font-display);
  font-size: 72px;
  line-height: 1;
  font-weight: 800;
  color: var(--c-surface-highest);
  opacity: 0.3;
  user-select: none;
  pointer-events: none;
}

.desk-grid { display: flex; flex-direction: column; gap: var(--space-md); }

.desk {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  background: var(--c-surface-container);
  box-shadow: var(--sh-sm);
  transition: transform var(--dur) var(--ease);
}

.desk:hover { transform: translate(-2px, -2px); box-shadow: var(--sh-hard); }

.console { padding: var(--space-md); background: var(--c-surface-low); box-shadow: var(--sh-md); }
.console { scroll-margin-top: calc(var(--header-compact-h) + var(--space-sm)); }
.pitch-apply-row { margin-top: var(--space-xs); }
.pitch-apply-row .pitch-alt { text-align: center; }
.pitch-alt { display: block; text-decoration: underline; text-underline-offset: 3px; }
.pitch-final { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-sm); padding: var(--space-lg) var(--space-md); background: var(--c-inverse-surface); color: var(--c-inverse-on-surface); box-shadow: var(--sh-lg); }
.pitch-final h2 { color: inherit; text-transform: uppercase; }
.pitch-final-kicker { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--c-primary-fixed); }
.pitch-final-btn { min-width: 14rem; margin-top: var(--space-xs); }
.console-steps li { display: flex; flex-direction: column; gap: 0.25rem; padding: var(--space-sm); background: var(--c-surface-lowest); box-shadow: var(--sh-inner); }

.masthead-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xs); }
.staff { display: flex; flex-direction: column; padding: var(--space-xs); background: var(--c-surface-container); box-shadow: var(--sh-sm); min-width: 0; }
.staff-photo { width: 100%; height: 6rem; margin-bottom: 0.25rem; background: var(--c-surface-highest); overflow: hidden; }
.staff-photo img { width: 100%; height: 100%; object-fit: cover; }
.staff .staff-name { font-size: 14px; line-height: 1.25; }
.staff .staff-count { font-size: 10px; }

/* ---- Vault ------------------------------------------------------------- */
.drop-card .polaroid-frame { aspect-ratio: 4 / 3; }
.catalogue .post-card.is-row .card-thumb { width: 6rem; height: 8rem; }

/* ---- Errors ------------------------------------------------------------ */
.error-page .error-stack ul { list-style: none; }
.error-page .error-stack li + li { margin-top: 0.5rem; }

/* ==========================================================================
   Tablet ≥ 768px
   ========================================================================== */
@media (min-width: 768px) {
  .feed-grid,
  .drop-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .drop-grid > :first-child { grid-column: 1 / -1; }
  .section-feed { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
  .section-feed > :first-child,
  .section-feed > .pagination { grid-column: 1 / -1; }
  .desk-grid { display: grid; grid-template-columns: 1fr 1fr; }
  .cover-card { min-height: 640px; }
  .article-figure-img { height: 28rem; }
  .masthead-grid { grid-template-columns: repeat(3, 1fr); }
  .staff-photo { height: 10rem; }
}


/* ==========================================================================
   Drip section page (partials/drip.hbs): the "Campus fit check" screens.
   Phone first; the desktop grid from the 1440 screen starts at 1024px.
   ========================================================================== */
.drip { padding-bottom: var(--space-xl); }
.drip-band { width: 100%; max-width: 1440px; margin: 0 auto; padding: 0 var(--margin); }
.drip-head { padding-top: var(--space-lg); }
.drip-head-chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-sm); }
.drip-head-row { display: flex; flex-direction: column; gap: var(--space-md); }
.drip-title a { color: inherit; }
.drip-title-accent a { color: var(--c-primary); font-style: italic; }
.drip-title-accent .dk-split-sub { display: inline; margin: 0; color: var(--c-on-surface); font: inherit; font-style: normal; letter-spacing: inherit; text-transform: inherit; }
.drip-standfirst { max-width: 40rem; margin-top: var(--space-sm); font-family: var(--font-serif); font-size: var(--t-body-lg-size, 18px); line-height: 1.5; color: var(--c-on-surface-variant); }
.drip-stickers { display: flex; flex-wrap: wrap; gap: var(--space-xs); }

.drip-filterbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); margin-top: var(--space-lg); padding: var(--space-xs) var(--space-sm); background: var(--c-surface-low); border-radius: var(--r-lg); }
.drip-filterbar .pill-filter { flex: 1; min-width: 0; }
.drip-filter-note { display: none; align-items: center; gap: var(--space-xs); flex-shrink: 0; font-family: var(--font-mono); font-size: var(--t-label-sm-size); letter-spacing: var(--t-label-sm-ls); text-transform: uppercase; color: var(--c-on-surface-variant); }

.drip-kicker { display: flex; justify-content: space-between; gap: var(--space-md); margin: var(--space-xl) 0 var(--space-sm); font-family: var(--font-mono); font-size: var(--t-label-sm-size); letter-spacing: var(--ls-widest); text-transform: uppercase; color: var(--c-on-surface-variant); }
.drip-kicker b { color: var(--c-primary); }
.drip-kicker > span + span { display: none; }
.drip-h2 em { font-style: italic; color: var(--c-primary); }
.drip-h2 em.is-pink { color: var(--c-tertiary); }

/* lookbook cards */
.drip-looks, .drip-spots, .drip-more { display: grid; gap: var(--gutter); }
.drip-look, .drip-spot { display: flex; flex-direction: column; background: var(--c-surface-lowest); border-radius: var(--r); box-shadow: var(--sh-sm); overflow: hidden; }
.drip-look[hidden], .drip-spot[hidden], .drip-frame[hidden] { display: none; }
.drip-look-media { position: relative; display: block; aspect-ratio: 3 / 4; background: var(--c-surface-high); overflow: hidden; }
.drip-look-media img { width: 100%; height: 100%; object-fit: cover; }
.drip-look-stickers { position: absolute; top: var(--space-sm); left: var(--space-sm); display: flex; flex-direction: column; align-items: flex-start; gap: 0.25rem; }
.drip-look-total { position: absolute; right: var(--space-sm); bottom: var(--space-sm); padding: 0.25rem 0.5rem; border-radius: var(--r); background: var(--c-inverse-surface); color: var(--c-surface-lowest); font-family: var(--font-mono); font-size: var(--t-label-sm-size); letter-spacing: var(--t-label-sm-ls); font-weight: 700; text-transform: uppercase; }
.drip-look-body { display: flex; flex-direction: column; gap: var(--space-sm); flex: 1; padding: var(--space-md) var(--space-md) var(--space-sm); }
.drip-look-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-sm); }
.drip-look-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.15; text-transform: uppercase; letter-spacing: -0.01em; }
.drip-look-title a, .drip-spot-title a { color: inherit; }
.drip-look-campus { flex-shrink: 0; font-family: var(--font-mono); font-size: var(--t-label-sm-size); letter-spacing: var(--t-label-sm-ls); font-weight: 700; text-transform: uppercase; color: var(--c-primary); }
.drip-spec { display: grid; gap: 2px; margin: 0; padding: 0; list-style: none; }
.drip-spec li { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 0.3rem 0.5rem; background: var(--c-surface-low); font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; }
.drip-spec span { color: var(--c-on-surface-variant); }
.drip-spec b { font-weight: 600; color: var(--c-on-surface); text-align: right; }
.drip-look-quote { font-family: var(--font-serif); font-style: italic; font-size: 0.9375rem; line-height: 1.5; color: var(--c-on-surface-variant); }
.drip-look-foot, .drip-spot-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); margin-top: auto; font-family: var(--font-mono); font-size: var(--t-label-sm-size); letter-spacing: var(--t-label-sm-ls); text-transform: uppercase; color: var(--c-on-surface-variant); }
.drip-look-foot { padding: 0.5rem; border-radius: var(--r); background: var(--c-surface-low); }
.drip-look-foot > span { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; }
.drip-look-foot a, .drip-spot-foot a { flex-shrink: 0; font-weight: 700; color: var(--c-primary); }

/* stats strip */
.drip-statband { margin-top: var(--space-xl); padding: var(--space-lg) 0; background: var(--c-surface-container); }
.drip-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: var(--gutter); }
.drip-stat { padding: var(--space-md); background: var(--c-surface-lowest); }
.drip-stat[hidden] { display: none; }
.drip-stat span { display: block; font-family: var(--font-mono); font-size: var(--t-label-sm-size); letter-spacing: var(--t-label-sm-ls); font-weight: 700; text-transform: uppercase; color: var(--c-primary); }
.drip-stat b { display: block; margin: 0.25rem 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 2.2vw, 2.25rem); line-height: 1.1; text-transform: uppercase; overflow-wrap: break-word; }
.drip-stat p { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.4; color: var(--c-on-surface-variant); }

/* field manual cards, numbered 01–03 by a counter (Ghost's @number keeps counting from post 4) */
.drip-spots { counter-reset: drip-spot; }
.drip-spot { gap: var(--space-sm); padding: var(--space-md); }
.drip-spot-top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-sm); }
.drip-spot-num::before { counter-increment: drip-spot; content: counter(drip-spot, decimal-leading-zero); font-family: var(--font-display); font-weight: 800; font-size: 3rem; line-height: 0.9; color: var(--c-primary-fixed-dim); }
.drip-spot-chip { background: var(--c-primary); color: var(--c-on-primary); }
.drip-spot:nth-child(2) .drip-spot-chip { background: var(--c-tertiary); }
.drip-spot-title { font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1.15; text-transform: uppercase; letter-spacing: -0.01em; }
.drip-spot-place { font-family: var(--font-mono); font-size: var(--t-label-sm-size); letter-spacing: var(--t-label-sm-ls); text-transform: uppercase; color: var(--c-on-surface-variant); }
.drip-spot-media { display: block; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--c-surface-high); }
.drip-spot-media img { width: 100%; height: 100%; object-fit: cover; }
.drip-spot-text { font-family: var(--font-serif); font-size: 0.9375rem; line-height: 1.5; color: var(--c-on-surface-variant); }
.drip-spot-box { display: grid; gap: 0.3rem; margin: 0; padding: 0.6rem 0.75rem; border-radius: var(--r); background: var(--c-surface-low); font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.4; }
.drip-spot-box div { display: grid; grid-template-columns: 4.25rem 1fr; gap: var(--space-xs); }
.drip-spot-box dt { font-weight: 700; text-transform: uppercase; color: var(--c-primary); }
.drip-spot-box dd { margin: 0; color: var(--c-on-surface); }

/* photo essay */
.drip-essay { display: grid; gap: var(--gutter); }
.drip-frame { position: relative; display: block; min-height: 20rem; border-radius: var(--r); overflow: hidden; background: var(--c-inverse-surface); color: var(--c-surface-lowest); }
.drip-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.drip-frame-label { position: absolute; top: var(--space-sm); right: var(--space-sm); max-width: 70%; padding: 0.25rem 0.5rem; border-radius: var(--r); background: var(--c-surface-lowest); color: var(--c-on-surface); font-family: var(--font-mono); font-size: var(--t-label-sm-size); letter-spacing: var(--t-label-sm-ls); font-weight: 700; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drip-frame-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 0.375rem; padding: var(--space-md); }
.drip-frame-cap b { font-family: var(--font-serif); font-weight: 700; font-size: 1.5rem; line-height: 1.15; }
.drip-frame-cap > span:not(.chip) { font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.4; }
.drip-frame:first-child .drip-frame-label { display: none; }
.drip-frame:first-child::after { content: ""; position: absolute; inset: 20% 0 0; background: linear-gradient(to top, rgb(27 28 26 / 0.92), transparent); }
.drip-frame:first-child .drip-frame-cap { z-index: 1; }
.drip-frame:not(:first-child) .drip-frame-cap { padding: var(--space-sm); }
.drip-frame:not(:first-child) .drip-frame-cap .chip { background: var(--c-inverse-surface); color: var(--c-surface-lowest); }
.drip-frame:not(:first-child) .drip-frame-cap > :not(.chip) { display: none; }
.drip-quote { display: flex; flex-direction: column; gap: var(--space-xs); margin: var(--gutter) 0 0; padding: var(--space-md) var(--space-md) var(--space-md) 2.5rem; position: relative; border-radius: var(--r); background: var(--c-surface-low); }
.drip-quote::before { content: "\201C"; position: absolute; left: var(--space-md); top: 0.6rem; font-family: var(--font-serif); font-size: 2rem; color: var(--c-primary); }
.drip-quote p { font-family: var(--font-serif); font-style: italic; font-size: 1.125rem; line-height: 1.45; }
.drip-quote cite { font-style: normal; font-family: var(--font-mono); font-size: var(--t-label-sm-size); letter-spacing: var(--t-label-sm-ls); text-transform: uppercase; color: var(--c-on-surface-variant); }
.drip-more:empty { display: none; }

/* submit your fit */
.drip-submit { display: grid; gap: var(--space-lg); margin-top: var(--space-xl); padding: var(--space-lg) var(--space-md); border-radius: var(--r); background: linear-gradient(160deg, var(--c-inverse-surface) 55%, #4a1d2c); color: var(--c-inverse-on-surface); box-shadow: var(--sh-xl); }
.drip-submit-kicker { display: inline-flex; align-items: center; gap: var(--space-xs); font-family: var(--font-mono); font-size: var(--t-label-sm-size); letter-spacing: var(--ls-widest); font-weight: 700; text-transform: uppercase; }
.drip-submit-title { margin: var(--space-sm) 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 6vw, 5.25rem); line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase; color: var(--c-surface-lowest); }
.drip-submit-copy > p { font-family: var(--font-serif); font-size: 1.125rem; line-height: 1.5; }
.drip-submit-copy ul { display: grid; gap: 0.5rem; margin: var(--space-md) 0; padding: 0; list-style: none; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; }
.drip-submit-copy li { display: flex; align-items: center; gap: 0.5rem; }
.drip-submit-copy p.drip-submit-foot { font-family: var(--font-mono); font-size: var(--t-label-sm-size); letter-spacing: var(--t-label-sm-ls); text-transform: uppercase; color: var(--c-surface-variant); }
.drip-form { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-md); border-radius: var(--r); background: var(--c-surface-lowest); color: var(--c-on-surface); }
.drip-form-head { display: flex; justify-content: space-between; gap: var(--space-sm); padding: 0.4rem 0.6rem; background: var(--c-surface-low); font-family: var(--font-mono); font-size: var(--t-label-sm-size); letter-spacing: var(--t-label-sm-ls); text-transform: uppercase; color: var(--c-outline); }
.drip-form-head span:first-child { color: var(--c-primary); font-weight: 700; }
.drip-form label { display: flex; flex-direction: column; gap: 0.3rem; font-family: var(--font-mono); font-size: var(--t-label-sm-size); letter-spacing: var(--t-label-sm-ls); font-weight: 700; text-transform: uppercase; color: var(--c-on-surface-variant); }
.drip-form input, .drip-form textarea { width: 100%; padding: 0.6rem 0.7rem; border: 0; border-radius: var(--r); background: var(--c-surface-low); color: var(--c-on-surface); font-family: var(--font-mono); font-size: 0.875rem; letter-spacing: 0; text-transform: none; font-weight: 400; resize: vertical; }
.drip-form input:focus-visible, .drip-form textarea:focus-visible { outline: 2px solid var(--c-primary); outline-offset: 1px; }
.drip-form-drop { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; padding: var(--space-md); border-radius: var(--r); background: var(--c-surface-low); text-align: center; font-family: var(--font-mono); font-size: var(--t-label-sm-size); text-transform: uppercase; color: var(--c-on-surface-variant); }
.drip-form-drop .icon { color: var(--c-primary); }
.drip-form-drop b { color: var(--c-on-surface); }
.drip-form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm); font-family: var(--font-mono); font-size: var(--t-label-sm-size); text-transform: uppercase; color: var(--c-outline); }
.drip-form.is-cta p { font-family: var(--font-serif); font-size: 1.0625rem; line-height: 1.5; }
.drip-form .dk-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.75rem 1.25rem; border: 0; border-radius: var(--r); background: var(--c-primary); color: var(--c-on-primary); font-family: var(--font-mono); font-size: var(--t-label-md-size); letter-spacing: var(--t-label-md-ls); font-weight: 700; text-transform: uppercase; cursor: pointer; }

@media (min-width: 640px) {
  .drip-looks, .drip-spots, .drip-more { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drip-form { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .drip-form .is-wide, .drip-form-head { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .drip-head { padding-top: var(--space-xl); }
  .drip-head-row { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  .drip-head-copy { max-width: 60rem; }
  .drip-stickers { flex-direction: column; align-items: flex-end; flex-shrink: 0; padding-bottom: var(--space-sm); }
  .drip-filter-note { display: inline-flex; }
  .drip-kicker > span + span { display: inline; }
  .drip-looks, .drip-spots, .drip-more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .drip-essay { grid-template-columns: 7fr 5fr; grid-auto-rows: 15rem; }
  .drip-frame { min-height: 0; }
  .drip-frame:first-child::after { inset: 40% 0 0; }
  .drip-frame:first-child { grid-row: span 2; }
  .drip-frame:only-child { grid-column: 1 / -1; }
  .drip-quote { flex-direction: row; align-items: center; justify-content: space-between; }
  .drip-submit { grid-template-columns: 5fr 6fr; gap: var(--space-xl); padding: var(--space-xl); }
}
.article-hero .radio-deck { margin-top: var(--space-md); margin-bottom: var(--space-sm); }
.deck-now .deck-title.is-clamp-2 { font-size: 1.25rem; line-height: 1.2; }