/* =========================================================
   TOKENS
   ========================================================= */
:root {
  --paper:   #FFF8EE;  /* warm ivory base */
  --paper-2: #FBEFDD;  /* deeper cream for panels */
  --ink:     #2A2440;  /* plum-navy text */
  --ink-2:   #5B5470;  /* secondary text */
  --line:    #E9DCC7;

  --butter:  #FFD45C;
  --coral:   #FF6B5B;
  --sky:     #74C0F2;
  --mint:    #7FDDBE;
  --lilac:   #BBA7F2;
  --peach:   #FFBF9B;
  --pink:    #FF9EC1;

  --display: "Bricolage Grotesque", "Arial Rounded MT Bold", "Trebuchet MS", sans-serif;
  --body:    "Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --hand:    "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --r-lg: 28px;
  --r-md: 18px;
  --r-sm: 10px;
  --pad: clamp(1.1rem, 4vw, 3rem);
  --max: 1280px;
}

*, *::before, *::after { box-sizing: border-box; }
:root { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
html { scroll-behavior: smooth; scroll-padding-top: calc(80px + env(safe-area-inset-top, 0px)); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 6px; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: .5rem 1rem; border-radius: 99px; z-index: 100; }
.skip:focus { left: 12px; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: .9rem var(--pad);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.nav__mark {
  font: 800 1.05rem/1 var(--display);
  text-decoration: none;
  display: inline-flex; align-items: center; gap: .5rem;
}
.nav__mark::before {
  content: ""; width: 14px; height: 14px; border-radius: 50%;
  background: conic-gradient(var(--coral) 0 25%, var(--butter) 0 50%, var(--sky) 0 75%, var(--mint) 0);
}
.nav__links { list-style: none; display: flex; gap: .25rem; margin: 0; padding: 0; }
.nav__links a {
  display: block; padding: .45rem .8rem; border-radius: 99px;
  text-decoration: none; font-weight: 500; font-size: .95rem;
  transition: background .2s;
}
.nav__links a:hover { background: var(--paper-2); }

/* =========================================================
   SHARED
   ========================================================= */
section { padding: clamp(3rem, 8vw, 6.5rem) var(--pad); }
.section-head { max-width: var(--max); margin: 0 auto 2rem; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 2rem; }
.section-head h2, .section-head h3 { margin: 0; font: 800 clamp(2rem, 5vw, 3.4rem)/1 var(--display); letter-spacing: -0.02em; }
.section-head--small h3 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
.section-head p { margin: 0; color: var(--ink-2); max-width: 46ch; }

.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .85rem 1.4rem; border-radius: 99px;
  background: var(--ink); color: var(--paper);
  font-weight: 600; text-decoration: none; border: 2px solid var(--ink);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
  box-shadow: 0 4px 0 var(--coral);
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 var(--coral); }
.btn--ghost { background: transparent; color: var(--ink); box-shadow: 0 4px 0 var(--butter); }
.btn--ghost:hover { box-shadow: 0 6px 0 var(--butter); }
.btn--small { padding: .55rem 1rem; font-size: .92rem; }

.hand { font: 700 1.6rem/1.1 var(--hand); color: var(--coral); margin: 0; }

.chip {
  display: inline-block;
  padding: .28rem .7rem; border-radius: 99px;
  font-size: .8rem; font-weight: 600; line-height: 1.3;
  background: var(--cat, var(--butter));
}

/* category colours */
[data-cat="Illustration"]     { --cat: var(--butter); --cat-soft: #FFF1C4; }
[data-cat="Cinematic & 3D"]   { --cat: var(--sky);    --cat-soft: #DDEFFC; }
[data-cat="Handmade"]         { --cat: var(--peach);  --cat-soft: #FFE6D6; }
[data-cat="Paper & material"] { --cat: var(--lilac);  --cat-soft: #ECE5FC; }
[data-cat="Retro & anime"]    { --cat: var(--pink);   --cat-soft: #FFE2EC; }
[data-cat="Experiments"]      { --cat: var(--mint);   --cat-soft: #DDF6ED; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4rem); align-items: center;
  padding-top: clamp(2rem, 5vw, 4rem);
}
.hero__title { margin: 0 0 1.4rem; font-family: var(--display); line-height: .88; letter-spacing: -0.035em; }
.hero__num {
  display: inline-block;
  font-weight: 800; font-size: clamp(6rem, 17vw, 12.5rem);
  color: var(--paper);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 7px 7px 0 var(--coral);
  transform: rotate(-4deg); transform-origin: left bottom;
  margin-bottom: .1em;
}
.hero__line { display: block; font-weight: 800; font-size: clamp(2.5rem, 6vw, 4.9rem); white-space: nowrap; }
.hero__line:last-child { padding-left: .9em; }
.hero__lede { max-width: 44ch; font-size: 1.12rem; color: var(--ink-2); margin: 0 0 1.4rem; }
.hero__stickers { list-style: none; padding: 0; margin: 0 0 1.8rem; display: flex; flex-wrap: wrap; gap: .6rem; }
.sticker {
  padding: .45rem .95rem; border-radius: 99px;
  font: 600 .95rem/1.2 var(--body);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
}
.sticker:nth-child(1) { transform: rotate(-2deg); }
.sticker:nth-child(2) { transform: rotate(1.5deg); }
.sticker:nth-child(3) { transform: rotate(-1deg); }
.sticker--butter { background: var(--butter); }
.sticker--sky { background: var(--sky); }
.sticker--pink { background: var(--pink); }

/* pinboard of film tiles */
.hero__board { position: relative; aspect-ratio: 1 / .92; }
.tile {
  position: absolute; width: 46%;
  padding: 7px; background: #fff; border-radius: 14px;
  box-shadow: 0 10px 24px -12px rgba(42, 36, 64, .45);
  transform: rotate(var(--rot, 0deg));
  transition: transform .35s ease;
  cursor: pointer; border: 0;
}
.tile:hover, .tile:focus-visible { transform: rotate(0deg) scale(1.04); z-index: 5; }
.tile video, .tile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 9px; background: var(--paper-2); }
.tile::before { /* washi tape */
  content: ""; position: absolute; top: -10px; left: 50%; width: 64px; height: 20px;
  transform: translateX(-50%) rotate(-3deg);
  background: var(--tape, var(--butter)); opacity: .85; border-radius: 3px;
}
.tile:nth-child(1) { top: 2%;  left: 0;   --rot: -5deg; --tape: var(--sky); }
.tile:nth-child(2) { top: 0;   left: 52%; --rot: 4deg;  --tape: var(--pink); }
.tile:nth-child(3) { top: 34%; left: 22%; --rot: 2deg;  --tape: var(--butter); z-index: 2; }
.tile:nth-child(4) { top: 38%; left: 64%; --rot: -3deg; --tape: var(--mint); width: 36%; }
.tile:nth-child(5) { top: 68%; left: 2%;  --rot: 3deg;  --tape: var(--lilac); width: 40%; }
.tile:nth-child(6) { top: 70%; left: 47%; --rot: -4deg; --tape: var(--peach); }
.hand--hero { position: absolute; right: 2%; bottom: -3.2rem; transform: rotate(-4deg); }
.doodle--arrow { position: absolute; width: 70px; left: 6%; bottom: -3rem; color: var(--coral); transform: rotate(-150deg); }

/* =========================================================
   INTRO
   ========================================================= */
.intro { background: var(--paper-2); border-radius: var(--r-lg); margin: 3rem clamp(.6rem, 2vw, 1.5rem) 0; }
.intro__inner { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 5rem); }
.intro__title { margin: 0; font: 800 clamp(2rem, 4.6vw, 3.2rem)/1.02 var(--display); letter-spacing: -0.02em; max-width: 14ch; }
.intro__body p { margin: 0 0 1rem; max-width: 60ch; }
.intro__principle {
  display: inline-block; margin-top: .6rem !important;
  font: 600 1.25rem/1.35 var(--display);
  background: linear-gradient(transparent 58%, var(--butter) 58%);
}

/* =========================================================
   STYLE INDEX
   ========================================================= */
.styles__list { max-width: var(--max); margin: 0 auto; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; }
.styles__list button {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .5rem .9rem .5rem .55rem; border-radius: 99px;
  border: 1.5px solid var(--line); background: #fff; cursor: pointer;
  font-size: .93rem; font-weight: 500;
  transition: border-color .2s, background .2s, transform .2s;
}
.styles__list button:hover { border-color: var(--ink); transform: translateY(-1px); }
.styles__list .n {
  display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%;
  background: var(--cat); font: 700 .72rem/1 var(--body);
}

/* =========================================================
   FILTERS
   ========================================================= */
.filters { max-width: var(--max); margin: 0 auto 1.8rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.filters__chips { display: flex; flex-wrap: wrap; gap: .45rem; min-width: 0; max-width: 100%; }
.filters__select { display: block; min-width: 0; max-width: 100%; }
.filters__chips button {
  padding: .5rem 1rem; border-radius: 99px; cursor: pointer;
  border: 2px solid var(--ink); background: transparent;
  font-weight: 600; font-size: .92rem;
  transition: background .2s, transform .15s;
}
.filters__chips button:hover { transform: translateY(-1px); background: var(--cat-soft, var(--paper-2)); }
.filters__chips button[aria-pressed="true"] { background: var(--cat, var(--ink)); color: var(--ink); box-shadow: 3px 3px 0 var(--ink); }
.filters__chips button[data-cat="all"][aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: 3px 3px 0 var(--coral); }
.filters__select select {
  appearance: none; -webkit-appearance: none;
  padding: .6rem 2.4rem .6rem 1rem; border-radius: 99px;
  border: 2px solid var(--line); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%232A2440' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 1rem center;
  font: 500 .92rem var(--body); color: var(--ink); max-width: 100%;
  cursor: pointer;
}

/* =========================================================
   GRID + CARDS
   ========================================================= */
.grid { max-width: var(--max); margin: 0 auto; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2.2vw, 1.8rem); }
.card { position: relative; }
.card[hidden] { display: none; }
.card__btn {
  display: block; width: 100%; text-align: left; cursor: pointer;
  padding: 10px 10px 1.1rem; border: 0; border-radius: var(--r-md);
  background: var(--cat-soft);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card__btn:hover { transform: translateY(-4px) rotate(-.4deg); box-shadow: 0 16px 28px -18px rgba(42, 36, 64, .55); }
.card__media { position: relative; border-radius: 12px; overflow: hidden; background: var(--ink); aspect-ratio: 16 / 9; }
.card__media video, .card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card__btn:hover .card__media video, .card__btn:hover .card__media img { transform: scale(1.035); }
.card__play {
  position: absolute; right: 10px; bottom: 10px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--paper); display: grid; place-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
  transition: transform .25s;
}
.card__play svg { width: 14px; height: 14px; margin-left: 2px; }
.card__btn:hover .card__play { transform: scale(1.12); }
.card__body { padding: .95rem .45rem 0; display: grid; grid-template-columns: auto 1fr; column-gap: .8rem; row-gap: .35rem; align-items: baseline; }
.card__num { font: 800 1.9rem/1 var(--display); letter-spacing: -0.03em; transition: transform .25s, color .25s; }
.card__btn:hover .card__num { transform: rotate(-6deg) scale(1.08); color: var(--coral); }
.card__brand { margin: 0; font: 800 1.25rem/1.15 var(--display); letter-spacing: -0.01em; }
.card__style { grid-column: 1 / -1; justify-self: start; }
.card__idea { grid-column: 1 / -1; margin: .2rem 0 0; color: var(--ink-2); font-size: .96rem; line-height: 1.5; }

/* motifs: a small accent borrowed from each style */
.card__motif { position: absolute; top: -12px; right: 18px; width: 46px; height: 30px; pointer-events: none; z-index: 2; transition: transform .35s ease; }
.card__btn:hover + .card__motif, .card:hover .card__motif { transform: translateY(-3px) rotate(6deg); }
.motif-thread   { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M2 22 C 10 4, 18 30, 26 12 S 40 6, 44 18' fill='none' stroke='%23FF6B5B' stroke-width='2.5' stroke-dasharray='4 3' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-stitch   { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Crect x='4' y='6' width='38' height='18' rx='9' fill='%237FDDBE'/%3E%3Crect x='8' y='10' width='30' height='10' rx='5' fill='none' stroke='%23FFF8EE' stroke-width='1.6' stroke-dasharray='3 2'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-fold     { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M6 26 L23 3 L40 26 Z' fill='%23BBA7F2'/%3E%3Cpath d='M23 3 L23 26 L40 26 Z' fill='%23A08BE6'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-pixel    { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30' shape-rendering='crispEdges'%3E%3Crect x='6' y='14' width='8' height='8' fill='%23FF9EC1'/%3E%3Crect x='14' y='6' width='8' height='8' fill='%23FFD45C'/%3E%3Crect x='22' y='14' width='8' height='8' fill='%2374C0F2'/%3E%3Crect x='30' y='6' width='8' height='8' fill='%237FDDBE'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-glass    { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cg stroke='%232A2440' stroke-width='1.5' opacity='.9'%3E%3Cpath d='M4 26 L16 4 L24 26 Z' fill='%2374C0F2'/%3E%3Cpath d='M16 4 L34 8 L24 26 Z' fill='%23FFD45C'/%3E%3Cpath d='M34 8 L42 26 L24 26 Z' fill='%23FF9EC1'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain; }
.motif-rings    { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cg fill='none' stroke='%23C98C5A' stroke-width='2'%3E%3Cellipse cx='23' cy='15' rx='18' ry='11'/%3E%3Cellipse cx='23' cy='15' rx='11' ry='6.5'/%3E%3Cellipse cx='23' cy='15' rx='4' ry='2.5'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain; }
.motif-blob     { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M8 18 C 4 6, 20 2, 26 6 S 44 8, 40 20 S 12 30, 8 18 Z' fill='%23FFBF9B'/%3E%3Cellipse cx='18' cy='12' rx='4' ry='2' fill='%23fff' opacity='.7'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-halftone { background: radial-gradient(circle, var(--coral) 2.4px, transparent 2.6px) 0 0/8px 8px; border-radius: 50%; }
.motif-brush    { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M3 20 C 14 8, 30 26, 43 10' fill='none' stroke='%232A2440' stroke-width='5' stroke-linecap='round' opacity='.85'/%3E%3Ccircle cx='38' cy='9' r='4' fill='%23FF6B5B'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-chalk    { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Crect x='3' y='3' width='40' height='24' rx='5' fill='%232A2440'/%3E%3Cpath d='M10 20 C 16 10, 22 22, 28 12 S 36 12, 38 9' fill='none' stroke='%23FFF8EE' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-scribble { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M4 16 L10 8 L14 22 L20 6 L24 22 L30 8 L34 20 L42 10' fill='none' stroke='%2374C0F2' stroke-width='3' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-tape     { background: repeating-linear-gradient(45deg, #FFD45C 0 5px, #FFE591 5px 10px); height: 20px; border-radius: 3px; transform: rotate(6deg); opacity: .9; }
.motif-brick    { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Crect x='4' y='12' width='38' height='14' rx='2' fill='%23FF6B5B'/%3E%3Cg fill='%23FF8C7F'%3E%3Crect x='8' y='6' width='8' height='6' rx='2'/%3E%3Crect x='19' y='6' width='8' height='6' rx='2'/%3E%3Crect x='30' y='6' width='8' height='6' rx='2'/%3E%3C/g%3E%3C/svg%3E") no-repeat center/contain; }
.motif-sun      { background: radial-gradient(circle at 50% 100%, var(--coral) 0 11px, transparent 11.5px), repeating-linear-gradient(0deg, transparent 0 3px, var(--butter) 3px 5px); border-radius: 23px 23px 0 0; height: 24px; top: -6px; }
.motif-neon     { border: 2.5px solid var(--pink); border-radius: 8px; box-shadow: 0 0 8px var(--pink), inset 0 0 6px var(--sky); height: 22px; }
.motif-speed    { background: repeating-linear-gradient(180deg, var(--coral) 0 3px, transparent 3px 7px); border-radius: 2px; transform: skewX(-20deg); height: 24px; }
.motif-bolt     { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M26 2 L12 17 L22 17 L18 28 L34 12 L24 12 Z' fill='%23FFD45C' stroke='%232A2440' stroke-width='1.8' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-facet    { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M4 26 L16 8 L24 18 Z' fill='%2374C0F2'/%3E%3Cpath d='M16 8 L30 4 L24 18 Z' fill='%23A7D8F7'/%3E%3Cpath d='M30 4 L42 26 L24 18 Z' fill='%234FA6DE'/%3E%3Cpath d='M4 26 L24 18 L42 26 Z' fill='%238CCBF4'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-iso      { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M23 3 L40 11 L23 19 L6 11 Z' fill='%23FFD45C'/%3E%3Cpath d='M6 11 L23 19 L23 28 L6 20 Z' fill='%2374C0F2'/%3E%3Cpath d='M40 11 L23 19 L23 28 L40 20 Z' fill='%234FA6DE'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-line     { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M2 22 C 12 22, 14 8, 24 10 S 36 24, 44 8' fill='none' stroke='%23FF8A3D' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-sticker  { background: var(--butter); border: 3px solid #fff; border-radius: 50%; width: 34px; height: 34px; box-shadow: 0 3px 6px rgba(0,0,0,.18); transform: rotate(-8deg); }
.motif-wash     { background: radial-gradient(closest-side, rgba(116,192,242,.85), rgba(116,192,242,0)), radial-gradient(closest-side at 70% 60%, rgba(255,158,193,.7), transparent); border-radius: 50%; }
.motif-star     { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M23 2 L26 12 L36 13 L28 19 L31 28 L23 22 L15 28 L18 19 L10 13 L20 12 Z' fill='%23FFD45C' stroke='%232A2440' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-sprout   { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M23 28 V14' stroke='%233FA46A' stroke-width='2.5'/%3E%3Cpath d='M23 16 C 12 16, 10 6, 12 4 C 20 4, 23 10, 23 16 Z' fill='%237FDDBE'/%3E%3Cpath d='M23 14 C 32 14, 36 6, 34 3 C 27 3, 23 8, 23 14 Z' fill='%237FDDBE'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-grain    { background: radial-gradient(circle, #D9B77E 1.2px, transparent 1.6px) 0 0/5px 5px, radial-gradient(circle, #C49A5C 1px, transparent 1.4px) 2px 3px/7px 6px; border-radius: 40% 60% 50% 50%; }
.motif-flare    { background: radial-gradient(circle at 35% 50%, #fff 0 4px, rgba(255,212,92,.9) 5px, transparent 14px), radial-gradient(circle at 75% 55%, rgba(116,192,242,.6) 0 5px, transparent 7px); }
.motif-dot      { background: radial-gradient(circle at 30% 50%, var(--coral) 0 8px, transparent 8.5px), radial-gradient(circle at 72% 50%, var(--sky) 0 8px, transparent 8.5px); }
.motif-drop     { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'%3E%3Cpath d='M23 2 C 30 12, 32 16, 32 20 A 9 9 0 0 1 14 20 C 14 16, 16 12, 23 2 Z' fill='%237FDDBE' stroke='%232A2440' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat center/contain; }
.motif-stripe   { background: repeating-linear-gradient(90deg, var(--coral) 0 6px, #fff 6px 12px); border-radius: 0 0 10px 10px; height: 16px; top: -4px; box-shadow: 0 2px 0 rgba(42,36,64,.15); }

/* experiments */
.experiments { max-width: var(--max); margin: clamp(3rem, 7vw, 5rem) auto 0; padding-top: clamp(2rem, 5vw, 3rem); border-top: 2px dashed var(--line); }
.experiments[hidden] { display: none; }
.card__spec { font: 700 1.1rem/1 var(--hand); color: var(--ink-2); grid-column: 1 / -1; }
.empty { max-width: var(--max); margin: 1rem auto; text-align: center; color: var(--ink-2); }
.linkbtn { background: none; border: 0; text-decoration: underline; cursor: pointer; font-weight: 600; }

/* =========================================================
   CLOSING + CONTACT
   ========================================================= */
.closing { max-width: var(--max); margin: 0 auto; text-align: center; }
.closing__big { margin: 0 auto 1.2rem; font: 800 clamp(2.4rem, 7.5vw, 5.8rem)/.95 var(--display); letter-spacing: -0.035em; }
.closing__small { margin: 0 auto; max-width: 52ch; color: var(--ink-2); font-size: 1.1rem; }

.contact { padding-top: 0; }
.contact__card {
  position: relative; max-width: 880px; margin: 0 auto; text-align: center;
  background: var(--butter); border-radius: var(--r-lg); padding: clamp(2.4rem, 6vw, 4rem) var(--pad);
  border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--ink);
}
.hand--contact { position: absolute; top: -1.1rem; left: 50%; transform: translateX(-50%) rotate(-3deg); background: var(--paper); padding: .1rem .9rem; border-radius: 99px; border: 2px solid var(--ink); color: var(--coral); white-space: nowrap; }
.contact__name { margin: 0; font: 800 clamp(2rem, 5.5vw, 3.4rem)/1 var(--display); letter-spacing: -0.02em; }
.contact__role { margin: .6rem 0 1.6rem; font-weight: 500; }
.contact__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; }
.contact .btn--ghost { background: var(--paper); box-shadow: 0 4px 0 var(--ink); }
.contact .btn { box-shadow: 0 4px 0 var(--coral); }

.foot { padding: 2rem var(--pad) 3rem; text-align: center; color: var(--ink-2); font-size: .85rem; }
.foot p { max-width: 70ch; margin: 0 auto; }

/* =========================================================
   VIEWER (modal)
   ========================================================= */
.viewer {
  width: min(1180px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem);
  padding: 0; border: 0; border-radius: var(--r-lg);
  background: var(--paper); color: var(--ink);
  overflow: auto;
}
.viewer::backdrop { background: rgba(42, 36, 64, .62); backdrop-filter: blur(4px); }
.viewer[open] { animation: pop .28s ease-out; }
@keyframes pop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.viewer__inner { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.viewer__media { background: var(--ink); display: flex; align-items: center; padding: 14px; }
.viewer__media video { width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; background: #000; }
.viewer__info { padding: clamp(1.4rem, 3vw, 2.2rem); background: var(--cat-soft, var(--paper)); }
.viewer__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .7rem; margin: 0 0 .6rem; }
.viewer__num { font: 800 2.2rem/1 var(--display); }
.viewer__brand { margin: 0; font: 800 clamp(1.9rem, 3.4vw, 2.6rem)/1.02 var(--display); letter-spacing: -0.02em; }
.viewer__product { margin: .35rem 0 1.2rem; color: var(--ink-2); }
.viewer__block { margin-bottom: 1.15rem; }
.viewer__block h3 { margin: 0 0 .35rem; font: 700 1.05rem/1.2 var(--display); }
.viewer__block p { margin: 0; }
.viewer__block ul { margin: 0; padding-left: 1.15rem; }
.viewer__block li { margin-bottom: .35rem; }
.viewer__block li::marker { color: var(--coral); }
.viewer__idea p { font: 600 1.1rem/1.4 var(--display); }
.viewer__nav { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.4rem; }
.viewer__close {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: 2px solid var(--ink);
  background: var(--paper); display: grid; place-items: center; cursor: pointer;
}
.viewer__close svg { width: 18px; height: 18px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1024px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .viewer__inner { grid-template-columns: 1fr; }
  .viewer__close { background: var(--paper); }
}
@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; }
  .hero__board { aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; padding: .6rem .2rem 3.6rem; }
  .tile, .tile:nth-child(n) { position: relative; top: auto; left: auto; width: auto; }
  .tile:nth-child(n+5) { display: none; }
  .hand--hero { right: auto; left: 18%; bottom: .2rem; font-size: 1.3rem; white-space: nowrap; }
  .doodle--arrow { left: 4%; bottom: .2rem; width: 56px; }
  .intro__inner { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .nav { padding-block: .7rem; }
  .nav__mark { font-size: .95rem; }
  .nav__links a { padding: .4rem .5rem; font-size: .88rem; }
  .grid { grid-template-columns: 1fr; }
  .filters { flex-direction: column; align-items: stretch; }
  .filters__chips { flex-wrap: nowrap; overflow-x: auto; padding: 4px 4px 8px; margin: 0 -4px; scrollbar-width: none; }
  .filters__chips::-webkit-scrollbar { display: none; }
  .filters__chips button { flex: 0 0 auto; }
  .filters__select select { width: 100%; }
  .styles__list button { font-size: .86rem; padding: .4rem .75rem .4rem .45rem; }
  .hero__line:last-child { padding-left: .5em; }
  .viewer { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
}
@media (max-width: 400px) {
  .nav__mark span, .nav__mark { font-size: .88rem; }
  .nav__links { gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.contact__email { margin: -.6rem 0 1.4rem; font: 600 1.1rem/1.4 var(--body); display: flex; justify-content: center; align-items: center; gap: .6rem; flex-wrap: wrap; }
.copybtn { padding: .3rem .8rem; border-radius: 99px; border: 2px solid var(--ink); background: var(--paper); font-weight: 600; font-size: .85rem; cursor: pointer; }

/* more work */
.more { padding-top: 0; }
.more__card {
  max-width: 880px; margin: 0 auto; display: flex; align-items: center; gap: clamp(1rem, 4vw, 2.4rem);
  padding: clamp(1.4rem, 4vw, 2.2rem); border-radius: var(--r-lg);
  background: var(--lilac); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
  text-decoration: none; transition: transform .2s ease, box-shadow .2s ease;
}
.more__card:hover { transform: translate(-2px, -2px); box-shadow: 8px 8px 0 var(--ink); }
.more__count { font: 800 clamp(3rem, 9vw, 5rem)/1 var(--display); letter-spacing: -0.04em; color: var(--paper); -webkit-text-stroke: 2px var(--ink); text-shadow: 4px 4px 0 var(--ink); flex: 0 0 auto; }
.more__text { display: grid; gap: .35rem; }
.more__title { font: 800 clamp(1.4rem, 3.2vw, 1.9rem)/1.1 var(--display); }
.more__desc { color: var(--ink); max-width: 56ch; }
.more__link { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 560px) { .more__card { flex-direction: column; align-items: flex-start; } }