/* ============================================================
   Tim Kloppenburg — Content Manager
   Concept: the site IS his run of show. A production document
   read under a desk lamp at FOH, with the scroll acting as the
   show clock and each section carrying a live cue status.

   Deliberately NOT the Wolf Creek house style: no condensed
   uppercase display type, no kicker rules, no stat strip, no
   pill buttons. Authority here comes from precision — fielded
   data, dot leaders, tables, revision history.
   ============================================================ */

:root{
  /* --- the room, lights down --- */
  --bg:        #0A0B0D;   /* the dark beyond the lamp */
  --paper:     #14161A;   /* the document itself */
  --paper-2:   #191C21;   /* raised rows / hover */
  --paper-3:   #1E2229;

  --text:      #E9ECF1;
  --text-soft: #AEB6C1;
  --muted:     #78818E;
  --faint:     #545C68;

  /* --- the accent: cue-light green (locked as the site default) --- */
  --accent:      #3FD07E;
  --accent-2:    #77E6AA;
  --accent-deep: #1C8A50;
  --accent-ink:  #04170E;   /* dark text to sit on the accent */

  /* --- functional colours: these MEAN something on a cue sheet --- */
  --go:      #3FD07E;
  --standby: #F0A62B;
  --done:    #5A6470;

  --rule:      rgba(255,255,255,.14);
  --rule-soft: rgba(255,255,255,.07);
  --rule-hard: rgba(255,255,255,.24);

  --sheet-w: 940px;
  --pad: clamp(18px, 4.2vw, 56px);
  --rail: clamp(0px, 6vw, 92px);   /* space the binder rail occupies */

  --font-head: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-sans: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --ease: cubic-bezier(.2,.7,.2,1);
  --ease-soft: cubic-bezier(.16,1,.3,1);
}

/* ---------- Palettes (draft picker) ----------
   Cue green is the locked default, defined in :root above. Only the accent
   changes per palette; the functional go/standby colours stay put, because
   on a cue sheet those two are not a style choice — and the amber .lamp
   wash stays in every palette, because the room light is a desk lamp
   regardless of what colour the UI runs. */
[data-palette="lamp"]{     --accent:#F0A62B; --accent-2:#FFC663; --accent-deep:#A96C08; --accent-ink:#160F02; }
[data-palette="signal"]{   --accent:#45BFF5; --accent-2:#8AD8FA; --accent-deep:#0E7BAE; --accent-ink:#04161F; }
[data-palette="redhead"]{  --accent:#FF6A3D; --accent-2:#FF9670; --accent-deep:#C0400F; --accent-ink:#1D0903; }
[data-palette="paper"]{    --accent:#C2CBD6; --accent-2:#E2E8EF; --accent-deep:#7C8794; --accent-ink:#0B0E12; }

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font-sans); font-size:16.5px; line-height:1.68;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
/* height:auto is load-bearing. width/height attributes on an <img> set a
   presentational height, and CSS aspect-ratio cannot override it unless the
   height is auto — without this the cover portrait rendered 296x1250 and
   object-fit:cover zoomed straight into Tim's face. */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; cursor:pointer; }
table{ border-collapse:collapse; width:100%; }
.mono{ font-family:var(--font-mono); }
code{ font-family:var(--font-mono); font-size:.9em; color:var(--accent-2); }
::selection{ background:var(--accent); color:var(--accent-ink); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===================== STAGE LIGHTING / TEXTURE ==================== */
/* One warm source from up-left, falling off hard. This is the whole
   backstage feel — a document lit by one lamp in a dark room. */
.lamp{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58% 44% at 22% 0%,  rgba(240,166,43,.16), transparent 68%),
    radial-gradient(48% 46% at 88% 12%, rgba(60,110,180,.09), transparent 66%),
    radial-gradient(120% 90% at 50% 120%, rgba(0,0,0,.6), transparent 60%);
}
.grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* corner crop marks — the page as a printed document */
.cropmarks i{
  position:fixed; width:14px; height:14px; z-index:3; pointer-events:none;
  border:0 solid var(--rule);
}
.cropmarks i:nth-child(1){ top:12px;    left:12px;  border-top-width:1px; border-left-width:1px; }
.cropmarks i:nth-child(2){ top:12px;    right:12px; border-top-width:1px; border-right-width:1px; }
.cropmarks i:nth-child(3){ bottom:12px; left:12px;  border-bottom-width:1px; border-left-width:1px; }
.cropmarks i:nth-child(4){ bottom:12px; right:12px; border-bottom-width:1px; border-right-width:1px; }

/* ========================= SHOW STATUS BAR ========================= */
.statusbar{
  position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(10,11,13,.9); backdrop-filter:blur(14px) saturate(130%);
  border-bottom:1px solid var(--rule-soft);
}
.statusbar__inner{
  display:flex; align-items:center; gap:22px;
  padding:11px clamp(16px, 3vw, 30px);
}
.doc-id{ display:flex; align-items:center; gap:11px; flex:none; }
.doc-id__mark{
  width:34px; height:34px; flex:none; display:grid; place-items:center;
  border:1px solid var(--accent); color:var(--accent);
  font-family:var(--font-mono); font-weight:600; font-size:12px; letter-spacing:.06em;
}
.doc-id__text{ display:flex; flex-direction:column; line-height:1.25; }
.doc-id__text b{
  font-family:var(--font-mono); font-size:11.5px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--text);
}
.doc-id__text span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; color:var(--muted);
}

/* the live show-clock readout */
.showclock{
  display:flex; align-items:center; gap:12px; margin-left:auto;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); white-space:nowrap;
}
.showclock__sep{ width:1px; height:11px; background:var(--rule); }
.showclock__state{ color:var(--standby); font-weight:600; }
.showclock__cue{ color:var(--text-soft); }
.showclock__tc{ color:var(--accent); font-weight:500; letter-spacing:.1em; }

.lamp-dot{
  width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--standby); box-shadow:0 0 10px -1px var(--standby);
  transition:background .3s var(--ease), box-shadow .3s var(--ease);
}
.lamp-dot[data-state="go"]{ background:var(--go); box-shadow:0 0 12px -1px var(--go); }
.lamp-dot[data-state="complete"]{ background:var(--done); box-shadow:none; }

/* scroll progress reads as the show running — a thin bar under the status bar */
.statusbar__rule{ height:1px; background:var(--rule-soft); }
.statusbar__rule span{
  display:block; height:100%; width:100%; transform:scaleX(0); transform-origin:0 50%;
  background:linear-gradient(90deg, var(--accent-deep), var(--accent));
}

/* The status bar stays pure instrumentation — doc id and clock, nothing else.
   Navigation lives in the binder rail and in this drawer, which is how a
   document's contents page works. A seven-item nav strip also overflowed
   1440px, so this is the honest fix rather than shrinking the type. */
.nav{
  position:fixed; inset:0 0 0 auto; width:min(84vw, 336px); z-index:55;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
  gap:2px; padding:0 30px;
  background:var(--bg); border-left:1px solid var(--rule);
  transform:translateX(100%); transition:transform .35s var(--ease);
}
.nav.open{ transform:none; }
.nav a{
  display:flex; align-items:baseline; gap:14px; width:100%; padding:13px 0;
  border-bottom:1px solid var(--rule-soft);
  font-family:var(--font-mono); font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
  transition:color .18s var(--ease);
}
.nav a i{ font-style:normal; color:var(--faint); font-size:11px; }
.nav a:hover{ color:var(--accent); }
.nav a:hover i{ color:var(--accent-deep); }
.nav a.current{ color:var(--text); }
.nav a.current i{ color:var(--accent); }

.nav-toggle{
  display:flex; align-items:center; gap:9px; flex:none; margin-left:4px;
  background:none; border:1px solid var(--rule-soft); padding:7px 12px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted);
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.nav-toggle:hover{ color:var(--text); border-color:var(--rule); }
.nav-toggle__bars{ display:flex; flex-direction:column; gap:3px; width:13px; }
.nav-toggle__bars span{ display:block; height:1.5px; background:currentColor; }

/* ========================== BINDER RAIL =========================== */
/* Punch holes + a cue index down the left margin. Pure document furniture. */
.binder{
  position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:20;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:30px; pointer-events:none;
}
.binder .punch{
  position:absolute; left:50%; width:11px; height:11px; margin-left:-5.5px;
  border-radius:50%; background:var(--bg);
  box-shadow:inset 0 1px 2px rgba(0,0,0,.9), 0 0 0 1px var(--rule-soft);
}
.binder .punch:nth-child(1){ top:22%; }
.binder .punch:nth-child(2){ top:50%; }
.binder .punch:nth-child(3){ top:78%; }

.binder__index{
  list-style:none; margin:0; padding:0; display:flex; flex-direction:column;
  gap:14px; pointer-events:auto;
}
.binder__index li{
  position:relative;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  color:var(--faint); cursor:pointer; padding:3px 6px;
  border-left:1px solid transparent;
  transition:color .25s var(--ease), border-color .25s var(--ease);
}
.binder__index li:hover{ color:var(--text-soft); }
.binder__index li.current{ color:var(--accent); border-left-color:var(--accent); }
.binder__index li.done{ color:var(--done); }
/* the section name slides out of the margin on hover — the rail is the nav */
.binder__index span{
  position:absolute; left:calc(100% + 10px); top:50%; transform:translate(-6px,-50%);
  white-space:nowrap; opacity:0; pointer-events:none;
  padding:5px 9px; background:var(--paper); border:1px solid var(--rule-soft);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-soft);
  transition:opacity .2s var(--ease), transform .2s var(--ease);
}
.binder__index li:hover span{ opacity:1; transform:translate(0,-50%); }

/* ============================== PAGE ============================== */
.page{ position:relative; z-index:2; }
.sheet{
  width:100%; max-width:var(--sheet-w);
  margin-inline:auto; padding-inline:var(--pad);
  padding-left:max(var(--pad), var(--rail));
}

/* ============================== TYPE ============================== */
h1,h2,h3{ font-family:var(--font-head); font-weight:600; letter-spacing:-.015em; margin:0; }
h1{ font-size:clamp(33px, 4.3vw, 58px); line-height:1.08; }
h2{ font-size:clamp(26px, 2.7vw, 38px); line-height:1.12; }
h3{ font-size:clamp(19px, 1.5vw, 23px); line-height:1.2; letter-spacing:-.01em; }
p{ margin:0 0 17px; }
a.underline, .cue__lede a, .operator__body a{ border-bottom:1px solid var(--accent-deep); }

/* dot leaders — the signature typographic device of a printed run of show */
.leaders{
  flex:1 1 auto; min-width:20px; align-self:flex-end; height:1px;
  margin-bottom:.5em;
  background-image:radial-gradient(circle, var(--rule) 1px, transparent 1px);
  background-size:6px 1px; background-repeat:repeat-x; background-position:0 50%;
}

/* ============================ COVER PAGE ========================== */
.cover{
  position:relative; display:flex; flex-direction:column; justify-content:center;
  padding-top:clamp(110px, 15vh, 170px); padding-bottom:clamp(70px, 10vh, 120px);
  /* CAPPED deliberately: an uncapped svh min-height with the content pinned to
     one edge dumps all the slack in one place on a tall monitor. */
  min-height:min(96svh, 1040px);
}
.stamp{
  display:inline-block; margin:0 0 34px;
  padding:6px 12px; border:1px solid var(--accent-deep); color:var(--accent);
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase;
  transform:rotate(-1.2deg); transform-origin:left center;
}
.cover__label{
  margin:0 0 14px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.28em; text-transform:uppercase; color:var(--faint);
}
.cover .sheet{ max-width:1200px; }
.cover__inner{
  display:grid; gap:clamp(26px, 4vw, 60px); align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,238px);
}
.cover__portrait{ margin:0; align-self:center; }
/* The portrait is graded to fall off to the page colour at its edges, so it
   needs no frame — a border would just draw a rectangle around the falloff. */
.cover__portrait img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.cover__portrait figcaption{
  margin-top:10px; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.12em; color:var(--faint);
}
.cover__portrait figcaption b{ color:var(--muted); font-weight:600; margin-right:8px; }

.cover__lede{
  margin-top:26px; max-width:60ch;
  font-size:clamp(16.5px, 1.25vw, 19px); color:var(--text-soft);
}
.cover__go{ margin:34px 0 0; }

/* bottom-RIGHT: on the left it collides with the cover button whenever the
   cover is content-height rather than the full capped height */
.turnpage{
  position:absolute; z-index:1; bottom:clamp(20px, 4vh, 40px); right:max(var(--pad), 26px);
  margin:0; font-family:var(--font-mono); font-size:10px;
  letter-spacing:.26em; text-transform:uppercase; color:var(--faint);
}

/* fielded data blocks — the cover sheet of a real document */
.fields{
  margin:38px 0 0; display:grid;
  gap:0 clamp(24px, 3.4vw, 52px);   /* columns must not collide with the next label */
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  border-top:1px solid var(--rule-soft);
}
.fields > div{
  display:flex; gap:14px; align-items:baseline;
  padding:12px 0; border-bottom:1px solid var(--rule-soft);
}
/* Fixed width, not min-width: every value must start at the same x or the
   block stops reading as a fielded document. Long labels wrap instead. */
.fields dt{
  flex:0 0 118px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--faint);
  line-height:1.45;
}
.fields dd{ margin:0; font-size:15px; color:var(--text-soft); }
.fields dd a{ color:var(--accent); }
.fields--wide{ grid-template-columns:1fr; margin-top:34px; }
.ok{ color:var(--go); }

/* ============================= BUTTON ============================= */
/* square, like a stamped form field — not the WCE pill */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 20px; border:1px solid var(--accent); background:transparent;
  color:var(--accent);
  font-family:var(--font-mono); font-size:12px; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase;
  transition:background .2s var(--ease), color .2s var(--ease);
}
.btn:hover{ background:var(--accent); color:var(--accent-ink); }

/* ============================ CUE SHEETS ========================== */
.cue{
  padding-block:clamp(64px, 8vw, 108px);
  border-top:1px solid var(--rule-soft);
  background:linear-gradient(180deg, rgba(255,255,255,.012), transparent 240px);
}
.cue--last{ padding-bottom:clamp(76px, 9vw, 124px); }

.cue__head{
  position:relative;                 /* the drawing rule hangs off this */
  display:flex; align-items:baseline; gap:16px; flex-wrap:wrap;
  padding-bottom:14px; margin-bottom:26px;
  border-bottom:1px solid var(--rule);
}
.cue__no{
  margin:0; flex:none;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
.cue__title{ flex:none; }
.cue__meta{ margin:0; flex:none; }
.cue__status{
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--standby);
  padding:4px 9px; border:1px solid currentColor;
}
.cue__status[data-state="go"]{ color:var(--go); }
.cue__status[data-state="complete"]{ color:var(--done); }

.cue__lede{ max-width:64ch; color:var(--text-soft); font-size:16.5px; margin-bottom:34px; }

/* ---------- the run-of-show table ---------- */
.table-scroll{ overflow-x:auto; margin-top:8px; }
.ros-table{ min-width:600px; font-size:15px; }
.ros-table thead th{
  text-align:left; padding:0 14px 10px 0;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  border-bottom:1px solid var(--rule);
}
.ros-table tbody td{
  padding:16px 14px 16px 0; vertical-align:top;
  border-bottom:1px solid var(--rule-soft); color:var(--text-soft);
}
.ros-table tbody tr{ transition:background .2s var(--ease); }
.ros-table tbody tr:hover{ background:rgba(255,255,255,.022); }
.ros-table__item{
  font-family:var(--font-head); font-weight:600; font-size:16px;
  color:var(--text); white-space:nowrap; padding-right:26px !important;
}
.ros-table td.mono{ color:var(--faint); font-size:12px; letter-spacing:.1em; }
.pill{
  display:inline-block; padding:3px 8px; white-space:nowrap;
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  border:1px solid currentColor;
}
.pill--go{ color:var(--go); }

/* ---------- the iPad ----------
   The run of show open on his tablet. Perspective is long and the X tilt
   small on purpose: the device is over 1300px tall, and rotateX on something
   that tall throws its bottom edge hundreds of px toward the viewer, where a
   short perspective magnifies it ~1.4x — it then projects outside its own box
   and gets sliced by overflow-x. Depth comes from layered translateZ. */
.ipad{
  perspective:2600px; perspective-origin:50% 50%;
  margin-top:6px; padding:30px 34px 46px;
}
.ipad__body{
  position:relative; transform-style:preserve-3d;
  transform:rotateX(6deg) rotateY(-5deg) rotateZ(-.8deg);
  transform-origin:50% 40%;
  padding:16px;                       /* the bezel */
  border-radius:34px;
  background:linear-gradient(152deg, #4A5058 0%, #23272D 26%, #14171B 62%, #0C0E11 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),      /* machined edge highlight */
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -2px 6px rgba(0,0,0,.7),
    0 0 90px -30px rgba(120,170,220,.22);   /* screen glow into the room */
  transition:transform .9s var(--ease-soft);
}
.ipad:not(.js-tilt):hover .ipad__body{ transform:rotateX(2deg) rotateY(-1deg) rotateZ(0deg); }
.ipad__body.is-tilting{ transition:none; }

/* the aluminium slab behind the face, giving the device real thickness */
.ipad__edge{
  position:absolute; inset:-3px; border-radius:37px;
  transform:translateZ(-14px);
  background:linear-gradient(152deg, #2B3037 0%, #101318 55%, #05070A 100%);
  box-shadow:0 70px 90px -46px rgba(0,0,0,1), 0 26px 44px -26px rgba(0,0,0,.92);
}
/* front camera, centred in the top bezel */
.ipad__cam{
  position:absolute; top:6px; left:50%; margin-left:-3px;
  width:6px; height:6px; border-radius:50%; transform:translateZ(2px);
  background:radial-gradient(circle at 40% 35%, #3C4650 0%, #10141A 55%, #05070A 100%);
  box-shadow:inset 0 0 0 .5px rgba(255,255,255,.18);
}

.ipad__screen{
  position:relative; transform:translateZ(4px);
  border-radius:20px; overflow:hidden;
  background:
    linear-gradient(180deg, rgba(255,255,255,.035), transparent 26%),
    linear-gradient(178deg, #10151B 0%, #0B0F14 58%, #070A0E 100%);
  color:#D8DEE7;
  box-shadow:0 0 0 1px rgba(0,0,0,.7), inset 0 0 30px rgba(0,0,0,.5);
}
/* iPadOS status bar */
.ipad__status{
  display:flex; align-items:center; justify-content:space-between;
  padding:9px clamp(16px,2vw,24px) 3px;
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.04em; color:#3A3630;
}
.ipad__icons{ display:flex; align-items:center; gap:7px; color:rgba(216,222,231,.62); }
.ipad__icons svg{ display:block; }

.ipad__doc{ position:relative; padding:6px clamp(20px,2.4vw,32px) clamp(24px,2.4vw,30px); }
/* faint instrument grid, the way a pro app looks under a desk lamp */
.ipad__screen::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.022) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.022) 1px, transparent 1px);
  background-size:38px 38px;
}

/* home indicator */
.ipad__home{
  display:block; width:34%; max-width:190px; height:5px; border-radius:3px;
  margin:0 auto 9px; background:rgba(255,255,255,.26);
}
/* screen glare — a slab of light across the glass, above the content */
.ipad__glare{
  position:absolute; inset:16px; border-radius:20px; pointer-events:none;
  transform:translateZ(6px);
  background:linear-gradient(122deg,
    rgba(255,255,255,.10) 0%, rgba(255,255,255,.035) 26%,
    rgba(255,255,255,0) 47%, rgba(255,255,255,0) 100%);
  mix-blend-mode:screen;
}

/* document header on the screen — these styles lived in the old clipboard
   block; without them the header loses its flex (so the dot leaders collapse
   to nothing) and <em> falls back to italic. */
.paper__head{
  display:flex; align-items:baseline; gap:14px; margin:0 0 18px;
  padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,.14);
  font-family:var(--font-mono); font-size:11px; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(216,222,231,.5);
}
.paper__head b{ color:var(--accent); font-weight:600; }
.paper__head em{ font-style:normal; flex:none; }

/* the table reads as a live panel, not a printout */
.ipad__doc .leaders{
  background-image:radial-gradient(circle, rgba(255,255,255,.22) 1px, transparent 1px);
}
.ipad__doc .ros-table thead th{
  color:rgba(216,222,231,.42); border-bottom-color:rgba(255,255,255,.16);
}
.ipad__doc .ros-table tbody td{
  color:rgba(216,222,231,.74); border-bottom-color:rgba(255,255,255,.075);
}
.ipad__doc .ros-table tbody tr:hover{ background:rgba(255,255,255,.035); }
.ipad__doc .ros-table__item{ color:#EDF1F6; }
.ipad__doc .ros-table td.mono{ color:rgba(216,222,231,.38); }
.ipad__doc .pill--go{
  color:var(--go); border-color:rgba(63,208,126,.5);
  background:rgba(63,208,126,.09);
  box-shadow:0 0 12px -4px rgba(63,208,126,.55);
}

/* ---------- background photography ----------
   Sits behind the sheet, heavily knocked back and masked at the edges so it
   reads as the room the document is being read in, never as a hero image. */
.bg-photo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-position:center;
  opacity:.62; filter:grayscale(.35) brightness(.72) contrast(1.1);
  mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 74%, transparent 100%);
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 74%, transparent 100%);
}
.bg-photo--faint{ opacity:.3; }
/* A scrim weighted to the left, so the text column keeps a dark ground no
   matter what the photo behind it is doing — the photo can then run much
   hotter than it otherwise could without costing legibility. */
.bg-photo::after{
  content:""; position:absolute; inset:0;
  background:
    linear-gradient(100deg, rgba(9,10,12,.93) 0%, rgba(9,10,12,.86) 34%,
                            rgba(9,10,12,.55) 66%, rgba(9,10,12,.2) 100%),
    linear-gradient(180deg, rgba(9,10,12,.55) 0%, transparent 30%,
                            transparent 68%, rgba(9,10,12,.7) 100%);
}
.bg-photo[data-photo="foh-lamp"]{   background-image:url("assets/bg/PLACEHOLDER-foh-lamp.jpg"); }
.bg-photo[data-photo="empty-hall"]{ background-image:url("assets/bg/PLACEHOLDER-empty-hall.jpg"); }
.bg-photo[data-photo="foh-dark"]{   background-image:url("assets/bg/PLACEHOLDER-foh-dark.jpg"); }
.bg-photo[data-photo="stage"]{      background-image:url("assets/bg/PLACEHOLDER-stage.jpg"); }

/* sections carrying a photo must contain it, and their text must sit above it */
.cue{ position:relative; }
.cover > .sheet, .cue > .sheet{ position:relative; z-index:1; }
/* NOT .cover > .turnpage here — that selector outranks .turnpage and would
   replace its position:absolute with relative, at which point `right`
   shifts the element leftward off the page instead of anchoring it. */

/* a pencilled note in the margin */
.margin-note{
  margin-top:30px; padding:15px 18px;
  border-left:2px solid var(--accent-deep); background:rgba(240,166,43,.045);
  font-size:14.5px; color:var(--text-soft);
}
.margin-note b{
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
  margin-right:10px;
}

/* ---------- phases ---------- */
.phases{ list-style:none; margin:0; padding:0; display:grid; gap:clamp(30px, 3.6vw, 46px); }
.phase{ padding-left:clamp(0px, 1.6vw, 22px); border-left:1px solid transparent; }
.phase.in{ border-left-color:var(--rule-soft); }
.phase__tag{
  display:flex; align-items:baseline; gap:14px; margin:0 0 10px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
.phase__tag em{ font-style:normal; color:var(--faint); flex:none; letter-spacing:.14em; }
.phase h3{ margin-bottom:9px; }
.phase > p{ max-width:60ch; color:var(--text-soft); font-size:15.5px; }
.checks{ list-style:none; margin:15px 0 0; padding:0; display:grid; gap:7px; }
.checks li{
  position:relative; padding-left:26px;
  font-family:var(--font-mono); font-size:12.5px; line-height:1.6; color:var(--muted);
}
/* a ticked box, because everything here is a thing that got checked */
.checks li::before{
  content:""; position:absolute; left:0; top:.34em;
  width:11px; height:11px; border:1px solid var(--rule-hard);
}
.checks li::after{
  content:""; position:absolute; left:3px; top:.52em;
  width:6px; height:3px; border-left:1.5px solid var(--go); border-bottom:1.5px solid var(--go);
  transform:rotate(-45deg);
}

/* ---------- SmartSuite products ---------- */
.products{ list-style:none; margin:clamp(30px,3.4vw,44px) 0 0; padding:0;
  display:grid; gap:clamp(24px,3vw,38px);
  grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); }
.products li{ padding-top:16px; border-top:1px solid var(--rule-soft); }
.products__tag{
  display:flex; align-items:baseline; gap:14px; margin:0 0 10px;
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
.products__tag em{ font-style:normal; flex:none; color:var(--faint); letter-spacing:.14em; }
.products h3{ margin-bottom:9px; }
.products p{ margin:0; color:var(--text-soft); font-size:15.5px; }

/* ---------- spec sheet ---------- */
.specsheet{ margin:0; display:grid; gap:0; border-top:1px solid var(--rule-soft); }
.specsheet > div{
  display:grid; gap:6px 28px; padding:20px 0;
  grid-template-columns:minmax(120px, 170px) 1fr;
  border-bottom:1px solid var(--rule-soft);
}
.specsheet dt{
  font-family:var(--font-mono); font-size:11px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; color:var(--accent);
}
.specsheet dd{ margin:0; color:var(--text-soft); font-size:15.5px; max-width:62ch; }
.specsheet dd b{ color:var(--text); font-weight:600; font-family:var(--font-head); }

/* ---------- plates (gallery) ---------- */
.plates{
  display:grid; gap:clamp(16px, 2vw, 26px);
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}
.plates figure{ margin:0; cursor:pointer; }
.plates img{
  width:100%; aspect-ratio:4/3; object-fit:cover;
  border:1px solid var(--rule-soft); background:var(--paper);
  filter:grayscale(.4) contrast(1.04);
  transition:filter .45s var(--ease), border-color .25s var(--ease);
}
.plates figure:hover img{ filter:grayscale(0) contrast(1); border-color:var(--accent-deep); }
.plates figcaption{
  margin-top:9px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.08em; color:var(--faint);
}
.plates figcaption b{ color:var(--muted); font-weight:600; margin-right:8px; }

/* ---------- credits ---------- */
.credits{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-soft); }
.credits li{
  display:flex; align-items:baseline; gap:20px; flex-wrap:wrap;
  padding:14px 0; border-bottom:1px solid var(--rule-soft);
  transition:background .2s var(--ease);
}
.credits li:hover{ background:rgba(255,255,255,.02); }
.credits__yr{
  flex:none; width:64px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.1em; color:var(--faint);
}
.credits__show{
  flex:1 1 240px; font-family:var(--font-head); font-weight:600; font-size:16.5px;
  color:var(--text);
}
.credits__role{
  flex:none; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--muted);
}

/* ---------- the operator ---------- */
.operator{
  display:grid; gap:clamp(28px, 4vw, 54px); align-items:start;
  grid-template-columns:minmax(0, 320px) minmax(0, 1fr);
}
.operator__photo{ margin:0; }
.operator__photo img{
  width:100%; aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--rule-soft); filter:grayscale(.45) contrast(1.05);
}
.operator__photo figcaption{
  margin-top:9px; font-family:var(--font-mono); font-size:11px;
  letter-spacing:.08em; color:var(--faint);
}
.operator__photo figcaption b{ color:var(--muted); margin-right:8px; }
.operator--nophoto{ grid-template-columns:1fr; }
.operator__body p{ max-width:58ch; color:var(--text-soft); }

/* ---------- call sheet ---------- */
.callsheet{
  border:1px solid var(--rule); padding:clamp(22px, 2.6vw, 34px);
  background:rgba(255,255,255,.014);
}
.callsheet .fields{ margin-top:0; border-top:0; }
.callsheet .fields > div:first-child{ padding-top:0; }
.callsheet__go{ margin:26px 0 0; }

/* ======================== DOCUMENT FOOTER ========================= */
.docfoot{
  position:relative; z-index:2;
  padding-block:clamp(44px, 5vw, 70px);
  border-top:1px solid var(--rule);
  background:rgba(0,0,0,.3);
}
.docfoot__label{
  margin:0 0 16px; font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  letter-spacing:.24em; text-transform:uppercase; color:var(--faint);
}
.revtable{ font-size:13.5px; }
.revtable th{
  text-align:left; padding:0 16px 9px 0;
  font-family:var(--font-mono); font-size:10px; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  border-bottom:1px solid var(--rule-soft);
}
.revtable td{
  padding:11px 16px 11px 0; color:var(--muted);
  border-bottom:1px solid var(--rule-soft);
}
.docfoot__end{
  display:flex; gap:18px; flex-wrap:wrap; justify-content:space-between;
  margin-top:26px; font-family:var(--font-mono); font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--faint);
}
.docfoot__by{ color:rgba(255,255,255,.24); }

/* ======================= SCROLL CHOREOGRAPHY ======================
   Motion that speaks the document's own language: rules draw, leaders run
   out, boxes get ticked, the board settles onto the desk. All of it is
   scoped to .js and switched off wholesale under prefers-reduced-motion. */

/* the rule under each cue header draws left to right */
.js .cue__head{ border-bottom-color:transparent; }
.js .cue__head::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px;
  background:var(--rule); transform:scaleX(0); transform-origin:0 50%;
  transition:transform 1s var(--ease-soft) .1s;
}
.js .cue__head.in::after{ transform:scaleX(1); }

/* dot leaders run out to meet the right-hand value */
.js .leaders{ transform:scaleX(0); transform-origin:0 50%;
  transition:transform .9s var(--ease-soft) .25s; }
.js .cue__head.in .leaders,
.js .phase.in .leaders,
.js .reveal.in .leaders,
.js .products li.in .leaders{ transform:scaleX(1); }
/* the iPad's document leader sits in a static parent — show it with the device */
.js .ipad.in .leaders{ transform:scaleX(1); }

/* boxes get ticked, one after another */
.js .checks li::after{ transform:rotate(-45deg) scale(0); transform-origin:50% 50%;
  transition:transform .4s var(--ease-soft); }
.js .phase.in .checks li::after{ transform:rotate(-45deg) scale(1); }
.js .phase.in .checks li:nth-child(1)::after{ transition-delay:.30s; }
.js .phase.in .checks li:nth-child(2)::after{ transition-delay:.42s; }
.js .phase.in .checks li:nth-child(3)::after{ transition-delay:.54s; }
.js .phase.in .checks li:nth-child(4)::after{ transition-delay:.66s; }

/* the device settles onto the desk instead of simply appearing */
.js .ipad.reveal:not(.in) .ipad__body{
  transform:rotateX(14deg) rotateY(-8deg) scale(.98);
}

/* The rows wake up on the screen, one after another, like a document
   painting in — the device should look like it is doing something. */
.js .ipad .ros-table tbody tr{
  opacity:0; transform:translateY(10px);
  transition:opacity .5s var(--ease-soft), transform .5s var(--ease-soft);
}
.js .ipad.in .ros-table tbody tr{ opacity:1; transform:none; }
.js .ipad.in .ros-table tbody tr:nth-child(1){ transition-delay:.34s; }
.js .ipad.in .ros-table tbody tr:nth-child(2){ transition-delay:.44s; }
.js .ipad.in .ros-table tbody tr:nth-child(3){ transition-delay:.54s; }
.js .ipad.in .ros-table tbody tr:nth-child(4){ transition-delay:.64s; }
.js .ipad.in .ros-table tbody tr:nth-child(5){ transition-delay:.74s; }
.js .ipad.in .ros-table tbody tr:nth-child(6){ transition-delay:.84s; }
/* the screen itself lights up first */
.js .ipad .ipad__screen{ filter:brightness(.55); transition:filter .7s var(--ease-soft); }
.js .ipad.in .ipad__screen{ filter:brightness(1); }
/* then the status bar and header */
.js .ipad .ipad__status, .js .ipad .paper__head{
  opacity:0; transition:opacity .5s var(--ease-soft) .22s; }
.js .ipad.in .ipad__status, .js .ipad.in .paper__head{ opacity:1; }

/* the draft stamp presses on */
@keyframes stampIn{
  0%   { transform:rotate(-9deg) scale(1.45); opacity:0; }
  55%  { transform:rotate(-1.2deg) scale(.95); opacity:1; }
  100% { transform:rotate(-1.2deg) scale(1); opacity:1; }
}
.js .stamp.in{ animation:stampIn .62s var(--ease) both; }

/* a cue going live gets a single pulse — the cue-light moment */
@keyframes cueGo{
  0%   { box-shadow:0 0 0 0 rgba(63,208,126,.45); }
  100% { box-shadow:0 0 0 12px rgba(63,208,126,0); }
}
.cue__status[data-state="go"]{ animation:cueGo .6s var(--ease); }

/* plates rise a little further than the rest, so the gallery feels physical */
.js .plates figure{ transform:translateY(26px); }
.js .plates figure.in{ transform:none; }

/* ============================= REVEALS ============================ */
/* Scoped to html.js on purpose — see main.js. Without JS the content must
   simply be visible, never hidden waiting for a reveal that will not come. */
.js .reveal{
  opacity:0; transform:translateY(14px);
  transition:opacity .65s var(--ease-soft), transform .65s var(--ease-soft);
}
.js .reveal.in{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .reveal, .js .reveal{ opacity:1; transform:none; transition:none; }
  .plates img{ transition:none; }
  /* the choreography above, switched off in one place */
  .js .cue__head{ border-bottom-color:var(--rule); }
  .js .cue__head::after{ display:none; }
  .js .leaders{ transform:none; transition:none; }
  .js .checks li::after{ transform:rotate(-45deg) scale(1); transition:none; }
  .js .ipad.reveal:not(.in) .ipad__body{ transform:none; }
  .js .stamp.in{ animation:none; }
  .cue__status[data-state="go"]{ animation:none; }
  .js .plates figure, .js .plates figure.in{ transform:none; }
  .js .ipad .ros-table tbody tr{ opacity:1; transform:none; transition:none; }
  .js .ipad .ipad__screen{ filter:none; transition:none; }
  .js .ipad .ipad__status, .js .ipad .paper__head{ opacity:1; transition:none; }
}

/* ============================ LIGHTBOX ============================ */
.lightbox{ position:fixed; inset:0; z-index:100; display:none;
  background:rgba(6,7,9,.96); place-items:center; }
.lightbox.open{ display:grid; }
.lightbox img{ max-width:92vw; max-height:86vh; object-fit:contain; border:1px solid var(--rule); }
.lightbox button{ position:absolute; background:none; border:0; color:var(--text);
  font-size:30px; line-height:1; padding:14px; opacity:.7; }
.lightbox button:hover{ opacity:1; color:var(--accent); }
.lb-close{ top:12px; right:16px; }
.lb-prev{ left:10px; top:50%; transform:translateY(-50%); }
.lb-next{ right:10px; top:50%; transform:translateY(-50%); }
.lb-count{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; color:var(--muted); }

/* ===== DRAFT ONLY — palette picker. Delete with its markup + JS. ===== */
.theme-picker{
  position:fixed; right:14px; bottom:14px; z-index:70; display:flex; gap:5px;
  padding:6px; background:rgba(10,11,13,.92); border:1px solid var(--rule-soft);
  backdrop-filter:blur(10px);
}
.theme-picker button{
  padding:6px 10px; background:none; border:1px solid var(--rule-soft);
  color:var(--faint); font-family:var(--font-mono); font-size:9.5px;
  letter-spacing:.14em; text-transform:uppercase;
}
.theme-picker button:hover{ color:var(--text-soft); border-color:var(--rule); }
.theme-picker button.on{ color:var(--accent-ink); background:var(--accent); border-color:var(--accent); }

/* =========================== RESPONSIVE =========================== */
@media (max-width: 900px){
  .cover__inner{ grid-template-columns:1fr; }
  .cover__portrait{ order:-1; max-width:220px; }
  .binder{ display:none; }
  :root{ --rail:0px; }
  .operator{ grid-template-columns:1fr; }
  .operator__photo{ max-width:340px; }
}

/* The ownership table needs ~640px of paper width. Between this breakpoint
   and the old 720px one the table quietly overflowed inside the clipboard and
   the OWNER/STATUS columns were cut off on the right, so the stack has to
   start well before the board itself gets narrow. */
@media (max-width: 900px){
  /* Stack the ownership table rather than scrolling it sideways. At 640px
     min-width the table overflowed the paper, and since the horizontal
     scroll starts at the left, the item names — the column that carries the
     whole point — were the first thing to disappear. */
  .table-scroll{ overflow-x:visible; }
  .ros-table{ min-width:0; }
  .ros-table thead{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  }
  .ros-table tbody tr{
    display:block; padding:15px 0; border-bottom:1px solid rgba(0,0,0,.14);
  }
  .ros-table tbody tr:last-child{ border-bottom:0; padding-bottom:0; }
  .ros-table tbody td{ display:block; padding:0; border:0; }
  .ros-table__item{
    white-space:normal; font-size:17px; margin-bottom:5px;
    padding-right:0 !important;
  }
  .ros-table tbody td.mono{ display:inline-block; margin:9px 12px 0 0; }
  .ros-table tbody td:last-child{ display:inline-block; margin-top:9px; }
}

@media (max-width: 720px){
  .cover{ min-height:auto; }
  /* the tilt costs legibility once the board is narrow */
  .ipad{ padding:16px 6px 30px; }
  /* Both selectors are required. The entrance rule
     `.js .clipboard.reveal:not(.in) .clipboard__board` far outranks a bare
     `.clipboard__board`, so without repeating it the board keeps its 3D
     transform until it scrolls into view — and a rotated board projects
     wider than the viewport, which is what pushed the whole page sideways. */
  .ipad__body,
  .js .ipad.reveal:not(.in) .ipad__body{ transform:none; }
  .ipad__body{ padding:11px; border-radius:26px; }
  .ipad__edge{ border-radius:29px; }
  .ipad__screen{ border-radius:16px; }
  .ipad__glare{ inset:11px; border-radius:16px; }


  .showclock__cue, .showclock__sep:last-of-type{ display:none; }
  .specsheet > div{ grid-template-columns:1fr; gap:8px; }
  .cue__head{ gap:10px; }
  .cue__meta{ width:100%; }
}

@media (max-width: 520px){
  /* the bar carries three things and only has room for two — the lamp dot
     already says what the state label says, in colour */
  .statusbar__inner{ gap:10px; padding:9px 12px; }
  .doc-id__text span{ display:none; }
  .doc-id__text b{ font-size:10px; }
  .doc-id__mark{ width:30px; height:30px; font-size:11px; }
  .showclock__state{ display:none; }
  .nav-toggle{ padding:6px 9px; font-size:9.5px; letter-spacing:.1em; }
  .showclock{ font-size:10px; gap:8px; }
  .theme-picker{ left:8px; right:8px; justify-content:center; flex-wrap:wrap; }
}