/* ==========================================================================
   Cinematography & Mise-en-Scène Cheat Sheets
   Shared stylesheet. No JavaScript anywhere in this project.
   --------------------------------------------------------------------------
   1. Tokens
   2. Reset & base
   3. Shell + sidebar
   4. Typography
   5. Components (cards, tables, callouts, chips, swatches)
   6. Diagrams (SVG theming)
   7. Pager + footer
   8. Responsive
   9. Print
   ========================================================================== */

/* 1. Tokens ------------------------------------------------------------- */

:root {
  /* The two ends of the colour-temperature scale, used as the accent pair:
     tungsten 3200K (warm) and daylight 5600K (cool). */
  --tungsten: #e9b166;
  --tungsten-dim: #b98a4c;
  --daylight: #6fc9e0;
  --daylight-dim: #4b8fa3;

  --bg: #0a0b0d;
  --bg-grain: #0d0e12;
  --surface: #15171c;
  --surface-2: #1b1e24;
  --surface-3: #23272f;
  --line: #2b303a;
  --line-soft: #1f232b;

  --ink: #eceae6;
  --ink-dim: #a6a9b3;
  --ink-faint: #71757f;

  --good: #86c9a0;
  --bad: #e4735f;

  --radius: 14px;
  --radius-sm: 8px;
  --sidebar-w: 268px;

  --font-body:
    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;
  --font-display:
    "Instrument Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 28px rgba(0, 0, 0, 0.35);

  /* Outbound-link marker, drawn as a mask so it inherits the link colour. */
  --ext-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M13 9.5V13H3V3h3.5'/><path d='M9.5 2.5h4v4'/><path d='M13.5 2.5 7.5 8.5'/></svg>");
}

/* 2. Reset & base -------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Zoom is disabled via the viewport meta. iOS Safari ignores user-scalable=no
     by design, so this at least removes double-tap-to-zoom there. Panning and
     the horizontal scroll inside .dgm-scroll are unaffected. */
  touch-action: manipulation;
  /* Mobile WebKit and Blink flash a translucent blue box behind whatever the
     finger lands on. The nav, cards and pager all carry their own pressed and
     hover states, so the default highlight only muddies them. Keyboard focus
     is unaffected: that still draws the :focus-visible outline below. */
  -webkit-tap-highlight-color: transparent;
}

body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(
      1200px 600px at 12% -8%,
      rgba(233, 177, 102, 0.055),
      transparent 60%
    ),
    radial-gradient(
      900px 500px at 98% 4%,
      rgba(111, 201, 224, 0.045),
      transparent 62%
    );
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img,
svg {
  max-width: 100%;
}
svg {
  display: block;
}

a {
  color: var(--tungsten);
  text-decoration-color: rgba(233, 177, 102, 0.35);
  text-underline-offset: 3px;
}
a:hover {
  text-decoration-color: currentColor;
}

/* Links that leave the site open in a new tab, so they say so. The marker is a
   mask (never announced by screen readers); the spoken warning is the
   .visually-hidden "(opens in a new tab)" span in the markup. */
a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 0.58em;
  height: 0.58em;
  margin-left: 0.3em;
  vertical-align: -0.01em;
  background-color: currentColor;
  opacity: 0.55;
  -webkit-mask: var(--ext-icon) no-repeat center / contain;
  mask: var(--ext-icon) no-repeat center / contain;
  transition: opacity 0.15s ease;
}
a[target="_blank"]:hover::after {
  opacity: 1;
}

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--tungsten);
  color: #10110f;
  padding: 0.6rem 1rem;
  z-index: 99;
  font-weight: 600;
  border-radius: 0 0 8px 0;
}
.skip:focus {
  left: 0;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 3. Shell + sidebar ----------------------------------------------------- */

.shell {
  display: grid;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  min-width: 0;
  padding: 1.6rem 1.1rem 2.5rem;
  border-right: 1px solid var(--line-soft);
  background: linear-gradient(
    180deg,
    rgba(21, 23, 28, 0.9),
    rgba(10, 11, 13, 0.9)
  );
  backdrop-filter: blur(6px);
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.sidebar::-webkit-scrollbar {
  width: 8px;
}
.sidebar::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 8px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--ink);
  padding: 0.35rem 0.4rem 1.1rem;
}
.brand-mark {
  width: 30px;
  height: 30px;
  flex: 0 0 auto;
  border-radius: 7px;
  background: radial-gradient(
    circle at 34% 32%,
    var(--tungsten),
    var(--tungsten-dim) 55%,
    #4a3418 100%
  );
  box-shadow:
    0 0 0 1px rgba(233, 177, 102, 0.35),
    0 0 22px rgba(233, 177, 102, 0.22);
  position: relative;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 9px;
  border-radius: 50%;
  background: rgba(10, 11, 13, 0.75);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
}
.brand-text {
  display: grid;
  line-height: 1.25;
}
.brand-text strong {
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
.brand-text span {
  font-size: 0.74rem;
  color: var(--ink-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.nav-group {
  margin: 1.35rem 0 0.45rem;
  padding: 0 0.55rem;
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 600;
}
.nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
}
.nav a {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.42rem 0.55rem;
  border-radius: var(--radius-sm);
  color: var(--ink-dim);
  text-decoration: none;
  font-size: 0.88rem;
  border-left: 2px solid transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.nav a .n {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--ink-faint);
  min-width: 1.35em;
}
.nav a:hover {
  background: var(--surface-2);
  color: var(--ink);
}

/* Active page is resolved purely in CSS from the body attribute, so every
   page can ship the identical nav markup. */
body[data-page="index"] .nav a[data-nav="index"],
body[data-page="shot-sizes"] .nav a[data-nav="shot-sizes"],
body[data-page="angles"] .nav a[data-nav="angles"],
body[data-page="focus"] .nav a[data-nav="focus"],
body[data-page="lenses"] .nav a[data-nav="lenses"],
body[data-page="movement"] .nav a[data-nav="movement"],
body[data-page="gear"] .nav a[data-nav="gear"],
body[data-page="composition"] .nav a[data-nav="composition"],
body[data-page="continuity"] .nav a[data-nav="continuity"],
body[data-page="mise-en-scene"] .nav a[data-nav="mise-en-scene"],
body[data-page="lighting"] .nav a[data-nav="lighting"],
body[data-page="colour"] .nav a[data-nav="colour"],
body[data-page="time"] .nav a[data-nav="time"],
body[data-page="practice"] .nav a[data-nav="practice"] {
  background: var(--surface-2);
  color: var(--ink);
  border-left-color: var(--tungsten);
  font-weight: 500;
}

/* 4. Typography ---------------------------------------------------------- */

main {
  padding: 3rem clamp(1.1rem, 3.5vw, 3.2rem) 4rem;
  max-width: 1120px;
  width: 100%;
  min-width: 0;
  /* Centre the column inside the content track, so wide screens get an even
     gutter on both sides instead of all the slack piling up on the right. */
  margin-inline: auto;
}

.page-head {
  margin-bottom: 2.6rem;
}
nav.eyebrow {
  margin-bottom: 0.75rem;
}

/* Breadcrumb. Shares the eyebrow's type treatment, and its visible text
   matches the BreadcrumbList in each page's JSON-LD. */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.crumbs li {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  max-width: none;
}
.crumbs li + li::before {
  content: "\203A";
  color: var(--ink-faint);
}
.crumbs a {
  color: var(--tungsten);
  text-decoration: none;
}
.crumbs a:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}
.crumbs [aria-current="page"] {
  color: var(--ink-faint);
}

.section-intro {
  margin: -0.35rem 0 1.2rem;
  color: var(--ink-faint);
  font-size: 0.92rem;
}

h2[id] {
  scroll-margin-top: 1.2rem;
}

.eyebrow {
  margin: 0 0 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--tungsten);
}

h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.3rem, 1.5rem + 3.2vw, 3.6rem);
  line-height: 1.04;
  letter-spacing: -0.015em;
  margin: 0 0 0.7rem;
}

.standfirst {
  margin: 0;
  max-width: 62ch;
  font-size: clamp(1rem, 0.96rem + 0.3vw, 1.14rem);
  color: var(--ink-dim);
}

h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.5rem, 1.25rem + 0.9vw, 2rem);
  line-height: 1.18;
  letter-spacing: -0.01em;
  margin: 3.2rem 0 1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--line-soft);
}
h2:first-of-type {
}

h3 {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  margin: 2rem 0 0.6rem;
}

/* A small all-caps card heading. It is an <h3> so the document keeps a valid
   heading outline (h1 -> h2 -> h3); .label only carries the visual treatment. */
h3.label,
h4 {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 0.7rem;
}

p,
li {
  max-width: 74ch;
}
p {
  margin: 0 0 1rem;
}

strong {
  color: #fff;
  font-weight: 600;
}
em {
  color: var(--ink);
}

code,
.mono {
  font-family: var(--font-mono);
  font-size: 0.88em;
}

abbr[title] {
  text-decoration: none;
  border-bottom: 1px dotted var(--ink-faint);
  cursor: help;
}

/* 5. Components ---------------------------------------------------------- */

.card {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.25rem 1.35rem;
}
.card > :last-child {
  margin-bottom: 0;
}
.card h3 {
  margin-top: 0;
}

.grid {
  display: grid;
  gap: 1rem;
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
}

/* Tables */
.table-wrap {
  overflow-x: auto;
  max-width: 100%;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  margin: 1.2rem 0 1.6rem;
  scrollbar-width: thin;
}
table.sheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  min-width: 520px;
}
table.sheet caption {
  text-align: left;
  padding: 0.9rem 1.1rem 0.2rem;
  color: var(--ink-faint);
  font-size: 0.8rem;
}
table.sheet th,
table.sheet td {
  text-align: left;
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  max-width: none;
}
table.sheet thead th {
  background: var(--surface-2);
  color: var(--ink);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 600;
  white-space: nowrap;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
}
table.sheet tbody tr:last-child td {
  border-bottom: 0;
}
table.sheet tbody tr:hover {
  background: rgba(255, 255, 255, 0.022);
}
table.sheet td:first-child {
  color: #fff;
  font-weight: 500;
}

/* Abbreviation badge used in the shot-size table */
.abbr {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.12rem 0.45rem;
  border-radius: 5px;
  background: rgba(233, 177, 102, 0.11);
  border: 1px solid rgba(233, 177, 102, 0.25);
  color: var(--tungsten);
  white-space: nowrap;
}
.abbr.cool {
  background: rgba(111, 201, 224, 0.1);
  border-color: rgba(111, 201, 224, 0.24);
  color: var(--daylight);
}

/* Callouts */
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.2rem 0.85rem;
  border: 1px solid var(--line-soft);
  border-left: 3px solid var(--tungsten);
  background: var(--surface);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.2rem;
  margin: 1.4rem 0;
}
.callout .ico {
  grid-row: 1 / span 2;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tungsten);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  align-self: center;
  opacity: 0.85;
}
.callout > :last-child {
  margin-bottom: 0;
}
.callout.rule {
  border-left-color: var(--daylight);
}
.callout.rule .ico {
  color: var(--daylight);
}
.callout.watch {
  border-left-color: var(--ink-faint);
}
.callout.watch .ico {
  color: var(--ink-faint);
}

/* Illustrated term cards: a diagram beside each definition. Still a real <dl>,
   with each dt/dd pair wrapped in a div so the cards have something to lay out;
   the diagram lives inside the dd, which keeps the dl content model valid. */
.defcards {
  display: grid;
  gap: 0.9rem;
  margin: 1.3rem 0 1.7rem;
}
.defcards > div {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1rem 1.2rem 1.1rem;
}
.defcards dt {
  font-weight: 600;
  color: #fff;
  font-size: 0.95rem;
  margin-bottom: 0.6rem;
}
.defcards dd {
  margin: 0;
  display: grid;
  grid-template-columns: 152px minmax(0, 1fr);
  gap: 1.15rem;
  align-items: start;
}
.defcards dd svg {
  width: 100%;
  height: auto;
}
.defcards dd p {
  margin: 0;
  color: var(--ink-dim);
  font-size: 0.9rem;
  max-width: 68ch;
}

@media (max-width: 620px) {
  .defcards dd {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.8rem;
  }
  .defcards dd svg {
    max-width: 220px;
  }
}

/* Definition list */
.deflist {
  margin: 1.1rem 0 1.5rem;
  display: grid;
  gap: 0.85rem;
}
.deflist dt {
  font-weight: 600;
  color: #fff;
  font-size: 0.95rem;
}
.deflist dd {
  margin: 0.15rem 0 0;
  color: var(--ink-dim);
  max-width: 74ch;
}

/* Key/value stat row */
.keys {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1.2rem;
  padding: 0;
  list-style: none;
}
.keys li {
  font-size: 0.8rem;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  color: var(--ink-dim);
}
.keys li b {
  color: var(--ink);
  font-weight: 600;
}

/* Do / Don't pair */
.verdict {
  border-left: 3px solid var(--good);
}
.verdict.no {
  border-left-color: var(--bad);
}
.verdict .label {
  color: var(--good);
}
.verdict.no .label {
  color: var(--bad);
}

/* Colour swatches */
.swatches {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin: 0.4rem 0 1rem;
  padding: 0;
  list-style: none;
}
.swatch {
  width: 74px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--line);
  font-size: 0.64rem;
  text-align: center;
}
.swatch i {
  display: block;
  height: 42px;
}
.swatch span {
  display: block;
  padding: 0.3rem 0.2rem;
  background: var(--surface-2);
  color: var(--ink-faint);
  font-style: normal;
  font-family: var(--font-mono);
}

/* Colour wheels (pure CSS) */
.wheels {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin: 1.2rem 0;
  padding: 0;
  list-style: none;
}
.wheel-fig {
  text-align: center;
  font-size: 0.8rem;
  color: var(--ink-dim);
}
.wheel {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  margin: 0 auto 0.55rem;
  position: relative;
  background: conic-gradient(
    from -90deg,
    #e14b4b 0deg,
    #e87b3a 30deg,
    #e8b04b 60deg,
    #d8d64b 90deg,
    #8cc94b 120deg,
    #4bc47a 150deg,
    #4bc4bc 180deg,
    #4b9ad8 210deg,
    #5a6fd8 240deg,
    #8a5ad8 270deg,
    #c44bc4 300deg,
    #e14b84 330deg,
    #e14b4b 360deg
  );
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.wheel::after {
  content: "";
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.wheel b {
  position: absolute;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.55);
  top: 50%;
  left: 50%;
  margin: -7.5px;
  /* Each marker is placed by rotating out from the centre. */
  transform: rotate(var(--a)) translateY(-44px) rotate(calc(-1 * var(--a)));
}

/* 6. Diagrams ------------------------------------------------------------ */

figure.dgm {
  margin: 1.5rem 0 1.8rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 1.2rem 1.2rem 0.9rem;
}
/* SVG text is sized in user units, so it shrinks along with the viewBox. On a
   phone a 600-unit diagram scales to ~0.6 and 11px labels render at ~7px. Holding
   each diagram at its own viewBox width keeps the labels at their designed size
   and lets the diagram scroll instead: the same trade .table-wrap makes. */
.dgm-scroll {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.dgm-scroll::-webkit-scrollbar {
  height: 8px;
}
.dgm-scroll::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 8px;
}
figure.dgm svg {
  width: 100%;
  height: auto;
  min-width: var(--vb, 0);
}
figure.dgm figcaption {
  margin-top: 0.85rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--line-soft);
  font-size: 0.82rem;
  color: var(--ink-faint);
  max-width: 68ch;
}

/* SVG theming so diagrams follow the tokens above */
.dgm .stroke {
  stroke: var(--line);
  stroke-width: 1.5;
  fill: none;
}
.dgm .stroke-soft {
  stroke: var(--line-soft);
  stroke-width: 1;
  fill: none;
}
/* Mid-weight stroke: horizons, hills, set pieces, and any annotation that must
   actually be readable. Sits deliberately below .fig so the subject still owns
   the frame, but well clear of the panel background. */
.dgm .stroke-mid {
  stroke: var(--ink-faint);
  stroke-width: 1.3;
  fill: none;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.dgm .dash {
  stroke: var(--ink-faint);
  stroke-width: 1.2;
  fill: none;
  stroke-dasharray: 5 5;
  opacity: 0.75;
}
.dgm .fig {
  fill: var(--ink-dim);
}
.dgm .fig-stroke {
  stroke: var(--ink-dim);
  fill: none;
  stroke-linecap: round;
}
/* Colour-only variants. The -s classes above pin stroke-width, which silently
   beats a stroke-width attribute; use these wherever the element sets its own. */
.dgm .warm-fill {
  fill: var(--tungsten);
}
.dgm .warm-stroke {
  stroke: var(--tungsten);
  fill: none;
  stroke-linecap: round;
}
.dgm .warm {
  fill: var(--tungsten);
}
.dgm .warm-s {
  stroke: var(--tungsten);
  fill: none;
  stroke-width: 1.6;
}
.dgm .cool {
  fill: var(--daylight);
}
.dgm .cool-s {
  stroke: var(--daylight);
  fill: none;
  stroke-width: 1.6;
}
.dgm .bad {
  fill: var(--bad);
}
.dgm .bad-s {
  stroke: var(--bad);
  fill: none;
  stroke-width: 1.6;
}
.dgm .good {
  fill: var(--good);
}
.dgm .good-s {
  stroke: var(--good);
  fill: none;
  stroke-width: 1.6;
}
.dgm .panel {
  fill: var(--surface-2);
}
.dgm text {
  font-family: var(--font-body);
  font-size: 11px;
  fill: var(--ink-dim);
}
.dgm text.lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  fill: var(--ink-faint);
  text-transform: uppercase;
}
.dgm text.key {
  fill: var(--tungsten);
  font-weight: 600;
}
.dgm text.key2 {
  fill: var(--daylight);
  font-weight: 600;
}
.dgm text.no {
  fill: var(--bad);
  font-weight: 600;
}
.dgm text.yes {
  fill: var(--good);
  font-weight: 600;
}
.dgm text.big {
  font-size: 13px;
  fill: var(--ink);
  font-weight: 600;
}

/* Small icon grid used for movement / composition mini-diagrams */
.tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.9rem;
  margin: 1.3rem 0 1.6rem;
}
.tile {
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: 0.9rem 0.9rem 1rem;
  text-align: center;
}
.tile svg {
  margin: 0 auto 0.6rem;
}
.tile b {
  display: block;
  font-size: 0.87rem;
  color: #fff;
}
.tile span {
  display: block;
  font-size: 0.76rem;
  color: var(--ink-faint);
  line-height: 1.45;
  margin-top: 0.15rem;
}

/* 7. Pager + footer ------------------------------------------------------ */

.pager {
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  margin-top: 3.5rem;
  padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft);
}
.pager a {
  flex: 1 1 0;
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  background: var(--surface);
  text-decoration: none;
  color: var(--ink);
  transition:
    border-color 0.15s ease,
    background 0.15s ease;
  max-width: 340px;
}
.pager a:hover {
  border-color: var(--line);
  background: var(--surface-2);
}
.pager a span {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.pager a b {
  font-weight: 500;
  font-size: 0.95rem;
}
.pager .prev {
  text-align: left;
}
.pager .next {
  text-align: right;
}

/* Holding page. The slate is the site's own diagram vocabulary doing duty as
   an illustration, so the page reads as part of the set rather than a stub. */
.soon {
  display: grid;
  justify-items: center;
  gap: 1.6rem;
  text-align: center;
  margin: 2.2rem 0 1.2rem;
  padding: 2.6rem 1.4rem 2.8rem;
  background:
    radial-gradient(
      560px 250px at 50% -25%,
      rgba(233, 177, 102, 0.09),
      transparent 70%
    ),
    var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.soon .dgm {
  width: 100%;
  max-width: 420px;
  height: auto;
}
.soon-copy {
  max-width: 48ch;
}
/* h2 carries a section rule everywhere else; inside the card it is a title. */
.soon-copy h2 {
  margin: 0 0 0.55rem;
  padding: 0;
  border-top: 0;
  font-size: clamp(1.9rem, 1.5rem + 1.8vw, 2.6rem);
}
.soon-copy p {
  margin: 0;
  color: var(--ink-dim);
}

/* Site footer: the same block closes every page, so it carries the mark, the
   two standing links and the copyright. */
.site-foot {
  margin-top: 3.2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line-soft);
  display: grid;
  gap: 1.1rem;
}
.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 1.6rem;
}
/* The sidebar brand carries padding to sit in the nav; here the grid gap does
   that job. */
.site-foot .brand {
  padding: 0;
}
.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  font-size: 0.86rem;
}
.foot-nav a {
  color: var(--ink-dim);
  text-decoration: none;
}
.foot-nav a:hover {
  color: var(--tungsten);
}
.foot-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1.6rem;
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.foot-bottom p {
  margin: 0;
}

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

.hero {
  padding: 1rem 0 2.4rem;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 2.4rem;
}
.hero h1 {
  font-size: clamp(2.6rem, 1.5rem + 4.6vw, 4.6rem);
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(236px, 1fr));
  gap: 1rem;
}
.cards a {
  display: grid;
  align-content: start;
  gap: 0.35rem;
  padding: 1.15rem 1.2rem 1.25rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  text-decoration: none;
  color: var(--ink);
  transition:
    transform 0.16s ease,
    border-color 0.16s ease,
    background 0.16s ease;
}
.cards a:hover {
  transform: translateY(-2px);
  border-color: rgba(233, 177, 102, 0.4);
  background: var(--surface-2);
}
.cards a .num {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  color: var(--tungsten);
}
.cards a b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.32rem;
  line-height: 1.15;
}
.cards a span {
  font-size: 0.84rem;
  color: var(--ink-faint);
  line-height: 1.5;
}

/* 8. Responsive ---------------------------------------------------------- */

@media (max-width: 900px) {
  /* Out of the grid and into normal flow, so the nav below can stick against
     the whole document rather than a one-row grid area its own height. */
  .shell {
    display: block;
  }
  /* The aside gives up its box: that puts the wordmark and the nav directly in
     the page flow, so the wordmark scrolls away and only the link strip pins.
     The sidebar's own surface moves onto .nav with it. */
  .sidebar {
    display: contents;
  }
  .brand {
    padding: 0.9rem 1.4rem 0.8rem;
  }
  .nav {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    gap: 1.4rem;
    overflow-x: auto;
    padding: 0.5rem 1rem 0.45rem;
    scroll-padding-left: 0.75rem;
    border-bottom: 1px solid var(--line-soft);
    background: linear-gradient(
      180deg,
      rgba(21, 23, 28, 0.94),
      rgba(13, 15, 18, 0.94)
    );
    backdrop-filter: blur(6px);
    scrollbar-width: thin;
    max-width: 100%;
  }
  .nav > * {
    flex: 0 0 auto;
  }
  /* Park the strip on the sheet you are reading instead of always at 00. The
     selector list mirrors the active-link rule further up. Chromium only for
     now: other engines ignore it and the strip simply starts at the left. */
  body[data-page="index"] .nav a[data-nav="index"],
  body[data-page="shot-sizes"] .nav a[data-nav="shot-sizes"],
  body[data-page="angles"] .nav a[data-nav="angles"],
  body[data-page="focus"] .nav a[data-nav="focus"],
  body[data-page="lenses"] .nav a[data-nav="lenses"],
  body[data-page="movement"] .nav a[data-nav="movement"],
  body[data-page="gear"] .nav a[data-nav="gear"],
  body[data-page="composition"] .nav a[data-nav="composition"],
  body[data-page="continuity"] .nav a[data-nav="continuity"],
  body[data-page="mise-en-scene"] .nav a[data-nav="mise-en-scene"],
  body[data-page="lighting"] .nav a[data-nav="lighting"],
  body[data-page="colour"] .nav a[data-nav="colour"],
  body[data-page="time"] .nav a[data-nav="time"],
  body[data-page="practice"] .nav a[data-nav="practice"] {
    scroll-initial-target: nearest;
    scroll-snap-align: start;
  }
  .nav-group {
    margin: 0 0 0.4rem;
    padding: 0 0.2rem;
    position: sticky;
    left: 0;
    display: inline-block;
  }
  .nav ul {
    grid-auto-flow: column;
    gap: 0.3rem;
  }
  .nav a {
    white-space: nowrap;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius-sm);
  }
  body[data-page] .nav a[data-nav] {
    border-left: 0;
  }
  main {
    padding-top: 2.2rem;
  }
  /* Deep links land under the pinned nav otherwise. */
  h2[id] {
    scroll-margin-top: 5.5rem;
  }
  .pager {
    flex-direction: column;
  }
  .pager a {
    max-width: none;
  }
  .pager .next {
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* 9. Print --------------------------------------------------------------- */

@media print {
  :root {
    --bg: #fff;
    --surface: #fff;
    --surface-2: #f5f5f3;
    --surface-3: #ececea;
    --ink: #111;
    --ink-dim: #333;
    --ink-faint: #666;
    --line: #bbb;
    --line-soft: #ddd;
    --tungsten: #9a6b1f;
    --daylight: #1f6b80;
  }
  body {
    background: #fff;
    color: #111;
    font-size: 11pt;
  }
  .sidebar,
  .pager,
  .skip,
  .site-foot {
    display: none !important;
  }
  .shell {
    display: block;
  }
  main {
    padding: 0;
    max-width: none;
  }
  a {
    color: #111;
    text-decoration: none;
  }
  .card,
  .table-wrap,
  figure.dgm,
  .callout,
  .tile,
  .defcards > div {
    break-inside: avoid;
    box-shadow: none;
  }
  /* paper has no horizontal scroll, so let the diagram fit the page */
  .dgm-scroll {
    overflow: visible;
  }
  figure.dgm svg {
    min-width: 0;
  }
  table.sheet {
    min-width: 0;
    font-size: 9.5pt;
  }
  table.sheet thead th {
    position: static;
  }
  h2 {
    break-after: avoid;
  }
  figure.dgm figcaption {
    color: #444;
  }

  /* Elements that are hard-coded white for the dark theme need inverting,
     or they print as white-on-white. */
  strong,
  .deflist dt,
  .tile b,
  .cards a b,
  .pager a b,
  .keys li b,
  ol.drills li b,
  table.sheet td:first-child {
    color: #111;
  }
  a[target="_blank"]::after {
    display: none;
  }
  .crumbs a,
  .crumbs [aria-current="page"] {
    color: #444;
  }
  .section-intro {
    color: #555;
  }
  .defcards dd p {
    color: #333;
  }
  .swatch {
    border-color: #ccc;
  }
  .kelvin .bar {
    border-color: #999;
  }
}

/* 10. Page-specific components ------------------------------------------- */

/* Kelvin scale (sheet 09) */
.kelvin {
  margin: 1.3rem 0 1.7rem;
}
.kelvin .bar {
  height: 46px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: linear-gradient(
    90deg,
    #ff7a26 0%,
    #ffa14f 12%,
    #ffc489 24%,
    #ffe3c4 36%,
    #fff7ee 46%,
    #ffffff 53%,
    #e9f2ff 64%,
    #c6dcff 78%,
    #97bdff 92%,
    #7aa9ff 100%
  );
}
.kelvin .ticks {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.67rem;
  color: var(--ink-faint);
}
.kelvin .ticks span {
  flex: 1 1 0;
  text-align: center;
}
.kelvin .ticks span:first-child {
  text-align: left;
}
.kelvin .ticks span:last-child {
  text-align: right;
}

/* Ratio ladder (sheet 09) */
.ratios {
  list-style: none;
  margin: 1rem 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.ratios li {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 0.9rem;
  align-items: center;
  font-size: 0.88rem;
}
.ratios b {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--tungsten);
}
.ratios i {
  display: block;
  height: 10px;
  border-radius: 6px;
  font-style: normal;
  background: linear-gradient(90deg, var(--tungsten), var(--surface-3));
}

/* Numbered drill list (sheet 12) */
ol.drills {
  counter-reset: d;
  list-style: none;
  margin: 1.2rem 0 1.6rem;
  padding: 0;
  display: grid;
  gap: 1rem;
}
ol.drills li {
  counter-increment: d;
  position: relative;
  padding: 1.1rem 1.25rem 1.15rem 3.4rem;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  max-width: none;
}
ol.drills li::before {
  content: counter(d, decimal-leading-zero);
  position: absolute;
  left: 1.2rem;
  top: 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  color: var(--tungsten);
}
ol.drills li b {
  display: block;
  color: #fff;
  margin-bottom: 0.2rem;
}

/* Resource lists (sheet 13) */
.links {
  list-style: none;
  margin: 0.8rem 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.7rem;
}
.links li {
  padding-left: 1.1rem;
  position: relative;
}
.links li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--ink-faint);
}
.wheel-fig {
  margin: 0;
}
.wheel-fig b {
}