/* ==========================================================
   Nikita Joseph — Portfolio
   Part design journal, part career road trip, part noticeboard.
   ========================================================== */

:root {
  /* surfaces + text */
  --bg: #f6f1e8;
  --paper: #fbf8f2;
  --surface: #ffffff;
  --board: #efe6d6;
  --line: #e4dbcc;
  --line-strong: #cfc3b0;
  --text: #26221f;
  --ink: #3a3430;
  --muted: #706860;

  /* sticky notes (text on notes is always dark) */
  --note-ink: #2a2522;
  --note-yellow: #f3e3a6;
  --note-coral: #efbfae;
  --note-blue: #c8d7e6;
  --note-sage: #cddcbd;
  --note-glow: transparent;

  /* paint palette, borrowed from Nikita's watercolours */
  --p-magenta: #c8457f;
  --p-cobalt: #3456a3;
  --p-lime: #9cbf4a;
  --p-orange: #e58a3a;
  --p-mustard: #e2b23d;
  --p-violet: #6a4ba0;
  --wash-opacity: .55;

  --p-teal: #2f8f86;
  --p-cobalt-hi: #4a76d6;
  --p-violet-hi: #8b65c9;
  --block-opacity: .88;
  --bleed-opacity: .32;

  /* illustration */
  --skin: #c27a35;
  --skin-shade: #7e3d16;
  --skin-light: #f0b863;
  --hair: #17110f;
  --top: #cf7478;
  --outline: #1d1a2a;
  --ink-stroke: #26221f;

  /* career map */
  --route: #3a6fd8;
  --route-planned: #b6c1d6;
  --map-land: #efe7d8;
  --map-street: #fbf7ef;
  --map-water: #c8d8ea;
  --map-park: #d5e2bd;

  --accent: #b5573d;
  --road: #d9cfbf;
  --road-line: #fbf8f2;

  --serif: "Fraunces", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --hand: "Caveat", "Bradley Hand", cursive;

  --max: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --radius: 14px;
  --ease: cubic-bezier(.22, .8, .24, 1);
  --shadow-note: 0 1px 1px rgba(38, 34, 31, .06), 0 8px 18px -10px rgba(38, 34, 31, .35);
  --shadow-lift: 0 2px 2px rgba(38, 34, 31, .06), 0 20px 34px -14px rgba(38, 34, 31, .42);
  --grain-opacity: .35;
  --grain-blend: multiply;

  color-scheme: light only;
}



*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color .4s ease, color .4s ease;
}

/* paper grain over everything, very faint */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 100;
  opacity: var(--grain-opacity);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .4 0 0 0 0 .33 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

h1, h2, h3 { font-family: var(--serif); font-weight: 400; line-height: 1.08; letter-spacing: -.02em; margin: 0; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

.skip-link { position: absolute; left: -9999px; top: 12px; z-index: 200; background: var(--text); color: var(--bg); padding: 8px 14px; border-radius: 8px; }
.skip-link:focus { left: 12px; }

.svg-defs { position: absolute; width: 0; height: 0; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, background-color .4s ease;
}
.site-header.scrolled { border-bottom-color: var(--line); }

.nav { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 20px; }

.brand { font-family: var(--serif); font-size: 1.2rem; text-decoration: none; display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }

.nav-right { display: flex; align-items: center; gap: clamp(14px, 2.6vw, 32px); }
.nav-links { display: flex; gap: clamp(14px, 2.6vw, 32px); list-style: none; margin: 0; padding: 0; }
.nav-links a { position: relative; text-decoration: none; color: var(--muted); font-size: .95rem; transition: color .2s ease; }
.nav-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1.5px; background: var(--text); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); }
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); }


/* the record player: a little vinyl disc that spins while music plays */
.music-toggle {
  position: relative;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer;
  transition: transform .3s var(--ease);
}
.music-toggle:hover { transform: scale(1.06); }
.music-toggle .disc {
  position: relative;
  width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .22), transparent 40%, transparent 60%, rgba(255, 255, 255, .12)),
    repeating-radial-gradient(circle, #1b1820 0 1.6px, #2a2630 1.6px 2.6px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25), inset 0 0 0 1px rgba(255, 255, 255, .06);
  animation: spin 2.4s linear infinite;
  animation-play-state: paused;
}
.music-toggle .disc-label {
  width: 14px; height: 14px; border-radius: 50%;
  background: conic-gradient(var(--p-magenta), var(--p-orange), var(--p-mustard), var(--p-lime), var(--p-cobalt), var(--p-magenta));
  display: grid; place-items: center;
}
.music-toggle .disc-label::after { content: ""; width: 3px; height: 3px; border-radius: 50%; background: var(--bg); }
.music-toggle.is-playing .disc { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }
/* little notes drift up while it plays */
.music-toggle::before, .music-toggle::after {
  content: "\266A"; position: absolute; top: -4px; font-size: 13px; color: var(--muted);
  opacity: 0; pointer-events: none;
}
.music-toggle::before { left: -6px; }
.music-toggle::after { right: -8px; content: "\266B"; }
.music-toggle.is-playing::before { animation: note-up 2.6s ease-out infinite; }
.music-toggle.is-playing::after { animation: note-up 2.6s ease-out 1.3s infinite; }
@keyframes note-up { 0% { opacity: 0; transform: translateY(6px); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateY(-14px); } }

/* ---------- Shared ---------- */
.label { display: inline-block; font-size: .76rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 0 0 18px; }

.section { padding: clamp(88px, 12vw, 148px) 0; position: relative; }
.section-alt { background: var(--paper); border-block: 1px solid var(--line); }

.section-head { max-width: 680px; margin-bottom: clamp(44px, 6vw, 72px); }
.section-head h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); }
.section-head p { color: var(--muted); font-size: 1.08rem; margin: 18px 0 0; max-width: 36em; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 24px; border-radius: 999px;
  border: 1px solid var(--text);
  font: 500 .95rem/1 var(--sans);
  text-decoration: none; cursor: pointer;
  background: transparent; color: var(--text);
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--text); color: var(--bg); }
.btn-ghost:hover { background: var(--text); color: var(--bg); }
.btn .arrow { transition: transform .2s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 11px; border-radius: 999px;
  border: 1px solid var(--line-strong);
  background: var(--paper);
  font-size: .78rem; font-weight: 500; color: var(--ink);
  white-space: nowrap;
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--c, var(--line-strong)); }

.wash { position: absolute; pointer-events: none; border-radius: 50%; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); opacity: var(--wash-opacity); }

.reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

@keyframes draw { to { stroke-dashoffset: 0; } }

/* ==========================================================
   1. Hero
   ========================================================== */
.hero { padding: clamp(32px, 5vw, 64px) 0 clamp(80px, 10vw, 128px); text-align: center; overflow: hidden; }

.hero-label {
  display: inline-flex; padding: 7px 16px;
  border: 1px solid var(--line-strong); border-radius: 999px;
  background: var(--paper);
  margin-bottom: clamp(16px, 2.4vw, 28px);
}

/* the stage holds the character, the headline, and the working wall around her */
.headline-wrap {
  position: relative;
  font-size: clamp(2.5rem, 6.6vw, 5.4rem);
  padding-top: 4.94em;
}
.hero h1 { font-size: 1em; line-height: 1.04; letter-spacing: -.03em; position: relative; z-index: 2; max-width: 12.4em; margin: 0 auto; }

.scribble-word { position: relative; white-space: nowrap; }
.scribble-word svg { position: absolute; left: -2%; bottom: -.1em; width: 104%; height: .26em; color: var(--p-orange); opacity: .8; }
.scribble-word path { stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.2s 1.1s var(--ease) forwards; }

/* --- Nikita's painted portrait, leaning on the headline --- */
.girl {
  position: absolute; left: 50%; top: 0;
  width: 5.6em;
  transform: translateX(-50%);
  /* only the bottom is clipped, so she rises from behind the words
     while the soft edges spill out freely at the top and sides */
  clip-path: inset(-40% -40% 0 -40%);
  pointer-events: none;
  z-index: 3;
  will-change: transform;   /* keep the painted portrait on its own layer */
}
.girl svg { display: block; width: 100%; height: auto; overflow: visible; }
.girl .rise { animation: rise 1.2s .25s cubic-bezier(.2, .9, .25, 1.05) both; }
@keyframes rise { from { transform: translateY(72%); } to { transform: none; } }

/* the painting's colours bleeding out into the page */
.hero-bleed { position: absolute; left: 50%; top: 0; width: 7.6em; height: 5.6em; transform: translateX(-50%); pointer-events: none; z-index: 0; }
.hero-bleed span {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  border-radius: 50%;
  background: var(--c);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent);
  opacity: 0;
  animation: bleed 1.6s var(--ease) .5s forwards, breathe 12s ease-in-out var(--d) infinite;
}
@keyframes bleed { from { opacity: 0; transform: scale(.6); } to { opacity: var(--bleed-opacity); transform: none; } }
@keyframes breathe { 0%, 100% { translate: 0 0; scale: 1; } 50% { translate: 6px -4px; scale: 1.05; } }

.hero-intro { max-width: 37em; margin: clamp(28px, 4vw, 40px) auto 0; font-size: 1.1rem; color: var(--ink); }
.hero-intro + .hero-intro { margin-top: .8em; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 32px 0 0; }

.proof-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; list-style: none; padding: 0; margin: clamp(40px, 6vw, 60px) auto 0; font-size: .9rem; color: var(--muted); }
.proof-strip li { display: inline-flex; align-items: center; }
.proof-strip li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--line-strong); margin: 0 14px; }
.proof-strip strong { color: var(--text); font-weight: 600; margin-right: 4px; }

/* ==========================================================
   2. Selected work — the journal
   ========================================================== */
.work-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); align-items: end; gap: clamp(28px, 5vw, 64px); margin-bottom: clamp(56px, 7vw, 88px); }
.work-head .section-head { margin-bottom: 0; }

/* little ship: a line drawing that gently rocks */
.ship-scene svg { display: block; width: 100%; height: auto; overflow: visible; }
.ship-scene .ship-note { display: block; text-align: right; margin-top: 4px; font-family: var(--hand); font-size: 1.25rem; color: var(--muted); }
.ship-scene .ln { fill: none; stroke: var(--ink-stroke); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ship-scene .flag { fill: var(--p-lime); fill-opacity: .55; transform-box: fill-box; transform-origin: left center; animation: flutter 1.2s ease-in-out infinite alternate; }
.ship-scene .tick { stroke: var(--p-lime); stroke-width: 2.4; }
.ship-scene .gull { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-linecap: round; }
.ship-scene .g1 { animation: gull 9s ease-in-out infinite; }
.ship-scene .g2 { animation: gull 11s ease-in-out -3s infinite; }
@keyframes gull { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(14px, -5px); } }
.ship-scene .ship { animation: sail 10s ease-in-out infinite; }
@keyframes sail { 0%, 100% { transform: translateX(-18px); } 50% { transform: translateX(18px); } }
.ship-scene .ship-rock { transform-box: view-box; transform-origin: 160px 140px; animation: rock 3.2s ease-in-out infinite; }
@keyframes rock { 0%, 100% { transform: rotate(-3deg) translateY(0); } 50% { transform: rotate(3deg) translateY(3px); } }
@keyframes flutter { from { transform: scaleX(1) skewY(0deg); } to { transform: scaleX(.86) skewY(-6deg); } }
.ship-scene .draw-in { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ship-scene.is-in .draw-in { animation: draw 1.4s var(--ease) .2s forwards; }

/* journal — a real notebook: cloth cover, wire-o binding, dot-grid pages */
.journal { position: relative; padding-right: 118px; --page: #fbf7ee; --page-ink: #2b2622; --page-muted: #6f675e; --page-line: #e6dccb; --cover: #33425f; }

/* index tabs sticking out of the right edge of the notebook */
.bookmarks { position: absolute; top: 54px; right: 0; display: flex; flex-direction: column; gap: 8px; z-index: 0; }
.bookmark {
  position: relative;
  border: 0; cursor: pointer;
  width: 178px;
  height: 58px;
  padding: 0 10px 0 86px;
  display: flex; flex-direction: column; justify-content: center;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .07), transparent 32%),
    var(--bm);
  color: #2b2622;
  font: 600 .8rem/1.15 var(--sans);
  text-align: left;
  border-radius: 0 10px 10px 0;
  box-shadow: 1px 1px 2px rgba(0, 0, 0, .08), 0 6px 14px -10px rgba(0, 0, 0, .35);
  transform: translateX(-18px);
  transition: transform .35s var(--ease);
}
.bookmark small { display: block; font-family: var(--hand); font-weight: 600; font-size: 1rem; opacity: .7; }
.bookmark:hover { transform: translateX(-9px); }
.bookmark[aria-selected="true"] { transform: translateX(0); }

/* the cover peeks out around the pages, with an elastic strap */
.book-cover {
  position: relative;
  z-index: 1;
  padding: 14px;
  border-radius: 18px 22px 22px 18px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .025) 0 2px, transparent 2px 5px),
    var(--cover);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .6), 0 8px 18px -10px rgba(0, 0, 0, .35);
}
.book-cover::after {
  /* elastic strap */
  content: ""; position: absolute; top: -6px; bottom: -6px; right: 46px; width: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #1a2133, #2b3550 45%, #1a2133);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  z-index: 4;
  pointer-events: none;
}

.book {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  min-height: 640px;
  perspective: 2200px;
  color: var(--page-ink);
}
.page {
  position: relative;
  padding: clamp(30px, 4vw, 54px) clamp(30px, 4vw, 56px);
  background-color: var(--page);
  /* dot grid + faint paper fibres */
  background-image:
    radial-gradient(circle, rgba(60, 50, 40, .18) 1px, transparent 1.3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .34 0 0 0 0 .26 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  background-size: 22px 22px, 160px 160px;
}
.page.left { border-radius: 8px 0 0 8px; box-shadow: inset -26px 0 30px -24px rgba(60, 40, 20, .35); }
.page.right { border-radius: 0 8px 8px 0; box-shadow: inset 26px 0 30px -24px rgba(60, 40, 20, .35); }
/* stacked page edges */
.book::before {
  content: ""; position: absolute; left: 4px; right: 4px; bottom: -5px; height: 8px; z-index: -1;
  background: repeating-linear-gradient(180deg, var(--page) 0 1px, #d9cdb8 1px 2px);
  border-radius: 0 0 8px 8px;
}

/* wire-o binding down the middle */
.spiral {
  position: absolute; top: 18px; bottom: 18px; left: 50%; width: 30px; margin-left: -15px; z-index: 3;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='24'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' x2='1'%3E%3Cstop offset='0' stop-color='%23767b85'/%3E%3Cstop offset='.5' stop-color='%23e9ecf0'/%3E%3Cstop offset='1' stop-color='%23767b85'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='6' cy='12' r='2.6' fill='%23463c33' opacity='.55'/%3E%3Ccircle cx='24' cy='12' r='2.6' fill='%23463c33' opacity='.55'/%3E%3Crect x='5' y='8.5' width='20' height='5' rx='2.5' fill='url(%23g)'/%3E%3C/svg%3E") center top / 30px 24px repeat-y;
}

/* the page that turns when you pick another bookmark */
.turner {
  position: absolute; top: 0; bottom: 0; width: 50%; z-index: 5;
  overflow: hidden;
  background: var(--page);
  pointer-events: none;
  opacity: 0;
  backface-visibility: hidden;
}
.turner > .page { position: absolute; inset: 0; border-radius: inherit; }
.book.turn-next .turner { left: 50%; transform-origin: left center; border-radius: 0 8px 8px 0; animation: turn-next .7s cubic-bezier(.45, .05, .3, 1) forwards; }
.book.turn-prev .turner { left: 0; transform-origin: right center; border-radius: 8px 0 0 8px; animation: turn-prev .7s cubic-bezier(.45, .05, .3, 1) forwards; }
@keyframes turn-next {
  0% { opacity: 1; transform: rotateY(0); box-shadow: inset 0 0 0 rgba(0, 0, 0, 0); }
  50% { box-shadow: inset 40px 0 50px -20px rgba(0, 0, 0, .25); }
  99% { opacity: 1; transform: rotateY(-178deg); }
  100% { opacity: 0; transform: rotateY(-180deg); }
}
@keyframes turn-prev {
  0% { opacity: 1; transform: rotateY(0); }
  50% { box-shadow: inset -40px 0 50px -20px rgba(0, 0, 0, .25); }
  99% { opacity: 1; transform: rotateY(178deg); }
  100% { opacity: 0; transform: rotateY(180deg); }
}

.entry { display: none; }
.entry:not([hidden]) { display: contents; }

.entry .num { display: block; width: fit-content; font-family: var(--hand); font-size: 1.45rem; color: var(--page-muted); transform: rotate(-2deg); }
.entry h3 { font-size: clamp(2rem, 3.4vw, 2.7rem); margin: 6px 0 14px; color: var(--page-ink); position: relative; display: inline-block; isolation: isolate; }
.entry h3::after {
  /* a highlighter swipe under the title */
  content: ""; position: absolute; left: -4px; right: -6px; bottom: .08em; height: .38em; z-index: -1;
  background: var(--bm); opacity: .95; border-radius: 3px; transform: rotate(-.8deg);
}
.entry .product { margin: -6px 0 14px; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--page-muted); }
.entry .desc { font-size: 1.06rem; color: var(--page-ink); margin: 0 0 24px; max-width: 27em; }
.entry .meta { display: grid; grid-template-columns: auto 1fr; gap: 8px 18px; margin: 0 0 22px; font-size: .94rem; }
.entry .meta dt { font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--page-muted); padding-top: 3px; }
.entry .meta dd { margin: 0; }
.entry .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 28px; }
.entry .tags .chip { background: rgba(255, 255, 255, .6); color: var(--page-ink); border-color: var(--page-line); }
.entry .btn-primary { background: var(--page-ink); color: var(--page); border-color: var(--page-ink); }

.entry .page.right { display: grid; place-items: center; align-content: center; gap: 4px; }
/* the project screen, printed and taped onto the page */
.print {
  position: relative;
  width: 100%;
  background: #fff;
  padding: 10px 10px 12px;
  border-radius: 3px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .08), 0 14px 26px -16px rgba(40, 30, 20, .55);
  transform: rotate(1.4deg);
  transition: transform .5s var(--ease);
}
.print:hover { transform: rotate(0deg) translateY(-3px); }
.print .tape {
  position: absolute; width: 86px; height: 24px; top: -11px;
  background: rgba(236, 226, 204, .78);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1);
  -webkit-mask-image: linear-gradient(90deg, transparent 0 3%, #000 3% 97%, transparent 97%);
}
.print .tape.t1 { left: -12px; transform: rotate(-32deg); }
.print .tape.t2 { right: -12px; transform: rotate(30deg); }
.thumb {
  position: relative; width: 100%;
  aspect-ratio: 16 / 11;
  background: #fbf9f4;
  overflow: hidden;
  container-type: inline-size;
}
.thumb::before { content: ""; position: absolute; inset: 12% 8% -12%; background: var(--bm); -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); opacity: 0; transition: opacity .6s ease; }
.print:hover .thumb::before { opacity: .7; }
.thumb .sketch, .thumb .ui { position: absolute; inset: 0; transition: opacity .55s ease, transform .7s var(--ease), filter .7s ease; }
.thumb .sketch { display: grid; place-items: center; padding: 6%; }
.thumb .sketch svg { width: 100%; height: 100%; }
.thumb .sketch .ln { fill: none; stroke: #3a3430; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; filter: url(#rough); }
.thumb .sketch .note-hand { font-family: var(--hand); font-size: 13px; fill: #706860; }
.thumb .ui { opacity: 0; transform: scale(.97); filter: blur(3px); display: grid; place-items: center; padding: 6% 8%; }
.print:hover .sketch { opacity: 0; transform: scale(1.03); filter: blur(2px); }
.print:hover .ui { opacity: 1; transform: none; filter: none; }
.thumb-hint { margin: 16px 0 0; font-family: var(--hand); font-size: 1.2rem; color: var(--page-muted); text-align: center; }
.thumb-hint::before { content: "↑ "; }
@media (hover: none) {
  .thumb .sketch { opacity: 0; }
  .thumb .ui { opacity: 1; transform: none; filter: none; }
  .thumb-hint { display: none; }
}

/* mini product UIs (container units, so they scale with the thumbnail) */
.mini { width: 100%; max-width: 88cqw; background: #fff; color: #26221f; border-radius: 2.2cqw; box-shadow: 0 1px 2px rgba(38, 34, 31, .08), 0 2.5cqw 5cqw -2cqw rgba(38, 34, 31, .28); padding: 3.4cqw; font-size: 2.4cqw; line-height: 1.3; position: relative; }
.mini .row { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; }
.mini .muted { color: #706860; }
.mini .big { font-family: var(--serif); font-size: 4.6cqw; letter-spacing: -.02em; }
.mini .pill { display: inline-block; padding: .35em .8em; border-radius: 999px; font-weight: 600; font-size: 1.9cqw; }
.mini .gain { color: #3f7a52; }
.mini .loss { color: #b5573d; }
.mini .hr { height: 1px; background: #e4dbcc; margin: 2cqw 0; }
.mini svg.chart { width: 100%; height: 13cqw; display: block; margin: 1.6cqw 0; }
.mini svg.chart path { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.mini .bar { height: 1.4cqw; border-radius: 99px; background: #e4dbcc; overflow: hidden; display: flex; }
.mini .bar i { display: block; height: 100%; }
.mini .btns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw; margin-top: 2cqw; }
.mini .btns span { text-align: center; padding: 1.5cqw; border-radius: 1.4cqw; font-weight: 600; font-size: 2.2cqw; }
.mini .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6cqw; }
.mini .kpi { background: #f6f1e8; border-radius: 1.4cqw; padding: 1.8cqw; }
.mini .kpi b { display: block; font-family: var(--serif); font-weight: 400; font-size: 3.6cqw; margin-top: .3em; }
.mini .bars { display: flex; align-items: flex-end; gap: 1.2cqw; height: 13cqw; margin-top: 2.4cqw; }
.mini .bars i { flex: 1; border-radius: .8cqw .8cqw 0 0; background: #c8d7e6; }
.mini .bars i:nth-child(odd) { background: #8fa9d6; }
.mini table { width: 100%; border-collapse: collapse; font-size: 2.1cqw; }
.mini td { padding: .9cqw 0; }
.mini td:last-child { text-align: right; }
.mini .seg { display: grid; grid-template-columns: 1fr 1fr; background: #f6f1e8; border-radius: 1.4cqw; padding: .6cqw; margin-bottom: 2cqw; }
.mini .seg span { text-align: center; padding: 1cqw; border-radius: 1cqw; font-weight: 600; }
.mini .seg .on { background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); color: #3f7a52; }
.mini .field { display: flex; justify-content: space-between; border: 1px solid #e4dbcc; border-radius: 1.2cqw; padding: 1.4cqw 1.8cqw; margin-bottom: 1.4cqw; }
.mini .bubble-ai { background: #f6f1e8; border-radius: 1.6cqw 1.6cqw 1.6cqw .4cqw; padding: 1.6cqw 2cqw; margin-bottom: 1.4cqw; max-width: 80%; }
.mini .bubble-me { background: #26221f; color: #f6f1e8; border-radius: 1.6cqw 1.6cqw .4cqw 1.6cqw; padding: 1.6cqw 2cqw; margin: 0 0 1.4cqw auto; max-width: 70%; width: fit-content; }
.mini .voice { display: flex; align-items: center; gap: .6cqw; height: 5cqw; margin-top: 1cqw; }
.mini .voice i { width: .7cqw; border-radius: 99px; background: #6a4ba0; }

/* ==========================================================
   4. Awards
   ========================================================== */
.awards-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 32px); }
.award {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr; gap: 24px; align-items: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-note);
  transition: transform .4s var(--ease), box-shadow .4s ease;
}
.award:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.award .wash { width: 220px; height: 160px; right: -60px; top: -50px; background: var(--aw); }
.award svg { width: 96px; height: 120px; position: relative; }
.award .rib-a { fill: var(--p-magenta); stroke: var(--outline); stroke-width: 1.2; }
.award .rib-b { fill: var(--p-cobalt); stroke: var(--outline); stroke-width: 1.2; }
.award .medal { fill: var(--p-mustard); stroke: var(--outline); stroke-width: 1.4; }
.award .medal-in { fill: none; stroke: var(--outline); stroke-width: 1.2; stroke-dasharray: 2 3; }
.award .medal-star { fill: var(--surface); stroke: var(--outline); stroke-width: 1.2; }
.award .hand-a { fill: var(--p-orange); stroke: var(--outline); stroke-width: 1.3; }
.award .hand-b { fill: var(--p-lime); stroke: var(--outline); stroke-width: 1.3; }
.award h3 { font-size: clamp(1.5rem, 2.6vw, 1.9rem); margin-bottom: 8px; position: relative; }
.award p { margin: 0; color: var(--muted); position: relative; }

/* ==========================================================
   5. Noticeboard
   ========================================================== */
.board {
  position: relative;
  height: 940px;
  border-radius: 24px;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--line-strong) 60%, transparent) 1px, transparent 1.4px) 0 0 / 18px 18px,
    var(--board);
  border: 1px solid var(--line);
  box-shadow: inset 0 2px 12px rgba(0, 0, 0, .05);
}
.board-hint { position: absolute; right: 22px; bottom: 14px; font-family: var(--hand); font-size: 1.2rem; color: var(--muted); margin: 0; }

.pin-card {
  position: absolute;
  left: var(--x); top: var(--y);
  width: 17%;
  min-width: 170px;
  background: var(--surface);
  color: var(--text);
  border-radius: 6px;
  padding: 10px 10px 14px;
  box-shadow: var(--shadow-note);
  transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(var(--r));
  transition: transform .55s cubic-bezier(.3, 1.5, .5, 1), box-shadow .3s ease;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  z-index: 1;
}
.pin-card::before {
  /* push pin */
  content: ""; position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--pin) 55%, #fff), var(--pin) 62%);
  box-shadow: 0 2px 3px rgba(0, 0, 0, .3);
  z-index: 2;
}
.pin-card:hover, .pin-card:focus-visible, .pin-card.is-open { transform: translate(var(--dx, 0px), var(--dy, 0px)) rotate(calc(var(--r) * -0.5)); box-shadow: var(--shadow-lift); z-index: 5; }
.pin-card.dragging { transition: box-shadow .3s ease; cursor: grabbing; z-index: 10; box-shadow: 0 30px 50px -18px rgba(0, 0, 0, .45); }

.pin-art { position: relative; aspect-ratio: 4 / 3; border-radius: 3px; overflow: hidden; background: var(--paper); }
.pin-art img { width: 100%; height: 100%; object-fit: cover; pointer-events: none; -webkit-user-drag: none; }
.pin-art svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin-art .ln { fill: none; stroke: var(--ink); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.pin-art .pf { filter: url(#paint-edge); }
.pin-card h3 { font-size: 1.15rem; margin: 10px 4px 0; }
.pin-card .cap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .45s var(--ease); }
.pin-card .cap > p { overflow: hidden; margin: 0 4px; font-size: .88rem; line-height: 1.45; color: var(--muted); }
.pin-card:hover .cap, .pin-card:focus-visible .cap, .pin-card.is-open .cap { grid-template-rows: 1fr; }
.pin-card:hover .cap > p, .pin-card:focus-visible .cap > p, .pin-card.is-open .cap > p { padding-top: 6px; }
@media (hover: none) { .pin-card .cap { grid-template-rows: 1fr; } .pin-card .cap > p { padding-top: 6px; } }

.photo-card { width: 26%; min-width: 230px; padding: 12px 12px 46px; }
.photo-card .pin-art { aspect-ratio: 3 / 4; }
.photo-card .pin-art img { object-position: 50% 35%; }
.photo-card figcaption { position: absolute; left: 0; right: 0; bottom: 12px; text-align: center; font-family: var(--hand); font-size: 1.3rem; color: var(--muted); }

/* per-card hover moments */
.m-paint .wash-over { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.m-paint .wash-over span { position: absolute; border-radius: 50%; -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); }
.m-paint:hover .wash-over, .m-paint.is-open .wash-over { opacity: .75; }

.m-trek .trail, .m-trip .route { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.m-trek:hover .trail, .m-trek.is-open .trail,
.m-trip:hover .route, .m-trip.is-open .route { stroke-dashoffset: 0; }
.m-trip .route-mask { fill: none; stroke: #fff; stroke-width: 8; }
.m-trip .route-line { fill: none; stroke: #fff; stroke-width: 2.4; stroke-dasharray: 4 5; stroke-linecap: round; }
.m-trip .pin-dot { fill: var(--p-magenta); stroke: #fff; stroke-width: 1.5; }

.m-gym .track { position: absolute; left: 12%; right: 12%; bottom: 14%; height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; }
.m-gym .track i { display: block; height: 100%; width: 8%; background: var(--p-lime); transition: width 1.6s var(--ease); }
.m-gym:hover .track i, .m-gym.is-open .track i { width: 100%; }
.m-gym .reps { position: absolute; right: 12%; bottom: 22%; font-family: var(--serif); font-size: 1.05rem; color: var(--text); }

.m-cook .recipe { position: absolute; inset: 8% 10%; background: var(--surface); border-radius: 4px; padding: 6px 10px; box-shadow: var(--shadow-note); font-size: .74rem; color: var(--ink); line-height: 18px; transform: translateY(115%) rotate(3deg); transition: transform .6s var(--ease); background-image: repeating-linear-gradient(transparent 0 17px, var(--line) 17px 18px); background-position: 0 6px; }
.m-cook .recipe b { display: block; font-family: var(--hand); font-size: 1.05rem; font-weight: 600; color: var(--p-magenta); line-height: 20px; }
.m-cook:hover .recipe, .m-cook.is-open .recipe { transform: none; }

.m-wall .stroke { transform-box: fill-box; transform-origin: left center; transform: scaleX(.14); transition: transform 1.2s var(--ease); }
.m-wall .stroke.s2 { transition-delay: .15s; }
.m-wall .stroke.s3 { transition-delay: .3s; }
.m-wall:hover .stroke, .m-wall.is-open .stroke { transform: scaleX(1); }

.m-host .bunting { transform-box: view-box; transform-origin: 100px 10px; }
.m-host:hover .bunting, .m-host.is-open .bunting { animation: bunt 1.6s ease-in-out infinite alternate; }
@keyframes bunt { from { transform: rotate(-2deg); } to { transform: rotate(2deg); } }

.m-craft .layer { position: absolute; transition: transform .8s var(--ease); }
.m-craft .layer.a { left: 12%; top: 14%; width: 52%; height: 60%; background: var(--p-magenta); opacity: .85; transform: rotate(-6deg); clip-path: polygon(2% 0, 100% 3%, 97% 100%, 0 96%); }
.m-craft .layer.b { left: 32%; top: 22%; width: 50%; height: 58%; transform: rotate(4deg); background: repeating-linear-gradient(-45deg, var(--p-cobalt) 0 6px, color-mix(in srgb, var(--p-cobalt) 60%, #fff) 6px 9px); clip-path: polygon(0 3%, 96% 0, 100% 97%, 4% 100%); }
.m-craft .layer.c { left: 22%; top: 34%; width: 40%; height: 46%; transform: rotate(-2deg); background: radial-gradient(circle, rgba(255, 255, 255, .7) 1.5px, transparent 2px) 0 0 / 9px 9px, var(--p-lime); clip-path: polygon(0 0, 100% 4%, 98% 92%, 50% 100%, 2% 95%); }
.m-craft:hover .layer.a, .m-craft.is-open .layer.a { transform: rotate(-11deg) translate(-8%, -4%); }
.m-craft:hover .layer.b, .m-craft.is-open .layer.b { transform: rotate(9deg) translate(8%, -2%); }
.m-craft:hover .layer.c, .m-craft.is-open .layer.c { transform: rotate(2deg) translate(0, 7%); }

.m-team .person { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .5s var(--ease); }
.m-team:hover .person, .m-team.is-open .person { transform: translateY(-5px); }
.m-team .person.p2 { transition-delay: .06s; }
.m-team .person.p3 { transition-delay: .12s; }
.m-team .person.p4 { transition-delay: .18s; }

/* ==========================================================
   6. Philosophy + process stepper
   ========================================================== */
.philosophy-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; margin-bottom: clamp(56px, 8vw, 96px); }
.philosophy h2 { font-size: clamp(2.2rem, 4.8vw, 3.6rem); }
.philosophy h2 em { font-style: italic; color: var(--accent); }
.philosophy-copy p { margin: 0 0 1.1em; color: var(--ink); font-size: 1.08rem; }
.principles { list-style: none; padding: 0; margin: 28px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; counter-reset: p; }
.principles li { counter-increment: p; display: flex; gap: 12px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--line); font-weight: 500; }
.principles li::before { content: counter(p, decimal-leading-zero); font-family: var(--serif); font-size: .85rem; color: var(--muted); font-weight: 400; }


/* ==========================================================
   7. Contact
   ========================================================== */

.site-footer { border-top: 1px solid var(--line); padding: 28px 0; font-size: .88rem; color: var(--muted); }
.site-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }

/* ==========================================================
   Case study pages
   ========================================================== */
.cs-hero { padding: clamp(48px, 8vw, 104px) 0 clamp(40px, 6vw, 72px); }
.back-link { display: flex; width: fit-content; gap: 8px; color: var(--muted); text-decoration: none; font-size: .92rem; margin-bottom: 40px; }
.back-link:hover { color: var(--text); }
.cs-hero h1 { font-size: clamp(2.6rem, 6.5vw, 4.8rem); max-width: 14em; }
.cs-hero .lede { font-family: var(--serif); font-size: clamp(1.3rem, 2.4vw, 1.75rem); line-height: 1.35; color: var(--muted); max-width: 30em; margin: 24px 0 0; }
.cs-hero .tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 24px; }
.cs-facts { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--line); margin: clamp(40px, 6vw, 64px) 0 0; }
.cs-facts div { padding: 22px 20px 22px 0; }
.cs-facts div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.cs-facts dt { font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cs-facts dd { margin: 0; }
.cs-cover { position: relative; aspect-ratio: 16 / 8; border-radius: 24px; overflow: hidden; background: var(--paper); border: 1px solid var(--line); display: grid; place-items: center; color: var(--muted); font-size: .92rem; }
.cs-cover::before { content: ""; position: absolute; inset: 15% 10%; background: var(--tone); -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); opacity: var(--wash-opacity); }
.cs-cover span { position: relative; }
.cs-body { padding: clamp(64px, 9vw, 112px) 0; }
.cs-section { display: grid; grid-template-columns: 220px 1fr; gap: clamp(24px, 5vw, 72px); padding: 48px 0; border-top: 1px solid var(--line); }
.cs-section:first-child { border-top: 0; padding-top: 0; }
.cs-section h2 { font-family: var(--sans); font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); padding-top: 8px; }
.cs-section .content { max-width: 680px; }
.cs-section .content h3 { font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom: 18px; }
.cs-section .content p { margin: 0 0 1.1em; color: var(--ink); font-size: 1.06rem; }
.todo { font-family: var(--hand); font-size: 1.25rem !important; line-height: 1.25; color: var(--note-ink) !important; background: var(--note-yellow); padding: 14px 18px; border-radius: 2px 2px 3px 14px / 2px 2px 3px 6px; box-shadow: var(--shadow-note); transform: rotate(-.6deg); max-width: 520px; }
.cs-next { background: var(--paper); border-top: 1px solid var(--line); padding: 64px 0; }
.cs-next a { display: flex; justify-content: space-between; align-items: end; gap: 24px; text-decoration: none; }
.cs-next small { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.cs-next strong { font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.8rem); }
.cs-next .arrow { font-size: 2rem; transition: transform .2s ease; }
.cs-next a:hover .arrow { transform: translateX(6px); }

/* ==========================================================
   Career page — the road trip that draws a heart
   ========================================================== */
.career-hero { padding: clamp(48px, 7vw, 96px) 0 clamp(16px, 3vw, 32px); }
.career-hero h1 { font-size: clamp(3rem, 8vw, 6rem); letter-spacing: -.03em; }
.career-hero .lede { font-size: clamp(1.1rem, 1.6vw, 1.25rem); color: var(--muted); max-width: 34em; margin: 20px 0 0; }
.career-stats { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 32px 0 0; }
.career-stats li { padding: 10px 18px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-size: .95rem; color: var(--muted); }
.career-stats strong { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--text); margin-right: 4px; }

.journey { padding: 0 0 clamp(80px, 10vw, 120px); }
.journey-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.journey-list { list-style: none; margin: 0; padding: 12vh 0 42vh; display: grid; gap: 24vh; }

.j-stop {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 24px 24px;
  box-shadow: var(--shadow-note);
  opacity: .42;
  transition: opacity .5s ease, border-color .5s ease, box-shadow .5s ease;
}
.j-stop.is-past { opacity: .7; }
.j-stop.is-current { opacity: 1; border-color: color-mix(in srgb, var(--sc) 60%, var(--line)); box-shadow: var(--shadow-lift); }
.j-stop .stamp { display: inline-flex; align-items: center; gap: 8px; font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.j-stop .stamp::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--sc); }
.j-stop h3 { font-size: 1.5rem; margin-bottom: 8px; }
.j-stop p { margin: 0; color: var(--ink); font-size: .98rem; }
.j-stop .tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.j-stop .btn { margin-top: 18px; }

.journey-map { position: sticky; top: 96px; height: min(660px, calc(100vh - 120px)); }
.map-card { position: relative; height: 100%; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: var(--map-land); box-shadow: var(--shadow-lift); }
.map { display: block; width: 100%; height: 100%; }
.m-land { fill: var(--map-land); }
.m-grid path { fill: none; stroke: var(--map-street); stroke-width: 8; }
.m-avenue { fill: none; stroke: var(--map-street); stroke-width: 18; }
.m-park { fill: var(--map-park); filter: url(#paint-edge); }
.m-water { fill: none; stroke: var(--map-water); stroke-width: 42; stroke-linecap: round; }
.m-label { font: 600 13px var(--sans); letter-spacing: .32em; fill: var(--muted); opacity: .55; }
.m-compass circle { fill: var(--surface); stroke: var(--line-strong); }
.m-compass path { fill: var(--p-magenta); }
.m-compass text { font: 700 10px var(--sans); fill: var(--muted); text-anchor: middle; }

.heart-fill { fill: var(--p-magenta); opacity: 0; transition: opacity 1.2s ease; }
.route-planned { fill: none; stroke: var(--route-planned); stroke-width: 5; stroke-dasharray: 2 10; stroke-linecap: round; }
.route-casing { fill: none; stroke: var(--surface); stroke-width: 13; stroke-linecap: round; }
.route-done { fill: none; stroke: var(--route); stroke-width: 7; stroke-linecap: round; transition: stroke .8s ease; }
.map-card.complete .route-done { stroke: var(--p-magenta); }
.map-card.complete .heart-fill { opacity: .16; }

.pin circle.dot { fill: var(--surface); stroke: var(--line-strong); stroke-width: 2; transition: fill .3s ease, stroke .3s ease; }
.pin text { font: 700 10px var(--sans); fill: var(--muted); text-anchor: middle; dominant-baseline: central; }
.pin.past circle.dot { fill: var(--route); stroke: var(--surface); }
.pin.past text { fill: #fff; }
.pin.current circle.dot { fill: var(--p-magenta); stroke: var(--surface); }
.pin.current text { fill: #fff; }
.pin.final { opacity: 0; transition: opacity .5s ease; }
.pin.final.current { opacity: 1; }
.pin .ring { fill: none; stroke: var(--p-magenta); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pin.current .ring { animation: ring 1.8s ease-out infinite; }
@keyframes ring { from { transform: scale(1); opacity: .7; } to { transform: scale(2.2); opacity: 0; } }

.map .car .body { fill: var(--p-magenta); stroke: var(--outline); stroke-width: 1.2; }
.map .car .glass { fill: #2a2f45; opacity: .85; }
.map .car .roof { fill: color-mix(in srgb, var(--p-magenta) 70%, #fff); }
.map .car .light { fill: #ffe9a8; }
.map .car .wheel { fill: var(--outline); }

.dir-panel { position: absolute; left: 16px; top: 16px; right: 16px; max-width: 360px; display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; box-shadow: var(--shadow-note); }
.dir-icon { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 11px; background: var(--route); color: #fff; display: grid; place-items: center; }
.dir-icon svg { width: 20px; height: 20px; }
.dir-panel small { display: block; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.dir-panel strong { display: block; font-family: var(--serif); font-weight: 400; font-size: 1.15rem; line-height: 1.2; }
.dir-panel #dir-meta { font-size: .85rem; color: var(--muted); }
.map-progress { position: absolute; left: 16px; right: 16px; bottom: 16px; height: 6px; border-radius: 99px; background: color-mix(in srgb, var(--line-strong) 60%, transparent); overflow: hidden; }
.map-progress i { display: block; height: 100%; width: 0; background: var(--route); border-radius: 99px; }
.map-card.complete .map-progress i { background: var(--p-magenta); }

.career-cta { text-align: center; }
.career-cta h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); margin-bottom: 8px; }

/* ==========================================================
   Feedback
   ========================================================== */
.quotes { columns: 3 300px; column-gap: clamp(18px, 2.6vw, 28px); }
.quote { position: relative; margin: 0 0 clamp(18px, 2.6vw, 28px); break-inside: avoid; background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 28px 28px 22px; box-shadow: var(--shadow-note); overflow: hidden; display: flex; flex-direction: column; }
.quote::before { content: ""; position: absolute; left: -40px; top: -50px; width: 160px; height: 130px; border-radius: 50%; background: var(--qc); -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); opacity: calc(var(--wash-opacity) * .8); }
.quote-mark { position: relative; display: block; height: .55em; font-family: var(--serif); font-size: 4.6rem; line-height: 1; color: var(--qc); }
.quote blockquote { position: relative; margin: 16px 0 20px; font-family: var(--serif); font-size: 1.16rem; line-height: 1.5; }
.quote blockquote p { margin: 0; }
.quote.feature blockquote { font-size: 1.4rem; line-height: 1.42; }
.quotes-more { margin: 8px 0 0; }
.quotes-more a { display: inline-flex; gap: 8px; font-weight: 500; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.quotes-more a:hover { color: var(--accent); }
.quote figcaption { display: grid; gap: 2px; padding-top: 14px; border-top: 1px solid var(--line); }
.quote .who { font-weight: 600; }
.quote .role { font-size: .9rem; color: var(--muted); }

/* ==========================================================
   How I work — illustrated process
   ========================================================== */
.process { background: var(--paper); border: 1px solid var(--line); border-radius: 26px; padding: clamp(18px, 3vw, 32px); }
.process-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: clamp(20px, 3vw, 32px); }
.process-tab { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--surface); border-radius: 14px; padding: 14px 16px 16px; text-align: left; cursor: pointer; font: 500 1.08rem/1.2 var(--sans); color: var(--muted); transition: color .25s ease, border-color .25s ease, transform .25s ease; }
.process-tab small { display: block; font-family: var(--serif); font-size: .82rem; margin-bottom: 2px; }
.process-tab::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 4px; background: var(--tc); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.process-tab:hover { color: var(--text); transform: translateY(-1px); }
.process-tab[aria-selected="true"] { color: var(--text); border-color: color-mix(in srgb, var(--tc) 55%, var(--line)); }
.process-tab[aria-selected="true"]::after { transform: scaleX(1); }

#panel-ask { --tc: var(--p-mustard); }
#panel-map { --tc: var(--p-cobalt); }
#panel-simplify { --tc: var(--p-magenta); }
#panel-ship { --tc: var(--p-lime); }

.process-panel { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.process { display: grid; }
.process-tabs { grid-row: 1; }
.process-panel { grid-row: 2; grid-column: 1; }
.process-panel[hidden] { display: grid; visibility: hidden; }
.proc-art { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; overflow: hidden; aspect-ratio: 16 / 10; }
.proc-art svg { display: block; width: 100%; height: 100%; }
.proc-copy h3 { font-size: clamp(1.6rem, 2.8vw, 2.2rem); margin-bottom: 12px; }
.proc-copy p { color: var(--muted); font-size: 1.05rem; margin: 0; }
.proc-copy ul { list-style: none; padding: 0; margin: 20px 0 0; }
.proc-copy li { display: flex; gap: 12px; align-items: baseline; padding: 11px 0; border-top: 1px solid var(--line); }
.proc-copy li::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--tc); transform: translateY(-1px); }
.process-panel.is-active .proc-copy > * { animation: pagein .55s var(--ease) both; }
.process-panel.is-active .proc-copy > :nth-child(2) { animation-delay: .06s; }
.process-panel.is-active .proc-copy > :nth-child(3) { animation-delay: .12s; }

/* shared illustration paint */
.proc-art .pa-b { filter: url(#paint-edge); opacity: calc(var(--block-opacity) * .55); transform-box: fill-box; transform-origin: left bottom; transform: scaleX(0); transition: transform .8s var(--ease); }
.process-panel.is-active .pa-b { transform: none; }
.proc-art .b-mustard { fill: var(--p-mustard); }
.proc-art .b-cobalt { fill: var(--p-cobalt); }
.proc-art .b-magenta { fill: var(--p-magenta); }
.proc-art .b-lime { fill: var(--p-lime); }
.proc-art .b-orange { fill: var(--p-orange); }
.proc-art .b-violet { fill: var(--p-violet); }
.proc-art .paper { fill: var(--surface); }
.proc-art .ink { stroke: var(--ink-stroke); stroke-width: 2; stroke-linejoin: round; }
.proc-art .ink-line { fill: none; stroke: var(--ink-stroke); stroke-width: 3; stroke-linecap: round; opacity: .35; }
.proc-art .ink-line.thick { opacity: 1; stroke-width: 7; }

/* Ask */
.p-ask .pop { transform-box: fill-box; transform-origin: 20% 100%; transform: scale(.6); opacity: 0; transition: transform .6s cubic-bezier(.3, 1.5, .5, 1), opacity .4s ease; }
.p-ask .pop-2 { transition-delay: .3s; }
.process-panel.is-active .p-ask .pop { transform: none; opacity: 1; }
.p-ask .q-mark { font: 400 96px/1 var(--serif); fill: var(--p-magenta); }
.p-ask .bubble-cobalt { fill: var(--p-cobalt); }
.p-ask .typing { fill: #fff; transform-box: fill-box; animation: typing 1.2s ease-in-out infinite; }
.p-ask .t2 { animation-delay: .15s; }
.p-ask .t3 { animation-delay: .3s; }
@keyframes typing { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-6px); } }
.p-ask .magnifier { animation: sweep 5s ease-in-out infinite; }
@keyframes sweep { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(120px, -24px); } }
.p-ask .lens { fill: rgba(255, 255, 255, .28); }
.p-ask .lens-shine { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .8; }

/* Map */
.p-map .link-line { fill: none; stroke: var(--ink-stroke); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.p-map .link-line.dashed { opacity: .5; }
.process-panel.is-active .p-map .link-line { stroke-dashoffset: 0; transition: stroke-dashoffset .8s var(--ease) var(--d); }
.p-map .node { opacity: 0; transform: translateY(10px); transition: opacity .5s ease var(--d), transform .6s var(--ease) var(--d); }
.process-panel.is-active .p-map .node { opacity: 1; transform: none; }
.p-map .node-t { font: 600 15px var(--sans); fill: var(--text); text-anchor: middle; }
.p-map .edge-dot { fill: var(--p-orange); }
.p-map .pulse { fill: none; stroke: var(--p-orange); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ring 1.8s ease-out infinite; }
.p-map .hand-t { font: 600 18px var(--hand); fill: var(--muted); }

/* Simplify */
.p-simplify .tangle { fill: none; stroke: var(--ink-stroke); stroke-width: 2.2; stroke-linecap: round; transform-box: fill-box; transform-origin: center; transition: opacity .8s ease .9s, transform .8s var(--ease) .9s; }
.process-panel.is-active .p-simplify .tangle { opacity: .2; transform: scale(.82); }
.p-simplify .arrow-line { fill: none; stroke: var(--ink-stroke); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; }
.process-panel.is-active .p-simplify .arrow-line { stroke-dashoffset: 0; transition: stroke-dashoffset .6s var(--ease) 1s; }
.p-simplify .clean-card { opacity: 0; transform: translateX(-24px); transition: opacity .6s ease 1.3s, transform .7s var(--ease) 1.3s; }
.process-panel.is-active .p-simplify .clean-card { opacity: 1; transform: none; }
.p-simplify .soft { fill: var(--line); }
.p-simplify .cta-fill { fill: var(--p-lime); }

/* Ship */
.p-ship .sun-p { fill: var(--p-mustard); opacity: .75; filter: url(#paint-edge); }
.p-ship .sea-back path { fill: var(--p-cobalt); opacity: .35; }
.p-ship .sea-front path { fill: var(--p-cobalt); opacity: .8; }
.p-ship .sea-back { animation: waves2 7s linear infinite; }
.p-ship .sea-front { animation: waves2 5s linear infinite reverse; }
@keyframes waves2 { from { transform: translateX(0); } to { transform: translateX(-120px); } }
.p-ship .boat { transform-box: view-box; transform-origin: 240px 220px; animation: rock 3.2s ease-in-out infinite; }
.p-ship .mast-p { fill: none; stroke: var(--ink-stroke); stroke-width: 3; stroke-linecap: round; }
.p-ship .flag-p { fill: var(--p-lime); transform-box: fill-box; transform-origin: left center; animation: flutter 1.2s ease-in-out infinite alternate; }
.p-ship .sail-a { fill: var(--p-mustard); }
.p-ship .sail-b { fill: var(--p-magenta); }
.p-ship .tick-p { fill: none; stroke: #26221f; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.p-ship .hull-p { fill: var(--p-orange); }
.p-ship .confetti rect { fill: var(--c); opacity: 0; transform-box: fill-box; transform-origin: center; }
.process-panel.is-active .p-ship .confetti rect { animation: burst 2.6s ease-out .5s infinite; }
@keyframes burst { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--cx), var(--cy)) rotate(280deg); opacity: 0; } }

/* ==========================================================
   Contact — copy on the left, links on the right
   ========================================================== */
.contact { overflow: hidden; }
.contact .wash.c1 { width: 520px; height: 300px; left: -120px; top: 18%; background: var(--p-mustard); }
.contact .wash.c2 { width: 440px; height: 280px; right: -100px; top: 30%; background: var(--p-magenta); opacity: calc(var(--wash-opacity) * .6); }
.contact .wash.c3 { width: 320px; height: 220px; left: 40%; top: 4%; background: var(--p-cobalt); opacity: calc(var(--wash-opacity) * .45); }
.contact-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: end; }
.contact .hand-note { font-family: var(--hand); font-size: 1.5rem; color: var(--muted); margin: 0 0 8px; }
.contact h2 { font-size: clamp(2.4rem, 6vw, 4.4rem); margin-bottom: 18px; }
.contact-copy p:last-child { color: var(--ink); font-size: 1.15rem; margin: 0; }
.contact-links { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.contact-links a { display: inline-flex; align-items: baseline; gap: 12px; padding: 8px 0; text-decoration: none; transition: color .2s ease; }
.contact-links span:not(.arrow) { font-family: var(--serif); font-size: clamp(1.5rem, 2.6vw, 2.1rem); }
.contact-links .arrow { font-size: 1.3rem; transition: transform .25s var(--ease); }
.contact-links a:hover { color: var(--accent); }
.contact-links a:hover .arrow { transform: translate(4px, -2px); }

/* career: the extras below the road */
.extras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 24px); }
.extra { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 26px 22px 24px; box-shadow: var(--shadow-note); }
.extra::before { content: ""; position: absolute; right: -40px; top: -40px; width: 130px; height: 110px; border-radius: 50%; background: var(--ec); -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent); mask-image: radial-gradient(closest-side, #000 30%, transparent); opacity: calc(var(--wash-opacity) * .8); }
.extra strong { position: relative; display: block; font-family: var(--serif); font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 2.8rem); line-height: 1; margin-bottom: 10px; }
.extra h3 { position: relative; font-family: var(--sans); font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.extra p { position: relative; margin: 0; font-size: .95rem; color: var(--ink); }

.site-footer .made { display: inline-flex; align-items: center; gap: 6px; }
.site-footer .heart { width: 15px; height: 15px; fill: var(--p-magenta); }

@media (max-width: 860px) {
  .journey-grid { grid-template-columns: 1fr; }
  .journey-map { order: -1; top: 80px; height: 46vh; z-index: 5; }
  .journey-list { padding: 4vh 0 30vh; gap: 16vh; }
  .dir-panel { left: 10px; right: 10px; top: 10px; padding: 9px 11px; }
  .dir-icon { width: 32px; height: 32px; }
  .dir-panel strong { font-size: 1rem; }
  .quotes { grid-template-columns: 1fr; }
  .process-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process-panel { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; align-items: start; gap: 24px; }
  .contact-links { align-items: flex-start; }
  .extras { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .journey-map { top: 104px; height: 40vh; }
}

/* ---------- the noticeboard: cork, a wooden frame, polaroids ---------- */
.board {
  height: 1000px;
  border-radius: 14px;
  border: 14px solid #8a5d3b;
  background:
    radial-gradient(circle at 20% 30%, rgba(90, 55, 25, .18) 1px, transparent 1.6px) 0 0 / 7px 7px,
    radial-gradient(circle at 70% 60%, rgba(255, 235, 200, .25) 1px, transparent 1.6px) 3px 4px / 9px 9px,
    radial-gradient(ellipse at 30% 20%, rgba(255, 230, 190, .35), transparent 60%),
    #c79a6b;
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12), inset 0 6px 22px rgba(60, 30, 10, .35), 0 24px 50px -30px rgba(40, 20, 5, .6);
}
.board-hint { right: 22px; left: auto; bottom: 12px; color: #4a3220; opacity: .8; }

/* polaroids are always white, in light and dark mode */
.pin-card {
  width: 16%;
  min-width: 160px;
  background: #fbf9f4;
  color: #2b2622;
  border-radius: 2px;
  padding: 10px 10px 12px;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .12), 0 12px 22px -12px rgba(30, 15, 5, .55);
}
.pin-card:hover, .pin-card:focus-visible, .pin-card.is-open { box-shadow: 0 2px 2px rgba(0, 0, 0, .12), 0 26px 40px -18px rgba(30, 15, 5, .6); }
.pin-card .pin-art { aspect-ratio: 1; border-radius: 0; background: #efe9de; }
.pin-card .pin-art svg { background: #f4efe6; }
.pin-card .pin-art img + svg { background: none; }
.pin-card .pin-art .ln { stroke: #3a3430; }
.polaroid-cap { margin: 10px 2px 0; font-family: var(--hand); font-size: 1.12rem; line-height: 1.15; color: #4d453f; }
.polaroid-cap b { display: block; font-weight: 600; font-size: 1.32rem; color: #2b2622; }

.photo-card { width: 24%; min-width: 220px; padding: 12px 12px 14px; }
.photo-card .pin-art { aspect-ratio: 4 / 5; }
.photo-card figcaption { position: static; margin: 10px 2px 0; text-align: center; font-family: var(--hand); font-size: 1.5rem; color: #2b2622; }

/* a note from Nikita, on lined notepaper */
.note-card {
  width: 22%;
  min-width: 200px;
  padding: 18px 18px 16px 30px;
  background:
    linear-gradient(90deg, transparent 20px, rgba(200, 80, 90, .45) 20px 21px, transparent 21px),
    repeating-linear-gradient(transparent 0 25px, rgba(80, 120, 170, .28) 25px 26px),
    #fffdf6;
  background-position: 0 0, 0 14px, 0 0;
  font-family: var(--hand);
  color: #2b2622;
}
.note-card p { margin: 0; }
.note-card .note-hello { font-size: 1.05rem; color: #8a5d3b; letter-spacing: .02em; line-height: 26px; }
.note-card .note-body { font-size: 1.22rem; line-height: 26px; }
.note-card .note-sign { margin-top: 4px; font-size: 1.35rem; line-height: 26px; text-align: right; display: flex; justify-content: flex-end; align-items: center; gap: 6px; }
.note-card .heart { width: 16px; height: 16px; fill: var(--p-magenta); }


/* ==========================================================
   Line illustrations — process, noticeboard, awards
   ========================================================== */
.proc-art .ln, .pin-art .ln, .award .ln { fill: none; stroke: var(--ink-stroke); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.proc-art .ln.fill-paper, .pin-art .ln.fill-paper, .award .ln.fill-paper { fill: var(--surface); }
.proc-art .ln.soft, .pin-art .ln.soft, .award .ln.soft { opacity: .4; }
.proc-art .ln.thick { stroke-width: 6; }
.proc-art .acc, .pin-art .acc, .award .acc { stroke: var(--a); stroke-width: 2.4; }
.pin-art svg { background: var(--paper); }
.pin-art img + svg { background: none; }

/* process */
.p-ask .q-mark { font: 400 92px/1 var(--serif); fill: var(--p-magenta); }
.p-ask .typing { fill: var(--p-cobalt); }
.p-map .node-t { fill: var(--text); }
.p-ship .boat { transform-box: view-box; transform-origin: 240px 230px; animation: rock 3.2s ease-in-out infinite; }
.p-ship .flag-p { fill: none; transform-box: fill-box; transform-origin: left center; animation: flutter 1.2s ease-in-out infinite alternate; }
.p-ship .confetti path { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; opacity: 0; transform-box: fill-box; transform-origin: center; }
.process-panel.is-active .p-ship .confetti path { animation: burst 2.6s ease-out .5s infinite; }

/* noticeboard */
.m-trek .trail { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1.6s var(--ease); }
.m-wall .stroke { fill: none; stroke-width: 9; stroke-linecap: round; opacity: .85; stroke-dasharray: 1; stroke-dashoffset: 1; transform: none; transition: stroke-dashoffset 1.2s var(--ease); }
.m-wall .stroke { stroke-dasharray: 140; stroke-dashoffset: 120; }
.m-wall .stroke.s2 { transition-delay: .15s; }
.m-wall:hover .stroke, .m-wall.is-open .stroke { stroke-dashoffset: 0; transform: none; }
.m-craft .shape { transform-box: fill-box; transform-origin: center; transition: transform .7s var(--ease); }
.m-craft:hover .s-a, .m-craft.is-open .s-a { transform: translate(-6px, -4px) rotate(-8deg); }
.m-craft:hover .s-b, .m-craft.is-open .s-b { transform: translate(6px, -6px) rotate(12deg); }
.m-craft:hover .s-c, .m-craft.is-open .s-c { transform: translate(2px, 6px) rotate(6deg); }

/* awards: line badges, no wash */
.award svg { width: 92px; height: 116px; }

/* animations rest while their section is off screen */
.offscreen *, .offscreen *::before, .offscreen *::after { animation-play-state: paused !important; }

/* ==========================================================
   Responsive
   ========================================================== */
@media (max-width: 1000px) {
  .board { height: auto; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 22px; padding: 34px 22px 64px; }
  .pin-card, .photo-card { position: relative; left: auto; top: auto; width: auto; min-width: 0; }
  .photo-card { grid-column: 1 / -1; justify-self: center; width: min(320px, 100%); order: -2; }
  .note-card { grid-column: 1 / -1; justify-self: center; width: min(360px, 100%); order: -1; }
}

@media (max-width: 860px) {
  .work-head, .philosophy-grid { grid-template-columns: 1fr; }
  .ship-scene { max-width: 340px; }
  .awards-grid { grid-template-columns: 1fr; }

  .book { grid-template-columns: 1fr; min-height: 0; }
  .book::before, .spiral, .turner, .book-cover::after { display: none; }
  .book-cover { padding: 10px; border-radius: 16px; }
  .page.left { order: 2; border-radius: 0 0 8px 8px; box-shadow: none; border-top: 1px dashed var(--page-line); }
  .entry:not([hidden]) .page.right { order: 1; padding-bottom: 8px; border-radius: 8px 8px 0 0; box-shadow: none; }
  .journal { padding-right: 0; }
  .bookmarks { position: relative; top: auto; right: auto; flex-direction: row; gap: 6px; overflow-x: auto; padding: 0 14px; margin-bottom: -8px; scrollbar-width: none; }
  .bookmark { flex: 0 0 auto; width: auto; height: 52px; padding: 10px 14px 0; display: block; white-space: nowrap; border-radius: 10px 10px 0 0; background: linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 40%), var(--bm); transform: translateY(8px); }
  .bookmark:hover { transform: translateY(7px); }
  .bookmark[aria-selected="true"] { transform: translateY(0); }
  .bookmark small { display: inline; margin-right: 6px; }

}

@media (max-width: 760px) {

  .nav-links { gap: 14px; }
  .nav-links a { font-size: .88rem; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; padding: 28px 14px 60px; }
  .award { grid-template-columns: 1fr; }
  .extras { grid-template-columns: 1fr; }

  .cs-facts { grid-template-columns: 1fr 1fr; }
  .cs-facts div:nth-child(3) { padding-left: 0; border-left: 0; }
  .cs-facts div:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .cs-section { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 560px) {
  .nav { height: auto; flex-wrap: wrap; row-gap: 8px; padding-block: 12px; }
  .nav-right { display: contents; }
    .nav-links { order: 3; width: 100%; justify-content: space-between; }
  html { scroll-padding-top: 110px; }
  .principles { grid-template-columns: 1fr; }
  .entry .meta { grid-template-columns: 1fr; gap: 2px; }
  .entry .meta dd { margin-bottom: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0s !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ==========================================================
   V2 — clean layouts, bold type, vivid illustration
   ========================================================== */
:root {
  --bg: #f7f5f0;
  --paper: #ffffff;
  --surface: #ffffff;
  --line: #e7e3da;
  --line-strong: #d3cdc0;
  --text: #121318;
  --ink: #26282f;
  --muted: #6c6e76;
  --accent: #ff5a1f;
  --bold: "Archivo", "Inter", system-ui, sans-serif;
  /* one type system: bold grotesk for display, Inter for text, one handwriting */
  --serif: var(--bold);
  --hand: "Gochi Hand", "Bradley Hand", cursive;
  --v-orange: #ff6a2b;
  --v-yellow: #ffc21a;
  --v-green: #1fb36b;
  --v-cyan: #1cb8d6;
  --v-blue: #3a5cff;
  --v-pink: #ff3f8e;
  --grain-opacity: .18;
}
h1, h2, h3 { font-family: var(--bold); font-weight: 800; letter-spacing: -.025em; }
.section-head h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); line-height: 1; }
.label { color: var(--accent); }
.wash, .quote::before, .extra::before, .thumb::before, .cs-cover::before { display: none !important; }
.brand { font-family: var(--bold); font-weight: 800; letter-spacing: -.02em; }
.btn { font-weight: 600; }

/* ---------- hero: a dark pond of koi around the headline ---------- */
.hero2 {
  position: relative;
  margin: 8px var(--gutter) 0;
  border-radius: 32px;
  overflow: hidden;
  min-height: min(86vh, 820px);
  display: grid; place-items: center;
  text-align: center;
  color: #f6f3ee;
  background:
    radial-gradient(60% 55% at 50% 45%, #1b2a7a 0%, rgba(27, 42, 122, 0) 70%),
    radial-gradient(40% 40% at 85% 85%, rgba(255, 63, 142, .25), transparent 70%),
    radial-gradient(40% 40% at 10% 20%, rgba(31, 179, 107, .22), transparent 70%),
    #0a0c1a;
  isolation: isolate;
}
.pond { position: absolute; inset: 0; z-index: 0; pointer-events: none; }

.koi { position: absolute; left: 0; width: var(--kw, 180px); animation: swim var(--t, 38s) linear var(--delay, 0s) infinite; }
.koi svg { display: block; width: 100%; aspect-ratio: 2.2; overflow: visible; animation: wiggle 2.4s ease-in-out infinite; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.koi .k-body { fill: var(--fill); }
.koi .k-tail, .koi .k-fin { fill: var(--fill); opacity: .75; }
.koi .k-scales { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 1.6; stroke-linecap: round; }
.koi .k-stripes { fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 1.4; stroke-linecap: round; }
.koi .k-spot { fill: #fff; opacity: .55; }
.koi.right svg { transform: scaleX(-1); }
@keyframes swim { from { transform: translateX(110vw); } to { transform: translateX(-30vw); } }
.koi.right { animation-name: swim-r; }
@keyframes swim-r { from { transform: translateX(-30vw); } to { transform: translateX(110vw); } }
@keyframes wiggle { 0%, 100% { rotate: -2deg; translate: 0 0; } 50% { rotate: 2deg; translate: 0 6px; } }
.k1 { top: 6%;  --kw: 280px; --t: 44s; --delay: -6s; }
.k2 { top: 22%; --kw: 200px; --t: 38s; --delay: -20s; }
.k3 { top: 62%; --kw: 260px; --t: 48s; --delay: -14s; }
.k4 { top: 80%; --kw: 180px; --t: 34s; --delay: -4s; }
.k5 { top: 44%; --kw: 150px; --t: 54s; --delay: -30s; opacity: .65; }
.k6 { top: 70%; --kw: 220px; --t: 50s; --delay: -36s; }
.k7 { top: 34%; --kw: 170px; --t: 40s; --delay: -24s; opacity: .8; }
.k8 { top: 12%; --kw: 160px; --t: 46s; --delay: -40s; opacity: .75; }
.k2 svg, .k4 svg { animation-delay: -1.2s; }

.leaf { position: absolute; width: clamp(90px, 12vw, 170px); aspect-ratio: 120 / 220; overflow: visible; transform-origin: 50% 100%; animation: sway 7s ease-in-out infinite alternate; }
.leaf .l-blade { fill: var(--lf); }
.leaf .l-rib { fill: none; stroke: rgba(255, 255, 255, .45); stroke-width: 2; stroke-linecap: round; }
.lf-1 { left: -2%; bottom: -8%; transform: rotate(28deg); }
.lf-2 { left: 6%; bottom: -14%; transform: rotate(-6deg); animation-delay: -3s; }
.lf-3 { right: -2%; top: -10%; transform: rotate(200deg); animation-delay: -2s; }
.lf-4 { right: 4%; bottom: -12%; transform: rotate(-24deg); animation-delay: -5s; }
@keyframes sway { from { rotate: -3deg; } to { rotate: 3deg; } }

.hero2-inner { position: relative; z-index: 2; padding: clamp(48px, 7vw, 96px) var(--gutter); max-width: 1100px; }
.hero2-label { display: inline-block; margin: 0 0 18px; padding: 7px 16px; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 999px; font: 600 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }
.headline-stack { position: relative; display: flex; flex-direction: column; align-items: center; }
.me-sticker {
  width: clamp(150px, 19vw, 243px);
  height: auto;
  margin-bottom: clamp(-34px, -2.6vw, -18px); /* her arms rest on the words */
  position: relative; z-index: 3;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, .45));
  animation: sticker-pop .9s .2s cubic-bezier(.3, 1.5, .5, 1) both;
}
@keyframes sticker-pop { from { opacity: 0; transform: translateY(24px) rotate(-6deg) scale(.9); } to { opacity: 1; transform: none; } }
.hero2 h1 {
  position: relative; z-index: 2;
  font-family: var(--bold); font-weight: 900;
  font-size: clamp(2.6rem, 7.2vw, 6.4rem);
  line-height: .96; letter-spacing: -.035em;
  margin: 0; max-width: 11.5em;
  color: #fff;
}
.hero2 .glow { background: linear-gradient(90deg, #ffd66b, #ff8a2b 45%, #ff3f8e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero2-sub { max-width: 34em; margin: clamp(22px, 3vw, 32px) auto 0; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: rgba(246, 243, 238, .78); }

/* ---------- the record player: needle only comes in when it plays ---------- */
.music-toggle { position: relative; width: 62px; height: 46px; padding: 0; border: 0; background: none; cursor: pointer; }
.turntable { display: block; width: 100%; height: 100%; overflow: visible; }
.tt-base { fill: var(--v-yellow); stroke: #14111c; stroke-width: 2.2; }
.tt-knob { fill: var(--v-orange); stroke: #14111c; stroke-width: 1.8; }
.tt-vinyl { fill: #121016; stroke: #14111c; stroke-width: 2; }
.tt-groove { fill: none; stroke: #2e2a35; stroke-width: .8; }
.tt-label { fill: #1e1b22; stroke: #3a3540; stroke-width: .8; }
.tt-hole { fill: var(--v-yellow); }
.tt-shine { fill: none; stroke: rgba(255, 255, 255, .35); stroke-width: 1.6; stroke-linecap: round; }
.tt-disc { transform-box: view-box; transform-origin: 28px 27px; animation: spin 1.8s linear infinite; animation-play-state: paused; }
.tt-pivot { fill: #e9e4dc; stroke: #14111c; stroke-width: 1.8; }
.tt-rod { fill: none; stroke: #14111c; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tt-head { fill: #e9e4dc; stroke: #14111c; stroke-width: 1.4; }
.tt-arm { transform-box: view-box; transform-origin: 60px 12px; transform: rotate(-32deg); transition: transform .7s cubic-bezier(.4, 0, .2, 1); }
.music-toggle.is-playing .tt-arm { transform: rotate(0deg); }
.music-toggle.is-playing .tt-disc { animation-play-state: running; }
@keyframes spin { to { transform: rotate(360deg); } }
.music-toggle::before, .music-toggle::after { content: none !important; }
.tt-note { position: absolute; top: 0; font-size: 14px; color: var(--accent); opacity: 0; pointer-events: none; }
.tt-note.n1 { left: 4px; } .tt-note.n2 { left: 22px; color: var(--v-pink); } .tt-note.n3 { right: 2px; color: var(--v-blue); }
.music-toggle.is-playing .tt-note { animation: note-away 2.4s ease-out infinite; }
.music-toggle.is-playing .tt-note.n2 { animation-delay: .8s; }
.music-toggle.is-playing .tt-note.n3 { animation-delay: 1.6s; }
@keyframes note-away { 0% { opacity: 0; transform: translate(0, 4px) scale(.8); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(6px, -22px) scale(1.1) rotate(12deg); } }

/* ---------- noticeboard: a green cutting mat with pinned notes ---------- */
.noticeboard2 .wrap { max-width: 1240px; }
.mat {
  border-radius: 28px;
  padding: clamp(28px, 4vw, 56px) clamp(18px, 3vw, 44px) clamp(36px, 5vw, 64px);
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 252, 230, .14) 42%, rgba(255, 252, 230, .14) 60%, transparent 72%),
    linear-gradient(rgba(255, 255, 255, .2) 1px, transparent 1px) -1px -1px / 64px 64px,
    linear-gradient(90deg, rgba(255, 255, 255, .2) 1px, transparent 1px) -1px -1px / 64px 64px,
    linear-gradient(rgba(255, 255, 255, .07) 1px, transparent 1px) -1px -1px / 16px 16px,
    linear-gradient(90deg, rgba(255, 255, 255, .07) 1px, transparent 1px) -1px -1px / 16px 16px,
    #3d8a5c;
  box-shadow: 0 30px 60px -38px rgba(20, 50, 30, .7);
}
.mat-head { text-align: center; color: #fff; max-width: 640px; margin: 0 auto clamp(28px, 4vw, 48px); }
.mat-head h2 { font-size: clamp(2.6rem, 6vw, 4.4rem); color: #fff; margin: 10px 0 12px; }
.mat-head p { margin: 0; color: rgba(255, 255, 255, .85); font-size: 1.05rem; }
.mat .tape-label { display: inline-block; padding: 4px 14px; background: #ffd65a; border: 2px solid #14111c; font-family: "Gochi Hand", var(--hand); font-size: 1.1rem; color: #14111c; transform: rotate(-3deg); }

.nb-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: clamp(22px, 2.6vw, 34px) clamp(16px, 2vw, 26px); align-items: start; }
.nb-card {
  position: relative;
  padding: 18px 16px 18px;
  border: 2px solid #14111c;
  border-radius: 4px;
  color: #14111c;
  transform: rotate(var(--r));
  box-shadow: 0 10px 16px -10px rgba(10, 30, 15, .6);
  transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), box-shadow .3s ease;
}
.nb-card:hover { transform: rotate(calc(var(--r) * -.4)) translateY(-4px); box-shadow: 0 18px 22px -12px rgba(10, 30, 15, .65); }
.nb-yellow { background: #ffe27a; }
.nb-pink { background: #ffc7d6; }
.nb-mint { background: #c6f1d8; }
.nb-blue { background: #c9e3ff; }
.nb-kraft { background: #e8cfa6; }
.nb-white, .nb-photo { background: #fffdf8; }
.nb-photo { padding-top: 12px; }
.nb-card h3 { font-family: "Gochi Hand", var(--hand); font-weight: 400; font-size: 1.55rem; letter-spacing: 0; margin: 10px 0 4px; line-height: 1; }
.nb-card p { margin: 0; font-size: .92rem; line-height: 1.45; color: #2b2b31; }
.nb-icon { width: 44px; height: 44px; display: block; fill: none; stroke: #14111c; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.nb-pic { display: block; border: 2px solid #14111c; aspect-ratio: 4 / 3; overflow: hidden; background: #ddd; }
.nb-pic img { width: 100%; height: 100%; object-fit: cover; }
.nb-pin { position: absolute; left: 50%; top: -9px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; border: 2px solid #14111c; box-shadow: 0 3px 3px rgba(0, 0, 0, .3); }
.pin-red { background: #ff5a4f; } .pin-blue { background: #4b7bff; } .pin-green { background: #2fc37a; } .pin-yellow { background: #ffc21a; }
.nb-tape { position: absolute; left: 50%; top: -12px; width: 70px; height: 22px; margin-left: -35px; background: rgba(255, 246, 214, .78); border-left: 2px dashed rgba(0, 0, 0, .08); border-right: 2px dashed rgba(0, 0, 0, .08); transform: rotate(-4deg); }

@media (max-width: 760px) {
  .hero2 { margin: 6px 10px 0; border-radius: 24px; min-height: auto; }
  .koi { --kw: 110px !important; opacity: .55; }
  .k3, .k5, .k6, .k7, .k8, .lf-2, .lf-4 { display: none; }
  .leaf { width: 70px; opacity: .7; }
  .k1 { top: 3%; } .k2 { top: 88%; } .k4 { top: 94%; }
  .nb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 14px; }
  .nb-card h3 { font-size: 1.3rem; }
  .nb-card p { font-size: .85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .koi { animation: none; left: auto; }
  .k1 { left: 8%; } .k2 { right: 10%; } .k3 { left: 14%; } .k4 { right: 16%; }
}

/* ---------- career: a clean city map with a car on its way ---------- */
:root { --route: #2f6bff; --route-planned: #9aa6bd; --map-land: #f1efe8; }
.map-card { background: var(--map-land); border-color: var(--line); }
.m-land { fill: var(--map-land); }
.m-block { fill: #e5e2d8; }
.m-park { fill: #cfe7c2; filter: none; }
.m-water { fill: #cfe3f6; stroke: none; }
.m-streets path { fill: none; stroke: #fff; stroke-width: 13; }
.m-grid, .m-avenue { display: none; }
.m-label { fill: #8b8d94; opacity: .8; }
.route-casing { stroke: #fff; stroke-width: 14; }
.route-done { stroke: var(--route); stroke-width: 8; }
.route-planned { stroke: var(--route-planned); stroke-width: 5; stroke-dasharray: 1 11; }
.map-card.complete .route-done, .map-card.complete .map-progress i { stroke: var(--route); background: var(--route); }
.pin.final { opacity: 1; }
.pin.past circle.dot { fill: var(--route); }
.dir-icon { background: var(--route); }
.map-progress i { background: var(--route); }
.j-stop h3 { font-family: var(--bold); font-weight: 800; }
@media (max-width: 860px) {
  .journey-map { top: 76px; height: 44vh; }
  .dir-panel { max-width: none; }
}


/* ==========================================================
   V2.1 — sticker hero, sticker contact
   ========================================================== */
:root { --stk-ink: #14111c; --mint: #d9f2e4; }

/* ---------- hero: money stickers that tidy themselves up ---------- */
.hero3 {
  position: relative;
  margin: 8px var(--gutter) 0;
  border-radius: 32px;
  overflow: hidden;
  min-height: min(88vh, 840px);
  display: grid; place-items: center;
  text-align: center;
  color: var(--stk-ink);
  background:
    linear-gradient(rgba(20, 17, 28, .05) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(20, 17, 28, .05) 1px, transparent 1px) 0 0 / 40px 40px,
    var(--mint);
  isolation: isolate;
}
.stickers { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
/* each sticker sits in a full-size layer, so % moves are % of the hero */
.stk {
  position: absolute; inset: 0;
  transform: translate(var(--mx), var(--my));
  animation: tidy 12s cubic-bezier(.6, 0, .25, 1) infinite;
  animation-delay: calc(var(--i) * 70ms);
}
.stk svg {
  position: absolute; left: 0; top: 0;
  width: clamp(48px, 5.6vw, 82px); height: auto;
  margin: calc(clamp(48px, 5.6vw, 82px) / -2) 0 0 calc(clamp(48px, 5.6vw, 82px) / -2);
  overflow: visible;
  rotate: var(--mr);
  animation: stk-rot 12s cubic-bezier(.6, 0, .25, 1) infinite, bob 4s ease-in-out infinite alternate;
  animation-delay: calc(var(--i) * 70ms), calc(var(--i) * -.6s);
  filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(0 6px 8px rgba(20, 17, 28, .18));
}
.stk svg * { stroke: var(--stk-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.stk .stk-t { font: 900 26px var(--bold); fill: var(--stk-ink); stroke: none; }
@keyframes tidy {
  0%, 28% { transform: translate(var(--mx), var(--my)); }
  42%, 74% { transform: translate(var(--ox), var(--oy)); }
  90%, 100% { transform: translate(var(--mx), var(--my)); }
}
@keyframes stk-rot { 0%, 28% { rotate: var(--mr); } 42%, 74% { rotate: 0deg; } 90%, 100% { rotate: var(--mr); } }
@keyframes bob { from { translate: 0 -5px; } to { translate: 0 5px; } }

.hero3-inner { position: relative; z-index: 2; padding: clamp(48px, 6vw, 80px) var(--gutter) clamp(150px, 15vw, 190px); max-width: 1100px; }
.hero3-label { display: inline-block; margin: 0 0 18px; padding: 6px 16px; background: #ffd65a; border: 2px solid var(--stk-ink); border-radius: 999px; font: 600 .78rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; transform: rotate(-2deg); }
.hero3 .me-sticker { filter: drop-shadow(0 12px 16px rgba(20, 17, 28, .25)); }
.hero3 h1 {
  position: relative; z-index: 2;
  font-family: var(--bold); font-weight: 900;
  font-size: clamp(2.6rem, 7.2vw, 6.4rem);
  line-height: .96; letter-spacing: -.035em;
  margin: 0; max-width: 11.5em;
  color: var(--stk-ink);
}
.hero3 .messy { display: inline-block; animation: jitter 12s ease-in-out infinite; }
@keyframes jitter {
  0%, 4%, 12%, 20%, 28% { rotate: 0deg; }
  8%, 16%, 24% { rotate: -2.5deg; translate: 0 -2px; }
  10%, 18% { rotate: 2deg; }
  30%, 100% { rotate: 0deg; translate: 0 0; }
}
.hero3 .sense { position: relative; display: inline-block; color: #ff6a2b; }
.hero3 .sense svg { position: absolute; left: 0; right: 0; bottom: -.12em; width: 100%; height: .22em; overflow: visible; }
.hero3 .sense path { fill: none; stroke: var(--stk-ink); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: underline 12s ease-in-out infinite; }
@keyframes underline {
  0%, 36% { stroke-dashoffset: 1; opacity: 1; }
  48%, 78% { stroke-dashoffset: 0; opacity: 1; }
  88% { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 1; opacity: 0; }
}
.hero3-sub { max-width: 34em; margin: clamp(22px, 3vw, 32px) auto 0; font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.6; color: #3b3744; }

/* ---------- contact: copy on the left, Nikita among stickers on the right ---------- */
.contact3 { overflow: hidden; }
.contact3-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; }
.contact3 .tape-label { display: inline-block; padding: 4px 14px; margin-bottom: 18px; background: #9ccfff; border: 2px solid var(--stk-ink); font-family: var(--hand); font-size: 1.15rem; color: var(--stk-ink); transform: rotate(-3deg); }
.contact3 h2 { font-family: var(--bold); font-weight: 900; font-size: clamp(2.4rem, 6vw, 4.6rem); line-height: 1; letter-spacing: -.03em; margin: 0 0 18px; }
.contact3 .contact-copy > p { font-size: 1.15rem; margin: 0 0 28px; }
.contact3 .contact-links { align-items: flex-start; flex-direction: row; flex-wrap: wrap; gap: 14px; }
.contact3 .contact-links a { padding: 12px 22px; border: 2.5px solid var(--stk-ink); border-radius: 999px; background: #fff; box-shadow: 4px 4px 0 var(--stk-ink); color: var(--stk-ink); transition: transform .2s ease, box-shadow .2s ease; }
.contact3 .contact-links li:first-child a { background: #ffd65a; }
.contact3 .contact-links a:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--stk-ink); color: var(--stk-ink); }
.contact3 .contact-links span:not(.arrow) { font-family: var(--bold); font-weight: 800; font-size: clamp(1.1rem, 1.8vw, 1.35rem); }

.contact-art { position: relative; height: clamp(420px, 44vw, 560px); }
.c-blob { position: absolute; left: 12%; right: 8%; top: 12%; bottom: 0; border-radius: 48% 52% 44% 56% / 52% 46% 54% 48%; background: var(--mint); border: 2.5px solid var(--stk-ink); }
.me-standing {
  position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; translate: -50% 0;
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 10px 14px rgba(20, 17, 28, .2));
  -webkit-mask-image: linear-gradient(#000 88%, transparent); mask-image: linear-gradient(#000 88%, transparent);
}
.cs { position: absolute; overflow: visible; filter: drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff); animation: bob 3.6s ease-in-out infinite alternate; }
.cs * { stroke: var(--stk-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.cs text { font: 800 26px var(--bold); fill: var(--stk-ink); stroke: none; }
.cs-star1 { width: 64px; left: 4%; top: 6%; rotate: -14deg; }
.cs-star2 { width: 42px; right: 2%; top: 46%; rotate: 12deg; animation-delay: -1.4s; }
.cs-spark { width: 34px; left: 14%; top: 54%; animation-delay: -2s; }
.cs-chat { width: clamp(100px, 11vw, 132px); right: 0; top: 4%; rotate: 6deg; animation-delay: -.8s; z-index: 2; }
.cs-mail { width: 76px; left: 2%; bottom: 14%; rotate: -10deg; animation-delay: -2.6s; z-index: 2; }
.cs-heart { width: 40px; right: 18%; bottom: 8%; rotate: 10deg; animation-delay: -1s; z-index: 2; }
.cs-phone { width: clamp(64px, 7vw, 84px); left: 22%; top: 40%; rotate: -14deg; z-index: 3; animation: ring-bob 3s ease-in-out infinite; }
.cs-phone .ring { animation: ring 3s ease-in-out infinite; }
@keyframes ring-bob { 0%, 70%, 100% { rotate: -14deg; } 74%, 82%, 90% { rotate: -20deg; } 78%, 86% { rotate: -8deg; } }
@keyframes ring { 0%, 66%, 96%, 100% { opacity: 0; } 72%, 90% { opacity: 1; } }

@media (max-width: 760px) {
  .hero3 { margin: 6px 10px 0; border-radius: 24px; min-height: auto; }
  .stk svg { width: 36px; margin: -18px 0 0 -18px; }
  .hero3-inner { padding-bottom: 110px; }
  .contact3-grid { grid-template-columns: 1fr; }
  .contact-art { height: 400px; max-width: 380px; width: 100%; margin: 0 auto; }
}
@media (prefers-reduced-motion: reduce) {
  .stk, .stk svg, .cs, .cs-phone, .hero3 .messy { animation: none; }
  .hero3 .sense path { animation: none; stroke-dashoffset: 0; }
}

/* ---------- journal: same sticker language — flat colour, bold ink outlines ---------- */
.journal { --cover: #4b7bff; --page: #fffdf7; --page-line: #14111c; }
.book-cover { border: 3px solid var(--stk-ink); border-radius: 22px; background: var(--cover); box-shadow: 8px 8px 0 var(--stk-ink); }
.book-cover::after { background: #ff6a2b; border: 2.5px solid var(--stk-ink); box-shadow: none; }
.page { border: 3px solid var(--stk-ink); box-shadow: none !important; background-image: radial-gradient(circle, rgba(20, 17, 28, .14) 1px, transparent 1.3px); background-size: 22px 22px; }
.page.left { border-right-width: 1.5px; }
.page.right { border-left-width: 1.5px; }
.book::before { display: none; }
.bookmark {
  border: 3px solid var(--stk-ink); border-left: 0;
  background: var(--bm);
  box-shadow: 4px 4px 0 var(--stk-ink);
  color: var(--stk-ink);
  font: 800 .82rem/1.15 var(--bold);
}
.bookmark small { font-family: var(--hand); font-weight: 400; opacity: 1; }
.bookmark[aria-selected="true"] { box-shadow: 5px 5px 0 var(--stk-ink); }
.entry .num { display: inline-block; padding: 2px 12px; background: var(--bm); border: 2px solid var(--stk-ink); font-size: 1.1rem; color: var(--stk-ink); }
.entry h3 { font-family: var(--bold); font-weight: 900; letter-spacing: -.03em; line-height: 1; margin-top: 16px; }
.entry h3::after { opacity: 1; height: .32em; }
.entry .product { color: var(--stk-ink); }
.entry .tags .chip { background: #fff; border: 2px solid var(--stk-ink); font-weight: 600; }
.entry .btn-primary { background: #ffd65a; color: var(--stk-ink); border: 2.5px solid var(--stk-ink); box-shadow: 4px 4px 0 var(--stk-ink); transition: transform .2s ease, box-shadow .2s ease; }
.entry .btn-primary:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--stk-ink); }
.print { border: 3px solid var(--stk-ink); border-radius: 10px; box-shadow: 6px 6px 0 var(--stk-ink); }
.print .tape { background: rgba(255, 214, 90, .85); box-shadow: none; }
.thumb { border-radius: 4px; }
.ship-scene .ln { stroke: var(--stk-ink); stroke-width: 3; }
.ship-scene .flag { fill: #ff6a2b; fill-opacity: 1; }
.ship-scene .tick { stroke: #1fb36b; stroke-width: 3.4; }
.ship-scene .ship-note { color: var(--stk-ink); }
@media (max-width: 860px) {
  .bookmark, .bookmark[aria-selected="true"] { border: 3px solid var(--stk-ink); border-bottom: 0; box-shadow: none; background: var(--bm); }
  .bookmarks { padding-top: 6px; }
}

/* ---------- career: turn-by-turn stops, like map directions ---------- */
.resume-link { margin-top: 24px; }
.j-stop { border: 2.5px solid var(--stk-ink); border-radius: 18px; box-shadow: none; opacity: .5; }
.j-stop.is-past { opacity: .75; }
.j-stop.is-current { opacity: 1; border-color: var(--stk-ink); box-shadow: 6px 6px 0 var(--stk-ink); }
.stop-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.j-stop .turn { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; background: #1e8e3e; color: #fff; border: 2px solid var(--stk-ink); }
.j-stop .turn svg { width: 22px; height: 22px; }
.j-stop.j-next .turn { background: #ff3f8e; }
.j-stop .stamp { margin: 0; color: var(--stk-ink); }
.j-stop .stamp::before { content: none; }
.j-stop h3 { font-size: 1.45rem; line-height: 1.1; letter-spacing: -.02em; }
.j-stop .chip { border: 2px solid var(--stk-ink); background: var(--c); color: var(--stk-ink); font-weight: 600; }
.stop-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.stop-actions .btn { margin: 0; }

.dir-box { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 2; }
.dir-panel { position: relative; left: auto; right: auto; top: auto; max-width: none; background: #1e8e3e; color: #fff; border: 2.5px solid var(--stk-ink); border-radius: 16px 16px 0 0; box-shadow: none; padding: 12px 16px; }
.dir-panel > div { flex: 1; min-width: 0; }
.dir-icon { width: 46px; height: 46px; background: transparent; border-radius: 0; }
.dir-icon svg { width: 40px; height: 40px; }
.dir-panel strong { font-family: var(--bold); font-weight: 800; font-size: clamp(1.05rem, 1.6vw, 1.3rem); line-height: 1.15; }
.dir-panel #dir-meta { color: rgba(255, 255, 255, .85); }
.dir-panel small { color: rgba(255, 255, 255, .85); letter-spacing: .04em; align-self: flex-start; }
.dir-then { display: inline-block; padding: 6px 14px; background: #136c2e; color: #fff; border: 2.5px solid var(--stk-ink); border-top: 0; border-radius: 0 0 12px 12px; font-size: .85rem; }
.dir-then b { font-weight: 600; }
.map-card { border: 2.5px solid var(--stk-ink); box-shadow: 8px 8px 0 var(--stk-ink); }
.map .car .body { fill: #ff3f8e; stroke: var(--stk-ink); stroke-width: 1.6; }
@media (max-width: 860px) {
  .dir-box { left: 8px; right: 8px; top: 8px; }
  .dir-panel { left: auto; right: auto; top: auto; padding: 8px 12px; }
  .dir-icon { width: 34px; height: 34px; } .dir-icon svg { width: 30px; height: 30px; }
  .dir-then { font-size: .75rem; padding: 4px 10px; }
}

/* ---------- detours: sticker cards on the green mat ---------- */
.detours .wrap { max-width: 1240px; }
.det-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 36px) clamp(16px, 2.4vw, 28px); }
.det-card {
  position: relative; padding: 22px 22px 24px;
  background: var(--dc); color: var(--stk-ink);
  border: 2.5px solid var(--stk-ink); border-radius: 14px;
  box-shadow: 5px 5px 0 var(--stk-ink);
  rotate: var(--r);
  transition: rotate .4s cubic-bezier(.3, 1.4, .5, 1), translate .3s ease;
}
.det-card:hover { rotate: 0deg; translate: 0 -4px; }
.det-icon { position: absolute; right: 16px; top: 18px; width: 46px; height: 46px; fill: #fffdf7; stroke: var(--stk-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.det-card strong { display: block; font-family: var(--bold); font-weight: 900; font-size: clamp(2.6rem, 4.4vw, 3.6rem); line-height: 1; letter-spacing: -.04em; }
.det-card h3 { font-family: var(--hand); font-weight: 400; font-size: 1.5rem; margin: 4px 0 8px; line-height: 1.05; }
.det-card p { margin: 0; font-size: .95rem; line-height: 1.5; color: #2b2b31; }
@media (max-width: 860px) { .det-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .det-grid { grid-template-columns: 1fr; } }

/* ---------- awards: die-cut sticker badges ---------- */
.awards3 .section-head h2 { font-family: var(--bold); font-weight: 900; }
.aw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 36px); }
.aw-card {
  display: grid; grid-template-columns: auto 1fr; gap: clamp(16px, 2.4vw, 28px); align-items: center;
  padding: clamp(22px, 3vw, 34px);
  background: var(--aw); color: var(--stk-ink);
  border: 2.5px solid var(--stk-ink); border-radius: 22px;
  box-shadow: 6px 6px 0 var(--stk-ink);
}
.aw-badge { width: clamp(96px, 11vw, 132px); height: auto; overflow: visible; rotate: var(--r); filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 8px 8px rgba(20, 17, 28, .2)); transition: rotate .5s cubic-bezier(.3, 1.5, .5, 1); }
.aw-badge * { stroke: var(--stk-ink); stroke-width: 3; stroke-linejoin: round; }
.aw-card:hover .aw-badge { rotate: calc(var(--r) * -6); }
.aw-tag { display: inline-block; padding: 2px 10px; margin-bottom: 10px; background: #fffdf7; border: 2px solid var(--stk-ink); font-family: var(--hand); font-size: 1.05rem; transform: rotate(-2deg); }
.aw-card h3 { font-family: var(--bold); font-weight: 900; font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1.05; letter-spacing: -.02em; margin: 0 0 8px; }
.aw-card p { margin: 0; color: #2b2b31; }
@media (max-width: 860px) { .aw-grid { grid-template-columns: 1fr; } }

/* ---------- the full story: a storybook sticker ---------- */
.story-card { max-width: 760px; text-align: center; padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px); background: var(--mint); border: 2.5px solid var(--stk-ink); border-radius: 28px; box-shadow: 8px 8px 0 var(--stk-ink); }
.storybook { width: clamp(160px, 22vw, 220px); height: auto; overflow: visible; margin-bottom: 8px; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff); }
.storybook * { stroke: var(--stk-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.storybook .sb-spark { transform-box: fill-box; transform-origin: center; animation: twinkle 2.4s ease-in-out infinite; }
.storybook .s2 { animation-delay: -.8s; } .storybook .s3 { animation-delay: -1.6s; }
@keyframes twinkle { 0%, 100% { scale: 1; rotate: 0deg; } 50% { scale: 1.18; rotate: 12deg; } }
.story-card h2 { font-family: var(--bold); font-weight: 900; letter-spacing: -.03em; }
.story-card p { margin: 0 0 24px; font-size: 1.1rem; }
.story-card .hero-actions { justify-content: center; }
.career-cta .btn-primary, .stop-actions .btn-primary, .resume-link { border: 2.5px solid var(--stk-ink); box-shadow: 4px 4px 0 var(--stk-ink); }
.career-cta .btn-primary, .stop-actions .btn-primary { background: #ffd65a; color: var(--stk-ink); }

/* ---------- resume ---------- */
.resume-page .wrap { max-width: 900px; }
.resume-actions { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.resume-actions .btn-primary { background: #ffd65a; color: var(--stk-ink); border: 2.5px solid var(--stk-ink); box-shadow: 4px 4px 0 var(--stk-ink); cursor: pointer; font: inherit; font-weight: 600; }
.resume-sheet { background: #fffdf7; color: var(--stk-ink); border: 2.5px solid var(--stk-ink); border-radius: 22px; box-shadow: 8px 8px 0 var(--stk-ink); padding: clamp(24px, 5vw, 56px); }
.rs-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 16px; padding-bottom: 20px; border-bottom: 2.5px solid var(--stk-ink); }
.rs-head h1 { font-family: var(--bold); font-weight: 900; font-size: clamp(2.2rem, 5vw, 3.2rem); letter-spacing: -.03em; line-height: 1; margin: 0 0 6px; }
.rs-role { margin: 0; font-weight: 600; }
.rs-contact { list-style: none; display: flex; gap: 14px; margin: 0; padding: 0; }
.rs-contact a { font-weight: 600; }
.rs-summary { font-size: 1.08rem; margin: 22px 0 6px; }
.rs-block { margin-top: 26px; }
.rs-block h2 { display: inline-block; font-family: var(--hand); font-weight: 400; font-size: 1.4rem; letter-spacing: 0; margin: 0 0 12px; padding: 0 10px; background: #9be3bf; border: 2px solid var(--stk-ink); transform: rotate(-1.5deg); }
.rs-item + .rs-item { margin-top: 18px; }
.rs-line { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.rs-line h3 { font-family: var(--bold); font-weight: 800; font-size: 1.25rem; margin: 0; }
.rs-line span, .rs-sub, .rs-note { color: #4a4652; font-size: .95rem; }
.rs-sub { margin: 2px 0 8px; font-weight: 600; }
.resume-sheet ul { margin: 0; padding-left: 1.2em; }
.resume-sheet li { margin: 4px 0; }
.rs-tight { list-style: none; padding: 0 !important; }
.rs-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; }
.rs-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.rs-chips span { padding: 4px 12px; border: 2px solid var(--stk-ink); border-radius: 999px; font-size: .9rem; font-weight: 600; background: #fff; }
@media (max-width: 640px) { .rs-cols { grid-template-columns: 1fr; gap: 0; } }
@media print {
  .site-header, .site-footer, .resume-actions, .skip-link { display: none !important; }
  body { background: #fff; }
  .resume-page { padding: 0; }
  .resume-sheet { box-shadow: none; border: 0; padding: 0; }
}

/* contact: Nikita on a call, small, inside a circle */
.contact-art { height: auto; aspect-ratio: 1; max-width: 460px; width: 100%; margin-left: auto; display: grid; place-items: center; }
.c-circle { position: relative; width: 72%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: var(--mint); border: 3px solid var(--stk-ink); box-shadow: 6px 6px 0 var(--stk-ink); }
.c-circle img { position: absolute; left: 50%; bottom: -14%; height: 100%; width: auto; translate: -50% 0; }
.cs-star1 { left: 6%; top: 8%; }
.cs-chat { right: 2%; top: 6%; }
.cs-star2 { right: 4%; top: 52%; }
.cs-spark { left: 4%; top: 50%; }
.cs-mail { left: 6%; bottom: 8%; }
.cs-heart { right: 12%; bottom: 8%; }
@media (max-width: 760px) { .contact-art { height: auto; max-width: 340px; margin: 0 auto; } }

/* ---------- kind words: simple sticker quote cards ---------- */
.kind3 .section-head h2, .work3 h2 { font-family: var(--bold); font-weight: 900; letter-spacing: -.03em; }
.kind3 .quote { background: #fffdf7; color: var(--stk-ink); border: 2.5px solid var(--stk-ink); border-radius: 18px; box-shadow: 5px 5px 0 var(--stk-ink); padding: 24px 24px 20px; }
.kind3 .quote::before { content: none; }
.kind3 .quote.feature { background: var(--qc); }
.kind3 .quote-mark { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--qc); border: 2.5px solid var(--stk-ink); font: 900 2rem/1 var(--bold); color: var(--stk-ink); padding-top: 12px; }
.kind3 .quote.feature .quote-mark { background: #fffdf7; }
.kind3 .quote blockquote { font-family: var(--sans); font-size: 1.05rem; line-height: 1.55; margin: 14px 0 16px; }
.kind3 .quote.feature blockquote { font-family: var(--bold); font-weight: 700; font-size: 1.3rem; line-height: 1.35; }
.kind3 .quote figcaption { border-top: 2px dashed var(--stk-ink); }
.kind3 .quote .who { font-family: var(--bold); font-weight: 800; }
.kind3 .quote .role { color: #4a4652; }
.kind3 .quotes-more a { font-weight: 600; }

/* ---------- how I work: same sticker language, kept calm ---------- */
.work3 h2 em { font-style: normal; color: #ff6a2b; }
.work3 .principles { display: flex; flex-wrap: wrap; gap: 10px; }
.work3 .principles li { padding: 8px 14px; border: 2px solid var(--stk-ink); border-radius: 999px; background: #fffdf7; font-weight: 600; font-size: .95rem; }
.work3 .principles li::before { font-family: var(--hand); font-size: 1rem; color: var(--stk-ink); }
.work3 .process { background: var(--mint); border: 2.5px solid var(--stk-ink); border-radius: 26px; box-shadow: 8px 8px 0 var(--stk-ink); }
.work3 .process-tab { border: 2.5px solid var(--stk-ink); border-radius: 14px; background: #fffdf7; color: var(--stk-ink); font-family: var(--bold); font-weight: 800; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.work3 .process-tab::after { content: none; }
.work3 .process-tab small { font-family: var(--hand); font-weight: 400; font-size: 1rem; }
.work3 .process-tab[aria-selected="true"] { background: var(--tc); box-shadow: 4px 4px 0 var(--stk-ink); transform: translate(-2px, -2px); }
.work3 .proc-art { background: #fffdf7; border: 2.5px solid var(--stk-ink); border-radius: 18px; }
.work3 .proc-art .ln { stroke: var(--stk-ink); stroke-width: 3; }
.work3 .proc-art .ln.soft { opacity: .35; }
.work3 .proc-art .ln.fill-paper { fill: #fff; }
.work3 .proc-art .acc { stroke: var(--stk-ink); stroke-width: 3; fill: var(--a); }
.work3 .proc-art path.acc[d*="l 9 9"], .work3 .proc-art path.acc[d*="l 18 -20"] { fill: none; }
.work3 .proc-copy h3 { font-family: var(--bold); font-weight: 900; letter-spacing: -.02em; line-height: 1.05; }
.work3 .proc-copy p { color: #3b3744; }
.work3 .proc-copy li { border-top: 2px dashed rgba(20, 17, 28, .25); }
.work3 .proc-copy li::before { width: 10px; height: 10px; border: 2px solid var(--stk-ink); background: var(--tc, #ffd65a); }

/* ---------- detours: sticky notes on a sheet of paper ---------- */
.det-paper {
  position: relative; max-width: 1080px; margin: 0 auto;
  padding: clamp(32px, 5vw, 64px) clamp(18px, 4vw, 56px) clamp(40px, 5vw, 64px);
  background:
    linear-gradient(90deg, transparent 54px, rgba(255, 106, 106, .45) 54px 56px, transparent 56px),
    repeating-linear-gradient(#fffdf7 0 31px, rgba(75, 123, 255, .18) 31px 32px);
  border: 2.5px solid var(--stk-ink); border-radius: 6px;
  box-shadow: 6px 6px 0 var(--stk-ink);
}
.det-head { text-align: center; max-width: 620px; margin: 0 auto clamp(28px, 4vw, 44px); }
.det-head .tape-label { display: inline-block; padding: 4px 14px; background: #ffd65a; border: 2px solid var(--stk-ink); font-family: var(--hand); font-size: 1.1rem; transform: rotate(-3deg); }
.det-head h2 { font-family: var(--bold); font-weight: 900; letter-spacing: -.03em; font-size: clamp(2.2rem, 5vw, 3.6rem); margin: 12px 0 10px; }
.det-head p { margin: 0; color: #3b3744; }
.det-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 28px); }
.det-card {
  aspect-ratio: 1; padding: 20px 18px 18px;
  border: 0; border-radius: 2px 2px 18px 2px;
  box-shadow: 0 12px 14px -10px rgba(20, 17, 28, .45), inset 0 -10px 16px -14px rgba(20, 17, 28, .35);
  display: flex; flex-direction: column;
}
.det-card::after { content: ""; position: absolute; right: 0; bottom: 0; width: 22px; height: 22px; background: linear-gradient(135deg, rgba(0, 0, 0, .14) 50%, transparent 50%); border-radius: 0 0 18px 0; }
.det-card .nb-tape { top: -10px; }
.det-icon { width: 38px; height: 38px; right: 14px; top: 16px; }
.det-card strong { font-size: clamp(2.2rem, 3.6vw, 3rem); }
.det-card p { font-size: .9rem; }
@media (max-width: 960px) { .det-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .det-grid { grid-template-columns: 1fr; } .det-card { aspect-ratio: auto; } .det-paper { background: repeating-linear-gradient(#fffdf7 0 31px, rgba(75, 123, 255, .18) 31px 32px); } }

/* ---------- full story: no box, just the storybook and the words ---------- */
.story-card { background: none; border: 0; box-shadow: none; padding: 0; }

/* ---------- journal bookmarks: tucked under the cover, sticking out of the right edge ---------- */
.book-cover { box-shadow: 0 8px 0 var(--stk-ink); }
.journal { padding-right: 124px; }
.bookmarks { top: 64px; right: 0; gap: 10px; }
.bookmark { width: 190px; height: 64px; padding: 0 10px 0 94px; font-size: .8rem; border-left: 0; border-radius: 0 12px 12px 0; box-shadow: none; transform: translateX(-16px); }
.bookmark:hover { transform: translateX(-8px); }
.bookmark[aria-selected="true"] { transform: translateX(0); box-shadow: none; }
@media (max-width: 860px) {
  .journal { padding-right: 0; }
  .bookmarks { position: relative; top: auto; right: auto; flex-wrap: nowrap; overflow: visible; gap: 6px; padding: 0 18px; margin-bottom: -3px; z-index: 0; }
  .book-cover { z-index: 1; }
  .bookmark { flex: 0 0 auto; height: 46px; padding: 8px 12px 0; border-radius: 10px 10px 0 0; transform: translateY(6px); font-size: 0; }
  .bookmark small { margin: 0; font-size: 1rem; }
  .bookmark:hover { transform: translateY(4px); }
  .bookmark[aria-selected="true"] { flex: 1 1 auto; min-width: 0; transform: translateY(0); font-size: .82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .bookmark[aria-selected="true"] small { margin-right: 6px; }
}
@media (max-width: 860px) {
  .bookmark { width: auto; height: 46px; padding: 8px 12px 0; font-size: 0; }
  .bookmark[aria-selected="true"] { font-size: .82rem; }
}
@media (max-width: 560px) {
  .aw-card { grid-template-columns: 1fr; justify-items: start; }
  .aw-badge { width: 92px; }
}
@media (max-width: 860px) {
  .bookmarks { padding: 0 12px; }
  .bookmark { flex: 0 0 46px; padding: 8px 0 0; text-align: center; }
  .bookmark[aria-selected="true"] { flex: 1 1 0; padding: 8px 12px 0; text-align: left; }
}
@media (max-width: 860px) {
  .bookmarks { gap: 4px; padding: 0 10px; }
  .bookmark { flex-basis: 40px; }
  .bookmark[aria-selected="true"] { font-size: .78rem; padding: 8px 8px 0 10px; }
}

/* ---------- kind words: carousel ---------- */
.kind3 .wrap { position: relative; }
.kind3 .quotes {
  columns: auto; display: flex; gap: 24px; align-items: stretch;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4px;
  padding: 6px 4px 18px; margin: 0 -4px;
  scrollbar-width: none; overscroll-behavior-x: contain;
}
.kind3 .quotes::-webkit-scrollbar { display: none; }
.kind3 .quote { flex: 0 0 clamp(270px, 32%, 380px); margin: 0; scroll-snap-align: start; display: flex; flex-direction: column; }
.kind3 .quote.feature { flex-basis: clamp(290px, 44%, 520px); }
.kind3 .quote blockquote { flex: 1; }
.kind3 .quote.reveal { opacity: 1; transform: none; }
.carousel-nav { display: flex; justify-content: flex-end; gap: 10px; margin: -8px 0 16px; }
.car-btn { width: 48px; height: 48px; border-radius: 50%; border: 2.5px solid var(--stk-ink); background: #ffd65a; color: var(--stk-ink); font: 800 1.2rem/1 var(--bold); cursor: pointer; box-shadow: 3px 3px 0 var(--stk-ink); transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease; }
.car-btn:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--stk-ink); }
.car-btn:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--stk-ink); }
.car-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 560px) {
  .kind3 .quote, .kind3 .quote.feature { flex-basis: 84%; }
  .carousel-nav { justify-content: flex-start; margin-top: 0; }
}

/* kind words: every card the same — size, colour, type */
.kind3 .quote, .kind3 .quote.feature { flex: 0 0 clamp(280px, 31%, 360px); background: #fffdf7; min-height: 300px; }
.kind3 .quote blockquote, .kind3 .quote.feature blockquote { font-family: var(--sans); font-weight: 400; font-size: 1.05rem; line-height: 1.55; }
.kind3 .quote-mark, .kind3 .quote.feature .quote-mark { background: var(--qc); }
@media (max-width: 560px) { .kind3 .quote, .kind3 .quote.feature { flex-basis: 84%; } }

/* one page width for header, hero and every section, so all edges line up */
:root { --max: 1440px; }
.hero3 { max-width: calc(var(--max) - 2 * var(--gutter)); margin-inline: auto; }
@media (min-width: 761px) { .hero3 { width: calc(100% - 2 * var(--gutter)); } }
@media (max-width: 760px) { .hero3 { margin-inline: var(--gutter); } }

/* how I work: clear flat-colour illustrations with bold ink outlines */
.work3 .proc-art svg .o { stroke: var(--stk-ink); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.work3 .proc-art svg .o.thin { stroke-width: 3; opacity: .35; fill: none; }
.work3 .proc-art svg .o:not([fill]) { fill: none; }
.work3 .p-ask .big-q { font: 900 96px/1 var(--bold); fill: #ff6a2b; }
.work3 .p-ask .typing { stroke: var(--stk-ink); }
.work3 .p-map .link-line { stroke: var(--stk-ink); stroke-width: 3; }
.work3 .p-map .node-t { font: 800 17px var(--bold); fill: var(--stk-ink); }
.work3 .p-map .hand-t { font: 400 20px var(--hand); fill: var(--stk-ink); }
.work3 .p-simplify .tangle { stroke: #ff3f8e; stroke-width: 3.5; }
.work3 .p-simplify .arrow-line { stroke: var(--stk-ink); stroke-width: 3.5; }
.work3 .p-simplify .btn-t { font: 800 15px var(--bold); fill: var(--stk-ink); text-anchor: middle; }
.work3 .p-ship .flag-p { fill: #1fb36b; }
.work3 .p-ship .confetti path { stroke-width: 4; }

/* journal: simple text link instead of a pill */
.entry .read-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--bold); font-weight: 800; font-size: 1.05rem; color: var(--stk-ink); text-decoration: none; border-bottom: 2.5px solid var(--stk-ink); padding-bottom: 3px; }
.entry .read-link .arrow { transition: transform .2s ease; }
.entry .read-link:hover .arrow { transform: translateX(4px); }
.entry .desc { margin-bottom: 20px; }
.work3 .p-ask .typing { fill: #fffdf7; }
.entry .page.left { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }

/* a smaller journal: narrower, shorter pages, tighter padding */
.journal { max-width: 1000px; margin-inline: auto; }
.book { min-height: 440px; }
.page { padding: clamp(24px, 3vw, 40px) clamp(24px, 3vw, 40px); }
.entry h3 { font-size: clamp(1.7rem, 2.8vw, 2.2rem); }
.entry .desc { font-size: 1rem; }
.entry .page.right .print { max-width: 380px; }
@media (max-width: 860px) { .book { min-height: 0; } }

/* hero: matching stickers, calmer grid, stronger text */
.hero3 { background: var(--mint); }
.hero3::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(20, 17, 28, .06) 1px, transparent 1px) 0 0 / 40px 40px,
    linear-gradient(90deg, rgba(20, 17, 28, .06) 1px, transparent 1px) 0 0 / 40px 40px;
  /* the grid fades out behind the words */
  -webkit-mask-image: radial-gradient(ellipse 46% 50% at 50% 52%, transparent 35%, #000 85%);
  mask-image: radial-gradient(ellipse 46% 50% at 50% 52%, transparent 35%, #000 85%);
}
.stk svg { width: clamp(52px, 5.4vw, 76px); margin: calc(clamp(52px, 5.4vw, 76px) / -2) 0 0 calc(clamp(52px, 5.4vw, 76px) / -2); }
.stk svg * { stroke-width: 4; }
.hero3-inner { padding-bottom: clamp(170px, 17vw, 210px); }
.hero3-sub { color: #26222e; font-size: clamp(1.05rem, 1.45vw, 1.25rem); max-width: 32em; }
.nav-links a { color: #3b3744; font-weight: 500; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--stk-ink); }
@media (max-width: 760px) {
  .stk svg { width: 44px; margin: -22px 0 0 -22px; }
  .hero3-inner { padding-bottom: 120px; }
}
@media (max-width: 760px) {
  .stk:nth-child(1) { --ox: 16% !important; } .stk:nth-child(2) { --ox: 33% !important; } .stk:nth-child(3) { --ox: 50% !important; }
  .stk:nth-child(4) { --ox: 67% !important; } .stk:nth-child(5) { --ox: 84% !important; }
}
@media (max-width: 760px) {
  .hero3-inner { padding-bottom: 150px; }
  .stk { --oy: 93% !important; }
  .stk:nth-child(1) { --mx: 13% !important; --my: 6% !important; }
  .stk:nth-child(2) { --mx: 87% !important; --my: 7% !important; }
  .stk:nth-child(3) { --mx: 13% !important; --my: 27% !important; }
  .stk:nth-child(4) { --mx: 87% !important; --my: 26% !important; }
  .stk:nth-child(5) { --mx: 87% !important; --my: 16% !important; }
}

/* hero fits the first screen: sized by the viewport height as well as width */
.hero3 { min-height: 0; height: calc(100svh - 88px); max-height: 900px; }
.hero3-inner { padding-top: clamp(16px, 3vh, 48px); padding-bottom: clamp(96px, 15vh, 170px); }
.hero3-label { margin-bottom: clamp(8px, 1.6vh, 18px); }
.hero3 .me-sticker { width: min(19vw, 26vh, 226px); margin-bottom: calc(min(19vw, 26vh, 226px) * -.12); }
.hero3 h1 { font-size: min(7.2vw, 8.6vh, 6.4rem); }
.hero3-sub { margin-top: clamp(12px, 2.4vh, 28px); font-size: clamp(1rem, min(1.45vw, 2.2vh), 1.25rem); }
.stk svg { width: min(5.4vw, 8.5vh, 76px); margin: calc(min(5.4vw, 8.5vh, 76px) / -2) 0 0 calc(min(5.4vw, 8.5vh, 76px) / -2); }
@media (max-width: 760px) {
  .hero3 { height: calc(100svh - 120px); min-height: 560px; }
  .hero3 .me-sticker { width: min(42vw, 24vh); margin-bottom: calc(min(42vw, 24vh) * -.12); }
  .hero3 h1 { font-size: min(10.5vw, 6vh); }
  .hero3-inner { padding-bottom: 110px; }
  .stk svg { width: 40px; margin: -20px 0 0 -20px; }
}
/* the tidy row always sits a set distance above the hero's bottom edge */
.stk { --oy: calc(100% - clamp(44px, 7vh, 64px)) !important; }
.hero3-inner { padding-bottom: clamp(100px, 16vh, 150px); }
.hero3 h1 { font-size: min(7vw, 8vh, 6.2rem); }
@media (max-width: 760px) {
  .hero3 { min-height: 500px; }
  .stk { --oy: calc(100% - 44px) !important; }
  .hero3-inner { padding-bottom: 96px; padding-top: 12px; }
  .hero3 .me-sticker { width: min(40vw, 22vh); margin-bottom: calc(min(40vw, 22vh) * -.12); }
  .hero3 h1 { font-size: min(10.5vw, 5.6vh); }
}
@media (max-width: 760px) {
  .stk:nth-child(1) { --mx: 10% !important; --my: 5% !important; }
  .stk:nth-child(2) { --mx: 90% !important; --my: 5% !important; }
  .stk:nth-child(3) { --mx: 10% !important; --my: calc(100% - 52px) !important; }
  .stk:nth-child(4) { --mx: 90% !important; --my: calc(100% - 38px) !important; }
  .stk:nth-child(5) { --mx: 74% !important; --my: calc(100% - 58px) !important; }
  .hero3-inner { padding-top: 40px; }
}
@media (max-width: 760px) and (max-height: 700px) {
  .hero3 .me-sticker { width: 18vh; margin-bottom: -2vh; }
  .hero3 h1 { font-size: min(9.5vw, 5vh); }
  .hero3-sub { font-size: .95rem; line-height: 1.45; }
}
@media (max-width: 380px) { .hero3-label { font-size: .68rem; padding: 6px 12px; } .hero3-inner { padding-top: 52px; } }

/* ---------- work: calmer heading, one motion (sketch → screen), works by tap and keyboard ---------- */
.work-head { grid-template-columns: 1fr; }
.entry .product { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 600; }
/* six bookmarks still fit on the notebook edge */
.bookmarks { gap: 8px; }
.bookmark { height: 58px; }
/* the flip: hover on a mouse, or the button for everyone */
.print.show-ui .sketch { opacity: 0; transform: scale(1.03); filter: blur(2px); }
.print.show-ui .ui { opacity: 1; transform: none; filter: none; }
@media (hover: none) {
  .thumb .sketch { opacity: 1; }
  .thumb .ui { opacity: 0; transform: scale(.97); filter: blur(3px); }
  .print.show-ui .sketch { opacity: 0; }
  .print.show-ui .ui { opacity: 1; transform: none; filter: none; }
}
.print, .print:hover { transform: rotate(1.4deg); }
.flip-btn {
  margin-top: 16px; padding: 8px 16px;
  border: 2px solid var(--stk-ink); border-radius: 999px; background: #fffdf7; color: var(--stk-ink);
  font: 600 .9rem/1 var(--sans); cursor: pointer;
  transition: background .2s ease;
}
.flip-btn:hover { background: var(--bm, #ffd65a); }
.flip-btn[aria-pressed="true"] { background: var(--bm, #ffd65a); }
.bookmark { transition: transform .25s ease; }
@media (prefers-reduced-motion: reduce) {
  .thumb .sketch, .thumb .ui { transition: none; filter: none !important; transform: none !important; }
}

/* ==========================================================
   Accessibility basics, site-wide
   ========================================================== */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* a clear focus ring for keyboard users, on every interactive thing */
:where(a, button, [role="tab"], [tabindex]):focus-visible { outline: 3px solid #3a5cff; outline-offset: 3px; border-radius: 6px; }
.skip-link:focus { position: fixed; left: 16px; top: 16px; z-index: 1000; padding: 10px 16px; background: #ffd65a; color: var(--stk-ink); border: 2px solid var(--stk-ink); border-radius: 10px; }
html { scroll-padding-top: 96px; }
/* people who ask for less motion get a still page */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* hero animation can be paused (it loops for longer than 5 seconds) */
.hero3.paused *, .hero3.paused { animation-play-state: paused !important; }
.motion-btn {
  position: absolute; right: 16px; bottom: 16px; z-index: 3;
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px;
  border: 2px solid var(--stk-ink); border-radius: 999px; background: #fffdf7; color: var(--stk-ink);
  font: 600 .8rem/1 var(--sans); cursor: pointer;
}
.motion-btn:hover { background: #ffd65a; }

/* ==========================================================
   Case study: Genie (and a layout other case studies can reuse)
   ========================================================== */
.cs-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.cs-toc { position: sticky; top: 96px; padding-top: clamp(40px, 6vw, 72px); }
.cs-toc-title { margin: 0 0 10px; font: 600 .74rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #4a4652; }
.cs-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; border-left: 2px solid rgba(20, 17, 28, .12); }
.cs-toc a { display: block; padding: 6px 12px; margin-left: -2px; border-left: 2px solid transparent; color: #4a4652; text-decoration: none; font-size: .92rem; }
.cs-toc a:hover { color: var(--stk-ink); }
.cs-toc a[aria-current="true"] { color: var(--stk-ink); font-weight: 600; border-left-color: var(--stk-ink); }
.cs3 { padding-top: clamp(40px, 6vw, 72px); }
.cs3 .cs-section { grid-template-columns: 1fr; gap: 8px; scroll-margin-top: 96px; }
.cs3 .cs-section h2 { color: #4a4652; }
.cs3 .cs-section .content { max-width: 720px; }
.cs3 .content h3 { font-family: var(--bold); font-weight: 900; letter-spacing: -.02em; line-height: 1.1; }
.cs-sub { font-family: var(--bold); font-weight: 800; font-size: 1.15rem; margin: 26px 0 8px; }
.cs-list { margin: 0 0 1.1em; padding-left: 1.2em; }
.cs-list li { margin: 6px 0; font-size: 1.04rem; }
.cs-callout { padding: 16px 20px; background: #fff5d1; border: 2px solid var(--stk-ink); border-radius: 14px; }
.cs-table { width: 100%; border-collapse: collapse; font-size: .98rem; border: 2px solid var(--stk-ink); border-radius: 14px; overflow: hidden; }
.cs-table th, .cs-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid rgba(20, 17, 28, .15); vertical-align: top; }
.cs-table thead th { background: var(--mint); font-weight: 700; }
.cs-table tbody tr:last-child td { border-bottom: 0; }
.cs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 6px 0 18px; }
.cs-cards.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cs-card { padding: 16px 18px; background: var(--c); border: 2px solid var(--stk-ink); border-radius: 14px; box-shadow: 4px 4px 0 var(--stk-ink); }
.cs-card h4 { margin: 0 0 6px; font-family: var(--bold); font-weight: 800; font-size: 1.05rem; }
.cs-card p { margin: 0 !important; font-size: .98rem !important; }
.cs-stats { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cs-stats li { padding: 16px 18px; background: #fffdf7; border: 2px solid var(--stk-ink); border-radius: 14px; }
.cs-stats strong { display: block; font-family: var(--bold); font-weight: 900; font-size: 2.4rem; line-height: 1; letter-spacing: -.03em; }
.cs-stats span { display: block; margin-top: 8px; font-size: .95rem; }
.cs-persona { padding: 18px 20px; background: #fffdf7; border: 2px solid var(--stk-ink); border-radius: 16px; }
.cs-persona p:last-child { margin-bottom: 0 !important; }
.cs-quote { margin: 18px 0 0; padding: 4px 0 4px 18px; border-left: 4px solid #ff6a2b; }
.cs-quote p { font-family: var(--bold); font-weight: 700; font-size: 1.2rem !important; line-height: 1.4; }
.cs-more a, .cs-top a { font-weight: 600; color: var(--stk-ink); }
.cs-top { margin: 24px 0 0; }
@media (max-width: 900px) {
  .cs-layout { grid-template-columns: 1fr; }
  .cs-toc { position: static; padding-top: 24px; }
  .cs-toc ol { display: flex; flex-wrap: wrap; gap: 8px; border: 0; }
  .cs-toc a { border: 2px solid rgba(20, 17, 28, .2); border-radius: 999px; padding: 6px 12px; margin: 0; }
  .cs-toc a[aria-current="true"] { border-color: var(--stk-ink); }
  .cs-cards, .cs-stats, .cs-cards.two { grid-template-columns: 1fr; }
  .cs-table { font-size: .9rem; }
  .cs-table th, .cs-table td { padding: 10px; }
}
.hero-tools { display: flex; justify-content: flex-end; margin-top: 10px; }
.hero-tools .motion-btn { position: static; }
@media (prefers-reduced-motion: reduce) { .hero-tools { display: none; } }

/* contrast fixes (WCAG AA): darker orange for small labels, a touch darker for big orange words */
.label { color: #c2410c; }
.hero3 .sense, .work3 h2 em { color: #d9480f; }
.mat { background-color: #32774f; }
.mat-head p { color: #fff; }
@media (max-width: 860px) {
  .bookmarks { gap: 3px; padding: 0 8px; }
  .bookmark { flex-basis: 34px; }
  .bookmark small { font-size: .95rem; }
  .bookmark[aria-selected="true"] { padding: 8px 6px 0 8px; font-size: .74rem; }
}
@media (max-width: 413px) {
  .bookmark, .bookmark[aria-selected="true"] { flex: 1 1 0; font-size: 0; padding: 8px 0 0; text-align: center; }
  .bookmark[aria-selected="true"] small { margin: 0; }
}

/* journal: only the final screen, taped neatly at the two top corners */
.thumb .ui, .print:hover .ui, .print.show-ui .ui { opacity: 1 !important; transform: none !important; filter: none !important; }
.print, .print:hover { transform: rotate(-1deg); }
.print .tape { width: 78px; height: 22px; top: -12px; background: rgba(255, 214, 90, .85); border-left: 2px dashed rgba(20, 17, 28, .12); border-right: 2px dashed rgba(20, 17, 28, .12); -webkit-mask-image: none; mask-image: none; }
.print .tape.t1 { left: -18px; right: auto; transform: rotate(-38deg); top: -2px; }
.print .tape.t2 { right: -18px; left: auto; transform: rotate(38deg); top: -2px; }
.entry .page.right { padding-top: clamp(36px, 4vw, 48px); }

/* a static rubber stamp beside the Work heading */
.work-head { grid-template-columns: 1fr auto; align-items: center; }
.shipped-stamp {
  display: inline-block; padding: 8px 18px;
  border: 4px double #c2410c; border-radius: 10px;
  color: #c2410c; font: 900 clamp(1.3rem, 2.4vw, 1.9rem)/1 var(--bold); letter-spacing: .14em; text-transform: uppercase;
  transform: rotate(-10deg); opacity: .9;
  -webkit-mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, .75) 61%, #000 75%);
  mask-image: radial-gradient(circle at 30% 40%, #000 60%, rgba(0, 0, 0, .75) 61%, #000 75%);
}
@media (max-width: 560px) { .shipped-stamp { font-size: 1.1rem; padding: 6px 12px; justify-self: start; } .work-head { grid-template-columns: 1fr; } }
.thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; }

/* Genie: figures, screen gallery, swatches, persona avatar */
.cs-figure { margin: 18px 0 8px; }
.cs-figure img { display: block; width: 100%; height: auto; border: 2px solid var(--stk-ink); border-radius: 14px; background: #0c1412; }
.cs-figure figcaption, .cs-shot figcaption { margin-top: 8px; font-size: .92rem; color: #4a4652; }
.cs-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 14px; margin-top: 18px; }
.cs-shot { margin: 0; }
.cs-shot img { display: block; width: 100%; height: auto; border: 2px solid var(--stk-ink); border-radius: 12px; }
.cs-shot figcaption { font-size: .86rem; line-height: 1.45; }
.cs-swatches { list-style: none; padding: 0; margin: 6px 0 18px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.cs-swatches li { padding: 10px; border: 2px solid var(--stk-ink); border-radius: 14px; background: #fffdf7; font-size: .92rem; }
.cs-swatches span { display: block; height: 64px; border-radius: 8px; margin-bottom: 8px; border: 1px solid rgba(20, 17, 28, .2); }
.cs-persona.has-avatar { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; margin-bottom: 14px; }
.cs-avatar { width: 96px; height: 96px; }
.cs-persona-name { font-size: 1.1rem !important; }
.cs-mini { margin: 0; padding-left: 1.1em; font-size: .95rem; }
.cs-mini li { margin: 4px 0; }
.cs3 .cs-section .content { max-width: 860px; }
@media (max-width: 900px) {
  .cs-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cs-swatches { grid-template-columns: 1fr; }
}
@media (max-width: 480px) { .cs-persona.has-avatar { grid-template-columns: 72px 1fr; } .cs-avatar { width: 72px; height: 72px; } }

/* ---------- journal bookmarks: ribbon bookmarks with a notched tail ---------- */
.journal .bookmark {
  isolation: isolate;
  border: 0; border-radius: 0; box-shadow: none;
  background: var(--stk-ink);               /* the outline */
  clip-path: polygon(0 0, 100% 0, calc(100% - 18px) 50%, 100% 100%, 0 100%);
  padding-right: 26px;
}
.journal .bookmark::before {                /* the ribbon fabric */
  content: ""; position: absolute; z-index: -1;
  inset: 2.5px 3px 2.5px 0;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .28), transparent 35%, rgba(0, 0, 0, .06)),
    var(--bm);
  clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
}
.journal .bookmark::after {                 /* a stitched edge, like woven ribbon */
  content: ""; position: absolute; z-index: -1; left: 0; right: 22px; top: 8px; bottom: 8px;
  border-top: 1.5px dashed rgba(20, 17, 28, .28); border-bottom: 1.5px dashed rgba(20, 17, 28, .28);
}
@media (max-width: 860px) {
  /* on phones the ribbons stick up above the notebook, tail at the top */
  .journal .bookmark, .journal .bookmark[aria-selected="true"] {
    clip-path: polygon(0 0, 50% 12px, 100% 0, 100% 100%, 0 100%);
    padding: 16px 6px 0; border: 0;
  }
  .journal .bookmark::before { inset: 0 2.5px 0 2.5px; clip-path: polygon(0 0, 50% 11px, 100% 0, 100% 100%, 0 100%); top: 3px; }
  .journal .bookmark::after { left: 7px; right: 7px; top: 14px; bottom: 0; border: 0; border-left: 1.5px dashed rgba(20, 17, 28, .28); border-right: 1.5px dashed rgba(20, 17, 28, .28); }
  .journal .bookmark { height: 52px; }
}

/* ==========================================================
   Genie case study — one calm card style, colour only in icons
   ========================================================== */
.ico { flex: 0 0 auto; display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--stk-ink); background: #fffdf7; color: var(--stk-ink); }
.ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ico.go { background: #c9f0d8; color: #146c3a; }
.ico.warn { background: #ffe3b0; color: #9a4a00; }
.genie-feats { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 10px 14px; }
.genie-feats li { display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border: 2px solid var(--stk-ink); border-radius: 999px; background: #fffdf7; font-weight: 600; font-size: .95rem; }
.genie-feats .ico { width: 30px; height: 30px; border-radius: 50%; background: var(--mint); }
.genie-cover { margin-top: clamp(28px, 4vw, 44px); }
.genie-cover img { border-radius: 16px; box-shadow: 8px 8px 0 var(--stk-ink); }
.cs-points { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: 12px; }
.cs-points.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cs-points li { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: #fffdf7; border: 2px solid var(--stk-ink); border-radius: 14px; font-size: 1rem; line-height: 1.5; }
.cs-callout { display: flex; gap: 12px; align-items: flex-start; background: #fffdf7; }
.cs-defs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0 0 14px; }
.cs-defs div { padding: 14px 16px; border: 2px solid var(--stk-ink); border-radius: 14px; background: #fffdf7; }
.cs-defs dt { font: 600 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #4a4652; margin-bottom: 8px; }
.cs-defs dd { margin: 0; font-weight: 600; }
.cs-qs { margin: 0 0 10px; padding-left: 1.4em; columns: 2 280px; column-gap: 32px; }
.cs-qs li { margin: 0 0 8px; break-inside: avoid; }
/* survey as dot grids: 100 dots, filled to the percentage */
.cs-dots { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cs-dots li { padding: 18px; border: 2px solid var(--stk-ink); border-radius: 16px; background: #fffdf7; }
.dotgrid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 7px; margin-bottom: 16px; direction: rtl; }
.dotgrid i { aspect-ratio: 1; border-radius: 50%; background: rgba(20, 17, 28, .12); }
.dotgrid i.on { background: #1f9e8f; }
.cs-dots strong { display: block; font-family: var(--bold); font-weight: 900; font-size: 2.4rem; line-height: 1; letter-spacing: -.03em; color: #13786c; }
.cs-dots span { display: block; margin-top: 6px; font-size: .95rem; }
/* persona: Robert, drawn as a sticker */
.cs-persona { display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center; padding: 18px 20px; background: #fffdf7; border: 2px solid var(--stk-ink); border-radius: 18px; margin-bottom: 14px; }
.cs-avatar { width: 150px; height: auto; overflow: visible; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 6px 8px rgba(20, 17, 28, .2)); }
.cs-avatar .av-outline > * { stroke: var(--stk-ink); stroke-width: 3; stroke-linejoin: round; }
.cs-persona .cs-quote { margin-top: 10px; }
/* empathy map as a 2x2 */
.cs-quad { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--stk-ink); border-radius: 16px; overflow: hidden; background: #fffdf7; }
.cs-quad > div { padding: 16px 18px; }
.cs-quad > div:nth-child(1), .cs-quad > div:nth-child(2) { border-bottom: 2px solid var(--stk-ink); }
.cs-quad > div:nth-child(odd) { border-right: 2px solid var(--stk-ink); }
.cs-quad h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--bold); font-weight: 800; font-size: 1.1rem; }
.cs-quad ul { margin: 0; padding-left: 1.1em; font-size: .96rem; }
.cs-quad li { margin: 4px 0; }
/* wireframes on a plain light grid */
.cs-wires { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px 14px; margin-top: 14px; }
.cs-wire { margin: 0; }
.cs-wire img { display: block; width: 100%; height: auto; border: 2px solid var(--stk-ink); border-radius: 10px; background: #fff; }
.cs-wire figcaption { margin-top: 6px; font-size: .85rem; color: #4a4652; }
.cs-shot figcaption { font-size: .86rem; }
/* testing verdict */
.cs-verdict { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cs-verdict > div { padding: 16px 18px; border: 2px solid var(--stk-ink); border-radius: 16px; }
.cs-verdict .good { background: #eefaf2; }
.cs-verdict .fix { background: #fff6e3; }
.cs-verdict h4 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--bold); font-weight: 800; font-size: 1.1rem; }
.cs-verdict ul { margin: 0; padding-left: 1.1em; }
.cs-verdict li { margin: 6px 0; }
@media (max-width: 900px) {
  .cs-points.three, .cs-defs, .cs-dots, .cs-verdict { grid-template-columns: 1fr; }
  .cs-wires { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .cs-quad { grid-template-columns: 1fr; }
  .cs-quad > div { border-right: 0 !important; border-bottom: 2px solid var(--stk-ink); }
  .cs-quad > div:last-child { border-bottom: 0; }
  .cs-persona { grid-template-columns: 1fr; justify-items: start; }
  .cs-avatar { width: 120px; }
  .cs-wires { grid-template-columns: 1fr; }
}
/* fill from the bottom row up, left to right — like a tally */
.dotgrid { display: flex; flex-wrap: wrap-reverse; gap: 6px; direction: ltr; max-width: 240px; }
.dotgrid i { width: calc((100% - 54px) / 10); }
@media (max-width: 900px) { .cs-dots li { display: grid; grid-template-columns: 160px 1fr; gap: 6px 18px; align-items: end; } .cs-dots .dotgrid { grid-row: span 2; margin: 0; } }
@media (max-width: 400px) { .cs-dots li { grid-template-columns: 120px 1fr; } }
/* journal: just the product image, edge to edge inside the outlined card */
.print { padding: 0; overflow: visible; }
.print .thumb { border-radius: 8px; overflow: hidden; }
.thumb:has(.thumb-img) { aspect-ratio: 1196 / 768; background: #202124; }
.thumb-img { object-position: center; }
/* wireframes: plain, no frame */
.cs-wire img { border: 0; border-radius: 0; background: none; }
/* final screens: sharp ones large, the rest smaller */
.cs-gallery.big { grid-template-columns: 1fr 1fr; gap: 22px 18px; }
.cs-gallery.big .cs-shot:first-child { grid-column: 1 / -1; }
.cs-gallery.small { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 8px; }
.cs-shot img { border: 0; border-radius: 10px; box-shadow: 0 10px 24px -14px rgba(20, 17, 28, .5); }
@media (max-width: 900px) { .cs-gallery.small { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .cs-gallery.big { grid-template-columns: 1fr; } }
.contact-email { margin: 18px 0 0; font-size: 1rem; color: #3b3744; }
.contact-email a { color: var(--stk-ink); font-weight: 600; word-break: break-all; }
.det-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 860px) { .det-grid { grid-template-columns: 1fr; max-width: 380px; margin: 0 auto; } .det-card { aspect-ratio: auto; } }

/* chips: no invisible dot, so no empty gap at the start */
.j-stop .chip::before { content: none; }
.j-stop .chip { gap: 0; padding: 4px 12px; }

/* resume: a full page document, not a card */
.resume-body { background: #fff; }
.resume-body .resume-page { padding-top: clamp(20px, 3vw, 36px); }
.resume-body .resume-page .wrap { max-width: 920px; }
.resume-body .resume-sheet { border: 0; border-radius: 0; box-shadow: none; padding: clamp(8px, 2vw, 24px) 0 clamp(40px, 6vw, 72px); background: none; }
.resume-body .rs-head { border-bottom-width: 3px; }
.resume-body .site-footer { background: #fff; }
@media print { @page { size: A4; margin: 14mm; } }

/* ==========================================================
   Genie refinements: lighter type, tighter corners, Gantt, viewer
   ========================================================== */
.cs3 .content h3 { font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -.015em; }
.genie-hero h1 { font-weight: 800; }
.cs-sub, .cs-quad h4, .cs-verdict h4, .cs-card h4 { font-weight: 700 !important; }
.cs-dots strong { font-weight: 700; font-size: 2.1rem; }
.cs-quote p { font-weight: 600 !important; }
.cs-points b, .cs-defs dd, .genie-feats li { font-weight: 600; }
/* corners: a little less round */
.cs-points li, .cs-defs div, .cs-dots li, .cs-persona, .cs-quad, .cs-verdict > div, .cs-callout, .cs-table, .cs-swatches li { border-radius: 8px; }
.ico { border-radius: 6px; }
.cs-shot img, .cs-figure img, .genie-cover img { border-radius: 6px; }
.cs-swatches span { border-radius: 4px; }
.genie-feats li { border-radius: 999px; }
.cs-defs.one { grid-template-columns: 1fr; }

/* the design process as a Gantt chart, like the Behance timeline */
.gantt { --cols: 4; margin: 18px 0 6px; padding: 18px; border: 2px solid var(--stk-ink); border-radius: 8px; background: #fffdf7; }
.gantt-phases, .gantt-weeks { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.gantt-phases { display: block; height: 22px; margin-bottom: 8px; }
.gantt-phases span { position: absolute; left: calc(var(--s) * 100%); width: calc((var(--e) - var(--s)) * 100%); font: 700 .78rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #4a4652; }
.gantt-weeks { padding-bottom: 10px; border-bottom: 2px solid rgba(20, 17, 28, .12); }
.gantt-weeks span { font-weight: 600; font-size: .92rem; padding-left: 8px; border-left: 2px dashed rgba(20, 17, 28, .25); }
.gantt-weeks small { display: block; font-weight: 400; color: #4a4652; font-size: .8rem; }
.gantt-bars { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px;
  background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(20, 17, 28, .12) calc(25% - 1px) 25%); }
.gantt-bars li { position: relative; height: 36px; }
.gantt-bars .bar { position: absolute; top: 0; bottom: 0; left: calc(var(--s) * 100%); width: calc((var(--e) - var(--s)) * 100%); display: flex; align-items: center; gap: 6px; padding: 0 12px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; background: #5eb6af; color: #0f2e2b; border: 2px solid var(--stk-ink); border-radius: 999px; font-size: .9rem; }
.gantt-bars .bar b { font-weight: 700; }
.gantt-bars .bar small { font-size: .8rem; opacity: .85; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .gantt { padding: 12px; overflow-x: auto; }
  .gantt > * { min-width: 520px; }
}

/* tap to enlarge */
.zoom { position: relative; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 6px; }
.zoom-hint { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: rgba(255, 253, 247, .92); border: 2px solid var(--stk-ink); font-size: 14px; opacity: 0; transition: opacity .2s ease; }
.zoom:hover .zoom-hint, .zoom:focus-visible .zoom-hint { opacity: 1; }
@media (hover: none) { .zoom-hint { opacity: 1; } }
.viewer { width: min(1200px, 94vw); max-height: 92vh; padding: 14px; border: 2px solid var(--stk-ink); border-radius: 10px; background: #fffdf7; }
.viewer::backdrop { background: rgba(20, 17, 28, .7); }
.viewer figure { margin: 0; }
.viewer img { display: block; width: 100%; max-height: 74vh; object-fit: contain; border-radius: 6px; background: #111; }
.viewer figcaption { margin-top: 10px; font-size: .95rem; }
.viewer-bar { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.viewer-bar button { padding: 8px 14px; border: 2px solid var(--stk-ink); border-radius: 999px; background: #fff; font: 600 .9rem/1 var(--sans); cursor: pointer; }
.viewer-bar .v-close { margin-left: auto; background: #ffd65a; }
.v-count { font-size: .9rem; color: #4a4652; }

/* reading progress */
.read-progress { position: fixed; left: 0; right: 0; top: 0; height: 3px; z-index: 60; pointer-events: none; }
.read-progress i { display: block; height: 100%; width: 0; background: #1f9e8f; }

/* contents: collapsible on small screens */
.cs-toc-box summary { list-style: none; cursor: default; }
.cs-toc-box summary::-webkit-details-marker { display: none; }
@media (max-width: 900px) {
  .cs-toc-box { border: 2px solid var(--stk-ink); border-radius: 8px; padding: 10px 14px; background: #fffdf7; }
  .cs-toc-box summary { cursor: pointer; margin: 0; display: flex; justify-content: space-between; }
  .cs-toc-box summary::after { content: "＋"; }
  .cs-toc-box[open] summary::after { content: "－"; }
  .cs-toc-box[open] ol { margin-top: 10px; }
}
.cs-layout > * { min-width: 0; }
@media (max-width: 900px) { .cs-toc, .cs-toc-box { max-width: 100%; } .cs-toc ol { flex-wrap: wrap; } }
.cs3 .cs-section { grid-template-columns: minmax(0, 1fr); }
.cs3 .cs-section > .content { min-width: 0; }
table.sr-only { display: block; }

/* ---------- Genie: less boxy ---------- */
/* icons: no box, just the coloured glyph */
.ico, .ico.go, .ico.warn { width: auto; height: auto; border: 0; border-radius: 0; background: none; }
.ico svg { width: 22px; height: 22px; }
.ico.go { color: #13786c; }
.ico.warn { color: #b45309; }
.genie-feats .ico { width: auto; height: auto; background: none; }
/* lists and facts sit on the page with thin dividers instead of boxes */
.cs-points li { border: 0; border-radius: 0; background: none; padding: 12px 0; border-top: 1px solid rgba(20, 17, 28, .14); }
.cs-points li:last-child { border-bottom: 1px solid rgba(20, 17, 28, .14); }
.cs-points.three li { border-bottom: 0; }
.cs-defs div { border: 0; border-radius: 0; background: none; padding: 12px 0; border-top: 2px solid var(--stk-ink); }
.cs-callout { border: 0; border-left: 4px solid #1f9e8f; border-radius: 0; background: #eef7f5; padding: 14px 18px; }
.cs-dots li { border: 0; background: none; padding: 0; }
.cs-verdict > div { border: 0; border-radius: 8px; }
.cs-quad { border-width: 1.5px; border-radius: 8px; }
.cs-quad > div:nth-child(1), .cs-quad > div:nth-child(2) { border-bottom-width: 1.5px; }
.cs-quad > div:nth-child(odd) { border-right-width: 1.5px; }
.gantt { border-width: 1.5px; }
.cs-table { border-width: 1.5px; }

/* persona: open and calm */
.persona2 { display: grid; grid-template-columns: 140px 1fr; gap: 24px; align-items: center; margin: 4px 0 22px; }
.persona2 .cs-avatar { width: 140px; }
.persona2-name { font-size: 1.1rem !important; margin-bottom: 6px !important; }
.persona2 .cs-quote { margin: 12px 0 0; }
.persona2-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 18px; border-top: 1px solid rgba(20, 17, 28, .14); }
.persona2-cols h4 { margin: 8px 0 4px; font-family: var(--bold); font-weight: 700; font-size: 1.05rem; }
.persona2-cols p { margin: 0 !important; font-size: .98rem !important; }
@media (max-width: 700px) {
  .persona2 { grid-template-columns: 96px 1fr; gap: 16px; align-items: start; }
  .persona2 .cs-avatar { width: 96px; }
  .persona2-cols { grid-template-columns: 1fr; gap: 16px; }
}

/* contents: grouped and simple */
.cs-toc .has-sub > ol { list-style: none; margin: 2px 0 6px; padding: 0 0 0 12px; display: grid; gap: 0; border: 0; }
.cs-toc .has-sub > ol a { font-size: .86rem; padding: 4px 12px; }
.cs-toc .has-sub > a { font-weight: 500; }
.cs-toc .has-sub.in > a { color: var(--stk-ink); font-weight: 600; }
@media (min-width: 901px) {
  /* sub-items only open for the group you're reading — keeps the list short */
  .cs-toc .has-sub > ol { display: none; }
  .cs-toc .has-sub.in > ol { display: grid; }
}
@media (max-width: 900px) {
  .cs-toc ol { display: grid; gap: 2px; }
  .cs-toc a { border: 0; border-radius: 0; padding: 6px 4px; }
  .cs-toc .has-sub > ol { padding-left: 14px; }
}

/* persona photo in a circle */
.persona-photo { display: block; width: 140px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background: #9ccfff; border: 2px solid var(--stk-ink); }
.persona-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
@media (max-width: 700px) { .persona-photo { width: 96px; } }

/* empathy map: four soft colours, Robert in the middle */
.cs-quad { position: relative; border: 0; border-radius: 8px; gap: 6px; background: none; overflow: visible; }
.cs-quad > div { border: 0 !important; border-radius: 8px; padding: 18px 20px; }
.cs-quad > div:nth-child(1) { background: #fff3c4; padding-right: 70px; }
.cs-quad > div:nth-child(2) { background: #e1efff; padding-left: 70px; }
.cs-quad > div:nth-child(3) { background: #ddf5e8; padding-right: 70px; }
.cs-quad > div:nth-child(4) { background: #ffe4ec; padding-left: 70px; }
.cs-quad h4 { font-size: 1.1rem; }
.quad-photo { position: absolute; left: 50%; top: 50%; width: 112px; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; overflow: hidden; background: #fffdf7; border: 4px solid #f6f3ee; box-shadow: 0 0 0 2px var(--stk-ink); }
.quad-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 12%; }
@media (max-width: 560px) {
  .cs-quad { grid-template-columns: 1fr; padding-top: 70px; }
  .cs-quad > div { padding: 16px 18px !important; }
  .quad-photo { top: 0; translate: -50% 0; width: 88px; }
}
@media (max-width: 560px) { .cs-quad { padding-top: 104px; } }
/* persona: a bigger circle, and Robert fills more of it */
.persona2 { grid-template-columns: 190px 1fr; gap: 28px; }
.persona-photo { width: 190px; }
.persona-photo img, .quad-photo img { transform: scale(1.18); transform-origin: 50% 0%; }
@media (max-width: 700px) { .persona2 { grid-template-columns: 1fr; justify-items: start; } .persona-photo { width: 150px; } }

/* Genie: heading levels fixed — small label stays decorative, big title is the h2 */
.cs-kicker { margin: 0 0 6px; font: 600 .8rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #4a4652; padding-top: 8px; }
.cs3 .cs-title { font-family: var(--bold); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -.015em; line-height: 1.15; margin: 0 0 18px; }
.cs3 h3.cs-sub { font-family: var(--bold); font-weight: 700; font-size: 1.15rem; margin: 26px 0 8px; }
.cs-quad h3, .cs-verdict h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-family: var(--bold); font-weight: 700; font-size: 1.1rem; }
.persona2-cols h3 { margin: 8px 0 4px; font-family: var(--bold); font-weight: 700; font-size: 1.05rem; }
.cs-hint { margin: -6px 0 12px; font-size: .9rem; color: #4a4652; }
.gantt-hint { display: none; }
@media (max-width: 640px) { .gantt-hint { display: block; margin-top: 8px; } }
.cs-next-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 640px) { .cs-next-row { grid-template-columns: 1fr; } }
.cs3 .cs-section h2.cs-title { font-family: var(--bold); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.8rem); letter-spacing: -.015em; line-height: 1.15; text-transform: none; color: var(--stk-ink); padding-top: 0; margin: 0 0 18px; }
.cs3 .content h3.cs-sub { font-size: 1.15rem; margin: 26px 0 8px; letter-spacing: 0; }
.cs3 .content .persona2-cols h3 { font-size: 1.05rem; margin: 8px 0 4px; letter-spacing: 0; }
.cs3 .content .cs-quad h3, .cs3 .content .cs-verdict h3 { font-size: 1.1rem; margin: 0 0 10px; letter-spacing: 0; }

/* Genie: easier reading — comfortable size, line height and line length */
.cs3 .content p, .cs3 .content li, .cs3 .content dd { font-size: 1.08rem; line-height: 1.7; }
.cs3 .content > p, .cs3 .content > ul, .cs3 .content > ol { max-width: 66ch; }
.cs3 .cs-section { padding: 56px 0; }
.cs3 .cs-quad li, .cs3 .cs-verdict li, .cs3 .persona2-cols p, .cs3 .cs-dots span { font-size: 1rem !important; line-height: 1.6; }

/* Strategy: no dividing lines, just space */
#strategy .cs-defs div { border-top: 0; padding: 0; }
#strategy .cs-defs { gap: 22px; margin-bottom: 22px; }
#strategy .cs-points li { border: 0 !important; padding: 6px 0; }

/* the contact section closes every page; it isn't printed with the resume */
@media print { .contact3 { display: none !important; } }

/* ---------- mobile fixes from the walkthrough ---------- */
@media (max-width: 860px) {
  /* career: the sticky map sits below the (taller) phone header */
  .journey-map { top: 112px; }
}
@media (max-width: 900px) {
  /* genie: no big gap under the collapsed contents box */
  .cs-toc { padding-top: 16px; }
  .cs3 { padding-top: 8px; }
}
@media (max-width: 760px) {
  /* hero: arms rest on the headline without hiding "messy" */
  .hero3 .me-sticker { margin-bottom: calc(min(40vw, 22vh) * -.04); }
}
@media (max-width: 700px) {
  /* viewer: full screen on phones; drag to look around a larger image */
  .viewer { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; padding: 12px; border: 0; border-radius: 0; display: none; flex-direction: column; }
  .viewer[open] { display: flex; }
  .viewer figure { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  .viewer .v-pan { flex: 1; min-height: 0; overflow: auto; border-radius: 6px; background: #111; -webkit-overflow-scrolling: touch; }
  .viewer img { width: 220%; max-width: none; max-height: none; height: auto; border-radius: 0; }
  .viewer figcaption { font-size: .9rem; }
  .viewer .v-tip { display: block; margin-top: 6px; font-size: .8rem; color: #4a4652; }
}
.viewer .v-tip { display: none; }
@media (max-width: 700px) { .viewer .v-pan { display: flex; align-items: center; } .viewer .v-pan img { flex: 0 0 auto; } }

/* ==========================================================
   Mobile polish: tap targets, readable small text, header, contact
   ========================================================== */
.site-header { transition: transform .25s ease; }
@media (max-width: 760px) {
  .site-header.hdr-hide { transform: translateY(-100%); }
  html.hdr-hidden .journey-map { top: 10px; }
  .journey-map { transition: top .25s ease; }
  /* tap targets of at least 44px */
  .nav-links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; }
  .nav-links { margin-inline: -6px; }
  .brand { min-height: 44px; }
  .nav { padding-block: 6px; row-gap: 0; }
  .motion-btn, .back-link, .entry .read-link, .resume-link { min-height: 44px; display: inline-flex; align-items: center; }
  .rs-contact { flex-wrap: wrap; gap: 4px 16px; }
  .rs-contact a { display: inline-flex; align-items: center; min-height: 44px; }
  .cs-toc-box summary { min-height: 44px; align-items: center; }
  .cs-toc a { min-height: 44px; display: flex; align-items: center; }
  /* small text that is still easy to read */
  .hero3-label { font-size: .74rem; }
  .j-stop .stamp { font-size: .8rem; }
  .chip, .j-stop .chip { font-size: .85rem; }
  .cs-facts dt, .cs-defs dt, .label, .cs-kicker { font-size: .8rem; }
  /* contact: on phones the words and buttons are enough */
  .contact-art { display: none; }
  .contact3 .contact-links a { min-height: 48px; }
}
@media (max-width: 760px) {
  .btn { min-height: 44px; }
  .cs-more a, .cs-top a { display: inline-flex; align-items: center; min-height: 44px; }
  .hero3-label { font-size: .8rem; }
  .cs-next small { font-size: .82rem; }
}

/* ---------- hero: the untangling line ---------- */
.hero3 .stickers { display: none; }
.untangle-wrap { position: absolute; left: 6%; right: 6%; bottom: clamp(18px, 4vh, 40px); height: clamp(90px, 15vh, 150px); z-index: 1; pointer-events: none; }
.untangle { width: 100%; height: 100%; overflow: visible; }
.ut-line { fill: none; stroke: var(--stk-ink); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; opacity: calc(.45 + var(--clean, 0) * .55); }
.ut-dot { fill: #1fb36b; stroke: var(--stk-ink); stroke-width: 3; vector-effect: non-scaling-stroke; opacity: var(--clean, 0); transform-box: fill-box; transform-origin: center; }
.hero3 { touch-action: pan-y; }
.hero3-inner { padding-bottom: clamp(110px, 18vh, 180px); }
@media (max-width: 760px) { .untangle-wrap { left: 8%; right: 8%; height: 80px; bottom: 22px; } .hero3-inner { padding-bottom: 108px; } }

/* ---------- SHIPPED: stamped onto the page ---------- */
.shipped-stamp.reveal { opacity: 0; transform: rotate(-10deg) scale(2.2); transition: none; }
.shipped-stamp.reveal.is-in { animation: stamp-in .42s cubic-bezier(.2, .9, .3, 1.2) .2s forwards; }
@keyframes stamp-in {
  0% { opacity: 0; transform: rotate(-24deg) scale(2.4); filter: blur(2px); }
  60% { opacity: 1; transform: rotate(-9deg) scale(.94); filter: none; }
  75% { transform: rotate(-11deg) scale(1.03); }
  100% { opacity: .92; transform: rotate(-10deg) scale(1); }
}
.shipped-stamp { position: relative; background-image: radial-gradient(rgba(194, 65, 12, .08) 1px, transparent 1.5px); background-size: 5px 5px; }
@media (prefers-reduced-motion: reduce) { .shipped-stamp.reveal { opacity: .92; transform: rotate(-10deg); animation: none; } }

/* ---------- bookmarks: only the selected one is in colour ---------- */
.journal .bookmark:not([aria-selected="true"])::before { background: #fffdf7; }
.journal .bookmark:not([aria-selected="true"]):hover::before { background: color-mix(in srgb, var(--bm) 45%, #fffdf7); }
.journal .bookmark:not([aria-selected="true"]) { color: #4a4652; }

/* ---------- Genie in the journal: its logo card ---------- */
.genie-logo-card { position: absolute; inset: 0; display: grid; place-content: center; gap: 6px; text-align: center; color: #fff;
  background: radial-gradient(70% 90% at 70% 110%, #6f9a5c 0%, rgba(111, 154, 92, 0) 60%), radial-gradient(60% 70% at 20% -10%, #1d4d47 0%, rgba(29, 77, 71, 0) 70%), #0b1716; }
.gl-name { font: 400 clamp(2.4rem, 7cqw, 3.6rem)/1 "Pacifico", cursive; }
.gl-line { font: 500 clamp(.7rem, 2.2cqw, .95rem)/1.3 var(--sans); color: #8fd3c9; }
.thumb:has(.genie-logo-card) { aspect-ratio: 16 / 10; }

/* ==========================================================
   Career: intro → experience → skills → awards → achievements → education
   ========================================================== */
.career-hero .lede { color: #3b3744; max-width: 36em; }
.now-card { max-width: 640px; margin: 26px 0 0; padding: 18px 20px; background: #fffdf7; border: 2px solid var(--stk-ink); border-radius: 10px; box-shadow: 5px 5px 0 var(--stk-ink); }
.now-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: #d4f5e2; color: #13633c; font: 700 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.now-dot { width: 8px; height: 8px; border-radius: 50%; background: #1fb36b; box-shadow: 0 0 0 0 rgba(31, 179, 107, .5); animation: now-pulse 2.4s ease-out infinite; }
@keyframes now-pulse { 0% { box-shadow: 0 0 0 0 rgba(31, 179, 107, .5); } 70%, 100% { box-shadow: 0 0 0 8px rgba(31, 179, 107, 0); } }
.now-title { margin: 12px 0 6px; font-family: var(--bold); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }
.now-card p { margin: 0; color: #3b3744; }
.career-actions { margin-top: 22px; }
.career-actions .resume-link { margin-top: 0; }
.career-jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.career-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: 2px solid var(--stk-ink); border-radius: 999px; background: #fffdf7; color: var(--stk-ink); font-weight: 600; font-size: .92rem; text-decoration: none; }
.career-jump a:hover { background: #ffd65a; }
.career-part h2 { font-family: var(--bold); font-weight: 800; letter-spacing: -.02em; font-size: clamp(2rem, 4.4vw, 3rem); margin: 0 0 10px; }
.part-lede { margin: 0; color: #3b3744; font-size: 1.08rem; }
#experience { padding-bottom: 0; }
.skill-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 40px; margin-top: 26px; }
.skill-groups h3 { margin: 0 0 12px; font-family: var(--bold); font-weight: 700; font-size: 1.15rem; }
.skill-chips { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.skill-chips li { padding: 7px 14px; border: 2px solid var(--stk-ink); border-radius: 999px; background: color-mix(in srgb, var(--c) 55%, #fffdf7); font-weight: 600; font-size: .92rem; }
.edu-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; margin-top: 26px; align-items: start; }
.edu-card { padding: 20px 22px; background: #fffdf7; border: 2px solid var(--stk-ink); border-radius: 10px; }
.edu-when { margin: 0 0 6px; font: 600 .8rem/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #4a4652; }
.edu-card h3 { margin: 0 0 6px; font-family: var(--bold); font-weight: 700; font-size: 1.3rem; }
.edu-card p { margin: 0 0 8px; }
.edu-note { color: #3b3744; font-size: .98rem; }
.edu-certs h3 { margin: 0 0 10px; font-family: var(--bold); font-weight: 700; font-size: 1.15rem; }
.edu-certs ul { margin: 0; padding-left: 1.1em; }
.edu-certs li { margin: 6px 0; }
@media (max-width: 760px) {
  .skill-groups, .edu-grid { grid-template-columns: 1fr; }
  .career-jump a { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) { .now-dot { animation: none; } }
#work { overflow-x: clip; }
/* journal titles: the highlighter follows the words instead of running past them */
.entry h3 { display: block; }
.entry h3::after { content: none; }
.entry h3 .hl, .entry h3 { background: none; }
.entry h3 > span.hl { background: linear-gradient(transparent 60%, color-mix(in srgb, var(--bm) 85%, transparent) 60% 92%, transparent 92%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .08em; }

/* career: experience as in the CV */
.xp { margin-top: 26px; padding: 22px 24px; background: #fffdf7; border: 2px solid var(--stk-ink); border-radius: 10px; }
.xp h3 { margin: 0; font-family: var(--bold); font-weight: 800; font-size: 1.4rem; letter-spacing: -.01em; }
.xp-place { font-weight: 500; color: #4a4652; font-size: 1.05rem; }
.xp-when { margin: 6px 0 0; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; color: #3b3744; font-weight: 600; font-size: .95rem; }
.now-badge.small { padding: 3px 10px; font-size: .68rem; }
.xp-roles { list-style: none; margin: 18px 0 0; padding: 0 0 0 18px; border-left: 2px solid rgba(20, 17, 28, .15); display: grid; gap: 18px; }
.xp-roles > li { position: relative; }
.xp-roles > li::before { content: ""; position: absolute; left: -25px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #fffdf7; border: 2px solid var(--stk-ink); }
.xp-roles > li:first-child::before { background: #1fb36b; }
.xp-role { margin: 0 0 6px; font-family: var(--bold); font-weight: 700; font-size: 1.08rem; }
.xp-role span { font-family: var(--sans); font-weight: 500; color: #4a4652; font-size: .92rem; }
.xp-roles ul { margin: 0; padding-left: 1.1em; }
.xp-roles ul li { margin: 5px 0; line-height: 1.6; }
.xp-also { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed rgba(20, 17, 28, .25); color: #3b3744; font-size: .98rem; }
/* the optional drive */
.drive-cta { margin-top: 26px; width: 100%; display: flex; align-items: center; gap: 16px; padding: 14px 18px; background: var(--mint); border: 2px solid var(--stk-ink); border-radius: 10px; box-shadow: 5px 5px 0 var(--stk-ink); color: var(--stk-ink); text-align: left; font: inherit; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.drive-cta:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--stk-ink); }
.drive-art svg { width: 96px; height: auto; display: block; }
.drive-text { flex: 1; display: grid; gap: 2px; }
.drive-text b { font-family: var(--bold); font-weight: 700; font-size: 1.1rem; }
.drive-text small { color: #3b3744; font-size: .92rem; }
.drive-cta .arrow { font-size: 1.4rem; transition: transform .2s ease; }
.drive-cta[aria-expanded="true"] .arrow { transform: rotate(90deg); }
.skill-chips.one { margin-top: 22px; }
.skill-chips.one li { background: #fffdf7; }
@media (max-width: 560px) { .drive-art svg { width: 70px; } .xp { padding: 18px; } }

/* career: plain intro, headings on the left, content on the right */
.career-hero h1 { max-width: 12em; }
.career-hero .lede { font-family: var(--sans); font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: #3b3744; max-width: 38em; }
.career-hero .resume-link { margin-top: 26px; }
.part-grid { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(0, 2fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.part-head { position: sticky; top: 100px; }
.part-head h2 { font-family: var(--bold); font-weight: 800; letter-spacing: -.02em; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.1; margin: 0 0 12px; }
.part-sub { margin: 0; color: #3b3744; font-size: 1.02rem; line-height: 1.6; }
.part-body > :first-child { margin-top: 0; }
.part-body .aw-grid { grid-template-columns: 1fr; }
.part-body .det-paper { margin: 0; padding: 26px 22px 30px; }
.part-body .det-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.part-body .skill-chips.one { margin-top: 0; }
.part-body .edu-grid { margin-top: 0; grid-template-columns: 1fr; }
.part-body .drive-cta { margin-top: 22px; }
#experience { padding-bottom: clamp(48px, 7vw, 88px); }
@media (max-width: 860px) {
  .part-grid { grid-template-columns: 1fr; gap: 18px; }
  .part-head { position: static; }
  .part-body .det-grid { grid-template-columns: 1fr; }
}

/* hero: interactive dot field replaces the grid and the line */
.untangle-wrap { display: none; }
.hero3::before { display: none; }
.dotfield { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
.hero3-inner { padding-bottom: clamp(48px, 9vh, 96px); }
@media (max-width: 760px) { .hero3-inner { padding-bottom: 56px; } }
.dotfield { -webkit-mask-image: radial-gradient(ellipse 40% 34% at 50% 62%, transparent 40%, #000 90%); mask-image: radial-gradient(ellipse 40% 34% at 50% 62%, transparent 40%, #000 90%); }
@media (max-width: 760px) { .dotfield { -webkit-mask-image: radial-gradient(ellipse 60% 26% at 50% 66%, transparent 45%, #000 95%); mask-image: radial-gradient(ellipse 60% 26% at 50% 66%, transparent 45%, #000 95%); } }

/* noticeboard: grouped under little taped headings */
.nb-groups { display: grid; gap: clamp(28px, 4vw, 44px); }
.nb-group-title { display: inline-block; margin: 0 0 18px; padding: 5px 16px; background: var(--gc); border: 2px solid var(--stk-ink); color: var(--stk-ink); font: 400 1.25rem/1.1 var(--hand); transform: rotate(-1.5deg); box-shadow: 3px 3px 0 rgba(20, 17, 28, .35); }
.nb-group .nb-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
@media (min-width: 900px) {
  .nb-groups { grid-template-columns: 1fr 1fr; gap: 40px 36px; align-items: start; }
  .nb-group .nb-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 16px; }
}

/* ---------- hero, rearranged: text left, sticker right; sized to its content ---------- */
.hero3 { height: auto; max-height: none; min-height: 0; display: block; text-align: left; }
.hero3-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: center; gap: clamp(20px, 4vw, 56px); max-width: none; padding: clamp(40px, 6vw, 84px) clamp(28px, 5vw, 72px); }
.hero3-text { max-width: 640px; }
.hero3-text .hero3-label { margin: 0 0 18px; }
.hero3 h1 { font-size: clamp(2.6rem, 5.6vw, 5rem); max-width: 10.5em; margin: 0; }
.hero3-sub { margin: 22px 0 0; max-width: 32em; text-align: left; font-size: clamp(1.05rem, 1.35vw, 1.2rem); }
.hero3-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.hero3-actions .btn-primary { background: #ffd65a; color: var(--stk-ink); border: 2.5px solid var(--stk-ink); box-shadow: 4px 4px 0 var(--stk-ink); }
.hero3-actions .btn-ghost { border: 2.5px solid var(--stk-ink); background: #fffdf7; }
.hero3-art { display: flex; justify-content: center; }
.hero3 .me-sticker { width: min(100%, 340px); margin: 0; }
.dotfield { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.25) 45%, #000 70%); mask-image: linear-gradient(90deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.25) 45%, #000 70%); }
@media (max-width: 760px) {
  .hero3-inner { grid-template-columns: 1fr; padding: 28px 20px 34px; gap: 6px; text-align: center; }
  .hero3-art { order: -1; }
  .hero3 .me-sticker { width: min(52vw, 200px); margin-bottom: -10px; }
  .hero3-text { margin: 0 auto; }
  .hero3 h1 { font-size: clamp(2.3rem, 10.5vw, 3rem); margin-inline: auto; }
  .hero3-sub { text-align: center; margin-inline: auto; }
  .hero3-actions { justify-content: center; }
  .dotfield { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.25) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 30%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.25) 100%); }
}
@media (max-width: 760px) {
  .hero3-inner { padding: 22px 18px 26px; }
  .hero3 .me-sticker { width: min(40vw, 160px); margin-bottom: -8px; }
  .hero3 h1 { font-size: clamp(2.1rem, 9.4vw, 2.7rem); }
  .hero3-text .hero3-label { margin-bottom: 12px; }
  .hero3-sub { margin-top: 14px; font-size: 1rem; }
  .hero3-actions { margin-top: 18px; gap: 10px; flex-wrap: nowrap; }
  .hero3-actions .btn { padding-inline: 16px; font-size: .95rem; }
}
@media (max-width: 760px) and (max-height: 700px) { .hero3 .me-sticker { width: 120px; } .hero3 h1 { font-size: 2rem; } .hero3-sub { font-size: .95rem; } }

/* hero: softer periwinkle, smaller crisp sticker */
.hero3 { background: #eceffd; }
.hero3 .me-sticker { width: min(100%, 226px); filter: none; image-rendering: auto; }
.hero3 h1 { max-width: 11em; }
.hero3 .sense { color: #c2410c; white-space: nowrap; }
.hero3-sub { color: #2d2a36; }
@media (max-width: 760px) { .hero3 .me-sticker { width: min(38vw, 150px); } }

/* journal: the page fills in when you pick a bookmark */
.entry .hl { background-size: 0% 100% !important; background-repeat: no-repeat !important; }
.entry.is-active .hl { animation: hl-fill .7s cubic-bezier(.3, .7, .2, 1) .35s forwards; }
@keyframes hl-fill { to { background-size: 100% 100%; } }
.entry.is-active .page.left > * { animation: write-in .5s cubic-bezier(.25, .8, .3, 1) both; }
.entry.is-active .page.left > :nth-child(1) { animation-delay: .05s; }
.entry.is-active .page.left > :nth-child(2) { animation-delay: .15s; }
.entry.is-active .page.left > :nth-child(3) { animation-delay: .3s; }
.entry.is-active .page.left > :nth-child(4) { animation-delay: .4s; }
.entry.is-active .page.left > :nth-child(5) { animation-delay: .5s; }
@keyframes write-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.entry.is-active .print { animation: drop-in .6s cubic-bezier(.3, 1.3, .5, 1) .2s both; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-16px) rotate(3deg) scale(.96); } to { opacity: 1; transform: rotate(-1deg); } }
.entry.is-active .print .tape { animation: tape-on .35s ease .65s both; }
@keyframes tape-on { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .entry .hl { background-size: 100% 100% !important; }
  .entry.is-active .page.left > *, .entry.is-active .print, .entry.is-active .print .tape, .entry.is-active .hl { animation: none; }
}
/* Genie: just the logo, on a smaller card */
#entry-genie .print { max-width: 300px; }
.thumb:has(.genie-logo-card) { aspect-ratio: 4 / 3; }
.gl-name { font-size: clamp(2.6rem, 14cqw, 3.4rem); }

/* ==========================================================
   Genie: calmer, friendlier case study
   ========================================================== */
.genie-hero2 { padding: clamp(18px, 3vw, 32px) 0 clamp(8px, 2vw, 16px); }
.gh-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 52px); background: #eaf2ef; border-radius: 18px; }
.gh-text .back-link { display: inline-flex; margin-bottom: 18px; }
.gh-text .label { margin-bottom: 10px; }
.gh-text h1 { font-family: var(--bold); font-weight: 800; font-size: clamp(2.6rem, 5.5vw, 4.2rem); letter-spacing: -.03em; line-height: 1; margin: 0 0 14px; }
.gh-intro { margin: 0 0 22px; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: #2d2a36; max-width: 30em; }
.gh-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; margin: 0; }
.gh-facts dt { font: 600 .74rem/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; color: #4a6660; margin-bottom: 6px; }
.gh-facts dd { margin: 0; font-weight: 600; font-size: .98rem; }
.gh-shot { margin: 0; }
.gh-shot img { display: block; width: 100%; height: auto; border-radius: 10px; box-shadow: 0 24px 40px -24px rgba(20, 40, 36, .55); }
.genie-hero2 + .wrap.cs-layout .cs-toc { padding-top: 32px; }
/* stressed words: a soft marker, not a loud one */
.cs3 mark { background: linear-gradient(transparent 58%, #cdebe4 58%, #cdebe4 92%, transparent 92%); color: inherit; padding: 0 .06em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* numbered, gently alternating sections */
.cs-num { display: inline-grid; place-items: center; min-width: 30px; height: 22px; margin-right: 10px; padding: 0 6px; border-radius: 999px; background: #e3ecf9; color: #2f4a7a; font-weight: 700; letter-spacing: 0; font-size: .74rem; vertical-align: middle; }
.cs3 .cs-section { border-top: 0; padding: 40px clamp(0px, 2.4vw, 28px); margin: 0 0 12px; border-radius: 16px; }
.cs3 .cs-section:nth-of-type(even) { background: #f1efe9; }
/* overview at a glance */
.glance { list-style: none; padding: 0; margin: 26px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.glance li { padding: 14px 0 0; border-top: 2px solid var(--stk-ink); }
.glance strong { display: block; font-family: var(--bold); font-weight: 800; font-size: 2rem; line-height: 1; color: #13786c; }
.glance span { display: block; margin-top: 6px; font-size: .92rem !important; line-height: 1.4 !important; color: #3b3744; }
.cs-inline-shot { max-width: 640px; margin: 18px 0 22px; }
@media (max-width: 860px) {
  .gh-panel { grid-template-columns: 1fr; }
  .gh-shot { order: 2; }
  .glance { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) { .gh-facts { grid-template-columns: 1fr; } }
.gh-text .back-link { display: flex; width: fit-content; }
.gh-text .label { display: block; width: fit-content; }
.cs3 mark { background: linear-gradient(transparent 56%, #bfe3d9 56%, #bfe3d9 94%, transparent 94%); }

/* How I work: UX artefacts, drawn in the sticker style */
.work3 .proc-art .pi { opacity: 0; transform: translateY(8px); }
.work3 .process-panel.is-active .pi { animation: write-in .5s cubic-bezier(.25, .8, .3, 1) var(--d) both; }
.work3 .proc-art .pi-t { font: 800 22px var(--bold); fill: var(--stk-ink); text-anchor: middle; }
.work3 .proc-art .pi-s { font: 700 15px var(--bold); fill: var(--stk-ink); text-anchor: middle; }
.work3 .proc-art .pi-h { font: 400 18px var(--hand); fill: #4a4652; text-anchor: middle; }
.work3 .proc-art .pi-r { font: 700 13px var(--sans); fill: #c2410c; text-anchor: middle; }
@media (prefers-reduced-motion: reduce) { .work3 .proc-art .pi { opacity: 1; transform: none; animation: none !important; } }

/* contact: stickers at one consistent size */
.cs-star1, .cs-star2, .cs-spark, .cs-heart { width: 48px; }
.cs-mail { width: 64px; }
.cs-chat { width: 96px; }
.cs-star1 { left: 8%; top: 10%; rotate: -12deg; }
.cs-star2 { right: 6%; top: 50%; rotate: 12deg; }
.cs-spark { left: 6%; top: 52%; }
.cs-heart { right: 14%; bottom: 10%; rotate: 10deg; }
.cs-mail { left: 8%; bottom: 10%; rotate: -8deg; }
.cs-chat { right: 4%; top: 8%; rotate: 5deg; }

/* ---------- hero: the maze ---------- */
.dotfield { display: none; }
.maze { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.45) 50%, #000 75%); mask-image: linear-gradient(90deg, rgba(0,0,0,.45) 0%, rgba(0,0,0,.45) 50%, #000 75%); }
.maze-walls { fill: none; stroke: rgba(47, 58, 120, .16); stroke-width: 2; stroke-linecap: round; }
.maze-path { fill: none; stroke: #f08a5d; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.maze-dot { fill: #f08a5d; stroke: #fff; stroke-width: 3; }
.hero3 .sense { white-space: normal; }
@media (max-width: 760px) { .maze { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 28%, rgba(0,0,0,.4) 42%, rgba(0,0,0,.4) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 28%, rgba(0,0,0,.4) 42%, rgba(0,0,0,.4) 100%); } }

/* ---------- hero: sticker ⇄ photo flip ---------- */
.flip-card { width: min(100%, 226px); aspect-ratio: 226 / 318; perspective: 1000px; }
.flip-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.5, 0, .2, 1); }
.flip-card.flipped .flip-inner { transform: rotateY(180deg); }
.flip-inner .face { position: absolute; inset: 0; width: 100% !important; height: 100%; object-fit: contain; object-position: bottom center; backface-visibility: hidden; -webkit-backface-visibility: hidden; margin: 0 !important; }
.flip-inner .back { transform: rotateY(180deg); }
@media (max-width: 760px) { .flip-card { width: min(38vw, 150px); margin-bottom: -6px; } }
@media (max-width: 760px) and (max-height: 700px) { .flip-card { width: 120px; } }
.flip-inner .face { animation: none !important; filter: none !important; }
.flip-inner .face.back { transform: rotateY(180deg) !important; }
.flip-card { animation: sticker-pop .9s .2s cubic-bezier(.3, 1.5, .5, 1) both; }
.maze { -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.16) 48%, #000 72%); mask-image: linear-gradient(90deg, rgba(0,0,0,.16) 0%, rgba(0,0,0,.16) 48%, #000 72%); }
@media (max-width: 760px) { .maze { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 26%, rgba(0,0,0,.14) 40%, rgba(0,0,0,.14) 100%); mask-image: linear-gradient(180deg, #000 0%, #000 26%, rgba(0,0,0,.14) 40%, rgba(0,0,0,.14) 100%); } }
@media (max-width: 760px) and (max-height: 700px) { .flip-card { width: 100px; } .hero3 h1 { font-size: 1.75rem; } .hero3-sub { font-size: .92rem; line-height: 1.45; margin-top: 10px; } .hero3-actions { margin-top: 14px; } .hero3-inner { padding-top: 16px; padding-bottom: 20px; } }
/* hero: a calmer headline size */
.hero3 h1 { font-size: clamp(2.2rem, 4.4vw, 3.9rem); line-height: 1.02; max-width: 12em; }
@media (max-width: 760px) { .hero3 h1 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); } }
/* Genie hero: just the essentials */
.gh-text h1 { margin-bottom: 22px; }
.gh-facts { gap: 18px 24px; }
@media (max-width: 760px) and (max-height: 700px) { .hero3 .me-sticker { width: 100px; } .hero3 h1 { font-size: 1.7rem; } }

/* hero: a calmer maze, and a plain label */
.maze { transition: opacity 1.2s ease; }
.maze-walls { stroke: rgba(47, 58, 120, .09); stroke-width: 1.5; transition: opacity 1.2s ease; }
.maze-path { stroke: #f2a07b; stroke-width: 2.5; opacity: .85; }
.maze-dot { r: 4; fill: #f2a07b; stroke: #fff; stroke-width: 2; }
.hero3-label { padding: 0; background: none; border: 0; border-radius: 0; transform: none; box-shadow: none;
  font: 600 .8rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: #c2410c; }

/* ==========================================================
   Noticeboard: pinned photos + pockets that hold more
   ========================================================== */
.board2 { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.pinned { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px 18px; }
.pol { position: relative; background: #fffdf7; padding: 10px 10px 12px; border-radius: 3px; transform: rotate(var(--r)); box-shadow: 0 12px 18px -10px rgba(10, 30, 15, .6); transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.pol:hover { transform: rotate(0deg) translateY(-3px); }
.pol img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.pol-cap { display: block; margin-top: 8px; font: 400 1.05rem/1.2 var(--hand); color: #14111c; text-align: center; }
.pol .nb-pin { top: -8px; }
.pockets { display: grid; grid-template-columns: 1fr 1fr; gap: 40px 18px; padding-top: 30px; }
.pocket { position: relative; display: block; width: 100%; min-height: 150px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; }
.pocket-peek { position: absolute; left: 12%; right: 12%; top: -26px; height: 90px; display: flex; justify-content: center; }
.pocket-peek img { width: 44%; aspect-ratio: 3 / 4; object-fit: cover; border: 4px solid #fffdf7; border-radius: 2px; box-shadow: 0 4px 8px rgba(0, 0, 0, .25); margin: 0 -10px; transition: transform .35s cubic-bezier(.3, 1.4, .5, 1); }
.pocket-peek img:nth-child(1) { transform: rotate(-8deg); }
.pocket-peek img:nth-child(2) { transform: translateY(-6px); z-index: 1; }
.pocket-peek img:nth-child(3) { transform: rotate(8deg); }
.pocket:hover .pocket-peek img, .pocket:focus-visible .pocket-peek img { translate: 0 -14px; }
.pocket-front { position: absolute; left: 0; right: 0; bottom: 0; height: 104px; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 14px 16px; background: var(--pc); border: 2.5px solid var(--stk-ink); border-radius: 4px 4px 12px 12px; box-shadow: 0 10px 16px -10px rgba(10, 30, 15, .6);
  background-image: linear-gradient(transparent 0 12px, rgba(20, 17, 28, .12) 12px 13px, transparent 13px), repeating-linear-gradient(90deg, rgba(255,255,255,.18) 0 2px, transparent 2px 6px); }
.pocket-front::before { content: ""; position: absolute; left: 10px; right: 10px; top: 6px; border-top: 2px dashed rgba(20, 17, 28, .35); }
.pocket-name { font: 400 1.35rem/1.1 var(--hand); color: #14111c; }
.pocket-count { margin-top: 4px; font-size: .82rem; font-weight: 600; color: #2d2a36; }
.pocket-view { width: min(900px, 94vw); max-height: 90vh; padding: 20px; border: 2.5px solid var(--stk-ink); border-radius: 12px; background: #3d8a5c; color: #fff; }
.pocket-view::backdrop { background: rgba(20, 17, 28, .6); }
.pv-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.pv-head h3 { margin: 0; font: 400 1.8rem/1 var(--hand); color: #fff; }
.pv-close { padding: 8px 14px; border: 2px solid var(--stk-ink); border-radius: 999px; background: #ffd65a; font: 600 .9rem/1 var(--sans); cursor: pointer; }
.pv-grid { list-style: none; margin: 0; padding: 0 4px 6px; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 22px 18px; }
.pv-grid li { background: #fffdf7; padding: 10px 10px 12px; transform: rotate(var(--r)); box-shadow: 0 10px 16px -10px rgba(0,0,0,.6); }
.pv-grid img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pv-grid span { display: block; margin-top: 8px; font: 400 1.05rem/1.25 var(--hand); color: #14111c; text-align: center; }
@media (max-width: 900px) { .board2 { grid-template-columns: 1fr; } .pinned { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .pockets { gap: 44px 14px; } .pocket-name { font-size: 1.15rem; } .pv-grid { grid-template-columns: 1fr 1fr; gap: 14px; } }

/* tighter rhythm between sections */
.section { padding: clamp(52px, 6.5vw, 88px) 0; }
.section-head { margin-bottom: clamp(24px, 3vw, 40px); }
.work-head { margin-bottom: clamp(28px, 4vw, 48px); }
.hero-tools + .section, .hero3 + .section { padding-top: clamp(56px, 7vw, 96px); }

/* kind words: subtle — one calm card colour, small quote mark, people up front */
.kind3 .quote, .kind3 .quote.feature { background: #fffdf7; border: 1.5px solid rgba(20, 17, 28, .18); box-shadow: 0 10px 24px -18px rgba(20, 17, 28, .35); border-radius: 14px; }
.kind3 .quote-mark, .kind3 .quote.feature .quote-mark { width: auto; height: auto; padding: 0; border: 0; background: none !important; color: #c9c4bb; font: 800 2.6rem/0.6 var(--bold); display: block; }
.kind3 .quote blockquote { color: #2d2a36; }
.kind3 .quote figcaption { display: flex; align-items: center; gap: 12px; border-top: 1px solid rgba(20, 17, 28, .1); }
.kw-avatar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: #eceffd; color: #2f3a78; font: 700 .9rem/1 var(--sans); letter-spacing: .02em; }
.kw-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.kw-id { display: grid; gap: 2px; }
.car-btn { background: #fffdf7; box-shadow: none; border-width: 1.5px; }
.car-btn:hover:not(:disabled) { background: #ffd65a; box-shadow: none; transform: none; }
.pockets { grid-template-columns: 1fr; max-width: 300px; margin-inline: auto; }
@media (max-width: 900px) { .pockets { grid-template-columns: 1fr 1fr 1fr; max-width: none; } }
@media (max-width: 560px) { .pockets { grid-template-columns: 1fr; } }
/* pockets: a proper column of three, full width */
.pockets { width: 100%; max-width: none; margin: 0; grid-template-columns: 1fr; gap: 56px; padding-top: 34px; }
.pocket { min-height: 150px; }
@media (max-width: 900px) { .pockets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
@media (max-width: 560px) { .pockets { grid-template-columns: 1fr; gap: 50px; } }

/* one type scale: section headings sit clearly below the hero headline */
:root { --h2: clamp(1.7rem, 2.8vw, 2.5rem); }
.section-head h2, .philosophy h2, .work3 h2, .mat-head h2, .contact3 h2, .kind3 .section-head h2,
.career-part h2, .part-head h2, .det-head h2, .awards3 .section-head h2, .story-card h2, .career-cta h2 {
  font-size: var(--h2) !important; line-height: 1.1 !important; letter-spacing: -.02em;
}
@media (max-width: 760px) { :root { --h2: clamp(1.55rem, 6.6vw, 1.9rem); } }
.career-hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.9rem); line-height: 1.02; }

/* ==========================================================
   Type scale — one hierarchy for the whole site
   H1 56 · H2 30 · H3 20 · body 17 · label 12.5  (desktop)
   ========================================================== */
:root {
  --t-h1: clamp(1.9rem, 4.4vw, 3.5rem);
  --t-h2: clamp(1.5rem, 2.2vw, 1.875rem);
  --t-h3: clamp(1.1rem, 1.4vw, 1.25rem);
  --t-body: clamp(1rem, 1.1vw, 1.0625rem);
  --t-label: .78rem;
}
.hero3 h1, .career-hero h1, .cs-hero h1, .gh-text h1, .rs-head h1 { font-size: var(--t-h1) !important; }
main h2:not(.sr-only):not(.now-title), .cs3 .cs-section h2.cs-title, .mat-head h2, .contact3 h2, .part-head h2 { font-size: var(--t-h2) !important; line-height: 1.15 !important; letter-spacing: -.015em !important; }
.entry h3, .proc-copy h3, .xp h3, .aw-card h3, .edu-card h3, .j-stop h3, .now-title, .det-card strong { font-size: var(--t-h3) !important; line-height: 1.2 !important; }
.entry h3 { font-size: clamp(1.35rem, 2vw, 1.6rem) !important; }
.section-head p, .part-sub, .mat-head p, .contact3 .contact-copy > p, .hero3-sub, .career-hero .lede, .entry .desc { font-size: var(--t-body) !important; }
.label, .hero3-label, .cs-kicker { font-size: var(--t-label) !important; }
.entry h3 { font-size: clamp(1.2rem, 1.6vw, 1.375rem) !important; }
.det-card h3, .pv-head h3 { font-size: var(--t-h3) !important; }
.contact3 .contact-links span:not(.arrow) { font-size: 1rem !important; } .contact3 .contact-links a { padding: 10px 18px; box-shadow: 3px 3px 0 var(--stk-ink); border-width: 2px; }
/* type scale, one step up: H1 64 · H2 40 · H3 24 · body 18 (desktop) */
:root {
  --t-h1: clamp(2.1rem, 5vw, 4rem);
  --t-h2: clamp(1.75rem, 3vw, 2.5rem);
  --t-h3: clamp(1.2rem, 1.7vw, 1.5rem);
  --t-body: clamp(1.02rem, 1.2vw, 1.125rem);
}
.entry h3 { font-size: clamp(1.35rem, 2vw, 1.75rem) !important; }
.contact3 .contact-links span:not(.arrow) { font-size: 1.08rem !important; }

/* ---------- How I work: one screen, no long scroll ---------- */
.work3 > .wrap { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.work3 .philosophy-grid { display: block; margin: 0; position: sticky; top: 100px; }
.work3 .philosophy-grid .philosophy-copy p { margin: 16px 0 0; }
.work3 .process { padding: 16px; border-radius: 16px; box-shadow: 5px 5px 0 var(--stk-ink); }
.work3 .process-tabs { gap: 8px; margin-bottom: 14px; }
.work3 .process-tab { padding: 10px 12px; border-radius: 10px; font-size: .95rem; }
.work3 .process-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: center; }
.work3 .proc-art { aspect-ratio: 16 / 11; border-radius: 12px; }
.work3 .proc-copy h3 { margin-bottom: 8px; }
.work3 .proc-copy p { font-size: .98rem !important; line-height: 1.55; }
.work3 .proc-copy ul { margin-top: 10px; }
.work3 .proc-copy li { padding: 6px 0; font-size: .92rem; }
@media (max-width: 960px) {
  .work3 > .wrap { grid-template-columns: 1fr; gap: 20px; }
  .work3 .philosophy-grid { position: static; }
}
@media (max-width: 760px) {
  .work3 .process { padding: 12px; }
  /* tabs become one swipeable row */
  .work3 .process-tabs { display: flex; overflow-x: auto; scrollbar-width: none; gap: 8px; margin: 0 -12px 12px; padding: 2px 12px 6px; scroll-snap-type: x mandatory; }
  .work3 .process-tabs::-webkit-scrollbar { display: none; }
  .work3 .process-tab { flex: 0 0 auto; min-height: 44px; scroll-snap-align: start; display: inline-flex; align-items: center; gap: 6px; }
  .work3 .process-tab small { display: inline; margin: 0; }
  .work3 .process-panel { grid-template-columns: 1fr; gap: 12px; }
  .work3 .proc-art { aspect-ratio: 16 / 9; }
  .work3 .proc-copy ul { display: none; }
}

/* pocket viewer: one photo at a time */
.pocket-view { width: min(760px, 94vw); padding: 18px 18px 14px; }
.pv-stage { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.pv-nav { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--stk-ink); background: #fffdf7; font: 700 1.1rem/1 var(--sans); cursor: pointer; }
.pv-nav:hover { background: #ffd65a; }
.pv-photo { margin: 0; background: #fffdf7; padding: 12px 12px 14px; border-radius: 4px; box-shadow: 0 14px 24px -14px rgba(0,0,0,.6); }
.pv-photo img { display: block; width: 100%; height: min(56vh, 460px); object-fit: contain; background: #f1efe8; }
.pv-photo img.in { animation: pv-in .35s ease both; }
@keyframes pv-in { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
.pv-photo figcaption { margin-top: 10px; display: grid; gap: 2px; text-align: center; color: var(--stk-ink); }
.pv-cap { font: 400 1.3rem/1.2 var(--hand); }
.pv-note { font-size: .95rem; color: #3b3744; }
.pv-foot { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.pv-count { flex: 0 0 auto; color: #fff; font-weight: 600; font-size: .9rem; }
.pv-thumbs { list-style: none; margin: 0; padding: 2px; display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.pv-thumbs::-webkit-scrollbar { display: none; }
.pv-thumbs button { width: 52px; height: 52px; padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: none; cursor: pointer; opacity: .6; }
.pv-thumbs button[aria-current="true"] { border-color: #ffd65a; opacity: 1; }
.pv-thumbs img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 560px) {
  .pocket-view { padding: 14px 12px 12px; }
  .pv-stage { grid-template-columns: 1fr; }
  .pv-nav { display: none; }
  .pv-photo img { height: 48vh; }
}
@media (prefers-reduced-motion: reduce) { .pv-photo img.in { animation: none; } }

/* career intro */
.career-hero h1 { max-width: 16em; }
.career-intro { max-width: 40em; margin-top: 22px; display: grid; gap: 14px; }
.career-intro p { margin: 0; font-size: var(--t-body); line-height: 1.7; color: #2d2a36; }
.career-hero .resume-link { margin-top: 26px; }

/* case study: floating "Sections" button + sheet on phones */
.sec-fab, .sec-sheet { display: none; }
@media (max-width: 900px) {
  .cs-toc { display: none; }
  .sec-fab { display: inline-flex; align-items: center; gap: 8px; position: fixed; right: 16px; bottom: 18px; z-index: 50; min-height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--stk-ink); color: #fff; font: 700 .95rem/1 var(--sans); letter-spacing: .02em; box-shadow: 0 10px 24px -8px rgba(20, 17, 28, .55); cursor: pointer; opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; }
  .sec-fab.on { opacity: 1; transform: none; pointer-events: auto; }
  .sec-sheet[open] { display: block; position: fixed; inset: auto 12px 82px auto; margin: 0; width: min(300px, calc(100vw - 24px)); max-height: 70vh; overflow: auto; padding: 14px 8px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 20px 40px -12px rgba(20, 17, 28, .45); }
  .sec-sheet::backdrop { background: rgba(20, 17, 28, .35); }
  .sec-sheet-title { margin: 0 10px 8px; font: 700 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: #4a4652; }
  .sec-sheet ol { list-style: none; margin: 0; padding: 0; }
  .sec-sheet a { display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px; color: var(--stk-ink); text-decoration: none; font-weight: 500; }
  .sec-sheet a[aria-current] { background: #eaf2ef; font-weight: 700; color: #13786c; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) { .sec-fab { transition: none; } }

/* heading hierarchy inside each heading: soft words, strong key words */
main h2:not(.sr-only), .career-hero h1 { font-weight: 500 !important; color: #57525f; }
main h2 b, .career-hero h1 b, .cs3 .cs-title mark { font-weight: 900; color: var(--stk-ink); }
main h2 b em, .work3 h2 em { color: #d9480f; font-style: normal; }
.career-hero h1 b { color: #c2410c; }
.cs3 .cs-section h2.cs-title { font-weight: 500 !important; color: #57525f !important; }
.cs3 .cs-title mark { background: none; padding: 0; }
.mat-head h2 { color: rgba(255,255,255,.82) !important; }
.mat-head h2 b { color: #fff; }

/* stress only where it matters: most headings are plain bold; a few split soft/strong */
main h2:not(.sr-only) { font-weight: 800 !important; color: var(--stk-ink); }
main h2.h-split { font-weight: 500 !important; color: #57525f; }
main h2.h-split b { font-weight: 900; color: var(--stk-ink); }
.mat-head h2 { color: #fff !important; }
.cs3 .cs-section h2.cs-title { font-weight: 800 !important; color: var(--stk-ink) !important; }
.cs3 .cs-title mark { font-weight: inherit; color: inherit; background: linear-gradient(transparent 60%, #bfe3d9 60%, #bfe3d9 92%, transparent 92%); padding: 0 .06em; }

/* ==========================================================
   Genie: the hero video
   ========================================================== */
.genie-video { position: relative; margin: 0; transform: rotate(1.2deg); }
.gv-badge { position: absolute; z-index: 3; left: -10px; top: -14px; padding: 6px 12px; background: #ffd65a; border: 2px solid var(--stk-ink); border-radius: 999px; font: 700 .8rem/1 var(--sans); transform: rotate(-4deg); box-shadow: 3px 3px 0 var(--stk-ink); }
.gv-screen { position: relative; aspect-ratio: 1600 / 1028; border-radius: 12px; overflow: hidden; background: #111; box-shadow: 0 30px 50px -22px rgba(20, 40, 36, .7), 0 0 0 2px var(--stk-ink); }
.gv-frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity .7s ease, transform 3.2s ease-out; }
.gv-frame.on { opacity: 1; transform: scale(1); }
.gv-cursor { position: absolute; z-index: 2; width: 22px; height: 22px; left: 50%; top: 50%; transition: left 1s cubic-bezier(.5, 0, .2, 1), top 1s cubic-bezier(.5, 0, .2, 1); filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
.gv-cursor svg { width: 100%; height: 100%; fill: #fff; stroke: #111; stroke-width: 1.5; }
.gv-click { position: absolute; z-index: 1; width: 34px; height: 34px; margin: -10px 0 0 -10px; border-radius: 50%; border: 2px solid #5eb6af; opacity: 0; }
.gv-click.pop { animation: gv-pop .6s ease-out; }
@keyframes gv-pop { from { opacity: .9; transform: scale(.4); } to { opacity: 0; transform: scale(1.6); } }
.gv-bar { display: flex; align-items: center; gap: 12px; margin-top: 12px; transform: rotate(-1.2deg); }
.gv-steps { display: flex; gap: 4px; flex: 0 0 120px; }
.gv-steps i { flex: 1; height: 4px; border-radius: 2px; background: rgba(20, 17, 28, .15); overflow: hidden; }
.gv-steps i b { display: block; height: 100%; width: 0; background: #13786c; }
.gv-steps i.done b { width: 100%; }
.gv-steps i.now b { animation: gv-fill 2.8s linear forwards; }
.genie-video.paused .gv-steps i.now b { animation-play-state: paused; }
@keyframes gv-fill { to { width: 100%; } }
.gv-label { flex: 1; font: 400 1.15rem/1.2 var(--hand); color: var(--stk-ink); }
.gv-toggle { min-height: 36px; padding: 0 14px; border: 2px solid var(--stk-ink); border-radius: 999px; background: #fffdf7; font: 600 .85rem/1 var(--sans); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .gv-frame, .gv-cursor { transition: none; } .gv-click { display: none; } }

/* ==========================================================
   Genie: final screens as a stack you flip through
   ========================================================== */
.screen-stack { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 28px; align-items: center; margin-top: 10px; }
.stack { position: relative; list-style: none; margin: 0; padding: 0; aspect-ratio: 1600 / 1028; cursor: pointer; }
.stack-card { position: absolute; inset: 0; transition: transform .5s cubic-bezier(.3, 1, .4, 1), opacity .4s ease; transform: translate(calc(var(--d) * 14px), calc(var(--d) * -12px)) rotate(calc(var(--d) * 2deg)) scale(calc(1 - var(--d) * .04)); z-index: calc(10 - var(--d)); opacity: calc(1 - var(--d) * .18); }
.stack-card img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 10px; box-shadow: 0 18px 30px -16px rgba(20, 17, 28, .6); }
.stack-card.front img { box-shadow: 0 24px 40px -18px rgba(20, 17, 28, .7), 0 0 0 2px var(--stk-ink); }
.stack-cap { margin: 0 0 14px; font-size: 1rem; line-height: 1.55; }
.stack-cap b { display: block; font: 400 1.5rem/1.15 var(--hand); margin-bottom: 4px; }
.stack-ctrl { display: flex; align-items: center; gap: 12px; }
.stack-btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--stk-ink); background: #fffdf7; font: 700 1.1rem/1 var(--sans); cursor: pointer; }
.stack-btn:hover { background: #ffd65a; }
.stack-count { font-weight: 600; font-size: .9rem; color: #3b3744; }
@media (max-width: 760px) { .screen-stack { grid-template-columns: 1fr; gap: 26px; } .stack { margin: 16px 18px 0 0; } }

/* ==========================================================
   Genie: less boxy — sticky notes, torn paper, handwriting
   ========================================================== */
.cs-points.notes { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.cs-points.notes li { flex-direction: column; gap: 8px; padding: 18px 16px 20px !important; border: 0 !important; border-radius: 2px 2px 14px 2px !important; box-shadow: 0 12px 16px -12px rgba(20, 17, 28, .5); transform: rotate(var(--r, -1.5deg)); }
.cs-points.notes li:nth-child(1) { background: #fff1a8; --r: -1.8deg; }
.cs-points.notes li:nth-child(2) { background: #ffd9e2; --r: 1.4deg; }
.cs-points.notes li:nth-child(3) { background: #d8ecff; --r: -.8deg; }
.cs-points.notes li b { font: 400 1.25rem/1.15 var(--hand); }
.cs-points.notes li::before { content: ""; position: absolute; }
.torn { position: relative; padding: 26px 26px 30px !important; border: 0 !important; border-left: 0 !important; border-radius: 0 !important;
  background: repeating-linear-gradient(#fffdf7 0 27px, #dfe7f5 27px 28px) !important; box-shadow: 0 14px 20px -16px rgba(20, 17, 28, .45);
  -webkit-mask: radial-gradient(7px at 50% 0, transparent 98%, #000) 50% 0 / 18px 51% repeat-x, linear-gradient(#000 0 0) 0 100% / 100% 50% no-repeat;
          mask: radial-gradient(7px at 50% 0, transparent 98%, #000) 50% 0 / 18px 51% repeat-x, linear-gradient(#000 0 0) 0 100% / 100% 50% no-repeat;
  transform: rotate(-.6deg); line-height: 28px; }
.torn .ico { display: none; }
.hand-h { display: block; font: 400 1.4rem/1.1 var(--hand); color: #c2410c; margin-bottom: 4px; }
.cs-callout.torn { display: block; }
.persona2-cols > div { padding: 16px 16px 18px; border-radius: 2px 2px 12px 2px; box-shadow: 0 12px 16px -12px rgba(20, 17, 28, .45); }
.persona2-cols > div:nth-child(1) { background: #dff5e8; transform: rotate(-1deg); }
.persona2-cols > div:nth-child(2) { background: #ffe3d0; transform: rotate(.8deg); }
.persona2-cols > div:nth-child(3) { background: #fff1a8; transform: rotate(-.6deg); }
.persona2-cols { border-top: 0; padding-top: 6px; }
.persona2-cols h3 { font: 400 1.3rem/1.1 var(--hand) !important; }
.cs-persona .cs-quote p, .persona2 .cs-quote p { font: 400 1.4rem/1.35 var(--hand) !important; }
.cs-verdict > div { border-radius: 2px 2px 14px 2px !important; box-shadow: 0 12px 16px -12px rgba(20, 17, 28, .45); }
.cs-verdict .good { background: #dff5e8 !important; transform: rotate(-.8deg); }
.cs-verdict .fix { background: #fff1a8 !important; transform: rotate(.8deg); }
.cs-verdict h3 { font: 400 1.35rem/1.1 var(--hand) !important; }
@media (max-width: 760px) {
  .cs-points.notes { grid-template-columns: 1fr; }
  .persona2-cols > div, .cs-verdict > div, .cs-points.notes li { transform: none; }
}

/* ==========================================================
   Heading weights — one colour, weight does the work
   H1 800 · H2 700 · stressed H2: 500 + key words 800 · H3 600
   ========================================================== */
.hero3 h1, .career-hero h1, .gh-text h1, .cs-hero h1, .rs-head h1 { font-weight: 800 !important; }
.career-hero h1 { font-weight: 500 !important; color: var(--stk-ink) !important; }
.career-hero h1 b { font-weight: 800 !important; color: var(--stk-ink) !important; }
main h2:not(.sr-only), .cs3 .cs-section h2.cs-title { font-weight: 700 !important; color: var(--stk-ink) !important; }
main h2.h-split { font-weight: 500 !important; color: var(--stk-ink) !important; }
main h2.h-split b, main h2.h-split b em { font-weight: 800 !important; color: var(--stk-ink) !important; }
.work3 h2 em { color: var(--stk-ink) !important; font-style: normal; }
.mat-head h2 { color: #fff !important; }
.entry h3, .proc-copy h3, .xp h3, .aw-card h3, .edu-card h3, .j-stop h3, .now-title, .cs-sub, .xp-role { font-weight: 600 !important; }
.gh-text h1, .cs-hero h1, .rs-head h1 { color: var(--stk-ink) !important; }
.brand { font-weight: 600 !important; }

/* career top: words left, Nikita + three stat stickers right */
.ch-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.ch-art { position: relative; height: clamp(360px, 38vw, 480px); display: grid; place-items: end center; }
.ch-art::before { content: ""; position: absolute; left: 10%; right: 10%; bottom: 0; height: 78%; border-radius: 50% 50% 18px 18px; background: #eceffd; }
.ch-me { position: relative; height: 100%; width: auto; filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(0 12px 16px rgba(20,17,28,.18)); }
.ch-stat { position: absolute; z-index: 2; padding: 8px 14px; background: #fffdf7; border: 2px solid var(--stk-ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--stk-ink); font: 500 .9rem/1.2 var(--sans); white-space: nowrap; }
.ch-stat b { font: 800 1.2rem/1 var(--bold); margin-right: 4px; }
.ch-stat.s1 { left: 0; top: 18%; transform: rotate(-4deg); background: #fff1a8; }
.ch-stat.s2 { right: 0; top: 42%; transform: rotate(3deg); background: #dff5e8; }
.ch-stat.s3 { left: 4%; bottom: 10%; transform: rotate(-2deg); background: #ffe3d0; }
@media (max-width: 860px) {
  .ch-grid { grid-template-columns: 1fr; }
  .ch-art { height: 320px; max-width: 360px; width: 100%; margin: 8px auto 0; }
}

/* Genie learnings: written by hand on the torn page */
#learnings .torn p { font: 400 1.35rem/28px var(--hand) !important; color: #1f2a5a; margin: 0 0 28px !important; }
#learnings .torn p:last-child { margin-bottom: 0 !important; }
#learnings .torn b { font-weight: 400; color: #c2410c; }

/* career top: Nikita peeking up over a ledge, eyes just above the edge */
.ch-art { height: clamp(300px, 30vw, 380px); place-items: end center; }
.ch-art::before { display: none; }
.ch-peek { position: absolute; left: 50%; bottom: 46px; width: clamp(240px, 24vw, 320px); height: calc(clamp(240px, 24vw, 320px) * .36); translate: -50% 0; overflow: hidden; }
.ch-peek img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform: translateY(100%); animation: peek-up .9s cubic-bezier(.3, 1.4, .5, 1) .3s forwards, peek-bob 4s ease-in-out 1.4s infinite; filter: drop-shadow(0 -2px 0 #fff); }
@keyframes peek-up { to { transform: translateY(0); } }
@keyframes peek-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.ch-ledge { position: absolute; left: 6%; right: 6%; bottom: 20px; height: 30px; border-radius: 12px; background: #eceffd; border: 2px solid var(--stk-ink); box-shadow: 4px 4px 0 var(--stk-ink); }
.ch-stat.s1 { left: 2%; top: 14%; }
.ch-stat.s2 { right: 0; top: 30%; }
.ch-stat.s3 { left: auto; right: 10%; bottom: auto; top: 2%; }
@media (prefers-reduced-motion: reduce) { .ch-peek img { animation: none; transform: none; } }
@media (max-width: 860px) { .ch-art { height: 280px; } .ch-peek { width: 240px; height: 86px; } }
.ch-art { height: clamp(320px, 32vw, 400px); }
.ch-peek { width: clamp(300px, 32vw, 420px); height: calc(clamp(300px, 32vw, 420px) * .44); bottom: 44px; }
.ch-ledge { left: 0; right: 0; }
.ch-stat.s1 { left: 0; top: 8%; }
.ch-stat.s2 { right: 0; top: 22%; }
.ch-stat.s3 { right: auto; left: 34%; top: 0; }
@media (max-width: 860px) { .ch-art { height: 300px; } .ch-peek { width: 280px; height: 123px; } .ch-stat { font-size: .82rem; } }

/* ==========================================================
   Round of fixes
   ========================================================== */
/* career headline: a pinch of colour, and a ship that sails into "shipped" */
.career-hero h1 b { color: #c2410c !important; }
.ship-word { position: relative; display: inline-block; }
.sw-text { display: inline-block; clip-path: inset(0 100% 0 0); animation: sw-reveal 1.6s cubic-bezier(.5, 0, .3, 1) .6s forwards; }
.sw-ship { position: absolute; left: 0; top: 50%; width: .9em; height: .6em; margin-top: -.34em; fill: #fffdf7; stroke: #c2410c; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; animation: sw-sail 1.6s cubic-bezier(.5, 0, .3, 1) .6s forwards; }
@keyframes sw-reveal { to { clip-path: inset(0 0 0 0); } }
@keyframes sw-sail { 0% { transform: translateX(-.2em) rotate(-4deg); opacity: 1; } 50% { transform: translateX(1.6em) rotate(4deg); } 88% { transform: translateX(3.1em) rotate(-3deg); opacity: 1; } 100% { transform: translateX(3.6em) scale(.4); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .sw-text { clip-path: none; animation: none; } .sw-ship { display: none; } }

/* experience: the drive sits under the heading */
.part-head .drive-cta { margin-top: 20px; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
.part-head .drive-cta .arrow { display: none; }
.part-head .drive-art svg { width: 100%; max-width: 180px; }

/* skills: hand-drawn outline stickers, no colour */
.skill-chips.one li { background: transparent !important; border: 1.6px solid var(--stk-ink); border-radius: 255px 18px 225px 18px / 18px 225px 18px 255px; font-weight: 500; padding: 7px 16px; }
.skill-chips.one li:nth-child(3n) { border-radius: 18px 225px 18px 255px / 255px 18px 225px 18px; }
.skill-chips.one li:nth-child(odd) { transform: rotate(-.6deg); }
.skill-chips.one li:nth-child(even) { transform: rotate(.5deg); }

/* education: a graduation stamp */
.edu-card { position: relative; }
.edu-stamp { position: absolute; right: 18px; top: 16px; display: grid; place-items: center; width: 92px; height: 92px; border: 3px double #13786c; border-radius: 50%; color: #13786c; font: 700 .68rem/1.1 var(--sans); letter-spacing: .14em; text-transform: uppercase; text-align: center; transform: rotate(-12deg); opacity: .85; }
.edu-stamp b { font: 800 1.25rem/1 var(--bold); letter-spacing: 0; }
.edu-card h3, .edu-card .edu-when, .edu-card p { padding-right: 104px; }
@media (max-width: 560px) { .edu-stamp { position: static; margin: 0 0 10px auto; width: 78px; height: 78px; } .edu-card h3, .edu-card .edu-when, .edu-card p { padding-right: 0; } }

/* noticeboard: white heading, a torn-paper note, pockets as albums */
main .mat-head h2 { color: #fff !important; }
.board-note { position: relative; margin: 0 0 8px; padding: 22px 20px 20px; transform: rotate(-2deg);
  background: repeating-linear-gradient(#fffdf7 0 25px, #dfe7f5 25px 26px); color: #1f2a5a; font: 400 1.35rem/26px var(--hand);
  box-shadow: 0 12px 18px -12px rgba(0,0,0,.55);
  -webkit-mask: radial-gradient(6px at 50% 100%, transparent 98%, #000) 50% 100% / 16px 51% repeat-x, linear-gradient(#000 0 0) 0 0 / 100% 50% no-repeat;
          mask: radial-gradient(6px at 50% 100%, transparent 98%, #000) 50% 100% / 16px 51% repeat-x, linear-gradient(#000 0 0) 0 0 / 100% 50% no-repeat; }
.board-note::before { content: ""; position: absolute; left: 50%; top: -8px; width: 70px; height: 20px; margin-left: -35px; background: rgba(255, 246, 214, .85); transform: rotate(3deg); }
.pockets { gap: 30px; padding-top: 0; }
.pocket { min-height: 0; }
.pocket-peek { display: none; }
.pocket-front { position: relative; height: auto; min-height: 0; flex-direction: row; align-items: center; gap: 16px; padding: 14px 16px 14px 26px; border-radius: 4px 12px 12px 4px; border-width: 2px;
  background: var(--pc); background-image: linear-gradient(90deg, rgba(20,17,28,.18) 0 10px, transparent 10px), repeating-linear-gradient(45deg, rgba(255,255,255,.12) 0 2px, transparent 2px 6px);
  box-shadow: 4px 4px 0 var(--stk-ink), 8px 8px 0 -2px #fffdf7, 8px 8px 0 0 var(--stk-ink); }
.pocket-front::before { display: none; }
.album-cover { flex: 0 0 auto; position: relative; width: 84px; height: 84px; padding: 4px; background: #fffdf7; transform: rotate(-3deg); box-shadow: 0 4px 8px rgba(0,0,0,.2); }
.album-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.album-cover::before, .album-cover::after { content: ""; position: absolute; width: 16px; height: 16px; background: linear-gradient(135deg, var(--stk-ink) 50%, transparent 50%); }
.album-cover::before { left: -3px; top: -3px; }
.album-cover::after { right: -3px; bottom: -3px; transform: rotate(180deg); }
.album-text { display: grid; gap: 4px; }
.pocket:hover .pocket-front { transform: translate(-2px, -2px); }

/* pocket viewer: close always visible, real thumbnails */
.pocket-view { max-height: 92dvh; overflow: auto; }
.pv-head { position: sticky; top: -18px; z-index: 5; margin: -18px -18px 12px; padding: 14px 18px; background: #3d8a5c; }
.pv-close { min-height: 44px; }
.pv-thumbs button { width: 60px; height: 60px; border: 3px solid #fffdf7; border-radius: 3px; opacity: .65; transform: rotate(-2deg); box-shadow: 0 3px 6px rgba(0,0,0,.3); }
.pv-thumbs li:nth-child(even) button { transform: rotate(2deg); }
.pv-thumbs button[aria-current="true"] { opacity: 1; border-color: #ffd65a; transform: rotate(0) translateY(-3px); }
@media (max-width: 560px) { .pv-head { top: -14px; margin: -14px -12px 10px; padding: 12px; } .pv-photo img { height: 42dvh; } }

/* touch screens: no hover effects */
@media (hover: none) {
  .pol:hover, .pocket:hover .pocket-front, .det-card:hover, .aw-card:hover .aw-badge, .contact3 .contact-links a:hover, .btn:hover,
  .bookmark:hover, .drive-cta:hover, .entry .btn-primary:hover, .car-btn:hover:not(:disabled), .stack-btn:hover, .pv-nav:hover, .print:hover, .nb-card:hover, .career-jump a:hover { transform: none !important; translate: none !important; rotate: none !important; }
  .contact3 .contact-links a:hover { box-shadow: 3px 3px 0 var(--stk-ink); }
}

/* Genie: gradient hero, clearer video, quieter headings, swipeable wireframes */
.gh-panel { background: linear-gradient(135deg, #e6f4ef 0%, #eceffd 55%, #fbe9e0 100%); }
.gv-label { font: 600 .95rem/1.3 var(--sans); color: var(--stk-ink); }
.gv-cursor { width: 30px; height: 30px; transition: left 1s cubic-bezier(.5, 0, .2, 1), top 1s cubic-bezier(.5, 0, .2, 1), transform .15s ease; }
.gv-cursor.press { transform: scale(.82); }
.gv-click { width: 46px; height: 46px; margin: -14px 0 0 -14px; border: 3px solid #ff8a50; background: rgba(255, 138, 80, .18); }
.gv-click.pop { animation: gv-pop .7s ease-out; }
.cs3 .cs-title mark { background: none !important; padding: 0; font-weight: 800; }
.cs3 .cs-section h2.cs-title { font-weight: 600 !important; }
.cs-callout.torn span { font-size: 1.12rem; line-height: 28px; }
@media (max-width: 760px) {
  .cs-wires { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px; margin: 14px -20px 0; padding: 0 20px 8px; scrollbar-width: none; }
  .cs-wires::-webkit-scrollbar { display: none; }
  .cs-wire { flex: 0 0 78%; scroll-snap-align: start; }
}
@media (max-width: 560px) {
  .gv-bar { flex-wrap: wrap; gap: 8px 12px; transform: none; }
  .gv-steps { flex: 1 1 100%; order: 0; }
  .gv-label { flex: 1 1 auto; order: 1; font-size: .9rem; }
  .gv-toggle { order: 2; }
  .genie-video { transform: none; }
}

/* "shipped": ship → blobs → word, with a gooey merge */
.ship-word { position: relative; display: inline-block; }
.sw-goo { position: relative; display: inline-block; filter: url(#goo); color: #c2410c; }
.ship-word.done .sw-goo { filter: none; }
.sw-text { display: inline-block; clip-path: none !important; animation: none !important; }
.sw-l { display: inline-block; transform: scale(0); opacity: 0; transform-origin: 50% 60%; }
.ship-word.go .sw-l { animation: sw-grow .7s cubic-bezier(.3, 1.5, .5, 1) forwards; animation-delay: calc(1.1s + var(--k) * .08s); }
@keyframes sw-grow { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.sw-ship { position: absolute; left: 50%; top: 52%; width: 1.25em; height: .86em; margin: -.48em 0 0 -.62em; fill: #c2410c; stroke: none; animation: none !important; transform-origin: 50% 70%; }
.ship-word.go .sw-ship { animation: sw-melt 1.4s cubic-bezier(.5, 0, .3, 1) forwards !important; }
@keyframes sw-melt { 0% { transform: translateX(-1.6em) rotate(-6deg); opacity: 1; } 40% { transform: translateX(0) rotate(4deg); opacity: 1; } 75% { transform: translateX(0) scale(.7, .5); opacity: 1; } 100% { transform: translateX(0) scale(.1); opacity: 0; } }
.sw-blob { position: absolute; left: 0; top: 0; width: .32em; height: .32em; margin: -.16em 0 0 -.16em; border-radius: 50%; background: #c2410c; opacity: 0;
  transform: translate(calc(var(--cx, 0px)), 0); }
.ship-word.go .sw-blob { animation: sw-flow 1.3s cubic-bezier(.4, 0, .2, 1) forwards; animation-delay: calc(.7s + var(--k) * .06s); }
@keyframes sw-flow {
  0% { opacity: 1; left: 50%; top: 58%; transform: scale(1.4); }
  70% { opacity: 1; left: var(--tx); top: var(--ty); transform: scale(1.2); }
  100% { opacity: 0; left: var(--tx); top: var(--ty); transform: scale(.2); }
}
@media (prefers-reduced-motion: reduce) { .sw-l { transform: none; opacity: 1; } .sw-ship, .sw-blob { display: none; } .sw-goo { filter: none; } }
@media (max-width: 860px) {
  .ch-art { height: 250px; }
  .ch-stat.s1 { left: 0; top: 0; }
  .ch-stat.s3 { left: auto; right: 0; top: 0; }
  .ch-stat.s2 { left: 50%; right: auto; top: 54px; transform: translateX(-50%) rotate(2deg); }
}
@media (max-width: 860px) {
  .ch-art { display: flex; flex-wrap: wrap; justify-content: center; align-content: flex-start; gap: 10px 8px; height: auto; min-height: 0; padding-bottom: 150px; }
  .ch-stat, .ch-stat.s1, .ch-stat.s2, .ch-stat.s3 { position: relative; left: auto; right: auto; top: auto; bottom: auto; transform: rotate(-2deg); }
  .ch-stat.s2 { transform: rotate(2deg); }
  .ch-peek { bottom: 44px; }
}
@media (max-width: 860px) { .ch-art { padding-bottom: 170px; } }

/* "shipped", smoother: transforms only, soft hand-off to a crisp word */
.ship-word { position: relative; }
.sw-crisp { position: absolute; left: 0; top: 0; color: #c2410c; opacity: 0; transition: opacity .6s ease; pointer-events: none; white-space: nowrap; }
.ship-word.done .sw-crisp { opacity: 1; }
.sw-goo { transition: opacity .6s ease; }
.ship-word.done .sw-goo { filter: url(#goo); opacity: 0; }
.sw-blob { left: 0 !important; top: 0 !important; transform: translate(var(--sx, 0), var(--sy, 0)) scale(0); will-change: transform; }
.ship-word.go .sw-blob { animation: sw-flow2 1.5s cubic-bezier(.65, 0, .35, 1) forwards; animation-delay: calc(.9s + var(--k) * .07s); }
@keyframes sw-flow2 {
  0%   { opacity: 1; transform: translate(var(--sx), var(--sy)) scale(1.6); }
  65%  { opacity: 1; transform: translate(var(--tx), var(--ty)) scale(1.25); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(.3); }
}
.ship-word.go .sw-ship { animation: sw-melt2 1.7s cubic-bezier(.45, 0, .25, 1) forwards !important; }
@keyframes sw-melt2 {
  0%   { transform: translateX(-1.6em) rotate(-5deg); opacity: 0; }
  12%  { opacity: 1; }
  45%  { transform: translateX(0) rotate(3deg) scale(1); }
  70%  { transform: translateX(0) rotate(0) scale(.85, .6); opacity: 1; }
  100% { transform: translateX(0) scale(.2); opacity: 0; }
}
.ship-word.go .sw-l { animation: sw-grow2 .9s cubic-bezier(.34, 1.3, .64, 1) forwards; animation-delay: calc(1.45s + var(--k) * .07s); }
@keyframes sw-grow2 { 0% { transform: scale(0); opacity: 0; } 30% { opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sw-crisp { opacity: 1; transition: none; } .sw-goo { opacity: 0; } }

/* education: a tidy in-line stamp */
.edu-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.edu-top .edu-when { margin: 0; }
.edu-stamp, .edu-stamp:is(*) { position: static !important; width: auto !important; height: auto !important; display: inline-flex !important; align-items: center; gap: 6px; margin: 0 !important; padding: 6px 12px; border: 3px double #13786c; border-radius: 8px; color: #13786c; font: 700 .72rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; transform: rotate(-4deg); opacity: .9; }
.edu-stamp b { font: 800 1rem/1 var(--bold); letter-spacing: 0; }
.edu-card h3, .edu-card .edu-when, .edu-card p { padding-right: 0 !important; }

.edu-top { row-gap:10px; margin-bottom:16px; }

/* ---------- Phone hamburger menu (button injected by header.js) ---------- */
.nav-burger { display: none; }
@media (max-width: 760px) {
  .has-burger .nav { height: 64px; flex-wrap: nowrap; padding-block: 0; }
  .has-burger .nav-right { display: flex; align-items: center; gap: 12px; }
  html { scroll-padding-top: 80px; }
  .nav-burger {
    display: inline-flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
    width: 44px; height: 44px; padding: 0; border: 2px solid var(--stk-ink); border-radius: 10px;
    background: #fff; cursor: pointer; box-shadow: 2px 2px 0 var(--stk-ink);
  }
  .nav-burger span { display: block; width: 18px; height: 2px; border-radius: 2px; background: var(--stk-ink); transition: transform .25s ease, opacity .2s ease; }
  .menu-open .nav-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .menu-open .nav-burger span:nth-child(2) { opacity: 0; }
  .menu-open .nav-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-burger:focus-visible { outline: 3px solid #c2410c; outline-offset: 2px; }

  .has-burger .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; width: auto; order: 0;
    display: flex; flex-direction: column; gap: 0; margin: 0; padding: 4px 16px 14px;
    background: var(--bg); border-bottom: 2px solid var(--stk-ink);
    box-shadow: 0 10px 18px rgba(20, 17, 28, .08);
    visibility: hidden; opacity: 0; transform: translateY(-6px);
  }
  .burger-ready .nav-links { transition: opacity .2s ease, transform .2s ease, visibility 0s linear .2s; }
  .has-burger.menu-open .nav-links { visibility: visible; opacity: 1; transform: none; }
  .burger-ready.menu-open .nav-links { transition: opacity .2s ease, transform .2s ease; }
  .has-burger .nav-links li { border-bottom: 1px solid var(--line); }
  .has-burger .nav-links li:last-child { border-bottom: 0; }
  .has-burger .nav-links a { display: flex; width: 100%; min-height: 52px; padding: 0 4px; font-size: 1.1rem; color: var(--stk-ink); }
  .has-burger .nav-links a::after { display: none; }
  .has-burger .nav-links a[aria-current="page"] { color: #c2410c; font-weight: 600; }
}
@media (max-width: 760px) and (prefers-reduced-motion: reduce) {
  .nav-burger span, .burger-ready .nav-links, .burger-ready.menu-open .nav-links { transition: none; }
}

/* "shipped" v3: the ship sails across, letters rise in its wake. No SVG filter, so it runs on the GPU. */
.sw-goo, .ship-word.done .sw-goo { filter: none !important; opacity: 1 !important; }
.sw-crisp { display: none !important; }
.sw-l { opacity: 0; transform: translateY(.28em) scale(.55); transform-origin: 50% 80%; will-change: transform, opacity; }
.ship-word.go .sw-l { animation: sw-rise .62s cubic-bezier(.34, 1.45, .64, 1) forwards; animation-delay: calc(var(--d, 1s) + .1s); }
@keyframes sw-rise { 0% { opacity: 0; transform: translateY(.28em) scale(.55); } 45% { opacity: 1; } 100% { opacity: 1; transform: none; } }
.sw-blob { left: 0 !important; top: 0 !important; width: .26em !important; height: .26em !important; margin: -.13em 0 0 -.13em !important;
  opacity: 0; transform: translate(var(--tx, 0), var(--ty, 0)) scale(0); will-change: transform, opacity; }
.ship-word.go .sw-blob { animation: sw-drop .55s cubic-bezier(.3, 0, .3, 1) forwards; animation-delay: var(--d, 1s); }
@keyframes sw-drop {
  0%   { opacity: 0;  transform: translate(var(--tx), calc(var(--ty) - .1em)) scale(.3); }
  35%  { opacity: 1;  transform: translate(var(--tx), var(--ty)) scale(1.15, .9); }
  100% { opacity: 0;  transform: translate(var(--tx), calc(var(--ty) - .15em)) scale(.2); }
}
.sw-ship { left: 0 !important; margin-left: -.62em !important; opacity: 0; will-change: transform, opacity; }
.ship-word.go .sw-ship { animation: sw-sail3 1.85s cubic-bezier(.45, .05, .55, .95) forwards !important; }
@keyframes sw-sail3 {
  0%   { opacity: 0; transform: translateX(-.4em) rotate(-4deg); }
  10%  { opacity: 1; }
  30%  { transform: translateX(calc(var(--w, 3em) * .28)) rotate(3deg); }
  55%  { transform: translateX(calc(var(--w, 3em) * .58)) rotate(-3deg); }
  82%  { opacity: 1; transform: translateX(calc(var(--w, 3em) * .92)) rotate(2deg); }
  100% { opacity: 0; transform: translateX(calc(var(--w, 3em) + .5em)) rotate(0) scale(.7); }
}
@media (prefers-reduced-motion: reduce) { .sw-l { opacity: 1 !important; transform: none !important; animation: none !important; } .sw-ship, .sw-blob { display: none !important; } }

/* lighter hamburger: no box, soft grey lines */
@media (max-width: 760px) {
  .nav-burger { border: 0; background: transparent; box-shadow: none; border-radius: 8px; gap: 5px; }
  .nav-burger span { width: 22px; height: 2px; background: #6b6676; }
  .nav-burger:hover span { background: var(--stk-ink); }
  .has-burger .nav-links { border-bottom: 1px solid var(--line); box-shadow: 0 12px 20px rgba(20, 17, 28, .05); }
}

/* ---------- "Take the drive" as a pop-up ---------- */
html.jr-lock, html.jr-lock body { overflow: hidden; }
.jr-backdrop { position: fixed; inset: 0; z-index: 190; background: rgba(20, 17, 28, .45); opacity: 0; transition: opacity .25s ease; }
.jr-backdrop.jr-in { opacity: 1; }
.journey { position: fixed; inset: 24px; z-index: 200; overflow-y: auto; overscroll-behavior: contain; padding: 0 !important;
  background: var(--bg); border: 2.5px solid var(--stk-ink); border-radius: 18px; box-shadow: 0 24px 60px rgba(20, 17, 28, .28);
  opacity: 0; transform: translateY(16px) scale(.985); transition: opacity .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1); }
.journey.jr-in { opacity: 1; transform: none; }
.journey[hidden] { display: none; }
.jr-bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px clamp(16px, 3vw, 28px); background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.jr-title { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--stk-ink); }
.jr-title span { font-weight: 400; color: #5b5666; }
/* round white button with a soft shadow, like the close button in Google Maps */
.jr-close { flex: none; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(20, 17, 28, .08); border-radius: 50%;
  background: #fff; color: #3b3744; cursor: pointer; box-shadow: 0 1px 3px rgba(20, 17, 28, .2), 0 4px 10px rgba(20, 17, 28, .12); transition: background-color .15s ease, box-shadow .15s ease; }
.jr-close svg { width: 20px; height: 20px; }
.jr-close:hover { background: #f4f3f0; box-shadow: 0 2px 5px rgba(20, 17, 28, .25), 0 6px 14px rgba(20, 17, 28, .14); }
.jr-close:focus-visible { outline: 3px solid #c2410c; outline-offset: 2px; }
.journey .journey-grid { padding-top: 8px; }
.journey .journey-list { padding: 8vh 0 40vh; }
.journey .journey-map, html.hdr-hidden .journey .journey-map { top: 84px !important; height: min(640px, calc(100vh - 140px)); }
@media (max-width: 860px) {
  .journey { inset: 0; border: 0; border-radius: 0; box-shadow: none; transform: translateY(24px); }
  .jr-title span { display: none; }
  .jr-bar { padding: 8px 16px; }
  .journey .journey-map, html.hdr-hidden .journey .journey-map { top: 68px !important; height: 42vh; }
  .journey .journey-list { padding: 4vh 0 30vh; }
}
@media (prefers-reduced-motion: reduce) { .journey, .jr-backdrop { transition: none; } }