/* ============================================================
   MIDIOS MEDIA GROUP — v3 "THE LONG TAKE"   (2026-09-23)
   ------------------------------------------------------------
   Loaded after tokens.css and mmg.css on every MMG page.
   §0 palette applies division-wide; every other section is a
   component that only renders where its markup exists.

   Organizing idea: the site plays as one continuous shot —
   idea → development → production → launch → audience →
   distribution → monetization → lasting IP.

   Signal colour: TALLY RED — the light on a camera or in a
   booth that means "live". Used only for live/recording
   states (REC dot, running timecode, the active stage).
   Never decorative, never body text.
   ============================================================ */

/* ---------- §0 PALETTE — warm black, bone, gold, tally ---------- */
[data-division="media"] {
  --ground:        #0F0D0B;
  --ground-raised: #181512;
  --ground-deep:   #0A0908;
  --line:          #2B2621;
  --type:          #EFEAE0;   /* bone          16.2:1 on ground */
  --type-2:        #ABA396;   /* secondary      8.0:1 */
  --type-3:        #948B7E;   /* labels         5.9:1 on ground, 5.5:1 on raised */
  --accent:        #C39A55;   /* gold           7.6:1 */
  --accent-dim:    #6F5A33;
  --on-accent:     #0F0D0B;
  --tally:         #F2584A;   /* live state  ≥4.9:1 on every dark surface */
  --paper:         #EEE8DC;   /* the one light surface */
  --paper-ink:     #1A1714;   /* 15.0:1 on paper */
  --paper-ink-2:   #5A5248;   /* 6.6:1 on paper */
  --paper-line:    #CFC6B5;
  --tc: var(--ui);
}

/* iOS < 16.2 drops color-mix(); literal rgba for the sticky bar. */
[data-division="media"] .masthead--film { background: rgba(15, 13, 11, .9); }

/* Shared small parts */
.tc {
  font-family: var(--tc);
  font-variant-numeric: tabular-nums;
  letter-spacing: .08em;
  font-size: .75rem;
  text-transform: uppercase;
  color: var(--type-3);
}
.rec-dot {
  display: inline-block;
  width: .55rem; height: .55rem;
  border-radius: 50%;
  background: var(--tally);
  vertical-align: .05em;
  margin-right: .5rem;
}
@media (prefers-reduced-motion: no-preference) {
  .rec-dot { animation: tally 1.6s steps(1) infinite; }
  @keyframes tally { 50% { opacity: .25; } }
}
.label-illus {
  display: inline-block;
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--type-3);
  border: 1px solid var(--line);
  padding: .2rem .55rem;
}

/* ---------- §1 COLD OPEN (home hero) ---------- */
.coldopen {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  min-height: 88vh;
  min-height: min(92svh, 62rem);
  display: grid;
  align-content: center;
  padding: clamp(5rem, 12vh, 8rem) var(--gutter) clamp(3rem, 7vh, 5rem);
  border-bottom: 1px solid var(--line);
  background: var(--ground-deep);
}
.coldopen-plate {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(60% 50% at 78% 22%, rgba(195, 154, 85, .16) 0%, transparent 60%),
    radial-gradient(55% 45% at 12% 88%, rgba(232, 64, 47, .07) 0%, transparent 60%),
    linear-gradient(170deg, #15120F 0%, #0B0A08 55%, #080706 100%);
}
/* Light leak: one slow push, like a lens catching a practical. */
.coldopen-plate::before {
  content: "";
  position: absolute;
  inset: -20%;
  background: radial-gradient(40% 30% at 70% 30%, rgba(239, 206, 150, .10), transparent 70%);
  transform: translate3d(0, 0, 0) scale(1);
}
@media (prefers-reduced-motion: no-preference) {
  .coldopen-plate::before { animation: leak 14s ease-in-out infinite alternate; }
  @keyframes leak { to { transform: translate3d(-8%, 6%, 0) scale(1.12); } }
}
.coldopen-inner {
  position: relative; z-index: 5;
  width: 100%;
  max-width: 78rem;
}
.slate-line {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: .4rem 1.5rem;
  margin: 0 0 clamp(2rem, 5vh, 3rem);
  max-width: none;
}
.slate-line .tc-live { color: var(--type); }
.coldopen h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(3.1rem, 1.2rem + 8.4vw, 9.5rem);
  line-height: .92;
  letter-spacing: -.025em;
  max-width: 12ch;
  margin: 0;
}
.coldopen h1 .beat { display: block; }
.coldopen h1 em { font-style: italic; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .js .coldopen h1 .beat { opacity: 0; transform: translateY(.35em); animation: beat .9s cubic-bezier(.2,.7,.3,1) forwards; }
  .js .coldopen h1 .beat:nth-child(2) { animation-delay: .35s; }
  .js .coldopen h1 .beat:nth-child(3) { animation-delay: .7s; }
  @keyframes beat { to { opacity: 1; transform: none; } }
}
.coldopen .lede {
  margin-top: clamp(1.75rem, 4vh, 2.5rem);
  max-width: 44ch;
  color: var(--type-2);
  font-size: clamp(1.1rem, 1rem + .45vw, 1.35rem);
}
.coldopen .actions { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: 2.25rem; max-width: none; }
.playhead-cue {
  position: absolute; z-index: 5;
  left: var(--gutter); right: var(--gutter); bottom: clamp(1.25rem, 4vh, 3.25rem);
  height: 1px; background: var(--line);
}
.playhead-cue::after {
  content: ""; position: absolute; top: -4px; left: 0;
  width: 1px; height: 9px; background: var(--tally);
}
@media (prefers-reduced-motion: no-preference) {
  .playhead-cue::after { animation: cue 12s linear infinite; }
  @keyframes cue { to { left: 100%; } }
}

/* ---------- §2 PREMISE — editorial spread ---------- */
.premise {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: center;
  max-width: 78rem;
}
.premise h2 {
  font-size: clamp(2.3rem, 1.4rem + 3.6vw, 5rem);
  line-height: 1;
  letter-spacing: -.015em;
  max-width: 11ch;
  font-weight: 400;
}
.premise h2 em { color: var(--accent); }
.premise p { color: var(--type-2); font-size: var(--step-1); line-height: 1.55; }
.premise p strong { color: var(--type); font-weight: 500; }
@media (max-width: 820px) { .premise { grid-template-columns: minmax(0, 1fr); } }

/* ---------- §3 THE LONG TAKE — signature timeline ---------- */
.longtake { max-width: 84rem; }
.longtake-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end;
  gap: 1rem 2rem; margin-bottom: clamp(2rem, 4vw, 3rem);
}
.longtake-head h2 { font-size: var(--step-3); line-height: 1.05; max-width: 16ch; font-weight: 400; }
.longtake-head .tc { display: flex; gap: 1rem; align-items: center; }

/* Track: eight clips on a timeline. */
.lt-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 3px;
  padding: 1.6rem 0 0;
  margin: 0; list-style: none;
}
.lt-ruler {
  position: absolute; top: 0; left: 0; right: 0; height: 1.1rem;
  display: grid; grid-template-columns: repeat(8, minmax(0, 1fr));
  pointer-events: none;
}
.lt-ruler span {
  font-size: .75rem; color: var(--type-3); font-variant-numeric: tabular-nums;
  border-left: 1px solid var(--line); padding-left: .35rem; line-height: 1;
}
.lt-clip {
  appearance: none; -webkit-appearance: none;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: .9rem; width: 100%;
  min-height: 5.5rem;
  padding: .8rem .8rem .75rem;
  background: var(--ground-raised);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-dim);
  color: var(--type-2);
  font: inherit; text-align: left; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.lt-clip .n { font-size: .75rem; color: var(--type-3); font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.lt-clip .t { font-family: var(--display); font-size: clamp(.95rem, .8rem + .45vw, 1.2rem); line-height: 1.15; color: var(--type); }
.lt-clip:hover { background: #1F1B17; }
.lt-clip[aria-selected="true"] { border-top-color: var(--tally); background: #221D18; }
.lt-clip[aria-selected="true"] .n { color: var(--tally); }
.lt-clip:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.lt-playhead {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: 2px; background: var(--tally);
  pointer-events: none; display: none;
  transform: translateX(var(--ph, 0px));
}
.lt-playhead::before {
  content: ""; position: absolute; top: 0; left: -5px;
  border: 6px solid transparent; border-top: 8px solid var(--tally);
}
.js .lt-playhead { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .lt-playhead { transition: transform .9s cubic-bezier(.45, 0, .2, 1); }
}

/* Viewer: the active stage, big. */
.lt-panels { margin-top: 3px; }
.lt-panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 0;
  border: 1px solid var(--line);
  background: var(--ground-deep);
  min-height: 22rem;
}
.lt-panel[hidden] { display: none; }
.lt-motif {
  position: relative; overflow: hidden;
  border-right: 1px solid var(--line);
  display: grid; place-items: center;
  min-height: 16rem;
  background:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px) 0 0 / 100% 2.5rem,
    var(--ground-deep);
}
.lt-motif svg { width: min(78%, 22rem); height: auto; color: var(--accent); }
.lt-motif .live { color: var(--tally); }
.lt-motif .tc { position: absolute; left: 1rem; top: .9rem; }
.lt-copy { padding: clamp(1.5rem, 3.5vw, 3rem); display: flex; flex-direction: column; gap: 1.1rem; justify-content: center; }
.lt-copy .stage { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.lt-copy h3 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); line-height: 1.05; font-weight: 400; margin: 0; }
.lt-copy p { color: var(--type-2); margin: 0; }
.lt-copy .gate {
  margin-top: .4rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .9rem; color: var(--type-2);
}
.lt-copy .gate b { color: var(--type); font-weight: 500; }
.longtake-foot { margin-top: 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; align-items: center; }
.longtake-foot p { font-family: var(--display); font-style: italic; font-size: var(--step-1); color: var(--type); margin: 0; }

/* Motif motion — each one plays only while its panel is on screen. */
@media (prefers-reduced-motion: no-preference) {
  .lt-panel .m-cursor { animation: blink 1.1s steps(1) infinite; }
  .lt-panel .m-bars rect { animation: bar 1.4s ease-in-out infinite alternate; transform-origin: bottom; transform-box: fill-box; }
  .lt-panel .m-bars rect:nth-child(2n) { animation-delay: -.4s; }
  .lt-panel .m-bars rect:nth-child(3n) { animation-delay: -.8s; }
  .lt-panel .m-sweep { animation: spin 3s linear infinite; transform-origin: 100px 100px; }
  .lt-panel .m-ring { animation: ring 3.2s ease-out infinite; transform-origin: 100px 100px; transform-box: view-box; }
  .lt-panel .m-ring:nth-of-type(2) { animation-delay: 1.07s; }
  .lt-panel .m-ring:nth-of-type(3) { animation-delay: 2.14s; }
  .lt-panel .m-dash { stroke-dasharray: 6 8; animation: dash 2.4s linear infinite; }
  @keyframes blink { 50% { opacity: 0; } }
  @keyframes bar { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
  @keyframes spin { to { transform: rotate(360deg); } }
  @keyframes ring { from { transform: scale(.2); opacity: .9; } to { transform: scale(1); opacity: 0; } }
  @keyframes dash { to { stroke-dashoffset: -28; } }
}

/* No JS: every stage shown, in order, as a readable reel. */
html:not(.js) .lt-panel[hidden] { display: grid; }
html:not(.js) .lt-panel + .lt-panel { margin-top: 3px; }

@media (max-width: 900px) {
  .lt-track { grid-template-columns: repeat(4, minmax(0, 1fr)); padding-top: 0; }
  .lt-ruler, .js .lt-playhead { display: none; }
  .lt-panel { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .lt-motif { border-right: 0; border-bottom: 1px solid var(--line); min-height: 11rem; }
  .lt-motif svg { width: min(60%, 15rem); }
}
@media (max-width: 600px) {
  .lt-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lt-clip { min-height: 0; padding: .7rem .75rem; gap: .35rem; }
  .lt-clip .t { font-size: 1.05rem; }
}

/* ---------- §4 WHAT WE MAKE — four acts ---------- */
.wordband {
  overflow: hidden;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.1rem 0; margin: 0 calc(var(--gutter) * -1) clamp(2.5rem, 5vw, 4rem);
  white-space: nowrap;
}
.wordband-track { display: inline-flex; gap: 2.5rem; padding-left: var(--gutter); }
.wordband .run { display: inline-flex; gap: 2.5rem; }
.wordband .run span {
  font-family: var(--display); font-size: clamp(1.6rem, 1rem + 2.4vw, 3rem);
  line-height: 1; color: var(--type);
}
.wordband .run span:nth-child(even) { font-style: italic; color: var(--accent); }
@media (prefers-reduced-motion: no-preference) {
  .js .wordband-track { animation: crawl 48s linear infinite; }
  .wordband:hover .wordband-track { animation-play-state: paused; }
  @keyframes crawl { to { transform: translateX(-50%); } }
}
@media (prefers-reduced-motion: reduce) { .wordband { white-space: normal; } .wordband-track, .wordband .run { flex-wrap: wrap; gap: .5rem 1.5rem; } .wordband [aria-hidden="true"] { display: none; } }

.acts {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 3px;
  min-height: 30rem;
  max-width: 84rem;
}
.act {
  position: relative; overflow: hidden;
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: clamp(1.25rem, 2.5vw, 2rem);
  border: 1px solid var(--line);
  background: var(--ground-raised);
  transition: flex-grow .6s cubic-bezier(.2,.7,.3,1), background-color .3s ease;
}
.act::before {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .5;
  pointer-events: none;
}
.act--develop::before { background: repeating-linear-gradient(90deg, transparent 0 39px, rgba(195,154,85,.10) 39px 40px), repeating-linear-gradient(0deg, transparent 0 39px, rgba(195,154,85,.10) 39px 40px); }
.act--produce::before { background: radial-gradient(circle at 70% 30%, rgba(239,206,150,.14), transparent 55%); }
.act--launch::before  { background: repeating-linear-gradient(90deg, rgba(195,154,85,.12) 0 6px, transparent 6px 22px); mask: linear-gradient(to top, #000, transparent 70%); -webkit-mask: linear-gradient(to top, #000, transparent 70%); }
.act--own::before     { background: repeating-linear-gradient(0deg, transparent 0 27px, rgba(195,154,85,.12) 27px 28px); }
.act > * { position: relative; z-index: 1; }
.act .act-no { font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--type-3); }
.act h3 { font-size: clamp(1.9rem, 1.2rem + 2.2vw, 3.1rem); line-height: 1; font-weight: 400; margin: .75rem 0 0; }
.act .act-line { font-family: var(--display); font-style: italic; color: var(--accent); margin: .6rem 0 0; }
.act ul { list-style: none; margin: 1.5rem 0 0; padding: 0; }
.act li { padding: .55rem 0; border-top: 1px solid var(--line); color: var(--type-2); font-size: .95rem; }
.act li a { color: var(--type); text-decoration: none; }
.act li a:hover { color: var(--accent); }
.act li .sel { font-size: .75rem; color: var(--type-3); margin-left: .35rem; }
@media (min-width: 1101px) and (hover: hover) {
  .acts:hover .act { flex-grow: .8; }
  .acts .act:hover, .acts .act:focus-within { flex-grow: 1.6; background: #1E1A16; }
}
@media (max-width: 1100px) {
  .acts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; }
  .act { min-height: 22rem; }
}
@media (max-width: 600px) {
  .acts { grid-template-columns: minmax(0, 1fr); }
  .act { min-height: 0; }
}

/* ---------- §5 FOR BRANDS — call sheet split ---------- */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem); align-items: center; max-width: 84rem;
}
.split h2 { font-size: var(--step-3); line-height: 1.05; font-weight: 400; max-width: 14ch; }
.split .body-copy p { color: var(--type-2); }
@media (max-width: 900px) { .split { grid-template-columns: minmax(0, 1fr); } }

.callsheet {
  border: 1px solid var(--line);
  background: var(--ground-deep);
  font-variant-numeric: tabular-nums;
}
.callsheet-head {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  padding: .9rem 1.1rem; border-bottom: 1px solid var(--line);
}
.callsheet-head b, .callsheet-head .label-illus { white-space: nowrap; }
.callsheet-head b { font-weight: 500; letter-spacing: .16em; text-transform: uppercase; font-size: .75rem; color: var(--type); }
.callsheet dl { margin: 0; display: grid; grid-template-columns: 9rem minmax(0, 1fr); }
.callsheet dt, .callsheet dd { margin: 0; padding: .85rem 1.1rem; border-bottom: 1px solid var(--line); }
.callsheet dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--type-3); border-right: 1px solid var(--line); }
.callsheet dd { color: var(--type); font-size: .95rem; }
.callsheet dd:last-of-type, .callsheet dt:last-of-type { border-bottom: 0; }
@media (max-width: 480px) { .callsheet dl { grid-template-columns: minmax(0, 1fr); } .callsheet dt { border-right: 0; border-bottom: 0; padding-bottom: 0; } }

/* ---------- §6 FOR ARTISTS — waveform room ---------- */
.room { position: relative; overflow: hidden; background: var(--ground-deep); }
.wave {
  display: flex; align-items: center; gap: 3px;
  height: clamp(7rem, 16vw, 12rem);
  margin: 0 0 clamp(2rem, 5vw, 3.5rem);
  max-width: 84rem;
}
.wave i {
  flex: 1 1 0; min-width: 1px;
  background: var(--accent-dim);
  height: calc(var(--h, .3) * 100%);
  transition: height .25s ease, background-color .25s ease;
}
.wave i.hot { background: var(--accent); }
.room .split h2 em { color: var(--accent); }

/* ---------- §7 THE STANDARD — the one paper surface ---------- */
.band--paper {
  background: var(--paper);
  color: var(--paper-ink);
  --type: var(--paper-ink);
  --type-2: var(--paper-ink-2);
  --type-3: var(--paper-ink-2);
  --line: var(--paper-line);
  --accent: #7A5A22;       /* gold, darkened for paper: 6.0:1 */
  --accent-dim: #B89A63;
  --on-accent: #FFFFFF;
}
.band--paper .credit > .rail { color: var(--paper-ink-2); border-top-color: var(--paper-line); }
.liner { list-style: none; margin: 0; padding: 0; counter-reset: liner; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3.5rem); }
.liner li { counter-increment: liner; border-top: 2px solid var(--paper-ink); padding-top: 1.25rem; }
.liner li::before {
  content: counter(liner, decimal-leading-zero);
  display: block; font-size: .75rem; letter-spacing: .16em; color: var(--paper-ink-2); margin-bottom: 1rem;
}
.liner h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); line-height: 1.12; font-weight: 400; margin: 0 0 .8rem; }
.liner p { color: var(--paper-ink-2); margin: 0; font-size: .98rem; }
@media (max-width: 900px) { .liner { grid-template-columns: minmax(0, 1fr); } }

/* ---------- §8 THE HOUSE ---------- */
.houseline { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.5rem 3rem; max-width: 84rem; }
.houseline svg { height: clamp(2.6rem, 2rem + 2vw, 4.25rem); width: auto; color: var(--type); flex: none; }
.houseline p { margin: 0; color: var(--type-2); max-width: 60ch; }
.houseline p b { color: var(--type); font-weight: 500; }

/* ---------- §9 CLOSER — slate-board doors ---------- */
.closer-v3 h2 { font-size: clamp(2.6rem, 1.4rem + 5vw, 6rem); line-height: .95; font-weight: 400; letter-spacing: -.02em; margin-bottom: clamp(2rem, 4vw, 3rem); }
.slates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; max-width: 84rem; }
.slate-card {
  display: flex; flex-direction: column; gap: 1.2rem; height: 100%;
  padding: 1.25rem; min-height: 17rem;
  text-decoration: none; color: var(--type);
  background: var(--ground-raised); border: 1px solid var(--line);
  transition: transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.slate-card .clap {
  height: .9rem;
  background: repeating-linear-gradient(-45deg, var(--type) 0 10px, var(--ground-raised) 10px 20px);
  opacity: .8; margin: -1.25rem -1.25rem 0;
}
.slate-card dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .45rem .9rem; font-size: .9rem; }
.slate-card dt { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--type-3); padding-top: .15rem; }
.slate-card dd { margin: 0; color: var(--type-2); }
.slate-card h3 { font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); line-height: 1.1; font-weight: 400; margin: 0; }
.slate-card .go { margin-top: auto; display: flex; align-items: center; gap: .55rem; color: var(--accent); font-weight: 500; font-size: .95rem; }
.slate-card .go::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: var(--line); transition: background-color .2s ease; }
.slate-card:hover, .slate-card:focus-visible { background: #1F1B17; border-color: var(--accent-dim); }
.slate-card:hover .go::before, .slate-card:focus-visible .go::before { background: var(--tally); }
@media (prefers-reduced-motion: no-preference) { .slate-card:hover { transform: translateY(-4px); } }
@media (max-width: 1100px) { .slates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .slates { grid-template-columns: minmax(0, 1fr); } .slate-card { min-height: 0; } }

/* ---------- INTERIOR: offers, stage table, operating gates ---------- */
.offers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; max-width: 84rem; }
.offer { background: var(--ground-raised); border: 1px solid var(--line); padding: 1.5rem; display: flex; flex-direction: column; gap: .85rem; }
.offer .shape { font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
.offer h3 { font-size: clamp(1.3rem, 1.1rem + .7vw, 1.65rem); line-height: 1.12; font-weight: 400; margin: 0; }
.offer p { color: var(--type-2); margin: 0; font-size: .95rem; }
.offer .for { margin-top: auto; padding-top: .85rem; border-top: 1px solid var(--line); font-size: .88rem; color: var(--type-3); }
.offer .for b { color: var(--type-2); font-weight: 500; }
@media (max-width: 1000px) { .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .offers { grid-template-columns: minmax(0, 1fr); } }

.stagebook { list-style: none; margin: 0; padding: 0; counter-reset: sb; max-width: 84rem; }
.stagebook > li {
  display: grid; grid-template-columns: 7rem minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem clamp(1.25rem, 3vw, 2.5rem);
  padding: 1.75rem 0; border-top: 1px solid var(--line);
}
.stagebook > li:last-child { border-bottom: 1px solid var(--line); }
.stagebook .tc-cell { font-variant-numeric: tabular-nums; color: var(--accent); font-size: .85rem; letter-spacing: .08em; padding-top: .35rem; }
.stagebook h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); font-weight: 400; margin: 0 0 .5rem; }
.stagebook p { margin: 0; color: var(--type-2); font-size: .95rem; }
.stagebook .k { display: block; font-size: .75rem; letter-spacing: .14em; text-transform: uppercase; color: var(--type-3); margin-bottom: .45rem; }
@media (max-width: 900px) {
  .stagebook > li { grid-template-columns: minmax(0, 1fr); gap: .9rem; }
}

.gates { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; max-width: 84rem; }
.gates li { background: var(--ground-raised); border: 1px solid var(--line); padding: 1rem; display: flex; flex-direction: column; gap: .6rem; }
.gates .n { font-size: .75rem; color: var(--type-3); letter-spacing: .1em; }
.gates b { font-family: var(--display); font-weight: 400; font-size: 1.15rem; color: var(--type); }
.gates p { margin: 0; font-size: .88rem; color: var(--type-2); }
.gates .sign { margin-top: auto; padding-top: .6rem; border-top: 1px solid var(--line); font-size: .8rem; color: var(--accent); }
@media (max-width: 1200px) { .gates { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px) { .gates { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .gates { grid-template-columns: minmax(0, 1fr); } }

.interior-kicker { display: flex; align-items: center; gap: .9rem; margin-bottom: 1.25rem; max-width: none; }

/* ---------- touch ---------- */
@media (pointer: coarse) {
  .act li a { display: inline-block; padding: .35rem 0; }
}
.houseline h2 { margin-bottom: .25rem; }
.band--paper .offer { background: #F7F2E8; border-color: var(--paper-line); }
.band--paper .offer .for b { color: var(--paper-ink); }
.band--paper .quiet { color: var(--paper-ink-2); }
/* .ledger / .liner reset margin:0, which cancels the .stack-lg rhythm. Restore it. */
[data-division="media"] .stack-lg > .ledger,
[data-division="media"] .stack-lg > .liner,
[data-division="media"] .stack-lg > .liner + *,
[data-division="media"] .stack-lg > .ledger + * { margin-top: 2.25rem; }