/* =========================================================
   SPARKLING YUZU — rainbow crochet hat co.
   Cargo-style split screen · thin lines · rectangular buttons
   ========================================================= */

:root {
  --nav: 44px;
  --ink: rgba(0, 0, 0, .85);
  --line: rgba(0, 0, 0, .85);
  --soft: rgba(0, 0, 0, .15);
  --accent: #ff4a2a;
  --blend: multiply;
  --serif: "Instrument Serif", "Times New Roman", serif;
  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --pixel: "Silkscreen", "Pixelify Sans", monospace;
  --round: "Unbounded", "Archivo", sans-serif;
  --wide: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --bubble: "Rubik Bubbles", "Bagel Fat One", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: #fff;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: .005em;
  overflow-x: hidden;
  font-variant-numeric: oldstyle-nums;
}
img, canvas, svg { display: block; }
button, input { font: inherit; color: inherit; }
a { color: inherit; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
::selection { background: var(--accent); color: #fff; }

.mono {
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.35;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-variant-numeric: normal;
}
.small { font-size: 15px; opacity: .7; margin-top: .6em; }

/* ---------- thin rectangular buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .35em;
  font-family: var(--mono); font-size: 11px; line-height: 1;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  background: transparent; color: inherit;
  border: 1px solid currentColor; border-radius: 0;
  padding: 7px 10px 6px;
  cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s;
}
.btn:hover, .btn:focus-visible { background: #1f2bd6; border-color: #1f2bd6; color: #fff; outline: none; }
.btn.on { background: #111; color: #fff; }
.btn b { font-weight: 600; }
.btn-wide { width: 100%; justify-content: center; padding: 12px; }
.btn.pink { color: #ff3dbd; }
.btn.red { color: #e0001a; background: #fff; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; }

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; height: var(--nav); z-index: 100;
  display: flex; align-items: center; gap: 12px; padding: 0 12px;
  background: rgba(255, 255, 255, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; white-space: nowrap; }
.logo span { font-family: var(--mono); font-size: 11px; line-height: 1; text-transform: uppercase; letter-spacing: .05em; }
.secnav { display: flex; gap: 3px; margin-left: auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.secnav .btn { flex: none; padding: 6px 6px 5px; }
.progress { position: absolute; left: 0; right: 0; bottom: -2px; height: 3px; pointer-events: none; }
.progress i { display: block; height: 100%; transform-origin: 0 50%; transform: scaleX(var(--prog, 0)); background: var(--accent); }

.toast {
  position: fixed; z-index: 130; left: 50%; bottom: 22px; translate: -50% 0;
  background: #111; color: #fff; padding: 10px 14px; border: 1px solid #111;
  opacity: 0; pointer-events: none; transition: opacity .25s, translate .25s;
}
.toast.show { opacity: 1; translate: -50% -6px; }

/* ---------- floating blend layer, cursor, yarn, grain ---------- */
.blendword {
  position: fixed; left: 0; bottom: -.4vw; z-index: 60; pointer-events: none;
  white-space: nowrap; line-height: .9;
  font-family: var(--pixel); font-weight: 700; font-size: 5vw; letter-spacing: -.04em;
  mix-blend-mode: var(--blend);
}
.bw-track { display: flex; will-change: transform; }
.bw-copy { flex: none; }
.blob {
  position: fixed; left: 0; top: 0; z-index: 61; pointer-events: none;
  width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%;
  background: radial-gradient(circle, #7dffcf 0%, #7d8bff 45%, rgba(255, 122, 240, .9) 62%, transparent 70%);
  mix-blend-mode: var(--blend); opacity: 0; transition: opacity .3s;
  will-change: transform;
}
body.blend-off .blendword, body.blend-off .blob { display: none; }
#yarn { position: fixed; inset: 0; width: 100vw; height: 100vh; z-index: 62; pointer-events: none; }
.cursor {
  position: fixed; left: 0; top: 0; z-index: 140; pointer-events: none;
  width: 24px; height: 24px; margin: -12px 0 0 -12px;
  mix-blend-mode: difference; opacity: 0;
  transition: width .15s, height .15s, margin .15s;
}
.cursor::before, .cursor::after { content: ""; position: absolute; background: #fff; }
.cursor::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.cursor::after { top: 50%; left: 0; right: 0; height: 1px; }
.cursor.hover { width: 34px; height: 22px; margin: -11px 0 0 -17px; border: 1px solid #fff; }
.cursor.hover::before, .cursor.hover::after { display: none; }
.has-cursor, .has-cursor * { cursor: none !important; }
.has-cursor input { cursor: text !important; }
.has-cursor.moved .cursor, .has-cursor.moved .blob { opacity: 1; }
/* film grain only on the poster graphics, not on the white pages and hat photos */
.grain { display: none; }
.stage:not(.riso)::after {
  content: ""; position: absolute; inset: -50%; z-index: 70; pointer-events: none; opacity: .13;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.1 -.15'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain .9s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-1%, 3%); } 80% { transform: translate(3%, 1%); } 100% { transform: translate(0, 0); }
}

/* ---------- knit (yarn) divider ---------- */
.knit {
  height: 34px; border-top: 1px solid var(--line);
  background: linear-gradient(90deg, #ff4fd8, #ffd23f, #b8f23a, #2ee0d0, #8b8ff7, #ff4fd8) 0 0 / 200% 100%;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='17'><ellipse cx='5' cy='8.5' rx='3.4' ry='7.6' transform='rotate(-28 5 8.5)'/><ellipse cx='13' cy='8.5' rx='3.4' ry='7.6' transform='rotate(28 13 8.5)'/></svg>") 0 0 / 18px 17px;
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='17'><ellipse cx='5' cy='8.5' rx='3.4' ry='7.6' transform='rotate(-28 5 8.5)'/><ellipse cx='13' cy='8.5' rx='3.4' ry='7.6' transform='rotate(28 13 8.5)'/></svg>") 0 0 / 18px 17px;
  animation: knit 7s linear infinite;
}
@keyframes knit { to { background-position: -200% 0; } }

/* =========================================================
   SPLIT SECTIONS
   ========================================================= */
.sec {
  position: relative; display: grid; grid-template-columns: 1fr 1fr;
  min-height: 175vh; background: var(--bg, #fff); color: var(--fg, var(--ink));
  border-top: 1px solid var(--line);
  transition: background-color .5s;
}
.sec:first-of-type { border-top: 0; margin-top: var(--nav); }
.art { position: relative; display: grid; overflow: clip; min-width: 0; }
.stage {
  grid-area: 1 / 1; align-self: start;
  position: sticky; top: var(--nav); height: calc(100vh - var(--nav));
  overflow: hidden; container-type: size;
}
.stage > * { position: absolute; }
.flow {
  grid-area: 1 / 1; position: relative; z-index: 64;
  padding: 92vh 7% 18vh; pointer-events: none;
}
.flow > * { pointer-events: auto; }
.card {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  padding: 18px 18px 20px; max-width: 520px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .85);
}
.card .mono { border-bottom: 1px solid var(--soft); padding-bottom: 8px; margin-bottom: 10px; }
.lede { font-size: clamp(20px, 1.7vw, 27px); line-height: 1.12; }
.card hr { border: 0; border-top: 1px solid var(--soft); margin: 14px 0; }

.photo { position: relative; border-left: 1px solid var(--line); background: var(--bg2, #fff); min-width: 0; }
.flip .photo { order: -1; border-left: 0; border-right: 1px solid var(--line); }
.photo .stick {
  position: sticky; top: var(--nav); height: calc(100vh - var(--nav));
  display: flex; align-items: center; justify-content: center; padding: 5vh 5vw;
}
.ref { width: 100%; display: flex; flex-direction: column; align-items: center; }
.ref-frame {
  transform: perspective(1000px) rotateX(var(--tx, 0deg)) rotateY(var(--ty, 0deg));
  transition: transform .25s ease-out; will-change: transform;
}
.ref img {
  max-width: 100%; max-height: calc(100vh - var(--nav) - 16vh); width: auto; height: auto;
  outline: 1px solid var(--soft); outline-offset: 0;
  scale: calc(.94 + var(--q, 0) * .06);
}
.ref figcaption {
  display: flex; justify-content: space-between; gap: 12px; width: 100%;
  max-width: 520px; margin-top: 10px; padding-top: 6px; border-top: 1px solid var(--line);
  color: var(--ink);
}
#cstars, .rings, .mf-boxes, .shards { inset: 0; pointer-events: none; }
.desk-hint { left: 12px; bottom: 10px; opacity: .6; z-index: 30; }

/* text column (replaces the old reference-photo pane) */
.side {
  position: relative; z-index: 64; min-width: 0;
  border-left: 1px solid var(--line); background: #fff; color: var(--ink);
  padding: 22vh 6% 20vh; display: flex; flex-direction: column; gap: 28px;
}
.flip .side { order: -1; border-left: 0; border-right: 1px solid var(--line); }
.side-head { position: sticky; top: calc(var(--nav) + 24px); padding-bottom: 14px; border-bottom: 1px solid var(--line); background: #fff; }
.side-num {
  display: block; font-family: "Bodoni Moda", serif; font-weight: 400; font-size: clamp(90px, 13vw, 210px); line-height: .82;
  color: var(--bg, #eee); -webkit-text-stroke: 1px var(--ink);
  translate: 0 calc(var(--p, 0) * -40px);
}
.side-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(34px, 3.6vw, 60px); line-height: 1; margin: 12px 0 8px; }
.side .card { box-shadow: 6px 6px 0 var(--bg, #111), 6px 6px 0 1px var(--line); }

/* 01 · hat gallery — front photo, back photo on hover (tap on touch screens) */
.side-gallery { padding: 4vh 6% 20vh; container-type: inline-size; }
/* stockist note + gallery stay pinned on screen together */
.gal-wrap { --note: 80px; position: sticky; top: calc(var(--nav) + 4vh); }
.gal-note { min-height: calc(var(--note) - 16px); margin: 0 0 16px; font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: .02em; }
.gal-note .nw { white-space: nowrap; }
.gal-note a { color: inherit; text-underline-offset: 3px; }
.gal-note a:hover, .gal-note a:focus-visible { color: #1f2bd6; }
/* six hats in an even 3 × 2 grid, every frame the same 4:5 rectangle; the whole block is sized
   to fit both the panel width and one screen height */
.gallery {
  --g: 16px; --cap: 22px;
  --u: min(calc((100cqw - 2 * var(--g)) / 3),
           calc((100vh - var(--nav) - 8vh - var(--note) - 2 * var(--cap) - var(--g)) / 2.5));
  display: grid; gap: var(--g); justify-content: center;
  grid-template-columns: repeat(3, var(--u));
}
.gal-item { margin: 0; outline: none; cursor: pointer; }
.gal-frame { position: relative; aspect-ratio: 4 / 5; background: #fff; overflow: hidden; }
.gal-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity .25s;
  /* lighter, brighter, a little pastel; the white background stays pure white */
  filter: contrast(.9) brightness(1.12) saturate(1.4); }
.gal-frame .back { opacity: 0; }
.gal-item:hover .back, .gal-item:focus-visible .back { opacity: 1; }
.gal-item:focus-visible .gal-frame { outline: 2px solid #1f2bd6; outline-offset: 2px; }
.gal-item figcaption { margin-top: 6px; height: 16px; line-height: 16px; color: rgba(0, 0, 0, .55); }

/* hat product pages — minimal, black on white, identical for every hat */
.side-product { padding: 0 6% 20vh; }
.product { position: sticky; top: calc(var(--nav) + 32px); display: flex; flex-direction: column; gap: 14px; color: #111; }
.pd-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pd-photos figure { margin: 0; }
/* a hat with only one photo gets a bigger frame instead of an empty slot beside it */
.pd-photos figure:only-child { grid-column: span 2; width: min(75%, calc((100vh - var(--nav) - 200px) * .8)); }
.pd-frame { position: relative; aspect-ratio: 4 / 5; background: #fff; overflow: hidden; }
/* the outline is its own layer on top of the photo, so the photo's colour filter can't bleed a pale line along it */
.gal-frame::after, .pd-frame::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid #111; pointer-events: none; }
.pd-frame img { display: block; width: 100%; height: 100%; object-fit: cover; filter: contrast(.9) brightness(1.12) saturate(1.4); }
.pd-head { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; }
.pd-name { font-family: var(--mono); font-weight: 400; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.pd-desc { font-family: var(--mono); font-size: 12px; line-height: 1.6; letter-spacing: .02em; max-width: 52ch; }

/* parallax driven by --p (section offset from viewport center, ≈ -1..1) */
.px {
  --sx: 0; --sy: 0; --sr: 0;
  translate: calc(var(--p, 0) * var(--sx) * 1px) calc(var(--p, 0) * var(--sy) * 1px);
  rotate: calc(var(--p, 0) * var(--sr) * 1deg);
}
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s, transform .8s cubic-bezier(.2, .8, .2, 1); }
.reveal.in { opacity: 1; transform: none; }

/* =========================================================
   01 · HERO
   ========================================================= */
.dotletters { inset: 0; width: 100%; height: 100%; z-index: 5; }
.dotletters text { font-family: var(--round); font-weight: 700; }
.dotletters .dl-fill { fill: url(#lav); stroke: rgba(255, 255, 255, .9); stroke-width: 10; paint-order: stroke; }
.dotletters .dl-dot { fill: none; stroke-width: 6; stroke-linecap: round; stroke-dasharray: 0 15; animation: march 2.4s linear infinite; }
.dotletters .dl-dot.o { stroke: #1a9cff; }
.dotletters .dl-dot.g { stroke: #22c98a; stroke-dashoffset: 7.5; animation-name: march2; }
.dotletters .dl-g { cursor: pointer; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); transform-box: fill-box; transform-origin: center; }
.dotletters .dl-g:hover { transform: scale(1.08) rotate(-6deg); }
@keyframes march { to { stroke-dashoffset: -30; } }
@keyframes march2 { from { stroke-dashoffset: 7.5; } to { stroke-dashoffset: -22.5; } }
.s01 .neon { left: 4%; top: 11%; bottom: 15%; display: flex; flex-direction: row; align-items: flex-start; gap: 1.6cqw; line-height: .95; font-weight: 400; z-index: 3; }
/* "sparkling" stacked one letter under another, like YUZU */
.neon-lat { display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: space-between; }
.neon-lat i { font-style: normal; display: block; line-height: .9; }
.neon-cn { writing-mode: vertical-rl; }
.neon-lat {
  font-family: var(--round); font-weight: 300; font-size: min(10cqw, 7.6cqh); letter-spacing: -.02em;
  color: rgba(26, 156, 255, .12); -webkit-text-stroke: .45cqw #1a9cff;
  text-shadow: 0 0 .8cqw rgba(26, 156, 255, .9), 0 0 3cqw rgba(120, 190, 255, .55);
  animation: flicker 5s infinite;
}
.neon-cn {
  font-family: "Zen Maru Gothic", sans-serif; font-weight: 500; font-size: 6.5cqw; letter-spacing: .1em;
  color: rgba(26, 156, 255, .1); -webkit-text-stroke: .5cqw #1a9cff;
  text-shadow: 0 0 1cqw rgba(26, 156, 255, .9), 0 0 4cqw rgba(120, 190, 255, .5);
  filter: blur(.25px);
}
@keyframes flicker { 0%, 100%, 7%, 9%, 52%, 55% { opacity: 1; } 8%, 53% { opacity: .55; } }
.hero-list .b { width: 6cqw; height: 6cqw; animation: spin 9s linear infinite; }
.b.teal { fill: #20c9a0; } .b.blue { fill: #1a9cff; }
.hero-list { left: 6%; top: 38%; list-style: none; display: grid; gap: 3.2cqh; z-index: 3; font-size: max(9px, 1.7cqw); font-weight: 600; color: rgba(0, 0, 0, .5); }
.hero-list li { display: flex; align-items: center; gap: 1.6cqw; }
.hero-list .b { width: 4cqw; height: 4cqw; flex: none; }
.hero-clover, .hero-heart { z-index: 6; overflow: visible; animation: bob 4s ease-in-out infinite; }
.hero-clover { left: 36%; top: 6%; width: 7cqw; height: 7cqw; filter: drop-shadow(0 0 1.8cqw rgba(160, 230, 255, .95)); }
.hero-heart { left: 18%; top: 50%; width: 8cqw; height: 7.5cqw; animation-delay: -2s; filter: drop-shadow(0 0 1.4cqw #c8f0ff); }
@keyframes bob { 50% { transform: translateY(-1.6cqh) rotate(2deg); } }
.hstar { width: calc(var(--s) * 1cqw); height: calc(var(--s) * 1cqw); fill: #bfe6ff; filter: drop-shadow(0 0 1cqw #fff) drop-shadow(0 0 2cqw #8fd3f4); animation: twinkle 3s ease-in-out infinite; }
.hburst { width: calc(var(--s) * 1cqw); height: calc(var(--s) * 1cqw); fill: #74e8c4; filter: drop-shadow(0 0 1.4cqw #b9ffe9); animation: spin 14s linear infinite; z-index: 1; }
@keyframes nudge { 50% { translate: 0 8px; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes twinkle { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .7; opacity: .7; } }

/* =========================================================
   02 · YARN GARDEN
   ========================================================= */
.garden { inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; }

/* =========================================================
   10 · LIFE, ALL SIZES
   ========================================================= */
.life-bg { inset: 0; background:
  radial-gradient(ellipse at 20% 30%, rgba(80, 230, 255, .55), transparent 40%),
  radial-gradient(ellipse at 40% 70%, rgba(220, 80, 255, .45), transparent 40%),
  linear-gradient(160deg, #a07d50, #7c8a4a 45%, #9a6fc0 80%, #6fd8e8); }
.life-grid { right: 0; top: 0; width: 38%; height: 40%; background:
  linear-gradient(90deg, transparent calc(33% - 1px), rgba(255, 255, 255, .8) 33%, transparent calc(33% + 1px), transparent calc(66% - 1px), rgba(255, 255, 255, .8) 66%, transparent calc(66% + 1px)),
  linear-gradient(0deg, transparent calc(50% - 1px), rgba(255, 255, 255, .8) 50%, transparent calc(50% + 1px)),
  linear-gradient(180deg, #eaffc0, #5fd03a); }
.orb { border-radius: 50%; animation: pulse 5s ease-in-out infinite; z-index: 1; }
.orb.o1 { left: 4%; top: 3%; width: 14cqw; height: 14cqw; background: radial-gradient(circle, #ff2a2a 0 8%, #2a2a2a 14%, #ff3ad0 24%, #b8a8ff 48%, #f0e8ff 66%, transparent 70%); }
.orb.o2 { right: 4%; top: 3%; width: 16cqw; height: 16cqw; background: radial-gradient(circle, #ff2a2a 0 10%, #ff3ad0 26%, #7a5cff 48%, #d8e8ff 64%, transparent 70%); animation-delay: -1s; }
.orb.o3 { right: 18%; top: 30%; width: 16cqw; height: 16cqw; background: radial-gradient(circle, #ff6a2a 0 8%, #ff3ad0 18%, #b8ff30 40%, #fff 62%, transparent 70%); animation-delay: -2s; }
.orb.o4 { right: 6%; top: 46%; width: 34cqw; height: 34cqw; background: radial-gradient(circle, #ff2a2a 0 6%, #ff3ad0 16%, #ff6be0 24%, #3fe8ff 46%, #c8fff8 62%, transparent 70%); animation-delay: -3s; }
.orb.o5 { right: 4%; top: 72%; width: 18cqw; height: 18cqw; background: radial-gradient(circle, #2ac04a 0 10%, #c8ff30 34%, #f2ffe0 62%, transparent 70%); animation-delay: -4s; }
@keyframes pulse { 50% { scale: 1.08; filter: hue-rotate(25deg); } }
/* the drawing, fitted to the panel: fades in as the section scrolls up, blinks now and then */
.girl {
  left: 50%; top: 4%; height: 88%; aspect-ratio: 2 / 3; translate: -50% 0; z-index: 2; pointer-events: none;
  mix-blend-mode: multiply;   /* the drawing's white paper drops out, so branches show around her */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent), linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
.girl img, .girl .lids { position: absolute; inset: 0; width: 100%; height: 100%; }
/* traced white outline on top — no blend so it stays white; flips between two wobbles */
.girl-lines { z-index: 3; mix-blend-mode: normal; width: auto; filter: url(#boilA); }
.girl-lines.b { filter: url(#boilB); }
.lids .lid { transform-box: fill-box; transform-origin: 50% 0; scale: 1 0; animation: blink 4.6s infinite step-end; }
.lids rect { fill: #7d86cf; }
.lids path { fill: none; stroke: #1a1a2e; stroke-width: 6; stroke-linecap: round; }
/* hand-drawn blink: held frames, no tweening — open, half, shut, half, open */
@keyframes blink { 0% { scale: 1 0; } 89% { scale: 1 .45; } 90.5% { scale: 1 1; } 93.5% { scale: 1 .45; } 95% { scale: 1 0; } }
@media (prefers-reduced-motion: reduce) { .lids .lid { animation: none; } }
.life-word { left: 0; top: 38%; font-family: var(--round); font-weight: 300; font-size: 22cqw; line-height: .8; color: #fff; letter-spacing: -.04em; z-index: 3; }
.life-pix {
  left: 3%; top: 62%; z-index: 3; font-family: var(--pixel); font-weight: 700; font-size: 7.4cqw;
  background: conic-gradient(#ffe63a 25%, #8aff6a 0 50%, #ffe63a 0 75%, #ff8ade 0) 0 0 / 6px 6px;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, .6);
}
.gooey { left: 2%; right: 2%; bottom: 3%; display: flex; justify-content: center; z-index: 4; filter: url(#goo); }
.gooey span { font-family: var(--bubble); font-size: 21cqw; line-height: 1; color: #ff7ae8; display: inline-block; animation: goo 2.8s ease-in-out infinite; }
.gooey span:nth-child(2n) { animation-delay: -.7s; color: #ff4fd8; } .gooey span:nth-child(3n) { animation-delay: -1.4s; color: #ffb3f0; }
@keyframes goo { 50% { transform: translateY(-2.5cqw) scale(1.12, .92); } }

/* =========================================================
   11 · MANIFESTO
   ========================================================= */
.rings { width: 100%; height: 100%; z-index: 1; filter: blur(1.3px); }
.paint { inset: 0; width: 100%; height: 100%; z-index: 2; }
/* same pixel paint, neon green, over the text: "lighten" turns black text green where the paint covers it and leaves the cyan cyan */
.paint-over { z-index: 5; mix-blend-mode: lighten; pointer-events: none; }
/* the drawing sits on top of the mint pixels, between the top text and the quote */
.mf-girl { right: 1%; top: 24.5%; width: 52cqw; height: auto; z-index: 5; pointer-events: none; }
.mf-top { left: 4%; top: 3%; z-index: 3; font-family: var(--wide); font-size: 5.4cqw; line-height: 1; display: flex; flex-direction: column; }
.mf-top span:nth-child(2n) { color: #1fd61f; mix-blend-mode: multiply; }
.mf-de { right: 4%; top: 13%; width: 42%; z-index: 3; font-family: var(--wide); font-stretch: 75%; font-size: 3.4cqw; line-height: 1; text-align: right; }
.mf-big {
  left: 3%; top: 31%; z-index: 4; pointer-events: none;
  font-family: var(--wide); font-weight: 600; font-stretch: 125%; font-size: 11.4cqw; line-height: .96; letter-spacing: .01em;
  color: transparent; -webkit-text-stroke: .22cqw #111;
}
.mf-big::after { content: "A HAT IS\A WHAT YOU\A MAKE OF\A IT."; white-space: pre; position: absolute; left: 4cqw; top: 0; color: #22ff22; -webkit-text-stroke: 0; mix-blend-mode: multiply; opacity: .75; clip-path: inset(0 0 0 52%); }
.mf-boxes b { position: absolute; z-index: 6; background: #111; color: #fff; font-family: var(--wide); font-weight: 800; font-size: 4cqw; padding: .2cqw 1.2cqw; outline: .5cqw solid #33ffd6; }
.mf-quote { right: 4%; bottom: 16%; width: 44%; z-index: 4; font-family: var(--wide); font-size: 2.3cqw; line-height: 1.15; }
.mf-small { left: 4%; bottom: 20%; font-family: var(--wide); font-size: 2.3cqw; z-index: 4; }
.mf-name { right: 4%; bottom: 3%; z-index: 4; font-family: var(--wide); font-size: 8cqw; line-height: .9; text-align: right; display: flex; flex-direction: column; }
.mf-name span:last-child { color: #1fd61f; mix-blend-mode: multiply; }
.mf-year { left: 4%; bottom: 3%; z-index: 4; font-family: var(--wide); font-size: 6cqw; }

/* =========================================================
   14 · HAT PART TIME
   ========================================================= */
.gcol { width: 13%; z-index: 1; border-radius: 50cqw 50cqw 0 0; background: repeating-linear-gradient(90deg, #a8a8a8 0 .8cqw, transparent .8cqw 1.8cqw); }
.gcol.c1 { left: 8%; top: 48%; bottom: 0; } .gcol.c2 { right: 6%; top: 54%; bottom: 10%; } .gcol.c3 { left: 44%; top: 6%; height: 18%; border-radius: 0; }
.limeband { left: 22%; top: 12%; width: 32%; bottom: 0; background: #b4ff1f; z-index: 0; }
.stepband { right: 0; top: 4%; width: 52%; height: 22%; z-index: 1;
  background: repeating-linear-gradient(0deg, #ff1ad9 0 .8cqw, #ff3b1f .8cqw 1.6cqw);
  clip-path: polygon(0 0, 18% 0, 18% 10%, 30% 10%, 30% 22%, 44% 22%, 44% 36%, 58% 36%, 58% 52%, 72% 52%, 72% 68%, 86% 68%, 86% 84%, 100% 84%, 100% 100%, 76% 100%, 76% 88%, 62% 88%, 62% 74%, 48% 74%, 48% 60%, 34% 60%, 34% 46%, 20% 46%, 20% 32%, 6% 32%, 6% 18%, 0 18%); }
.barcode { height: 6%; z-index: 2; background: repeating-linear-gradient(90deg, #222 0 3px, transparent 3px 5px, #222 5px 6px, transparent 6px 10px, #222 10px 14px, transparent 14px 16px); }
.barcode.b1 { right: 4%; top: 13%; width: 30%; } .barcode.b2 { left: 40%; bottom: 3%; width: 22%; } .barcode.b3 { left: 30%; top: 2%; width: 18%; }
.stripe-letters { left: 27%; top: 15%; z-index: 4; display: grid; justify-items: center; gap: 1.4cqh; }
.stripe-letters span {
  font-family: var(--wide); font-weight: 900; font-stretch: 125%; font-size: 15cqw; line-height: .78;
  background: repeating-linear-gradient(90deg, #ffff3d 0 2.2cqw, #33bbff 2.2cqw 4.4cqw) 0 0 / 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: .9cqw #333;
  animation: stripes 3s linear infinite;
}
.stripe-letters span:nth-child(2) { animation-direction: reverse; }
@keyframes stripes { to { background-position: -4.4cqw 0; } }
.target { width: 13cqw; height: 13cqw; border-radius: 50%; z-index: 3;
  background: radial-gradient(circle, #ffff3d 0 22%, #111 23% 30%, #33bbff 31% 50%, #111 51% 58%, #ffff3d 59% 92%, #111 93%); }
.target.t1 { left: 5%; top: 24%; } .target.t2 { right: 5%; bottom: 7%; }
.cross { width: 8cqw; height: 8cqw; z-index: 3; animation: spin 8s linear infinite; }
.cross.x1 { left: 30%; top: 24%; } .cross.x2 { left: 30%; top: 54%; }
.s7 { width: 9cqw; height: 9cqw; fill: none; stroke: #333; stroke-width: 5; z-index: 3; animation: spin 10s linear infinite reverse; }
.s7a { left: 6%; top: 8%; } .s7b { left: 6%; top: 62%; }
.pt-part { left: 56%; top: 38%; width: 13cqw; height: 13cqw; border: .5cqw solid #333; border-radius: 50%; display: grid; place-items: center; text-align: center; font-family: var(--wide); font-weight: 800; font-size: 3.4cqw; line-height: .85; color: #333; z-index: 5; }
.pt-hat { left: 6%; top: 40%; font-family: var(--wide); font-weight: 900; font-size: 9cqw; color: #333; z-index: 5; letter-spacing: -.04em; }
.pt-time { right: 8%; top: 40%; font-family: var(--wide); font-weight: 900; font-size: 4.6cqw; color: #333; z-index: 5; }
.pt-mono { z-index: 5; font-size: max(8px, 1.3cqw); color: #333; }
.pt-mono.m1 { left: 23%; top: 14%; } .pt-mono.m2 { left: 23%; top: 47%; }
.pt-when { left: 6%; right: 18%; bottom: 8%; z-index: 6; font-family: var(--wide); font-weight: 800; color: #333; font-size: 4cqw; line-height: 1; letter-spacing: -.02em; }
.pt-when .big { font-size: 8.6cqw; }

/* =========================================================
   19 · BLOOMING
   ========================================================= */
.bl-card { left: 9%; right: 9%; top: 13%; bottom: 14%; background: linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px) 0 0 / 14px 14px, linear-gradient(0deg, rgba(0,0,0,.035) 1px, transparent 1px) 0 0 / 14px 14px, #fff; z-index: 2; box-shadow: 0 10px 30px -10px rgba(0, 0, 0, .25); overflow: hidden; }
.bl-card > * { position: absolute; }
.bloom { inset: 0; width: 100%; height: 100%; }

/* =========================================================
   21 · FOOTER (glyph texture)
   ========================================================= */
.glyph-word { left: 3%; right: 3%; top: 4%; bottom: 20%; z-index: 2; display: grid; grid-template-columns: 1fr; align-content: space-between;
  font-family: var(--pixel); font-weight: 700; font-size: 21cqw; line-height: .82; letter-spacing: -.04em; }
.glyph-word span, .blendword .g1, .blendword .g2 { -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .5)); }
.glyph-word .g1, .blendword .g1 { -webkit-text-stroke: 2px #5a6fd8; } .glyph-word .g2, .blendword .g2 { -webkit-text-stroke: 2px #157a48; }
.glyph-word .g1, .blendword .g1 { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='14'><rect width='40' height='14' fill='%23b7c4f4'/><text x='0' y='11' font-family='Georgia,serif' font-size='11' fill='%235a6fd8'>✿yu☆</text></svg>"); background-size: 40px 14px; }
.glyph-word .g2, .blendword .g2 { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='14'><rect width='40' height='14' fill='%237de0b0'/><text x='0' y='11' font-family='Georgia,serif' font-size='11' fill='%23157a48'>♡zu✿</text></svg>"); background-size: 40px 14px; text-align: right; animation: gscroll 6s linear infinite; }
.glyph-word .g1, .blendword .g1 { animation: gscroll 8s linear infinite reverse; }
@keyframes gscroll { to { background-position: 40px 14px; } }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px; }

.colophon { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); background: #fff; position: relative; z-index: 64; }
.colophon > div { padding: 16px 12px 40px; }
.colophon .mono { margin-bottom: 8px; }
.colophon a { color: inherit; text-underline-offset: 3px; }
.colophon a:hover, .colophon a:focus-visible { color: #1f2bd6; }

/* pixel sprites */
.pix { image-rendering: pixelated; image-rendering: crisp-edges; }

/* =========================================================
   responsive
   ========================================================= */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .nav { gap: 8px; padding: 0 8px; }
  /* no section buttons on phones */
  .secnav { display: none; }
  .sec { grid-template-columns: 1fr; min-height: 0; }
  .photo, .flip .photo { order: -1; border: 0; border-bottom: 1px solid var(--line); }
  /* hats first: the gallery / product photos come before each section's poster */
  .side, .flip .side { order: -2; border: 0; border-bottom: 1px solid var(--line); padding: 40px 16px 56px; }
  .side-head { position: relative; top: 0; }
  .photo .stick { position: relative; top: 0; height: auto; padding: 24px 16px; }
  .ref img { max-height: 70vh; }
  .art { min-height: 0; }
  .stage { height: calc(100svh - var(--nav)); }
  .flow { padding: 82svh 16px 12svh; }
  .colophon { grid-template-columns: 1fr; }
  .colophon > div { padding-bottom: 16px; }
  .blendword { font-size: 9vw; }
}

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

/* =========================================================
   06–09 · RISO POSTERS
   ========================================================= */
.pd-empty { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #fff 0 8px, #f2f2f2 8px 16px); }
.pd-empty span { color: rgba(0, 0, 0, .4); }
/* risograph grain: a speckled ink layer on top of each poster */
.riso::after {
  content: ""; position: absolute; inset: 0; z-index: 999; pointer-events: none; mix-blend-mode: multiply; opacity: .5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .2  0 0 0 0 .3  0 0 0 -1.1 .62'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
}

/* 31 · yuzu riddle */
.s31 .stage { background: #050505; }
/* a black board of panels: the poster, two panels where letters keep assembling, a zoomed crop, a small copy */
.nz-board { inset: 0; }
.nz-board > * { position: absolute; }
.nz-panel { overflow: hidden; background: #f7f5f3; container-type: size; }
.nz-panel > .nz-bars { position: absolute; inset: 0; }
.nz-a { inset: 0; }
.nz-bars { animation: nzhue 3s linear infinite; }
@keyframes nzhue { to { filter: hue-rotate(360deg); } }
.nz-paper { inset: 0; overflow: hidden; }
.nz-paper > * { position: absolute; }
.nz-col { writing-mode: vertical-rl; font-family: var(--wide); font-stretch: 62%; font-weight: 500; font-size: 7.4cqw; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1px #9d98ab; white-space: nowrap; }
.nz-bars { inset: 0; }
.nz-bars i { position: absolute; left: 0; top: 0; mix-blend-mode: multiply; will-change: transform; }
.nz-letters { inset: 0; pointer-events: none; z-index: 3; }
.nz-letters span { position: absolute; font-family: var(--wide); font-stretch: 75%; font-weight: 400; font-size: 10cqw; line-height: 1; color: #111; rotate: var(--r); animation: nzfloat 3.6s ease-in-out infinite; animation-delay: calc(var(--d) * -1s); }
@keyframes nzfloat { 50% { transform: translateY(-12%) rotate(4deg); } }

.riso { isolation: isolate; }

/* =========================================================
   06–10 · NEW HAT POSTERS
   ========================================================= */
/* 44 · corner tiles: a text lineup over black tiles, S and Y in pink → mint gradient tiles */
.s44 .stage { background: #f3f2ef; }
.kt-cv { inset: 0; width: 100%; height: 100%; }
.kt-text { inset: 0; pointer-events: none; font-family: "Bodoni Moda", serif; text-transform: uppercase; color: #161616; }
.kt-text p { position: absolute; font-size: max(8px, 1.9cqw); line-height: 1.02; letter-spacing: .01em; background: #f3f2ef; padding: .15em .25em; }
.kt-v { writing-mode: vertical-rl; font-size: max(10px, 2.6cqw) !important; white-space: nowrap; }
.kt-v.kt-big { font-size: max(12px, 3.4cqw) !important; }
.kt-text p.kt-b { font-size: max(10px, 2.8cqw); bottom: 8% !important; }
/* 07 · chart flower: a white flower in cross-stitch chart symbols on a cobalt grid */
.s07 .stage { background: #1b3fd9; }
.gx-cv { inset: 0; width: 100%; height: 100%; }