/* Robert Capron — portfolio styles */

/* ── FONTS — from the Figma style sheet ── */
@font-face {
  font-family: 'Tosh a'; font-weight: 400; font-display: swap;
  src: local('Tosh a'), local('Tosh a Regular'), local('ToshA-Regular'),
       url('fonts/ToshA-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Tosh a'; font-weight: 500; font-display: swap;
  src: local('Tosh a Medium'), local('ToshA-Medium'),
       url('fonts/ToshA-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Tosh a'; font-weight: 700; font-display: swap;
  src: local('Tosh a Bold'), local('ToshA-Bold'),
       url('fonts/ToshA-Bold.woff2') format('woff2');
}
@font-face {
  font-family: 'Coolvetica'; font-weight: 400 700; font-display: swap;
  src: local('Coolvetica'), local('Coolvetica Rg'), local('CoolveticaRg-Regular'),
       url('fonts/Coolvetica.woff2') format('woff2');
}

/* ── TOKENS ── */
:root {
  /* spacing — Figma variables xs / s / (m) / lg / xl / xxl */
  --xs: 4px; --s: 8px; --m: 16px; --lg: 24px; --xl: 48px; --xxl: 96px;
  /* one page gutter, shared by the nav, hero, sections and wall */
  --gutter: clamp(16px, 3.3vw, 48px);

  /* type — Figma style sheet (16 / 24 / 36 / 64 / 96) as a fluid scale */
  --f-body: 'Tosh a', 'Outfit', system-ui, sans-serif;
  --f-display: 'Coolvetica', 'Inter Tight', 'Helvetica Neue', sans-serif;
  --fs-micro: 11px;
  --fs-small: 14px;
  --fs-body: 16px;
  --fs-lead: clamp(20px, 1.8vw, 28px);
  --fs-h3: clamp(24px, 2.1vw, 32px);
  --fs-h2: clamp(48px, 7.2vw, 112px);
  --fs-display: clamp(72px, 13.5vw, 232px);

  /* colour — pulled from the mood board */
  --paper: #f4f3ef;   /* poster stock */
  --ink:   #0c0c0e;
  --blue:  #1f47d6;   /* liquid speckle ink */
  --swirl: #6b8fff;   /* periwinkle from the hero swirl */
  --pink:  #ff4fa8;

  /* theme — --bg is driven from JS; .dark flips the foreground */
  --bg:    var(--paper);
  --fg:    var(--ink);
  --muted: rgba(12,12,14,0.5);
  --rule:  rgba(12,12,14,0.14);
}
html.dark {
  --fg:    var(--paper);
  --muted: rgba(244,243,239,0.55);
  --rule:  rgba(244,243,239,0.16);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--fg); transition: color 0.4s;
  font-family: var(--f-body); font-size: var(--fs-body); line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; font-kerning: normal;
  overflow-x: hidden;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3 { font-weight: inherit; text-wrap: balance; }
p { text-wrap: pretty; }

/* type roles */
.display { font-family: var(--f-display); font-weight: 700; letter-spacing: -0.01em; line-height: 0.9; }
.micro   { font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; line-height: 1.4; }
.num     { font-variant-numeric: tabular-nums; }
.muted   { color: var(--muted); }
.vert    { writing-mode: vertical-rl; transform: rotate(180deg); }

/* ── GRAIN — sits over everything, like printed stock ── */
#grain {
  position: fixed; inset: -50%; z-index: 90; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grainShift 0.8s steps(4) infinite;
}
@keyframes grainShift {
  0% { transform: translate(0,0); } 25% { transform: translate(-3%,2%); }
  50% { transform: translate(2%,-3%); } 75% { transform: translate(-2%,-1%); }
}

/* ── LOGO — animated skull mark, top left (kept out of the nav's blend so its colours hold) ── */
#logo {
  position: fixed; top: var(--gutter); left: var(--gutter); z-index: 81;
  display: block; width: 36px; height: 40px; line-height: 0;
  opacity: var(--ui-in, 1); transition: opacity 0.3s, transform 0.3s cubic-bezier(.2,.8,.2,1);
}
#logo:hover { transform: translateY(-2px) rotate(-4deg); }
#logo svg { width: 100%; height: 100%; display: block; overflow: visible; }
#logo:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }

/* ── NAV — difference blend so it reads on paper and on black ── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 80;
  display: flex; justify-content: flex-end; align-items: flex-start;
  padding: var(--gutter); color: #fff; mix-blend-mode: difference;
  pointer-events: none; transition: opacity 0.3s; opacity: var(--ui-in, 1);
}
#nav a { pointer-events: auto; text-decoration: none; }
#nav ul { list-style: none; display: flex; gap: clamp(24px, 3vw, 43px); }
#nav li a { display: flex; gap: 7.5px; align-items: baseline; font-size: 17.5px; font-weight: 500; letter-spacing: -0.005em; }
#nav li a .micro { font-size: 12.5px; opacity: 0.55; letter-spacing: 0.08em; }
#nav li a .lbl { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.3s cubic-bezier(.2,.8,.2,1); padding-bottom: 1px; }
#nav li a:hover .lbl { background-size: 100% 1px; }

/* ── HERO — pinned while the blob dissolves ── */
/* 90vh of intro (blob shrinks, UI fades in) + the 130vh dissolve */
#hero { position: relative; height: 320vh; }
#home { position: absolute; top: 90vh; left: 0; width: 1px; height: 1px; }
/* after the intro has played: no intro stretch, so you can't scroll back to it (script.js: finishIntro) */
html.intro-done #hero { height: 230vh; }
html.intro-done #home { top: 0; }
html { overflow-anchor: none; }   /* finishIntro moves the scroll itself; the browser mustn't adjust it too */
.hero-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
#blob { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* the hero: Dimensional Etch (script.js: startEtchHero); ?hero=blob shows the glass blob instead */
.hero-etch { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; border: 0; display: block; pointer-events: none; background: transparent; transform-origin: 50% 50%; }   /* behind the hero text and the sections, so it bleeds into the work wall */
/* the pixel cursor trail follows you down the whole site: over the hero's blob, but behind the
   sections' content (they sit at z 2) so it never paints over text, posters or photos */
#hero-pix { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; }
body.case-open #hero-pix { display: none; }
#blob.fallback {
  background:
    radial-gradient(40% 50% at 62% 48%, #ff9bd2 0%, #b9a4ff 35%, #9ff0d8 55%, transparent 72%),
    var(--paper);
  filter: blur(8px);
}
.hero-ui {
  position: absolute; inset: 0; padding: var(--gutter); pointer-events: none;
  opacity: var(--ui-in, 1);
  /* the cursor lens hides the real text; halftone dots are drawn in its place */
  --lx: -999px; --ly: -999px; --lr: 0px;
  -webkit-mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), transparent 84%, #000 92%);
          mask-image: radial-gradient(circle var(--lr) at var(--lx) var(--ly), transparent 84%, #000 92%);
}
#hero-type { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: var(--ui-in, 1); }
/* poster furniture: sits on a line just under the nav, and on the side edges */
.hero-date { position: absolute; top: calc(var(--gutter) + 44px); right: var(--gutter); text-align: right; }
.hero-date div + div { color: var(--muted); }
/* tiny hero switch (Etch ⇄ blob) under the date */
.hero-switch {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--s); padding: 3px 0;
  font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--muted);
  background: none; border: 0; cursor: pointer; pointer-events: auto;
}
.hero-switch .dot { width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; transition: background 0.2s; }
.hero-switch:hover, .hero-switch:focus-visible { color: var(--fg); }
.hero-switch:hover .dot, .hero-switch:focus-visible .dot { background: currentColor; }
.hero-switch:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/* top-left label mirrors the date block top-right — a poster header, clear of the intro at any height */
.hero-vert-l { position: absolute; left: var(--gutter); top: calc(var(--gutter) + 56px); color: var(--muted); }
.hero-foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: var(--gutter);
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--xl);
}
.hero-foot .intro .intro-title { white-space: nowrap; }   /* the whole title on one line */
.hero-foot .intro { max-width: none; margin-bottom: var(--lg); font-size: var(--fs-body); line-height: 1.5; }
#hero h1 { font-size: var(--fs-display); line-height: 0.84; letter-spacing: -0.01em; margin: 0 0 0.08em -0.05em; }  /* bottom margin keeps the p descender off the screen edge */
/* Coolvetica's r runs into a following t / o at display size — open those two pairs */
#hero h1 .k-rt { margin-right: 0.02em; }   /* r joins the t's crossbar */
#hero h1 .k-ro { margin-right: 0; }   /* r–o: no extra space, matches the reference */
.hero-read { text-align: right; flex-shrink: 0; }
.hero-read .pct { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.02em; margin-bottom: var(--s); }
.hero-read .track { width: 128px; height: 2px; background: var(--rule); margin: var(--m) 0 0 auto; }
.hero-read .fill  { height: 100%; width: 0; background: var(--fg); }

/* ── SECTIONS — one header pattern everywhere:
   hairline rule · index / label / meta · big display title ── */
.sec { position: relative; z-index: 2; padding: var(--xxl) var(--gutter); }
.sec-bar {
  display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--m); align-items: baseline;
  padding-top: 12px; border-top: 1px solid var(--rule);
}
.sec-bar .muted:last-child { text-align: right; }
.sec-title { font-size: var(--fs-h2); margin-top: var(--xl); }
.sec-title sup { font-family: var(--f-body); font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.14em;
                 vertical-align: top; position: relative; top: 0.9em; margin-left: 0.5em; color: var(--swirl); }

/* ── WORK — the poster wall ── */
.wall {
  display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
  gap: var(--xxl) var(--gutter); margin-top: var(--xl);
  max-width: calc(var(--cols, 3) * 440px + (var(--cols, 3) - 1) * var(--gutter));
}
.card { position: relative; cursor: pointer; outline: none; }
.card:nth-child(3n+2) { margin-top: var(--xxl); }
.card:nth-child(3n+3) { margin-top: var(--xl); }
.card-poster {
  position: relative; aspect-ratio: 3 / 4; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 1px var(--rule);
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s;
}
.card:nth-child(4n+2) .card-poster { aspect-ratio: 4 / 5; }
.card:hover .card-poster, .card:focus-visible .card-poster {
  transform: translateY(-6px);
  box-shadow: 0 28px 56px -28px rgba(12,12,14,0.35), 0 0 0 1px var(--rule);
}
.card:focus-visible .card-poster { outline: 2px solid var(--blue); outline-offset: 4px; }
.card canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
/* poster furniture printed on each card — one inset, one type size */
.pf { position: absolute; z-index: 2; pointer-events: none; color: var(--ink); }
.pf-name { top: 14px; left: 14px; }
.pf-num  { top: 14px; right: 14px; }
.pf-vert { left: 14px; bottom: 14px; color: rgba(12,12,14,0.5); }
.pf-tag  { right: 14px; bottom: 14px; background: var(--swirl); padding: 2px 6px; }
.card-meta {
  display: grid; grid-template-columns: 1fr auto; gap: var(--m); align-items: baseline;
  padding-top: var(--m); margin-top: var(--m); border-top: 1px solid var(--rule);
}
.card-meta h3 { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1; letter-spacing: -0.025em; }
.card-meta .micro { color: var(--muted); }

/* ── ABOUT ── */
#about { overflow: hidden; }
.about-body { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--xl) var(--gutter); align-items: center; margin-top: var(--xl); }
.about-text .sec-title { margin-top: 0; }
.about-media { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; width: min(760px, 100%); margin: 0 0 0 auto; padding: var(--lg) 0; }
.about-media > * { aspect-ratio: 1; width: 100%; object-fit: cover; }
/* fanned out like a hand of prints: paper border, pivot from the bottom, overlap in the middle */
.about-media img {
  position: relative; background: var(--paper); padding: 8px;
  box-shadow: 0 24px 48px -20px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.25);
  transform-origin: 50% 100%;
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.about-media img:nth-child(1) { transform: translateX(6%) rotate(-7deg); z-index: 1; }
.about-media img:nth-child(2) { transform: translateX(-6%) rotate(6deg); z-index: 2; }
/* hover: the fan opens a little; the photo under the pointer straightens and comes forward */
.about-media:hover img:nth-child(1) { transform: translateX(0) rotate(-10deg); }
.about-media:hover img:nth-child(2) { transform: translateX(0) rotate(9deg); }
.about-media img:hover { z-index: 3; }
.about-media:hover img:nth-child(1):hover { transform: translateX(-2%) translateY(-4%) rotate(-2deg) scale(1.03); }
.about-media:hover img:nth-child(2):hover { transform: translateX(2%) translateY(-4%) rotate(2deg) scale(1.03); }
.about-ph { background: #d9d9d9; color: rgba(12,12,14,0.45); padding: var(--m); }
.about-lead { margin-top: var(--xl); font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -0.01em; max-width: 20em; }
/* halftone backdrop behind About, bleeding into Contact (script.js: ABOUT BACKDROP) */
.about-backdrop { position: absolute; left: 0; width: 100%; display: block; pointer-events: none; z-index: 1; }   /* below the sections (z 2); top/height set in script.js */
/* favourites — the skull guy hides behind the WITR print (eyes peeking, the odd pop-up); clicking him sends the sprites flying out */
.about-media { position: relative; }
.about-media > .about-pals { position: absolute; inset: 0; z-index: 0; aspect-ratio: auto; width: auto; pointer-events: none; }
.about-media > .about-pals.front { z-index: 19; }   /* above the print stack (z 1-8) */
.pal canvas { display: block; image-rendering: pixelated; }
/* the skull: same die-cut paper outline as the sprites, so the black plate reads on the dark section */
.about-media > .peeker svg {
  display: block; width: 84px; height: 93px; overflow: visible;
  filter: drop-shadow(3px 0 0 #f4f1e8) drop-shadow(-3px 0 0 #f4f1e8) drop-shadow(0 3px 0 #f4f1e8) drop-shadow(0 -3px 0 #f4f1e8)
          drop-shadow(0 10px 14px rgba(0,0,0,0.45));
}
/* each flyer waits behind the middle of the photos, tiny, then arcs out to its spot */
.pal {
  position: absolute; left: 45%; top: 35%; pointer-events: none; opacity: 0;
  transform: scale(0.2) rotate(0deg);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,0.45));
  transition: left 0.6s cubic-bezier(.2,1.3,.4,1) var(--delay), top 0.6s cubic-bezier(.3,1.6,.4,1) var(--delay),
              transform 0.6s cubic-bezier(.3,1.6,.4,1) var(--delay), opacity 0.2s var(--delay);
}
.about-pals.out .pal { left: var(--x); top: var(--y); opacity: 1; transform: scale(1) rotate(var(--tilt)); pointer-events: auto; }
.about-pals.out .pal:hover { transform: scale(1.06) rotate(calc(var(--tilt) * 0.4)); transition-delay: 0s; }
/* the skull guy: a sticker on the front of the prints, wiggling, with a hop now and then */
.about-media > .peeker {
  position: absolute; left: calc(50% - 42px); bottom: 2px;   /* stuck on the front of the prints, bottom middle where they meet */ z-index: 20; aspect-ratio: auto; width: auto;
  padding: 0; border: 0; background: none; cursor: pointer;
  animation: peekBob 9s ease-in-out infinite;
  transform-origin: 50% 100%;
  transition: translate 0.35s cubic-bezier(.3,1.6,.5,1);
}
.about-media > .peeker:hover, .about-media > .peeker:focus-visible { translate: 0 -8px; animation-play-state: paused; }
.about-media > .peeker:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
/* a slow side-to-side wiggle; near the end of each 9s loop he does a little hop */
@keyframes peekBob { 0%, 100% { transform: translateY(0) rotate(-4deg); } 40% { transform: translateY(0) rotate(4deg); } 80% { transform: translateY(0) rotate(-4deg); } 86% { transform: translateY(-14px) rotate(2deg); } 92% { transform: translateY(0) rotate(-4deg); } }

/* ── CONTACT — pixel field ── */
#contact { position: relative; z-index: 2; min-height: 100vh; min-height: 100svh; overflow: hidden; }
#pixels { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.contact-ui {
  position: relative; z-index: 2; min-height: inherit; pointer-events: none;
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--xl);
  padding: var(--xxl) var(--gutter) var(--gutter);
}
.contact-ui h2 { font-size: clamp(56px, 10vw, 180px); line-height: 0.86; letter-spacing: -0.01em; margin-top: var(--xl); color: var(--paper); mix-blend-mode: difference; }
.contact-links { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s); pointer-events: auto; }
.contact-links a {
  display: inline-flex; gap: var(--s); align-items: center; text-decoration: none;
  background: var(--paper); color: var(--ink); padding: var(--s) var(--m); font-size: var(--fs-lead);
  transition: background 0.2s, color 0.2s;
}
.contact-links a:hover { background: var(--swirl); }
.contact-links svg { width: 22px; height: 22px; flex-shrink: 0; }
/* icon-only circles */
.contact-links a { width: 52px; height: 52px; padding: 0; border-radius: 50%; justify-content: center; }
.contact-links { margin-bottom: var(--lg); }
.contact-foot { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding-top: 12px; border-top: 1px solid var(--rule); color: var(--muted); }
/* big centered footer: headline, icons and legal line share one centre axis */
.contact-ui { align-items: center; text-align: center; }
.contact-ui > * { width: 100%; }
.contact-ui .sec-bar { text-align: left; }

/* rotating word in the contact headline (drawn on a canvas by script.js) */
.swap { display: inline-block; position: relative; }

/* ── CASE STUDY — circle reveal from the click point ── */
#case {
  position: fixed; inset: 0; z-index: 70; background: var(--paper); overflow-y: auto;
  /* always a light sheet, whatever the page behind it is doing */
  --fg: var(--ink); --muted: rgba(12,12,14,0.5); --rule: rgba(12,12,14,0.14); color: var(--ink);
  clip-path: circle(0px at var(--cx, 50%) var(--cy, 50%));
  transition: clip-path 0.75s cubic-bezier(.7,0,.2,1); visibility: hidden;
}
#case.open { clip-path: circle(150vmax at var(--cx, 50%) var(--cy, 50%)); visibility: visible; }
#case.closing { visibility: visible; }
.case-inner { display: grid; grid-template-columns: 5fr 7fr; min-height: 100vh; }
.case-media { position: sticky; top: 0; height: 100vh; background: #fff center / cover no-repeat; border-right: 1px solid var(--rule); overflow: hidden; }
.case-media img { position: absolute; inset: var(--xl); width: calc(100% - 2 * var(--xl)); height: calc(100% - 2 * var(--xl)); object-fit: contain; }
.case-body { padding: calc(var(--xxl) + var(--m)) var(--gutter) var(--xxl) calc(var(--gutter) * 1.5); max-width: 860px; }
.case-kicker { display: flex; gap: var(--m); align-items: baseline; padding-top: 12px; border-top: 1px solid var(--rule); }
.case-kicker .n { color: var(--blue); }
#case-title { font-size: var(--fs-h2); margin: var(--xl) 0 var(--lg); }
#case-tag { display: inline-block; background: var(--swirl); padding: 2px 8px; margin-bottom: var(--lg); }
#case-desc { margin-top: var(--lg); }
#case-desc p { font-size: 18px; line-height: 1.6; max-width: 60ch; }
#case-desc p + p { margin-top: 1.1em; }
#case-desc > p:first-child { font-size: var(--fs-lead); line-height: 1.35; letter-spacing: -0.01em; max-width: 34ch; margin-bottom: var(--lg); }
/* facts row — role / timeline / client / scope */
.case-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); column-gap: var(--lg); margin: var(--xl) 0 0; border-top: 1px solid var(--rule); }
.case-meta div { display: grid; gap: 6px; align-content: start; padding: 12px 0 var(--m); border-bottom: 1px solid var(--rule); }
.case-meta dt { color: var(--muted); }
.case-meta dd { font-size: var(--fs-body); line-height: 1.35; }
/* numbered sections — the same hairline + index pattern as the page's section bars */
.case-sec { margin-top: var(--xxl); }
.case-sec-bar { display: flex; gap: var(--m); align-items: baseline; padding-top: 12px; border-top: 1px solid var(--rule); }
.case-sec-bar .num { color: var(--blue); }
.case-sec h3 { font-family: var(--f-display); font-weight: 700; font-size: var(--fs-h3); line-height: 1.05; letter-spacing: -0.025em; margin: var(--lg) 0 var(--m); }
/* section layout variants */
#case-desc .case-sec--statement p { font-size: var(--fs-lead); line-height: 1.3; letter-spacing: -0.01em; max-width: 26ch; }
.case-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--xl); align-items: start; }
.case-split .case-figs { margin-top: var(--lg); }
.case-sec--media-first .case-figs { margin-top: var(--lg); }
.case-sec--media-first .case-text h3 { margin-top: var(--lg); }
/* label + text rows (Scope: Hardware / Content / Functionality …) */
.case-items { margin-top: var(--lg); border-top: 1px solid var(--rule); max-width: 60ch; }
.case-items div { display: grid; grid-template-columns: 9em 1fr; gap: var(--m); padding: 12px 0; border-bottom: 1px solid var(--rule); }
.case-items dt { color: var(--muted); padding-top: 0.35em; }
.case-items dd { font-size: 18px; line-height: 1.5; }
/* images — one per row, or side by side with `cols` */
.case-figs { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: var(--m); margin-top: var(--lg); }
.case-fig img, .case-fig video { width: 100%; border: 1px solid var(--rule); }
.case-fig video { display: block; aspect-ratio: 16/9; object-fit: cover; background: var(--rule); }
/* placeholders — swap for real images/text later */
.case-ph {
  display: flex; flex-direction: column; justify-content: space-between; gap: var(--s);
  padding: var(--m); color: var(--muted);
  background: repeating-linear-gradient(-45deg, transparent 0 10px, rgba(12,12,14,0.035) 10px 11px), #fff;
  border: 1px dashed rgba(12,12,14,0.25);
}
.case-ph span:last-child { color: var(--ink); }
#case-desc p.case-ph-text { color: var(--muted); border-left: 2px dashed rgba(12,12,14,0.25); padding-left: var(--m); }
.case-fig figcaption { margin-top: var(--s); color: var(--muted); font-size: var(--fs-small); line-height: 1.45; }
#case-gallery { display: grid; gap: var(--lg); margin-top: var(--xl); }
#case-gallery .case-fig { margin-top: 0; }
/* next project — closes the loop so a reader keeps going */
#case-next {
  display: grid; gap: var(--m); width: 100%; margin-top: var(--xxl); padding: 12px 0 0;
  background: none; border: 0; border-top: 1px solid var(--rule); color: inherit; font: inherit; text-align: left; cursor: pointer;
}
#case-next .micro { display: flex; gap: var(--m); color: var(--muted); }
#case-next .display { font-size: clamp(40px, 5vw, 80px); transition: color 0.2s; }
#case-next:hover .display, #case-next:focus-visible .display { color: var(--blue); }
#case-next:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; }
#case-close {
  position: fixed; top: var(--gutter); right: var(--gutter); z-index: 2;
  font: inherit; font-size: var(--fs-micro); font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border: 0; padding: 10px 14px; cursor: pointer;
}
#case-close:hover { background: var(--blue); }
body.case-open { overflow: hidden; }
html.intro #nav a, html.intro #logo { pointer-events: none; }
body.case-open #nav, body.case-open #logo { opacity: 0; visibility: hidden; }

/* ── CURSOR TAG — appears over posters ── */
#tag {
  position: fixed; left: 0; top: 0; z-index: 85; pointer-events: none;
  background: var(--ink); color: var(--paper); padding: 5px 8px; white-space: nowrap;
  transform: translate(-100px, -100px); opacity: 0; transition: opacity 0.2s;
}
#tag.on { opacity: 1; }

/* ── RESPONSIVE ── */
@media (max-width: 1000px) {
  .hero-vert-l { display: none; }
  .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--xl) var(--gutter); }
  .card:nth-child(n) { margin-top: 0; }
  .card:nth-child(2n) { margin-top: var(--xl); }
  .case-inner { grid-template-columns: 1fr; }
  .case-media { position: relative; height: 60vh; border-right: 0; border-bottom: 1px solid var(--rule); }
  .case-body { padding: var(--xl) var(--gutter) var(--xxl); }
  .case-split { grid-template-columns: 1fr; gap: 0; }
  .about-body { grid-template-columns: 1fr; }
  .about-media { width: 88%; margin-right: auto; }   /* room for the tilted corners */
}
@media (max-width: 640px) {
  .hero-foot .intro .intro-title { white-space: normal; }   /* narrow phones: let it wrap */
  .about-pals .pal canvas { width: auto; height: auto; max-width: 96px; max-height: 120px; }   /* smaller stickers on phones */
  .about-media > .peeker svg { width: 64px; height: 71px; }
  :root { --xl: 32px; --xxl: 64px; }
  #logo { width: 31px; height: 34px; }
  #nav li a .micro { display: none; }
  .sec-bar { grid-template-columns: auto 1fr auto; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: var(--m); }
  .hero-read { text-align: left; padding-bottom: 0; }
  .hero-read .track { margin-left: 0; }
  .wall { grid-template-columns: 1fr; }
  .card:nth-child(n) { margin-top: 0; }
  .contact-links a { width: 46px; height: 46px; }
}
@media (pointer: coarse) { #tag { display: none; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #grain { animation: none; }
  #case { transition: none; }
  .about-media img { transition: none; }
  .pal, .about-media > .peeker { transition: none; animation: none; }
}


/* ── PLAY page (/play/): one board of tiles ── */
html.play { --bg: var(--ink); }
.play { min-height: 100vh; padding-top: calc(var(--xxl) + 8px); }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--m); margin-top: var(--xl); }
.tile {
  position: relative; min-width: 0; display: flex; flex-direction: column; gap: var(--m); padding: var(--lg);
  border: 1px solid var(--rule); background: rgba(244,243,239,0.04); transition: border-color 0.2s, background 0.2s;
}
.tile:hover { border-color: var(--swirl); background: rgba(107,143,255,0.07); }
.tile > .micro, .t-text > .micro { color: var(--muted); }
.tile h2 { font-size: clamp(26px, 3vw, 44px); line-height: 1.02; }
.t-magic  { grid-column: span 4; grid-row: span 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 320px); gap: var(--xl) var(--lg); align-items: center; }
.t-magic h2 { font-size: clamp(32px, 4vw, 60px); margin-top: var(--s); }
.t-okami  { grid-column: span 2; justify-content: space-between; gap: var(--m); min-height: 150px; }
.t-okami h2 { font-size: clamp(44px, 5.5vw, 84px); }
.t-wow    { grid-column: span 2; justify-content: space-between; min-height: 150px; }
.t-gundam { grid-column: span 3; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--m); min-height: 320px; overflow: hidden; }
.g-text { display: flex; flex-direction: column; gap: var(--m); align-self: stretch; justify-content: space-between; }
.g-text .micro:first-child { color: var(--muted); }
.g-text h2 { margin-top: auto; margin-bottom: 4px; }
.btn { display: inline-block; align-self: flex-start; padding: 10px 14px; border: 1px solid var(--fg); color: var(--fg); text-decoration: none; line-height: 1.3; transition: background 0.2s, color 0.2s, border-color 0.2s; }
.btn:hover, .btn:focus-visible { background: var(--swirl); border-color: var(--swirl); color: var(--ink); outline: none; }
.g-figs { position: relative; display: flex; align-items: flex-end; align-self: end; margin: calc(var(--lg) * -1) calc(var(--lg) * -1) calc(var(--lg) * -1) 0; }
.g-figs img { height: auto; filter: drop-shadow(0 0 22px rgba(107,143,255,0.38)) drop-shadow(0 10px 14px rgba(0,0,0,0.45)); transition: transform 0.4s cubic-bezier(.2,.8,.2,1); }
.g-black { width: 150px; margin-right: -34px; position: relative; z-index: 1; }
.g-duo   { width: 210px; position: relative; z-index: 2; }
.t-gundam:hover .g-black { transform: translateY(-6px) rotate(-2deg); }
.t-gundam:hover .g-duo   { transform: translateY(-4px) rotate(1.5deg); }
.t-built  { grid-column: span 3; }
.t-music  { grid-column: 1 / -1; }
.t-music iframe { display: block; width: 100%; border: 0; border-radius: 12px; color-scheme: normal; }
/* the built things: three little items inside one tile */
.mini { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--m); }
.mini li { display: flex; flex-direction: row; align-items: center; gap: 16px; }
.mini h3 { font-size: clamp(22px, 2.2vw, 32px); line-height: 1.05; }
.mini p { margin-top: 6px; color: var(--muted); font-size: var(--fs-small); line-height: 1.4; }
.mini a { text-decoration: none; }
.mini a:hover, .mini a:focus-visible { color: var(--swirl); outline: none; }
/* pixel icon tiles */
.ico { display: grid; place-items: center; width: 52px; height: 52px; background: rgba(244,243,239,0.06); border: 1px solid var(--rule); border-radius: 12px; transition: border-color 0.2s, transform 0.2s steps(2); }
.ico .px { width: 30px; height: 30px; }
.ico .px.weave { width: 26px; height: 26px; }
.mini li:hover .ico { border-color: var(--swirl); transform: translateY(-3px); }
/* now playing: blinking pixel cursor */
.cursor { display: inline-block; width: 0.38em; height: 0.72em; margin-left: 0.14em; background: var(--swirl); animation: cursorBlink 1.1s steps(1) infinite; }
@keyframes cursorBlink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }
/* Magic: commander + two synergy cards, fanned like a hand */
.fan { position: relative; aspect-ratio: 1 / 0.92; width: 100%; }
.fan img {
  position: absolute; bottom: 0; left: 50%; width: 52%; height: auto; border-radius: 4.5%;
  transform-origin: 50% 110%; box-shadow: 0 18px 36px -14px rgba(0,0,0,0.7);
  transform: translateX(-50%) rotate(var(--r, 0deg)) translateX(var(--x, 0));
  transition: transform 0.5s cubic-bezier(.2,.8,.2,1);
}
.fan img:nth-child(1) { --r: -13deg; --x: -34%; z-index: 1; }
.fan img:nth-child(2) { --r: 13deg;  --x: 34%;  z-index: 1; }
.fan img.cmdr { --r: 0deg; --x: 0; z-index: 2; width: 58%; }
.t-magic:hover .fan img:nth-child(1) { --r: -19deg; --x: -46%; }
.t-magic:hover .fan img:nth-child(2) { --r: 19deg;  --x: 46%; }
.t-magic:hover .fan img.cmdr { transform: translateX(-50%) translateY(-3%) scale(1.03); }
.t-magic .credit { position: absolute; right: 16px; bottom: 10px; z-index: 3; margin: 0; font-size: 10px; color: var(--muted); opacity: 0.7; text-transform: none; letter-spacing: 0.04em; }
.t-magic { padding-bottom: calc(var(--lg) + 26px); }
.t-magic .fan { margin-bottom: 22px; }
.play-foot { display: flex; justify-content: space-between; gap: var(--m); margin-top: var(--xl); padding-top: 12px; border-top: 1px solid var(--rule); color: var(--muted); }
.play-foot a { text-decoration: none; }
.play-foot a:hover { color: var(--fg); }
#nav a[aria-current="page"] .lbl { background-size: 100% 1px; }
.about-more { display: inline-block; margin-top: var(--lg); text-decoration: none; color: var(--swirl); }
.about-more:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 900px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-magic { grid-column: 1 / -1; grid-row: auto; grid-template-columns: minmax(0, 1fr); }
  .t-okami { grid-column: span 1; min-height: 130px; }
  .t-wow { grid-column: span 1; min-height: 130px; }
  .t-gundam, .t-built, .t-music { grid-column: 1 / -1; }
  .fan { max-width: 320px; margin-inline: auto; }
}
@media (max-width: 640px) {
  .play { padding-top: calc(var(--xxl) - 8px); }
  .play .sec-bar .muted:last-child { display: none; }
  .play .sec-bar { grid-template-columns: auto 1fr; }
  .bento { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .t-okami, .t-wow { grid-column: 1 / -1; }
  .t-gundam { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .g-figs { margin: 0 calc(var(--m) * -1) calc(var(--m) * -1); justify-content: center; }
  .g-black { width: 120px; margin-right: -28px; } .g-duo { width: 176px; }
  .tile { padding: var(--m); }
  .tile h2 { font-size: 24px; }
  .t-okami h2 { font-size: 40px; }
  .t-magic h2 { font-size: 30px; }
  .t-okami { min-height: 110px; }
  .mini li { gap: 14px; }
  .ico { width: 44px; height: 44px; flex: none; }
  .ico .px { width: 26px; height: 26px; }
  .ico .px.weave { width: 22px; height: 22px; }
  .fan { max-width: 260px; }
}
@media (prefers-reduced-motion: reduce) { .cursor { animation: none; } .fan img, .mini li:hover .ico { transition: none; transform: none; } }

/* About prints dissolve into periwinkle pixels and rebuild as the next photo (script.js: ABOUT PRINTS) */
.about-media > canvas.print-fx { position: absolute; pointer-events: none; z-index: 3; box-shadow: 0 24px 48px -20px rgba(0,0,0,0.6), 0 2px 6px rgba(0,0,0,0.25); transition: none; }