/* ==========================================================================
   Wyatt Lo — Design System v2 "Paper & Marker"
   Base + components. Requires tokens.css. Class prefix: wl-
   Two layers live on every page:
     PRINT  — strict grid, mono slugs, hairlines, B/W photography
     MARKER — blobby orange words, hand notes, drawn-on marks
   The identity is the tension between them.
   ========================================================================== */

/* Base -------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--t-body)/1.6 var(--font-voice);
  font-feature-settings: "ss01", "tnum" 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  transition: background-color var(--d-photo) var(--ease-inout), color var(--d-photo) var(--ease-inout);
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--signal); color: var(--on-signal); }
:lang(zh-Hant) { letter-spacing: 0; line-height: 1.8; }

/* Paper grain: an SVG noise tile, never a gradient */
.wl-grain::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: calc(var(--z-cursor) - 1);
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
:root[data-theme="dark"] .wl-grain::before { filter: invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .wl-grain::before { filter: invert(1); } }

.wl-skip {
  position: absolute; left: var(--s-4); top: -100px; z-index: var(--z-cursor);
  background: var(--signal); color: var(--on-signal); padding: var(--s-2) var(--s-4);
  font: 500 var(--t-small)/1 var(--font-voice); border-radius: var(--r-pill); text-decoration: none;
}
.wl-skip:focus { top: var(--s-4); }
.wl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Type styles ------------------------------------------------------------- */
.t-cover, .t-display-xl, .t-display-l, .t-display-m, .t-numeral {
  font-family: var(--font-shout); font-weight: 400; margin: 0;
  letter-spacing: -.01em;
}
.t-cover      { font-size: var(--t-cover);      line-height: .78; letter-spacing: -.035em; }
.t-display-xl { font-size: var(--t-display-xl); line-height: .82; letter-spacing: -.02em; }
.t-display-l  { font-size: var(--t-display-l);  line-height: .86; }
.t-display-m  { font-size: var(--t-display-m);  line-height: .9; }
.t-numeral    { font-size: var(--t-numeral);    line-height: .7; color: var(--paper-ghost); }
.t-hand-l { font: 700 var(--t-hand-l)/1.02 var(--font-hand); }
.t-hand-s { font: 700 var(--t-hand-s)/1.08 var(--font-hand); }
.t-title  { font: 600 var(--t-title)/1.2 var(--font-voice); letter-spacing: -.012em; margin: 0; }
.t-lead   { font: 400 var(--t-lead)/1.34 var(--font-voice); letter-spacing: -.012em; margin: 0; }
.t-body   { font: 400 var(--t-body)/1.6 var(--font-voice); }
.t-small  { font: 400 var(--t-small)/1.5 var(--font-voice); }
.t-slug   { font: 400 var(--t-slug)/1.4 var(--font-slug); letter-spacing: .02em; text-transform: uppercase; }
.c-signal { color: var(--signal-display); }
.c-signal-text { color: var(--signal-text); }
.c-graphite { color: var(--graphite); }

/* Layout ------------------------------------------------------------------ */
.wl-page { width: 100%; max-width: var(--page-max); margin-inline: auto; padding-inline: var(--gutter); }
.wl-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 24px); }
.wl-rule { border: 0; border-top: var(--hairline) solid var(--rule); margin: 0; }
.wl-band { background: var(--signal); color: var(--on-signal); }
.wl-band .c-signal, .wl-band .c-signal-text { color: var(--on-signal); }
.wl-band--ink { background: var(--ink); color: var(--on-ink); }

/* Marks (hand-drawn SVG) -------------------------------------------------- */
.wl-mark { display: inline-block; color: var(--signal); overflow: visible; fill: none; stroke: currentColor; stroke-width: var(--mk-w, 3.5px); stroke-linecap: round; stroke-linejoin: round; }
.wl-mark { stroke-dasharray: 1; stroke-dashoffset: 0; }
.wl-mark--ink { color: var(--ink); }
.wl-mark--display { color: var(--signal-display); }
.motion .wl-mark[data-draw] { stroke-dashoffset: 1; transition: stroke-dashoffset var(--d-draw) var(--ease-out); }
.motion .wl-mark[data-draw].is-drawn { stroke-dashoffset: 0; }
.wl-boil { filter: url(#wl-boil); }

/* Circled word: marker loop drawn around inline text */
.wl-circled { position: relative; display: inline-block; white-space: nowrap; }
.wl-circled > .wl-mark { position: absolute; inset: -22% -14% -26% -12%; width: 126%; height: 148%; pointer-events: none; }
/* Underlined word */
.wl-underlined { position: relative; display: inline-block; }
.wl-underlined > .wl-mark { position: absolute; left: -2%; bottom: -.32em; width: 104%; height: .42em; pointer-events: none; }
/* Scribble behind a word */
.wl-scribbled { position: relative; display: inline-block; isolation: isolate; }
.wl-scribbled > .wl-mark { position: absolute; inset: 8% -6% 2% -6%; width: 112%; height: 90%; z-index: -1; pointer-events: none; }

/* Margin note: hand font, tilted, optionally with an arrow */
.wl-note { font: 700 var(--t-hand-l)/1.02 var(--font-hand); color: var(--ink); display: inline-flex; align-items: flex-start; gap: var(--s-2); transform: rotate(-4deg); }
.wl-note--signal { color: var(--signal-text); }
.wl-note .wl-mark { width: 88px; height: 58px; flex: none; }

/* Asterisk sticker */
.wl-ast { width: var(--ast, 48px); height: var(--ast, 48px); color: var(--signal); }
.motion .wl-ast--spin { animation: wl-spin 22s linear infinite; }
@keyframes wl-spin { to { transform: rotate(360deg); } }

/* Tape strip for pinning photos */
.wl-tape {
  position: absolute; width: 112px; height: 30px;
  background: color-mix(in srgb, var(--paper-deep) 78%, transparent);
  clip-path: polygon(0 12%, 6% 0, 12% 14%, 18% 2%, 82% 0, 88% 12%, 94% 0, 100% 10%, 100% 88%, 94% 100%, 88% 86%, 82% 100%, 18% 100%, 12% 88%, 6% 100%, 0 90%);
  box-shadow: inset 0 0 0 100px color-mix(in srgb, var(--ink) 4%, transparent);
}

/* Nav --------------------------------------------------------------------- */
.wl-nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  height: var(--nav-h);
  display: flex; align-items: center;
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  border-bottom: var(--hairline) solid transparent;
  transition: border-color var(--d-hover) var(--ease-out), background-color var(--d-photo) var(--ease-inout);
}
.wl-nav.is-scrolled { border-bottom-color: var(--rule); }
.wl-nav__in { display: flex; align-items: center; gap: var(--s-6); width: 100%; }
.wl-wordmark {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none; white-space: nowrap;
  font: 400 30px/1 var(--font-shout); letter-spacing: -.02em; color: var(--ink);
}
.wl-wordmark .wl-ast { --ast: 22px; transition: transform var(--d-photo) var(--ease-pop); }
.wl-wordmark:hover .wl-ast { transform: rotate(120deg) scale(1.15); }
.wl-nav__meta { margin-right: auto; color: var(--graphite); }
.wl-nav__links { display: flex; gap: var(--s-6); list-style: none; margin: 0; padding: 0; }
.wl-nav__links a { position: relative; text-decoration: none; padding-block: var(--s-3); }
.wl-nav__links a .wl-mark { position: absolute; left: 0; bottom: 4px; width: 100%; height: 8px; }
.motion .wl-nav__links a .wl-mark { stroke-dashoffset: 1; transition: stroke-dashoffset 380ms var(--ease-out); }
.motion .wl-nav__links a:hover .wl-mark,
.motion .wl-nav__links a[aria-current="true"] .wl-mark { stroke-dashoffset: 0; }
.wl-nav__links a:not(:hover):not([aria-current="true"]) .wl-mark { opacity: 0; }
.motion .wl-nav__links a .wl-mark { opacity: 1 !important; }
.wl-toggle {
  display: inline-flex; align-items: center; gap: var(--s-2);
  min-height: 44px; padding-inline: var(--s-3);
  border-radius: var(--r-pill); border: var(--hairline) solid var(--rule-strong);
  transition: background-color var(--d-hover) var(--ease-out), color var(--d-hover) var(--ease-out);
}
.wl-toggle:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.wl-toggle__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--signal); }
.wl-menu-btn { display: none; }

/* Mobile menu sheet: orange, blobby, full-screen */
.wl-menu {
  position: fixed; inset: 0; z-index: var(--z-menu);
  background: var(--signal); color: var(--on-signal);
  padding: calc(var(--nav-h) + var(--s-8)) var(--gutter) var(--s-8);
  display: flex; flex-direction: column; justify-content: space-between;
  clip-path: circle(0 at calc(100% - 40px) 32px);
  visibility: hidden;
  transition: clip-path 560ms var(--ease-inout), visibility 0s linear 560ms;
}
.wl-menu.is-open { clip-path: circle(150% at calc(100% - 40px) 32px); visibility: visible; transition: clip-path 640ms var(--ease-out), visibility 0s; }
.wl-menu ul { list-style: none; margin: 0; padding: 0; }
.wl-menu a { font: 400 clamp(56px, 16vw, 96px)/.95 var(--font-shout); text-decoration: none; display: inline-block; padding-block: 2px; }
.wl-menu__close { position: absolute; top: 10px; right: var(--gutter); min-height: 44px; border-color: currentColor; }

@media (max-width: 860px) {
  .wl-nav__meta, .wl-nav__links { display: none; }
  .wl-nav__in { justify-content: space-between; }
  .wl-menu-btn { display: inline-flex; }
}

/* Buttons ----------------------------------------------------------------- */
.wl-btn {
  --bg: var(--signal); --fg: var(--on-signal);
  position: relative; display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 52px; padding: 0 var(--s-6) 0 var(--s-8);
  background: var(--bg); color: var(--fg);
  font: 600 17px/1 var(--font-voice); letter-spacing: -.01em; text-decoration: none;
  border-radius: var(--r-blob);
  transition: border-radius var(--d-photo) var(--ease-pop), transform var(--d-press) var(--ease-out), background-color var(--d-hover) var(--ease-out);
}
.wl-btn:hover { border-radius: var(--r-blob-2); }
.wl-btn:active { transform: scale(.97); }
.wl-btn__arrow { width: 22px; height: 22px; transition: transform var(--d-hover) var(--ease-out); }
.wl-btn:hover .wl-btn__arrow { transform: translateX(4px) rotate(-8deg); }
.wl-btn--ink { --bg: var(--ink); --fg: var(--on-ink); }
.wl-btn--line { --bg: transparent; --fg: var(--ink); border: var(--hairline) solid var(--ink); border-radius: var(--r-pill); }
.wl-btn--line:hover { --bg: var(--ink); --fg: var(--on-ink); border-radius: var(--r-pill); }
.wl-btn[disabled], .wl-btn[aria-disabled="true"] { opacity: .42; cursor: not-allowed; pointer-events: none; }

/* Text link with a squiggle that draws on hover */
.wl-link { position: relative; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-decoration: none; color: var(--ink); }
.wl-link .wl-mark { position: absolute; left: 0; bottom: 6px; width: 100%; height: 9px; }
.motion .wl-link .wl-mark { stroke-dashoffset: .72; transition: stroke-dashoffset 420ms var(--ease-out); }
.motion .wl-link:hover .wl-mark, .motion .wl-link:focus-visible .wl-mark { stroke-dashoffset: 0; }

/* Tags -------------------------------------------------------------------- */
.wl-tags { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; margin: 0; padding: 0; }
.wl-tag {
  display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px;
  font: 400 var(--t-slug)/1 var(--font-slug); letter-spacing: .02em; text-transform: uppercase;
  border: var(--hairline) solid var(--rule-strong); border-radius: var(--r-tag); color: var(--ink);
}
.wl-tag--fill { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.wl-tag--signal { background: var(--signal); color: var(--on-signal); border-color: var(--signal); }

/* Section head: ghost numeral + blob word + print slug -------------------- */
.wl-head { position: relative; padding-top: var(--s-24); margin-bottom: var(--s-16); isolation: isolate; }
.wl-head__num { position: absolute; z-index: -1; top: var(--s-8); right: -2vw; user-select: none; pointer-events: none; }
.wl-head__slug { display: flex; justify-content: space-between; gap: var(--s-4); color: var(--graphite); padding-bottom: var(--s-3); border-bottom: var(--hairline) solid var(--rule); margin-bottom: var(--s-8); }
.wl-head__word { color: var(--signal-display); }
.wl-head__row { display: flex; align-items: flex-end; flex-wrap: wrap; gap: var(--s-6) var(--s-12); }
.wl-head__intro { max-width: 34ch; padding-bottom: .6em; }

/* Stat -------------------------------------------------------------------- */
.wl-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: var(--hairline) solid var(--ink); }
.wl-stat { position: relative; padding: var(--s-6) var(--s-6) var(--s-8) 0; }
.wl-stat + .wl-stat { padding-left: var(--s-6); border-left: var(--hairline) solid var(--rule); }
.wl-stat__num { display: block; font: 400 var(--t-display-l)/.86 var(--font-shout); letter-spacing: -.02em; margin: var(--s-4) 0 var(--s-3); }
.wl-stat__note { font: 700 var(--t-hand-s)/1.08 var(--font-hand); max-width: 16ch; }
@media (max-width: 860px) {
  .wl-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wl-stat:nth-child(3) { padding-left: 0; border-left: 0; }
  .wl-stat:nth-child(n+3) { border-top: var(--hairline) solid var(--rule); }
}

/* Timeline (experience) row: ruled table, orange flood on hover ----------- */
.wl-timeline { list-style: none; margin: 0; padding: 0; border-top: var(--hairline) solid var(--ink); }
.wl-row {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 10rem minmax(0, 1.1fr) minmax(0, 1fr) 2.5rem; gap: var(--s-6); align-items: baseline;
  padding: var(--s-6) var(--s-2);
  border-bottom: var(--hairline) solid var(--rule);
}
.wl-row::before {
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--signal);
  transform: scaleY(0); transform-origin: bottom; transition: transform var(--d-photo) var(--ease-out);
}
.wl-row:hover::before, .wl-row:focus-within::before { transform: scaleY(1); }
.wl-row:hover, .wl-row:focus-within { color: var(--on-signal); }
.wl-row:hover .c-graphite, .wl-row:focus-within .c-graphite { color: var(--on-signal); }
.wl-row__role { transition: transform var(--d-photo) var(--ease-out); }
.wl-row:hover .wl-row__role { transform: translateX(10px); }
.wl-row__ast { --ast: 28px; align-self: center; justify-self: end; color: var(--on-signal); opacity: 0; transform: rotate(-90deg) scale(.4); transition: opacity var(--d-hover), transform var(--d-photo) var(--ease-pop); }
.wl-row:hover .wl-row__ast, .wl-row:focus-within .wl-row__ast { opacity: 1; transform: none; }
@media (max-width: 860px) {
  .wl-row { grid-template-columns: 1fr; gap: var(--s-1); }
  .wl-row__ast { display: none; }
}

/* Case spread: concept / goal / process / outcome ------------------------- */
.wl-case { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(12px, 2vw, 24px); row-gap: var(--s-12); padding-block: var(--s-16); border-top: var(--hairline) solid var(--ink); }
.wl-case__side { position: absolute; right: 0; top: var(--s-16); writing-mode: vertical-rl; color: var(--graphite); }
.wl-case__num { grid-column: 1 / span 3; font: 400 clamp(120px, 16vw, 240px)/.72 var(--font-shout); color: var(--signal-display); }
.wl-case__title { grid-column: 4 / span 8; align-self: end; }
.wl-case__steps { grid-column: 4 / span 8; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-8) var(--s-12); margin: 0; }
.wl-case__steps dt { font: 400 40px/.9 var(--font-shout); color: var(--signal-display); margin-bottom: var(--s-2); }
.wl-case__steps dd { margin: 0; max-width: 40ch; }
@media (max-width: 860px) {
  .wl-case__num, .wl-case__title, .wl-case__steps { grid-column: 1 / -1; }
  .wl-case__steps { grid-template-columns: 1fr; }
  .wl-case__side { display: none; }
}

/* Photo ------------------------------------------------------------------- */
.wl-photo { position: relative; margin: 0; background: var(--paper-deep); overflow: hidden; }
.wl-photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.08); transition: filter var(--d-photo) var(--ease-out), transform 900ms var(--ease-out); }
.wl-photo:hover img { filter: grayscale(0) contrast(1); transform: scale(1.03); }
/* Colour-face variant: a pre-processed image (B/W, face in natural colour,
   tie in orange) sits on top of the original and fades out on hover. */
.wl-photo--spot img { filter: none; }
.wl-photo--spot .wl-photo__spot { position: absolute; inset: 0; transition: opacity var(--d-photo) var(--ease-out), transform 900ms var(--ease-out); }
.wl-photo--spot:hover img { filter: none; }
.wl-photo--spot:hover .wl-photo__spot { opacity: 0; }
.wl-photo--4x5 { aspect-ratio: 4 / 5; }
.wl-photo--3x2 { aspect-ratio: 3 / 2; }
.wl-photo--16x9 { aspect-ratio: 16 / 9; }
.wl-photo--9x16 { aspect-ratio: 9 / 16; }
.wl-photo__cap { display: flex; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); color: var(--graphite); }
.wl-cutout { position: relative; }
.wl-cutout img { width: 100%; height: auto; filter: drop-shadow(0 1px 0 color-mix(in srgb, var(--ink) 10%, transparent)); }

/* Reel (Mirko-style filmstrip) -------------------------------------------- */
.wl-reel { position: relative; }
.wl-reel__stage { position: relative; min-height: min(78svh, 720px); display: grid; place-items: center; }
.wl-reel__cover {
  position: relative; width: min(52vw, 420px); aspect-ratio: 1; overflow: hidden;
  background: var(--ink); color: var(--on-ink);
  transition: transform var(--d-photo) var(--ease-out), width var(--d-photo) var(--ease-out);
}
.wl-reel__cover:hover, .wl-reel__cover:focus-visible { transform: scale(1.04); }
.wl-reel__hover {
  position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-3);
  background: color-mix(in srgb, var(--ink) 62%, transparent); color: var(--on-ink);
  opacity: 0; transition: opacity var(--d-hover) var(--ease-out);
}
.wl-reel__cover:hover .wl-reel__hover, .wl-reel__cover:focus-visible .wl-reel__hover { opacity: 1; }
.wl-reel__pill { background: var(--paper); color: var(--ink); border-radius: var(--r-pill); padding: 8px 18px; font: 600 14px/1 var(--font-voice); }
.wl-reel__strip { position: absolute; inset: 0; display: flex; flex-direction: column; }
.wl-reel__strip[hidden] { display: none; }
.wl-reel__track {
  flex: 1; display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none;
  padding-inline: calc(50% - min(36vw, 460px));
}
.wl-reel__track::-webkit-scrollbar { display: none; }
.wl-slide {
  flex: none; width: min(72vw, 920px); scroll-snap-align: center; position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; padding: clamp(16px, 3vw, 36px);
  background: var(--paper-deep); color: var(--ink);
}
.wl-slide--ink { background: var(--ink); color: var(--on-ink); }
.wl-slide--signal { background: var(--signal); color: var(--on-signal); }
.wl-slide__big { font: 400 clamp(72px, 13vw, 200px)/.8 var(--font-shout); letter-spacing: -.03em; }
.wl-reel__info { display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: var(--s-6); align-items: start; padding-top: var(--s-4); }
.wl-reel__ctrl { display: flex; justify-content: flex-end; gap: var(--s-2); }
.wl-icon-btn { min-width: 44px; min-height: 44px; border-radius: 50%; border: var(--hairline) solid var(--rule-strong); display: inline-grid; place-items: center; transition: background-color var(--d-hover), color var(--d-hover); }
.wl-icon-btn:hover { background: var(--ink); color: var(--on-ink); border-color: var(--ink); }
.wl-icon-btn svg { width: 18px; height: 18px; }
@media (max-width: 860px) {
  .wl-reel__info { grid-template-columns: 1fr auto; }
  .wl-reel__info > :first-child { display: none; }
  .wl-slide { width: 84vw; }
  .wl-reel__track { padding-inline: 8vw; }
}

/* Footer ------------------------------------------------------------------ */
.wl-footer { position: relative; overflow: hidden; padding-block: var(--s-24) var(--s-8); }
.wl-footer__big { font: 400 var(--t-cover)/.78 var(--font-shout); letter-spacing: -.035em; margin: 0 0 var(--s-12); }
.wl-footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-6); align-items: end; padding-top: var(--s-4); border-top: var(--hairline) solid currentColor; }

/* Custom cursor (pointer: fine only) -------------------------------------- */
.wl-cursor {
  position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none;
  width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: var(--ink); display: grid; place-items: center;
  font: 700 18px/1 var(--font-hand); color: var(--on-signal);
  transition: width 320ms var(--ease-pop), height 320ms var(--ease-pop), margin 320ms var(--ease-pop), background-color var(--d-hover), border-radius 320ms var(--ease-pop);
  opacity: 0;
}
.wl-cursor span { opacity: 0; transition: opacity 160ms; white-space: nowrap; }
.wl-cursor.is-on { opacity: 1; }
.wl-cursor.is-label { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--signal); border-radius: var(--r-blob); }
.wl-cursor.is-label span { opacity: 1; }
@media (hover: none), (pointer: coarse) { .wl-cursor { display: none; } }

/* Reveal (only when JS + motion allowed; content is never hidden otherwise) */
.motion [data-reveal] { transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * var(--stagger)); }
.motion [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(28px); }

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