styles.css

/* layout: one centred 640px column. each section is a row with a
   narrow mono label on the left and its content on the right;
   on phones the label sits above the content.
   palette: drawn from Sunday Objects (one accent, grain, -24deg hatch,
   hard press shadows, square corners) on near-neutral graphite and paper
   with only a trace of blue-grey. dark is the default; light is
   chosen with the toggle. accent: the brand cyan (#00D4FF), deepened on
   the light theme so links stay readable. */
:root {
  --bg: #131516;
  --surface: #1b1f20;
  --line: #2c3234;
  --text: #eef0ef;
  --muted: #b3b9ba;
  --faint: #8a9294;
  --accent: #00d4ff;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .93 0 0 0 0 .95 0 0 0 0 .95 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  color-scheme: dark;

  --hatch: repeating-linear-gradient(-24deg, var(--line) 0 1px, transparent 1px 5px);
  --hatch-ink: repeating-linear-gradient(-24deg, var(--faint) 0 1px, transparent 1px 6px);

  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: var(--font-sans);
  --font-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --step--2: 11px;
  --step--1: 12px;
  --step-0: 14px;
  --step-1: 26px;

  --rail: 96px;

  /* the logo's two letters as mask images (loader and footer signature) */
  --mask-g: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 10.5 42 27'%3E%3Cpath d='M23.7948 26.022L13.0105 25.9278C13.0105 28.632 12.764 35.1897 8.15852 32.6314C5.43936 31.121 3.39626 26.5334 5.97127 24.0243C9.62426 20.4645 18.9525 21.6467 23.6298 22.0416L23.7188 11.9151C17.1902 9.68615 6.8522 10.8729 4.32785 18.3983C3.40594 21.1465 3.42531 28.527 4.40049 31.251C7.17142 38.9898 18.2142 38.7436 22.3079 32.2474C22.3943 32.1103 22.5299 31.8667 22.6885 31.5706C23.5993 29.8724 23.9833 27.9399 23.7948 26.0224V26.022Z'/%3E%3C/svg%3E");
  --mask-u: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='3 10.5 42 27'%3E%3Cpath d='M43.3972 29.4921C44.0223 27.9139 44.3016 26.2198 44.3083 24.5224L44.3184 21.9843V21.975L44.3497 11.9036H41.3888C41.5329 12.4463 41.6775 13.1395 41.7087 13.6916C41.7337 14.1713 41.7557 14.7453 41.7654 15.3882C41.8343 19.2212 41.5519 25.4097 39.758 27.671C38.2461 29.5748 37.0512 27.4077 36.5148 25.9177C35.0155 21.7556 35.0971 16.2353 35.7776 11.9129C35.7806 11.91 35.7806 11.9066 35.7806 11.9036H25.8065C24.743 17.4209 24.8529 23.6281 27.0268 28.866C27.4723 29.9417 28.0429 31.0052 28.7268 31.9744C28.7801 32.056 28.8367 32.1376 28.8993 32.2158C29.0967 32.4981 29.3101 32.7648 29.5358 33.0189C29.6301 33.1317 29.7303 33.2416 29.8338 33.3481C31.3707 34.951 33.3028 35.9075 35.4074 35.9075C36.574 35.9075 37.6907 35.6125 38.7166 35.0765C38.7322 35.0672 38.7478 35.0575 38.7635 35.0482C39.1397 34.8508 39.507 34.6153 39.8549 34.3486C41.3575 33.217 42.5908 31.5278 43.3969 29.4921H43.3972Z'/%3E%3C/svg%3E");
  --rule: 2px;
  --hair: 1px;
  --press: 4px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* light: chosen with the toggle */
:root[data-theme="light"] {
  --bg: #fbfbfa;
  --surface: #f1f2f0;
  --line: #dfe2df;
  --text: #151a1b;
  --muted: #4a5153;
  --faint: #656d70;
  --accent: #007a94;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .1 0 0 0 0 .1 0 0 0 1.1 -.5'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E");
  color-scheme: light;
}

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

html {
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

body {
  background: var(--bg) var(--grain) fixed;
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
}

img {
  max-width: 100%;
}

ul {
  list-style: none;
}

::selection {
  background: var(--accent);
  color: var(--bg);
}

strong {
  color: var(--text);
  font-weight: 500;
}

a {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

@media (hover: hover) {
  a:hover {
    color: var(--accent);
    text-decoration-color: var(--accent);
  }
}

a:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

.page {
  max-width: 720px;
  margin: 0 auto;
  padding-block: 40px 32px;
  padding-inline: 20px;
}

/* header */

/* M3 navigation: the header sticks, and condenses once you start reading */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 -20px 112px;
  padding: 20px;
  background: transparent;
  transition:
    padding 0.24s ease-out,
    background-color 0.24s ease-out,
    box-shadow 0.24s ease-out;
}

.site-header.is-condensed {
  padding-block: 10px;
  /* same grain, pinned to the window, so the header is the page, not a slab */
  background: var(--bg) var(--grain) fixed;
  box-shadow: 0 1px 0 var(--line);
}

a.logo-link {
  display: block;
  text-decoration: none;
}

.logo {
  display: block;
  width: 32px;
  height: auto;
  color: var(--text);
  transform-origin: 0 50%;
  transition: transform 0.24s ease-out;
}

.is-condensed .logo {
  transform: scale(0.75);
}

/* the marker under the current section's link: a short band of hatch */
.site-nav {
  position: relative;
}

.nav-marker {
  position: absolute;
  left: 0;
  bottom: -7px;
  width: 0;
  height: 3px;
  background: repeating-linear-gradient(-24deg, var(--accent) 0 1px, transparent 1px 3px);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.32s cubic-bezier(0.65, 0, 0.35, 1),
    width 0.32s cubic-bezier(0.65, 0, 0.35, 1),
    opacity 0.2s ease;
}

.site-nav a[aria-current="true"] {
  color: var(--text);
}

/* land below the sticky header when jumping to a section */
main > section[id] {
  scroll-margin-top: 72px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 20px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.site-nav a {
  color: var(--muted);
  text-decoration: none;
}

@media (hover: hover) {
  .site-nav a:hover {
    color: var(--accent);
  }
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 4px;
  padding: 4px 0 4px 20px;
  border: 0;
  border-left: var(--hair) solid var(--line);
  background: none;
  color: var(--muted);
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

@media (hover: hover) {
  .theme-toggle:hover {
    color: var(--accent);
  }
}

.theme-toggle:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* the label names the mode you'd switch to. it comes from CSS so it is
   right before any script runs, and a fixed width keeps the nav still. */
.theme-label {
  display: inline-block;
  width: 5ch;
}

.theme-label::before {
  content: "light";
}

:root[data-theme="light"] .theme-label::before {
  content: "dark";
}

/* half paper, half hatch: the two sides of the sheet */
.theme-swatch {
  width: 12px;
  height: 12px;
  border: var(--hair) solid currentColor;
  background: linear-gradient(90deg, currentColor 0 50%, transparent 50%), var(--hatch-ink);
  background-blend-mode: normal;
}

/* hero */

.hero {
  margin-bottom: 96px;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--faint);
  margin-bottom: 16px;
}

/* M2 kinetic hero: each word rises out of its own mask, then the line is
   pressed tighter and fades as you scroll past it (lab.js sets --hero) */
.kinetic {
  --hero: 0;
  transform: translateY(calc(var(--hero) * -40px));
  opacity: calc(1 - var(--hero) * 0.65);
  letter-spacing: calc(-0.02em - var(--hero) * 0.025em) !important;
}

.kinetic .w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

.kinetic .w > span {
  display: inline-block;
}

.motion .kinetic .w > span {
  animation: word-in 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  animation-delay: calc(0.1s + var(--i) * 45ms);
}

@keyframes word-in {
  from { transform: translateY(105%); }
}

h1 {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 24ch;
  margin-bottom: 16px;
}

.lede {
  color: var(--muted);
  max-width: 62ch;
}

/* section rows */

.row {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 24px;
  padding-block: 28px;
  border-top: 1px solid var(--line);
}

/* M4 section rows: the divider draws left to right, the label slides in,
   then the row's contents rise in a stagger (lab.js adds .is-in and the
   per-item delay --d). only when motion is allowed. */
.motion .row {
  border-top-color: transparent;
}

.motion .row::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.motion .row-label {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.5s var(--ease) 0.1s, transform 0.5s var(--ease) 0.1s;
}

.motion .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.6s var(--ease) var(--d, 0ms),
    transform 0.6s var(--ease) var(--d, 0ms),
    background-color 0.15s ease;
}

.motion .row.is-in::before {
  transform: scaleX(1);
}

.motion .row.is-in .row-label,
.motion .row.is-in .reveal {
  opacity: 1;
  transform: none;
}

/* M5 projects: each thumbnail prints in with an 8-step pass, just after
   its row rises */
.motion .project .project-thumb img {
  clip-path: inset(0 100% 0 0);
  transition:
    opacity 0.15s ease,
    clip-path 0.32s steps(8, end) calc(var(--d, 0ms) + 0.2s);
}

.motion .row.is-in .project .project-thumb img {
  clip-path: inset(0 0 0 0);
}

.row-label {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  font-weight: 400;
  line-height: 1.9;
  color: var(--faint);
}

.row-text {
  min-width: 0;
}

.row-text p {
  color: var(--muted);
}

.row-text p + p {
  margin-top: 8px;
}

/* learning: one topic per line, set like a ledger */

.ledger {
  display: grid;
  margin-top: -4px;
}

.ledger div {
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  gap: 16px;
  align-items: baseline;
  padding-block: 10px;
  border-bottom: var(--hair) solid var(--line);
}

.ledger div:first-child {
  padding-top: 4px;
}

.ledger div:last-child {
  border-bottom: 0;
  padding-bottom: 0;
}

.ledger dt {
  font-weight: 500;
  color: var(--text);
}

.ledger dd {
  color: var(--muted);
}

/* projects */

.projects {
  display: grid;
  gap: 20px;
  margin-top: -16px;
}

.project {
  display: grid;
  grid-template-columns: 157px minmax(0, 1fr);
  align-items: start;
  gap: 20px;
  padding: 16px;
  margin-inline: -16px;
  isolation: isolate;
  transition: background-color 0.15s ease;
}

.project:has(:focus-visible),
.project.is-pressed {
  background: var(--surface);
}

/* thumbnail plate: on hover it lifts off a hatched press shadow */
.project-thumb {
  position: relative;
  display: block;
  align-self: start;
  border: var(--hair) solid var(--line);
  background: var(--bg);
  transition: transform 0.15s var(--ease), border-color 0.15s ease;
}

.project-thumb::before {
  content: "";
  position: absolute;
  inset: calc(var(--hair) * -1);
  z-index: -1;
  background: var(--hatch-ink);
  transition: transform 0.15s var(--ease);
}

.project-thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top;
  opacity: 0.88;
  transition: opacity 0.15s ease;
}

.project:has(:focus-visible) .project-thumb,
.project.is-pressed .project-thumb {
  transform: translate(-2px, -2px);
  border-color: var(--faint);
}

.project:has(:focus-visible) .project-thumb::before,
.project.is-pressed .project-thumb::before {
  transform: translate(calc(var(--press) + 2px), calc(var(--press) + 2px));
}

.project:has(:focus-visible) .project-thumb img,
.project.is-pressed .project-thumb img {
  opacity: 1;
}

/* M9: hover only where a real hover exists, so a tap never sticks */
@media (hover: hover) {
  .project:hover {
    background: var(--surface);
  }

  .project:hover .project-thumb {
    transform: translate(-2px, -2px);
    border-color: var(--faint);
  }

  .project:hover .project-thumb::before {
    transform: translate(calc(var(--press) + 2px), calc(var(--press) + 2px));
  }

  .project:hover .project-thumb img {
    opacity: 1;
  }
}

.project-thumb:active {
  transform: translate(0, 0);
}

.project-body {
  min-width: 0;
}

.project-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.project h3 {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
}

/* two lines at most, so every row (and every preview) is the same height */
.project-body > p:not(.project-meta) {
  color: var(--muted);
  margin-top: 4px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* year and tags: one quiet line of facts */
.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 14px;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--faint);
}

.project-links {
  display: flex;
  flex: none;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: var(--step--1);
}

.project-links a {
  color: var(--muted);
  white-space: nowrap;
}

@media (hover: hover) {
  .project-links a:hover {
    color: var(--accent);
  }
}

/* playground: a short film on a plate. it plays muted while it's on
   screen and pauses when it leaves; sound and play are yours to switch */
.film {
  display: grid;
  gap: 16px;
}

.film-frame {
  position: relative;
  isolation: isolate;
  border: var(--hair) solid var(--line);
  background: var(--surface);
}

.film-frame::before {
  content: "";
  position: absolute;
  inset: calc(var(--hair) * -1);
  z-index: -1;
  background: var(--hatch-ink);
  transform: translate(var(--press), var(--press));
}

.film-video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--surface);
}

.film-controls {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 12px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  pointer-events: none;
}

.film-controls button {
  pointer-events: auto;
  padding: 5px 10px;
  border: var(--hair) solid rgba(255, 255, 255, 0.35);
  background: rgba(10, 12, 13, 0.62);
  color: #fff;
  font-family: var(--font-mono);
  font-size: var(--step--1);
  cursor: pointer;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.film-controls .film-sound.is-on {
  border-color: #fff;
}

.film-controls button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

@media (hover: hover) {
  .film-controls button:hover {
    border-color: #fff;
    background: rgba(10, 12, 13, 0.82);
  }
}

.film-body h3 {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 500;
}

.film-body > p:not(.project-meta) {
  margin-top: 4px;
  color: var(--muted);
}

@media (pointer: coarse) {
  .film-controls button {
    min-height: 32px;
    padding: 6px 10px;
  }
}

/* contact */

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 12px;
}

/* footer */

.site-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px 24px;
  margin-top: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--faint);
}

/* the pen: Sunday Objects' work-in-progress mark. four -24deg strokes laid
   one after another, then lifted. it marks everything that is ongoing. */

.pen {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 8px;
  vertical-align: -2px;
  color: var(--accent);
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  overflow: visible;
}

.pen path {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .pen path {
    stroke-dashoffset: 1.1;
    animation: lay 1.8s ease-in-out infinite;
  }

  .pen path:nth-child(2) { animation-delay: 0.16s; }
  .pen path:nth-child(3) { animation-delay: 0.32s; }
  .pen path:nth-child(4) { animation-delay: 0.48s; }
}

@keyframes lay {
  0% { stroke-dashoffset: 1.1; opacity: 1; }
  28% { stroke-dashoffset: 0; }
  78% { stroke-dashoffset: 0; opacity: 1; }
  92% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1.1; opacity: 0; }
}

/* page loader: once per session. the mark appears as a drifting hatch
   sketch; a broad-nib pen inks it in one continuous line, G into U.
   then the logo glides into its place in the header and becomes it, while
   the sheet fades and the page rises around it. */

.loader {
  display: none;
}

.is-loading {
  overflow: hidden;
}

.is-loading .loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  color: var(--text);
  pointer-events: none;
}

/* the sheet behind the mark fades on its own, so the mark can travel */
.is-loading .loader::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg) var(--grain);
  transition: opacity 0.5s ease 0.15s;
}

.is-loaded .loader::before {
  opacity: 0;
}

/* the header logo waits for the printed one to arrive */
.is-loading .site-header .logo {
  visibility: hidden;
}

.loader-art {
  position: relative;
  z-index: 1;
  width: 112px;
  height: 72px;
}

.loader-mark {
  position: relative; /* paint above the sheet */
  display: block;
  overflow: visible;
  transform-origin: 0 0;
}

/* the pen: one continuous broad-nib line, G straight into U, with square
   ends, so it starts flush against the G's flat top-right terminal and
   finishes flat on the U's top. each letter is revealed through its own
   mask, both driven by the same timeline, so the pen only ever inks the
   letter it is writing. when a letter is finished its line swells a touch
   so the ink fills every corner. */
.pen-line {
  fill: none;
  stroke: #fff;
  stroke-width: 13;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
}

/* timeline: 1.95s from 0.35s. the G's ink is complete at 1.35s, the U's at 2.3s;
   each letter swells and drops its sketch at that moment. */
.pen-line-g {
  animation:
    write-g 1.95s linear 0.35s forwards,
    swell 0.16s ease-out 1.35s forwards;
}

.pen-line-u {
  animation:
    write-u 1.95s linear 0.35s forwards,
    swell 0.16s ease-out 2.3s forwards;
}

/* keyframes generated from a measured ink curve: visible ink grows at a
   steady pace with soft ends, so the pen is unhurried wherever it lays new
   ink and quick where it passes through ink already down. */
@keyframes write-g {
  0% { stroke-dashoffset: 1.0000; }
  3.12% { stroke-dashoffset: 0.9876; }
  6.25% { stroke-dashoffset: 0.9817; }
  9.38% { stroke-dashoffset: 0.9775; }
  12.5% { stroke-dashoffset: 0.9487; }
  15.62% { stroke-dashoffset: 0.9248; }
  18.75% { stroke-dashoffset: 0.8975; }
  21.88% { stroke-dashoffset: 0.8628; }
  25% { stroke-dashoffset: 0.8228; }
  28.12% { stroke-dashoffset: 0.7933; }
  31.25% { stroke-dashoffset: 0.7631; }
  34.38% { stroke-dashoffset: 0.6613; }
  37.5% { stroke-dashoffset: 0.6140; }
  40.62% { stroke-dashoffset: 0.5822; }
  43.75% { stroke-dashoffset: 0.5465; }
  46.88% { stroke-dashoffset: 0.5046; }
  50% { stroke-dashoffset: 0.4026; }
  53.12% { stroke-dashoffset: 0.1352; }
  56.25% { stroke-dashoffset: 0.1140; }
  59.38% { stroke-dashoffset: 0.0937; }
  62.5% { stroke-dashoffset: 0.0731; }
  65.62% { stroke-dashoffset: 0.0518; }
  68.75% { stroke-dashoffset: 0.0293; }
  71.88% { stroke-dashoffset: 0.0078; }
  75% { stroke-dashoffset: 0.0000; }
  78.12% { stroke-dashoffset: 0.0000; }
  81.25% { stroke-dashoffset: 0.0000; }
  84.38% { stroke-dashoffset: 0.0000; }
  87.5% { stroke-dashoffset: 0.0000; }
  90.62% { stroke-dashoffset: 0.0000; }
  93.75% { stroke-dashoffset: 0.0000; }
  96.88% { stroke-dashoffset: 0.0000; }
  100% { stroke-dashoffset: 0.0000; }
}

@keyframes write-u {
  0% { stroke-dashoffset: 1.0000; }
  3.12% { stroke-dashoffset: 1.0000; }
  6.25% { stroke-dashoffset: 1.0000; }
  9.38% { stroke-dashoffset: 1.0000; }
  12.5% { stroke-dashoffset: 1.0000; }
  15.62% { stroke-dashoffset: 1.0000; }
  18.75% { stroke-dashoffset: 1.0000; }
  21.88% { stroke-dashoffset: 1.0000; }
  25% { stroke-dashoffset: 1.0000; }
  28.12% { stroke-dashoffset: 1.0000; }
  31.25% { stroke-dashoffset: 1.0000; }
  34.38% { stroke-dashoffset: 1.0000; }
  37.5% { stroke-dashoffset: 1.0000; }
  40.62% { stroke-dashoffset: 1.0000; }
  43.75% { stroke-dashoffset: 1.0000; }
  46.88% { stroke-dashoffset: 1.0000; }
  50% { stroke-dashoffset: 1.0000; }
  53.12% { stroke-dashoffset: 0.7914; }
  56.25% { stroke-dashoffset: 0.7663; }
  59.38% { stroke-dashoffset: 0.7420; }
  62.5% { stroke-dashoffset: 0.7176; }
  65.62% { stroke-dashoffset: 0.6922; }
  68.75% { stroke-dashoffset: 0.6654; }
  71.88% { stroke-dashoffset: 0.6398; }
  75% { stroke-dashoffset: 0.4348; }
  78.12% { stroke-dashoffset: 0.3980; }
  81.25% { stroke-dashoffset: 0.3548; }
  84.38% { stroke-dashoffset: 0.2860; }
  87.5% { stroke-dashoffset: 0.2263; }
  90.62% { stroke-dashoffset: 0.1782; }
  93.75% { stroke-dashoffset: 0.1226; }
  96.88% { stroke-dashoffset: 0.0602; }
  100% { stroke-dashoffset: 0.0000; }
}

@keyframes swell {
  to { stroke-width: 26; }
}

/* under-print: each letter first appears as a drifting -24deg hatch, a
   sketch the pen inks over. a letter's sketch leaves the moment that
   letter is finished. */
.loader-ghost {
  position: absolute;
  inset: 0;
  opacity: 0;
  background:
    var(--grain),
    repeating-linear-gradient(-24deg, var(--text) 0 1px, transparent 1px 6px);
}

.loader-ghost-g {
  -webkit-mask: var(--mask-g) center / contain no-repeat;
  mask: var(--mask-g) center / contain no-repeat;
  animation:
    sketch-in 0.4s ease-out 0.05s forwards,
    drift 1.1s linear infinite,
    sketch-out 0.2s ease 1.35s forwards;
}

.loader-ghost-u {
  -webkit-mask: var(--mask-u) center / contain no-repeat;
  mask: var(--mask-u) center / contain no-repeat;
  animation:
    sketch-in 0.4s ease-out 0.05s forwards,
    drift 1.1s linear infinite,
    sketch-out 0.2s ease 2.3s forwards;
}

@keyframes sketch-in { to { opacity: 0.6; } }
@keyframes sketch-out { from { opacity: 0.6; } to { opacity: 0; } }

/* one stripe per loop (6px / sin 24deg) so the drift never jumps */
@keyframes drift {
  to { background-position: 0 0, 14.752px 0; }
}

/* the header holds still so the logo lands exactly on its spot */
.is-loading .site-header,
.loader-done .site-header {
  animation: none;
}

/* the rest of the page waits under the sheet, then rises as it fades */
.is-loading:not(.is-loaded) .eyebrow,
.is-loading:not(.is-loaded) .lede,
.is-loading:not(.is-loaded) .kinetic .w > span {
  animation-play-state: paused;
}

/* project preview plate: rides a rail in the right margin and follows
   the cursor up and down. built by lab.js on wide screens with a mouse. */

.preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 280px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.18s ease;
}

.preview.is-on {
  opacity: 1;
}

.preview::before {
  content: "";
  position: absolute;
  inset: 0;
  transform: translate(8px, 8px);
  background: var(--hatch-ink);
}

.preview-plate {
  position: relative;
  border: var(--rule) solid var(--text);
  background: var(--bg);
  transform: translate(8px, 8px);
  transition: transform 0.26s var(--ease);
}

.preview.is-on .preview-plate {
  transform: translate(0, 0);
}

.preview-media {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--surface);
}

.preview-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.preview-media img.is-new {
  animation: print 0.32s steps(8, end) both;
}

@keyframes print {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.preview figcaption {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 8px 10px;
  border-top: var(--hair) solid var(--line);
  font-family: var(--font-mono);
  font-size: var(--step--2);
  color: var(--faint);
}

.preview figcaption b {
  flex: none;
  white-space: nowrap;
  font-weight: 400;
  color: var(--text);
}

.preview .preview-year {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .preview,
  .preview-plate,
  .project,
  .project-thumb,
  .project-thumb::before {
    transition: none;
  }

  .preview-media img.is-new {
    animation: none;
  }
}

/* M8 signature: the page closes as it opened. when the footer comes into
   view, the same pen signs the mark small before the line, with the loader's
   ink-curve pacing over 1.3s; then the words follow. lab.js adds .is-signed.
   without motion the mark is simply there, solid. */

.sig-line {
  display: inline-flex;
  align-items: center;
  gap: 16px;
}

.signature {
  position: relative;
  flex: none;
  width: 16px;
  height: 10px;
  color: var(--text);
}

.sig-mark {
  position: relative;
  display: block;
  overflow: visible;
}

.sig-pen {
  fill: none;
  stroke: #fff;
  stroke-width: 13;
  stroke-linecap: butt;
  stroke-linejoin: round;
  stroke-dasharray: 1 2;
  stroke-dashoffset: 0;
}

.sig-ghost {
  position: absolute;
  inset: 0;
  opacity: 0;
  background: repeating-linear-gradient(-24deg, var(--text) 0 1px, transparent 1px 3px);
}

.sig-ghost-g {
  -webkit-mask: var(--mask-g) center / contain no-repeat;
  mask: var(--mask-g) center / contain no-repeat;
}

.sig-ghost-u {
  -webkit-mask: var(--mask-u) center / contain no-repeat;
  mask: var(--mask-u) center / contain no-repeat;
}

/* with motion: everything waits for the signature */
.motion .sig-pen {
  stroke-dashoffset: 1;
}

.motion .sig-text {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s var(--ease) 1.3s, transform 0.4s var(--ease) 1.3s;
}

.motion .site-footer p.sig-text {
  display: block;
}

/* the sketch (0.2s), then the pen writes over 1.3s from 0.2s. the G's ink is
   complete at 0.87s, the U's at 1.5s; each swells and drops its sketch then */
.motion .is-signed .sig-ghost {
  animation: sketch-in 0.2s ease-out forwards;
}

.motion .is-signed .sig-ghost-g {
  animation: sketch-in 0.2s ease-out forwards, sketch-out 0.15s ease 0.87s forwards;
}

.motion .is-signed .sig-ghost-u {
  animation: sketch-in 0.2s ease-out forwards, sketch-out 0.15s ease 1.5s forwards;
}

.motion .is-signed .sig-pen-g {
  animation: write-g 1.3s linear 0.2s forwards, swell 0.12s ease-out 0.87s forwards;
}

.motion .is-signed .sig-pen-u {
  animation: write-u 1.3s linear 0.2s forwards, swell 0.12s ease-out 1.5s forwards;
}

.motion .is-signed .sig-text {
  opacity: 1;
  transform: none;
}

.site-footer p:last-child.sig-text {
  transition-delay: 1.38s;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* load-in: the header, the hero's eyebrow and lede, and the footer rise once;
   the hero's words and the section rows have their own motion */

@media (prefers-reduced-motion: no-preference) {
  .site-header,
  .eyebrow,
  .lede {
    animation: rise 0.7s var(--ease) both;
  }

  .eyebrow { animation-delay: 0.04s; }
  .lede { animation-delay: 0.45s; }
}

/* M7 reduced motion: nothing moves; everything is simply there */
@media (prefers-reduced-motion: reduce) {
  .site-header,
  .logo,
  .nav-marker {
    transition: none;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
}

/* phones */

@media (max-width: 600px) {
  .site-header {
    margin-bottom: 72px;
    gap: 16px;
  }

  .hero {
    margin-bottom: 64px;
  }

  .row {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }

  .projects {
    margin-top: 0;
  }

  .project {
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 14px;
  }

  .project-head {
    flex-direction: column;
    gap: 2px;
  }

  .ledger div {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  /* phones: the column is too narrow for two lines, so show it all */
  .project-body > p:not(.project-meta) {
    display: block;
    -webkit-line-clamp: unset;
    line-clamp: none;
  }

  .projects {
    gap: 12px;
  }
}

/* theme switch: one crossfade for the whole page (where supported) */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.3s;
}

/* M9 touch: a tap gets the hover lift (lab.js adds .is-pressed and holds it
   150ms), the browser's grey flash is off, and small links get a 44px tall
   hit area without moving the layout */
.project {
  -webkit-tap-highlight-color: transparent;
}

@media (pointer: coarse) {
  .site-nav a,
  .project-links a,
  .contact-links a,
  .theme-toggle {
    padding-block: 13px;
    margin-block: -13px;
  }

  .site-nav a,
  .project-links a,
  .contact-links a {
    display: inline-block;
  }
}

/* very narrow screens (small phones, or zoomed in): the nav keeps to the
   screen. the toggle shows only its swatch; its label stays for assistive tech */
@media (max-width: 400px) {
  .site-header {
    gap: 12px;
  }

  .site-nav {
    gap: 14px;
  }

  .theme-toggle {
    margin-left: 0;
    padding-left: 12px;
  }

  .theme-label {
    display: none;
  }
}

/* M10 keyboard: the first Tab offers a skip link, a small plate that
   slides down from above the header */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 60;
  padding: 8px 12px;
  border: var(--hair) solid var(--text);
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-decoration: none;
  transform: translateY(calc(-100% - 16px));
  transition: transform 0.2s var(--ease);
}

.skip-link:focus-visible {
  transform: none;
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--accent);
}

/* M10 link arrows: nudge on hover or focus; sent off when opened */
.arrow {
  display: inline-block;
  transition: transform 0.15s var(--ease);
}

a:focus-visible .arrow {
  transform: translate(2px, -2px);
}

@media (hover: hover) {
  a:hover .arrow {
    transform: translate(2px, -2px);
  }
}

.arrow.is-sent {
  animation: send-off 0.42s linear;
}

@keyframes send-off {
  0% { transform: translate(2px, -2px); opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.75, 0); }
  43% { transform: translate(8px, -8px); opacity: 0; }
  44% { transform: translate(-6px, 6px); opacity: 0; animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1); }
  100% { transform: translate(0, 0); opacity: 1; }
}

/* M11 page transitions between lab pages: the header stays still while the
   page under it lifts away; the arriving page's own entrance does the rest.
   lab.js and the head script add .vt-page only while a navigation runs, so
   the theme crossfade above is untouched. */
@view-transition {
  navigation: auto;
}

.vt-page .site-header {
  view-transition-name: site-header;
}

.vt-page::view-transition-old(root) {
  animation: page-out 0.2s ease-in both;
}

.vt-page::view-transition-new(root) {
  animation: page-in 0.2s ease-out 0.12s both;
}

@keyframes page-out {
  to { opacity: 0; transform: translateY(-8px); }
}

@keyframes page-in {
  from { opacity: 0; }
}

/* arriving through a page transition, the header is already in place */
.vt-arrived .site-header {
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  .skip-link,
  .arrow {
    transition: none;
  }

  .arrow.is-sent {
    animation: none;
  }

  .project,
  .project-thumb,
  .project-thumb::before {
    transition: none;
  }
}