/* ============================================================
   DATAEKO · Week 1 — trainer console
   Aesthetic: dual-phosphor CRT manual. Amber for structure,
   green for the trainer's private layer. Warm ink, never pure
   black. Serif for prose you read for 90 minutes, mono for
   everything the machine says.
   ============================================================ */

:root {
  color-scheme: dark;

  --ink:        oklch(0.16 0.012 62);
  --ink-2:      oklch(0.205 0.014 62);
  --ink-3:      oklch(0.255 0.016 62);
  --rule:       oklch(0.32 0.018 62);
  --rule-soft:  oklch(0.26 0.014 62);

  --fg:         oklch(0.915 0.014 76);
  --fg-dim:     oklch(0.70 0.016 72);
  --fg-faint:   oklch(0.55 0.014 70);

  --amber:      oklch(0.81 0.135 74);
  --amber-dim:  oklch(0.62 0.10 72);
  --amber-wash: oklch(0.81 0.135 74 / 0.10);

  --green:      oklch(0.76 0.095 152);
  --green-dim:  oklch(0.58 0.075 152);
  --green-wash: oklch(0.76 0.095 152 / 0.09);

  --red:        oklch(0.68 0.16 32);
  --red-wash:   oklch(0.68 0.16 32 / 0.12);

  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "IBM Plex Mono", Menlo, Consolas, monospace;
  --serif: ui-serif, "New York", "Iowan Old Style", "Palatino Linotype", Georgia, serif;

  --rail: 17rem;
  --measure: 74ch;

  --step--1: clamp(0.78rem, 0.76rem + 0.1vw, 0.84rem);
  --step-0:  clamp(0.98rem, 0.94rem + 0.2vw, 1.09rem);
  --step-1:  clamp(1.18rem, 1.10rem + 0.4vw, 1.42rem);
  --step-2:  clamp(1.45rem, 1.30rem + 0.7vw, 1.95rem);
  --step-3:  clamp(1.85rem, 1.55rem + 1.4vw, 3.1rem);

  --pad: clamp(1.15rem, 0.6rem + 2.4vw, 3.6rem);
}

/* Projector mode — classroom beamers destroy dark themes. */
html[data-mode="paper"] {
  color-scheme: light;
  --ink:        oklch(0.975 0.008 84);
  --ink-2:      oklch(0.945 0.010 82);
  --ink-3:      oklch(0.915 0.012 82);
  --rule:       oklch(0.80 0.014 80);
  --rule-soft:  oklch(0.88 0.010 82);
  --fg:         oklch(0.24 0.018 62);
  --fg-dim:     oklch(0.42 0.018 66);
  --fg-faint:   oklch(0.56 0.014 68);
  --amber:      oklch(0.52 0.135 62);
  --amber-dim:  oklch(0.60 0.10 66);
  --amber-wash: oklch(0.52 0.135 62 / 0.09);
  --green:      oklch(0.42 0.10 154);
  --green-dim:  oklch(0.52 0.075 154);
  --green-wash: oklch(0.42 0.10 154 / 0.08);
  --red:        oklch(0.50 0.17 30);
  --red-wash:   oklch(0.50 0.17 30 / 0.10);
  font-size: 112.5%;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--fg);
  font-family: var(--serif);
  font-size: var(--step-0);
  line-height: 1.66;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* faint scanline tooth — barely there, only in dark */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0 3px,
    oklch(0 0 0 / 0.055) 3px 4px
  );
  opacity: 0.55;
}
html[data-mode="paper"] body::before { display: none; }

::selection { background: var(--amber); color: var(--ink); }

/* ---------------------------------------------------------- rail */

.rail {
  position: fixed;
  inset-block: 0;
  inset-inline-start: 0;
  width: var(--rail);
  z-index: 40;
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border-inline-end: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: var(--step--1);
}

.rail__brand {
  padding: 1.35rem 1.15rem 1rem;
  border-block-end: 1px solid var(--rule-soft);
}

.rail__brand a { text-decoration: none; color: inherit; display: block; }

.rail__mark {
  display: flex;
  align-items: baseline;
  gap: 0.5ch;
  color: var(--amber);
  letter-spacing: 0.06em;
}
.rail__mark b { font-weight: 600; }
.rail__caret {
  display: inline-block;
  width: 0.55ch; height: 1em;
  background: var(--amber);
  translate: 0 0.12em;
  animation: blink 1.25s steps(1) infinite;
}
@keyframes blink { 0%, 55% { opacity: 1 } 56%, 100% { opacity: 0 } }
@media (prefers-reduced-motion: reduce) { .rail__caret { animation: none } }

.rail__sub {
  margin-block-start: 0.4rem;
  color: var(--fg-faint);
  letter-spacing: 0.03em;
  font-size: 0.76rem;
}

.rail__nav { padding: 0.85rem 0.6rem; border-block-end: 1px solid var(--rule-soft); }

.rail__nav a {
  display: flex;
  align-items: center;
  gap: 0.75ch;
  padding: 0.42rem 0.55rem;
  color: var(--fg-dim);
  text-decoration: none;
  border-radius: 2px;
  letter-spacing: 0.02em;
}
.rail__nav a:hover { color: var(--fg); background: var(--ink-3); }
.rail__nav a[aria-current="page"] { color: var(--amber); background: var(--amber-wash); }
.rail__nav .k {
  min-width: 1.6ch;
  color: var(--fg-faint);
  font-size: 0.72rem;
}
.rail__nav a[aria-current="page"] .k { color: var(--amber-dim); }

/* timeline / table of contents */
.rail__toc {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.85rem 0.6rem 2rem;
  scrollbar-width: thin;
  scrollbar-color: var(--rule) transparent;
}
.rail__toc h4 {
  margin: 0 0 0.6rem 0.55rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.toc__item {
  display: grid;
  grid-template-columns: 3.6ch 1fr;
  gap: 0.7ch;
  align-items: baseline;
  padding: 0.3rem 0.55rem;
  color: var(--fg-dim);
  text-decoration: none;
  border-inline-start: 2px solid transparent;
  line-height: 1.35;
}
.toc__item:hover { color: var(--fg); }
.toc__item .t { color: var(--fg-faint); font-variant-numeric: tabular-nums; font-size: 0.72rem; }
.toc__item.is-active { color: var(--amber); border-inline-start-color: var(--amber); background: var(--amber-wash); }
.toc__item.is-active .t { color: var(--amber); }
.toc__item.is-now { color: var(--green); border-inline-start-color: var(--green); background: var(--green-wash); }
.toc__item.is-now .t { color: var(--green); }
.toc__item.lvl3 { padding-inline-start: 1.6rem; font-size: 0.76rem; }
.toc__item.lvl3 .t { visibility: hidden; }

/* clock */
.rail__clock {
  border-block-start: 1px solid var(--rule-soft);
  padding: 0.75rem 1.15rem 0.95rem;
  background: var(--ink);
}
.clock__row { display: flex; align-items: baseline; justify-content: space-between; gap: 1ch; }
.clock__t {
  font-size: 1.5rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--fg-faint);
}
.clock__t.running { color: var(--amber); }
.clock__drift { font-size: 0.75rem; font-variant-numeric: tabular-nums; color: var(--fg-faint); }
.clock__drift.ahead { color: var(--green); }
.clock__drift.behind { color: var(--red); }
.clock__now {
  margin-block-start: 0.35rem;
  font-size: 0.73rem;
  color: var(--fg-faint);
  min-height: 1.3em;
  line-height: 1.3;
}
.clock__btns { display: flex; gap: 0.4rem; margin-block-start: 0.6rem; }
.clock__btns button {
  flex: 1;
  font: inherit;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.32rem 0;
  color: var(--fg-dim);
  background: var(--ink-3);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  cursor: pointer;
}
.clock__btns button:hover { color: var(--fg); border-color: var(--rule); }

/* ---------------------------------------------------------- toggles */

.toggles {
  position: fixed;
  inset-block-start: 0;
  inset-inline-end: 0;
  z-index: 45;
  display: flex;
  gap: 0.4rem;
  padding: 0.7rem var(--pad) 0.7rem 1rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  background: linear-gradient(to bottom, var(--ink) 55%, transparent);
}
.toggles button {
  font: inherit;
  letter-spacing: 0.06em;
  padding: 0.36rem 0.7rem;
  color: var(--fg-faint);
  background: var(--ink-2);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
}
.toggles button:hover { color: var(--fg); border-color: var(--rule); }
.toggles button[aria-pressed="true"] {
  color: var(--green);
  border-color: var(--green-dim);
  background: var(--green-wash);
}
.toggles button.t-paper[aria-pressed="true"] {
  color: var(--amber);
  border-color: var(--amber-dim);
  background: var(--amber-wash);
}

/* ---------------------------------------------------------- page */

.page {
  margin-inline-start: var(--rail);
  padding: 4.4rem var(--pad) 8rem;
  position: relative;
  z-index: 2;
}

.wrap { max-width: var(--measure); }

/* wide screens: trainer notes float into the right gutter */
@media (min-width: 1500px) {
  .page { padding-inline-end: calc(var(--pad) + 22rem); }
}

/* ---------------------------------------------------------- masthead */

.mast { margin-block-end: 3.2rem; }
.mast__kicker {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-block-end: 0.9rem;
}
.mast h1 {
  font-family: var(--mono);
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 0.75rem;
  text-wrap: balance;
}
.mast__dek {
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--fg-dim);
  max-width: 52ch;
  margin: 0;
  text-wrap: pretty;
}
.mast__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.6rem;
  margin-block-start: 1.6rem;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 0.76rem;
  color: var(--fg-faint);
  letter-spacing: 0.02em;
}
.mast__meta b { color: var(--fg-dim); font-weight: 500; }

/* ---------------------------------------------------------- prose */

.prose > * + * { margin-block-start: 1.15em; }
/* sections are structural wrappers, so their children need the same rhythm */
.prose section > * + * { margin-block-start: 1.15em; }

.prose h2 {
  font-family: var(--mono);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin-block: 3.4rem 1.2rem;
  padding-block-end: 0.55rem;
  border-block-end: 1px solid var(--rule);
  scroll-margin-top: 5rem;
  text-wrap: balance;
}
.prose h2::before {
  content: "§ ";
  color: var(--amber-dim);
  font-weight: 400;
}

.prose h3 {
  font-family: var(--mono);
  font-size: var(--step-1);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-block: 2.4rem 0.85rem;
  color: var(--fg);
  scroll-margin-top: 5rem;
  text-wrap: balance;
}

.prose h4, .prose h5, .prose h6 {
  font-family: var(--mono);
  font-size: var(--step-0);
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-block: 1.9rem 0.6rem;
  color: var(--amber);
  scroll-margin-top: 5rem;
}

/* stray h1 inside a document (the masthead normally carries the title) */
.prose h1 {
  font-family: var(--mono);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
  margin-block: 3rem 1rem;
  scroll-margin-top: 5rem;
}

.prose p { margin: 0; text-wrap: pretty; }

/* the line straight after the masthead reads as a standfirst */
.prose > section:first-of-type > p:first-of-type,
.prose > p:first-of-type {
  font-size: 1.06em;
  color: var(--fg-dim);
}
.prose strong { color: var(--fg); font-weight: 700; }
html[data-mode="paper"] .prose strong { color: oklch(0.14 0.02 62); }

.prose a {
  color: var(--amber);
  text-decoration: none;
  border-block-end: 1px solid var(--amber-dim);
  padding-block-end: 0.05em;
}
.prose a:hover { background: var(--amber-wash); }

.prose ul, .prose ol { margin: 0; padding-inline-start: 1.4rem; }
.prose li + li { margin-block-start: 0.42em; }
.prose li::marker { color: var(--amber-dim); font-family: var(--mono); font-size: 0.9em; }

.prose hr {
  border: 0;
  border-block-start: 1px solid var(--rule-soft);
  margin-block: 2.6rem;
}

.prose blockquote {
  margin: 1.4em 0;
  padding: 0.15rem 0 0.15rem 1.15rem;
  border-inline-start: 2px solid var(--rule);
  color: var(--fg-dim);
  font-style: italic;
}

/* inline code + blocks */
.prose :not(pre) > code {
  font-family: var(--mono);
  font-size: 0.87em;
  padding: 0.1em 0.4em;
  background: var(--ink-3);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  color: var(--amber);
  word-break: break-word;
}
html[data-mode="paper"] .prose :not(pre) > code { background: var(--ink-2); }

.prose pre {
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.62;
  margin: 1.5em 0;
  padding: 1rem 1.15rem;
  background: var(--ink-2);
  border: 1px solid var(--rule-soft);
  border-inline-start: 2px solid var(--amber-dim);
  border-radius: 2px;
  overflow-x: auto;
  tab-size: 2;
  position: relative;
}
.prose pre code {
  font: inherit;
  color: var(--fg);
  background: none;
  border: 0;
  padding: 0;
}

.copy {
  position: absolute;
  inset-block-start: 0.4rem;
  inset-inline-end: 0.4rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.5rem;
  color: var(--fg-faint);
  background: var(--ink-3);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 140ms ease-out;
}
pre:hover .copy, .copy:focus-visible { opacity: 1; }
.copy.done { color: var(--green); border-color: var(--green-dim); }

/* tables — the timeline lives in these */
.tablewrap {
  margin: 1.6em 0;
  overflow-x: auto;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  scrollbar-width: thin;
}
.prose table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--mono);
  font-size: 0.79rem;
  line-height: 1.5;
}
.prose thead th {
  position: sticky;
  inset-block-start: 0;
  text-align: start;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-size: 0.68rem;
  color: var(--fg-faint);
  background: var(--ink-3);
  padding: 0.6rem 0.85rem;
  border-block-end: 1px solid var(--rule);
  white-space: nowrap;
}
.prose tbody td {
  padding: 0.55rem 0.85rem;
  border-block-end: 1px solid var(--rule-soft);
  vertical-align: top;
}
.prose tbody tr:last-child td { border-block-end: 0; }
.prose tbody tr:nth-child(even) { background: oklch(1 0 0 / 0.018); }
html[data-mode="paper"] .prose tbody tr:nth-child(even) { background: oklch(0 0 0 / 0.022); }
.prose tbody tr:hover { background: var(--amber-wash); }
.prose td code { white-space: pre-wrap; }

/* ---------------------------------------------------------- trainer layer */

.tnote {
  --tc: var(--green);
  margin: 1.5em 0;
  padding: 0.9rem 1.1rem;
  background: var(--green-wash);
  border: 1px solid var(--green-dim);
  border-inline-start-width: 2px;
  border-radius: 2px;
  font-size: 0.94em;
}
.tnote > * + * { margin-block-start: 0.8em; }
.tnote__tag {
  display: block;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-block-end: 0.6rem;
}
.tnote :not(pre) > code { color: var(--green); }
.tnote pre { border-inline-start-color: var(--green-dim); background: var(--ink); }

/* whole sections that are trainer-only */
.prose section[data-aud="trainer"] {
  position: relative;
  padding-inline-start: 1.15rem;
  border-inline-start: 2px solid var(--green-dim);
  margin-block: 2.6rem;
}
.prose section[data-aud="trainer"] > h2,
.prose section[data-aud="trainer"] > h3 { color: var(--green); }
.prose section[data-aud="trainer"] > h2 { border-block-end-color: var(--green-dim); }
.prose section[data-aud="trainer"] > h2::before { content: "▚ "; color: var(--green-dim); }
.prose section[data-aud="trainer"] > h3::before { content: "▚ "; color: var(--green-dim); }
.prose section[data-aud="trainer"] > h4 { color: var(--green); }
.prose section[data-aud="trainer"] pre { border-inline-start-color: var(--green-dim); }

/* share mode: trainer layer collapses away */
html[data-trainer="off"] .tnote,
html[data-trainer="off"] .prose section[data-aud="trainer"],
html[data-trainer="off"] .toc__item[data-aud="trainer"] { display: none; }

html[data-trainer="off"] .sharebar { display: flex; }
.sharebar {
  display: none;
  align-items: center;
  gap: 0.8ch;
  margin-block-end: 2rem;
  padding: 0.55rem 0.85rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--amber);
  background: var(--amber-wash);
  border: 1px dashed var(--amber-dim);
  border-radius: 2px;
}

/* ---------------------------------------------------------- callouts */

.prose .cal {
  margin: 1.5em 0;
  padding: 0.85rem 1.05rem;
  border: 1px solid var(--rule);
  border-inline-start-width: 2px;
  border-radius: 2px;
  background: var(--ink-2);
  font-size: 0.94em;
}
.prose .cal > * + * { margin-block-start: 0.7em; }
.prose .cal--warn { border-color: var(--red); background: var(--red-wash); }
.prose .cal--warn strong:first-child { color: var(--red); }

/* ---------------------------------------------------------- roles

   Interns never see trainer material, and the toggle that would reveal it
   is not rendered for them. Client-side only — a mode switch, not security. */

html[data-role="intern"] .t-only { display: none !important; }
html[data-role="intern"] .tnote,
html[data-role="intern"] .prose section[data-aud="trainer"],
html[data-role="intern"] .toc__item[data-aud="trainer"],
html[data-role="intern"] .sharebar { display: none !important; }

.rail__role { color: var(--amber-dim); }
.rail__role::before { content: "▸ "; }

.rail__out { padding: 0.55rem 0.6rem 0.9rem; border-block-start: 1px solid var(--rule-soft); }
.signout {
  width: 100%;
  font: inherit;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.4rem 0;
  color: var(--fg-faint);
  background: none;
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  cursor: pointer;
}
.signout:hover { color: var(--red); border-color: var(--red); }

.pill {
  margin-inline-start: auto;
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  color: var(--amber-dim);
  border: 1px solid var(--rule);
  border-radius: 999px;
}
.rail__nav a[aria-current="page"] .pill { color: var(--amber); border-color: var(--amber-dim); }

/* ---------------------------------------------------------- index cards */

.deck-cards {
  display: grid;
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  border-radius: 2px;
  margin-block: 2.6rem;
}
.card {
  display: grid;
  grid-template-columns: 4.5rem 1fr;
  gap: 0 1.4rem;
  padding: 1.5rem 1.4rem;
  background: var(--ink);
  text-decoration: none;
  color: inherit;
  transition: background 130ms ease-out;
}
.card:hover { background: var(--ink-2); }
.card__n {
  font-family: var(--mono);
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--amber-dim);
  font-variant-numeric: tabular-nums;
}
.card:hover .card__n { color: var(--amber); }
.card h3 {
  font-family: var(--mono);
  font-size: var(--step-1);
  font-weight: 600;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.card p { margin: 0; color: var(--fg-dim); font-size: 0.95em; text-wrap: pretty; }
.card__tags {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-block-start: 0.9rem;
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
}
.card__tags span {
  padding: 0.15rem 0.5rem;
  color: var(--fg-faint);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
}

/* ---------------------------------------------------------- help overlay */

.help {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 2rem;
  background: oklch(0.12 0.01 62 / 0.82);
  backdrop-filter: blur(3px);
}
html[data-mode="paper"] .help { background: oklch(0.97 0.01 84 / 0.86); }
.help[hidden] { display: none; }
.help__panel {
  width: min(30rem, 100%);
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
  padding: 1.5rem 1.6rem 1.7rem;
  font-family: var(--mono);
  font-size: 0.82rem;
}
.help__panel h2 {
  margin: 0 0 1.1rem;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  font-weight: 500;
}
.help__panel dl { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.55rem 1rem; margin: 0; }
.help__panel dt { color: var(--fg); }
.help__panel dd { margin: 0; color: var(--fg-dim); }
.help__panel kbd {
  display: inline-block;
  min-width: 1.6em;
  text-align: center;
  padding: 0.08em 0.4em;
  background: var(--ink-3);
  border: 1px solid var(--rule);
  border-block-end-width: 2px;
  border-radius: 3px;
  font: inherit;
  font-size: 0.9em;
  color: var(--amber);
}
.help__hint { margin: 1.3rem 0 0; color: var(--fg-faint); font-size: 0.72rem; }

/* ---------------------------------------------------------- footer */

.foot {
  margin-block-start: 5rem;
  padding-block-start: 1.4rem;
  border-block-start: 1px solid var(--rule-soft);
  font-family: var(--mono);
  font-size: 0.73rem;
  color: var(--fg-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.6rem;
  justify-content: space-between;
}
.foot a { color: var(--fg-dim); text-decoration: none; border-block-end: 1px solid var(--rule); }
.foot a:hover { color: var(--amber); border-color: var(--amber-dim); }

/* ---------------------------------------------------------- focus */

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  inset-block-start: 0.5rem;
  inset-inline-start: calc(var(--rail) + 1rem);
  z-index: 70;
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.5rem 0.9rem;
  background: var(--amber);
  color: var(--ink);
  border-radius: 2px;
  text-decoration: none;
  translate: 0 -220%;
}
.skip:focus { translate: 0 0; }

/* ---------------------------------------------------------- narrow */

.railtoggle {
  display: none;
  position: fixed;
  inset-block-start: 0.65rem;
  inset-inline-start: 0.65rem;
  z-index: 50;
  font-family: var(--mono);
  font-size: 0.78rem;
  padding: 0.4rem 0.7rem;
  color: var(--amber);
  background: var(--ink-2);
  border: 1px solid var(--rule);
  border-radius: 2px;
  cursor: pointer;
}

@media (max-width: 900px) {
  .railtoggle { display: block; }
  .rail {
    translate: -100% 0;
    transition: translate 220ms cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 0 3rem oklch(0 0 0 / 0.5);
    width: min(19rem, 86vw);
  }
  html[data-rail="open"] .rail { translate: 0 0; }
  .page { margin-inline-start: 0; padding-block-start: 3.6rem; }
  .toggles { padding-inline-end: 0.65rem; }
  .prose h2 { margin-block-start: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) { .rail { transition: none } }

@media print {
  .rail, .toggles, .railtoggle, .help, .copy, .skip, body::before { display: none !important; }
  .page { margin: 0; padding: 0; }
  body { background: #fff; color: #111; }
}

/* ---------------------------------------------------------- week nav

   The programme runs five weeks and the site is iterated rather than
   rebuilt, so the rail is organised by week. Weeks that do not exist yet
   are listed but not linked — interns can see the whole arc on day one. */

.rail__nav { display: grid; gap: 0.15rem; }

.nav__top {
  display: flex;
  align-items: center;
  padding: 0.42rem 0.55rem;
  color: var(--fg-dim);
  text-decoration: none;
  border-radius: 2px;
  letter-spacing: 0.02em;
}
.nav__top:hover { color: var(--fg); background: var(--ink-3); }
.nav__top[aria-current="page"] { color: var(--amber); background: var(--amber-wash); }

.wk { display: grid; gap: 0.1rem; margin-block-start: 0.75rem; }

.wk__hd {
  display: flex;
  align-items: baseline;
  gap: 0.8ch;
  padding: 0.3rem 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.wk__n { color: var(--rule); font-variant-numeric: tabular-nums; }
.wk--live .wk__n { color: var(--amber-dim); }

.wk__soon {
  margin-inline-start: auto;
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  color: var(--rule);
  border: 1px solid var(--rule-soft);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
}

.wk > a {
  display: flex;
  align-items: center;
  gap: 0.75ch;
  padding: 0.36rem 0.55rem 0.36rem 2.1rem;
  color: var(--fg-dim);
  text-decoration: none;
  border-radius: 2px;
  border-inline-start: 1px solid var(--rule-soft);
  margin-inline-start: 0.95rem;
  letter-spacing: 0.02em;
}
.wk > a:hover { color: var(--fg); background: var(--ink-3); }
.wk > a[aria-current="page"] {
  color: var(--amber);
  background: var(--amber-wash);
  border-inline-start-color: var(--amber);
}

/* weeks that do not exist yet read as a plan, not as broken links */
.wk--soon .wk__hd { color: var(--rule); }
.wk--tools { margin-block-start: 1.1rem; padding-block-start: 0.5rem; border-block-start: 1px solid var(--rule-soft); }

/* ---------------------------------------------------------- who box */

.whobox {
  display: grid;
  grid-template-columns: 9.5rem 1fr;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  align-items: start;
  margin-block: 1.6rem;
}
.whobox__photo {
  width: 100%;
  /* the <img> carries height="1048" as a presentational hint, and an explicit
     height beats aspect-ratio — so this must be reset or the photo renders
     at its intrinsic 1048px tall */
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 28%;
  border: 1px solid var(--rule);
  border-radius: 2px;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: luminosity;
}
html[data-mode="paper"] .whobox__photo { mix-blend-mode: normal; filter: grayscale(0.15); }
.whobox > div > * + * { margin-block-start: 0.9em; }
.whobox .s-social { margin-block-start: 1.1em; font-size: 1.4rem; }
.whobox .s-mark { color: var(--fg-faint); }

@media (max-width: 640px) {
  .whobox { grid-template-columns: 1fr; }
  .whobox__photo { width: 7rem; }
}

/* ---------------------------------------------------------- brand marks

   Shared by the deck hero and the overview page, so they must live here in
   app.css rather than deck.css — the overview does not load deck.css, and
   an unstyled inline SVG expands to fill its container. */

.s-social {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-block-start: 1.1rem;
}
.s-mark {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  padding: 0.42rem;
  color: var(--fg-faint);
  border: 1px solid var(--rule);
  border-radius: 4px;
  text-decoration: none;
  transition: color 140ms ease-out, border-color 140ms ease-out;
}
.s-mark svg { width: 1.05rem; height: 1.05rem; display: block; fill: currentColor; }
.s-mark:hover { color: var(--amber); border-color: var(--amber-dim); }

/* inside a slide the marks scale with the slide's own type */
.slide .s-social { gap: 0.6em; margin-block-start: 1em; }
.slide .s-mark { width: 1.5em; height: 1.5em; padding: 0.3em; border-radius: 2px; }
.slide .s-mark svg { width: 0.9em; height: 0.9em; }

/* ---------------------------------------------------------- attribution

   Studio.Typo widget. On a slide it sits in the stage corner, outside the
   padded content box, so it can never affect the auto-fitter's measurement
   or collide with slide content. Its link is disabled there — nobody clicks
   a projector, and a focusable link would swallow the space bar mid-talk. */

studio-typo { color: var(--fg-faint); --st-font: var(--mono); }

.st-corner {
  position: absolute;
  inset-block-start: 1.6cqh;
  inset-inline-start: 2cqw;
  z-index: 3;
  opacity: 0.75;
  pointer-events: none;
}

.st-rail { display: block; margin-block-end: 0.85rem; opacity: 0.75; }
.st-rail:hover { opacity: 1; }

/* the sign-out control is gone — access is decided when the site is built */
.rail__out, .signout { display: none; }

/* ---------------------------------------------------------- work in progress */

.wk__wip {
  display: flex;
  align-items: center;
  gap: 0.75ch;
  padding: 0.36rem 0.55rem 0.36rem 2.1rem;
  margin-inline-start: 0.95rem;
  border-inline-start: 1px solid var(--rule-soft);
  color: var(--rule);
  cursor: default;
}
.pill--wip { color: var(--rule); border-color: var(--rule-soft); }

.card--wip { opacity: 0.45; cursor: default; }
.card--wip .card__n { color: var(--rule); }
.card--wip .card__tags span { border-color: var(--rule-soft); color: var(--rule); }

.wipnote {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.82em;
  letter-spacing: 0.02em;
  color: var(--fg-faint);
  border: 1px dashed var(--rule);
  border-radius: 2px;
  padding: 0.1em 0.55em;
}