/** Shopify CDN: Minification failed

Line 21:0 Unexpected "{"
Line 21:1 Expected identifier but found "%"
Line 21:25 Unexpected "33"
Line 24:69 Unterminated string token
Line 26:70 Expected identifier but found "%"

**/
/* ================================================================
   LIVEFAST ECOSYSTEM — Extended Feature Styles
   Loaded globally via theme.liquid after theme.css
   Covers: global nav MORE dropdown · FM page · FM widget · culture studio
   All values use existing theme.css CSS variables.
================================================================ */

/* ================================================================
   GLOBAL NAV — MORE DROPDOWN
================================================================ */
.nav-more-wrap { position: relative; }
{% comment %} CHECKPOINT 33 — was a text button "MORE ▾". Same element,
  same id, same JS binding (lf-ecosystem.js toggles .open — untouched)
  — only the visual language changed, to a quiet 3-line glyph instead
  of a labeled menu button. Doesn't read as "menu" at a glance; still
  a real <button> with aria-label="More", aria-expanded, keyboard-
  operable — nothing lost for accessibility, only the obviousness. {% endcomment %}
.nav-more-btn.nav-line-glyph {
  background: none; border: none; cursor: pointer;
  display: flex; align-items: flex-end; gap: 3px;
  height: 18px; padding: 4px 6px;
}
.nav-line-glyph .nav-line {
  display: block; width: 1.5px; background: var(--ink-faint);
  transition: height .3s var(--ease-out), background .25s var(--ease), transform .3s var(--ease-out);
}
.nav-line-glyph .nav-line:nth-child(1) { height: 8px; }
.nav-line-glyph .nav-line:nth-child(2) { height: 14px; }
.nav-line-glyph .nav-line:nth-child(3) { height: 6px; }
.nav-more-btn.nav-line-glyph:hover .nav-line,
.nav-more-btn.nav-line-glyph.open .nav-line { background: var(--accent); }
.nav-more-btn.nav-line-glyph:hover .nav-line:nth-child(1),
.nav-more-btn.nav-line-glyph.open .nav-line:nth-child(1) { height: 14px; }
.nav-more-btn.nav-line-glyph:hover .nav-line:nth-child(2),
.nav-more-btn.nav-line-glyph.open .nav-line:nth-child(2) { height: 8px; }
.nav-more-btn.nav-line-glyph:hover .nav-line:nth-child(3),
.nav-more-btn.nav-line-glyph.open .nav-line:nth-child(3) { height: 16px; }
.nav-more-btn.nav-line-glyph:active { transform: scale(.92); transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) {
  .nav-line-glyph .nav-line { transition: background .25s var(--ease); }
}
.nav-more-dropdown {
  position: absolute; top: calc(100% + 14px); right: 0;
  min-width: 190px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px;
  padding: 8px;
  display: flex; flex-direction: column; gap: 2px;
  box-shadow: 0 12px 32px rgba(0,0,0,.14);
  opacity: 0; visibility: hidden; transform: translateY(-6px) scale(.98);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s linear .25s;
  z-index: 1100;
}
.nav-more-dropdown.open {
  opacity: 1; visibility: visible; transform: translateY(0) scale(1);
  transition: opacity .25s var(--ease-out), transform .25s var(--ease-out), visibility 0s;
}
.nav-more-link {
  font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-faint); text-decoration: none;
  padding: 9px 12px; border-radius: 8px;
  display: flex; align-items: center; gap: 6px;
  transition: background .18s var(--ease), color .18s var(--ease), transform .18s var(--ease-out), padding-left .18s var(--ease-out);
}
.nav-more-link:hover { background: var(--paper); color: var(--ink); transform: translateX(2px); }
.nav-more-link:active { transform: translateX(2px) scale(.97); transition-duration: .1s; }
.nav-more-sep { height: 1px; background: var(--line); margin: 6px 4px; }
.nav-more-subtle { opacity: .55; font-size: .6rem; }
.nav-more-subtle:hover { opacity: 1; }
@media (max-width: 900px) {
  .nav-more-wrap { display: none; } /* MORE items live in the mobile drawer instead */
}

/* ================================================================
   FM PAGE  /pages/fm
   Forced dark atmosphere — all FM vars are self-contained
================================================================ */
.fm-page {
  background: #000; color: #f0ede8;
  min-height: 100vh;
  --fm-accent: #e63946;
  --fm-green:  #00ff88;
  --fm-line:   rgba(255,255,255,.08);
  --fm-soft:   rgba(255,255,255,.45);
  --fm-faint:  rgba(255,255,255,.22);
}

/* override paper/surface for FM dark atmosphere */
.fm-page .site-nav.scrolled { background: rgba(0,0,0,.92); border-bottom-color: var(--fm-line); }
.fm-page .site-nav          { border-bottom: 1px solid var(--fm-line); }
.fm-page footer { background: #000; border-top-color: var(--fm-line); }

/* ── FM HERO ── */
.fm-hero {
  padding: calc(var(--nav-h) + 60px) 32px 0;
  text-align: center; position: relative;
}
.fm-live-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fm-accent); margin-bottom: 28px;
}
.fm-live-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--fm-accent);
  box-shadow: 0 0 0 0 rgba(230,57,70,.5);
  animation: fmPulse 1.4s ease-in-out infinite;
}
@keyframes fmPulse {
  0%   { box-shadow: 0 0 0 0 rgba(230,57,70,.5); }
  70%  { box-shadow: 0 0 0 8px rgba(230,57,70,0); }
  100% { box-shadow: 0 0 0 0 rgba(230,57,70,0); }
}
/* CORRECTION (checkpoint 11): the frequency numeral was the loudest
   thing on the page (up to 13rem — bigger than any headline anywhere
   else in the theme) while the actual station name sat small below
   it. Brief says "reduce emphasis on the frequency number — FM
   itself should be the hero." Numeral is now a compact supporting
   badge; .fm-station-name (below) carries the hero weight instead,
   sized in line with .page-top h1 elsewhere in the theme. */
.fm-freq-badge {
  display: inline-flex; align-items: baseline; gap: 6px;
  font-family: var(--font-mono); font-weight: 500;
  font-size: clamp(1.3rem, 2.6vw, 1.7rem);
  letter-spacing: -.01em; color: var(--fm-soft);
  margin-bottom: 20px;
}
.fm-freq-badge .fm-freq-unit-inline {
  font-size: .55em; letter-spacing: .1em; color: var(--fm-faint);
}
.fm-station-name {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 3.1rem);
  letter-spacing: -.01em; text-transform: uppercase;
  line-height: 1.05; color: #fff; margin-top: 0;
}
.fm-tagline {
  font-family: var(--font-body); font-size: clamp(.9rem, 1.8vw, 1.1rem);
  color: var(--fm-soft); margin-top: 10px; letter-spacing: .02em;
}

/* ── ENTER GATE (homepage only, single Enter button) ──
   Rebuilt (C7): logo-as-hero, deeper whitespace, blur→focus reveal on
   the mark itself (not just a rise), ambient glow drifts toward the
   cursor via JS (desktop only), staggered blur-out on exit instead of
   a flat fade. All motion collapses under prefers-reduced-motion. */
.gate-screen {
  position: fixed; inset: 0; z-index: 8500;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--paper);
  overflow: hidden;
  transition: opacity .8s var(--ease), filter .8s var(--ease), transform .8s var(--ease);
}
/* checkpoint 18 — refresh/flash bug fix: paired with the synchronous
   <head> script in layout/theme.liquid. Returning visitors get this
   class on <html> before the gate is ever painted, so it never
   flashes in and out on refresh. First-time visitors never get this
   class, so the gate still paints and behaves exactly as before. */
html.lf-skip-gate .gate-screen { display: none !important; }
.gate-screen.leaving {
  opacity: 0; filter: blur(14px); transform: scale(1.04);
  pointer-events: none;
}
.gate-inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 32px;
  padding: 0 24px;
}
/* faint hairline grid — reads as "product," not "poster" */
.gate-grid {
  position: absolute; inset: 0; z-index: 0; opacity: .5;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 64px 64px;
  -webkit-mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 75%);
  mask-image: radial-gradient(ellipse 60% 55% at 50% 50%, #000 0%, transparent 75%);
}
.gate-glow {
  position: absolute; top: 50%; left: 50%; z-index: 0;
  width: min(70vw, 640px); height: min(70vw, 640px);
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, var(--accent-wash) 0%, transparent 68%);
  opacity: 0;
  animation: gateGlowIn 1.6s var(--ease-out) forwards .1s,
             gateGlowBreathe 6s ease-in-out infinite 1.7s;
  transition: transform .6s var(--ease-out);
}
@keyframes gateGlowIn { to { opacity: .55; } }
@keyframes gateGlowBreathe {
  0%, 100% { opacity: .4; transform: translate(-50%, -50%) scale(1); }
  50%      { opacity: .65; transform: translate(-50%, -50%) scale(1.08); }
}
.gate-seq {
  opacity: 0; transform: translateY(14px);
  animation: gateSeqIn .9s var(--ease-out) forwards;
  animation-delay: var(--seq-d, 0s);
}
@keyframes gateSeqIn { to { opacity: 1; transform: translateY(0); } }
.gate-sub {
  font-family: var(--font-mono); font-size: .64rem; letter-spacing: .3em;
  text-transform: uppercase; color: var(--ink-faint);
}
/* the logo IS the hero — sized like one, revealed like one.
   checkpoint 18: resting opacity nudged to .94 (was 1) — "logo
   slightly lighter" per brief — everything else about the reveal
   (blur-in, scale-in, timing) is unchanged. */
.gate-logo {
  width: clamp(220px, 30vw, 420px); height: auto;
  filter: blur(10px);
  opacity: .94;
  animation: gateLogoIn 1.1s var(--ease-out) forwards;
  animation-delay: var(--seq-d, 0s);
}
@keyframes gateLogoIn {
  0%   { opacity: 0; filter: blur(10px); transform: translateY(14px) scale(1.03); }
  100% { opacity: .94; filter: blur(0);    transform: translateY(0) scale(1); }
}
.gate-enter-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  padding: 15px 46px; border: 1px solid var(--ink); border-radius: var(--r-pill);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.gate-enter-label { position: relative; z-index: 1; }
/* quiet pulse ring — invites the click without shouting */
.gate-enter-ring {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  border: 1px solid var(--ink); opacity: 0; pointer-events: none;
  animation: gateRingPulse 2.8s var(--ease-out) infinite 1.4s;
}
@keyframes gateRingPulse {
  0%   { opacity: .45; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}
.gate-enter-btn:hover { background: var(--ink); color: var(--paper); box-shadow: var(--shadow-md); }
.gate-enter-btn:hover .gate-enter-ring { animation-play-state: paused; opacity: 0; }
.gate-enter-btn:active { transform: scale(.94) !important; transition-duration: .1s; }
/* staggered exit: logo blurs/lifts a beat before the sub + button,
   so the mark itself feels like it's "opening" into the site rather
   than the whole screen just cutting to black */
.gate-screen.leaving .gate-logo { transition: opacity .5s var(--ease), filter .5s var(--ease), transform .5s var(--ease); opacity: 0; filter: blur(16px); transform: scale(1.06) translateY(-6px); }
.gate-screen.leaving .gate-sub,
.gate-screen.leaving .gate-enter-btn { transition: opacity .4s var(--ease) .1s, transform .4s var(--ease) .1s; opacity: 0; transform: translateY(8px); }
body.gate-open { overflow: hidden; }

/* ── CULTURE ECOSYSTEM QUICK LINKS (homepage only — distinct from
   Jaydo's compact .lnk pills: larger tiles, more premium/integrated) ── */
.eco-links-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px; max-width: var(--container-lg); margin: 0 auto; padding: 0 32px;
}
.eco-link-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 28px 24px 24px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); text-decoration: none; position: relative;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.eco-link-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }
/* CORRECTION (checkpoint 12): icons here were literal unicode glyphs
   (▶ ◉ ◆ etc.) with no aria-hidden, which screen readers can announce
   as noise, and which don't match the real SVG icon system used
   everywhere else (e.g. the JAYDO links list). Swapped to the same
   svg+aria-hidden pattern. */
/* CORRECTION (checkpoint 14): flat icon read a little static for a
   "software navigation" tile — added a soft chip backdrop (common in
   Linear/Arc-style nav) that deepens gently on hover, plus a small
   arrow that slides in from the right on hover so the tile reads as
   "this takes you somewhere" without adding any new motion class or
   extra markup. */
.eco-link-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: var(--r-md);
  background: var(--accent-wash); color: var(--accent-text);
  transition: background .35s var(--ease-out), transform .35s var(--ease-out);
}
.eco-link-card:hover .eco-link-icon { background: var(--accent-text); color: #fff; transform: scale(1.06); }
.eco-link-icon svg { width: 20px; height: 20px; fill: currentColor; }
.eco-link-title { font-family: var(--font-display); font-weight: 700; font-size: .98rem; color: var(--ink); text-transform: uppercase; letter-spacing: .01em; }
.eco-link-sub { font-family: var(--font-mono); font-size: .66rem; color: var(--ink-soft); letter-spacing: .02em; line-height: 1.5; }
.eco-link-arrow {
  position: absolute; top: 26px; right: 22px;
  width: 16px; height: 16px; color: var(--ink-faint);
  opacity: 0; transform: translate(-6px, 6px); pointer-events: none;
  transition: opacity .3s var(--ease-out), transform .3s var(--ease-out);
}
.eco-link-card:hover .eco-link-arrow { opacity: 1; transform: translate(0, 0); }
.eco-link-arrow svg { width: 100%; height: 100%; fill: currentColor; }

/* ── eco-link media variant (C7): real cover photo, dark scrim,
   overlaid label — used only where a real on-theme asset exists
   (Videos/Jaydo/Shop). Rest of the grid keeps the flat icon style. ── */
.eco-link-card--media {
  position: relative; min-height: 200px; justify-content: flex-end;
  background-size: cover; background-position: center;
  border: none; overflow: hidden;
}
.eco-link-card--media::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.72) 100%);
  transition: background .35s var(--ease-out);
}
.eco-link-card--media:hover::before { background: linear-gradient(180deg, rgba(0,0,0,.1) 25%, rgba(0,0,0,.82) 100%); }
.eco-link-card--media .eco-link-icon,
.eco-link-card--media .eco-link-title,
.eco-link-card--media .eco-link-sub,
.eco-link-card--media .eco-link-arrow { position: relative; z-index: 1; }
.eco-link-card--media .eco-link-icon { color: #fff; background: rgba(255,255,255,.16); backdrop-filter: blur(6px); }
.eco-link-card--media:hover .eco-link-icon { background: rgba(255,255,255,.28); }
.eco-link-card--media .eco-link-title { color: #fff; }
.eco-link-card--media .eco-link-sub { color: rgba(255,255,255,.75); }
.eco-link-card--media .eco-link-arrow { color: rgba(255,255,255,.85); }

/* ── eco-link numeral variant: FM's own frequency as a giant faint
   watermark instead of a fabricated photo — real brand asset, not
   invented imagery. ── */
.eco-link-card--numeral { position: relative; overflow: hidden; }
.eco-link-card--numeral::after {
  content: attr(data-numeral);
  position: absolute; right: -6px; bottom: -22px; z-index: 0;
  font-family: var(--font-display); font-weight: 900; font-size: 4.6rem;
  color: var(--accent-text); opacity: .1; line-height: 1; pointer-events: none;
}
.eco-link-card--numeral > * { position: relative; z-index: 1; }

/* ── eco-link Discord variant (checkpoint 20): flat-icon card like
   Shop/Creatives/Contact, just tinted with Discord's real brand
   blurple on hover instead of the shared accent-pink — same idiom
   as .vid-tag.instagram/.vid-tag.youtube already use for their own
   brand colors, applied here for the first time to an eco-link tile. ── */
.eco-link-card--discord .eco-link-icon { background: var(--discord-wash); color: var(--discord-text); position: relative; }
.eco-link-card--discord:hover { border-color: var(--discord-line); }
.eco-link-card--discord:hover .eco-link-icon { background: var(--discord-text); color: #fff; transform: scale(1.06); }
/* Checkpoint 21 P1 — "push Discord harder": a quiet always-on glow
   ring behind the tile's icon, so this one tile reads as gently
   "alive" against the five static ones beside it, at rest, not just
   on hover. No numbers/claims added — visual weight only. */
.eco-link-card--discord .eco-link-icon::before {
  content: ''; position: absolute; inset: -5px; border-radius: inherit;
  border: 1px solid var(--discord-line); opacity: 0;
  animation: discordIconPulse 3.2s var(--ease-out) infinite;
}
@keyframes discordIconPulse {
  0%   { opacity: .55; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.4); }
  100% { opacity: 0;   transform: scale(1.4); }
}
.eco-link-card--discord:hover .eco-link-icon::before { animation-play-state: paused; opacity: 0; }

/* ── SUBTLE SOCIAL PROMPT (not an icon strip — one quiet line) ── */
/* ============================================================
   COMMUNITY BAND — Discord-forward card layout (Checkpoint 21, P1)
   Previously a single centered stack (CTA button, then a newsletter
   form underneath). Restructured into two unequal cards so visual
   weight itself signals which one is primary: Discord is the larger,
   warmer, always-so-slightly-alive card; the newsletter is smaller
   and quieter beside/under it. No new copy claims, no invented
   member counts — "push Discord harder" is handled entirely through
   size/color/motion, not fabricated numbers. Follows the same card/
   hover language already established by .eco-link-card / .notes-card
   above rather than inventing a new visual system. ============== */
.community-grid {
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px;
  max-width: 760px; margin: 32px auto 0; text-align: left;
}
.community-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 32px 28px;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.community-card--discord {
  background: linear-gradient(160deg, var(--discord-wash), var(--surface) 65%);
  border-color: var(--discord-line);
  display: flex; flex-direction: column; justify-content: space-between;
}
.community-card--discord:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.community-card-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  background: var(--discord-text); color: #fff; margin-bottom: 18px;
}
.community-card-icon svg { width: 22px; height: 22px; fill: currentColor; }
.community-card-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--ink); margin-bottom: 8px; text-transform: none; letter-spacing: 0;
}
.community-card-sub { font-size: .84rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 24px; max-width: 380px; }
.discord-cta-wrap { position: relative; display: inline-flex; }
/* same "quiet pulse ring — invites the click without shouting" idiom
   as .gate-enter-ring above, reused rather than reinvented */
.discord-cta-ring {
  position: absolute; inset: 0; border-radius: var(--r-pill);
  border: 1px solid var(--discord-text); opacity: 0; pointer-events: none;
  animation: discordCtaPulse 2.6s var(--ease-out) infinite .6s;
}
@keyframes discordCtaPulse {
  0%   { opacity: .5; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.3); }
  100% { opacity: 0;  transform: scale(1.3); }
}
.discord-cta-wrap:hover .discord-cta-ring { animation-play-state: paused; opacity: 0; }
.community-card--newsletter { display: flex; flex-direction: column; justify-content: center; }
.community-card--newsletter .community-card-title { font-size: .92rem; }
.community-card--newsletter .tape-divider { margin-bottom: 18px; }
@media (max-width: 720px) {
  .community-grid { grid-template-columns: 1fr; max-width: 440px; }
  .community-card { padding: 26px 22px; }
}

.social-prompt {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  flex-wrap: wrap; font-family: var(--font-mono); font-size: .68rem;
  letter-spacing: .04em; color: var(--ink-faint);
}
.social-prompt a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid var(--line); transition: color .25s, border-color .25s; }
.social-prompt a:hover { color: var(--accent-text); border-color: var(--accent-line); }
.social-prompt .sp-dot { opacity: .4; }

/* ── MAGAZINE ENTRY CARD ── */
/* CHECKPOINT 20: .mag-list wraps what used to be a single standalone
   .mag-entry with no layout container — now that the page can show
   more than one entry (including honest "Coming Soon" placeholders),
   it needs its own vertical rhythm instead of relying on each card's
   own margin. */
.mag-list { display: flex; flex-direction: column; gap: 16px; }
.mag-entry {
  padding: 24px 26px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md);
}
/* Honest empty-state card — same dashed/muted language .future-card
   already uses elsewhere in the theme for not-yet-real content,
   applied here so it still reads as a magazine card, just visibly
   unfinished. No fabricated text lives inside this variant, ever. */
.mag-entry--soon {
  background: transparent; border-style: dashed; opacity: .6;
}
.mag-entry--soon .mag-entry-date { color: var(--ink-faint); }
.mag-entry-date {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent-text); margin-bottom: 8px;
}
.mag-entry-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  color: var(--ink); margin-bottom: 10px;
}
.mag-entry-body { color: var(--ink-soft); font-size: .88rem; line-height: 1.75; letter-spacing: .012em; }

/* Checkpoint 26 — polish pass. Slightly more air between sections
   and a touch more letter-spacing across the page's body copy for a
   cleaner, more premium feel. Same fonts, same sizes, just breathing
   room. */
.mag-section { margin-bottom: 52px; }
.mag-section:last-child { margin-bottom: 0; }
.mag-section-label {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px;
}
.mag-section-note { color: var(--ink-soft); font-size: .82rem; line-height: 1.7; letter-spacing: .012em; margin-top: 14px; }
/* Featured Story keeps the real entry visually distinct from the
   empty-state cards below it — a solid accent-tinted border instead
   of the dashed "not real yet" language .mag-entry--soon uses. */
.mag-entry--featured { border-color: var(--accent-line); background: linear-gradient(160deg, var(--accent-wash), var(--surface) 65%); }
.mag-entry--featured .mag-entry-date { color: var(--accent-text); }

/* Photography empty state: a small dashed tile grid rather than a
   text card, since photography is inherently visual — same muted/
   dashed "not real yet" treatment as .mag-entry--soon, just shaped
   like the content it's standing in for. Left unlabeled (no repeated
   "Coming Soon" text) since the dashed grid + the note below it
   already say what it is. */
.mag-photo-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.mag-photo-tile {
  aspect-ratio: 4/5; border: 1px dashed var(--line); border-radius: var(--r-md);
  background: var(--paper);
}
@media (max-width: 480px) {
  .mag-photo-grid { grid-template-columns: repeat(3,1fr); gap: 6px; }
}

/* Magazine page only — a touch more room above the intro paragraph
   and its own slightly wider letter-spacing, scoped so it never
   touches the shared .contact-wrap used by the Contact page. */
.mag-wrap > p { letter-spacing: .012em; }

/* ── NOTIFY-ME / PREORDER SIGNUP (Shop) ── */
.notify-form {
  display: flex; gap: 8px; max-width: 380px; margin: 24px auto 0; flex-wrap: wrap; justify-content: center;
}
.notify-form input[type="email"] {
  flex: 1; min-width: 200px; padding: 12px 18px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--ink);
  font-family: var(--font-body); font-size: .85rem;
}
.notify-form input[type="email"]:focus { outline: none; border-color: var(--accent-line); }
.notify-form button {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 12px 22px; border-radius: var(--r-pill); border: 1px solid var(--ink);
  background: var(--ink); color: var(--paper); cursor: pointer; transition: opacity .25s;
  white-space: nowrap;
}
.notify-form button:hover { opacity: .8; }
.notify-success { font-family: var(--font-mono); font-size: .72rem; color: var(--accent-text); margin-top: 14px; }

/* ── SIGNAL VISUALIZER / FREQUENCY WALL (checkpoint 35, FEAT-001 + FEAT-010) ──
   Canvas-based Unknown Pleasures-style waveform display.
   Replaces the old CSS-animated .fm-bar elements.

   .lf-sig-wrap  — sizing/positioning container (extends .fm-vis-wrap)
   .lf-signal-canvas — the canvas; JS sizes it to fill the wrapper
                        using devicePixelRatio via setTransform each frame.

   Height is taller than the old 80px to give the 20-row grid enough
   vertical space — each row needs at least ~6px minimum clearance to read
   as a distinct line at the lowest amplitude. 120px gives ~5.7px per row
   which is right at the minimum; 128px is the production value. */

.fm-vis-wrap {
  max-width: 800px; margin: 40px auto 0;
  height: 128px;
}
.lf-sig-wrap {
  position: relative; overflow: hidden;
}
.lf-signal-canvas {
  display: block;
  width: 100%; height: 100%;
}

/* Reduced-motion: the canvas JS draws one static frame and stops the rAF.
   The <canvas> itself has no CSS transition or animation to strip. */
@media (prefers-reduced-motion: reduce) {
  .lf-signal-canvas { opacity: .6; }
}

/* ── FM DIVIDER LINE ── */
.fm-line-div {
  max-width: 800px; margin: 0 auto;
  height: 1px; background: var(--fm-line);
}

/* ── FM CONTROLS ── */
.fm-controls {
  display: flex; flex-direction: column; align-items: center;
  gap: 28px; padding: 48px 32px;
}
.fm-play-btn {
  /* CHECKPOINT 23 (FM PLAYER IMPROVEMENTS — "Reduce size of: large
     play/pause button. Controls should feel balanced."): was 88px,
     visually oversized next to the 18px prev/next icons. Reduced to
     64px — still clearly the primary control, just no longer
     dominating the transport row. */
  width: 64px; height: 64px; border-radius: 50%;
  background: none; border: 1.5px solid rgba(255,255,255,.3);
  color: #fff; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: all .35s var(--ease-out);
  position: relative;
}
.fm-play-btn::before {
  content: ''; position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.08);
  transition: all .35s var(--ease-out);
}
.fm-play-btn:hover {
  border-color: var(--fm-green);
  box-shadow: 0 0 30px rgba(0,255,136,.15);
  transform: scale(1.04);
}
.fm-play-btn:active {
  transform: scale(.94);
  transition-duration: .08s;
  box-shadow: 0 0 14px rgba(0,255,136,.2);
}
.fm-play-btn:hover::before { inset: -10px; border-color: rgba(0,255,136,.15); }
.fm-play-btn.playing { border-color: var(--fm-green); }
.fm-play-btn.playing::before { inset: -10px; border-color: rgba(0,255,136,.12); animation: fmRing 2s ease-in-out infinite; }
@keyframes fmRing {
  0%, 100% { opacity: .5; inset: -10px; }
  50%       { opacity: .15; inset: -18px; }
}
.fm-play-icon { position: relative; z-index: 1; user-select: none; line-height: 1; }
.fm-tune-label {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .24em;
  text-transform: uppercase; color: var(--fm-faint);
}

/* ── NOW PLAYING PANEL ── */
.fm-now-playing {
  max-width: 560px; width: 100%; margin: 0 auto;
  border: 1px solid var(--fm-line); border-radius: var(--r-lg);
  padding: 28px 32px;
  background: rgba(255,255,255,.02);
}
.fm-np-label {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fm-green); margin-bottom: 12px;
  display: flex; align-items: center; gap: 8px;
}
.fm-np-eq { display: flex; gap: 2px; align-items: flex-end; height: 10px; }
.fm-np-eq span {
  width: 2px; background: var(--fm-green); border-radius: 1px;
  display: block;
}
.fm-np-eq span:nth-child(1) { height: 4px;  animation: fmEqIdle 1.1s ease-in-out infinite; }
.fm-np-eq span:nth-child(2) { height: 8px;  animation: fmEqIdle 1.1s ease-in-out infinite .18s; }
.fm-np-eq span:nth-child(3) { height: 5px;  animation: fmEqIdle 1.1s ease-in-out infinite .08s; }
.fm-now-playing.playing .fm-np-eq span { animation-name: fmEqPlay; }
/* CHECKPOINT 22 — buffering state: slow, dim pulse instead of the
   normal play animation, so stalled playback reads differently from
   both idle and actively-playing. */
.fm-np-eq.buffering span {
  animation-name: fmEqBuffer !important;
  animation-duration: 1s !important;
  opacity: .5;
}
/* Real, beat-reactive bars (driven by the AnalyserNode in
   lf-fm-player.js) replace the generic CSS pulse the instant genuine
   frequency data is available — same three bars, now actually
   listening to the track. */
.fm-np-eq.audio-reactive span {
  animation: none !important;
  transition: height .09s linear;
  box-shadow: 0 0 6px rgba(0,255,136,.55);
}
@keyframes fmEqBuffer { 0%, 100% { height: 3px; } 50% { height: 7px; } }
@keyframes fmEqIdle { 0%,100%{height:4px} 50%{height:6px} }
@keyframes fmEqPlay { 0%{height:2px} 25%{height:10px} 50%{height:5px} 75%{height:9px} 100%{height:2px} }

.fm-np-track {
  font-size: 1.1rem; font-weight: 400; letter-spacing: .04em; color: #fff;
  margin-bottom: 4px;
}
.fm-np-meta {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .1em;
  color: var(--fm-faint); text-transform: uppercase;
}
.fm-np-divider { height: 1px; background: var(--fm-line); margin: 20px 0; }
.fm-np-stats {
  display: flex; gap: 24px; flex-wrap: wrap;
}
.fm-np-stat {
  display: flex; flex-direction: column; gap: 3px;
}
.fm-np-stat-label {
  font-family: var(--font-mono); font-size: .55rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fm-faint);
}
.fm-np-stat-val {
  font-family: var(--font-mono); font-size: .78rem; color: rgba(255,255,255,.6);
}

/* ── FM CLOCK ── */
.fm-clock {
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  color: var(--fm-faint); text-align: center; padding-bottom: 8px;
}

/* ── FM ACTION BUTTONS ── */
.fm-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  padding: 0 32px 32px;
}
.fm-action-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: var(--r-pill);
  background: none; border: 1px solid var(--fm-line); color: var(--fm-soft);
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer; text-decoration: none;
  transition: all .25s var(--ease);
}
.fm-action-btn:hover { border-color: rgba(255,255,255,.4); color: #fff; }

/* ── FM EMBED NOTICE ── */
.fm-embed-section {
  max-width: 560px; margin: 0 auto; padding: 0 32px 80px;
  text-align: center;
}
.fm-embed-code {
  background: rgba(255,255,255,.04); border: 1px solid var(--fm-line);
  border-radius: var(--r-md); padding: 16px 20px;
  font-family: var(--font-mono); font-size: .72rem; color: var(--fm-faint);
  text-align: left; overflow-x: auto; white-space: pre; cursor: text;
  user-select: all; letter-spacing: .02em;
}
.fm-embed-label {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--fm-faint); margin-bottom: 10px;
}
/* CHECKPOINT 22 — Upload to Story limitation note. Small and quiet
   on purpose: it's an honesty disclosure, not a headline. */
.fm-story-note {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .02em;
  color: var(--fm-faint); opacity: .75; margin-top: 12px; line-height: 1.5;
  max-width: 420px; margin-left: auto; margin-right: auto;
}

/* ── FM WIDGET (embeddable) ── */
.fm-widget-standalone {
  background: #0a0a0a; color: #f0ede8;
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.fm-widget-card {
  width: 100%; max-width: 380px;
  border: 1px solid rgba(255,255,255,.1); border-radius: 20px;
  padding: 32px; background: #111;
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  text-align: center;
}
.fm-w-freq { font-family: var(--font-mono); font-size: 3.8rem; font-weight: 700; letter-spacing: -.02em; color: #fff; line-height: 1; }
.fm-w-unit { font-family: var(--font-mono); font-size: 1rem; color: rgba(255,255,255,.4); margin-left: 4px; }
.fm-w-name { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.35); }
.fm-w-vis { display: flex; gap: 3px; align-items: flex-end; height: 32px; }
.fm-w-vis span { width: 4px; border-radius: 2px; background: #00ff88; opacity: .6; animation: fmIdle 1.8s ease-in-out infinite; }
.fm-w-vis.playing span { animation-name: fmPlay; }
.fm-w-play {
  width: 64px; height: 64px; border-radius: 50%;
  background: none; border: 1.5px solid rgba(255,255,255,.25); color: #fff;
  font-size: 1.2rem; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: all .3s var(--ease-out);
}
.fm-w-play:hover { border-color: #00ff88; box-shadow: 0 0 20px rgba(0,255,136,.1); }
.fm-w-play.playing { border-color: #00ff88; }
.fm-w-track { font-size: .82rem; color: rgba(255,255,255,.6); }
.fm-w-brand {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.2);
}


/* ================================================================
   CULTURE STUDIO  /pages/culturestudio
================================================================ */

/* ── Studio-specific design tokens (extend theme) ── */
.studio-page {
  --st-grid: 1200px;
}

/* ── HERO ──
   CORRECTION (checkpoint 11): was min-height:100svh — a full-viewport
   hero, taller/heavier than HOME's own .room-hero (which is
   content-sized, no forced min-height). That made this "secondary"
   page open bigger than HOME itself, backwards from the brief
   ("Culture Creatives should NEVER feel bigger than HOME"). Now
   content-sized like .room-hero, just with its own generous padding —
   still a confident opener, never the flagship moment. */
.st-hero {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: calc(var(--nav-h) + 64px) 32px 72px;
  position: relative; overflow: hidden;
}
.st-hero::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 60%, var(--accent-wash) 0%, transparent 70%);
  pointer-events: none;
}
.st-hero-eyebrow {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .28em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 24px;
  display: flex; align-items: center; gap: 10px; justify-content: center;
}
.st-hero-eyebrow::before,
.st-hero-eyebrow::after {
  content: ''; width: 32px; height: 1px; background: var(--line);
}
.st-hero h1 {
  /* CORRECTION (checkpoint 11): ceiling was 4.2rem, exceeding HOME's
     own .room-wordmark ceiling of 3.2rem. Brought in line so this
     page's title never reads larger than HOME's. */
  font-size: clamp(2rem, 5vw, 3.4rem);
  font-weight: 300; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.1; color: var(--ink);
  max-width: 860px; margin: 0 auto 24px;
  position: relative; z-index: 1;
}
.st-hero h1 em {
  font-style: normal; font-weight: 400;
  color: var(--accent-text);
}
.st-hero-sub {
  font-size: .95rem; color: var(--ink-soft); max-width: 480px; margin: 0 auto 40px;
  line-height: 1.7; letter-spacing: .02em;
  position: relative; z-index: 1;
}
.st-hero-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; z-index: 1; }
.st-hero-scroll {
  position: absolute; bottom: 32px; left: 50%; transform: translateX(-50%);
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); display: flex; flex-direction: column; align-items: center; gap: 10px;
  animation: stScrollBounce 2.2s ease-in-out infinite;
}
.st-hero-scroll::after { content: '↓'; font-size: .9rem; }
@keyframes stScrollBounce { 0%,100%{transform:translateX(-50%) translateY(0)} 50%{transform:translateX(-50%) translateY(8px)} }

/* ── SECTION WRAPPER ── */
.st-section {
  max-width: var(--st-grid); margin: 0 auto; padding: 96px 32px;
}
.st-section + .st-section { padding-top: 0; }
.st-section-title {
  font-size: clamp(1.4rem, 3vw, 2.2rem); font-weight: 300; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 12px;
}
.st-section-sub { font-size: .9rem; color: var(--ink-soft); margin-bottom: 56px; max-width: 500px; line-height: 1.65; }
.st-eyebrow {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 14px;
}

/* ── DIVIDER ── */
.st-divider { height: 1px; background: var(--line); max-width: var(--st-grid); margin: 0 auto; }

/* ── SERVICES GRID ── */
.st-services { display: grid; grid-template-columns: repeat(2,1fr); gap: 2px; }
.st-service-card {
  padding: 44px 40px; border: 1px solid var(--line);
  background: var(--surface);
  transition: background .3s var(--ease);
  position: relative; overflow: hidden;
}
.st-service-card::after {
  content: ''; position: absolute;
  top: 40px; right: 40px;
  font-family: var(--font-mono); font-size: 5rem; font-weight: 700;
  opacity: .03; color: var(--ink); line-height: 1;
}
.st-service-card:nth-child(1)::after { content: '01'; }
.st-service-card:nth-child(2)::after { content: '02'; }
.st-service-card:nth-child(3)::after { content: '03'; }
.st-service-card:nth-child(4)::after { content: '04'; }
.st-service-card:hover { background: var(--paper); }
.st-svc-icon {
  width: 44px; height: 44px; border-radius: var(--r-md);
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem; margin-bottom: 24px;
  background: var(--paper);
}
.st-svc-title {
  font-size: 1.15rem; font-weight: 400; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 14px;
}
.st-svc-desc { font-size: .85rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 20px; }
.st-svc-items { display: flex; flex-direction: column; gap: 7px; }
.st-svc-item {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); display: flex; align-items: center; gap: 8px;
}
.st-svc-item::before { content: '—'; opacity: .4; }

/* ── FEATURED WORK ── */
.st-work-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.st-work-card {
  border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  background: var(--surface); transition: all .3s var(--ease-out);
}
.st-work-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* CHECKPOINT 18 — portfolio hierarchy: the flagship build gets a
   visibly larger, first-billed treatment instead of sitting as an
   equal-weight tile next to everything else. Desktop-only span (mobile
   already collapses the grid to 1 column at the existing breakpoint,
   where every card is naturally full-width and hierarchy comes from
   order alone). */
.st-work-card--featured { grid-column: span 2; position: relative; }
.st-work-card--featured .st-work-thumb { aspect-ratio: 21/9; }
.st-work-card--featured .st-work-title { font-size: 1.05rem; }
.st-work-featured-tag {
  position: absolute; top: 14px; left: 14px; z-index: 1;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  background: var(--accent); color: #241016; padding: 5px 12px; border-radius: 999px;
}
.st-work-thumb {
  aspect-ratio: 16/9; background: #0a0a0a;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.st-work-thumb img { width: 100%; height: 100%; object-fit: cover; }
.st-work-ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; width: 100%; height: 100%;
  background: linear-gradient(145deg, #111 0%, #0a0a0a 100%);
}
.st-work-ph-label {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(255,255,255,.15);
}
.st-work-ph-icon { font-size: 2rem; opacity: .1; }
.st-work-info { padding: 20px; }
.st-work-tag {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 6px;
}
.st-work-title { font-size: .9rem; font-weight: 400; letter-spacing: .04em; color: var(--ink); }
.st-work-desc { font-size: .78rem; color: var(--ink-soft); line-height: 1.6; margin-top: 8px; }

/* ── PROOF OF WORK — INSTAGRAM STRIP (checkpoint 18) ──
   Differentiates Instagram-sourced proof-of-work from the YouTube/
   website-hosted case studies above — same visual language as the
   DVD archive's Instagram badge (white pill, dark corner), so the
   "this came from Instagram, not YouTube" signal is consistent
   sitewide rather than reinvented per page. */
.st-ig-strip { margin-top: 16px; display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.st-ig-card {
  position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line);
  aspect-ratio: 16/9; display: block; transition: all .3s var(--ease-out);
}
.st-ig-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.st-ig-card img { width: 100%; height: 100%; object-fit: cover; }
.st-ig-badge {
  position: absolute; top: 10px; left: 10px;
  background: #fff; color: #241016; font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .08em; text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
}
.st-ig-title {
  position: absolute; bottom: 0; left: 0; right: 0; padding: 14px;
  background: linear-gradient(to top, rgba(0,0,0,.75), transparent);
  color: #fff; font-size: .78rem; letter-spacing: .02em;
}

/* ================================================================
   CHECKPOINT 17 — RESUME
   Two-column layout matching the existing .st-contact-grid rhythm
   (main content left, supporting panel right). Every token reused
   from the studio-page system already defined above — no new colors,
   radii, or fonts introduced.
================================================================ */
.st-resume-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 64px; align-items: start; }
.st-resume-role {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  text-transform: uppercase; letter-spacing: .02em; color: var(--ink); margin-bottom: 6px;
}
.st-resume-loc {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: 36px;
}
.st-resume-timeline { display: flex; flex-direction: column; gap: 28px; }
.st-timeline-item {
  display: grid; grid-template-columns: 72px 1fr; gap: 20px;
  padding-bottom: 28px; border-bottom: 1px solid var(--line);
}
.st-timeline-item:last-child { border-bottom: none; padding-bottom: 0; }
.st-timeline-year {
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .08em;
  color: var(--ink-faint); padding-top: 3px;
}
.st-timeline-title { font-size: .92rem; font-weight: 500; color: var(--ink); margin-bottom: 6px; letter-spacing: .01em; }
.st-timeline-desc { font-size: .82rem; color: var(--ink-soft); line-height: 1.65; }

.st-resume-block { margin-bottom: 32px; }
.st-resume-block:last-child { margin-bottom: 0; }
.st-resume-block-title {
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 14px;
}
.st-skill-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.st-skill-tag {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .04em;
  padding: 8px 14px; border-radius: var(--r-pill);
  background: var(--accent-wash); color: var(--accent-text);
  border: 1px solid var(--accent-line);
}
.st-resume-pending {
  font-size: .8rem; color: var(--ink-faint); line-height: 1.65;
  padding: 16px; border: 1px dashed var(--line); border-radius: var(--r-md);
}
@media (max-width: 1024px) {
  .st-resume-grid { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 640px) {
  .st-timeline-item { grid-template-columns: 1fr; gap: 6px; }
  .st-timeline-year { padding-top: 0; }
}

/* ================================================================
   CHECKPOINT 17 — PRESS KIT
   Mixed-size card grid: logo + swatches stay compact, the
   boilerplate card spans wider (`--wide`), and the three not-yet-
   prepared assets are visually deprioritized (`--pending`, dashed
   border) rather than styled to look like real download links.
================================================================ */
.st-press-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.st-press-card {
  padding: 28px 24px; border: 1px solid var(--line); border-radius: var(--r-lg);
  background: var(--surface); transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.st-press-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.st-press-card--wide { grid-column: span 2; }
.st-press-card--pending {
  border-style: dashed; background: transparent;
}
.st-press-card--pending:hover { transform: none; box-shadow: none; }
.st-press-thumb {
  aspect-ratio: 16/9; border-radius: var(--r-md); overflow: hidden;
  background: var(--paper); display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.st-press-thumb--logo img { width: 60%; height: auto; object-fit: contain; }
.st-press-swatches { display: flex; gap: 8px; margin-bottom: 18px; }
.st-press-swatches span { width: 36px; height: 36px; border-radius: var(--r-sm); flex-shrink: 0; }
.st-press-title {
  font-family: var(--font-display); font-weight: 700; font-size: .92rem;
  text-transform: uppercase; letter-spacing: .02em; color: var(--ink); margin-bottom: 8px;
}
.st-press-note { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--ink-faint); }
.st-press-link {
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .04em;
  color: var(--accent-text); text-decoration: none; border-bottom: 1px solid var(--accent-line);
  transition: color .25s, border-color .25s;
}
.st-press-link:hover { color: var(--ink); border-color: var(--ink); }
.st-press-copy {
  font-size: .84rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 16px; max-width: 620px;
}
.st-press-copy-btn {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 18px; border: 1px solid var(--ink); border-radius: var(--r-pill);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.st-press-copy-btn:hover { background: var(--ink); color: var(--paper); }
.st-press-copy-btn:disabled { opacity: .6; cursor: default; }
@media (max-width: 860px) {
  .st-press-grid { grid-template-columns: repeat(2, 1fr); }
  .st-press-card--wide { grid-column: span 2; }
}
@media (max-width: 640px) {
  .st-press-grid { grid-template-columns: 1fr; }
  .st-press-card--wide { grid-column: span 1; }
}

/* ================================================================
   CHECKPOINT 17 — CONTACT "WHAT HAPPENS NEXT"
   Compact numbered list, distinct from the full .st-step (Process
   section) treatment — smaller scale since this is a supporting
   note beside the form, not its own section.
================================================================ */
.st-next-steps { display: flex; flex-direction: column; gap: 12px; margin-bottom: 36px; }
.st-next-step { display: flex; align-items: flex-start; gap: 12px; }
.st-next-num {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line); display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .62rem; color: var(--ink-faint);
}
.st-next-text { font-size: .82rem; color: var(--ink-soft); line-height: 1.6; padding-top: 2px; }

/* ── WHY US: value props ── */
.st-why-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 28px; }
.st-why-card { padding: 0; }
.st-why-num {
  font-family: var(--font-mono); font-size: 2.8rem; font-weight: 700;
  color: var(--line); line-height: 1; margin-bottom: 18px;
  letter-spacing: -.02em;
}
.st-why-title {
  font-size: 1rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 10px;
}
.st-why-desc { font-size: .83rem; color: var(--ink-soft); line-height: 1.7; }

/* ── PRICING ── */
.st-pricing-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.st-price-card {
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 32px 28px; background: var(--surface);
  display: flex; flex-direction: column; gap: 0;
  transition: all .3s var(--ease-out); position: relative;
}
.st-price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.st-price-card.featured {
  border-color: var(--ink); background: var(--ink); color: var(--paper);
}
.st-price-card.featured .st-price-tier,
.st-price-card.featured .st-price-from,
.st-price-card.featured .st-price-amt,
.st-price-card.featured .st-price-desc,
.st-price-card.featured .st-price-feat { color: var(--paper); }
.st-price-card.featured .st-price-feat::before { background: var(--paper); }
.st-price-card.featured .st-price-feat { border-top-color: rgba(255,255,255,.1); }
.st-price-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--accent-text); color: #fff;
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 4px 14px; border-radius: var(--r-pill);
}
.st-price-tier {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 20px;
}
.st-price-from {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: 4px;
}
.st-price-amt {
  font-size: 2.4rem; font-weight: 300; letter-spacing: -.02em; color: var(--ink);
  margin-bottom: 4px; line-height: 1;
}
.st-price-period {
  font-family: var(--font-mono); font-size: .62rem; color: var(--ink-faint);
  margin-bottom: 20px;
}
.st-price-desc { font-size: .82rem; color: var(--ink-soft); line-height: 1.6; margin-bottom: 24px; }
.st-price-feats { flex: 1; display: flex; flex-direction: column; gap: 0; margin-bottom: 28px; }
.st-price-feat {
  font-family: var(--font-mono); font-size: .65rem; letter-spacing: .04em;
  color: var(--ink-soft); padding: 10px 0;
  border-top: 1px solid var(--line); text-transform: uppercase;
  display: flex; align-items: center; gap: 8px;
}
.st-price-feat::before { content: '✓'; flex-shrink: 0; color: var(--accent-text); font-size: .7rem; }

/* ── PROCESS ── */
.st-process-steps { display: grid; grid-template-columns: repeat(5,1fr); gap: 0; position: relative; }
.st-process-steps::before {
  content: ''; position: absolute; top: 28px; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--line) 10%, var(--line) 90%, transparent 100%);
}
.st-step { padding: 0 16px 0 0; position: relative; }
.st-step-num {
  width: 56px; height: 56px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: .68rem; letter-spacing: .1em;
  color: var(--ink-faint); margin-bottom: 20px;
  position: relative; z-index: 1;
}
.st-step:hover .st-step-num { border-color: var(--ink); color: var(--ink); background: var(--surface); }
.st-step-title {
  font-size: .9rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 8px;
}
.st-step-desc { font-size: .78rem; color: var(--ink-soft); line-height: 1.6; }

/* ── FAQ ── */
.st-faq { max-width: 760px; }
.st-faq-item { border-top: 1px solid var(--line); }
.st-faq-item:last-child { border-bottom: 1px solid var(--line); }
.st-faq-item summary {
  padding: 22px 0; cursor: pointer; list-style: none;
  font-size: .9rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); display: flex; align-items: center; justify-content: space-between; gap: 16px;
  transition: color .2s;
}
.st-faq-item summary::-webkit-details-marker { display: none; }
.st-faq-item summary:hover { color: var(--ink-soft); }
.st-faq-item[open] summary { color: var(--accent-text); }
.st-faq-arrow {
  font-size: 1rem; flex-shrink: 0; transition: transform .3s var(--ease);
  color: var(--ink-faint);
}
.st-faq-item[open] .st-faq-arrow { transform: rotate(45deg); color: var(--accent-text); }
.st-faq-answer {
  font-size: .85rem; color: var(--ink-soft); line-height: 1.75;
  padding: 0 0 24px; max-width: 600px;
}
.st-faq-answer a { color: var(--accent-text); }

/* ── CONTACT ── */
.st-contact-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 80px; align-items: start; }
.st-contact-info { position: sticky; top: calc(var(--nav-h) + 40px); }
.st-contact-info h2 {
  font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 300; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); margin-bottom: 16px;
}
.st-contact-info p { font-size: .88rem; color: var(--ink-soft); line-height: 1.7; margin-bottom: 36px; }
.st-contact-links { display: flex; flex-direction: column; gap: 16px; }
.st-contact-link {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  padding: 18px 24px; border: 1px solid var(--line); border-radius: var(--r-md);
  background: var(--surface); transition: all .25s var(--ease);
}
.st-contact-link:hover { border-color: var(--ink); transform: translateX(4px); }
.st-cl-label {
  font-family: var(--font-mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
}
.st-cl-value { font-size: .88rem; font-weight: 400; color: var(--ink); letter-spacing: .03em; }

/* Studio form */
.st-form { display: flex; flex-direction: column; gap: 12px; }
.st-fg { position: relative; }
.st-fi, .st-fta, .st-fsel {
  width: 100%; padding: 18px 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md); color: var(--ink);
  font-size: .88rem; font-family: var(--font-body);
  transition: border-color .2s; letter-spacing: .02em;
}
.st-fi:focus, .st-fta:focus, .st-fsel:focus { outline: none; border-color: var(--ink); }
.st-fi::placeholder, .st-fta::placeholder { color: var(--ink-faint); font-size: .85rem; }
.st-fta { min-height: 130px; resize: vertical; }
.st-fsel { appearance: none; cursor: pointer; }
.st-fsel-wrap { position: relative; }
.st-fsel-arr { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.st-form-note {
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-faint); text-align: center; padding-top: 4px;
}

/* ── Studio Footer/bottom strip ── */
.st-bottom-strip {
  background: var(--ink); color: var(--paper);
  padding: 80px 32px; text-align: center;
}
.st-bottom-strip h2 {
  font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 300; letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: 16px; line-height: 1.1;
}
.st-bottom-strip p { font-size: .9rem; color: rgba(255,255,255,.5); margin-bottom: 36px; }
.st-bottom-ctas { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.btn-light { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-light:hover { background: rgba(255,255,255,.9); transform: translateY(-2px); }
.btn-outline-light { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.3); }
.btn-outline-light:hover { border-color: var(--paper); transform: translateY(-2px); }



/* ================================================================
   SHARED RESPONSIVE EXTENSIONS (FM + Studio only)
================================================================ */
@media (max-width: 1024px) {
  .st-pricing-grid  { grid-template-columns: repeat(2,1fr); }
  .st-why-grid      { grid-template-columns: repeat(2,1fr); gap: 36px; }
  .st-services      { grid-template-columns: 1fr; }
  .st-process-steps { grid-template-columns: 1fr; }
  .st-process-steps::before { display: none; }
  .st-step { padding: 0 0 28px 80px; border-left: 1px solid var(--line); }
  .st-step-num { position: absolute; left: -28px; }
  .st-step:last-child { border-left-color: transparent; }
  .st-contact-grid  { grid-template-columns: 1fr; gap: 48px; }
  .st-contact-info  { position: static; }
  .st-work-grid     { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .st-section       { padding: 64px 18px; }
  .st-hero          { padding-left: 18px; padding-right: 18px; min-height: 90svh; }
  .st-pricing-grid  { grid-template-columns: 1fr; }
  .st-why-grid      { grid-template-columns: 1fr; }
  .st-work-grid     { grid-template-columns: 1fr; }
  .fm-hero          { padding-left: 18px; padding-right: 18px; }
  .fm-vis-wrap      { padding: 0 18px; height: 110px; } /* canvas shrinks slightly on mobile */
  .fm-controls      { padding: 36px 18px; }
  .fm-now-playing   { padding: 20px; }
  .fm-actions       { padding: 0 18px 48px; }
  .fm-embed-section { padding: 0 18px 60px; }
}

/* ================================================================
   FOOTER / NAV FM INDICATOR
================================================================ */
.footer-ecosystem {
  display: flex; gap: 24px; flex-wrap: wrap;
  justify-content: center; align-items: center;
  padding: 14px 0; border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line); margin: 14px 0;
}
.footer-ecosystem a {
  font-family: var(--font-mono); font-size: .62rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint); text-decoration: none;
  display: flex; align-items: center; gap: 6px;
  transition: color .2s;
}
.footer-ecosystem a:hover { color: var(--ink); }
.footer-fm-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-faint); display: inline-block;
  transition: background .2s;
}
.footer-ecosystem a:hover .footer-fm-dot {
  background: #e63946; animation: fmPulse 1.2s ease-in-out infinite;
}
.nav-fm-link { display: flex !important; align-items: center; gap: 5px; }
.nav-fm-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--ink-faint); display: inline-block;
  flex-shrink: 0; transition: background .2s;
}
.nav-fm-link:hover .nav-fm-dot {
  background: #e63946; animation: fmPulse 1.2s ease-in-out infinite;
}
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ================================================================
   CHECKPOINT 9 — HOME EXPERIENCE PASS
   Archive discovery strip + Culture FM on-air teaser band + light
   progression numbering. Archive strip reads window.LF_CONFIG.videos
   at runtime (same source /pages/dvd uses) — real entries only,
   nothing fabricated. See CHECKPOINT_9_CHANGELOG.md.
================================================================ */

/* ── ARCHIVE DISCOVERY STRIP ── */
.archive-strip {
  display: flex; gap: 14px; overflow-x: auto;
  padding: 4px 4px 20px; margin-top: 8px;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
}
.archive-strip::-webkit-scrollbar { height: 5px; }
.archive-strip::-webkit-scrollbar-track { background: transparent; }
.archive-strip::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
/* CORRECTION (checkpoint 14): this was the only card on HOME using
   var(--ease) (a generic, symmetric curve) for its hover instead of
   var(--ease-out) (the snappy expo-out curve every other card on the
   page uses — showcase-card, eco-link-card, prod-card). Not a
   deliberate choice, just a leftover inconsistency — fixed so every
   card on HOME shares the exact same hover feel. */
.archive-card {
  flex: 0 0 210px; scroll-snap-align: start;
  aspect-ratio: 16 / 10; position: relative;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  cursor: pointer; text-decoration: none; display: block;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.archive-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }
.archive-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s var(--ease-out);
}
.archive-card:hover img { transform: scale(1.06); }
.archive-card-tag {
  position: absolute; top: 10px; left: 10px; z-index: 1;
  font-family: var(--font-mono); font-size: .56rem; letter-spacing: .1em; text-transform: uppercase;
  padding: 4px 9px; border-radius: var(--r-pill);
  background: rgba(0,0,0,.55); color: #fff; backdrop-filter: blur(4px);
}
.archive-card-tag.is-exclusive { background: var(--accent-text); }
.archive-card-title {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 12px 12px 10px;
  font-family: var(--font-display); font-weight: 700; font-size: .78rem;
  letter-spacing: .01em; text-transform: uppercase; line-height: 1.25; color: #fff;
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.78) 75%);
}

/* ── CULTURE FM ON-AIR TEASER BAND ── */
.fm-teaser-band {
  display: block; text-decoration: none;
  background: #000; color: #f0ede8;
  border-radius: var(--r-lg);
  max-width: var(--container-lg); margin: 0 auto;
  overflow: hidden; position: relative;
}
.fm-teaser-band::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(ellipse 60% 100% at 12% 50%, rgba(229,160,179,.16), transparent 70%);
}
.fm-teaser-inner {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;
  gap: 28px; padding: 44px 40px; position: relative; z-index: 1;
}
.fm-teaser-left { display: flex; align-items: center; gap: 20px; }
.fm-teaser-freq {
  font-family: var(--font-mono); font-weight: 700; font-size: clamp(2.2rem,5vw,3.4rem);
  letter-spacing: -.02em; line-height: 1; color: #fff;
}
.fm-teaser-freq span { font-size: .5em; color: rgba(255,255,255,.4); }
.fm-teaser-name { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 6px; }
.fm-teaser-right { display: flex; align-items: center; gap: 22px; }
.fm-teaser-now { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .04em; color: rgba(255,255,255,.65); }
.fm-teaser-cta {
  font-family: var(--font-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; border: 1px solid rgba(255,255,255,.25); border-radius: var(--r-pill);
  padding: 10px 20px; white-space: nowrap; transition: border-color .25s, background .25s;
}
.fm-teaser-band:hover .fm-teaser-cta { border-color: #fff; background: rgba(255,255,255,.06); }
@media (max-width: 640px) {
  .fm-teaser-inner { padding: 30px 22px; gap: 18px; }
  .fm-teaser-right { width: 100%; justify-content: space-between; }
}

/* ── HOME progression numbering (storytelling cue — "01/02/03..."
   next to existing eyebrows). Text-only addition, no markup rework. ── */
.home-step-num { font-family: var(--font-mono); font-size: .62rem; letter-spacing: .1em; color: var(--ink-faint); margin-right: 8px; }

/* ── CULTURE CREATIVES — real-asset portfolio thumbs (replaces
   placeholder "SCREENSHOT" tiles, same discipline as the homepage
   ecosystem cards: real photo where one exists, numeral watermark
   where it doesn't, nothing invented) ── */
.st-work-thumb--numeral { position: relative; }
.st-work-thumb--numeral::after {
  content: attr(data-numeral);
  position: absolute; right: -8px; bottom: -26px; z-index: 0;
  font-family: var(--font-display); font-weight: 900; font-size: 5.4rem;
  color: var(--accent-text); opacity: .16; line-height: 1; pointer-events: none;
}
.st-work-thumb--numeral .st-work-ph-label { position: relative; z-index: 1; }

/* ── CULTURE CREATIVES — credentials strip + work-with-us (minimal,
   reuses existing mono/eyebrow type styles, no new components) ── */
.st-credentials {
  display: flex; flex-wrap: wrap; gap: 32px; justify-content: center;
  max-width: var(--st-grid); margin: -16px auto 0; padding: 0 32px 8px;
}
.st-cred-item { text-align: center; }
.st-cred-val { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--ink); letter-spacing: .02em; }
.st-cred-label { font-family: var(--font-mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
.st-hiring {
  max-width: var(--st-grid); margin: 0 auto; padding: 48px 32px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.st-hiring-text { max-width: 520px; }
.st-hiring-title { font-size: .98rem; font-weight: 400; letter-spacing: .04em; text-transform: uppercase; color: var(--ink); margin-bottom: 6px; }
.st-hiring-desc { font-size: .82rem; color: var(--ink-soft); line-height: 1.6; }
@media (max-width: 768px) {
  .st-credentials { gap: 22px; }
  .st-hiring { padding: 36px 18px; }
}

/* ================================================================
   CHECKPOINT 10 — VIDEOS PAGE
   Super Tags (section) vs Normal Tags (type) visual grouping.
   Reuses the existing .filter-btn base style from theme.css —
   these are additive variants only, nothing overridden.
================================================================ */
.filter-group { margin-bottom: 16px; }
.filter-group-label {
  display: block; font-family: var(--font-mono); font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 9px;
}
.filter-bar--super .filter-btn--super { font-weight: 700; letter-spacing: .08em; }
.filter-bar--normal { margin-bottom: 28px; }
.filter-bar--normal .filter-btn--normal { padding: 8px 16px; font-size: .66rem; opacity: .8; }
.filter-bar--normal .filter-btn--normal:hover { opacity: 1; }
.filter-bar--normal .filter-btn--normal.active { opacity: 1; }

/* ================================================================
   CHECKPOINT 15 — CULTURE FLAGSHIP EXPANSION
   Quick-nav (software tabs) + the honest Notes/Magazine preview.
   See templates/index.liquid for the "culture-experience" wrapper
   this all lives inside.
================================================================ */

.culture-experience { position: relative; }

/* Anchor targets get scroll-margin instead of hardcoded scroll
   offsets in JS — this way plain #anchor URLs, browser back/forward,
   and the quick-nav's own links all land in the same correct spot,
   clear of both the fixed site-nav and the sticky quick-nav below it. */
.culture-anchor { scroll-margin-top: calc(var(--nav-h) + 78px); }

/* ── QUICK NAV — sticky, centered segmented control. Deliberately not
   styled like `.nav-links` (those are a website's page menu; this is
   an in-page jump list for one long page) — closer to a macOS/iOS
   segmented control or a Linear/Arc tab group: one pill container, a
   sliding solid indicator behind the active label, mono uppercase
   labels matching the rest of the type system. Sticks at `--nav-h`
   (right under the main nav) and un-sticks naturally at the end of
   `.culture-experience` — no JS show/hide required for that part. */
.culture-quicknav {
  position: sticky;
  top: var(--nav-h);
  z-index: 900;
  display: flex;
  justify-content: center;
  padding: 14px 32px;
  background: var(--scrim);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-bottom: 1px solid var(--line);
}
.quicknav-inner {
  position: relative;
  display: inline-flex;
  gap: 2px;
  max-width: 100%;
  padding: 4px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  overflow-x: auto;
  scrollbar-width: none;
}
.quicknav-inner::-webkit-scrollbar { display: none; }
.quicknav-indicator {
  position: absolute;
  top: 4px; left: 0;
  height: calc(100% - 8px);
  width: 0;
  background: var(--ink);
  border-radius: var(--r-pill);
  transition: transform .4s var(--ease-out), width .4s var(--ease-out);
  z-index: 0;
}
.quicknav-tab {
  position: relative;
  z-index: 1;
  padding: 9px 16px;
  font-family: var(--font-mono);
  font-size: .66rem;
  font-weight: 400;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-radius: var(--r-pill);
  white-space: nowrap;
  transition: color .3s var(--ease);
}
.quicknav-tab:hover { color: var(--ink); }
.quicknav-tab.active { color: var(--paper); }
@media (max-width: 640px) {
  .culture-quicknav { padding: 10px 18px; }
  .quicknav-tab { padding: 8px 13px; font-size: .62rem; }
}

/* ── NOTES / MAGAZINE PREVIEW CARD ──
   One honest card, not a grid — Magazine has exactly one real entry
   right now (see comment in templates/index.liquid). Hover treatment
   matches every other card on HOME: translateY(-5px) + var(--ease-out),
   same as .eco-link-card / .archive-card / .showcase-card, so it
   doesn't feel like a different, less-finished component. */
.notes-card {
  display: block;
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 32px;
  text-align: left;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  position: relative;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
}
.notes-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--accent-line); }
.notes-card-tag {
  display: block;
  font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--accent-text); margin-bottom: 10px;
}
.notes-card-title {
  display: block;
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  color: var(--ink); margin-bottom: 8px; padding-right: 36px;
}
.notes-card-sub {
  display: block;
  font-size: .84rem; color: var(--ink-soft); line-height: 1.6; max-width: 480px;
}
.notes-card-arrow {
  position: absolute; top: 28px; right: 28px;
  width: 18px; height: 18px; color: var(--ink-faint);
  transition: transform .35s var(--ease-out), color .35s var(--ease-out);
}
.notes-card-arrow svg { width: 100%; height: 100%; fill: currentColor; }
.notes-card:hover .notes-card-arrow { transform: translateX(4px); color: var(--accent-text); }
@media (max-width: 640px) {
  .notes-card { padding: 22px 20px; }
  .notes-card-arrow { top: 22px; right: 20px; }
}

/* ================================================================
   CHECKPOINT 16 — CULTURE FLAGSHIP POLISH
   Refinement pass only, per brief: no new sections, no structural
   changes — cards, transitions, and hover quality on the existing
   HOME layout.
================================================================ */

/* ── CASCADING CARD REVEAL ──
   Every grid on HOME (eco links, showcase, shop) previously revealed
   as one flat block — the parent `.reveal` band faded/rose in, but
   every card inside it appeared at the same instant. Found while
   auditing "transitions": `templates/index.liquid`'s shop grid
   already computes a per-card `transition-delay` inline
   (`{{ forloop.index0 | times: 80 }}ms`) but `.prod-card` had no
   opacity/transform transition of its own for that delay to apply
   to — dead intent, doing nothing. This activates it, and extends
   the same cascading feel to the eco-links and showcase grids via
   nth-child, so scrolling into any card band now reads as individual
   pieces arriving in sequence rather than a single flat panel.
   `:where()` keeps this at zero added specificity, so every card's
   own existing `:hover` transform (translateY(-4px)/(-5px) etc.,
   defined above/in theme.css) still wins over this base/visible
   state exactly as before — hover behavior is untouched. Reuses the
   same opacity+translateY pattern and --ease-out curve every card's
   hover already uses; no new animation mechanism. Covered by the
   existing global scroll-reveal JS (theme.js) and its
   IntersectionObserver-unavailable / 2.5s stuck-observer fallbacks —
   both just toggle `.visible` on the ancestor `.reveal`, which is
   all this CSS keys off, so no JS changes were needed. Also covered
   by the existing global `prefers-reduced-motion` block in theme.css. */
:where(.reveal) .eco-link-card,
:where(.reveal) .showcase-card,
:where(.reveal) .future-card,
:where(.reveal) .prod-card,
:where(.reveal) .community-card {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
:where(.reveal.visible) .eco-link-card,
:where(.reveal.visible) .showcase-card,
:where(.reveal.visible) .future-card,
:where(.reveal.visible) .prod-card,
:where(.reveal.visible) .community-card {
  opacity: 1;
  transform: translateY(0);
}
/* Fixed-count grids (eco links: 6 tiles; showcase: 2 or 3 cards)
   get a nth-child stagger — .prod-card already carries its own
   inline per-item delay from the forloop above, so it's excluded
   here to avoid two delays fighting on the same element. */
.eco-links-grid > *:nth-child(1) { transition-delay: 0ms; }
.eco-links-grid > *:nth-child(2) { transition-delay: 60ms; }
.eco-links-grid > *:nth-child(3) { transition-delay: 120ms; }
.eco-links-grid > *:nth-child(4) { transition-delay: 180ms; }
.eco-links-grid > *:nth-child(5) { transition-delay: 240ms; }
.eco-links-grid > *:nth-child(6) { transition-delay: 300ms; }
.eco-links-grid > *:nth-child(7) { transition-delay: 360ms; }
.showcase-grid > *:nth-child(1) { transition-delay: 0ms; }
.showcase-grid > *:nth-child(2) { transition-delay: 90ms; }
.showcase-grid.tri > *:nth-child(3) { transition-delay: 180ms; }
.community-grid > *:nth-child(1) { transition-delay: 0ms; }
.community-grid > *:nth-child(2) { transition-delay: 90ms; }

/* ── SHOWCASE CARD — hover quality ──
   Image was the only thing that reacted on hover (scale 1.04); the
   overlay text sat static on top of it. Applies the same "deepen on
   hover" idiom `.eco-link-card--media` already established (see
   checkpoint 14 comment above) to `.sc-overlay`, and gives the tag/
   title a small independent lift so the whole card feels like it's
   responding, not just the photo underneath it. Kept to 2-3px of
   motion — legibility cue, not a new effect. */
.sc-overlay { transition: background .4s var(--ease-out); }
.showcase-card:hover .sc-overlay {
  background: linear-gradient(to top, rgba(8,6,6,.92) 0%, rgba(8,6,6,.15) 55%, transparent 100%);
}
.sc-tag, .sc-title { transition: transform .4s var(--ease-out); }
.showcase-card:hover .sc-tag { transform: translateY(-2px); }
.showcase-card:hover .sc-title { transform: translateY(-3px); }

@media (max-width: 640px) {
  /* Shorter travel distance on small screens — same cascade, less
     scroll-jank on slower mobile GPUs. */
  :where(.reveal) .eco-link-card,
  :where(.reveal) .showcase-card,
  :where(.reveal) .future-card,
  :where(.reveal) .prod-card,
  :where(.reveal) .community-card { transform: translateY(10px); }
}


/* Discord Embedded Widget Layout */
.discord-widget-wrap {
  position: relative;
  width: 100%;
  margin: 16px 0;
  border-radius: var(--r-md);
  border: 1px solid var(--discord-line);
  background-color: #141414; /* Default dark background matching active state */
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--t), box-shadow var(--t);
}

.discord-widget-iframe {
  width: 100%;
  height: 240px;
  border: none;
  display: block;
}

.community-card--discord:hover .discord-widget-wrap {
  border-color: var(--discord-text);
  box-shadow: 0 4px 20px rgba(88, 101, 242, 0.15);
}


/* ================================================================
   DISCORD LIVE WIDGET STYLING
================================================================ */
.discord-widget-wrapper {
  width: 100%;
  margin-top: 14px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: var(--r-md, 12px);
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, 0.05);
  box-sizing: border-box;
}

.discord-widget-wrapper iframe {
  border-radius: 8px;
  display: block;
}

.discord-widget-notice {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  line-height: 1.4;
  color: var(--ink-faint);
  margin-top: 8px;
  padding: 0 4px;
  text-align: center;
  opacity: 0.7;
}

/* Ensure the Discord icon in the widget pulse matches Discord's color */
.community-card--discord:hover {
  border-color: var(--discord-line) !important;
  box-shadow: var(--shadow-md);
}

/* ============================================================
   DISCORD EMBED WIDGET STYLING
   ============================================================ */
.discord-widget-wrap {
  margin-top: 20px;
  margin-bottom: 8px;
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--discord-line);
  background: rgba(0, 0, 0, 0.2);
  height: 280px; /* Perfectly sized to balance with your newsletter card beside it */
}

.discord-widget-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.discord-widget-note {
  font-family: var(--font-mono);
  font-size: .56rem;
  letter-spacing: .02em;
  color: var(--ink-faint);
  margin-top: 8px;
  margin-bottom: 16px;
  line-height: 1.4;
  opacity: 0.75;
}

/* ============================================================
   GALLERY — FEAT-008 "Gallery Mode", first build (checkpoint 34)
   /pages/gallery. Visuals-only node-graph over the video archive.
   Two render paths (assets/lf-gallery.js decides which, once):
     .lf-gallery-scroll   desktop / hover-capable — the real canvas
     .lf-gallery-mobile   touch / narrow viewport — plain grid
   Room forces dark mode (layout/theme.liquid) — data-as-art reads
   better near-black, same Joy Division reasoning as DVD.
   ============================================================ */

.lf-gallery-hint {
  text-align: center;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: var(--ink-faint);
  opacity: .65;
  margin: 0 0 18px;
}

.lf-gallery-root {
  width: 100%;
  max-width: 100vw;
  margin: 0;
  padding: 0 0 var(--sp-9);
  position: relative;
}
.lf-gallery-root--disabled {
  padding: var(--sp-9) 24px;
  text-align: center;
}

.lf-gallery-empty {
  text-align: center;
  color: var(--ink-soft);
  font-size: var(--text-base);
  padding: var(--sp-8) 24px;
}

/* ── DESKTOP CANVAS ── */
.lf-gallery-scroll {
  position: relative;
  width: 100%;
  height: min(56vh, 560px);
  min-height: 340px;
  overflow-x: auto;
  overflow-y: hidden;
  cursor: grab;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  /* dot-grid backdrop — literal reading of the board spec, distinct
     from the gate-screen's hairline grid (that one's lines; this one
     is dots, per FEAT-008's own wording) */
  background-image: radial-gradient(var(--ink-faint) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: 0 0;
}
.lf-gallery-scroll:active { cursor: grabbing; }
.lf-gallery-scroll:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.lf-gallery-canvas { position: relative; height: 100%; }

.lf-gallery-lines {
  position: absolute; inset: 0;
  pointer-events: none;
}
.lf-gallery-line {
  stroke: var(--ink-faint);
  stroke-width: 1;
  opacity: .3;
}
.lf-gallery-line--recent     { stroke: var(--accent); opacity: .35; }
.lf-gallery-line--unreleased { opacity: .22; }

.lf-gallery-nodes { position: absolute; inset: 0; }

.lf-gallery-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 84px;
  background: none; border: none; padding: 0; margin: 0;
  cursor: pointer;
  transition: transform .25s var(--ease-out);
  z-index: 1;
}
.lf-gallery-node:hover,
.lf-gallery-node:focus-visible {
  transform: translate(-50%, -50%) scale(1.16);
  z-index: 2;
}
.lf-gallery-node:focus-visible { outline: none; }
.lf-gallery-node-thumb {
  display: block;
  width: 72px; height: 72px;
  border-radius: 50%;
  background-color: var(--surface);
  background-size: cover;
  background-position: center;
  border: 1.5px solid var(--ink-faint);
  box-shadow: var(--shadow-sm);
  transition: border-color .25s var(--ease-out);
}
.lf-gallery-node--exclusive .lf-gallery-node-thumb {
  border-color: var(--accent);
  border-width: 2px;
}
.lf-gallery-node:hover .lf-gallery-node-thumb,
.lf-gallery-node:focus-visible .lf-gallery-node-thumb {
  border-color: var(--accent);
}
.lf-gallery-node-label {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .04em;
  color: var(--ink-soft);
  max-width: 96px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0;
  transform: translateY(-2px);
  transition: opacity .2s ease, transform .2s ease;
}
.lf-gallery-node:hover .lf-gallery-node-label,
.lf-gallery-node:focus-visible .lf-gallery-node-label {
  opacity: 1;
  transform: translateY(0);
}

/* ── MOBILE / NO-HOVER FALLBACK ── */
.lf-gallery-mobile {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 20px 14px;
  padding: 8px 20px 0;
}
.lf-gallery-mobile .lf-gallery-node {
  position: static;
  transform: none;
  width: 100%;
  margin: 0 auto;
}
.lf-gallery-mobile .lf-gallery-node:hover,
.lf-gallery-mobile .lf-gallery-node:focus-visible {
  transform: scale(1.06);
}
.lf-gallery-mobile .lf-gallery-node-label {
  opacity: .85;
  transform: none;
}

/* ── SHARED MODAL ── */
.lf-gallery-modal {
  position: fixed; inset: 0; z-index: 9000;
  display: none;
  align-items: center; justify-content: center;
}
.lf-gallery-modal.is-open { display: flex; }
.lf-gallery-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(10, 10, 10, .82);
}
.lf-gallery-modal-panel {
  position: relative;
  z-index: 1;
  width: min(92vw, 640px);
  max-height: 86vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: 20px;
  box-shadow: var(--shadow-lg);
}
.lf-gallery-modal-close {
  position: absolute; top: 10px; right: 14px;
  background: none; border: none;
  font-size: 1.6rem; line-height: 1;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 6px;
}
.lf-gallery-modal-media {
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--paper);
}
.lf-gallery-modal-media img,
.lf-gallery-modal-media video {
  width: 100%;
  display: block;
  max-height: 60vh;
  object-fit: contain;
}
.lf-gallery-modal-meta { margin-top: 14px; }
.lf-gallery-modal-tag {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .1em;
  color: var(--accent-text);
  text-transform: uppercase;
}
.lf-gallery-modal-title {
  font-size: var(--text-lg);
  margin: 6px 0 10px;
}
.lf-gallery-modal-link {
  display: inline-block;
  font-size: var(--text-sm);
  color: var(--accent-text);
}

@media (max-width: 768px) {
  .lf-gallery-hint { font-size: .6rem; padding: 0 20px; }
  .lf-gallery-modal-panel { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .lf-gallery-node,
  .lf-gallery-node-thumb,
  .lf-gallery-node-label {
    transition: none;
  }
}