/* =========================================================
   jojo cormack — site styles
   Layout concept: each designed section is an "artboard" whose
   coordinates come straight from the design files
   (web = 1920 units wide, phone = 1000 units wide).
   ========================================================= */

@font-face { font-family: "Montserrat"; font-weight: 300; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 300; font-style: italic; font-display: swap; src: url("../fonts/montserrat-latin-300-italic.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
/* Stand-in for Macchia (Adobe Fonts). When the Adobe Fonts kit link is added to each page,
   "macchia" is picked up automatically because it is first in --display. */
@font-face { font-family: "Bagel Fat One"; font-weight: 400; font-display: swap; src: url("../fonts/bagel-fat-one-latin-400-normal.woff2") format("woff2"); }

:root {
  /* palette (design sheet) */
  --navy: #12036E;
  --pink: #F35FA8;
  --grey: #C1BBC5;
  --lav:  #F4EDF7;
  --white: #FFFFFF;
  --navy-veil: rgba(18, 3, 110, 0.94);
  --pink-veil: rgba(243, 95, 168, 0.82);

  /* type */
  --display: "macchia", "Bagel Fat One", "Arial Black", system-ui, sans-serif;
  --body: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  /* units: --vw / --vh are set from JS (scrollbar-safe); these are fallbacks */
  --vw: 1vw;
  --vh: 1vh;

  /* banner sizes (from the banner artwork, 1920-wide) */
  --bh-ext: calc(var(--vw) * 9.53);
  --bh-min: calc(var(--vw) * 4.583);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { background: var(--lav); }
body {
  margin: 0;
  color: var(--navy);
  font-family: var(--body);
  font-weight: 300;
  font-size: clamp(16px, 1.05vw + 8px, 21px);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 4px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

body.leaving main, body.leaving footer { opacity: 0; transition: opacity .25s ease; }

/* ---------------------------------------------------------
   Web / phone switch (the two layouts are separate artboards)
   --------------------------------------------------------- */
.only-phone { display: none !important; }
@media (max-width: 759px) {
  .only-web { display: none !important; }
  .only-phone { display: block !important; }
}

/* ---------------------------------------------------------
   Artboards
   --------------------------------------------------------- */
.ab { position: relative; width: calc(var(--W) * var(--u)); height: calc(var(--H) * var(--u)); margin-inline: auto; }
.ab-web  { --W: 1920; --u: calc(var(--vw) * 100 / 1920); }
.ab-fit  { --W: 1920; --H: 1080; --u: min(calc(var(--vw) * 100 / 1920), calc(var(--vh) * 100 / 1080)); }
.ab-phone { --W: 1000; --u: calc(var(--vw) * 100 / 1000); }
.ab .p { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); }
.ab .p > img { width: 100%; height: auto; }

/* ---------------------------------------------------------
   Banner
   --------------------------------------------------------- */
.banner {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  height: var(--bh);
  --bh: var(--bh-ext);
  background: var(--navy);
  transition: height .45s cubic-bezier(.2,.8,.2,1);
}
.banner[data-state="min"] { --bh: var(--bh-min); }
.banner-logo { position: absolute; display: block; left: calc(var(--vw) * 1.5625); top: calc(var(--vw) * 1.927); height: calc(var(--vw) * 5.625);
  transition: left .45s cubic-bezier(.2,.8,.2,1), top .45s cubic-bezier(.2,.8,.2,1), height .45s cubic-bezier(.2,.8,.2,1); }
.banner-logo img { height: 100%; width: auto; }
.banner[data-state="min"] .banner-logo { left: calc(var(--vw) * 1.927); top: calc(var(--vw) * 0.9); height: calc(var(--vw) * 2.9); }

.banner-nav {
  position: absolute; right: calc(var(--vw) * 2.76); top: 0; height: var(--bh-ext);
  display: flex; align-items: center; gap: calc(var(--vw) * 2.35);
  font-family: var(--body); font-weight: 400; font-size: calc(var(--vw) * 2.708); line-height: 1;
  color: var(--white);
}
.banner-nav a {
  text-decoration: none; padding-block: calc(var(--vw) * 1.2);
  transition: transform .6s cubic-bezier(.2,.9,.25,1.12), opacity .45s ease, color .2s ease;
  transition-delay: calc(var(--i) * 70ms);
}
.banner-nav a:hover { color: var(--pink); }
.banner-nav .sep { width: calc(var(--vw) * 1.72); height: calc(var(--vw) * 2.7); transition: transform .6s cubic-bezier(.2,.9,.25,1.12), opacity .45s ease; transition-delay: calc(var(--i) * 70ms); }
.banner-nav .sep svg { width: 100%; height: 100%; fill: var(--white); display: block; }
.banner[data-state="min"] .banner-nav { pointer-events: none; }
.banner[data-state="min"] .banner-nav > * { opacity: 0; transform: translateX(var(--dx, 0px)) scale(.35); transition-delay: 0ms; }

.banner-star {
  position: absolute; right: calc(var(--vw) * 1.25); top: 50%; width: calc(var(--vw) * 3.07); height: calc(var(--vw) * 3.07);
  transform: translateY(-50%) rotate(-90deg) scale(.4); opacity: 0; pointer-events: none;
  transition: transform .5s cubic-bezier(.2,.9,.25,1.15), opacity .35s ease;
}
.banner-star svg { width: 100%; height: 100%; fill: var(--lav); display: block; }
.banner[data-state="min"] .banner-star { opacity: 1; transform: translateY(-50%) rotate(0deg) scale(1); pointer-events: auto; }
.banner[data-state="min"] .banner-star[aria-expanded="true"] { transform: translateY(-50%) rotate(45deg) scale(1); }

.banner-menu {
  position: absolute; right: 0; top: 100%;
  display: flex; flex-direction: column; align-items: flex-end;
  padding: calc(var(--vw) * .6) calc(var(--vw) * 1.6) calc(var(--vw) * 1.2) calc(var(--vw) * 2.6);
  background: var(--lav); border-bottom-left-radius: calc(var(--vw) * 2);
  box-shadow: 0 18px 40px -24px rgba(18, 3, 110, .45);
  font-family: var(--body); font-weight: 400; font-size: calc(var(--vw) * 2.708); line-height: 1.5;
  clip-path: inset(0 0 100% 0); transition: clip-path .45s cubic-bezier(.2,.8,.2,1);
}
.banner-menu.open { clip-path: inset(0 0 -40px 0); }
.banner-menu a { color: var(--navy); text-decoration: none; transform: translateY(-14px); opacity: 0; transition: transform .45s cubic-bezier(.2,.9,.25,1.15), opacity .3s ease, color .2s; transition-delay: calc(var(--i) * 60ms); }
.banner-menu.open a { transform: none; opacity: 1; }
.banner-menu a:hover { color: var(--pink); }

@media (max-width: 759px) {
  :root { --bh-ext: calc(var(--vw) * 9.54); --bh-min: calc(var(--vw) * 9); }
  .banner-logo { left: calc(var(--vw) * 1.57); top: calc(var(--vw) * 1.97); height: calc(var(--vw) * 5.56); }
  .banner[data-state="min"] .banner-logo { left: calc(var(--vw) * 2.2); top: calc(var(--vw) * 1.7); height: calc(var(--vw) * 5.6); }
  .banner-nav { right: calc(var(--vw) * 2.7); font-size: calc(var(--vw) * 2.94); gap: calc(var(--vw) * 1.9); }
  .banner-nav a { padding-block: calc(var(--vw) * 3); }
  .banner-nav .sep { width: calc(var(--vw) * 1.7); height: calc(var(--vw) * 2.5); }
  .banner-star { right: calc(var(--vw) * 3.4); width: calc(var(--vw) * 5.6); height: calc(var(--vw) * 5.6); }
  .banner-menu { font-size: max(15px, calc(var(--vw) * 4.4)); padding: 6px 18px 14px 28px; border-bottom-left-radius: 18px; }
}

/* push regular pages below the banner */
.page-pad { padding-top: var(--bh-ext); }

/* ---------------------------------------------------------
   Custom star cursor (fine pointers only)
   --------------------------------------------------------- */
html.has-cursor, html.has-cursor * { cursor: none !important; }
#cursor { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; width: 46px; height: 46px; margin: -23px 0 0 -23px; opacity: 0; transition: opacity .2s; }
#cursor.on { opacity: 1; }
#cursor svg { width: 100%; height: 100%; overflow: visible; transition: transform .25s cubic-bezier(.2,.9,.25,1.3); }
#cursor .c-star { fill: var(--grey); fill-opacity: .6; transition: fill .2s, fill-opacity .2s, transform .3s cubic-bezier(.2,.9,.25,1.3), opacity .2s; transform-box: fill-box; transform-origin: center; }
#cursor .c-third { opacity: 0; transform: scale(.2); }
#cursor[data-state="pink"] .c-star { fill: var(--pink); fill-opacity: .8; }
#cursor[data-state="blue"] .c-star { fill: var(--navy); fill-opacity: .6; }
#cursor[data-state="pink"] svg, #cursor[data-state="blue"] svg { transform: scale(1.25); }
#cursor[data-state="pink"] .c-third, #cursor[data-state="blue"] .c-third { opacity: 1; transform: scale(1); }
#cursor.press svg { transform: scale(.9); }

/* ---------------------------------------------------------
   Stars (confetti + artwork stars) — 360° every 2–3 s
   --------------------------------------------------------- */
.spin { animation: spin var(--dur, 2.6s) linear infinite; animation-direction: var(--dir, normal); transform-origin: 50% 50%; }
@keyframes spin { to { transform: rotate(360deg); } }
.confetti { position: absolute; pointer-events: none; width: var(--s, 48px); height: calc(var(--s, 48px) * 1.39); z-index: 1; }
.confetti svg { width: 100%; height: 100%; display: block; overflow: visible; }
.confetti .fill { fill: var(--c, var(--grey)); }
.confetti .line { fill: none; stroke: var(--c, var(--navy)); stroke-width: 3.2; vector-effect: non-scaling-stroke; }

/* ---------------------------------------------------------
   Reveal on scroll (content stays legible at rest)
   --------------------------------------------------------- */
.reveal { transform: translateY(46px); opacity: .25; transition: transform .9s cubic-bezier(.16,.84,.3,1), opacity .9s ease; }
.reveal.in { transform: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .spin { animation-duration: 18s !important; }
  .reveal { transform: none; opacity: 1; transition: none; }
  html { scroll-behavior: auto; }
}

/* =========================================================
   HOME — section 1 (crocodile)
   ========================================================= */
.hero { position: relative; }
.hero-web { height: 260vh; }
.hero-phone { height: 430vh; }
.stage { position: sticky; top: 0; height: calc(var(--vh) * 100); overflow: hidden; }
.hero-web .stage { display: grid; place-items: center; }
.hero-web .ab { overflow: visible; }
.hero-web .croc { z-index: 3; will-change: transform; }
.hero-web .txt { z-index: 2; will-change: transform, clip-path; }

.hero-phone .ab { position: absolute; left: 0; bottom: 0; margin: 0; }
.hero-phone .txt { z-index: 2; transform-origin: 50% 50%; will-change: transform; }
.hero-phone .frame { position: absolute; left: 0; top: 0; z-index: 3; width: calc(var(--fw, 766) * var(--u)); will-change: transform, opacity; transform-origin: 0 0; }
.hero-phone .frame img { width: 100%; height: auto; }
.scroll-hint { position: absolute; left: 50%; bottom: calc(var(--vw) * 3); transform: translateX(-50%); z-index: 6; font-size: 13px; letter-spacing: .14em; text-transform: lowercase; color: var(--navy); opacity: .7; transition: opacity .4s; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.scroll-hint span { display: block; width: 1px; height: 26px; background: currentColor; animation: hint 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes hint { 0%,100% { transform: scaleY(.3); } 50% { transform: scaleY(1); } }
.hero-web .scroll-hint { bottom: 28px; }

/* =========================================================
   HOME — section 2 (paper balls)
   ========================================================= */
.balls-sec { position: relative; overflow-x: clip; padding-block: calc(var(--vh) * 6) calc(var(--vh) * 10); }
.balls-sec.web { min-height: calc(var(--vh) * 100); display: grid; place-items: center; }
.ball-g { position: absolute; left: 0; top: 0; width: 0; height: 0; transition: transform .85s cubic-bezier(.2,.85,.25,1.05); z-index: 2; }
.ball-g.open { z-index: 6; }
.ball-g .label { position: absolute; left: calc(var(--lx) * var(--u)); top: calc(var(--ly) * var(--u)); width: calc(var(--lw) * var(--u)); pointer-events: none; z-index: 1; transition: opacity .5s; }
.ball-g.open .label { opacity: .35; }
.ball {
  position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u));
  width: calc(var(--w) * var(--u)); height: calc(var(--h) * var(--u));
  z-index: 2; border-radius: 50%;
}
.ball .fr { position: absolute; left: 50%; top: 50%; width: calc(var(--k) * 100%); max-width: none; height: auto; transform: translate(-50%, -50%) rotate(var(--r, 0deg)); opacity: 0; pointer-events: none; transition: none; }
.ball .fr.on { opacity: 1; animation: pop .5s cubic-bezier(.2,.9,.25,1.3); }
.ball .fr[data-f="1"] { --k: 1; }
.ball .fr[data-f="2"] { --k: 1.22; --r: -3deg; }
.ball .fr[data-f="3"] { --k: 1.45; --r: 2deg; }
.ball .fr[data-f="4"] { --k: 1.85; }
@keyframes pop { 0% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(.9); } 100% { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); } }
.ball-g:not(.open) .ball:hover .fr.on { animation: wobble .7s ease-in-out; }
@keyframes wobble { 0%,100% { transform: translate(-50%, -50%) rotate(0); } 30% { transform: translate(-50%, -50%) rotate(-4deg) scale(1.03); } 65% { transform: translate(-50%, -50%) rotate(3deg); } }
.ball-go {
  position: absolute; left: 50%; top: 50%; width: 46%; aspect-ratio: 1; transform: translate(-50%, -50%);
  border-radius: 50%; z-index: 3; display: none;
}
.ball-g.is-open .ball-go { display: block; }
.ball-go .tip { position: absolute; left: 50%; bottom: -1.8em; transform: translateX(-50%); white-space: nowrap; font-size: 13px; font-weight: 500; color: var(--white); background: var(--pink); padding: 3px 12px; border-radius: 999px; opacity: 0; transition: opacity .25s; pointer-events: none; }
.ball-go:hover .tip, .ball-go:focus-visible .tip { opacity: 1; }
.deco { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); pointer-events: none; }
.deco img { width: 100%; height: auto; }

/* =========================================================
   HOME — section 3 (contact)
   ========================================================= */
.contact-sec { position: relative; overflow: hidden; padding-block: calc(var(--vh) * 8) 0; }
.contact-sec.web { min-height: calc(var(--vh) * 100); display: grid; place-items: center; padding-bottom: calc(var(--vh) * 6); }
.contact-sec a.p { display: block; transition: transform .3s cubic-bezier(.2,.9,.25,1.3); }
.contact-sec a.p:hover { transform: scale(1.04); }
.snake { will-change: transform; transform-origin: 50% 60%; }
.cogs .cog { position: absolute; left: calc(var(--x) * var(--u)); top: calc(var(--y) * var(--u)); width: calc(var(--w) * var(--u)); transform-origin: 50% 50%; }
.cogs .cog img { width: 100%; height: auto; }
.cogs .cog.go { animation: cog var(--dur, 6s) linear infinite; animation-direction: var(--dir, normal); }
.cogs .cog.kick { animation: kick .45s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes cog { to { transform: rotate(360deg); } }
@keyframes kick { 0% { transform: rotate(0); } 60% { transform: rotate(calc(var(--kd, 1) * 24deg)); } 100% { transform: rotate(calc(var(--kd, 1) * 14deg)); } }
.copy-row { position: absolute; left: 0; right: 0; display: flex; justify-content: center; }

/* =========================================================
   ABOUT
   ========================================================= */
.about .ab { overflow: hidden; }
.about .monkey { transform-origin: 50% 0; will-change: transform; z-index: 3; }
.about .title { z-index: 2; }
.about .bio { color: var(--pink); font-weight: 400; z-index: 2; }
.about .bio p { margin: 0 0 1em; }
.about .ab-web .bio { font-size: calc(var(--u) * 28.4); line-height: calc(var(--u) * 34.4); }
.about .ab-phone .bio { font-size: calc(var(--u) * 33); line-height: calc(var(--u) * 44.4); }
.about .bio.right { text-align: right; }

/* =========================================================
   Project pages (3–8)
   ========================================================= */
.wrap { width: min(1320px, 100%); margin-inline: auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); position: relative; }
.page-title {
  font-family: var(--display); font-weight: 400; color: var(--pink);
  font-size: clamp(58px, 9.2vw, 168px); line-height: .86; letter-spacing: -.01em;
  text-align: center; margin: 0; padding-block: clamp(36px, 7vh, 90px) clamp(18px, 3vh, 36px);
  text-wrap: balance;
}
.sec { padding-block: clamp(70px, 14vh, 170px); position: relative; }
.sec + .sec { padding-top: clamp(40px, 8vh, 110px); }
.sec-title { font-family: var(--display); font-weight: 400; color: var(--pink); font-size: clamp(40px, 5.4vw, 92px); line-height: .92; margin: 0 0 clamp(22px, 4vh, 44px); text-wrap: balance; }
.sub-title { font-family: var(--display); font-weight: 400; color: var(--navy); font-size: clamp(26px, 2.6vw, 42px); line-height: 1; margin: 0 0 18px; opacity: .92; }
.kicker { font-family: var(--body); font-weight: 500; font-size: 13px; letter-spacing: .16em; text-transform: lowercase; color: var(--pink); display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; }
.kicker svg { width: 12px; height: 16px; fill: currentColor; }
.lead { font-size: clamp(18px, 1.35vw + 6px, 26px); line-height: 1.45; max-width: 34ch; text-wrap: pretty; }
.body-text { max-width: 62ch; text-wrap: pretty; }
.cap { font-size: 15px; line-height: 1.45; color: var(--navy); opacity: .85; margin-top: 10px; max-width: 46ch; }
.pill { display: inline-block; background: var(--pink); color: var(--white); font-weight: 400; border-radius: 999px; padding: .28em .95em .32em; font-size: clamp(14px, 1vw + 6px, 20px); line-height: 1.2; text-decoration: none; white-space: nowrap; }

.shot { position: relative; margin: 0; }
.shot img, .shot video { width: 100%; height: auto; border-radius: 4px; background: #e9e1ee; }
.shot img[data-showcase] { transition: transform .5s cubic-bezier(.2,.85,.25,1); }
.shot img[data-showcase]:hover { transform: scale(1.015); }
.shot.dark img { background: #000; }

.g { display: grid; gap: clamp(16px, 2.2vw, 34px); }
.g-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.g-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.g-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.al-c { align-items: center; }
.al-e { align-items: end; }
@media (max-width: 900px) { .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 759px) {
  .g-2, .g-3 { grid-template-columns: minmax(0, 1fr); }
}

.feature {
  background: var(--white); border-radius: clamp(18px, 2.4vw, 36px);
  padding: clamp(20px, 3.4vw, 56px); position: relative;
  box-shadow: 0 30px 60px -40px rgba(18, 3, 110, .35);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(22px, 4vw, 64px); align-items: center;
}
.feature .badge { position: absolute; top: clamp(-18px, -1.4vw, -12px); left: clamp(20px, 3.4vw, 56px); }
@media (max-width: 759px) { .feature { grid-template-columns: minmax(0, 1fr); } }

.sticker { position: absolute; z-index: 2; }

/* projects grid (page 3) */
.proj-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(18px, 2.4vw, 40px); padding-bottom: 12vh; }
.proj { position: relative; display: block; text-decoration: none; color: var(--navy); }
.proj .media { position: relative; overflow: hidden; border-radius: 6px; background: #e9e1ee; aspect-ratio: var(--ar, 4/3); }
.proj .media img, .proj .media video { width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.2,.85,.25,1); }
.proj:hover .media img, .proj:hover .media video { transform: scale(1.04); }
.proj .pill { position: absolute; left: clamp(12px, 1.4vw, 22px); bottom: clamp(12px, 1.4vw, 22px); transition: transform .35s cubic-bezier(.2,.9,.25,1.3); }
.proj:hover .pill { transform: translateY(-4px) rotate(-2deg); }
.proj .meta { margin-top: 12px; font-size: 15px; line-height: 1.4; opacity: .8; }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-4 { grid-column: span 4; } .span-6 { grid-column: span 6; }
.row-2 { grid-row: span 2; }
@media (max-width: 759px) {
  .proj-grid { grid-template-columns: minmax(0, 1fr); }
  .proj-grid > * { grid-column: auto !important; grid-row: auto !important; }
}

/* hover-reveal panels (publications) */
.reveal-card { position: relative; overflow: hidden; border-radius: 6px; display: block; }
.reveal-card img { width: 100%; height: auto; }
.reveal-card .veil { position: absolute; inset: 0; background: rgba(244, 237, 247, .86); backdrop-filter: blur(2px); display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(16px, 2.4vw, 34px); opacity: 0; transition: opacity .45s ease; }
.reveal-card .veil h3 { font-family: var(--display); font-weight: 400; color: var(--navy); font-size: clamp(26px, 2.8vw, 46px); margin: 0 0 8px; line-height: 1; }
.reveal-card .veil p { margin: 0; max-width: 40ch; }
.reveal-card .tag { position: absolute; left: clamp(16px, 2.4vw, 34px); bottom: clamp(14px, 2vw, 28px); font-family: var(--display); color: var(--navy); font-size: clamp(24px, 2.6vw, 42px); line-height: 1; transition: opacity .3s; text-shadow: 0 0 18px rgba(255,255,255,.7); }
.reveal-card:hover .veil, .reveal-card:focus-visible .veil, .reveal-card.touch-on .veil { opacity: 1; }
.reveal-card:hover .tag, .reveal-card.touch-on .tag { opacity: 0; }

/* logo swap (page 5) */
.logo-swap { position: relative; width: 100%; aspect-ratio: 1; max-width: 520px; margin-inline: auto; border-radius: 6px; overflow: hidden; }
.logo-swap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .55s ease, transform .55s ease; }
.logo-swap .dark { opacity: 0; transform: scale(1.02); }
.logo-swap:hover .dark, .logo-swap:focus-within .dark, .logo-swap.touch-on .dark { opacity: 1; transform: none; }
.logo-swap:hover .light, .logo-swap.touch-on .light { opacity: 0; }

/* sub navigation chips */
.chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 6vh; }
.chips a { border: 1.5px solid var(--pink); color: var(--pink); background: transparent; }
.chips a:hover { background: var(--pink); color: var(--white); }

/* book (page 8) */
.book-sec { position: relative; height: 340vh; }
.book-stage { position: sticky; top: 0; height: calc(var(--vh) * 100); display: grid; place-items: center; overflow: hidden; padding-top: var(--bh-min); }
.book { position: relative; width: min(84vw, 980px); aspect-ratio: 2 / 1.08; perspective: 2600px; }
.book .spine-shadow { position: absolute; left: 50%; top: 2%; bottom: 2%; width: 40px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(18,3,110,.22), transparent 70%); z-index: 0; opacity: var(--open, 0); }
.leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: 0 50%; transform-style: preserve-3d; transition: none; }
.leaf .face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #fff; overflow: hidden; border-radius: 0 6px 6px 0; box-shadow: 0 20px 40px -26px rgba(18,3,110,.55), inset 8px 0 18px -10px rgba(0,0,0,.18); }
.leaf .face.back { transform: rotateY(180deg); border-radius: 6px 0 0 6px; box-shadow: 0 20px 40px -26px rgba(18,3,110,.55), inset -8px 0 18px -10px rgba(0,0,0,.18); }
.leaf .face img { width: 100%; height: 100%; object-fit: cover; }
.leaf .face .txt { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; padding: 10%; font-size: clamp(13px, 1.3vw, 19px); }
.book-meta { position: absolute; left: 0; right: 0; bottom: clamp(18px, 5vh, 54px); text-align: center; font-size: 14px; opacity: .8; }
.book-meta .bar { width: min(280px, 60vw); height: 3px; background: rgba(18,3,110,.12); margin: 10px auto 0; border-radius: 3px; overflow: hidden; }
.book-meta .bar i { display: block; height: 100%; width: calc(var(--prog, 0) * 100%); background: var(--pink); }
.book-head { position: absolute; top: calc(var(--bh-min) + 3vh); left: 0; right: 0; text-align: center; }

/* footer */
.foot { position: relative; padding-block: clamp(70px, 16vh, 160px) clamp(40px, 8vh, 80px); text-align: center; overflow: hidden; }
.foot .big { font-family: var(--display); color: var(--pink); font-size: clamp(54px, 8vw, 140px); line-height: .9; text-decoration: none; display: inline-block; transition: transform .35s cubic-bezier(.2,.9,.25,1.3); }
.foot .big:hover { transform: rotate(-3deg) scale(1.04); }
.foot .links { display: flex; flex-wrap: wrap; gap: 10px 28px; justify-content: center; margin-top: 22px; font-weight: 400; }
.foot .links a { text-decoration: none; border-bottom: 1.5px solid var(--pink); }
.foot small { display: block; margin-top: 34px; font-size: 13px; opacity: .6; }

/* =========================================================
   Lightbox (showcase)
   ========================================================= */
.lb { position: fixed; inset: 0; z-index: 900; background: var(--navy-veil); display: none; touch-action: none; }
.lb.open { display: block; animation: lbIn .35s ease; }
@keyframes lbIn { from { background: rgba(18,3,110,0); } }
.lb-stage { position: absolute; inset: 0; overflow: hidden; display: grid; place-items: center; }
.lb-img { max-width: 92vw; max-height: 86vh; width: auto; height: auto; transform-origin: 0 0; user-select: none; -webkit-user-drag: none; border-radius: 4px; box-shadow: 0 40px 90px -40px rgba(0,0,0,.6); will-change: transform; }
.lb-btn { position: absolute; z-index: 3; width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; color: var(--white); background: rgba(255,255,255,.08); transition: background .2s, transform .25s cubic-bezier(.2,.9,.25,1.3); }
.lb-btn:hover { background: var(--pink); transform: scale(1.08); }
.lb-btn svg { width: 24px; height: 24px; stroke: currentColor; stroke-width: 2; fill: none; }
.lb-close { top: max(16px, env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); }
.lb-prev { left: max(14px, env(safe-area-inset-left, 0px)); top: 50%; margin-top: -27px; }
.lb-next { right: max(14px, env(safe-area-inset-right, 0px)); top: 50%; margin-top: -27px; }
.lb-bar { position: absolute; left: 0; right: 0; bottom: max(14px, env(safe-area-inset-bottom, 0px)); z-index: 3; display: flex; gap: 18px; justify-content: center; align-items: center; color: var(--lav); font-size: 14px; pointer-events: none; padding-inline: 70px; text-align: center; }
.lb-bar .count { font-variant-numeric: tabular-nums; opacity: .8; }
.lb-bar .hint { opacity: .55; }
@media (max-width: 759px) { .lb-prev, .lb-next { top: auto; bottom: max(10px, env(safe-area-inset-bottom, 0px)); margin: 0; } .lb-bar { bottom: max(80px, calc(env(safe-area-inset-bottom, 0px) + 70px)); } .lb-bar .hint { display: none; } }

/* phone: every custom grid stacks to one column */
@media (max-width: 759px) {
  .g[style] { grid-template-columns: minmax(0, 1fr) !important; }
  .lead[style*="text-align:right"], .cap[style*="text-align:right"] { text-align: left !important; justify-self: start !important; }
  .g-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 759px) { .book { width: 96vw; } }

/* =========================================================
   SIMPLIFIED (v2): no reveals, no decorative spinning, smaller type
   ========================================================= */
.reveal, .reveal.in { transform: none !important; opacity: 1 !important; transition: none !important; }
.ball-g .label { transform: scale(.9); transform-origin: var(--lo, 50% 50%); }
.ball-g.open .label { opacity: 1; }
#cursor { width: 26px; height: 32px; margin: -16px 0 0 -13px; }
#cursor img { width: 100%; height: 100%; object-fit: contain; display: block; }

.ttl { font-family: var(--body); font-weight: 300; color: var(--pink); font-size: clamp(40px, 5.2vw, 80px); line-height: .8; letter-spacing: -.06em; text-align: center; margin: 0; padding-block: clamp(30px, 6vh, 70px) clamp(16px, 3vh, 30px); }
.hd { font-family: var(--body); font-weight: 300; color: var(--pink); font-size: clamp(28px, 3.1vw, 48px); line-height: .9; letter-spacing: -.055em; margin: clamp(30px, 6vh, 70px) 0 clamp(14px, 2.4vh, 26px); }
.txt { font-weight: 400; font-size: clamp(14px, .5vw + 10px, 17px); line-height: 1.2; letter-spacing: -.02em; color: var(--navy); margin: 12px 0; max-width: 46ch; }
.txt.r { text-align: right; margin-left: auto; }
.txt.c { text-align: center; margin-inline: auto; }
.top { align-self: start; } .bot { align-self: end; }
.blk { padding-block: clamp(24px, 6vh, 80px); }
.row { display: grid; gap: clamp(14px, 2.6vw, 44px); margin-block: clamp(16px, 3vh, 36px); grid-template-columns: minmax(0, 1fr); }
.row.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.row.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.row.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.row.mid { align-items: center; }
.narrow { max-width: 820px; margin-inline: auto; }
.row.vid { grid-template-columns: minmax(0, 1fr) minmax(0, 2.6fr) minmax(0, 1fr); }
.row.merch { grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr) minmax(0, 1fr); align-items: center; }
.row.edit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); align-items: start; }
.row.logo { grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(0, 1fr); align-items: end; }
.row.logo .logo-swap { grid-column: 2; }
.row.sk { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; }
.row.key { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, .9fr); align-items: start; }
.row.bg { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; }
.row.house { grid-template-columns: minmax(0, .5fr) minmax(0, 1.6fr) minmax(0, 1fr); align-items: end; }
.shot img, .shot video { border-radius: 0; }
.shot img[data-showcase]:hover { transform: none; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 30px); padding-bottom: 10vh; }
.tile { display: block; text-decoration: none; color: var(--navy); }
.tile img, .tile video { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.tile.wide { grid-column: span 2; }
.tile.wide video { aspect-ratio: auto; height: calc(100% - 28px); }
.tcap { display: block; font-size: 14px; font-weight: 400; margin-top: 8px; letter-spacing: -.01em; }
.reveal-card .vh { font-family: var(--body); font-weight: 500; font-size: clamp(18px, 1.6vw, 26px); color: var(--navy); margin-bottom: 6px; }
.reveal-card .veil { gap: 4px; font-size: 15px; }
.reveal-card .tag { font-family: var(--body); font-weight: 500; font-size: clamp(18px, 1.6vw, 26px); text-shadow: none; }
.book-sec { height: 300vh; }
.book-txt { position: absolute; left: 0; right: 0; bottom: clamp(16px, 5vh, 50px); text-align: center; margin: 0 auto; max-width: 46ch; font-size: 15px; font-weight: 400; padding-inline: 20px; }
@media (max-width: 759px) {
  .row, .row.c2, .row.c3, .row.c4, .row.vid, .row.merch, .row.edit, .row.logo, .row.sk, .row.key, .row.bg, .row.house { grid-template-columns: minmax(0, 1fr); }
  .row.logo .logo-swap { grid-column: auto; }
  .row.house > div:empty, .row.merch > div:empty { display: none; }
  .txt.r { text-align: left; margin-left: 0; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile.wide { grid-column: auto; }
  .tile.wide video { height: auto; aspect-ratio: 16/9; }
}

/* v3 */
.ptitle { margin: 0; padding-block: clamp(26px, 5vh, 60px) clamp(6px, 2vh, 20px); display: flex; justify-content: center; }
.ptitle img { width: min(calc(var(--lw) * 1px), 82vw); height: auto; }
.hero-web { height: 175vh; }
.hero-phone { height: 290vh; }
.balls-sec.web { min-height: calc(var(--vh) * 100); padding: 0; display: grid; place-items: center; }
.balls-sec.phone { padding-block: calc(var(--vw) * 10) calc(var(--vw) * 6); }
html:has(.balls-sec) { scroll-snap-type: y proximity; }
.balls-sec, .contact-sec { scroll-snap-align: start; }
.contact-sec.web { padding-block: 0; }

/* =========================================================
   v4 — refined: smaller banner contents, one type scale, more air
   ========================================================= */
:root { --gap: clamp(14px, 1.8vw, 28px); --t-hd: clamp(28px, 2.6vw, 42px); --t-body: clamp(15px, 0.45vw + 11px, 18px); }

/* banner contents ~70% of the artwork size */
.banner-logo { left: calc(var(--vw) * 1.9); top: calc(var(--vw) * 2.76); height: calc(var(--vw) * 4); }
.banner[data-state="min"] .banner-logo { left: calc(var(--vw) * 1.9); top: calc(var(--vw) * 1.14); height: calc(var(--vw) * 2.3); }
.banner-nav { right: calc(var(--vw) * 2.6); font-size: calc(var(--vw) * 1.85); gap: calc(var(--vw) * 1.6); }
.banner-nav .sep { width: calc(var(--vw) * 1.15); height: calc(var(--vw) * 1.8); }
.banner-star { right: calc(var(--vw) * 1.6); width: calc(var(--vw) * 2.2); height: calc(var(--vw) * 2.2); }
.banner-menu { font-size: calc(var(--vw) * 1.85); }
@media (max-width: 759px) {
  .banner-logo { left: calc(var(--vw) * 2.4); top: calc(var(--vw) * 2.6); height: calc(var(--vw) * 4.3); }
  .banner[data-state="min"] .banner-logo { left: calc(var(--vw) * 2.4); top: calc(var(--vw) * 2.2); height: calc(var(--vw) * 4.6); }
  .banner-nav { right: calc(var(--vw) * 2.6); font-size: calc(var(--vw) * 2.55); gap: calc(var(--vw) * 1.6); }
  .banner-nav .sep { width: calc(var(--vw) * 1.3); height: calc(var(--vw) * 1.9); }
  .banner-star { right: calc(var(--vw) * 3.4); width: calc(var(--vw) * 4.4); height: calc(var(--vw) * 4.4); }
  .banner-menu { font-size: max(15px, calc(var(--vw) * 4)); }
}

/* one type scale everywhere */
.hd, .hd-page { font-family: var(--body); font-weight: 300; color: var(--pink); font-size: var(--t-hd); line-height: 1; letter-spacing: -.045em; margin: 0 0 calc(var(--gap) * 1.2); }
.hd-page { text-align: center; padding-top: clamp(40px, 8vh, 90px); margin-bottom: clamp(30px, 6vh, 60px); }
.txt, .book-txt, .reveal-card .veil { font-family: var(--body); font-weight: 400; font-size: var(--t-body); line-height: 1.3; letter-spacing: -.01em; color: var(--navy); }
.txt { margin: calc(var(--gap) * .8) 0; max-width: 52ch; }
.reveal-card .vh { font-size: var(--t-body); font-weight: 500; }

/* air between sections and pages */
.ptitle { padding-block: clamp(50px, 10vh, 120px) clamp(10px, 3vh, 30px); }
.blk { padding-block: clamp(70px, 14vh, 170px) 0; }
.blk:last-child { padding-bottom: clamp(90px, 18vh, 200px); }
.blk .hd + .jrow, .jrow + .jrow, .jrow + .txt + .jrow { margin-top: var(--gap); }
.blk .jrow + .hd { margin-top: clamp(60px, 11vh, 130px); }
.balls-sec { margin-top: calc(var(--vh) * 18); }
.contact-sec { margin-top: calc(var(--vh) * 18); }

/* justified rows: everything on one line shares one height */
.jrow { display: flex; gap: var(--gap); align-items: stretch; }
.jrow > .jf { margin: 0; min-width: 0; flex-basis: 0 !important; }
.jrow > .jf img, .jrow > .jf video, .jrow > .jf a { display: block; width: 100%; height: auto; }
.jrow > .jt { min-width: 0; display: flex; flex-direction: column; flex-basis: 0; }
.jt.mid { justify-content: center; } .jt.top { justify-content: flex-start; } .jt.bot { justify-content: flex-end; }
.jt .txt.r { margin-left: auto; }
.jt .shot video { width: 100%; }
.narrow { max-width: 860px; margin-inline: auto; }
.logo-row { display: flex; justify-content: center; align-items: flex-end; gap: var(--gap); }
.logo-row .logo-swap { width: min(440px, 70vw); flex: none; margin: 0; border-radius: 0; }
.logo-row .txt { margin: 0; max-width: 24ch; }
@media (max-width: 759px) {
  .jrow { flex-direction: column; }
  .jrow > .jf, .jrow > .jt { flex: none !important; width: 100%; }
  .jt .txt.r, .txt.r { text-align: left; margin-left: 0; }
  .logo-row { flex-direction: column; align-items: center; }
}

/* paper balls: quick, continuous unfold */
.ball .fr { transition: opacity .16s linear, transform .3s cubic-bezier(.2,.9,.25,1.15); animation: none !important; transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(.92); }
.ball .fr.on { transform: translate(-50%, -50%) rotate(var(--r, 0deg)) scale(1); }
.ball .fr[data-f="2"] { --k: 1.16; } .ball .fr[data-f="3"] { --k: 1.32; } .ball .fr[data-f="4"] { --k: 1.5; }
.ball-g .label { transition: opacity .2s ease; }
.ball-g.open .label { opacity: 0 !important; }
.ball-g { transition: transform .6s cubic-bezier(.2,.85,.25,1); }
.balls-sec .ab { transition: height .6s cubic-bezier(.2,.85,.25,1); }

/* crocodile: shorter, smoother */
.hero-web { height: 150vh; }
.hero-phone { height: 240vh; }
.hero-phone .frame.flip img { width: 100%; height: auto; }

/* monkey: hands + arms + body, only the arms stretch */
.about .monkey { position: absolute; transform: none !important; }
.about .monkey img { position: absolute; left: 0; width: 100%; max-width: none; }
.about .monkey .mk-arms { transform-origin: 50% 0; will-change: transform; }
.about .monkey .mk-body { will-change: transform; }

/* =========================================================
   v5
   ========================================================= */
/* Macchia page titles (sized from the projects page layout: "projects" = 19.3% of page width) */
.ptitle { margin: 0; display: flex; justify-content: center; padding-block: clamp(46px, 9vh, 110px) clamp(30px, 6vh, 70px); }
.ptitle img { width: calc(var(--lw) * var(--vw) * 0.0208); max-width: 92vw; height: auto; }
h2.ptitle { padding-block: 0 clamp(30px, 6vh, 70px); }
@media (max-width: 759px) { .ptitle img { width: calc(var(--lw) * var(--vw) * 0.042); } }

/* projects page — exact layout: 2 columns, edge to edge, pink captions */
.pgrid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 0; row-gap: calc(var(--vw) * 3.1); padding-bottom: calc(var(--vw) * 12); }
.pcell { display: block; text-decoration: none; color: var(--pink); }
.pmedia { display: block; aspect-ratio: 960 / 942; overflow: hidden; background: #e9e1ee; }
.pmedia img, .pmedia video { width: 100%; height: 100%; object-fit: cover; display: block; }
.pcap { display: block; font-family: var(--body); font-weight: 400; font-size: calc(var(--vw) * 1.77); line-height: 1.2; margin-top: calc(var(--vw) * .55); padding-left: calc(var(--vw) * .3); letter-spacing: -.005em; }
@media (max-width: 759px) {
  .pgrid { grid-template-columns: 1fr; row-gap: 34px; }
  .pcap { font-size: 15px; margin-top: 6px; padding-left: 4px; }
}

/* thinner description boxes, text centred against its images */
.txt { max-width: 30ch; }
.txt.c { max-width: 44ch; }
.jt { justify-content: center !important; }
.jrow { align-items: center; }
.jrow > .jt { flex-grow: 0 !important; flex-shrink: 0; width: clamp(180px, 19vw, 300px); }
.jt .txt { margin-inline: auto; }
.jt .txt.r { text-align: right; margin-right: 0; }
@media (max-width: 759px) { .jrow > .jt { width: 100%; } .jt .txt, .jt .txt.r { margin-inline: 0; text-align: left; } }

/* phone croc flip-book canvas covers the stage */
.hero-phone .flipc { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; pointer-events: none; }
.hero-phone .frame.flip { display: none; }

/* paper balls: fast */
.ball .fr { transition: opacity .08s linear, transform .18s cubic-bezier(.2,.9,.25,1.15); }
.balls-sec .ab { transition: height .4s cubic-bezier(.2,.85,.25,1); }
.ball-g { transition: transform .4s cubic-bezier(.2,.85,.25,1); }

.balls-sec.web { margin-top: calc(var(--vh) * 6); }
.jrow > .jt { flex: 0 0 clamp(190px, 17vw, 270px) !important; width: auto; }
.jrow:has(> .jt) { max-width: 1080px; margin-inline: auto; }
@media (max-width: 759px) { .jrow > .jt { flex: none !important; width: 100%; } .jrow:has(> .jt) { max-width: none; } .jrow > .jt:empty { display: none; } }
.blk { max-width: 1080px; margin-inline: auto; }
.jrow > .jt { align-self: center !important; }
.blk .hd { text-align: left; }
.narrow .jrow { justify-content: center; }
.hero-web .pc { z-index: 2; will-change: transform; transform-origin: 50% 50%; }
.hero-web .pc img { width: 100%; height: auto; display: block; }
.hero-web { height: 230vh; }

/* =========================================================
   v6 — layout grid (web 12 col / phone 2 col), titles, snake, shop
   ========================================================= */
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 24px; max-width: 1200px; margin-inline: auto; padding-inline: max(24px, env(safe-area-inset-left, 0px)); align-items: end; }
.grid.gap-top { margin-top: 24px; }
.gi { grid-column: var(--st, auto) / span var(--s); margin: 0; min-width: 0; position: relative; }
.gi img, .gi video { display: block; width: 100%; height: auto; }
.gi.fit { aspect-ratio: var(--ar); overflow: hidden; }
.gi.fit img, .gi.fit video { height: 100%; object-fit: cover; }
.gt { grid-column: var(--st, auto) / span var(--s); min-width: 0; display: flex; flex-direction: column; align-self: end; }
.gt-start { align-self: start; }
.gt .txt { margin: 0; max-width: 34ch; }
.gt .txt + .txt { margin-top: .9em; }
.gt-r { text-align: right; align-items: flex-end; }
.gt-l { text-align: left; align-items: flex-start; }
.gt-c { text-align: center; align-items: center; }
.gt-c .txt { max-width: 46ch; }
.gt .hd { margin: 0 0 .7em; }
.gt-r .hd { text-align: right; }
.gt .gv { margin: 18px 0 0; width: 100%; }
.gt .gv video { width: 100%; display: block; }
.gsec { padding-top: clamp(90px, 16vh, 180px); }
.gsec.first { padding-top: 0; }
.gsec:last-of-type { padding-bottom: clamp(110px, 20vh, 220px); }
.hd.gh { max-width: 1200px; margin: 0 auto 28px; padding-inline: max(24px, env(safe-area-inset-left, 0px)); }
.hd.gh.center { text-align: center; margin-bottom: clamp(40px, 7vh, 80px); }
.gi.logo-swap { aspect-ratio: 1; max-width: none; margin: 0; width: auto; }
.reveal-card.gi { display: block; }
/* titles: centred between the extended banner and the first picture */
.ptitle { padding-block: clamp(70px, 12vh, 140px) clamp(70px, 12vh, 140px); }
.ptitle.sub { padding-block: 0 clamp(50px, 9vh, 100px); }
.ptitle a { display: block; line-height: 0; }
.shop-page { min-height: calc(var(--vh) * 100); display: grid; place-items: center; }
.shop-title { padding: 0; }

@media (max-width: 759px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 12px; row-gap: 12px; padding-inline: 16px; }
  .gi, .gt { grid-column: auto / span var(--m) !important; }
  .m0 { display: none !important; }
  .gt, .gt-r, .gt-l { text-align: left; align-items: flex-start; }
  .gt-r .hd { text-align: left; }
  .gt .txt { max-width: none; }
  .gsec { padding-top: 70px; }
  .ptitle { padding-block: 56px 56px; }
}

/* snake: tongue hisses */
.contact-sec .snake { position: absolute; }
.contact-sec .snake > img:first-child { width: 100%; height: auto; display: block; }
.contact-sec .tongue { position: absolute; height: auto; max-width: none; }
.tongue-web { transform-origin: 100% 50%; }
.tongue-phone { transform-origin: 0% 100%; }
.contact-sec.in .tongue { animation: hiss 1.6s ease-in-out infinite; }
@keyframes hiss {
  0%, 46%, 100% { transform: scale(1); }
  50% { transform: scale(.55); } 54% { transform: scale(1.08); } 58% { transform: scale(.6); } 62% { transform: scale(1.12); } 66% { transform: scale(.7); } 72% { transform: scale(1); }
}
.contact-sec.phone .snake-grp { position: absolute; inset: 0; will-change: transform; }
.contact-sec.phone { padding-top: calc(var(--vh) * 6); padding-bottom: calc(var(--vh) * 22); }

/* phone hero: no sticky, croc stays put, title drops in, then fades as balls rise */
.hero-phone { height: auto; }
.hero-phone .stage { position: relative; height: auto; }
.hero-phone .ab { position: relative; }
.balls-sec.phone { margin-top: calc(var(--vh) * -12); will-change: transform; }

/* paper balls: whole unfolded sheet is clickable to crumple; centre opens the page */
.ball-g.open .fr.on { pointer-events: auto; }
.ball-go { width: 62%; }
#cursor img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .15s; }
#cursor .c-pink { opacity: 0; }
#cursor.pink .c-pink { opacity: 1; }
#cursor.pink .c-grey { opacity: 0; }
/* phone hero: no hard cut at the bottom of the crocodile artwork */
.hero-phone .stage { overflow: visible; }
.hero-phone .frame[data-frame="v"] { -webkit-mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); mask-image: linear-gradient(to bottom, #000 78%, transparent 100%); }
.hero-phone .ab { will-change: transform; }
.hero-phone { opacity: 1 !important; position: relative; z-index: 1; }
.balls-sec.phone { position: relative; z-index: 2; }
/* v7 */
.gt-split { align-self: stretch; justify-content: space-between; }
.gt-split .hd { margin: 0; }
/* titles centred between the banner and the first content below */
.ptitle { padding-block: clamp(60px, 10vh, 120px); }
.ptitle + .gsec, .ptitle + .hd.gh, .ptitle + .hd.gh + .gsec { padding-top: 0; }
.ptitle + .gsec > .hd.gh:first-child { margin-top: 0; }
html:has(.balls-sec) { scroll-snap-type: none; }
@media (max-width: 759px) { .gt-split { justify-content: flex-start; } .gt-split .hd { margin-bottom: .7em; } }

/* =========================================================
   v8 — phone crocodile (same animation as web), type scale, 5mm phone margins, larger-text option
   ========================================================= */
.hero-cphone { position: relative; height: 230vh; }
.hero-cphone .stage { position: sticky; top: 0; height: calc(var(--vh) * 100); overflow: hidden; }
.hero-cphone .ab { position: absolute; left: 0; top: 50%; margin: 0; transform: translateY(-50%); }
.hero-cphone .croc { z-index: 3; will-change: transform; }
.hero-cphone .pc { z-index: 2; will-change: transform; transform-origin: 50% 50%; }
.hero-cphone .pc img { width: 100%; height: auto; display: block; }
.balls-sec.phone { margin-top: 0; transform: none !important; }

/* type scale: headings −8pt (≈ −11px), body a step smaller; 1.5 leading, ~60ch measure */
:root { --t-hd: clamp(20px, 1.6vw + 6px, 31px); --t-body: 14px; --t-cap: 12px; }
.txt, .book-txt, .reveal-card .veil, .tcap { font-size: var(--t-body); line-height: 1.5; letter-spacing: 0; }
.gt .txt { max-width: 32ch; }
.gt-c .txt { max-width: 60ch; }
.pcap { font-size: calc(var(--t-body) + 2px); }
@media (min-width: 760px) { .pcap { font-size: clamp(14px, 1.15vw, 20px); } }
@media (max-width: 759px) {
  :root { --t-body: 13px; --t-hd: 22px; }
  /* 5 mm (≈19px) clear space between any text and the screen edge */
  .grid, .hd.gh, .wrap { padding-left: max(19px, env(safe-area-inset-left, 0px)); padding-right: max(19px, env(safe-area-inset-right, 0px)); }
  .pcap { padding-inline: 19px; font-size: 13px; }
  .book-txt { padding-inline: 19px; }
  .ptitle img { max-width: calc(100vw - 38px); }
}
/* larger text, switched on from the star menu */
html.big-text { --t-body: 17px; --t-hd: clamp(26px, 2vw + 8px, 38px); }
html.big-text .pcap { font-size: clamp(17px, 1.4vw, 23px); }
@media (max-width: 759px) { html.big-text { --t-body: 16px; --t-hd: 26px; } html.big-text .pcap { font-size: 16px; } }
.banner-menu .tt { margin-top: 6px; display: inline-flex; align-items: baseline; gap: 1px; font-family: var(--body); font-weight: 500; color: var(--navy); background: none; border: 1.5px solid var(--navy); border-radius: 999px; padding: 2px 12px 4px; line-height: 1; cursor: pointer; transform: translateY(-14px); opacity: 0; transition: transform .45s cubic-bezier(.2,.9,.25,1.15), opacity .3s ease, background .2s, color .2s; transition-delay: calc(var(--i) * 60ms); }
.banner-menu.open .tt { transform: none; opacity: 1; }
.banner-menu .tt .T { font-size: 1em; } .banner-menu .tt .t { font-size: .7em; }
.banner-menu .tt[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: var(--white); }

/* book: pages are the PDF's own proportions (A5 landscape, 419.5 × 297.6 pt) — never cropped */
.book { width: min(92vw, calc((var(--vh) * 100 - var(--bh-min) - 150px) * 2.8191), 1300px); aspect-ratio: 2.8191 / 1; }
.leaf .face img { object-fit: contain; background: #fff; }
.book-sec { height: 520vh; }
@media (max-width: 759px) { .book { width: calc(100vw - 38px); } .book-sec { height: 420vh; } }
.book-txt { position: absolute; left: 50%; right: auto; transform: translateX(-50%); width: min(60ch, calc(100vw - 38px)); max-width: none; text-align: center; bottom: clamp(14px, 4vh, 40px); margin: 0; padding: 0; }
.hero-cphone { height: 185vh; }

/* =========================================================
   v9 — phone hero with upright crocodile, single-page catalogue, contact fix, larger text
   ========================================================= */
.hero-phone { height: auto; position: relative; z-index: 1; opacity: 1; }
.hero-phone .ab { position: relative; left: auto; top: auto; bottom: auto; margin: 0 auto; transform: none !important; }
.hero-phone .croc-up { z-index: 3; }
.hero-phone .croc-up img { width: 100%; height: auto; display: block; }
.hero-phone .txt { z-index: 2; }
.balls-sec.phone { margin-top: calc(var(--vh) * 4); }

/* contact (phone): no hard cut across the snake */
.contact-sec.phone { overflow: visible; overflow-x: clip; }
.contact-sec.phone .ab { overflow: visible !important; }

/* catalogue (phone): one page at a time, as large as the screen allows */
.book1 { position: relative; width: calc(100vw - 38px); aspect-ratio: 1.4095 / 1; perspective: 1800px; }
.book1 .pg { position: absolute; inset: 0; transform-origin: 0 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 18px 36px -22px rgba(18,3,110,.5); background: #fff; }
.book1 .pg img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (max-width: 759px) { .book-sec { height: 700vh; } .book-stage { padding-top: 0; } }

/* product design (phone): body text centred */
@media (max-width: 759px) {
  .pg-product .gt, .pg-product .gt-r, .pg-product .gt-l { text-align: center; align-items: center; }
  .pg-product .gt .txt { margin-inline: auto; }
}

/* larger text: a further step up (~ +5 pt) */
html.big-text { --t-body: 23px; --t-hd: clamp(32px, 2.4vw + 10px, 46px); }
html.big-text .pcap { font-size: clamp(22px, 1.7vw, 28px); }
html.big-text .gt .txt { max-width: 40ch; }
@media (max-width: 759px) { html.big-text { --t-body: 21px; --t-hd: 32px; } html.big-text .pcap { font-size: 21px; } }
.hero-phone .lt { z-index: 2; will-change: transform; transform-origin: 50% 50%; }
.hero-phone .lt img { width: 100%; height: auto; display: block; }
.hero-phone .croc-up { will-change: transform; }
/* phone: body text on all project pages centred on the page */
@media (max-width: 759px) {
  .gt, .gt-r, .gt-l, .gt-c { text-align: center !important; align-items: center !important; }
  .gt .txt { margin-inline: auto !important; }
  .gt .hd, .gt-r .hd { text-align: center !important; }
}
/* v10 — phone only */
@media (max-width: 759px) {
  .grid.aliens > .gt { order: 3; }
  .pcap { text-align: left !important; }
  html.big-text .contact-sec.phone a.p { transform: scale(1.22); transform-origin: 50% 50%; }
}

/* =========================================================
   v11
   ========================================================= */
/* scrollbar: palette gradient that shifts as you scroll */
:root { --sb1: #12036E; --sb2: #F35FA8; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--lav); }
::-webkit-scrollbar-thumb { background: linear-gradient(to bottom, var(--sb1), var(--sb2)); border-radius: 999px; border: 2px solid var(--lav); }

/* text-size button at the foot of the home page */
.tt-foot { display: flex; justify-content: center; padding-block: 20px 60px; }
.tt-foot .tt { display: inline-flex; align-items: baseline; gap: 1px; font-family: var(--body); font-weight: 500; font-size: 22px; color: var(--navy); background: none; border: 1.5px solid var(--navy); border-radius: 999px; padding: 4px 16px 6px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.tt-foot .tt .t { font-size: .7em; }
.tt-foot .tt[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: var(--white); }

.only-phone-i { display: none; }
@media (max-width: 759px) { .only-web-i { display: none; } .only-phone-i { display: inline; } }

/* about: body text scales with the larger-text option */
.about .bio-live { display: none; }
html.big-text .about .ab-web .bio { font-size: calc(var(--u) * 37); line-height: calc(var(--u) * 46); }
@media (max-width: 759px) {
  html.big-text .about .bio-img { display: none; }
  html.big-text .about .bio-live { display: block; font-size: 17px; line-height: 1.35; color: var(--pink); font-weight: 400; }
  html.big-text .about .ab-phone { height: auto !important; min-height: calc(var(--H) * var(--u)); padding-bottom: 40px; }
}

/* phone page tweaks from the marked-up screenshots */
@media (max-width: 759px) {
  /* commissions: caption sits beside the first illustration, left aligned */
  .grid.edit { align-items: center; }
  .grid.edit > .gt { order: 1; align-self: center !important; text-align: left !important; align-items: flex-start !important; }
  .grid.edit > .gt .txt { margin: 0 !important; }
  .grid.edit > .gi:nth-child(2) { order: 2; }
  /* board game: barn photo wide, caption at its bottom right, left aligned */
  .grid.house { grid-template-columns: 1.6fr 1fr; align-items: end; }
  .grid.house > .gt { text-align: left !important; align-items: flex-start !important; align-self: end !important; }
  .grid.house > .gt .txt { margin: 0 !important; font-size: calc(var(--t-body) + 2px); line-height: 1.25; }
}
@media (max-width: 759px) {
  html.big-text .about .ab-phone { height: auto !important; }
  html.big-text .about .bio-live { position: relative; left: auto; top: auto; margin-left: calc(60 * var(--u)); padding-top: calc(390 * var(--u)); width: calc(880 * var(--u)); text-align: left; }
  html.big-text .about .bio-live .spacer { float: left; width: calc(380 * var(--u)); height: calc(1180 * var(--u)); }
  html.big-text .about .bio-live p { margin: 0 0 .8em; }
  html.big-text .about .bio-live .lem { display: block; width: calc(442 * var(--u)); height: auto; margin: 24px 0 0 auto; clear: both; }
}
/* v12 — phone */
.tt-snake { display: flex; justify-content: center; }
.tt-snake .tt { display: inline-flex; align-items: baseline; gap: 1px; font-family: var(--body); font-weight: 500; font-size: 22px; color: var(--navy); background: none; border: 1.5px solid var(--navy); border-radius: 999px; padding: 4px 16px 6px; line-height: 1; cursor: pointer; transition: background .2s, color .2s; }
.tt-snake .tt .t { font-size: .7em; }
.tt-snake .tt[aria-pressed="true"] { background: var(--pink); border-color: var(--pink); color: var(--white); }
@media (max-width: 759px) {
  .tt-foot { display: none; }
  .contact-sec.phone { padding-bottom: calc(var(--vh) * 10); }
  .grid.edit > .gt { align-self: end !important; }
  .gsec:has(> .grid.house) { padding-top: 12px; }
}
/* v13 — phone */
@media (max-width: 759px) {
  .contact-sec.phone { padding-bottom: 18px !important; }
  /* catalogue: book centred on screen with its caption directly beneath */
  .book-stage { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding-top: var(--bh-min); }
  .book-stage .book-txt { position: static; transform: none; left: auto; bottom: auto; width: calc(100vw - 38px); }
  /* political concertina: the catalogue has fully scrolled away, then this sits centred on its own screen */
  .book-sec + div > .gsec { min-height: calc(var(--vh) * 100); display: flex; flex-direction: column; justify-content: center; padding-top: calc(var(--bh-min) + 20px); padding-bottom: 40px; margin-top: calc(var(--vh) * 30); }
}
@media (max-width: 759px) { .book-stage { padding-bottom: calc(var(--vh) * 8); } }
/* v14 — phone */
@media (max-width: 759px) {
  .book1 .pg { box-shadow: none; }
  .book-sec + div .grid > .gi { grid-column: auto / span 2 !important; display: block !important; }
}
/* v15 */
.gal-foot { display: flex; justify-content: center; padding-block: 10px 90px; }
.gal-btn { display: inline-flex; align-items: center; font-family: var(--body); font-weight: 400; font-size: 18px; color: var(--navy); background: none; border: 1.5px solid var(--navy); border-radius: 999px; padding: 6px 20px 7px; line-height: 1; cursor: pointer; transition: background .2s, color .2s, border-color .2s; }
.gal-btn:hover { background: var(--pink); border-color: var(--pink); color: var(--white); }
@media (max-width: 759px) {
  .hero-phone { margin-bottom: calc(-1720 * var(--vw) / 10); }
  .balls-sec.phone, #contact { transform: translate3d(0, calc(1720 * var(--vw) / 10), 0); }
  .hero-phone .txt-wrap { overflow: hidden; clip-path: inset(-100vh 0 calc(100% - 1290 / 2420 * 100%) 0); }
}
.only-phone-g { display: none; }
@media (max-width: 759px) { .only-phone-g { display: block; } }
@media (min-width: 760px) { html.big-text .contact-sec.web a.p { transform: scale(1.2); transform-origin: 50% 50%; } }