/* =========================================================
   Delulu Designs — styles
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  /* colour */
  --paper: #fff8ec;
  --paper-2: #fdf0d9;
  --ink: #1d1a2b;
  --ink-soft: #4d4862;
  --line: #1d1a2b;
  --pink: #ff9ccf;
  --tomato: #ff6a45;
  --butter: #ffd84d;
  --sky: #8ccfff;
  --mint: #93e6bb;
  --lilac: #c3b2ff;
  --white: #fff;

  /* type */
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-body: "DM Sans", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --font-hand: "Caveat", "Comic Sans MS", cursive;
  --text-base: 1.0625rem;

  /* shape */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 28px;
  --border: 2.5px solid var(--line);
  --shadow-hard: 4px 5px 0 var(--ink);
  --shadow-hard-lg: 7px 9px 0 var(--ink);

  /* motion (playful / expressive preset) */
  --dur-instant: 90ms;
  --dur-fast: 160ms;
  --dur-base: 260ms;
  --dur-slow: 480ms;
  --dur-slower: 800ms;
  --dur-draw: 1100ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dist-sm: 6px;
  --dist-md: 28px;
  --dist-lg: 60px;
  --lift: -6px;
  --press-scale: 0.96;
  --stagger: 70ms;
}

/* Reduced motion: keep feedback, drop travel and zoom */
@media (prefers-reduced-motion: reduce) {
  :root { --dist-sm: 0px; --dist-md: 0px; --dist-lg: 0px; --lift: 0px; --press-scale: 1; --dur-draw: 1ms; }
}
:root[data-calm="on"] { --dist-sm: 0px; --dist-md: 0px; --dist-lg: 0px; --lift: 0px; --press-scale: 1; --dur-draw: 1ms; }

/* Comfort settings */
:root[data-bigtext="on"] { font-size: 118%; }
:root[data-readable="on"] {
  --font-display: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-serif: "Atkinson Hyperlegible", system-ui, sans-serif;
  --font-hand: "Atkinson Hyperlegible", system-ui, sans-serif;
}
:root[data-readable="on"] body { letter-spacing: 0.01em; word-spacing: 0.06em; line-height: 1.75; }
:root[data-contrast="on"] {
  --paper: #fff; --paper-2: #fff; --ink: #000; --ink-soft: #000; --line: #000;
  --pink: #ffc4e3; --butter: #ffe680; --sky: #bfe4ff; --mint: #c2f2d8; --lilac: #ddd3ff; --tomato: #ff9a80;
}
:root[data-contrast="on"] body { background-image: none; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:root[data-calm="on"] { scroll-behavior: auto; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--ink);
  background-color: var(--paper);
  /* dotted sketchbook paper */
  background-image: radial-gradient(rgba(29, 26, 43, 0.12) 1.2px, transparent 1.3px);
  background-size: 26px 26px;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
main { overflow-x: clip; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.05; margin: 0; letter-spacing: -0.02em; }
p { margin: 0 0 1em; }
a { color: inherit; }
button { font: inherit; color: inherit; }
em { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; }
::selection { background: var(--butter); color: var(--ink); }

:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  box-shadow: 0 0 0 7px var(--butter);
  border-radius: 6px;
}

.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;
}
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 999px;
  font-weight: 700; text-decoration: none; transition: top var(--dur-fast) var(--ease-standard);
}
.skip-link:focus { top: 12px; }

.hand { font-family: var(--font-hand); font-size: 1.5rem; line-height: 1.2; }

/* colour helpers */
.bg-pink { background: var(--pink); } .bg-butter { background: var(--butter); } .bg-sky { background: var(--sky); }
.bg-mint { background: var(--mint); } .bg-lilac { background: var(--lilac); } .bg-tomato { background: var(--tomato); }
.c-pink { color: var(--pink); } .c-butter { color: var(--butter); } .c-sky { color: var(--sky); }
.c-mint { color: var(--mint); } .c-lilac { color: var(--lilac); } .c-tomato { color: var(--tomato); }

/* SVG doodle defaults: filled shapes with ink outline */
svg use { fill: currentColor; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.ink { stroke: var(--ink); fill: none; }
.ink-fill { fill: var(--ink); stroke: none; }

/* ---------- Buttons ---------- */
.btn {
  --bg: var(--paper);
  display: inline-flex; align-items: center; gap: 0.5em;
  padding: 0.85em 1.4em; min-height: 48px;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem;
  text-decoration: none; color: var(--ink); background: var(--bg);
  border: var(--border); border-radius: 999px; box-shadow: var(--shadow-hard);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
}
.btn--ink { --bg: var(--ink); color: var(--paper); box-shadow: 4px 5px 0 var(--pink); }
.btn--pink { --bg: var(--pink); }
.btn--ghost { --bg: var(--white); }
.btn--big { font-size: 1.1rem; padding: 1em 1.6em; }
.btn-arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-spring); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { transform: translate(-2px, -3px) rotate(-1.5deg); box-shadow: 7px 9px 0 var(--ink); }
  .btn--ink:hover { box-shadow: 7px 9px 0 var(--pink); }
  .btn:hover .btn-arrow { transform: translateX(5px); }
}
.btn:active { transform: translate(2px, 3px) scale(var(--press-scale)); box-shadow: 1px 1px 0 var(--ink); transition-duration: var(--dur-instant); }
.btn--ink:active { box-shadow: 1px 1px 0 var(--pink); }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  transition: background-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.nav.is-scrolled { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.nav nav { margin-left: auto; }

.logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.03em; }
.logo-dot { color: var(--tomato); }
.logo-blob {
  position: relative; display: inline-flex; gap: 3px; align-items: center; justify-content: center;
  width: 42px; height: 38px; background: var(--pink); border: var(--border);
  border-radius: 55% 45% 40% 60% / 60% 55% 45% 40%;
  transition: transform var(--dur-base) var(--ease-spring), border-radius var(--dur-slow) var(--ease-standard);
}
@media (hover: hover) and (pointer: fine) {
  .logo:hover .logo-blob { transform: rotate(-10deg) scale(1.08); border-radius: 45% 55% 60% 40% / 45% 40% 60% 55%; }
}
.eye { position: relative; width: 12px; height: 12px; background: var(--white); border: 2px solid var(--ink); border-radius: 50%; display: inline-block; }
.pupil { position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; background: var(--ink); border-radius: 50%; transform: translate(var(--px, 0px), var(--py, 0px)); transition: transform var(--dur-fast) var(--ease-standard); }

.nav-links { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.nav-links a {
  white-space: nowrap;
  position: relative; display: inline-block; padding: 8px 14px; border-radius: 999px;
  font-weight: 600; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-spring);
}
.nav-links a::after {
  content: ""; position: absolute; left: 14px; right: 14px; bottom: 4px; height: 3px; border-radius: 3px;
  background: var(--tomato); transform: scaleX(0); transform-origin: left; transition: transform var(--dur-base) var(--ease-enter);
}
@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover::after { transform: scaleX(1); }
  .nav-links a:hover { transform: rotate(-2deg); }
}
.nav-links a[aria-current="true"]::after { transform: scaleX(1); }
.nav-cta { background: var(--butter); border: var(--border); box-shadow: 2px 3px 0 var(--ink); }
.nav-cta::after { display: none; }

/* Comfort panel */
.comfort { position: relative; }
.comfort-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px;
  background: var(--mint); border: var(--border); border-radius: 999px; box-shadow: 2px 3px 0 var(--ink);
  font-weight: 700; cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring);
}
.comfort-toggle svg { fill: currentColor; }
.comfort-toggle:active { transform: scale(var(--press-scale)); }
.comfort-toggle[aria-expanded="true"] { background: var(--butter); }
.comfort-panel {
  position: absolute; right: 0; top: calc(100% + 12px); width: min(300px, calc(100vw - 32px));
  padding: 20px; background: var(--white); border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-hard-lg);
  transform-origin: top right;
  transition: opacity var(--dur-base) var(--ease-enter), transform var(--dur-base) var(--ease-spring);
}
.comfort-panel[hidden] { display: block; visibility: hidden; opacity: 0; transform: scale(0.9) rotate(2deg); pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-exit), transform var(--dur-fast) var(--ease-exit), visibility 0s var(--dur-fast); }
.comfort-title { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; margin-bottom: 4px; }
.comfort-sub { font-size: 0.9rem; color: var(--ink-soft); margin-bottom: 14px; }
.switch { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 0; font-weight: 600; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.track { position: relative; flex: none; width: 46px; height: 28px; border: var(--border); border-radius: 999px; background: var(--paper-2); transition: background-color var(--dur-fast) var(--ease-standard); }
.track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 19px; height: 19px; border-radius: 50%; background: var(--ink); transition: transform var(--dur-base) var(--ease-spring); }
.switch input:checked + .track { background: var(--mint); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 7px var(--butter); }

@media (max-width: 760px) {
  .nav { flex-wrap: wrap; row-gap: 8px; }
  .nav nav { order: 3; width: 100%; margin-left: 0; }
  .nav-links { justify-content: space-between; }
  .nav-links a { padding: 6px 10px; }
  .comfort { margin-left: auto; }
  .comfort-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .logo-word { font-size: 1.1rem; }
}

/* ---------- Reveal on scroll ---------- */
.js .reveal {
  opacity: 0;
  transform: translateY(var(--dist-md)) rotate(var(--r, 0deg));
  transition: opacity var(--dur-slow) var(--ease-enter), transform var(--dur-slower) var(--ease-enter);
  transition-delay: calc(var(--d, 0) * var(--stagger));
}
.js .reveal.is-in { opacity: 1; transform: translateY(0) rotate(var(--r, 0deg)); }
.js .reveal.is-done { transition-delay: 0s; transition-duration: var(--dur-base); transition-timing-function: var(--ease-spring); }

/* ---------- Hero ---------- */
.hero {
  position: relative; min-height: min(92vh, 900px);
  display: grid; place-items: center; padding: 40px 16px 110px; overflow: hidden;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 48 48'%3E%3Cpath d='M8 40l4-12L34 6l8 8-22 22-12 4Z' fill='%23ffd84d' stroke='%231d1a2b' stroke-width='3' stroke-linejoin='round'/%3E%3C/svg%3E") 2 26, crosshair;
}
.hero-inner { position: relative; z-index: 2; max-width: 980px; text-align: center; }
.hero-kicker { color: var(--ink-soft); font-size: clamp(1.4rem, 3vw, 2rem); margin-bottom: 0.2em; }
.hero-title { font-size: clamp(4.2rem, 17vw, 13rem); font-weight: 800; line-height: 0.86; letter-spacing: -0.05em; margin-bottom: 0.25em; }
.hero-line { display: block; }
.hero-line--serif { position: relative; display: inline-block; font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; color: var(--tomato); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }

/* split letters */
.char { display: inline-block; transform-origin: 50% 90%; }
.js .char { opacity: 0; transform: translateY(var(--dist-lg)) rotate(calc(var(--cr) * 1deg)) scale(0.6); }
.js .is-loaded .char, .js.is-loaded .char {
  opacity: 1; transform: none;
  transition: opacity var(--dur-slow) var(--ease-enter), transform var(--dur-slower) var(--ease-spring);
  transition-delay: calc(var(--ci) * 45ms);
}
.js.is-loaded .char.wobble { animation: wobble var(--dur-slow) var(--ease-spring); }
@keyframes wobble {
  0% { transform: none; }
  35% { transform: translateY(-14%) rotate(-8deg) scale(1.08); }
  70% { transform: translateY(2%) rotate(4deg); }
  100% { transform: none; }
}

.hero-lede { max-width: 700px; margin: 0 auto 1.6em; font-size: clamp(1.2rem, 2.5vw, 1.6rem); line-height: 1.45; font-weight: 500; color: var(--ink); }
.hl { color: var(--ink); font-weight: 700; padding: 0 0.15em; border-radius: 0.3em; background: linear-gradient(transparent 55%, var(--hl) 55%); }
.hl--pink { --hl: var(--pink); } .hl--butter { --hl: var(--butter); } .hl--sky { --hl: var(--sky); } .hl--mint { --hl: var(--mint); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.hero-hint { display: inline-flex; align-items: flex-end; gap: 6px; margin-top: 2rem; font-size: 1.35rem; color: var(--ink-soft); }
.hint-arrow { width: 60px; height: 42px; transform: scaleX(-1) rotate(20deg); }
.hint-arrow use { fill: none; stroke: var(--ink-soft); stroke-width: 3; }

/* draw-on-load / draw-on-view SVG strokes */
.js .draw use { stroke-dasharray: 1; stroke-dashoffset: 1; }
.js .draw.is-drawn use { animation: draw var(--dur-draw) var(--ease-standard) forwards; }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* stickers */
.sticker-field { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.sticker {
  position: absolute; left: var(--x); top: var(--y);
  transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--r)) scale(var(--s, 1));
  pointer-events: auto; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none;
  filter: drop-shadow(3px 4px 0 rgba(29, 26, 43, 0.9));
  transition: transform var(--dur-base) var(--ease-spring), filter var(--dur-fast) var(--ease-standard);
  /* Own compositing layer: moving a drop-shadowed sticker otherwise leaves
     smeared shadow "trails" on phones and tablets that repaint lazily. */
  will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.js .sticker { opacity: 0; --s: 0.3; }
.js.is-loaded .sticker { opacity: 1; --s: 1; transition: transform var(--dur-slower) var(--ease-spring), opacity var(--dur-base) var(--ease-enter); transition-delay: calc(400ms + var(--si, 0) * 80ms); }
.js.is-loaded .sticker.is-settled { transition: transform var(--dur-base) var(--ease-spring), filter var(--dur-fast) var(--ease-standard); transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .js.is-loaded .sticker.is-settled:hover { --s: 1.08; }
}
.js.is-loaded .sticker.is-dragging { cursor: grabbing; --s: 1.14; transition: filter var(--dur-fast) var(--ease-standard) !important; filter: drop-shadow(8px 12px 0 rgba(29, 26, 43, 0.85)); z-index: 10; }
/* Touch screens: keep the shadow fixed while dragging so it never has to repaint mid-move. */
@media (hover: none), (pointer: coarse) {
  .js.is-loaded .sticker.is-dragging { filter: drop-shadow(3px 4px 0 rgba(29, 26, 43, 0.9)); transition: none !important; }
}
.sticker--pill, .sticker--tag, .sticker--round {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(0.85rem, 1.6vw, 1.05rem);
  padding: 10px 18px; border: 3px solid var(--white); outline: 2.5px solid var(--ink); border-radius: 999px; white-space: nowrap;
}
.sticker--tag { border-radius: 10px; font-family: var(--font-hand); font-size: clamp(1.15rem, 2vw, 1.4rem); }
.sticker--round { width: 92px; height: 92px; display: grid; place-items: center; text-align: center; line-height: 1; border-radius: 50%; padding: 0; font-size: 0.95rem; }
.sticker--round span { transform: rotate(-8deg); }
.sticker--svg { width: clamp(52px, 7vw, 80px); height: clamp(52px, 7vw, 80px); overflow: visible; }
.sticker--svg use { stroke: var(--ink); stroke-width: 2.5; paint-order: stroke; }
@media (max-width: 640px) {
  .sticker--pill, .sticker--tag { font-size: 0.8rem; padding: 7px 12px; }
  .sticker--round { width: 70px; height: 70px; font-size: 0.8rem; }
  .sticker--svg { width: 46px; height: 46px; }
}

.doodle { position: absolute; overflow: visible; pointer-events: none; }
.doodle use { fill: none; stroke: var(--ink); stroke-width: 2.5; }
.doodle--spiral { left: var(--x); top: var(--y); width: 54px; height: 54px; opacity: 0.6; }
.doodle--loop { left: var(--x); top: var(--y); width: 130px; height: 44px; opacity: 0.5; }
.float { animation: float 6s ease-in-out infinite; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-10px) rotate(12deg); } }

.shuffle-btn {
  position: absolute; z-index: 4; right: 16px; bottom: 20px;
  display: inline-flex; gap: 6px; align-items: center; min-height: 44px; padding: 8px 14px;
  background: var(--white); border: var(--border); border-radius: 999px; box-shadow: 2px 3px 0 var(--ink);
  font-weight: 700; font-size: 0.9rem; cursor: pointer; transition: transform var(--dur-fast) var(--ease-spring);
}
@media (hover: hover) and (pointer: fine) { .shuffle-btn:hover { transform: rotate(-4deg); } }
.shuffle-btn:active { transform: scale(var(--press-scale)); }

/* click-to-stamp doodles */
.stamp { position: absolute; z-index: 1; width: 46px; height: 46px; pointer-events: none; overflow: visible; translate: -50% -50%; animation: stamp-in var(--dur-slow) var(--ease-spring) forwards, stamp-out var(--dur-slow) var(--ease-exit) 2.2s forwards; }
@keyframes stamp-in { from { opacity: 0; transform: scale(0.2) rotate(-40deg); } to { opacity: 1; transform: scale(1) rotate(var(--r)); } }
@keyframes stamp-out { to { opacity: 0; transform: scale(0.6) rotate(var(--r)) translateY(-10px); } }

/* ---------- Marquee ---------- */
.marquee { position: relative; display: flex; align-items: center; background: var(--ink); color: var(--paper); border-block: var(--border); transform: rotate(-1.5deg); margin: 0 -20px; overflow: hidden; }
.marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.marquee.is-paused .marquee-track { animation-play-state: paused; }
.marquee-list { display: flex; gap: 32px; padding: 18px 16px; margin: 0; list-style: none; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.6rem); white-space: nowrap; letter-spacing: -0.02em; }
.marquee-list li:nth-child(4n+1) { color: var(--butter); }
.marquee-list li:nth-child(4n+3) { color: var(--pink); }
.marquee-list li:nth-child(even) { color: var(--mint); }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee-pause {
  position: absolute; right: 36px; display: grid; place-items: center; width: 44px; height: 44px;
  background: var(--paper); color: var(--ink); border: var(--border); border-radius: 50%; cursor: pointer; transform: rotate(1.5deg);
}
.pause-icon { width: 12px; height: 14px; border-inline: 4px solid var(--ink); }
.marquee-pause[aria-pressed="true"] .pause-icon { width: 0; height: 0; border-inline: 0; border-block: 8px solid transparent; border-left: 13px solid var(--ink); margin-left: 4px; }

/* ---------- Sections ---------- */
.section { padding: clamp(80px, 12vw, 150px) clamp(16px, 5vw, 64px); max-width: 1240px; margin: 0 auto; }
.section-head { text-align: center; max-width: 760px; margin: 0 auto clamp(40px, 6vw, 72px); }
.section-title { font-size: clamp(2.3rem, 6vw, 4.4rem); font-weight: 800; }
.section-sub { color: var(--ink-soft); margin-top: 0.6em; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; margin-bottom: 1em; padding: 6px 14px; border: var(--border); border-radius: 999px; background: var(--white); }
.eyebrow-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--tomato); border: 2px solid var(--ink); }

.circled, .scribble { position: relative; display: inline-block; white-space: nowrap; }
.circled svg { position: absolute; left: -8%; top: -18%; width: 116%; height: 136%; overflow: visible; pointer-events: none; }
.circled use { stroke: var(--tomato); stroke-width: 3; fill: none; vector-effect: non-scaling-stroke; }
.scribble svg { position: absolute; left: 0; bottom: -0.2em; width: 100%; height: 0.3em; overflow: visible; }
.scribble use { stroke: var(--tomato); stroke-width: 4; fill: none; vector-effect: non-scaling-stroke; }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 7vw, 100px); align-items: center; }
.about-copy p { font-size: 1.12rem; color: var(--ink-soft); max-width: 60ch; }
.about-copy .section-title { margin-bottom: 0.6em; }
.polaroid-wrap { position: relative; justify-self: center; --r: -4deg; }
.polaroid { position: relative; margin: 0; width: min(360px, 80vw); padding: 16px 16px 12px; background: var(--white); border: var(--border); box-shadow: var(--shadow-hard-lg); transition: transform var(--dur-slow) var(--ease-spring); }
@media (hover: hover) and (pointer: fine) { .polaroid:hover { transform: rotate(5deg) scale(1.02); } }
.portrait { aspect-ratio: 240 / 260; border: 2px solid var(--ink); overflow: hidden; }
.portrait svg { width: 100%; height: 100%; }
.polaroid figcaption { text-align: center; padding-top: 10px; font-size: 1.35rem; }
.blink { transform-box: fill-box; transform-origin: center; animation: blink 5s infinite; }
@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.tape { position: absolute; width: 96px; height: 30px; background: color-mix(in srgb, var(--butter) 70%, transparent); border: 1.5px dashed rgba(29, 26, 43, 0.35); z-index: 2; }
.tape--tl { left: -26px; top: 6px; transform: rotate(-38deg); }
.tape--tr { right: -26px; top: 6px; transform: rotate(38deg); background: color-mix(in srgb, var(--pink) 70%, transparent); }
.doodle--about-star { position: absolute; right: -30px; bottom: -24px; width: 70px; height: 70px; color: var(--butter); }
.doodle--about-star use { fill: currentColor; }

.sticky-notes { display: flex; flex-wrap: wrap; gap: 16px; padding: 0; margin: 28px 0 0; list-style: none; }
.note { flex: 1 1 160px; padding: 16px; border: var(--border); border-radius: 4px 4px 16px 4px; box-shadow: 3px 4px 0 var(--ink); font-size: 0.98rem; line-height: 1.4; transition: transform var(--dur-base) var(--ease-spring); }
.note strong { display: block; font-family: var(--font-hand); font-size: 1.45rem; font-weight: 700; line-height: 1.1; margin-bottom: 4px; }
@media (hover: hover) and (pointer: fine) { .note.is-in:hover { transform: rotate(0deg) translateY(var(--lift)) scale(1.03); } }

@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- Flip cards ---------- */
.flip-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; list-style: none; margin: 0; padding: 0; }
.flip {
  display: block; width: 100%; height: 280px; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1000px; text-align: left;
  transform: rotate(var(--r)); transition: transform var(--dur-base) var(--ease-spring);
}
@media (hover: hover) and (pointer: fine) { .flip:hover { transform: rotate(0deg) translateY(var(--lift)); } }
.flip:active { transform: scale(var(--press-scale)); }
.flip:focus-visible { border-radius: var(--radius); }
.flip-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform var(--dur-slower) var(--ease-spring); }
.flip[aria-pressed="true"] .flip-inner { transform: rotateY(180deg); }
.flip-face {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px;
  padding: 24px; border: var(--border); border-radius: var(--radius); box-shadow: var(--shadow-hard);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.flip-front { background: var(--tint); }
.flip-back { background: var(--ink); color: var(--paper); transform: rotateY(180deg); }
.flip-face small { font-family: var(--font-hand); font-size: 1.3rem; opacity: 0.85; }
.flip-front strong { font-family: var(--font-display); font-size: 1.9rem; font-weight: 800; line-height: 1; }
.flip-back strong { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; line-height: 1.2; }
.flip-back em { color: var(--butter); }
.flip-icon { position: absolute; top: 20px; right: 20px; width: 56px; height: 56px; color: var(--white); overflow: visible; transition: transform var(--dur-slow) var(--ease-spring); }
@media (hover: hover) and (pointer: fine) { .flip:hover .flip-icon { transform: rotate(14deg) scale(1.1); } }
/* reduced motion: crossfade instead of a 3D spin */
@media (prefers-reduced-motion: reduce) {
  .flip-inner { transform: none !important; }
  .flip-back { transform: none; opacity: 0; transition: opacity var(--dur-base) var(--ease-standard); }
  .flip[aria-pressed="true"] .flip-back { opacity: 1; }
}
:root[data-calm="on"] .flip-inner { transform: none !important; }
:root[data-calm="on"] .flip-back { transform: none; opacity: 0; transition: opacity var(--dur-base) var(--ease-standard); }
:root[data-calm="on"] .flip[aria-pressed="true"] .flip-back { opacity: 1; }

/* ---------- Work ---------- */
.work-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px); list-style: none; margin: 0; padding: 0; }
.project-link {
  position: relative; display: block; height: 100%; text-decoration: none; background: var(--white);
  border: var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-hard-lg); padding: 14px;
  transition: transform var(--dur-base) var(--ease-spring), box-shadow var(--dur-base) var(--ease-standard);
}
.project-link { transform: rotate(var(--r)); }
.js .project.reveal { transform: translateY(var(--dist-md)); }
.js .project.reveal.is-in { transform: none; }
@media (hover: hover) and (pointer: fine) {
  .project .project-link:hover { transform: rotate(0deg) translateY(-8px); box-shadow: 10px 14px 0 var(--ink); }
  .project-link:hover .mock { transform: translateY(-10px) rotate(-3deg); }
  .project-link:hover .project-doodle { transform: rotate(40deg) scale(1.2); }
  .project-link:hover .project-cta span { transform: translateX(6px); }
}
.project-link:active { transform: scale(0.98) !important; }
.tape--top { left: 50%; top: -14px; transform: translateX(-50%) rotate(-3deg); width: 110px; }
.project-art { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 11; background: var(--tint); border: var(--border); border-radius: calc(var(--radius-lg) - 10px); overflow: hidden; }
.project-art::before { content: ""; position: absolute; inset: 0; background-image: radial-gradient(rgba(29, 26, 43, 0.18) 1.4px, transparent 1.5px); background-size: 18px 18px; }
.project-doodle { position: absolute; right: 8%; top: 10%; width: 64px; height: 64px; overflow: visible; transition: transform var(--dur-slow) var(--ease-spring); }
.project-meta { padding: 20px 10px 8px; }
.project-meta h3 { font-size: clamp(1.5rem, 2.8vw, 2rem); margin-bottom: 0.35em; }
.project-meta p { color: var(--ink-soft); }
.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px !important; }
.project-tags span { font-size: 0.8rem; font-weight: 700; padding: 4px 10px; border: 2px solid var(--ink); border-radius: 999px; color: var(--ink); background: var(--paper); }
.project-cta { font-family: var(--font-display); font-weight: 800; display: inline-flex; gap: 6px; border-bottom: 3px solid var(--tomato); }
.project-cta span { display: inline-block; transition: transform var(--dur-base) var(--ease-spring); }

/* mini UI mocks drawn with CSS */
.mock { position: relative; z-index: 1; background: var(--white); border: var(--border); box-shadow: var(--shadow-hard); transition: transform var(--dur-slow) var(--ease-spring); }
.mock--phone { width: 38%; aspect-ratio: 9 / 16; max-height: 86%; border-radius: 18px; padding: 14px 10px; display: flex; flex-direction: column; gap: 8px; translate: 0 18%; }
.mock-bar { height: 8px; width: 40%; border-radius: 9px; background: var(--ink); margin: 0 auto 6px; }
.mock-line { height: 8px; border-radius: 8px; background: var(--paper-2); border: 1.5px solid var(--ink); }
.w80 { width: 80%; } .w70 { width: 70%; } .w60 { width: 60%; } .w50 { width: 50%; }
.mock-chip { align-self: flex-start; font-size: 0.6rem; font-weight: 800; padding: 2px 8px; border: 1.5px solid var(--ink); border-radius: 99px; background: var(--butter); }
.mock-btn { margin-top: auto; height: 22px; border-radius: 99px; background: var(--ink); }
.mock-face { font-size: 1.8rem; text-align: center; }
.mock-dots { display: flex; justify-content: space-between; }
.mock-dots i { width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid var(--ink); }
.mock-dots i:nth-child(3) { background: var(--mint); }
.mock-map { height: 45%; border-radius: 10px; border: 1.5px solid var(--ink); background: linear-gradient(135deg, var(--mint) 0 30%, var(--sky) 30% 55%, var(--butter) 55%); }
.mock--desk { width: 74%; aspect-ratio: 16 / 10; border-radius: 12px; display: flex; gap: 10px; padding: 10px; translate: 0 12%; }
.mock-side { width: 22%; border-radius: 8px; background: var(--paper-2); border: 1.5px solid var(--ink); }
.mock-cards { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mock-cards i { border-radius: 8px; border: 1.5px solid var(--ink); }
.mock-cards i:nth-child(1) { background: var(--pink); } .mock-cards i:nth-child(2) { background: var(--sky); } .mock-cards i:nth-child(3) { background: var(--mint); }

@media (max-width: 760px) { .work-grid { grid-template-columns: 1fr; } }

/* ---------- Process ---------- */
.process-wrap { position: relative; max-width: 900px; margin: 0 auto; }
.process-path { position: absolute; left: 50%; top: 0; width: 120px; height: 100%; transform: translateX(-50%); overflow: visible; }
.process-path path { fill: none; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.process-path-bg { stroke: rgba(29, 26, 43, 0.22); stroke-width: 4; stroke-dasharray: 0.004 0.012; }
.process-path-ink { stroke: var(--tomato); stroke-width: 6; }
/* Reveal the ink top-down with a clip. A pathLength dash can't be used here: with
   non-scaling-stroke on a stretched SVG, browsers size the dash in unstretched
   units, so the line stopped short of the last step. */
.process-path--ink { clip-path: inset(0 -40px calc(var(--progress, 1) * (100% + 8px) - 8px) -40px); }
.steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 7vw, 80px); }
.step { display: flex; gap: 18px; align-items: flex-start; width: calc(50% - 70px); background: var(--white); border: var(--border); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow-hard); }
.step:nth-child(odd) { justify-self: start; --r: -1.5deg; }
.step:nth-child(even) { justify-self: end; --r: 1.5deg; }
.step h3 { font-size: 1.45rem; margin-bottom: 0.3em; }
.step p { margin: 0; color: var(--ink-soft); }
.step-num { flex: none; display: grid; place-items: center; width: 48px; height: 48px; border: var(--border); border-radius: 50%; font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; }
@media (max-width: 760px) {
  .process-path { left: 24px; width: 40px; transform: none; }
  .step { width: auto; margin-left: 56px; }
}

/* ---------- Contact ---------- */
.contact-card { position: relative; text-align: center; padding: clamp(48px, 8vw, 96px) clamp(20px, 5vw, 64px); background: var(--butter); border: var(--border); border-radius: 40px; box-shadow: 10px 12px 0 var(--ink); overflow: hidden; }
.contact-card::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(-45deg, transparent 0 22px, rgba(255, 255, 255, 0.35) 22px 26px); pointer-events: none; }
.contact-card > * { position: relative; }
.contact-kicker { font-size: 1.8rem; margin-bottom: 0.2em; }
.contact-title { font-size: clamp(2.2rem, 6.5vw, 5rem); font-weight: 800; margin-bottom: 0.4em; }
.contact-title em { color: var(--tomato); -webkit-text-stroke: 1.5px var(--ink); paint-order: stroke fill; }
.contact-sub { max-width: 52ch; margin: 0 auto 2em; font-size: 1.15rem; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 2em; }
.contact-actions .btn { overflow-wrap: anywhere; }
.socials { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; list-style: none; padding: 0; margin: 0; }
.social { display: inline-block; padding: 8px 16px; min-height: 44px; line-height: 24px; border: var(--border); border-radius: 999px; font-weight: 700; text-decoration: none; box-shadow: 2px 3px 0 var(--ink); transition: transform var(--dur-fast) var(--ease-spring); }
@media (hover: hover) and (pointer: fine) {
  .socials li:nth-child(odd) .social:hover { transform: rotate(-6deg) translateY(-3px); }
  .socials li:nth-child(even) .social:hover { transform: rotate(6deg) translateY(-3px); }
}
.social:active { transform: scale(var(--press-scale)); }
.doodle--contact-a { position: absolute; left: 6%; top: 12%; width: 70px; height: 70px; }
.doodle--contact-b { position: absolute; right: 7%; bottom: 14%; width: 60px; height: 60px; }
.doodle--contact-a use, .doodle--contact-b use { fill: currentColor; stroke: var(--ink); }
.contact-card .doodle { animation: float 7s ease-in-out infinite; }
.contact-card .doodle--contact-b { animation-delay: -3s; }
@media (max-width: 640px) { .doodle--contact-a, .doodle--contact-b { width: 40px; height: 40px; } }

/* ---------- Footer ---------- */
.footer { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 40px clamp(16px, 5vw, 64px) 56px; max-width: 1240px; margin: 0 auto; }
.footer > p:first-child { margin: 0; color: var(--ink-soft); font-weight: 500; }
.mascot { position: relative; padding: 0; border: 0; background: none; cursor: pointer; }
.mascot-body {
  position: relative; display: inline-flex; gap: 5px; justify-content: center; align-items: center; flex-wrap: wrap;
  width: 76px; height: 68px; padding-top: 6px; background: var(--pink); border: var(--border);
  border-radius: 55% 45% 40% 60% / 60% 55% 45% 40%; box-shadow: 3px 4px 0 var(--ink);
  transition: transform var(--dur-base) var(--ease-spring);
}
.mascot-body .eye { width: 18px; height: 18px; }
.mascot-body .pupil { width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; }
.mascot-mouth { flex-basis: 100%; height: 0; display: flex; justify-content: center; }
.mascot-mouth::after { content: ""; width: 14px; height: 7px; margin-top: -10px; border: 2.5px solid var(--ink); border-top: 0; border-radius: 0 0 14px 14px; }
@media (hover: hover) and (pointer: fine) { .mascot:hover .mascot-body { transform: rotate(-8deg) translateY(-4px); } }
.mascot:active .mascot-body { transform: scale(0.9) rotate(6deg); }
.mascot.is-bounce .mascot-body { animation: bounce var(--dur-slow) var(--ease-spring); }
@keyframes bounce { 0% { transform: none; } 40% { transform: translateY(-18px) rotate(-10deg) scale(1.05, 0.95); } 100% { transform: none; } }
.mascot-bubble {
  position: absolute; right: clamp(16px, 5vw, 64px); bottom: 120px; max-width: min(280px, 80vw); margin: 0;
  padding: 10px 16px; background: var(--white); border: var(--border); border-radius: 18px 18px 4px 18px; box-shadow: 3px 4px 0 var(--ink);
  font-size: 1.35rem; transform-origin: bottom right;
  transition: opacity var(--dur-base) var(--ease-enter), transform var(--dur-base) var(--ease-spring);
}
.mascot-bubble.is-pop { animation: pop var(--dur-slow) var(--ease-spring); }
@keyframes pop { from { transform: scale(0.7) rotate(4deg); opacity: 0.4; } to { transform: none; opacity: 1; } }

/* ---------- Toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; z-index: 90; padding: 12px 20px;
  background: var(--ink); color: var(--paper); border-radius: 999px; font-weight: 700; box-shadow: 4px 5px 0 var(--pink);
  transform: translate(-50%, calc(100% + 40px)); opacity: 0; pointer-events: none;
  transition: transform var(--dur-fast) var(--ease-exit), opacity var(--dur-fast) var(--ease-exit);
}
.toast.is-on { transform: translate(-50%, 0); opacity: 1; transition: transform var(--dur-base) var(--ease-spring), opacity var(--dur-base) var(--ease-enter); }

/* ---------- Motion off switches (OS setting or Calm mode) ---------- */
@media (prefers-reduced-motion: reduce) {
  .float, .contact-card .doodle, .blink, .marquee-track { animation: none !important; }
  .marquee-track { flex-wrap: wrap; width: auto; }
  .marquee-list[aria-hidden="true"], .marquee-pause { display: none; }
  .js .char { transform: none; }
  .js.is-loaded .char.wobble, .mascot.is-bounce .mascot-body { animation: none; }
  .stamp { animation: stamp-fade 2.6s linear forwards; }
}
:root[data-calm="on"] .float, :root[data-calm="on"] .contact-card .doodle, :root[data-calm="on"] .blink, :root[data-calm="on"] .marquee-track { animation: none !important; }
:root[data-calm="on"] .marquee-track { flex-wrap: wrap; width: auto; }
:root[data-calm="on"] .marquee-list[aria-hidden="true"], :root[data-calm="on"] .marquee-pause { display: none; }
:root[data-calm="on"] .char { transform: none; }
:root[data-calm="on"] .char.wobble, :root[data-calm="on"] .mascot.is-bounce .mascot-body { animation: none; }
:root[data-calm="on"] .stamp { animation: stamp-fade 2.6s linear forwards; }
@keyframes stamp-fade { 0% { opacity: 0; } 10%, 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- Mobile sticker layout: keep them off the headline ---------- */
@media (max-width: 640px) {
  .hero { padding: 96px 16px 130px; min-height: auto; }
  .hero-title { font-size: clamp(4.2rem, 23vw, 7rem); }
  .sticker:nth-child(1) { --x: 3% !important; --y: 2% !important; }
  .sticker:nth-child(2) { --x: 76% !important; --y: 1% !important; }
  .sticker:nth-child(3) { --x: 3% !important; --y: 71% !important; }
  .sticker:nth-child(4) { --x: 84% !important; --y: 66% !important; }
  .sticker:nth-child(5) { --x: 50% !important; --y: 94% !important; }
  .sticker:nth-child(6) { display: none; }
  .sticker:nth-child(7) { display: none; }
  .sticker:nth-child(8) { --x: 3% !important; --y: 94% !important; }
  .sticker:nth-child(9) { --x: 56% !important; --y: 2% !important; }
  .shuffle-btn { bottom: auto; top: 58px; right: 16px; display: none; }
  .doodle--spiral { --x: 82% !important; --y: 30% !important; }
}

/* =========================================================
   CMS-driven sections: testimonials, resume, covers
   ========================================================= */
.c-white { color: var(--white); }
.section-lede { font-size: 1.15rem; color: var(--ink-soft); max-width: 56ch; margin: 1em auto 0; }
img.portrait { display: block; width: 100%; object-fit: cover; }
.project-cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-spring); }
@media (hover: hover) and (pointer: fine) { .project-link:hover .project-cover { transform: scale(1.04) rotate(-1deg); } }

/* Testimonials */
.quote-grid { display: grid; justify-content: center; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 420px)); gap: clamp(24px, 4vw, 40px); list-style: none; margin: 0; padding: 0; }
.quote-card { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 20px; padding: 36px 26px 24px; border: var(--border); border-radius: 6px 6px 28px 6px; box-shadow: var(--shadow-hard-lg); }
.quote-card blockquote { margin: 0; }
.quote-card blockquote p { margin: 0; font-family: var(--font-serif); font-size: clamp(1.3rem, 2.2vw, 1.6rem); line-height: 1.3; }
.quote-who { display: flex; align-items: center; gap: 12px; }
.quote-who p { margin: 0; line-height: 1.3; }
.quote-who span { color: var(--ink-soft); font-size: 0.92rem; }
.quote-avatar { flex: none; width: 52px; height: 52px; border: var(--border); border-radius: 50%; object-fit: cover; background: var(--white); }
.quote-avatar--initials { display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; }

/* Resume timeline (homepage peek + full page) */
.timeline { position: relative; list-style: none; margin: 0 auto; padding: 0 0 0 36px; max-width: 760px; border-left: 2.5px dashed var(--ink); }
.timeline-item { position: relative; padding: 0 0 32px; }
.timeline-dot { position: absolute; left: -51px; top: 4px; width: 28px; height: 28px; border: var(--border); border-radius: 50%; box-shadow: 2px 3px 0 var(--ink); }
.timeline-dates { margin: 0 0 2px; color: var(--ink-soft); font-size: 1.3rem; }
.timeline-item h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
.timeline-item h3 span { font-family: var(--font-body); font-weight: 500; font-size: 0.75em; color: var(--ink-soft); letter-spacing: 0; }
.timeline-item ul { margin: 10px 0 0; padding-left: 1.1em; color: var(--ink-soft); }
.timeline-item li + li { margin-top: 6px; }
.resume-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 24px; }

.resume-page { max-width: 1100px; }
.resume-page .resume-actions { justify-content: flex-start; margin: 0 0 clamp(40px, 6vw, 72px); }
.resume-page .section-lede { margin: 0 0 1em; }
.resume-title { margin: 0.2em 0 0.3em; font-size: clamp(2.6rem, 7vw, 5rem); }
.resume-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.resume-h2 { font-size: 2rem; margin-bottom: 18px; }
.timeline--full { margin: 0; }
.resume-side { display: grid; gap: 24px; }
.resume-card { padding: 22px; border: var(--border); border-radius: 6px 6px 22px 6px; box-shadow: var(--shadow-hard); }
.resume-card .resume-h2 { margin-bottom: 10px; }
.resume-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.resume-card li strong { display: block; }
.resume-card li span { font-size: 0.92rem; }
.chip-list { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
.chip-list li { padding: 4px 12px; background: var(--white); border: 2px solid var(--ink); border-radius: 999px; font-weight: 700; font-size: 0.9rem; }
@media (max-width: 860px) { .resume-grid { grid-template-columns: 1fr; } }