/* richeen — round 4 art direction: cream, olive-black, sun */
:root {
  --cream: #FFFDF3; --ink: #1F2010; --mus: #E9D577; --pale: #FFFBD6; --lil: #D4CBF2; --or: #D14517;
  --ink2: rgba(31, 32, 16, .66); --line: rgba(31, 32, 16, .14);
  --lil-t: #ECE7FB; --mus-t: #FAF0C4; --olive: #556B2F; --foot: #3B3F1F;
  --fh: 'Krona One', 'Arial Black', sans-serif; --fb: 'DM Sans', system-ui, sans-serif;
  --g: clamp(16px, 4vw, 56px); --max: 1440px;
  --sun: radial-gradient(circle at 42% 38%, #FFF9CF 0%, #FBEBA4 32%, #F1D27E 66%, #E3B160 100%);
  --ease: cubic-bezier(.22, .61, .36, 1);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--cream); color: var(--ink); font: 400 17px/1.6 var(--fb); letter-spacing: -.01em; overflow-x: clip; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { font-family: var(--fh); font-weight: 400; line-height: 1.2; letter-spacing: -.05em; margin: 0; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; border-radius: 4px; }
.vh { 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: 300; background: var(--ink); color: var(--cream); padding: 10px 16px; border-radius: 99px; }
.skip:focus { top: 12px; }
/* symbols take the colour and size of the text around them */
.g { color: inherit; font-family: var(--fb); font-size: 1em; font-weight: 400; display: inline-block; }
.lbl { font-size: 13px; letter-spacing: .02em; color: var(--ink2); margin: 0 0 14px; }
.v-w { display: none; }
html.warm .v-w { display: revert; }
html.warm .v-s { display: none; }

/* film grain over everything */
body::after { content: ""; position: fixed; inset: 0; z-index: 400; pointer-events: none; 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%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* logo as a mask, so it can take any colour or gradient */
.logo-m { display: block; aspect-ratio: 1920 / 422; background: var(--ink);
  -webkit-mask: url(../img/r4/logo-mask.png) center / contain no-repeat; mask: url(../img/r4/logo-mask.png) center / contain no-repeat; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 42px; padding: 8px 18px; border: 1px solid var(--ink); border-radius: 99px; text-decoration: none; font-weight: 500; background: transparent; transition: background-color .4s var(--ease), border-color .4s; }
/* every button: a yellow-to-purple gradient on hover, like Enter on the preloader */
.btn:hover, .btn:focus-visible, .pm-btn:hover, .pm-btn:focus-visible, .foot-top-btn:hover, .foot-top-btn:focus-visible, .q-arw:hover, .ai-chip:hover, .ai-chip:focus-visible, .copyv button:hover { background: linear-gradient(90deg, #F6DC6B, #E4D3C0 50%, #C4B8EE); border-color: transparent; color: var(--ink); }
.arw { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--ink); background: transparent; font-size: 22px; line-height: 1; display: grid; place-items: center; padding: 0 0 3px; transition: background-color .4s var(--ease), opacity .3s; }
.arw:hover { background: var(--lil); }
.arw:disabled { opacity: .3; cursor: default; background: transparent; }

/* reveal: text fades in from the top, slowly */
.js [data-reveal] { opacity: 0; transform: translateY(-14px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

/* ---------- bar ---------- */
.bar { position: fixed; inset: 0 0 auto; z-index: 120; display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 24px; padding: 20px var(--g); color: var(--cream); mix-blend-mode: difference; pointer-events: none; }
.bar > * { pointer-events: auto; }
.bar-logo { width: clamp(104px, 9vw, 136px); padding: 6px 0; }
.bar-logo img { filter: invert(1); width: 100%; }
.bar-tag { margin: 0; font-size: 16px; padding-top: 6px; text-align: center; }
.bar-nav { justify-self: end; }
.bar-nav a { display: flex; align-items: center; gap: 8px; text-decoration: none; font-size: 15px; line-height: 1.25; padding: 1px 0; justify-content: flex-end; }
.bar-nav a::before { content: "●"; font-size: 9px; opacity: 0; transform: scale(.3); transition: opacity .4s, transform .4s var(--ease); }
.bar-nav a[aria-current]::before, .bar-nav a:hover::before { opacity: 1; transform: none; }
.bar-menu { display: none; }
@media (max-width: 760px) {
  .bar { grid-template-columns: 1fr auto; padding-top: 14px; }
  .bar-tag { display: none; }
  .bar-menu { display: block; justify-self: end; background: none; border: 0; padding: 8px 0 8px 16px; min-height: 44px; font-size: 15px; }
  .bar-menu .close-l { display: none; }
  .bar-nav { position: fixed; inset: 0; width: 100%; height: 100%; justify-self: stretch; align-self: stretch; z-index: -1; background: var(--ink); display: none; padding: 120px var(--g) 40px; mix-blend-mode: normal; }
  .menu-open .bar { mix-blend-mode: normal; }
  .menu-open .bar-nav { display: block; }
  .menu-open .bar-menu .open-l { display: none; }
  .menu-open .bar-menu .close-l { display: inline; }
  .bar-nav a { font-family: var(--fh); letter-spacing: -.05em; font-size: 34px; justify-content: flex-start; padding: 8px 0; }
  .bar-nav a::before { font-size: 14px; }
}

/* ---------- cursor & heat trail (fine pointers only) ---------- */
.cur, .heat { display: none; }
.has-cur, .has-cur a, .has-cur button { cursor: none; }
.has-cur .cur { display: block; position: fixed; left: 0; top: 0; z-index: 500; pointer-events: none; width: 22px; height: 22px; margin: -11px 0 0 -11px; will-change: transform; }
/* a yellow dot in exclusion mode, so it inverts whatever it passes over; the star stays on the preloader only */
.has-cur .cur { mix-blend-mode: exclusion; }
.cur-star { display: none; width: 100%; height: 100%; fill: var(--ink); stroke: var(--ink); stroke-width: 1.4; transition: transform .45s var(--ease), fill .3s; }
html.pre .cur { mix-blend-mode: normal; }
html.pre .cur-star { display: block; }
html.pre .cur-dot { display: none; }
.cur.big .cur-star { transform: scale(2.2) rotate(22.5deg); fill: var(--pale); stroke-width: .8; }
.cur.down .cur-star { transform: scale(1.6) rotate(45deg); fill: var(--pale); }
/* the dot blends by exclusion, so its colour is the inverse of the yellow it shows on the light pages (#F2D45C) */
.cur-dot { position: absolute; inset: 0; border-radius: 50%; background: #0D2BA3; transition: transform .45s var(--ease); }
.cur.big .cur-dot { transform: scale(2.4); }
.cur.down .cur-dot { transform: scale(1.7); }
.has-cur .heat { display: block; position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 110; pointer-events: none; mix-blend-mode: exclusion; }

/* ---------- music ---------- */
.music { position: fixed; right: 20px; bottom: 30px; z-index: 130; display: flex; align-items: center; gap: 10px; flex-direction: row-reverse; }
.vinyl::before { content: ""; position: absolute; z-index: -1; left: -35%; right: -35%; bottom: -40%; height: 70%; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(255, 210, 80, .85), rgba(255, 210, 80, 0) 70%); filter: blur(6px); }
.vinyl { position: relative; width: 64px; height: 64px; border: 0; padding: 0; background: none; border-radius: 50%; }
.vinyl-disc { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 6px 18px rgba(31, 32, 16, .22);
  background: repeating-radial-gradient(circle, #2a2b1a 0 1px, #1F2010 1px 3px); display: grid; place-items: center; }
.vinyl-label { width: 20px; height: 20px; border-radius: 50%; background: var(--sun); box-shadow: inset 0 0 0 7px transparent; position: relative; }
.vinyl-label::after { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--ink); }
.vinyl-arm { position: absolute; right: -6px; top: -6px; width: 6px; height: 34px; transform-origin: 50% 4px; transform: rotate(-8deg); transition: transform .8s var(--ease); }
.vinyl-arm::before { content: ""; position: absolute; left: 2px; top: 0; width: 2px; height: 100%; background: #b9b4a0; border-radius: 2px; }
.vinyl-arm::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 6px; height: 9px; background: var(--cream); border: 1px solid var(--ink); border-radius: 2px; }
.music.playing .vinyl-arm { transform: rotate(24deg); }
.music.playing .vinyl-disc { animation: spin 3.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
/* the label: a tiny b&w cover, the question, and the track; shown on hover, and kept while playing */
.music-tip { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.3; background: var(--cream); border: 1px solid var(--line); border-radius: 99px; padding: 4px 12px 4px 4px; white-space: nowrap; opacity: 0; transform: translateX(6px); transition: opacity .4s, transform .4s var(--ease); pointer-events: none; }
.music-tip img { width: 28px; height: 28px; border-radius: 50%; flex: none; }
.music-tip > span { display: grid; }
.music-tr { font-size: 11px; color: var(--ink2); }
.vinyl:hover + .music-tip, .vinyl:focus-visible + .music-tip, .music.playing .music-tip { opacity: 1; transform: none; }
.music.playing .music-ask { display: none; }
.music.playing .music-tr { font-size: 12px; color: var(--ink); }
.music.playing .music-tip img { animation: spin 6s linear infinite; }

/* copy version toggle (for review) */
.copyv { position: fixed; left: 16px; bottom: 16px; z-index: 130; display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; background: var(--cream); border: 1px solid var(--line); border-radius: 99px; font-size: 13px; box-shadow: 0 4px 14px rgba(31, 32, 16, .08); }
.copyv span { color: var(--ink2); margin-right: 6px; }
.copyv button { border: 0; background: none; border-radius: 99px; padding: 6px 12px; min-height: 32px; }
.copyv button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }

/* ---------- preloader: a grainy sun pulsing with heat-haze rings (drawn on a canvas), quote in the middle ---------- */
#pre { display: none; }
html.pre { overflow: hidden; }
html.pre #pre { display: block; position: fixed; inset: 0; z-index: 200; background: #FDF4CC; color: var(--ink); overflow: hidden; }
/* drawn at about half resolution and scaled up smoothly, so the noise reads as soft film grain, not pixels */
.pre-cv { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: auto; }
.pre-top { position: absolute; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 28px var(--g); }
.pre-logo { display: block; width: clamp(110px, 12vw, 172px); }
.pre-r { text-align: right; }
.pre-tag { margin: 2px 0 0; font-size: clamp(12px, .95vw, 14px); line-height: 1.35; white-space: nowrap; font-weight: 500; letter-spacing: .01em; color: var(--ink); }
.pre-yr { margin: 0; font-family: var(--fh); letter-spacing: -.04em; line-height: 1.35; font-size: clamp(12px, .95vw, 14px); text-align: right; }
/* the middle: a small pale core, blurred into an aura; the quote sits on top, unblurred */
.pre-mid { --qf: clamp(12px, 1vw, 15px); position: absolute; left: 50%; top: 50%; width: clamp(210px, 21vw, 300px); aspect-ratio: 1; margin: 0; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
.pre-mid::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: radial-gradient(circle, #FFFFF8 0%, #FFFEF2 50%, rgba(255, 252, 228, .92) 62%, rgba(246, 220, 128, .55) 78%, rgba(246, 220, 128, 0) 100%);
  box-shadow: 0 0 60px 10px rgba(255, 254, 240, .7); transform: scale(1.12); filter: blur(6px); transition: transform 1.3s cubic-bezier(.6, 0, .3, 1), filter 1.3s; }
.pre-q { margin: 0; font-family: var(--fh); font-size: var(--qf); line-height: 1.6; font-weight: 400; letter-spacing: -.04em; }
.pre-q p { margin: 0; white-space: nowrap; max-width: none; }
/* the caption hangs below the quote, so the quote itself sits in the centre of the circle */
.pre-mid figcaption { position: absolute; left: 0; right: 0; top: calc(50% + var(--qf) * 2.4 + 14px); font-size: clamp(13px, 1vw, 15px); font-weight: 500; }
/* the circle and the quote beat slowly, like a heart: a strong beat, a softer echo, then a long rest */
@media (prefers-reduced-motion: no-preference) {
  #pre:not(.go) .pre-mid::before { animation: beatC 4s ease-in-out infinite; }
  #pre:not(.go) .pre-q, #pre:not(.go) .pre-mid figcaption { animation: beatQ 4s ease-in-out infinite; }
}
@keyframes beatC { 0%, 48%, 100% { transform: scale(1.1); } 12% { transform: scale(1.46); } 21% { transform: scale(1.22); } 30% { transform: scale(1.36); } }
@keyframes beatQ { 0%, 48%, 100% { transform: scale(1); } 12% { transform: scale(1.13); } 21% { transform: scale(1.04); } 30% { transform: scale(1.09); } }
.pre-q, .pre-mid figcaption { transition: opacity .5s; }
.pre-enter { position: absolute; right: var(--g); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; min-height: 52px; padding: 12px 34px; border: 0; border-radius: 99px; background: var(--lil); color: var(--ink); font-size: 16px; font-weight: 500; transition: background-color .4s var(--ease), box-shadow .5s var(--ease), opacity .4s; }
/* hover: the button glows from yellow into purple */
.pre-enter:hover, .pre-enter:focus-visible { background: linear-gradient(90deg, #F6DC6B, #E4D3C0 50%, #C4B8EE); box-shadow: -14px 0 34px rgba(246, 220, 107, .95), 14px 0 34px rgba(196, 184, 240, .95), 0 0 60px rgba(233, 213, 119, .55); }
.pre-enter:focus { outline: none; }
/* enter: the quote disappears at once, then the aura grows until it fills the screen */
#pre.go .pre-q, #pre.go figcaption { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
#pre.go .pre-enter, #pre.go .pre-top { opacity: 0; transition: opacity .45s; }
/* a keyframe burst, so it always starts from wherever the heartbeat left the circle */
#pre.go .pre-mid::before { animation: burst 1.3s cubic-bezier(.6, 0, .3, 1) .15s both; }
@keyframes burst { 0% { transform: scale(1.12); filter: blur(6px); } 100% { transform: scale(12); filter: blur(4px); } }
@keyframes burstM { 0% { transform: scale(1.12); filter: blur(6px); } 100% { transform: scale(16); filter: blur(4px); } }
/* the burst deepens from the pale core into the sun's darker yellow as it fills the screen */
.pre-mid::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, #F6DC80 0%, #F1D27E 48%, #E8BE6C 72%, rgba(227, 177, 96, 0) 100%); filter: blur(6px); transform: scale(1.12); }
#pre.go .pre-mid::after { animation: burstS 1.3s cubic-bezier(.6, 0, .3, 1) .15s both; }
@keyframes burstS { 0% { opacity: 0; transform: scale(1.12); } 45% { opacity: 1; } 100% { opacity: 1; transform: scale(12); filter: blur(4px); } }
@keyframes burstSM { 0% { opacity: 0; transform: scale(1.12); } 45% { opacity: 1; } 100% { opacity: 1; transform: scale(16); filter: blur(4px); } }
#pre.out { opacity: 0; transition: opacity .8s var(--ease); }
@media (max-width: 640px) {
  .pre-top { padding-top: 20px; }
  .pre-mid { width: min(62vw, 240px); }
  .pre-mid { --qf: 12px; }
  .pre-mid figcaption { font-size: 13px; }
  #pre.go .pre-mid::before { animation-name: burstM; }
  #pre.go .pre-mid::after { animation-name: burstSM; }
  .pre-enter { top: auto; right: auto; left: 50%; bottom: 44px; transform: translateX(-50%); }
}

/* ---------- sun motif ---------- */
.sun-c { border-radius: 50%; background: var(--sun); }

/* ---------- home: hero ---------- */
.hero { position: relative; min-height: 100svh; padding: clamp(120px, 18vh, 200px) var(--g) 120px calc(var(--g) + clamp(0px, 6vw, 110px)); display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hero-h { position: relative; font-size: clamp(24px, 3.57vw, 57px); max-width: 17.5ch; }
/* one sun, rising from bottom left to top right: solid at first, turning into a soft blurred gradient as it moves, then breathing */
.hero-sun { position: absolute; left: 0; top: 0; z-index: 0; width: clamp(220px, 32vw, 500px); aspect-ratio: 1; pointer-events: none; animation: sunrise 9s var(--ease) both; }
.hero-sun::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #F1D27E; animation: unsolid 9s var(--ease) both; }
@keyframes unsolid { from { opacity: 1; } to { opacity: 0; } }
.hero-sun::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 64% 34%, #FFF9CF 0%, #FBEBA4 32%, #F1D27E 66%, #E3B160 100%); animation: breathe 9s ease-in-out 9s infinite; }
@keyframes sunrise { from { transform: translate(-55%, calc(100svh - 70%)); filter: blur(0); } to { transform: translate(calc(100vw - 85%), 8svh); filter: blur(22px); } }
/* hold the sunrise until the preloader has gone */
html.pre .hero-sun, html.pre .hero-sun::after { animation-play-state: paused; }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* a soft lilac glow behind the two key phrases */
.glow { background: radial-gradient(closest-side, rgba(196, 184, 240, .85), rgba(212, 203, 242, .35) 60%, rgba(212, 203, 242, 0)); padding: .12em .3em; margin: 0 -.3em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* "flip a switch": a light panel slides across in exclusion mode, inverting the words like a switch, then slides off */
.flick { position: relative; display: inline-block; }
.flick::after { content: ""; position: absolute; inset: -.06em -.14em; background: #FFFBD6; mix-blend-mode: exclusion; pointer-events: none; transform: scaleX(0); transform-origin: 0 50%; animation: flip 6s var(--ease) 2.4s infinite; }
@keyframes flip {
  0%, 8% { transform: scaleX(0); transform-origin: 0 50%; }
  22%, 64% { transform: scaleX(1); transform-origin: 0 50%; }
  65% { transform: scaleX(1); transform-origin: 100% 50%; }
  80%, 100% { transform: scaleX(0); transform-origin: 100% 50%; }
}

/* ---------- home: intro ---------- */
.intro { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: center; padding: clamp(80px, 12vw, 160px) var(--g); max-width: var(--max); margin: 0 auto; }
.intro h2, .brain h2 { font-size: clamp(30px, 4.4vw, 64px); margin-bottom: 32px; white-space: nowrap; }
.intro-lede p { font-size: clamp(22px, 2.5vw, 34px); line-height: 1.35; }
.intro-lede b { font-weight: 700; }
/* "More about me": no outline, just text that glows yellow to purple; the gradient still arrives on hover */
.btn-in { min-height: 36px; padding: 4px 15px; margin-left: 2px; font-size: .9em; vertical-align: middle; border-color: transparent; text-shadow: -4px 0 12px rgba(242, 205, 70, .95), 4px 0 14px rgba(172, 156, 236, .95), 0 0 22px rgba(233, 213, 119, .7); }
.btn-in:hover, .btn-in:focus-visible { text-shadow: none; }
.intro-tx p { max-width: 60ch; font-size: clamp(18px, 1.5vw, 22px); }
/* portrait: original white photo, square corners */
.intro-ph, .ab-ph { position: relative; z-index: 0; }
.intro-ph img, .ab-ph img { width: 100%; height: auto; background: #fff; }
/* two portraits that swap as you scroll past */
.intro-ph { justify-self: center; width: min(100%, 520px); }
/* two portraits back to back: the card flips over on every scroll */
.intro-ph { perspective: 1800px; }
.intro-sw { position: relative; aspect-ratio: 1080 / 1350; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.6, 0, .25, 1); }
.intro-sw img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 4px; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.intro-sw img + img { transform: rotateY(180deg); }
.intro-ph.swap .intro-sw { transform: rotateY(180deg); }
.intro-ph figcaption { margin-top: 14px; font-size: 15px; }

/* ---------- loops (flags & logos) ---------- */
.reach { padding: clamp(40px, 6vw, 80px) 0 clamp(80px, 10vw, 140px); }
.loop { display: flex; overflow: hidden; background: var(--cream); -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.loop-t { display: flex; align-items: center; flex: none; animation: loop var(--dur, 50s) linear infinite; }
.loop-t li { flex: none; }
.lp-a { padding: 18px 0; border-block: 1px solid var(--line); margin-bottom: 12px; }
.lp-b { padding: 6px 0; }
.lp-tx { padding: 0 28px; font-size: clamp(18px, 1.8vw, 22px); white-space: nowrap; }
.lp-st { padding: 0 8px; }
.rch-m { display: none; }
.lp-fl { display: flex; align-items: center; gap: 12px; padding: 0 28px; font-size: 18px; white-space: nowrap; }
.lp-fl img { width: 30px; height: 20px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }
.lp-lg { width: clamp(108px, 9.6vw, 150px); height: 84px; display: grid; place-items: center; padding: 0 6px; }
.lp-lg img { max-width: 118px; max-height: 34px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) contrast(1.2) brightness(.35); opacity: .85; mix-blend-mode: multiply; }
.lp-lg.jpg img { filter: grayscale(1) contrast(1.3); }
.lp-lg.tall img { max-height: 48px; }
.lp-lg.wide img { max-width: 140px; max-height: 30px; }
.lp-lg.sq img { max-height: 56px; max-width: 70px; }
.lp-lg.big img { max-height: 64px; max-width: 120px; }

@keyframes loop { to { transform: translateX(-100%); } }
.flags { padding: 18px 0; border-block: 1px solid var(--line); margin-bottom: 40px; }
.flags li { display: flex; align-items: center; gap: 12px; padding: 0 28px; font-size: 18px; white-space: nowrap; }
.flags li img { width: 30px; height: 20px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }
.logo-rows { display: grid; gap: 8px; }
.logos .loop-t { animation-duration: 60s; }
.logos.l2 .loop-t { animation-direction: reverse; animation-duration: 66s; }
.logos.l3 .loop-t { animation-duration: 56s; }
.logos li { flex: none; width: clamp(130px, 13vw, 190px); height: 84px; display: grid; place-items: center; padding: 0 18px; }
.logos img { max-width: 118px; max-height: 34px; width: auto; height: auto; object-fit: contain; filter: grayscale(1) contrast(1.2) brightness(.35); opacity: .85; }
.logos .jpg img { mix-blend-mode: multiply; filter: grayscale(1) contrast(1.3); }
.logos .tall img { max-height: 48px; }
.logos .wide img { max-width: 140px; max-height: 30px; }
.logos .sq img { max-height: 56px; max-width: 70px; }
.wm.sat { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 18px; line-height: 1; text-align: center; color: #2c2d1c; }

/* ---------- home: brain + wall ---------- */
.brain { padding: clamp(60px, 8vw, 120px) 0; overflow: hidden; }
.brain h2 { max-width: var(--max); margin: 0 auto clamp(40px, 6vw, 80px); padding: 0 var(--g); white-space: normal; }
.brain h2 > span { display: block; }
.wall { display: grid; gap: 14px; }
/* each row drifts with the page, and can also be swiped or scrolled by hand */
.wall-row { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; cursor: grab; }
.wall-row::-webkit-scrollbar { display: none; }
.wall-row.drag { cursor: grabbing; user-select: none; }
.wall-row ul { display: flex; gap: 14px; width: max-content; }
.wall-row img { pointer-events: none; -webkit-user-drag: none; }
.wall-row li { height: clamp(110px, 14vw, 220px); flex: none; border-radius: 4px; overflow: hidden; }
.wall-row img { height: 100%; width: auto; max-width: none; }

/* ---------- home: featured cards (single-colour gradient) ---------- */
.feat { background: linear-gradient(to bottom, var(--cream) 0%, var(--mus-t) 100%); padding: clamp(80px, 10vw, 140px) 0; }
.feat-head { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(20px, 3vw, 40px); padding: 0 var(--g); max-width: var(--max); margin: 0 auto 36px; }
.feat-head h2 { font-size: clamp(26px, 3.4vw, 50px); }
.feat-arw { display: flex; align-items: center; gap: 10px; max-width: var(--max); margin: 0 auto; padding: 24px var(--g) 0; width: 100%; }
.feat-track { display: flex; align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--g); padding: 4px var(--g) 24px; scrollbar-width: none; }
.feat-track::-webkit-scrollbar { display: none; }
.fc-gap { flex: none; width: clamp(48px, 5vw, 84px); display: grid; place-items: center; }
.fc-go { width: 100%; height: 100%; min-height: 48px; border: 0; padding: 0; background: none; font-size: clamp(26px, 2.6vw, 40px); color: var(--ink2); transition: color .3s, transform .4s var(--ease); }
.fc-go:hover { color: var(--ink); transform: translateX(5px); }
.fc { position: relative; flex: none; width: min(1240px, 86vw); scroll-snap-align: start; display: grid; grid-template-columns: 1.3fr 1fr; background: var(--cream); border-radius: 4px; overflow: hidden; box-shadow: 0 1px 0 var(--line), 0 20px 50px -30px rgba(31, 32, 16, .35); }
.fc-sl { position: relative; overflow: hidden; min-height: 100%; aspect-ratio: 4 / 3.4; background: #e8e3cf; touch-action: pan-y; }
.fc-sl ul { display: flex; height: 100%; transition: transform .9s var(--ease); }
.fc-sl li { flex: 0 0 100%; height: 100%; }
.fc-sl img { width: 100%; height: 100%; object-fit: cover; user-select: none; }
.fc-arw { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 72px; padding: 0; border: 0; background: none; color: var(--cream); font-size: 52px; line-height: 1; text-shadow: 0 1px 10px rgba(0, 0, 0, .5); transition: transform .3s var(--ease); }
.fc-arw.prev { left: 6px; } .fc-arw.next { right: 6px; }
.fc-arw.prev:hover { transform: translate(-3px, -50%); } .fc-arw.next:hover { transform: translate(3px, -50%); }
.fc-tx { padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; }
.fc-cat { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.fc h3 { font-size: clamp(22px, 2.2vw, 32px); margin-bottom: 18px; }
.fc-solve { font-size: clamp(17px, 1.4vw, 20px); line-height: 1.45; }
.fc-sp { margin-top: auto; height: 24px; }
.fc-out { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); margin-bottom: 24px; }
.fc-out .lbl { margin-bottom: 6px; }
.fc-out p:last-child { margin: 0; color: var(--ink2); }
.fc .btn { align-self: flex-start; }

/* pinned horizontal scroll on large screens (JS adds .pinned) */
.feat.pinned { padding: 0; }
.feat.pinned .feat-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.feat.pinned .feat-track { overflow: visible; scroll-snap-type: none; will-change: transform; padding-bottom: 0; }
.feat.pinned .fc { height: min(calc(100vh - 300px), 620px); }
.feat.pinned .fc-sl { aspect-ratio: auto; height: 100%; }

/* ---------- home: testimonials (single-colour gradient) ---------- */
.quotes { background: linear-gradient(to bottom, var(--cream) 0%, var(--lil-t) 100%); padding: clamp(80px, 10vw, 140px) var(--g); }
.quotes h2 { font-size: clamp(26px, 3.6vw, 52px); max-width: 16ch; margin: 0 auto clamp(40px, 5vw, 72px); text-align: center; }
/* testimonials: one row of cards that swipes sideways */
/* desktop: every card at once, in three columns; phones: one row that swipes sideways */
.q-list { columns: 3 300px; column-gap: 20px; max-width: var(--max); margin: 0 auto; }
.q-list > .qc { break-inside: avoid; margin-bottom: 20px; }
.q-nav { display: none !important; }
@media (max-width: 640px) {
  .q-list { columns: auto; display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: 0; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px; }
  .q-list > .qc { margin-bottom: 0; }
  .q-nav { display: flex !important; }
}
.q-list::-webkit-scrollbar { display: none; }
.q-list:focus-visible { outline-offset: 6px; }
.qc { flex: 0 0 clamp(300px, 30vw, 420px); scroll-snap-align: start; display: flex; flex-direction: column; justify-content: space-between; background: rgba(255, 253, 243, .78); border: 1px solid rgba(31, 32, 16, .08); border-radius: 4px; padding: 28px; transition: box-shadow .5s var(--ease), border-color .5s; }
.qc.ping { border-color: #C4B8EE; box-shadow: 0 0 0 4px rgba(212, 203, 242, .7), 0 0 50px rgba(233, 213, 119, .55); }
.qc-tag { margin: 0 0 14px; font-family: var(--fh); font-size: 12px; letter-spacing: -.02em; text-transform: uppercase; color: var(--olive); }
/* the key point in each quote: a yellow marker */
.qc mark { color: inherit; font-weight: 600; background: linear-gradient(transparent 55%, rgba(233, 213, 119, .85) 55%); padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.qc.ping mark { background: linear-gradient(transparent 0%, rgba(233, 213, 119, .85) 0%); }
/* "Who is Richeen?": a search bar you can't type in; the AI spark writes a summary of the testimonials */
.ai { max-width: 600px; margin: calc(-1 * clamp(16px, 2.4vw, 40px)) auto clamp(40px, 5vw, 64px); }
.ai-bar { position: relative; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; padding: 5px 5px 5px 18px; border: 1px solid rgba(31, 32, 16, .14); border-radius: 99px; background: rgba(255, 253, 243, .92); text-align: left; user-select: none; -webkit-user-select: none; box-shadow: 0 18px 40px -26px rgba(31, 32, 16, .4); transition: box-shadow .5s var(--ease), border-color .5s; }
.ai-bar::before { content: ""; position: absolute; inset: -2px; z-index: -1; border-radius: inherit; background: linear-gradient(90deg, #F6DC6B, #C4B8EE, #F6DC6B); background-size: 200% 100%; filter: blur(10px); opacity: .55; animation: aiglow 6s linear infinite; }
@keyframes aiglow { to { background-position: 200% 0; } }
.ai-bar:hover { border-color: #C4B8EE; box-shadow: 0 18px 50px -20px rgba(196, 184, 240, .9); }
.ai-bar:hover::before { opacity: .9; }
.ai-q { display: inline-flex; align-items: center; gap: 10px; font-size: clamp(15px, 1.2vw, 17px); color: var(--ink); }
.ai-mag { width: 14px; height: 14px; border: 2px solid var(--ink2); border-radius: 50%; position: relative; flex: none; }
.ai-mag::after { content: ""; position: absolute; right: -5px; bottom: -4px; width: 7px; height: 2px; background: var(--ink2); transform: rotate(45deg); }
.ai-caret { width: 2px; height: 1.2em; background: var(--ink); margin-left: -8px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.ai-bar[aria-expanded="true"] .ai-caret { display: none; }
.ai-spark { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, #F6DC6B, #C4B8EE); transition: transform .5s var(--ease); }
.ai-spark svg { width: 20px; height: 20px; fill: var(--ink); }
.ai-bar:hover .ai-spark { transform: rotate(90deg) scale(1.06); }
.ai-bar.busy .ai-spark { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.ai-out { margin-top: 16px; padding: clamp(22px, 3vw, 32px); border-radius: 4px; background: rgba(255, 253, 243, .92); border: 1px solid rgba(212, 203, 242, .9); }
.ai-lbl { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 13px; color: var(--ink2); }
.ai-dot { width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, #F6DC6B, #C4B8EE); }
.ai-bar.busy + .ai-out .ai-dot { animation: blink .8s steps(1) infinite; }
.ai-bar.used { cursor: default; background: #ECEAE0; border-color: rgba(31, 32, 16, .1); box-shadow: none; color: rgba(31, 32, 16, .45); }
.ai-bar.used::before { opacity: 0; animation: none; }
.ai-bar.used .ai-spark { filter: grayscale(1); opacity: .5; transform: none; }
.ai-bar.used:hover { border-color: rgba(31, 32, 16, .1); box-shadow: none; }
.ai-bar.used .ai-q { color: rgba(31, 32, 16, .42); }
.ai-bar.used .ai-mag { border-color: rgba(31, 32, 16, .3); }
.ai-bar.used .ai-mag::after { background: rgba(31, 32, 16, .3); }
.ai-tx p { margin: 0; font-size: clamp(17px, 1.45vw, 20px); line-height: 1.55; max-width: none; }
.ai-tx .w { opacity: 0; transition: opacity .35s; }
.ai-tx .w.on { opacity: 1; }
.ai-lbl2 { margin: 22px 0 10px; }
.ai-chips { display: flex; flex-wrap: wrap; gap: 8px; opacity: 0; transform: translateY(6px); transition: opacity .6s, transform .6s var(--ease); }
.ai-out.done .ai-chips { opacity: 1; transform: none; }
.ai-chip { border: 1px solid rgba(31, 32, 16, .25); border-radius: 99px; background: none; padding: 5px 12px; font-size: 14px; transition: background-color .3s, border-color .3s; }

.q-nav { display: flex; justify-content: flex-end; gap: 10px; max-width: var(--max); margin: 22px auto 0; }
.q-arw { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--ink); background: none; font-size: 18px; transition: background-color .3s, opacity .3s; }

.q-arw:disabled { opacity: .3; pointer-events: none; }
.qc blockquote { margin: 0 0 22px; font-size: 17px; line-height: 1.55; }
.qc blockquote p::before { content: "“"; } .qc blockquote p::after { content: "”"; }
.qc blockquote p { margin: 0; }
.qc-who { display: flex; gap: 14px; align-items: center; }
.qc-who img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: center 30%; flex: none; }
.qc-who p { margin: 0; display: grid; font-size: 14px; line-height: 1.35; }
.qc-who span { color: var(--ink2); }

/* ---------- transition into the footer: light at the top, dark at the bottom ---------- */
.to-foot { height: clamp(120px, 16vw, 240px); background: linear-gradient(to bottom, var(--cream) 0%, var(--mus) 38%, var(--lil) 66%, var(--foot) 100%); }
body[data-page="home"] .to-foot { background: linear-gradient(to bottom, var(--lil-t) 0%, var(--mus) 34%, var(--lil) 64%, var(--foot) 100%); }

/* ---------- footer ---------- */
.foot { position: relative; background: linear-gradient(to bottom, var(--foot) 0%, var(--ink) 55%); color: var(--cream); overflow: hidden; }
.foot-top { position: relative; z-index: 3; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; padding: clamp(40px, 6vw, 80px) var(--g) 0; max-width: var(--max); margin: 0 auto; }
.foot h2 { font-size: clamp(34px, 5vw, 72px); margin-bottom: 16px; }
.foot-l > p { font-size: clamp(17px, 1.5vw, 20px); max-width: 40ch; }
.foot-links { display: grid; gap: 6px; margin: 28px 0 14px; }
.foot-links a { display: inline-flex; gap: 10px; align-items: center; min-height: 44px; font-size: clamp(18px, 2vw, 26px); text-decoration: none; border-bottom: 1px solid rgba(255, 253, 243, .3); transition: border-color .4s, color .4s; overflow-wrap: anywhere; }
.foot-links a:hover { border-color: var(--mus); color: var(--pale); }

.foot-r { justify-self: end; }
.foot-r .lbl { color: var(--cream); font-weight: 700; font-size: clamp(20px, 1.9vw, 25px); letter-spacing: -.01em; }
/* the roles: big, bold, each on its own line with a yellow star */
.foot-roles { display: grid; gap: 0; margin-top: 10px; }
.foot-roles li { font-family: var(--fh); letter-spacing: -.05em; font-size: clamp(20px, 2.1vw, 30px); line-height: 1.25; color: var(--pale); padding: 12px 0; display: flex; gap: 14px; align-items: center; border-bottom: 1px solid rgba(255, 253, 243, .18); }
.foot-roles li:first-child { border-top: 1px solid rgba(255, 253, 243, .18); }
.foot-roles li::before { content: "✦"; font-size: .7em; color: var(--mus); }
.foot-scene { position: relative; margin-top: clamp(-20px, -2vw, 0px); aspect-ratio: 1440 / 539; max-height: 640px; width: 100%; }
.foot-hill { position: absolute; inset: auto 0 0; width: 100%; height: auto; z-index: 2; }
/* the sun sets in from the right edge of the screen and settles behind the hills */
.foot-sun { position: absolute; z-index: 1; left: 50%; bottom: 14%; width: 28%; aspect-ratio: 1; margin-left: -14%; border-radius: 50%; background: var(--sun); box-shadow: 0 0 140px 20px rgba(251, 235, 164, .45);
  transform: translate(calc((1 - var(--rise, 1)) * 260%), calc((1 - var(--rise, 1)) * -70%)); filter: blur(calc((1 - var(--rise, 1)) * 8px)); }
.foot-mark { position: relative; z-index: 3; margin: -6vw var(--g) 0; aspect-ratio: 1920 / 422;
  background: linear-gradient(to bottom, var(--pale) 0%, #F6E7A2 45%, var(--mus) 100%);
  -webkit-mask: url(../img/r4/logo-mask.png) center / contain no-repeat; mask: url(../img/r4/logo-mask.png) center / contain no-repeat; }
.foot-line { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding: 28px var(--g) 92px; font-size: 13px; color: rgba(255, 253, 243, .75); }
.foot-line img { display: inline-block; width: 64px; filter: invert(1); opacity: .8; vertical-align: -2px; }
.foot-top-btn { text-decoration: none; min-height: 40px; display: inline-flex; align-items: center; gap: 8px; border: 1px solid rgba(255, 253, 243, .4); border-radius: 99px; padding: 0 16px; transition: background-color .4s, color .4s; }


/* ---------- about (Marimba-style) ---------- */
/* about story: stacked outlined circles (as many as the page height needs); two blurred blobs travel them as you scroll */
.ab-story { position: relative; max-width: var(--max); margin: 0 auto; padding: clamp(130px, 18vh, 200px) var(--g) clamp(60px, 8vw, 120px); }
.rings { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.ring { position: absolute; border: 1px solid rgba(31, 32, 16, .1); border-radius: 50%; }
.blob { position: absolute; left: 0; top: 0; width: clamp(150px, 20vw, 300px); aspect-ratio: 1; border-radius: 50%; filter: blur(42px); opacity: .85; will-change: transform; transition: opacity .6s; }
.blob.y { background: var(--mus); }
.blob.p { background: var(--lil); }
.ab-sec { position: relative; z-index: 1; min-height: 62vh; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 6vh 0; }
.ab-sec > * { max-width: 30ch; }
.ab-sec > p:not(.ab-big):not(.ab-say) { max-width: 52ch; font-size: clamp(18px, 1.5vw, 21px); margin: 18px 0 0; }
/* the dots show only while you scroll */
.ab-dots { font-size: 22px; letter-spacing: .3em; margin-bottom: 18px; opacity: 0; transition: opacity .5s; }
.scrolling .ab-sec.on .ab-dots { opacity: 1; }
.ab-hero { min-height: 72vh; padding-top: 0; }
.ab-hero h1 { font-size: clamp(32px, 5.4vw, 88px); max-width: none; }
.ab-hero h1 { text-wrap: balance; }
.ab-hero h1 > span { display: inline; }
.ab-hi { font-size: clamp(30px, 4.6vw, 72px); max-width: none; }
.ab-hi > span { display: block; white-space: nowrap; }
.ab-hi-lg { display: inline-block; height: 1.1em; aspect-ratio: 1920 / 422; vertical-align: -.2em; margin-left: .06em; }
.ab-hi img { display: inline-block; width: 1.25em; height: 1.25em; border-radius: 50%; object-fit: cover; vertical-align: -.3em; margin: 0 .08em; background: var(--pale); }
.ab-say { margin: 18px 0 0; font-size: clamp(17px, 1.5vw, 20px); color: var(--ink2); }
.ab-say span { color: var(--ink); font-weight: 500; }
.ab-big { font-family: var(--fh); letter-spacing: -.05em; line-height: 1.2; font-size: clamp(24px, 2.9vw, 44px); margin: 0; }
.ab-stat { display: grid; gap: 14px; margin-top: 28px; font-size: clamp(18px, 1.6vw, 22px); max-width: 44ch !important; }
.ab-stat b { font-weight: 600; background: linear-gradient(transparent 62%, var(--mus-t) 62%); }
/* countries + brands: static grid with a label column */
.rg { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); }
.rg-row { display: grid; grid-template-columns: minmax(180px, 1fr) 3fr; gap: 20px clamp(28px, 5vw, 80px); align-items: center; padding: 26px 0; border-top: 1px solid var(--line); }
.rg-row:last-child { border-bottom: 1px solid var(--line); }
.rg-l { margin: 0; font-size: 15px; color: var(--ink2); max-width: 22ch; }
.rg-l p { margin: 0; }
/* flags open a card of what I did there */
.rg-hint { display: flex; align-items: center; gap: 6px; margin-top: 8px !important; font-size: 11.5px; white-space: nowrap; color: var(--olive); font-weight: 500; }
.rg-i { flex: none; width: 14px; height: 14px; border: 1.2px solid currentColor; border-radius: 50%; display: grid; place-items: center; font: italic 600 9px/1 Georgia, serif; }
.rg-fl { display: flex; flex-wrap: wrap; gap: 12px 14px; }
.rg-fl .lp-fl { padding: 0; font-size: 17px; }
.fl-i { position: relative; }
.fl-b { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 6px 12px 6px 8px; border: 1px dashed rgba(31, 32, 16, .3); border-radius: 99px; background: none; font-size: 17px; transition: background-color .3s, border-color .3s; }
.fl-b img { width: 30px; height: 20px; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px var(--line); }
.fl-plus { font-size: 15px; color: var(--ink2); transition: transform .4s var(--ease); }
.fl-i:hover .fl-b, .fl-b:focus-visible, .fl-i.open .fl-b { background: var(--mus-t); border-color: var(--mus); border-style: solid; }
.fl-i:hover .fl-plus, .fl-i.open .fl-plus { transform: rotate(45deg); }
.fl-tip { position: absolute; z-index: 5; white-space: normal; left: 0; bottom: calc(100% + 10px); width: max-content; max-width: min(320px, 80vw); padding: 14px 16px; border-radius: 4px; background: var(--ink); color: var(--cream); box-shadow: 0 18px 40px -18px rgba(31, 32, 16, .6); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .3s, transform .3s var(--ease), visibility 0s .3s; pointer-events: none; }
.fl-tip ul { display: grid; gap: 10px; }
.fl-ty { display: block; margin-bottom: 2px; font-size: 11px; letter-spacing: .02em; text-transform: uppercase; color: var(--mus); }
.fl-tip li { font-size: 14px; line-height: 1.4; padding-left: 14px; position: relative; }
.fl-tip li::before { content: "✦"; position: absolute; left: 0; color: var(--mus); font-size: 9px; top: .35em; }
.fl-i:hover .fl-tip, .fl-i:focus-within .fl-tip, .fl-i.open .fl-tip { opacity: 1; visibility: visible; transform: none; transition: opacity .3s, transform .3s var(--ease); }
.fl-i.edge .fl-tip { left: auto; right: 0; }
.rg-lg { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0; }
.rg-lg .lp-lg { width: auto; height: 76px; }
/* role photo strips: open on hover, tap or focus */
.xp-b { all: unset; cursor: pointer; display: inline-flex; gap: 10px; align-items: baseline; }
.xp-b::after { content: "+"; font-weight: 400; transition: transform .4s var(--ease); }
/* the role title gets a yellow marker sweep on hover, focus or when open */
.xp-t > span { background: linear-gradient(transparent 52%, var(--mus) 52%) no-repeat 0 0 / 0% 100%; transition: background-size .6s var(--ease); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.xp li.open .xp-t > span, .xp-b:focus-visible .xp-t > span { background-size: 100% 100%; }
@media (hover: hover) { .xp li:hover .xp-t > span { background-size: 100% 100%; } }
.xp li.open .xp-b::after { transform: rotate(45deg); }
.xp-b:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
.xp-ph { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease), margin .6s var(--ease); }
.xp-ph ul { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; display: flex; gap: 10px; min-height: 0; }
.xp .xp-ph li { all: unset; flex: 0 0 auto; }
.xp-ph img { display: block; height: clamp(200px, 22vw, 320px); width: auto; }
.xp li.open .xp-ph, .xp li:focus-within .xp-ph { grid-template-rows: 1fr; margin-top: 18px; }
@media (hover: hover) { .xp li:hover .xp-ph { grid-template-rows: 1fr; margin-top: 18px; } }
.ab-logo { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; padding: 0 var(--g) clamp(80px, 10vw, 140px); max-width: var(--max); margin: 0 auto; }
.ab-logo-mk { background: var(--ink); border-radius: 24px; padding: clamp(40px, 6vw, 90px) clamp(24px, 4vw, 60px); }
.ab-logo-mk .logo-m { background: linear-gradient(to bottom, var(--pale), var(--mus)); }
.ab-logo h2 { font-size: clamp(30px, 4vw, 56px); margin-bottom: 18px; }
.ab-logo h2 span { font-family: var(--fb); font-size: .45em; letter-spacing: 0; color: var(--ink2); }
.ab-logo-tx p:not(.lbl) { font-size: clamp(17px, 1.5vw, 20px); max-width: 52ch; }
.ab-reach { position: relative; z-index: 1; padding: 0 0 clamp(80px, 10vw, 140px); }
.ab-list { display: grid; grid-template-columns: 1fr 2fr; gap: 24px clamp(28px, 5vw, 80px); padding: 0 var(--g) clamp(60px, 8vw, 110px); max-width: var(--max); margin: 0 auto; }
.ab-list h2 { font-size: clamp(22px, 2.4vw, 34px); }
.xp li { display: grid; grid-template-columns: 11em 1fr; gap: 20px; padding: 22px 0; border-top: 1px solid var(--line); }
.xp li:last-child { border-bottom: 1px solid var(--line); }
.xp-y { font-size: 14px; color: var(--ink2); padding-top: 3px; }
.xp h3 { font-family: var(--fb); letter-spacing: -.01em; font-weight: 600; font-size: 19px; margin-bottom: 6px; }
.xp p { margin: 0; color: var(--ink2); }
.ab-tools { padding: 0 var(--g) clamp(80px, 10vw, 140px); max-width: var(--max); margin: 0 auto; }
.ab-tools h2 { font-size: clamp(22px, 2.4vw, 34px); margin-bottom: 28px; }
.tools { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(28px, 5vw, 80px); }
.tools > div { display: grid; gap: 36px; align-content: start; }
.tool h3 { font-size: clamp(15px, 1.3vw, 18px); max-width: 22ch; margin-bottom: 14px; }
.tool ul { display: flex; flex-wrap: wrap; gap: 8px; }
.tool li { border: 1px solid rgba(31, 32, 16, .3); border-radius: 0; padding: 6px 16px; font-size: 14px; line-height: 1.4; }

/* ---------- work (Cipher-style scattered gallery) ---------- */
.wk-head { position: relative; padding: clamp(150px, 22vh, 230px) var(--g) clamp(40px, 6vw, 80px); max-width: var(--max); margin: 0 auto; display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.wk-head h1 { font-size: clamp(48px, 10vw, 160px); line-height: 1; }
.wk-head h1, .wk-head p { position: relative; z-index: 1; }
.wk-head p { max-width: 30ch; font-size: clamp(20px, 2vw, 28px); line-height: 1.35; margin: 0; color: var(--ink2); }
.wkp { position: relative; isolation: isolate; overflow-x: clip; }
/* background options for review (switch at the bottom left): A = outlined rings behind each project with two blobs travelling them, like About; B = a sun rising and setting over horizon arcs as you scroll */
.wk-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.wk-orb { position: absolute; inset: 0; overflow: hidden; }
.wk-orb .blob { opacity: .8; }
.wk-sky { position: fixed; inset: 0; overflow: hidden; display: none; }
html[data-bg="b"] .wk-orb { display: none; }
html[data-bg="b"] .wk-sky { display: block; }
.wk-sky::before { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, var(--lil-t), rgba(236, 231, 251, 0) 70%); opacity: var(--dusk, 0); }
.sky-arc { position: absolute; left: 50%; bottom: 0; width: calc(var(--R, 40vw) * 2); aspect-ratio: 1; border: 1px solid rgba(31, 32, 16, .1); border-radius: 50%; transform: translate(-50%, 50%); }
.sky-arc:nth-child(2) { width: calc(var(--R, 40vw) * 2.6); }
.sky-arc:nth-child(3) { width: calc(var(--R, 40vw) * 1.4); }
.sky-sun, .sky-moon { position: absolute; left: 0; top: 0; width: clamp(160px, 22vw, 340px); aspect-ratio: 1; border-radius: 50%; filter: blur(46px); will-change: transform; }
.sky-sun { background: var(--mus); opacity: .9; }
.sky-moon { background: var(--lil); opacity: .95; }
.bgv { position: fixed; left: 16px; bottom: 64px; z-index: 130; display: flex; align-items: center; gap: 2px; padding: 4px 4px 4px 12px; background: var(--cream); border: 1px solid var(--line); border-radius: 99px; font-size: 13px; box-shadow: 0 8px 24px -14px rgba(31, 32, 16, .4); }
.bgv span { color: var(--ink2); margin-right: 6px; }
.bgv button { border: 0; background: none; border-radius: 99px; padding: 6px 12px; min-height: 32px; }
.bgv button[aria-pressed="true"] { background: var(--ink); color: var(--cream); }
.wk-list { position: relative; z-index: 1; display: grid; gap: clamp(90px, 11vw, 180px); padding: clamp(20px, 3vw, 40px) var(--g) clamp(100px, 12vw, 170px); max-width: var(--max); margin: 0 auto; }
.wk { display: grid; grid-template-columns: 1.45fr 1fr; gap: clamp(28px, 5vw, 84px); align-items: center; }
.wk:nth-child(even) { grid-template-columns: 1fr 1.45fr; }
.wk:nth-child(even) .wk-ph { order: 2; }
/* photo carousel: swipe or use the arrows */
.wk-ph { position: relative; border-radius: 4px; background: #e8e3cf; aspect-ratio: 4 / 3; box-shadow: 0 30px 70px -40px rgba(31, 32, 16, .45); overflow: hidden; }
.wk-sl { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.wk-sl::-webkit-scrollbar { display: none; }
.wk-sl li { flex: 0 0 100%; scroll-snap-align: start; overflow: hidden; }
.wk-sl img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.6s var(--ease); }
.wk:hover .wk-sl img { transform: scale(1.03); }
.wk-a { position: absolute; top: 50%; width: 44px; height: 44px; margin-top: -22px; border: 0; border-radius: 50%; background: rgba(255, 253, 243, .88); font-size: 18px; line-height: 1; display: grid; place-items: center; padding: 0 0 2px; opacity: 0; transition: opacity .4s, background-color .4s; }
.wk-prev { left: 14px; } .wk-next { right: 14px; }
.wk-ph:hover .wk-a:not(:disabled), .wk-a:focus-visible { opacity: 1; }
.wk-a:hover { background: linear-gradient(90deg, #F6DC6B, #E4D3C0 50%, #C4B8EE); }
.wk-a:disabled { cursor: default; }
.wk-dots { position: absolute; left: 0; right: 0; bottom: 14px; margin: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.wk-dots span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 253, 243, .6); transition: background-color .4s, width .4s var(--ease); }
.wk-dots span.on { width: 18px; border-radius: 3px; background: var(--cream); }
@media (hover: none) { .wk-a { display: none; } }
/* each card arrives softly: it rises, the photo opens out from a smaller frame, and the words follow */
.js .wk[data-reveal] { opacity: 0; transform: translateY(48px); transition: opacity 1.4s var(--ease), transform 1.4s var(--ease); }
.js .wk[data-reveal] .wk-ph { clip-path: inset(7% 7% 7% 7% round 18px); transition: clip-path 1.6s var(--ease) .1s; }
.js .wk[data-reveal] .wk-tx > * { opacity: 0; transform: translateY(16px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .wk[data-reveal].in { opacity: 1; transform: none; }
.js .wk[data-reveal].in .wk-ph { clip-path: inset(0 0 0 0 round 4px); }
.js .wk[data-reveal].in .wk-tx > * { opacity: 1; transform: none; }
.js .wk.in .wk-tx > :nth-child(2) { transition-delay: .3s; } .js .wk.in .wk-tx > :nth-child(3) { transition-delay: .4s; } .js .wk.in .wk-tx > :nth-child(4) { transition-delay: .5s; } .js .wk.in .wk-tx > :nth-child(n+5) { transition-delay: .6s; }
.js .wk.in .wk-tx > :first-child { transition-delay: .2s; }
.wk-tx { display: flex; flex-direction: column; align-items: flex-start; }
.wk-tx h2 a { text-decoration: none; }
.wk-tx h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--or); }
.wk-tx h2 { font-size: clamp(30px, 3.6vw, 58px); line-height: 1.05; margin: 0 0 12px; }
.wk-meta { color: var(--ink2); font-size: 15px; margin: 0 0 22px; }
.wk-solve { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.45; margin: 0 0 22px; }
.wk-out { width: 100%; padding-top: 18px; border-top: 1px solid var(--line); margin-bottom: 28px; }
.wk-out .lbl { margin-bottom: 6px; }
.wk-out p:last-child { margin: 0; color: var(--ink2); }

/* ---------- project pages ---------- */
.pj-hero { padding: clamp(140px, 20vh, 210px) var(--g) 0; max-width: var(--max); margin: 0 auto; }
.pj-crumb { font-size: 14px; color: var(--ink2); }
.pj-crumb a { text-underline-offset: 4px; }
.pj-hero h1 { font-size: clamp(34px, 6.4vw, 100px); max-width: 15ch; margin: 8px 0 24px; }
.pj-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(32px, 4vw, 56px); }
.pj-tags li { border: 1px solid var(--line); border-radius: 99px; padding: 6px 14px; font-size: 14px; }
.pj-cover { border-radius: 20px; overflow: hidden; background: #e8e3cf; }
.pj-cover img { width: 100%; height: auto; }
.pj-sum { padding: clamp(24px, 3vw, 40px) var(--g) 0; max-width: var(--max); margin: 0 auto; }
.pj-sum dl { margin: 0; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--pale); border-radius: 20px; border: 1px solid rgba(233, 213, 119, .6); }
.pj-sum dl > div { padding: 22px 22px 24px; border-left: 1px solid rgba(31, 32, 16, .1); }
.pj-sum dl > div:first-child { border-left: 0; }
.pj-sum dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 8px; display: flex; gap: 8px; align-items: center; }
.pj-sum dt::before { content: "●"; font-size: 8px; color: var(--ink2); }
.pj-sum .res dt::before { color: var(--olive); }
.pj-sum dd { margin: 0; font-size: 15px; line-height: 1.5; }
.pj-sum .res dd { font-weight: 500; }
.pj section { max-width: var(--max); margin-left: auto; margin-right: auto; }
.pj-intro { padding: clamp(60px, 8vw, 120px) var(--g) clamp(40px, 6vw, 80px); }
.pj-lede { font-family: var(--fh); letter-spacing: -.05em; line-height: 1.25; font-size: clamp(22px, 3vw, 42px); max-width: 26ch; margin-bottom: clamp(32px, 4vw, 56px); }
.pj-ov { display: grid; grid-template-columns: 1fr 2fr; gap: 24px clamp(28px, 5vw, 80px); }
.pj-meta { margin: 0; display: grid; gap: 14px; align-content: start; }
.pj-meta div { border-top: 1px solid var(--line); padding-top: 10px; }
.pj-meta dt { font-size: 13px; color: var(--ink2); }
.pj-meta dd { margin: 0; font-weight: 500; }
.prose p { font-size: clamp(17px, 1.4vw, 19px); max-width: 62ch; }
.pj-sec, .pj-out { display: grid; grid-template-columns: 1fr 2fr; gap: 20px clamp(28px, 5vw, 80px); padding: clamp(40px, 6vw, 80px) var(--g); border-top: 1px solid var(--line); margin-left: var(--g) !important; margin-right: var(--g) !important; padding-left: 0; padding-right: 0; }
@media (min-width: 1552px) { .pj-sec, .pj-out { margin-left: auto !important; margin-right: auto !important; } }
.pj-sec > h2, .pj-out > h2 { font-size: clamp(20px, 2vw, 28px); align-self: start; position: sticky; top: 120px; }
.pj-sec > h2::before, .pj-out > h2::before { content: "●"; display: inline-block; margin-right: .6em; font-family: var(--fb); font-size: .45em; vertical-align: .35em; }
.pj-sec > :not(h2), .pj-out > :not(h2) { grid-column: 2; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.chips li { border: 1px solid var(--ink); border-radius: 99px; padding: 6px 14px; font-size: 14px; }
.tps { display: grid; gap: clamp(32px, 4vw, 56px); counter-reset: none; }
.tps li { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 3vw, 40px); align-items: center; }
.tps li:nth-child(even) .tp-ph { order: 2; }
.tp-ph { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: #e8e3cf; }
.tp-ph img { width: 100%; height: 100%; object-fit: cover; }
.tp-n { font-family: var(--fh); font-size: 13px; color: var(--ink2); display: block; margin-bottom: 8px; }
.tp-tx h3 { font-family: var(--fb); letter-spacing: -.01em; font-weight: 600; font-size: 20px; margin-bottom: 8px; }
.tp-tx p { margin: 0; color: var(--ink2); }
.tps.gifs { grid-template-columns: 1fr 1fr; gap: 28px; }
.tps.gifs li { grid-template-columns: 1fr; align-items: start; gap: 14px; }
.tps.gifs li .tp-ph { order: 0; aspect-ratio: 16 / 9; }
.pj-idea { margin: clamp(20px, 3vw, 40px) var(--g) !important; background: var(--ink); color: var(--cream); border-radius: 28px; padding: clamp(48px, 7vw, 110px) clamp(24px, 6vw, 96px); position: relative; overflow: hidden; }
@media (min-width: 1552px) { .pj-idea { margin-left: auto !important; margin-right: auto !important; } }
.pj-idea::after { content: ""; position: absolute; right: -8%; bottom: -30%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--sun); opacity: .9; filter: blur(1px); }
.pj-idea > * { position: relative; z-index: 1; }
.pj-idea h2 { font-family: var(--fb); letter-spacing: 0; font-size: 14px; font-weight: 500; color: rgba(255, 253, 243, .7); margin-bottom: 18px; }
.pj-idea h2::before { content: "✷ "; color: var(--mus); }
.pj-big { font-family: var(--fh); letter-spacing: -.05em; line-height: 1.2; font-size: clamp(26px, 4vw, 58px); max-width: 20ch; color: var(--pale); }
.pj-idea .prose p { color: rgba(255, 253, 243, .85); max-width: 58ch; }
.pj-gal { display: block !important; }
.collage { columns: 3 220px; column-gap: 14px; }
.collage img { width: 100%; margin-bottom: 14px; border-radius: 10px; break-inside: avoid; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.steps img { border-radius: 10px; }
.steps figcaption { font-size: 14px; color: var(--ink2); margin-top: 8px; }
.pj-gal > h2 { position: static; margin-bottom: 24px; }
.dia { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; margin-top: 24px; }
.dia-in, .dia-out { display: grid; gap: 12px; }
.dia-box, .dia-me { border: 1px solid var(--line); border-radius: 16px; padding: 16px; display: grid; gap: 2px; background: var(--cream); }
.dia-box span, .dia-me span { font-size: 14px; color: var(--ink2); }
.dia-me { background: var(--sun); border: 0; border-radius: 50%; width: 132px; aspect-ratio: 1; place-content: center; text-align: center; }
.pj-media { margin: clamp(20px, 3vw, 40px) var(--g) !important; background: linear-gradient(to bottom, var(--cream), var(--lil-t)); border: 1px solid rgba(212, 203, 242, .7); border-radius: 28px; padding: clamp(36px, 5vw, 80px) clamp(20px, 4vw, 64px); }
@media (min-width: 1552px) { .pj-media { margin-left: auto !important; margin-right: auto !important; } }
.pm-head h2 { font-size: clamp(24px, 3vw, 44px); max-width: 22ch; margin-bottom: clamp(28px, 4vw, 48px); }
.pm-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; }
.pm-ph { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pm-ph img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 10px; }
.pm-ph.six { grid-template-columns: repeat(3, 1fr); }
.pm-ph.one { grid-template-columns: 1fr; }
.pm-list { display: grid; gap: 0; margin-bottom: 22px; }
.pm-list li { display: grid; grid-template-columns: 5.2em 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line); align-items: baseline; }
.pm-list b { font-family: var(--fh); font-weight: 400; letter-spacing: -.05em; font-size: clamp(22px, 2.2vw, 30px); }
.pm-list span { font-weight: 500; display: grid; }
.pm-list small { font-weight: 400; font-size: 14px; color: var(--ink2); }
.pm-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.pm-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 8px 18px; border: 1px solid var(--ink); border-radius: 99px; text-decoration: none; font-weight: 500; transition: background-color .4s; }

.pm-vid { display: grid; gap: 10px; text-decoration: none; width: 100%; }
.pm-th { position: relative; display: block; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; }
.pm-th img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.pm-vid:hover .pm-th img { transform: scale(1.04); }
.play { position: absolute; left: 50%; top: 50%; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: var(--sun); display: grid; place-items: center; }
.play svg { width: 24px; fill: var(--ink); margin-left: 3px; }
.pm-vt { font-weight: 500; }
.pj-shows { padding: clamp(60px, 8vw, 110px) var(--g); }
.pj-shows h2 { font-size: clamp(24px, 3vw, 44px); margin-bottom: 28px; max-width: 20ch; }
.pj-shows ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pj-shows li { border: 1px solid var(--line); border-radius: 18px; padding: 22px; font-size: 18px; line-height: 1.4; background: var(--cream); }
.pj-shows li::before { content: "✦"; display: block; margin-bottom: 12px; }
.dt { display: grid; grid-template-columns: 1fr 1.4fr; gap: 28px clamp(28px, 5vw, 80px); padding: clamp(40px, 6vw, 90px) var(--g) clamp(60px, 8vw, 120px); }
.dt h2 { font-size: clamp(24px, 3vw, 44px); margin-bottom: 14px; }
.dt-l p:last-child { color: var(--ink2); max-width: 40ch; }
.dt-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-content: start; }
.dt-list li { display: grid; padding: 16px 0; border-top: 1px solid var(--line); }
.dt-r { font-size: 13px; color: var(--ink2); }
.dt-n { font-weight: 600; font-size: 18px; }
/* ---------- more work: text list, the photo follows the cursor on hover ---------- */
.mw { padding: clamp(60px, 8vw, 110px) var(--g) clamp(60px, 8vw, 110px); max-width: var(--max); margin: 0 auto; }
.mw-list { border-top: 1px solid var(--ink); position: relative; }
.mw-list li { border-bottom: 1px solid var(--line); }
.mw-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: clamp(18px, 2.4vw, 28px) 0; text-decoration: none; position: relative; }
.mw-t { font-family: var(--fh); letter-spacing: -.05em; line-height: 1.1; font-size: clamp(22px, 3vw, 42px); transition: transform .5s var(--ease), color .3s; }
.mw-c { color: var(--ink2); font-size: 14px; text-align: right; }
.mw-list a:hover .mw-t, .mw-list a:focus-visible .mw-t { transform: translateX(18px); color: var(--or); }
.mw-ph { position: absolute; left: 0; top: 0; width: clamp(220px, 24vw, 340px); aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; pointer-events: none; z-index: 3; opacity: 0; transform: translate3d(var(--mx, 60%), var(--my, -50%), 0) rotate(-3deg) scale(.86); transition: opacity .35s var(--ease), transform .45s var(--ease); box-shadow: 0 24px 48px -24px rgba(31, 32, 16, .55); }
.mw-ph img { width: 100%; height: 100%; object-fit: cover; }
.mw-list a:hover .mw-ph { opacity: 1; transform: translate3d(var(--mx, 60%), var(--my, -50%), 0) rotate(-3deg) scale(1); }
@media (hover: none) {
  .mw-list a { grid-template-columns: 76px minmax(0, 1fr); align-items: center; }
  .mw-ph { position: static; opacity: 1; transform: none; width: 76px; border-radius: 10px; box-shadow: none; grid-row: 1 / 3; }
  .mw-c { text-align: left; grid-column: 2; }
  .mw-t { grid-column: 2; font-size: clamp(20px, 5.4vw, 30px); }
}

/* ---------- kartacam: the site's cream, sun and rings, with graph paper only for the process ---------- */
.kc { --grid: rgba(96, 120, 150, .13); --paper: #FBFAF4; --fhand: 'DM Sans', sans-serif; overflow-x: clip; }
.kc > section:not(.kc-w):not(.mw):not(.kc-card) { max-width: none; }
.kc-w { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); }
.kc h2 { font-size: clamp(28px, 4.2vw, 60px); line-height: 1.08; max-width: 18ch; }
.kc h3 { font-family: var(--fb); letter-spacing: -.01em; font-weight: 600; font-size: 17px; }
.kc-hand { font-family: var(--fhand); font-style: italic; font-size: 18px; line-height: 1.15; letter-spacing: 0; margin: 0; }
.kc-hand.or { color: var(--or); }
.kc-ch { display: flex; gap: 10px; align-items: center; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin: 0 0 14px; }
.kc-ch::before { content: "●"; font-size: 8px; color: var(--olive); }
.kc-ch span { font-family: var(--fh); letter-spacing: -.04em; font-size: 15px; color: var(--ink2); }
.kc-head { display: grid; gap: 4px; max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.kc-head p.v-s, .kc-head p.v-w, .kc-prose p { color: var(--ink2); max-width: 60ch; margin-top: 12px; font-size: clamp(16px, 1.3vw, 18px); }
.kc-sec { padding: clamp(72px, 9vw, 130px) 0; }
.kc-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 20px clamp(32px, 6vw, 96px); align-items: start; margin-bottom: clamp(32px, 4vw, 52px); }
.kc-split .kc-head { margin-bottom: 0; }
.kc-prose p { margin-top: 0; }
.kc-grid { background-color: var(--cream); background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 22px 22px; border-block: 1px solid var(--line); }

/* hero: cream with the sun and rings */
.kc-hero { position: relative; padding: clamp(140px, 20vh, 210px) 0 clamp(36px, 4vw, 56px); }
.kc-hero .kc-w { position: relative; z-index: 1; }
.kc-hero h1 { font-size: clamp(38px, 7vw, 112px); line-height: 1; letter-spacing: -.06em; max-width: 15ch; margin: 10px 0 28px; }
.kc-hero h1 .ln { display: block; padding-bottom: .06em; }
.kc-hero h1 .ln > span { display: inline-block; animation: kcRise 1s var(--ease) both; }
.kc-hero h1 .ln:nth-child(2) > span { animation-delay: .09s; }
.kc-hero h1 .ln:nth-child(3) > span { animation-delay: .18s; }
@keyframes kcRise { from { transform: translateY(40%); opacity: 0; } to { transform: none; opacity: 1; } }
.kc-hero .pj-tags { margin-bottom: 0; }
.kc-orb { position: absolute; right: max(-6vw, calc((100vw - var(--max)) / 2 - 6vw)); top: clamp(90px, 12vh, 140px); width: clamp(260px, 36vw, 560px); aspect-ratio: 1; pointer-events: none; }
.kc-orb .ring { inset: 0; }
.kc-orb .r2 { inset: -14%; }
.kc-orb .r3 { inset: -30%; }
.kc-sun { position: absolute; inset: 22%; border-radius: 50%; background: var(--sun); box-shadow: 0 0 80px 20px rgba(246, 220, 128, .35); animation: kcSun 9s ease-in-out infinite alternate; }
@keyframes kcSun { to { transform: translate(-6%, 5%) scale(1.06); } }
.kc-cover { position: relative; z-index: 1; }
.kc-cover figure { margin: 0; }
.kc-cover img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 20px; background: #e8e3cf; }
.kc-cover figcaption { margin-top: 12px; font-size: 14px; color: var(--ink2); }

/* intro */
.kc-intro { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px clamp(32px, 6vw, 96px); padding-top: clamp(64px, 8vw, 110px); padding-bottom: clamp(64px, 8vw, 110px); align-items: start; }
.kc-lede > p.v-s, .kc-lede > p.v-w { font-family: var(--fh); letter-spacing: -.05em; line-height: 1.25; font-size: clamp(21px, 2.4vw, 34px); }
.kc-body { color: var(--ink2); max-width: 58ch; margin-top: 18px; }
.kc-facts { margin: 0; background: var(--pale); border: 1px solid rgba(233, 213, 119, .6); border-radius: 20px; padding: 6px 24px; }
.kc-facts div { padding: 16px 0; border-top: 1px solid rgba(31, 32, 16, .1); }
.kc-facts div:first-child { border-top: 0; }
.kc-facts dt { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; margin-bottom: 6px; display: flex; gap: 8px; align-items: center; }
.kc-facts dt::before { content: "●"; font-size: 8px; color: var(--ink2); }
.kc-facts .res dt::before { color: var(--olive); }
.kc-facts dd { margin: 0; font-size: 15px; line-height: 1.5; }
.kc-facts .res dd { font-weight: 500; }

/* dark rounded cards with the sun */
.kc-card { margin: clamp(20px, 3vw, 40px) var(--g); max-width: calc(var(--max) - 2 * var(--g)); background: var(--ink); color: var(--cream); border-radius: 28px; padding: clamp(56px, 8vw, 120px) clamp(24px, 6vw, 96px); position: relative; overflow: hidden; }
@media (min-width: 1552px) { .kc-card { margin-left: auto; margin-right: auto; } }
.kc-card::after { content: ""; position: absolute; right: -8%; bottom: -30%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: var(--sun); opacity: .9; filter: blur(1px); pointer-events: none; }
.kc-aw::after { width: 26%; bottom: -38%; right: -6%; }
.kc-card > * { position: relative; z-index: 1; }
.kc-card .kc-head p.v-s, .kc-card .kc-head p.v-w, .kc-card .kc-under p { color: rgba(255, 253, 243, .7); }
.kc-card .kc-ch::before { color: var(--mus); }
.kc-card .kc-ch span { color: rgba(255, 253, 243, .6); }
.kc-state .kc-ch { justify-content: center; }
.kc-big { font-family: var(--fh); letter-spacing: -.05em; font-size: clamp(26px, 4.2vw, 60px); line-height: 1.15; max-width: 22ch; margin: 0 auto; text-align: center; text-wrap: balance; }
.kc-big .w { opacity: .25; transition: opacity .4s; }
.kc-big .w.on { opacity: 1; }
.kc-big .w.hl.on { color: var(--mus); }
.kc-under { display: grid; grid-template-columns: 1fr 1fr; gap: 28px clamp(28px, 5vw, 80px); max-width: 1000px; margin: clamp(56px, 7vw, 100px) auto 0; }
.kc-under h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; color: var(--cream); }
.kc-roles { display: flex; flex-wrap: wrap; gap: 8px; }
.kc-roles li { border: 1px solid rgba(255, 253, 243, .35); border-radius: 99px; padding: 6px 14px; font-size: 14px; }

/* tape, only on the graph paper */
.kc-tape { position: relative; }
.kc-tape::before, .kc-tape::after { content: ""; position: absolute; width: 96px; height: 26px; background: rgba(233, 213, 119, .7); z-index: 3; }
.kc-tape::before { top: -12px; left: 18px; transform: rotate(-6deg); }
.kc-tape::after { top: -10px; right: 18px; transform: rotate(5deg); }

/* before / after */
.kc-ba { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 90px); align-items: start; }
.kc-pol { background: var(--paper); padding: 12px 12px 16px; border-radius: 6px; box-shadow: 0 1px 1px rgba(0, 0, 0, .05), 0 14px 30px -18px rgba(31, 32, 16, .5); }
.kc-pol img { width: 100%; border-radius: 3px; }
.kc-pol figcaption { margin-top: 12px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 13px; color: var(--ink2); }
.js .kc-before[data-reveal].in, .kc-before { transform: rotate(-1.6deg); }
.js .kc-after[data-reveal].in, .kc-after { transform: rotate(1.2deg); }
.kc-after { margin-top: 36px; }
.kc-before img { filter: saturate(.55) contrast(.95); }
.kc-stamp { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; padding: 3px 10px; border: 1px solid currentColor; border-radius: 99px; }
.kc-stamp.on { color: var(--olive); }
.kc-ba-n { margin-top: 28px; }

/* photos */
.kc-shot { margin: 0; }
.kc-shot img { width: 100%; height: auto; border-radius: 14px; background: #E6E1CC; }
.kc-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(12px, 1.6vw, 22px); }
.kc-two .kc-shot img { aspect-ratio: 3 / 2; object-fit: cover; height: 100%; }
.kc-shot + .kc-two, .kc-two + .kc-two, .kc-hand + .kc-shot { margin-top: clamp(12px, 1.6vw, 22px); }
.kc-board { background: var(--paper); padding: clamp(8px, 1vw, 14px); border-radius: 6px; box-shadow: 0 16px 34px -22px rgba(31, 32, 16, .55); margin: 0 0 clamp(12px, 1.6vw, 22px); }
.kc-board img { width: 100%; border-radius: 3px; }
.kc-arrow { display: inline-flex; gap: 8px; align-items: flex-start; transform: rotate(-1.5deg); margin: 10px 0 clamp(28px, 3vw, 40px); }
.kc-grid .kc-arrow:last-child { margin-bottom: 0; }

/* on the road: the CVP in three columns */
.kc-road { background: linear-gradient(to bottom, var(--cream) 0%, var(--lil-t) 100%); }
.kc-cvp { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.kc-cvp li { background: var(--cream); border: 1px solid var(--line); border-radius: 20px; padding: 12px 12px 26px; display: flex; flex-direction: column; }
.kc-cvp figure { margin: 0 0 20px; border-radius: 12px; overflow: hidden; aspect-ratio: 4 / 3; background: #E6E1CC; }
.kc-cvp img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.kc-cvp li:hover img { transform: scale(1.04); }
.kc-cvp-l, .kc-cvp h3, .kc-cvp li > p { padding: 0 12px; }
.kc-cvp-l { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 600; display: flex; gap: 8px; align-items: center; }
.kc-cvp-l::before { content: "●"; font-size: 8px; color: var(--olive); }
.kc .kc-cvp h3 { font-family: var(--fh); font-weight: 400; letter-spacing: -.05em; font-size: clamp(20px, 1.9vw, 26px); line-height: 1.15; margin-bottom: 10px; }
.kc-cvp li > p:last-child { color: var(--ink2); margin: 0; font-size: 16px; }
.kc-cvp b { color: var(--ink); font-weight: 600; }

/* outdoor gallery, grouped by neighbourhood */
.kc-outdoor { background: linear-gradient(to bottom, var(--cream) 0%, var(--mus-t) 100%); }
.kc-grp + .kc-grp { margin-top: clamp(56px, 7vw, 100px); }
.kc-grp-l { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding-top: 14px; border-top: 1px solid var(--ink); margin-bottom: clamp(16px, 2vw, 22px); }
.kc-grp-l b { font-weight: 600; }
.kc-grp-l span { color: var(--ink2); font-size: 15px; }
.kc-gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(150px, 17vw, 270px); gap: clamp(10px, 1.4vw, 18px); }
.kc-gal figure { margin: 0; border-radius: 14px; overflow: hidden; background: #E6E1CC; }
.kc-gal img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.kc-gal figure:hover img { transform: scale(1.04); }
.kc-gal .w2 { grid-column: span 2; }
.kc-gal .t2 { grid-row: span 2; }

/* outcomes */
.kc-out { background: linear-gradient(to bottom, var(--cream) 0%, var(--mus-t) 100%); }
.kc-outs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; counter-reset: o; }
.kc-outs li { background: var(--cream); border: 1px solid var(--line); border-radius: 20px; padding: 24px 24px 26px; counter-increment: o; }
.kc-outs li::before { content: "0" counter(o); display: block; font-family: var(--fh); color: var(--ink2); font-size: 15px; margin-bottom: 14px; }
.kc-outs h3 { margin-bottom: 8px; font-size: 19px; }
.kc-outs p { color: var(--ink2); margin: 0; font-size: 16px; }
.kc-use { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(10px, 1.4vw, 18px); margin-top: clamp(40px, 5vw, 64px); }
.kc-use img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }

/* awards */
.kc-awl { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); max-width: 900px; }
.kc-award { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.kc-award img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; }
.kc-yr { font-family: var(--fh); letter-spacing: -.06em; font-size: clamp(36px, 4vw, 56px); line-height: .9; color: var(--mus); margin: 0 0 10px; }
.kc .kc-award h3 { font-family: var(--fh); font-weight: 400; letter-spacing: -.05em; font-size: clamp(18px, 1.7vw, 22px); margin-bottom: 6px; }
.kc-award p { margin: 0; color: rgba(255, 253, 243, .7); font-size: 15px; }
.kc-film { display: flex; align-items: center; gap: 12px; text-decoration: none; border-top: 1px solid rgba(255, 253, 243, .2); padding-top: 14px; margin-top: 16px; font-size: 15px; }
.kc-film small { display: block; color: rgba(255, 253, 243, .6); font-size: 13px; }
.kc-play { width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 253, 243, .5); display: grid; place-items: center; flex: none; transition: background .25s, color .25s, border-color .25s; }
.kc-film:hover .kc-play, .kc-film:focus-visible .kc-play { background: linear-gradient(90deg, #F6DC6B, #E4D3C0 50%, #C4B8EE); border-color: transparent; color: var(--ink); }

/* team */
.kc-team { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 32px clamp(32px, 6vw, 96px); padding-top: clamp(84px, 10vw, 140px); padding-bottom: clamp(40px, 5vw, 70px); align-items: start; }
.kc-team .kc-head { margin-bottom: 0; }
.kc-ticket { background: var(--pale); border: 1px solid rgba(233, 213, 119, .6); border-radius: 20px; padding: 18px 28px; position: relative; }

.kc-ticket dl { margin: 0; }
.kc-ticket dl div { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px dashed rgba(31, 32, 16, .16); }
.kc-ticket dl div:last-child { border-bottom: 0; }
.kc-ticket dt { color: var(--ink2); font-size: 14px; }
.kc-ticket dd { margin: 0; font-weight: 500; }
.kc .mw h2.lbl { font-family: inherit; font-size: 13px; letter-spacing: .02em; line-height: 1.4; max-width: none; }
.kc .mw { padding-bottom: clamp(90px, 10vw, 140px); }

@media (max-width: 860px) {
  .kc-intro, .kc-split, .kc-under, .kc-ba, .kc-team, .kc-outs, .kc-awl, .kc-cvp { grid-template-columns: minmax(0, 1fr); }
  .kc-after { margin-top: 0; }
  .kc-use { grid-template-columns: 1fr 1fr; }
  .kc-orb { right: -28vw; top: 70px; width: 70vw; }
  .kc-gal { grid-template-columns: 1fr 1fr; grid-auto-rows: 34vw; grid-auto-flow: dense; }
  .kc-gal .t2 { grid-row: auto; }
  .kc-gal .w2, .kc-gal .m2 { grid-column: span 2; }
  .kc-card { border-radius: 22px; }
  .kc-card::after { width: 60%; bottom: -12%; right: -22%; }
}
@media (max-width: 520px) {
  .kc-two, .kc-award { grid-template-columns: minmax(0, 1fr); }
  .kc-award img { aspect-ratio: 4 / 3; }
  .kc-ticket { padding: 12px 22px; }
  .kc-ticket dl div { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .kc-hand { font-size: 21px; }
}
@media (prefers-reduced-motion: reduce) { .kc-hero h1 .ln > span, .kc-sun { animation: none; } .kc-big .w { opacity: 1; } }

/* ---------- tablet ---------- */
@media (max-width: 1100px) {
  .fc { grid-template-columns: 1fr; width: min(640px, 84vw); }
  .fc-sl { aspect-ratio: 4 / 3; min-height: 0; }
  .pj-sum dl { grid-template-columns: 1fr 1fr; gap: 1px; background: rgba(233, 213, 119, .7); overflow: hidden; }
  .pj-sum dl > div { border: 0 !important; background: var(--pale); }
  .pj-sum .res { grid-column: 1 / -1; order: 9; }
  .tools { grid-template-columns: 1fr 1fr; }
  .ab-cols { margin-left: 0; }
  .pm-grid { grid-template-columns: 1fr; }
  .ab-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .wk, .wk:nth-child(even) { grid-template-columns: 1fr; gap: 26px; }
  .wk:nth-child(even) .wk-ph { order: 0; }
  /* single column: the greeting and lede, then the portrait, then the rest */
  .intro { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .intro-tx { display: contents; }
  .intro-tx > * { order: 3; }
  .intro-tx > #introH, .intro-tx > .intro-lede { order: 1; }
  .intro-ph { max-width: 460px; width: 100%; order: 2; align-self: flex-start; margin: 4px 0 32px; }
  .pj-sec, .pj-out, .pj-ov, .ab-list, .dt, .ab-logo { grid-template-columns: 1fr; }
  .pj-sec > :not(h2), .pj-out > :not(h2) { grid-column: 1; }
  .pj-sec > h2, .pj-out > h2 { position: static; }
  .foot-top { grid-template-columns: 1fr; }
  .foot-r { justify-self: start; }
  .rg-row { grid-template-columns: 1fr; }
  .ab-ph { max-width: 460px; }
}
/* ---------- mobile ---------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding-top: 120px; justify-content: flex-start; }
  .hero { min-height: min(100svh, 660px); padding-bottom: 40px; }
  .hero-h { font-size: clamp(27px, 8.4vw, 38px); text-wrap: balance; max-width: none; }
  .intro { padding-top: 36px; }
  .btn-in { display: flex; width: max-content; margin: 22px 0 0; font-size: 15px; }
  .hero-sun { width: 64vw; }
  .rch-d { display: none; }
  .rch-m { display: block; }
  .rch-m .loop { margin-bottom: 8px; }
  .rch-m .lp-a { padding: 12px 0; border-block: 0; border-top: 1px solid var(--line); }
  .rch-m .lp-m2 { border-top: 0; border-bottom: 1px solid var(--line); margin-bottom: 20px; }
  .rch-m .lp-m2 .loop-t, .rch-m .lp-m4 .loop-t { animation-direction: reverse; }
  .rch-m .lp-m3 .loop-t { animation-direction: normal; }
  .lp-lg { width: 112px; height: 66px; }
  .intro h2, .brain h2 { font-size: clamp(26px, 8vw, 34px); }
  .brain h2 { font-size: clamp(22px, 6.6vw, 34px); }
  .brain h2 > span { white-space: nowrap; }
  .xp-ph img { height: 220px; }
  .hero { padding-left: var(--g); }
  .feat-arw .arw { display: none; }
  .feat-all { margin-left: 0; }
  .ab-stats { grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
  .fc { width: 86vw; }
  .qc { flex-basis: 84vw; padding: 22px; }
  .q-nav { justify-content: flex-start; }
  .pj-sum dl { grid-template-columns: 1fr; }
  .pj-sum .res { order: 0; }
  .tps li, .tps.gifs { grid-template-columns: 1fr; }
  .tps li:nth-child(even) .tp-ph { order: 0; }
  .steps { grid-template-columns: 1fr; }
  .dia { grid-template-columns: 1fr; justify-items: stretch; }
  .dia-me { justify-self: center; }
  .pm-ph.six { grid-template-columns: 1fr 1fr; }
  .dt-list { grid-template-columns: 1fr; }
  .wk-list { gap: 84px; }
  .tools, .ab-cols { grid-template-columns: 1fr; }
  .xp li { grid-template-columns: 1fr; gap: 4px; }
  .ab-hero h1 { font-size: clamp(24px, 7.2vw, 40px); }
  .foot-mark { margin-top: -4vw; }
  /* on phones the sun starts beside the email, at the right edge, and sinks to its place behind the hills */
  .foot-sun { transform: translate(calc((1 - var(--rise, 1)) * 165%), calc((1 - var(--rise, 1)) * -330%)); }
  .foot-line { padding-bottom: 96px; }
  .copyv span { display: none; }
}

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

}
.lp-b .loop-t { animation-direction: reverse; }
#heroH:focus:not(:focus-visible), #heroH[tabindex="-1"]:focus { outline: none; }

/* ---------- round 13: home ---------- */
/* the nav reads quieter, so the first move is the scroll */
.bar-nav a:not([aria-current]) { opacity: .55; transition: opacity .3s; }
.bar-nav a:hover, .bar-nav a:focus-visible { opacity: 1; }
/* a line in the middle of the hero that draws itself downwards: scroll */
.hero-cue { position: absolute; left: 50%; bottom: clamp(20px, 4vh, 40px); z-index: 2; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: var(--ink2); }
.hero-cue-l { position: relative; width: 1px; height: clamp(56px, 9vh, 88px); background: var(--line); overflow: hidden; }
.hero-cue-l::after { content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 45%; background: var(--ink); animation: cue 2.2s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes cue { 0% { transform: translateY(-100%); } 100% { transform: translateY(230%); } }
.hero-cue-t { font-size: 11px; letter-spacing: .18em; text-transform: uppercase; }
.hero-cue:hover .hero-cue-l::after { background: var(--olive); }
/* flags and logos sit on their own soft band, and the sentences are smaller, so more flags and logos fit on screen */
.reach { padding-inline: 0; }
.rch-d, .rch-m { background: linear-gradient(90deg, var(--mus-t), #F6EFD9 50%, var(--lil-t)); padding: 10px 0; }
.reach .loop { background: transparent; }
.reach .lp-a { border-color: rgba(31, 32, 16, .08); }
.lp-tx { font-size: clamp(14px, 1.15vw, 16px); padding: 0 22px; color: var(--ink2); }
/* section titles share one left edge */
.feat-head { width: 100%; justify-content: space-between; }
.feat-head .feat-all { margin: 0; }
.quotes h2 { max-width: var(--max); text-align: left; }
.quotes h2 br { display: none; }
/* project cards: the Read more link uses the About "More about me" glow, a little stronger */
.fc .btn, .wk .btn { min-height: 38px; padding: 6px 16px; border-color: transparent; font-weight: 600; text-shadow: -5px 0 12px rgba(242, 200, 50, 1), 5px 0 14px rgba(160, 140, 236, 1), 0 0 24px rgba(233, 205, 90, .9), 0 0 4px rgba(255, 245, 200, 1); }
.fc .btn:hover, .fc .btn:focus-visible, .wk .btn:hover, .wk .btn:focus-visible { text-shadow: none; }
/* a deeper shadow along the top of each card (+30%) */
.fc { box-shadow: 0 1px 0 var(--line), 0 -14px 34px -22px rgba(31, 32, 16, .46), 0 20px 50px -30px rgba(31, 32, 16, .35); }
@media (max-width: 860px) {
  .feat-head { flex-wrap: nowrap; }
  .hero-cue-t { display: none; }
}

/* ---------- round 13: about + footer ---------- */
.rg-row > .rg-l, .rg-l > p:first-child { font-family: var(--fh); letter-spacing: -.05em; line-height: 1.2; font-size: clamp(18px, 1.6vw, 23px); color: var(--ink); max-width: 16ch; }
.rg-l > p.rg-hint { font-family: var(--fb); }
.rg-row > .rg-l { max-width: 16ch; }
/* the whole row band (heading column included) opens the row under the pointer */
.xp li.hov .xp-t > span { background-size: 100% 100%; }
.xp li.hov .xp-ph { grid-template-rows: 1fr; margin-top: 18px; }
.xp li.hov .xp-b::after { transform: rotate(45deg); }
.foot-mark { margin-top: -9.5vw; }
@media (max-width: 520px) { .foot-mark { margin-top: -7vw; } }

/* ---------- round 13: one project-page design for every featured project ---------- */
.kc mark { color: inherit; background: linear-gradient(transparent 60%, rgba(212, 203, 242, .95) 60%); padding: 0 .08em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.kc-big .w.hl.on { color: #D4CBF2; }
/* facts and credits read as plain lists: square, no yellow */
.kc-facts, .kc-ticket { background: transparent; border: 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); border-radius: 0; padding-left: 0; padding-right: 0; }
.kc-facts dt::before { content: none; }
.kc-facts dt { color: var(--ink2); }
.kc-cvp li, .kc-outs li { border-radius: 4px; background: rgba(255, 253, 243, .7); }
.kc-cover img { border-radius: 6px; }
/* smaller statements in the dark sections */
.kc-big { font-size: clamp(22px, 2.9vw, 42px); max-width: 26ch; }
.kc-card h2 { font-size: clamp(24px, 3vw, 44px); max-width: 22ch; }
/* tags and roles are plain text, not buttons */
.pj-tags, .kc-roles { display: flex; flex-wrap: wrap; gap: 6px 20px; }
.pj-tags li, .kc-roles li { border: 0; border-radius: 0; padding: 0; font-size: 15px; color: var(--ink2); }
.kc-roles li { color: rgba(255, 253, 243, .8); }
.pj-tags li::before, .kc-roles li::before { content: "●"; font-size: 7px; vertical-align: 3px; margin-right: 8px; color: var(--olive); }
.kc-roles li::before { color: var(--mus); }
/* a project photo drawn as a pencil outline replaces the sun in the dark cards */
.kc-card.sk::after { content: none; }
.kc-sk { position: absolute !important; z-index: 0 !important; right: -4%; bottom: -10%; width: 46%; aspect-ratio: 4 / 3; pointer-events: none; opacity: .5;
  -webkit-mask: radial-gradient(closest-side, #000 55%, transparent); mask: radial-gradient(closest-side, #000 55%, transparent); }
.kc-sk img { width: 100%; height: 100%; object-fit: cover; filter: url(#skf); }
.kc-aw .kc-sk { width: 36%; bottom: -14%; }
@media (max-width: 860px) { .kc-sk { width: 90%; right: -30%; bottom: -12%; opacity: .22; } }
/* cards: one line on what the project was */
.fc-desc, .wk-desc { color: var(--ink2); font-size: 15.5px; line-height: 1.5; margin: 0 0 14px; max-width: 52ch; }
.wk-meta { margin-bottom: 12px; }
.fc-desc + .fc-solve, .wk-desc + .wk-solve { font-weight: 500; }

/* sliding strips of slides or photos, with arrows */
.kc-strip { position: relative; }
.kc-strip ul { display: flex; gap: clamp(12px, 1.6vw, 22px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 16px 2px 8px; }
.kc-strip ul::-webkit-scrollbar { display: none; }
.kc-strip li { flex: 0 0 auto; width: var(--sw, min(78%, 640px)); scroll-snap-align: start; margin: 0; }
.kc-strip figure { margin: 0; }
.kc-strip img, .kc-strip video { display: block; width: 100%; height: auto; border-radius: 4px; background: #E6E1CC; }
.kc-strip figcaption { margin-top: 10px; font-size: 14px; color: var(--ink2); }
.kc-strip.pp li { background: var(--paper); padding: 10px 10px 14px; border-radius: 4px; box-shadow: 0 14px 30px -20px rgba(31, 32, 16, .55); }
.kc-strip.ph li { --sw: clamp(220px, 26vw, 360px); }
.kc-strip.ph img, .kc-strip.ph video { aspect-ratio: 4 / 5; object-fit: cover; height: auto; }
.kc-sa { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.kc-sa button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ink); background: none; font-size: 17px; transition: background .3s, opacity .3s; }
.kc-sa button:hover { background: linear-gradient(90deg, #F6DC6B, #E4D3C0 50%, #C4B8EE); border-color: transparent; }
.kc-sa button:disabled { opacity: .3; pointer-events: none; }
/* three steps or zones with a photo each (reuses the CVP columns) */
.kc-steps .kc-cvp figure { aspect-ratio: 4 / 3; }
.kc-steps .kc-cvp li.pp figure { background: var(--paper); }
.kc-steps .kc-cvp li.pp img { object-fit: contain; }
.kc-vid { position: relative; margin: 0; border-radius: 6px; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 9; }
.kc-vid iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.kc-loops { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: clamp(10px, 1.4vw, 18px); }
.kc-loops figure { margin: 0; }
.kc-loops video, .kc-loops img { width: 100%; display: block; border-radius: 4px; background: #E6E1CC; }
.kc-loops figcaption { margin-top: 8px; font-size: 14px; color: var(--ink2); }
/* headshots for who I worked with */
.kc-ppl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(16px, 2vw, 28px); }
.kc-ppl li { display: grid; gap: 12px; align-content: start; }
.kc-faces { display: flex; }
.kc-faces span { width: 72px; height: 72px; border-radius: 50%; background: var(--lil-t) center / cover; border: 3px solid var(--cream); display: grid; place-items: center; font-family: var(--fh); font-size: 20px; color: var(--ink2); }
.kc-faces span + span { margin-left: -14px; }
.kc-ppl h3 { margin: 0; }
.kc-ppl p { margin: 0; color: var(--ink2); font-size: 15.5px; }
.kc-ppl .kc-cvp-l { padding: 0; }
/* links out to social posts, shown as thumbnails */
.kc-ig { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.kc-ig a { display: grid; gap: 10px; text-decoration: none; }
.kc-ig img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 4px; transition: transform .6s var(--ease); background: #E6E1CC; }
.kc-ig a:hover img { transform: translateY(-4px); }
.kc-ig b { font-weight: 600; display: block; }
.kc-ig span { font-size: 14px; color: var(--ink2); }
.kc-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 28px; }
@media (max-width: 860px) { .kc-strip li { --sw: 84%; } .kc-strip.ph li { --sw: 62%; } }
/* a laptop on a video call, for interview slots */
.kc-zoom { margin: 0; max-width: 300px; }
.kc-zoom .scr { background: #2A2B1C; border: 6px solid #1F2010; border-radius: 8px 8px 0 0; padding: 6px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; aspect-ratio: 16 / 10; }
.kc-zoom .scr span { background: #3A3B28 center / cover; border-radius: 3px; display: grid; place-items: center; font-family: var(--fh); font-size: 14px; color: #D4CBF2; }
.kc-zoom .scr span:first-child { grid-column: 1 / -1; }
.kc-zoom .base { height: 8px; margin: 0 -14px; background: #C9C3AA; border-radius: 0 0 10px 10px; }
/* a tilted polaroid beside the credits */
.kc-pol { margin: 28px 0 0; max-width: 220px; transform: rotate(-3deg); box-shadow: 0 18px 34px -22px rgba(31, 32, 16, .6); }
.kc-pol img { width: 100%; display: block; border-radius: 3px; }
@media (max-width: 600px) { .kc-loops { grid-template-columns: 1fr 1fr; } .kc-loops figcaption { font-size: 12.5px; } }

/* ---------- round 14 ---------- */
/* home cards: the Read more button always shows, even on short screens */
.fc .btn { flex: none; }
@media (min-width: 861px) and (max-height: 900px) {
  .feat.pinned .fc-desc { display: none; }
  .feat.pinned .fc h3 { margin-bottom: 12px; }
  .feat.pinned .fc-tx { padding: 24px 28px; }
  .feat.pinned .fc-out { padding-top: 12px; margin-bottom: 16px; }
}
/* work: headline the same size as other pages; the three kinds of work in the headline font */
.wk-head h1 { font-size: clamp(38px, 7vw, 112px); }
.wk-head p.wk-kinds { max-width: none; font-family: var(--fh); letter-spacing: -.05em; font-size: clamp(18px, 2vw, 28px); color: var(--ink); }
.wk-kinds span { color: var(--olive); margin: 0 .35em; font-size: .85em; }
/* work: photos are never cropped; each slide keeps its own shape and the next one peeks in on the right */
.wk-ph { aspect-ratio: auto; background: none; box-shadow: none; overflow: visible; }
.wk-sl { height: clamp(260px, 32vw, 500px); gap: 12px; scroll-padding: 0; }
.wk-sl li { flex: none; height: 100%; overflow: hidden; border-radius: 4px; background: #e8e3cf; }
.wk-sl img { width: auto; height: 100%; max-width: none; object-fit: contain; }
.wk:hover .wk-sl img { transform: none; }
.wk-dots { display: none; }
.wk-a { opacity: 1; box-shadow: 0 6px 18px -8px rgba(31, 32, 16, .5); }
.wk-a:disabled { opacity: 0; pointer-events: none; }
.js .wk[data-reveal] .wk-ph { clip-path: none; opacity: 0; transform: translateY(24px); transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .wk[data-reveal].in .wk-ph { clip-path: none; opacity: 1; transform: none; }
.wk-tx h2 { margin-bottom: 18px; }
@media (max-width: 860px) { .wk-sl { height: 64vw; } }
/* project pages: the opening statement, a step smaller */
.kc-lede > p.v-s, .kc-lede > p.v-w { font-size: clamp(18px, 1.8vw, 25px); line-height: 1.35; }
/* project galleries: every photo whole, portrait or landscape, packed in columns */
.kc-gal { display: block; columns: 3; column-gap: clamp(10px, 1.4vw, 18px); }
.kc-gal figure { break-inside: avoid; margin: 0 0 clamp(10px, 1.4vw, 18px); border-radius: 10px; }
.kc-gal img { height: auto; display: block; object-fit: contain; }
.kc-gal figure:hover img { transform: none; }
@media (max-width: 860px) { .kc-gal { columns: 2; } }
/* photos on project pages open full size */
main.kc img { cursor: zoom-in; }
main.kc .mw-list img, main.kc .kc-faces img, main.kc a img, main.kc .dia img { cursor: inherit; }
.lb { position: fixed; inset: 0; z-index: 200; background: rgba(24, 25, 12, .92); display: grid; place-items: center; padding: 56px 72px; }
.lb[hidden] { display: none; }
.lb img { max-width: 100%; max-height: calc(100vh - 112px); width: auto; height: auto; object-fit: contain; border-radius: 4px; cursor: default; }
.lb button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 253, 243, .92); color: var(--ink); font-size: 20px; display: grid; place-items: center; }
.lb button:hover { background: linear-gradient(90deg, #F6DC6B, #E4D3C0 50%, #C4B8EE); }
.lb-x { top: 16px; right: 16px; }
.lb-p { left: 16px; top: 50%; margin-top: -24px; } .lb-n2 { right: 16px; top: 50%; margin-top: -24px; }
.lb.one .lb-a { display: none; }
.lb-n { position: absolute; bottom: 14px; left: 0; right: 0; text-align: center; color: var(--cream); font-size: 14px; margin: 0; }
html.lb-on { overflow: hidden; }
@media (max-width: 600px) { .lb { padding: 64px 12px; } .lb-p, .lb-n2 { top: auto; bottom: 10px; margin: 0; } .lb-p { left: 12px; } .lb-n2 { right: 12px; } }
/* TIA: who fed the story, with faces */
.dia-box { grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.dia-box b, .dia-box span { grid-column: 2; }
.dia-f { grid-row: 1 / span 2; display: flex; }
.dia-f img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; border: 2px solid var(--cream); }
.dia-f img + img { margin-left: -12px; }
.dia-me { position: relative; }
.dia-me img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; margin: 0 auto 6px; border: 2px solid var(--cream); }
/* a film poster that opens the video on YouTube */
.kc-yt { position: relative; display: block; border-radius: 20px; overflow: hidden; text-decoration: none; background: var(--ink); }
.kc-yt img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; transition: transform 1s var(--ease), opacity .4s; }
.kc-yt:hover img { transform: scale(1.02); opacity: .9; }
main.kc .kc-yt img { cursor: pointer; }
.kc-yt-b { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: 40px; background: rgba(255, 253, 243, .94); color: var(--ink); font-size: 15px; font-weight: 500; }
.kc-yt-b .kc-play { border-color: var(--ink); width: 38px; height: 38px; font-size: 13px; }
.kc-yt:hover .kc-play { background: linear-gradient(90deg, #F6DC6B, #E4D3C0 50%, #C4B8EE); border-color: transparent; }
.kc-loops video { aspect-ratio: 16 / 9; object-fit: cover; }
/* SDW recap: a vertical Reel beside the film poster */
.kc-reel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr); gap: clamp(14px, 2vw, 28px); align-items: center; margin-top: clamp(24px, 4vw, 48px); }
.kc-reel figure { margin: 0; }
.kc-reel video { display: block; width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 20px; background: var(--ink); }
.kc-reel figcaption { margin-top: 10px; font-size: 14px; color: var(--ink2); }
@media (max-width: 700px) { .kc-reel { grid-template-columns: 1fr; } .kc-reel video { max-width: 320px; margin: 0 auto; } }
/* strip with uncropped slides at one height, arrows at mid-image */
.kc-mid { --mh: clamp(220px, 34vw, 440px); }
.kc-mid li { width: auto; }
.kc-strip.kc-mid img { height: var(--mh); width: auto; max-width: none; }
.kc-mid .kc-sa { position: absolute; left: -10px; right: -10px; top: calc(26px + var(--mh) / 2); transform: translateY(-50%); justify-content: space-between; margin: 0; pointer-events: none; }
.kc-mid .kc-sa button { pointer-events: auto; background: var(--paper); box-shadow: 0 8px 20px -10px rgba(31, 32, 16, .5); }
@media (max-width: 860px) { .kc-mid { --mh: 200px; } .kc-mid .kc-sa { left: 4px; right: 4px; } }
/* planning slides under a sheet of grid paper */
.kc-paper figure { position: relative; }
.kc-paper img { opacity: .9; }
.kc-paper figure::after { content: ""; position: absolute; inset: 0; border-radius: 6px; pointer-events: none; background-image: linear-gradient(rgba(255, 253, 243, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 253, 243, .22) 1px, transparent 1px); background-size: 22px 22px; }
/* outcome with bigger photos */
.kc-aw-big .kc-awl { max-width: 1180px; }
.kc-aw-big .kc-award { grid-template-columns: minmax(0, 1fr); }
.kc-aw-big .kc-award img { aspect-ratio: 3 / 2; }
/* portrait cover, shown whole */
.kc-tall figure { display: flex; flex-direction: column; align-items: center; }
.kc-tall img { width: auto; max-width: 100%; height: min(86vh, 1100px); aspect-ratio: 2 / 3; object-fit: contain; }
.kc-tall figcaption { align-self: center; }
.kc-bai { max-width: 1100px; margin-inline: auto; }
.kc-aw-big .kc-award img { aspect-ratio: auto; height: auto; object-fit: initial; }
.kc-two.kc-sm { max-width: 720px; margin-inline: auto; }
.kc-ig2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; }

/* r14: keep slider from widening Work cards */
.wk > * { min-width: 0; }
@media (max-width: 900px) { .wk, .wk:nth-child(even) { grid-template-columns: minmax(0, 1fr); } }

/* r16: preloader enter is the purple pill again (gradient on hover), still below the circle on desktop */
.pre-enter { right: auto; left: 50%; top: calc(50% + clamp(210px, 21vw, 300px) * .78 + 28px); transform: translateX(-50%); gap: 10px; white-space: nowrap; }
.pre-arw { display: inline-block; transition: transform .4s var(--ease); }
.pre-enter:hover .pre-arw, .pre-enter:focus-visible .pre-arw { transform: translateX(6px); }
.pre-enter, .pre-enter:focus, .pre-enter:focus-visible { outline: none; }
@media (max-width: 640px) { .pre-enter { top: auto; bottom: 44px; } }
.bar-tag { transition: opacity .3s; }

/* r15: work cards show two photos side by side, sharing one height; JS sets each one's width from its shape */
.wk-two { display: flex; gap: 10px; align-items: flex-start; }
.wk-two > a { flex: 1 1 0; min-width: 0; display: flex; gap: 10px; cursor: pointer; }
.wk-two img { flex: 1 1 0; min-width: 0; width: 100%; height: auto; border-radius: 4px; background: #e8e3cf; transition: transform 1.2s var(--ease); }
.wk-two > a:hover img { transform: scale(1.02); }

/* r15: home featured projects. Stacked by default (phones, reduced motion); pinned scroll steps on wide screens */
.fs { background: linear-gradient(to bottom, var(--cream) 0%, var(--mus-t) 100%); padding: clamp(80px, 10vw, 140px) 0; }
.fs-h { font-size: clamp(26px, 3.4vw, 50px); padding: 0 var(--g); max-width: var(--max); margin: 0 auto clamp(28px, 4vw, 56px); }
.fs-pin { max-width: var(--max); margin: 0 auto; padding: 0 var(--g); display: grid; gap: clamp(56px, 8vw, 100px); }
.fs-it { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: clamp(24px, 4vw, 72px); align-items: center; }
.fs-ph { display: block; order: 2; border-radius: 4px; overflow: hidden; background: #e8e3cf; box-shadow: 0 30px 70px -40px rgba(31, 32, 16, .45); }
.fs-ph img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 1.6s var(--ease); }
.fs-ph:hover img { transform: scale(1.03); }
.fs-tx { display: flex; flex-direction: column; align-items: flex-start; }
.fs-n { font-family: var(--fh); font-size: clamp(72px, 10vw, 168px); line-height: .9; letter-spacing: -.08em; margin: 0 0 clamp(16px, 2vw, 28px); color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.fs-cat { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: 10px; }
.fs-tx h3 { font-size: clamp(24px, 2.6vw, 40px); line-height: 1.1; margin-bottom: 16px; }
.fs-tx h3 a { text-decoration: none; }
.fs-tx h3 a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; text-decoration-color: var(--or); }
.fs-d { font-size: clamp(17px, 1.35vw, 20px); line-height: 1.45; max-width: 44ch; margin-bottom: 22px; }
.fs .btn { min-height: 38px; padding: 6px 16px; border-color: transparent; font-weight: 600; text-shadow: -5px 0 12px rgba(242, 200, 50, 1), 5px 0 14px rgba(160, 140, 236, 1), 0 0 24px rgba(233, 205, 90, .9), 0 0 4px rgba(255, 245, 200, 1); }
.fs .btn:hover, .fs .btn:focus-visible { text-shadow: none; }
.fs-dots { display: none; }
.fs.pin { padding-bottom: 0; }
.fs.pin .fs-h { margin-bottom: 0; }
.fs.pin .fs-pin { position: sticky; top: 0; height: 100vh; display: grid; grid-template-areas: "a"; align-items: center; gap: 0; }
.fs.pin .fs-it { grid-area: a; pointer-events: none; }
.fs.pin .fs-it.on { pointer-events: auto; }
.fs.pin .fs-ph { clip-path: inset(0 0 0 100% round 4px); transition: clip-path 1s var(--ease); }
.fs.pin .fs-it.on .fs-ph { clip-path: inset(0 0 0 0 round 4px); }
.fs.pin .fs-tx > * { opacity: 0; transform: translateY(18px); transition: opacity .5s var(--ease), transform .6s var(--ease); }
.fs.pin .fs-it.on .fs-tx > * { opacity: 1; transform: none; transition-duration: .9s; }
.fs.pin .fs-it.on .fs-tx > :nth-child(2) { transition-delay: .08s; } .fs.pin .fs-it.on .fs-tx > :nth-child(3) { transition-delay: .14s; } .fs.pin .fs-it.on .fs-tx > :nth-child(n+4) { transition-delay: .2s; }
.fs.pin .fs-ph img { max-height: 72vh; }
.fs.pin .fs-dots { display: flex; flex-direction: column; gap: 8px; position: absolute; right: var(--g); top: 50%; transform: translateY(-50%); grid-area: a; justify-self: end; position: relative; right: auto; top: auto; transform: none; margin-right: calc(var(--g) * -.6); }
.fs-dots li { width: 6px; height: 6px; border-radius: 3px; background: var(--line); transition: height .4s var(--ease), background-color .4s; }
.fs-dots li.on { height: 22px; background: var(--ink); }
@media (max-width: 860px) {
  .fs-it { grid-template-columns: minmax(0, 1fr); }
  .fs-ph { order: 0; }
  .fs-n { font-size: 64px; }
}
/* home intro: the About link sits on its own line with room above */
.intro-more { margin-top: clamp(18px, 2vw, 28px); }
/* the section title stays in view while the projects step through */
.fs.pin .fs-h { position: sticky; top: clamp(76px, 9vh, 110px); z-index: 1; height: 0; overflow: visible; }
.fs.pin { padding-top: clamp(120px, 14vw, 200px); }

/* r15 about: the search-interest chart, redrawn from Google Trends */
.tr { margin: clamp(28px, 3vw, 40px) 0 0; max-width: 720px; background: rgba(255, 253, 243, .82); border: 1px solid var(--line); border-radius: 6px; padding: clamp(16px, 2vw, 24px); }
.tr-cap { font-size: 13px; color: var(--ink2); margin-bottom: 10px; }
.tr-key { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; margin-bottom: 8px; }
.tr-key li { display: flex; align-items: center; gap: 8px; }
.tr-key li::before { content: ""; width: 18px; height: 3px; border-radius: 2px; background: currentColor; }
.tr-key .tr-ev::before { background: #3B78E7; } .tr-key .tr-fm::before { background: #D93A2B; } .tr-key .tr-bx::before { background: #E8A800; }
.tr svg { display: block; width: 100%; height: auto; overflow: visible; }
.tr-g { stroke: var(--line); stroke-width: 1; }
.tr-y, .tr-x { font: 400 11px var(--fb); fill: var(--ink2); }
.tr-y { text-anchor: end; } .tr-x { text-anchor: middle; }
.tr-l { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.js .tr[data-reveal] .tr-l { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease) .3s; }
.js .tr[data-reveal].in .tr-l { stroke-dashoffset: 0; }
.js .tr[data-reveal].in .tr-fm { transition-delay: .45s; } .js .tr[data-reveal].in .tr-bx { transition-delay: .6s; }
.tr-src { font-size: 12.5px; color: var(--ink2); margin: 10px 0 0 !important; }
.ab-sec > .tr ~ p { max-width: none; }
.ab-skills { padding-bottom: 0; }
.tr { text-align: left; width: 100%; } .tr-key { justify-content: flex-start; }
.ab-skills { margin-bottom: clamp(56px, 7vw, 96px); }
.kc-loops.kc-l4 { grid-template-columns: 1fr 1fr; }
/* r15 TIA */
.kc-sub { margin-top: clamp(48px, 6vw, 80px); max-width: 640px; }
.kc-sub h3 { margin: 0 0 8px; }
.dia-hub { position: relative; grid-template-columns: 1fr 240px 1fr; gap: 0; }
.dia-hub .dia-in, .dia-hub .dia-out { gap: 28px; }
.dia-hub .dia-box { position: relative; }
.dia-hub .dia-in .dia-box::after, .dia-hub .dia-out .dia-box::before { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); transform: translateY(-50%); }
.dia-hub .dia-in .dia-box::after { right: -5px; }
.dia-hub .dia-out .dia-box::before { left: -5px; }
.dia-hub > svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.dia-hub .dia-me { background: var(--ink); color: var(--cream); justify-self: center; z-index: 1; }
.dia-hub .dia-me span { color: var(--cream); opacity: .8; }
.ta-ex { list-style: none; margin: clamp(32px, 4vw, 56px) 0 0; padding: 0; display: grid; gap: clamp(40px, 5vw, 72px); }
.ta-ex li { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.ta-ex li:nth-child(even) figure { order: 2; }
.ta-ex figure { margin: 0; }
.ta-ex img { width: 100%; height: auto; display: block; border-radius: 4px; }
.ta-ex figcaption { margin-top: 8px; font-size: 14px; color: var(--ink2); }
.ta-ex blockquote { margin: 0; }
.ta-ex blockquote p { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; margin: 0 0 14px; }
.ta-ex .ta-k { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink2); margin-bottom: 10px; }
.ta-ex footer { font-size: 14px; color: var(--ink2); }
.ta-ex cite { font-style: normal; font-weight: 600; color: var(--ink); }
@media (max-width: 860px) {
  .ta-ex li { grid-template-columns: 1fr; }
  .ta-ex li:nth-child(even) figure { order: 0; }
  .dia-hub { grid-template-columns: 1fr; gap: 16px; }
  .dia-hub > svg, .dia-hub .dia-box::after, .dia-hub .dia-box::before { display: none; }
}
/* r15: output cards keep each photo's own shape; linked photos */
.kc-award img, .kc-award .kc-award-ph img { aspect-ratio: auto; height: auto; object-fit: initial; }
.kc-award-ph { display: block; border-radius: 14px; overflow: hidden; }
.kc-award-ph img { display: block; transition: transform .6s var(--ease); }
.kc-award-ph:hover img { transform: scale(1.03); }
@media (max-width: 860px) { .kc-award img { aspect-ratio: auto; } }
/* r15 SS */
.ss-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 24px); margin-top: clamp(28px, 4vw, 48px); }
.ss-trio figure { margin: 0; }
.ss-trio img { width: 100%; height: auto; display: block; border-radius: 4px; }
.ss-trio figcaption, .kc-raw figcaption { margin-top: 10px; font-size: 14px; color: var(--ink2); }
.ss-trio b { color: var(--ink); font-weight: 600; }
.ss-id { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(24px, 4vw, 64px); align-items: center; margin-top: clamp(48px, 6vw, 88px); }
.ss-id .kc-two { margin: 0; }
.ss-id img { width: 100%; height: auto; display: block; border-radius: 4px; }
.kc-loops.kc-raw { margin-top: clamp(32px, 4vw, 56px); align-items: start; }
.kc-loops.kc-raw video { aspect-ratio: auto; height: auto; object-fit: initial; }
.kc-card .kc-ig span { color: rgba(255, 253, 243, .7); }
.kc-card .kc-ig b { color: var(--cream); }
@media (max-width: 860px) { .ss-trio, .ss-id { grid-template-columns: minmax(0, 1fr); } }
.kc-board.kc-one { max-width: 900px; margin-inline: auto; }

/* ---------- r16 ---------- */
/* preloader tagline in small caps */
.pre-tag { font-variant-caps: all-small-caps; letter-spacing: .06em; font-size: clamp(14px, 1.1vw, 16px); }
/* home: section labels have no dot; featured heading lives inside the pinned frame so it never trails into the testimonials */
.fs .fs-pin > .fs-h { margin: 0 0 clamp(28px, 4vw, 56px); padding: 0; max-width: none; }
.fs.pin .fs-pin > .fs-h { position: absolute; left: var(--g); right: var(--g); top: clamp(76px, 9vh, 110px); height: auto; margin: 0; z-index: 1; }
.fs.pin { padding-top: 0; }
/* testimonial heading on two lines */
.quotes #qH > span { display: block; }
/* project pages: no dot before section labels */
.kc-ch::before { content: none; }
/* about: skills headings carry a symbol */
.sk-g { color: var(--olive); margin-right: 4px; font-size: .9em; }
.tool:nth-child(2) .sk-g { color: var(--or); }
.ab-trend > p.v-s { max-width: 60ch; }
/* about: experience photos drag sideways with a mouse */
.xp-ph ul { cursor: grab; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
.xp-ph ul.drag { cursor: grabbing; scroll-snap-type: none; }
.xp-ph ul.drag img { pointer-events: none; }
.xp .xp-ph li { scroll-snap-align: start; }
.xp-ph img { -webkit-user-drag: none; user-select: none; }
/* Guinness: six moodboard slides, three to a row */
.kc-three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); }
.kc-three .kc-board { margin: 0; }
@media (max-width: 860px) { .kc-three { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .kc-three { grid-template-columns: minmax(0, 1fr); } }
/* SDW: wide collage after the big idea */
.kc-wide { margin-block: 0 clamp(40px, 6vw, 90px); }
.kc-wide .kc-board { margin: 0; }
/* SDW: film plays muted on hover */
.kc-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; opacity: 0; transition: opacity .5s; }
.kc-yt iframe.on { opacity: 1; }
/* PUB: four process images, two by two */
.kc-two > .kc-board { margin: 0; }
/* Saturday Selects: W Hotels logo beside the Swwim Club label */
.ss-logo { display: block; height: 34px; width: auto; margin: 4px 0 14px; }

/* r16: keep About blobs from widening the page on phones */
.ab-story { overflow-x: clip; }

/* ===== Round 17 ===== */
/* output cards: bigger images on every project page */
.kc-awl { max-width: 1180px; }
.kc-award { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(20px, 2.4vw, 32px); }
.kc-awl:has(> .kc-award:only-child) { grid-template-columns: minmax(0, 1fr); max-width: 980px; }
.kc-awl:has(> .kc-award:only-child) .kc-award { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
@media (max-width: 860px) { .kc-award, .kc-awl:has(> .kc-award:only-child) .kc-award { grid-template-columns: minmax(0, 1fr); } }
/* video covers and excerpts (TIA) */
.kc-cover video { width: 100%; height: auto; display: block; border-radius: 6px; background: #e8e3cf; }
.ta-ex video { width: 100%; height: auto; display: block; border-radius: 4px; }
/* PUB: six clips, three across */
.kc-loops.kc-l6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* SCE: booth clips, four across; brief as a 2x2 grid */
.kc-loops.kc-sceclips { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: clamp(12px, 1.6vw, 22px); }
.kc-brief { margin-top: clamp(24px, 3vw, 40px); row-gap: clamp(20px, 2.4vw, 32px); }
.kc-brief figure { margin: 0; }
.kc-brief img { width: 100%; height: auto; display: block; }
.kc-brief figcaption { margin-top: 10px; font-size: 14px; color: var(--ink2); }
@media (max-width: 860px) { .kc-loops.kc-sceclips { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .kc-loops.kc-l6 { grid-template-columns: 1fr 1fr; } .kc-brief { grid-template-columns: 1fr 1fr; } .kc-brief figcaption { font-size: 12.5px; } }
/* linked section titles (SS) */
.kc-tl { color: inherit; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-size: 0 1.5px; background-repeat: no-repeat; background-position: 0 100%; transition: background-size .5s var(--ease); }
.kc-tl:hover, .kc-tl:focus-visible { background-size: 100% 1.5px; }
.kc-tl-a { display: inline-block; margin-left: .3em; font-size: .6em; vertical-align: .35em; color: #D14517; transition: transform .4s var(--ease); }
.kc-tl:hover .kc-tl-a { transform: translate(3px, -3px); }
/* preloader: no outline, a steady pulse that never rests, a slower burst */
@keyframes beatC { 0%, 100% { transform: scale(1.1); } 50% { transform: scale(1.34); } }
@keyframes beatQ { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }
@media (prefers-reduced-motion: no-preference) {
  #pre:not(.go) .pre-mid::before { animation: beatC 2.6s ease-in-out infinite; }
  #pre:not(.go) .pre-q, #pre:not(.go) .pre-mid figcaption { animation: beatQ 2.6s ease-in-out infinite; }
}
#pre.go .pre-mid::before, #pre.go .pre-mid::after { animation-duration: 1.8s; }
#pre.out { transition-duration: 1.1s; }
@media (max-width: 640px) { .pre-enter { min-height: 36px; padding: 8px 24px; font-size: 13px; gap: 7px; } }
/* home: the testimonial heading lines up with Featured projects; Featured projects matches the brain heading */
.quotes h2 { padding-inline: var(--g); }
.fs-h, .fs .fs-pin > .fs-h { font-size: clamp(30px, 4.4vw, 64px); }
/* About: bold glowing search terms, lilac glowing skill symbols, the next-role line */
.ab-trend b.glow { font-weight: 700; }
.sk-g, .tool:nth-child(2) .sk-g { color: #A99BE6; text-shadow: 0 0 8px rgba(196, 184, 240, .95), 0 0 18px rgba(169, 155, 230, .7); }
.ab-next { font-family: var(--fh); font-size: clamp(18px, 1.8vw, 24px); letter-spacing: -.04em; line-height: 1.3; margin-bottom: 14px; }

/* ---------- r17 mobile ---------- */
@media (max-width: 860px) {
  /* hidden flag tooltips sat off the right edge and let the About page slide sideways */
  .fl-i:not(:hover):not(:focus-within):not(.open) .fl-tip { display: none; }
}
@media (max-width: 640px) {
  body { font-size: 15px; }
  .kc-lede, .kc-lede p { font-size: 17px; }
  .kc-big { font-size: clamp(22px, 6.4vw, 28px); }
  /* home hero: headline sits lower, the scroll cue higher and easier to see */
  .hero { padding-top: 168px; }
  .hero-cue { bottom: 11vh; }
  .hero-cue-l { width: 1.5px; height: 64px; background: rgba(43, 43, 35, .28); }
  .hero-cue-l::after { width: 1.5px; }
  .intro-ph figcaption { display: none; }
  /* featured projects: same size as the intro paragraph, two lines, a fine rule between projects */
  .fs-h, .fs .fs-pin > .fs-h { font-size: clamp(22px, 6.6vw, 34px); margin-bottom: 20px; }
  .fs-h > span { display: block; }
  .fs-pin { gap: 0; }
  .fs-it { padding: 36px 0; }
  .fs-it:first-of-type { padding-top: 0; }
  .fs-it + .fs-it { border-top: 1px solid var(--line); }
  /* footer: contact links follow the roles; everything a touch smaller */
  .foot-top { display: flex; flex-direction: column; gap: 0; }
  .foot-l { display: contents; }
  .foot-l > h2 { order: 1; }
  .foot-l > p { order: 2; font-size: 15px; }
  .foot-r { order: 3; margin-top: 28px; }
  .foot-links { order: 4; margin: 24px 0 8px; }
  .foot-links a { font-size: 16px; min-height: 40px; }
  .foot-r .lbl { font-size: 17px; }
  .foot-roles li { font-size: 18px; padding: 9px 0; }
  /* about: the logo wall fits in five rows */
  .rg-lg { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
  .rg-lg .lp-lg { height: 54px; }
}

/* ================= Round 18 ================= */
/* preloader: a round dark button with a purple glow, "Enter" fades in a second after load */
.pre-enter { position: absolute; left: 50%; top: 50%; right: auto; transform: translate(-50%, -50%); z-index: 3; width: 134px; height: 134px; min-height: 0; padding: 0; border-radius: 50%; justify-content: center; background: #1F2010; color: var(--pale); font-size: 17px; letter-spacing: .01em; box-shadow: 0 0 0 1px rgba(196, 184, 240, .35), 0 0 46px 8px rgba(170, 150, 235, .55), 0 0 110px 24px rgba(196, 184, 240, .35); transition: box-shadow .5s var(--ease), transform .5s var(--ease); }
.pre-enter:hover, .pre-enter:focus-visible { background: #1F2010; transform: translate(-50%, -50%) scale(1.05); box-shadow: 0 0 0 1px rgba(196, 184, 240, .6), 0 0 60px 14px rgba(170, 150, 235, .75), 0 0 140px 34px rgba(196, 184, 240, .5); }
.pre-en { opacity: 0; animation: preEn .9s var(--ease) 1s forwards; }
@keyframes preEn { to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pre-en { animation-duration: .01s; } }
.pre-mid::before, .pre-mid::after { pointer-events: none; }

/* home portrait: the star turns slowly behind, the photo fades into the page at the bottom */
.intro-ph { perspective: none; }
.intro-pt { position: relative; aspect-ratio: 1080 / 1350; -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); mask-image: linear-gradient(to bottom, #000 72%, transparent 100%); }
.intro-pt img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: none; }
.intro-star { animation: starTurn 90s linear infinite; }
@keyframes starTurn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .intro-star { animation: none; } }

/* type: DM Sans display text 35% smaller, body a step smaller, Krona headers on project pages halved, kickers 20% bigger */
body { font-size: 16px; }
.intro-lede p { font-size: clamp(16px, 1.63vw, 22px); }
.intro-tx p { font-size: clamp(15px, 1.15vw, 17px); }
.ab-sec > p:not(.ab-big):not(.ab-say) { font-size: clamp(15px, 1.2vw, 17px); }
.lbl { font-size: 15.5px; }
.pj-tags li, .kc-roles li { font-size: 18px; }
.kc-hero h1 { font-size: clamp(26px, 3.5vw, 56px); max-width: 24ch; }
.kc h2 { font-size: clamp(20px, 2.1vw, 30px); max-width: 26ch; }
.kc-lede > p.v-s, .kc-lede > p.v-w { font-size: clamp(16px, 1.3vw, 19px); }
.kc-head p.v-s, .kc-head p.v-w, .kc-prose p { font-size: clamp(15px, 1.1vw, 16px); }
.wk-solve { font-size: clamp(15px, 1.15vw, 17px); }
[lang="zh"] { font-family: var(--fb); font-weight: 700; letter-spacing: 0; }

/* links: quiet. No red underline, no arrows */
.wk-tx h2 a:hover, .mw-list a:hover .mw-t, .mw-list a:focus-visible .mw-t { text-decoration: none; color: inherit; }
.pj-crumb a { text-decoration: none; border-bottom: 1px solid var(--line); }

/* home: featured projects, a dark list */
.fw { background: #1F2010; color: var(--pale); padding: clamp(80px, 10vw, 140px) var(--g); position: relative; }
.fw > h2 { font-size: clamp(26px, 3.4vw, 50px); max-width: 1100px; margin: 0 auto clamp(30px, 4vw, 52px); }
.fw-list { max-width: 1100px; margin: 0 auto; }
.fw-row { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr) 200px; gap: clamp(20px, 3vw, 44px); align-items: center; padding: 28px 22px; border-top: 1px solid rgba(255, 251, 214, .16); border-radius: 0; text-decoration: none; position: relative; isolation: isolate; transition: padding .55s var(--ease), border-radius .55s var(--ease), color .4s; }
.fw-list li:last-child .fw-row { border-bottom: 1px solid rgba(255, 251, 214, .16); }
.fw-row::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(to bottom, #FFFBD6 0%, #E6DEF8 48%, #D4CBF2 76%, #1F2010 100%); opacity: 0; transition: opacity .5s var(--ease); }
.fw-ph { display: none; }
.fw-cat { font-family: var(--fh); font-size: clamp(14px, 1.15vw, 17px); line-height: 1.35; letter-spacing: -.04em; opacity: .8; }
.fw-tx { display: grid; gap: 6px; }
.fw-t { font-weight: 700; font-size: clamp(18px, 1.6vw, 23px); line-height: 1.25; letter-spacing: -.02em; }
.fw-d { font-size: 15px; line-height: 1.5; opacity: .72; max-width: 48ch; }
.fw-lg { display: flex; align-items: center; justify-content: flex-end; gap: 18px; opacity: 0; transform: translateX(8px); transition: opacity .45s, transform .55s var(--ease); }
.fw-lg img { height: calc(var(--h) * .9px); width: auto; max-width: 120px; object-fit: contain; }
.fw-lg .wm.sat, .wk-lg .wm.sat { font: italic 400 19px/1 Georgia, serif; letter-spacing: 0; text-align: center; }
@media (hover: hover) and (min-width: 761px) {
  .fw-row:hover, .fw-row:focus-visible { padding-block: 44px; border-radius: 8px; color: var(--ink); border-color: transparent; }
  .fw-list li:hover + li .fw-row { border-top-color: transparent; }
  .fw-row:hover::before, .fw-row:focus-visible::before { opacity: 1; }
  .fw-row:hover .fw-lg, .fw-row:focus-visible .fw-lg { opacity: 1; transform: none; }
  .fw-row:hover .fw-cat, .fw-row:hover .fw-d { opacity: 1; }
}
.fw-follow { position: fixed; left: 0; top: 0; z-index: 90; width: 220px; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; pointer-events: none; opacity: 0; scale: .85; transition: opacity .35s, scale .45s var(--ease); box-shadow: 0 24px 60px rgba(0, 0, 0, .4); }
.fw-follow.on { opacity: 1; scale: 1.1; }
.fw-follow img { width: 100%; height: 100%; object-fit: cover; }
.fw-dots { display: none; }
@media (max-width: 760px) {
  .fw-list { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--g) * -1); padding: 0 var(--g) 6px; scroll-padding: 0 var(--g); scrollbar-width: none; }
  .fw-list::-webkit-scrollbar { display: none; }
  .fw-list li { flex: 0 0 84%; scroll-snap-align: start; display: flex; }
  .fw-row { grid-template-columns: 1fr; align-content: start; gap: 12px; padding: 12px 12px 22px; border: 0 !important; border-radius: 10px; color: var(--ink); background: linear-gradient(to bottom, #FFFBD6 0%, #E6DEF8 60%, #D4CBF2 100%); width: 100%; }
  .fw-ph { display: block; aspect-ratio: 4 / 3; border-radius: 6px; overflow: hidden; }
  .fw-ph img { width: 100%; height: 100%; object-fit: cover; }
  .fw-cat, .fw-tx, .fw-lg { padding: 0 6px; }
  .fw-d { opacity: .8; font-size: 14px; }
  .fw-lg { opacity: 1; transform: none; justify-content: flex-start; margin-top: 4px; }
  .fw-lg img { height: calc(var(--h) * .7px); }
  .fw-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
  .fw-dots li { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 251, 214, .3); transition: background-color .3s, width .3s; }
  .fw-dots li.on { width: 18px; border-radius: 3px; background: var(--pale); }
}

/* testimonials: colleagues orbit a sun (desktop); the swipe list stays on phones */
.q-cap { text-align: center; color: #7A68C9; font-size: clamp(15px, 1.2vw, 18px); margin: calc(-1 * clamp(20px, 3vw, 48px)) auto 0; padding: 0 var(--g); }
.orb { position: relative; height: 660px; max-width: 1240px; margin: 0 auto; }
.orb-glow { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .7; pointer-events: none; }
.orb-glow.a { width: 42%; aspect-ratio: 1; left: 8%; top: 14%; background: var(--lil); }
.orb-glow.b { width: 36%; aspect-ratio: 1; right: 8%; top: 22%; background: #F6E7A6; }
.orb-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.orb-rings ellipse { fill: none; stroke: rgba(31, 32, 16, .16); stroke-width: 1; }
.orb-rings ellipse.dash { stroke-dasharray: 3 6; stroke: rgba(31, 32, 16, .12); }
.orb-list { position: absolute; inset: 0; pointer-events: none; }
.ob { position: absolute; left: 0; top: 0; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 0; border: 0; background: none; will-change: transform; transform-origin: 75px 32px; pointer-events: auto; }
.ob img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(255, 255, 255, .85); box-shadow: 0 10px 30px rgba(31, 32, 16, .22); transition: transform .4s var(--ease); }
.ob span { font-size: 13px; font-weight: 500; white-space: nowrap; padding: 7px 13px; border-radius: 99px; background: rgba(255, 255, 255, .5); border: 1px solid rgba(255, 255, 255, .8); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 6px 20px rgba(31, 32, 16, .08); transition: background-color .3s; }
.ob:hover img, .ob:focus-visible img { transform: scale(1.08); }
.ob:hover span, .ob:focus-visible span { background: rgba(255, 255, 255, .92); }
.orb-core { position: absolute; left: 50%; top: 50%; z-index: 60; width: 300px; height: 300px; transform: translate(-50%, -50%); display: grid; place-items: center; transition: width .6s var(--ease), height .6s var(--ease); }
.orb-sun { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 46% 34%, #FFF9CF 0%, #FBEBA4 36%, #F1D27E 68%, rgba(227, 177, 96, .9) 100%); box-shadow: 0 0 90px 20px rgba(241, 210, 126, .45); -webkit-mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, .35) 100%); mask-image: linear-gradient(to bottom, #000 45%, rgba(0, 0, 0, .35) 100%); filter: blur(1px); transition: border-radius .6s var(--ease), background .6s, filter .6s; }
.orb-sun::after { content: ""; position: absolute; left: 6%; right: 6%; bottom: -14%; height: 46%; border-radius: 50%; background: #F1D27E; filter: blur(34px); opacity: .7; }
.orb .ai { position: relative; z-index: 2; width: min(560px, 86vw); margin: 0; }
.orb .ai-bar { box-shadow: 0 18px 40px -20px rgba(31, 32, 16, .45); }
.orb.open .orb-core { width: min(640px, 92%); height: auto; }
.orb.open .orb-sun { border-radius: 10px; inset: -24px; background: #FFFBD6; mask-image: none; -webkit-mask-image: none; filter: none; box-shadow: 0 30px 80px rgba(31, 32, 16, .18); }
.orb.open .orb-sun::after { display: none; }
.orb .ai-out { background: none; border: 0; padding: 4px 4px 0; margin-top: 14px; border-radius: 0; }
.orb .ai-chip { cursor: pointer; background: rgba(255, 255, 255, .6); }
.orb .ai-chip:hover { background: var(--lil); border-color: var(--lil); }
.ai-x { display: none; }
.orb.open .ai-x { display: block; margin: 18px 0 0 auto; border: 0; background: none; padding: 4px 0; font-size: 13px; color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; }
.orb.open .ob { opacity: .25 !important; }
@media (min-width: 761px) { .quotes > .q-list, .quotes > .q-nav { display: none !important; } }
@media (max-width: 760px) {
  .q-cap { margin: -18px 0 22px; text-align: left; padding: 0; }
  .orb { height: auto; max-width: 600px; margin: 0 0 28px; }
  .orb-glow, .orb-rings, .orb-list, .orb-sun { display: none; }
  .orb-core { position: static; transform: none; width: auto; height: auto; display: block; }
  .orb .ai { width: 100%; }
  .orb.open .orb-core { width: auto; }
}
/* the quote card: small, light yellow, glass behind */
.qm { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; background: rgba(31, 32, 16, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; transition: opacity .35s; }
.qm[hidden] { display: none; }
.qm.open { opacity: 1; }
.qm-c { position: relative; width: min(480px, 100%); padding: 30px; border-radius: 10px; background: rgba(255, 251, 214, .88); border: 1px solid rgba(255, 255, 255, .9); -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4); box-shadow: 0 30px 80px rgba(31, 32, 16, .25); transform: translateY(14px); transition: transform .45s var(--ease); }
.qm.open .qm-c { transform: none; }
.qm-k { font: 400 17px/1.25 var(--fh); letter-spacing: -.04em; margin: 0 0 14px; padding-right: 60px; }
.qm blockquote { margin: 0; }
.qm blockquote p { font-size: 15px; line-height: 1.65; margin: 0 0 20px; }
.qm mark { color: inherit; font-weight: 600; background: linear-gradient(transparent 58%, rgba(212, 203, 242, .95) 58%); }
.qm-who { display: flex; align-items: center; gap: 12px; font-size: 13px; }
.qm-who img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.qm-who p { margin: 0; color: var(--ink2); }
.qm-who b { display: block; font-weight: 600; font-size: 14px; color: var(--ink); }
.qm-nav { display: flex; justify-content: space-between; margin-top: 22px; }
.qm-nav button, .qm-x { border: 0; background: none; padding: 4px 0; font-size: 13px; color: var(--ink2); text-decoration: underline; text-underline-offset: 3px; }
.qm-x { position: absolute; top: 18px; right: 22px; }
.qc blockquote p::before, .qc blockquote p::after { content: none; }

/* footer: all on the left */
.foot-top { display: block; }
.foot h2 { font-size: clamp(30px, 4vw, 56px); margin-bottom: 14px; }
.foot-l > p { font-size: clamp(16px, 1.3vw, 19px); max-width: none; margin-bottom: 6px; }
.foot-l > p.foot-hire { font-weight: 700; color: var(--mus); margin-top: 18px; }
.foot-l > p.foot-hire b { font-weight: 700; }
.foot-links { margin: 24px 0 8px; }
.foot-links a { color: var(--cream); font-size: clamp(16px, 1.5vw, 20px); border-bottom-color: rgba(255, 253, 243, .2); }
.foot-links a:hover { color: var(--cream); border-color: var(--cream); }
.foot-line { justify-content: flex-start; gap: 10px 32px; }
.foot-top-btn { margin-left: auto; }

/* about */
.ab-hi { font-size: clamp(24px, 2.9vw, 44px); }
.ab-big { max-width: 26ch; }
.ab-sec > p:not(.ab-big):not(.ab-say) { max-width: 66ch; }
.ab-how { margin-top: 22px !important; }
.ab-how .hl, .ab-sec p.ab-how { font-weight: 600; }
.ab-how .hl { background: linear-gradient(transparent 55%, rgba(233, 213, 119, .85) 55%); padding: 0 .15em; }
.ab-k { font-size: 15.5px; color: var(--olive); margin: 0 0 12px !important; }
.ab-taste .ab-big { max-width: 22ch; }
.fig { position: relative; border-bottom: 1px dotted currentColor; cursor: help; outline-offset: 2px; }
.fig sup { font-size: .7em; color: var(--olive); margin-left: 1px; }
.fig-n { position: absolute; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: min(300px, 80vw); transform: translate(-50%, 6px); padding: 10px 14px; border-radius: 8px; background: rgba(255, 253, 243, .82); border: 1px solid var(--line); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 14px 34px -14px rgba(31, 32, 16, .35); font-size: 13px; line-height: 1.45; text-align: left; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s, transform .3s var(--ease), visibility .3s; z-index: 5; }
.fig:hover .fig-n, .fig:focus .fig-n { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.ab-q { margin: 30px 0 0; max-width: 34ch !important; }
.ab-q p { font-family: var(--fh); letter-spacing: -.04em; font-size: clamp(17px, 1.6vw, 24px); line-height: 1.35; margin: 0; color: #7A68C9; }
@media (max-width: 760px) {
  .ab-story { padding-top: 110px; padding-bottom: 30px; }
  .ab-sec { min-height: 0; padding: 7vh 0; }
  .ab-hero { min-height: 56vh; }
}
/* skills: a bento */
.bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.tile { border-radius: 10px; padding: 26px 26px 24px; background: rgba(255, 255, 255, .55); border: 1px solid var(--line); }
.tile.big { min-height: 250px; display: flex; flex-direction: column; }
.tile.big .sk-g { font-size: 52px; line-height: 1; color: var(--olive); margin-bottom: auto; padding-bottom: 16px; }
.tile.big h3 { font-family: var(--fh); font-weight: 400; font-size: clamp(22px, 2.2vw, 30px); letter-spacing: -.05em; margin: 0 0 14px; }
.tile.big ul { font-size: 15px; color: rgba(31, 32, 16, .78); line-height: 1.75; }
.tile.wide { grid-column: 1 / -1; display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: baseline; padding: 22px 26px; }
.tile h3.k { font-family: var(--fb); font-weight: 700; font-size: 15px; letter-spacing: -.01em; margin: 0; }
.inl { display: flex; flex-wrap: wrap; font-size: 15px; line-height: 1.8; }
.inl li { white-space: nowrap; }
.inl li::before { content: "·"; margin: 0 9px; color: rgba(31, 32, 16, .4); }
.inl li:first-child::before { margin-left: 0; }
.soft { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.soft .tile { padding: 20px 22px; }
.soft h3.k { margin-bottom: 10px; }
.soft .tile.w2 { grid-column: span 2; }
.tile.big.c1, .tile.big.c3 { background: linear-gradient(160deg, #EFEAFC, rgba(255, 255, 255, .55) 70%); }
.tile.big.c2 { background: linear-gradient(160deg, #FBF3D2, rgba(255, 255, 255, .55) 70%); }
@media (max-width: 760px) {
  .bento { grid-template-columns: 1fr; gap: 10px; }
  .tile.big { min-height: 0; padding: 20px; display: grid; grid-template-columns: 48px 1fr; column-gap: 10px; }
  .tile.big .sk-g { font-size: 36px; padding: 0; margin: 0; grid-row: span 2; }
  .tile.big h3 { font-size: 20px; margin-bottom: 6px; }
  .tile.big ul { font-size: 14px; line-height: 1.6; }
  .tile.big ul li { display: inline; }
  .tile.big ul li + li::before { content: "·"; margin: 0 7px; color: rgba(31, 32, 16, .4); }
  .tile.wide { grid-template-columns: 1fr; gap: 8px; padding: 18px 20px; }
  .soft { grid-template-columns: 1fr; gap: 10px; }
  .soft .tile.w2 { grid-column: auto; }
  .inl { font-size: 14px; line-height: 1.7; }
}

/* projects page */
.wk-head { display: block; }
.wk-head h1 { font-size: clamp(26px, 3.6vw, 56px); line-height: 1.22; max-width: 26ch; color: var(--ink); }
.pill { display: inline-block; width: 2.3em; height: 1.05em; border-radius: 99px; overflow: hidden; vertical-align: -.12em; margin: 0 .08em; background: #EEEBDD; }
.pill img, .pill video { width: 100%; height: 100%; object-fit: cover; }
.wk-list { gap: 0; max-width: 1240px; }
.wk, .wk:nth-child(even) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(24px, 4vw, 64px); align-items: center; padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--line); }
.wk:last-child { border-bottom: 1px solid var(--line); }
.wk-m { display: block; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #EEEBDD; }
.wk-m img, .wk-m video { width: 100%; height: 100%; object-fit: cover; background-size: cover; background-position: center; transition: transform .9s var(--ease); }
.wk:hover .wk-m img, .wk:hover .wk-m video { transform: scale(1.03); }
.wk-tx { display: grid; grid-template-columns: minmax(0, 13ch) 1px minmax(0, 1fr); flex-direction: initial; gap: 0 clamp(18px, 2.4vw, 34px); align-items: start; }
.wk-tx::before { content: ""; grid-column: 2; grid-row: 1; width: 1px; height: 100%; background: var(--line); }
.wk-cat { grid-column: 1; grid-row: 1; font-family: var(--fh); font-size: clamp(15px, 1.4vw, 21px); line-height: 1.3; letter-spacing: -.05em; margin: 0; }
.wk-r { grid-column: 3; grid-row: 1; }
.wk-tx h2 { font: 700 clamp(18px, 1.5vw, 22px)/1.3 var(--fb); letter-spacing: -.02em; margin: 0 0 10px; }
.wk-tx h2 a { text-decoration: none; }
.wk-hl { background: linear-gradient(transparent 55%, rgba(233, 213, 119, .8) 55%); padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.wk-solve { color: var(--ink2); font-size: clamp(16px, 1.2vw, 18px); line-height: 1.55; margin: 0 0 20px; max-width: 46ch; }
.wk-lg { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.wk-lg img { height: calc(var(--h) * 1px); width: auto; max-width: 140px; object-fit: contain; }
.js .wk[data-reveal] .wk-tx > * { opacity: 1; transform: none; }
.js .wk[data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.js .wk[data-reveal].in { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .wk, .wk:nth-child(even) { grid-template-columns: 1fr; gap: 18px; padding: 26px 0; }
  .wk-tx { grid-template-columns: minmax(0, 11ch) 1px minmax(0, 1fr); gap: 0 16px; }
  .wk-lg img { height: calc(var(--h) * .8px); }
}

/* more work: bigger titles */
.mw-t { font-size: clamp(26px, 3.6vw, 50px); color: var(--ink); }
.mw-c { font-size: 15px; }

/* glass on the mobile header */
@media (max-width: 860px) {
  .bar { mix-blend-mode: normal; color: var(--ink); background: rgba(255, 253, 243, .62); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid rgba(31, 32, 16, .08); padding-top: 12px; padding-bottom: 12px; align-items: center; }
  .bar-logo img { filter: none; }
  .menu-open .bar { background: rgba(255, 253, 243, .9); }
}

/* KartaCam: plain cream, no paper grid or yellow fades */
.kc-grid, .kc-paper { background: var(--cream) !important; background-image: none !important; }
.kc-outdoor, .kc-out { background: var(--cream); }

/* logo grid: no overlap on narrow phones */
@media (max-width: 460px) {
  .rg-lg { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .rg-lg li, .rg-lg .lp-lg { min-width: 0; }
  .rg-lg img { max-width: 100%; height: auto; max-height: 40px; object-fit: contain; }
}
.orb.open .orb-core { z-index: 150; width: min(540px, 90%); }
.orb .ai-tx p { font-size: 15px; line-height: 1.6; }
.orb .ai-chip { font-size: 13px; }
.q-cap { max-width: var(--max); text-align: left; padding: 0 var(--g); }
@media (max-width: 760px) { .q-cap { padding: 0; } }
.tile.big { min-height: 0; }
.tile.big .sk-g { margin-bottom: 14px; padding-bottom: 0; }
.wk-tx { grid-template-columns: auto 1px minmax(0, 1fr); }
.wk-cat { white-space: nowrap; font-size: clamp(13px, 1.15vw, 17px); }
@media (max-width: 760px) {
  .wk-tx { grid-template-columns: 1fr; gap: 10px; }
  .wk-tx::before { display: none; }
  .wk-cat { white-space: normal; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
  .wk-r { grid-column: 1; grid-row: 2; }
}
.wk-head h1 { max-width: none; } @media (max-width: 760px) { .wk-br { display: none; } }
.intro { overflow-x: clip; }
@media (max-width: 760px) { .intro-pt { width: 88%; margin: 0 auto; } }
@media (max-width: 640px) {
  .ab-hero { min-height: 0; padding: 96px 0 40px; }
  .ab-sec { padding-top: 48px; padding-bottom: 48px; }
}

/* ================= Round 19 ================= */
/* opening a project: the preloader's sun bursts from the click, and fades away on the new page */
.burst { position: fixed; left: 0; top: 0; z-index: 600; width: 280px; height: 280px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, #FFFBD6 0%, #F6DC80 45%, #F1D27E 72%, rgba(232, 190, 108, 0) 100%); transform: translate(-50%, -50%) scale(.1); transition: opacity .8s var(--ease); }
.burst.out { opacity: 0 !important; }
html.burst-in body::after { content: ""; position: fixed; inset: 0; z-index: 600; pointer-events: none; background: radial-gradient(circle, #F6DC80, #F1D27E 60%, #E8BE6C); animation: burstFade .9s var(--ease) .15s forwards; }
@keyframes burstFade { to { opacity: 0; visibility: hidden; } }
/* cursor: a flat lilac dot on the dark list and footer, a flat yellow one in the orbit */
.has-cur .cur.lil, .has-cur .cur.flat { mix-blend-mode: normal; }
.cur.lil .cur-dot { background: var(--lil); }
.cur.flat .cur-dot { background: #F2D45C; }

/* preloader: just the word, in black, on a soft purple aura */
.pre-enter, .pre-enter:hover, .pre-enter:focus-visible { width: 150px; height: 150px; background: radial-gradient(closest-side, rgba(196, 184, 240, .75), rgba(212, 203, 242, .35) 55%, rgba(212, 203, 242, 0)); color: var(--ink); font-size: 19px; font-weight: 600; box-shadow: none; }
.pre-enter::after { content: ""; position: absolute; inset: -40px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(170, 150, 235, .35), rgba(196, 184, 240, 0)); filter: blur(10px); transition: opacity .5s; opacity: .8; }
.pre-enter:hover::after, .pre-enter:focus-visible::after { opacity: 1; }

/* home portrait: a square star turning on its own centre, never clipped; only the photo fades out */
.intro-pt { aspect-ratio: 937 / 1406; -webkit-mask-image: none; mask-image: none; }
.intro-pt img.intro-me { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
.intro-pt img.intro-star { inset: auto; left: -8%; top: 40%; width: 116%; height: auto; aspect-ratio: 1; translate: 0 -50%; }

/* featured projects: heading at the "Hi I'm Richeen" size, the list edge to edge, shorter rows */
.fw > h2 { font-size: clamp(30px, 4.4vw, 64px); max-width: none; }
.fw-list { max-width: none; }
.fw-row { padding: 20px 22px; grid-template-columns: minmax(0, 260px) minmax(0, 1fr) 220px; }
@media (hover: hover) and (min-width: 761px) { .fw-row:hover, .fw-row:focus-visible { padding-block: 32px; } }
@media (min-width: 761px) { .fw-t { white-space: nowrap; } .fw-d { max-width: 70ch; } }

/* testimonials: grey caption; the orbit 30% bigger round a smaller sun, the bar tucked inside it */
.q-cap { color: var(--ink2); }
.orb { height: 860px; max-width: 1500px; }
.orb-core { width: 250px; height: 250px; }
.orb .ai { width: 222px; }
.orb .ai-bar { min-height: 42px; padding: 4px 4px 4px 14px; gap: 6px; }
.orb .ai-q { font-size: 13.5px; gap: 0; white-space: nowrap; }
.orb .ai-mag { display: none; }
.orb .ai-spark { width: 32px; height: 32px; }
.orb .ai-spark svg { width: 17px; height: 17px; }
.orb.open .ai { width: 100%; }
.orb.open .orb-sun { background: #FFFCE6; }
.ob { width: 220px; transform-origin: 110px 32px; }
.ob span { white-space: normal; text-align: center; font-size: 11.5px; line-height: 1.3; font-weight: 400; color: var(--ink2); padding: 6px 12px; border-radius: 12px; max-width: 220px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.ob span b { font-weight: 600; color: var(--ink); }
@media (max-width: 760px) { .orb .ai { width: 100%; } .orb .ai-q { white-space: normal; } }

/* footer: a softer, longer fade from the page into the footer; mustard only as a hint */
.to-foot { height: clamp(240px, 30vw, 440px); background: linear-gradient(to bottom, var(--cream) 0%, #F4EED9 20%, #F5EDD0 30%, #EEE7EC 42%, #DCD5EC 52%, #BEB8D2 62%, #9D9AA4 72%, #7A7A66 82%, #595C3E 91%, var(--foot) 100%); }
body[data-page="home"] .to-foot { background: linear-gradient(to bottom, var(--lil-t) 0%, #F4EED9 20%, #F5EDD0 30%, #EEE7EC 42%, #DCD5EC 52%, #BEB8D2 62%, #9D9AA4 72%, #7A7A66 82%, #595C3E 91%, var(--foot) 100%); }

/* project pages: the portrait's star (still) instead of the sun orbit; titles on one or two lines */
.kc-orb.kc-star { top: clamp(70px, 10vh, 120px); width: clamp(280px, 34vw, 520px); }
.kc-star img { width: 100%; height: 100%; object-fit: contain; opacity: .9; }
.kc-hero h1 { max-width: 36ch; }
.kc-hero h1 .ln { display: inline; }
.kc-hero h1 .ln + .ln::before { content: " "; }
.kc-hero h1 .ln > span { display: inline; animation: none; }
.kc-hero h1 { animation: kcRise 1s var(--ease) both; }
@media (max-width: 760px) { .kc-orb.kc-star { right: -24vw; top: 70px; width: 64vw; } }
/* more work: no label, titles 40% smaller, categories bigger and clearer */
.mw-t { font-size: clamp(18px, 2.2vw, 30px); }
.mw-c { font-family: var(--fh); font-size: clamp(14px, 1.2vw, 17px); letter-spacing: -.04em; color: var(--ink); opacity: 1; }

/* projects page: no orbit behind; four neat lines with wider pills; one column of text; highlight on hover */
.wkp .wk-bg { display: none; }
.wk-head h1 { font-size: clamp(26px, 4vw, 62px); line-height: 1.2; }
@media (min-width: 761px) { .wk-ln { display: block; white-space: nowrap; } }
.pill { width: 3.1em; height: 1.18em; vertical-align: -.18em; margin: 0 .12em; }
.wk-tx, .wk-tx { display: block; }
.wk-tx::before { display: none; }
.wk-cat { white-space: normal; font-size: clamp(17px, 1.5vw, 22px); margin: 0 0 10px; }
.wk-hl { background-size: 0 100%; background-repeat: no-repeat; transition: background-size .6s var(--ease); }
.wk:hover .wk-hl, .wk:focus-within .wk-hl { background-size: 100% 100%; }
@media (max-width: 760px) { .wk-cat { padding-bottom: 0; border: 0; } .wk-hl { background-size: 100% 100%; } }

/* about */
.ab-hi { font-size: clamp(34px, 4.6vw, 70px); }
.ab-big .ul { text-decoration: underline; text-decoration-thickness: .06em; text-underline-offset: .18em; text-decoration-color: rgba(31, 32, 16, .55); }
.ab-how .glow { font-weight: 600; }
.ab-taste .ab-big.ab-tq { max-width: 28ch; }
.ab-sec > p.ab-sub { font-family: var(--fh); font-size: clamp(17px, 1.6vw, 22px); letter-spacing: -.04em; line-height: 1.3; margin: 28px 0 12px; }
.ab-sec > p.ab-sub + p { margin-top: 0; }
.ab-taste .v-s + .v-s { margin-top: 14px; }
.ab-trend h2.ab-next { font-size: clamp(24px, 2.9vw, 44px); line-height: 1.2; letter-spacing: -.05em; margin: 0 0 18px; }
@media (min-width: 761px) and (max-width: 1200px) { .fw-row { grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 150px; gap: 22px; } .fw-t { font-size: clamp(15px, 1.55vw, 19px); } }

/* ================= Round 20 ================= */
/* ---------- one type scale for the whole site ----------
   xl     About hero
   h1     section headlines (Hi I'm Richeen, strategic brain, Featured projects, testimonials, footer)
   h2     long page-opening sentences (home hero, project titles)
   h3     statements and About headlines
   h4     headings inside a page section
   h5     card and list titles
   cat    project categories
   lede / body / card / small / meta   running text, largest to smallest */
:root {
  --t-xl: clamp(40px, 5.4vw, 80px);
  --t-h1: clamp(34px, 4.4vw, 64px);
  --t-h2: clamp(28px, 3.5vw, 52px);
  --t-h3: clamp(24px, 2.8vw, 42px);
  --t-h4: clamp(22px, 2vw, 30px);
  --t-h5: clamp(18px, 1.5vw, 22px);
  --t-cat: clamp(15px, 1.15vw, 17px);
  --t-lede: clamp(17px, 1.3vw, 19px);
  --t-body: 17px;
  --t-card: 15px;
  --t-small: 14px;
  --t-meta: 12px;
}
@media (max-width: 760px) {
  :root {
    --t-xl: clamp(32px, 9.4vw, 42px);
    --t-h1: clamp(28px, 8.4vw, 36px);
    --t-h2: clamp(26px, 7.6vw, 32px);
    --t-h3: clamp(22px, 6.4vw, 28px);
    --t-h4: 22px;
    --t-h5: 18px;
    --t-cat: 15px;
    --t-lede: 17px;
    --t-body: 16px;
    --t-card: 14.5px;
    --t-small: 13px;
    --t-meta: 11.5px;
  }
}
.ab-hero h1, .wk-head h1 { font-size: var(--t-xl); }
.intro h2, .brain h2, .fw > h2, .quotes h2, .ab-sec h2.ab-hi, .foot h2 { font-size: var(--t-h1); }
.hero-h, .kc-hero h1 { font-size: var(--t-h2); }
.ab-big, .ab-trend h2.ab-next, .kc-big { font-size: var(--t-h3); }
.kc h2, #expH, #lifeH, #skH, #toolsH, .tile h3, .mw-t { font-size: var(--t-h4); }
.fw-t, .wk h2, .kc .kc-cvp h3, .rg-l, .qm-k { font-size: var(--t-h5); }
.fw-cat, .wk-cat, .mw-c, .ab-sec > p.ab-sub, .kc-yr { font-size: var(--t-cat); }
.intro-lede, .intro-lede p, .kc-lede > p.v-s, .kc-lede > p.v-w, .wk-head p.wk-kinds { font-size: var(--t-lede); }
.intro-tx p, .ab-sec p:not(.ab-big):not(.ab-say):not(.ab-sub), .kc p, .kc-body, .kc-under p, .wk-solve, .q-cap, .qc blockquote p, .xp p, .foot-l > p { font-size: var(--t-body); }
.fw-d, .kc-cvp li > p:last-child, .ai-tx p, .orb .ai-tx p, .qm blockquote p, .tile li, .kc-roles li, .pj-tags li, .tr-key { font-size: var(--t-card); }
.pj-crumb, figcaption, .kc-cover figcaption, .xp-y, .qc-who span, .ai-chip, .orb .ai-chip { font-size: var(--t-small); }
.kc-ch, .kc-cvp-l, .qc-tag, .tr-src { font-size: var(--t-meta); }
.wk-head p.wk-kinds { font-size: var(--t-h5); }

/* the stars inside headlines stand as tall as the letters */
.intro h2 .g, .brain h2 .g, .fw > h2 .g, .quotes h2 .g { font-size: 1.45em; line-height: 0; vertical-align: -.14em; }

/* ---------- fixes from Round 19 that leaked onto phones ---------- */
@media (max-width: 760px) {
  .fw-row { grid-template-columns: 1fr; padding: 12px 12px 24px; }
  .orb { height: auto; max-width: 600px; }
  .orb-core { width: auto; height: auto; }
}

/* ---------- preloader: just the word, no aura; on phones the tagline sits bottom right ---------- */
.pre-enter, .pre-enter:hover, .pre-enter:focus-visible { background: none; box-shadow: none; }
.pre-enter::after { display: none; }
@media (max-width: 640px) {
  .pre-r { position: absolute; right: var(--g); bottom: max(28px, env(safe-area-inset-bottom)); }
  .pre-top { position: static; }
  .pre-top .pre-logo { position: absolute; left: var(--g); top: 20px; }
}

/* ---------- home ---------- */
/* a bigger star on phones, reaching past the shoulders */
@media (max-width: 760px) {
  .intro-pt { width: 74%; }
  .intro-pt img.intro-star { left: -32%; width: 164%; top: 36%; max-width: none; }
}
/* phones: flags 25% smaller */
@media (max-width: 760px) {
  .rch-m .lp-fl { font-size: 13.5px; gap: 9px; padding: 0 21px; }
  .rch-m .lp-fl img { width: 22.5px; height: 15px; }
}
/* the Grab wordmark, 20% smaller */
.lp-lg img[alt="Grab"] { max-width: 94px; max-height: 27px; }
/* more room above the featured projects */
.fw { padding-top: clamp(110px, 13vw, 190px); }
.brain { padding-bottom: clamp(40px, 6vw, 90px); }

/* featured projects on phones: light cream cards with the photo back on top */
@media (max-width: 760px) {
  .fw-row { background: #FFFDF3; gap: 0; }
  .fw-ph { display: block; margin-bottom: 18px; }
  .fw-cat { font-family: var(--fh); font-weight: 400; letter-spacing: -.04em; line-height: 1.3; opacity: 1; color: var(--ink); }
  .fw-tx { gap: 0; }
  .fw-tx::before { content: ""; display: block; width: 110px; height: 1px; background: rgba(31, 32, 16, .35); margin: 18px 0; }
  .fw-t { font-family: var(--fh); font-weight: 400; letter-spacing: -.04em; line-height: 1.3; white-space: normal; }
  .fw-d { margin-top: 10px; color: var(--ink2); opacity: 1; }
  .fw-lg { margin-top: 16px; }
}

/* testimonials on phones: the heading at the "strategic brain" size, no gap under the search bar */
@media (max-width: 760px) {
  .quotes #qH > span { display: inline; }
  .orb { margin-bottom: 24px; }
}

/* ---------- mobile menu: back to the full dark screen ---------- */
@media (max-width: 760px) {
  .menu-open .bar { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-bottom-color: transparent; color: var(--cream); }
  .menu-open .bar-logo img { filter: invert(1); }
}

/* ---------- footer fade: back to the version 19 gradient ---------- */
.to-foot { height: clamp(120px, 16vw, 240px); background: linear-gradient(to bottom, var(--cream) 0%, var(--mus) 38%, var(--lil) 66%, var(--foot) 100%); }
body[data-page="home"] .to-foot { background: linear-gradient(to bottom, var(--lil-t) 0%, var(--mus) 34%, var(--lil) 64%, var(--foot) 100%); }

/* ---------- about ---------- */
.ab-sec .ul { text-decoration: underline; text-decoration-thickness: .08em; text-underline-offset: .2em; text-decoration-color: rgba(31, 32, 16, .55); }
.ab-taste .ab-big { max-width: 22ch; margin-bottom: 18px; }
.tr-key .tr-ev::before { background: #7A68C9; } .tr-key .tr-fm::before { background: #A99BDF; } .tr-key .tr-bx::before { background: #CFC6EE; }

/* ---------- Projects page: the version 19 header; categories in DM Sans; no hover moves on touch ---------- */
.wk-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; padding-bottom: clamp(40px, 6vw, 80px); }
.wk-head h1 { line-height: 1; }
.wk-head p.wk-kinds { max-width: none; font-family: var(--fh); letter-spacing: -.05em; color: var(--ink); margin: 0; }
.wk-cat { font-family: var(--fb); font-weight: 500; letter-spacing: 0; }
@media (hover: none) {
  .wk:hover .wk-m img, .wk:hover .wk-m video, .wk-m:hover img, .wk-m:hover video { transform: none !important; }
}

/* ---------- project pages ---------- */
.kc-cover-s figure { width: 75%; margin: 0 auto; }
@media (max-width: 760px) {
  /* the three CVP cards swipe sideways */
  .kc-cvp { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--g) * -1); padding: 0 var(--g) 8px; scroll-padding: 0 var(--g); scrollbar-width: none; }
  .kc-cvp::-webkit-scrollbar { display: none; }
  .kc-cvp li { flex: 0 0 82%; scroll-snap-align: start; }
}
/* More work on phones and touch screens: tapping never shifts the thumbnail or title */
@media (max-width: 760px) {
  .mw-list a:hover .mw-ph, .mw-list a:focus-visible .mw-ph { transform: none; opacity: 1; }
  .mw-list a:hover .mw-t, .mw-list a:focus-visible .mw-t { transform: none; }
}
@media (max-width: 760px) { .brain h2 > span { white-space: normal; } }
@media (max-width: 760px) { #qH { padding-left: 0; padding-right: 0; } }

/* home portrait: a soft lilac glow behind the photo; on desktop the star is 30% bigger and never clipped (text stays above it) */
.intro-pt { isolation: isolate; }
.intro-pt::before { content: ""; position: absolute; z-index: 1; left: 4%; right: 4%; top: 4%; bottom: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(150, 125, 235, .5), rgba(170, 150, 240, .18) 60%, rgba(196, 184, 240, 0)); filter: blur(24px); pointer-events: none; }
.intro-pt img.intro-me { z-index: 2; }
@media (min-width: 901px) {
  .intro { overflow-x: visible; }
  .intro-tx { position: relative; z-index: 1; }
  /* 30% bigger where the screen allows; on narrower desktops it grows only as far as the free space between the text and the window edge, centred in it */
  .intro { --col: calc((min(100vw, 1440px) - 2 * var(--g) - clamp(32px, 6vw, 96px)) / 2); --txr: calc(max(0px, (100vw - 1440px) / 2) + var(--g) + var(--col)); }
  .intro-pt img.intro-star { --sw: min(130%, calc((100vw - 42px - var(--txr)) / .985)); width: var(--sw); left: calc(50% - var(--sw) / 2); translate: calc((100vw - 18px - var(--txr)) / 2 - clamp(32px, 6vw, 96px) - var(--col) / 2) -50%; max-width: none; }
}

/* footer: a flat #1F2010 ground (the fade above now lands on it too), and the sun's glow 15% softer */
:root { --foot: #1F2010; }
.foot { background: #1F2010; }
.foot-sun { box-shadow: 0 0 140px 20px rgba(251, 235, 164, .38); }

/* project pages: the dark statement cards' section title ("The challenge", "The direction"…) twice as big */
.kc-state .kc-ch { font-size: calc(var(--t-meta) * 2); }
/* "More work": the category on the right in DM Sans */
.mw-c { font-family: var(--fb); letter-spacing: 0; }

/* KartaCam street shoot: even rows instead of a masonry with holes (4 photos = 2 + 2, 5 photos = 2 + 3) */
.kc-sec[aria-label="Photos from the street shoot"] .kc-gal { display: grid; columns: auto; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: auto; gap: clamp(10px, 1.4vw, 18px); }
.kc-sec[aria-label="Photos from the street shoot"] .kc-gal figure { grid-column: span 2; grid-row: auto; margin: 0; aspect-ratio: 3 / 2; }
.kc-sec[aria-label="Photos from the street shoot"] .kc-gal img { width: 100%; height: 100%; object-fit: cover; }
.kc-sec[aria-label="Photos from the street shoot"] .kc-gal:has(> figure:nth-child(4):last-child) figure,
.kc-sec[aria-label="Photos from the street shoot"] .kc-gal:has(> figure:nth-child(5):last-child) figure:nth-child(-n+2) { grid-column: span 3; }
@media (max-width: 860px) {
  .kc-sec[aria-label="Photos from the street shoot"] .kc-gal { grid-template-columns: 1fr 1fr; }
  .kc-sec[aria-label="Photos from the street shoot"] .kc-gal figure,
  .kc-sec[aria-label="Photos from the street shoot"] .kc-gal:has(> figure:nth-child(4):last-child) figure,
  .kc-sec[aria-label="Photos from the street shoot"] .kc-gal:has(> figure:nth-child(5):last-child) figure:nth-child(-n+2) { grid-column: span 1; }
  .kc-sec[aria-label="Photos from the street shoot"] .kc-gal figure:last-child:nth-child(odd) { grid-column: span 2; }
}

/* Round 21: the portrait star turns 20% faster (90s → 75s) and, on phones, is 30% bigger too (164% → 213%, same centre) */
.intro-star { animation-duration: 75s; }
@media (max-width: 760px) { .intro-pt img.intro-star { left: -56.5%; width: 213%; } }

/* SCE + PUB: the header is a 2 × 2 collage of the four looping clips instead of a single photo */
.kc-collage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(6px, .8vw, 12px); }
.kc-cover .kc-collage video { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; background: #e8e3cf; }
.kc-yt.kc-collage { background: none; border-radius: 6px; overflow: visible; }
.kc-yt.kc-collage .kc-yt-b { left: 50%; top: 50%; bottom: auto; translate: -50% -50%; white-space: nowrap; box-shadow: 0 6px 24px rgba(31, 32, 16, .25); transition: scale .4s var(--ease); }
.kc-yt.kc-collage:hover .kc-yt-b { scale: 1.04; }
@media (max-width: 560px) { .kc-yt.kc-collage .kc-yt-b { font-size: 13px; padding: 5px 14px 5px 5px; gap: 8px; } .kc-yt.kc-collage .kc-yt-b .kc-play { width: 30px; height: 30px; font-size: 11px; } }
/* About: "Hi [photo] I'm Richeen 萧" stays on one line inside narrow phones */
@media (max-width: 760px) { .ab-sec h2.ab-hi { font-size: min(31.5px, 7.6vw); } }

/* Round 21b: on phones the testimonials orbit too. Hairline rings, the footer's sun, a black star; the card underneath holds the words */
.morb, .mcard { display: none; }
.quotes h2 .g { color: var(--ink); }
@media (max-width: 760px) {
  .quotes .orb, .quotes .q-list, .quotes .q-nav { display: none !important; }
  .morb { display: block; position: relative; width: 100%; max-width: 420px; aspect-ratio: 1; margin: 44px auto 8px; touch-action: pan-y; }
  .morb .orb-glow { filter: blur(40px); opacity: .55; }
  .morb .orb-glow.a { width: 52%; left: 2%; top: 12%; }
  .morb .orb-glow.b { width: 46%; right: 2%; top: 30%; }
  .morb-rings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
  .morb-rings circle { fill: none; stroke: rgba(31, 32, 16, .2); stroke-width: .5px; vector-effect: non-scaling-stroke; }
  .morb-rings circle.dash { stroke-dasharray: 1 5; stroke: rgba(31, 32, 16, .28); }
  .morb-sun { position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; background: var(--sun); box-shadow: 0 0 70px 14px rgba(251, 235, 164, .45); }
  .morb-ai { position: absolute; left: 50%; top: 50%; translate: -50% -50%; z-index: 3; display: flex; align-items: center; gap: 8px; padding: 5px 5px 5px 13px; border: 1px solid rgba(31, 32, 16, .14); border-radius: 99px; background: rgba(255, 253, 243, .94); box-shadow: 0 14px 30px -18px rgba(31, 32, 16, .5); font: 500 13px/1.2 var(--fb); color: var(--ink); white-space: nowrap; cursor: pointer; }
  .morb-ai .sp { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ink); }
  .morb-ai svg { width: 15px; height: 15px; fill: var(--pale); }
  .morb.ai-on .morb-ai { background: var(--pale); }
  .mob { position: absolute; left: 0; top: 0; z-index: 2; padding: 0; border: 0; background: none; cursor: pointer; will-change: transform; -webkit-tap-highlight-color: transparent; }
  .mob img { display: block; width: var(--s, 46px); height: var(--s, 46px); border-radius: 50%; object-fit: cover; border: 2px solid rgba(255, 255, 255, .9); box-shadow: 0 8px 20px -6px rgba(31, 32, 16, .35); transition: scale .45s var(--ease), box-shadow .45s var(--ease), filter .45s; }
  .mob.in { --s: 38px; }
  .morb.has-pick .mob:not(.on) img { filter: saturate(.55) opacity(.82); }
  .mob.on { z-index: 4; }
  .mob.on img { scale: 1.32; box-shadow: 0 0 0 3px var(--cream), 0 0 0 6px #B9A9EE, 0 14px 28px -8px rgba(31, 32, 16, .45); filter: none; }
  .mob .kw { position: absolute; left: 50%; top: calc(100% + 12px); translate: -50% 0; padding: 3px 9px; border-radius: 99px; background: var(--ink); color: var(--pale); font-size: 11px; font-weight: 500; white-space: nowrap; opacity: 0; scale: .9; transition: opacity .3s, scale .3s var(--ease); pointer-events: none; }
  .mob.on .kw { opacity: 1; scale: 1; }
  .mcard { display: flex; flex-direction: column; position: relative; min-height: 318px; max-width: 420px; margin: 0 auto 28px; background: var(--pale); border: 1px solid rgba(31, 32, 16, .08); border-radius: 6px; padding: 22px 20px 18px; box-shadow: 0 24px 40px -32px rgba(31, 32, 16, .5); touch-action: pan-y; }
  .mcard::before { content: ""; position: absolute; left: 50%; top: -8px; width: 14px; height: 14px; translate: -50% 0; rotate: 45deg; background: var(--pale); border-left: 1px solid rgba(31, 32, 16, .08); border-top: 1px solid rgba(31, 32, 16, .08); }
  .mbody { flex: 1; transition: opacity .28s, translate .28s var(--ease); }
  .mbody.out { opacity: 0; translate: var(--dx, 0) 0; }
  .mbody .qtag { margin: 0 0 12px; font-family: var(--fh); font-size: 11px; letter-spacing: -.02em; text-transform: uppercase; color: var(--ink); }
  .mbody .qtx { margin: 0 0 18px; font-size: 16px; line-height: 1.55; }
  .mbody .qtx mark { color: inherit; font-weight: 600; background: linear-gradient(transparent 55%, rgba(233, 213, 119, .85) 55%); padding: 0 .1em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
  .mbody .qwho { display: flex; align-items: center; gap: 10px; }
  .mbody .qwho img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
  .mbody .qwho p { margin: 0; font-size: 14px; line-height: 1.3; }
  .mbody .qwho b { display: block; font-weight: 600; }
  .mbody .qwho span { color: var(--ink2); font-size: 13px; }
  .mbody .ai-lbl { margin: 0 0 10px; font-size: 12px; color: var(--ink2); display: flex; align-items: center; gap: 6px; }
  .mbody .ai-lbl::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #B9A9EE; }
  .mbody .m-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
  .mbody .m-chips button { padding: 5px 10px; border-radius: 99px; border: 1px solid rgba(31, 32, 16, .18); background: var(--cream); font: 12px var(--fb); color: var(--ink); cursor: pointer; }
  .mnav { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; padding-top: 14px; border-top: 1px solid rgba(31, 32, 16, .1); }
  .mnav button { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(31, 32, 16, .2); background: transparent; color: var(--ink); cursor: pointer; font-size: 16px; }
  .mnav button:active { background: var(--ink); color: var(--pale); }
  .mdots { display: flex; gap: 6px; }
  .mdots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(31, 32, 16, .2); transition: width .3s var(--ease), background .3s; }
  .mdots i.on { width: 18px; border-radius: 3px; background: var(--ink); }
}
@media (prefers-reduced-motion: reduce) { .mbody, .mob img { transition: none; } }

/* Round 22: phones. Featured cards play the project's loop; the portrait star 20% smaller (213% → 170%, same centre) */
@media (max-width: 760px) {
  .fw-ph video, .fw-ph img { display: block; width: 100%; height: 100%; object-fit: cover; background-size: cover; }
  .intro-pt img.intro-star { left: -35%; width: 170%; }
}

/* KartaCam "where the photos went": a caption over the bottom of each photo */
.kc-use-f { position: relative; margin: 0; border-radius: 14px; overflow: hidden; }
.kc-use-f img { display: block; border-radius: 0; }
.kc-use-f figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 14px; background: linear-gradient(to top, rgba(31, 32, 16, .78), rgba(31, 32, 16, 0)); color: #FFFDF3; font-family: var(--fb); font-size: clamp(13px, 1.1vw, 15px); font-weight: 500; line-height: 1.3; }
@media (max-width: 640px) { .kc-use-f figcaption { padding: 28px 10px 10px; font-size: 12.5px; } }

/* home: more breathing room under the photo wall */
.brain { padding-bottom: clamp(80px, 10vw, 160px); }

/* About: the two travelling gradient blobs, richer and more visible */
#rings .blob { opacity: 1; filter: blur(34px); } /* Round 24: 20% less saturated than the 1.25 boost */
#rings .blob.y { background: radial-gradient(circle, #F2CF4E 0%, #EFD36A 55%, rgba(239, 211, 106, .6) 100%); }
#rings .blob.p { background: radial-gradient(circle, #A996EE 0%, #B9A9F0 55%, rgba(185, 169, 240, .6) 100%); }

/* About: the partner and brand logos 10% smaller */
.rg-lg .lp-lg img, .rg-lg .lp-lg .wm { scale: .9; }

/* KartaCam street shoot: Scene 1 slides in one row, Scene 2 in two rows */
.kc-shoot li { --sw: min(46%, 600px); }
.kc-shoot img { aspect-ratio: 3 / 2; object-fit: cover; height: auto; border-radius: 14px; }
.kc-shoot.kc-2r ul { display: grid; grid-template-rows: repeat(2, auto); grid-auto-flow: column; grid-auto-columns: min(46%, 600px); }
.kc-shoot.kc-2r li { width: auto; }
@media (max-width: 860px) { .kc-shoot li { --sw: 84%; } .kc-shoot.kc-2r ul { grid-auto-columns: 84%; } }

/* "More work": the title and the category both 15% smaller */
.mw-list .mw-t { font-size: calc(var(--t-h4) * .85); }
.mw-list .mw-c { font-size: calc(var(--t-cat) * .85); }

/* ================= Round 23 ================= */
/* preloader: all of its words in Krona, small caps (Krona has no small-caps glyphs, so the browser scales its capitals) */
.pre-yr, .pre-tag, .pre-en { font-family: var(--fh); font-variant-caps: all-small-caps; font-synthesis: small-caps; font-weight: 400; letter-spacing: .04em; }
.pre-tag { font-size: clamp(14px, 1.1vw, 16px); }
.pre-en { font-size: 1.08em; }

/* hero sun: it starts rising the moment Enter is pressed (not after the preloader has faded), turns from solid to gradient sooner, and its gradient drifts from the start */
html.pre:has(#pre.out) .hero-sun, html.pre:has(#pre.out) .hero-sun::after { animation-play-state: running; }
.hero-sun::after { animation-duration: 3.5s; }
.hero-sun::before { animation: sunDrift 12s ease-in-out infinite; }
@keyframes sunDrift { 0%, 100% { transform: scale(1) rotate(0deg); } 50% { transform: scale(1.06) rotate(180deg); } }
@media (prefers-reduced-motion: reduce) { .hero-sun::before { animation: none; } }

/* bio: "Grab" and "GrabMaps" explain themselves on hover, focus or tap */
.tip { position: relative; display: inline; padding: 0; margin: 0; border: 0; background: none; font: inherit; color: inherit; cursor: help; text-decoration: underline dotted rgba(31, 32, 16, .45); text-decoration-thickness: 1.5px; text-underline-offset: .2em; }
.tip-b { position: absolute; z-index: 6; left: 50%; bottom: calc(100% + 10px); width: max-content; max-width: min(280px, 80vw); padding: 10px 14px; border-radius: 4px; background: var(--ink); color: var(--cream); font-size: 14px; font-weight: 400; line-height: 1.4; text-align: left; white-space: normal; box-shadow: 0 14px 30px -16px rgba(31, 32, 16, .6); opacity: 0; visibility: hidden; transform: translate(calc(-50% + var(--dx, 0px)), 6px); transition: opacity .2s, transform .2s, visibility 0s .2s; pointer-events: none; }
.tip-b::after { content: ""; position: absolute; left: calc(50% - var(--dx, 0px)); top: 100%; margin-left: -6px; border: 6px solid transparent; border-top-color: var(--ink); }
.tip:hover .tip-b, .tip:focus-visible .tip-b, .tip.open .tip-b { opacity: 1; visibility: visible; transform: translate(calc(-50% + var(--dx, 0px)), 0); transition: opacity .25s, transform .25s var(--ease); }
.tip:focus { outline: none; }
.tip:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; border-radius: 2px; }

/* the ◉ in "strategic brain" 20% smaller; the testimonials caption 30% bigger */
.brain h2 .g.g-o { font-size: 1.16em; }
.q-cap { font-size: calc(var(--t-body) * 1.3); }

/* paper grid, back on the process sections that asked for it */
.kc-grid.kc-pg { background-color: var(--cream) !important; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px) !important; background-size: 22px 22px !important; }

/* Tech in Asia: the quotes beside the GIFs in italics */
.ta-ex blockquote p:not(.ta-k) { font-style: italic; }

@media (max-width: 760px) {
  /* portrait star 10% smaller (170% → 153%, same centre) */
  .intro-pt img.intro-star { left: -26.5%; width: 153%; }
  /* logo rows 15% shorter */
  .rch-m .lp-b { padding-block: 5px; }
  .rch-m .lp-lg { height: 56px; }
  /* "with a creative heart ✹" stays on one line */
  .brain h2 { font-size: min(var(--t-h1), 6.5vw); }
  .brain h2 > span { white-space: nowrap; }

  /* project galleries become sideways sliders, two rows deep; photos keep their whole frame */
  .gs { display: block !important; columns: auto !important; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none; margin-inline: calc(-1 * var(--g)); padding-inline: var(--g); scroll-padding-inline: var(--g); }
  .gs::-webkit-scrollbar { display: none; }
  .gs-in { display: flex; flex-direction: column; gap: 8px; width: max-content; }
  .gs-r { display: flex; gap: 8px; }
  .gs-r > * { flex: none; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; scroll-snap-align: start; grid-column: auto !important; grid-row: auto !important; }
  .gs-r > :not(img, video) { aspect-ratio: auto !important; }
  .gs-r > * img, .gs-r > * video, .gs-r > img { display: block; height: var(--gh, 190px) !important; width: auto !important; max-width: none !important; object-fit: contain; }
  .gs-r > figure figcaption { width: 0; min-width: 100%; margin-top: 6px; font-size: 13px; }
}

/* ================= Round 24 ================= */
/* phones: the open menu signs off at the bottom left with the logo and two short lines */
.nav-foot { display: none; }
@media (max-width: 760px) {
  .menu-open .nav-foot { display: block; position: absolute; left: var(--g); right: calc(var(--g) + 76px); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); color: var(--cream); font-family: var(--fb); font-size: 13px; line-height: 1.45; letter-spacing: 0; }
  .nav-foot img { display: block; width: 104px; height: auto; margin-bottom: 14px; filter: invert(1); }
  .nav-foot p { margin: 0; opacity: .7; }
  .nav-foot p + p { margin-top: 4px; }
}

/* ================= Round 25 ================= */
.q-cap { font-size: calc(var(--t-body) * 1.17); } /* 10% smaller than 1.3 */

/* Home: the testimonials section curves down into Featured work */
body[data-page="home"] .fw::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: clamp(80px, 10vw, 180px); background: var(--lil-t); clip-path: ellipse(62% 100% at 50% 0); pointer-events: none; }

/* Home: the colour band fades in from the dark section and back out into the footer */
body[data-page="home"] .to-foot { height: clamp(260px, 30vw, 460px); background: linear-gradient(to bottom, #1F2010 0%, #2B2B1E 7%, #4A4840 14%, #7D7889 22%, #ADA6C6 29%, #CEC6EB 35%, #D9D1D6 40%, #E2D8B8 45%, #E9DCA2 50%, #ECDD98 55%, #E9DCA4 60%, #E1D7BE 65%, #D6CDE6 70%, #ABA4C2 77%, #77738A 84%, #46453A 91%, #2A2B1C 96%, #1F2010 100%); }

/* Footer: text sits lower, over the night sky, so the footer is shorter */
.foot-top { padding-top: clamp(24px, 3vw, 48px); }
.foot-scene { margin-top: clamp(-260px, -14vw, -60px); }

/* Footer: the sun glow fades out at the top edge instead of being cut off */
.foot::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: clamp(120px, 14vw, 220px); background: linear-gradient(to bottom, #1F2010 0%, rgba(31, 32, 16, .85) 30%, rgba(31, 32, 16, 0) 100%); pointer-events: none; }