/* Jeremiah Sleman, portfolio redesign. One tokens block up top so the whole look can be restyled in one place. */
:root {
  --paper: #f3f1ec;
  --paper-2: #e8e5de;
  --card: #fbfaf7;
  --ink: #151517;
  --ink-2: #4a4843;
  --ink-3: #66635d;
  --line: rgba(21, 21, 23, .12);
  --accent: #e8541e;
  --accent-text: #b83c0e;
  --good: #1f7a4d;
  --bad: #b3261e;
  --night: #0c0c0d;
  --night-2: #18181a;
  --night-ink: #f3f1ec;
  --night-dim: #a9a59d;
  --serif: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --sans: "Geist", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gut: clamp(16px, 4vw, 48px);
  --max: 1320px;
  --r: 18px;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: 400 17px/1.6 var(--sans); letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 400; }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 3px; border-radius: 6px; }
.night :focus-visible, .lead :focus-visible { outline-color: #ffb08a; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 10px; text-decoration: none; }
.skip:focus { top: 12px; }
.mono { font-family: var(--mono); font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* Film grain over the paper (an inline SVG noise tile, no image request) */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 150; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Nav: a pill bar over a progressive blur ---------- */
.blur { position: fixed; inset: 0 0 auto; height: 92px; z-index: 40; pointer-events: none; }
.blur i { position: absolute; inset: 0; }
.blur i:nth-child(1) { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); mask: linear-gradient(#000 40%, transparent); -webkit-mask: linear-gradient(#000 40%, transparent); }
.blur i:nth-child(2) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); mask: linear-gradient(#000 25%, transparent 70%); -webkit-mask: linear-gradient(#000 25%, transparent 70%); }
.blur i:nth-child(3) { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); mask: linear-gradient(#000 10%, transparent 45%); -webkit-mask: linear-gradient(#000 10%, transparent 45%); background: linear-gradient(rgba(243,241,236,.55), transparent); }
.nav { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px var(--gut); pointer-events: none; }
.nav > * { pointer-events: auto; }
.mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 600; font-size: 15px; }
.pills { display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(243, 241, 236, .72); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.pills a { text-decoration: none; padding: 8px 14px; border-radius: 999px; font-size: 15px; color: var(--ink-2); transition: background .2s, color .2s; }
.pills a:hover { color: var(--ink); background: rgba(0, 0, 0, .05); }
.pills a[aria-current="true"] { background: var(--ink); color: var(--paper); }
.pills a.mail { color: var(--accent-text); }
/* the 3D studio: phones are sent back here from it (studio/index.html), so on a phone-sized touch screen the link hides */
.pills a.threed { color: var(--accent-text); font-weight: 600; }
@media (pointer: coarse) and (max-width: 699px), (pointer: coarse) and (max-height: 699px) { .pills a.threed { display: none; } }

/* ---------- Hero ---------- */
.hero { padding: 132px 0 64px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.eyebrow { color: var(--ink-3); display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--accent); }
.hero h1 { font: 400 clamp(64px, 9.4vw, 140px)/.86 var(--serif); letter-spacing: -.025em; margin: 0 0 28px; }
.hero h1 em { font-style: italic; color: var(--ink-3); }
.hero .line { font-size: clamp(19px, 1.6vw, 23px); line-height: 1.5; color: var(--ink-2); max-width: 34em; margin-bottom: 30px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; border-top: 1px solid var(--line); padding-top: 20px; max-width: 620px; }
.facts dt { color: var(--ink-3); margin-bottom: 4px; }
.facts dd { margin: 0; font-size: 16px; line-height: 1.45; }

.art { position: relative; padding: 28px 0 40px 28px; }
.portrait { margin: 0; border-radius: 22px; overflow: hidden; background: var(--paper-2); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .35); }
.portrait img { width: 100%; }
.tile { position: absolute; width: clamp(56px, 5.4vw, 78px); aspect-ratio: 1; border-radius: 22%; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; transition: transform .5s var(--ease), box-shadow .3s; box-shadow: 0 12px 24px -10px rgba(0, 0, 0, .45), 0 0 0 1px rgba(0,0,0,.06); }
.tile img { width: 100%; height: 100%; border-radius: inherit; pointer-events: none; -webkit-user-drag: none; }
.tile:hover { box-shadow: 0 18px 30px -10px rgba(0, 0, 0, .5); }
.tile.dragging { cursor: grabbing; transition: none; z-index: 5; box-shadow: 0 28px 40px -12px rgba(0, 0, 0, .55); }
.tile .tip { position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px); background: var(--ink); color: var(--paper); font: 500 12px/1 var(--sans); padding: 7px 9px; border-radius: 7px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.tile:hover .tip, .tile:focus-visible .tip { opacity: 1; transform: translateX(-50%); }
.drag-hint { position: absolute; right: 0; bottom: 6px; color: var(--ink-3); display: flex; gap: 8px; align-items: center; }
.drag-hint svg { width: 16px; height: 16px; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -5px; } }
.tile.idle { animation: bob 5s ease-in-out infinite; }

/* ---------- Section heads ---------- */
.sec { padding: 72px 0; }
.head { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin-bottom: 32px; flex-wrap: wrap; }
.head h2 { font: 400 clamp(40px, 5vw, 68px)/1 var(--serif); letter-spacing: -.02em; }
.head h2 span { color: var(--ink-3); font-style: italic; }
.head .mono { color: var(--ink-3); }

/* ---------- Work cards ---------- */
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px 28px; }
.card { display: block; text-decoration: none; color: inherit; border-radius: var(--r); }
.card .fig { position: relative; aspect-ratio: 4 / 3; border-radius: var(--r); overflow: hidden; isolation: isolate; }
.card .fig > * { transition: transform .7s var(--ease); }
.card:hover .fig .lift { transform: translateY(-8px) scale(1.015); }
.card .meta { margin: 18px 0 6px; color: var(--ink-3); }
.card h3 { font: 400 clamp(28px, 2.6vw, 36px)/1.1 var(--serif); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
.card p { color: var(--ink-2); margin: 10px 0 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; max-width: 40em; }
.chip { display: inline-flex; align-items: center; gap: 6px; font: 500 11.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; padding: 6px 9px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink-2); white-space: nowrap; }
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--good); }
.chip.dev::before { background: var(--accent); }
.card .go { display: inline-flex; gap: 8px; align-items: center; margin-top: 14px; font-weight: 500; }
.card .go i { font-style: normal; transition: transform .3s var(--ease); }
.card:hover .go i { transform: translateX(4px); }

/* ---------- photoreal device mockups ----------
   Each .dvc is a rendered bezel (img.bz, with a transparent screen hole) over .scr, which sits at the exact screen
   rectangle measured from the render. Screens are contained (letterboxed in black like a real display), never cropped. */
.dvc { position: relative; width: 100%; isolation: isolate; }
.dvc-iphone { aspect-ratio: 600 / 1207; }
.dvc-mac { aspect-ratio: 1800 / 1088; }
.dvc-ipad { aspect-ratio: 1000 / 769; }
.dvc .bz { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 2; pointer-events: none; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }
.dvc .scr { position: absolute; z-index: 1; overflow: hidden; background: #000; display: grid; place-items: center; container-type: size; }
.dvc .scr img { display: block; border-radius: 0 !important; box-shadow: none !important; transform: none !important; }
.dvc .scr > img, .dvc .area > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dvc .clip { width: min(100cqw, calc(100cqh * var(--ar, 1))); }
.dvc .clip img { height: auto; }
/* a faint sheen on the cover glass, above the screen and under the bezel */
.dvc .scr::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(118deg, rgba(255, 255, 255, .10) 0%, rgba(255, 255, 255, .04) 32%, rgba(255, 255, 255, 0) 33%, rgba(255, 255, 255, 0) 100%); }
.dvc-iphone .scr { left: 5.551%; top: 2.182%; width: 88.899%; height: 95.635%; border-radius: 14.36% / 6.64%; }
.dvc-ipad .scr { left: 3.240%; top: 4.409%; width: 93.520%; height: 91.182%; border-radius: 3.215% / 4.287%; }
.dvc-mac .scr { left: 12.682%; top: 3.720%; width: 74.636%; height: 80.175%; border-radius: 2.645% 2.645% 0 0 / 4.073% 4.073% 0 0; }
/* below the notch band (3.77% of the display, the same as macOS's menu bar) the display is exactly 16:10 */
.dvc-mac .area { position: absolute; left: 0; right: 0; bottom: 0; top: 3.768%; display: grid; place-items: center; container-type: size; }
.dvc-mac .scr::after { z-index: 3; }
/* soft studio shadows under the phone and tablet bodies (the laptop's contact shadow is in its render) */
.dvc-iphone::before, .dvc-ipad::before { content: ""; position: absolute; z-index: 0; pointer-events: none; }
.dvc-iphone::before { left: 3.01%; top: 1.08%; width: 93.98%; height: 97.84%; border-radius: 15.9% / 7.59%; box-shadow: 0 2px 3px rgba(0, 0, 0, .18), 0 14px 22px -6px rgba(0, 0, 0, .28), 0 40px 60px -24px rgba(0, 0, 0, .38); }
.dvc-ipad::before { left: .77%; top: 1.02%; width: 98.46%; height: 97.95%; border-radius: 4.97% / 6.5%; box-shadow: 0 2px 3px rgba(0, 0, 0, .16), 0 18px 30px -10px rgba(0, 0, 0, .26), 0 50px 70px -30px rgba(0, 0, 0, .34); }
.dvc-mac::before { content: ""; position: absolute; z-index: 0; left: 4%; right: 4%; bottom: 1.2%; height: 6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .35), transparent); filter: blur(6px); pointer-events: none; }
/* iPhone screen: status bar band (the height iOS gives it), then the screenshot whole below it; a blurred copy of
   the same image fills behind both so the screen's colors continue */
/* the copy is heavily blurred and oversized, so the thin side gaps and the band take the screen's broad colors
   (no streaks from details near the edge) */
.dvc-iphone .scr .bg, .dvc-iphone .scr canvas.bg { position: absolute; left: -30%; top: -12%; width: 160%; height: 124%; object-fit: fill; filter: blur(18px) saturate(.8); z-index: 0; }
.dvc-iphone .fit { position: absolute; left: 0; right: 0; bottom: 0; top: 5.8%; display: grid; place-items: center; container-type: size; z-index: 1; }
.dvc-iphone .fit > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.dvc-iphone .sb { position: absolute; left: 0; right: 0; top: 0; height: 5.8%; z-index: 2; color: #0b0b0d; }
.dvc-iphone .sb.on-dark { color: #fff; }
.dvc-iphone .sb svg { display: block; width: 100%; height: 100%; }
/* a soft contact shadow where the phone meets the surface */
.dvc-iphone::after { content: ""; position: absolute; z-index: 0; left: 14%; right: 14%; bottom: -1.2%; height: 2.6%; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .38), transparent); filter: blur(3px); pointer-events: none; }

/* where the devices sit on the work cards and banners: one baseline, centered as a group */
.stage { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.spot { position: relative; height: 100%; flex: none; }
.spot .dvc { width: auto; height: 100%; }
.mac-solo { height: 68%; }
.in-banner .mac-solo { height: min(84%, 52vw); }

/* looping clips: the poster <img> holds the size; clips.js adds the video and its pause button */
.clip { position: relative; display: block; overflow: hidden; }
.clip img { display: block; width: 100%; height: auto; }
.cw { position: relative; }
.cw-lead { grid-column: 1 / -1; }

/* ---------- The lead card (App Store pages) ---------- */
.lead { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); border-radius: 24px; overflow: hidden; text-decoration: none; color: #fff; background: radial-gradient(120% 120% at 0% 0%, #b0124f 0%, #7a1478 45%, #2b0f5e 100%); position: relative; min-height: 560px; }
.lead .txt { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: space-between; gap: 28px; position: relative; z-index: 2; }
.lead .meta { color: rgba(255, 255, 255, .86); display: flex; align-items: center; gap: 12px; }
.lead .meta img { width: 36px; height: 36px; border-radius: 9px; }
.lead h3 { font: 400 clamp(44px, 5vw, 76px)/.95 var(--serif); letter-spacing: -.02em; margin: 18px 0 16px; }
.lead p { color: rgba(255, 255, 255, .9); max-width: 32em; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.lead .stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 32px; }
.lead .stats b { display: block; font: 400 44px/1 var(--serif); }
.lead .stats span { font-size: 13.5px; color: rgba(255, 255, 255, .86); line-height: 1.35; display: block; max-width: 13em; margin-top: 6px; }
.lead .chip { color: #fff; border-color: rgba(255, 255, 255, .35); }
.lead .chip::before { background: #7ff0b0; }
.lead .go { display: inline-flex; gap: 8px; font-weight: 500; }
.lead .go i { font-style: normal; transition: transform .3s var(--ease); }
.lead:hover .go i { transform: translateX(4px); }
.fan { position: relative; min-height: 460px; }
.fan figure { position: absolute; top: 50%; left: 50%; width: 30%; margin: 0; transform-origin: 50% 120%; transition: transform .8s var(--ease); }
.lead:hover .fan figure, .lead:focus-visible .fan figure { transition-duration: .6s; }

/* ---------- Case study ---------- */
.cs-top { padding-top: 112px; }
.back { display: inline-flex; gap: 8px; align-items: center; text-decoration: none; color: var(--ink-2); margin-bottom: 24px; }
.back:hover { color: var(--ink); }
.banner { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 21 / 9; min-height: 320px; isolation: isolate; }
.cs-title { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 40px; padding: 44px 0 40px; border-bottom: 1px solid var(--line); align-items: end; }
.cs-title .mono { color: var(--ink-3); display: flex; gap: 10px; align-items: center; }
.cs-title .mono img { width: 30px; height: 30px; border-radius: 8px; }
.cs-title h1 { font: 400 clamp(48px, 6.4vw, 96px)/.95 var(--serif); letter-spacing: -.025em; margin-top: 14px; }
.cs-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin: 0; }
.cs-meta dt { color: var(--ink-3); margin-bottom: 3px; }
.cs-meta dd { margin: 0; font-size: 15px; line-height: 1.45; }
.cs-meta .wide { grid-column: 1 / -1; }
.cs-body { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 48px; padding-top: 48px; }
.toc { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 2px; }
.toc a { text-decoration: none; color: var(--ink-3); padding: 6px 0 6px 14px; border-left: 2px solid var(--line); transition: color .2s, border-color .2s; }
.toc a:hover { color: var(--ink); }
.toc a[aria-current="true"] { color: var(--ink); border-left-color: var(--accent); }
.toc .top { margin-top: 18px; border: 0; padding-left: 0; }
.blk { padding: 0 0 72px; scroll-margin-top: 96px; }
.blk > .lbl { color: var(--accent-text); margin-bottom: 14px; display: block; }
.blk h2 { font: 400 clamp(32px, 3.4vw, 48px)/1.05 var(--serif); letter-spacing: -.015em; margin-bottom: 20px; max-width: 18em; }
.blk h2 span { color: var(--ink-3); font-style: italic; }
.prose { max-width: 40em; font-size: 18.5px; line-height: 1.65; }
.prose p { margin-bottom: 1.1em; }
.ledetext { font: 400 clamp(24px, 2.3vw, 32px)/1.38 var(--serif); letter-spacing: -.005em; max-width: 30em; margin-bottom: 36px; }
.ledetext::first-letter { font-size: 2.1em; float: left; line-height: .82; margin: 6px 10px 0 0; color: var(--accent-text); font-style: italic; }
.short { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; border-top: 1px solid var(--line); padding-top: 20px; max-width: 52em; }
.short .mono { color: var(--ink-3); padding-top: 4px; }
.short p { margin: 0; font-size: 18px; }

.stats-band { background: var(--night); color: var(--night-ink); border-radius: 22px; padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 28px; margin-bottom: 72px; }
.stats-band b { display: block; font: 400 clamp(48px, 5vw, 72px)/1 var(--serif); letter-spacing: -.02em; }
.stats-band b em { color: var(--accent); font-style: normal; }
.stats-band span { display: block; color: var(--night-dim); font-size: 15px; line-height: 1.4; margin-top: 10px; max-width: 16em; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; counter-reset: s; }
.steps li { border-top: 1px solid var(--line); padding: 22px 0 26px; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 4px 12px; }
.steps .n { font: 400 34px/1 var(--serif); color: var(--accent-text); font-style: italic; grid-row: span 2; }
.steps h3 { font: 600 17px/1.3 var(--sans); }
.steps p { margin: 4px 0 0; color: var(--ink-2); font-size: 16px; line-height: 1.55; }

.tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 26px; }
.tabs button, .filters button { border: 1px solid var(--line); background: transparent; border-radius: 999px; padding: 9px 15px; cursor: pointer; font-size: 15px; color: var(--ink-2); transition: background .2s, color .2s, border-color .2s; display: inline-flex; gap: 8px; align-items: center; min-height: 40px; }
.tabs button:hover, .filters button:hover { color: var(--ink); border-color: rgba(0, 0, 0, .3); }
.tabs button[aria-selected="true"], .filters button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tabs .n { font: 500 11px/1 var(--mono); opacity: .7; }
.setpanel { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 36px; align-items: start; }
.setpanel .row { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.shotbtn { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; position: relative; }
.shotbtn img { border-radius: 12px; box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .5); transition: transform .4s var(--ease); }
.shotbtn:hover img { transform: translateY(-4px); }
.setpanel .ipad { margin-top: 16px; }
.setpanel .ipad img { border-radius: 14px; }
.setinfo dt { color: var(--ink-3); margin-bottom: 4px; }
.setinfo dd { margin: 0 0 18px; font-size: 16px; line-height: 1.55; }
.cap { color: var(--ink-3); font-size: 14px; margin-top: 10px; }

.decision { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px, 3.4vw, 44px); position: relative; }
.decision h2 { margin-bottom: 18px; }
.decision::before { content: ""; position: absolute; left: 0; top: 34px; bottom: 34px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); }

.ba { display: grid; gap: 14px; }
.ba-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ba-row > div { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 20px 22px 22px; position: relative; overflow: hidden; }
.ba-row > div::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--bad); }
.ba-row > div + div::after { background: var(--good); }
.ba-row .mono { display: block; margin-bottom: 8px; color: var(--bad); }
.ba-row > div + div .mono { color: var(--good); }
.ba-row p { margin: 0; font-size: 16.5px; line-height: 1.55; }
.ba-row > div:first-child p { color: var(--ink-2); }

.gallery { display: grid; gap: 18px; }
.gallery .desk { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px; }
.gallery .phones { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; }
.gallery figure { margin: 0; }
.gallery figcaption { color: var(--ink-3); font-size: 14px; margin-top: 10px; line-height: 1.45; }
.frame { background: var(--paper-2); border-radius: 16px; padding: clamp(10px, 2vw, 22px); }
.frame .shotbtn img { border-radius: 8px; }
.frame.ph .shotbtn img { border-radius: 14px; }

.outcome { background: var(--night); color: var(--night-ink); border-radius: 22px; padding: clamp(28px, 4.4vw, 56px); }
.outcome .lbl { color: #ff9a6b; }
.outcome p { font: 400 clamp(24px, 2.4vw, 34px)/1.35 var(--serif); margin: 0; max-width: 28em; }
.outcome p + p { margin-top: .8em; }
.outcome a { color: #ffb08a; }

.btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--paper); border: 0; border-radius: 999px; padding: 13px 20px; font-weight: 500; cursor: pointer; text-decoration: none; min-height: 44px; }
.btn:hover { background: #000; }
.btn.ghosty { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn.ghosty:hover { border-color: var(--ink); }
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }
.demo { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin: 0 0 22px; }
.demo p { margin: 0; color: var(--ink-3); font-size: 14.5px; max-width: 30em; }

.next { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; border-radius: 24px; overflow: hidden; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); margin: 24px 0 0; }
.next .t { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.next .t .mono { color: var(--ink-3); }
.next h2 { font: 400 clamp(36px, 4vw, 60px)/1 var(--serif); }
.next .fig { position: relative; min-height: 260px; overflow: hidden; }
.next .fig > * { transition: transform .7s var(--ease); }
.next:hover .fig .lift { transform: translateY(-8px); }

/* ---------- Shot by Jeremy (dark spread) ---------- */
.night { background: var(--night); color: var(--night-ink); }
.photos { padding: 96px 0 88px; margin-top: 40px; }
.ph-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); margin-bottom: 44px; align-items: start; }
.ph-head .brand { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.ph-head .brand img { width: 64px; height: 64px; border-radius: 14px; box-shadow: 0 0 0 1px rgba(255,255,255,.1); }
.ph-head .mono { color: var(--night-dim); }
.ph-head h2 { font: 400 clamp(56px, 7.4vw, 112px)/.9 var(--serif); letter-spacing: -.025em; }
.ph-head h2 em { color: var(--night-dim); }
.ph-head .intro { color: #dcd8d0; font-size: 18px; line-height: 1.6; }
.ph-head .nums { display: flex; gap: 40px; margin-top: 26px; flex-wrap: wrap; }
.ph-head .nums b { display: block; font: 400 56px/1 var(--serif); }
.ph-head .nums span { color: var(--night-dim); font-size: 14.5px; }
.origin { color: #cfcbc3; font-size: 17px; line-height: 1.7; border-left: 2px solid var(--accent); padding-left: 22px; margin-top: 28px; }
.origin p:last-child { margin: 0; }
.origin .q { color: #fff; }
.filters { display: flex; gap: 8px; overflow-x: auto; padding: 2px 2px 14px; margin: 0 0 18px; scrollbar-width: none; }
.filters::-webkit-scrollbar { display: none; }
.night .filters button { color: #d9d5cd; border-color: rgba(255, 255, 255, .18); white-space: nowrap; }
.night .filters button:hover { color: #fff; border-color: rgba(255, 255, 255, .5); }
.night .filters button[aria-pressed="true"] { background: var(--night-ink); color: var(--night); border-color: var(--night-ink); }
.masonry { display: flex; gap: 14px; align-items: flex-start; }
.masonry .col { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.pic { margin: 0; padding: 0; border: 0; background: var(--night-2); border-radius: 4px; overflow: hidden; cursor: zoom-in; display: block; width: 100%; position: relative; }
.pic img { width: 100%; transition: transform .8s var(--ease), opacity .6s; }
.pic:hover img { transform: scale(1.025); }
.pic .pc { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; text-align: left; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); color: #fff; font-size: 14px; line-height: 1.35; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.pic .pc small { display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #e6e2da; margin-bottom: 3px; }
.pic:hover .pc, .pic:focus-visible .pc { opacity: 1; transform: none; }
.ph-foot { margin-top: 28px; color: var(--night-dim); }
.ph-foot a { color: #fff; }

/* ---------- About ---------- */
.about .wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); }
.about h2 { font: 400 clamp(48px, 6vw, 88px)/.95 var(--serif); letter-spacing: -.02em; margin-bottom: 26px; }
.about h2 em { color: var(--ink-3); }
.about .prose { font-size: 18px; }
.xp { list-style: none; margin: 0 0 32px; padding: 0; }
.xp li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 16px; padding: 16px 0; border-top: 1px solid var(--line); }
.xp li:last-child { border-bottom: 1px solid var(--line); }
.xp b { font-weight: 600; }
.xp span { color: var(--ink-2); font-size: 15px; grid-column: 1; }
.xp time { color: var(--ink-3); grid-row: 1; grid-column: 2; }
.contact { display: grid; gap: 10px; }
.contact .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.email { font: 500 15px/1.2 var(--mono); overflow-wrap: anywhere; }
.links { display: flex; gap: 8px; flex-wrap: wrap; }
.links a { text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 10px 15px; font-size: 15px; display: inline-flex; gap: 6px; min-height: 44px; align-items: center; }
.links a:hover { border-color: var(--ink); }

/* ---------- Footer ---------- */
.foot { padding: 72px 0 40px; border-top: 1px solid var(--line); margin-top: 40px; }
.foot .big { font: 400 clamp(52px, 9vw, 150px)/.9 var(--serif); letter-spacing: -.03em; margin-bottom: 28px; }
.foot .big a { text-decoration: none; }
.foot .big a:hover em { color: var(--accent-text); }
.foot .big em { transition: color .3s; }
.foot .bar { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 40px; color: var(--ink-3); }
.nodders { display: flex; gap: 10px; perspective: 400px; }
.nodders a { width: 40px; height: 40px; border-radius: 10px; display: block; transform-origin: 50% 80%; }
.nodders img { width: 100%; height: 100%; border-radius: 10px; }
@keyframes nod { 0%, 100% { transform: rotateX(0); } 30% { transform: rotateX(28deg) translateY(2px); } 60% { transform: rotateX(-10deg); } }
.nodders a:hover, .nodders a:focus-visible { animation: nod .7s var(--ease); }

/* ---------- Lightbox ---------- */
dialog.lb { border: 0; padding: 0; margin: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; background: rgba(8, 8, 9, .94); color: #fff; }
dialog.lb::backdrop { background: rgba(0, 0, 0, .6); }
.lb-in { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto; padding: 56px 64px 20px; }
.lb-in figure { margin: 0; display: grid; place-items: center; min-height: 0; }
.lb-in img { max-width: 100%; max-height: calc(100dvh - 150px); width: auto; height: auto; object-fit: contain; border-radius: 6px; }
.lb-cap { text-align: center; color: #d9d5cd; font-size: 15px; padding-top: 14px; min-height: 40px; }
.lb-cap small { display: block; font: 500 11.5px/1.5 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: #a9a59d; }
.lb button { position: absolute; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); color: #fff; border-radius: 999px; width: 46px; height: 46px; cursor: pointer; display: grid; place-items: center; }
.lb button:hover { background: rgba(255, 255, 255, .2); }
.lb button svg { width: 20px; height: 20px; }
.lb .x { top: 14px; right: 14px; }
.lb .pv { left: 12px; top: 50%; translate: 0 -50%; }
.lb .nx { right: 12px; top: 50%; translate: 0 -50%; }
.lb-count { position: absolute; top: 26px; left: 20px; font: 500 12px var(--mono); color: #a9a59d; }

/* ---------- Toast, demo cursor, back to top ---------- */
.toast { position: fixed; left: 50%; bottom: 24px; translate: -50% 20px; background: var(--ink); color: var(--paper); padding: 11px 16px; border-radius: 12px; font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s; z-index: 120; }
.toast.on { opacity: 1; translate: -50% 0; }
.ghost { position: fixed; left: 0; top: 0; z-index: 130; pointer-events: none; opacity: 0; transition: opacity .25s; will-change: transform; }
.ghost.on { opacity: 1; }
.ghost svg { width: 24px; height: 28px; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .4)); }
.ghost .badge { position: absolute; left: 22px; top: 24px; background: var(--accent-text); color: #fff; font: 500 11.5px/1 var(--mono); padding: 5px 8px; border-radius: 6px; white-space: nowrap; }
.chipbar { position: fixed; left: 50%; bottom: 22px; translate: -50% 0; z-index: 131; background: var(--ink); color: var(--paper); border-radius: 999px; padding: 6px 6px 6px 16px; display: flex; gap: 12px; align-items: center; font-size: 14px; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .5); max-width: calc(100vw - 32px); }
.chipbar[hidden] { display: none; }
.chipbar button { background: var(--paper); color: var(--ink); border: 0; border-radius: 999px; padding: 8px 14px; cursor: pointer; font-weight: 500; min-height: 36px; }
.totop { position: fixed; right: 18px; bottom: 18px; z-index: 45; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: rgba(243, 241, 236, .85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .3s; }
.totop.on { opacity: 1; pointer-events: auto; }
.totop svg { width: 18px; height: 18px; }

/* ---------- Reveal on scroll ---------- */
.js [data-r] { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js [data-r].in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .cs-body { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .setpanel { grid-template-columns: minmax(0, 1fr); }
  .setinfo { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }
}
@media (max-width: 900px) {
  .hero { padding-top: 104px; }
  .hero .wrap, .about .wrap, .ph-head, .cs-title { grid-template-columns: minmax(0, 1fr); }
  .grid { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .lead { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .fan { min-height: 400px; }
  .steps { grid-template-columns: minmax(0, 1fr); }
  .next { grid-template-columns: minmax(0, 1fr); }
  .banner { aspect-ratio: 4 / 3; min-height: 0; }
}
@media (max-width: 600px) {
  body { font-size: 16.5px; }
  .pills a { padding: 8px 11px; font-size: 14.5px; }
  .art { padding: 14px 0 70px 0; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .lead .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 14px; }
  .lead .stats b { font-size: 34px; }
  .lead .stats span { font-size: 12.5px; }
  .fan { min-height: 330px; }
  .setpanel .row { grid-template-columns: repeat(5, 62%); overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 8px; }
  /* a swipe row: the edge fades so the next phone reads as "more this way", not as cut off */
  .setpanel .row { -webkit-mask: linear-gradient(90deg, #000 78%, transparent 99%); mask: linear-gradient(90deg, #000 78%, transparent 99%); padding-right: 22%; }
  .setpanel .row > * { scroll-snap-align: start; }
  .setinfo { grid-template-columns: minmax(0, 1fr); }
  .short { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .ba-row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .ba-row + .ba-row { margin-top: 10px; }
  .cs-meta { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gallery .phones { grid-template-columns: 1fr 1fr; gap: 12px; }
  .gallery .desk { grid-template-columns: minmax(0, 1fr); }
  .lb-in { padding: 64px 10px 16px; }
  .lb .pv, .lb .nx { top: auto; bottom: 14px; translate: none; }
  .lb-cap { padding: 14px 56px 0; }
  .masonry { gap: 8px; }
  .masonry .col { gap: 8px; }
  .pic .pc { display: none; }
  .ph-head .nums b { font-size: 46px; }
  .stats-band { grid-template-columns: 1fr 1fr; gap: 22px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-r] { opacity: 1; transform: none; }
  .tile.idle { animation: none; }
}

/* fan of App Store panels (positions come from --i, the panel's offset from the middle) */
.fan figure { transform: translate(calc(-50% + var(--i) * 58%), calc(-50% + var(--a) * 6%)) rotate(calc(var(--i) * 5deg)); }
.lead:hover .fan figure, .next:hover .fan figure, .banner .fan figure { transform: translate(calc(-50% + var(--i) * 70%), calc(-53% + var(--a) * 3%)) rotate(calc(var(--i) * 2.5deg)); }
.banner .fan figure { transform: translate(calc(-50% + var(--i) * 112%), calc(-50% + var(--a) * 4%)) rotate(calc(var(--i) * 3deg)); }
.noDrop .ledetext::first-letter { font-size: inherit; float: none; margin: 0; color: inherit; font-style: normal; line-height: inherit; }

/* ---------- round 1 fixes ---------- */
.mark { gap: 8px; }
.hero { padding: 120px 0 40px; min-height: min(100svh, 980px); display: flex; align-items: center; }
.hero .wrap { width: 100%; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); }
.drag-hint { right: auto; left: 28px; top: 0; bottom: auto; margin: 0; }
.art { padding: 30px 0 46px 28px; }
.short p.mono { font-size: 12.5px; }
.lead .fan figure { width: 24.5% !important; }
.filters { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 60px), transparent); mask: linear-gradient(90deg, #000 calc(100% - 60px), transparent); padding-right: 60px; }
.setpanel { grid-template-columns: minmax(0, 1fr); gap: 24px; }
.setpanel .row { gap: 16px; }
.setbottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 28px; align-items: start; }
.setbottom .setinfo { display: block; }
.setpanel .ipad { margin-top: 0; }
.gallery .desk { grid-template-columns: minmax(0, 1fr); }
.gallery .desk.multi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gallery .desk.multi > :first-child { grid-column: 1 / -1; }
.bannertxt { position: absolute; left: 50%; top: 50%; transform: translateY(-50%); color: #2c1366; display: grid; gap: 8px; }
.bannertxt b { font: 400 clamp(40px, 6vw, 96px)/.9 var(--serif); letter-spacing: -.02em; }
.origin-wrap { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); gap: 24px clamp(28px, 5vw, 80px); margin-top: 64px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, .14); }
.origin-wrap > .mono { color: #ff9a6b; }
.origin { font: 400 clamp(21px, 1.9vw, 27px)/1.45 var(--serif); color: #e4e0d8; border: 0; padding: 0; margin: 0; max-width: 34em; }
@media (max-width: 1100px) {
  .setinfo { display: block; }
}
@media (max-width: 900px) {
  .hero { min-height: 0; padding-top: 96px; }
  .hero .wrap { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .htext { display: contents; }
  .hero .eyebrow { order: 1; }
  .hero h1 { order: 2; margin-bottom: 14px; }
  .hero .art { order: 3; margin-bottom: 24px; }
  .hero .line { order: 4; }
  .hero .facts { order: 5; }
  .setbottom { grid-template-columns: minmax(0, 1fr); }
  .origin-wrap { grid-template-columns: minmax(0, 1fr); }
  .gallery .desk.multi { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
  .art { padding: 34px 0 40px 0; }
  .drag-hint { left: 0; }
  .bannertxt { display: none; }
}
@media (max-width: 600px) { .banner .lift > img { left: 50% !important; } }
/* tooltips take no space until shown, so they can't widen the page */
.tile .tip { display: none; }
.tile:hover .tip, .tile:focus-visible .tip { display: block; animation: tipin .2s var(--ease); }
@keyframes tipin { from { opacity: 0; transform: translateX(-50%) translateY(4px); } }
@media (hover: none) { .tile:hover .tip { display: none; } }
/* ---------- round 2 fixes ---------- */
.hero .wrap { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.hero h1 { font-size: clamp(64px, 8.6vw, 132px); }
.bannertxt.sm b { font-size: clamp(32px, 3.4vw, 52px); }
.ph-head .nums > div { max-width: 15em; }
@media (max-width: 600px) {
  .ph-head .nums { gap: 18px; display: grid; grid-template-columns: 1fr 1fr; }
  .bannertxt.sm { display: grid; }
  .bannertxt.sm b { font-size: 34px; }
  .card .lift > img { left: 30% !important; }
}
.facts .email { white-space: nowrap; overflow-wrap: normal; font-size: 14px; }
@media (max-width: 1180px) and (min-width: 901px) { .facts .hi { grid-column: 1 / -1; } }
/* a viewfinder's focus brackets on the photo you're pointing at */
.pic::after { content: ""; position: absolute; inset: 10px; pointer-events: none; opacity: 0; transform: scale(1.04); transition: opacity .25s, transform .35s var(--ease);
  background:
    linear-gradient(#fff, #fff) left top / 18px 2px no-repeat, linear-gradient(#fff, #fff) left top / 2px 18px no-repeat,
    linear-gradient(#fff, #fff) right top / 18px 2px no-repeat, linear-gradient(#fff, #fff) right top / 2px 18px no-repeat,
    linear-gradient(#fff, #fff) left bottom / 18px 2px no-repeat, linear-gradient(#fff, #fff) left bottom / 2px 18px no-repeat,
    linear-gradient(#fff, #fff) right bottom / 18px 2px no-repeat, linear-gradient(#fff, #fff) right bottom / 2px 18px no-repeat; }
.pic:hover::after, .pic:focus-visible::after { opacity: .9; transform: none; }
/* ---------- round 3 fixes ---------- */
#main:focus, h1[tabindex="-1"]:focus { outline: none; }
.banner { aspect-ratio: auto; height: clamp(300px, 46vh, 500px); min-height: 0; }
@media (max-width: 900px) { .banner { height: auto; aspect-ratio: 4 / 3; } }
@media (max-width: 600px) {
  /* on a phone the icons line up under the photo, so none of them sits on a face */
  .art { padding-bottom: 84px; }
  .tile { width: 54px; top: auto !important; bottom: 8px; }
  .tile:nth-of-type(1) { left: calc((100% - 54px) * 0 / 5) !important; }
  .tile:nth-of-type(2) { left: calc((100% - 54px) * 1 / 5) !important; }
  .tile:nth-of-type(3) { left: calc((100% - 54px) * 2 / 5) !important; }
  .tile:nth-of-type(4) { left: calc((100% - 54px) * 3 / 5) !important; }
  .tile:nth-of-type(5) { left: calc((100% - 54px) * 4 / 5) !important; }
  .tile:nth-of-type(6) { left: calc((100% - 54px) * 5 / 5) !important; }
}
/* ---------- hard pass fixes ---------- */
/* nothing below the hero can jump while the page is still being built */
#main:empty { min-height: 100vh; }
/* grain without a blend mode: same look, and the browser no longer re-blends the whole page on every scroll frame */
body::after { mix-blend-mode: normal; opacity: .05; }
/* the work peeks in under the first screen */
.hero { min-height: min(92svh, 900px); padding-bottom: 24px; }
#work { padding-top: 48px; }
/* the SBJ mark is a transparent PNG, so it always sits on its own dark tile */
.tile.sbj, .nodders a.sbj, img.sbj { background: radial-gradient(circle at 30% 20%, #2a2a2e, #0c0c0d 70%); }
.tile.sbj img, .nodders a.sbj img { padding: 10%; }
/* touch: a vertical swipe that starts on an icon still scrolls the page; a sideways start picks it up */
.tile { touch-action: pan-y; }
.reset { position: absolute; left: 28px; top: 0; display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; min-height: 24px; color: var(--ink-2); cursor: pointer; }
.reset:hover { color: var(--ink); }
.reset svg, .drag-hint svg { width: 16px; height: 16px; }
.reset[hidden], .drag-hint[hidden] { display: none; }
/* full sentences on the cards, never cut off mid-thought */
.lead p, .card p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.card .ttl { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; }
/* labels promoted to headings keep the small mono look */
.blk h2.lbl { font: 400 12.5px/1.6 var(--mono); letter-spacing: .04em; text-transform: uppercase; max-width: none; margin-bottom: 14px; display: block; }
.outcome h2.lbl { margin-bottom: 16px; }
.blk:focus { outline: none; }
.tabs .n { opacity: .85; }
/* nav over the dark photo spread */
.nav .mark, .pills, .pills a { transition: background-color .3s, color .3s, border-color .3s; }
.ondark .blur i:nth-child(3) { background: linear-gradient(rgba(12, 12, 13, .6), transparent); }
.ondark .pills { background: rgba(24, 24, 26, .72); border-color: rgba(255, 255, 255, .14); color: var(--night-ink); }
.ondark .pills a { color: #d9d5cd; }
.ondark .pills a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.ondark .pills a[aria-current="true"] { background: var(--night-ink); color: var(--night); }
.ondark .pills a.threed { color: #ff8a5c; }
.ondark .totop { background: rgba(24, 24, 26, .85); border-color: rgba(255, 255, 255, .18); color: var(--night-ink); }
@media (max-width: 900px) { .hero { min-height: 0; } }
@media (max-width: 600px) {
  /* six icons always fit the row with a gap, down to 320px */
  .art { --tw: min(54px, calc((100% - 50px) / 6)); }
  .tile { width: var(--tw); }
  .tile:nth-of-type(1) { left: calc((100% - var(--tw)) * 0 / 5) !important; }
  .tile:nth-of-type(2) { left: calc((100% - var(--tw)) * 1 / 5) !important; }
  .tile:nth-of-type(3) { left: calc((100% - var(--tw)) * 2 / 5) !important; }
  .tile:nth-of-type(4) { left: calc((100% - var(--tw)) * 3 / 5) !important; }
  .tile:nth-of-type(5) { left: calc((100% - var(--tw)) * 4 / 5) !important; }
  .tile:nth-of-type(6) { left: calc((100% - var(--tw)) * 5 / 5) !important; }
  .reset { left: 0; }
}
/* round 2: the case title is on the first screen of a 768px-tall laptop, and the section index stays down to 960px */
.banner { height: clamp(240px, 38vh, 460px); }
.cs-title { padding: 36px 0 34px; }
@media (max-width: 1100px) and (min-width: 961px) {
  .cs-body { grid-template-columns: 150px minmax(0, 1fr); gap: 32px; }
  .toc { display: flex; }
}
@media (max-width: 900px) { .banner { height: auto; } }
/* the App Store panels in the banner are sized from its height, so no panel is ever cut off at the top or bottom */
@media (min-width: 901px) { .banner .fan figure { width: min(15%, calc(clamp(240px, 38vh, 460px) * .38)) !important; } }
/* ---------- the work on the first screen ----------
   The hero is sized to the viewport so the top of the App Store card shows under it at 1440x900, 1024x768 and
   390x844. The portrait keeps its own 3:2 shape (its width is capped by the screen height, never cropped). */
@media (min-width: 901px) {
  .hero { min-height: 0; display: block; padding: 92px 0 0; }
  .hero .wrap { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); grid-template-areas: "text art" "facts art"; grid-template-rows: auto 1fr; column-gap: clamp(28px, 4vw, 64px); row-gap: 22px; align-items: start; }
  .htext { grid-area: text; align-self: end; }
  .hero .art { grid-area: art; align-self: center; }
  .hero .facts { grid-area: facts; align-self: start; }
  .hero h1 { font-size: clamp(56px, 6.6vw, 104px); margin-bottom: 20px; }
  .hero .line { font-size: clamp(17px, 1.35vw, 20px); margin-bottom: 0; }
  .eyebrow { margin-bottom: 14px; }
  .facts { gap: 12px 28px; padding-top: 16px; }
  .facts dd { font-size: 15px; }
  .hero .portrait { width: min(100%, calc((100svh - 420px) * 1.5)); margin-left: auto; }
  #work { padding-top: 20px; }
  #work .head { margin-bottom: 20px; }
  #work .head h2 { font-size: clamp(40px, 4.2vw, 60px); }
}
/* shorter or narrower laptops: the two facts run as one row under the text and the photo */
@media (min-width: 901px) and (max-width: 1180px), (min-width: 901px) and (max-height: 820px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "text art" "facts facts"; grid-template-rows: auto auto; align-items: center; }
  .htext { align-self: center; }
  .hero .facts { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); max-width: 760px; }
  .facts .hi { grid-column: auto; }
  .hero { padding-top: 84px; }
  .hero .wrap { row-gap: 8px; }
  .hero .portrait { width: min(100%, calc((100svh - 490px) * 1.5)); }
}
@media (max-width: 600px) {
  /* the name on one line, the photo with the icons in a grid beside it, and the two facts side by side */
  .hero { padding-top: 76px; }
  .hero h1 { font-size: clamp(40px, 12.4vw, 52px); margin-bottom: 8px; }
  .hero h1 br { display: none; }
  .hero .eyebrow { margin-bottom: 12px; font-size: 11.5px; }
  .hero .art { --tw: 46px; padding: 30px 0 0; margin-bottom: 18px; min-height: calc(3 * 46px + 2 * 10px + 30px); }
  .hero .portrait { width: calc(100% - 2 * 46px - 26px); }
  .hero .tile { width: var(--tw); bottom: auto; }
  .hero .tile:nth-of-type(1), .hero .tile:nth-of-type(3), .hero .tile:nth-of-type(5) { left: calc(100% - 2 * 46px - 10px) !important; }
  .hero .tile:nth-of-type(2), .hero .tile:nth-of-type(4), .hero .tile:nth-of-type(6) { left: calc(100% - 46px) !important; }
  .hero .tile:nth-of-type(1), .hero .tile:nth-of-type(2) { top: 30px !important; }
  .hero .tile:nth-of-type(3), .hero .tile:nth-of-type(4) { top: calc(30px + 56px) !important; }
  .hero .tile:nth-of-type(5), .hero .tile:nth-of-type(6) { top: calc(30px + 112px) !important; }
  .hero { padding-bottom: 6px; }
  .hero .line { font-size: 16px; line-height: 1.5; margin-bottom: 12px; }
  .hero .facts { grid-template-columns: 1fr 1fr; gap: 10px 16px; padding-top: 12px; }
  .hero .facts dt { margin-bottom: 2px; }
  .hero .facts dd { font-size: 14px; line-height: 1.4; }
  .hero .facts .email { font-size: 12px; }
  .hero .facts { margin-top: 0; }
  #work { padding-top: 18px; }
  #work .head { margin-bottom: 14px; }
  #work .head h2 { font-size: 36px; }
}
/* device mockups in buttons: the whole device lifts on hover */
.shotbtn:has(.dvc) { width: 100%; border-radius: 0; }
.shotbtn .dvc { transition: transform .4s var(--ease); }
.shotbtn:hover .dvc { transform: translateY(-4px); }

/* ---------- the App Store work: an iPhone open to LumaBooth's App Store page (appstore.js) ---------- */
.lead-phone { position: relative; min-height: 460px; display: flex; align-items: center; justify-content: center; padding: 22px 0 80px; }
.lead-phone .dvc { position: absolute; top: 22px; bottom: 80px; left: 40%; transform: translateX(-50%); width: auto; height: auto; }
.lead-ctl { position: absolute; left: 67%; bottom: 22px; transform: translateX(-50%); color: #fff; z-index: 3; }
.as-stage .as-spot { height: 86%; }
.in-banner.as-stage { gap: 32px; color: #fff; }
.in-banner.as-stage .as-spot { height: 94%; }
.in-banner.as-stage .asctl { flex-direction: column; align-items: flex-start; gap: 10px; }
.in-banner.as-stage .asctl .lbl { text-align: left; }
@media (max-width: 900px) {
  .lead-phone { min-height: 0; height: 470px; padding: 0; }
  .lead-phone .dvc { top: 8px; bottom: 74px; left: 50%; }
  .lead-ctl { left: 50%; bottom: 18px; }
  .in-banner.as-stage { gap: 18px; }
}
@media (max-width: 600px) {
  .lead-phone { height: 420px; }
  .asctl .lbl { min-width: 0; }
  .asctl .lbl b { font-size: 14px; }
}
/* the set viewer shows the panels the way the App Store lists them: rounded corners and a hairline, no device */
.setpanel .row .shotbtn img { border-radius: 9.5% / 4.4%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }
.setpanel .shotbtn.ipad img { border-radius: 3% / 4%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .08); }

/* ---------- bigger device mockups (Command Center, Scout, Nod) ----------
   On the work cards the laptop fills most of the card with both ends of its base in view, and the phone stands
   just right of the lid, in front of the base's overhang, so it never covers the screen. */
.card .fig .stage .mac-solo { position: absolute; left: 1%; bottom: 8%; width: 98%; height: auto; }
.card .fig .stage .spot .dvc { width: 100%; height: auto; }
/* case studies: every desktop screen at full width, the laptop as wide as its panel with both base ends in view,
   and the phones two to a row */
.gallery .desk, .gallery .desk.multi { grid-template-columns: minmax(0, 1fr); }
.gallery .desk.multi > :first-child { grid-column: auto; }
.gallery .desk .frame { padding: clamp(14px, 2vw, 22px) 0 24px; }
.gallery .phones { grid-template-columns: repeat(2, minmax(0, 300px)); justify-content: center; gap: 28px 40px; }
@media (max-width: 600px) {
  /* phones: the devices stack, each close to the full width */
  .gallery .phones { grid-template-columns: minmax(0, 1fr); max-width: 300px; margin: 0 auto; }
}
/* the bezel image is in the flow inside screenshot buttons, so the device's height never depends on aspect-ratio
   support inside a <button> (older mobile Safari) */
.shotbtn .dvc .bz { position: relative; display: block; height: auto; }
@media (max-width: 600px) {
  /* phones: one big device per row, no pale tile around it */
  .gallery .phones { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: none; margin: 0; gap: 30px; justify-items: center; }
  .gallery .phones figure { width: 80%; }
  .gallery .phones .frame.ph { background: none; padding: 0; }
  .gallery .phones figcaption { text-align: center; }
  /* the laptop drops its tile on phones too, at the full content width */
  .gallery .desk .frame { background: none; padding: 0; }
  .gallery figure + figure, .gallery .desk + .phones { margin-top: 14px; }
  .gallery figcaption { margin-bottom: 18px; }
}

/* ---------- laptops only (Oct 17) ----------
   The wordmark is his name in plain text, like the reference portfolios. */
.nav .mark { font: 600 16px/1 var(--sans); letter-spacing: -.01em; color: var(--ink); gap: 0; padding: 10px 0; }
.ondark .nav .mark, .ondark .mark { color: var(--night-ink); }
/* work cards: the laptop is the hero, centered with even air around it */
.card .fig .stage .mac-solo { position: absolute; left: 50%; top: 50%; bottom: auto; width: 90%; transform: translate(-50%, -46%); }
/* the App Store set: just the iPad panel under the iPhone panels */
.setbottom { display: block; }
.setpanel .shotbtn.ipad { max-width: 620px; margin: 0 auto; }
/* the plain-text wordmark needs a calm band under it while content scrolls by, like the reference sites' headers */
.blur i:nth-child(3) { mask: linear-gradient(#000 45%, transparent 85%); -webkit-mask: linear-gradient(#000 45%, transparent 85%); background: linear-gradient(rgba(243, 241, 236, .9) 55%, rgba(243, 241, 236, 0)); }
.ondark .blur i:nth-child(3) { background: linear-gradient(rgba(12, 12, 13, .88) 55%, rgba(12, 12, 13, 0)); }
.card .fig .stage .mac-solo { width: 95%; transform: translate(-50%, -47%); }
/* a solid header in the page color (like Tammy's and Emmi's), so nothing scrolls visibly behind the wordmark */
.blur { height: 82px; }
.blur i:nth-child(1), .blur i:nth-child(2) { display: none; }
.blur i:nth-child(3) { backdrop-filter: none; -webkit-backdrop-filter: none; mask: none; -webkit-mask: none; background: var(--paper); box-shadow: 0 1px 0 var(--line); }
.ondark .blur i:nth-child(3) { background: var(--night); box-shadow: 0 1px 0 rgba(255, 255, 255, .1); }
@media (max-width: 600px) { .blur { height: 74px; } }

/* ==========================================================================
   Restyle, Oct 18: a grainy berry, violet and navy gradient behind the hero (LumaBooth's berry and violet into
   Scout's navy), off-white reading surfaces, Manrope for UI, body and headlines, Instrument Serif Italic for one
   or two key words, Geist Mono for labels. The app icons are stickers: a white die-cut border, a soft shadow and
   an italic "(LABEL)" caption. These tokens are the one place to restyle the look.
   ========================================================================== */
@font-face { font-family: "Manrope Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 102%; descent-override: 29%; line-gap-override: 0%; }
:root {
  --paper: #f6f4ef;
  --paper-2: #ebe8e1;
  --card: #fcfbf8;
  --g1: #8f1457;           /* LumaBooth berry */
  --g2: #4b1f8f;           /* LumaBooth violet */
  --g3: #141838;           /* Scout navy */
  --grad: linear-gradient(172deg, var(--g1) 0%, var(--g2) 52%, var(--g3) 100%);
  --on-grad: #ffffff;
  --on-grad-2: rgba(255, 255, 255, .82);
  --sans: "Manrope", "Manrope Fallback", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --serif: var(--sans);    /* headlines are grotesk now */
  --italic: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-io: cubic-bezier(.77, 0, .175, 1);
  --t-micro: 120ms;
  --t-ui: 200ms;
}
body { letter-spacing: -.01em; text-rendering: optimizeLegibility; font-feature-settings: "ss01" 0; }

/* headlines: bold grotesk, tight */
.hero h1, .head h2, .card h3, .lead h3, .cs-title h1, .blk h2, .next h2, .ph-head h2, .about h2, .foot .big, .bannertxt b { font-weight: 750; letter-spacing: -.045em; }
.hero h1 { line-height: .98; }
.head h2, .about h2, .ph-head h2, .foot .big, .cs-title h1 { line-height: 1; }
.card h3, .next h2 { font-weight: 700; letter-spacing: -.03em; }
.blk h2 { font-weight: 700; letter-spacing: -.03em; line-height: 1.1; }
.lead .stats b, .stats-band b, .ph-head .nums b { font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ledetext, .outcome p, .origin { font-weight: 500; letter-spacing: -.02em; }
/* the one or two italic serif words in a headline (Jago's trick) */
.hero h1 em, .head h2 span, .blk h2 span, .ph-head h2 em, .about h2 em, .foot .big em, .steps .n, .ledetext::first-letter {
  font-family: var(--italic); font-style: italic; font-weight: 400; letter-spacing: -.01em;
}
.hero h1 em, .head h2 span, .blk h2 span, .ph-head h2 em, .about h2 em, .foot .big em { font-size: 1.1em; line-height: 0; }
.head h2 span, .blk h2 span, .about h2 em { color: var(--accent-text); }
.ph-head h2 em { color: #ff9a6b; }
.mono, .chip, .lb-cap small { letter-spacing: .07em; }
.prose, .about .prose { max-width: 62ch; }

/* ---------- the gradient hero ---------- */
.hero { position: relative; background: var(--grad); color: var(--on-grad); isolation: isolate; padding-bottom: 56px; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  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%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero h1, .hero .line, .hero .facts dd, .hero .facts a { color: var(--on-grad); }
.hero h1 em { color: var(--on-grad); }
.hero .eyebrow, .hero .facts dt, .hero .drag-hint, .hero .reset { color: var(--on-grad-2); }
.hero .eyebrow::before { background: #ff8a55; }
.hero .line { color: var(--on-grad-2); }
.hero .facts { border-top-color: rgba(255, 255, 255, .22); }
.hero :focus-visible { outline-color: #fff; }
.hero .reset:hover { color: #fff; }
.hero .portrait { border: 6px solid #fff; border-radius: 20px; background: #fff; box-shadow: 0 2px 4px rgba(10, 6, 30, .25), 0 40px 70px -30px rgba(5, 3, 20, .7); }
.hero .portrait img { border-radius: 14px; }
#work { padding-top: 56px; }

/* ---------- stickers: the app icons with a white die-cut edge, a soft shadow and an italic caption ---------- */
.tile { background: #fff; padding: 4px; border-radius: 26%; transition: transform .3s var(--ease-out), box-shadow var(--t-ui) ease;
  box-shadow: 0 1px 2px rgba(10, 6, 30, .3), 0 14px 26px -10px rgba(5, 3, 20, .6); will-change: transform; }
.tile img { border-radius: 23%; }
.tile:hover { box-shadow: 0 2px 3px rgba(10, 6, 30, .3), 0 22px 34px -12px rgba(5, 3, 20, .65); }
.tile.dragging { box-shadow: 0 3px 4px rgba(10, 6, 30, .25), 0 34px 44px -14px rgba(5, 3, 20, .6); }
.tile.sbj { background: #fff; }
.tile.sbj img { padding: 10%; background: radial-gradient(circle at 30% 20%, #2a2a2e, #0c0c0d 70%); }
@media (min-width: 901px) {
  .hero .tile:is(:nth-of-type(2), :nth-of-type(5)) .tip { display: block; opacity: 1; animation: none; top: calc(100% + 8px); bottom: auto; transform: translateX(-50%);
    background: none; padding: 0; border-radius: 0; color: #fff; font: italic 400 15px/1 var(--italic); letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(10, 6, 30, .45); }
  .hero .tile:is(:nth-of-type(2), :nth-of-type(5)) .tip::before { content: "("; }
  .hero .tile:is(:nth-of-type(2), :nth-of-type(5)) .tip::after { content: ")"; }
}

/* ---------- nav over the gradient ---------- */
.onhero .blur i:nth-child(3) { background: rgba(40, 14, 70, .42); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: none; }
.onhero.attop .blur i:nth-child(3) { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.onhero .nav .mark { color: #fff; }
.onhero .pills { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .26); }
.onhero .pills a { color: #fff; }
.onhero .pills a:hover { background: rgba(255, 255, 255, .14); }
.onhero .pills a[aria-current="true"] { background: #fff; color: var(--g1); }
.onhero .totop { background: rgba(40, 14, 70, .6); border-color: rgba(255, 255, 255, .25); color: #fff; }

/* ---------- section break: the photo spread picks the gradient back up at its top ---------- */
.night.photos { background: linear-gradient(180deg, var(--g3) 0%, #0f1022 340px, var(--night) 760px); }

/* ---------- motion (Emil Kowalski's rules): ease-out in, ease on hover, under 300ms for UI, press feedback ---------- */
.js [data-r] { transform: translateY(12px) scale(.985); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.card .fig > *, .next .fig > * { transition: transform .3s ease; }
.card:hover .fig .lift { transform: translateY(-6px); }
.pic img { transition: transform .3s ease, opacity .3s ease; }
.pills a, .tabs button, .filters button, .btn, .links a { transition: background-color var(--t-ui) ease, color var(--t-ui) ease, border-color var(--t-ui) ease, transform var(--t-micro) ease-out; }
.pills a:active, .tabs button:active, .filters button:active, .btn:active, .links a:active { transform: scale(.97); }
.toast { transition: opacity var(--t-ui) var(--ease-out), translate var(--t-ui) var(--ease-out); }
.lead .go i, .card .go i { transition: transform var(--t-ui) ease; }
@media (max-width: 600px) {
  .hero { padding-bottom: 28px; }
  .tile { padding: 3px; }
  #work { padding-top: 32px; }
}

/* ---------- Oct 18, round 2: one sticker size, and a drifting gradient ---------- */
/* every icon is a full-bleed 256px square now (assets/v/logos/*-256.webp), so all six stickers share one shape,
   one white edge and one size; the hairline keeps the white Scout icon from melting into its border */
.tile img, .tile.sbj img { padding: 0; background: none; border-radius: 22%; box-shadow: 0 0 0 1px rgba(20, 16, 40, .1); }
.tile { aspect-ratio: 1; height: auto; }
/* big soft blobs of berry, violet and navy drift over 18 to 30 seconds (transform only, so it stays on the GPU);
   the grain (.hero::before) sits still on top, and the whole thing pauses off screen and under reduced motion */
.hero-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: var(--grad); pointer-events: none; }
.hero-bg i { position: absolute; width: 90vmax; height: 90vmax; border-radius: 50%; will-change: transform; animation: drift 24s ease-in-out infinite alternate; }
.hero-bg i:nth-child(1) { left: -35vmax; top: -45vmax; background: radial-gradient(closest-side, rgba(166, 24, 98, .95), rgba(166, 24, 98, 0)); animation-duration: 22s; }
.hero-bg i:nth-child(2) { right: -40vmax; top: -20vmax; background: radial-gradient(closest-side, rgba(92, 38, 184, .9), rgba(92, 38, 184, 0)); animation-duration: 28s; animation-delay: -9s; }
.hero-bg i:nth-child(3) { left: -20vmax; bottom: -55vmax; background: radial-gradient(closest-side, rgba(14, 18, 52, .95), rgba(14, 18, 52, 0)); animation-duration: 19s; animation-delay: -4s; }
.hero-bg i:nth-child(4) { left: 20vmax; top: -10vmax; width: 60vmax; height: 60vmax; background: radial-gradient(closest-side, rgba(128, 22, 110, .7), rgba(128, 22, 110, 0)); animation-duration: 30s; animation-delay: -15s; }
@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  33% { transform: translate3d(14vmax, 8vmax, 0) scale(1.12); }
  66% { transform: translate3d(-6vmax, 16vmax, 0) scale(.92); }
  100% { transform: translate3d(10vmax, -6vmax, 0) scale(1.05); }
}
.hero-bg.paused i { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .hero-bg i { animation: none !important; } }

/* ---------- Oct 18, round 3 ---------- */
/* no mono, no all-caps labels: every label is Manrope in sentence case, small, medium weight and a little muted */
:root { --mono: var(--sans); }
.mono { font: 500 14px/1.45 var(--sans); letter-spacing: -.005em; text-transform: none; }
.chip { font: 600 12.5px/1 var(--sans); letter-spacing: 0; text-transform: none; }
.pic .pc small, .lb-cap small { font: 600 12.5px/1.4 var(--sans); letter-spacing: 0; text-transform: none; }
.blk h2.lbl { font: 600 14px/1.5 var(--sans); letter-spacing: 0; text-transform: none; }
.email, .facts .email { font: 500 15px/1.35 var(--sans); letter-spacing: -.01em; }
.tabs .n, .lb-count, .ghost .badge { font-family: var(--sans); letter-spacing: 0; }
body .asctl .lbl small { font: 500 12.5px/1.2 var(--sans) !important; letter-spacing: 0 !important; text-transform: none !important; }

/* the role line: a frosted white glass dot, then the phrase that flips */
.hero .eyebrow { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; font: 650 clamp(18px, 1.5vw, 21px)/1.3 var(--sans); letter-spacing: -.02em; color: #fff; }
.hero .eyebrow::before { display: none; }
.live { position: relative; flex: none; width: 11px; height: 11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 30%, rgba(255,255,255,.75) 55%, rgba(255,255,255,.45) 100%); box-shadow: 0 0 0 1px rgba(255,255,255,.55), 0 0 0 4px rgba(255,255,255,.14), 0 0 10px rgba(255,255,255,.35), inset 0 -1px 2px rgba(0,0,0,.12); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(255,255,255,.55); animation: ping 2.6s cubic-bezier(0, 0, .2, 1) infinite; }
@keyframes ping { 70%, 100% { transform: scale(2.8); opacity: 0; } }
.flip { display: inline-grid; }
/* Like taamannae.dev's rotating line: the new phrase drops in from above with a gentle spring settle and pushes
   the old one down and out, inside a clipped line, no blur. */
.flip { overflow: hidden; padding: .08em 0; margin: -.08em 0; }
.flip > span { grid-area: 1 / 1; opacity: 0; transform: translateY(-110%); transition: transform .9s cubic-bezier(.22, 1.25, .36, 1), opacity .5s ease; white-space: nowrap; }
.flip > span.on { opacity: 1; transform: none; }
.flip > span.out { opacity: 0; transform: translateY(110%); transition: transform .7s cubic-bezier(.4, 0, .2, 1), opacity .45s ease; }
.hero .school { font: 500 14px/1.4 var(--sans); color: var(--on-grad-2); margin: 0 0 18px 22px; }
@media (max-width: 900px) { .hero .school { order: 1; } }
@media (max-width: 600px) {
  .hero .eyebrow { font-size: 17px; }
  .hero .school { margin-bottom: 12px; font-size: 13.5px; }
  .hero .facts .email { font-size: 14px; }
}

/* stickers float: a slow bob and a slight turn, staggered (individual transform properties, so the inline tilt stays) */
.tile, .tile.idle { cursor: pointer; animation: floaty 6.4s ease-in-out infinite; transition: scale var(--t-ui) ease, box-shadow var(--t-ui) ease; }
.tile:nth-of-type(2n) { animation-duration: 7.6s; animation-direction: reverse; }
.tile:nth-of-type(3n) { animation-duration: 5.6s; }
.tile:hover { scale: 1.06; }
@keyframes floaty { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 -8px; rotate: 3deg; } }
.drag-hint, .reset { display: none !important; }

/* the gradient drifts further and faster, so it reads as moving within a few seconds */
.hero-bg i { animation-name: drift2; }
.hero-bg i:nth-child(1) { animation-duration: 14s; }
.hero-bg i:nth-child(2) { animation-duration: 18s; }
.hero-bg i:nth-child(3) { animation-duration: 16s; }
.hero-bg i:nth-child(4) { animation-duration: 20s; }
@keyframes drift2 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(22vmax, 10vmax, 0) scale(1.15); }
  50% { transform: translate3d(8vmax, 26vmax, 0) scale(.9); }
  75% { transform: translate3d(-14vmax, 12vmax, 0) scale(1.1); }
  100% { transform: translate3d(16vmax, -8vmax, 0) scale(1); }
}

/* ---------- the nav: Tammy's glass pill, with an active pill that slides ---------- */
/* the top band is a progressive blur again (content softens as it slides under the nav), not a solid bar */
.blur { height: 104px; }
.blur i:nth-child(1), .blur i:nth-child(2) { display: block; }
.blur i:nth-child(3) { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); mask: linear-gradient(#000 35%, transparent); -webkit-mask: linear-gradient(#000 35%, transparent); background: linear-gradient(rgba(246, 244, 239, .8), rgba(246, 244, 239, 0)); box-shadow: none; }
.ondark .blur i:nth-child(3) { background: linear-gradient(rgba(12, 12, 13, .75), rgba(12, 12, 13, 0)); box-shadow: none; }
.onhero .blur i:nth-child(3) { background: linear-gradient(rgba(70, 18, 90, .35), rgba(70, 18, 90, 0)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.onhero.attop .blur i { backdrop-filter: none; -webkit-backdrop-filter: none; background: none; }
.pills { position: relative; gap: 2px; padding: 5px; border-radius: 999px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .65);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 10px 30px -12px rgba(20, 16, 40, .28), 0 1px 2px rgba(20, 16, 40, .08);
  backdrop-filter: blur(18px) saturate(1.7); -webkit-backdrop-filter: blur(18px) saturate(1.7); }
.pills a, .onhero .pills a, .ondark .pills a { position: relative; z-index: 1; font: 700 16px/1 var(--sans); letter-spacing: -.01em; padding: 12px 17px; color: rgba(21, 21, 23, .5); background: transparent; }
.pills a:hover { color: var(--ink); background: transparent; }
.pills a[aria-current="true"], .onhero .pills a[aria-current="true"], .ondark .pills a[aria-current="true"] { background: transparent; color: var(--ink); }
.pill-ind { position: absolute; z-index: 0; left: 0; top: 5px; bottom: 5px; width: 0; border-radius: 999px; background: rgba(21, 21, 23, .09); opacity: 0; pointer-events: none;
  transition: transform .28s var(--ease-io), width .28s var(--ease-io), opacity var(--t-ui) ease, background-color var(--t-ui) ease; }
.onhero .pills, .ondark .pills { background: rgba(255, 255, 255, .13); border-color: rgba(255, 255, 255, .28); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), 0 10px 30px -12px rgba(0, 0, 0, .4); }
.onhero .pills a, .ondark .pills a { color: rgba(255, 255, 255, .72); }
.onhero .pills a:hover, .ondark .pills a:hover { color: #fff; }
.onhero .pills a[aria-current="true"], .ondark .pills a[aria-current="true"] { color: #fff; }
.onhero .pill-ind, .ondark .pill-ind { background: rgba(255, 255, 255, .2); }
/* where backdrop blur is missing or weak (older iOS Safari), the glass gets a fuller fill so the words stay readable */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .pills { background: rgba(246, 244, 239, .94); }
  .onhero .pills { background: rgba(70, 24, 110, .82); }
  .ondark .pills { background: rgba(24, 24, 28, .9); }
}
@supports (-webkit-touch-callout: none) {
  .pills { background: rgba(255, 255, 255, .66); }
  .onhero .pills { background: rgba(255, 255, 255, .18); }
}
@media (max-width: 600px) {
  .pills a, .onhero .pills a, .ondark .pills a { font-size: 15px; padding: 10px 13px; }
  .pills { padding: 4px; }
  .pill-ind { top: 4px; bottom: 4px; }
}
@media (prefers-reduced-motion: reduce) { .tile, .live::after, .hero-bg i { animation: none !important; } .flip > span { transition: none; } }
@media (max-width: 600px) {
  .pills a, .onhero .pills a, .ondark .pills a { font-size: 14.5px; padding: 9px 11px; }
  .nav .mark { white-space: nowrap; font-size: 15.5px; }
}
@media (max-width: 360px) { .pills a, .onhero .pills a, .ondark .pills a { padding: 9px 8px; } }

/* Jago-style visible drift: contrasting blobs (hot pink, electric violet, a touch of Command Center orange) over a
   deep navy base, so the movement actually reads. Text stays readable: blobs sit at moderate opacity and the base
   is dark. */
.hero-bg { background: linear-gradient(172deg, #2a0f3f 0%, #1a1550 55%, #0f1230 100%); }
.hero-bg i { mix-blend-mode: screen; filter: blur(10px); }
.hero-bg i:nth-child(1) { background: radial-gradient(closest-side, rgba(226, 46, 122, .85), rgba(226, 46, 122, 0)); animation-duration: 12s; }
.hero-bg i:nth-child(2) { background: radial-gradient(closest-side, rgba(124, 58, 255, .8), rgba(124, 58, 255, 0)); animation-duration: 15s; }
.hero-bg i:nth-child(3) { background: radial-gradient(closest-side, rgba(255, 106, 61, .45), rgba(255, 106, 61, 0)); animation-duration: 13s; }
.hero-bg i:nth-child(4) { background: radial-gradient(closest-side, rgba(150, 20, 110, .75), rgba(150, 20, 110, 0)); animation-duration: 17s; }
/* smaller blobs that travel further and faster, so the drift is obvious within a couple of seconds */
.hero-bg i { width: 60vmax; height: 60vmax; animation-name: drift3; }
.hero-bg i:nth-child(1) { left: -10vmax; top: -25vmax; animation-duration: 9s; }
.hero-bg i:nth-child(2) { right: -15vmax; left: auto; top: -10vmax; animation-duration: 11s; animation-delay: -4s; }
.hero-bg i:nth-child(3) { left: 30vmax; bottom: -35vmax; top: auto; animation-duration: 10s; animation-delay: -2s; }
.hero-bg i:nth-child(4) { left: 5vmax; top: 5vmax; width: 45vmax; height: 45vmax; animation-duration: 12s; animation-delay: -7s; }
@keyframes drift3 {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  25% { transform: translate3d(22vmax, 10vmax, 0) scale(1.15); }
  50% { transform: translate3d(8vmax, 26vmax, 0) scale(.9); }
  75% { transform: translate3d(-16vmax, 12vmax, 0) scale(1.1); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}