/* ==========================================================================
   Homepage: instrument panel in daylight.
   Hairline grid, mono for anything that is data, one accent, no gradients.
   The long sentences are the warm half and get size and air; the machine
   half is small, precise and set in mono.
   ========================================================================== */

:root {
  color-scheme: light;

  --paper:   #ffffff;
  --panel:   #ffffff;
  --ink:     #0b0b0c;
  --ink-2:   #3e424a;
  --ink-3:   #83868b;
  --rule:    #e3e3e1;   /* hairlines: the grid you can see */
  --rule-2:  #c2c2bf;
  --trace:   #9aa1a4;   /* silver, the colour of tinned copper */
  --current: #c08a14;   /* gold, the colour of a plated contact */

  /* The readout and contact bands: dark in both themes, so they keep
     their own foreground rather than borrowing the page's. */
  --band:      #0b0b0c;
  --band-ink:  #ffffff;
  --band-rule: rgba(255, 255, 255, .14);
  --screen:  #000000;   /* the film panel */
  --accent:  #1b48ff;
  --signal:  #ff5a1f;   /* one warm mark, used only inside the black bands */

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: Archivo, Inter, system-ui, sans-serif;
  --text: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;

  --wrap: 1360px;
  --gutter: clamp(16px, 3vw, 40px);
  --nav-h: 64px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --paper:  #0a0b0d;
  --panel:  #101216;
  --ink:    #f2f4f7;
  --ink-2:  #b3b9c4;
  --ink-3:  #6f7681;
  --rule:   #242830;
  --rule-2: #363b45;
  --accent: #5b8cff;
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 8px);
  -webkit-text-size-adjust: 100%;
  scrollbar-color: var(--rule-2) var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

::selection { background: color-mix(in srgb, var(--accent) 22%, transparent); }

h1, h2, h3 {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
}

p { margin: 0; }
a { color: inherit; }
a, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }

svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.skip-link { position: absolute; left: -9999px; top: 8px; z-index: 200; padding: 10px 16px; background: var(--accent); color: #fff; text-decoration: none; }
.skip-link:focus { left: 16px; }

/* The page sits inside two full-height hairlines, like a drawing sheet. */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Anything that is data, not prose: labels, dates, measurements. */
.mono {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ==========================================================================
   Nav
   ========================================================================== */

.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}
.nav__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; }

.nav__brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; }
.nav__mark {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--panel);
  background: var(--ink);
}
.nav__name { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }

.nav__links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav__links a {
  position: relative;
  padding: 8px 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .15s ease;
}
.nav__links a:hover { color: var(--ink); }
.nav__links a.is-active { color: var(--ink); }
.nav__links a.is-active::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: 0;
  height: 2px;
  background: var(--accent);
}

.nav__actions { display: flex; align-items: center; gap: 6px; margin-left: 14px; }
.iconbtn {
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  padding: 0;
  font-size: 16px;
  color: var(--ink-2);
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  cursor: pointer;
  transition: color .15s ease, border-color .15s ease;
}
.iconbtn:hover { color: var(--ink); border-color: var(--rule-2); }
.icon-moon { display: none; }
:root[data-theme="dark"] .icon-sun { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
.nav__burger { display: none; }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero { border-bottom: 1px solid var(--rule); }

.hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
  padding-block: clamp(44px, 6vw, 84px);
}

.hero__title {
  margin-bottom: 26px;
  font-size: clamp(2.4rem, 5.1vw, 4.2rem);
  text-wrap: balance;
}
/* The setup line is quieter than the claim it sets up. */
.hero__dim { display: block; color: var(--ink-3); font-weight: 500; }

/* The human half: his own sentence, given room. */
.hero__lede {
  max-width: 46ch;
  margin-bottom: 32px;
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  line-height: 1.55;
  color: var(--ink-2);
}

.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease, border-color .16s ease;
}
.btn svg { font-size: 15px; }
.btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--rule-2); }
.btn--ghost:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }

/* ---------- the film, mounted like a screen in a panel ---------- */

.hero__media { margin-top: 10px; }
.hero__film { display: block; text-decoration: none; color: inherit; }

/* A tablet, drawn rather than photographed: graphite body, even bezel, a
   camera dot at the top. No maker's marks, because those are not mine to
   put on the page. */
.hero__screen {
  position: relative;
  display: block;
  padding: 16px 14px;
  background: linear-gradient(158deg, #2a2d33 0%, #16181c 42%, #0d0e11 100%);
  border: 1px solid #0a0b0d;
  border-radius: 26px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .16) inset, 0 20px 44px -26px rgba(11, 11, 12, .65);
}
/* Corner ticks: the drawing-sheet detail that says this was measured. */
/* The camera, and the thin lighter edge a machined case catches. */
.hero__screen::before {
  content: "";
  position: absolute;
  top: 6px; left: 50%;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: #3c4048;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}
.hero__screen::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 25px;
  border: 1px solid rgba(255, 255, 255, .06);
  pointer-events: none;
}

.hero__screen video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: var(--screen);
  border-radius: 4px;
}

.hero__filmcap {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.hero__filmcap strong {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
}



.hero__watch {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.hero__watch svg { font-size: 15px; transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.hero__film:hover .hero__watch svg { transform: translateX(5px); }

/* ==========================================================================
   Readout strip: the At a Glance facts as instrument channels
   ========================================================================== */

.readout {
  border-block: 1px solid var(--rule);
  background: var(--band);
  color: var(--band-ink);
}
.readout dl {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0;
}
.readout div {
  padding: 26px 24px 28px;
  border-left: 1px solid var(--band-rule);
}
.readout div:first-child { border-left: 0; padding-left: 0; }
.readout dt {
  margin-bottom: 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--signal);
}
.readout dd {
  margin: 0;
  font-family: var(--display);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.35;
  color: var(--band-ink);
}

/* ==========================================================================
   Sections
   ========================================================================== */

.section { padding-block: clamp(56px, 8vw, 104px); border-bottom: 1px solid var(--rule); }

.section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 44px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--rule);
}
.section__head h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
.section__head p { max-width: 46ch; font-size: 14px; line-height: 1.5; color: var(--ink-3); text-align: right; }

/* ---------- About: the warm half ---------- */

.about { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); }
.about > h2 { position: sticky; top: calc(var(--nav-h) + 28px); align-self: start; }
.about h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }

.about__text p {
  max-width: 54ch;
  font-size: clamp(1.05rem, 1.35vw, 1.22rem);
  line-height: 1.62;
  color: var(--ink-2);
}
.about__text p + p { margin-top: 1.1em; }
/* The first sentence carries the argument, so it is set at display size. */
.about__text p:first-child { color: var(--ink); font-size: clamp(1.2rem, 1.7vw, 1.5rem); line-height: 1.45; }

/* ---------- Selected work ---------- */

.work { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.work li { border-bottom: 1px solid var(--rule); }

.work__item {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) minmax(0, 260px) 28px;
  gap: 32px;
  align-items: baseline;
  padding: 26px 8px;
  color: inherit;
  text-decoration: none;
  transition: background-color .18s ease, padding-left .18s ease;
}
.work__item:hover { background: var(--panel); padding-left: 16px; }

.work__date {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.work__main h3 { margin-bottom: 10px; font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
.work__sum { display: block; max-width: 56ch; font-size: .98rem; color: var(--ink-2); }

.work__result {
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.7;
  text-transform: uppercase;
  color: var(--ink);
}

.work__go { align-self: center; font-size: 20px; color: var(--ink-3); transition: transform .2s cubic-bezier(.2,.8,.2,1), color .2s ease; }
.work__item:hover .work__go { color: var(--accent); transform: translateX(5px); }

/* ---------- Contact ---------- */

#contact { background: var(--band); color: var(--band-ink); border-bottom: 0; }
#contact h2 { color: var(--band-ink); }
#contact .contact > div > p { color: color-mix(in srgb, var(--band-ink) 72%, transparent); }
#contact .btn { border-color: var(--band-ink); background: var(--band-ink); color: var(--band); }
#contact .btn:hover { background: var(--signal); border-color: var(--signal); color: #fff; }
#contact .btn--ghost { background: transparent; color: var(--band-ink); border-color: color-mix(in srgb, var(--band-ink) 40%, transparent); }
#contact .btn--ghost:hover { background: var(--band-ink); border-color: var(--band-ink); color: var(--band); }

.contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: end; }
.contact h2 { font-size: clamp(2rem, 4.4vw, 3.4rem); }
.contact > div > p { max-width: 34ch; margin-top: 18px; font-size: 1.05rem; color: var(--ink-2); }
.contact__actions { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { padding-block: 26px; }
.footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.footer p { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ==========================================================================
   Feedback launcher
   ========================================================================== */

.fb { position: fixed; right: 20px; bottom: 20px; z-index: 90; display: flex; align-items: center; gap: 10px; }
.fb__launch {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  color: var(--paper);
  background: var(--ink);
  transition: background-color .16s ease;
}
.fb__launch:hover { background: var(--accent); }
.fb__launch svg { width: 20px; height: 20px; stroke: currentColor; }

.fb__bubble {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 10px 10px 16px;
  background: var(--panel);
  border: 1px solid var(--rule-2);
}
.fb__bubble[hidden] { display: none; }
.fb__prompt { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--ink-2); }
.fb__prompt span { color: var(--accent); }
.fb__close { display: grid; place-items: center; width: 26px; height: 26px; padding: 0; color: var(--ink-3); background: none; border: 0; cursor: pointer; }
.fb__close:hover { color: var(--ink); }
.fb__close svg { width: 14px; height: 14px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1000px) {
  .hero__inner { grid-template-columns: 1fr; }
  .about { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; align-items: start; }
  .readout dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout div:nth-child(3) { border-left: 0; padding-left: 0; }
  .readout div:nth-child(n+3) { border-top: 1px solid var(--band-rule); }
}

@media (max-width: 780px) {
  .nav__burger { display: grid; }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px var(--gutter) 18px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding: 14px 0; font-size: 13px; border-bottom: 1px solid var(--rule); }
  .nav__links a.is-active::after { left: 0; right: auto; width: 18px; bottom: 6px; }

  .section__head { flex-direction: column; align-items: flex-start; gap: 10px; }

  .work__item { grid-template-columns: minmax(0, 1fr) 24px; gap: 12px 16px; padding: 22px 4px; }
  .work__item:hover { padding-left: 10px; }
  .work__date, .work__main, .work__result { grid-column: 1; }
  .work__go { grid-column: 2; grid-row: 1 / span 3; }

  .hero__cta .btn, .contact__actions .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 460px) {
  .readout dl { grid-template-columns: 1fr; }
  .readout div { border-left: 0; padding-left: 0; }
  .readout div + div { border-top: 1px solid var(--band-rule); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ==========================================================================
   Scroll craft
   One idea, used everywhere: a band announces itself by drawing its rule
   from the left, then its contents rise a few pixels into place. Nothing
   moves on the way out. The `.js` guard matters: without it, a visitor
   whose script never loads would meet an invisible page.
   ========================================================================== */

/* Read position, as a hairline under the nav. */
.progress {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--accent);
  will-change: transform;
}

.js [data-reveal] {
  --delay: 0ms;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1) var(--delay),
              transform .6s cubic-bezier(.2, .7, .2, 1) var(--delay);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

/* Rules draw rather than fade: the sheet is being ruled as you arrive. */
.js [data-rule] { position: relative; }
.js [data-rule]::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.js [data-rule].is-in::after { transform: scaleX(1); }

/* The work rows arrive one after another, like lines being typed. */
.work li { --delay: calc(var(--i, 0) * 90ms); }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js [data-rule]::after { display: none; }
  .progress { display: none; }
}

/* The contact band runs to the bottom of the page, so the footer belongs to
   it rather than sitting on paper that is no longer there. */
.footer { background: var(--band); }
.footer p { color: color-mix(in srgb, var(--band-ink) 48%, transparent); }

/* ==========================================================================
   Background
   Circuitry drawn as vectors, not a stock photograph, and the product's own
   exploded frame as the texture in the dark band. Both are masked away from
   the text, so nothing competes with reading.
   ========================================================================== */

.hero { position: relative; overflow: hidden; }

/* The board itself. Masked away from the headline, so the current runs
   through the empty half of the page rather than under the words. */
.circuit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(100deg, transparent 16%, #000 58%);
  mask-image: linear-gradient(100deg, transparent 16%, #000 58%);
}

.circuit__static path {
  fill: none;
  stroke: var(--trace);
  stroke-width: 1.25;
  stroke-linecap: square;
  opacity: .55;
}
.circuit__vias circle { fill: var(--trace); opacity: .6; }

/* The current: the same traces again, drawn as short bright segments whose
   position along the path is set by how far the page has scrolled. Scroll
   is the power supply; stop scrolling and the current stops. */
.circuit__flow path {
  fill: none;
  stroke: var(--current);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 30 320;
  stroke-dashoffset: var(--flow, 0);
  filter: drop-shadow(0 0 5px color-mix(in srgb, var(--current) 75%, transparent));
  opacity: .95;
}

/* Everything in the hero sits above the background layer. */
.hero__inner { position: relative; z-index: 1; }

/* The dark band carries the product itself, barely there. */
#contact { position: relative; overflow: hidden; padding-block: clamp(72px, 10vw, 140px); }
/* The closing band is the one place a photograph runs at strength. The page
   has asked for attention all the way down in type and rules; here it pays
   out, and the image carries the human-and-machine note the headline only
   claims. Masked from the left so the words never sit on busy pixels. */
#contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("assets/handshake.webp") center / cover no-repeat;
  opacity: .5;
  -webkit-mask-image: linear-gradient(90deg, transparent 2%, #000 48%);
  mask-image: linear-gradient(90deg, transparent 2%, #000 48%);
  pointer-events: none;
}
#contact .wrap { position: relative; z-index: 1; }

:root[data-theme="dark"] {
  --trace: #4a5155;
  --current: #e0b249;
  /* Lighter than the page in dark mode, or the bands vanish into it. */
  --band: #15181d;
  --band-ink: #eef1f5;
  --band-rule: rgba(255, 255, 255, .12);
}

@media (max-width: 780px) {
  /* The photograph behind the contact band is too busy at this width. */
  #contact::before { display: none; }

  /* The board stays, but the mask turns: on a phone the words run full
     width, so the traces fade out behind them and show in the clear bands
     above and below instead of to one side. */
  .circuit {
    -webkit-mask-image: linear-gradient(180deg, #000 0 12%, transparent 30% 68%, #000 88% 100%);
    mask-image: linear-gradient(180deg, #000 0 12%, transparent 30% 68%, #000 88% 100%);
  }
  .circuit__static path { opacity: .42; }
  .circuit__vias circle { opacity: .45; }
}

/* No scroll, no current: a visitor who asked for reduced motion gets the
   board still and unlit. */
@media (prefers-reduced-motion: reduce) {
  .circuit__flow { display: none; }
}

/* ==========================================================================
   Phone
   The desktop proportions are too loose in a 390px column: the readout band
   ran to two thirds of a screen, the buttons shared a row at 169px each, and
   the gutters were tighter than the type wanted. Sizes here are set against
   measured values, not guessed.
   ========================================================================== */

@media (max-width: 560px) {
  :root { --gutter: 20px; }

  .hero__inner { padding-block: 34px 38px; gap: 26px; }
  .hero__title { font-size: 2.25rem; margin-bottom: 20px; }
  .hero__lede { font-size: 1.04rem; margin-bottom: 26px; }

  /* Full-width buttons: easier to hit, and they stop the labels crowding. */
  .hero__cta { flex-direction: column; gap: 8px; }
  .hero__cta .btn { width: 100%; justify-content: center; }

  .hero__filmcap { margin-top: 10px; padding-top: 10px; }

  /* Two channels across rather than four stacked: the band was 465px tall. */
  .readout dl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .readout div { padding: 16px 14px 18px; }
  .readout div:nth-child(3) { border-left: 0; padding-left: 0; }
  .readout div:nth-child(n+3) { border-top: 1px solid var(--band-rule); }
  .readout dt { margin-bottom: 6px; font-size: 9.5px; }
  .readout dd { font-size: 14px; }

  .section { padding-block: 48px; }
  .section__head { margin-bottom: 26px; padding-bottom: 14px; }
  .section__head p { text-align: left; }

  /* A heading that sticks to the top of a phone screen just eats space. */
  .about { gap: 16px; }
  .about > h2 { position: static; }
  .about__text p:first-child { font-size: 1.12rem; line-height: 1.5; }

  .work__item { padding: 20px 2px; gap: 8px 14px; }
  .work__date { font-size: 12px; }
  .work__result { font-size: 12px; letter-spacing: .06em; }
  .work__sum { font-size: .95rem; }

  #contact { padding-block: 56px; }
  .contact { gap: 26px; }
  .contact > div > p { font-size: 1rem; }
  .contact__actions { flex-direction: column; }
  .contact__actions .btn { width: 100%; justify-content: center; }

  .footer { padding-block: 20px; }
  .footer__inner { gap: 6px; }
  .footer p { font-size: 10px; letter-spacing: .1em; }

  /* 34px was under the 44px a finger needs. */
  .iconbtn { width: 44px; height: 44px; }
  .nav__actions { gap: 4px; }

  .fb { right: 14px; bottom: 14px; }
  .fb__launch { width: 46px; height: 46px; }
}

@media (max-width: 380px) {
  /* Below this the two readout channels start breaking words. */
  .readout dl { grid-template-columns: 1fr; }
  .readout div:nth-child(n+2) { border-left: 0; padding-left: 0; border-top: 1px solid var(--band-rule); }
}

/* The film the hero no longer leads with, kept one line away. */
.hero__aside {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .16s ease;
}

.hero__aside:hover { color: var(--ink); }
.hero__aside:hover .hero__watch svg { transform: translateX(4px); }

@media (max-width: 560px) {
  /* A thinner bezel, or the device eats the screen at this width. */
  .hero__screen { padding: 11px 9px; border-radius: 20px; }
  .hero__screen::after { border-radius: 19px; }
}

/* ==========================================================================
   Case studies
   The same instrument panel, in one column: mono for the date and the tags,
   Archivo for the headings, hairlines instead of cards, and figures that sit
   in their own framed panels.
   ========================================================================== */

.case { padding: 32px 0 clamp(56px, 8vw, 96px); }
.case .wrap { max-width: 820px; }

.backlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 34px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-decoration: none;
  transition: color .16s ease;
}
.backlink:hover { color: var(--ink); }
.backlink svg { font-size: 15px; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.backlink:hover svg { transform: translateX(-4px); }

.case__head {
  padding-bottom: 32px;
  margin-bottom: 44px;
  border-bottom: 1px solid var(--rule);
}
.case__tags { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }

/* The date is data, so it is set like the dates in Selected Work. */
.proj__year {
  display: inline-block;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.case__head h1 {
  margin-bottom: 20px;
  font-size: clamp(2.2rem, 5.4vw, 3.4rem);
  text-wrap: balance;
}
.case__lede {
  max-width: 54ch;
  margin-bottom: 26px;
  font-size: clamp(1.08rem, 1.6vw, 1.26rem);
  line-height: 1.55;
  color: var(--ink-2);
}

/* Tags: square, hairlined, mono. No pills. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chips li {
  padding: 6px 12px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-2);
  border: 1px solid var(--rule);
}
.chips--lg li { padding: 7px 13px; font-size: 11px; }

.case__section { margin-bottom: 52px; }
.case__section h2 {
  margin-bottom: 18px;
  font-size: clamp(1.4rem, 3vw, 1.9rem);
}
.case__section p {
  max-width: 68ch;
  margin-bottom: 18px;
  font-size: 1.05rem;
  line-height: 1.62;
  color: var(--ink-2);
}
.case__section p:last-child { margin-bottom: 0; }
.case__section .link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); text-decoration: none; }
.case__section .link svg { font-size: 15px; transition: transform .2s cubic-bezier(.2, .8, .2, 1); }
.case__section .link:hover svg { transform: translateX(4px); }

/* Screenshots sit in the same panel the hero film does. */
.shot { margin: 32px 0 36px; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 6px;
}
.shot--narrow img { max-width: 330px; margin-inline: auto; }
/* Sentence case: a caption is a sentence, and uppercase mono at this
   length is a wall. */
.shot figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: .01em;
  line-height: 1.6;
  color: var(--ink-3);
  text-align: center;
}

/* The pull quote: size and rules, no coloured bar. */
.pull {
  margin: 40px 0;
  padding: 26px 0;
  border-block: 1px solid var(--rule);
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.8vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.35;
  color: var(--ink);
  text-wrap: balance;
}

.case__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 34px;
  border-top: 1px solid var(--rule);
}
/* The case pages still say btn--primary; it is the same button. */
.btn--primary { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

@media (max-width: 560px) {
  .case { padding-top: 24px; }
  .case__head { padding-bottom: 24px; margin-bottom: 32px; }
  .case__section { margin-bottom: 40px; }
  .case__foot .btn { width: 100%; justify-content: center; }
}

/* A laptop, drawn rather than photographed: aluminium base, dark lid, a
   notch in the front edge where a thumb opens it. No maker's marks. */
.laptop { margin-inline: auto; max-width: 900px; }

.laptop__lid {
  padding: 12px 12px 14px;
  background: linear-gradient(158deg, #2a2d33 0%, #16181c 44%, #0e1013 100%);
  border: 1px solid #0a0b0d;
  border-radius: 14px 14px 5px 5px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset;
}
.laptop__lid video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 0;
  border-radius: 3px;
}

.laptop__base {
  position: relative;
  width: 114%;
  height: 13px;
  margin-left: -7%;
  background: linear-gradient(180deg, #d9dde2 0%, #b6bbc2 55%, #8f959d 100%);
  border-radius: 0 0 12px 12px;
  box-shadow: 0 10px 20px -14px rgba(16, 24, 40, .7);
}
.laptop__base::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: 13%;
  height: 5px;
  transform: translateX(-50%);
  background: #9aa0a8;
  border-radius: 0 0 7px 7px;
}

@media (max-width: 560px) {
  .laptop__lid { padding: 8px 8px 10px; border-radius: 10px 10px 4px 4px; }
  .laptop__base { height: 10px; }
}

/* A fact about the project, not an invitation: where it runs. */
.case__meta {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.case__meta a { color: var(--accent); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--accent) 35%, transparent); }
.case__meta a:hover { border-bottom-color: var(--accent); }

/* An application window shown at full measure reads as a poster rather than
   as evidence; three quarters is enough to see it and still read the page. */
.shot--app img { max-width: 660px; margin-inline: auto; }

/* A result stated in the header, with the figure carrying the weight. */
.case__meta strong { color: var(--ink); font-weight: 600; }

/* Screenshots of flat UI: show at their own pixel size rather than
   upscaling a 1x capture into blur, and shrink only when the column does. */
.shot--ui img { width: auto; max-width: 100%; margin-inline: auto; }