/* Area Normal comes from the Adobe Fonts web project (use.typekit.net/izv4rsh.css, linked in each page's <head>)
   with weights 600, 800 and 900. Figtree only shows if that kit fails to load. */

:root {
  --page: #fbf9f5;
  --ink: #111111;
  --line: #5e5e5a;
  --panel: #ededea;
  --accent: #ff5a1f;
  --max: 1280px;
  --gutter: clamp(20px, 5.5vw, 80px);
  --radius: 20px;
  --font: 'area-normal', 'Figtree', system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
/* Keeps room for the scrollbar on every page, so short pages and tall ones sit at the same width */
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body {
  margin: 0;
  background: var(--bg, var(--page));
  color: var(--ink);
  font-family: var(--font);
  font-weight: 600;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, p, dl, dd, figure { margin: 0; }

.site { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; }
.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Header + footer (markup lives in app.js so every page shares it) */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--bg, var(--page));
  transition: box-shadow .2s ease;
}
.site-header.is-scrolled { box-shadow: 0 1px 0 rgba(17, 17, 17, .14); }
/* During the click takeover the header fades to the project color as the flood reaches it */
.is-flooding .site-header { background: var(--accent); box-shadow: none; transition: background-color .45s ease .15s; }
.header { display: flex; justify-content: space-between; align-items: center; height: 72px; position: relative; z-index: 3; }
.logo { font-size: 20px; text-decoration: none; font-weight: 600; letter-spacing: -0.01em; }
.logo b { font-weight: 900; }
.nav { display: flex; gap: 24px; font-size: 16px; }
.nav a, .footer-links a { text-decoration: none; }
.nav a:hover, .footer-links a:hover { text-decoration: underline; }
.nav a[aria-current="page"] { text-decoration: underline; text-underline-offset: 3px; }
.menu-btn { display: none; }
main.wrap { padding-bottom: 80px; }
.footer { display: flex; justify-content: space-between; align-items: baseline; gap: 24px; flex-wrap: wrap; padding: 80px 0 80px; margin-top: auto; }
.footer-name { font-weight: 900; font-size: 18px; }
.footer-links { display: flex; gap: 24px; font-size: 16px; }

/* Home hero */
.hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding: 80px 0 80px; }
.hero h1 { font-weight: 900; font-size: clamp(44px, 5.6vw, 80px); line-height: 1.075; letter-spacing: -0.01em; max-width: 846px; }
.hero p { font-size: 18px; line-height: 1.5; max-width: 415px; }

/* Card grid: borders collapse so neighbors share one 1px line */
.grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.card {
  position: relative;
  display: flex; flex-direction: column; gap: 24px;
  padding: 24px; min-height: 462px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  text-decoration: none;
  transition: background-color .18s ease;
}
.card-top { display: flex; justify-content: space-between; align-items: center; min-height: 30px; font-size: 12px; line-height: 1.5; }
.pill { font-weight: 800; padding: 6px 10px; border-radius: 100px; transition: background-color .18s ease; }
.card-space { flex: 1; min-height: 180px; }
/* Color split hover: lies over the card and redraws its type, so it can distort it */
.card-split { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; opacity: 0; transition: opacity .18s ease; }
.card-split.on { opacity: 1; }
.card-name { font-weight: 900; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.card-blurb { font-size: 16px; line-height: 1.5; }

.media { position: relative; border-radius: var(--radius); overflow: hidden; background: #111; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media .dots { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.media-empty { background: var(--panel); }

@media (hover: hover) {
  .card:hover, .card:focus-visible { background: var(--accent); outline: none; }
  .card:hover .pill, .card:focus-visible .pill { background: var(--page); }
}

/* Click takeover: the flood canvas sits under the content, cards drop their own fill */
.flood { position: fixed; inset: 0; z-index: 0; pointer-events: none; width: 100vw; height: 100vh; }
.is-flooding .card, .is-flooding .card:hover { background: transparent; }
.is-flooding .card-split { display: none; }
.is-flooding body { cursor: progress; }

/* Arriving on a project page from a takeover: start in the accent, then settle */
/* --bg drives both the page and the sticky header, so they change color together */
.arrived { --bg: var(--arrive); }
.arrived.settle { --bg: var(--page); }
.arrived.settle body, .arrived.settle .site-header { transition: background-color .55s cubic-bezier(.4, 0, .2, 1), box-shadow .2s ease; }
.arrived.stay { --bg: var(--arrive); }

/* Index page */
.index-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; padding: 80px 0 80px; }
.index-title h1 { font-weight: 900; font-size: clamp(56px, 5.6vw, 80px); line-height: 1; letter-spacing: -0.01em; }
.filters { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { font: inherit; font-weight: 800; font-size: 12px; line-height: 1.5; color: var(--ink); background: none; border: 1px solid var(--ink); border-radius: 100px; padding: 4px 10px; cursor: pointer; }
.chip[aria-pressed="true"] { background: var(--ink); color: var(--page); }
.list-head, .row { display: grid; grid-template-columns: minmax(0, 1fr) 160px 130px; gap: 20px; }
.list-head { font-size: 12px; line-height: 1.5; padding: 0 0 20px; border-bottom: 1px solid var(--line); }
.row { padding: 26px 0; text-decoration: none; align-items: center; position: relative; transition: transform .28s cubic-bezier(.2, .7, .2, 1); }
/* Hover: the color block extends past the column by --row-pad, the row scales to 105% and its divider disappears */
.row { --row-pad: 12px; }
.row::before { content: ''; position: absolute; inset: 0 calc(-1 * var(--row-pad)); background: var(--accent); opacity: 0; transition: opacity .15s; z-index: -1; }
.row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; border-bottom: 1px solid var(--line); transition: opacity .15s; }
.row:hover, .row:focus-visible { transform: scale(1.05); z-index: 1; }
.row:hover::before, .row:focus-visible::before { opacity: 1; }
.row:hover::after, .row:focus-visible::after { opacity: 0; }
.row:focus-visible { outline: none; }
.row-main { display: flex; flex-direction: column; gap: 6px; }
.row-name { font-weight: 900; font-size: 24px; line-height: 1.2; }
.row-blurb { font-size: 14px; line-height: 1.5; max-width: 413px; }
.row-date { font-size: 14px; }
.row-type { font-size: 14px; font-weight: 800; text-align: right; }
.list-head span:last-child { text-align: right; }

/* Contact window */
.contact {
  width: min(560px, 100% - 2 * var(--gutter)); max-height: calc(100% - 48px);
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--page); color: var(--ink); font-family: var(--font);
  box-shadow: 0 30px 80px rgba(17, 17, 17, .25);
}
.contact::backdrop { background: rgba(17, 17, 17, .45); }
.contact[open] { animation: contact-in .22s cubic-bezier(.2, .7, .2, 1); }
.contact[open]::backdrop { animation: contact-fade .22s ease; }
@keyframes contact-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes contact-fade { from { opacity: 0; } }
.contact-open body { overflow: hidden; }
.contact-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: var(--ink); cursor: pointer; border-radius: 100px; }
.contact-close:hover { background: var(--panel); }
.contact-close svg { width: 22px; height: 22px; }
.contact-body { padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.contact h2 { font-weight: 900; font-size: 40px; line-height: 1.1; letter-spacing: -0.01em; }
.contact-intro { font-size: 16px; line-height: 1.5; margin-top: -12px; max-width: 413px; }
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 800; }
.contact-form input, .contact-form textarea {
  font: inherit; font-weight: 600; font-size: 16px; line-height: 1.5; color: var(--ink);
  background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; resize: vertical;
}
.contact-form textarea { resize: none; min-height: 120px; display: block; width: 100%; }
.contact-grow { position: relative; display: block; }
.contact-grip {
  position: absolute; right: 6px; bottom: 6px; width: 20px; height: 20px;
  display: grid; place-items: center; color: var(--line); cursor: ns-resize; touch-action: none;
}
.contact-grip svg { width: 12px; height: 12px; opacity: .75; }
.contact-grip:hover { color: var(--ink); }
.contact-form input:focus, .contact-form textarea:focus { outline: 2px solid var(--ink); outline-offset: -1px; border-color: var(--ink); }
.contact-error { font-size: 14px; color: #c4320a; }
.contact-send {
  align-self: flex-start; font: inherit; font-weight: 800; font-size: 16px;
  color: var(--page); background: var(--ink); border: 0; border-radius: 100px; padding: 12px 28px; cursor: pointer;
}
.contact-send:hover { background: #333; }
.contact-send:disabled { opacity: .6; cursor: progress; }
.contact-done { font-size: 16px; line-height: 1.5; }
.contact-done-title { font-weight: 900; font-size: 24px; }
.contact-alt { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 20px; border-top: 1px solid var(--line); font-size: 14px; }
.contact-alt-links { display: flex; align-items: center; gap: 12px; }
.contact-alt a { font-weight: 800; }
.contact-copy { font: inherit; font-weight: 800; font-size: 12px; color: var(--ink); background: none; border: 1px solid var(--ink); border-radius: 100px; padding: 4px 10px; cursor: pointer; }

/* About page */
.about-copy { max-width: 413px; font-size: 18px; line-height: 1.5; }
.about-copy p + p { margin-top: 27px; }

/* Project page */
.p-title { display: grid; grid-template-columns: minmax(0, 1fr) 413px; gap: 20px; align-items: end; padding: 80px 0 80px; }
.p-title h1 { font-weight: 900; font-size: clamp(44px, 5.6vw, 80px); line-height: 1.075; letter-spacing: -0.01em; overflow-wrap: anywhere; text-wrap: balance; }
.p-title-copy p { font-size: 18px; line-height: 1.5; margin-top: 24px; max-width: 620px; }
.specs { border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; }
.specs div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.specs dt { font-weight: 800; }
.specs dd { text-align: right; }
.p-hero .media-hero { aspect-ratio: 1280 / 793; }
.media-video video {
  display: block; width: 100%; height: 100%; object-fit: contain;
  /* Video and page colors render a hair apart in some browsers; feather the sides so there's no visible seam */
  -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);
}
/* A hero video that fills the frame edge to edge, for screen recordings: no feathered sides */
.media-video-fill video { object-fit: cover; -webkit-mask-image: none; mask-image: none; }
.p-hero figcaption { font-size: 12px; line-height: 1.5; margin-top: 24px; }
.mod { margin-top: 80px; }
.mod-text { display: flex; flex-direction: column; gap: 12px; max-width: 413px; }
/* pre-wrap keeps the two spaces around the hyphen in eyebrows like "01  -  The idea" */
.mod-date { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }
.mod-text h2 { font-weight: 900; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; }
.mod-text p { font-size: 18px; line-height: 1.5; }
/* Eyebrow, title and paragraphs look evenly spaced: about 35px from one line's baseline to the next line's capitals.
   Base gap is 12px. Eyebrow to title 22, title to text 23.5 (the title's line height is tighter), paragraph to paragraph 22. */
.mod-text .mod-date + h2 { margin-top: 10px; }
.mod-text h2 + p:not(.mod-title2) { margin-top: 11.5px; }
.mod-text p + p { margin-top: 10px; }
/* Dark panels keep their own 32px gap */
.panel-dark .mod-text .mod-date + h2, .panel-dark .mod-text p + p, .panel-dark .mod-text h2 + p { margin-top: 0; }
.split { display: grid; grid-template-columns: 413px minmax(0, 738px); justify-content: space-between; align-items: center; gap: 40px; }
.split .media.wide { aspect-ratio: 738 / 457; }
.split.img-left { grid-template-columns: minmax(0, 738px) 413px; }
.split.img-left .mod-text { order: 2; }
.pair-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.pair-imgs .media { aspect-ratio: 359 / 457; }
.panel { background: var(--panel); border-radius: var(--radius); padding: 80px clamp(20px, 8vw, 108px); }
.centered .mod-text { margin-inline: auto; text-align: center; align-items: center; }
.gallery { display: flex; justify-content: center; gap: 48px; }
/* Tiles keep their Figma proportions (t = phone screen) and scale down together on smaller screens */
.tile { background: #fff; border-radius: var(--radius); }
.tile-t { flex: 0 1 237px; aspect-ratio: 237 / 516; }
.tile-w { flex: 0 1 793px; aspect-ratio: 793 / 516; }
.tile-s { flex: 0 1 793px; aspect-ratio: 793 / 516; }
.gallery-wide { gap: 75px; }
.next {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  margin: 80px 0 0; padding: 24px 32px;
  background: var(--accent); border-radius: var(--radius); text-decoration: none;
  transition: transform .2s ease;
}
.next:hover { transform: translateY(-2px); }
.next-copy { display: flex; flex-direction: column; gap: 12px; }
.next-name { font-weight: 900; font-size: 24px; line-height: 1.2; }
.next-blurb { font-size: 14px; line-height: 1.5; max-width: 413px; }
.next-cta { font-weight: 800; font-size: 16px; white-space: nowrap; }
.next-cta span { display: inline-block; margin-left: 20px; transition: transform .2s; }
.next:hover .next-cta span { transform: translate(2px, -2px); }

/* Module extras */
.media-bare { background: none; border-radius: 0; }
.media-bare img { object-fit: contain; }
.panel-dark { background: #000; color: var(--panel); }
.panel-dark .mod-text { gap: 32px; }
.panel-dark .mod-text h2, .panel-dark .mod-text .mod-title2 { font-weight: 800; font-size: 28px; line-height: 1.3; letter-spacing: 0; text-wrap: balance; }
.mod .media.full { aspect-ratio: 1280 / 717; }
/* Swipe: the top photo is clipped to the left of --pos, the handle sits on the line */
.media.swipe { aspect-ratio: 16 / 9; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.media.swipe img { position: absolute; inset: 0; pointer-events: none; -webkit-user-drag: none; }
.swipe .swipe-top { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.swipe-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; outline: none; }
.swipe-handle span { position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); transition: transform .15s ease; }
.swipe-handle span::before, .swipe-handle span::after { content: ''; position: absolute; top: 50%; width: 0; height: 0; margin-top: -6px; border: 6px solid transparent; }
.swipe-handle span::before { left: 7px; border-right-color: #111; }
.swipe-handle span::after { right: 7px; border-left-color: #111; }
.swipe.dragging .swipe-handle span { transform: scale(1.08); }
.swipe-handle:focus-visible span { box-shadow: 0 0 0 3px var(--accent), 0 2px 10px rgba(0,0,0,.25); }
.gallery-images { gap: 48px; }
.gallery-under { margin-top: 32px; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.media.media-embed { background: var(--panel); }
.media-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.tile-img { flex: 0 1 323px; min-width: 0; background: none; }
/* Screenshots: a hairline edge so light UI doesn't melt into the page */
.media-frame::after { content: ''; position: absolute; inset: 0; border: 1px solid rgba(17, 17, 17, .12); border-radius: inherit; pointer-events: none; }
.tile-img img { width: 100%; height: auto; border-radius: 10px; }
.process-card {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; width: 100%;
  margin-top: 8px; padding: 24px 32px; border: 0; border-radius: var(--radius);
  background: var(--accent); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: transform .2s ease;
}
.process-card:hover { transform: translateY(-2px); }
/* Stacked pages: a white document card with accent pages behind it, which fan out on hover */
.process-stack:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.process-stack { position: relative; display: block; padding: 0; margin: 18px 12px 12px 0; width: calc(100% - 12px); background: none; }
.process-stack::before, .process-stack::after { content: ''; position: absolute; inset: 0; border-radius: var(--radius); background: var(--accent); transition: transform .25s ease; }
.process-stack::before { transform: translate(12px, 12px); opacity: .45; }
.process-stack::after { transform: translate(6px, 6px); opacity: .75; }
.process-stack:hover { transform: none; }
.process-stack:hover::before { transform: translate(16px, 16px); }
.process-stack:hover::after { transform: translate(8px, 8px); }
.process-sheet { position: relative; z-index: 1; display: flex; width: auto; box-sizing: border-box; flex-direction: column; gap: 6px; padding: 24px; border-radius: var(--radius); background: #fff; box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .12); }
.process-stack .process-title { font-size: 22px; }
.process-stack .process-cta { margin-top: 8px; font-size: 15px; white-space: pre-wrap; }
.feature-media .process-card { margin-top: 0; }
.mod-text .mod-title2 { font-weight: 900; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; }

/* Hero stage: the screen clip sits on a dark panel, the device photo overlaps its lower left (positions from Figma's 1280 × 793 frame) */
.hero-stage { background: linear-gradient(#1f1f1f, #000); }
.stage-screen { position: absolute; left: 7.8125%; top: 11.85%; width: 84.375%; aspect-ratio: 1080 / 605; border-radius: 10px; overflow: hidden; background: #000; }
.stage-screen img, .stage-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.media .stage-device { position: absolute; left: 4.22%; top: 49.18%; width: 27.81%; height: auto; object-fit: contain; }
.mod .media.full video, .mod .media.tall video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Clip buttons: play/pause and sound, bottom right over the video */
.clip-controls { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; }
.clip-btn {
  display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(17, 17, 17, .55); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .15s ease;
}
.clip-btn:hover { background: rgba(17, 17, 17, .8); }
.clip-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.clip-btn svg { width: 20px; height: 20px; }
.clip-btn .i-play, .clip-btn .i-muted { display: none; }
.is-paused .clip-btn .i-play, .is-muted .clip-btn .i-muted { display: block; }
.is-paused .clip-btn .i-pause, .is-muted .clip-btn .i-sound { display: none; }

/* Feature: photo card and process card on the left, text on the right, inset from the page edges */
/* Versions: a grid of builds, each with a screenshot and notes */
.versions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 20px; margin-top: 32px; }
.version { display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.5; }
.version .media.shot { aspect-ratio: 630 / 410; margin-bottom: 4px; }
.version-tag { font-size: 14px; white-space: pre-wrap; }
.version strong { font-weight: 800; }

.feature { display: grid; grid-template-columns: minmax(0, 522fr) minmax(0, 413fr); justify-content: space-between; align-items: center; gap: 128px; padding-inline: 108px; }
.feature-media { display: flex; flex-direction: column; gap: 32px; }
.media.photo-card { aspect-ratio: 522 / 524; background: #fff; border-radius: clamp(20px, 3.6vw, 46px); }
.process-kicker { font-size: 12px; font-weight: 800; line-height: 1.5; }
.process-title { font-size: 24px; font-weight: 900; line-height: 1.2; }
.process-cta { font-size: 16px; font-weight: 800; margin-top: 8px; }

/* Numbers: big facts in a row, split by hairlines */
.numbers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin-top: 32px; border-block: 1px solid var(--line); }
.numbers div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 12px; padding: 32px 24px; border-left: 1px solid var(--line); }
.numbers div:first-child { padding-left: 0; border-left: 0; }
.numbers dd { font-weight: 900; font-size: clamp(56px, 5.6vw, 80px); line-height: 1; letter-spacing: -0.01em; }
.numbers dt { font-size: 18px; line-height: 1.5; }

/* Note: a plain English definition in an accent card */
.note-card { display: flex; flex-direction: column; gap: 12px; padding: 32px; border-radius: var(--radius); background: var(--accent); }
.note-card strong { font-weight: 900; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; }
.note-card p { font-size: 18px; line-height: 1.5; }
.note-kicker { font-size: 12px; font-weight: 800; line-height: 1.5; }

/* Two equal columns under a heading (prompt, roles) */
.mod-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 32px; }

/* Prompt: what was typed on black, what came back beside it */
.prompt-side { display: flex; flex-direction: column; gap: 16px; min-height: 240px; padding: 32px; border-radius: var(--radius); }
.prompt-side p { font-size: 18px; line-height: 1.5; }
.prompt-typed { background: #000; color: var(--panel); }
.prompt-typed p { font-weight: 800; font-size: 24px; line-height: 1.3; }
.prompt-result { background: var(--panel); }
.media.prompt-shot { min-height: 320px; }
.media.prompt-shot img { position: absolute; inset: 0; }
/* The page sits on a 12-column grid (88px columns, 20px gutters): text is 4 columns (413), images 7 (738). The stacked prompt cards are 6 columns (630), right-aligned. */
.prompt-pair { display: flex; flex-direction: column; gap: 20px; min-width: 0; width: 85.37%; justify-self: end; }
@media (max-width: 720px) { .prompt-pair { width: 100%; } }
.prompt-stack .prompt-side { min-height: 0; }

/* Roles: Ryan's column on grey, the AI's in the accent */
.role { padding: 32px; border-radius: var(--radius); background: var(--panel); }
.role-ai { background: var(--accent); }
.role h3 { margin: 0 0 16px; font-weight: 900; font-size: 24px; line-height: 1.2; }
.role ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.role li { padding: 12px 0; border-bottom: 1px solid var(--ink); font-size: 16px; line-height: 1.5; }

/* Timeline: a line with a dot for each date */
.timeline { list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 20px; margin: 48px 0 0; padding: 0; border-top: 1px solid var(--line); }
.timeline li { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 28px; }
.timeline li::before { content: ''; position: absolute; left: 0; top: -9px; width: 16px; height: 16px; border-radius: 50%; background: var(--accent); border: 1px solid var(--ink); }
.timeline-date { font-size: 14px; line-height: 1.5; }
.timeline h3 { margin: 0; font-weight: 900; font-size: 24px; line-height: 1.2; }
.timeline p { font-size: 16px; line-height: 1.5; }

/* Fixes: numbered attempts, the winner in the accent */
.split.fixes { align-items: start; }
.fix-list { list-style: none; margin: 0; padding: 0; counter-reset: fix; border-top: 1px solid var(--line); }
.fix-list li { counter-increment: fix; display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.fix-list li::before { content: counter(fix, decimal-leading-zero); grid-row: span 2; font-size: 14px; font-weight: 800; line-height: 1.8; }
.fix-list h3 { margin: 0; font-size: 18px; font-weight: 800; line-height: 1.4; }
.fix-list p { grid-column: 2; font-size: 16px; line-height: 1.5; }
.fix-list .fix-worked { margin-top: 20px; padding: 20px 24px; border: 0; border-radius: var(--radius); background: var(--accent); }

/* Before and after slider: the after image is revealed to the right of the line.
   The line follows the same path as the range thumb (inset by half a thumb at each end), so the knob and the touch point stay together. */
.media-compare { --p: 0.5; --thumb: 56px; --x: calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--p)); }
.media-compare img { position: absolute; inset: 0; }
.compare-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--x)); }
.compare-line { position: absolute; top: 0; bottom: 0; left: var(--x); width: 2px; margin-left: -1px; background: var(--ink); pointer-events: none; }
.compare-knob { --knob: 40px; position: absolute; top: 50%; left: 50%; width: var(--knob); height: var(--knob); margin: calc(var(--knob) / -2) 0 0 calc(var(--knob) / -2); border-radius: 50%; background: var(--ink); }
.compare-knob::before, .compare-knob::after { content: ''; position: absolute; top: 50%; margin-top: -5px; border: 5px solid transparent; }
.compare-knob::before { left: calc(var(--knob) / 2 - 13px); border-right: 7px solid var(--page); }
.compare-knob::after { right: calc(var(--knob) / 2 - 13px); border-left: 7px solid var(--page); }
.compare-tag { position: absolute; top: 16px; padding: 4px 10px; border-radius: 100px; background: var(--page); font-size: 12px; font-weight: 800; line-height: 1.5; pointer-events: none; }
.compare-tag-before { left: 16px; }
.compare-tag-after { right: 16px; }
/* The range input covers the whole image, invisible; its thumb is the 56px touch point */
.media-compare input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; -webkit-appearance: none; appearance: none; background: none; }
.media-compare input::-webkit-slider-thumb { -webkit-appearance: none; width: var(--thumb); height: var(--thumb); }
.media-compare input::-moz-range-thumb { width: var(--thumb); height: var(--thumb); border: 0; }
.media-compare:has(input:focus-visible) .compare-knob { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Slider: a button in the corner opens it larger in the image viewer */
.compare-expand {
  position: absolute; right: 12px; bottom: 12px; z-index: 1; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(17, 17, 17, .55); color: #fff; cursor: zoom-in; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color .15s ease;
}
.compare-expand:hover { background: rgba(17, 17, 17, .8); }
.compare-expand:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.compare-expand svg { width: 18px; height: 18px; }

/* Images that open in the viewer */
.can-zoom { cursor: zoom-in; }
.can-zoom:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* Image viewer: the same window, bar and close button as the process write-up, sized to the screen */
.viewer {
  width: calc(100% - 48px); height: calc(100% - 48px); max-width: 1600px; max-height: none;
  padding: 0; border: 0; border-radius: var(--radius); overflow: hidden;
  background: var(--page); color: var(--ink); font-family: var(--font);
  box-shadow: 0 30px 80px rgba(17, 17, 17, .25);
}
.viewer[open] { display: flex; flex-direction: column; animation: contact-in .22s cubic-bezier(.2, .7, .2, 1); }
.viewer::backdrop { background: rgba(17, 17, 17, .45); }
.viewer[open]::backdrop { animation: contact-fade .22s ease; }
.viewer .process-bar { flex: none; }
.viewer-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 40px 40px; cursor: zoom-out; }
.viewer-body > img { display: block; width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 12px; cursor: default; }
.viewer-body .media-compare, .viewer-body .media.swipe { flex: none; cursor: default; aspect-ratio: auto; }
.viewer-body .media.swipe { cursor: ew-resize; }

/* Hero in three steps: what I asked, the plan, what was built */
.p-hero .hero-steps { display: grid; grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); gap: 24px; padding: 40px; background: var(--panel); }
.step { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.step-label { align-self: flex-start; padding: 4px 12px; border-radius: 100px; background: var(--page); font-size: 14px; line-height: 1.5; white-space: pre; }
.step-label-clay { background: #de7356; color: var(--page); }
.step-chat p { background: #fff; border-radius: 22px 22px 22px 0; padding: 22px 24px; font-size: 18px; line-height: 1.5; }
.step-doc { flex: 1; min-height: 0; overflow: hidden; background: #fff; border-radius: 16px; padding: 22px 22px 0;
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.step-doc pre { margin: 0; font: 500 12px/1.65 ui-monospace, SFMono-Regular, Menlo, monospace; white-space: pre-wrap; color: var(--ink); }
.redact { display: inline-block; height: 1.05em; vertical-align: -0.15em; border-radius: 3px; background: var(--ink); }
.step-shot { flex: 1; min-height: 0; border-radius: 16px; overflow: hidden; background: #fafaf9; }
.step-shot img { width: 100%; height: 100%; object-fit: contain; object-position: top center; }
.step, .step-doc, .step-chat { min-width: 0; }
.redact { max-width: 100%; }

/* Step: what worked and what didn't, under the text */
.step-notes { margin: 8px 0 0; border-top: 1px solid var(--line); }
.step-notes div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.step-notes dt { font-size: 14px; font-weight: 800; line-height: 1.6; }
.step-notes dd { margin: 0; font-size: 16px; line-height: 1.5; }

/* Drop demo: a dashed drop area and a small grid of what was added */
.split.drop-mod { align-items: stretch; }
.drop-panel { background: var(--panel); border-radius: var(--radius); }
.drop-panel .mod-text { padding: 24px; align-self: start; }
.drop-panel .drop-demo { background: none; }
.drop-hint-touch { display: none; }
@media (hover: none) and (pointer: coarse) { .drop-hint-mouse { display: none; } .drop-hint-touch { display: block; } }
/* A plain centered module with no panel */
.centered-plain { padding-block: 40px; }
/* A module pulled up under the one before it */
.mod.mod-attached { margin-top: 48px; }
.versions:first-child { margin-top: 0; }
.version h3 { margin: 0; font-weight: 900; font-size: 30px; line-height: 1.2; letter-spacing: -0.01em; }
.version p:not(.version-tag) { font-size: 18px; line-height: 1.5; }
.version .media.shot { aspect-ratio: 738 / 457; margin-bottom: 8px; }
.drop-demo { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-radius: var(--radius); background: var(--panel); min-width: 0; }
.drop-zone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25.7px; flex: 1 1 auto; min-height: 220px; padding: 24px;
  border: 2px dashed var(--line); border-radius: 16px; background: #fff; text-align: center; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.drop-zone.is-over { border-color: var(--ink); background: var(--accent); }
.drop-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.drop-zone:focus-within { outline: 2px solid var(--ink); outline-offset: 3px; }
.drop-title { font-size: 22px; font-weight: 900; line-height: 1.2; }
.drop-hint { max-width: 300px; font-size: 15px; line-height: 1.5; }
.drop-field { columns: 3; column-gap: 12px; }
.drop-field:empty { display: none; }
.drop-tile { break-inside: avoid; margin-bottom: 12px; border-radius: 10px; overflow: hidden; background: #fff; animation: contact-in .25s ease; }
.drop-tile img { display: block; width: 100%; height: auto; }
.drop-failed { padding: 16px; font-size: 13px; line-height: 1.4; }
.drop-clear { align-self: flex-start; font: inherit; font-weight: 800; font-size: 13px; padding: 4px 12px; color: var(--ink); background: none; border: 1px solid var(--ink); border-radius: 100px; cursor: pointer; }

/* Code in a module slot */
.media-code { display: flex; align-items: center; justify-content: center; background: #000; color: #fff; container-type: inline-size; }
/* Same type as the PC Status terminal: Geist Mono 18/1.5. Long lines wrap rather than scroll. */
/* The type scales with the panel (up to 18px), so the longest line fits on tablets too */
.media-code pre { margin: 0; padding: clamp(16px, 5.4cqi, 40px); white-space: pre-wrap; overflow-wrap: anywhere; font: 400 clamp(11px, 3.4cqi, 18px)/1.5 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Live G status in the hero: the color follows the answer */
.p-hero .g-status { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px 24px; text-align: center; background: var(--panel); color: var(--ink); transition: background-color .3s ease, color .3s ease; }
.p-hero .g-status[data-state="running"] { background: var(--accent); }
.p-hero .g-status[data-state="delays"] { background: #ffa41b; }
.p-hero .g-status[data-state="down"] { background: #000; color: var(--panel); }
.g-question { font-size: 18px; font-weight: 800; line-height: 1.5; }
.g-word { font-weight: 900; font-size: clamp(64px, 12vw, 160px); line-height: 1.1; letter-spacing: -0.01em; }
.g-message { max-width: 620px; font-size: 18px; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.g-time { font-size: 14px; line-height: 1.5; }

/* Process write-up dialog */
.process {
  width: min(720px, 100% - 2 * var(--gutter)); max-height: calc(100% - 48px);
  padding: 0; border: 0; border-radius: var(--radius);
  background: var(--page); color: var(--ink); font-family: var(--font);
  box-shadow: 0 30px 80px rgba(17, 17, 17, .25);
}
.process::backdrop { background: rgba(17, 17, 17, .45); }
.process[open] { animation: contact-in .22s cubic-bezier(.2, .7, .2, 1); }
.process[open]::backdrop { animation: contact-fade .22s ease; }
/* A cream bar the height of the nav stays at the top while the write-up scrolls under it, so nothing shows behind the close button */
.process-bar { position: sticky; top: 0; z-index: 1; height: 72px; display: flex; justify-content: flex-end; align-items: center; padding: 0 16px; background: var(--page); }
.process-bar .contact-close { position: static; }
.process-body { padding: 0 40px 40px; display: flex; flex-direction: column; gap: 24px; outline: none; }
.process h2 { font-weight: 900; font-size: 34px; line-height: 1.15; letter-spacing: -0.01em; padding-right: 32px; }
.process-intro { font-size: 18px; line-height: 1.5; }
.process-sub { font-size: 14px; font-weight: 800; line-height: 1.5; margin-bottom: 8px; }
.process ul { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.5; display: grid; gap: 6px; }
.process-steps { list-style: none; margin: 0; padding: 0; counter-reset: step; border-top: 1px solid var(--line); }
.process-steps li { counter-increment: step; display: grid; grid-template-columns: 36px 1fr; column-gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--line); }
/* The number matches the step title beside it (16px ExtraBold, 24px line), so they share a baseline */
.process-steps li::before { content: counter(step, decimal-leading-zero); grid-row: span 2; font-size: 16px; font-weight: 800; line-height: 24px; }
.process-steps h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; line-height: 1.5; }
.process-steps p { font-size: 16px; line-height: 1.5; }

/* Home grid: columns step down early enough that every card's one-line description stays on one line */
@media (max-width: 1260px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 850px) { .grid { grid-template-columns: 1fr; } }

/* Tablet */
@media (max-width: 1024px) {
  .p-title { grid-template-columns: 1fr; align-items: start; gap: 40px; }
  .split, .split.img-left { grid-template-columns: 1fr 1.4fr; }
  .feature { grid-template-columns: 1fr 1fr; gap: 40px; padding-inline: 0; }
  /* Embedded player: Spotify's own 352px height once the slot gets too short for it */
  .split .media.media-embed { aspect-ratio: auto; height: 352px; }
  .gallery { gap: 20px; }
  .split.fixes { grid-template-columns: 1fr; }
}

/* Mobile */
@media (max-width: 720px) {
  .nav { display: none; }
  .menu-btn {
    display: grid; place-items: center; width: 44px; height: 44px; margin-right: -10px;
    background: none; border: 0; color: var(--ink); cursor: pointer;
  }
  .menu-btn svg { width: 24px; height: 24px; }
  .menu-btn .icon-close { display: none; }
  .menu-open .menu-btn .icon-open { display: none; }
  .menu-open .menu-btn .icon-close { display: block; }
  .menu-open body { overflow: hidden; }
  .menu-open .header { position: fixed; top: 0; left: var(--gutter); right: var(--gutter); width: auto; }
  .menu-open .nav {
    display: flex; flex-direction: column; gap: 40px; z-index: -1;
    position: fixed; inset: 0; padding: 112px var(--gutter) 32px;
    background: var(--page); font-size: 44px; font-weight: 900; line-height: 1.2;
  }
  main.wrap { padding-bottom: 48px; }
  /* Phones: the contact window fills the screen. The close button is pinned where the menu button sits,
     so it stays put while the form scrolls. */
  .contact {
    width: 100%; max-width: 100%; height: 100%; height: 100dvh; max-height: 100%; max-height: 100dvh;
    margin: 0; border-radius: 0; box-shadow: none;
  }
  .contact[open] { animation: contact-up .28s cubic-bezier(.2, .7, .2, 1); }
  @keyframes contact-up { from { transform: translateY(24px); opacity: 0; } }
  .contact-close { position: fixed; top: 14px; right: calc(var(--gutter) - 10px); width: 44px; height: 44px; z-index: 1; }
  .contact-close:hover { background: none; }
  .contact-body { padding: 72px var(--gutter) 40px; gap: 20px; }
  .contact h2 { font-size: 36px; }
  .process { width: 100%; max-width: 100%; height: 100%; height: 100dvh; max-height: 100%; max-height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; }
  .process[open] { animation: contact-up .28s cubic-bezier(.2, .7, .2, 1); }
  .process-bar { padding-right: calc(var(--gutter) - 10px); }
  .viewer { width: 100%; max-width: 100%; height: 100%; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; box-shadow: none; }
  .viewer[open] { animation: contact-up .28s cubic-bezier(.2, .7, .2, 1); }
  .viewer-body { padding: 0 var(--gutter) var(--gutter); }
  .process-body { padding: 0 var(--gutter) 40px; gap: 20px; }
  .process h2 { font-size: 30px; padding-right: 0; }
  .gallery-images {
    justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none;
  }
  .gallery-images::-webkit-scrollbar { display: none; }
  .gallery-images .tile-img { flex: 0 0 62%; scroll-snap-align: start; }
  .gallery-images::after { content: ''; flex: 0 0 8px; }
  .gallery-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; overflow: visible; }
  .gallery-grid::after { display: none; }
  .hero { flex-direction: column; align-items: flex-start; padding: 40px 0 48px; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .card { min-height: 0; }
  .card-space { display: none; }
  .card { gap: 16px; }
  .card-name { font-size: 26px; }
  .index-title { padding: 32px 0 40px; }
  .list-head { display: none; }
  .row { grid-template-columns: 1fr auto; padding: 20px 0; }
  .row-date { display: none; }
  .row-name { font-size: 22px; }
  .p-title { padding: 40px 0 40px; }
  .mod { margin-top: 56px; }
  .mod.mod-attached { margin-top: 32px; }
  .centered-plain { padding-block: 16px; }
  .drop-panel { gap: 0; }
  .drop-panel .mod-text { padding-bottom: 0; }
  .split, .split.img-left { grid-template-columns: 1fr; gap: 24px; }
  .split.img-left .mod-text { order: 0; }
  .feature { grid-template-columns: 1fr; gap: 24px; }
  .feature .mod-text { order: -1; }
  .versions { grid-template-columns: 1fr; gap: 40px; }
  .feature-media { gap: 20px; }
  .p-hero .media-hero.g-status { aspect-ratio: auto; min-height: 320px; }
  .p-hero .hero-steps { aspect-ratio: auto; grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 28px; }
  .step-doc { height: 320px; flex: none; }
  .step-shot { height: 460px; flex: none; }
  .g-word { font-size: clamp(48px, 15vw, 64px); }
  .compare-knob { --knob: 56px; }
  .drop-field { columns: 2; }
  .drop-zone { min-height: 160px; }
  .numbers { grid-auto-flow: row; }
  .numbers div, .numbers div:first-child { flex-direction: row-reverse; align-items: baseline; gap: 16px; padding: 20px 0; border-left: 0; border-top: 1px solid var(--line); }
  .numbers div:first-child { border-top: 0; }
  .numbers dd { flex: 0 0 40%; font-size: 56px; }
  .numbers dt { font-size: 16px; }
  .note-card, .role, .prompt-side { padding: 24px 20px; }
  .mod-cols { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .prompt-side, .media.prompt-shot { min-height: 220px; }
  .timeline { grid-auto-flow: row; gap: 32px; margin: 32px 0 0 8px; padding-left: 24px; border-top: 0; border-left: 1px solid var(--line); }
  .timeline li { padding-top: 0; }
  .timeline li::before { left: -33px; top: 2px; }
  .pair-imgs { gap: 12px; }
  .panel { padding: 48px 20px; }
  .panel-dark { padding-block: 72px; }
  .panel-dark .mod-text h2, .panel-dark .mod-text .mod-title2 { font-size: 24px; }
  .gallery { gap: 12px; }
  /* Phone screens become a side-scrolling strip that snaps one screen at a time */
  .gallery-three {
    justify-content: flex-start; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none;
  }
  .gallery-three::-webkit-scrollbar { display: none; }
  .gallery-three .tile-t { flex: 0 0 62%; scroll-snap-align: start; }
  .gallery-three::after { content: ''; flex: 0 0 8px; }
  .next { flex-direction: column; align-items: flex-start; padding: 24px 20px; }
  .footer { flex-direction: column; gap: 16px; padding: 48px 0 56px; }
  .footer-links { flex-wrap: wrap; gap: 8px 20px; }
}

/* Terminal log in an image slot: white Geist Mono on black, sized to the text beside it */
.media-terminal { display: flex; align-items: center; justify-content: center; background: #000; color: #fff; container-type: inline-size; }
.split .media.wide.media-terminal { aspect-ratio: auto; align-self: stretch; min-height: 260px; }
.term { padding: clamp(16px, 5.4cqi, 40px); font: 400 clamp(11px, 2.9cqi, 18px)/1.5 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.term-line { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 2ch; }
@media (max-width: 720px) {
  .media-terminal { justify-content: flex-start; }
  .split .media.wide.media-terminal { min-height: 0; }
}

/* Checklist card in an image slot: numbered rows on the project's accent color */
.split .media.wide.media-list, .split .media.wide.media-flow { aspect-ratio: auto; background: none; overflow: visible; }
/* The checklist card is 6 grid columns (630 of 738), against the outer edge, not full image width */
.split .media.wide.media-list { width: 85.37%; justify-self: end; }
.split.img-left .media.wide.media-list { justify-self: start; }
@media (max-width: 720px) { .split .media.wide.media-list { width: 100%; } }
.list-card { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: var(--radius); background: var(--accent); }
.list-card ol { list-style: none; margin: 0; padding: 0; counter-reset: li; border-top: 1px solid rgba(17, 17, 17, .25); }
.list-card li { counter-increment: li; display: grid; grid-template-columns: 40px 1fr; padding: 14px 0; border-bottom: 1px solid rgba(17, 17, 17, .25); font-size: 20px; font-weight: 800; line-height: 1.3; }
.list-card li::before { content: counter(li, decimal-leading-zero); font-size: 14px; font-weight: 800; line-height: 1.85; }
/* Small flow diagram in an image slot: boxes joined by arrows, the last one in the accent color */
.media-flow { padding: 32px; border-radius: var(--radius); background: var(--panel) !important; }
.flow { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: stretch; }
.flow li { padding: 14px 20px; border-radius: 12px; background: #fff; font-size: 17px; font-weight: 800; line-height: 1.3; text-align: center; }
.flow li + li { margin-top: 36px; position: relative; }
.flow li + li::before { content: '↓'; position: absolute; left: 50%; top: -30px; transform: translateX(-50%); font-size: 20px; line-height: 24px; }
.flow li:last-child { background: var(--accent); }
@media (max-width: 720px) { .list-card, .media-flow { padding: 24px 20px; } .list-card li { font-size: 18px; } }

/* Prompt beside the build, in a section (same parts as the PC Status hero steps) */
.mod-steps { margin-top: 32px; }
.mod-steps .hero-steps { display: grid; grid-template-columns: repeat(var(--steps, 2), minmax(0, 1fr)); gap: 24px; padding: 40px; aspect-ratio: 1280 / 793; background: var(--panel); }
.mod-steps .step-shot img { object-position: center; }
.step-label-blue { background: #2f54ec; color: #fff; }
/* Before and after code panels, stacked */
.ba-panel { display: flex; flex-direction: column; gap: 16px; padding: 32px; border-radius: var(--radius); min-width: 0; container-type: inline-size; }
.ba-panel pre { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 400 clamp(11px, 2.6cqi, 16px)/1.75 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }
.ba-before { background: var(--panel); color: rgba(17, 17, 17, .55); }
.ba-before pre { text-decoration: line-through; text-decoration-color: rgba(17, 17, 17, .3); }
.ba-after { background: #000; color: #fff; }
.ba-after .ok { color: var(--accent); }
@media (max-width: 720px) {
  .mod-steps .hero-steps { aspect-ratio: auto; grid-template-columns: minmax(0, 1fr); padding: 20px; gap: 28px; }
  .mod-steps .step-shot { height: 420px; flex: none; }
  .ba-panel { padding: 24px 20px; }
}

/* Gallery showcase: heading and text inside the panel, above the images */
.gallery-showcase { display: flex; flex-direction: column; gap: 48px; color: var(--panel); }
.gallery-showcase .gallery-images { padding: 0; }
.gallery-showcase > .mod-text { align-self: center; align-items: center; text-align: center; }
/* Row layout: text on top, then a full-width slot. A checklist in it runs across in four columns. */
.row-slot { margin-top: 32px; }
.row-slot .media.row-media { width: 100%; aspect-ratio: auto; background: none; overflow: visible; }
.row-slot .list-card ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; border-top: 0; }
.row-slot .list-card li { grid-template-columns: 1fr; row-gap: 8px; padding: 16px 0 4px; border-top: 1px solid rgba(17, 17, 17, .25); border-bottom: 0; }
@media (max-width: 1024px) { .row-slot .list-card ol { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; } }
@media (max-width: 720px) {
  .gallery-showcase { gap: 32px; }
  .row-slot .list-card ol { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
  .row-slot .list-card li { grid-template-columns: 40px 1fr; padding: 14px 0; }
}

/* Accent panel: a split section on a full-width panel in the project color.
   The list is 413 wide, centered in the space right of the text. That space has 56px on its left to mirror the panel's 56px on the right, so the list reads as centered. */
.split.accent-panel { grid-template-columns: 413px minmax(0, 1fr); column-gap: 0; padding: 64px 56px; border-radius: var(--radius); background: var(--accent); align-items: center; }
.accent-panel .media.wide.media-list { display: flex; justify-content: center; width: 100%; padding-left: 56px; box-sizing: border-box; }
/* 450 wide so the longest item stays on one line; where items do wrap, lines are balanced so no word sits alone */
.accent-panel .list-card { width: 450px; max-width: 100%; padding: 0; border-radius: 0; background: none; }
.list-card li { text-wrap: balance; }
@media (max-width: 720px) {
  .split.accent-panel { grid-template-columns: minmax(0, 1fr); padding: 40px 20px; row-gap: 32px; }
  .accent-panel .media.wide.media-list { padding-left: 0; }
}

/* Tablets: side-by-side sections stack (text first, then the image), the same as on phones but with a little more room */
@media (max-width: 1024px) {
  .split, .split.img-left, .split.accent-panel { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .split.img-left .mod-text { order: 0; }
  .feature { grid-template-columns: minmax(0, 1fr); gap: 32px; padding-inline: 0; }
  .feature .mod-text { order: -1; }
  .prompt-pair, .split .media.wide.media-list { width: 100%; }
  .accent-panel .media.wide.media-list { padding-left: 0; }
  .drop-panel { gap: 0; }
  .drop-panel .mod-text { padding-bottom: 0; }
  .split .media.wide.media-terminal { min-height: 0; }
}
@media (max-width: 720px) {
  .split, .split.img-left, .feature { gap: 24px; }
  .split.accent-panel { gap: 32px; }
}