/* ---------- type ---------- */

@font-face {
  font-family: "Inter Tight"; font-weight: 400 700; font-display: swap;
  src: url(/fonts/inter-tight-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight"; font-weight: 400 700; font-display: swap;
  src: url(/fonts/inter-tight-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight"; font-weight: 400 700; font-display: swap;
  src: url(/fonts/inter-tight-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

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

:root {
  --bg: #0b0b0a;
  --ink: #f1efe9;
  --ink-2: #8d8b85;
  --font: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --pad: clamp(14px, 1.6vw, 22px);
  --band: 52px;
  --out: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: dark;
}

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

*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); color: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  font: 500 15px/1.35 var(--font);
  letter-spacing: -0.008em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img, video, iframe { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; }
h1, h2, p { margin: 0; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.links a, .lb-close {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: text-decoration-color 0.2s;
}
.links a:hover, .lb-close:hover { text-decoration-color: currentColor; }

/* ---------- the name and links ---------- */

.top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: var(--band);
  padding: 0 var(--pad);
  pointer-events: none;
}
.top a { pointer-events: auto; }
.who { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.who-name { font-weight: 600; white-space: nowrap; }
.who-role { color: var(--ink-2); white-space: nowrap; }
.links { display: flex; gap: 18px; }

/* ---------- the list of titles ---------- */

/* Without JavaScript: an ordinary scrolling list of links */
.rows {
  list-style: none;
  margin: 0;
  padding: calc(var(--band) + 12vh) 0 24vh;
}
/* each title's line runs the full width of the screen: point anywhere along it */
.row-link {
  display: block;
  padding: 0.06em var(--pad) 0.1em;
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: color 0.3s;
}
.row-title {
  display: block;
  font-size: clamp(36px, 6.6vw, 112px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.04em;
}
.row-link:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 4px; }

/* With JavaScript: the list rolls slowly up the screen, like end credits,
   the last title running straight into the first */
.js:not(.booted) .rows { opacity: 0; animation: reveal 0s 2.5s forwards; }
@keyframes reveal { to { opacity: 1; } }
.booted, .booted body { height: 100%; overflow: hidden; }
.booted .roll { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.booted .roll-view {
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* titles fade out under the name at the top and at the bottom of the screen */
  -webkit-mask-image: linear-gradient(transparent calc(var(--band) - 6px), #000 calc(var(--band) + 9vh), #000 84%, transparent);
  mask-image: linear-gradient(transparent calc(var(--band) - 6px), #000 calc(var(--band) + 9vh), #000 84%, transparent);
}
.booted .roll-track { position: absolute; left: 0; right: 0; top: 0; will-change: transform; }
.booted .rows { padding: 0; }
.booted .row-link { cursor: pointer; }

/* pointing at a line dims the other titles */
.roll.peeking .row-link { color: rgba(241, 239, 233, 0.22); }
.roll.peeking .row-link.hot { color: var(--ink); }

/* the small picture that pops up */
.peek {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 15;
  width: clamp(220px, 26vw, 460px);
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  background: #1a1a19;
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.95);
  transition: opacity 0.22s;
  will-change: transform;
}
.peek.on { opacity: 1; }
.peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s; }
.peek img.show { opacity: 1; }

/* computers, with the cursor off the titles: the middle title lit and the rest
   dimmed, as when pointing, and its picture resting at the right */
.roll.resting .row-link { color: rgba(241, 239, 233, 0.22); }
.roll.resting .row-link.lit { color: var(--ink); }
.still {
  position: fixed;
  top: 50%;
  right: var(--pad);
  z-index: 15;
  width: clamp(220px, 26vw, 460px);
  aspect-ratio: 16 / 9;
  border-radius: 3px;
  overflow: hidden;
  background: #1a1a19;
  box-shadow: 0 34px 70px -24px rgba(0, 0, 0, 0.95);
  transform: translateY(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}
.still.on { opacity: 1; }
.still img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s; }
.still img.show { opacity: 1; }
@media not ((hover: hover) and (pointer: fine)) { .still { display: none; } }

/* on touch screens: while scrolling, the picture of the title at the top of
   the list fills the background, under a tint that keeps the titles readable */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s;
}
.backdrop.on { opacity: 1; transition-duration: 0.3s; }
.backdrop img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.35s; }
.backdrop img:not([src]) { display: none; }
.backdrop img.show { opacity: 1; }
.backdrop::after { content: ""; position: absolute; inset: 0; background: rgba(11, 11, 10, 0.5); }
.roll.backdropped .row-link { color: rgba(241, 239, 233, 0.4); }
.roll.backdropped .row-link.lit { color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .backdrop { display: none; } }
@media (hover: none) {
  .booted .row-link { -webkit-touch-callout: none; }
}

/* ---------- a project ---------- */

.lb {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--bg);
}
.lb[hidden] { display: none; }
.lb:focus { outline: none; }
.lb-top { display: flex; align-items: center; justify-content: space-between; height: var(--band); padding: 0 var(--pad); padding-top: env(safe-area-inset-top); }
.lb-count { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.lb-body {
  --arrow: clamp(56px, 8vw, 132px);
  --reserve: 190px;
  --pw: min(calc(100vw - 2 * var(--arrow)), calc((100svh - var(--reserve)) * var(--ar)), 1600px);
  --ph: calc(var(--pw) / var(--ar));
  display: grid;
  grid-template-columns: var(--arrow) minmax(0, 1fr) var(--arrow);
  align-items: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.lb-prev { grid-column: 1; grid-row: 1; }
.lb-content { grid-column: 2; grid-row: 1; min-width: 0; padding-bottom: 56px; }
.lb-next { grid-column: 3; grid-row: 1; }
.lb-arrow {
  display: grid;
  place-items: center;
  height: var(--ph);
  color: var(--ink);
  -webkit-tap-highlight-color: transparent;
}
.lb-arrow svg { width: 22px; height: 44px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.35s var(--out); }
.lb-prev:hover svg { transform: translateX(-6px); }
.lb-next:hover svg { transform: translateX(6px); }
.lb-arrow:active svg { transform: scale(0.9); }

.lb-player {
  position: relative;
  width: var(--pw);
  height: var(--ph);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 2px;
  background: #000;
}
.lb-player[data-kind="instagram"] { background: #fff; }
.lb-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s 0.15s; }
.lb-player.playing .lb-poster { opacity: 0; }
.player-media { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
video.player-media { object-fit: contain; background: #000; }

.lb-text { width: var(--pw); max-width: 100%; margin: 18px auto 0; }
.lb-title { font-size: 20px; font-weight: 600; line-height: 1.2; letter-spacing: -0.018em; }
.lb-title span { color: var(--ink-2); font-weight: 500; }
.lb-meta { margin-top: 3px; color: var(--ink-2); }
.lb-videos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.lb-videos button {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: rgba(241, 239, 233, 0.1);
  font-size: 13px;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, transform 0.15s;
}
.lb-videos button:hover { background: rgba(241, 239, 233, 0.18); }
.lb-videos button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.lb-videos button:active { transform: scale(0.95); }
.lb-credits { margin-top: 14px; max-width: 80ch; font-size: 14px; line-height: 1.65; }
.cr { display: inline-block; margin-right: 18px; }
.cr-r { color: var(--ink-2); }
.cr mark { background: none; color: inherit; font-weight: 650; }

.ghost {
  position: fixed;
  z-index: 60;
  object-fit: cover;
  border-radius: 2px;
  pointer-events: none;
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9);
}

/* ---------- contact card ---------- */

.info { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; padding: var(--pad); }
.info[hidden] { display: none; }
.info-back { position: absolute; inset: 0; background: rgba(11, 11, 10, 0.72); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
/* The contact card, drawn like a card in the iPhone's Contacts (dark mode):
   photo, name and role up top, round-cornered action buttons, then grouped rows. */
.info-card {
  --cc-card: #1c1c1e;
  --cc-cell: #2c2c2e;
  --cc-line: rgba(84, 84, 88, 0.6);
  --cc-grey: #8e8e93;
  --cc-blue: #0a84ff;
  position: relative;
  width: min(380px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 30px 16px 16px;
  border-radius: 22px;
  background: var(--cc-card);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter Tight", system-ui, sans-serif;
  letter-spacing: normal;
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.95), 0 0 0 0.5px rgba(255, 255, 255, 0.08);
}
.info-close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(118, 118, 128, 0.24);
  color: var(--cc-grey);
  transition: background-color 0.2s, color 0.2s;
}
.info-close:hover { background: rgba(118, 118, 128, 0.36); color: #fff; }
.info-close svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; }

.cc-head { display: grid; justify-items: center; text-align: center; padding: 0 28px; }
.cc-photo { width: 104px; height: 104px; border-radius: 50%; object-fit: cover; background: #3a3a3c; }
.cc-name { margin-top: 12px; font-size: 28px; font-weight: 600; line-height: 1.15; letter-spacing: 0.005em; }
.cc-sub { margin-top: 3px; font-size: 15px; color: var(--cc-grey); }

.cc-icons { display: grid; }
.cc-icons svg { grid-area: 1 / 1; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: opacity 0.2s, transform 0.25s; }
.copy .done-icon { opacity: 0; transform: scale(0.6); }
.copy.done .copy-icon { opacity: 0; transform: scale(0.6); }
.copy.done .done-icon { opacity: 1; transform: none; }

.cc-head + .cc-group { margin-top: 24px; }
.cc-group { margin-top: 14px; border-radius: 12px; background: var(--cc-cell); overflow: hidden; }
.cc-row { position: relative; display: block; padding: 10px 16px 11px; }
.cc-row + .cc-row::before { content: ""; position: absolute; top: 0; left: 16px; right: 0; height: 0.5px; background: var(--cc-line); }
.cc-label { display: block; font-size: 13px; line-height: 1.3; color: #fff; }
.cc-value { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 1.35; color: var(--cc-blue); }
.cc-notes { margin-top: 2px; font-size: 15px; line-height: 1.45; color: rgba(235, 235, 245, 0.8); }
.cc-notes p + p { margin-top: 0.7em; }
.cc-link { font-size: 17px; color: var(--cc-blue); }
/* the email row copies the address when tapped */
button.cc-row { width: 100%; padding-right: 50px; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s; }
button.cc-row:hover, .cc-tap:hover { background: #3a3a3c; }
button.cc-row:active, .cc-tap:active { background: #48484a; }
button.cc-row .cc-icons { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); color: var(--cc-grey); }
button.cc-row.done .cc-icons { color: var(--cc-blue); }
.cc-link:hover { opacity: 0.8; }
.copied { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- small screens ---------- */

@media (max-width: 700px) {
  :root { --band: 48px; }
  .who-role { display: none; }
  .links { gap: 14px; }
  .lb-body {
    --arrow: 0px;
    --reserve: 150px;
    --pw: min(100vw, calc((100svh - var(--reserve)) * var(--ar)));
  }
  .lb-player { border-radius: 0; }
  .lb-text { padding: 0 var(--pad); }
  .lb-content { padding-bottom: 110px; }
  .lb-arrow {
    position: fixed;
    bottom: max(16px, env(safe-area-inset-bottom));
    z-index: 2;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--bg);
    box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.8);
  }
  .lb-prev { left: 16px; }
  .lb-next { right: 16px; }
  .lb-arrow svg { width: 12px; height: 24px; stroke-width: 2.2; }
  .lb-prev:hover svg, .lb-next:hover svg { transform: none; }
}

/* ---------- the easter egg (assets/ski.js): the screen becomes an arcade game ---------- */

.arcade-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: #000; }
.arcade-screen canvas { image-rendering: crisp-edges; image-rendering: pixelated; outline: none; }
/* faint scanlines, like an old arcade screen */
.arcade-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px); }
.arcade-exit {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 1;
  padding: 7px 10px 6px;
  border: 2px solid rgba(255, 255, 255, 0.45);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font: 700 11px/1 ui-monospace, Menlo, Consolas, monospace;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.arcade-exit:hover { border-color: #fff; }

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