/* Damodar Nagina · minimal portfolio
   A white, airy notebook: handwriting for the voice, a book serif for long reading,
   blue ink for the one thing that matters on each page. */

@font-face { font-family: 'Gaegu'; src: url(../fonts/gaegu-300.woff2) format('woff2'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Gaegu'; src: url(../fonts/gaegu-400.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Annie Use Your Telescope'; src: url(../fonts/annie.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url(../fonts/serif.woff2) format('woff2'); font-weight: 200 900; font-display: swap; }
@font-face { font-family: 'Source Serif 4'; src: url(../fonts/serif-italic.woff2) format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }

:root {
  --bg: #ffffff;
  --paper: #fbfaf6;
  --ink: #111111;
  --ink-2: #363636;
  --soft: #4a4a4a;
  --faint: #575757;
  --line: rgba(17, 17, 17, 0.12);
  --rule: rgba(96, 140, 190, 0.13);
  --accent: #c95c15;
  --accent-ink: #b0500f;
  --hi: #ffd6ad;
  --card: #fffefb;
  --pola: #fdfdfb;
  --ph: #ecebe6;
  --menu-sheet: #f6f3ec;
  --pencil: #6e6e6b;
  --pencil-2: #8f8f8b;
  --icon: #4a4a48;
  --err: #b3261e; --chip: transparent; --chip-pad: 0;
  --ink-rgb: 17, 17, 17;
  --bg-rgb: 255, 255, 255;
  --paper-rgb: 251, 250, 246;
  --hand: 'Gaegu', 'Annie Use Your Telescope', 'Segoe Print', 'Bradley Hand', cursive;
  --caps: 'Annie Use Your Telescope', 'Gaegu', 'Segoe Print', cursive;
  --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --gx: max(1rem, 5vw);
  --gl: max(var(--gx), env(safe-area-inset-left));
  --gr: max(var(--gx), env(safe-area-inset-right));
  color-scheme: light;
}


/* night: warm charcoal paper and soft chalk-white ink, never pure black or white */
:root[data-theme="dark"] {
  --bg: #1a1916;
  --paper: #1f1e1a;
  --ink: #ebe6da;
  --ink-2: #d6d0c3;
  --soft: #bdb7aa;
  --faint: #aaa497;
  --line: rgba(235, 230, 218, 0.14);
  --rule: rgba(140, 170, 210, 0.12);
  --accent: #ea8a4a;
  --accent-ink: #f09a5f;
  --hi: #5c3519;
  --card: #24231f;
  --pola: #e2ddd1;
  --ph: #2c2b26;
  --menu-sheet: #211f1b;
  --pencil: #a8a398;
  --pencil-2: #8e897e;
  --icon: #cfc9bc;
  --err: #ff9b8f; --chip: #e2ddd1; --chip-pad: .4rem .7rem;
  --ink-rgb: 235, 230, 218;
  --bg-rgb: 26, 25, 22;
  --paper-rgb: 31, 30, 26;
  color-scheme: dark;
}

@view-transition { navigation: auto; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; font-synthesis: none; scroll-padding-top: 7rem; scrollbar-gutter: stable; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--hand);
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
h1, h2, h3, h4 { font-weight: 400; }
ul, ol { padding: 0; list-style: none; }
::selection { background: rgba(201, 92, 21, 0.16); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 2px; }
html.is-locked { overflow: hidden; }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip {
  position: fixed; left: 1rem; top: 1rem; z-index: 100; padding: 0.6rem 1rem;
  background: var(--ink); color: var(--bg); font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.15em; text-transform: uppercase;
  transform: translateY(-220%); transition: transform 0.2s;
}
.skip:focus { transform: none; }
.fx { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; flex: none; }
.wrap { width: 100%; max-width: 84rem; margin-inline: auto; padding-inline: var(--gl) var(--gr); }

.label {
  font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 1rem; font-weight: 400; line-height: 1.4;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--soft);
}

/* links */
.u-link {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 1px;
  transition: background-size 0.45s var(--ease), color 0.2s;
}
.u-link:hover, .u-link:focus-visible { background-size: 100% 1px; color: var(--accent); }
.caps-link {
  display: inline-block; padding: 0.35em 0;
  font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--soft);
  transition: color 0.2s;
}
.caps-link:hover, .caps-link:focus-visible { color: var(--accent); }
.caps-link.is-primary {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 6px;
}

/* the one blue word in a title, underlined by hand */
.hand { font-style: normal; color: var(--accent); position: relative; white-space: nowrap; }
.hand-u {
  position: absolute; left: -2%; bottom: -0.06em; width: 104%; height: 0.24em; overflow: visible;
  fill: none; stroke: var(--accent); stroke-width: 2.6; stroke-linecap: round; vector-effect: non-scaling-stroke;
}
.hand-u path { stroke-dasharray: 1; stroke-dashoffset: 0; }
.js .hand-u path { animation: draw 1s var(--ease) 0.5s backwards; }
@keyframes draw { from { stroke-dashoffset: 1; } }

/* letters that wave a little on hover */
.lt { display: inline-block; white-space: nowrap; }
.ch { display: inline-block; }
:is(.hd-menu, .hd-play, .menu-close):is(:hover, :focus-visible) .ch { animation: wave 0.65s var(--ease) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes wave { 35% { transform: translateY(-0.14em) rotate(-4deg); } 70% { transform: translateY(0.03em); } }

/* pencil lines that gently "boil" */
@keyframes boil { 0% { filter: url(#boil-0); } 33% { filter: url(#boil-1); } 66% { filter: url(#boil-2); } }

/* ---------- header ---------- */
.hd {
  position: fixed; z-index: 40; inset: 0 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: start;
  padding: clamp(1rem, 3vw, 2.8rem) var(--gr) 0 var(--gl);
  pointer-events: none;
  transition: translate 0.55s var(--ease);
}
/* past the hero the header steps aside while you read down, and comes back as soon as you scroll up */
.hd-away .hd { translate: 0 -120%; }
.hd::before {
  content: ''; position: absolute; z-index: -1; inset: 0 0 -3rem;
  background: linear-gradient(var(--bg) 45%, rgba(var(--bg-rgb), 0));
  opacity: 0; transition: opacity 0.5s;
}
.is-scrolled .hd::before { opacity: 0.95; }
.hd > * { pointer-events: auto; }
.hd-logo { display: inline-flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.mark { width: clamp(2.3rem, 3.4vw, 3.2rem); height: auto; transition: transform 0.6s var(--spring); }
.hd-logo:hover .mark { transform: rotate(-6deg); }
.hd-word { font-family: var(--hand); font-size: clamp(0.95rem, 1.15vw, 1.1rem); line-height: 1; letter-spacing: 0.16em; text-align: center; }
.hd-word small { display: block; margin: 0.45em -0.5em 0 0; font-size: 0.75rem; letter-spacing: 0.5em; text-transform: uppercase; color: var(--soft); }
.hd-menu { justify-self: start; }
.hd-logo { justify-self: center; }
.hd-right { justify-self: end; display: flex; align-items: flex-start; gap: clamp(0.4rem, 1.6vw, 1.8rem); }
.hd-play { display: none; }
.hd-ext { font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.55em; vertical-align: super; margin-left: 0.2em; }
.hd-play:hover, .hd-play:focus-visible { color: var(--accent); }
@media (min-width: 768px) { .hd-play { display: inline-block; } .menu-play { display: none; } }
.hd-theme { display: grid; place-items: center; width: 2.8rem; height: 2.8rem; margin-top: -0.15rem; color: var(--ink); transition: color 0.2s, rotate 0.5s var(--spring); }
.hd-theme svg { width: 1.9rem; height: auto; }
.hd-theme:hover { color: var(--accent); rotate: -12deg; }
.hd-theme .th-sun { display: none; }
:root[data-theme="dark"] .hd-theme .th-sun { display: inline; }
:root[data-theme="dark"] .hd-theme .th-moon { display: none; }
.hd-sound { display: grid; place-items: center; width: 3.4rem; height: 3rem; margin-top: -0.3rem; color: var(--ink); border-radius: 50%; transition: color 0.2s, background 0.2s; }
.hd-sound svg { width: 2.9rem; height: auto; }
.hd-sound:hover { color: var(--accent); }
.hd-sound .snd-off, .hd-sound[aria-pressed='false'] .snd-on { display: none; }
.hd-sound[aria-pressed='false'] .snd-off { display: inline; }
.hd-sound[aria-pressed='true'] .snd-on { animation: boil 0.66s steps(1) infinite; }
.hd-menu, .hd-play, .menu-close {
  font-family: var(--hand); font-size: clamp(1.3rem, 1.9vw, 2.1rem); line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2em 0.3em 0.2em 0;
}

/* ---------- menu: a notebook page that slides in ---------- */
.menu { position: fixed; inset: 0; z-index: 60; }
.menu[hidden] { display: none; }
.menu-veil {
  position: absolute; inset: 0; background: rgba(var(--bg-rgb), 0.6);
  opacity: 0; transition: opacity 0.5s;
}
.menu-panel {
  --sheet: var(--menu-sheet);
  position: absolute; top: 0; left: 0; bottom: 0;
  width: 100vw; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: clamp(1rem, 3vw, 2.8rem) 1.5rem 1.4rem var(--gl);
  background-color: var(--sheet);
  background-image:
    url(../img/grain.webp),
    repeating-linear-gradient(180deg, transparent 0 calc(2.4rem - 1px), rgba(96, 140, 190, 0.28) calc(2.4rem - 1px) 2.4rem);
  background-size: 256px 256px, auto, auto;
  box-shadow: 18px 0 40px -20px rgba(0, 0, 0, 0.22);
  transform: translateX(-102%);
  transition: transform 0.7s var(--ease);
  container-type: inline-size;
}
.menu.is-open .menu-veil { opacity: 1; }
.menu.is-open .menu-panel { transform: none; }
.menu-close { align-self: flex-start; }
.menu-nav { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; }
.menu-nav { padding-block: 1.2rem; }
.menu-nav ul { display: flex; flex-direction: column; align-items: center; gap: clamp(0.2rem, 1.4vh, 1rem); }
.menu-nav li { opacity: 0; translate: 0 0.6em; transition: opacity 0.45s, translate 0.6s var(--ease); }
.menu.is-open .menu-nav li { opacity: 1; translate: 0; transition-delay: calc(var(--i) * 55ms + 0.18s); }
.menu-link {
  display: inline-block; position: relative; padding: 0.05em 0.15em;
  font-size: clamp(1.8rem, min(3vw, 5.2vh), 3.2rem); line-height: 1.15;
  transition: color 0.2s;
}
.menu-link:hover, .menu-link:focus-visible { color: var(--accent); animation: heartbeat 1.15s ease-in-out infinite; }
.menu-link[aria-current='page'] { color: var(--accent); }
.menu-ext { font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.42em; vertical-align: super; margin-left: 0.2em; }
@keyframes heartbeat { 0%, 100% { scale: 1; } 14% { scale: 1.08; } 28% { scale: 1; } 42% { scale: 1.05; } 70% { scale: 1; } }
@media (min-width: 768px) { .menu-panel { width: 52vw; } }
@media (min-width: 1024px) { .menu-panel { width: clamp(21rem, 27vw, 29rem); padding-right: 2rem; } }



/* ---------- polaroid ---------- */
.pola {
  --r: 3.5deg;
  position: relative; display: block; width: var(--pw, 18rem); margin: 0;
  padding: calc(var(--pw, 18rem) * 0.054) calc(var(--pw, 18rem) * 0.054) 0;
  background: var(--pola);
  rotate: var(--r);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 16px 30px -14px rgba(0, 0, 0, 0.34), 0 34px 60px -34px rgba(0, 0, 0, 0.25);
  container-type: inline-size;
  transition: rotate 0.6s var(--spring), translate 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.pola::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  /* a faint sheen on the paper frame only; the photo itself stays clear */
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.02));
}
.pola-photo {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.04; overflow: hidden;
  background: var(--ph); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
}
.pola-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
[data-pola] .pola-photo img { opacity: 0; transition: opacity 0.9s ease; }
[data-pola] .pola-photo img.on { opacity: 1; }
.pola-cap {
  display: block; height: 24cqi; padding: 4.5cqi 2cqi 0; overflow: hidden; white-space: nowrap;
  font-family: var(--hand); font-size: 9cqi; line-height: 1.1; color: #2e2e2e;
}
.pola-cap.is-typing::after { content: ''; display: inline-block; width: 1px; height: 0.9em; margin-left: 2px; background: currentColor; vertical-align: -0.1em; animation: caret 0.8s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.clip {
  /* a paperclip holding the photo */
  position: absolute; z-index: 2; left: 58%; top: -11cqi; width: 9cqi; height: 26cqi; rotate: 6deg;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 96'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%239aa0a6'/%3E%3Cstop offset='.45' stop-color='%23eef0f2'/%3E%3Cstop offset='1' stop-color='%238c9298'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg fill='none' stroke-linecap='round'%3E%3Cpath d='M22 26v44a6.5 6.5 0 0 1-13 0V14a10 10 0 0 1 20 0v62a13 13 0 0 1-26 0V30' stroke='%236f757b' stroke-width='3.6'/%3E%3Cpath d='M22 26v44a6.5 6.5 0 0 1-13 0V14a10 10 0 0 1 20 0v62a13 13 0 0 1-26 0V30' stroke='url(%23g)' stroke-width='2.4'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 1.2cqi 1cqi rgba(30, 30, 30, 0.28));
}
.pola[data-nudge], .js .pola-hero[data-nudge] { animation: nudge 0.55s var(--spring); }
@keyframes nudge { 0%, 100% { rotate: var(--r); } 25% { rotate: calc(var(--r) - 3deg); } 55% { rotate: calc(var(--r) + 2.3deg); } 80% { rotate: calc(var(--r) - 0.9deg); } }

/* ---------- home: hero ---------- */
.hero {
  --hl: clamp(2rem, 9vw, 3rem);
  --pw: min(64vw, 19rem);
  position: relative; isolation: isolate; min-height: 100svh; overflow: clip;
  padding: 7.5rem var(--gr) 4.5rem var(--gl);
}
.hero-paper {
  position: absolute; inset: 0; z-index: -2;
  background-color: var(--paper);
  background-image: url(../img/grain.webp), repeating-linear-gradient(180deg, transparent 0 calc(2.4rem - 1px), var(--rule) calc(2.4rem - 1px) 2.4rem);
  background-size: 256px 256px, auto;
  -webkit-mask-image: linear-gradient(#000 70%, transparent);
  mask-image: linear-gradient(#000 70%, transparent);
  opacity: calc(1 - var(--hp, 0) * 0.9);
}
.doodle { position: absolute; color: var(--pencil-2); opacity: 0.55; pointer-events: none; overflow: visible; }
.doodle-ladakh { left: 0; bottom: 0; width: 100%; height: clamp(9rem, 30vh, 20rem); opacity: 0.6; }
.doodle-ladakh .flow { stroke-dasharray: 60 22; animation: flow 9s linear infinite; }
.doodle-birds { left: 3vw; top: 34vh; width: clamp(3.4rem, 6vw, 5.4rem); height: auto; opacity: 0.75; }
@keyframes flow { to { stroke-dashoffset: -164; } }
.js .hero:not(.is-away) .doodle { animation: boil 0.66s steps(1) infinite; }
.doodle-me { position: static; grid-row: 6; justify-self: center; width: min(62vw, 15rem); height: auto; margin-top: 2rem; color: var(--pencil); opacity: 0.85; }
.doodle-me .me-hand { animation: sketching 2.6s ease-in-out infinite; transform-origin: 104px 126px; }
.doodle-me .me-head { animation: think 7s ease-in-out infinite; transform-origin: 74px 86px; }
.doodle-me .me-scribble { stroke-dasharray: 1; stroke-dashoffset: 1; animation: scribble 6s ease-in-out infinite; }
.doodle-me .me-steam { stroke-dasharray: 4 3; animation: flow 3s linear infinite; opacity: 0.7; }
.doodle-me .me-hit { pointer-events: all; cursor: pointer; }
/* Mindrolling Monastery, Dehradun: sits on the ground at the left, as tall as the little me (wide screens only) */
.mono { display: none; }
.doodle-mono { position: static; width: 100%; height: 100%; color: var(--pencil-2); opacity: 0.7; stroke-width: 1.1; }
.doodle-mono .far { opacity: 0.55; }
.mono .mo-hit { pointer-events: all; cursor: pointer; }
.mono-tag { position: absolute; left: calc(100% - 0.5rem); bottom: 10%; --t: -2deg; translate: -0.4rem 0; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, translate 0.3s ease; white-space: nowrap; }
.mono.is-above .mono-tag { left: 18%; bottom: calc(100% + 0.3rem); translate: 0 0.4rem; }
.mono-tag .scrap { padding: 1.35rem 0.9rem 0.6rem; gap: 0.15rem; }
.mono-tag .label { font-size: 0.72rem; }
.mono-tag .scrap-t { font-size: 1.05rem; color: var(--ink); }
.me-tag { display: none; }
@media (min-width: 768px) {
  /* a small tag over the little me at the desk */
  .me-tag { --ah: clamp(8rem, 21vh, 13rem); display: block; position: absolute; z-index: 3; right: calc(5vw + var(--ah) * 1.12); bottom: calc(max(6.6rem, 12vh) + var(--ah) * 0.5); --t: 2deg; opacity: 0; translate: 0 0.4rem; pointer-events: none; transition: opacity 0.25s ease, translate 0.3s ease; white-space: nowrap; }
  .me-tag .scrap { padding: 1.35rem 0.95rem 0.6rem; }
  .me-tag .scrap-t { font-size: 1.05rem; color: var(--ink); }
  .hero-grid:has(.me-hit:hover) .me-tag { opacity: 1; translate: 0 0; }
}
.mono:has(.mo-hit:hover) .mono-tag, .mono.is-on .mono-tag { opacity: 1; translate: 0 0; }
@media (min-width: 1024px) {
  /* smaller and further left, low on the shore; the script shrinks it further if it would touch anything */
  .mono { display: block; position: absolute; z-index: 2; left: 1.2vw; bottom: max(4.6rem, 8.5vh); height: var(--mh, clamp(5.5rem, 14vh, 9rem)); aspect-ratio: 340 / 166; max-width: 20vw; }
  .mono.is-hidden { display: none; }
}
@keyframes sketching { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(2px, -1px) rotate(-1.2deg); } 50% { transform: translate(4px, 1px) rotate(0.6deg); } 75% { transform: translate(1px, 2px) rotate(-0.6deg); } }
@keyframes think { 0%, 70%, 100% { rotate: 0deg; } 80%, 90% { rotate: 3deg; } }
@keyframes scribble { 0% { stroke-dashoffset: 1; opacity: 1; } 60% { stroke-dashoffset: 0; opacity: 1; } 85% { stroke-dashoffset: 0; opacity: 0; } 100% { stroke-dashoffset: 1; opacity: 0; } }
@media (min-width: 768px) {
  .doodle-birds { left: 2vw; top: 36vh; }
  .hero-grid { padding-bottom: clamp(13rem, 36vh, 22rem); }
  .doodle-me { position: absolute; right: 5vw; bottom: max(6.6rem, 12vh); width: auto; height: clamp(8rem, 21vh, 13rem); margin: 0; }
}

.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); }
.hero-grid > *, .hero-h > * { grid-column: 1; }
.hero-h { display: contents; }
.hl { display: block; font-size: var(--hl); line-height: 1.16; letter-spacing: 0.02em; }
.hl-line { display: block; width: fit-content; max-width: 100%; text-wrap: balance; }
.hl-a { grid-row: 1; }
/* the two lines read as one sentence, so they stay together */
.pola-hero { grid-row: 3; justify-self: center; margin: 2.4rem 0 2rem; }
.hl-b { grid-row: 2; }
.hero-note { grid-row: 4; margin-top: 1rem; max-width: 34rem; font-size: 1.2rem; line-height: 1.5; color: var(--ink-2); }
.hero-now { grid-row: 5; margin-top: 2.4rem; }
.pola-hero:hover { rotate: 1.4deg; translate: 0 -4px; }
.pola-hero button.pola-photo { cursor: pointer; }

.hero-now { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; }
.hero-now li { display: flex; align-items: center; gap: 0.6rem; }
/* experience: a number and a small label */
.now-n { font-size: 2rem; line-height: 1; color: var(--accent); }
.now-exp .label { font-size: 0.9rem; line-height: 1.25; color: var(--ink-2); }
/* availability: a status note with a live green dot, set apart by a dashed hand-drawn edge */
.now-open {
  padding: 0.4rem 0.95rem 0.35rem 0.8rem; border: 1.5px dashed rgba(var(--ink-rgb), 0.38);
  border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; background: rgba(var(--bg-rgb), 0.6);
  font-size: 1.1rem; line-height: 1.2; color: var(--ink-2);
}
.hero-dot {
  width: 0.5rem; height: 0.5rem; flex: none; border-radius: 50%; background: #2fa66a;
  animation: ping 2.6s ease-out infinite;
}
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(47, 166, 106, 0.45); } 70%, 100% { box-shadow: 0 0 0 0.55rem rgba(47, 166, 106, 0); } }

/* gentle entrance, then the hero drifts out of focus as you scroll */
.js .hl-line, .js .hero-note, .js .hero-now { animation: rise 1.1s var(--ease) backwards; animation-delay: calc(0.12s + var(--d, 0) * 0.11s); }
@keyframes rise { from { opacity: 0; filter: blur(6px); transform: translateY(0.35em); } }
.js .hero .hl, .js .hero .hero-note, .js .hero .hero-now {
  opacity: calc(1 - var(--hp, 0) * 1.25);
  filter: blur(calc(var(--hp, 0) * 9px));
  translate: 0 calc(var(--hp, 0) * -4vh);
}
.js .hero .pola-hero { transform: translateY(calc(var(--hp, 0) * -10vh)); transition: rotate 0.6s var(--spring), translate 0.9s var(--spring), opacity 0.8s ease, box-shadow 0.9s var(--ease), background-color 0.9s ease; }
.js .hero .pola-hero:not(.is-in) { opacity: 0; translate: 0 -1.8rem; rotate: -2deg; }

@media (min-width: 768px) {
  .hero { --hl: clamp(2.4rem, min(5.6vw, 9vh), 4rem); --pw: 34vw; padding: 0; }
  .hero-grid {
    min-height: 100svh;
    grid-template-columns: 1fr minmax(0, 46vw) 6vw;
    grid-template-rows: max(8rem, 18vh) auto auto auto 1fr;
  }
  .hl-a { grid-area: 2 / 2; }
  .hero-note { grid-area: 4 / 2; margin: 1rem 0 0; max-width: 42vw; font-size: clamp(1.2rem, min(1.5vw, 2.6vh), 1.6rem); }
  .hl-b { grid-area: 3 / 2; }
  .hero-now { grid-area: 5 / 2; align-self: start; margin: 1.6rem 0 0; }
  .pola-hero { grid-area: auto; }
  .pola-hero { position: absolute; left: 9vw; top: 20vh; margin: 0; }
}
@media (min-width: 1024px) {
  .hero { --hl: clamp(2.6rem, min(5vw, 9.5vh), 6.6rem); --pw: clamp(15rem, 22.5vw, 29rem); }
  .hero-grid { grid-template-columns: 1fr minmax(0, 44vw) 9vw; grid-template-rows: max(8rem, 24vh) auto auto auto 1fr; }
  .hero-note { max-width: min(36vw, 36rem); }
  .pola-hero { left: 19vw; top: 21vh; }
  .doodle-birds { left: 8vw; top: 40vh; }
}

/* ---------- home: one line I work by ---------- */
.beliefs { position: relative; padding: 6rem var(--gr) 4rem var(--gl); }
.bl-stage { position: relative; }
.bl-float { display: none; }
.bl-quote { display: grid; justify-items: center; gap: clamp(1.4rem, 3.4vh, 2.4rem); max-width: 54rem; margin-inline: auto; }
.bl-line { text-align: center; font-weight: 300; font-size: clamp(1.6rem, 2.8vw, 3.1rem); line-height: 1.25; text-wrap: balance; }

.beliefs.is-live { height: 175svh; padding: 0; }
.is-live .bl-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; display: grid; align-content: center; justify-items: center; }
.is-live .bl-quote {
  width: min(40rem, 84vw);
  opacity: 0; filter: blur(8px); transform: translateY(1.2rem);
  transition: opacity 0.8s ease, filter 0.8s ease, transform 1s var(--ease);
}
.is-live .bl-quote.is-on { opacity: 1; filter: none; transform: none; }
.is-live .bl-float { display: block; position: absolute; inset: 0; pointer-events: none; }
.bl-word {
  position: absolute; left: var(--x); top: var(--ym, var(--y));
  opacity: 0; transform: translate3d(0, var(--py, 0px), 0) scale(var(--s, 1));
  filter: blur(var(--bl, 0px));
  transition: opacity 0.8s ease;
  font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: clamp(0.95rem, 1.25vw, 1.5rem); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--soft); white-space: nowrap;
}
.bl-word.is-on { opacity: var(--o, 0.9); transition-delay: calc(var(--k, 0) * 90ms); }
.bl-word.has-logo { display: inline-flex; align-items: center; gap: 0.55em; color: var(--ink-2); }
.bl-logo { width: 1.6em; height: 1.6em; flex: none; }
@media (max-width: 767px) { .bl-word { left: min(var(--x), 5%); } .bl-word.is-r { left: auto; right: 5%; } }
@media (min-width: 768px) { .bl-word { top: var(--y); } }
[data-d='0'] { --o: 0.95; --bl: 0px; --s: 1; }
[data-d='1'] { --o: 0.7; --bl: 0.4px; --s: 0.94; }
[data-d='2'] { --o: 0.6; --bl: 0.7px; --s: 0.9; }

/* ---------- home: selected work ---------- */
/* Only the names show. The row under the cursor, or the one in focus while scrolling, opens: its details appear,
   a preview slides in on one side and, for live products, a link waits on the other. */
.wl { padding: clamp(5rem, 14vh, 10rem) var(--gr) clamp(3rem, 8vh, 6rem) var(--gl); overflow-x: clip; }
.wl-label { margin-bottom: 1.6rem; text-align: center; font-size: 1.1rem; }
.wl-list { max-width: min(52rem, 100%); margin-inline: auto; border-top: 1px solid var(--line); }
.wl-item { position: relative; border-bottom: 1px solid var(--line); }
.wl-row { display: grid; justify-items: center; padding: 1.8rem 0.4rem; text-align: center; }
.wl-name { font-size: clamp(1.9rem, 4.6vw, 3.6rem); line-height: 1.15; letter-spacing: 0.015em; text-transform: uppercase; transition: color 0.3s, translate 0.7s var(--ease); }
.wl-more { display: grid; grid-template-rows: 1fr; width: 100%; }
.wl-more-in { display: grid; justify-items: center; gap: 0.35rem; min-height: 0; overflow: hidden; padding-top: 0.4rem; }
.wl-meta {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.2rem 0.6rem;
  font-family: var(--caps); -webkit-text-stroke: 0.4px currentColor; font-size: 1rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2);
}
.wl-line { max-width: 34rem; font-size: 1.2rem; line-height: 1.4; color: var(--ink-2); }
.wl-item.is-active .wl-name { color: var(--accent); }
.wl-row:hover .wl-name, .wl-row:focus-visible .wl-name { animation: boil 0.5s steps(1) infinite; }
.wl-mwrap { display: grid; grid-template-rows: 1fr; width: 100%; justify-items: center; overflow: hidden; }
.wl-media {
  position: relative; display: block; width: 100%; max-width: 30rem; min-height: 0; aspect-ratio: 16 / 10; margin: 1.1rem 0 1.4rem;
  overflow: hidden; border-radius: 6px; background: var(--ph);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.06), 0 14px 22px -16px rgba(0, 0, 0, 0.45);
}
.wl-media img, .wl-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wl-media img { opacity: 0; transition: opacity 0.8s ease; }
.wl-media img.on { opacity: 1; animation: drift 4.5s ease-out both; }
@keyframes drift { from { scale: 1.08; } to { scale: 1; } }
.wl-read { display: none; }
.wl-live { width: fit-content; margin: -0.4rem auto 1.6rem; --t: -1deg; }
.wl-live i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #2fa66a; animation: pulse 2.4s ease-in-out infinite; }
/* small screens: a row opens downwards */
.js .wl-more, .js .wl-mwrap { grid-template-rows: 0fr; transition: grid-template-rows 0.65s var(--ease); }
.js .wl-more-in { opacity: 0; transition: opacity 0.4s ease; }
.js .wl-item.is-active .wl-more, .js .wl-item.is-active .wl-mwrap { grid-template-rows: 1fr; }
.js .wl-item.is-active .wl-more-in { opacity: 1; transition-delay: 0.15s; }
.js .wl-mwrap > .wl-media { margin-block: 0; opacity: 0; transition: margin 0.65s var(--ease), opacity 0.45s ease; }
.js .wl-item.is-active .wl-mwrap > .wl-media { margin-block: 1.1rem 1.4rem; opacity: 1; }
.js .wl-live { display: none; }
.js .wl-item.is-active .wl-live { display: flex; animation: rise 0.7s var(--ease) 0.2s backwards; }
@media (min-width: 1100px) {
  .wl-list { max-width: min(88rem, 100%); }
  .wl-row { padding: 2.3rem 0; }
  .wl-line { max-width: none; white-space: nowrap; }
  /* wide screens: every row keeps its height, the name rises a little and the details fade in under it */
  .js .wl-more, .js .wl-item.is-active .wl-more { grid-template-rows: 1fr; }
  .js .wl-more-in { translate: 0 -0.6rem; transition: opacity 0.45s ease, translate 0.7s var(--ease); }
  .js .wl-item.is-active .wl-more-in { translate: none; }
  .js .wl-name { translate: 0 1.9rem; }
  .js .wl-item.is-active .wl-name { translate: none; }
  .wl-mwrap, .js .wl-mwrap { display: contents; }
  /* the preview is as tall as its row (minus a margin), so it never reaches into the next one */
  .wl-media {
    position: absolute; top: 0.9rem; bottom: 0.9rem; right: 0; height: auto; width: auto; max-width: 26%; margin: 0;
    opacity: 0; translate: 5rem 0; rotate: 2deg; pointer-events: none;
    transition: opacity 0.5s ease, translate 0.9s var(--ease), rotate 0.9s var(--spring);
  }
  .js .wl-mwrap > .wl-media, .js .wl-item.is-active .wl-mwrap > .wl-media { margin: 0; }
  .wl-item.is-left .wl-media { right: auto; left: 0; translate: -5rem 0; rotate: -2deg; }
  .wl-item.is-active .wl-media { opacity: 1; translate: none; rotate: 0deg; }
  .wl-side, .js .wl-live {
    display: flex; position: absolute; top: 50%; left: 0; margin: 0;
    opacity: 0; translate: -1.5rem -50%; pointer-events: none;
    transition: color 0.2s, background-color 0.2s, box-shadow 0.2s, rotate 0.4s var(--spring), opacity 0.45s ease 0.1s, translate 0.8s var(--ease) 0.1s;
  }
  .wl-item.is-left .wl-side { left: auto; right: 0; translate: 1.5rem -50%; }
  .wl-item.is-active .wl-side, .js .wl-item.is-active .wl-live { opacity: 1; translate: 0 -50%; pointer-events: auto; animation: none; }
  .js .wl-item.is-active .wl-live:hover, .js .wl-item.is-active .wl-live:focus-visible { translate: 1px calc(-50% + 2px); }
  .js .wl-item.is-active .wl-live:active { translate: 2px calc(-50% + 3px); }
  .wl-read {
    align-items: center; gap: 0.5rem;
    font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft);
  }
  .wl-read span { transition: translate 0.3s var(--ease); }
  .wl-row:hover .wl-read span { translate: 0.3em 0; }
}

/* ---------- home: call to action ---------- */
.cta { padding: clamp(5rem, 16vh, 11rem) var(--gr) clamp(4rem, 12vh, 8rem) var(--gl); }
.cta-h { max-width: 15ch; font-weight: 300; font-size: clamp(2.7rem, 6vw, 8.5rem); line-height: 1.05; letter-spacing: 0.005em; }
@media (min-width: 768px) { .cta { padding-left: max(3vw, var(--gl)); } }

/* ---------- footer: a thank-you note over a sketch of the Golden Temple ---------- */
.ft {
  position: relative; overflow: hidden;
  background-color: var(--paper);
  background-image: url(../img/grain.webp), repeating-linear-gradient(180deg, transparent 0 calc(2.4rem - 1px), var(--rule) calc(2.4rem - 1px) 2.4rem);
  background-size: 256px 256px, auto;
  border-top: 1px solid var(--line);
}
.ft-inner { display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(4rem, 12vh, 7rem) var(--gr) 0 var(--gl); }
.ft-big { margin-top: 1rem; font-weight: 300; font-size: clamp(2.2rem, 5vw, 4.6rem); line-height: 1.2; text-wrap: balance; }
.ft-links ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.9rem 0.8rem; max-width: 58rem; margin-top: clamp(2rem, 4.5vh, 2.8rem); }
/* hand-drawn buttons with a little pencil shadow, so they read as things to tap */
/* a hand-drawn button with a little pencil shadow, so it reads as something to tap */
.btn-sketch {
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.9rem; padding: 0.5rem 1.15rem 0.45rem;
  border: 1.5px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
  background: var(--card); color: var(--ink); font-family: var(--hand); font-size: 1.2rem; line-height: 1.2; white-space: nowrap;
  rotate: var(--t, -0.8deg); box-shadow: 2px 3px 0 -0.5px var(--ink);
  transition: background-color 0.2s, color 0.2s, translate 0.2s var(--ease), box-shadow 0.2s var(--ease), rotate 0.4s var(--spring);
}
.btn-sketch span[aria-hidden] { font-family: var(--caps); font-size: 0.75em; }
.btn-sketch.is-key { background: var(--hi); }
.btn-sketch:hover, .btn-sketch:focus-visible { background: var(--hi); rotate: 0deg; translate: 1px 2px; box-shadow: 1px 1px 0 -0.5px var(--ink); }
.btn-sketch:active { translate: 2px 3px; box-shadow: 0 0 0 0 var(--ink); }
.ft-credit a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.ft-credit a:hover { color: var(--accent); }
.ft-mail { margin-top: 1.2rem; font-size: 1.15rem; }
.ft-mail a { color: var(--accent-ink); }
.ft-social { margin-top: 1rem; }
.ft-scene { position: relative; margin-top: clamp(1rem, 3vh, 2rem); color: var(--pencil); }
.ft-art { display: block; width: 100%; height: clamp(9rem, 24vw, 21rem); opacity: 0.7; }
.ft-art .flow { stroke-dasharray: 60 22; animation: flow 11s linear infinite; }
.ft-art .far { opacity: 0.55; }
.ft-art .tree { opacity: 0.45; }
.ft-art .ft-boat { animation: boat 38s linear infinite; }
.ft-art .ft-birds { animation: drift-birds 9s ease-in-out infinite alternate; }
.ft-art .ft-hit { pointer-events: all; }
@keyframes boat { from { transform: translate(-60px, 0); } to { transform: translate(1220px, 0); } }
@keyframes drift-birds { to { transform: translate(14px, -5px); } }
/* the name of the place, shown on hover */
.ft-tag { position: absolute; left: 50%; top: 4%; --t: -2deg; translate: -50% 0.4rem; opacity: 0; pointer-events: none; transition: opacity 0.25s ease, translate 0.3s ease; white-space: nowrap; z-index: 2; }
.ft-tag .scrap { padding: 1.35rem 0.95rem 0.6rem; gap: 0.15rem; }
.ft-tag .label { font-size: 0.72rem; }
.ft-tag .scrap-t { font-size: 1.05rem; color: var(--ink); }
.ft-scene:has(.ft-hit:hover) .ft-tag { opacity: 1; translate: -50% 0; }
.ft-bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem 2rem;
  padding: 1rem var(--gr) 1.4rem var(--gl);
  font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.ft-clock { margin-left: 0.5rem; }
.social { display: flex; gap: 1rem; color: var(--soft); }
.social a { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; transition: color 0.2s, translate 0.3s var(--spring); }
.social a:hover { color: var(--accent); translate: 0 -2px; }
.social .ic { width: 1.25rem; height: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .ft-art .flow, .ft-art .ft-boat, .ft-art .ft-birds { animation: none; } }

/* ---------- inner pages ---------- */
.pg-intro { padding-top: clamp(8rem, 22vh, 13rem); padding-bottom: clamp(3rem, 8vh, 5rem); }
.pg-h {
  max-width: 17ch; margin-top: 1.1rem;
  font-weight: 300; font-size: clamp(2.6rem, 6vw, 6.4rem); line-height: 1.12; letter-spacing: 0.01em;
}
.pg-lede { max-width: 38rem; margin-top: clamp(1.4rem, 3vh, 2.2rem); font-size: clamp(1.2rem, 1.6vw, 1.45rem); line-height: 1.45; color: var(--ink-2); }

/* reveal on scroll */
.js .rv { opacity: 0; transform: translateY(18px); filter: blur(4px); transition: opacity 0.9s ease, transform 1s var(--ease), filter 0.9s ease; }
.js .rv.in { opacity: 1; transform: none; filter: none; }
.js .rv:has(img, video) { filter: none; }

/* work wall */
.wall { padding-bottom: clamp(5rem, 14vh, 9rem); }
.wall-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4.5rem; padding-top: 2.5rem; }
.wall-item { --pw: 100%; max-width: 26rem; }
.wall-item .pola { --r: var(--t); }
.pola-card .pola-photo { aspect-ratio: 4 / 3.2; }
.pola-card .pola-cap { height: 20cqi; padding-top: 4cqi; font-size: 7.5cqi; }
.wall-item:hover .pola, .pola-card:focus-visible { rotate: 0deg; translate: 0 -6px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 26px 40px -18px rgba(0, 0, 0, 0.38); }
.wall-meta { margin-top: 1.6rem; padding-left: 0.2rem; }
.wall-t { font-size: clamp(1.7rem, 2.4vw, 2.3rem); line-height: 1.15; }
.wall-t a:hover { color: var(--accent); }
.wall-k { margin-top: 0.35rem; font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.wall-l { margin-top: 0.5rem; max-width: 30ch; font-size: 1.08rem; line-height: 1.4; color: var(--ink-2); }
.pola-blank .pola-photo { display: grid; place-items: center; background: var(--ph); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04); }
.pola-blank .pola-photo::before { content: ''; position: absolute; inset: 9%; border: 1.5px dashed rgba(var(--ink-rgb), 0.18); border-radius: 4px; }
.blank-plus { font-weight: 300; font-size: 26cqi; line-height: 1; color: rgba(var(--ink-rgb), 0.28); transition: color 0.3s, rotate 0.5s var(--spring); }
.wall-next:hover .blank-plus { color: var(--accent); rotate: 90deg; }
@media (min-width: 640px) {
  .wall-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2.5rem, 6vw, 6rem); row-gap: clamp(4rem, 9vw, 7rem); }
  .wall-item:nth-child(even) { margin-top: 6rem; }
}
@media (min-width: 1100px) {
  .wall-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wall-item:nth-child(even) { margin-top: 0; }
  .wall-item:nth-child(3n + 2) { margin-top: 7rem; }
  .wall-item:nth-child(3n) { margin-top: 2.5rem; }
}

/* case studies */
.wrap-wide { width: 100%; max-width: 96rem; margin-inline: auto; padding-inline: var(--gl) var(--gr); }
.tag { display: inline-block; margin-left: 0.4rem; padding: 0.1rem 0.45rem; border-radius: 4px; background: rgba(201, 92, 21, 0.1); color: var(--accent); font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.14em; vertical-align: middle; }
.back { display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: 2.2rem; font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--soft); }
.back .ic { rotate: 180deg; transition: translate 0.3s var(--ease); }
.back:hover { color: var(--accent); }
.back:hover .ic { translate: -4px 0; }

/* the top: title and gist on the left, the facts on an index card on the right */
.cs-top { padding-top: clamp(7.5rem, 20vh, 12rem); }
.cs-top-in { display: grid; gap: 3rem; align-items: start; }
.cs-title { margin: 0.5rem 0 1.2rem; font-weight: 300; font-size: clamp(3rem, 8vw, 7.6rem); line-height: 1; letter-spacing: 0.01em; }
.cs-lede { max-width: 32ch; font-size: clamp(1.45rem, 2.3vw, 2.1rem); line-height: 1.3; text-wrap: balance; }
.cs-intro { margin-top: 1.4rem; display: grid; gap: 1rem; }
.cs-intro p { max-width: 40rem; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.cs-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; margin-top: 1.8rem; }
.cs-time { display: inline-flex; align-items: center; gap: 0.45rem; font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.cs-dot { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: #2fa66a; box-shadow: 0 0 0 3px rgba(47, 166, 106, 0.18); }
/* the facts, written on a ruled index card held by a paperclip */
.cs-card {
  position: relative; display: grid; padding: 2.4rem 1.6rem 1.4rem; rotate: 1deg;
  background: var(--card) url(../img/grain.webp) 0 0 / 256px 256px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07), 0 24px 40px -26px rgba(0, 0, 0, 0.35);
}
.cs-card::before { content: ''; position: absolute; top: -0.9rem; right: 2.4rem; width: 1rem; height: 3.2rem; border: 2px solid #9aa0a6; border-radius: 0.6rem; border-bottom-color: transparent; rotate: -8deg; }
.cs-card-k { margin-bottom: 0.6rem; font-size: 0.9rem; color: var(--accent-ink); }
.cs-card div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 0.2rem 1rem; padding: 0.55rem 0; border-top: 1px solid rgba(96, 140, 190, 0.28); }
.cs-card dt { padding-top: 0.15rem; font-family: var(--serif); font-size: 0.85rem; line-height: 1.5; color: var(--faint); }
.cs-card dd { font-size: 1.12rem; line-height: 1.35; }
@media (min-width: 1000px) {
  .cs-top-in { grid-template-columns: minmax(0, 1.55fr) minmax(19rem, 1fr); column-gap: clamp(3rem, 7vw, 7rem); }
  .cs-card { margin-top: 3.4rem; }
}

/* cover: as wide as the page, never wider than the picture itself */
.cs-cover { margin-top: clamp(3.5rem, 9vh, 6rem); }
.cs-cover img { width: 100%; max-width: var(--nw, 100%); margin-inline: auto; border-radius: 6px; box-shadow: 0 30px 60px -40px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(0, 0, 0, 0.05); }

/* in short: the problem and the results, one look */
.cs-glance { margin-top: clamp(2.5rem, 6vh, 4rem); }
.cs-glance-in { display: grid; gap: 2rem 3rem; padding: clamp(1.6rem, 3vw, 2.4rem) 0; border-block: 1px solid var(--line); }
.cs-glance-r { display: flex; flex-wrap: wrap; gap: 1.6rem clamp(2.5rem, 6vw, 5.5rem); }
.cs-glance-r li { display: grid; gap: 0.4rem; align-content: start; }
.cs-glance-n { width: fit-content; font-weight: 300; font-size: clamp(2.6rem, 4.6vw, 4rem); line-height: 1; color: var(--accent); }
.cs-glance-k { max-width: 16ch; font-size: 1.1rem; line-height: 1.3; color: var(--ink-2); }
.cs-glance-p { display: grid; gap: 0.6rem; align-content: start; }
.cs-glance-go { justify-self: start; }
@media (min-width: 900px) { .cs-glance-in { grid-template-columns: 13.5rem minmax(0, 1fr); column-gap: clamp(3rem, 5vw, 5.5rem); } }

/* the story: chapters on the left (wide screens), reading column on the right */
.cs-body { position: relative; padding-top: clamp(1rem, 3vh, 2rem); }
.cs-main { min-width: 0; }
.cs-nav-list a { display: flex; align-items: baseline; gap: 0.7rem; }
.cs-nav-n { flex: none; width: 1.6rem; font-family: var(--hand); font-size: 1.1rem; color: var(--faint); transition: color 0.25s; }
.cs-nav-t { font-size: 1.15rem; line-height: 1.25; color: var(--soft); transition: color 0.25s; }
.cs-nav-list a:hover .cs-nav-t, .cs-nav-list a:focus-visible .cs-nav-t { color: var(--accent); }
.cs-nav-list li.is-done .cs-nav-n { color: var(--ink-2); }
.cs-nav-list li.is-on .cs-nav-n, .cs-nav-list li.is-on .cs-nav-t { color: var(--accent); }
.cs-nav-k { font-size: 0.9rem; color: var(--faint); }

@media (min-width: 1100px) {
  .cs-body { display: grid; grid-template-columns: 13.5rem minmax(0, 1fr); column-gap: clamp(3rem, 5vw, 5.5rem); }
  .cs-nav { position: sticky; top: 9.5rem; align-self: start; padding-top: clamp(3.5rem, 8vh, 5rem); }
  .cs-nav-now { display: none; }
  .cs-nav-box { position: relative; padding-left: 1.2rem; }
  .cs-nav-list { display: grid; gap: 0.85rem; margin-top: 1rem; }
  /* a pencil line beside the list fills as you read */
  .cs-nav-line { position: absolute; left: 0; top: 0.3rem; bottom: 0.3rem; width: 2px; border-radius: 2px; background: var(--line); }
  .cs-nav-line i { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: top; transform: scaleY(var(--p, 0)); }
}

/* phones and tablets: a small chapter bar at the bottom, tap it for the list */
@media (max-width: 1099.98px) {
  .cs-nav {
    position: fixed; z-index: 35; left: 50%; bottom: max(0.9rem, env(safe-area-inset-bottom));
    width: min(26rem, calc(100vw - 2rem)); translate: -50% calc(100% + 2rem);
    transition: translate 0.5s var(--ease);
  }
  .cs-nav.is-shown { translate: -50% 0; }
  .cs-nav-now {
    position: relative; display: flex; align-items: center; gap: 0.7rem; width: 100%; min-height: 3.2rem; padding: 0.5rem 1rem 0.6rem;
    border: 1.5px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px;
    background: var(--card); box-shadow: 2px 3px 0 -0.5px var(--ink); text-align: left; overflow: hidden;
  }
  .cs-nav-pos { flex: none; font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.12em; color: var(--faint); }
  .cs-nav-pos b { font-weight: 400; color: var(--accent); }
  .cs-nav-cur { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.15rem; }
  .cs-nav-chev { flex: none; width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: rotate 0.3s var(--ease); }
  .cs-nav.is-open .cs-nav-chev { rotate: 180deg; }
  .cs-nav-bar { position: absolute; left: 1rem; right: 1rem; bottom: 0.3rem; height: 2px; border-radius: 2px; background: var(--line); }
  .cs-nav-bar i { position: absolute; inset: 0; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
  .cs-nav-box {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 0.7rem); padding: 1.1rem 1.2rem 1rem;
    background: var(--card) url(../img/grain.webp) 0 0 / 256px 256px; border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 20px 40px -22px rgba(0, 0, 0, 0.4);
    opacity: 0; visibility: hidden; translate: 0 0.6rem; transition: opacity 0.25s, translate 0.35s var(--ease), visibility 0s 0.35s;
  }
  .cs-nav.is-open .cs-nav-box { opacity: 1; visibility: visible; translate: 0 0; transition: opacity 0.25s, translate 0.35s var(--ease); }
  .cs-nav-list { display: grid; margin-top: 0.5rem; }
  .cs-nav-list a { padding: 0.6rem 0; border-bottom: 1px solid var(--line); }
  .cs-nav-list li:last-child a { border-bottom: 0; }
  .cs-nav-line { display: none; }
  /* room for the bar at the end of the page */
  .pg-case .cs-next { padding-bottom: clamp(7rem, 16vh, 9rem); }
}

/* a chapter opens with a big hand-written number */
.cs-ch { padding-top: clamp(5rem, 12vh, 8rem); scroll-margin-top: 2rem; }
.cs-main > .cs-ch:first-child { padding-top: clamp(3.5rem, 8vh, 5rem); }
.cs-ch + .cs-ch { margin-top: clamp(1rem, 3vh, 2rem); border-top: 1px dashed rgba(var(--ink-rgb), 0.18); }
.cs-ch-head { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0 clamp(1rem, 2.5vw, 2rem); align-items: start; max-width: 50rem; margin-bottom: clamp(2.2rem, 5vh, 3.2rem); }
.cs-ch-n { font-family: var(--hand); font-weight: 300; font-size: clamp(3.4rem, 6vw, 5.2rem); line-height: 0.85; color: var(--accent); opacity: 0.85; }
.cs-ch-head .label { font-size: 0.9rem; color: var(--faint); }
.cs-h2 { margin-top: 0.3rem; font-weight: 300; font-size: clamp(2.1rem, 4vw, 3.6rem); line-height: 1.1; letter-spacing: 0.01em; text-wrap: balance; }
.cs-ch-head .cs-text { margin-top: 0.8rem; }
.cs-h3 { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 1rem; font-size: clamp(1.5rem, 2.1vw, 1.9rem); line-height: 1.25; text-wrap: balance; }
.cs-h3::before { content: ''; flex: none; width: 0.9rem; height: 2px; translate: 0 -0.3em; border-radius: 2px; background: var(--accent); }
.cs-text { max-width: 40rem; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.cs-text + * { margin-top: 1.4rem; }
.cs-block { margin-top: clamp(3rem, 7vh, 4.5rem); }
.cs-ch-head + .cs-block { margin-top: 0; }
.cs-kicker { font-size: 0.9rem; color: var(--accent-ink); }

/* the challenge: one highlighted line and three notes */
.cs-big { margin-top: 0.6rem; max-width: 30ch; font-size: clamp(1.75rem, 3vw, 2.6rem); line-height: 1.28; text-wrap: balance; }
.cs-brief .cs-text { margin-top: 1.2rem; }
.cs-notes { display: grid; gap: 1.8rem; margin-top: 2.6rem; }
.cs-notes .scrap { height: 100%; padding: 1.7rem 1.4rem 1.6rem; }
@media (min-width: 760px) { .cs-notes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* a result: the number written by hand, the story, the screen */
.cs-result { display: grid; gap: 1.8rem; padding-top: clamp(2rem, 4vh, 2.6rem); border-top: 1px solid var(--line); }
.cs-ch-head + .cs-result { padding-top: 0; border-top: 0; }
.cs-stat { position: relative; width: fit-content; font-weight: 300; font-size: clamp(3.2rem, 6vw, 5rem); line-height: 1; color: var(--accent); }
.cs-stat-k { margin-top: 0.5rem; font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.95rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.cs-result .cs-h3 { margin-top: 1.4rem; }
.cs-result .cs-h3::before { display: none; }
.cs-step-big { display: flex; align-items: center; gap: 0.7rem; font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 1rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent-ink); }
.cs-step-big + .cs-h3 { margin-top: 0.8rem; }
.cs-ticks { display: grid; gap: 0.5rem; margin-top: 1.2rem; }
.cs-ticks li { position: relative; padding-left: 1.7rem; font-size: 1.15rem; line-height: 1.35; }
.cs-ticks li::before { content: ''; position: absolute; left: 0.1rem; top: 0.3rem; width: 0.8rem; height: 0.45rem; border-left: 2px solid var(--accent); border-bottom: 2px solid var(--accent); rotate: -45deg; border-radius: 1px; }
/* wide: the number on the left, its story beside it, the screen full width below so it stays readable */
@media (min-width: 900px) {
  .cs-result-t { display: grid; grid-template-columns: minmax(12rem, 0.7fr) minmax(0, 1.3fr); column-gap: clamp(2rem, 4vw, 3.5rem); }
  .cs-result-t > .cs-stat, .cs-result-t > .cs-stat-k { grid-column: 1; }
  .cs-result-t > :not(.cs-stat, .cs-stat-k) { grid-column: 2; }
  .cs-result-t > .cs-stat { grid-row: 1; }
  .cs-result-t > .cs-stat-k { grid-row: 2; align-self: start; }
  .cs-result-t > .cs-h3 { grid-row: 1; margin-top: 0.4rem; }
  .cs-result-t > .cs-text { grid-row: 2 / span 2; }
  .cs-result-t > .cs-ticks { grid-row: 4; }
  /* ImpactAIQ product steps keep the picture beside the words */
  .cs-result.is-side { grid-template-columns: minmax(15rem, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 4vw, 3.5rem); align-items: center; }
  .cs-result.is-side .cs-result-t { display: block; }
  .cs-result.is-side .cs-h3 { margin-top: 0.8rem; }
  .cs-result.is-side.is-flip .cs-result-t { order: 2; }
}

/* numbers in cells, written by hand */
.cs-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.2rem; }
.cs-cells > div { padding: 1.3rem 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.cs-cells dt { display: grid; gap: 0.6rem; }
.cs-cell-n { width: fit-content; font-weight: 300; font-size: clamp(2.4rem, 4vw, 3.2rem); line-height: 1; color: var(--accent); }
.cs-cell-k { font-size: 1.2rem; line-height: 1.25; }
.cs-cells dd { margin-top: 0.4rem; font-family: var(--serif); font-size: 0.95rem; line-height: 1.55; color: var(--faint); }

/* insights and findings as cards */
.cs-cards { display: grid; gap: 1.2rem; }
.cs-cards li { position: relative; display: grid; align-content: start; gap: 0.5rem; padding: 1.4rem 1.4rem 1.5rem 4.2rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.cs-card-n { position: absolute; left: 1.2rem; top: 1.05rem; font-family: var(--hand); font-size: 1.9rem; line-height: 1; color: var(--accent); }
.cs-cards h4 { font-size: 1.4rem; line-height: 1.25; }
.cs-cards p { font-family: var(--serif); font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.cs-who { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cs-who span { padding: 0.15rem 0.6rem; border-radius: 99px; background: rgba(96, 140, 190, 0.12); font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; color: #2f4f73; }
.cs-need { display: grid; gap: 0.6rem; margin-top: 0.4rem; }
.cs-need div { display: grid; gap: 0.1rem; }
.cs-need dt { font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.85rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }
.cs-need dd { font-family: var(--serif); font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.cs-need div + div { padding-top: 0.6rem; border-top: 1px dashed var(--line); }
.cs-need div + div dd { color: var(--ink); }
@media (min-width: 760px) { .cs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cs-cards li:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* steps joined by a pencil line */
.cs-steps { position: relative; display: grid; gap: 1.4rem; margin-top: 1.6rem; }
.cs-steps li { position: relative; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr); column-gap: 1rem; align-content: start; }
.cs-step-n {
  display: grid; place-items: center; width: 2.4rem; height: 2.4rem; grid-row: span 2;
  border: 1.5px solid var(--ink); border-radius: 52% 48% 55% 45% / 47% 55% 45% 53%; background: var(--card);
  font-family: var(--hand); font-size: 1.3rem; line-height: 1; color: var(--accent);
}
.cs-step-big .cs-step-n { width: 2rem; height: 2rem; font-size: 1.1rem; letter-spacing: 0; -webkit-text-stroke: 0; }
.cs-step-t { font-size: 1.35rem; line-height: 1.3; padding-top: 0.35rem; }
.cs-step-d { margin-top: 0.3rem; max-width: 34rem; font-family: var(--serif); font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
/* the line between circles (phones: down, wide: across) */
.cs-steps li:not(:last-child)::after { content: ''; position: absolute; left: 1.2rem; top: 2.6rem; bottom: -1.3rem; border-left: 1.5px dashed rgba(var(--ink-rgb), 0.3); }
@media (min-width: 900px) {
  .cs-steps { grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); column-gap: 1.8rem; }
  .cs-steps li { grid-template-columns: minmax(0, 1fr); row-gap: 0.7rem; }
  .cs-step-n { grid-row: auto; }
  .cs-step-t { padding-top: 0; }
  .cs-steps li:not(:last-child)::after { left: 3rem; right: -1.2rem; top: 1.2rem; bottom: auto; border-left: 0; border-top: 1.5px dashed rgba(var(--ink-rgb), 0.3); }
}

/* two lists side by side */
.cs-cols { display: grid; gap: 1.4rem; }
.cs-col { padding: 1.3rem 1.4rem 1rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.cs-col-k { font-size: 0.95rem; color: var(--accent-ink); }
.cs-list { margin-top: 0.4rem; }
.cs-list li { position: relative; padding: 0.6rem 0 0.6rem 1.4rem; font-family: var(--serif); font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.cs-list li + li { border-top: 1px dashed var(--line); }
.cs-list li::before { content: ''; position: absolute; left: 0.1rem; top: 1.25rem; width: 0.6rem; height: 1.5px; background: var(--accent); }
@media (min-width: 760px) { .cs-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* a survey finding: number, pain points, and what it means */
.cs-insight-in { display: grid; gap: 1.6rem 3rem; align-items: center; padding: 1.6rem 0; border-block: 1px solid var(--line); }
.cs-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
.cs-chips li { padding: 0.35rem 0.9rem; border: 1.5px solid var(--ink); border-radius: 255px 15px 225px 15px / 15px 225px 15px 255px; font-size: 1.1rem; line-height: 1.3; }
.cs-take { display: flex; align-items: baseline; gap: 0.8rem; margin-top: 1.2rem; max-width: 44rem; font-size: 1.35rem; line-height: 1.4; }
.cs-take .label { flex: none; font-size: 0.9rem; color: var(--accent-ink); }
@media (min-width: 760px) { .cs-insight-in { grid-template-columns: minmax(12rem, 0.6fr) minmax(0, 1.4fr); } }

/* pictures: sharp, never stretched, open larger on tap */
.cs-gal { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem); }
@media (min-width: 640px) { .cs-gal.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cs-shot { min-width: 0; }
.cs-zoom { position: relative; display: block; width: 100%; max-width: var(--nw, 100%); margin-inline: auto; border-radius: 6px; cursor: zoom-in; }
.cs-zoom img { width: 100%; border-radius: 6px; background: var(--ph); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 22px 40px -32px rgba(0, 0, 0, 0.4); }
.cs-zoom-i { position: absolute; right: 0.7rem; bottom: 0.7rem; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--card); opacity: 0; scale: 0.85; transition: opacity 0.25s, scale 0.3s var(--spring); }
.cs-zoom-i .ic { width: 1.2rem; height: 1.2rem; }
.cs-zoom:hover .cs-zoom-i, .cs-zoom:focus-visible .cs-zoom-i { opacity: 1; scale: 1; }
@media (hover: none) { .cs-zoom-i { opacity: 0.9; scale: 0.9; } }
.cs-shot figcaption { margin-top: 0.8rem; text-align: center; font-size: 1.05rem; line-height: 1.35; color: var(--faint); }
.cs-src { margin-top: 1.6rem; font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); }

/* the slider: one picture at a time, the next one peeking in */
.cs-car-track {
  display: flex; gap: clamp(1rem, 2vw, 1.6rem); overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 0.4rem; border-radius: 6px;
}
.cs-car-track::-webkit-scrollbar { display: none; }
.cs-car-slide { flex: 0 0 92%; scroll-snap-align: start; min-width: 0; }
.cs-car-slide:last-child { scroll-snap-align: end; }
.cs-car-bar { display: flex; align-items: center; justify-content: center; gap: 1.2rem; margin-top: 1.2rem; }
.cs-car-btn { min-height: 2.6rem; padding: 0.45rem 0.9rem; }
.cs-car-btn .ic { width: 1.2rem; height: 1.2rem; }
.cs-car-btn:disabled { opacity: 0.35; pointer-events: none; }
.cs-car-count { min-width: 4rem; text-align: center; font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 1rem; letter-spacing: 0.14em; color: var(--faint); }
.cs-car-count b { font-weight: 400; color: var(--accent); }
.cs-small .cs-car-slide { flex-basis: min(80%, 34rem); }

/* ImpactAIQ: the tour in a browser frame, at about its own size */
.cs-tour { margin-top: clamp(3.5rem, 9vh, 6rem); }
.cs-browser { max-width: 46rem; margin-inline: auto; overflow: hidden; border: 1.5px solid var(--ink); border-radius: 10px; background: var(--card); box-shadow: 3px 4px 0 -1px var(--ink); rotate: -0.5deg; }
.cs-browser-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; border-bottom: 1.5px solid var(--ink); }
.cs-browser-bar i { width: 0.6rem; height: 0.6rem; border: 1.5px solid var(--ink); border-radius: 50%; }
.cs-browser-bar span { margin-left: 0.6rem; padding: 0.05rem 0.7rem; border-radius: 99px; background: var(--paper); font-family: var(--serif); font-size: 0.8rem; color: var(--faint); }
.cs-browser video { width: 100%; height: auto; aspect-ratio: 720 / 406; background: #072c29; }
.cs-tour figcaption { margin-top: 1rem; text-align: center; font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.ia-dates { display: grid; gap: 1.2rem; }
.ia-dates li { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: 1.2rem; align-items: start; padding: 1.2rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.ia-day { display: flex; flex-direction: column; align-items: center; padding: 0.4rem 0; border: 1.5px solid var(--ink); border-radius: 6px; font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.ia-day b { font-family: var(--hand); font-weight: 400; font-size: 1.9rem; line-height: 1; letter-spacing: 0; color: var(--accent); }
.ia-dates strong { display: block; font-weight: 400; font-size: 1.3rem; }
.ia-dates li > span:last-child { font-family: var(--serif); font-size: 1rem; line-height: 1.6; color: var(--ink-2); }
.ia-parties { display: grid; gap: 1.4rem; }
.ia-parties .scrap { height: 100%; padding: 1.7rem 1.4rem 1.6rem; }
.ia-logo { display: flex; align-items: center; width: fit-content; height: 3.2rem; margin-bottom: 0.4rem; padding: var(--chip-pad); border-radius: 6px; background: var(--chip); }
.ia-logo img { max-height: 100%; width: auto; max-width: 11rem; object-fit: contain; }
@media (min-width: 760px) {
  .ia-dates { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ia-parties { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Eau de Damo: the 720px screens stay at their own size */
.cs-eau-cover { margin-top: clamp(3.5rem, 9vh, 6rem); }
.cs-eau-cover .cs-zoom { max-width: min(var(--nw), 100%); }

/* the end */
.cs-cta { padding-top: clamp(6rem, 16vh, 10rem); }
.cs-cta-q { max-width: 20ch; font-weight: 300; font-size: clamp(2rem, 4vw, 3.6rem); line-height: 1.15; text-wrap: balance; }
.cs-cta .cs-text { margin-top: 0.8rem; }
.cs-cta .btn-sketch { margin-top: 1.8rem; }
.cs-next { padding-top: clamp(5rem, 12vh, 8rem); padding-bottom: clamp(5rem, 12vh, 8rem); }
.cs-next-link { display: block; width: fit-content; margin-top: 1rem; }
.cs-next-t { display: inline-flex; align-items: center; gap: 0.9rem; font-weight: 300; font-size: clamp(2.4rem, 5.4vw, 5.2rem); line-height: 1.1; transition: color 0.25s; }
.cs-next-t .ic { width: 0.6em; height: 0.6em; stroke-width: 1.2; transition: translate 0.4s var(--spring); }
.cs-next-s { display: block; margin-top: 0.5rem; font-size: 1.1rem; color: var(--soft); }
.cs-next-link:hover .cs-next-t { color: var(--accent); }
.cs-next-link:hover .ic { translate: 0.4rem 0; }

/* the picture viewer */
.lb { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(var(--paper-rgb), 0.97); color: var(--ink); }
.lb::backdrop { background: rgba(var(--paper-rgb), 0.97); }
.lb[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; animation: lb-in 0.3s var(--ease); }
@keyframes lb-in { from { opacity: 0; } }
.lb-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: max(0.9rem, env(safe-area-inset-top)) var(--gr) 0.6rem var(--gl); }
.lb-count { font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 1rem; letter-spacing: 0.14em; color: var(--faint); }
.lb-stage { display: grid; place-items: center; min-height: 0; padding: 0.4rem var(--gr) 0.4rem var(--gl); overflow: auto; }
.lb-stage img { max-width: 100%; max-height: calc(100dvh - 9.5rem); width: auto; height: auto; object-fit: contain; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 30px 60px -40px rgba(0, 0, 0, 0.5); cursor: zoom-in; }
.lb.is-full .lb-stage { place-items: start center; }
.lb.is-full .lb-stage img { max-width: none; max-height: none; width: min(var(--nw, 2000px), 200vw); cursor: zoom-out; }
.lb-bot { display: flex; align-items: center; justify-content: center; gap: 1rem; padding: 0.6rem var(--gr) max(1rem, env(safe-area-inset-bottom)) var(--gl); }
.lb-cap { flex: 1; max-width: 40rem; text-align: center; font-size: 1.1rem; line-height: 1.35; color: var(--ink-2); }
.lb .btn-sketch { min-height: 2.6rem; padding: 0.45rem 0.9rem; }
.lb .btn-sketch .ic { width: 1.2rem; height: 1.2rem; }
.lb [hidden] { display: none !important; }

/* about */
.ab-intro { position: relative; display: grid; gap: 3.5rem; align-items: start; }
.ab-intro-art { position: relative; isolation: isolate; display: grid; justify-items: center; }
.ab-intro .pola-about { --pw: min(80vw, 21rem); --r: -2.5deg; margin-top: 1rem; }
/* air currents behind the photo only, never across the words */
.ab-air { max-width: none; position: absolute; z-index: -1; left: -1rem; right: -1rem; top: 0; bottom: -2rem; width: calc(100% + 2rem); height: calc(100% + 2rem); color: var(--pencil-2); opacity: 0.7; pointer-events: none; overflow: visible; }
.ab-air path, .ab-air-low path { vector-effect: non-scaling-stroke; }
/* a breeze under the words, in its own space */
.ab-air-low { width: 100%; height: clamp(3.5rem, 8vh, 5.5rem); margin-top: clamp(1.6rem, 4vh, 2.6rem); color: var(--pencil-2); opacity: 0.6; }
.ab-wind path { stroke-dasharray: 260 70 110 50; animation: air 22s linear infinite; }
.ab-wind path:nth-child(2n) { animation-duration: 28s; opacity: 0.7; }
.ab-birds { position: absolute; z-index: -1; right: 4%; top: 0; width: clamp(4.5rem, 7vw, 6.5rem); height: auto; color: var(--pencil-2); opacity: 0.8; pointer-events: none; animation: birds 9s ease-in-out infinite; }
@keyframes air { to { stroke-dashoffset: -490; } }
@keyframes birds { 50% { translate: -10px 5px; } }
@media (min-width: 900px) {
  .ab-intro { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); column-gap: clamp(3rem, 7vw, 7rem); }
  .ab-intro .pola-about { --pw: clamp(16rem, 24vw, 23rem); margin-top: 4rem; }
  /* from the middle of the gap to the edge of the page */
  .ab-air { left: calc(-1 * clamp(1.5rem, 3.5vw, 3.5rem)); top: 1rem; width: calc(100% + clamp(1.5rem, 3.5vw, 3.5rem) + var(--gr)); height: calc(100% + 1rem); }
  .ab-birds { top: -0.5rem; right: -1rem; }
}
@media (prefers-reduced-motion: reduce) { .ab-wind path, .ab-birds { animation: none; } }

/* small paper notes that carry the longer About lines */
.ab-note { max-width: 19rem; }
.ab-note .scrap { padding: 1.5rem 1.3rem 1.3rem; }
.ab-note .scrap-t { font-size: 1.15rem; }

/* Beyond work: a heading and a few pencil sketches on one side, the river photo and its note on the other */
.ab-me { display: grid; gap: 3rem; align-items: center; padding-top: clamp(5rem, 14vh, 9rem); }
.ab-me-h { margin-top: 0.9rem; max-width: 16ch; font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.25; text-wrap: balance; }
/* four small loves: a pencil sketch, a word, one line */
.ab-loves { display: grid; gap: 1.6rem 2rem; margin-top: clamp(2rem, 5vh, 3rem); }
.ab-loves li { display: grid; grid-template-columns: 3.4rem minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 1rem; align-items: start; }
.lv-ic { grid-row: span 2; width: 3.4rem; height: 3.4rem; color: var(--icon); filter: url(#boil-1); }
.lv-k { font-size: 1.35rem; line-height: 1.25; }
.lv-t { margin-top: 0.2rem; font-size: 1.1rem; line-height: 1.35; color: var(--soft); }
@media (min-width: 560px) { .ab-loves { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.js .ab-loves .lv-ic [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .ab-loves.in .lv-ic [pathLength] { animation: pen-draw 0.9s ease-in-out forwards; animation-delay: calc(0.2s + var(--i) * 0.25s); }
@media (prefers-reduced-motion: reduce) { .js .ab-loves .lv-ic [pathLength] { stroke-dashoffset: 0; } }
.ab-me-art { display: grid; justify-items: center; gap: 1.6rem; }
.card-sheet {
  position: relative; max-width: 34rem; padding: 2.6rem 2rem 2rem;
  background-color: var(--card);
  rotate: -1deg;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07), 0 24px 40px -26px rgba(0, 0, 0, 0.35);
}
.card-sheet::before {
  content: ''; position: absolute; top: -0.9rem; left: 2.2rem; width: 1rem; height: 3.2rem;
  border: 2px solid #9aa0a6; border-radius: 0.6rem; border-bottom-color: transparent; rotate: 8deg;
}
.sheet-k { font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-ink); }
/* every line of text sits just above a ruled line, even when a value wraps */
.card-sheet dl { margin-top: 0.8rem; background: repeating-linear-gradient(180deg, transparent 0 calc(2.4rem - 1px), rgba(96, 140, 190, 0.28) calc(2.4rem - 1px) 2.4rem) 0 -0.6rem; }
.card-sheet dl div { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); align-items: baseline; gap: 0.8rem; }
.card-sheet dt { font-size: 1rem; line-height: 2.4rem; color: var(--faint); }
.card-sheet dd { font-size: 1.2rem; line-height: 2.4rem; }
@media (min-width: 640px) { .card-sheet dl div { grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; } }
.pola-about2 { --pw: min(82vw, 21rem); --r: 3deg; }
.pola-about2 .pola-cap { font-size: 6.6cqi; }
@media (min-width: 900px) {
  .ab-me { grid-template-columns: minmax(0, 1.3fr) minmax(0, 0.9fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .pola-about2 { --pw: clamp(18rem, 27vw, 25rem); }
}

.ab-how, .ab-exp, .ab-words, .ab-extra { padding-top: clamp(5rem, 14vh, 9rem); }
.ab-exp { padding-top: clamp(3.5rem, 9vh, 6rem); }
/* How I work: a line, a note, then four sketches with one short line each (one hand, no extra fonts) */
.ab-how-top { display: grid; gap: 2rem 3rem; align-items: start; }
.ab-how-lead { margin-top: 0.9rem; max-width: 30ch; font-size: clamp(1.5rem, 2.4vw, 2.1rem); line-height: 1.3; text-wrap: balance; }
@media (min-width: 900px) { .ab-how-top { grid-template-columns: minmax(0, 1fr) auto; } .ab-note-blend { margin-top: 0.6rem; } }
.ab-how-list { display: grid; gap: 2.4rem; margin-top: clamp(2.6rem, 6vh, 3.6rem); }
.ab-how-list li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr); column-gap: 1.2rem; align-items: start; align-content: start; }
.hw-ic { grid-row: span 3; width: 4.2rem; height: 4.2rem; color: var(--icon); overflow: visible; filter: url(#boil-1); }
.hw-n { font-size: 1.1rem; line-height: 1; color: var(--accent); }
.ab-how-list h3 { margin-top: 0.3rem; font-size: clamp(1.45rem, 1.9vw, 1.75rem); line-height: 1.2; }
.ab-how-list p { margin-top: 0.4rem; font-size: 1.2rem; line-height: 1.35; color: var(--soft); }
@media (min-width: 640px) { .ab-how-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.4rem; } }
@media (min-width: 1100px) {
  .ab-how-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; }
  .ab-how-list li { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding: 0.4rem 1.8rem 0.6rem; border-left: 1.5px dashed rgba(var(--ink-rgb), 0.18); }
  .ab-how-list li:first-child { padding-left: 0; border-left: 0; }
  .hw-ic { grid-row: auto; width: 4.6rem; height: 4.6rem; margin-bottom: 1.1rem; }
}
/* the sketches draw themselves in when the row comes into view */
.js .ab-how-list .hw-ic [pathLength] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .ab-how-list.in .hw-ic [pathLength] { animation: pen-draw 0.9s ease-in-out forwards; animation-delay: calc(0.2s + var(--i) * 0.25s); }
@media (prefers-reduced-motion: reduce) { .js .ab-how-list .hw-ic [pathLength] { stroke-dashoffset: 0; } }

/* Where I've worked: the line I work by, the profile card, then company, role, dates, place */
.ab-exp { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }
.ab-card { margin-top: 3rem; justify-self: start; width: 100%; }
.ab-card.card-sheet { padding-inline: 1.4rem; }
.ab-card dl div { grid-template-columns: 4.8rem minmax(0, 1fr); gap: 0.7rem; }
@media (min-width: 640px) { .ab-card dl div { grid-template-columns: 5.4rem minmax(0, 1fr); } }
@media (min-width: 1100px) {
  .ab-exp { grid-template-columns: minmax(0, 28rem) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: clamp(3rem, 6vw, 6rem); }
  .ab-exp-k { grid-area: 1 / 1; }
    .ab-card { grid-area: 3 / 1; align-self: start; margin-top: 2.6rem; }
  .ab-exp .exp-list { grid-area: 1 / 2 / 4 / 3; margin-top: 0; align-self: start; }
}
.exp-list { margin-top: 1.6rem; border-top: 1px solid var(--line); }
.exp-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.3rem; padding: 1.4rem 0.2rem; border-bottom: 1px solid var(--line); }
.exp-co { font-size: clamp(1.5rem, 2.8vw, 2.4rem); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.015em; }
.exp-role { font-size: 1.15rem; color: var(--ink-2); }
.exp-when, .exp-where { font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }
.exp-item.is-now .exp-when { font-size: 1.1rem; color: var(--accent); }
@media (min-width: 760px) {
  .exp-item { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr) 17.5rem; align-items: baseline; column-gap: 1.5rem; row-gap: 0.4rem; }
  .exp-co { grid-area: 1 / 1; }
  .exp-role { grid-area: 1 / 2; }
  .exp-when { grid-area: 1 / 3; text-align: right; white-space: nowrap; }
  .exp-where { grid-area: 2 / 1; }
}
.faq summary {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0.3rem 1.5rem;
  padding: 1.4rem 0.2rem; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.exp-plus { grid-column: 2; grid-row: 1; position: relative; width: 1.1rem; height: 1.1rem; align-self: center; }
.exp-plus::before, .exp-plus::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: rotate 0.4s var(--ease); }
.exp-plus::after { rotate: 90deg; }
details[open] .exp-plus::after { rotate: 0deg; }
summary:hover > span:first-child { color: var(--accent); }

/* Kind words: handwritten letters on torn, ruled scraps, each signed with a tiny photo */
.kw-list { margin-top: 2.4rem; }
/* home: two kind words under the shots, given plenty of air */
.hk { padding-block: clamp(6rem, 16vh, 11rem); }
.hk-label { text-align: center; }
.hk-list.kw-list { max-width: 64rem; margin: clamp(3rem, 7vh, 4.5rem) auto 0; }
.hk-more { margin-top: clamp(1.5rem, 4vh, 2.5rem); text-align: center; }
.kw { break-inside: avoid; margin-bottom: clamp(2.4rem, 5vw, 3.4rem); }
.kw .kw-sheet { margin: 0; padding: 1.6rem clamp(1.4rem, 3vw, 2.2rem) 1.8rem; gap: 0; }
.kw-mark { display: block; width: 2.2rem; height: auto; margin-bottom: 0.5rem; color: var(--accent); }
/* the letter is written on ruled lines, each line of text just above its rule */
.kw blockquote p {
  font-size: clamp(1.18rem, 1.45vw, 1.32rem); line-height: 2.1rem; color: var(--ink);
  background: repeating-linear-gradient(180deg, transparent 0 calc(2.1rem - 1px), rgba(96, 140, 190, 0.3) calc(2.1rem - 1px) 2.1rem) 0 -0.3rem;
}
.kw-who { display: flex; align-items: center; gap: 1rem; margin-top: 1.4rem; }
.kw-pic { flex: none; padding: 0.25rem 0.25rem 0.7rem; background: var(--pola); rotate: var(--r); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 6px 12px -6px rgba(0, 0, 0, 0.35); }
.kw-pic img { width: 3.2rem; height: 3.2rem; object-fit: cover; }
.kw-sign { display: grid; gap: 0.1rem; }
.kw-sign b { font-weight: 400; font-size: 1.4rem; line-height: 1.2; }
.kw-sign .label { font-size: 0.9rem; line-height: 1.35; letter-spacing: 0.12em; color: var(--faint); }
@media (min-width: 900px) {
  .kw-list { columns: 2; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
}

/* the certificate, clipped into a wide photo frame and shown whole */
.ab-extra { padding-bottom: clamp(5rem, 12vh, 8rem); }
.ab-award { display: grid; gap: 3rem; align-items: center; }
.pola-cert { --pw: min(88vw, 34rem); justify-self: center; }
.pola-cert .pola-photo { background: #fff; }
.pola-cert .pola-photo img { object-fit: contain; filter: none; }
.pola-cert .pola-cap { height: 12cqi; padding-top: 2.6cqi; font-size: 4.6cqi; }
.pola-cert .clip { width: 5cqi; height: 14cqi; top: -6cqi; left: 64%; }
.ab-award h3 { margin-top: 0.5rem; font-size: clamp(1.6rem, 2.4vw, 2.2rem); line-height: 1.2; }
.ab-award-t p:not(.label) { margin-top: 0.6rem; max-width: 30rem; font-size: 1.2rem; line-height: 1.45; color: var(--ink-2); }
@media (min-width: 900px) {
  .ab-award { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); column-gap: clamp(3rem, 6vw, 6rem); }
  .pola-cert { --pw: clamp(26rem, 40vw, 38rem); }
}
/* contact */
.ct { display: grid; gap: 4rem; padding-bottom: clamp(4rem, 10vh, 7rem); }
.ct-ways { display: grid; gap: 2.2rem; align-content: start; }
.ct-way .label { margin-bottom: 0.6rem; }
.ct-mail { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.2rem; font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
.ct-mail a:hover { color: var(--accent); }
.copy { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border: 1px solid var(--line); border-radius: 99px; font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--soft); transition: color 0.2s, border-color 0.2s; }
.copy:hover { color: var(--accent); border-color: currentColor; }
.copy.is-done { color: var(--accent); }
.social-text { gap: 0.4rem; }
.ct-form {
  position: relative; padding: 2rem clamp(1.2rem, 3vw, 2.4rem) 2rem calc(clamp(1.2rem, 3vw, 2.4rem) + 2.2rem);
  background-color: var(--card);
  background-image: linear-gradient(90deg, transparent 2.6rem, rgba(214, 88, 88, 0.4) 2.6rem calc(2.6rem + 1px), transparent calc(2.6rem + 1px));
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.07), 0 26px 50px -34px rgba(0, 0, 0, 0.4);
  rotate: 0.4deg;
}
.field + .field { margin-top: 1.4rem; }
.field label { display: block; font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--faint); }
.field input, .field textarea {
  display: block; width: 100%; margin-top: 0.3rem; padding: 0.3rem 0;
  border: 0; border-bottom: 1px solid rgba(var(--ink-rgb), 0.25); border-radius: 0; background: transparent;
  font-family: var(--hand); font-size: 1.35rem; line-height: 2.2rem; color: var(--ink);
}
.field textarea {
  resize: vertical; min-height: 8.8rem; padding: 0; border-bottom: 0;
  background: repeating-linear-gradient(180deg, transparent 0 calc(2.2rem - 1px), rgba(96, 140, 190, 0.3) calc(2.2rem - 1px) 2.2rem) local;
}
.field input:focus, .field textarea:focus { outline: none; border-bottom-color: var(--accent); }
.field textarea:focus { box-shadow: inset 0 -1px 0 var(--accent); }
.form-error { margin-top: 1rem; font-size: 1.05rem; color: var(--err); }
.form-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; margin-top: 1.8rem; }
.form-note { flex: 1 1 12rem; font-family: var(--serif); font-size: 0.9rem; line-height: 1.5; color: var(--soft); }
@media (min-width: 900px) { .ct { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(3rem, 8vw, 8rem); } }

.faq { padding-bottom: clamp(5rem, 14vh, 9rem); }
.faq-list { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.faq-list li { border-bottom: 1px solid var(--line); }
.faq summary { font-size: clamp(1.25rem, 1.8vw, 1.55rem); line-height: 1.3; }
.faq details p { max-width: 44rem; padding: 0 0.2rem 1.6rem; font-family: var(--serif); font-size: 1rem; line-height: 1.7; color: var(--ink-2); }

.nf { min-height: 70svh; }
.nf .caps-link { margin-top: 2rem; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0s !important; scroll-behavior: auto !important; }
  .js .hero:not(.is-away) .doodle, .wl-row:hover .wl-name, .wl-media img.on { animation: none !important; }
  .js .rv { opacity: 1; transform: none; filter: none; }
  .js .hero .hl, .js .hero .hero-note, .js .hero .hero-now, .js .hero .pola-hero { opacity: 1; filter: none; translate: none; transform: none; }
}

/* ---------- home: personal AI products, the mirror of the hero ---------- */
.ai { position: relative; isolation: isolate; padding: clamp(5rem, 13vh, 9rem) var(--gr) clamp(5rem, 13vh, 9rem) var(--gl); }
.ai::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background-color: var(--paper);
  background-image: url(../img/grain.webp), repeating-linear-gradient(180deg, transparent 0 calc(2.4rem - 1px), var(--rule) calc(2.4rem - 1px) 2.4rem);
  background-size: 256px 256px, auto;
  -webkit-mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
  mask-image: linear-gradient(transparent, #000 16%, #000 84%, transparent);
}
.ai-in { display: grid; justify-items: center; gap: clamp(3rem, 7vh, 4rem); max-width: 76rem; margin-inline: auto; }
.ai-text { max-width: 36rem; }
.ai-h { max-width: 16ch; margin-top: 1rem; font-weight: 300; font-size: clamp(2.2rem, 4.2vw, 4rem); line-height: 1.16; text-wrap: balance; }
.ai-pola { --pw: min(76vw, 24rem); width: var(--pw); }
.ai-t { display: flex; align-items: center; gap: 0.9rem; margin-top: clamp(1.6rem, 4vh, 2.4rem); font-size: clamp(1.5rem, 2.2vw, 2rem); font-weight: 400; }
.ai-live { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.2rem 0.7rem; border: 1px solid var(--line); border-radius: 99px; background: rgba(var(--bg-rgb), 0.6); font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 0.9rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-2); }
.ai-live i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #2fa66a; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.ai-l { max-width: 34rem; margin-top: 0.8rem; font-family: var(--serif); font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2); }
.ai-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 1.8rem; }
@media (min-width: 900px) {
  .ai-in { grid-template-columns: minmax(0, 36rem) auto; justify-content: center; align-items: center; column-gap: clamp(3.5rem, 8vw, 9rem); }
  .ai-pola { --pw: clamp(17rem, 24vw, 27rem); }
}

/* ---------- home: in numbers ---------- */
.stats { padding-block: clamp(3rem, 8vw, 6rem); }
.stats-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.4rem 1.6rem; margin-top: 2rem; }
.stats > .label { text-align: center; }
.stats-list li { display: flex; flex-direction: column; align-items: center; gap: 0.7rem; padding-top: 1.2rem; text-align: center; }
.stat-n { position: relative; width: fit-content; font-weight: 300; font-size: clamp(3rem, 7vw, 6rem); line-height: 1; color: var(--accent); }
.wr > span { display: inline-block; }
.stat-u { position: absolute; left: -4%; bottom: -0.1em; width: 108%; height: 0.16em; overflow: visible; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; opacity: 0.5; }
.stat-u path { vector-effect: non-scaling-stroke; }
/* each character is written left to right, the way a pen moves, then a quick underline */
.js [data-write] .wr > span { clip-path: inset(-25% 100% -25% -12%); }
.js [data-write] .stat-u path { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js [data-write].in .wr > span { animation: write-in 0.5s cubic-bezier(0.55, 0.1, 0.35, 1) forwards; animation-delay: calc(0.15s + var(--s) * 0.55s + var(--c) * 0.24s); }
.js [data-write].in .stat-u path { animation: pen-draw 0.45s ease-in-out forwards; animation-delay: calc(0.5s + var(--s) * 0.55s + var(--n) * 0.24s); }
@keyframes write-in { to { clip-path: inset(-25% -12% -25% -12%); } }
@keyframes pen-draw { to { stroke-dashoffset: 0; } }
.stat-k { max-width: 18ch; font-size: 1.1rem; line-height: 1.35; color: var(--ink-2); text-wrap: balance; }
@media (min-width: 900px) {
  .stats-list { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 0; margin-top: 3rem; }
  .stats-list li + li { border-left: 1.5px dashed rgba(var(--ink-rgb), 0.16); }
}

.wall-sub { margin-bottom: 2rem; }
@media (prefers-reduced-motion: reduce) { .doodle-ladakh .flow, .ai-live i, .doodle-me * { animation: none !important; } .doodle-me .me-scribble { stroke-dashoffset: 0; } }

/* ---------- simple headings in place of paper notes ---------- */
.scrap-wrap { filter: drop-shadow(0 6px 8px rgba(40, 35, 20, 0.18)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)); rotate: var(--t, -1deg); }
.menu-info { margin: 0 0 0.8rem; filter: drop-shadow(0 6px 8px rgba(40, 35, 20, 0.18)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12)); rotate: -1.2deg; }
/* a scrap of torn white paper */
.menu-scrap, .scrap {
  position: relative; display: grid; gap: 1.1rem; padding: 1.6rem 1.4rem 1.5rem;
  background: var(--card) url(../img/grain.webp) 0 0 / 256px 256px; clip-path: polygon(0.0% 1.0%, 4.5% 0.5%, 9.1% 2.1%, 13.6% 0.2%, 18.2% 1.7%, 22.7% 1.2%, 27.3% 0.2%, 31.8% 1.6%, 36.4% 0.1%, 40.9% 1.4%, 45.5% 0.2%, 50.0% 0.3%, 54.5% 1.4%, 59.1% 2.6%, 63.6% 0.4%, 68.2% 0.7%, 72.7% 2.0%, 77.3% 3.0%, 81.8% 1.8%, 86.4% 1.3%, 90.9% 3.1%, 95.5% 0.1%, 100.0% 2.7%, 99.8% 11.1%, 99.9% 22.2%, 99.9% 33.3%, 99.8% 44.4%, 99.3% 55.6%, 99.9% 66.7%, 99.5% 77.8%, 99.5% 88.9%, 100.0% 98.7%, 95.5% 98.0%, 90.9% 99.8%, 86.4% 99.8%, 81.8% 99.3%, 77.3% 97.6%, 72.7% 98.5%, 68.2% 98.9%, 63.6% 97.9%, 59.1% 98.4%, 54.5% 98.9%, 50.0% 97.1%, 45.5% 97.5%, 40.9% 99.1%, 36.4% 97.9%, 31.8% 98.1%, 27.3% 96.8%, 22.7% 97.4%, 18.2% 99.0%, 13.6% 96.5%, 9.1% 99.6%, 4.5% 98.5%, 0.0% 97.3%, 0.1% 88.9%, 0.4% 77.8%, 0.0% 66.7%, 0.5% 55.6%, 0.6% 44.4%, 0.5% 33.3%, 0.7% 22.2%, 0.3% 11.1%);
}
.menu-scrap::before, .scrap::before { content: ''; position: absolute; left: 50%; top: -0.2rem; width: 4.4rem; height: 1.3rem; translate: -50% 0; rotate: 2deg; background: rgba(236, 226, 196, 0.75); }
.menu-mail { font-size: 1.15rem; word-break: break-all; }
.menu-mail:hover { color: var(--accent); }
.menu-now { font-size: 1.1rem; line-height: 1.4; color: var(--ink-2); }
/* text on a paper scrap: the same hand as the Index note */
.scrap { gap: 0.6rem; align-content: start; }
.scrap-t { font-size: 1.2rem; line-height: 1.4; color: var(--ink-2); }
.cta-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 1rem 2.4rem; margin-top: clamp(1.6rem, 4vh, 2.8rem); }
.cta-say { font-size: clamp(1.6rem, 2.6vw, 2.4rem); color: var(--accent); border-bottom: 2px solid currentColor; padding-bottom: 0.1rem; }
.cta-say span { display: inline-block; transition: translate 0.3s var(--ease); }
.cta-say:hover span { translate: 0.3em 0; }
.send-btn { padding: 0.7rem 1.6rem; border: 1.5px solid var(--ink); border-radius: 99px; font-family: var(--hand); font-size: 1.25rem; transition: background 0.2s, color 0.2s; }
.send-btn:hover, .send-btn:focus-visible { background: var(--ink); color: var(--bg); }

/* ---------- home: shots from my work, hung on a line ---------- */
.reel { padding-block: clamp(4rem, 12vh, 8rem) clamp(3rem, 8vh, 5rem); overflow: hidden; }
.reel-label { text-align: center; font-size: 1.1rem; }
.reel-view {
  margin-top: clamp(1.6rem, 4vh, 2.6rem);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.reel-track { display: flex; width: max-content; padding-bottom: 2.8rem; animation: reel 82s linear infinite; }
.reel-view:hover .reel-track { animation-play-state: paused; }
@keyframes reel { to { transform: translateX(-50%); } }
.reel-item { --rw: clamp(14rem, 24vw, 24rem); position: relative; flex: none; width: calc(var(--rw) + 3.2rem); padding: 1.55rem 1.6rem 0; }
.reel-string { position: absolute; left: 0; top: 0; width: 100%; height: 2.2rem; overflow: visible; fill: none; stroke: var(--pencil-2); stroke-width: 1.2; }
.reel-string path { vector-effect: non-scaling-stroke; }
.reel-print {
  position: relative; margin: 0; padding: 0.55rem 0.55rem 1.5rem; background: var(--pola);
  transform-origin: 50% -0.3rem; rotate: var(--t);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 18px 30px -18px rgba(0, 0, 0, 0.35);
  animation: sway var(--sw) ease-in-out infinite alternate;
  transition: translate 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
.reel-item:hover .reel-print { translate: 0 -6px; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08), 0 26px 38px -20px rgba(0, 0, 0, 0.4); }
@keyframes sway { from { rotate: calc(var(--t) - 1.1deg); } to { rotate: calc(var(--t) + 1.1deg); } }
.reel-print img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--ph); }
/* each print hangs from the line by a paperclip */
.reel-print { container-type: inline-size; }
.reel-clip { left: 50%; top: -12cqi; translate: -50% 0; rotate: 4deg; }
@media (prefers-reduced-motion: reduce) { .reel-view { overflow-x: auto; -webkit-mask-image: none; mask-image: none; } }

/* ---------- home: what I do, like the contents page of a notebook ---------- */
.skills { padding-block: clamp(4rem, 12vh, 8rem) clamp(2rem, 6vh, 4rem); }
.sk-label { text-align: center; font-size: 1.1rem; }
.sk-list { max-width: 60rem; margin: clamp(1.8rem, 4.5vh, 2.8rem) auto 0; }
.sk-list li { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: baseline; column-gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid var(--line); }
.sk-n { font-family: var(--caps); -webkit-text-stroke: 0.35px currentColor; font-size: 1rem; letter-spacing: 0.16em; color: var(--accent); }
.sk-t { font-size: clamp(1.6rem, 3.2vw, 2.6rem); line-height: 1.2; transition: color 0.25s; }
.sk-dots { display: none; }
.sk-d { grid-column: 2; margin-top: 0.15rem; font-size: 1.15rem; line-height: 1.35; color: var(--soft); }
.sk-list li:hover .sk-t { color: var(--accent); }
@media (min-width: 760px) {
  .sk-list li { grid-template-columns: 3rem auto minmax(2rem, 1fr) auto; padding: 0.75rem 0; border-bottom: 0; }
  .sk-dots { display: block; height: 3px; margin: 0 0.5rem; translate: 0 -0.35em; background: radial-gradient(circle, rgba(var(--ink-rgb), 0.42) 1px, transparent 1.4px) 0 0 / 9px 3px repeat-x; }
  .sk-d { grid-column: auto; margin: 0; text-align: right; }
}
.brands { margin-top: clamp(4rem, 10vh, 6.5rem); text-align: center; }
.brands-label { font-size: 1.05rem; }
.brands-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: clamp(1.8rem, 3.6vw, 3.4rem) clamp(2.2rem, 5vw, 4.6rem); max-width: 50rem; margin: clamp(1.8rem, 4.5vh, 2.6rem) auto 0; }
.brands-list img { height: var(--h); width: auto; max-width: 10rem; mix-blend-mode: multiply; transition: translate 0.3s var(--ease); }
/* night: the ink logos turn chalk-light */
:root[data-theme="dark"] .brands-list img, :root[data-theme="dark"] .bl-word img { filter: grayscale(1) invert(1) brightness(0.88); mix-blend-mode: lighten; }
.brands-list li:hover img { translate: 0 -3px; }

/* ---------- first visit: a pencil draws the hero in ---------- */
.pola-sketch { display: none; }
/* the headline: rough guide lines and letter outlines are sketched in from left to right, then the ink fills them */
.intro .hl-line {
  position: relative; padding-block: 0.18em; margin-block: -0.18em;
  -webkit-text-stroke: 1.1px transparent;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent 60%); mask-image: linear-gradient(90deg, #000 40%, transparent 60%);
  -webkit-mask-size: 260% 100%; mask-size: 260% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: text-sketch 1.15s ease-in-out var(--sd) both, text-ink 0.9s ease var(--id) both;
}
.intro .hl-line::after {
  content: ''; position: absolute; left: -3%; right: -6%; bottom: 0.22em; height: 0.34em; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%23707070' stroke-linecap='round'%3E%3Cpath d='M2 8C50 6 120 9.5 198 6.5' stroke-width='1.3' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M10 15c45-1.5 100 1 150-1' stroke-width='.9' vector-effect='non-scaling-stroke' opacity='.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  animation: fade-out 0.8s ease var(--id) forwards;
}
@keyframes text-sketch { from { -webkit-mask-position: 100% 0; mask-position: 100% 0; } to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
@keyframes text-ink { from { color: transparent; -webkit-text-stroke-color: var(--icon); } to { color: var(--ink); -webkit-text-stroke-color: transparent; } }
.intro .hl-a .hl-line { --sd: 0.35s; --id: 1.9s; }
.intro .hl-b .hl-line { --sd: 0.85s; --id: 2.1s; }
/* the note is written in line by line, left to right, with no pencil in the way */
.intro .hero-note { animation: none; }
.intro .hero-note:not(.is-split) { opacity: 0; }
.intro .hero-note .nl { display: inline-block; clip-path: inset(-30% 100% -30% -3%); animation: note-write 0.6s cubic-bezier(0.45, 0.1, 0.55, 0.95) 2.35s both; }
@keyframes note-write { to { clip-path: inset(-30% -3% -30% -3%); } }
.intro .hero-now { animation: rise 1.1s var(--ease) 2.85s backwards; }
.intro .hd { animation: fade-in 0.9s ease 2.7s backwards; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes fade-out { to { opacity: 0; } }
/* the photo is outlined first, then the print fades in over the lines and develops from pencil grey */
.intro .pola-sketch { display: block; position: absolute; z-index: 3; inset: -3% -3% -2%; width: 106%; height: 105%; overflow: visible; color: var(--icon); pointer-events: none; }
.intro .pola-sketch path { stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; animation: pen-draw 1s ease-in-out 0.5s forwards, fade-out 0.9s ease 2.4s forwards; }
.intro .pola-sketch path:nth-child(2) { animation-delay: 1.15s, 2.4s; animation-duration: 0.9s, 0.9s; }
.intro .pola-sketch path:nth-child(3) { animation-delay: 1.6s, 2.4s; animation-duration: 0.45s, 0.9s; }
.js.intro .hero .pola-hero:not(.is-in) { opacity: 1; translate: none; rotate: var(--r); background-color: transparent; box-shadow: none; }
.js.intro .hero .pola-hero > :not(.pola-sketch), .js.intro .hero .pola-hero::after { transition: opacity 1s ease; }
.js.intro .hero .pola-hero:not(.is-in) > :not(.pola-sketch), .js.intro .hero .pola-hero:not(.is-in)::after { opacity: 0; }
.intro .pola-hero .pola-photo img.on { animation: develop 2.2s ease 1.9s backwards; }
@keyframes develop { from { filter: grayscale(1) contrast(1.5) brightness(1.1); } }
/* the lake, the stupa, the birds and the little me are drawn line by line */
.intro .doodle [pathLength]:not(.me-scribble) { stroke-dasharray: 1; animation: pen-from 1.5s ease-in-out var(--dd, 0.6s) backwards; }
@keyframes pen-from { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.intro .doodle-ladakh { --dd: 0.4s; }
.intro .doodle-me { --dd: 0.9s; }
.intro .doodle-mono { --dd: 1.2s; }
.intro .doodle-birds { --dd: 1.6s; }
.intro .doodle .flow { animation: flow 9s linear infinite, fade-in 1.4s ease 1.4s backwards; }
.intro-done .hl-line, .intro-done .hero-note, .intro-done .hero-now { animation: none; }

/* ---------- a pencil cursor, drawn to match the site ---------- */
/* The page draws its own pencil that follows the mouse (assets/js/site.js), so it never drops out.
   Until the mouse first moves, and without scripts, the browser shows the same pencil as its cursor. */
@media (hover: hover) and (pointer: fine) {
  html { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(45 16 16)' stroke='%232b2118' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M8 12.2h17v7.6H8z' fill='%23ef8a3c'/%3E%3Cpath d='M8 16h17' stroke='%23c96a22' stroke-width='.8'/%3E%3Cpath d='M25 12.2h2.6v7.6H25z' fill='%23c9ccd0'/%3E%3Cpath d='M27.6 12.2h2.4a1.4 1.4 0 0 1 1.4 1.4v4.8a1.4 1.4 0 0 1-1.4 1.4h-2.4z' fill='%23f4a6ae'/%3E%3Cpath d='M8 12.2 1 15v2l7 2.8z' fill='%23f3dcb6'/%3E%3Cpath d='M1 15l-4.6 1L1 17z' fill='%232b2118'/%3E%3C/g%3E%3C/svg%3E") 2 2, auto; }
  a, button, summary, label, [role='button'], .pola-photo { cursor: inherit; }
  input, textarea { cursor: text; }
  html.has-pen, html.has-pen *:not(input):not(textarea):not(select) { cursor: none !important; }
}
.pen-cursor { position: fixed; z-index: 2147483000; left: 0; top: 0; width: 32px; height: 32px; margin: -2px 0 0 -2px; pointer-events: none; opacity: 0; transition: opacity 0.2s; }
.pen-cursor i {
  display: block; width: 100%; height: 100%; transform-origin: 2px 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cg transform='rotate(45 16 16)' stroke='%232b2118' stroke-width='1.1' stroke-linejoin='round'%3E%3Cpath d='M8 12.2h17v7.6H8z' fill='%23ef8a3c'/%3E%3Cpath d='M8 16h17' stroke='%23c96a22' stroke-width='.8'/%3E%3Cpath d='M25 12.2h2.6v7.6H25z' fill='%23c9ccd0'/%3E%3Cpath d='M27.6 12.2h2.4a1.4 1.4 0 0 1 1.4 1.4v4.8a1.4 1.4 0 0 1-1.4 1.4h-2.4z' fill='%23f4a6ae'/%3E%3Cpath d='M8 12.2 1 15v2l7 2.8z' fill='%23f3dcb6'/%3E%3Cpath d='M1 15l-4.6 1L1 17z' fill='%232b2118'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 100% 100% no-repeat;
  transition: scale 0.25s var(--spring), rotate 0.35s var(--spring);
}
.has-pen .pen-cursor.is-on { opacity: 1; }
.pen-cursor.is-link i { scale: 1.15; rotate: -10deg; }
.pen-cursor.is-down i { scale: 0.88; rotate: 4deg; }

/* ---------- the menu: a hand-drawn ruled sheet floating on the left ----------
   The paper and its pencil outline sit on ::before and go through the rough-paper wobble filter (in the page's FX
   svg), so no edge or line is straight; the panel itself only carries the shadow. */
.menu-panel { top: 1.2rem; bottom: 1.2rem; left: 1.2rem; width: min(26rem, calc(100vw - 2.4rem)); height: auto; padding: 2rem 1.8rem 1.6rem;
  overflow: visible; background: none; box-shadow: none; isolation: isolate; filter: drop-shadow(0 14px 20px rgba(40, 35, 20, 0.2));
  transform: translateX(calc(-100% - 2rem)) rotate(-2deg); }
.menu.is-open .menu-panel { transform: rotate(-0.8deg); }
.menu-panel::before { content: ''; position: absolute; inset: 0.3rem; z-index: -1; background-color: var(--card);
  background-image: linear-gradient(rgba(220, 80, 70, 0.55), rgba(220, 80, 70, 0.55)), repeating-linear-gradient(180deg, transparent 0 calc(2.4rem - 1.5px), rgba(96, 140, 190, 0.3) calc(2.4rem - 1.5px) 2.4rem);
  background-size: 100% 1.5px, 100% 100%; background-position: 0 3.9rem, 0 3.9rem; background-repeat: no-repeat, repeat;
  border: 1.8px solid rgba(var(--ink-rgb), 0.75); border-radius: 6px 14px 8px 18px / 16px 6px 14px 8px; filter: url(#rough-paper); }
.menu-panel::after { content: ''; position: absolute; left: 1.4rem; top: -0.4rem; width: 4.8rem; height: 1.5rem; rotate: -16deg; background: rgba(232, 222, 190, 0.88); z-index: 1; filter: url(#rough-paper); }
.menu-info { rotate: 0deg; filter: none; margin: 0; }
.menu-scrap { background: none; clip-path: none; padding: 1rem 0 0; border-top: 1.5px dashed rgba(var(--ink-rgb), 0.2); }
.menu-scrap::before { display: none; }
@media (min-width: 768px) { .menu-panel { width: min(26rem, calc(100vw - 2.4rem)); padding-right: 1.8rem; } }