/* dakotagiglio.com v2. Tokens first: everything Dakota is likely to iterate on lives in :root.
   See docs/iterating.md. Design source: ../../site-design/DESIGN-BRIEF.md */
/* PP Mondwest (Pangram Pangram), self-hosted from site/fonts/. The name is set in it, static. License before launch. */
@font-face { font-family: "PP Mondwest"; src: url("../fonts/ppmondwest-regular.otf") format("opentype"); font-weight: 400; font-display: swap; }

:root {
  /* color: dark only, full black with white ink (light mode was built and scrapped the same night, 9/13) */
  --bg: #000000;
  --bg-rgb: 0, 0, 0;
  --surface: #0a0a0a;
  --ink: #ffffff;
  --ink-rgb: 255, 255, 255;
  --ink-70: rgba(var(--ink-rgb), 0.70);
  --ink-40: rgba(var(--ink-rgb), 0.40);
  --ink-15: rgba(var(--ink-rgb), 0.15);

  /* faces */
  --script: "PP Mondwest", "Redaction", serif;       /* the name, static, no morph (Dakota, 9/13) */
  --ui: "Helvetica Neue", Helvetica, Arial, sans-serif;   /* corners, nav, index, labels */
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif; /* reading copy, same face */

  /* sizes */
  --script-size: 34px;      /* the name, top center on every page */
  --ui-size: 18px;
  --title-size: 16px;       /* index row titles */
  --index-size: 13px;       /* the other index columns */
  --pad: 16px;              /* corner inset: work, the name and info sit almost at the edges, like the references */

  /* interaction */
  --rest-opacity: 0.28;     /* work index background when nothing is hovered: dim, the titles lead */
  --hover-opacity: 0.6;     /* work index background behind a hovered row */
  --dot: 10px;              /* the cursor dot */
  --ease: cubic-bezier(0.77, 0, 0.18, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: var(--bg); color: var(--ink); }
html { color-scheme: dark; }
/* the cursor: hidden everywhere; js/cursor.js draws the dot */
html, body, a, button, .line, .cell, .frame, video { cursor: none; }
@media (hover: none) { html, body, a, button, .line, .cell, .frame, video { cursor: auto; } }
.dot {
  position: fixed; z-index: 1000; left: 0; top: 0; width: var(--dot, 10px); height: var(--dot, 10px);
  margin: calc(var(--dot, 10px) / -2) 0 0 calc(var(--dot, 10px) / -2);
  border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none;
  opacity: 0; transition: opacity 0.2s, width 0.15s, height 0.15s, margin 0.15s;
}
.dot.on { opacity: 1; }
.dot.down { --dot: 7px; }
body {
  font-family: var(--ui);
  font-size: var(--ui-size);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}
a { color: inherit; text-decoration: none; padding: 1px 4px; margin: -1px -4px; }
a:hover { color: var(--bg); background: var(--ink); }   /* the invert */
img, video { display: block; max-width: 100%; }

/* ---- corner chrome ---- */
.corner { position: fixed; z-index: 20; color: var(--ink-70); line-height: 1; }
.corner.tl { top: var(--pad); left: var(--pad); }
.corner.tr { top: var(--pad); right: var(--pad); display: flex; gap: 28px; }
.corner.bl { bottom: var(--pad); left: var(--pad); }
.corner.br { bottom: var(--pad); right: var(--pad); }
.corner a { color: var(--ink-70); }
.corner a.on { color: var(--ink); }
.corner a:hover { color: var(--bg); background: var(--ink); }
.bl span { display: inline-block; margin-right: 22px; }
.bl .t { color: var(--ink); }

/* ---- the name: PP Mondwest, static, top center of every page ---- */
.wordmark {
  font-family: var(--script); font-size: var(--script-size); font-weight: 400;
  letter-spacing: 0; line-height: 1; color: var(--ink);   /* Title case; lowercase was tried and reverted 9/13 */
  display: inline-block; white-space: nowrap; padding: 0; margin: 0;
}
.wordmark:hover { background: none; color: var(--ink); }
/* the name's vertical center sits on the nav text's center: pad + half the ui size, minus half the name's height */
.wordmark.topc { position: fixed; z-index: 20; left: 50%; top: calc(var(--pad) + var(--ui-size) / 2 - var(--script-size) / 2); transform: translateX(-50%); }

/* home: a hairline under each caption that fills left to right over the hold, so the next piece reads as coming (Dakota, 9/13).
   It is part of the caption, so it slides and scales with the text instead of re-measuring; only the centered caption shows it
   (opacity set by DG.home as the caption arrives and leaves). Absolute, so it adds no height and the text does not move. */
.caps .cap .bar { position: absolute; left: 0; right: 0; bottom: -7px; height: 1px; background: var(--ink-15); overflow: hidden; opacity: 0; }
.caps .cap .bar span { display: block; height: 100%; background: var(--ink); opacity: 0.7; transform: scaleX(0); transform-origin: left center; }

/* ---- full-bleed frame: a video when the piece has one, a title slate when it does not ---- */
.frame { position: fixed; inset: 0; background: var(--tint, #0c0c0b); overflow: hidden; transition: opacity 0.6s var(--ease); }
.frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: transform; }
.frame video.in { opacity: 1; }
.frame video[hidden] { display: none; }
.frame .slate {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--body); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-40); text-align: center; line-height: 1.8;
}
.frame .slate b { display: block; font-weight: 500; color: var(--ink-70); }
.frame .slate[hidden] { display: none; }

/* ---- home: the captions. Five along the bottom edge, positioned by js/dg.js every frame so they
   slide with the videos: previous at the left inset, current centered and bright, next at the right
   inset, the two beyond parked off screen. ---- */
.caps { position: fixed; z-index: 20; left: 0; right: 0; bottom: var(--pad); height: 1.4em; pointer-events: none; }
.caps .cap { position: absolute; left: 0; top: 0; white-space: nowrap; line-height: 1.3; color: var(--ink); text-align: center; transform-origin: center bottom; will-change: transform, opacity; }
.caps .cap b { font-weight: 700; }
.caps .cap.side { pointer-events: auto; cursor: none; }

/* ---- home: the opener. Full-screen stills flash behind the name, then the name glides to the wordmark's place as the
   last still dissolves (DG.intro in js/dg.js; DG.INTRO = false removes it). Kept above everything, including the cursor. ---- */
.intro { position: fixed; inset: 0; z-index: 60; background: var(--bg); }
.intro .shot { position: absolute; inset: 0; background: var(--bg) center / cover no-repeat; transition: opacity 0.8s var(--ease); }
.intro .shot::after { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.2); }   /* a 20 % darkness over the stills so the name pops (Dakota, 9/13) */
.intro .name { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-family: var(--script); font-size: 72px; line-height: 1; color: var(--ink); white-space: nowrap; transition: transform 0.8s var(--ease); transform-origin: center; will-change: transform; }   /* no fade: it stays solid, lands on the wordmark, then the overlay is removed (Dakota, 9/14: "land cleanly") */
/* a soft dark halo behind the name so it reads over the brightest stills (Dakota 9/25: "subtle, feathered"); it fades as the name glides */
.intro .name::before { content: ''; position: absolute; left: -35%; right: -35%; top: -140%; bottom: -140%; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.26) 30%, rgba(0, 0, 0, 0.1) 52%, rgba(0, 0, 0, 0) 70%); transition: opacity 0.4s var(--ease); }
.intro.out .name::before { opacity: 0; }
.intro .name .rest { visibility: hidden; }
.intro .name .caret { display: inline-block; width: 2px; height: 0.82em; background: var(--ink); vertical-align: -0.06em; margin-left: 0.06em; margin-right: calc(-2px - 0.06em); animation: caret 0.9s steps(1) infinite; }   /* zero net width: the caret draws after the last letter but takes no room, so the name stays exactly centred (10/1) */
.intro .name { text-align: left; }
@keyframes caret { 50% { opacity: 0; } }
body.introing .wordmark { visibility: hidden; }   /* one name at a time: the page's own is hidden until the opener's lands on it (Dakota, 9/14) */
.intro.out { background: transparent; pointer-events: none; }
.intro.out .shot { opacity: 0; }
@media (max-width: 760px) { .intro .name { font-size: 44px; } }

/* ---- home: the arrows. Thin chevrons at each side, centered, dimmed until hovered ---- */
.arrow {
  position: fixed; z-index: 20; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; padding: 9px; margin: 0; border: 0; background: none; color: var(--ink-40);
  display: flex; align-items: center; justify-content: center; transition: color 0.25s var(--ease), transform 0.25s var(--ease);
}
.arrow.left { left: var(--pad); }
.arrow.right { right: var(--pad); }
.arrow:hover { color: var(--ink); }
.arrow.left:hover { transform: translateY(-50%) translateX(-2px); }
.arrow.right:hover { transform: translateY(-50%) translateX(2px); }
.arrow svg { display: block; }

/* ---- home: the track. Both layers stay opaque; position comes from js/dg.js every frame ---- */
body.home .frame { overscroll-behavior-x: none; }
body.home .frame video { transition: none; opacity: 1; }
/* a soft scrim at the bottom so credits stay readable over bright footage */
body.home .frame::after, body.project .frame::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none;
  background: linear-gradient(to top, rgba(var(--bg-rgb), 0.55), rgba(var(--bg-rgb), 0));
}

/* home: leaving for a project page. The frame, captions and arrows fade to black before the page changes (Dakota, 9/14:
   "a cleaner transition when I click on a video") */
body.home.leaving .frame, body.home.leaving .caps, body.home.leaving .arrow { opacity: 0; transition: opacity 0.4s var(--ease); }
body.project.leaving .frame, body.project.leaving .meta, body.project.leaving .play, body.project.leaving .seek { opacity: 0; transition: opacity 0.25s var(--ease); }   /* project to project: a short fade, then the next page fades its poster up */

/* project: a soft scrim across the top so the name and the corner links read over bright footage, until play (Dakota, 9/14, Gnarly) */
body.project .frame::before, body.home .frame::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22%; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0.55), rgba(var(--bg-rgb), 0)); transition: opacity 0.6s var(--ease);
}
body.home .frame::before { height: 16%; background: linear-gradient(to bottom, rgba(var(--bg-rgb), 0.35), rgba(var(--bg-rgb), 0)); }   /* home: lighter than the project page, "just a tiny bit" (Dakota, 9/14) */
body.project .frame.playing::before { opacity: 0; }
body.project .meta, body.project .nav, body.project .play { animation: fadeup 0.7s var(--ease) both; }
/* the play bar: a white line along the very bottom edge, full width, filling left to right with playback (Dakota, 9/14, "1 cm thick,
   white, cleanest"). Hidden until play; the credits and prev/next lift above it while it shows. --seek is the one number to change. */
body.project { --seek: 0.5cm; }   /* halved from 1cm (Dakota, 9/14) */
.seek { position: fixed; z-index: 15; left: 0; right: 0; bottom: 0; box-sizing: content-box; height: var(--seek); padding-top: 28px; background: rgba(var(--ink-rgb), 0.07); background-clip: content-box; cursor: none; opacity: 0; transition: opacity 0.5s var(--ease); pointer-events: none; }   /* 28px of invisible hit zone above the visible line (Dakota, 9/14: clicks on the bar were missing it) */
.seek { touch-action: none; }   /* a finger on the bar scrubs; the page must not scroll or swipe under it */
.seek i { display: block; height: 100%; width: 100%; background: var(--ink); transform: scaleX(0); transform-origin: left center; }
body.project.playing .seek { opacity: 1; pointer-events: auto; }
body.project.playing .meta, body.project.playing .nav { bottom: calc(var(--pad) + var(--seek)); transition: bottom 0.5s var(--ease); }
body.project .meta, body.project .nav { transition: bottom 0.5s var(--ease); }
body.project.playing .frame { cursor: none; }
@keyframes fadeup { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { body.project .meta, body.project .nav, body.project .play { animation: none; } }

/* ---- work: list ---- */
body.work .frame { opacity: var(--rest-opacity); }
body.work .frame.on { opacity: var(--hover-opacity); }
.index {
  position: fixed; z-index: 10; left: var(--pad); right: var(--pad);
  bottom: calc(var(--pad) + 36px); display: grid;   /* anchored to the bottom, grows upward, never under the chips */
  max-height: calc(100vh - 140px); overflow-y: auto; scrollbar-width: none;
}
.line {
  display: grid; grid-template-columns: 40px 190px 1fr 120px 200px;   /* number, brand, title, type, director */
  align-items: baseline; padding: 4px 6px; margin: 0; font-size: var(--index-size); line-height: 1.3;
  border-top: 1px solid var(--ink-15); color: var(--ink-70);
}
.line:last-child { border-bottom: 1px solid var(--ink-15); }
.line.head { color: var(--ink-40); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding-bottom: 8px; border-top: 0; cursor: default; }
.line.head:hover { color: var(--ink-40); background: none; }
.line.head .t { color: var(--ink-40); font-size: 11px; }
.line:hover, .line.on { color: var(--bg); background: var(--ink); }
.line[role="link"], .cell[role="link"], a[role="link"] { outline: none; cursor: inherit; }   /* rows and cells are script links (no href, so no hover address bar); keyboard focus shows as the hover state */
.line[role="link"]:focus-visible { color: var(--bg); background: var(--ink); }
.line[role="link"]:focus-visible .t, .line[role="link"]:focus-visible .tag { color: var(--bg); }
.line .ct { display: contents; }   /* brand + title: two grid columns on desktop, one line on phones */
.line .t { color: var(--ink); font-size: var(--title-size); }
.line:hover .t, .line.on .t, .line:hover .tag, .line.on .tag { color: var(--bg); }
.line.head:hover span, .line.head:hover .t, .line.head:hover .tag { color: var(--ink-40); }   /* the header row is labels, not a link: no invert on hover (Dakota, 9/13 late) */
.line .tag { color: var(--ink-40); }
.line .dir { text-align: right; }
/* list / grid: two inverted chips above the list, under work. The active one is ink on ink, the other ink on black. */
.views { position: fixed; z-index: 20; left: 50%; transform: translateX(-50%); top: calc(var(--pad) + 44px); display: flex; gap: 6px; }   /* fixed under the name; it never moves between views */
.views a { display: inline-block; padding: 4px 10px; margin: 0; border: 1px solid var(--ink); color: var(--ink); background: var(--bg); font-size: 13px; line-height: 1.2; transition: background 0.25s var(--ease), color 0.25s var(--ease); }
.views a.on { color: var(--bg); background: var(--ink); }
.views a:hover { color: var(--bg); background: var(--ink); }

/* ---- work: sheet ---- */
body.work.sheet-view { overflow: auto; }
/* the two views crossfade: the outgoing one fades and lifts, the incoming one settles in */
.index, .sheet { transition: opacity 0.35s var(--ease), transform 0.35s var(--ease); }
body.work.sheet-view .index { opacity: 0; transform: translateY(-10px); pointer-events: none; }
body.work.sheet-view .frame { opacity: 0; }
.sheet { display: grid; padding: 104px var(--pad) 80px; grid-template-columns: repeat(6, 1fr); gap: 10px; opacity: 0; transform: translateY(10px); pointer-events: none; }
body.work.sheet-view .sheet { opacity: 1; transform: none; pointer-events: auto; }
.cell { display: block; color: var(--ink-40); padding: 0; margin: 0; }
.cell:hover { color: var(--ink); background: none; }
.cell .img { position: relative; aspect-ratio: 16 / 9; background: var(--tint, #0c0c0b); overflow: hidden; }   /* no hairline: the hairline border and its hover brightening were cut 9/13 ("keep it clean") */
.cell .img img, .cell .img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cell .img video { opacity: 0; transition: opacity 0.3s; }
.cell:hover .img video.ready { opacity: 1; }
.cell .img span { position: absolute; left: 8px; bottom: 6px; font-size: 12px; color: var(--ink-70); }
.cell .cap { display: flex; justify-content: space-between; gap: 8px; padding: 7px 0 0; font-size: 12px; color: var(--ink-40); }
.cell .cap b { font-weight: 400; font-size: 13px; color: var(--ink); }
.cell:hover .cap { color: var(--ink-70); }

/* ---- project ---- */
.play {
  position: fixed; z-index: 15; left: 50%; top: 50%; transform: translate(-50%, -50%);
  color: var(--ink-70); border: 1px solid var(--ink-40); padding: 10px 16px; background: none;
  font: inherit;
}
.play:hover { color: var(--bg); background: var(--ink); border-color: var(--ink); }
.play[hidden] { display: none; }
.meta { position: fixed; z-index: 10; left: var(--pad); bottom: var(--pad); display: grid; gap: 3px; color: var(--ink-70); font-size: 12px; }   /* rows smaller and tighter, the title bigger (Dakota, 9/13 evening) */
.meta .t { font-family: var(--body); font-size: 22px; letter-spacing: 0; color: var(--ink); margin-bottom: 8px; }
.meta span i { font-style: normal; color: var(--ink-40); display: inline-block; width: 84px; }
.nav a { margin-left: 22px; }
.nav a:first-child { margin-left: 0; }
.nav .count { margin-left: 22px; }

/* ---- info: the head dead center, the bio on the left (left-aligned), the contact on the right (right-aligned) ---- */
.info {
  position: fixed; z-index: 10; inset: 0;
  padding: calc(var(--pad) + 32px) clamp(56px, 9vw, 160px) calc(var(--pad) + 72px);   /* the text sits inward, not on the edge; 20px more at the bottom lifts the row to the optical center, which reads as centered (Dakota, 9/13: "bring everything up a little bit") */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 48px;
}
.portrait { justify-self: center; align-self: center; width: 0; display: flex; justify-content: center; }   /* zero-width cell: the canvas overflows it both ways, so a bigger head never squeezes the text columns (9/13 evening, head at 1.5x) */
.bio { justify-self: start; text-align: left; }
.contact { justify-self: end; text-align: right; }
.bio { font-family: var(--body); font-size: 16px; letter-spacing: 0.01em; line-height: 1.5; color: var(--ink); max-width: min(340px, calc(38vw - 150px)); }   /* 16px on both sides, between the old 15 and 18 (Dakota 9/24: "meet somewhere in the middle") */   /* a narrower, taller column: more room between the bio and the head, closer to the room on the contact side (Dakota, 9/14); it also narrows with the window */
.bio p + p { margin-top: 18px; }
.bio .k { display: block; margin-bottom: 22px; font-family: var(--ui); font-size: var(--ui-size); color: var(--ink-40); }
/* awards: closed by default, a click on the word opens the list (Dakota 9/24) */
.bio .awards { margin-top: 28px; font-size: 12px; line-height: 1.6; color: var(--ink-70); }
.bio .awards summary { list-style: none; cursor: pointer; display: inline-block; font-family: var(--ui); font-size: var(--ui-size); color: var(--ink-40); transition: color 0.3s var(--ease); }
.bio .awards summary::-webkit-details-marker { display: none; }
.bio .awards summary::after { content: '+'; margin-left: 8px; display: inline-block; }
.bio .awards[open] summary::after { content: '\2013'; }
.bio .awards summary:hover, .bio .awards[open] summary { color: var(--ink); }
.bio .awards[open] summary { margin-bottom: 6px; }
.bio .awards span { display: block; }
.bio .awards i { display: block; font-style: normal; font-size: 11px; color: var(--ink-40); margin-top: -3px; }
.contact { display: grid; gap: 4px; align-content: start; font-size: 16px; line-height: 1.4; letter-spacing: 0.01em; color: var(--ink-70); max-width: min(380px, calc(38vw - 150px)); }   /* 16px like the bio, rows close together (Dakota 9/24) */
.contact span i { font-style: normal; color: var(--ink-40); display: inline-block; margin-right: 14px; }
.contact a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--ink-40); }
.contact a:hover { color: var(--bg); text-decoration-color: var(--bg); }   /* the same specificity as the line above, so the global invert lost and hovered links went white on white (Dakota, 9/13) */


/* ---- smaller screens and touch: nothing fancy, nothing broken ---- */
@media (max-width: 1100px) {
  .line { grid-template-columns: 40px 190px 1fr 110px; }   /* brand stays 190 so "KATSEYE, LE SSERAFIM, ILLIT" holds one line */
  .line .dir { display: none; }
  .sheet { grid-template-columns: repeat(3, 1fr); }
}
/* info, squarer windows (Dakota, 9/14, third pass: "the text still gets pushed downward instead of around the head"): the head is
   fixed dead center and never moves; the bio and the contact block sit vertically centered beside it and take exactly the width
   left between the page inset and the head's edge, wrapping into more lines as the window narrows. --head-fit is the canvas size
   (set by js/head.js); the visible head is about 0.31 of it wide. Under 900px there is no room beside the head, so the two blocks
   drop to the bottom corners instead. */
@media (max-width: 1400px) {
  .info { display: block; }
  .portrait { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%); width: auto; margin: 0; display: block; }
  .bio { position: fixed; left: clamp(56px, 9vw, 160px); top: 50%; transform: translateY(-50%); max-width: calc(50vw - clamp(56px, 9vw, 160px) - 0.155 * var(--head-fit, 500px) - 60px); }
  .contact { position: fixed; right: clamp(56px, 9vw, 160px); top: 50%; transform: translateY(-50%); white-space: nowrap; }   /* the rows are short; never wrap "Church Edit" */
}
@media (max-width: 900px) {
  .bio { top: auto; bottom: calc(var(--pad) + 24px); transform: none; max-width: min(380px, 44vw); }
  .contact { top: auto; bottom: calc(var(--pad) + 24px); transform: none; }
}
@media (max-width: 700px) {
  /* info on a phone: one clean column. The head first, centred, then about, awards and contact, all on the same left edge,
     nothing fixed and nothing floating (Dakota 9/29: "it should be very clean and simple") */
  .info { position: static; display: flex; flex-direction: column; padding: 72px 24px 56px; gap: 0; height: auto; overflow: visible; }
  .portrait { order: -1; position: static; transform: none; width: auto; height: calc((100vw - 48px) * 0.9); overflow: hidden; display: flex; justify-content: center; align-items: center; margin: 0 0 28px; }   /* the head first; the square canvas is cropped top and bottom so the head sits close to the text (Dakota 9/29: less black above and below) */
  .portrait canvas { flex: none; }
  .bio { position: static; transform: none; max-width: none; width: 100%; margin: 0; padding: 0; left: auto; }
  .bio .awards { margin-top: 24px; }
  .contact { position: static; transform: none; max-width: none; width: 100%; justify-self: start; text-align: left; margin: 32px 0 0; padding: 24px 0 0; border-top: 1px solid var(--ink-15); white-space: normal; right: auto; }
  .contact span { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }   /* label on the left edge, the value on the right edge (Dakota 9/29) */
  .contact span i { width: auto; margin-right: 0; flex: none; }
  .contact span:last-child { justify-content: center; margin-top: 10px; }   /* los angeles / new york centred under the card (Dakota 9/29) */
  html, body { overflow-x: hidden; }
  body.info .corner.br { display: none; }                                /* the year in the corner sits on the text on a phone */
}
/* ---- phones (mobile pass 9/29): simpler and straightforward. Home: one loop, one caption, finger swipe, tap to open.
   Work: number and "Brand: Title" rows, or a two-column grid with titles. Project: a normal scrolling page, the video
   full width in 16:9 with nothing cropped, then the credits and a prev / next row. Info: head, bio, contact, stacked. ---- */
@media (max-width: 700px) {
  :root { --pad: 14px; --script-size: 26px; --ui-size: 16px; --title-size: 18px; }
  /* work */
  /* home caption on a phone: a long one (KATSEYE, LE SSERAFIM, ILLIT: Iconic By Mistake) wraps to two centred lines
     instead of running off the screen; the caption hangs from the bottom so a second line grows upward (Dakota 9/29) */
  .caps { height: auto; }
  .caps .cap { top: auto; bottom: 0; white-space: normal; max-width: calc(100vw - 40px); line-height: 1.25; }
  body.work .frame { display: none; }                                   /* no dim picture behind the list on a phone */
  .index { top: 104px; bottom: 52px; max-height: none; }                /* the list locks under the list / grid switch and scrolls inside that box (Dakota 9/29) */
  .line { grid-template-columns: 34px 1fr; padding: 9px 4px; }
  .line .tag, .line .dir { display: none; }
  .line .ct { display: block; min-width: 0; }
  .line .ct .client { display: inline; color: var(--ink-40); font-size: var(--title-size); }
  .line .ct .client:not(:empty)::after { content: ': '; }
  .line .ct .t { display: inline; }
  .line.head .ct .client { display: none; }
  .sheet { grid-template-columns: repeat(2, 1fr); padding-top: 92px; gap: 10px 8px; }
  .cell .cap span { display: none; }                                    /* title only under each cover */
  .cell .cap b { font-size: 13px; }
  /* project */
  html, body { height: auto; overflow: auto; }
  body.project .frame { position: relative; inset: auto; width: 100%; aspect-ratio: 16 / 9; margin-top: calc(var(--pad) + 46px); background: #000; }
  body.project .frame video { object-fit: contain; }
  body.project .frame::before { display: none; }
  body.project .play { position: absolute; top: calc(var(--pad) + 46px + 28.125vw); left: 50%; transform: translate(-50%, -50%); }
  body.project .seek { position: relative; bottom: auto; padding: 18px 0; height: 4px; background: rgba(255, 255, 255, 0.12) content-box; margin-top: 0; }   /* a 4px track inside a 40px touch zone */
  body.project .meta, body.project.playing .meta { position: static; padding: 22px var(--pad) 0; bottom: auto; font-size: 14px; }
  .meta .t { font-size: 22px; }
  .meta span i { width: 92px; }
  body.project .nav, body.project.playing .nav { position: static; display: flex; align-items: baseline; padding: 24px var(--pad) 48px; bottom: auto; font-size: 16px; }
  .nav .count { margin-left: auto; color: var(--ink-40); }
  /* info */
  .info { padding-top: 72px; gap: 36px; }
}