/* ==========================================================================
   Alex Jammali · motion portfolio
   One typeface (Inter), RoHaus palette only, hairline grid, motion as content.
   ========================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-var/Inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-var/Inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-var/Inter-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap;
  src: url("/assets/fonts/inter-var/Inter-italic-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ---------- tokens (RoHaus palette only) ---------- */
:root {
  --cream: #fff9f1;
  --peach: #f6e8dc;
  --ink: #3c2f2f;
  --red: #a94b46;
  --terracotta: #b85d3a;
  --brown: #a87c65;
  --yellow: #dfaf6b;
  --green: #7a8c73;
  --blue: #5d7b7a;
  --pink: #ffc0ae;

  --bg: var(--cream);
  --fg: var(--ink);
  --fg-60: rgba(60, 47, 47, 0.74);
  --fg-30: rgba(60, 47, 47, 0.3);
  --hair: var(--ink);
  --accent: var(--red);

  --font: "Inter", "Helvetica Neue", Arial, sans-serif;
  --gutter: 24px;
  --nav-h: 58px;
  --ease: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  color-scheme: light;
}
@media (max-width: 700px) { :root { --gutter: 16px; --nav-h: 52px; } }

.ink, [data-theme="ink"] {
  --bg: var(--ink);
  --fg: var(--cream);
  --fg-60: rgba(255, 249, 241, 0.64);
  --fg-30: rgba(255, 249, 241, 0.3);
  --hair: rgba(255, 249, 241, 0.42);
  --accent: var(--pink);
  background-color: var(--bg);
  color: var(--fg);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p, h1, h2, h3, h4, figure, dl, dd, ul, ol, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--pink); color: var(--ink); }
:focus-visible { outline: 2px solid var(--terracotta); outline-offset: 3px; border-radius: 2px; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 10001; background: var(--ink); color: var(--cream); padding: 10px 14px; font-size: 14px; transition: top .2s; }
.skip:focus { top: 12px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.wrap { padding-inline: var(--gutter); }
.rule { border: 0; border-top: 1px solid var(--hair); margin: 0; }

/* ---------- type ---------- */
.t-micro { font-size: 12px; line-height: 1.35; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.t-micro.dim, .dim { color: var(--fg-60); }
.t-display { font-size: clamp(42px, 7vw, 124px); font-weight: 500; line-height: 0.95; letter-spacing: -0.048em; text-wrap: balance; }
.t-display em, .t-h1 em, .t-h2 em, .t-lead em, .statement em, .mega em { font-style: italic; font-weight: 300; letter-spacing: -0.05em; }
.t-h1 { font-size: clamp(36px, 5.4vw, 92px); font-weight: 500; line-height: 0.98; letter-spacing: -0.045em; text-wrap: balance; }
.t-h2 { font-size: clamp(30px, 3.9vw, 64px); font-weight: 500; line-height: 1.02; letter-spacing: -0.04em; text-wrap: balance; }
.t-h3 { font-size: clamp(22px, 2vw, 30px); font-weight: 500; line-height: 1.15; letter-spacing: -0.025em; }
.t-lead { font-size: clamp(21px, 2.05vw, 32px); font-weight: 400; line-height: 1.24; letter-spacing: -0.022em; text-wrap: pretty; }
.prose p + p { margin-top: 1em; }
.prose { max-width: 60ch; text-wrap: pretty; }
.prose a, .link { background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat; transition: background-size .5s var(--ease); }
.prose a:hover, .link:hover { background-size: 0 1px; background-position: 100% 100%; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- grain + cursor ---------- */
.grain { position: fixed; inset: -50%; z-index: 9000; pointer-events: none; opacity: 0.085;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .235 0 0 0 0 .184 0 0 0 0 .184 0 0 0 1.1 -.35'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(5) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-4%)} 60%{transform:translate(-4%,-1%)} 80%{transform:translate(3%,3%)} 100%{transform:translate(0,0)} }

.cursor { position: fixed; left: 0; top: 0; z-index: 9500; pointer-events: none; display: none; }
.has-cursor .cursor { display: block; }
.cursor-dot { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--ink); transition: transform .35s var(--ease), opacity .2s; }
.cursor-label { position: absolute; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%; background: var(--cream); color: var(--ink);
  display: grid; place-items: center; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; text-align: center;
  transform: scale(0); transition: transform .45s var(--ease); box-shadow: 0 6px 30px rgba(60, 47, 47, 0.18); }
.cursor.is-label .cursor-label { transform: scale(1); }
.cursor.is-label .cursor-dot { transform: scale(0); }
.cursor.is-link .cursor-dot { transform: scale(3.2); opacity: .25; }
.cursor.on-ink .cursor-dot { background: var(--cream); }
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }

/* ---------- loader ---------- */
.loader { position: fixed; inset: 0; z-index: 9800; background: var(--ink); color: var(--cream); display: none; }
.js-loader .loader { display: block; }
.loader-inner { position: absolute; inset: var(--gutter); display: grid; grid-template-rows: auto 1fr auto; }
.loader-top, .loader-bottom { display: flex; justify-content: space-between; gap: 16px; }
.loader-words { align-self: end; overflow: hidden; padding-left: 0.12em; margin-left: -0.12em; height: 1.32em; font-size: clamp(34px, 6vw, 96px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.2; }
.loader-words { position: relative; }
.loader-words span { display: block; position: absolute; left: 0.12em; top: 0; white-space: nowrap; }
.loader-words em { font-style: italic; font-weight: 300; }
.loader-count { font-size: clamp(64px, 16vw, 260px); font-weight: 300; letter-spacing: -0.06em; line-height: .8; font-variant-numeric: tabular-nums; text-align: right; }
.loader-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--pink); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- nav ---------- */
.nav { position: fixed; z-index: 8000; top: 0; left: 0; right: 0; height: var(--nav-h); padding-inline: var(--gutter);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  color: var(--fg); background: color-mix(in srgb, var(--bg) 88%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair); transition: transform .6s var(--ease), background-color .4s, color .4s; }
.nav.is-hidden { transform: translateY(-101%); }
.nav-l, .nav-r { display: flex; align-items: center; gap: 26px; white-space: nowrap; min-width: 0; }
.nav-r { justify-content: flex-end; }
.nav-name { font-size: 15px; font-weight: 600; letter-spacing: -0.02em; }
.nav-role { color: var(--fg-60); }
.nav a.t-micro, .nav button.t-micro { position: relative; }
.nav a.t-micro::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 100% 50%; transition: transform .5s var(--ease); }
.nav a.t-micro:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: 0 50%; }
.nav sup { font-size: 9px; vertical-align: 4px; margin-left: 2px; }
.nav-logo img { width: 36px; height: 36px; transition: transform .8s var(--ease); }
.nav-logo:hover img { transform: rotate(-12deg) scale(1.06); }
.clock .colon { animation: blink 2s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.menu-btn { display: none; }
/* narrower screens: drop the clock, then the role line, then fold into Menu, so the links never touch the logo */
@media (max-width: 1520px) { .nav-r > .t-micro.dim { display: none; } }
@media (max-width: 1240px) { .nav-role { display: none; } .nav-r { gap: 20px; } }
@media (max-width: 1140px) {
  .nav-l .t-micro, .nav-r .t-micro:not(.menu-btn), .nav-role { display: none; }
  .menu-btn { display: inline-flex; }
}

.menu { position: fixed; inset: 0; z-index: 7900; background: var(--ink); color: var(--cream); padding: calc(var(--nav-h) + 24px) var(--gutter) var(--gutter);
  display: flex; flex-direction: column; justify-content: space-between; clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .8s var(--ease-io), visibility 0s .8s; }
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .8s var(--ease-io), visibility 0s; }
.menu-links a { display: block; font-size: clamp(44px, 13vw, 96px); font-weight: 500; letter-spacing: -0.05em; line-height: 1.02; border-bottom: 1px solid rgba(255, 249, 241, 0.3); padding: 6px 0; }
.menu-links a em { font-style: italic; font-weight: 300; }
.menu-foot { display: flex; justify-content: space-between; gap: 16px; }
.menu-open .nav { color: var(--cream); background: transparent; border-color: rgba(255, 249, 241, 0.3); -webkit-backdrop-filter: none; backdrop-filter: none; }

/* ---------- hero ---------- */
.hero { padding: calc(var(--nav-h) + clamp(28px, 6vh, 72px)) var(--gutter) 0; min-height: 100svh; display: flex; flex-direction: column; }
.hero-top { display: flex; justify-content: space-between; gap: 16px; margin-bottom: clamp(18px, 3vh, 34px); }
.statement { font-size: clamp(36px, 5vw, 96px); font-weight: 500; line-height: 1.0; letter-spacing: -0.047em; max-width: 30ch; text-wrap: pretty; }
[data-page="home"] .nav-role { display: none; }
.pill { display: inline-block; position: relative; width: 1.62em; height: 0.8em; margin: 0 0.06em; vertical-align: -0.04em; border-radius: 0.12em; overflow: hidden; background: var(--peach);
  transition: width .9s var(--ease), transform .9s var(--ease); }
.pill video, .pill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pill.wide { width: 2.1em; }
.pill img { animation: pill-drift 9s ease-in-out infinite alternate; transform-origin: 50% 60%; }
@keyframes pill-drift { from { transform: scale(1.02) translateX(-2%); } to { transform: scale(1.14) translateX(2%); } }

.js:not(.reduced) .statement .pill { transform: scale(0); }
.js:not(.reduced) .statement.pills-in .pill { transform: scale(1); transition: transform 1.1s var(--ease) calc(0.7s + var(--i, 0) * 0.14s); }
.statement.pills-in.settled .pill { transition: transform .6s var(--ease); }
.has-cursor .statement.pills-in .pill:hover { transform: scale(1.35); z-index: 2; transition-delay: 0s; }
.hero-foot { margin-top: auto; padding-block: 28px 18px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hair); }
.hero-foot > div { padding: 14px 18px 4px 0; }
.hero-foot > div + div { padding-left: 18px; border-left: 1px solid var(--hair); }
.hero-foot dt { margin-bottom: 6px; }
.hero-foot dd { font-size: 15px; line-height: 1.4; letter-spacing: -0.01em; }
.hero-foot a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.hero-cue { padding-bottom: 20px; display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
/* one clear button instead of a scroll line next to a pill (Alex, 2026-10-24) */
.see-work .arr { display: inline-block; transition: transform .6s var(--ease); }
.see-work:hover .arr { transform: translateY(3px); }
.scroll-cue { display: inline-flex; align-items: center; gap: 10px; }
.scroll-cue i { display: block; width: 1px; height: 26px; background: var(--fg-30); position: relative; overflow: hidden; }
.scroll-cue i::after { content: ""; position: absolute; left: 0; top: -100%; width: 1px; height: 100%; background: var(--fg); animation: cue 1.8s var(--ease-io) infinite; }
@keyframes cue { 0% { top: -100%; } 60%, 100% { top: 100%; } }
@media (max-width: 860px) {
  .hero { min-height: auto; }
  .hero-foot { grid-template-columns: 1fr 1fr; margin-top: 40px; }
  .hero-foot > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero-foot > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
  .statement { max-width: none; }
}

/* ---------- reel (letterboxed showreel that opens up on scroll) ---------- */
.reel { position: relative; height: 230vh; }
.reel-sticky { position: sticky; top: 0; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.reel-frame { position: absolute; inset: 0; background: var(--ink); clip-path: inset(14% 16% 14% 16% round 6px); will-change: clip-path; }
.reel-frame video, .reel-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; transform: scale(1.06); }
.reel-frame .on { opacity: 1; }
.reel-ui { position: absolute; inset: 0; color: var(--cream); pointer-events: none; }
.reel-bar { position: absolute; left: 0; right: 0; height: 9%; background: var(--ink); z-index: 2; }
.reel-bar.top { top: 0; } .reel-bar.bottom { bottom: 0; }
.reel-hud { position: absolute; z-index: 3; left: 3.2%; right: 3.2%; display: flex; justify-content: space-between; gap: 16px; text-shadow: 0 1px 12px rgba(60, 47, 47, 0.5); }
.reel-hud.top { top: calc(9% + 18px); } .reel-hud.bottom { bottom: calc(9% + 16px); align-items: end; }
.rec::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--red); margin-right: 8px; vertical-align: 1px; animation: blink 1.4s steps(1) infinite; box-shadow: 0 0 0 2px rgba(255, 249, 241, 0.25); }
.reel-sub { position: absolute; z-index: 3; left: 50%; bottom: calc(9% + 54px); transform: translateX(-50%); max-width: 80%; text-align: center;
  font-size: clamp(16px, 1.7vw, 26px); font-style: italic; font-weight: 300; letter-spacing: -0.02em; text-shadow: 0 1px 16px rgba(60, 47, 47, 0.6); }
.corners { position: absolute; z-index: 3; inset: calc(9% + 10px) 2%; }
.corners i { position: absolute; width: 22px; height: 22px; border: 1.5px solid rgba(255, 249, 241, 0.85); }
.corners i:nth-child(1) { left: 0; top: 0; border-right: 0; border-bottom: 0; }
.corners i:nth-child(2) { right: 0; top: 0; border-left: 0; border-bottom: 0; }
.corners i:nth-child(3) { left: 0; bottom: 0; border-right: 0; border-top: 0; }
.corners i:nth-child(4) { right: 0; bottom: 0; border-left: 0; border-top: 0; }
.reel-title { position: absolute; z-index: 4; inset: 0; display: grid; place-items: center; text-align: center; color: var(--cream); pointer-events: none; }
.reel-title .t-display { font-size: clamp(30px, 4.6vw, 84px); max-width: 15ch; margin: 10px auto 0; text-shadow: 0 2px 40px rgba(60, 47, 47, 0.45); }
@media (max-width: 700px) {
  .reel { height: 170vh; }
  .reel-frame { clip-path: inset(22% 6% 22% 6% round 4px); }
  .corners i { width: 14px; height: 14px; }
}

/* ---------- section heads ---------- */
.sec-head { display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 16px 24px; padding: clamp(64px, 10vw, 140px) var(--gutter) 18px; }
.sec-head .t-h1 sup { font-size: .32em; font-weight: 400; letter-spacing: 0; vertical-align: .95em; margin-left: .1em; }
.sec-head-tools { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }

/* ---------- filters / view toggle ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 7px 11px 6px; border: 1px solid var(--fg-30); border-radius: 999px; transition: background .3s, color .3s, border-color .3s; }
.chip sup { font-size: 9px; margin-left: 3px; color: var(--fg-60); vertical-align: 3px; }
.chip:hover { border-color: var(--fg); }
.chip[aria-pressed="true"] { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.chip[aria-pressed="true"] sup { color: inherit; opacity: .7; }
.views { display: flex; gap: 2px; padding: 3px; border: 1px solid var(--fg-30); border-radius: 999px; }
.views .chip { border: 0; }

/* ---------- tiles (grid view) ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--hair); border-left: 1px solid var(--hair); margin-inline: var(--gutter); }
.tile { background: var(--bg); position: relative; border-right: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.tiles.is-index { border-left: 0; }
.tiles.is-index .tile { border-right: 0; }
.tile > a { display: flex; flex-direction: column; height: 100%; }
.media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--peach); isolation: isolate; }
.media > img, .media > video, .media .layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.layer { opacity: 0; transition: opacity 1.1s ease; }
.layer.on { opacity: 1; }
[data-mode="stop"] .layer { transition: none; }
.box.contain > img, .box.contain .media-zoom > img { object-fit: contain; }
.kb { animation: kb 7s linear forwards; }
@keyframes kb { from { transform: scale(1); } to { transform: scale(1.08); } }
.media-zoom { position: absolute; inset: 0; transition: transform 1.4s var(--ease); }
.tile:hover .media-zoom { transform: scale(1.035); }
.tile-cap { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 14px; padding: 11px 12px 12px; border-top: 1px solid var(--hair);
  font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; transition: background .35s, color .35s; }
.tile-cap .ttl { text-align: right; }
.tile-cap .cat { color: var(--fg-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tile:hover .tile-cap, .tile:focus-within .tile-cap { background: var(--fg); color: var(--bg); }
.tile:hover .tile-cap .cat, .tile:focus-within .tile-cap .cat { color: inherit; opacity: .7; }
.tile .role, .tile .yr { display: none; }
/* one line on what changed or what was delivered, under the caption (grid view only) */
.tile .out { display: block; padding: 0 12px 12px; margin-top: -3px; font-size: 14px; line-height: 1.35; color: var(--fg-60); }
.tiles.is-index .tile .out { display: none; }
.tile.is-concept .media::after { content: "Concept study"; position: absolute; z-index: 5; left: 10px; top: 10px; font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase;
  background: var(--cream); color: var(--ink); padding: 5px 8px 4px; border-radius: 999px; }
.tile.is-hidden { display: none; }
.ext::after { content: " \2197"; }

/* device-on-color tiles */
.on-color { display: grid; place-items: center; }
.on-color.c-peach { background: var(--peach); } .on-color.c-pink { background: var(--pink); } .on-color.c-blue { background: var(--blue); }
.on-color.c-green { background: var(--green); } .on-color.c-yellow { background: var(--yellow); } .on-color.c-ink { background: var(--ink); }
.on-color.c-brown { background: var(--brown); } .on-color.c-cream { background: var(--cream); } .on-color.c-terracotta { background: var(--terracotta); }
.phone { position: relative; width: 46%; aspect-ratio: 9 / 19.5; border: 5px solid var(--ink); border-radius: 30px; overflow: hidden; background: var(--ink);
  box-shadow: 0 30px 60px -20px rgba(60, 47, 47, 0.45), 0 10px 20px -10px rgba(60, 47, 47, 0.3); }
.phone > video, .phone > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.phone.bare { border: 0; background: transparent; box-shadow: none; overflow: hidden; aspect-ratio: auto; filter: drop-shadow(0 22px 30px rgba(60, 47, 47, 0.28)); }
.phone.bare > video, .phone.bare > img { position: static; display: block; width: 100%; height: auto; max-width: none; object-fit: initial; }
.phone.bare.s-unstuck { aspect-ratio: 400 / 823; border-radius: 15% / 7.3%; }
.phone.bare.s-unstuck > video { width: 110%; margin: -1.5% 0 0 -6.25%; }
.phone.bare.s-wander { aspect-ratio: 408 / 823; border-radius: 15% / 7.4%; }
.phone.bare.s-wander > video { width: 104.66%; margin: -1.23% 0 0 -2.45%; }
.phone.bare.s-tarot { aspect-ratio: 408 / 823; border-radius: 15% / 7.4%; }
.phone.bare.s-tarot > video { width: 101.23%; margin: -0.49% 0 0 -1.23%; }
.phone.bare.s-maps { border-radius: 14% / 6.8%; aspect-ratio: 422 / 874; }
.media-zoom > video, .media-zoom > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.on-color .media-zoom { display: grid; place-items: center; }
.media-zoom > .phone, .media-zoom > .duo, .media-zoom > .browser { position: relative; }
.house { width: 50%; image-rendering: pixelated; border-radius: 10px; transform: rotate(-4deg) translateX(10%); box-shadow: 0 20px 40px -18px rgba(60, 47, 47, 0.5); }
.duo .house + .phone { width: 34%; transform: rotate(3deg) translateX(-8%); }
.phone > img.screen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* website tiles: a browser window that scrolls the real site */
.browser { width: 82%; height: 80%; background: var(--cream); border-radius: 8px; overflow: hidden; box-shadow: 0 30px 60px -24px rgba(60, 47, 47, 0.55); container-type: size; }
.browser-bar { position: relative; z-index: 2; height: 24px; display: flex; gap: 5px; align-items: center; padding: 0 9px; background: var(--peach); border-bottom: 1px solid rgba(60, 47, 47, 0.14); }
.browser-bar i { width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.browser-bar i:nth-child(2) { background: var(--yellow); } .browser-bar i:nth-child(3) { background: var(--green); }
.browser-bar span { margin-left: 8px; font-size: 11px; letter-spacing: .02em; color: var(--fg-60); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.browser-page { position: absolute; left: 0; right: 0; top: 24px; animation: site-scroll 22s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.browser-page img { width: 100%; height: auto; display: block; }
.browser-page.is-video { bottom: 0; animation: none; }
.browser-page.is-video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
@keyframes site-scroll { 0%, 24% { transform: translateY(0); } 94%, 100% { transform: translateY(calc(-100% + 100cqh - 24px)); } }
.ticker-roll { animation: roll 16s linear infinite; }
@keyframes roll { to { transform: translateY(-50%); } }
.ticker { height: 7.6em; position: relative; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.duo { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.duo > img { position: relative; height: auto; }
.duo .paper { width: 40%; transform: rotate(-5deg) translateX(8%); box-shadow: 0 20px 40px -18px rgba(60, 47, 47, 0.5); }
.duo .phone { width: 36%; transform: rotate(3deg) translateX(-6%); }

/* type tile */
.type-tile { position: absolute; inset: 0; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; background: var(--ink); color: var(--cream); }
.type-tile .big { font-size: clamp(30px, 3.4vw, 54px); font-weight: 500; letter-spacing: -0.045em; line-height: .98; }
.type-tile .big em { font-style: italic; font-weight: 300; }
.ticker { overflow: hidden; border-top: 1px solid rgba(255, 249, 241, 0.3); padding-top: 10px; }
.ticker-row { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; font-size: 13px; line-height: 1.9; }
.ticker-row span:nth-child(2) { color: rgba(255, 249, 241, 0.7); }

/* ---------- index view ---------- */
.tiles.is-index { grid-template-columns: 1fr; }
.tiles.is-index .tile > a { display: grid; grid-template-columns: 70px minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 70px; align-items: baseline; gap: 16px; padding: 18px 12px 16px; }
.tiles.is-index .media { display: none; }
.tiles.is-index .tile-cap { display: contents; }
.tiles.is-index .tile-cap > * { font-size: 12px; }
.tiles.is-index .tile-cap .ttl { order: -1; grid-column: 2; grid-row: 1; text-align: left; font-size: clamp(24px, 2.6vw, 40px); text-transform: none; letter-spacing: -0.035em; font-weight: 500; line-height: 1; transition: transform .6s var(--ease); }
.tiles.is-index .tile-cap .num { grid-column: 1; grid-row: 1; }
.tiles.is-index .tile-cap .cat { grid-column: 3; grid-row: 1; }
.tiles.is-index .tile .role { display: block; grid-column: 4; grid-row: 1; color: var(--fg-60); font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tiles.is-index .tile .yr { display: block; grid-column: 5; grid-row: 1; text-align: right; font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.tiles.is-index .tile:hover .tile-cap { background: none; color: inherit; }
.tiles.is-index .tile:hover .ttl { transform: translateX(14px); }
.tiles.is-index .tile { transition: background .3s; }
.tiles.is-index .tile:hover { background: var(--peach); }
.tiles.is-index .tile.is-concept .ttl::after { content: "Concept"; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; font-weight: 500; vertical-align: .9em; margin-left: 8px; color: var(--fg-60); }
.preview { position: fixed; left: 0; top: 0; z-index: 8500; width: clamp(220px, 22vw, 340px); aspect-ratio: 4 / 5; pointer-events: none; overflow: hidden; opacity: 0; transform: scale(.85);
  transition: opacity .35s, transform .5s var(--ease); background: var(--peach); }
.preview.on { opacity: 1; transform: scale(1); }
.preview .media { position: absolute; inset: 0; aspect-ratio: auto; }
@media (max-width: 1000px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) {
  .tiles { grid-template-columns: 1fr; }
  .tile-cap .cat { display: none; }
  .tiles.is-index .tile > a { grid-template-columns: 44px 1fr auto; }
  .tiles.is-index .tile-cap .cat, .tiles.is-index .tile .role { display: none; }
  .tiles.is-index .tile .yr { grid-column: 3; }
  .sec-head { grid-template-columns: 1fr; }
  .sec-head-tools { justify-content: flex-start; }
}

/* ---------- marquee ---------- */
.marquee { overflow: hidden; border-block: 1px solid var(--hair); padding: 14px 0 12px; white-space: nowrap; }
.marquee-track { display: inline-flex; gap: 0; animation: marq 38s linear infinite; will-change: transform; }
.marquee-track > span { font-size: clamp(30px, 4.4vw, 70px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.2; padding-right: .5em; }
.marquee-track > span em { font-style: italic; font-weight: 300; }
.marquee-track .dot { display: inline-block; width: .26em; height: .26em; border-radius: 50%; background: var(--accent); vertical-align: .2em; margin: 0 .55em; }
.marquee-track > span > .dot:last-child { margin-right: .05em; } /* the span's own padding makes up the rest */
/* the name we chose: underlined with a thick green marker, drawn by hand */
.marquee-track .picked { position: relative; z-index: 0; display: inline-block; padding: 0 .06em 0 .02em; }
.marquee-track .picked .mark { position: absolute; z-index: -1; left: -.04em; top: .92em; width: calc(100% + .08em); height: .28em; overflow: visible; pointer-events: none; }
.marquee-track .picked .mark path { fill: none; stroke: var(--green); stroke-width: .17em; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .92; }
.marquee-track .picked .mark .pass { stroke-width: .09em; opacity: .5; }
.marquee-track .picked + .dot { margin-left: .66em; } /* italics lean right, so the next dot needs a little more room */
@keyframes marq { to { transform: translateX(-50%); } }

/* ---------- split block (about teaser, etc.) ---------- */
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: clamp(64px, 9vw, 140px) var(--gutter); }
.split > .l { grid-column: 1 / span 5; }
.split > .r { grid-column: 7 / span 6; }
@media (max-width: 860px) { .split > .l, .split > .r { grid-column: 1 / -1; } }
.portrait { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--peach); }
.portrait video, .portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ---------- film strip ---------- */
.strip { position: relative; }
.strip-pin { height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.strip-track { display: flex; gap: 0; padding-inline: var(--gutter); will-change: transform; }
.frame { flex: 0 0 auto; position: relative; background: var(--ink); padding: 34px 10px 52px; }
.frame::before, .frame::after { content: ""; position: absolute; left: 0; right: 0; height: 12px;
  background-image: linear-gradient(90deg, transparent 0 6px, var(--cream) 6px 16px, transparent 16px 22px); background-size: 22px 12px; opacity: .9; }
.frame::before { top: 11px; } .frame::after { bottom: 11px; }
.frame img { height: min(58svh, 520px); width: auto; display: block; }
.frame .fno { position: absolute; left: 12px; bottom: 29px; line-height: 1; color: var(--yellow); font-size: 11px; font-weight: 600; letter-spacing: .08em; white-space: nowrap; }
.frame .fno + .fno { left: auto; right: 12px; }
.strip-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; padding: 0 var(--gutter) 22px; }
@media (max-width: 700px) {
  .strip-pin { height: auto; padding-block: 40px; }
  .strip-track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; transform: none !important; }
  .frame { scroll-snap-align: center; }
  .frame img { height: 46svh; }
}

/* ---------- quotes ---------- */
.quotes { padding: clamp(64px, 9vw, 140px) var(--gutter); }
.quote { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding-block: 34px; border-top: 1px solid var(--hair); }
.quote blockquote { grid-column: 3 / span 9; font-size: clamp(24px, 2.7vw, 44px); font-weight: 400; letter-spacing: -0.03em; line-height: 1.12; text-wrap: pretty; }
.quote blockquote em { font-style: italic; font-weight: 300; }
.quote figcaption { grid-column: 1 / span 2; grid-row: 1; padding-top: 10px; }
.quote .note { display: block; margin-top: 4px; color: var(--fg-60); }
@media (max-width: 860px) { .quote blockquote, .quote figcaption { grid-column: 1 / -1; } .quote figcaption { grid-row: 2; } }

/* ---------- footer ---------- */
.foot { position: relative; padding: clamp(80px, 12vw, 180px) var(--gutter) var(--gutter); background: var(--bg); color: var(--fg); overflow: hidden; }
.foot-ask { max-width: 30ch; margin-bottom: 18px; }
.mega { display: block; font-size: clamp(64px, 15.5vw, 290px); font-weight: 500; letter-spacing: -0.065em; line-height: .86; white-space: nowrap; }
.mega .ch { display: inline-block; position: relative; overflow: visible; clip-path: inset(-0.3em -0.45em 0 -0.45em); vertical-align: top; line-height: .9; padding-bottom: .26em; margin-bottom: -.22em; }
.mega .ch > span { display: inline-block; transition: transform .7s var(--ease); }
.mega .ch > span + span { position: absolute; left: 0; top: 0; transform: translateY(135%); font-style: italic; font-weight: 300; }
.mega:hover .ch > span:first-child { transform: translateY(-175%); }
.mega:hover .ch > span + span { transform: translateY(0); }
.foot-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 24px; margin-top: clamp(40px, 6vw, 90px); padding-top: 18px; border-top: 1px solid var(--hair); align-items: end; }
.foot-grid > div { display: flex; flex-direction: column; gap: 6px; }
.foot-grid a:hover { color: var(--accent); }
.foot-logo img { width: clamp(84px, 9vw, 140px); height: auto; }
.ink .foot-logo img { background: var(--cream); border-radius: 50%; padding: 5%; }
.credits.two { grid-template-columns: 1fr 1fr; }
.credits.two > div { border-left: 0 !important; padding-left: 0 !important; padding-right: 18px; }
.credits.two > div:nth-child(even) { border-left: 1px solid var(--hair) !important; padding-left: 16px !important; }
.credits.two > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
.to-top { display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-logo { grid-column: 1 / -1; } }

/* ---------- reveal helpers (only hidden once JS is ready) ---------- */
.js:not(.reduced) [data-split] { visibility: hidden; animation: failsafe-show 0s 4.5s forwards; }
@keyframes failsafe-show { to { visibility: visible; } }
.js-loader .loader { animation: failsafe-hide .4s 7s forwards; }
@keyframes failsafe-hide { to { opacity: 0; visibility: hidden; } }
.js [data-fade] { opacity: 0; transform: translateY(24px); }
.js [data-reveal] { clip-path: inset(100% 0 0 0); }
.js [data-reveal] > * { transform: scale(1.18); }
.line-mask { overflow: clip; display: block; padding: 0.12em 0.16em 0.26em; margin: -0.12em -0.16em -0.26em; }
.reduced [data-fade], .reduced [data-reveal], .reduced [data-reveal] > * { opacity: 1 !important; transform: none !important; clip-path: none !important; }

/* ---------- case study ---------- */
.case-hero { padding: calc(var(--nav-h) + clamp(30px, 7vh, 90px)) var(--gutter) 28px; }
.crumbs { display: flex; gap: 10px; margin-bottom: 22px; }
.crumbs a:hover { color: var(--accent); }
.case-hero .t-display { max-width: 14ch; }
.case-hero .t-lead { max-width: 34ch; margin-top: 22px; color: var(--fg); }
.credits { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(36px, 6vw, 70px); border-top: 1px solid var(--hair); }
.credits > div { padding: 14px 16px 6px 0; }
.credits > div + div { padding-left: 16px; border-left: 1px solid var(--hair); }
.credits dt { margin-bottom: 6px; }
.credits dd { font-size: 15px; line-height: 1.4; }
@media (max-width: 860px) {
  .credits { grid-template-columns: 1fr 1fr; }
  .credits > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .credits > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
/* "What changed": the outcome, in the hero's empty right half (stacks under the lead on phones) */
.changed { margin-top: 30px; border-top: 1px solid var(--hair); padding-top: 12px; }
.changed .ch-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 28px; margin-top: 14px; }
.changed .n { font-size: clamp(40px, 4.2vw, 64px); font-weight: 300; letter-spacing: -0.05em; line-height: .9; font-variant-numeric: tabular-nums; }
.changed .n small { font-size: .45em; letter-spacing: -0.02em; margin-left: .08em; }
.changed .n + p { margin-top: 8px; font-size: 15px; line-height: 1.38; max-width: 26ch; }
.changed.one .ch-grid { grid-template-columns: 1fr; }
@media (min-width: 1000px) {
  .case-hero.has-changed { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 38%); grid-template-rows: auto auto 1fr; column-gap: clamp(40px, 5vw, 96px); }
  .case-hero.has-changed > * { grid-column: 1; align-self: start; }
  .case-hero.has-changed > .changed { grid-column: 2; grid-row: 2 / span 2; align-self: start; margin-top: .35em; }
  .case-hero.has-changed > .credits { grid-column: 1 / -1; }
}
/* "Why I chose this": a decision note under the chapter label (inline on phones) */
.why-note { margin-top: 30px; padding-top: 12px; border-top: 1px solid var(--fg-30); max-width: 52ch; }
.why-note .t-micro { color: var(--accent); }
.why-note p + p { margin-top: 8px; font-size: clamp(19px, 1.7vw, 23px); line-height: 1.32; letter-spacing: -0.01em; color: var(--fg); }
.cover { position: relative; margin: 0 var(--gutter); aspect-ratio: 21 / 9; overflow: hidden; background: var(--peach); }
.cover > img, .cover > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover.on-color { display: grid; place-items: center; }
.cover .phone { width: auto; height: 82%; }
.cover .duo { position: absolute; inset: 7% 0; height: auto; }
.cover .duo .paper { width: auto; height: 82%; }
.cover .duo .phone { width: auto; height: 94%; }
.fig-pair.wide .box { aspect-ratio: 1280 / 900; }
@media (max-width: 700px) { .cover { aspect-ratio: 4 / 5; } .cover .phone { height: 74%; } }

.chapter { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: clamp(56px, 8vw, 120px) var(--gutter) 0; }
.ch-label { grid-column: 1 / span 3; position: sticky; top: calc(var(--nav-h) + 20px); align-self: start; display: flex; gap: 12px; }
.ch-label .n { color: var(--accent); }
.ch-body { grid-column: 4 / span 8; }
.ch-body > .t-h2 { margin-bottom: 26px; }
.ch-body > .t-lead + .prose, .ch-body > .t-h2 + .prose { margin-top: 0; }
.ch-body .prose { font-size: 18px; }
.ch-body .prose ul { list-style: none; margin: 1em 0; }
.ch-body .prose li { position: relative; padding-left: 22px; margin: .45em 0; }
.ch-body .prose li::before { content: ""; position: absolute; left: 0; top: .68em; width: 10px; height: 1px; background: currentColor; }
@media (max-width: 860px) { .ch-label { position: static; grid-column: 1 / -1; } .ch-body { grid-column: 1 / -1; } }

.fig { margin: clamp(40px, 6vw, 90px) var(--gutter) 0; }
.fig figcaption { margin-top: 10px; display: flex; justify-content: space-between; gap: 16px; }
.fig-full .box { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--peach); }
.fig-full .box > img, .fig-full .box > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fig-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); border: 1px solid var(--hair); }
.fig-pair > figure { background: var(--bg); }
.fig-pair .box { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--peach); }
.fig-pair .box > img, .fig-pair .box > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fig-pair figcaption { padding: 10px 12px 12px; margin: 0; border-top: 1px solid var(--hair); }
.fig-device { display: grid; place-items: center; padding: clamp(40px, 6vw, 90px) 0; }
.fig-device .phone { width: clamp(200px, 22vw, 320px); }
.fig-device .row { display: flex; gap: clamp(16px, 3vw, 48px); align-items: center; justify-content: center; width: 100%; padding-inline: 16px; }
.fig-device .row .phone { width: clamp(150px, 18vw, 280px); }
.fig-device .row .phone:nth-child(2) { transform: translateY(8%); }
@media (max-width: 700px) {
  .fig-pair { grid-template-columns: 1fr; }
  .fig-device .row { overflow-x: auto; justify-content: flex-start; scroll-snap-type: x mandatory; padding-bottom: 20px; }
  .fig-device .row .phone { flex: 0 0 56%; scroll-snap-align: center; }
}

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(48px, 7vw, 100px) var(--gutter) 0; border-top: 1px solid var(--hair); }
.facts > div { padding: 16px 16px 0 0; }
.facts > div + div { padding-left: 16px; border-left: 1px solid var(--hair); }
.facts .big { font-size: clamp(48px, 6vw, 104px); font-weight: 300; letter-spacing: -0.06em; line-height: .9; font-variant-numeric: tabular-nums; }
.facts p { margin-top: 10px; font-size: 15px; line-height: 1.4; max-width: 24ch; }
@media (max-width: 860px) {
  .facts { grid-template-columns: 1fr 1fr; }
  .facts > div:nth-child(3) { border-left: 0; padding-left: 0; }
  .facts > div:nth-child(n+3) { border-top: 1px solid var(--hair); margin-top: 18px; }
}

.pull { padding: clamp(64px, 9vw, 140px) var(--gutter) 0; }
.pull blockquote { font-size: clamp(30px, 4.2vw, 72px); font-weight: 400; letter-spacing: -0.045em; line-height: 1.02; max-width: 22ch; text-wrap: balance; }
.pull blockquote em { font-style: italic; font-weight: 300; }
.pull figcaption { margin-top: 18px; }

.roll { margin-top: clamp(80px, 12vw, 180px); padding: clamp(70px, 10vw, 150px) var(--gutter); text-align: center; }
.roll h2 { margin-bottom: 40px; }
.roll dl { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 28px; max-width: 760px; margin: 0 auto; }
.roll dt { text-align: right; color: var(--fg-60); }
.roll dd { text-align: left; font-size: 17px; }
.roll .end { margin-top: 56px; }

.next { display: block; position: relative; padding: clamp(60px, 9vw, 130px) var(--gutter); border-top: 1px solid var(--hair); overflow: hidden; }
.next .t-display { display: inline-block; max-width: calc(100% - 4vw); transition: transform .9s var(--ease); }
.next:hover .t-display { transform: translateX(2vw); }
.next-media { position: absolute; right: var(--gutter); top: 50%; width: clamp(160px, 20vw, 300px); aspect-ratio: 4 / 5; transform: translateY(-50%) rotate(3deg) scale(.9); opacity: 0; overflow: hidden; transition: opacity .5s, transform .9s var(--ease); background: var(--peach); }
.next-media img, .next-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.next:hover .next-media { opacity: 1; transform: translateY(-50%) rotate(-2deg) scale(1); }
@media (max-width: 700px) { .next-media { display: none; } }

/* jump-to-chapter */
.toc { position: fixed; z-index: 7800; left: var(--gutter); bottom: 18px; display: none; }
.has-toc .toc { display: block; }
.toc-btn { display: flex; align-items: center; gap: 12px; padding: 10px 16px 9px; background: var(--ink); color: var(--cream); border-radius: 999px; box-shadow: 0 10px 30px -10px rgba(60, 47, 47, 0.5); }
.toc-btn .bar { width: 46px; height: 2px; background: rgba(255, 249, 241, 0.3); position: relative; overflow: hidden; }
.toc-btn .bar i { position: absolute; inset: 0; background: var(--pink); transform-origin: 0 50%; transform: scaleX(0); }
.toc-list { position: absolute; left: 0; bottom: calc(100% + 10px); min-width: 260px; max-height: 70vh; overflow: auto; background: var(--ink); color: var(--cream); border-radius: 14px; padding: 8px;
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .3s, transform .5s var(--ease); }
.toc.is-open .toc-list { opacity: 1; transform: none; pointer-events: auto; }
.toc-list a { display: flex; gap: 12px; padding: 9px 10px; border-radius: 8px; font-size: 15px; }
.toc-list a:hover, .toc-list a[aria-current="true"] { background: rgba(255, 249, 241, 0.12); }
.toc-list a span { color: var(--pink); font-variant-numeric: tabular-nums; font-size: 12px; padding-top: 2px; }
@media (max-width: 700px) { .toc { left: 12px; right: 12px; bottom: 12px; } .toc-btn { width: 100%; justify-content: space-between; } .toc-list { right: 0; } }

/* ---------- photography page ---------- */
.series { padding-top: clamp(70px, 10vw, 150px); }
.series-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; padding: 0 var(--gutter) 22px; align-items: end; }
.series-head .t-h1 { grid-column: 1 / span 7; }
.series-head .about { grid-column: 9 / span 4; }
@media (max-width: 860px) { .series-head .t-h1, .series-head .about { grid-column: 1 / -1; } }
.sheet { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--hair); border-block: 1px solid var(--hair); margin-inline: var(--gutter); }
.sheet > button { position: relative; background: var(--ph, var(--peach)); padding: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.sheet > button.w2 { grid-column: span 2; aspect-ratio: auto; }
.sheet > button.h2 { grid-row: span 2; aspect-ratio: auto; }
.sheet img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; }
.sheet > button:hover img { transform: scale(1.04); }
.sheet .fno { position: absolute; left: 8px; bottom: 7px; color: var(--cream); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-shadow: 0 1px 8px rgba(60, 47, 47, 0.6); }
@media (max-width: 860px) { .sheet { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sheet > button.w2 { grid-column: span 2; } }

.lightbox { position: fixed; inset: 0; z-index: 9600; background: rgba(60, 47, 47, 0.97); color: var(--cream); display: grid; grid-template-rows: auto 1fr auto; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .4s; }
.lb-top, .lb-bottom { display: flex; justify-content: space-between; align-items: center; padding: 14px var(--gutter); gap: 16px; }
.lb-stage { position: relative; display: grid; place-items: center; padding: 0 var(--gutter); min-height: 0; }
.lb-stage img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-stage .nav-zone { position: absolute; top: 0; bottom: 0; width: 30%; }
.lb-stage .prev { left: 0; } .lb-stage .nextz { right: 0; }
.lb-btn { padding: 8px 12px; border: 1px solid rgba(255, 249, 241, 0.4); border-radius: 999px; }
.lb-btn:hover { background: var(--cream); color: var(--ink); }

/* ---------- about page ---------- */
.timeline { margin: 0 var(--gutter); border-top: 1px solid var(--hair); }
.tl-row { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 20px 0 18px; border-bottom: 1px solid var(--hair); position: relative; }
.tl-row .yr { font-size: clamp(22px, 2vw, 30px); font-weight: 300; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.tl-row h3 { font-size: clamp(20px, 1.9vw, 28px); font-weight: 500; letter-spacing: -0.03em; line-height: 1.15; }
.tl-row p { color: var(--fg-60); font-size: 16px; }
@media (max-width: 760px) { .tl-row { grid-template-columns: 1fr; gap: 6px; } }

.principles { margin: 0 var(--gutter); border-top: 1px solid var(--hair); }
.pr { border-bottom: 1px solid var(--hair); }
.pr > button { width: 100%; display: grid; grid-template-columns: 70px 1fr auto; gap: 16px; align-items: baseline; padding: 22px 0 18px; text-align: left; }
.pr .t-h3 { transition: transform .6s var(--ease); }
.pr > button:hover .t-h3 { transform: translateX(10px); }
.pr .plus { width: 18px; height: 18px; position: relative; }
.pr .plus::before, .pr .plus::after { content: ""; position: absolute; left: 0; top: 50%; width: 100%; height: 1.5px; background: currentColor; transition: transform .5s var(--ease); }
.pr .plus::after { transform: rotate(90deg); }
.pr.is-open .plus::after { transform: rotate(0); }
.pr-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.pr.is-open .pr-body { grid-template-rows: 1fr; }
.pr-body > div { overflow: hidden; }
.pr-inner { display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr); gap: 16px; padding-bottom: 26px; }
.pr-inner p { grid-column: 2; max-width: 52ch; }
.pr-inner a { grid-column: 3; justify-self: start; }
@media (max-width: 760px) { .pr > button { grid-template-columns: 44px 1fr auto; } .pr-inner { grid-template-columns: 44px 1fr; } .pr-inner a { grid-column: 2; } }

.btn { display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px 11px; border: 1px solid var(--fg); border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; transition: background .3s, color .3s; }
.btn:hover { background: var(--fg); color: var(--bg); }
.btn.solid { background: var(--fg); color: var(--bg); }
.btn.solid:hover { background: transparent; color: var(--fg); }

/* ---------- view transitions (cross-document) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 0.55s var(--ease-io) both vt-out; }
::view-transition-new(root) { animation: 0.75s var(--ease-io) both vt-in; }
::view-transition-group(hero) { animation-duration: 0.85s; animation-timing-function: var(--ease-io); overflow: clip; z-index: 10; }
::view-transition-old(hero), ::view-transition-new(hero) { width: 100%; height: 100%; object-fit: cover; animation-duration: 0.85s; }
@keyframes vt-out { to { opacity: 0.4; transform: translateY(-6vh) scale(0.98); } }
@keyframes vt-in { from { clip-path: inset(100% 0 0 0); } to { clip-path: inset(0 0 0 0); } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .grain { animation: none; }
  .browser-page, .ticker-roll, .pill img { animation: none; }
  .marquee-track { animation-duration: 120s; }
  .kb { animation: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .scroll-cue i::after { animation: none; }
}

/* ---------- photography page ---------- */
.ink .grain { filter: invert(1); opacity: 0.05; }
.photo-hero { padding: calc(var(--nav-h) + clamp(30px, 7vh, 90px)) var(--gutter) 0; }
.photo-hero .statement { max-width: 22ch; }
.chap-index { margin: clamp(56px, 8vw, 110px) var(--gutter) 0; border-top: 1px solid var(--hair); }
.chap-index a { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) 70px; gap: 16px; align-items: baseline; padding: 16px 0 14px; border-bottom: 1px solid var(--hair); }
.chap-index .ttl { font-size: clamp(26px, 3vw, 46px); font-weight: 500; letter-spacing: -0.04em; line-height: 1; transition: transform .6s var(--ease); }
.chap-index .ttl em { font-style: italic; font-weight: 300; }
.chap-index a:hover .ttl { transform: translateX(14px); }
.chap-index .thumb { position: absolute; right: 90px; top: 50%; width: 120px; aspect-ratio: 4 / 5; overflow: hidden; transform: translateY(-50%) scale(.6) rotate(-4deg); opacity: 0; transition: opacity .3s, transform .6s var(--ease); pointer-events: none; z-index: 2; }
.chap-index .thumb img { width: 100%; height: 100%; object-fit: cover; }
.chap-index a:hover .thumb { opacity: 1; transform: translateY(-50%) scale(1) rotate(3deg); }
@media (max-width: 700px) { .chap-index a { grid-template-columns: 40px 1fr auto; } .chap-index .cat { display: none; } .chap-index .thumb { display: none; } }
.series-hero { position: relative; margin: 0 var(--gutter) 1px; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ink); }
.series-hero > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.series-hero.duo2 { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--hair); }
.series-hero.duo2 > .box { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.series-hero.duo2 > .box > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) { .series-hero { aspect-ratio: 4 / 5; } .series-hero.duo2 { grid-template-columns: 1fr; } }
.series-hero.wide { aspect-ratio: 16 / 9; }
.series .meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 14px; }
/* justified rows that never crop: every photo keeps its own shape, and each row grows evenly so heights still line up */
.sheet { display: flex; flex-wrap: wrap; align-items: flex-start; background: transparent; border: 0; }
.sheet > button, .sheet > button.w2, .sheet > button.h2 { grid-column: auto; grid-row: auto; flex: var(--r, 1.5) 1 calc(var(--r, 1.5) * var(--row, 250px)); height: auto; aspect-ratio: var(--r, 1.5); }
/* a photo left alone on the last row may stretch, but never past 2x its size (the tuned rows top out at 1.96x) */
.sheet > button { max-width: calc(var(--r, 1.5) * var(--row, 250px) * 2.02); }
.sheet .sheet-end { flex: 12 1 0; height: 0; }
/* Row heights are tuned at 1440 (sheet 1392px wide) and 390 (sheet 358px). Scaling them with the sheet's own width
   keeps the same rows at every screen size, so no photo ends up alone on a row. */
.sheet { container-type: inline-size; --row: calc(var(--row-dn, 250) * 100cqw / 1392 * 0.995); }
@media (max-width: 860px) { .sheet { --row: calc(var(--row-mn, 150) * 100cqw / 358 * 0.995); } }
@media (min-width: 701px) { .chap-index a { grid-template-columns: 70px minmax(0, 1fr) minmax(0, 1fr) 110px; } }
.book-cta { padding: clamp(80px, 11vw, 170px) var(--gutter) 0; }
.book-cta p { font-size: clamp(30px, 4.4vw, 76px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.02; max-width: 20ch; text-wrap: balance; }
.book-cta p em { font-style: italic; font-weight: 300; }
.book-cta a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.ink .foot { border-top: 1px solid var(--hair); }

/* colour fills for figure boxes (beats the peach default) */
.box.on-color.c-peach { background: var(--peach); } .box.on-color.c-pink { background: var(--pink); } .box.on-color.c-blue { background: var(--blue); }
.box.on-color.c-green { background: var(--green); } .box.on-color.c-yellow { background: var(--yellow); } .box.on-color.c-ink { background: var(--ink); }
.box.on-color.c-brown { background: var(--brown); } .box.on-color.c-cream { background: var(--cream); } .box.on-color.c-terracotta { background: var(--terracotta); }

/* places strip: location pins */
.places-strip { padding: 16px 0 14px; }
.places-strip .marquee-track { animation-duration: 46s; }
.places-strip .places { display: inline-flex; align-items: center; padding: 0; }
.place { display: inline-flex; align-items: center; gap: 0.24em; padding-right: 1.5em; font-size: clamp(30px, 4.2vw, 66px); font-weight: 500; letter-spacing: -0.045em; line-height: 1.2; white-space: nowrap; }
.place .pin { flex: none; display: inline-block; font-size: 0.72em; line-height: 1; font-style: normal; font-weight: 400; letter-spacing: 0; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; transform-origin: 50% 100%; transition: transform .6s var(--ease); }
.place .where { align-self: flex-start; margin: 0.62em 0 0 -0.08em; font-size: clamp(10px, 0.85vw, 12px); font-weight: 500; letter-spacing: 0.06em; line-height: 1; text-transform: uppercase; color: var(--fg-60); }
.place:last-child .nm { font-style: italic; font-weight: 300; }
.places-strip:hover .marquee-track { animation-play-state: paused; }
.place:hover .pin { transform: translateY(-14%) rotate(-8deg); }
@media (max-width: 700px) { .place .where { display: none; } .places-strip .marquee-track { animation-duration: 34s; } }

/* ---------- photography hero: layered portrait (text sits between the sky and Alex) ---------- */
.ph-hero { padding-top: var(--nav-h); }
.ph-poster { position: relative; height: calc(100svh - var(--nav-h)); min-height: 600px; isolation: isolate; overflow: clip; }
.ph-frame { position: absolute; top: 20px; bottom: 20px; right: var(--gutter); aspect-ratio: 1590 / 2400; }
.ph-frame > .ph-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.ph-bg { z-index: 1; }
.ph-fg { z-index: 3; pointer-events: none; }
.ph-flash { position: absolute; inset: 0; z-index: 5; background: var(--cream); opacity: 0; pointer-events: none; }
.ph-word { position: absolute; z-index: 2; left: var(--gutter); top: calc(20px + 0.255 * (100% - 40px)); margin: 0; color: var(--cream); white-space: nowrap; pointer-events: none;
  font-size: min(10.6vw, 20svh); font-weight: 500; line-height: 0.9; letter-spacing: -0.055em; will-change: transform; }
.ph-word em { font-style: italic; font-weight: 300; letter-spacing: -0.06em; }
.ph-word .ln { display: inline-block; }
.ph-word .ch { display: inline-block; }
.ph-hud { position: absolute; inset: 0; z-index: 4; pointer-events: none; color: var(--cream); }
.ph-hud .c { position: absolute; width: 22px; height: 22px; border: 1.5px solid rgba(255, 249, 241, 0.9); }
.ph-hud .c1 { left: 12px; top: 12px; border-right: 0; border-bottom: 0; } .ph-hud .c2 { right: 12px; top: 12px; border-left: 0; border-bottom: 0; }
.ph-hud .c3 { left: 12px; bottom: 12px; border-right: 0; border-top: 0; } .ph-hud .c4 { right: 12px; bottom: 12px; border-left: 0; border-top: 0; }
.ph-af { position: absolute; left: 19.5%; top: 49.5%; width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%); border: 1.5px solid var(--pink); }
.ph-af::before, .ph-af::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--pink); }
.ph-af::before { width: 1.5px; height: 18%; transform: translate(-50%, -50%); } .ph-af::after { width: 18%; height: 1.5px; transform: translate(-50%, -50%); }
.ph-af.lock { animation: af-lock 0.6s steps(2) 2; }
@keyframes af-lock { 50% { border-color: var(--cream); } }
.ph-read { position: absolute; left: 14px; right: 14px; bottom: 40px; display: flex; justify-content: space-between; gap: 12px; text-shadow: 0 1px 10px rgba(60, 47, 47, 0.7); }
.ph-read .ok::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); margin-right: 7px; vertical-align: 1px; }
.ph-meta { position: absolute; left: var(--gutter); top: 26px; z-index: 6; }
.ph-foot { position: absolute; left: var(--gutter); bottom: 26px; z-index: 6; display: flex; gap: 28px; align-items: center; }
.ph-hero .photo-hero { padding-top: clamp(56px, 8vw, 110px); }
.ph-hero .photo-hero .statement { max-width: 24ch; }
@media (max-width: 860px) {
  .ph-poster { height: auto; min-height: 0; padding: 70px 0 0; }
  .ph-frame { position: relative; top: auto; bottom: auto; right: auto; width: calc(100% - 2 * var(--gutter)); margin: 0 var(--gutter); }
  .ph-word { top: calc(70px + 0.215 * (100vw - 2 * var(--gutter)) * 2400 / 1590); font-size: 19vw; line-height: 0.88; white-space: normal; }
  .ph-word .ln { display: block; } .ph-word .ln + .ln { padding-left: 34vw; }
  .ph-meta { top: 24px; }
  .ph-foot { position: static; padding: 16px var(--gutter) 0; }
  .ph-read { bottom: 34px; font-size: 10px; }
  .ph-read .cam { display: none; }
}
.reduced .ph-flash { display: none; }
.ph-statement { position: absolute; z-index: 6; left: var(--gutter); bottom: 74px; margin: 0; max-width: min(24ch, calc(100% - 50svh - 3 * var(--gutter)));
  font-size: clamp(24px, 2.5vw, 40px); font-weight: 500; line-height: 1.08; letter-spacing: -0.035em; text-wrap: balance; }
.ph-statement em { font-style: italic; font-weight: 300; }
.ph-hero .photo-hero { padding-top: clamp(36px, 5vw, 64px); min-height: 0; }
@media (max-width: 860px) {
  .ph-statement { position: static; max-width: none; padding: 26px var(--gutter) 0; font-size: clamp(26px, 7vw, 34px); }
}

/* ---------- series extras: feature tags, feature boards, client letter ---------- */
.feat-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }
.feat-tags .chip { border-color: var(--fg-30); }
.paws-boards { margin: clamp(40px, 6vw, 80px) var(--gutter) 0; }
.paws-boards-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-bottom: 12px; border-bottom: 1px solid var(--hair); margin-bottom: 14px; }
.boards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 1.2vw, 18px); }
.boards > button { padding: 0; display: block; overflow: hidden; border-radius: 2px; box-shadow: 0 20px 40px -24px rgba(0, 0, 0, 0.6); transition: transform .7s var(--ease); }
.boards > button:nth-child(odd) { transform: rotate(-1.2deg); } .boards > button:nth-child(even) { transform: rotate(1.2deg) translateY(10px); }
.boards > button:hover { transform: rotate(0) translateY(-6px); }
.boards img { width: 100%; height: auto; display: block; }
.letter { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(24px, 4vw, 64px); align-items: start; margin: clamp(56px, 8vw, 120px) var(--gutter) 0; padding-top: clamp(28px, 4vw, 48px); border-top: 1px solid var(--hair); }
.letter-photo { position: sticky; top: calc(var(--nav-h) + 24px); }
.polaroid { background: var(--cream); padding: 12px 12px 0; transform: rotate(-3deg); box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.7); max-width: 360px; }
.polaroid img { width: 100%; height: auto; display: block; }
.polaroid-cap { display: block; padding: 12px 4px 14px; color: var(--ink); font-size: 15px; font-style: italic; font-weight: 300; letter-spacing: -0.01em; text-align: center; }
.letter-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.lang-toggle { display: flex; gap: 6px; }
.letter-text { margin: 0; font-size: clamp(17px, 1.45vw, 21px); line-height: 1.55; letter-spacing: -0.01em; max-width: 62ch; }
.letter-text p + p { margin-top: 0.9em; }
.letter-text mark { background: none; color: inherit; font-size: 1.5em; line-height: 1.15; font-style: italic; font-weight: 300; letter-spacing: -0.03em; display: block; margin: 0.2em 0 0.35em; color: var(--pink); }
.letter figcaption { margin-top: 24px; padding-top: 14px; border-top: 1px dashed var(--fg-30); display: flex; flex-wrap: wrap; gap: 6px 10px; }
.letter-note { margin-left: auto; }
.letter.is-nl .letter-note { display: none; }
@media (max-width: 860px) {
  .boards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .letter { grid-template-columns: 1fr; }
  .letter-photo { position: static; }
  .polaroid { max-width: 240px; margin: 0 auto 8px; }
}

/* photography chapters (2026-10-20): chapter heads, review cards, grouped index */
.ph-chapter { padding-top: clamp(110px, 15vw, 230px); }
.ph-chapter-head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 22px 24px; margin: 0 var(--gutter); padding-top: 16px; border-top: 1px solid var(--fg-30); align-items: end; }
.ph-chapter-num { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-bottom: clamp(18px, 3vw, 46px); }
.ph-chapter-head .t-display { grid-column: 1 / span 8; }
.ph-chapter-intro { grid-column: 9 / span 4; font-size: 17px; }
.ph-chapter-intro p + p { margin-top: 12px; }
.ph-chapter-links { grid-column: 9 / span 4; display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 860px) { .ph-chapter-head .t-display, .ph-chapter-intro, .ph-chapter-links { grid-column: 1 / -1; } }
.voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; margin: clamp(40px, 5vw, 76px) var(--gutter) 0; }
.voices-label { grid-column: 1 / -1; margin-bottom: 14px; }
.voice { display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 20px 0 30px; border-top: 1px solid var(--hair); }
.voice blockquote { font-size: clamp(19px, 1.5vw, 24px); font-weight: 400; line-height: 1.28; letter-spacing: -0.02em; text-wrap: pretty; }
.voice blockquote em { font-style: italic; font-weight: 300; }
.voice figcaption { display: flex; flex-direction: column; gap: 4px; }
.voice .note { color: var(--fg-60); }
.voices.one { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.voices.one .voice { grid-column: 4 / span 8; }
.voices.one .voice blockquote { font-size: clamp(24px, 2.6vw, 42px); line-height: 1.14; letter-spacing: -0.03em; }
@media (max-width: 860px) { .voices { grid-template-columns: 1fr 1fr; } .voices.one .voice { grid-column: 1 / -1; } }
@media (max-width: 600px) { .voices { grid-template-columns: 1fr; } }
.opener { padding-top: clamp(30px, 5vw, 70px); }
.chap-index .chap-group { display: flex; gap: 16px; padding: 30px 0 10px; border-bottom: 0; color: var(--fg-60); }
.chap-index .chap-group:first-child { padding-top: 14px; }
.chap-index .chap-group .num { width: 70px; flex: none; color: var(--pink); }
@media (max-width: 700px) { .chap-index .chap-group .num { width: 40px; } }


/* selected work tiers (2026-10-20): featured 8 + kettle call, more work, earlier case studies */
.sub-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; flex-wrap: wrap; margin: clamp(56px, 7vw, 100px) var(--gutter) 16px; }
.sub-head .t-h3 { font-size: clamp(24px, 2.4vw, 36px); font-weight: 500; letter-spacing: -0.035em; }
.tiles.tiles-more { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles.tiles-concepts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.tiles-more .tile-cap .ttl, .tiles-concepts .tile-cap .ttl { font-size: clamp(15px, 1.2vw, 18px); }
.cta-tile { background: var(--ink); justify-content: space-between; gap: 14px; }
.cta-tile .cta-sub { font-size: 15px; line-height: 1.4; color: rgba(255, 249, 241, 0.78); max-width: 30ch; }
.cta-tile .btn.solid { align-self: flex-start; background: var(--cream); color: var(--ink); border-color: var(--cream); }
.tile-cta:hover .cta-tile .btn.solid { background: var(--pink); border-color: var(--pink); }
@media (max-width: 1000px) { .tiles.tiles-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .tiles.tiles-concepts { display: grid; grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  .tiles.tiles-concepts .tile { scroll-snap-align: start; }
}
@media (max-width: 620px) { .tiles.tiles-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tiles-more .tile-cap .cat { display: none; } }

/* photography: long series show a 2-row preview, "See all" opens the rest; veiled sets blur until opened */
.series.collapsed .sheet > button.more { display: none; }
.series.collapsed .sheet .sheet-end { display: none; }
.see-all { margin: 18px var(--gutter) 0; display: flex; justify-content: center; }
.sheet-wrap { position: relative; }
.veil-cover { display: none; }
.series.veiled .veil-cover { display: flex; flex-direction: column; align-items: center; gap: 14px; position: absolute; inset: 0; z-index: 6; justify-content: center; text-align: center; padding: 24px; }
.series.veiled .veil-cover .t-micro { color: var(--cream); text-shadow: 0 1px 10px rgba(60, 47, 47, 0.6); }
.series.veiled .sheet { pointer-events: none; }
/* the blur is baked into the .veil.webp files, so the sharp photos never reach the browser */
.series.veiled .veil-cover .veil-note { max-width: 40ch; font-size: 14px; line-height: 1.45; color: var(--cream); text-shadow: 0 1px 12px rgba(60, 47, 47, 0.8); }
.series.veiled .veil-cover { background: radial-gradient(ellipse at center, rgba(60, 47, 47, 0.45), rgba(60, 47, 47, 0) 70%); }
.series.veiled .sheet .fno { visibility: hidden; }
.series .sheet img { transition: filter .9s var(--ease), transform 1.2s var(--ease); }

/* language switch + Dutch prompt (2026-10-21) */
.lang-switch { display: inline-flex; gap: 2px; }
.lang-switch a { padding: 2px 5px 1px; border-radius: 999px; opacity: .6; transition: opacity .3s, background .3s, color .3s; }
.lang-switch a:hover { opacity: 1; }
.lang-switch a[aria-current="true"] { opacity: 1; background: var(--fg); color: var(--bg); }
.menu-foot .lang-switch { margin-right: auto; }
.lang-prompt { position: fixed; z-index: 9000; right: 18px; bottom: 18px; width: min(380px, calc(100vw - 32px)); background: var(--ink); color: var(--cream); border-radius: 14px; padding: 18px 18px 16px;
  box-shadow: 0 18px 50px -18px rgba(60, 47, 47, 0.55); transform: translateY(20px); opacity: 0; transition: opacity .5s var(--ease), transform .7s var(--ease); }
.lang-prompt.on { transform: none; opacity: 1; }
.menu-open .lang-prompt { opacity: 0; pointer-events: none; }
.lang-prompt p { font-size: 17px; line-height: 1.35; letter-spacing: -0.01em; }
.lang-prompt p em { font-style: italic; font-weight: 300; }
.lang-prompt .t-micro { color: rgba(255, 249, 241, 0.64); margin-bottom: 8px; display: block; }
.lang-prompt .row { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.lang-prompt .btn { border-color: var(--cream); color: var(--cream); }
.lang-prompt .btn.solid { background: var(--cream); color: var(--ink); }
.lang-prompt .btn.solid:hover { background: var(--pink); border-color: var(--pink); }
@media (max-width: 700px) { .lang-prompt { right: 16px; left: 16px; bottom: 16px; width: auto; } }

/* work with me (2026-10-21): photo band, price ladder (ported from the TFS site), add-ons, checks, steps */
.hire-band { display: flex; gap: 1px; margin: clamp(40px, 6vw, 80px) var(--gutter) 0; background: var(--hair); }
.hire-band a { position: relative; flex: var(--r) 1 0; aspect-ratio: var(--r); overflow: hidden; background: var(--bg); }
.hire-band img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hire-band a:hover img { transform: scale(1.04); }
.hire-band span { position: absolute; left: 10px; bottom: 9px; color: var(--cream); text-shadow: 0 1px 8px rgba(60, 47, 47, 0.7); }
@media (max-width: 700px) { .hire-band { flex-wrap: wrap; } .hire-band a { flex: 1 1 calc(50% - 1px); aspect-ratio: 4 / 5; } }
.ladder { margin: 0 var(--gutter); border-top: 1px solid var(--hair); }
.step { position: relative; display: grid; grid-template-columns: 70px minmax(0, 1.25fr) minmax(0, 1fr) minmax(150px, auto); gap: 24px; align-items: baseline; padding: 26px 0 24px; border-bottom: 1px solid var(--hair); }
.step .n { color: var(--accent); }
.step h3 { font-size: clamp(28px, 3.2vw, 52px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; transition: transform .7s var(--ease); }
.step h3 em { font-style: italic; font-weight: 300; }
.step p { font-size: 16px; line-height: 1.5; color: var(--fg-60); max-width: 46ch; }
.step .price { text-align: right; font-size: clamp(30px, 3.4vw, 58px); font-weight: 300; letter-spacing: -0.055em; line-height: .95; font-variant-numeric: tabular-nums; white-space: nowrap; }
.step .price small { display: block; margin-top: 10px; font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-60); }
.step:hover h3 { transform: translateX(12px); }
.credit { display: flex; align-items: center; gap: 12px; padding: 12px 0 11px 94px; border-bottom: 1px solid var(--hair); color: var(--fg-60); }
.credit i { display: inline-block; width: 1px; height: 18px; background: var(--accent); position: relative; }
.credit i::after { content: ""; position: absolute; left: -3px; bottom: 0; width: 7px; height: 7px; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent); transform: rotate(45deg); }
@media (max-width: 860px) {
  .step { grid-template-columns: 44px 1fr; gap: 10px 14px; }
  .step p { grid-column: 2; }
  .step .price { grid-column: 2; text-align: left; margin-top: 8px; }
  .credit { padding-left: 58px; }
}
.addons { margin: clamp(30px, 4vw, 54px) var(--gutter) 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0 24px; }
.addons .t-micro { grid-column: 1 / span 3; padding-top: 12px; }
.addons ul { grid-column: 4 / -1; list-style: none; border-top: 1px solid var(--hair); }
.addons li { display: flex; justify-content: space-between; gap: 18px; padding: 12px 0 11px; border-bottom: 1px solid var(--hair); font-size: 16px; }
.addons li .num { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .addons .t-micro, .addons ul { grid-column: 1 / -1; } .addons .t-micro { padding: 0 0 10px; } }
.offer-cta { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; justify-content: space-between; margin: clamp(36px, 5vw, 64px) var(--gutter) 0; }
.offer-cta .fine { color: var(--fg-60); font-size: 14px; max-width: 62ch; }
.checks { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
.checks > div { padding: 18px 18px 20px 0; border-bottom: 1px solid var(--hair); }
.checks > div:nth-child(even) { padding-left: 18px; border-left: 1px solid var(--hair); }
.checks dt { font-size: clamp(19px, 1.6vw, 24px); font-weight: 500; letter-spacing: -0.02em; margin-bottom: 8px; }
.checks dd { font-size: 15px; line-height: 1.45; color: var(--fg-60); }
@media (max-width: 700px) { .checks { grid-template-columns: 1fr; } .checks > div:nth-child(even) { padding-left: 0; border-left: 0; } }
.how { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 var(--gutter); border-top: 1px solid var(--hair); }
.how li { padding: 18px 18px 24px 0; }
.how li + li { padding-left: 18px; border-left: 1px solid var(--hair); }
.how .n { color: var(--accent); }
.how h3 { font-size: clamp(22px, 2vw, 32px); font-weight: 500; letter-spacing: -0.035em; margin: 22px 0 10px; }
.how p { font-size: 15px; line-height: 1.45; color: var(--fg-60); }
@media (max-width: 860px) { .how { grid-template-columns: 1fr 1fr; } .how li:nth-child(3) { padding-left: 0; border-left: 0; } .how li:nth-child(n+3) { border-top: 1px solid var(--hair); } }
@media (max-width: 480px) { .how { grid-template-columns: 1fr; } .how li, .how li + li { padding-left: 0; border-left: 0; } .how li + li { border-top: 1px solid var(--hair); } }

html[lang="nl"] .tile.is-concept .media::after { content: "Conceptstudie"; }
html[lang="nl"] .tiles.is-index .tile.is-concept .ttl::after { content: "Concept"; }

.tile-cap { grid-template-columns: auto minmax(0, 1fr) auto; }
.tile-cap .ttl { min-width: 0; overflow-wrap: anywhere; }

/* ---------- case study: before / now strip + photo credit ---------- */
.glance { margin-top: clamp(32px, 4vw, 48px); border-top: 1px solid var(--hair); }
.g-head, .g-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) minmax(0, 1fr); gap: 20px; padding: 14px 0 13px; border-bottom: 1px solid var(--hair); }
.g-row p { font-size: 16px; line-height: 1.4; }
.g-row p:nth-of-type(1) { color: var(--fg-60); }
.g-row p:nth-of-type(2) { font-weight: 500; }
.g-row > .t-micro { padding-top: 3px; color: var(--accent); }
@media (max-width: 700px) {
  .g-head, .g-row { grid-template-columns: 1fr 1fr; gap: 6px 16px; }
  .g-head > span:first-child { display: none; }
  .g-row > .t-micro { grid-column: 1 / -1; }
}
.fig-credit { margin: 10px var(--gutter) 0; }
.fig-credit a, .credits dd a, .roll .end a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- case study: test notes and what each one became (ported from the studio site) ---------- */
.findings { border-top: 1px solid var(--hair); margin-top: 30px; }
.finding { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; padding: 16px 0 15px; border-bottom: 1px solid var(--hair); align-items: baseline; }
.finding .n { color: var(--fg-60); }
.finding p { font-size: 17px; line-height: 1.45; letter-spacing: -0.01em; }
.finding .tag { font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 4px 8px 3px; border-radius: 999px; border: 1px solid currentColor; white-space: nowrap; color: var(--fg-60); }
@media (max-width: 560px) { .finding { grid-template-columns: 32px minmax(0, 1fr); } .finding .tag { grid-column: 2; justify-self: start; } }
/* before / now screen recordings of a website, side by side (stacked on phones) */
.fig-pair.site .box { aspect-ratio: 2 / 1; }
.fig-pair.site .box > video { object-position: 50% 0; }

/* kettle call with Alex's photo: on the homepage tile and the Work with me page */
.cta-tile.cta-photo { background: linear-gradient(180deg, rgba(60, 47, 47, 0.82) 0%, rgba(60, 47, 47, 0.45) 26%, rgba(60, 47, 47, 0) 46%, rgba(60, 47, 47, 0) 80%, rgba(60, 47, 47, 0.4) 100%); }
.media-zoom > img.cta-bg { object-position: 50% 42%; }
.kettle-photo { margin-top: clamp(24px, 3vw, 40px); max-width: 420px; }
.kettle-photo img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; }
.kettle-photo figcaption { margin-top: 10px; }
@media (max-width: 860px) { .kettle-photo { max-width: 360px; } }
/* phones: the smallest labels go up a step so captions and credits stay easy to read */
@media (max-width: 700px) { .t-micro { font-size: 13px; } .hero-top.t-micro { font-size: 12px; } .finding .tag { font-size: 12px; } }
/* case study / live site buttons under a photo series' description */
.series-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.series-links .btn.solid { background: var(--fg); color: var(--bg); border-color: var(--fg); }

/* ---------- closing bands under More work: classrooms + all the photo stories (2026-10-24) ---------- */
.more-bands { margin-inline: var(--gutter); border-left: 1px solid var(--hair); border-right: 1px solid var(--hair); }
.band { display: grid; border-bottom: 1px solid var(--hair); }
.band .big { font-size: clamp(30px, 3vw, 48px); font-weight: 500; letter-spacing: -0.045em; line-height: 1; margin-top: 12px; text-wrap: balance; }
.band .big em { font-style: italic; font-weight: 300; }
/* 3 equal columns, so the band's lines continue the 3-across grid above it; the 5:4 photo sets the height */
.band-class { grid-template-columns: repeat(3, minmax(0, 1fr)); background: var(--ink); color: var(--cream); }
.band-ph { position: relative; aspect-ratio: 5 / 4; overflow: hidden; }
.band-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transition: transform 1.4s var(--ease); }
.band-class:hover .band-ph img { transform: scale(1.035); }
.band-tx, .band-years { padding: 28px; display: flex; flex-direction: column; min-width: 0; }
.band-tx { justify-content: space-between; gap: 24px; }
.band-years { border-left: 1px solid rgba(255, 249, 241, 0.3); }
.band-class .t-micro { color: rgba(255, 249, 241, 0.75); }
.band-tx .t-micro .num { margin-right: 10px; }
.band-class .big { font-size: clamp(28px, 2.6vw, 42px); }
.band-class .band-go { color: var(--cream); transition: transform .6s var(--ease); }
.band-class:hover .band-go { transform: translateX(8px); }
.band-list { list-style: none; margin: 14px 0 0; padding: 0; flex: 1; display: flex; flex-direction: column; border-top: 1px solid rgba(255, 249, 241, 0.3); }
.band-list li { flex: 1; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: 14px; line-height: 1.3; padding: 10px 0; border-bottom: 1px solid rgba(255, 249, 241, 0.18); }
.band-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.band-list li span:nth-child(2) { color: rgba(255, 249, 241, 0.72); }
.band-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 26px 28px; }
.band-sub { color: var(--fg-60); font-size: 15px; line-height: 1.4; max-width: 34ch; margin-top: 10px; }
.band-hd .btn { white-space: nowrap; }
.band-hd:hover .btn.solid { background: transparent; color: var(--fg); }
.band-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--hair); border-top: 1px solid var(--hair); }
.band-strip a { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: var(--peach); }
.band-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.band-strip a:hover img { transform: scale(1.05); }
.band-chip { position: absolute; left: 10px; bottom: 10px; background: var(--cream); color: var(--ink); font-size: 11px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; padding: 5px 9px 4px; border-radius: 999px; white-space: nowrap; transition: background .3s, color .3s; }
.band-chip b { font-weight: 500; opacity: .6; margin-right: 2px; }
.band-strip a:hover .band-chip { background: var(--ink); color: var(--cream); }
@media (max-width: 1000px) {
  .band-class { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .band-years { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(255, 249, 241, 0.3); }
  .band-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .band-class { grid-template-columns: 1fr; }
  .band-ph { aspect-ratio: 4 / 3; }
  .band-tx, .band-years { padding: 22px 20px; }
  .band-tx { gap: 28px; }
  /* phones: year + place on one line, the role tucked underneath, so nothing wraps mid-row */
  .band-list li { grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; row-gap: 2px; font-size: 14px; padding: 11px 0; }
  .band-list li span:nth-child(3) { grid-column: 2; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; color: rgba(255, 249, 241, 0.6); }
  .band-hd { flex-direction: column; align-items: flex-start; padding: 22px 20px; }
  .band-chip { left: 6px; bottom: 6px; font-size: 10px; padding: 4px 7px 3px; }
  .tiles-more .tile-cap .ttl { font-size: 13px; }
}

/* ---------- request form for request-only sets (Alter ego), 2026-10-24 ---------- */
dialog.ask { --bg: var(--cream); --fg: var(--ink); --fg-60: rgba(60, 47, 47, 0.74); --fg-30: rgba(60, 47, 47, 0.3); width: min(520px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto; border: 0; border-radius: 14px; padding: 28px 28px 24px; background: var(--cream); color: var(--ink); }
dialog.ask::backdrop { background: rgba(60, 47, 47, 0.62); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ask-form { display: grid; gap: 8px; position: relative; }
.ask-eyebrow { color: rgba(60, 47, 47, 0.74); padding-right: 40px; }
.ask-form h3 { font-size: clamp(26px, 3vw, 34px); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; margin: 4px 0 2px; }
.ask-lead { font-size: 15px; line-height: 1.45; margin-bottom: 8px; }
.ask-form label { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; margin-top: 6px; }
.ask-form label .opt { color: rgba(60, 47, 47, 0.6); margin-left: 6px; }
.ask-form input, .ask-form textarea { font: inherit; font-size: 16px; color: var(--ink); background: var(--peach); border: 1px solid rgba(60, 47, 47, 0.3); border-radius: 8px; padding: 11px 12px; width: 100%; }
.ask-form textarea { resize: vertical; min-height: 96px; line-height: 1.4; }
.ask-form input:focus-visible, .ask-form textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 1px; }
.ask-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ask-fine { font-size: 13px; color: rgba(60, 47, 47, 0.74); margin-top: 4px; }
.ask-send { justify-self: start; margin-top: 6px; }
.ask-send:disabled { opacity: .5; cursor: progress; }
.ask-status { font-size: 15px; line-height: 1.45; min-height: 1em; }
.ask-x { position: absolute; top: -10px; right: -10px; width: 40px; height: 40px; border-radius: 50%; font-size: 26px; line-height: 1; color: var(--ink); }
.ask-x:hover { background: var(--peach); }
.ask-form.is-sent > :not(.ask-status):not(.ask-x):not(h3):not(.hello-done) { display: none; }
.ask-form.is-sent .ask-status { font-size: 17px; }
@media (max-width: 700px) { dialog.ask { padding: 22px 20px 20px; } }
/* say hello: the same dialog, with pick-one / pick-any chips */
dialog.ask.hello { width: min(620px, calc(100vw - 32px)); }
.hello-form [hidden] { display: none !important; }
.hello-bar { height: 3px; border-radius: 3px; background: rgba(60, 47, 47, 0.12); margin: 4px 0 22px; overflow: hidden; }
.hello-bar i { display: block; height: 100%; width: 0; background: var(--terracotta); border-radius: inherit; transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.hello-steps { min-height: 250px; }
.hello-step { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 10px; align-content: start; }
.ask-form .hello-q { display: block; padding: 0; margin: 0 0 6px; font-size: clamp(23px, 2.6vw, 30px); font-weight: 500; letter-spacing: -0.035em; line-height: 1.12; text-transform: none; }
.hello-q .opt { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: rgba(60, 47, 47, 0.6); margin-left: 8px; vertical-align: 4px; }
.hello-hint { font-size: 15px; color: rgba(60, 47, 47, 0.74); margin: -4px 0 4px; }
.hello-step.is-in { animation: hello-in .4s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes hello-in { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 18px)); } }
.hello-err { color: var(--red); font-size: 15px; line-height: 1.4; margin: 2px 0 0; }
.ask-form [aria-invalid="true"] { border-color: var(--red); }
.hello-choice { margin-top: 18px; padding-top: 18px; border-top: 1px dashed rgba(60, 47, 47, 0.25); }
.hello-choice-q { font-size: 17px; font-weight: 500; margin-bottom: 12px; }
.hello-choice-row { display: grid; gap: 10px; }
.ask-form .hello-pick { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; margin: 0; padding: 15px 20px; text-align: left; font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--ink); border-radius: 16px; cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.hello-pick strong { display: block; font-size: 17px; font-weight: 500; line-height: 1.25; }
.hello-pick small { display: block; font-size: 14px; line-height: 1.35; margin-top: 3px; color: rgba(60, 47, 47, 0.74); }
.hello-pick .arr { font-size: 18px; flex: none; transition: transform .25s; }
.hello-pick:hover .arr { transform: translateX(3px); }
.hello-pick:hover { background: var(--peach); }
.hello-pick.solid { background: var(--ink); color: var(--cream); }
.hello-pick.solid small { color: rgba(255, 249, 241, 0.78); }
.hello-pick.solid:hover { background: var(--red); border-color: var(--red); }
.hello-pick:disabled { opacity: .5; cursor: progress; }
/* the custom cursor stands in for the pointer on the chips and choices too */
.has-cursor .ask-form .pick, .has-cursor .ask-form .pick input, .has-cursor .ask-form .hello-pick { cursor: none; }
.hello-done a[data-cal-link] { text-decoration: underline; text-underline-offset: 3px; }
.hello-nav { display: flex; align-items: center; gap: 12px; margin-top: 26px; }
.hello-nav .hello-next, .hello-nav .ask-send { margin: 0 0 0 auto; }
.pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.ask-form .pick { position: relative; margin: 0; font-size: 15px; font-weight: 400; letter-spacing: 0; text-transform: none; cursor: pointer; }
.ask-form .pick input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.pick span { display: inline-block; line-height: 1.25; padding: 9px 14px 8px; border: 1px solid rgba(60, 47, 47, 0.3); border-radius: 999px; background: var(--peach); transition: background .2s, color .2s, border-color .2s; }
.pick small { font-size: 13px; color: rgba(60, 47, 47, 0.7); margin-left: 4px; }
.pick:hover span { border-color: var(--ink); }
.pick input:checked + span { background: var(--ink); color: var(--cream); border-color: var(--ink); }
.pick input:checked + span small { color: rgba(255, 249, 241, 0.75); }
.pick input:focus-visible + span { outline: 2px solid var(--terracotta); outline-offset: 2px; }
.hello-other { margin-top: 8px; }
.hello-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 6px; }
.hello-row > div { display: grid; gap: 8px; align-content: start; }
.hello-done { display: grid; gap: 14px; justify-items: start; font-size: 17px; line-height: 1.45; }
.hello-done[hidden], .hello-other[hidden] { display: none; }
.hello-done p { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ask-fine a { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .hello-row { grid-template-columns: 1fr; } .pick span { font-size: 14px; } .hello-steps { min-height: 300px; } }
@media (prefers-reduced-motion: reduce) { .pick span, .hello-bar i, .hello-pick, .hello-pick .arr { transition: none; } .hello-step.is-in { animation: none; } }

/* photo stories band on top of the More work grid */
.more-bands-top { border-top: 1px solid var(--hair); }
.more-bands-top + .tiles { border-top: 0; }