/*
 * Renoir — the site.
 *
 * Every value in the token block below is quoted from
 * `src/shared/tokens/` so the site and the app cannot drift apart by
 * accident. Where a value has been adapted for the web rather than
 * copied, the comment says so and says why; an unmarked value is the
 * app's own.
 *
 * The house laws that govern this file, restated because a stylesheet
 * is where they get broken:
 *   - ONE ACCENT. Ember is interactive states only — links on hover and
 *     focus, and nothing else. It is never decoration.
 *   - Absence renders as absence. The site has no screenshots yet, so
 *     it has no image frames waiting to be filled.
 *   - Say it once. Navigation has one owner (the footer); the header
 *     carries the wordmark and nothing more.
 *   - A seam has one owner. Section air is a margin-top on the section
 *     that follows, never a pair of paddings that sum.
 *   - Reduce Motion is STILL, not slower.
 */

/* ---------------------------------------------------------------- fonts */

/*
 * Self-hosted, subset from the exact .ttf files the app bundles
 * (site/tools/build-fonts.py). No third-party font CDN: the site tells
 * visitors it calls nobody, and a webfont link would send every
 * visitor's IP address to a third party on first paint.
 */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat-600.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/montserrat-700.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/jetbrains-mono-400.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------- tokens */

:root {
  /* colors — src/shared/tokens/colors.ts */
  --background: #080808;
  --surface: #121212;
  --ink: #faf9f6;
  --ink-secondary: rgba(250, 249, 246, 0.62);
  --ink-tertiary: rgba(250, 249, 246, 0.38);
  --border: rgba(250, 249, 246, 0.1);
  --accent: #e86b2e;

  /* space — src/shared/tokens/spacing.ts */
  --sm: 8px;
  --md: 16px;
  --lg: 24px;
  --xl: 32px;
  --xxl: 48px;
  /* screenX: the page's one gutter. Type starts here. */
  --gutter: 20px;

  /* radius — src/shared/tokens/spacing.ts */
  --radius-md: 10px;

  /* motion — src/shared/tokens/spacing.ts */
  --fast: 150ms;
  --base: 250ms;

  /*
   * Type. The app's ramp is display 34/38, title 20/26, body 16/23,
   * caption 13/18. Web adaptation, stated: display scales with the
   * viewport because a desktop window is far wider than a phone and a
   * fixed 34px masthead reads as a paragraph on one; and body line
   * height opens from 1.44 to 1.62, because these pages carry long
   * prose (the legal documents) where the app carries short blocks.
   * Every other size is the app's own.
   */
  --type-display: clamp(2.125rem, 1.35rem + 3.9vw, 4rem);
  --type-title: clamp(1.25rem, 1.1rem + 0.75vw, 1.625rem);
  --type-body: 1rem;
  --type-caption: 0.8125rem;

  /*
   * Uppercase tracking, and it is the app's canonical label rather than
   * a value picked by eye: caption (13/18) + uppercase + letterSpacing
   * 1.2 is the section-label pattern throughout the app, and 1.2 at
   * 13pt is 0.092em. The app's own band runs 0.8–2.4 and scales
   * INVERSELY with size — the smaller the label, the wider the track —
   * so a stamp set larger than caption here would take less, not more.
   */
  --track-stamp: 0.092em;

  --measure: 34rem;
  --page: 60rem;
}

/* ----------------------------------------------------------------- base */

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

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

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: var(--type-body);
  font-weight: 400;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/*
 * The projector beam — the one atmospheric gesture on an otherwise
 * monochrome page, and the site's substitute for the film imagery that
 * carries all the color in the app. Ember at 5%: at rest it should
 * read as the room being lit from somewhere, never as a gradient.
 * Fixed, so it belongs to the window rather than to the scroll.
 */
body::before {
  content: '';
  position: fixed;
  inset: 0 0 auto 0;
  height: 70vh;
  background: radial-gradient(
    120% 100% at 50% 0%,
    rgba(232, 107, 46, 0.05) 0%,
    rgba(232, 107, 46, 0.015) 38%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Everything sits above the beam. */
.shell {
  position: relative;
  z-index: 1;
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* --------------------------------------------------------------- typography */

h1,
h2,
h3 {
  font-weight: 700;
  line-height: 1.15;
  margin: 0;
  text-wrap: balance;
}

p {
  margin: 0;
}

/* The stamp voice: standalone facts and labels, mono, never names. */
.stamp {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--type-caption);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  color: var(--ink-secondary);
}

.lede {
  color: var(--ink-secondary);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------- links */

/*
 * The underline is inkTertiary, NOT the border token. `border` is
 * 0.10 alpha and is right for a hairline between two blocks, which is
 * a boundary you are meant to feel rather than read; on a link it
 * composites to 3.4:1 and the link stops being findable at a glance.
 * The privacy policy is reached through one of these.
 */
a {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: var(--ink-tertiary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  transition: color var(--fast) ease-out, text-decoration-color var(--fast) ease-out;
}

/* Ember, and only here. */
a:hover,
a:focus-visible {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

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

/* --------------------------------------------------------------- header */

.masthead {
  display: flex;
  align-items: baseline;
  padding: var(--xl) 0 0;
}

.masthead a {
  text-decoration: none;
}

.wordmark {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--type-caption);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  color: var(--ink);
}

/* ------------------------------------------------------------- the line */

.hero {
  padding: clamp(4rem, 14vh, 8rem) 0 0;
}

/*
 * The line. Tracking is the app's own display value (+0.2 at 34pt =
 * +0.006em) rather than the negative tracking large type usually takes:
 * negative tracking exists in this house but is RESERVED to the poster
 * idiom — the billing plate at -0.5 and the film gallery at -0.4 — and
 * borrowing a reserved device for a headline is how a reserved device
 * stops meaning anything.
 */
.line {
  font-size: var(--type-display);
  letter-spacing: 0.006em;
  line-height: 1.06;
}

.hero .lede {
  margin-top: var(--xl);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
}

/* -------------------------------------------------------------- sections */

/*
 * The seam has one owner: the space between two sections is this
 * margin, and no section carries a matching padding-bottom.
 */
.section {
  margin-top: clamp(4rem, 11vh, 6.5rem);
  border-top: 1px solid var(--border);
  padding-top: var(--lg);
}

.section > .stamp {
  display: block;
  margin-bottom: var(--lg);
}

.section h2 {
  font-size: var(--type-title);
  max-width: var(--measure);
}

.section h2 + p {
  margin-top: var(--md);
}

.section p {
  color: var(--ink-secondary);
  max-width: var(--measure);
}

.section p + p {
  margin-top: var(--md);
}

/* A set of stated facts, each with its own rule. */
.facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--xl);
}

@media (min-width: 46rem) {
  .facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--xxl);
    row-gap: clamp(2rem, 5vh, 3rem);
  }
}

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

.facts h3 {
  font-size: var(--type-body);
  font-weight: 600;
  line-height: 1.4;
}

.facts p {
  margin-top: var(--sm);
  font-size: var(--type-caption);
  line-height: 1.7;
}

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

/*
 * The legal and support documents. One column, one measure, and no
 * decoration: these are read, not scanned.
 */
.prose {
  max-width: var(--measure);
  margin-top: var(--xxl);
}

.prose > * + * {
  margin-top: var(--md);
}

/* A document's own name, at title scale — these pages are read, not announced. */
.page-title {
  font-size: var(--type-title);
  line-height: 1.25;
}

.prose h2 {
  font-size: var(--type-title);
  margin-top: var(--xl);
  line-height: 1.25;
}

.prose h3 {
  font-size: var(--type-body);
  font-weight: 600;
  margin-top: var(--lg);
  line-height: 1.4;
}

.prose p,
.prose li {
  color: var(--ink-secondary);
}

.prose strong {
  color: var(--ink);
  font-weight: 600;
}

.prose ul,
.prose ol {
  margin-top: var(--md);
  padding-left: var(--lg);
}

.prose li + li {
  margin-top: var(--sm);
}

.prose code {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 0.875em;
  color: var(--ink);
}

.prose hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: var(--xl) 0;
}

/* The document's own date line. */
.doc-meta {
  margin-top: var(--md);
}

/* A page whose content has not landed yet says so, and says it plainly. */
.pending {
  margin-top: var(--xxl);
  max-width: var(--measure);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--lg);
  background: var(--surface);
  color: var(--ink-secondary);
}

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

.foot {
  margin-top: clamp(5rem, 14vh, 8rem);
  border-top: 1px solid var(--border);
  padding: var(--lg) 0 var(--xxl);
  display: grid;
  gap: var(--lg);
}

.foot nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lg);
}

.foot nav a {
  font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: var(--type-caption);
  letter-spacing: var(--track-stamp);
  text-transform: uppercase;
  text-decoration: none;
}

.foot nav a:hover,
.foot nav a:focus-visible {
  color: var(--accent);
}

/*
 * The colophon is inkSecondary, not the tertiary ink its quietness
 * suggests. Tertiary composites to 3.4:1 on this ground — under the
 * 4.5:1 floor for text this size — and TMDB's attribution is a term of
 * using their data, not a footnote we may set below the legible floor.
 */
.colophon {
  display: grid;
  gap: var(--sm);
  font-size: var(--type-caption);
  line-height: 1.65;
  color: var(--ink-secondary);
  max-width: var(--measure);
}

/* ---------------------------------------------------------------- motion */

/*
 * One entrance, and it is a fade only — nothing travels, nothing
 * overshoots. It runs on page load and is never repeated.
 */
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.hero > h1,
.hero > .lede {
  animation: rise var(--base) ease-out both;
}

.hero > .lede {
  animation-delay: 90ms;
}

/*
 * Reduce Motion is STILL, not slower: everything is in its seat on the
 * first frame.
 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------ selection */

::selection {
  background: rgba(232, 107, 46, 0.28);
  color: var(--ink);
}