/* The home page: the weave and the stage. Design notes: docs/landing.md.
   One scheme, the films' own: a flat night ground, lit paper, steel and brick
   (values from the films' house identity). No gradients, glows or shadows. */

@font-face { font-family: "Barlow"; src: url("fonts/barlow-400.woff") format("woff"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-600.woff") format("woff"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-700.woff") format("woff"); font-weight: 700; font-display: swap; }

:root {
  --ground: #1c1526;
  --raise: #272033;
  --line: #3b3249;
  --ink: #f2e6d4;
  --muted: #bcb8c6;
  --paper: #fffdf7;
  --steel: #97c1df;
  --brick: #e18a79;
  --text: "Barlow", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --display: "Barlow Condensed", "Avenir Next Condensed", "Arial Narrow", sans-serif;
  --slot: 38px;
  --row: 28px;
  --gutter: 40px;
  --arrive: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--ground); scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ground); color: var(--ink); font: 400 17px/1.5 var(--text); font-variant-numeric: tabular-nums; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd { margin: 0; padding: 0; }
ol[role="list"], ul[role="list"] { list-style: none; }
:where(a, button):where(:focus-visible) { outline: 2px solid var(--steel); outline-offset: 3px; border-radius: 3px; }

.wrap { max-width: calc(1360px + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.skip { position: absolute; left: 12px; top: -60px; background: var(--paper); color: var(--ground); padding: 8px 12px; border-radius: 3px; z-index: 30; font-weight: 600; }
.skip:focus { top: 10px; }

/* ---------------------------------------------------------------- header */
.top { position: sticky; top: 0; z-index: 20; background: var(--ground); border-bottom: 1px solid var(--line); }
.top__in { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 22px/1 var(--display); text-decoration: none; letter-spacing: 0.01em; }
.top__nav { display: flex; gap: 6px 26px; flex-wrap: wrap; justify-content: flex-end; font-size: 15.5px; }
.top__nav a { text-decoration: none; color: var(--muted); padding: 6px 0; }
.top__nav a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }

/* ------------------------------------------------------------------ hero */
.hero { padding-block: 24px 18px; }
.hero h1 { font: 700 clamp(36px, 3.75vw, 64px)/1.02 var(--display); letter-spacing: 0; max-width: 24em; text-wrap: balance; }
.hero__second { font: 700 clamp(22px, 2.1vw, 32px)/1.1 var(--display); color: var(--steel); margin-top: 12px; text-wrap: balance; }
.hero__note { display: none; }

/* -------------------------------------------------------------- the weave */
.work { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding-bottom: 72px; }
.weave__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.weave__note { color: var(--muted); font-size: 14.5px; line-height: 1.45; max-width: 60ch; text-wrap: pretty; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--line); }
.weave__key { white-space: nowrap; }
.key { display: inline-block; width: 22px; height: 2px; vertical-align: middle; margin: 0 8px 2px 0; }
.key--maths { background: var(--brick); }
.key--code { background: var(--steel); }

.row { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; align-items: center; min-height: var(--row); position: relative; --ink-row: var(--ink); }
.row[data-ink="maths"] { --ink-row: var(--brick); }
.row[data-ink="code"] { --ink-row: var(--steel); }
.row--first { margin-top: 5px; padding-top: 5px; border-top: 1px solid var(--line); }
.row--head { min-height: 22px; color: var(--muted); font-size: 12.5px; line-height: 1; }
.row--head .row__knots::before { display: none; }
.col { display: inline-block; text-align: center; white-space: nowrap; }
.col--1 { width: var(--slot); }
.col--2 { width: calc(2 * var(--slot)); }
.col__tight { display: none; }

.row__group { grid-column: 1; grid-row: 1; align-self: start; font: 700 16.5px/1.08 var(--display); color: var(--ink); padding: 6px 10px 0 0; height: 0; overflow: visible; text-wrap: balance; }
.row__label { grid-column: 2; display: flex; align-items: baseline; gap: 10px; min-width: 0; text-decoration: none; padding: 4px 10px; margin-right: 14px; border-radius: 3px; font-weight: 600; font-size: 15.5px; line-height: 1.25; }
.row__what { white-space: nowrap; }
.row__name { display: none; color: var(--muted); font-weight: 400; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.row__knots { grid-column: 3; display: flex; position: relative; color: var(--ink-row); }
.row__knots::before { content: ""; position: absolute; left: -14px; top: 50%; height: 1px; width: calc((var(--n) + 0.5) * var(--slot) + 14px); background: currentColor; opacity: 0.38; transform-origin: left center; }
.row[data-last="0"] { --n: 0; } .row[data-last="1"] { --n: 1; } .row[data-last="2"] { --n: 2; } .row[data-last="3"] { --n: 3; }
.row[data-last="4"] { --n: 4; } .row[data-last="5"] { --n: 5; } .row[data-last="6"] { --n: 6; }

.slot { width: var(--slot); height: var(--row); display: grid; place-items: center; position: relative; flex: none; }
.knot i { display: block; background: currentColor; position: relative; z-index: 1; transition: transform 120ms var(--arrive); }
.knot--short i { width: 9px; height: 9px; border-radius: 50%; }
.knot--full i { width: 15px; height: 15px; border-radius: 50%; }
.knot--site i { width: 13px; height: 13px; border-radius: 3px; background: var(--ground); border: 2px solid currentColor; }
.knot--paper i { width: 11px; height: 14px; border-radius: 1px 6px 1px 1px; background: var(--ground); border: 2px solid currentColor; }
.knot--code i { width: 11px; height: 11px; background: var(--ground); border: 2px solid currentColor; transform: rotate(45deg); }
.knot--tie-start::after, .knot--tie-mid::after, .knot--tie-end::after { content: ""; position: absolute; left: calc(50% - 1px); width: 2px; background: currentColor; opacity: 0.75; }
.knot--tie-start::after { top: 50%; bottom: -1px; }
.knot--tie-mid::after { top: -1px; bottom: -1px; }
.knot--tie-end::after { top: -1px; bottom: 50%; }
@media (hover: hover) and (pointer: fine) {
  .row:not(.is-on) .row__label:hover { background: var(--raise); }
  .knot:hover i { transform: scale(1.35); }
  .knot--code:hover i { transform: rotate(45deg) scale(1.35); }
}

/* The mark whose preview is in the frame. */
.knot.is-shown::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2px solid var(--paper); border-radius: 50%; }

/* The selected row lights as a paper band, the films' own title band. */
.row.is-on .row__label { background: var(--paper); color: var(--ground); }
.row.is-on .row__name { color: #4a4458; }
.row.is-on .row__knots::before { opacity: 1; height: 2px; margin-top: -0.5px; }
.row.is-on .row__knots::after { content: ""; position: absolute; left: -14px; top: calc(50% - 3.5px); width: 7px; height: 7px; border-radius: 50%; background: var(--paper); z-index: 2; opacity: 0; }
.motion .row.is-on .row__knots::after { animation: bead 700ms var(--arrive) 1; }
@keyframes bead { 0% { transform: translateX(0); opacity: 1; } 80% { opacity: 1; } 100% { transform: translateX(calc((var(--n) + 0.5) * var(--slot) + 10px)); opacity: 0; } }

/* The entrance, once per session: threads draw left to right. */
.enter .row:not(.row--head) .row__knots::before { animation: draw 620ms var(--arrive) backwards; animation-delay: calc(var(--i, 0) * 28ms); }
.enter .row:not(.row--head) .knot i { animation: knot 300ms var(--arrive) backwards; animation-delay: calc(var(--i, 0) * 28ms + 260ms); }
@keyframes draw { from { transform: scaleX(0); } }
@keyframes knot { from { opacity: 0; } }
.row:nth-child(2) { --i: 0; } .row:nth-child(3) { --i: 1; } .row:nth-child(4) { --i: 2; } .row:nth-child(5) { --i: 3; }
.row:nth-child(6) { --i: 4; } .row:nth-child(7) { --i: 5; } .row:nth-child(8) { --i: 6; } .row:nth-child(9) { --i: 7; }
.row:nth-child(10) { --i: 8; } .row:nth-child(11) { --i: 9; } .row:nth-child(12) { --i: 10; } .row:nth-child(13) { --i: 11; }
.row:nth-child(14) { --i: 12; } .row:nth-child(15) { --i: 13; } .row:nth-child(16) { --i: 14; } .row:nth-child(17) { --i: 15; }

/* -------------------------------------------------------------- the stage */
.stage { min-width: 0; }
.stage__group { font: 700 26px/1.1 var(--display); margin: 56px 0 4px; padding-top: 14px; border-top: 1px solid var(--line); }
.proj { --ink-row: var(--ink); padding-top: 22px; }
.proj[data-ink="maths"] { --ink-row: var(--brick); }
.proj[data-ink="code"] { --ink-row: var(--steel); }
.proj + .proj { margin-top: 30px; }

.frame { display: block; position: relative; aspect-ratio: 16 / 9; background: var(--raise); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; text-decoration: none; }
.frame img, .frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.frame video { opacity: 0; transition: opacity 220ms linear; }
.frame video.is-live { opacity: 1; }
.frame img.is-leaving { opacity: 0; transition: opacity 180ms linear; }
.frame__chip { position: absolute; left: 12px; bottom: 12px; z-index: 2; background: var(--paper); color: var(--ground); font: 700 16px/1 var(--display); padding: 6px 10px 6px 9px; border-radius: 3px; display: inline-flex; align-items: center; gap: 8px; }
.frame[data-col="short"] .frame__chip::before, .frame[data-col="full"] .frame__chip::before { content: ""; border-left: 9px solid var(--ground); border-block: 6px solid transparent; }
.frame:hover { border-color: var(--muted); }

.blank { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 9%; background: var(--raise); }
.blank__name { font: 700 clamp(20px, 3vw, 40px)/1.05 var(--display); overflow-wrap: anywhere; }
.blank__note { color: var(--muted); font-size: 15px; line-height: 1.4; max-width: 46ch; }
.tile .blank { padding: 8px; gap: 0; }
.tile .blank__name { font-size: 13px; }
.tile .blank__note { display: none; }

.proj__head { margin-top: 16px; max-width: 30em; }
.proj__text { margin-top: 16px; max-width: 58ch; }
.proj__name { font-weight: 600; font-size: 15px; color: var(--ink-row); }
.proj__q { font: 700 clamp(26px, 2.3vw, 34px)/1.06 var(--display); margin-top: 3px; text-wrap: balance; }
.proj__line { text-wrap: pretty; }
.proj__credit { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 1.45; text-wrap: pretty; }
.proj__more { margin-top: 12px; color: var(--muted); font-size: 14.5px; }
.proj a:not(.frame):not(.tile) { text-decoration-color: var(--muted); text-underline-offset: 3px; }
a.term { text-decoration: underline dotted var(--muted); text-underline-offset: 4px; cursor: help; }

.strip { display: flex; gap: 12px 10px; width: fit-content; max-width: 100%; margin-top: 20px; padding-top: 14px; border-top: 2px solid var(--ink-row); }
.strip li { flex: 1 1 0; min-width: 0; width: 150px; max-width: 150px; }
.tile { display: block; text-decoration: none; position: relative; }
.tile::before { content: ""; position: absolute; top: -19px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-row); }
.tile__pic { display: block; position: relative; aspect-ratio: 16 / 9; border-radius: 4px; overflow: hidden; background: var(--raise); border: 1px solid var(--line); }
.tile__pic img { width: 100%; height: 100%; object-fit: cover; }
.tile__kind { display: block; margin-top: 7px; font-weight: 600; font-size: 14px; line-height: 1.2; }
.tile__detail { display: block; color: var(--muted); font-size: 13px; line-height: 1.25; overflow-wrap: anywhere; }
.tile.is-shown .tile__pic { outline: 2px solid var(--paper); outline-offset: 1px; }
.tile.is-shown::before { background: var(--paper); }
@media (hover: hover) and (pointer: fine) { .tile:hover .tile__pic { border-color: var(--muted); } }

.stage__tour { display: none; position: absolute; left: 0; right: 0; top: -9px; height: 2px; background: var(--line); overflow: hidden; }
.stage__tour i { display: block; height: 100%; background: var(--muted); transform-origin: left center; transform: scaleX(0); }
.touring .stage__tour { display: block; }
.touring .stage__tour i { animation: tour var(--tour, 6000ms) linear infinite; }
@keyframes tour { to { transform: scaleX(1); } }

/* Two columns: the weave beside the stage. */
@media (min-width: 1100px) {
  .work { grid-template-columns: minmax(0, 660px) minmax(0, 1fr); column-gap: 52px; align-items: start; }
  .weave { position: sticky; top: 84px; }
  .js .weave { position: static; }
  .js .stage { position: sticky; top: 80px; }
  .js .stage__tour { top: -9px; }
  .js .stage__group { display: none; }
  .js .proj { display: none; padding-top: 0; }
  .js .proj.is-on { display: block; }
  .stage__group:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
  .work { grid-template-columns: minmax(0, 560px) minmax(0, 1fr); column-gap: 36px; }
  .row { grid-template-columns: 112px minmax(0, 1fr) auto; }
  :root { --slot: 34px; }
}
@media (min-width: 1800px) {
  .wrap { max-width: calc(1600px + 2 * var(--gutter)); }
  :root { --slot: 42px; --row: 35px; }
  body { font-size: 18px; }
  .work { grid-template-columns: minmax(0, 800px) minmax(0, 1fr); column-gap: 64px; }
  .row { grid-template-columns: 150px minmax(0, 1fr) auto; }
  .row__group { font-size: 19px; }
  .row__label { font-size: 17px; }
  .row__name { display: inline; font-size: 14.5px; }
  .weave__note { font-size: 17px; }
}

/* One column: tablet and phone. The introduction comes first, then the weave. */
@media (max-width: 1099px) {
  .work { display: flex; flex-direction: column; }
  .stage { display: contents; }
  #p-intro { order: -1; padding-top: 0; margin-bottom: 44px; }
  .stage__group[data-group="root"] { display: none; }
  .stage__tour { display: none !important; }
  .proj { scroll-margin-top: 76px; }
  .weave { max-width: 720px; }
}
@media (max-width: 699px) {
  :root { --gutter: 16px; --slot: 28px; --row: 40px; }
  html { scroll-padding-top: 64px; }
  body { font-size: 16.5px; }
  .top__in { min-height: 52px; }
  .top__nav { gap: 2px 16px; font-size: 14.5px; }
  .top__nav a:nth-child(2), .top__nav a:nth-child(3) { display: none; }
  .hero { padding-block: 24px 22px; }
  .hero h1 { font-size: 31px; }
  .row { grid-template-columns: minmax(0, 1fr) auto; }
  .row__group { grid-column: 1 / -1; grid-row: auto; height: auto; padding: 0 0 4px; font-size: 18px; }
  .row__label { grid-column: 1; padding: 4px 8px; margin: 0 10px 0 -8px; font-size: 15px; }
  .row__what { white-space: normal; }
  .row__knots { grid-column: 2; }
  .row--first { margin-top: 12px; padding-top: 12px; }
  .col__wide { display: none; }
  .col__tight { display: inline; font-size: 10.5px; }
  .row--head { font-size: 10.5px; }
  .knot--full i { width: 14px; height: 14px; }
  .stage__group { font-size: 24px; margin-top: 48px; }
  .strip { flex-wrap: wrap; width: auto; }
  .strip li { flex: 0 0 calc((100% - 20px) / 3); max-width: none; }
  .frame__chip { left: 8px; bottom: 8px; font-size: 15px; }
  .tile::before { display: none; }
}

/* ------------------------------------------------------------------ about */
.about { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; padding-block: 56px; border-top: 1px solid var(--line); }
.about h2, .terms h2, .more h3 { font: 700 30px/1.1 var(--display); }
.about__lead > * + * { margin-top: 14px; }
.about__lead { max-width: 58ch; }
.about__lede { font-size: 20px; line-height: 1.4; }
.about__contact { display: flex; flex-wrap: wrap; gap: 6px 22px; font-weight: 600; }
.about a, .foot a, .terms a { text-underline-offset: 3px; text-decoration-color: var(--muted); }
.about .wrap { padding: 0; max-width: none; }
.more__grid { display: grid; gap: 32px; }
.more .section-title { font: 700 22px/1.1 var(--display); }
.more__list { list-style: none; margin-top: 10px; display: grid; gap: 12px; }
.more__name { font-weight: 600; }
.more__what { color: var(--muted); font-size: 15px; line-height: 1.45; max-width: 60ch; }
@media (min-width: 1100px) { .about { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 72px; } }

.terms { border-top: 1px solid var(--line); padding-block: 48px; }
.defs { margin-top: 18px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px 40px; }
.def { scroll-margin-top: 90px; }
.def dt { font-weight: 600; }
.def dd { color: var(--muted); font-size: 15px; line-height: 1.45; }
.def__detail { margin-top: 4px; }
.def:target dt { color: var(--paper); text-decoration: underline; text-decoration-color: var(--steel); text-underline-offset: 4px; }

.foot { border-top: 1px solid var(--line); padding-block: 28px 48px; display: flex; flex-wrap: wrap; gap: 8px 32px; color: var(--muted); font-size: 15px; }

.termcard { position: absolute; z-index: 40; max-width: 320px; background: var(--paper); color: var(--ground); border-radius: 4px; padding: 10px 12px; font-size: 14.5px; line-height: 1.4; }
.termcard strong { display: block; font: 700 17px/1.1 var(--display); margin-bottom: 4px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}