/* ==========================================================================
   Luke Wood
   Layout: near-black, with type doing the work. Every page shares a slim bar
   (avatar, a search in the middle, hire me) and a footer of page links. The
   home page leads with the name and the sketched headshot standing between
   the two words, with the tools Luke uses floating around it; then a reel of
   projects over a glowing character field, project folders that stack with
   their tabs side by side, recent writing, about, and one calm closing card.
   The projects, blog, case study, post and résumé pages reuse the same parts.
   ========================================================================== */

:root {
  /* One deliberate look: near-black and warm white, with six bright colours
     kept for project art and small accents, and a holographic sheen. */
  --bg: #0c0c0b;
  --card: #161513;
  --card-2: #201f1c;
  --ink: #f3efe6;
  --ink-soft: #a29d92;
  --rule: #2c2a26;
  --glass: rgba(243, 239, 230, 0.06);
  --glass-edge: rgba(243, 239, 230, 0.1);
  --grid: rgba(243, 239, 230, 0.08);
  --on-tone: #0c0c0b;
  --shadow: rgba(0, 0, 0, 0.6);

  --butter: #f6cf5e;
  --signal: #ff6a3d;
  --lilac: #b8a6ff;
  --mint: #7ddbb0;
  --blush: #ff9ec0;
  --sky: #7fc8f5;
  --holo-1: #7fe3f5;
  --holo-2: #b49cff;
  --holo-3: #ff9fd8;
  --holo: linear-gradient(120deg, var(--holo-1), var(--holo-2) 50%, var(--holo-3));

  --display: "Anybody", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --body: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;

  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mast: 76px;
  --gutter: clamp(0px, calc(4vw - 16px), 40px);

  color-scheme: dark;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 24px;
  background: var(--bg);
}

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: clip;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[hidden] { display: none !important; }
img, svg, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
kbd { font: inherit; }

::selection { background: var(--butter); color: var(--on-tone); }

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

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  top: 8px;
  left: max(16px, env(safe-area-inset-left, 0px));
  z-index: 50;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font: 600 13px/1 var(--body);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

.defs { position: absolute; width: 0; height: 0; }

.mono {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
}

.muted { color: var(--ink-soft); }
.tabular { font-variant-numeric: tabular-nums; }

.sheet {
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------------------------------------------------------- masthead */

.masthead {
  position: relative;
  z-index: 40;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 600px) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  height: var(--mast);
}

/* The mark is the sketched face in a little round frame. */
.mark {
  justify-self: start;
  display: block;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--butter);
  box-shadow: 0 0 0 2px var(--ink);
  transition: transform 0.5s var(--spring);
}
.mark img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; scale: 1.25; }
.mark:hover { transform: rotate(-8deg) scale(1.06); }

/* The search: a bar in the middle of the top bar. It widens as it opens and
   a panel of results unrolls beneath it. */
.search {
  position: relative;
  justify-self: center;
  width: min(100%, 440px);
  transition: width 0.5s var(--spring);
}
.search.is-open { width: 100%; }

.search__bar {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 8px 0 16px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 78%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink-soft);
  cursor: text;
  transition: border-color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.search__bar:hover,
.search.is-open .search__bar { border-color: rgba(243, 239, 230, 0.3); background: rgba(243, 239, 230, 0.09); }
.search__bar:has(:focus-visible) { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--butter); }
.search__bar svg { flex: none; width: 17px; height: 17px; }
.search__input {
  flex: 1;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 400 15px/1 var(--body);
}
.search__input::placeholder { color: var(--ink-soft); opacity: 1; }
.search__keys { display: flex; gap: 3px; transition: opacity 0.2s; }
.search__keys kbd {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 26px;
  padding: 0 6px;
  border: 1px solid var(--glass-edge);
  border-radius: 7px;
  background: var(--glass);
  color: var(--ink-soft);
  font: 500 12px/1 var(--mono);
}
.search.is-open .search__keys { opacity: 0; }

/* The panel unrolls from the bar with a little spring, and the results
   drop in one after another. */
.search__panel {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  max-height: min(560px, calc(100vh - var(--mast) - 40px));
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: 22px;
  background: rgba(22, 21, 19, 0.95);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.9);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-12px) scale(0.98);
  transform-origin: 50% 0;
  clip-path: inset(0 0 100% 0 round 22px);
  transition: opacity 0.2s, transform 0.3s var(--ease), clip-path 0.3s var(--ease), visibility 0s linear 0.3s;
}
.search.is-open .search__panel {
  opacity: 1;
  visibility: visible;
  transform: none;
  clip-path: inset(0 0 0 0 round 22px);
  transition: opacity 0.2s, transform 0.55s var(--spring), clip-path 0.5s var(--ease), visibility 0s;
}
.search__list {
  flex: 1;
  margin: 0;
  padding: 8px;
  overflow: auto;
  overscroll-behavior: contain;
  list-style: none;
}
.search__item {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 14px;
  cursor: pointer;
}
.search.is-entering .search__item {
  animation: search-in 0.5s var(--ease) both;
  animation-delay: calc(80ms + var(--n) * 32ms);
}
@keyframes search-in {
  from { opacity: 0; transform: translateY(-10px); }
}
.search__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--glass);
  color: var(--tone, var(--ink-soft));
  transition: background-color 0.2s, color 0.2s;
}
.search__icon svg { width: 16px; height: 16px; }
.search__label { display: grid; min-width: 0; }
.search__label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search__label span + span { color: var(--ink-soft); font-size: 14px; }
.search__item small { font: 500 11px/1 var(--mono); color: var(--ink-soft); }
.search__item[aria-selected="true"] { background: var(--glass); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.search__item[aria-selected="true"] .search__icon { background: var(--tone, var(--ink)); color: var(--on-tone); }
.search__empty { padding: 18px 12px; color: var(--ink-soft); }
.search__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
  padding: 10px 18px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 12px;
}

/* Behind an open search, the page dims. */
.scrim {
  position: fixed;
  inset: 0;
  z-index: 35;
  background: rgba(8, 8, 7, 0.55);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s, visibility 0s linear 0.3s;
}
.scrim.is-on { opacity: 1; visibility: visible; transition: opacity 0.3s, visibility 0s; }

.masthead .pill--hire { justify-self: end; }

@media (hover: none) {
  .search__keys { display: none; }
}
@media (max-width: 560px) {
  .masthead { grid-template-columns: auto minmax(0, 1fr) auto; }
  .search, .search.is-open { width: 100%; }
  .search__panel {
    position: fixed;
    top: calc(var(--mast) + env(safe-area-inset-top, 0px));
    left: max(16px, env(safe-area-inset-left, 0px));
    right: max(16px, env(safe-area-inset-right, 0px));
    max-height: calc(100dvh - var(--mast) - 32px);
  }
  .search__foot { display: none; }
}

/* ------------------------------------------------------------ buttons */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 22px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font: 600 15px/1 var(--body);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.25s, background-color 0.25s, color 0.25s, transform 0.5s var(--spring);
}
.pill svg { width: 16px; height: 16px; transition: transform 0.35s var(--spring); }
.pill:hover svg { transform: translate(2px, -2px); }
.pill:hover,
.pill:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--bg); }

.pill--accent { border-color: var(--butter); background: var(--butter); color: var(--on-tone); }
.pill--hire {
  height: 38px;
  padding: 0 16px;
  border-color: var(--signal);
  background: var(--signal);
  color: var(--on-tone);
  font-size: 14px;
}
.pill--accent:hover,
.pill--accent:focus-visible,
.pill--hire:hover,
.pill--hire:focus-visible { border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* Back links on inner pages. */
.back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: clamp(20px, 3vw, 36px);
  color: var(--ink-soft);
  font-size: 15px;
  text-decoration: none;
  transition: color 0.2s;
}
.back:hover { color: var(--ink); }

/* -------------------------------------------------------------- icons */

/* Line glyphs, drawn in their colour with no tile behind them. */
.glyph { flex: none; width: 24px; height: 24px; color: var(--tone, var(--ink)); }

/* The link dock: icons that magnify under the pointer, like a desktop dock.
   They grow and slide with transforms and the glass behind them stretches,
   so nothing around the dock moves (or wraps) while it does. --anchor says
   which way it grows: 0 to the right, 0.5 both ways. */
.dock {
  --grow: 0px;
  --anchor: 0;
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: flex-end;
  gap: 6px;
  height: 58px;
  padding: 6px 8px;
  border-radius: 18px;
}
.dock::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: calc(var(--grow) * var(--anchor) * -1);
  right: calc(var(--grow) * (1 - var(--anchor)) * -1);
  border: 1px solid var(--glass-edge);
  border-radius: inherit;
  background: var(--glass);
  transition: left 0.15s var(--ease), right 0.15s var(--ease);
}
.dock--centre { --anchor: 0.5; }
.dock__item {
  --s: 1;
  --dx: 0px;
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--glass);
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transform: translateX(var(--dx)) scale(var(--s));
  transform-origin: 50% 100%;
  transition: background-color 0.2s, transform 0.15s var(--ease);
}
.dock__item svg { width: 44%; height: 44%; }
.dock__item:hover,
.dock__item:focus-visible { background: rgba(243, 239, 230, 0.16); }
.dock__item::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--ink);
  color: var(--bg);
  font: 600 12px/1 var(--body);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 4px) scale(calc(1 / var(--s)));
  transform-origin: 50% 100%;
  transition: opacity 0.2s, transform 0.25s var(--ease);
}
.dock__item:hover::after,
.dock__item:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(calc(1 / var(--s))); }
.dock__sep { transform: translateX(var(--dx, 0px)); transition: transform 0.15s var(--ease); }
.dock__sep {
  align-self: center;
  width: 1px;
  height: 28px;
  margin-inline: 3px;
  background: var(--glass-edge);
}

/* -------------------------------------------------------------- hero */

.hero {
  --name-size: clamp(80px, min(19vw, 31vh), 300px);
  --face-w: calc(var(--name-size) * 0.86);
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Sized to what's in it: room above the name for the row of logos, and
     only a little below the buttons before the rule. */
  padding-block: clamp(110px, 17vh, 170px) clamp(32px, 5vh, 56px);
  border-bottom: 1px solid var(--rule);
}

.name {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: 0.05em;
  font-family: var(--display);
  font-size: var(--name-size);
  font-weight: 850;
  line-height: 0.82;
  text-transform: uppercase;
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
}

.name__word { display: inline-flex; white-space: nowrap; }

.ch {
  display: inline-block;
  font-variation-settings: "wdth" 70, "wght" 850;
  transform-origin: 50% 80%;
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
}

/* The headshot stands between the two words, in front of them, and hangs a
   little below the line like a cover photo over a masthead. */
.name__face {
  position: relative;
  z-index: 2;
  flex: none;
  align-self: stretch;
  width: var(--face-w);
}
.headshot {
  position: absolute;
  top: -0.16em;
  left: 50%;
  width: 116%;
  margin: 0;
  translate: -50% 0;
  transform-origin: 50% 100%;
  will-change: transform;
  touch-action: pan-y;
  cursor: grab;
}
/* A die-cut white edge and a shadow; the bust fades out at the shoulders. */
.headshot img {
  width: 100%;
  height: auto;
  filter:
    drop-shadow(4px 0 0 var(--ink)) drop-shadow(-4px 0 0 var(--ink))
    drop-shadow(0 4px 0 var(--ink)) drop-shadow(0 -4px 0 var(--ink))
    drop-shadow(0 18px 26px var(--shadow));
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 94%);
  mask-image: linear-gradient(to bottom, #000 62%, transparent 94%);
}

/* A small serif aside inside the name (the 404 page's "in the"). */
.name__mid {
  font-family: var(--serif);
  font-size: 0.42em;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  text-transform: none;
}

/* Until the entrance starts nothing shows; if the script never runs, it
   all shows anyway. */
.js .name:not(.is-live) .ch,
.js .name:not(.is-live) .name__face {
  opacity: 0;
  animation: show 0.4s 2.5s forwards;
}
@keyframes show { to { opacity: 1; } }
.name.is-live .name__face { animation: face-in 1s var(--spring) 0.35s both; }
@keyframes face-in {
  from { opacity: 0; transform: translateY(0.3em) scale(0.85); }
}

.hero__foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--face-w) minmax(0, 1fr);
  align-items: end;
  gap: 24px;
  margin-top: clamp(40px, 8vh, 96px);
}

.hero__intro {
  display: grid;
  justify-items: start;
  gap: 22px;
  max-width: 42ch;
}
.hero__sub {
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.35;
  text-wrap: balance;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 18px;
}

.hero__facts {
  grid-column: 3;
  justify-self: end;
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  color: var(--ink-soft);
  font-size: 15px;
  list-style: none;
}
.hero__facts li {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}
.hero__facts li:first-child { color: var(--ink); font-weight: 500; }
.hero__facts .tabular { color: var(--ink); }

.status__dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mint);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 60%, transparent); }
  80%, 100% { box-shadow: 0 0 0 10px transparent; }
}

/* Floating tool logos. They sit where --x and --y say until the script
   picks them up. */
.stickers {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.sticker {
  position: absolute;
  top: calc(var(--y) * 100%);
  left: calc(var(--x) * 100%);
  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  transform: translate(-50%, -50%) rotate(var(--r));
}
.stickers.is-live .sticker { top: 0; left: 0; will-change: transform; }
.codex-cursor { animation: blink 1.06s steps(1) infinite; }
@keyframes blink {
  50% { opacity: 0; }
}
.sticker.is-held { cursor: grabbing; }

.logo {
  width: calc(clamp(48px, 4.6vw, 70px) * var(--k, 1));
  aspect-ratio: 1;
  color: var(--c);
}
.logo svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: currentColor;
  filter:
    drop-shadow(0 0 22px color-mix(in srgb, var(--c) 45%, transparent))
    drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
}

@media (max-width: 760px) {
  .hero { --name-size: min(30vw, 19vh); padding-block: clamp(28px, 5vh, 56px) 40px; }
  .name { flex-direction: column; align-items: center; }
  .name__face {
    align-self: center;
    width: min(60vw, 260px);
    margin-block: 0.02em -0.04em;
  }
  .headshot { position: relative; top: auto; left: auto; width: 100%; translate: none; }
  .hero__foot { grid-template-columns: minmax(0, 1fr); gap: 30px; margin-top: 40px; }
  .hero__facts { grid-column: 1; justify-self: start; }
  .hero__facts li { justify-content: flex-start; }
}

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

.section { padding-block: clamp(100px, 13vw, 170px) 0; }
/* The first section sits a little closer to the hero, so its heading shows
   on the first screen. */
.hero + .section { padding-top: clamp(64px, 8vw, 120px); }

.section__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  align-items: end;
  gap: 16px 40px;
  margin-bottom: clamp(40px, 5vw, 72px);
}

.display {
  font-family: var(--display);
  font-size: clamp(76px, 14vw, 210px);
  font-weight: 850;
  font-variation-settings: "wdth" 62, "wght" 850;
  line-height: 0.8;
  text-transform: uppercase;
}

/* While a heading scrambles, each word holds the width it ends at. */
.scramble-word { display: inline-block; white-space: nowrap; }

.section__lede {
  padding-bottom: 0.4em;
  color: var(--ink-soft);
  font-size: 18px;
  line-height: 1.45;
}
.section__lede a { color: var(--ink); text-underline-offset: 0.2em; }

.section__more {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 5vw, 64px);
}

@media (max-width: 760px) {
  .section__head { grid-template-columns: minmax(0, 1fr); }
}

/* Project cover art: drawn by the script as an SVG mock of the app. */
.cover {
  width: 100%;
  height: 100%;
  max-width: none;
}

/* --------------------------------------------------------------- reel */

.reel {
  position: relative;
  height: clamp(360px, 40vw, 560px);
  margin-inline: calc(50% - 50vw);
  overflow: hidden;
  background: radial-gradient(ellipse 60% 70% at 50% 50%, var(--card) 0%, var(--bg) 75%);
  touch-action: pan-y;
  cursor: grab;
}
.reel.is-dragging,
.reel.is-dragging .card { cursor: grabbing; }

.reel__grid {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  -webkit-mask-image: radial-gradient(ellipse 65% 75% at 50% 50%, #000 15%, transparent 78%);
  mask-image: radial-gradient(ellipse 65% 75% at 50% 50%, #000 15%, transparent 78%);
}

.reel__track {
  position: absolute;
  inset: 0;
  perspective: 1400px;
  transform-style: preserve-3d;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}

/* Cards: each project's cover, with its name on a strip of dark glass. */
.card {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--cw, 280px);
  height: var(--ch, 210px);
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 20px;
  background: var(--card);
  box-shadow:
    inset 0 0 0 1px var(--glass-edge),
    0 30px 50px -22px rgba(0, 0, 0, 0.85);
  cursor: grab;
  will-change: transform;
}
.card .cover { position: absolute; inset: 0; }
.card__label {
  position: absolute;
  right: 10px;
  bottom: 10px;
  left: 10px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(12, 12, 11, 0.72);
  color: var(--ink);
  font: 600 13px/1.2 var(--body);
  text-align: left;
}
.card__label .mono { color: var(--ink-soft); font-size: 11px; }

/* The project in the middle of the reel, named in a pill at the bottom. */
.reel__caption {
  position: absolute;
  bottom: 18px;
  left: 50%;
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 18px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: rgba(12, 12, 11, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-weight: 600;
  white-space: nowrap;
  pointer-events: none;
  translate: -50% 0;
}

.holo-text,
.reel__caption .mono,
.folder__tab .mono {
  background: var(--holo);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ------------------------------------------------------------ folders */

.folders {
  display: grid;
  gap: clamp(22px, 3vw, 40px);
  margin: clamp(80px, 10vw, 140px) 0 0;
  padding: 0;
  list-style: none;
}

/* Each folder sticks a little lower than the last, so they pile up, and
   each tab sits further along so the tabs line up side by side. The script
   sinks each folder back as the next slides over it. */
.folder {
  --tab-w: clamp(76px, calc((100% - 72px) / 4), 240px);
  position: sticky;
  top: calc(16px + var(--i) * 14px);
  padding-top: 44px;
  transform-origin: 50% 0;
  will-change: transform;
}

.folder__tab {
  position: absolute;
  top: 1px;
  left: calc(24px + var(--i) * (var(--tab-w) + 8px));
  display: flex;
  align-items: center;
  gap: 10px;
  width: var(--tab-w);
  height: 44px;
  padding: 0 22px;
  overflow: hidden;
  border-radius: 16px 16px 0 0;
  background: var(--card);
  color: var(--ink);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  clip-path: polygon(0 100%, 8px 0, calc(100% - 8px) 0, 100% 100%);
  transition: background-color 0.2s;
}
.folder__tab:hover { background: var(--card-2); }
.folder__tab span:last-child { overflow: hidden; text-overflow: ellipsis; }

.folder__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(22px, 3vw, 40px);
  border-radius: 30px;
  background:
    radial-gradient(70% 90% at 100% 0%, color-mix(in srgb, var(--tone) 12%, transparent), transparent 62%),
    var(--card);
  box-shadow: inset 0 1px 0 rgba(243, 239, 230, 0.05), 0 -26px 50px -30px rgba(0, 0, 0, 0.95);
}

.folder__text {
  display: flex;
  flex-direction: column;
  gap: 26px;
  min-width: 0;
  padding-block: 6px;
}
.folder__title {
  font-family: var(--display);
  font-size: clamp(48px, 5.6vw, 88px);
  font-variation-settings: "wdth" 64, "wght" 840;
  line-height: 0.86;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
.folder__pitch { margin-top: 14px; max-width: 34ch; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; }

/* Facts: a small table of role, year, platform and tools. */
.facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 24px;
  margin: 0;
}
.facts div { display: grid; gap: 2px; min-width: 0; }
.facts dt { color: var(--ink-soft); font-size: 14px; }
.facts dd { margin: 0; font-size: 16px; }

/* Stats: three results in big numbers. */
.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 18px 0 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.stats li { display: grid; align-content: start; gap: 4px; min-width: 0; }
.stats b {
  font-family: var(--display);
  font-size: clamp(28px, 2.6vw, 40px);
  font-variation-settings: "wdth" 72, "wght" 800;
  line-height: 1;
  color: var(--tone, var(--ink));
}
.stats span { color: var(--ink-soft); font-size: 14px; line-height: 1.35; }

.folder__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }

.folder__art {
  display: block;
  min-height: 320px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--card-2);
}
.folder__art .cover { transition: scale 0.8s var(--ease); }
.folder__body:hover .folder__art .cover { scale: 1.04; }

@media (max-width: 900px) {
  .folder__body { grid-template-columns: minmax(0, 1fr); }
  .folder__art { min-height: 0; aspect-ratio: 4 / 3; order: -1; }
}
@media (max-width: 640px) {
  .folder__tab { justify-content: center; padding: 0; font-size: 13px; }
  .folder__tab span:last-child { display: none; }
  .stats { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------------- writing */

.posts {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
  list-style: none;
}
.post {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) auto 24px;
  align-items: baseline;
  gap: 8px 28px;
  padding-block: 28px;
  border-bottom: 1px solid var(--rule);
  text-decoration: none;
}
.post__date,
.post__meta { color: var(--ink-soft); }
.post__main { display: grid; gap: 8px; min-width: 0; }
.post__title {
  font-family: var(--display);
  font-size: clamp(28px, 3vw, 44px);
  font-variation-settings: "wdth" 72, "wght" 780;
  line-height: 1;
  text-transform: uppercase;
  transition: font-variation-settings 0.5s var(--ease);
}
.post:hover .post__title { font-variation-settings: "wdth" 88, "wght" 840; }
.post__excerpt { max-width: 60ch; color: var(--ink-soft); }
.post__arrow { transition: transform 0.35s var(--spring); }
.post:hover .post__arrow { transform: translate(3px, -3px); }

@media (max-width: 700px) {
  .post { grid-template-columns: minmax(0, 1fr) auto; }
  .post__date { grid-column: 1; }
  .post__main { grid-column: 1 / -1; grid-row: 2; }
  .post__meta { grid-column: 2; grid-row: 1; }
  .post__arrow { display: none; }
}

/* ---------------------------------------------------------- about */

.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.cell {
  display: grid;
  grid-column: span 4;
  align-content: start;
  gap: 12px;
  min-width: 0;
  padding: clamp(22px, 2.4vw, 34px);
  border: 1px solid var(--rule);
  border-radius: 24px;
  background: var(--card);
}
.cell--intro {
  grid-column: span 7;
  align-content: space-between;
  gap: 32px;
}
.cell--face {
  grid-column: span 5;
  place-items: end center;
  min-height: 360px;
  margin: 0;
  padding-bottom: 0;
  overflow: hidden;
  border: 0;
  background: radial-gradient(circle at 30% 15%, color-mix(in srgb, var(--butter), white 30%), var(--butter) 50%);
}
.cell--face img {
  width: min(270px, 72%);
  height: auto;
  translate: 0 6%;
  filter:
    drop-shadow(3px 0 0 var(--ink)) drop-shadow(-3px 0 0 var(--ink))
    drop-shadow(0 3px 0 var(--ink)) drop-shadow(0 -3px 0 var(--ink))
    drop-shadow(0 18px 24px rgba(0, 0, 0, 0.25));
}

.cell__text { font-size: 20px; line-height: 1.4; }
.cell__text--status { display: flex; align-items: center; gap: 10px; font-weight: 500; }

.intro {
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.015em;
  text-wrap: pretty;
}
.intro em { font-family: var(--serif); font-size: 1.1em; }

.does {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.does li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  color: var(--ink-soft);
  font-size: 16px;
  line-height: 1.45;
}
.does .glyph { margin-top: 2px; }
.does b { display: block; color: var(--ink); font-size: 17px; font-weight: 600; }

.clock {
  font-family: var(--display);
  font-size: clamp(56px, 5.4vw, 80px);
  font-variation-settings: "wdth" 70, "wght" 800;
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.clock__zone {
  margin-left: 8px;
  color: var(--ink-soft);
  font: 500 14px/1 var(--mono);
  vertical-align: super;
}

@media (max-width: 1000px) {
  .cell--intro,
  .cell--face { grid-column: 1 / -1; }
  .cell { grid-column: span 6; }
}
@media (max-width: 640px) {
  .cell { grid-column: 1 / -1; }
}

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

.contact { padding-block: clamp(110px, 13vw, 180px) clamp(40px, 5vw, 64px); }

/* The closing card: the pitch on the left; on the right, a new message to
   Luke that writes itself, cycling through the kinds of project people
   bring. The whole message is a link to the contact form. */
.cta {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  align-items: center;
  gap: clamp(40px, 5vw, 80px);
  padding: clamp(28px, 6vw, 96px);
  overflow: hidden;
  border: 1px solid var(--glass-edge);
  border-radius: clamp(28px, 3vw, 44px);
  background:
    radial-gradient(45% 60% at 0% 0%, color-mix(in srgb, var(--holo-2) 22%, transparent), transparent 70%),
    radial-gradient(45% 60% at 100% 100%, color-mix(in srgb, var(--holo-1) 16%, transparent), transparent 70%),
    radial-gradient(35% 50% at 60% 0%, color-mix(in srgb, var(--holo-3) 10%, transparent), transparent 70%),
    var(--card);
}
.cta .stickers { z-index: 2; }

.cta__copy { display: grid; justify-items: start; gap: 24px; min-width: 0; }
.cta__title {
  font-family: var(--display);
  font-size: clamp(54px, 7.2vw, 124px);
  font-variation-settings: "wdth" 62, "wght" 860;
  line-height: 0.84;
  text-transform: uppercase;
}
.cta__title span {
  display: block;
  margin-top: 0.08em;
  font-family: var(--serif);
  font-size: 0.78em;
  font-style: italic;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: none;
}
.cta__lede { max-width: 38ch; color: var(--ink-soft); font-size: 19px; }
.cta__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cta__mail { display: grid; gap: 6px; }
.cta__address {
  font-family: var(--display);
  font-size: clamp(24px, 2.4vw, 34px);
  font-variation-settings: "wdth" 80, "wght" 760;
  line-height: 1.1;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.cta__address sup { margin-left: 0.04em; font-size: 0.5em; color: var(--ink-soft); }
.cta__address:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }

/* The footnote is set in the serif, where the capital I finally shows. */
.email__aside {
  max-width: 44ch;
  color: var(--ink-soft);
  font-family: var(--serif);
  font-size: 19px;
  font-style: italic;
  line-height: 1.35;
}

/* The message: a sheet of paper on the dark card. */
.compose {
  position: relative;
  display: grid;
  overflow: hidden;
  border-radius: 24px;
  background: var(--ink);
  color: var(--on-tone);
  text-decoration: none;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: rotate(2deg);
  transition: transform 0.6s var(--spring);
}
.compose:hover,
.compose:focus-visible { transform: rotate(0deg) translateY(-6px); }
.compose__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(12, 12, 11, 0.1);
  background: rgba(12, 12, 11, 0.04);
}
.compose__lights { display: flex; gap: 7px; }
.compose__lights i { width: 11px; height: 11px; border-radius: 50%; background: #ff6a5f; }
.compose__lights i:nth-child(2) { background: #f6c044; }
.compose__lights i:nth-child(3) { background: #4fc560; }
.compose__bar b { color: rgba(12, 12, 11, 0.55); font-size: 13px; font-weight: 600; }
.compose__row {
  display: grid;
  grid-template-columns: 70px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 8px 20px;
  border-bottom: 1px solid rgba(12, 12, 11, 0.08);
  font-size: 15px;
}
.compose__key { color: rgba(12, 12, 11, 0.5); }
.compose__to {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
  padding: 4px 12px 4px 4px;
  border-radius: 999px;
  background: rgba(12, 12, 11, 0.07);
  font-weight: 600;
}
.compose__to span { width: 26px; height: 26px; overflow: hidden; border-radius: 50%; background: var(--butter); }
.compose__to img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; scale: 1.25; }
.compose__subject { overflow: hidden; font-weight: 600; white-space: nowrap; }
.compose__subject::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.15em;
  margin-left: 2px;
  vertical-align: -0.2em;
  background: currentColor;
  animation: blink 1s steps(1) infinite;
}
.compose__body { display: grid; gap: 18px; padding: 20px 20px 22px; }
.compose__chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 30px; }
.compose__chips span {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--tone);
  font-size: 13px;
  font-weight: 600;
  animation: chip-in 0.5s var(--spring) both;
}
.compose__chips span:nth-child(2) { animation-delay: 0.06s; }
@keyframes chip-in {
  from { opacity: 0; transform: scale(0.6); }
}
.compose__lines { display: grid; gap: 9px; }
.compose__lines i { height: 8px; border-radius: 4px; background: rgba(12, 12, 11, 0.09); }
.compose__lines i:nth-child(2) { width: 92%; }
.compose__lines i:nth-child(3) { width: 58%; }
.compose__meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.compose__meta > span { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(12, 12, 11, 0.06); font-weight: 600; }
.compose__meta small { color: rgba(12, 12, 11, 0.5); font-size: 12px; font-weight: 500; }
.compose__send {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  background: var(--on-tone);
  color: var(--ink);
  font-weight: 600;
}
.compose__send svg { width: 16px; height: 16px; transition: transform 0.35s var(--spring); }
.compose:hover .compose__send svg { transform: translate(2px, -2px); }

@media (max-width: 900px) {
  .cta { grid-template-columns: minmax(0, 1fr); }
  .compose { transform: none; }
}
@media (max-width: 480px) {
  .compose__row { grid-template-columns: 56px minmax(0, 1fr); padding-inline: 16px; }
  .compose__body { padding-inline: 16px; }
}

/* A smaller closing card for the inner pages. */
.cta-mini {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px 28px;
  margin-top: clamp(80px, 10vw, 140px);
  padding: clamp(22px, 3vw, 36px);
  border: 1px solid var(--glass-edge);
  border-radius: 28px;
  background:
    radial-gradient(50% 140% at 0% 0%, color-mix(in srgb, var(--holo-2) 16%, transparent), transparent 70%),
    radial-gradient(40% 140% at 100% 100%, color-mix(in srgb, var(--holo-1) 12%, transparent), transparent 70%),
    var(--card);
}
.cta-mini__face {
  width: 72px;
  height: 72px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--butter);
  box-shadow: 0 0 0 3px var(--ink);
}
.cta-mini__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; scale: 1.25; }
.cta-mini__title {
  font-family: var(--display);
  font-size: clamp(30px, 3.2vw, 46px);
  font-variation-settings: "wdth" 64, "wght" 840;
  line-height: 0.95;
  text-transform: uppercase;
}
.cta-mini__title span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
}
.cta-mini__text p { margin-top: 6px; color: var(--ink-soft); }
.cta-mini__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cta-mini + .foot { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 860px) {
  .cta-mini { grid-template-columns: auto minmax(0, 1fr); }
  .cta-mini__actions { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .cta-mini__face { width: 56px; height: 56px; }
}

/* --------------------------------------------------------- inner pages */

/* Inner-page headings: the same display type as the rest of the site, over
   the reel's field of characters. The field runs the width of the page and
   fades out at the top and bottom. */
.page-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  align-items: end;
  gap: 24px 40px;
  padding-block: clamp(72px, 11vw, 170px) clamp(48px, 6vw, 88px);
}
.page-hero .section__lede { font-size: 19px; }
.page-hero .filters { grid-column: 1 / -1; }
.page-hero__field {
  position: absolute;
  z-index: -1;
  top: calc(-1 * var(--mast));
  left: 50%;
  width: 100vw;
  max-width: none;
  height: calc(100% + var(--mast));
  translate: -50% 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), #000 24%, #000 74%, transparent);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.4), #000 24%, #000 74%, transparent);
}
.page-hero .back { grid-column: 1 / -1; justify-self: start; margin: 0; }
@media (max-width: 760px) {
  .page-hero { grid-template-columns: minmax(0, 1fr); }
}

/* Project filters. */
.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.filter {
  height: 40px;
  padding: 0 16px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-soft);
  font: 500 15px/1 var(--body);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.filter:hover { color: var(--ink); border-color: rgba(243, 239, 230, 0.3); }
.filter[aria-pressed="true"] { border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* The projects page: every project as a folder in a filing drawer. The
   folders stand one behind another with their tabs staggered, each in its
   project's colour. Pointing at one lifts it; clicking pops it up, open,
   over the others (they dim), so the page around it never moves. */
.cabinet {
  display: grid;
  margin: clamp(28px, 4vw, 48px) 0 0;
  padding: 44px 0 0;
  list-style: none;
}
.drawer {
  --tab-w: clamp(76px, calc((100% - 72px) / 4), 240px);
  --lift: -18px;
  position: relative;
  isolation: isolate;
  transition: transform 0.55s var(--spring), filter 0.4s var(--ease);
}
.drawer:not(.is-first) { margin-top: -28px; }
.drawer:not(.is-open):hover,
.drawer:not(.is-open):focus-within { transform: translateY(-10px); }
.drawer.is-open { z-index: 5; transform: translateY(var(--lift)); }
.cabinet.has-open .drawer:not(.is-open) { filter: brightness(0.5) saturate(0.7); }
.cabinet.has-open .drawer:not(.is-open):hover { filter: brightness(0.7) saturate(0.85); }

.drawer__card {
  position: relative;
  border-radius: 26px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone), white 10%), var(--tone) 120px);
  color: var(--on-tone);
  box-shadow: 0 -20px 40px -26px rgba(0, 0, 0, 0.9);
}
.drawer.is-open .drawer__card { box-shadow: 0 -20px 40px -26px rgba(0, 0, 0, 0.9), 0 -30px 70px -30px rgba(0, 0, 0, 0.8); }
.drawer__tab {
  position: absolute;
  bottom: 100%;
  left: calc(24px + var(--i) * (var(--tab-w) + 8px));
  display: flex;
  align-items: center;
  gap: 10px;
  width: var(--tab-w);
  height: 40px;
  margin-bottom: -1px;
  padding: 0 22px;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background: color-mix(in srgb, var(--tone), white 10%);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  clip-path: polygon(0 100%, 8px 0, calc(100% - 8px) 0, 100% 100%);
}
.drawer__tab .mono { opacity: 0.6; }
.drawer__tab span:last-child { overflow: hidden; text-overflow: ellipsis; }

.drawer__head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px 24px;
  width: 100%;
  min-height: 140px;
  padding: 20px clamp(20px, 3vw, 36px) 72px;
  border: 0;
  border-radius: 26px 26px 0 0;
  transition: padding 0.5s var(--ease);
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.drawer__head:focus-visible { outline-color: var(--on-tone); outline-offset: -6px; }
.drawer__name {
  font-family: var(--display);
  font-size: clamp(32px, 3.6vw, 54px);
  font-variation-settings: "wdth" 66, "wght" 840;
  line-height: 0.9;
  text-transform: uppercase;
}
.drawer__pitch { overflow: hidden; font-size: 17px; text-overflow: ellipsis; white-space: nowrap; opacity: 0.75; }
.drawer__meta { opacity: 0.65; white-space: nowrap; }
.drawer__toggle {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(12, 12, 11, 0.1);
  transition: transform 0.45s var(--spring), background-color 0.2s, color 0.2s;
}
.drawer__toggle svg { width: 18px; height: 18px; }
.drawer__head:hover .drawer__toggle { background: rgba(12, 12, 11, 0.18); }
.drawer.is-open .drawer__toggle { transform: rotate(45deg); background: var(--on-tone); color: var(--tone); }

/* The open folder's contents hang below its header, over the folders in
   front of it, unrolling downward as it pops up. */
.drawer__body {
  position: absolute;
  top: calc(100% - 56px);
  left: 0;
  right: 0;
  border-radius: 0 0 26px 26px;
  background: var(--tone);
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.85);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.55s var(--ease), visibility 0s 0.55s;
}
.drawer.is-open .drawer__body {
  clip-path: inset(0 -140px -160px -140px);
  visibility: visible;
  transition: clip-path 0.6s var(--ease) 0.05s, visibility 0s;
}
.drawer__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(24px, 4vw, 56px);
  padding: 0 clamp(20px, 3vw, 36px) clamp(24px, 3vw, 36px);
}
.drawer__text { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.drawer .facts dt,
.drawer .stats span { color: rgba(12, 12, 11, 0.62); }
.drawer .stats { border-top-color: rgba(12, 12, 11, 0.16); }
.drawer .stats b { color: var(--on-tone); }
.drawer__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.drawer .pill { border-color: rgba(12, 12, 11, 0.25); color: var(--on-tone); }
.drawer .pill:hover,
.drawer .pill:focus-visible,
.drawer .pill--dark { border-color: var(--on-tone); background: var(--on-tone); color: var(--tone); }
.drawer__art {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(12, 12, 11, 0.1);
}
.drawer__art .cover { transition: scale 0.8s var(--ease); }
.drawer__art:hover .cover { scale: 1.04; }
/* Opening, the contents rise in one after another. */
.drawer.is-open .drawer__text > *,
.drawer.is-open .drawer__art { animation: write-in 0.55s var(--ease) both; }
.drawer.is-open .drawer__text > :nth-child(1) { animation-delay: 0.12s; }
.drawer.is-open .drawer__text > :nth-child(2) { animation-delay: 0.2s; }
.drawer.is-open .drawer__text > :nth-child(3) { animation-delay: 0.28s; }
.drawer.is-open .drawer__art { animation-delay: 0.18s; }

@media (max-width: 860px) {
  .drawer__head { grid-template-columns: minmax(0, 1fr) auto; }
  .drawer__pitch { grid-column: 1 / -1; grid-row: 2; white-space: normal; }
  .drawer__meta { display: none; }
  .drawer__toggle { grid-column: 2; grid-row: 1; }
  .drawer__content { grid-template-columns: minmax(0, 1fr); }
  .drawer__art { order: -1; }
}
@media (max-width: 640px) {
  .drawer__tab { justify-content: center; padding: 0; font-size: 13px; }
  .drawer__tab span:last-child { display: none; }
  .drawer .stats { grid-template-columns: minmax(0, 1fr); }
}

/* Paper: a warm, faintly ruled sheet, used for the case studies. A photo
   is printed with a white border and clipped on, and a stamp sits in the
   corner. */
.paper {
  --paper: #f7f3ea;
  --paper-ink: #161513;
  position: relative;
  border-radius: 10px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0) 160px),
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(22, 21, 19, 0.05) 35px 36px),
    var(--paper);
  color: var(--paper-ink);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 40px 70px -34px rgba(0, 0, 0, 0.75);
}
.paper .facts dt,
.paper .stats span { color: rgba(22, 21, 19, 0.55); }
.paper .stats { border-top-color: rgba(22, 21, 19, 0.14); }
/* The numbers get a swipe of highlighter in the project's colour. */
.paper .stats b {
  justify-self: start;
  padding-inline: 2px;
  color: var(--paper-ink);
  background: linear-gradient(transparent 55%, color-mix(in srgb, var(--tone) 70%, transparent) 55% 92%, transparent 92%) no-repeat 0 0 / 100% 100%;
}
.paper .pill { border-color: rgba(22, 21, 19, 0.25); color: var(--paper-ink); }
.paper .pill:hover,
.paper .pill:focus-visible { border-color: var(--paper-ink); background: var(--paper-ink); color: var(--paper); }
.paper__photo {
  position: relative;
  padding: 12px 12px 40px;
  background: #fff;
  box-shadow: 0 22px 36px -22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(22, 21, 19, 0.06);
}
.paper__clip {
  position: absolute;
  z-index: 1;
  top: -28px;
  left: 36px;
  width: 24px;
  color: #8d939c;
  filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, 0.25));
}
.paper__clip svg { width: 100%; height: auto; }
.paper__stamp {
  position: absolute;
  z-index: 2;
  top: clamp(20px, 3vw, 40px);
  right: clamp(20px, 3.4vw, 48px);
  padding: 8px 12px;
  border: 3px solid currentColor;
  border-radius: 8px;
  color: color-mix(in srgb, var(--signal), black 15%);
  font: 700 clamp(11px, 1.1vw, 14px)/1.25 var(--mono);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  opacity: 0.78;
  rotate: -9deg;
  mix-blend-mode: multiply;
}

@keyframes write-in {
  from { opacity: 0; transform: translateY(12px); }
}
@keyframes highlight {
  from { background-size: 0% 100%; }
}
@keyframes photo-drop {
  from { opacity: 0; transform: translate(40px, -80px) rotate(10deg) scale(1.06); }
}
@keyframes clip-on {
  from { opacity: 0; transform: translateY(-30px) rotate(-10deg); }
}
@keyframes stamp {
  from { opacity: 0; transform: scale(1.9); }
  60% { opacity: 1; }
}

/* The sheet that lifts out of a folder on the way to a case study. Where
   page changes can carry it, it lifts a little and then glides into the
   case study's own sheet; elsewhere it fills the window first. */
.paper-fly {
  position: fixed;
  z-index: 80;
  border-radius: 10px;
  background:
    repeating-linear-gradient(180deg, transparent 0 35px, rgba(22, 21, 19, 0.05) 35px 36px),
    #f7f3ea;
  box-shadow: 0 50px 90px -30px rgba(0, 0, 0, 0.85);
  rotate: -1.5deg;
  transition: left 0.55s var(--ease), top 0.55s var(--ease), width 0.55s var(--ease), height 0.55s var(--ease), rotate 0.55s var(--ease), translate 0.3s var(--ease);
}
.paper-fly.is-lifting { translate: 0 -26px; rotate: -0.5deg; }
/* The name sits where the case study's title will, so it carries across. */
.paper-fly span {
  position: absolute;
  top: clamp(28px, 5vw, 76px);
  left: clamp(20px, 5vw, 76px);
  color: #161513;
  font-family: var(--display);
  font-size: clamp(64px, 10vw, 170px);
  font-variation-settings: "wdth" 62, "wght" 850;
  line-height: 0.8;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.3s 0.2s;
}
.paper-fly.is-up span { opacity: 1; }
.paper-fly.is-lifting span { opacity: 1; transition-delay: 0s; }
.paper-fly.is-up {
  left: 16px !important;
  top: 16px !important;
  width: calc(100vw - 32px) !important;
  height: calc(100vh - 32px) !important;
  rotate: 0deg;
}

/* A case study: a large sheet of paper opening out of the project's
   folder, which shows behind its top edge with its tab. */
.case-file {
  position: relative;
  margin-top: clamp(20px, 3vw, 36px);
  padding-top: 44px;
  perspective: 1800px;
}
.case-file::before {
  content: "";
  position: absolute;
  top: 43px;
  left: 0;
  right: 0;
  height: min(440px, 60vh);
  border-radius: 28px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone), white 10%), var(--tone) 140px);
}
.case-file__tab {
  position: absolute;
  top: 0;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: clamp(120px, 24%, 260px);
  height: 44px;
  padding: 0 22px;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background: color-mix(in srgb, var(--tone), white 10%);
  color: var(--on-tone);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  clip-path: polygon(0 100%, 8px 0, calc(100% - 8px) 0, 100% 100%);
}
.case-file__tab .mono { opacity: 0.6; }
.paper--case {
  margin: 34px clamp(10px, 2vw, 28px) 0;
  padding: clamp(28px, 5vw, 76px) clamp(20px, 5vw, 76px) clamp(36px, 5vw, 76px);
  rotate: -0.3deg;
  transform-origin: 50% 0;
}
.case__head { display: grid; gap: 20px; max-width: min(80%, 900px); padding-bottom: clamp(28px, 4vw, 48px); }
.paper--case .display { font-size: clamp(64px, 10vw, 170px); }
.case__pitch { max-width: 30ch; font-size: clamp(22px, 2.4vw, 32px); line-height: 1.25; }
.case__links { display: flex; flex-wrap: wrap; gap: 10px; }
.case__photo { margin: 0 0 clamp(36px, 5vw, 72px); rotate: -0.8deg; }
.case__shot { display: block; aspect-ratio: 2 / 1; overflow: hidden; }
.case__grid {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 80px);
}
.case__grid .facts { grid-template-columns: minmax(0, 1fr); align-content: start; }
.case__story { display: grid; gap: 36px; max-width: 64ch; }
.case__story h2 {
  margin-bottom: 10px;
  font-family: var(--display);
  font-size: clamp(28px, 2.6vw, 38px);
  font-variation-settings: "wdth" 72, "wght" 800;
  line-height: 1;
  text-transform: uppercase;
}
.case__story p { color: rgba(22, 21, 19, 0.76); font-size: 19px; line-height: 1.6; }
.paper--case .stats { margin-top: clamp(40px, 6vw, 80px); }
.paper--case .stats b { font-size: clamp(40px, 5vw, 72px); }

/* Opening: the sheet swings up out of the folder, the photo drops on and
   is clipped, the words write themselves in, the numbers are highlighted
   and the stamp lands. */
.paper--case { animation: paper-open 1.1s var(--spring) 0.05s both; }
.paper--case .case__head > *,
.paper--case .case__grid,
.paper--case .stats { animation: write-in 0.7s var(--ease) both; }
.paper--case .case__head > :nth-child(1) { animation-delay: 0.4s; }
.paper--case .case__head > :nth-child(2) { animation-delay: 0.5s; }
.paper--case .case__head > :nth-child(3) { animation-delay: 0.6s; }
.paper--case .case__grid { animation-delay: 0.9s; }
.paper--case .stats { animation-delay: 1.05s; }
.paper--case .case__photo { animation: photo-drop 0.9s var(--spring) 0.6s both; }
.paper--case .paper__clip { animation: clip-on 0.5s var(--spring) 1.15s both; }
.paper--case .paper__stamp { animation: stamp 0.45s cubic-bezier(0.3, 1.5, 0.6, 1) 1.35s both; }
.paper--case .stats b { animation: highlight 0.8s var(--ease) 1.5s both; }
@keyframes paper-open {
  from { opacity: 0; transform: translateY(160px) rotateX(-24deg) scale(0.97); }
  35% { opacity: 1; }
}
/* Arriving from a folder, the sheet that lifted out of it glides into this
   one's place (see "page changes"), so it doesn't swing open again. */
.paper--case.is-lifted { animation: none; view-transition-name: case-sheet; }
.paper--case.is-lifted .case__head > :nth-child(1) { animation: none; }
.paper--case.is-lifted .case__head > :nth-child(2) { animation-delay: 0.2s; }
.paper--case.is-lifted .case__head > :nth-child(3) { animation-delay: 0.3s; }
.paper--case.is-lifted .case__photo { animation-delay: 0.3s; }
.paper--case.is-lifted .case__grid { animation-delay: 0.55s; }
.paper--case.is-lifted .stats { animation-delay: 0.7s; }
.paper--case.is-lifted .paper__clip { animation-delay: 0.85s; }
.paper--case.is-lifted .paper__stamp { animation-delay: 1s; }
.paper--case.is-lifted .stats b { animation-delay: 1.15s; }

@media (max-width: 760px) {
  /* The photo drops in from off to the side; on a phone, keep it from
     widening the page while it does. */
  .case-file { overflow-x: clip; }
  .case__head { max-width: none; padding-top: 56px; }
  .case__shot { aspect-ratio: 4 / 3; }
  .case__grid { grid-template-columns: minmax(0, 1fr); }
  .paper--case .stats { grid-template-columns: minmax(0, 1fr); }
}

/* The next project, at the end of a case study: a closed folder with its
   case study peeking out of the top. Pointing at it slides the sheet up
   and tips the front open. */
.next-folder {
  position: relative;
  display: block;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: 44px;
  overflow-x: clip;
  color: var(--on-tone);
  text-decoration: none;
  perspective: 1600px;
}
.next-folder__tab {
  position: absolute;
  top: 0;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 10px;
  width: clamp(120px, 24%, 260px);
  height: 45px;
  padding: 0 22px;
  overflow: hidden;
  border-radius: 14px 14px 0 0;
  background: color-mix(in srgb, var(--tone), black 22%);
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
  clip-path: polygon(0 100%, 8px 0, calc(100% - 8px) 0, 100% 100%);
}
.next-folder__tab .mono { opacity: 0.6; }
.next-folder__back {
  position: absolute;
  inset: 44px 0 0;
  border-radius: 28px;
  background: color-mix(in srgb, var(--tone), black 22%);
}
.next-folder__sheet {
  position: absolute;
  top: 66px;
  right: clamp(24px, 6vw, 96px);
  width: min(48%, 460px);
  padding: 12px 12px 40px;
  border-radius: 6px;
  background: #f7f3ea;
  box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6);
  rotate: 2deg;
  transition: translate 0.6s var(--spring), rotate 0.6s var(--spring);
}
/* A second sheet tucked in behind the first. */
.next-folder__sheet::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14px 30px 20px -26px;
  border-radius: 6px;
  background: #ebe5d8;
  box-shadow: 0 10px 30px -16px rgba(0, 0, 0, 0.5);
  rotate: -5deg;
}
.next-folder__photo { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 3px; }
.next-folder__front {
  position: relative;
  display: grid;
  justify-items: start;
  gap: 10px;
  margin-top: clamp(130px, 15vw, 200px);
  padding: clamp(24px, 3vw, 36px) clamp(24px, 3vw, 40px) clamp(28px, 3.4vw, 44px);
  border-radius: 28px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tone), white 12%), var(--tone) 120px);
  box-shadow: 0 -24px 40px -28px rgba(0, 0, 0, 0.7);
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--spring);
}
.next-folder__label { display: flex; justify-content: space-between; gap: 16px; justify-self: stretch; opacity: 0.65; }
.next-folder__name {
  font-family: var(--display);
  font-size: clamp(48px, 7vw, 110px);
  font-variation-settings: "wdth" 64, "wght" 850;
  line-height: 0.86;
  text-transform: uppercase;
}
.next-folder__pitch { max-width: 36ch; font-size: clamp(17px, 1.5vw, 20px); opacity: 0.8; }
.next-folder__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 11px 18px;
  border-radius: 999px;
  background: var(--on-tone);
  color: var(--tone);
  font-weight: 600;
}
.next-folder__go svg { width: 15px; height: 15px; transition: transform 0.3s var(--ease); }
.next-folder:hover .next-folder__sheet,
.next-folder:focus-visible .next-folder__sheet { translate: 0 -44px; rotate: -1deg; }
.next-folder:hover .next-folder__front,
.next-folder:focus-visible .next-folder__front { transform: rotateX(-12deg); }
.next-folder:hover .next-folder__go svg { transform: translate(2px, -2px); }
.next-folder:focus-visible { outline: none; }
.next-folder:focus-visible .next-folder__front { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (max-width: 640px) {
  .next-folder__sheet { width: 70%; }
  .next-folder__front { margin-top: 150px; }
}

/* "Next" links at the end of a post. */
.next {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  align-items: center;
  gap: 24px;
  margin-top: clamp(60px, 8vw, 110px);
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid var(--rule);
  border-radius: 26px;
  background: var(--card);
  text-decoration: none;
  transition: border-color 0.2s;
}
.next:hover { border-color: rgba(243, 239, 230, 0.3); }
.next__text { display: grid; gap: 8px; }
.next__text .muted { font-size: 15px; }
.next__name {
  font-family: var(--display);
  font-size: clamp(36px, 4.4vw, 64px);
  font-variation-settings: "wdth" 66, "wght" 820;
  line-height: 0.9;
  text-transform: uppercase;
}
.next__art { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; }
@media (max-width: 640px) {
  .next { grid-template-columns: minmax(0, 1fr); }
}

/* A blog post. */
/* The blog: the latest post large, then the rest as cards, each with its
   picture. */
.post-feature {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(14px, 1.6vw, 20px);
  border: 1px solid var(--rule);
  border-radius: 32px;
  background: var(--card);
  text-decoration: none;
  transition: border-color 0.3s, transform 0.5s var(--spring);
}
.post-feature:hover { border-color: rgba(243, 239, 230, 0.22); transform: translateY(-4px); }
.post-feature__art { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 22px; }
.post-feature__text { display: grid; justify-items: start; gap: 18px; padding: clamp(8px, 2vw, 28px) clamp(4px, 2vw, 24px); }
.post-feature__title {
  font-family: var(--display);
  font-size: clamp(40px, 4.6vw, 76px);
  font-variation-settings: "wdth" 64, "wght" 850;
  line-height: 0.9;
  text-transform: uppercase;
  text-wrap: balance;
}
.post-feature__excerpt { max-width: 40ch; color: var(--ink-soft); font-size: 19px; line-height: 1.45; }
.pcard__meta { color: var(--ink-soft); }
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: clamp(32px, 4vw, 48px) clamp(16px, 2vw, 28px);
  margin: clamp(40px, 6vw, 72px) 0 0;
  padding: 0;
  list-style: none;
}
.pcard { display: grid; align-content: start; gap: 14px; text-decoration: none; }
.pcard__art { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 22px; background: var(--card); }
.pcard__title {
  font-family: var(--display);
  font-size: clamp(26px, 2.4vw, 36px);
  font-variation-settings: "wdth" 66, "wght" 840;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
  transition: color 0.2s;
}
.pcard:hover .pcard__title { color: var(--butter); }
.pcard__excerpt { color: var(--ink-soft); }
.post-feature__art .cover,
.pcard__art .cover { transition: scale 0.8s var(--ease); }
.post-feature:hover .post-feature__art .cover,
.pcard:hover .pcard__art .cover { scale: 1.05; }
@media (max-width: 860px) {
  .post-feature { grid-template-columns: minmax(0, 1fr); }
}

/* A post: the header over the field, spread across the page (when and how
   long over the title on the left; the standfirst in the serif and the
   byline on the right), its picture, then one comfortable column of words
   with the post's parts in the margin. */
.post-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 400px); gap: 24px clamp(32px, 5vw, 80px); }
.page-hero__col { display: grid; gap: 18px; min-width: 0; }
.post-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  color: var(--ink-soft);
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.post-hero__meta > * + *::before { content: "/"; margin-right: 14px; opacity: 0.5; }
.post-hero .display {
  font-size: clamp(48px, 6.2vw, 104px);
  line-height: 0.86;
  text-wrap: balance;
}
.post-hero__standfirst {
  font-family: var(--serif);
  font-size: clamp(24px, 2.2vw, 32px);
  font-style: italic;
  line-height: 1.18;
  text-wrap: balance;
}
.byline { display: flex; align-items: center; gap: 12px; color: var(--ink-soft); font-size: 15px; }
.byline b { color: var(--ink); font-weight: 600; }

/* The sketched face in a little round frame, at any size. */
.face {
  flex: none;
  width: var(--size);
  height: var(--size);
  overflow: hidden;
  border-radius: 50%;
  background: var(--butter);
  box-shadow: 0 0 0 2px var(--ink);
}
.face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; scale: 1.25; }

@media (max-width: 860px) {
  .post-hero { grid-template-columns: minmax(0, 1fr); }
  .post-hero__standfirst { max-width: 32ch; }
}

.post-cover { display: grid; gap: 14px; margin: 0; }
.post-cover__art { display: block; aspect-ratio: 21 / 9; overflow: hidden; border-radius: 28px; background: var(--card); }
.post-cover figcaption { color: var(--ink-soft); font-size: 13px; }
.post-cover figcaption a { margin-left: 6px; color: var(--ink); text-underline-offset: 0.25em; }
@media (max-width: 760px) {
  .post-cover__art { aspect-ratio: 4 / 3; border-radius: 22px; }
}

.post-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 680px) minmax(0, 1fr);
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(48px, 6vw, 88px);
}
.post-rail {
  position: sticky;
  top: 32px;
  grid-column: 1;
  align-self: start;
  justify-self: end;
  display: grid;
  gap: 14px;
  width: min(100%, 230px);
  padding-top: 6px;
}
.post-rail p { color: var(--ink-soft); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.post-rail ol { display: grid; margin: 0; padding: 0; border-left: 1px solid var(--rule); list-style: none; }
.post-rail button {
  display: block;
  width: 100%;
  margin-left: -1px;
  padding: 7px 0 7px 16px;
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  color: var(--ink-soft);
  font: inherit;
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.post-rail button:hover { color: var(--ink); }
.post-rail button[aria-current="true"] { border-left-color: var(--butter); color: var(--ink); }

.article { grid-column: 2; min-width: 0; }
.article__body { display: grid; gap: 1.2em; counter-reset: part; }
.article__body p { color: color-mix(in srgb, var(--ink) 84%, var(--bg)); font-size: clamp(18px, 1.4vw, 20px); line-height: 1.72; }
.article__body > p:first-child { color: var(--ink); font-size: clamp(21px, 1.8vw, 24px); line-height: 1.6; }
/* The first letter, in the display face and the site's yellow. */
.article__body > p:first-child::first-letter {
  float: left;
  margin: 0.08em 0.12em 0 0;
  color: var(--butter);
  font-family: var(--display);
  font-size: 3.5em;
  font-variation-settings: "wdth" 62, "wght" 850;
  line-height: 0.8;
  text-transform: uppercase;
}
/* Headings are numbered, in the same yellow. */
.article__body h2 {
  margin-top: 1.1em;
  scroll-margin-top: 32px;
  counter-increment: part;
  font-family: var(--display);
  font-size: clamp(30px, 3vw, 44px);
  font-variation-settings: "wdth" 70, "wght" 820;
  line-height: 0.95;
  text-transform: uppercase;
  text-wrap: balance;
}
.article__body h2::before {
  content: counter(part, decimal-leading-zero);
  display: block;
  margin-bottom: 12px;
  color: var(--butter);
  font: 500 13px/1 var(--mono);
  letter-spacing: 0.06em;
}
/* Pull quotes, in the serif, with a holographic rule. */
.pull {
  margin: 0.5em 0;
  padding-left: clamp(20px, 3vw, 32px);
  border-left: 3px solid var(--holo-2);
  border-image: var(--holo) 1;
}
.article__body .pull p {
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-style: italic;
  line-height: 1.15;
  text-wrap: balance;
}
.article__end {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px 18px;
  margin-top: clamp(44px, 5vw, 64px);
  padding-top: 28px;
  border-top: 1px solid var(--rule);
}
.article__end .face { grid-row: span 2; }
.article__end p { font-family: var(--serif); font-size: clamp(22px, 2vw, 26px); font-style: italic; line-height: 1.2; }
.article__share { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.article__share .pill { height: 36px; padding: 0 14px; font-size: 14px; }
.article__share .pill svg { width: 15px; height: 15px; }
.post-layout + .next { margin-top: clamp(56px, 7vw, 96px); }
@media (max-width: 1100px) {
  .post-layout { grid-template-columns: minmax(0, 680px); justify-content: center; }
  .post-rail { display: none; }
  .article { grid-column: 1; }
}
@media (max-width: 520px) {
  .article__end { grid-template-columns: minmax(0, 1fr); }
  .article__end .face { grid-row: auto; }
}

/* How far through a post you are. */
.progress {
  position: fixed;
  z-index: 60;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--holo);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}


.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.tags li {
  padding: 7px 13px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 500;
}

/* ------------------------------------------------------ contact page */

/* How it works, in one strip above the form. */
.howto {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.25fr);
  gap: 1px;
  margin: 0 0 clamp(40px, 6vw, 80px);
  padding: 0;
  overflow: hidden;
  list-style: none;
  border: 1px solid var(--rule);
  border-radius: 24px;
  background: var(--rule);
}
.howto > * {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  margin: 0;
  padding: 22px 24px 24px;
  background: var(--card);
}
.howto .mono { font-size: 12px; }
.howto b { font-size: 17px; font-weight: 600; }
.howto p { color: var(--ink-soft); font-size: 15px; line-height: 1.45; }
.howto__mail {
  background:
    radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--holo-2) 16%, transparent), transparent 70%),
    var(--card-2);
}
.howto__mail .cta__address { font-size: clamp(22px, 2vw, 28px); }
.howto__mail .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.howto__mail .pill { height: 38px; padding: 0 14px; font-size: 14px; }
.howto__mail .email__aside { font-size: 16px; }
@media (max-width: 1000px) {
  .howto { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .howto__mail { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .howto { grid-template-columns: minmax(0, 1fr); }
}

/* The form reads like a document: each part has its number, name and a
   line of help on the left, and its questions on the right. Text fields
   are a single underline; choices are chips. */
.form { display: grid; }
.form__section,
.form__submit {
  display: grid;
  grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  gap: 24px clamp(32px, 6vw, 96px);
  padding-block: clamp(32px, 4vw, 52px);
  border-top: 1px solid var(--rule);
}
.form__intro { display: grid; align-content: start; gap: 10px; }
.form__intro .mono { font-size: 12px; }
.form__intro h2 {
  font-family: var(--display);
  font-size: clamp(30px, 2.8vw, 42px);
  font-variation-settings: "wdth" 66, "wght" 820;
  line-height: 0.92;
  text-transform: uppercase;
}
.form__intro p { max-width: 30ch; color: var(--ink-soft); font-size: 16px; line-height: 1.45; }
.form__fields { display: grid; gap: 32px; min-width: 0; }
.form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; }
.field { display: grid; gap: 10px; min-width: 0; margin: 0; padding: 0; border: 0; }
.field > legend { margin-bottom: 12px; padding: 0; }
.field__label { font-size: 15px; font-weight: 500; }
.field__label small { color: var(--ink-soft); font-size: 14px; font-weight: 400; }
.field__hint { color: var(--ink-soft); font-size: 14px; }
.field__error { color: var(--signal); font-size: 14px; }

.input {
  width: 100%;
  min-height: 48px;
  padding: 6px 0 10px;
  border: 0;
  border-bottom: 1px solid rgba(243, 239, 230, 0.2);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  font: 400 20px/1.3 var(--body);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input::placeholder { color: #625d55; }
.input:hover { border-bottom-color: rgba(243, 239, 230, 0.4); }
.input:focus { border-bottom-color: var(--butter); outline: 0; box-shadow: 0 1px 0 0 var(--butter); }
.input[aria-invalid="true"] { border-bottom-color: var(--signal); box-shadow: 0 1px 0 0 var(--signal); }
textarea.input {
  min-height: 210px;
  padding: 16px 18px;
  border: 1px solid rgba(243, 239, 230, 0.14);
  border-radius: 18px;
  background: var(--card);
  font-size: 17px;
  line-height: 1.55;
  resize: vertical;
}
textarea.input:hover { border-color: rgba(243, 239, 230, 0.28); }
textarea.input:focus { border-color: var(--butter); box-shadow: 0 0 0 3px color-mix(in srgb, var(--butter) 25%, transparent); }
textarea.input[aria-invalid="true"] { border-color: var(--signal); box-shadow: none; }
select.input {
  appearance: none;
  padding-right: 32px;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%23a29d92' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 2px center / 18px no-repeat;
  cursor: pointer;
}
select.input option { background: var(--card); color: var(--ink); }
.input::-webkit-calendar-picker-indicator { filter: invert(0.8); cursor: pointer; }
.counter { justify-self: end; color: var(--ink-soft); font-size: 12px; }

/* Choices as chips: checkboxes and radios underneath, so keyboards and
   screen readers get the real thing. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-flex; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.chip span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: var(--glass);
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 500;
  transition: background-color 0.2s, color 0.2s, border-color 0.2s, transform 0.3s var(--spring);
}
.chip span::before {
  content: "";
  width: 0;
  height: 10px;
  margin-right: -8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  opacity: 0;
  transform: rotate(45deg) translate(-1px, -2px);
  transition: width 0.2s, margin 0.2s, opacity 0.2s;
}
.chip input:hover + span { border-color: rgba(243, 239, 230, 0.3); color: var(--ink); }
.chip input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.chip input:checked + span::before { width: 5px; margin-right: 0; opacity: 1; }
.chip input:active + span { transform: scale(0.96); }
.chip input:focus-visible + span { outline: 2px solid var(--butter); outline-offset: 3px; }
.chips[aria-invalid="true"] .chip span { border-color: color-mix(in srgb, var(--signal) 60%, transparent); }

.form__submit { align-items: center; }
.form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.pill--big { height: 60px; padding: 0 30px; font-size: 17px; }
.form__note { max-width: 40ch; color: var(--ink-soft); font-size: 14px; }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-done {
  display: grid;
  justify-items: start;
  gap: 18px;
  padding: clamp(20px, 4vw, 48px);
  border: 1px solid var(--rule);
  border-radius: 30px;
  background: var(--card);
}
.form-done:focus { outline: 0; }
.form-done h2 {
  font-family: var(--display);
  font-size: clamp(36px, 4vw, 60px);
  font-variation-settings: "wdth" 64, "wght" 840;
  line-height: 0.9;
  text-transform: uppercase;
}
.form-done p { max-width: 52ch; color: var(--ink-soft); font-size: 17px; }
.form-done pre {
  width: 100%;
  max-height: 320px;
  margin: 0;
  padding: 18px;
  overflow: auto;
  border-radius: 16px;
  background: var(--bg);
  color: var(--ink-soft);
  font: 400 13px/1.6 var(--mono);
  white-space: pre-wrap;
}
.form-done__actions { display: flex; flex-wrap: wrap; gap: 10px; }

@media (max-width: 860px) {
  .form__section,
  .form__submit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .form__row { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- résumé */

.resume {
  display: grid;
  grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  padding-block: clamp(36px, 6vw, 80px) 0;
}
.resume__side {
  position: sticky;
  top: 24px;
  align-self: start;
  display: grid;
  gap: 18px;
}
.resume__face {
  width: 104px;
  height: 104px;
  overflow: hidden;
  border-radius: 50%;
  background: var(--butter);
  box-shadow: 0 0 0 3px var(--ink);
}
.resume__face img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; scale: 1.25; }
.resume__name {
  font-family: var(--display);
  font-size: clamp(48px, 5vw, 72px);
  font-variation-settings: "wdth" 64, "wght" 850;
  line-height: 0.86;
  text-transform: uppercase;
}
.resume__role { font-size: 19px; }
.resume__contact { display: grid; gap: 6px; margin: 0; padding: 0; color: var(--ink-soft); list-style: none; }
.resume__contact a { color: var(--ink); text-underline-offset: 0.2em; }
.resume__main { display: grid; gap: clamp(40px, 5vw, 64px); min-width: 0; }
.resume__block h2 {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--display);
  font-size: clamp(30px, 3vw, 44px);
  font-variation-settings: "wdth" 66, "wght" 820;
  line-height: 1;
  text-transform: uppercase;
}
.resume__summary { max-width: 58ch; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.45; }
.jobs { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.job { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 6px 28px; }
.job__when { color: var(--ink-soft); }
.job__title { font-size: 19px; font-weight: 600; }
.job__org { color: var(--ink-soft); }
.job ul { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 18px; color: var(--ink-soft); }
.job__body { min-width: 0; }
.skills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.skills h3 { margin-bottom: 10px; font-size: 15px; font-weight: 600; }
.skills ul { display: grid; gap: 6px; margin: 0; padding: 0; color: var(--ink-soft); list-style: none; }
.toolrow { display: flex; flex-wrap: wrap; gap: 18px 26px; margin: 0; padding: 0; list-style: none; }
.toolrow li { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); }
.toolrow svg { width: 26px; height: 26px; fill: var(--c); }
@media (max-width: 860px) {
  .resume { grid-template-columns: minmax(0, 1fr); }
  .resume__side { position: static; }
  .job { grid-template-columns: minmax(0, 1fr); }
  .skills { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------- pause switch */

.pause {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 30;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: rgba(12, 12, 11, 0.72);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink-soft);
  font: 500 12px/1 var(--body);
  cursor: pointer;
  transition: color 0.2s, border-color 0.2s;
}
.pause:hover { border-color: var(--ink); color: var(--ink); }
.pause__icon {
  width: 8px;
  height: 10px;
  border-inline: 2.5px solid currentColor;
}
.pause[aria-pressed="true"] .pause__icon {
  width: 0;
  height: 0;
  border-width: 5px 0 5px 9px;
  border-style: solid;
  border-color: transparent transparent transparent currentColor;
}
@media (max-width: 560px) {
  .pause { width: 34px; padding: 0; justify-content: center; }
  .pause [data-pause-label] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}
/* Paused, the page's own looping animations hold still too. */
.is-paused *,
.is-paused *::before,
.is-paused *::after { animation-play-state: paused !important; }

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

.foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
  margin-top: clamp(80px, 10vw, 140px);
  padding-block: 24px 36px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 15px;
}
.contact + .foot,
main:has(.contact) + .foot { margin-top: 0; }
/* Leave room for the pause switch, which floats in the corner. */
body:has(.pause) .foot { padding-bottom: 80px; }
.foot__nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.foot__nav a { color: var(--ink); text-decoration: none; }
.foot__nav a:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.foot a { text-decoration: none; }

/* ---------------------------------------------------------------- toast */

.toast {
  position: fixed;
  bottom: calc(24px + env(safe-area-inset-bottom, 0px));
  left: 50%;
  z-index: 60;
  padding: 11px 16px;
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font: 600 13px/1 var(--body);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 16px);
  transition: opacity 0.25s, transform 0.3s var(--ease);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ------------------------------------------------------- page changes */

/* Moving between pages crossfades. A sheet lifted out of a folder glides
   into the case study's sheet: it grows to the new sheet's size, showing
   the new page's paper from its top-left corner as it does. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.35s; }
::view-transition-group(case-sheet) { animation-duration: 0.65s; animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1); }
::view-transition-image-pair(case-sheet) { overflow: clip; border-radius: 10px; }
::view-transition-old(case-sheet),
::view-transition-new(case-sheet) { height: 100%; object-fit: none; object-position: 0 0; animation-duration: 0.45s; }

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

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-delay: 0ms !important;
  }
  .codex-cursor,
  .compose__subject::after { animation: none; }
  /* Nothing moves on its own, so there is nothing to pause. */
  .pause { display: none; }
  body:has(.pause) .foot { padding-bottom: 36px; }
}

/* -------------------------------------------------------------- print */

@media print {
  :root { --bg: #fff; --card: #fff; --card-2: #f4f4f2; --ink: #111; --ink-soft: #555; --rule: #ddd; }
  body { background: #fff; color: #111; }
  .masthead, .foot, .pause, .scrim, .cta-mini, .progress, .toast, .resume__print, .skip { display: none !important; }
  .resume { padding-top: 0; }
  .resume__side { position: static; }
}