/* ── THE STUDIO PAGE'S OWN STYLESHEET ────────────────────────────────────
   AN EXTERNAL FILE, AND THAT IS NOT A PREFERENCE.

   tools/ship/headers.mjs ships `style-src 'self'` with no 'unsafe-inline',
   and tools/ship/headers.emit.mjs re-derives that claim from every emitted
   document on every build. A <style> block or a style="" attribute in
   public/studio/index.html does not merely get blocked in the browser — it
   FAILS THE BUILD, by design, because the failure mode of a blocked
   stylesheet is a page that ships looking broken.

   So the CSS lives here, is fetched same-origin, and the policy stays as
   strict as it was.

   The palette is the site's own, lifted from src/ui/styles.css so this page
   and the film are the same studio: --ink is the black the canvas sits on,
   --gold-2 is the wordmark gold, --bone is the type colour.
─────────────────────────────────────────────────────────────────────────── */

:root {
  --ink: #000000;
  --gold-1: #f1e1a9;
  --gold-2: #c6a867;
  --gold-3: #8e6e2c;
  --bone: #e8e4da;
  --bone-dim: rgba(232, 228, 218, 0.55);
  --hairline: rgba(232, 228, 218, 0.14);
  --track-mark: 0.22em;
  --measure: 36rem;
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--bone);
  font: 400 1rem/1.7 ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  /* One gutter, set once, so nothing can touch the edge of a phone. */
  padding: clamp(1.25rem, 4vw, 3rem);
}

a { color: var(--gold-2); text-underline-offset: 0.25em; }
a:hover,
a:focus-visible { color: var(--gold-1); }
:focus-visible { outline: 2px solid var(--gold-2); outline-offset: 3px; }

.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-block: clamp(2rem, 6vw, 4.5rem);
}

.mark {
  width: 44px;
  height: 44px;
  color: var(--gold-2);
  display: block;
  margin-bottom: 2.25rem;
}

.eyebrow {
  font-size: 0.66rem;
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--bone-dim);
  margin: 0 0 1.25rem;
}

h1 {
  font: 400 clamp(1.85rem, 1.1rem + 2.4vw, 2.7rem)/1.15 ui-serif, Georgia, "Times New Roman", serif;
  margin: 0 0 1.5rem;
  letter-spacing: -0.01em;
}

/* Section headings are small and tracked rather than large, because the page
   is a document to be read top to bottom, not a landing page to be scanned.
   The rule above each one is the only divider on the page. */
h2 {
  font-size: 0.66rem;
  letter-spacing: var(--track-mark);
  text-transform: uppercase;
  color: var(--bone-dim);
  font-weight: 400;
  margin: 3rem 0 1rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--hairline);
}

h3 {
  font: 400 1rem/1.5 ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--bone);
  margin: 1.75rem 0 0.4rem;
}

p { margin: 0 0 1.1rem; }
p.lede { font-size: 1.06rem; }
p.quiet { color: var(--bone-dim); font-size: 0.92rem; }
p.after-list { margin-top: 1.25rem; }
p.after-block { margin-top: 1.5rem; }

/* The registration table. Two columns on a desktop, stacked on a phone —
   a description list rather than a table because each row is one term and
   one value, and there is no second column of data. */
dl.facts {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1.5rem;
  align-items: baseline;
}
dl.facts dt {
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bone-dim);
  white-space: nowrap;
}
dl.facts dd { margin: 0; }
dd.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  letter-spacing: 0.04em;
}

.note {
  border-left: 2px solid var(--gold-3);
  padding: 0.9rem 0 0.9rem 1.1rem;
  margin: 1.5rem 0;
  color: var(--bone-dim);
  font-size: 0.92rem;
}
.note strong { color: var(--gold-2); font-weight: 400; }

ul.plain { list-style: none; padding: 0; margin: 0; }
ul.plain li { padding: 1rem 0; border-bottom: 1px solid var(--hairline); }
ul.plain li:last-child { border-bottom: 0; }
ul.plain .t { display: block; margin-bottom: 0.2rem; }
ul.plain .d { display: block; color: var(--bone-dim); font-size: 0.9rem; }

footer {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--hairline);
  color: var(--bone-dim);
  font-size: 0.82rem;
}
footer a { color: var(--bone-dim); }
footer a:hover { color: var(--gold-2); }

@media (max-width: 30rem) {
  dl.facts { grid-template-columns: 1fr; gap: 0.15rem; }
  dl.facts dt { margin-top: 0.75rem; }
}