/* ============================================================
   Playful layer — v2 "Toy box"
   Loaded AFTER styles.css; overrides the Nordic base.
   Flavours: html[data-flavor] = sunny | candy | arcade
   Motion gated on body.playful-motion + prefers-reduced-motion.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400..800&display=swap');

:root {
  --display: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
  /* body copy joins the display family — its optical-size axis keeps
     small text in the calmer, readable text cut */
  --sans: 'Bricolage Grotesque', 'Schibsted Grotesk', system-ui, sans-serif;
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* the tilted strip overshoots the viewport edge by design — clip it */
html { overflow-x: clip; }

/* ============================================================
   FLAVOUR PALETTES — pops shared across themes,
   papers/feature per flavour × theme
   ============================================================ */

/* ---- SUNNY (default) ---- */
[data-flavor="sunny"] {
  --pop-1: oklch(0.62 0.19 33);    /* tomato */
  --pop-2: oklch(0.55 0.16 262);   /* cobalt */
  --pop-3: oklch(0.80 0.15 88);    /* sunflower */
  --pop-4: oklch(0.64 0.13 148);   /* leaf */
  --pop-5: oklch(0.68 0.16 350);   /* bubblegum */
  --on-pop: oklch(0.975 0.015 90);
  --on-pop-bright: oklch(0.235 0.025 55); /* text on sunflower-ish pops */
}
[data-flavor="sunny"][data-theme="light"] {
  --paper:   oklch(0.965 0.025 90);
  --paper-2: oklch(0.935 0.030 88);
  --paper-3: oklch(0.905 0.035 86);
  --line:      oklch(0.835 0.040 85);
  --line-soft: oklch(0.885 0.032 87);
  --ink:   oklch(0.240 0.025 55);
  --ink-2: oklch(0.380 0.025 55);
  --muted: oklch(0.480 0.025 58);
  --faint: oklch(0.580 0.022 60);
  --feature-bg:     oklch(0.460 0.160 262);
  --feature-fg:     oklch(0.975 0.015 90);
  --feature-muted:  oklch(0.860 0.045 262);
  --feature-line:   oklch(0.600 0.120 262);
  --feature-accent: oklch(0.820 0.140 88);
}
[data-flavor="sunny"][data-theme="dark"] {
  --paper:   oklch(0.230 0.025 55);
  --paper-2: oklch(0.270 0.028 56);
  --paper-3: oklch(0.310 0.030 58);
  --line:      oklch(0.390 0.032 60);
  --line-soft: oklch(0.330 0.028 58);
  --ink:   oklch(0.950 0.018 85);
  --ink-2: oklch(0.840 0.020 80);
  --muted: oklch(0.715 0.022 75);
  --faint: oklch(0.615 0.020 70);
  --feature-bg:     oklch(0.330 0.120 262);
  --feature-fg:     oklch(0.965 0.012 90);
  --feature-muted:  oklch(0.820 0.050 262);
  --feature-line:   oklch(0.480 0.100 262);
  --feature-accent: oklch(0.840 0.140 88);
}

/* ---- CANDY ---- */
[data-flavor="candy"] {
  --pop-1: oklch(0.66 0.21 0);     /* hot pink */
  --pop-2: oklch(0.62 0.15 300);   /* lilac */
  --pop-3: oklch(0.79 0.12 55);    /* peach */
  --pop-4: oklch(0.78 0.12 168);   /* mint */
  --pop-5: oklch(0.70 0.11 235);   /* sky */
  --on-pop: oklch(0.975 0.012 350);
  --on-pop-bright: oklch(0.260 0.040 330);
}
[data-flavor="candy"][data-theme="light"] {
  --paper:   oklch(0.965 0.020 350);
  --paper-2: oklch(0.940 0.026 348);
  --paper-3: oklch(0.910 0.032 346);
  --line:      oklch(0.845 0.038 345);
  --line-soft: oklch(0.895 0.028 348);
  --ink:   oklch(0.260 0.040 330);
  --ink-2: oklch(0.400 0.038 330);
  --muted: oklch(0.500 0.035 332);
  --faint: oklch(0.600 0.030 335);
  --feature-bg:     oklch(0.560 0.200 0);
  --feature-fg:     oklch(0.975 0.012 350);
  --feature-muted:  oklch(0.880 0.045 0);
  --feature-line:   oklch(0.680 0.150 0);
  --feature-accent: oklch(0.840 0.100 168);
}
[data-flavor="candy"][data-theme="dark"] {
  --paper:   oklch(0.235 0.045 330);
  --paper-2: oklch(0.275 0.050 330);
  --paper-3: oklch(0.315 0.052 332);
  --line:      oklch(0.400 0.055 332);
  --line-soft: oklch(0.335 0.048 330);
  --ink:   oklch(0.955 0.014 350);
  --ink-2: oklch(0.845 0.025 345);
  --muted: oklch(0.720 0.035 340);
  --faint: oklch(0.620 0.035 338);
  --feature-bg:     oklch(0.360 0.130 345);
  --feature-fg:     oklch(0.970 0.012 350);
  --feature-muted:  oklch(0.830 0.055 350);
  --feature-line:   oklch(0.500 0.110 348);
  --feature-accent: oklch(0.820 0.110 168);
}

/* ---- ARCADE ---- */
[data-flavor="arcade"] {
  --pop-1: oklch(0.84 0.21 135);   /* lime */
  --pop-2: oklch(0.78 0.13 215);   /* cyan */
  --pop-3: oklch(0.64 0.23 340);   /* magenta */
  --pop-4: oklch(0.83 0.15 82);    /* amber */
  --pop-5: oklch(0.62 0.19 290);   /* violet */
  --on-pop: oklch(0.205 0.045 268);
  --on-pop-bright: oklch(0.205 0.045 268);
}
[data-flavor="arcade"][data-theme="light"] {
  --paper:   oklch(0.960 0.012 240);
  --paper-2: oklch(0.932 0.016 242);
  --paper-3: oklch(0.902 0.020 244);
  --line:      oklch(0.830 0.028 248);
  --line-soft: oklch(0.885 0.020 244);
  --ink:   oklch(0.230 0.045 268);
  --ink-2: oklch(0.380 0.042 266);
  --muted: oklch(0.480 0.040 264);
  --faint: oklch(0.585 0.035 262);
  --feature-bg:     oklch(0.205 0.050 268);
  --feature-fg:     oklch(0.960 0.012 240);
  --feature-muted:  oklch(0.720 0.040 255);
  --feature-line:   oklch(0.380 0.055 265);
  --feature-accent: oklch(0.840 0.210 135);
}
[data-flavor="arcade"][data-theme="dark"] {
  --paper:   oklch(0.205 0.045 268);
  --paper-2: oklch(0.245 0.050 268);
  --paper-3: oklch(0.285 0.055 268);
  --line:      oklch(0.380 0.060 268);
  --line-soft: oklch(0.310 0.052 268);
  --ink:   oklch(0.945 0.015 240);
  --ink-2: oklch(0.835 0.025 245);
  --muted: oklch(0.710 0.035 250);
  --faint: oklch(0.610 0.038 255);
  --feature-bg:     oklch(0.155 0.045 270);
  --feature-fg:     oklch(0.950 0.012 240);
  --feature-muted:  oklch(0.700 0.045 255);
  --feature-line:   oklch(0.340 0.060 268);
  --feature-accent: oklch(0.840 0.210 135);
}

/* arcade glows in dark; text-on-pop flips bright */
[data-flavor="arcade"][data-theme="dark"] .eyebrow { box-shadow: 0 0 22px color-mix(in oklab, var(--pop, var(--pop-1)) 38%, transparent); }

/* ============================================================
   DARK MODE — pitch black paper + film-grain distortion
   (overrides the flavour papers above; pops stay vivid)
   ============================================================ */
[data-flavor][data-theme="dark"] {
  --paper:   oklch(0.135 0.003 270);
  --paper-2: oklch(0.180 0.005 270);
  --paper-3: oklch(0.220 0.007 270);
  --line:      oklch(0.330 0.010 270);
  --line-soft: oklch(0.255 0.008 270);
}

/* grain overlay — SVG turbulence, blended over everything */
[data-theme="dark"] body::after {
  content: '';
  position: fixed;
  inset: -100%;
  z-index: 3000;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='240' height='240' filter='url(%23g)' opacity='0.55'/></svg>");
  background-size: 240px 240px;
}
@media (prefers-reduced-motion: no-preference) {
  [data-theme="dark"] body.playful-motion::after {
    animation: grain-shift 0.9s steps(4) infinite;
  }
}
@keyframes grain-shift {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(-1.2%, 0.8%); }
  50%  { transform: translate(0.9%, -1.1%); }
  75%  { transform: translate(-0.7%, -0.6%); }
  100% { transform: translate(0, 0); }
}

/* ============================================================
   TYPE — chunky playful display
   ============================================================ */
.display, .hero h1, .section h2, .cs-hero h1, .contact h2 {
  font-family: var(--display);
  font-weight: 750;
  letter-spacing: -0.025em;
}

/* body copy: same family, tuned for reading */
body {
  font-family: var(--sans);
  font-weight: 420;
  font-optical-sizing: auto;
  letter-spacing: 0.004em;
}
body strong { font-weight: 700; }

/* the serif moments join the playful family too */
.serif-lead, .cs-summary > p {
  font-family: var(--display);
  font-weight: 460;
  letter-spacing: -0.012em;
}
.serif-lead em, .cs-summary > p em { font-style: normal; font-weight: 720; }
.work-item .meta h3, .cs-next h3 {
  font-family: var(--display);
  font-weight: 750;
  letter-spacing: -0.022em;
}
.display em, .hero h1 em, .contact h2 em, .section h2 em {
  font-style: normal;
  font-weight: 800;
  color: var(--on-pop);
  background: var(--pop-1);
  display: inline-block;
  padding: 0.02em 0.18em 0.06em;
  border-radius: 0.22em;
  transform: rotate(-2deg);
  transition: transform 0.45s var(--spring), background 0.4s;
}
[data-flavor="arcade"] .display em, [data-flavor="arcade"] .hero h1 em,
[data-flavor="arcade"] .section h2 em { color: var(--on-pop-bright); }
.hero h1 em:hover { transform: rotate(2deg) scale(1.04); }
/* contact highlight: dark ink chip on the bright field — strong, accessible contrast */
#contact h2 em { background: var(--feature-fg); color: var(--feature-bg); }

::selection { background: var(--pop-3); color: var(--on-pop-bright); }

/* ============================================================
   STICKER EYEBROWS — one pop per section
   ============================================================ */
.eyebrow {
  display: inline-block;
  width: fit-content;
  align-self: flex-start;
  font-family: var(--display);
  font-weight: 700;
  background: var(--pop, var(--pop-1));
  color: var(--on-pop);
  padding: 7px 16px 8px;
  border-radius: 100px;
  transform: rotate(-2.5deg);
  letter-spacing: 0.12em;
  transition: transform 0.45s var(--spring);
}
.eyebrow:hover { transform: rotate(1.5deg) scale(1.06); }
/* eyebrows that carry .reveal themselves get transform:none when revealed — restore the tilt */
.eyebrow.reveal.in { transform: rotate(-2.5deg); }
.eyebrow.reveal.in:hover { transform: rotate(1.5deg) scale(1.06); }
#work .eyebrow       { --pop: var(--pop-1); }
#services .eyebrow   { --pop: var(--pop-2); }
#about .eyebrow      { --pop: var(--pop-4); }
#experience .eyebrow { --pop: var(--pop-5); }
#contact .eyebrow    { --pop: var(--feature-fg); color: var(--feature-bg); }
.cs-hero .eyebrow    { --pop: var(--pop-2); color: var(--on-pop); }
[data-flavor="arcade"] .eyebrow { color: var(--on-pop-bright); }

/* ============================================================
   CHUNKY CONTROLS — fat border + hard offset shadow
   ============================================================ */
.theme-toggle, .nav-toggle, .nav-cta {
  border: 2px solid var(--ink);
  color: var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  background: var(--paper);
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring),
              background 0.3s, color 0.3s;
}
.theme-toggle:hover, .nav-toggle:hover {
  border-color: var(--ink); color: var(--ink);
  transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink);
  background: var(--pop-3); 
}
.theme-toggle:hover { color: var(--on-pop-bright); }
.nav-toggle:hover { color: var(--on-pop-bright); }
.theme-toggle:active, .nav-toggle:active, .nav-cta:active {
  transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink);
}
.nav-cta {
  border-radius: 100px; padding: 9px 20px; font-weight: 700; white-space: nowrap;
  background: var(--pop-1); color: var(--on-pop); border-color: var(--ink);
}
[data-flavor="arcade"] .nav-cta { color: var(--on-pop-bright); }
.nav-cta:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }

.brand { font-family: var(--display); font-weight: 750; }

/* nav links speak the display voice — big & jaunty at the top of the page,
   then shrink & straighten into a tidy bar once you start scrolling */
.nav-links { gap: 30px; transition: gap .4s var(--spring); }
.nav-links a {
  font-family: var(--display);
  font-weight: 640;
  font-size: 20px;
  letter-spacing: 0.004em;
  transform-origin: center bottom;
  transition: font-size .4s var(--spring), transform .4s var(--spring), color .25s var(--ease);
}
/* playful resting tilt — each link leans a different way */
.nav-links a:nth-child(1) { transform: rotate(-3deg); }
.nav-links a:nth-child(2) { transform: rotate(2deg); }
.nav-links a:nth-child(3) { transform: rotate(-1.5deg); }
.nav-links a:nth-child(4) { transform: rotate(2.5deg); }
.nav-links a:hover { transform: rotate(0) translateY(-2px) scale(1.04); }

/* sticky/condensed state — calm down to the tidy size */
.nav.scrolled .nav-links { gap: 38px; }
.nav.scrolled .nav-links a { font-size: 14.5px; transform: rotate(0); }
.nav.scrolled .nav-links a:hover { transform: translateY(-1px) scale(1.03); }

.nav-links a::after { height: 2px; border-radius: 2px; background: var(--pop-1); }
.nav-links a:nth-child(2)::after { background: var(--pop-4); } /* About */
.nav-links a:nth-child(3)::after { background: var(--pop-2); } /* Services */
.nav-links a:nth-child(4)::after { background: var(--pop-5); }
.brand .mark {
  width: 12px; height: 12px; border-radius: 4px;
  background: var(--pop-1);
  transition: transform 0.45s var(--spring), background 0.3s;
  cursor: pointer;
}
.brand:hover .mark { transform: rotate(135deg) scale(1.25); border-radius: 50% 50% 50% 4px; }

/* ============================================================
   WORK LIST — pop rows
   ============================================================ */
.work-item { --pop: var(--pop-1); }
.work-item:nth-child(2) { --pop: var(--pop-2); }
.work-item:nth-child(3) { --pop: var(--pop-4); }
.work-item:nth-child(4) { --pop: var(--pop-5); }
.work-item {
  border-radius: 16px;
  padding-inline: 18px;
  margin-inline: -18px;
  transition: background 0.35s var(--ease);
}
.work-item:hover { background: color-mix(in oklab, var(--pop) 12%, var(--paper)); }

/* playful row separators — a hand-drawn squiggle in each row's own pop colour,
   only BETWEEN rows so nothing sits under the section headline */
.work-item + .work-item::before {
  content: "";
  position: absolute;
  top: -1px; left: 18px; right: 18px;
  height: 6px;
  background: var(--pop);
  opacity: 0.78;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='6'%20viewBox='0%200%20120%206'%3E%3Cpath%20d='M0%203%20C10%202.5%2020%203.5%2030%203%20S50%202.6%2060%203.1%20S90%203.5%20120%202.8'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-dasharray='11%201.3'/%3E%3Cpath%20d='M0%203.4%20C12%203%2024%203.8%2036%203.3%20S60%203%2072%203.5%20S100%203.8%20120%203.2'%20fill='none'%20stroke='black'%20stroke-width='0.7'%20stroke-linecap='round'%20stroke-dasharray='3%205'%20opacity='0.6'/%3E%3C/svg%3E") repeat-x left center / 120px 6px;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='6'%20viewBox='0%200%20120%206'%3E%3Cpath%20d='M0%203%20C10%202.5%2020%203.5%2030%203%20S50%202.6%2060%203.1%20S90%203.5%20120%202.8'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-dasharray='11%201.3'/%3E%3Cpath%20d='M0%203.4%20C12%203%2024%203.8%2036%203.3%20S60%203%2072%203.5%20S100%203.8%20120%203.2'%20fill='none'%20stroke='black'%20stroke-width='0.7'%20stroke-linecap='round'%20stroke-dasharray='3%205'%20opacity='0.6'/%3E%3C/svg%3E") repeat-x left center / 120px 6px;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--spring);
}
/* on hover the squiggle wakes up a touch */
.work-item:hover + .work-item::before,
.work-item:hover::before { opacity: 1; transform: translateX(4px); }
.work-item .idx {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 2px solid var(--ink); border-radius: 50%;
  font-weight: 700; font-family: var(--display);
  transition: transform 0.45s var(--spring), background 0.3s, color 0.3s;
}
.work-item:hover .idx {
  background: var(--pop); color: var(--on-pop);
  border-color: var(--ink);
  transform: rotate(-10deg) scale(1.12);
}
[data-flavor="arcade"] .work-item:hover .idx { color: var(--on-pop-bright); }
.work-item .meta h3 { transition: transform 0.45s var(--spring); }
.work-item:hover .meta h3 { transform: translateX(8px) rotate(-0.5deg); }
.work-item .go {
  border: 2px solid var(--ink); border-radius: 50%;
  right: 34px;                       /* breathe — off the container edge */
  width: 44px; height: 44px; display: grid; place-items: center;
  transition: background 0.3s, color 0.3s, border-color 0.3s, opacity 0.3s;
}
.work-item:hover .go {
  background: var(--pop); color: var(--on-pop);
  animation: go-roll-in 0.45s cubic-bezier(0.22, 0.9, 0.3, 1) forwards;
}
[data-flavor="arcade"] .work-item:hover .go { color: var(--on-pop-bright); }
/* rolls in like a coin and settles upright — no bounce */
@keyframes go-roll-in {
  0%   { opacity: 0; transform: translateY(-50%) translateX(18px) rotate(70deg) scale(0.7); }
  100% { opacity: 1; transform: translateY(-50%) translateX(0) scale(1.06); }
}
.work-item .tags span {
  border: 1.5px solid var(--line);
  border-radius: 100px; padding: 3px 12px;
  transition: transform 0.4s var(--spring), border-color 0.3s;
}
.work-item:hover .tags span { border-color: var(--ink); }
.work-item:hover .tags span:nth-child(odd) { transform: rotate(-2deg); }
.work-item:hover .tags span:nth-child(even) { transform: rotate(2deg); }

/* ============================================================
   SERVICES — toy cards
   ============================================================ */
/* toy cards stand apart — drop the hairline grid, give them breathing room
   (extra room on the right/bottom so the offset drop-shadow isn't clipped) */
.svc-grid {
  gap: 22px;
  background: none;
  border: 0;
  padding: 2px 7px 7px 2px;
}
.svc { --pop: var(--pop-1); }
.svc:nth-child(2) { --pop: var(--pop-2); }
.svc:nth-child(3) { --pop: var(--pop-4); }
.svc:nth-child(4) { --pop: var(--pop-5); }
.svc:nth-child(5) { --pop: var(--pop-3); }
.svc:nth-child(6) { --pop: var(--pop-1); }
.svc {
  border: 2px solid var(--ink);
  border-radius: 20px;
  background: color-mix(in oklab, var(--pop) 14%, var(--paper));
  box-shadow: 5px 5px 0 var(--ink);
  transition: transform 0.45s var(--spring), box-shadow 0.45s var(--spring), background 0.3s;
}
.svc:hover {
  background: color-mix(in oklab, var(--pop) 22%, var(--paper));
  transform: translate(-4px, -4px) rotate(-0.6deg);
  box-shadow: 9px 9px 0 var(--ink);
}
.svc .num {
  font-family: var(--display); font-style: normal; font-weight: 800;
  color: var(--pop);
  display: inline-block;
  transition: transform 0.35s var(--spring);
}
/* subtler playful tilt — a small nudge, not a spin */
.svc:hover .num { transform: translateY(-2px) rotate(-3deg); }
/* card text reads white on the tinted toy cards */
.svc h3, .svc p { color: #fff; }
.svc .skills span { color: color-mix(in oklab, #fff 78%, var(--pop)); }
.svc .skills span:not(:last-child)::after { color: color-mix(in oklab, #fff 45%, transparent); }
[data-theme="light"] .svc h3 { color: var(--ink); }
[data-theme="light"] .svc p,
[data-theme="light"] .svc .skills span { color: var(--ink-2); }

/* section-head accent words wear the orange chip like the hero “meaningful” —
   white text in every theme/flavor for crisp contrast on the pop fill */
#services .sec-head h2.accent-em em,
#experience .sec-head h2.accent-em em,
[data-theme="light"] #services .sec-head h2.accent-em em,
[data-theme="light"] #experience .sec-head h2.accent-em em {
  color: var(--on-pop);
  background: var(--pop-1);
}
[data-flavor="arcade"] #services .sec-head h2.accent-em em,
[data-flavor="arcade"] #experience .sec-head h2.accent-em em {
  color: var(--on-pop-bright);
}

/* ============================================================
   EXPERIENCE — playful roles + logo peek
   ============================================================ */
.exp-row { --pop: var(--pop-1); }
.exp-row:nth-child(2) { --pop: var(--pop-2); }
.exp-row:nth-child(3) { --pop: var(--pop-4); }
.exp-row:nth-child(4) { --pop: var(--pop-5); }
.exp-row:nth-child(5) { --pop: var(--pop-3); }
.exp-row:nth-child(6) { --pop: var(--pop-2); }
.exp-row .role {
  font-family: var(--display); font-weight: 750; letter-spacing: -0.02em;
  display: inline-block;
  transition: transform 0.45s var(--spring), color 0.3s;
}
.exp-row:hover { background: color-mix(in oklab, var(--pop) 9%, transparent); }
.exp-row:hover .role {
  transform: translateX(8px) rotate(-0.8deg);
  color: color-mix(in oklab, var(--pop) 78%, var(--ink));
}
.exp-row {
  border-radius: 14px;
  padding-inline: 14px; margin-inline: -14px;
  position: relative;
  border-top-color: transparent;          /* drop the plain line — squiggle below replaces it */
  transition: background 0.35s var(--ease);
}
.exp-row:last-child { border-bottom-color: transparent; }
/* playful squiggle separator — same hand-drawn line as Work, in each row's pop colour,
   only BETWEEN rows so nothing sits under the section headline */
.exp-row + .exp-row::before {
  content: "";
  position: absolute;
  top: -1px; left: 14px; right: 14px;
  height: 6px;
  background: var(--pop);
  opacity: 0.78;
  pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='6'%20viewBox='0%200%20120%206'%3E%3Cpath%20d='M0%203%20C10%202.5%2020%203.5%2030%203%20S50%202.6%2060%203.1%20S90%203.5%20120%202.8'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-dasharray='11%201.3'/%3E%3Cpath%20d='M0%203.4%20C12%203%2024%203.8%2036%203.3%20S60%203%2072%203.5%20S100%203.8%20120%203.2'%20fill='none'%20stroke='black'%20stroke-width='0.7'%20stroke-linecap='round'%20stroke-dasharray='3%205'%20opacity='0.6'/%3E%3C/svg%3E") repeat-x left center / 120px 6px;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='120'%20height='6'%20viewBox='0%200%20120%206'%3E%3Cpath%20d='M0%203%20C10%202.5%2020%203.5%2030%203%20S50%202.6%2060%203.1%20S90%203.5%20120%202.8'%20fill='none'%20stroke='black'%20stroke-width='1.6'%20stroke-linecap='round'%20stroke-dasharray='11%201.3'/%3E%3Cpath%20d='M0%203.4%20C12%203%2024%203.8%2036%203.3%20S60%203%2072%203.5%20S100%203.8%20120%203.2'%20fill='none'%20stroke='black'%20stroke-width='0.7'%20stroke-linecap='round'%20stroke-dasharray='3%205'%20opacity='0.6'/%3E%3C/svg%3E") repeat-x left center / 120px 6px;
  transition: opacity 0.35s var(--ease), transform 0.45s var(--spring);
}
.exp-row:hover + .exp-row::before,
.exp-row:hover::before { opacity: 1; transform: translateX(4px); }

/* company logo peeks up on hover */
.org-link::before {
  content: '';
  position: absolute;
  left: 50%; bottom: calc(100% + 10px);
  width: 52px; height: 52px;
  border-radius: 14px;
  background: #fff center / 30px 30px no-repeat;
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  opacity: 0;
  transform: translateX(-50%) rotate(-6deg) scale(0.4);
  transform-origin: bottom center;
  pointer-events: none;
  z-index: 10;
  transition: transform 0.45s var(--spring), opacity 0.25s;
}
.org-link:hover::before { opacity: 1; transform: translateX(-50%) rotate(-6deg) scale(1); }
a.org-link[href*="lego.com"]::before   { background-image: url('https://www.google.com/s2/favicons?domain=lego.com&sz=64'); }
a.org-link[href*="merkle.com"]::before { background-image: url('https://www.google.com/s2/favicons?domain=merkle.com&sz=64'); }
a.org-link[href*="akqa.com"]::before   { background-image: url('https://www.google.com/s2/favicons?domain=akqa.com&sz=64'); }
a.org-link[href*="dr.dk"]::before      { background-image: url('https://www.google.com/s2/favicons?domain=dr.dk&sz=64'); }

/* clearer “this is a link” affordance — colored chip + persistent underline + ↗ */
.exp-row .org-link {
  color: var(--pop);
  font-weight: 640;
  background-image: none;            /* drop the base hover-gradient underline */
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in oklab, var(--pop) 50%, transparent);
  padding: 1px 6px 2px;
  margin-inline: -2px;
  border-radius: 7px;
  white-space: nowrap;
  transition: background 0.25s, color 0.25s, text-decoration-color 0.25s;
}
.exp-row .org-link::after {
  content: '↗';
  font-size: 0.78em; font-weight: 700;
  margin-left: 2px;
  display: inline-block;
  transition: transform 0.3s var(--spring);
}
.exp-row .org-link:hover {
  background: color-mix(in oklab, var(--pop) 16%, transparent);
  color: var(--pop);
  text-decoration-color: var(--pop);
}
.exp-row .org-link:hover::after { transform: translate(2px, -2px); }

/* ============================================================
   CURSOR — multiplayer-style arrow + scribble trail
   ============================================================ */
@media (hover: hover) {
  /* the pointer itself: a collab-tool style arrow, tomato w/ white outline */
  html, body {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 2.5 L20.5 11.7 L13.4 13.5 L10 20.3 Z' fill='%23E2552F' stroke='white' stroke-width='1.6' stroke-linejoin='round'/%3E%3C/svg%3E") 4 2, auto;
  }
  /* interactive things: a playful pointing hand — cobalt with white outline */
  a, button, .work-item, .cs-next, .brand, label, summary {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3E%3Cpath d='M11 14V6.4a1.8 1.8 0 0 1 3.6 0V12.4a1.6 1.6 0 0 1 3.2 0V13.4a1.6 1.6 0 0 1 3.2 0V14.4a1.6 1.6 0 0 1 3.2 0V20c0 3.1-2.1 5.4-5.6 5.4h-2.2c-2 0-3.3-.7-4.5-2.3l-3.4-4.8c-.8-1.2.5-2.6 1.8-1.9l1.7 1Z' fill='%233B5BBF' stroke='white' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") 11 2, pointer;
  }
}

/* the trailing dot: invisible by default — a scribble pops in over links/CTAs */
.cursor, .cursor.hover,
[data-theme="dark"] .cursor, [data-theme="dark"] .cursor.hover {
  width: auto; height: auto;
  background: transparent;
  border-radius: 0;
  mix-blend-mode: normal;
}
.cursor svg {
  display: block;
  width: 28px; height: 28px;
  overflow: visible;
  margin: 12px 0 0 16px;            /* trails just south-east of the arrow */
  animation: scribble-wiggle 1.9s ease-in-out infinite;
}
.cursor svg path {
  fill: none;
  stroke: #fff;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-dasharray: 62 38;          /* a worm of scribble chasing itself */
  animation: scribble-draw 1.4s linear infinite;
  filter: drop-shadow(0 1px 1.5px oklch(0 0 0 / 0.28)); /* keeps white legible on cream */
  transform-box: fill-box; transform-origin: center;
  opacity: 0; scale: 0.3;
  transition: opacity 0.25s, scale 0.45s var(--spring);
}
/* doodle retired — the trailing element stays inert (hand cursor does the talking) */
.cursor.hover svg path { opacity: 0; }
@keyframes scribble-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: -100; }
}
@keyframes scribble-wiggle {
  0%, 100% { transform: rotate(-6deg); }
  50%      { transform: rotate(7deg) translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  .cursor svg, .cursor svg path { animation: none; }
  .cursor svg path { stroke-dasharray: none; }
}

/* ============================================================
   CURTAIN WIPE — page transition (studio-style sweep)
   A solid panel with a curved leading edge sweeps up to cover the
   view, swaps the page while hidden, then continues up and off —
   the playful doodle draws itself, centered, as the loading mark.
   ============================================================ */
.page-wipe {
  position: fixed; inset: 0;
  z-index: 4000;
  pointer-events: none;
  transform: translateY(130%);
  transition: transform 0.6s cubic-bezier(0.7, 0, 0.3, 1);
}
.page-wipe.cover { transform: translateY(0); }
/* arrival: the curtain CONTINUES travelling up and slides off the top — the
   same speed & easing it used coming in from the bottom, so entry and exit
   read as one continuous upward slide rather than a hard cut.
   NB: class is `wipeout`, NOT `reveal` — `.reveal` is the site's scroll-in
   animation class (opacity:0) and would make the curtain vanish instead. */
.page-wipe.cover.wipeout {
  transform: translateY(-135%);
  transition: transform 0.72s cubic-bezier(0.7, 0, 0.3, 1);
}
.page-wipe.instant { transition: none; }
/* destination page paints with the curtain already covering, before JS runs,
   so the hand-off between pages has no white flash */
html.wipe-arriving .page-wipe { transform: translateY(0); transition: none; }

.page-wipe__fill { position: absolute; inset: 0; background: var(--wipe-color, var(--pop-1)); }
.page-wipe__cap {
  position: absolute; left: -8vw; right: -8vw; height: 20vh;
  background: var(--wipe-color, var(--pop-1));
}
.page-wipe__cap--top {
  bottom: 100%;
  border-top-left-radius: 100% 100%;
  border-top-right-radius: 100% 100%;
}
.page-wipe__cap--bottom {
  top: 100%;
  border-bottom-left-radius: 100% 100%;
  border-bottom-right-radius: 100% 100%;
}

.page-wipe__mark { position: absolute; inset: 0; display: grid; place-items: center; }
.page-wipe__mark svg {
  width: 76px; height: 76px; overflow: visible;
  opacity: 0; transform: scale(0.4) rotate(-14deg);
  transition: opacity 0.3s, transform 0.55s var(--spring);
}
.page-wipe.cover .page-wipe__mark svg {
  opacity: 1; transform: scale(1) rotate(0deg);
  transition-delay: 0.13s;
}
.page-wipe.cover.wipeout .page-wipe__mark svg {
  opacity: 0; transform: scale(0.4) rotate(14deg);
  transition-delay: 0s;
}
.page-wipe__mark path {
  fill: none; stroke: var(--on-pop);
  stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 62 38;
  animation: scribble-draw 1.15s linear infinite;
}
[data-flavor="arcade"] .page-wipe__mark path { stroke: var(--on-pop-bright); }
@media (prefers-reduced-motion: reduce) {
  .page-wipe { display: none; }
}

/* ============================================================
   MARQUEE STRIP — loud and tilted
   ============================================================ */
.strip {
  background: var(--pop-3);
  border-block: 2px solid var(--ink);
  transform: rotate(-1.2deg) scaleX(1.02);
  padding-block: 16px;
}
.strip-track { color: var(--on-pop-bright); font-family: var(--display); font-weight: 700; }
.strip-track .sep { color: var(--on-pop-bright); font-style: normal; }

/* ============================================================
   CONTACT + FOOTER + MENU
   ============================================================ */
/* contact + footer go full pop: CTA orange with white text */
.contact, .foot {
  --feature-bg: var(--pop-1);
  --feature-fg: var(--on-pop);
  --feature-muted: color-mix(in oklab, var(--on-pop) 78%, var(--pop-1));
  --feature-line: color-mix(in oklab, var(--on-pop) 45%, var(--pop-1));
  --feature-accent: var(--on-pop);
}

.mail-link { font-family: var(--display); font-weight: 750; }
.mail-link .a { display: inline-block; transition: transform 0.45s var(--spring); }
.mail-link:hover .a { transform: rotate(-20deg) scale(1.2) translateY(2px); }

.nav-sheet a { font-family: var(--display); font-weight: 750; transition-property: opacity, transform, color; }
/* each link wears its colour at rest — touch devices have no hover to reveal it
   (direct children only, so the footer mail link keeps its own styling) */
.nav-sheet > a:nth-child(1) { color: var(--pop-1); }
.nav-sheet > a:nth-child(2) { color: var(--pop-2); }
.nav-sheet > a:nth-child(3) { color: var(--pop-4); }
.nav-sheet > a:nth-child(4) { color: var(--pop-5); }
.nav-sheet > a:nth-child(5) { color: var(--pop-3); }
/* a little jaunty kick on press / hover */
.nav-sheet > a:nth-child(1):hover, .nav-sheet > a:nth-child(1):active { transform: rotate(-1.6deg); }
.nav-sheet > a:nth-child(2):hover, .nav-sheet > a:nth-child(2):active { transform: rotate(1.4deg); }
.nav-sheet > a:nth-child(3):hover, .nav-sheet > a:nth-child(3):active { transform: rotate(-1.2deg); }
.nav-sheet > a:nth-child(4):hover, .nav-sheet > a:nth-child(4):active { transform: rotate(1.6deg); }
.nav-sheet > a:nth-child(5):hover, .nav-sheet > a:nth-child(5):active { transform: rotate(-1.4deg); }
.nav-sheet .sf-mail .a { color: var(--pop-1); }

/* scroll hint as a toy-box sticker button — filled, ink border, hard shadow */
.scroll-hint .arrow {
  border: 2px solid var(--ink);
  background: var(--pop-4);
  color: var(--on-pop-bright);
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform 0.3s var(--spring), box-shadow 0.3s var(--spring), background 0.3s;
}
.scroll-hint:hover .arrow {
  background: var(--pop-1);
  transform: translate(3px, 3px);          /* press into its own shadow */
  box-shadow: 0 0 0 var(--ink);
}
.scroll-hint .arrow svg { transition: transform 0.3s var(--spring); }
.scroll-hint:hover .arrow svg { transform: translateY(2px) scale(1.1); }
body.playful-motion .scroll-hint .arrow svg { animation: hint-bob 1.7s ease-in-out infinite; }
body.playful-motion .scroll-hint:hover .arrow svg { animation: none; }
@keyframes hint-bob {
  0%, 100% { transform: translateY(-2px); }
  50%      { transform: translateY(3px); }
}

/* ============================================================
   MOTION — springy details, all gated
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  /* headline letters */
  body.playful-motion .hero h1 .ch { display: inline-block; transition: color 0.6s; }
  body.playful-motion .hero h1 .ch.boing {
    animation: ch-boing 0.55s var(--spring);
    color: var(--pop, var(--pop-1));
  }
  @keyframes ch-boing {
    35% { transform: translateY(-0.14em) rotate(var(--rot, -7deg)) scale(1.1); }
    70% { transform: translateY(0.04em) rotate(calc(var(--rot, -7deg) * -0.35)); }
    100% { transform: none; }
  }

  /* logo mark pop */
  body.playful-motion .brand .mark.pop { animation: mark-pop 0.5s var(--spring); }
  @keyframes mark-pop { 40% { transform: scale(1.8) rotate(120deg); border-radius: 50%; } }

  /* theme toggle spin */
  body.playful-motion .theme-toggle.spin svg { animation: toggle-spin 0.55s var(--spring); }
  @keyframes toggle-spin { to { transform: rotate(360deg); } }

  /* confetti bits */
  .confetti-bit { position: fixed; z-index: 2500; pointer-events: none; border-radius: 2px; }
}

/* small screens: calm the negative margins */
@media (max-width: 680px) {
  .work-item { margin-inline: -10px; padding-inline: 10px; }
}