:root {
  --accent: #B9A7F5;
  --accent-tint: #EFEAFD;
  --accent-deep: #7C66D9;
  --bg: #FAF9FC;
  --nav-bg: rgba(250, 249, 252, 0.85);
  --card: #FFFFFF;
  --text: #1B1A21;
  --muted: #6B6878;
  --line: #E6E3EE;
  --placeholder: #E8E6EE;
  --radius: 24px;
  --page: 1120px;
  --display: "Bricolage Grotesque", "DM Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --serif: "Instrument Serif", Georgia, serif;
  --body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure { margin: 0; }
h1, h2, h3 { font-family: var(--display); }
strong { font-weight: 700; }

/* No hanging words: paragraphs avoid a lone last word, headings and short labels balance their lines */
p, li, dd { text-wrap: pretty; }
h1, h2, h3, dt, .eyebrow, .panel-label, .card-label, .intro-line, .flow-cap, .contact-email { text-wrap: balance; }

/* Type helpers */

/* The italic serif accent word in big headings */
.accent {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 1.06em;
  letter-spacing: -0.01em;
  color: var(--accent-deep);
}

/* Small uppercase labels */
.eyebrow {
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Nav */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 24px;
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.nav-name { font-family: var(--display); font-weight: 800; font-size: 19px; letter-spacing: -0.02em; color: var(--text); }
.nav-name:hover { text-decoration: none; }

.nav-links { display: flex; align-items: center; gap: 22px; font-size: 15px; font-weight: 500; }
.nav-links a:not(.btn) { color: var(--text); }
.nav-links a:not(.btn):hover { color: var(--accent-deep); text-decoration: none; }

/* Buttons */

.btn {
  display: inline-block;
  padding: 13px 24px;
  border-radius: 999px;
  border: 1.5px solid var(--accent-deep);
  background: var(--accent-deep);
  color: #fff;
  font-weight: 500;
  font-size: 16px;
  transition: background 0.15s, color 0.15s, border-color 0.15s, filter 0.15s;
}
.btn:hover { background: #6A54C7; border-color: #6A54C7; text-decoration: none; }

.btn-ghost { background: transparent; color: var(--accent-deep); }
.btn-ghost:hover { background: var(--accent-tint); border-color: var(--accent-deep); }



.btn-small { padding: 8px 16px; font-size: 14px; }

/* Project pages: buttons inside the project content take the project's brand color (set in script.js).
   The nav's button stays lavender, like on the home page. */
.brand-page .project-body .btn { border-color: var(--btn); background: var(--btn); color: var(--brand-text); font-weight: 700; }
.brand-page .project-body .btn:hover { border-color: var(--btn); background: var(--btn); filter: brightness(0.9); }

/* Layout */

main { max-width: var(--page); margin: 0 auto; padding: 0 24px; }

.section { padding: 48px 0; scroll-margin-top: 28px; }

.section-head { margin-bottom: 36px; }
.section-head .eyebrow { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; color: var(--accent-deep); }
.section-head .eyebrow::after { content: ""; width: 40px; height: 2px; background: var(--accent); }
.section-head h2 {
  font-size: clamp(40px, 5.6vw, 56px);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

/* Big rounded panels (About and Contact) */

.panel { padding: 56px; border-radius: 32px; }

/* Keyboard focus */
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 3px; }
.panel-dark a:focus-visible, .project-body.dark a:focus-visible { outline-color: var(--accent); }
.card-head h3 a:focus-visible { outline: none; }
.card-head h3 a:focus-visible::after { outline: 3px solid var(--accent-deep); outline-offset: 4px; }
.panel-dark { background: #1B1A21; color: #fff; }

/* Hero */

.hero { padding: 96px 0 48px; position: relative; }

.hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: -80px;
  left: 50%;
  width: 100vw;
  height: 480px;
  transform: translateX(-50%);
  background: linear-gradient(180deg, var(--accent-tint) 0%, rgba(239, 234, 253, 0) 100%);
  /* Fades in from slightly higher on page load (off under reduced motion, below) */
  animation: hero-glow 1.6s ease-out 150ms both;
}
@keyframes hero-glow {
  from { opacity: 0; transform: translate(-50%, -20px); }
  to { opacity: 1; transform: translateX(-50%); }
}

.hero h1 {
  max-width: 1020px;
  font-size: clamp(44px, 7.6vw, 88px);
  line-height: 1.02;
  font-weight: 400;
  letter-spacing: -0.04em;
}
.hero h1 strong { font-weight: 800; }

.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 40px; }

/* Logo strip */

.logo-strip { padding: 0 0 16px; }

.marquee {
  margin-top: 16px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  width: max-content;
  /* One row of logos (filled by script.js), held open so the page below doesn't jump when they arrive */
  min-height: 44px;
  padding: 0;
  list-style: none;
  animation: marquee 50s linear infinite;
}

.marquee-track li { padding: 6px 44px; filter: grayscale(1); opacity: 0.55; transition: filter 0.2s, opacity 0.2s; }
.marquee-track li:hover { filter: none; opacity: 1; }
.marquee-track .logo { width: 32px; height: 32px; }

@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* Projects: the image is the card, text sits right under it. */

.projects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
#projects .section-head { margin-bottom: 20px; }

/* Home page: two equal columns, filled by script.js. The pictures have different shapes, so the cards
   do not line up across. script.js sets the "More projects" card's height so both columns end on the same line. */
.project-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
/* The home grid sits on one lavender backdrop. It grows outward into the page margin where there is room
   (so the cards keep their size) and stays 8px or more from the window edge. */
#project-list {
  margin-inline: calc(-1 * clamp(0px, (100vw - var(--page)) / 2 + 8px, 24px));
  padding: 24px;
  border-radius: 32px;
  background: #EFEAFD;
}
.project-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  --text: #1B1A21;
  --muted: #6B6878;
  color: var(--text);
}
.card.featured { grid-column: 1 / -1; }

.card-image { aspect-ratio: 16 / 10; overflow: hidden; background: var(--placeholder); }
.card.featured .card-image { aspect-ratio: 16 / 8; }
/* Home cards have pictures of different shapes (--shape, per project in projects.js), so the columns stagger */
.project-cols .card-image { aspect-ratio: var(--shape, 16 / 10); }
.card-image .comp { transition: transform 0.4s ease; }
.card:hover .card-image .comp { transform: scale(1.03); }

.card-body { display: flex; flex-direction: column; align-items: flex-start; padding: 28px; }

.card-head { display: flex; align-items: center; gap: 12px; }
.card-head h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; }
.card.featured .card-head h3 { font-size: 36px; }

/* The title link's ::after covers the card, so the whole card is clickable */
.card-head h3 a { color: inherit; }
.card-head h3 a:hover { text-decoration: none; }
.card:hover .card-head h3 a { color: var(--accent-deep); }
.card-head h3 a::after { content: ""; position: absolute; inset: 0; border-radius: 24px; }

.logo { height: 24px; width: 24px; object-fit: contain; flex: none; }

.card-label {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.card-desc { margin-top: 10px; max-width: 68ch; }

/* Pills sit in a block with balanced lines, so a row never ends with one pill alone */
.tags { display: block; margin: 14px -8px -8px 0; padding: 0; list-style: none; text-wrap: balance; }
.tags li {
  display: inline-block;
  margin: 0 8px 8px 0;
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--accent-tint);
  color: #4E3FA0;
  font-size: 13px;
  font-weight: 500;
}

.card-link { position: relative; z-index: 1; margin-top: 22px; font-size: 15px; font-weight: 700; }
.card-link::after { content: " \2197"; }

/* "More projects coming soon": a tinted card with a dashed border, not a link */
.card-more {
  justify-content: center;
  gap: 12px;
  padding: 36px 32px;
  border: 1.5px dashed var(--accent);
  background: var(--accent-tint);
}
.card-more h3 { font-size: clamp(30px, 3.4vw, 42px); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; }
.card-more p { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: #6A54C7; }
.project-cols .card-more { flex: none; }
/* "More projects" on project pages: a 2 x 2 grid of same-size tiles, every picture 16:10. The "coming soon"
   card stretches to its row's height. */
.tiles { container-type: inline-size; }
.tiles .card-body { flex: 1; }

/* About: four white panels in a 2 x 2 grid. Each row's two panels share a height. */

.about-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.cell { min-width: 0; padding: 36px; border: 1px solid var(--line); border-radius: 28px; background: #fff; }
.cell-bio { display: flex; flex-direction: column; justify-content: center; }
.cell-label { margin-bottom: 18px; font-family: var(--serif); font-size: 22px; font-style: italic; line-height: 1.1; color: #7C66D9; }

.bio { font-size: clamp(21px, 2.5vw, 28px); line-height: 1.35; letter-spacing: -0.015em; }

/* Photos: a stack of prints (white border, thicker at the bottom). The ones behind are turned and shifted
   (--turn, --dx, --dy, set in script.js) so their edges show. The top one slides off to the right, then goes to the back. */
.cell-photos { display: flex; flex-direction: column; justify-content: center; overflow: hidden; } /* the print sliding off never widens the page */
.prints { position: relative; width: 60%; aspect-ratio: 5 / 6.3; margin: 12px auto; cursor: pointer; outline: none; }
.prints:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 20px; border-radius: 4px; }
.print {
  position: absolute;
  inset: 0;
  padding: 5% 5% 17%;
  background: #fff;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(27, 26, 33, 0.18), 0 18px 36px -10px rgba(27, 26, 33, 0.45);
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--turn, 0deg));
  transition: transform 0.45s ease, opacity 0.45s ease;
}
.print img { display: block; width: 100%; height: 100%; object-fit: cover; background: var(--placeholder); }
.print.leaving { transform: translate(78%, -6%) rotate(14deg); opacity: 0; }

/* Where I've worked: compact rows of logo, role over company, and dates on the right */
.work { margin: 0; padding: 0; list-style: none; }
.work li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 0; border-top: 1px solid #E4E0F0; }
.work li:last-child { border-bottom: 1px solid #E4E0F0; }
.work .who { display: flex; flex-direction: column; min-width: 0; }
.work .role { font-weight: 700; font-size: 16px; line-height: 1.3; }
.work .company { font-size: 14px; line-height: 1.35; color: var(--muted); }
.work .dates { font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--muted); }

/* What I bring: Interests, Skills, Platforms. One group per list: the label, then its pills, each group in its
   own color (set in projects.js). script.js adds the .break items, which end a row so that no pill sits alone on one. */
.about-lists { display: grid; gap: 26px; }
.about-lists .eyebrow { color: var(--pill-text); }
.about-lists .tags { display: flex; flex-wrap: wrap; column-gap: 8px; margin: 12px 0 -8px; }
.about-lists .tags li { margin: 0 0 8px; background: var(--pill-bg); color: var(--pill-text); }
.about-lists .tags .break { flex-basis: 100%; height: 0; margin: 0; padding: 0; }

/* Contact: one dark panel that ends the page */

.contact { padding-bottom: 24px; }
.contact .panel { padding: 72px 56px 24px; }
.contact .eyebrow { margin-bottom: 16px; color: #A9A6B8; }

.contact-email {
  display: inline-block;
  font-family: var(--display);
  font-size: clamp(24px, 3.6vw, 44px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: #fff;
  overflow-wrap: anywhere;
}
.contact-email:hover { color: var(--accent); text-decoration: none; }

.contact-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 32px; font-size: 17px; font-weight: 500; }
.contact-links a { color: var(--accent); }

.panel-footer { margin-top: 72px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 13px; color: #A9A6B8; }

/* ---------- Picture panels (hero compositions and work panels) ---------- */

/* Everything inside a .comp is sized in cqw (1% of the panel's width), so the
   same picture scales to any size: project hero, work panel, or home card. */
.comp { position: relative; width: 100%; height: 100%; overflow: hidden; container-type: inline-size; background: #1B1B1B; }

.comp .item {
  position: absolute;
  left: calc(var(--x, 50) * 1%);
  top: calc(var(--y, 50) * 1%);
  width: calc(var(--w, 20) * 1cqw);
  transform: translate(-50%, -50%) rotate(calc(var(--r, 0) * 1deg)) scale(var(--s, 1));
}

/* Phone frame. --pw is the phone's width: set from --w inside pictures, fixed in walkthroughs. */
.comp .phone { --pw: calc(var(--w, 20) * 1cqw); }
.phone {
  aspect-ratio: 402 / 874;
  padding: calc(var(--pw) * 0.03);
  border-radius: calc(var(--pw) * 0.16);
  background: #0A0A0A;
  box-shadow:
    0 0 0 calc(var(--pw) * 0.008) #55555A,
    0 calc(var(--pw) * 0.1) calc(var(--pw) * 0.24) rgba(0, 0, 0, 0.45);
}
.phone .screen { width: 100%; height: 100%; overflow: hidden; border-radius: calc(var(--pw) * 0.13); background: #3A3A3F; }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* Browser frame */
.browser { overflow: hidden; border-radius: 1.1cqw; background: #fff; box-shadow: 0 2cqw 5cqw rgba(14, 26, 43, 0.28); }
.browser-bar { display: flex; align-items: center; gap: 0.7cqw; height: 2.6cqw; padding: 0 1.2cqw; background: #E4E4E8; }
.browser-bar i { width: 0.9cqw; height: 0.9cqw; border-radius: 50%; background: #B4B4BC; }
.shot { overflow: hidden; background: #D9D9DE; }
.shot img { width: 100%; }

/* Laptop frame */
.laptop-screen { padding: calc(var(--w) * 0.018cqw); border-radius: calc(var(--w) * 0.022cqw) calc(var(--w) * 0.022cqw) 0 0; background: #111114; }
.laptop-base {
  position: relative;
  height: calc(var(--w) * 0.024cqw);
  margin: 0 -8%;
  border-radius: 0 0 calc(var(--w) * 0.03cqw) calc(var(--w) * 0.03cqw);
  background: linear-gradient(#DADADF, #A6A6AE);
}
/* A tight contact shadow right under the base, plus a wider, lighter one below it */
.laptop-base::before, .laptop-base::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; }
.laptop-base::before {
  left: 3%;
  right: 3%;
  top: 55%;
  height: calc(var(--w) * 0.03cqw);
  background: rgba(14, 26, 43, 0.5);
  filter: blur(calc(var(--w) * 0.012cqw));
}
.laptop-base::after {
  left: -6%;
  right: -6%;
  top: 60%;
  height: calc(var(--w) * 0.11cqw);
  background: radial-gradient(ellipse at center, rgba(14, 26, 43, 0.2) 0%, rgba(14, 26, 43, 0) 70%);
}

/* Depth on the covers: a device tilts in 3D (keeping its own slight turn) with a layered shadow. The shadow is a
   box-shadow, not a filter: a filter on a 3D-turned element makes the browser blur the screen inside it. */
.comp .item.tilt {
  transform: translate(-50%, -50%) perspective(150cqw) rotateX(calc(var(--rx, 0) * 1deg)) rotateY(calc(var(--ry, 0) * 1deg)) rotate(calc(var(--r, 0) * 1deg));
  backface-visibility: hidden;
}
.comp .phone.tilt {
  box-shadow:
    0 0 0 calc(var(--pw) * 0.008) #55555A,
    0 0.6cqw 0.6cqw rgba(0, 0, 0, 0.3),
    0 2.4cqw 3cqw rgba(0, 0, 0, 0.36),
    0 6cqw 7cqw rgba(0, 0, 0, 0.3);
}
.comp .stat-card.tilt {
  box-shadow:
    0 0.6cqw 0.6cqw rgba(0, 0, 0, 0.3),
    0 2.4cqw 3cqw rgba(0, 0, 0, 0.36),
    0 6cqw 7cqw rgba(0, 0, 0, 0.3);
}

/* Covers: a size container, so a stage (below) can fit by height as well as width */
.comp.cover { container-type: size; }

/* The foreground of a cover: a box of shape --sr (width / height), as big as fits, centered or on the bottom edge.
   Its items are sized in its own width. */
.stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(100cqw, calc(var(--sr) * 100cqh));
  aspect-ratio: var(--sr);
  transform: translate(-50%, -50%);
  container-type: inline-size;
}
.stage.bottom { top: auto; bottom: 0; transform: translateX(-50%); }

/* Strava: orange route lines across the frame (each line's width and opacity are set in projects.js) */
.routes { position: absolute; inset: 0; width: 100%; height: 100%; }
.routes path { fill: none; stroke: #FC4C02; stroke-linecap: round; }

/* Spotify: green halftone dots, only inside a soft oval glow behind the phone */
.halftone {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, var(--c) 0 0.36cqw, transparent 0.4cqw);
  background-size: 1.3cqw 1.3cqw;
  opacity: 0.55;
  -webkit-mask: radial-gradient(ellipse 34% 48% at 50% 58%, #000 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
  mask: radial-gradient(ellipse 34% 48% at 50% 58%, #000 0%, rgba(0, 0, 0, 0.6) 50%, transparent 100%);
}

/* Spotify: comment bubbles around the phone (--s and opacity, set in projects.js, push some further back) */
.comp .bubble {
  display: flex;
  align-items: center;
  gap: 1.1cqw;
  width: max-content;
  padding: 0.9cqw 2cqw 0.9cqw 0.9cqw;
  border: 1px solid #2F2F2F;
  border-radius: 2.4cqw;
  background: #1E1E1E;
  box-shadow: 0 1.2cqw 3cqw rgba(0, 0, 0, 0.5);
  color: #fff;
  font-size: 2.3cqw;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.bubble img { width: 3.6cqw; height: 3.6cqw; border-radius: 50%; object-fit: cover; }
.bubble svg { width: 2.4cqw; height: 2.4cqw; fill: #1DB954; }

/* BMW: the laptop casts a soft shadow on the wall and desk */
.cover .laptop { filter: drop-shadow(0 1.5cqw 3cqw rgba(14, 26, 43, 0.22)); }

/* Pills over a home card cover's bottom-left corner: the project's categories */
.cover-pills {
  position: absolute;
  left: 2.3cqw;
  bottom: 2.3cqw;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 1.15cqw;
  max-width: calc(100% - 4.6cqw);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cover-pills li {
  padding: 0.8cqw 1.7cqw;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1.1cqw;
  background: rgba(20, 20, 24, 0.82);
  color: #fff;
  font-size: 2.1cqw;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

/* TikTok: score cards (their tint is set in projects.js), the numbers in JetBrains Mono, bars filled cyan to pink */
.stat-card {
  display: flex;
  flex-direction: column;
  gap: 1.4cqw;
  padding: 2.8cqw 3cqw;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 2.4cqw;
  background: #16161B;
  color: #fff;
  box-shadow: 0 2cqw 5cqw rgba(0, 0, 0, 0.45);
}
.stat-card .sc-label { font-size: 2.6cqw; font-weight: 500; line-height: 1.2; color: #9A9AA6; }
.stat-card strong { font-family: var(--mono); font-size: 8cqw; font-weight: 700; line-height: 1; letter-spacing: -0.04em; }
.stat-card i { display: block; height: 1.4cqw; border-radius: 99px; background: #2A2A30; overflow: hidden; }
.stat-card b { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--from), var(--to)); }
/* Rows share one grid, so the bars line up */
.stat-card ul { display: grid; grid-template-columns: max-content minmax(0, 1fr) max-content; align-items: center; gap: 1.6cqw 1.2cqw; margin: 0; padding: 0; list-style: none; }
.stat-card li { display: contents; }
.stat-card li span { font-size: 2.4cqw; font-weight: 500; line-height: 1.2; white-space: nowrap; }
.stat-card code { font-family: var(--mono); font-size: 2.4cqw; font-weight: 700; line-height: 1.2; text-align: right; }

.glow { aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--c) 0%, transparent 68%); }

/* BMW: 3-stripe bar across the bottom */
.stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 1.3cqw; background: linear-gradient(90deg, #6CB4E4 0 33.33%, #1C69D4 33.33% 66.66%, #E22718 66.66%); }

/* Charts fill their panel */
/* Findings: a title and numbered findings, each with a quote or a line under it */
.work-panel.text-panel { display: flex; aspect-ratio: auto; }
.text-panel .comp { display: flex; height: auto; flex: 1; }
.findings { display: flex; flex: 1; flex-direction: column; justify-content: center; gap: 28px; padding: 44px; color: #fff; }
.findings h3 { font-size: clamp(26px, 3vw, 34px); font-weight: 800; line-height: 1.05; letter-spacing: -0.03em; }
.findings ol { display: flex; flex-direction: column; gap: 22px; padding: 0; list-style: none; counter-reset: finding; }
.findings li { display: grid; grid-template-columns: 26px 1fr; gap: 4px 14px; counter-increment: finding; }
.findings li::before {
  content: counter(finding);
  grid-row: 1 / span 2;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1.5px solid #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
}
.findings strong { font-size: 19px; line-height: 1.3; }
.findings span { font-size: 17px; line-height: 1.45; color: rgba(255, 255, 255, 0.85); }
.findings strong, .findings span { text-wrap: balance; }

.chart-fill { position: absolute; inset: 0; width: 100%; height: 100%; }
.chart-fill text { font-family: var(--body); fill: #fff; }
.chart-fill .c-title, .chart-fill .c-big { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; }
.chart-fill .c-title { font-size: 4.3px; }
.chart-fill .c-big { font-size: 12px; }
.chart-fill .c-label { font-size: 3.3px; }
.chart-fill .c-value { font-size: 3.7px; font-weight: 700; }

/* Small covers (phones, home cards on a phone): keep the pill text readable */
@container (max-width: 560px) {
  .cover-pills { left: 3.4cqw; bottom: 3.4cqw; gap: 1.6cqw; max-width: calc(100% - 6.8cqw); }
  .cover-pills li { padding: 1.1cqw 2.3cqw; border-radius: 1.6cqw; font-size: 3cqw; }
}

/* ---------- Project pages ---------- */

/* The whole page sits on the normal site background, at the same width as the home page.
   Everything project-specific sits in one rounded container in the project's own color.
   The title is above it; "More projects" and the contact panel are below it. */
.project-intro { padding: 28px 0 48px; }

.back-link { display: inline-block; margin-bottom: 44px; font-size: 15px; font-weight: 500; color: var(--muted); }
.back-link:hover { color: var(--text); text-decoration: none; }

.project-title { display: flex; align-items: center; gap: clamp(12px, 1.8vw, 20px); }
.project-title .logo { width: clamp(34px, 5.6vw, 60px); height: clamp(34px, 5.6vw, 60px); }
.project-title h1 { font-size: clamp(44px, 9vw, 100px); font-weight: 800; line-height: 1; letter-spacing: -0.045em; }

.intro-line { max-width: 36ch; margin-top: 22px; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.35; letter-spacing: -0.015em; }

.project-body { padding: 16px; border-radius: 32px; background: var(--body-bg); }
.project-body.dark { --text: #FFFFFF; --muted: #A6A6AE; }
/* A light container gets a border so it still reads as a container on the light page */
.project-body:not(.dark) { border: 1px solid var(--line); }

.project-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* "More projects" under the container: same heading and cards as the home page, two per row */
.more-projects .section-head { margin-bottom: 20px; }

/* Picture panels */
.work-panel { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 24px; }
.work-panel.wide { grid-column: 1 / -1; aspect-ratio: 2 / 1; }
.work-panel.landscape { aspect-ratio: 4 / 3; }
/* A hero framed like the project's home card: same shape, so the picture sits the same way in both */
.work-panel.hero-panel.like-card { aspect-ratio: var(--hero-shape); }

/* Small numbered section label in the top-left corner of a panel */
.panel-label {
  position: absolute;
  top: 22px;
  left: 24px;
  z-index: 2;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.panel-label.on-light { color: #0E1A2B; }

/* Text panels: long story short, other projects */
.info-panel { grid-column: 1 / -1; padding: 28px 56px 56px; border-radius: 24px; background: var(--panel-bg); color: var(--text); }
.info-panel .panel-label { position: static; margin: 0 0 36px -32px; }

.story { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 40px 72px; }
.story-text p { font-size: clamp(19px, 2vw, 23px); line-height: 1.5; letter-spacing: -0.01em; }
.story-text p + p { margin-top: 1em; }
.story .project-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

.facts div + div { margin-top: 26px; }
.facts dt { margin-bottom: 4px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
/* script.js adds the .break items, which end a row so that no pill sits alone on one */
.fact-pills { display: flex; flex-wrap: wrap; column-gap: 6px; margin: 0 0 -6px; padding: 6px 0 0; list-style: none; }
.fact-pills .break { flex-basis: 100%; height: 0; margin: 0; padding: 0; }
.fact-pills li {
  margin: 0 0 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand);
  font-size: 12px;
  font-weight: 500;
}
.project-body:not(.dark) .fact-pills li { color: color-mix(in srgb, var(--brand) 78%, #000); }

/* ---------- Report panels (TikTok page): timeline, tables, charts with captions ---------- */

.report-panel > :not(.panel-label) + * { margin-top: 32px; }
/* min-width: 0 lets a panel be narrower than a wide table inside it, so the table scrolls instead */
.report-panel { min-width: 0; }
.report-panel.half { display: flex; flex-direction: column; justify-content: center; grid-column: auto; padding: 36px; }
.report-panel.half .panel-label { margin: -8px 0 28px -12px; }

/* A chart or table with a small gray caption under it */
.fig { margin: 0; }
.fig svg { display: block; width: 100%; height: auto; }
/* The caption is the figure's title: it sits on top, with the chart or table directly under it */
.fig figcaption { margin-bottom: 16px; font-size: 13px; line-height: 1.4; color: #9A9AA6; text-wrap: balance; }
.f-label { font-family: var(--body); font-size: 3.5px; fill: #fff; }
.f-label.strong { font-weight: 700; }
.f-label.small { font-size: 3px; }
.f-value { font-family: var(--mono); font-size: 3.6px; font-weight: 700; fill: #fff; }
.f-value.big { font-size: 4.2px; }
.f-value.small { font-size: 2.9px; }
.f-small { font-family: var(--mono); font-size: 2.9px; fill: #A6A6AE; }
.f-track { fill: rgba(255, 255, 255, 0.13); }
.f-dot { fill: #fff; stroke: var(--panel-bg); stroke-width: 0.8; }

/* Numbered steps down a line that runs from one project color to the other */
.method { position: relative; margin: 0; padding: 0; list-style: none; }
.method::before { content: ""; position: absolute; top: 18px; bottom: 0; left: 17px; width: 2px; background: linear-gradient(var(--from), var(--to)); }
.method > li { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 24px; padding-bottom: 36px; }
/* The last step covers the rest of the line, so it ends at the last number */
.method > li:last-child { padding-bottom: 0; background: var(--panel-bg); }
.step-num {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1.5px solid currentColor;
  border-radius: 50%;
  background: var(--panel-bg);
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 700;
}
.method h3 { margin-top: 5px; font-size: 21px; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; }
.method p, .rules li { max-width: 64ch; font-size: 16px; line-height: 1.5; color: var(--muted); }
.method p { margin-top: 8px; }

.def-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 760px; margin-top: 16px; }
.def { padding: 16px 18px; border: 1px solid rgba(127, 127, 127, 0.22); border-radius: 14px; background: rgba(127, 127, 127, 0.1); }
.def h4 { margin: 0; font-family: var(--display); font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.def p { margin-top: 4px; font-size: 15px; text-wrap: balance; }

.rules { margin: 12px 0 0; padding: 0; list-style: none; }
.rules li { position: relative; padding-left: 18px; }
.rules li + li { margin-top: 8px; }
.rules li::before { content: ""; position: absolute; top: 0.6em; left: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }

.formula {
  display: inline-block;
  max-width: 100%;
  margin-top: 14px;
  padding: 12px 16px;
  border-radius: 10px;
  background: rgba(127, 127, 127, 0.16);
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.6;
  text-wrap: balance;
}

/* Data tables. The wrapper scrolls sideways when the panel is narrower than the table. */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.45; }
.data-table th, .data-table td { padding: 14px 14px; border-bottom: 1px solid rgba(127, 127, 127, 0.26); text-align: left; vertical-align: top; }
.data-table th:first-child { padding-left: 0; }
.data-table th:last-child, .data-table td:last-child { padding-right: 0; }
.data-table thead th { padding-top: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; color: #9A9AA6; }
.data-table tbody th { font-weight: 700; white-space: nowrap; }
.data-table td { color: #D8D8DE; text-wrap: balance; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .right { text-align: right; }
.data-table .num, .data-table.mono tbody th, .data-table.mono td { font-family: var(--mono); font-size: 14px; }
.data-table thead .num { font-family: var(--body); font-size: 12px; }

/* Survey items: question codes as small pills, each followed by what it asks */
.q-items { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 0; padding: 0; list-style: none; }
.q-items li { white-space: nowrap; }
.q { margin-right: 2px; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); font-family: var(--mono); font-size: 12px; font-weight: 500; }

/* Heat map: cells on one color scale, a line of interpretation under each */
.heat-legend { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; font-family: var(--mono); font-size: 12px; color: #9A9AA6; }
.heat-legend i { width: 120px; height: 8px; border-radius: 4px; }
.heat-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.heat-item p { margin-top: 12px; font-size: 15px; line-height: 1.45; color: var(--muted); text-wrap: balance; }
.h-label { font-family: var(--body); font-size: 4.6px; font-weight: 700; }
.h-value { font-family: var(--mono); font-size: 15px; font-weight: 700; letter-spacing: -0.5px; }
.h-n { font-family: var(--mono); font-size: 4.2px; }

/* A chart next to a table */
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 44px; align-items: start; }

.report-line { max-width: 46em; font-size: clamp(19px, 2vw, 22px); font-weight: 500; line-height: 1.4; letter-spacing: -0.01em; text-wrap: balance; }
.callout { padding: 16px 20px; border-left: 3px solid var(--brand); border-radius: 0 12px 12px 0; background: color-mix(in srgb, var(--brand) 9%, transparent); font-size: 17px; line-height: 1.45; text-wrap: balance; }

/* Takeaway: large text on a panel tinted with the accent color */
.report-panel.tinted {
  padding: 56px;
  background: radial-gradient(circle at 0 0, color-mix(in srgb, var(--accent-color) 30%, transparent), transparent 62%), var(--panel-bg);
}
.takeaway::before { content: ""; display: block; width: 48px; height: 4px; margin-bottom: 26px; border-radius: 2px; background: var(--accent-color); }
.takeaway h3 { max-width: 15em; font-size: clamp(30px, 4.4vw, 52px); font-weight: 800; line-height: 1.05; letter-spacing: -0.035em; }
.takeaway p { max-width: 36em; margin-top: 18px; font-size: clamp(18px, 2vw, 22px); line-height: 1.45; color: #D8D8DE; text-wrap: balance; }
.takeaway small { display: block; margin-top: 32px; font-size: 13px; color: #9A9AA6; }

/* Feature panels: a title and a few sentences on one side, 1 or 2 phones on the other */
.feature-panel {
  position: relative;
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 56px;
  padding: 80px 56px 56px;
  overflow: hidden;
  border-radius: 24px;
  color: #fff;
}
.feature-panel.on-light { color: #0E1A2B; }
.feature-panel.flip .feature-text { order: 2; }
.feature-text h3, .flow-note h3 { font-size: 32px; font-weight: 800; line-height: 1.1; letter-spacing: -0.03em; }
.feature-text p, .flow-note p { max-width: 46ch; margin-top: 16px; font-size: 18px; line-height: 1.55; }
.feature-phones { display: flex; justify-content: center; align-items: flex-start; gap: 24px; container-type: inline-size; }
.feature-phones .phone { --pw: min(212px, 46cqw); flex: none; width: var(--pw); }
.feature-phones .phone + .phone { margin-top: 40px; }
.feature-phones.single .phone { --pw: min(232px, 64cqw); }
/* Three phones: the phones get the wider column and step down from left to right */
.feature-panel.triple { grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); gap: 48px; }
.feature-panel.triple.flip { grid-template-columns: minmax(0, 8fr) minmax(0, 5fr); }
.triple .feature-phones { gap: 16px; }
.triple .feature-phones .phone { --pw: min(212px, calc((100cqw - 32px) / 3)); }
.triple .feature-phones .phone:nth-child(2) { margin-top: 32px; }
.triple .feature-phones .phone:nth-child(3) { margin-top: 64px; }
/* One desktop screen: the screen gets the wider column */
.feature-panel.wide-screen { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; }
.feature-panel.wide-screen.flip { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); }
.feature-screen { container-type: inline-size; }
.feature-screen .browser { border: 1px solid rgba(14, 26, 43, 0.1); box-shadow: 0 12px 32px rgba(14, 26, 43, 0.16); }

/* Title and text under a walkthrough */
.flow-note { padding: 8px 56px 56px; }

/* Walkthroughs: screens in one row, in order, numbered, with a caption and an arrow to the next */
.flow-panel { position: relative; grid-column: 1 / -1; overflow: hidden; border-radius: 24px; color: #fff; }
.flow-panel.on-light { color: #0E1A2B; }

.flow-nav { position: absolute; top: 14px; right: 16px; z-index: 2; display: none; gap: 8px; }
.flow-panel.scrolls .flow-nav { display: flex; }
.flow-nav button {
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: opacity 0.15s, background 0.15s;
}
.flow-nav button:hover:not(:disabled) { background: rgba(127, 127, 127, 0.25); }
.flow-nav button:disabled { opacity: 0.3; cursor: default; }
.flow-nav button:focus-visible, .flow-scroller:focus-visible { outline: 3px solid currentColor; outline-offset: 2px; }

.flow-scroller {
  display: flex;
  overflow-x: auto;
  padding: 72px 32px 36px;
  scroll-snap-type: x mandatory;
  scroll-padding: 0 32px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.flow-scroller::-webkit-scrollbar { display: none; }
.flow-scroller:focus-visible { outline-offset: -6px; border-radius: 24px; }
/* Soft fade on the right edge while there is more to scroll to */
.flow-panel.scrolls:not(.at-end) .flow-view {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 80px), transparent);
}

/* A walkthrough without prev/next buttons never scrolls: its screens share the panel's width,
   shrinking evenly when the panel is narrow. Each phone is as wide as its step (100cqw). */
.flow-panel.fit .flow-scroller { overflow: visible; scroll-snap-type: none; }
.flow-panel.fit .flow-track { width: 100%; justify-content: center; --gap: clamp(20px, 3.2vw, 40px); }
.flow-panel.fit .flow-step { flex: 1 1 0; min-width: 0; max-width: 212px; }
.flow-panel.fit .flow-device { width: 100%; container-type: inline-size; }
.flow-panel.fit .flow-device .phone { --pw: 100cqw; width: 100%; }
.flow-track { --gap: 56px; display: flex; gap: var(--gap); margin: 0 auto; padding: 0; list-style: none; counter-reset: step; }
.flow-step { display: flex; flex: none; flex-direction: column; align-items: center; gap: 14px; scroll-snap-align: start; counter-increment: step; }

.flow-num {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid currentColor;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}
.flow-num::before { content: counter(step); }
.flow-cap { max-width: 200px; font-size: 14px; font-weight: 500; text-align: center; }
/* A branch: a smaller, unnumbered side path, set a little lower than the main steps */
.flow-step.branch { counter-increment: none; padding-top: 56px; }
.flow-step.branch .flow-device .phone { --pw: 160px; }
.flow-step.branch .flow-cap { max-width: 160px; font-size: 13px; opacity: 0.85; }

.flow-device { position: relative; }
.flow-device .phone { --pw: 212px; width: var(--pw); }
.flow-device .browser { width: 720px; border: 1px solid rgba(14, 26, 43, 0.1); border-radius: 10px; box-shadow: 0 12px 32px rgba(14, 26, 43, 0.16); }
.flow-device .browser-bar { gap: 6px; height: 24px; padding: 0 12px; }
.flow-device .browser-bar i { width: 8px; height: 8px; }

/* Thin line and small arrow from each screen to the next */
.flow-step:not(:last-child) .flow-device::before,
.flow-step:not(:last-child) .flow-device::after { content: ""; position: absolute; top: 50%; opacity: 0.55; }
.flow-step:not(:last-child) .flow-device::before { left: calc(100% + 10px); width: calc(var(--gap) - 20px); height: 1px; background: currentColor; }
.flow-step:not(:last-child) .flow-device::after {
  left: calc(100% + var(--gap) - 18px);
  width: 7px;
  height: 7px;
  margin-top: -3.5px;
  border-top: 1px solid currentColor;
  border-right: 1px solid currentColor;
  transform: rotate(45deg);
}

/* Tap markers (Spotify status and comments, BMW walkthrough): a soft ring on the element you tap, and a
   curved arrow from it to the screen it opens. script.js (tapArrows) places the rings and draws the arrows. */
.flow-panel.taps .flow-step .flow-device::before, .flow-panel.taps .flow-step .flow-device::after { display: none; }
.has-taps { position: relative; }
.has-taps .screen, .has-taps .shot { position: relative; }
.tap {
  position: absolute;
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.45);
}
.tap::after { content: ""; position: absolute; inset: -2px; border: 2px solid rgba(255, 255, 255, 0.75); border-radius: 50%; animation: tap-pulse 2.2s ease-out infinite; }
@keyframes tap-pulse {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(1.9); opacity: 0; }
}
.tap-arrows { position: absolute; top: 0; left: 0; overflow: visible; pointer-events: none; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6)); }
.tap-arrows path { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* On a white panel (BMW) the arrows take the project's brand color (the rings sit on the screens, so they stay white) */
.on-light .tap-arrows { filter: none; }
/* A ring's label (Friend Shuffle), styled like the walkthrough captions, with a thin line to the ring */
.tap-label { position: absolute; font-size: 14px; font-weight: 500; line-height: 1.3; white-space: nowrap; }
.tap-arrows .tap-line { stroke-width: 1.2; opacity: 0.9; }
.on-light .tap-arrows path { stroke: var(--brand); stroke-width: 1.8; }
/* A walkthrough of wide screens with arrows: more room above the row, where the arrows run */
.flow-panel.taps:not(.fit) .flow-scroller { padding-top: 96px; }

/* A short description under each walkthrough caption */
/* (width 0 plus min-width: it fills its step without making the step wider than its screen) */
.flow-desc { width: 0; min-width: min(100%, 580px); margin-top: -6px; font-size: 15px; line-height: 1.55; text-align: center; }

/* ---------- Narrow screens: a walkthrough that fits its panel stacks, and its arrows point down ---------- */

@media (max-width: 900px) {
  .flow-panel.fit .flow-track { flex-direction: column; align-items: center; --gap: 52px; }
  .flow-panel.fit .flow-step { flex: none; width: 190px; max-width: 100%; }
}

/* ---------- Phone ---------- */

@media (max-width: 760px) {
  .nav { padding: 12px 16px; }
  .nav-links { gap: 14px; }
  main { padding: 0 16px; }
  .section { padding: 32px 0; }
  .section-head { margin-bottom: 24px; }
  .hero { padding: 64px 0 36px; }
  .panel { padding: 28px 20px; border-radius: 28px; }

  .projects, .project-cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  /* One column: the two home columns dissolve and the cards follow their list order, with no offset */
  .project-col { display: contents; }
  .project-cols .card-more { height: 200px; }
  #project-list { margin-inline: 0; padding: 16px; border-radius: 28px; }
  /* One column: the "coming soon" tile is as tall as a tile with a one-line title (picture, text, border) */
  .tiles .card-more { height: calc((100cqw - 2px) * 10 / 16 + 22px * 2 + 28px * 1.15 + 2px); }
  .card.featured .card-image { aspect-ratio: 16 / 10; }
  .card-head h3, .card.featured .card-head h3 { font-size: 28px; }
  .card-body { padding: 22px 20px; }
  /* Slightly smaller pills on cards, so three of them fit on one row */
  .card .tags li { margin-right: 6px; padding: 5px 10px; font-size: 12px; }
  .card-more { padding: 32px 20px; }

  /* About: one column of panels (bio, photos, pills, work) */
  .about-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cell { padding: 24px 20px; border-radius: 20px; }
  .cell-bring { order: 3; }
  .cell-work { order: 4; }
  .prints { width: 64%; margin: 16px auto; }
  .about-lists .tags { column-gap: 6px; }
  /* Slightly smaller pills, so the long skills still pair up on one row */
  .about-lists .tags li { padding: 5px 9px; font-size: 12px; }

  .contact { padding-bottom: 16px; }
  .contact .panel { padding: 44px 20px 20px; }
  .panel-footer { margin-top: 44px; }
  .project-intro { padding: 20px 0 32px; }
  /* 12px from the screen edges (main has 16px of padding) */
  .project-body { margin: 0 -4px; border-radius: 20px; }
  /* Small enough that a three-word title stays on one line */
  .project-title { gap: 10px; }
  .project-title h1 { font-size: 8.2vw; }
  .project-title .logo { width: 7.4vw; height: 7.4vw; }
  .back-link { margin-bottom: 28px; }
  .project-grid { grid-template-columns: minmax(0, 1fr); }
  .work-panel { border-radius: 20px; }
  .work-panel.wide { aspect-ratio: 3 / 2; }
  /* Report panels: everything in one column; tables scroll sideways inside their panel */
  .report-panel > :not(.panel-label) + * { margin-top: 26px; }
  .report-panel.half { padding: 24px 20px; }
  /* Chart text is sized in chart units, so it is set larger here to stay readable in a narrow panel */
  .f-label { font-size: 4.2px; }
  .f-label.small, .f-value.small, .f-small { font-size: 3.5px; }
  .f-value { font-size: 4.3px; }
  .f-value.big { font-size: 4.8px; }
  .report-panel.half .panel-label { margin: -8px 0 22px -2px; }
  .method > li { gap: 16px; padding-bottom: 30px; }
  .method h3 { font-size: 20px; }
  .def-grid { grid-template-columns: minmax(0, 1fr); }
  .heat-cells { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .split { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .data-table { font-size: 14px; }
  .report-panel.tinted { padding: 32px 20px; }
  .takeaway small { margin-top: 24px; }
  .work-panel.hero-panel { aspect-ratio: 4 / 3; }
  .work-panel.hero-panel.like-card { aspect-ratio: 16 / 10; }
  .panel-label { top: 16px; left: 18px; font-size: 12px; }
  .info-panel { padding: 16px 20px 28px; border-radius: 20px; }
  .info-panel .panel-label { margin: 0 0 24px -2px; }
  .story { grid-template-columns: 1fr; gap: 32px; }
  .fact-pills { column-gap: 5px; }
  .fact-pills li { padding: 3px 7px; font-size: 11px; }
  .findings { padding: 28px 22px; gap: 22px; }
  .feature-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 60px 20px 28px; border-radius: 20px; }
  .feature-panel.flip .feature-text { order: 0; }
  .feature-text h3, .flow-note h3 { font-size: 27px; }
  .feature-text p, .flow-note p { font-size: 17px; }
  .feature-phones { gap: 12px; }
  .feature-phones .phone + .phone { margin-top: 24px; }
  /* Three phones: two on the first row, the third centered under them */
  .feature-panel.triple, .feature-panel.triple.flip, .feature-panel.wide-screen, .feature-panel.wide-screen.flip { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .triple .feature-phones { flex-wrap: wrap; gap: 16px 12px; }
  .triple .feature-phones .phone { --pw: min(212px, 46cqw); }
  .triple .feature-phones .phone:nth-child(2) { margin-top: 24px; }
  .triple .feature-phones .phone:nth-child(3) { margin-top: 0; }
  .flow-note { padding: 4px 20px 28px; }
  .flow-panel { border-radius: 20px; }
  .flow-scroller { padding: 64px 20px 28px; scroll-padding: 0 20px; }
  .flow-track { --gap: 44px; }
  .flow-device .phone { --pw: 190px; }
  .flow-device .browser { width: min(78vw, 720px); border-radius: 8px; }
  .flow-device .browser-bar { height: 16px; padding: 0 8px; gap: 4px; }
  .flow-device .browser-bar i { width: 5px; height: 5px; }
  .flow-cap { max-width: 170px; }
  .flow-desc { min-width: 100%; font-size: 14px; }
  .flow-panel.taps:not(.fit) .flow-scroller { padding-top: 84px; }
}

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee-track { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 8px; animation: none; }
  .marquee-track .dup { display: none; }
  .tap::after, .hero::before { animation: none; }
  .print, .card-image .comp { transition: none; }
  .card:hover .card-image .comp { transform: none; }
}