/* ==========================================================================
   Darrpana's Café — styles
   Sections: tokens · base · utilities · header · hero ·
   persistent cup · cursor · work folder · about · career timeline ·
   explorations · social · closing · footer · subpages · reduced motion
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* palette — sampled from the colour reference */
  --paper: #fbf8f2;          /* warm white */
  --cream: #f3ecdf;
  --grey: #ece9e4;           /* soft grey surfaces / footer */
  --ink: #151515;            /* near-black */
  --ink-2: #1f1e1d;
  --ink-soft: #57534e;       /* secondary text on paper (7:1) */
  --on-dark: #f5f2ec;
  --on-dark-soft: #b9b4ab;   /* secondary text on ink (9:1) */
  --purple: #5b55e0;         /* primary accent (5.4:1 on paper) */
  --purple-light: #a39ff5;   /* purple for text on ink (7.7:1) */
  --sticker: #6c6afb;        /* sticker backing in the illustrations */
  --nav: #7775f5;            /* nav links */
  --nav-hover: rgba(119, 117, 245, .09);
  --nav-current: rgba(119, 117, 245, .16);
  --hero-bg: #ffffff;        /* the hero matches the artwork's white */
  --pink: #d62a7e;
  --mint: #72cfb8;
  --coffee: #4a2e1f;
  --crema: #c08b5c;
  --foam: #f1e3cc;

  /* one typeface everywhere: Syne (the three roles are kept so sizes/weights can differ) */
  --font-serif: "Syne", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-sans: "Syne", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-hand: "Syne", system-ui, -apple-system, "Segoe UI", sans-serif;

  --header-h: 64px;
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1200px;
  --radius: 2px; /* sharp corners everywhere (circles stay 50%) */
  --shadow-card: none;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

  --grain-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --grain-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper) var(--grain-dark);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; line-height: 1.1; margin: 0; font-optical-sizing: auto; letter-spacing: -.01em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
section[id], footer[id] { scroll-margin-top: var(--header-h); }

:focus-visible { outline: 3px solid var(--purple); outline-offset: 3px; border-radius: 2px; }
.on-dark :focus-visible, .section--dark :focus-visible { outline-color: var(--mint); }

/* ---------- Utilities ---------- */
.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; left: 16px; top: -60px; z-index: 200; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 2px; text-decoration: none; font-weight: 700; transition: top .2s; }
.skip-link:focus { top: 12px; }

.section { position: relative; padding-block: clamp(80px, 11vw, 150px); }
.section--dark { background: var(--ink) var(--grain-light); color: var(--on-dark); }
.section--paper { background: var(--paper) var(--grain-dark); }

.eyebrow { font-family: var(--font-sans); font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--purple); margin-bottom: 14px; }
.section--dark .eyebrow { color: var(--purple-light); }
.section-title { font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.4rem); }
.lede { color: var(--ink-soft); max-width: 46ch; margin-top: 16px; }
.section--dark .lede { color: var(--on-dark-soft); }
.hand { font-family: var(--font-hand); font-weight: 600; font-size: 1.45rem; line-height: 1.1; color: var(--purple); }

.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 24px; border-radius: 2px;
  background: var(--ink); color: var(--paper);
  font-weight: 700; font-size: 1rem; text-decoration: none; border: 0; cursor: pointer;
  box-shadow: none;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s;
}
.btn:hover { transform: translateY(-2px); box-shadow: none; }
.btn:active { transform: translateY(1px); box-shadow: none; }

.link-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 2px no-repeat;
  padding-bottom: 3px;
  transition: background-size .3s var(--ease-out), color .2s;
}
.link-cta:hover { background-size: 0 2px; background-position: 100% 100%; color: var(--purple); }
.link-cta .arrow { transition: transform .3s var(--ease-out); }
.link-cta:hover .arrow { transform: translateX(4px); }

.reveal { opacity: 0; transform: translateY(24px); transition: opacity .9s var(--ease-out), transform .9s var(--ease-out); transition-delay: var(--d, 0s); }
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Wavy ribbon transitions (echo the flowing shapes in the colour reference) */
.ribbons { position: absolute; left: 0; right: 0; height: clamp(60px, 9vw, 130px); pointer-events: none; z-index: 1; }
.ribbons svg { width: 100%; height: 100%; }
.ribbons--top { top: 0; transform: translateY(-99%); }
.ribbons--bottom { bottom: 0; transform: translateY(99%) scaleY(-1); }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100; height: var(--header-h);
  transition: background-color .35s, box-shadow .35s, transform .45s var(--ease-out);
}
/* hidden while scrolling down, back as soon as you scroll up (header.js) */
.site-header.is-hidden { transform: translateY(-110%); }
.site-header.is-scrolled {
  background: rgba(255, 255, 255, .86);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  box-shadow: none;
}
.site-header__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.logo { display: inline-flex; align-items: center; text-decoration: none; border-radius: 2px; }
.logo__svg { display: block; width: auto; height: 25px; overflow: visible; }
/* hover: the hair sways a little, as if caught by a breeze */
.logo__hair { transform-box: fill-box; transform-origin: 50% 0; }
.logo:hover .logo__hair, .logo:focus-visible .logo__hair { animation: hair-wave 1.2s ease-in-out; }

/* Nav: Work · Explorations · About centred, Resume on the right.
   Links are #7775F5; hover adds a very light rectangle and pops in the item's icon. */
.nav__list { display: flex; align-items: center; gap: clamp(12px, 2.6vw, 34px); }
.nav__link {
  position: relative; display: inline-block; padding: 8px 14px; border-radius: 2px;
  text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--nav);
  transition: background-color .25s var(--ease-out);
}
.nav__link:hover, .nav__link:focus-visible { background: var(--nav-hover); }
.nav__link[aria-current], .nav__link[aria-current]:hover { background: var(--nav-current); } /* selected: a super light purple pill */
.nav__ext { font-size: .75em; margin-left: 3px; opacity: .7; }
.nav__icon {
  position: absolute; right: -3px; top: -1px; width: 20px; height: 24px; pointer-events: none;
  opacity: 0; transform: translateY(5px) scale(.5) rotate(-18deg); transform-origin: 30% 80%;
  transition: opacity .18s, transform .3s var(--ease-out);
}
.nav__link:hover .nav__icon, .nav__link:focus-visible .nav__icon { opacity: 1; transform: none; transition: opacity .15s, transform .38s var(--ease-spring); }
@media (min-width: 720px) {
  .site-header__inner { display: grid; grid-template-columns: 1fr auto 1fr; }
  .logo { justify-self: start; }
  .nav { grid-column: 2 / 4; display: grid; grid-template-columns: subgrid; align-items: center; }
  .nav__list--end { justify-self: end; }
}

/* Explorations icon: a coffee pouch, bigger than the text, to the right of the label; its
   beans spill left over the word. Appear: the pouch pops in and tips (drawn pose = tipped),
   beans fly out of the opening — x eases out, y overshoots, so they arc and bounce into place.
   Leave: beans tuck back into the pouch, it rights itself and fades. All transitions, so a
   quick hover in/out reverses smoothly from wherever it is. */
.nav__icon--explore {
  left: 50%; right: auto; top: 50%; width: 68px; height: 48px; margin-top: -27px;
  transform: translateY(6px) scale(.7); transform-origin: 75% 85%;
  transition: opacity .22s .12s, transform .3s var(--ease-out) .08s;
}
.nav__link:hover .nav__icon--explore, .nav__link:focus-visible .nav__icon--explore { transition: opacity .16s, transform .42s var(--ease-spring); }
.np__pouch { transform-box: view-box; transform-origin: 700px 600px; transform: rotate(14deg); transition: transform .3s var(--ease-out); }
.nav__link:hover .np__pouch, .nav__link:focus-visible .np__pouch { transform: none; transition: transform .55s cubic-bezier(.3, 1.7, .5, 1) .04s; }
/* each bean starts in the pouch opening (≈ 420, 235) and lands where it is drawn */
.np__bean--1 { --sx: 97px; --sy: -14px; }
.np__bean--2 { --sx: 170px; --sy: -190px; }
.np__bean--3 { --sx: 325px; --sy: -310px; }
.np__bean { transform: translateX(var(--sx)); transition: transform .26s ease-in; }
.np__fall {
  transform-box: fill-box; transform-origin: center;
  transform: translateY(var(--sy)) scale(.25) rotate(-120deg); opacity: 0;
  transition: transform .26s ease-in, opacity .18s .08s;
}
.nav__link:hover .np__bean, .nav__link:focus-visible .np__bean { transform: none; transition: transform .5s cubic-bezier(.2, .75, .35, 1) var(--d); }
.nav__link:hover .np__fall, .nav__link:focus-visible .np__fall { transform: none; opacity: 1; transition: transform .62s cubic-bezier(.45, .1, .5, 1.55) var(--d), opacity .1s var(--d); }
.np__bean--1 { --d: .14s; } .np__bean--2 { --d: .22s; } .np__bean--3 { --d: .3s; }

/* About icon: a cookie and its wrapper. Hidden pose imitates cookie-1.svg (cookie tucked into
   the wrapper); hover pulls them apart — the wrapper slides aside, the cookie shifts out over
   the word, and three crumbs pop out with a soft bounce. */
.nav__icon--about {
  left: 44%; right: auto; top: 50%; width: 74px; height: 40px; margin-top: -21px;
  transform: translateY(6px) scale(.7); transform-origin: 30% 70%;
  transition: opacity .22s .14s, transform .3s var(--ease-out) .08s;
}
.nav__link:hover .nav__icon--about, .nav__link:focus-visible .nav__icon--about { transition: opacity .16s, transform .42s var(--ease-spring); }
.nk__wrapper { transform-box: fill-box; transform-origin: 30% 50%; transform: translateX(-150px) rotate(-4deg); transition: transform .28s var(--ease-out); }
.nk__cookie { transform-box: fill-box; transform-origin: center; transform: translateX(80px) rotate(25deg); transition: transform .28s var(--ease-out); }
.nav__link:hover .nk__wrapper, .nav__link:focus-visible .nk__wrapper { transform: rotate(3deg); transition: transform .55s cubic-bezier(.3, 1.5, .5, 1) .08s; }
.nav__link:hover .nk__cookie, .nav__link:focus-visible .nk__cookie { transform: none; transition: transform .6s cubic-bezier(.3, 1.5, .5, 1) .08s; }
.nk__crumb { transform-box: fill-box; transform-origin: center; transform: translate(-30px, 0) scale(0); opacity: 0; transition: transform .2s var(--ease-out), opacity .14s; }
.nav__link:hover .nk__crumb, .nav__link:focus-visible .nk__crumb { transform: none; opacity: 1; transition: transform .5s cubic-bezier(.3, 1.9, .5, 1) var(--d), opacity .1s var(--d); }
.nk__crumb--1 { --d: .22s; } .nk__crumb--2 { --d: .3s; } .nk__crumb--3 { --d: .38s; }

/* Resume icon: a café menu. Hover opens the cover a little and slides the CV page out
   from behind it, over the word. Clicking still opens the PDF in a new tab. */
.nav__icon--resume {
  left: 40%; right: auto; top: 50%; width: 44px; height: 44px; margin-top: -24px;
  transform: translateY(6px) scale(.7) rotate(-6deg); transform-origin: 40% 80%;
  transition: opacity .22s .14s, transform .3s var(--ease-out) .08s;
}
.nav__link:hover .nav__icon--resume, .nav__link:focus-visible .nav__icon--resume { transition: opacity .16s, transform .42s var(--ease-spring); }
.nm__cover { transform-box: view-box; transform-origin: 110px 600px; transform: rotate(7deg); transition: transform .28s var(--ease-out); }
.nav__link:hover .nm__cover, .nav__link:focus-visible .nm__cover { transform: none; transition: transform .5s cubic-bezier(.3, 1.5, .5, 1) .06s; }
.nm__page { transform-box: view-box; transform-origin: 400px 520px; transform: translate(-170px, 30px) rotate(-8deg); transition: transform .26s ease-in; }
.nav__link:hover .nm__page, .nav__link:focus-visible .nm__page { transform: none; transition: transform .6s cubic-bezier(.3, 1.45, .5, 1) .16s; }

/* Work icon: Darrpana's croissant + pencil, oversized, starting over the word.
   Appear: the sticker pops in, the pencil tips into its drawn pose, wipes in its scribble
   with a little drawing jiggle, and the two accent marks pop. Leave: everything reverses. */
.nav__icon--work {
  left: 36%; right: auto; top: 50%; width: 62px; height: 42px; margin-top: -21px;
  transform: translateY(6px) scale(.65) rotate(-6deg); transform-origin: 40% 70%;
  transition: opacity .22s .16s, transform .3s var(--ease-out) .1s;
}
.nav__link:hover .nav__icon--work, .nav__link:focus-visible .nav__icon--work { transition: opacity .16s, transform .42s var(--ease-spring); }
.nc__pencil { transform-box: view-box; transform-origin: 188px 352px; transform: rotate(14deg); transition: transform .3s var(--ease-out); }
.nav__link:hover .nc__pencil, .nav__link:focus-visible .nc__pencil { transform: none; transition: transform .5s cubic-bezier(.3, 1.6, .5, 1) .06s; }
.nc__wipe { transform-box: view-box; transform-origin: 220px 435px; transform: scaleX(0); transition: transform .22s ease-in; }
.nav__link:hover .nc__wipe, .nav__link:focus-visible .nc__wipe { transform: none; transition: transform .55s cubic-bezier(.4, .1, .3, 1) .16s; }
.nc__draw { transform-box: view-box; }
.nav__link:hover .nc__draw, .nav__link:focus-visible .nc__draw { animation: nc-draw .62s ease-in-out .16s; }
.nc__mark { transform-box: fill-box; transform-origin: center; transform: scale(0) rotate(-30deg); opacity: 0; transition: transform .2s var(--ease-out), opacity .14s; }
.nav__link:hover .nc__mark, .nav__link:focus-visible .nc__mark { transform: none; opacity: 1; transition: transform .38s var(--ease-spring) var(--d), opacity .1s var(--d); }
.nc__mark--1 { --d: .42s; } .nc__mark--2 { --d: .5s; }
.nc__croissant { transform-box: fill-box; transform-origin: 50% 90%; }
.nav__link:hover .nc__croissant, .nav__link:focus-visible .nc__croissant { animation: nc-squish .5s var(--ease-out) .05s; }

.nav-toggle { display: none; }

@media (max-width: 719px) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: 8px; border: 1.5px solid var(--ink); background: var(--paper);
    border-radius: 2px; padding: 6px 14px; font-weight: 700; font-size: .9rem; cursor: pointer;
  }
  .nav-toggle__icon { width: 16px; height: 10px; position: relative; }
  .nav-toggle__icon::before, .nav-toggle__icon::after { content: ""; position: absolute; left: 0; right: 0; height: 2px; background: currentColor; border-radius: 2px; transition: transform .3s var(--ease-out), top .3s; }
  .nav-toggle__icon::before { top: 1px; }
  .nav-toggle__icon::after { top: 7px; }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 4px; transform: rotate(45deg); }
  .nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 4px; transform: rotate(-45deg); }
  .nav {
    position: absolute; top: calc(var(--header-h) - 4px); right: var(--gutter); left: var(--gutter);
    background: var(--paper); border: 1.5px solid var(--ink); border-radius: var(--radius);
    box-shadow: none;
    padding: 10px; opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s, transform .3s var(--ease-out), visibility 0s .3s;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s, transform .3s var(--ease-out); }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { display: block; padding: 12px 14px; font-size: 1.05rem; border-radius: 2px; }
}

/* ---------- Hero ---------- */
/* Static layout (reduced motion): the composition, then the intro below it. */
.hero { position: relative; background: var(--hero-bg); padding-top: calc(var(--header-h) + clamp(16px, 3vw, 40px)); padding-bottom: clamp(56px, 8vw, 110px); }
.hero__stage { position: relative; }
.hero__stage .scene { width: min(100% - 2 * var(--gutter), 1200px); margin-inline: auto; }
.hero__coffee, .hero__hint { display: none; }
.hero__intro { width: min(100% - 2 * var(--gutter), 900px); margin: clamp(24px, 4vw, 48px) auto 0; text-align: center; display: flex; flex-direction: column; align-items: center; }
.cafe-sign {
  position: relative; display: inline-block; margin: 26px 0 26px; padding: 8px 16px 7px;
  border: 2px solid var(--ink); border-radius: 2px; background: var(--paper); color: var(--ink);
  font-family: var(--font-serif); font-weight: 600; font-size: .82rem; letter-spacing: .22em;
  transform-origin: 50% -26px; transform: rotate(-2.5deg);
  box-shadow: none;
  transition: transform .8s var(--ease-spring);
}
.cafe-sign::before, .cafe-sign::after { content: ""; position: absolute; top: -26px; width: 1.5px; height: 26px; background: currentColor; }
.cafe-sign::before { left: 18%; transform: rotate(8deg); transform-origin: bottom; }
.cafe-sign::after { right: 18%; transform: rotate(-8deg); transform-origin: bottom; }
.cafe-sign:hover { transform: rotate(2deg); }
.cafe-sign__dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); margin-right: 10px; vertical-align: 2px; }
.hero__title { font-size: clamp(2.1rem, 1.2rem + 3.2vw, 4.2rem); line-height: 1.06; max-width: 20ch; text-wrap: balance; }
.hero__title em { font-style: normal; color: var(--purple); }
.hero__sub { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 12px; margin-top: 24px; font-weight: 600; color: var(--ink-soft); font-size: .98rem; }
.hero__sub span + span::before { content: "·"; margin-right: 12px; color: var(--pink); font-weight: 800; }
.hero__scroll { display: inline-flex; align-items: center; gap: 8px; margin-top: 36px; font-size: .9rem; font-weight: 600; text-decoration: none; color: var(--ink-soft); }
.hero__scroll svg { width: 16px; height: 16px; animation: bob 2.4s ease-in-out infinite; }

/* Immersive layout: pinned stage + scroll track; hero.js drives the dive. */
@media (prefers-reduced-motion: no-preference) {
  .hero { padding: 0; }
  .hero__track { position: relative; height: 290vh; }
  .hero__stage {
    position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--hero-bg);
    display: grid; place-items: center; padding-top: var(--header-h);
  }
  .hero__stage .scene {
    width: min(94vw, calc((100svh - var(--header-h) - 56px) * 1802 / 1112), 1560px);
    margin: 0; will-change: transform;
  }
  .hero__coffee {
    display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: #000; clip-path: circle(0 at 50% 50%); /* matches the cup's ink */
  }
  /* once the screen is covered, ease into the site's dark (= the Work section) */
  .hero__coffee::after { content: ""; position: absolute; inset: 0; background: var(--ink) var(--grain-light); opacity: var(--ink-in, 0); }
  .hero__hint {
    display: block; position: absolute; left: 50%; bottom: clamp(16px, 4vh, 36px); translate: -50% 0; z-index: 2;
    font-size: 1.35rem !important; color: var(--ink-soft); white-space: nowrap; animation: bob 2.4s ease-in-out infinite;
  }
  .hero__intro {
    position: absolute; inset: var(--header-h) 0 0; z-index: 4; width: auto; margin: 0; padding: 24px var(--gutter);
    justify-content: center; opacity: 0; pointer-events: none; color: var(--on-dark);
  }
  .hero__intro.is-live { pointer-events: auto; }
  .hero__intro .cafe-sign { border-color: var(--paper); }
  .hero__intro .cafe-sign::before, .hero__intro .cafe-sign::after { background: var(--on-dark-soft); }
  .hero__intro .hero__title { color: var(--paper); }
  .hero__intro .hero__title em { color: var(--purple-light); }
  .hero__intro .hero__sub, .hero__intro .hero__scroll { color: var(--on-dark-soft); }
  /* the dive replaces the ribbon transition into Work */
  .work > .ribbons--top { display: none; }
}

/* Scene: every piece is positioned in % of the artwork canvas (config.hero.canvas) */
.scene { position: relative; z-index: 1; --mx: 0; --my: 0; }
.h-sticker {
  position: absolute; z-index: 1; padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
  border-radius: 2px; -webkit-tap-highlight-color: transparent;
  translate: calc(var(--mx) * -6px) calc(var(--my) * -6px);
}
.h-sticker__wobble { display: block; transform-origin: 55% 80%; animation: sticker-idle 7s ease-in-out infinite; }
.h-sticker img { display: block; width: 100%; height: auto; transition: transform .5s var(--ease-spring); filter: none; }
.h-sticker:hover img { transform: rotate(-2deg) scale(1.025); }
.scene.is-poked .h-sticker__wobble { animation: sticker-poke .7s var(--ease-out); }
.h-label {
  position: absolute; z-index: 2; pointer-events: none;
  translate: calc(var(--mx) * var(--depth) * 14px) calc(var(--my) * var(--depth) * 10px);
  animation: label-in .7s var(--ease-spring) both; animation-delay: calc(.35s + var(--i) * .14s);
}
.h-label__fly { display: block; will-change: transform, opacity; }
.h-label img { display: block; width: 100%; height: auto; animation: label-float 6s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
.bubble {
  position: absolute; left: 63%; top: -2%; z-index: 3;
  padding: 8px 16px; border: 2px solid var(--ink); border-radius: 2px 2px 2px 2px; background: var(--paper);
  font-family: var(--font-serif); font-style: normal; font-size: clamp(1rem, .8rem + .8vw, 1.35rem); white-space: nowrap;
  opacity: 0; transform: scale(.6) translateY(8px); transform-origin: 0 100%;
  transition: opacity .2s, transform .45s var(--ease-spring); pointer-events: none;
}
.scene.is-poked .bubble { opacity: 1; transform: none; }

/* Shared steam wisps (corner cup) */
.steam path { stroke-dasharray: 30; stroke-dashoffset: 30; opacity: 0; }
.float-cup.is-hot .steam path { animation: steam 2.4s ease-in-out infinite; }
.steam path:nth-child(2) { animation-delay: .5s !important; }
.steam path:nth-child(3) { animation-delay: 1s !important; }

/* ---------- Section stickers (illustrations in the hero's sticker style) ---------- */
.sticker { position: absolute; z-index: 1; display: block; rotate: var(--r, 0deg); }
.sticker img { display: block; width: 100%; height: auto; transform-origin: 50% 80%; animation: sticker-idle 8s ease-in-out infinite; transition: scale .45s var(--ease-spring); }
.sticker:hover img { scale: 1.06; animation: sticker-poke .7s var(--ease-out); }
.sticker--work { --r: 6deg; right: 0; top: -12px; width: clamp(150px, 19vw, 240px); }
.sticker--work img { filter: none; }
.sticker--career { --r: -10deg; right: 2%; bottom: 46px; width: clamp(100px, 11vw, 150px); }
.explore__intro { position: relative; }
.sticker--explore { --r: -5deg; right: var(--gutter); top: -24px; width: clamp(150px, 20vw, 260px); }
.sticker--explore img { animation-delay: -3s; }
@media (max-width: 859px) {
  .sticker--work { position: relative; top: auto; order: -1; width: 130px; margin-bottom: -8px; }
  .sticker--career { width: 84px; bottom: auto; top: -64px; }
  .sticker--explore { width: 110px; top: -40px; }
}

/* ---------- Persistent cup ---------- */
.float-cup {
  position: fixed; right: 22px; bottom: 22px; z-index: 90; width: 58px; height: 58px; pointer-events: none;
  transform-origin: 0 0; will-change: transform;
  filter: none;
  transition: opacity .3s;
}
.float-cup svg, .cup-slot svg { width: 100%; height: 100%; overflow: visible; }
.float-cup.is-docked { opacity: 0; }
.float-cup .liquid { transition: transform .5s var(--ease-out); }
@media (max-width: 719px) { .float-cup { width: 44px; height: 44px; right: 12px; bottom: 12px; } }

/* ---------- Custom cursor (fine pointers only) ---------- */
.has-cursor, .has-cursor * { cursor: none !important; }
.cursor { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; opacity: 0; transition: opacity .2s; }
.cursor.is-visible { opacity: 1; }
.cursor__icon { position: absolute; display: none; }
.cursor__icon svg { width: 100%; height: 100%; overflow: visible; }
.cursor[data-kind="bean"] .cursor__icon--bean { display: block; width: 16px; height: 16px; left: -8px; top: -8px; transition: transform .2s var(--ease-out); }
.cursor.is-pressing .cursor__icon--bean, .cursor.is-link .cursor__icon--bean { transform: scale(1.5) rotate(-20deg); }
.cursor:not([data-kind="bean"]) .cursor__dot { display: block; }
.cursor__dot { display: none; position: absolute; width: 6px; height: 6px; left: -3px; top: -3px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 2px var(--paper); }
/* Espresso cup (project cards): Darrpana's cup body with live, wavy steam.
   cursor.js sets the carry transform on .c-cup (lag + tilt); the pop-in lives on the icon. */
.cursor[data-kind="espresso"] .cursor__icon--espresso { display: block; width: 38px; height: 44px; left: 10px; top: -50px; animation: cursor-in .4s var(--ease-spring); }
.c-cup { position: absolute; inset: 0; transform-origin: 50% 85%; will-change: transform; }
.c-cup__body, .c-steam { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.c-cup__body { filter: none; transition: scale .2s var(--ease-out); transform-origin: 50% 85%; }
.cursor.is-pressing .c-cup__body { scale: .92; }
/* rising dashes travel up each wisp and loop seamlessly (period 155 = 100 path + 55 dash) */
.c-wisp { stroke-dasharray: 55 100; animation: wisp-rise var(--rise) linear var(--delay) infinite; }

/* ---------- Work: projects filed in a folder ---------- */
/* Base (also the reduced-motion layout): the cards as a plain grid. The folder stage,
   pocket and stacking live in the motion block below; work.js drives the cards. */
.folder__sheets { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.folder__pocket { display: none; }
.sheet {
  position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden;
  border: 4px solid var(--paper); border-radius: 2px; background: var(--paper);
  box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35);
  transform-origin: 50% 100%; text-decoration: none; transition: box-shadow .3s;
}
.sheet__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 2px; background: #2a2926; transition: transform .7s var(--ease-out); }
.sheet:hover .sheet__img, .sheet.is-out .sheet__img { transform: scale(1.04); }
.sheet:hover { box-shadow: 0 0 0 1.5px rgba(0, 0, 0, .35); }
.sheet:focus-visible { outline: 3px solid var(--purple-light); outline-offset: 4px; }
/* short title on a tab in the top-left corner (the part that peeks out of the pocket) */
.sheet__name {
  position: absolute; left: 0; top: 0; z-index: 1; max-width: 80%;
  padding: 6px 14px 8px 10px; border-radius: 0 0 2px 0; background: var(--paper); color: #1b1a17;
  font-size: 1rem; font-weight: 400; line-height: 1.25;
}

@media (prefers-reduced-motion: no-preference) {
  .work.section { padding-block: 0; }
  .work__track { position: relative; height: calc(100vh + var(--n) * 78vh); }
  .work__stage {
    position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip;
    display: grid; place-items: center; padding: var(--header-h) var(--gutter) 0;
  }
  /* landscape folder spanning the screen; everything inside is in % so it scales as one.
     Cards: 70% of the folder's height, resting 4% up; the pocket is only 14% tall,
     so ~85% of the front card shows even while filed. */
  .folder { position: relative; width: min(100%, calc((100svh - var(--header-h) - 48px) * 1.6)); aspect-ratio: 1.6; }
  .folder__sheets { position: absolute; inset: 0; display: block; }
  .sheet { position: absolute; left: 4%; bottom: 4%; width: 92%; height: 70%; aspect-ratio: auto; will-change: transform, opacity; }
  /* thin purple band; the wide notch is a half-ellipse cut into its top edge */
  .folder__pocket {
    position: absolute; inset: auto 0 0; z-index: 50; height: 14%; display: block; pointer-events: none;
    background: #716df2 var(--grain-dark); color: #fff; border-radius: 2px;
    box-shadow: none;
    -webkit-mask: radial-gradient(ellipse 11% 62% at 50% 0, transparent 99%, #000 100%);
    mask: radial-gradient(ellipse 11% 62% at 50% 0, transparent 99%, #000 100%);
  }
  .folder__count { position: absolute; right: 2.5%; top: 50%; translate: 0 -50%; font-size: clamp(.8rem, .6rem + .5vw, 1rem); font-weight: 600; }
  .folder__count b { font-size: 1.5em; font-weight: 700; }
  .work > .ribbons--top { display: none; }
}
@media (max-width: 719px) and (prefers-reduced-motion: no-preference) {
  .folder { width: 100%; aspect-ratio: 1.05; }
  .folder__pocket { height: 13%; }
  .sheet__name { font-size: .8rem; padding: 6px 12px 7px 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* ---------- About ---------- */
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.about__figure { position: relative; margin: 0; max-width: 460px; justify-self: center; width: 100%; }
.about__figure img { width: 100%; filter: none; }
.about__note { position: absolute; right: -10%; top: -9%; display: flex; flex-direction: column; align-items: flex-end; transform: rotate(5deg); }
.about__note svg { width: 54px; height: 40px; color: var(--purple); margin-right: 50%; }
.about__title { font-size: clamp(2rem, 1.3rem + 2.4vw, 3.3rem); max-width: 16ch; text-wrap: balance; }
.about__title em { font-style: normal; color: var(--purple); }
.about__body { margin-top: 24px; max-width: 54ch; color: var(--ink-soft); font-size: 1.08rem; }
.about__body p + p { margin-top: 14px; }
.about .btn { margin-top: 32px; }
.doodle { position: absolute; pointer-events: none; }
.about .doodle--star { width: 36px; left: 52%; top: 12%; color: var(--pink); }
.about .doodle--squiggle { width: 120px; right: 6%; bottom: 10%; color: var(--mint); }

/* ---------- Career timeline ---------- */
.career { padding-block: 0; }
.career__track { position: relative; }
.career__stage { position: relative; display: flex; flex-direction: column; justify-content: center; padding-block: clamp(80px, 10vw, 140px); }
.career.is-pinned .career__track { height: 320vh; }
.career.is-pinned .career__stage { position: sticky; top: 0; height: 100svh; padding-block: calc(var(--header-h) + 16px) 32px; }
.career__head { position: relative; margin-bottom: clamp(24px, 4vw, 48px); display: flex; justify-content: space-between; align-items: end; flex-wrap: wrap; gap: 12px 32px; }
.career__hint { font-family: var(--font-hand); color: var(--mint); font-size: 1.4rem; transform: rotate(-2deg); }
.tl { position: relative; }
.tl__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.tl__ghost { stroke: rgba(245, 242, 236, .14); stroke-width: 2; stroke-dasharray: 2 8; fill: none; }
.tl__path { stroke: var(--purple-light); stroke-width: 3; fill: none; stroke-linecap: round; }
.tl__branch { stroke: var(--mint); stroke-width: 2.5; fill: none; stroke-dasharray: 3 9; stroke-linecap: round; }
.tl__list { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; }
.tl__item { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding-top: var(--dot-y); min-height: 360px; }
.tl__dot {
  position: absolute; left: 22px; top: var(--dot-y); width: 16px; height: 16px; translate: -50% -50%; border-radius: 50%;
  background: var(--ink); border: 2.5px solid rgba(245, 242, 236, .45); transition: border-color .3s, background .3s, transform .45s var(--ease-spring);
}
.tl__item.is-active .tl__dot { background: var(--purple-light); border-color: var(--purple-light); transform: scale(1.15); }
.tl__icon {
  width: 46px; height: 46px; margin-top: 30px; color: var(--mint);
  opacity: 0; transform: scale(.4) rotate(-12deg); transition: opacity .3s, transform .55s var(--ease-spring);
}
.tl__item:nth-child(3n+2) .tl__icon { color: var(--pink); }
.tl__item:nth-child(3n) .tl__icon { color: var(--purple-light); }
.tl__item.is-active .tl__icon { opacity: 1; transform: none; }
.tl__year { margin-top: 12px; font-family: var(--font-serif); font-size: clamp(1.5rem, 1rem + 1.4vw, 2.3rem); line-height: 1; color: var(--on-dark-soft); transition: color .35s; }
.tl__role { margin-top: 8px; font-weight: 600; font-size: 1rem; line-height: 1.35; color: var(--on-dark-soft); max-width: 16ch; transition: color .35s; }
.tl__item.is-active .tl__year { color: var(--on-dark); }
.tl__item.is-active .tl__role { color: var(--on-dark); }
.tl__item.is-current .tl__year { color: var(--purple-light); }
.tl__bean { transition: opacity .3s; }
.tl__bean-shape, .tl__cup-shape { transform-box: fill-box; transform-origin: center; transition: transform .5s var(--ease-spring), opacity .3s; }
.tl__cup-shape { opacity: 0; transform: scale(.3); }
.tl.is-complete .tl__bean-shape { opacity: 0; transform: scale(.3); }
.tl.is-complete .tl__cup-shape { opacity: 1; transform: scale(1); }
.tl__influence {
  position: absolute; top: 0; display: flex; align-items: center; gap: 10px;
  opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--ease-spring);
  white-space: nowrap; translate: -50% 0;
}
.tl__influence.is-shown { opacity: 1; transform: none; }
.tl__influence svg { width: 40px; height: 40px; color: var(--mint); flex: none; }
.tl__influence .hand { color: var(--mint); font-size: 1.4rem; }

@media (max-width: 899px) {
  .tl__list { grid-template-columns: 1fr; gap: 0; padding-left: 64px; }
  .tl__item { min-height: 0; padding-top: 0; padding-bottom: 44px; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
  .tl__dot { left: -34px; top: 22px; }
  .tl__icon { margin-top: 0; width: 40px; height: 40px; grid-row: span 2; }
  .tl__year { margin-top: 0; }
  .tl__role { margin-top: 4px; max-width: none; }
  .tl__influence { position: relative; translate: none; margin: -12px 0 32px; white-space: normal; }
}

/* ---------- Explorations ---------- */
.explorations { padding-top: clamp(110px, 14vw, 190px); }
.explore__block { margin-top: clamp(44px, 5vw, 64px); }
.explore__block + .explore__block { margin-top: clamp(64px, 8vw, 110px); }
.explore__bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 32px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1.5px solid var(--ink); }
.explore__title { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.explore__title span { font-family: var(--font-sans); font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--pink); vertical-align: super; margin-left: 6px; }
.explore__desc { color: var(--ink-soft); margin-top: 6px; max-width: 50ch; }
.ill-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.ill-grid a { position: relative; display: block; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--cream); }
.ill-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), filter .3s; }
.ill-grid a:hover img { transform: scale(1.06); }
.ill-grid__more { display: grid !important; place-items: center; text-align: center; background: var(--ink) !important; color: var(--paper); text-decoration: none; font-family: var(--font-serif); font-size: clamp(1rem, .8rem + .6vw, 1.3rem); line-height: 1.2; padding: 8px; }
.ill-grid__more strong { display: block; font-size: 1.8em; color: var(--mint); font-weight: 400; }
.brand-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.brand-card { display: block; text-decoration: none; }
.brand-card__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; background: var(--cream); box-shadow: none; transition: transform .5s var(--ease-out), box-shadow .5s; }
.brand-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.brand-card:hover .brand-card__media { transform: translateY(-4px) rotate(-.6deg); }
.brand-card:hover .brand-card__media img { transform: scale(1.04); }
.brand-card__tag { display: block; margin-top: 16px; font-size: .75rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--purple); }
.brand-card__title { font-size: 1.35rem; margin-top: 4px; font-family: var(--font-serif); }
.brand-card__go { display: inline-block; margin-top: 6px; font-weight: 700; font-size: .92rem; }
.brand-card:hover .brand-card__go { color: var(--purple); }
@media (max-width: 859px) {
  .ill-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .brand-grid { grid-template-columns: 1fr; }
  .brand-grid { grid-auto-flow: row; }
}
@media (min-width: 560px) and (max-width: 859px) { .brand-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Social noticeboard ---------- */
.social { padding-block: clamp(60px, 8vw, 110px); background: var(--paper) var(--grain-dark); }
.social__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px 48px; }
.social__title { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.5rem); }
.notes { display: flex; flex-wrap: wrap; gap: 18px; }
.note {
  --accent: var(--purple);
  position: relative; display: flex; align-items: center; gap: 12px; min-width: 196px;
  padding: 16px 20px 16px 16px; background: #fffdf8; border: 1.5px solid var(--ink); border-radius: 2px;
  text-decoration: none; box-shadow: none;
  transform: rotate(var(--r, -1.5deg)); transition: transform .35s var(--ease-spring), box-shadow .25s;
}
.note:nth-child(2) { --r: 1.2deg; }
.note:nth-child(3) { --r: -.6deg; }
.note:hover { transform: rotate(0) translateY(-3px); box-shadow: none; }
.note::before { /* pin */
  content: ""; position: absolute; top: -8px; left: 50%; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: var(--accent); border: 2px solid var(--ink); box-shadow: none;
}
.note--pink { --accent: var(--pink); }
.note--turquoise { --accent: var(--mint); }
.note__icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 2px; background: var(--accent); color: var(--paper); }
.note--turquoise .note__icon { color: var(--ink); }
.note__icon svg { width: 22px; height: 22px; }
.note__name { display: block; font-weight: 800; font-size: 1rem; line-height: 1.2; }
.note__handle { display: block; font-size: .85rem; color: var(--ink-soft); }

/* ---------- Closing ---------- */
.closing { background: var(--grey) var(--grain-dark); text-align: center; padding-bottom: clamp(48px, 6vw, 80px); }
.closing__scene { position: relative; width: min(100%, 520px); margin: 0 auto clamp(24px, 4vw, 40px); aspect-ratio: 600 / 520; }
.closing__scene > img { width: 100%; height: 100%; }
.cup-slot { position: absolute; left: 70%; width: 13%; bottom: 22%; aspect-ratio: 1; opacity: 0; transition: opacity .2s; }
.cup-slot.is-filled { opacity: 1; }
.closing__title { font-size: clamp(2.4rem, 1.6rem + 3vw, 4rem); }
.closing__line { margin: 18px auto 0; max-width: 44ch; color: var(--ink-soft); font-size: 1.1rem; }
.closing .btn { margin-top: 30px; }
.closing__zzz { position: absolute; left: 60%; top: 8%; font-size: 1.5rem !important; color: var(--purple); transform: rotate(-8deg); }

/* ---------- Footer ---------- */
.site-footer { background: var(--grey); border-top: 1px solid rgba(21, 21, 21, .1); padding-block: 26px; font-size: .9rem; color: var(--ink-soft); }
.site-footer__inner { display: flex; justify-content: center; text-align: center; }
/* treats: social links as Darrpana's croissant / cookie / cupcake (footer.js), on black */
.site-footer:has(.treats-wrap) { padding-top: 0; background: var(--ink); color: rgba(255, 255, 255, .6); border-top: 0; }
.treats-wrap { display: grid; gap: clamp(56px, 8vw, 96px); padding: clamp(64px, 9vw, 110px) 16px clamp(40px, 6vw, 64px); }
.treats { --fh: clamp(84px, 11vw, 140px); position: relative; }
.treats__option { margin: 0 auto 20px; width: min(920px, 100%); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--purple-light); }
.treats__row { position: relative; width: min(920px, 100%); margin-inline: auto; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; justify-items: center; }
.treat { position: relative; z-index: 1; display: grid; justify-items: center; color: inherit; text-decoration: none; outline-offset: 6px; }
.treat__food { position: relative; display: block; height: var(--fh); transition: transform .35s var(--ease-spring); }
.treat__food img { display: block; height: 100%; width: auto; }
.treat__eaten { position: absolute; left: 0; bottom: 0; opacity: 0; }
.treat.is-eaten .treat__fresh { opacity: 0; }
.treat.is-eaten .treat__eaten { opacity: 1; }
.treat.is-eaten .treat__food { animation: treat-bite .32s var(--ease-out); }
@keyframes treat-bite { 0% { transform: none; } 35% { transform: translateY(3px) scale(.96, 1.03) rotate(-2deg); } 100% { transform: none; } }
.treat__label { font-family: "Caveat", cursive; font-size: clamp(1.3rem, 1.1rem + .6vw, 1.7rem); font-weight: 600; line-height: 1; }
.treat:focus-visible { outline: 3px solid var(--purple-light); }
/* option 1: one long tray under all three; labels written under the tray */
.treats--tray .treat__food { margin-bottom: calc(var(--fh) * .1); }
.treats--tray .treat__label { margin-top: calc(var(--fh) * .3 + 14px); color: var(--purple-light); }
.treats__tray { position: absolute; z-index: 0; left: 0; width: 100%; top: calc(var(--fh) * .5); height: calc(var(--fh) * .9); } /* the treats' bases sit on its surface */
/* option 2: each treat on a diamond tissue with a scalloped edge; the label is written on the tissue */
.treats--tissue .treat { padding: calc(var(--fh) * .22) calc(var(--fh) * .3) calc(var(--fh) * .72); }
.treats--tissue { --fh: clamp(70px, 8.4vw, 110px); }
.treats--tissue .treats__row { width: min(1180px, 100%); margin-top: calc(var(--fh) * .55); } /* wide columns = clear space between tissues */
.treat__tissue { position: absolute; z-index: -1; left: 50%; top: 50%; width: calc(var(--fh) * 1.95); aspect-ratio: 1;
  translate: -50% -50%; rotate: 45deg; overflow: visible; transition: rotate .4s var(--ease-spring); }
.treat__tissue path { fill: none; stroke: #fbf8f2; stroke-width: 1.4; stroke-linejoin: round; }
.treat__lace { fill: none; stroke: #fbf8f2; stroke-width: .9; stroke-dasharray: .1 3.2; stroke-linecap: round; opacity: .55; }
.treats--tissue .treat:hover .treat__tissue, .treats--tissue .treat.is-eaten .treat__tissue { rotate: 38deg; }
.treats--tissue .treat__label { position: absolute; left: 50%; bottom: calc(var(--fh) * .3); translate: -50% 0; color: #fbf8f2; font-size: clamp(1.1rem, 1rem + .4vw, 1.4rem); }
@media (max-width: 600px) {
  .treats { --fh: 64px; }
  .treat__tissue { width: calc(var(--fh) * 1.5); }
}

/* ---------- Subpages ---------- */
.page { padding-top: calc(var(--header-h) + clamp(32px, 6vw, 72px)); padding-bottom: clamp(64px, 8vw, 120px); min-height: 80vh; }
.back { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: .92rem; text-decoration: none; color: var(--ink-soft); margin-bottom: 28px; }
.back:hover { color: var(--purple); }
.page__title { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.2rem); }
.page__intro { margin-top: 14px; color: var(--ink-soft); max-width: 56ch; }
.page__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.placeholder-note { margin-top: 32px; padding: 18px 22px; border: 1.5px dashed var(--purple); border-radius: 2px; color: var(--ink-soft); max-width: 60ch; }
.page__hero-img { margin: 40px 0 0; border-radius: 2px; overflow: hidden; box-shadow: none; }
.page__hero-img img { width: 100%; }
.page__gallery { display: grid; gap: clamp(16px, 2vw, 28px); margin-top: clamp(16px, 2vw, 28px); }
.page__gallery img { width: 100%; border-radius: 2px; }
.page__next { margin-top: clamp(48px, 6vw, 80px); padding-top: 28px; border-top: 1.5px solid var(--ink); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; }

.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 40px; }
@media (min-width: 1000px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 600px) { .gallery { gap: 3px; } }
.gallery__btn { display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0; background: var(--cream); cursor: zoom-in; overflow: hidden; border-radius: 2px; }
.gallery__btn img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), opacity .4s; }
.gallery__btn:hover img { transform: scale(1.05); }

.lightbox { width: min(92vw, 900px); max-height: 92vh; padding: 0; border: 0; border-radius: 2px; background: var(--paper); color: var(--ink); overflow: hidden; }
.lightbox::backdrop { background: rgba(21, 21, 21, .82); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox__fig { margin: 0; }
.lightbox__fig img { width: 100%; max-height: calc(92vh - 72px); object-fit: contain; background: var(--ink); }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; }
.lightbox__caption { font-family: var(--font-serif); font-size: 1.1rem; }
.lightbox__count { color: var(--ink-soft); font-size: .9rem; margin-left: 8px; font-family: var(--font-sans); }
.lightbox__ctrl { display: flex; gap: 8px; }
.icon-btn { width: 42px; height: 42px; display: grid; place-items: center; border: 1.5px solid var(--ink); border-radius: 2px; background: var(--paper); cursor: pointer; font-size: 1.1rem; font-weight: 700; transition: background .2s, color .2s; }
.icon-btn:hover { background: var(--ink); color: var(--paper); }

/* ---------- Responsive layout ---------- */
@media (max-width: 859px) {
  .about__grid { grid-template-columns: 1fr; }
  .about__figure { max-width: 340px; }
  .social__inner { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 480px) {
  .notes { flex-direction: column; width: 100%; }
  .note { width: 100%; }
}

/* ---------- Keyframes ---------- */
@keyframes sticker-idle { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-.8deg); } }
@keyframes sticker-poke { 0% { transform: rotate(0); } 20% { transform: rotate(-5deg) scale(1.03); } 45% { transform: rotate(4deg); } 70% { transform: rotate(-2deg); } 100% { transform: rotate(0); } }
@keyframes label-in { from { opacity: 0; scale: .55; rotate: -10deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }
@keyframes label-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(.8deg); } }
@keyframes steam { 0% { stroke-dashoffset: 30; opacity: 0; transform: translateY(4px); } 30% { opacity: .7; } 100% { stroke-dashoffset: -30; opacity: 0; transform: translateY(-10px); } }
@keyframes cursor-in { from { transform: scale(.4) rotate(-15deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes wisp-rise { from { stroke-dashoffset: 55; } to { stroke-dashoffset: -100; } }
@keyframes hair-wave { 0%, 100% { transform: none; } 22% { transform: skewX(-5deg) rotate(-2deg); } 48% { transform: skewX(4deg) rotate(1.5deg); } 74% { transform: skewX(-1.5deg) rotate(-.5deg); } }
@keyframes nc-draw { 0%, 100% { transform: none; } 25% { transform: translate(-10px, 7px); } 50% { transform: translate(5px, -4px); } 75% { transform: translate(-6px, 5px); } }
@keyframes nc-squish { 0%, 100% { transform: none; } 40% { transform: scale(1.05, .94); } 70% { transform: scale(.98, 1.03); } }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal { opacity: 1; transform: none; }
  .c-wisp { animation: none !important; stroke-dasharray: none; }
  .float-cup.is-hot .steam path { animation: none; opacity: .55; stroke-dashoffset: 0; }
  .h-sticker, .h-label { translate: none; }
  .sticker:hover img { scale: none; }
}

/* ---------- Late additions ---------- */
.cursor__icon--bean ellipse { stroke: #fbf8f2; } /* a cream edge keeps the bean visible on black, no shadow */

/* ---------- Full case study (case-study.html?p=convora) ----------
   Same layout as darrpana.com/convora: dark intro → white body → nav band → sign-off. */
body.has-case-study .page { padding: 0; min-height: 0; }
body.has-case-study .site-footer { display: none; }
.cs { --cs-ink: #080808; --cs-text: #161a29; --cs-muted: rgba(22, 26, 41, .5); --cs-label: rgba(8, 8, 8, .27); --cs-light: #cfd4e8; }
.cs__wrap { width: min(100% - 64px, 960px); margin-inline: auto; }
.cs__intro { background: var(--cs-ink); padding-top: calc(var(--header-h) + 32px); }
.cs__title {
  max-width: 864px; margin: 0 auto 48px; color: #fff;
  font-size: clamp(1.5rem, 1.05rem + 1.4vw, 1.875rem); font-weight: 500; line-height: 1.2; letter-spacing: -.5px;
}
.cs__hero { display: block; width: 100%; border-radius: 2px 2px 0 0; }
.cs__body { background: #fff; padding: 32px 0; color: var(--cs-text); }
.cs__about { display: grid; grid-template-columns: minmax(0, 304px) minmax(0, 1fr); gap: 48px; }
.cs__meta { margin: 0; }
.cs__meta div + div { margin-top: 24px; }
.cs__meta dt { font-size: 1.125rem; font-weight: 700; line-height: 1.4; letter-spacing: -.3px; color: var(--cs-label); }
.cs__meta dd { margin: 8px 0 0; font-size: 1.25rem; font-weight: 500; line-height: 1.4; letter-spacing: -.5px; }
.cs__h { font-size: clamp(2.5rem, 1.4rem + 4.4vw, 4.625rem); font-weight: 500; line-height: 1.2; letter-spacing: -.7px; color: var(--cs-text); }
.cs__p { margin-top: 24px; font-size: 1.25rem; font-weight: 500; line-height: 1.4; letter-spacing: -.5px; color: var(--cs-muted); }
.cs__label { margin-top: 24px; font-size: .875rem; font-weight: 500; line-height: 1.6; color: var(--cs-label); }
.cs__p--strong { margin-top: 8px; color: var(--cs-text); }
.cs__introduction { margin-top: clamp(64px, 12vw, 128px); padding-bottom: clamp(56px, 10vw, 104px); }
.cs__introduction .cs__h { color: var(--cs-ink); }
.cs__slides img { display: block; width: 100%; height: auto; }
.cs__panel { display: flex; justify-content: center; padding: clamp(24px, 6vw, 57px); background: #f4f6f9; }
.cs__panel img { width: 68%; }
.cs__nav { background: var(--cs-text); padding: 32px 0; color: var(--cs-light); }
.cs__nav .cs__wrap { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.cs__navlink { display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; font-size: 1.0625rem; font-weight: 500; letter-spacing: -.3px; }
.cs__navlink--next { align-items: flex-end; }
.cs__navlabel { display: inline-flex; align-items: center; gap: 10px; }
.cs__arrow { width: 94px; height: auto; transition: transform .35s var(--ease-out); }
.cs__arrow--back { transform: scaleX(-1); }
.cs__navlink:hover .cs__arrow { transform: translateX(6px); }
.cs__navlink:hover .cs__arrow--back { transform: scaleX(-1) translateX(6px); }
.cs__navart { width: clamp(90px, 14vw, 171px); height: auto; transition: transform .45s var(--ease-spring); }
.cs__navlink--next .cs__navart { width: clamp(70px, 10vw, 118px); }
.cs__navlink:hover .cs__navart { transform: rotate(-4deg) scale(1.05); }
.cs__footer { background: #1f130b; padding: 48px 0 32px; color: var(--cs-light); }
.cs__ahoy { display: block; width: max-content; margin: 0 auto; font-size: 1.625rem; font-weight: 600; text-decoration: none; color: inherit; transition: transform .35s var(--ease-spring); }
.cs__ahoy:hover { transform: rotate(-4deg) scale(1.06); }
.cs__links { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 40px; font-size: .9375rem; font-weight: 600; }
.cs__links a { color: #fff; text-decoration: none; }
.cs__links a:nth-child(2) { justify-self: center; }
.cs__links .cs__mail { justify-self: end; color: var(--cs-light); }
.cs__links a:hover { text-decoration: underline; text-underline-offset: 4px; }
.cs__copy { margin-top: 32px; font-size: .6875rem; letter-spacing: -.2px; color: rgba(207, 212, 232, .41); }
@media (max-width: 759px) {
  .cs__about { grid-template-columns: 1fr; gap: 32px; }
  .cs__meta { display: flex; gap: 32px; }
  .cs__meta div + div { margin-top: 0; }
  .cs__links { grid-template-columns: 1fr; gap: 12px; text-align: center; }
  .cs__links a, .cs__links a:nth-child(2), .cs__links .cs__mail { justify-self: center; }
  .cs__arrow { width: 56px; }
}


/* ---------- About page (about.html)
   Site palette only. White, then the page fades to black (--ab-bg, set by about-page.js)
   as the brands section comes in; brands, books and travel sit on that black. No shadows. */
.about-page { display: block; background: var(--ab-bg, #fff); }
.ab-h { font-size: clamp(2rem, 1.5rem + 2vw, 2.5rem); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; }

/* 1. story — the opening: pinned; paragraphs centred, each section's photos at the sides */
.ab-story { position: relative; }
.ab-story__track { position: relative; height: calc(100vh + var(--steps) * 95vh); }
.ab-story__pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ab-story__col {
  position: relative; z-index: 2; width: min(540px, 100% - 56px); margin-inline: auto; text-align: center;
  font-size: clamp(1.15rem, .85rem + 1.25vw, 1.8rem); font-weight: 600; line-height: 1.38; letter-spacing: -.01em; will-change: transform;
  pointer-events: none;
}
/* the brewing illustration above the greeting: pieces in % of a 1900 × 700 canvas */
.ab-brew { position: relative; width: min(480px, 88vw); margin: 0 0 clamp(16px, 3vh, 32px) 50%; translate: -50% 0; aspect-ratio: var(--cw) / var(--ch); }
.ab-brew img { position: absolute; will-change: transform; }
.ab-brew__press-tilt { z-index: 3; }
.ab-brew__stream { z-index: 2; transform-origin: 70% 0; }
.ab-brew__cup-main { z-index: 1; }
.ab-brew__press-up { z-index: 3; opacity: 0; }
.ab-brew__stream.is-pouring { animation: brew-pour .7s ease-in-out infinite alternate; }
@keyframes brew-pour { from { transform: scaleX(1) skewX(0deg); } to { transform: scaleX(.96) skewX(-1.2deg); } }
.ab-story__p--greet { font-size: clamp(2rem, 1.5rem + 2vw, 2.5rem); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; }
.ab-story__hint { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; z-index: 3; font-size: 1.1rem !important; font-weight: 600; color: var(--ink-soft); animation: bob 2.4s ease-in-out infinite; }
.ab-story__p { margin: 0 0 1.4em; opacity: 0; transition: opacity .2s linear; }
.ab-mark { background: linear-gradient(rgba(163, 159, 245, .55), rgba(163, 159, 245, .55)) no-repeat 0 88% / 0% 42%; color: inherit; padding: 0 .08em; box-decoration-break: clone; -webkit-box-decoration-break: clone; transition: background-size .6s var(--ease-out); }
.ab-mark.on { background-size: 100% 42%; }
/* words light up one by one as you scroll (about-page.js) */
.ab-story__p .w { opacity: .16; transition: opacity .3s; }
.ab-story__p .w.on { opacity: 1; }
.ab-story__side { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
/* photo stickers: all the same square size, thick blue die-cut outline */
.ab-side {
  position: absolute; left: var(--x); top: var(--y); width: clamp(120px, 15vw, 220px); margin: 0;
  translate: -50% -50%; opacity: 0; pointer-events: none;
  transform: translateY(40px) rotate(calc(var(--r) * 3)) scale(.55);
  transition: opacity .3s, transform .5s var(--ease-out);
}
.ab-side.is-in {
  opacity: 1; pointer-events: auto; transform: rotate(var(--r));
  transition: opacity .4s var(--d), transform .65s var(--ease-spring) var(--d);
}
.ab-side img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px;
  border: 7px solid var(--sticker); background: var(--sticker);
  transition: transform .35s var(--ease-spring);
}
.ab-side.is-in:hover img { transform: rotate(calc(var(--r) * -1)) scale(1.05); }
/* hover: the photo talks */
.ab-say {
  position: absolute; left: 50%; bottom: calc(100% + 14px); z-index: 2; width: max-content; max-width: 210px;
  padding: 9px 14px; border-radius: 2px; background: var(--ink); color: #fff;
  font-size: .85rem; font-weight: 600; line-height: 1.25; text-align: center; pointer-events: none;
  opacity: 0; transform: translate(-50%, 8px) scale(.85) rotate(calc(var(--r) * -1)); transform-origin: 50% 100%;
  transition: opacity .18s, transform .35s var(--ease-spring);
}
.ab-say::after { content: ""; position: absolute; left: 50%; top: 100%; translate: -50% -1px; border: 8px solid transparent; border-top-color: var(--ink); border-bottom: 0; }
.ab-side.is-in:hover .ab-say { opacity: 1; transform: translate(-50%, 0) scale(1) rotate(calc(var(--r) * -1)); }

/* 2. brands — logos on black, trimmed (about-page.js) and fitted to one box so they match */

/* things-I-love band: giant purple words sliding sideways, pale / solid in turn (hover swaps) */
.ab-loves { position: relative; padding: clamp(40px, 7vw, 90px) 0; overflow: hidden; }
.ab-loves__label { width: min(1180px, 100% - 40px); margin: 0 auto 18px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--purple); }
.ab-loves__row { overflow: hidden; padding: .06em 0; }
.ab-loves__run { display: flex; align-items: center; gap: .35em; width: max-content; will-change: transform;
  font-size: clamp(2.8rem, 1.2rem + 7vw, 8rem); font-weight: 800; line-height: 1.02; letter-spacing: -.03em; white-space: nowrap; }
.ab-loves__w { color: #d1d0fc; transition: color .25s; cursor: default; }
.ab-loves__w.is-solid, .ab-loves__w:hover { color: var(--purple); }
.ab-loves__w.is-solid:hover { color: #d1d0fc; }
.ab-loves__bean { flex: none; width: .42em; height: .42em; fill: var(--purple); }
.ab-loves__bean path { fill: none; stroke: var(--ab-bg, #fff); stroke-width: 1.6; stroke-linecap: round; }

/* 2. brands — pinned; logos orbit a counter on two rings (about-page.js turns --rot-o/--rot-i) */
.ab-brands { position: relative; color: var(--on-dark); }
.ab-brands .eyebrow { color: var(--purple-light); }
.ab-orbit { --enter: 0; position: relative; height: calc(100vh + 170vh); }
.ab-orbit__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; }
.ab-orbit__rings { --R: min(42vw, 42vh); --r: calc(var(--R) * .66); position: absolute; left: 50%; top: 50%; width: 0; height: 0;
  scale: calc(.55 + .45 * var(--enter)); opacity: var(--enter); }
.ab-orbit__ring { position: absolute; left: 0; top: 0; translate: -50% -50%; border-radius: 50%; border: 1.5px dashed rgba(163, 159, 245, .35); }
.ab-orbit__ring--outer { width: calc(var(--R) * 2); height: calc(var(--R) * 2); }
.ab-orbit__ring--inner { width: calc(var(--r) * 2); height: calc(var(--r) * 2); border-style: dotted; }
.ab-orbit__logos { list-style: none; margin: 0; padding: 0; }
.ab-orb { --rot: var(--rot-o); --rad: var(--R); position: absolute; left: 0; top: 0; width: clamp(96px, 11.5vw, 165px); aspect-ratio: 2.1; margin: calc(clamp(96px, 11.5vw, 165px) / -4.2) 0 0 calc(clamp(96px, 11.5vw, 165px) / -2);
  transform: rotate(calc(var(--a) + var(--rot))) translateX(var(--rad)) rotate(calc(-1 * (var(--a) + var(--rot)))); }
.ab-orb[data-ring="inner"] { --rot: var(--rot-i); --rad: var(--r); }
.ab-orb img { position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 60%; height: auto; max-height: 80%; object-fit: contain;
  opacity: 0; scale: .4; transition: opacity .5s var(--d), scale .7s var(--ease-spring) var(--d); }
.ab-orbit.is-in .ab-orb img { opacity: .9; scale: 1; }
.ab-orb:hover img { opacity: 1; scale: 1.15; transition-delay: 0s; }
.ab-orbit__core { position: relative; z-index: 2; text-align: center; opacity: var(--enter); translate: 0 calc((1 - var(--enter)) * 40px); }
.ab-orbit__num { margin: 4px 0 0; font-size: clamp(3.4rem, 1.6rem + 5.5vw, 7rem); font-weight: 800; line-height: .9; letter-spacing: -.05em; color: #fff; font-variant-numeric: tabular-nums; }
.ab-orbit__h { margin: 10px 0 0; font-size: clamp(1rem, .9rem + .4vw, 1.25rem); font-weight: 600; color: var(--purple-light); }

/* headings rise in letter by letter (about-page.js adds .is-in) */
.ab-rise__w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; }
.ab-rise__c { display: inline-block; translate: 0 105%; rotate: 8deg; transition: translate .6s var(--ease-out) calc(var(--k) * 28ms), rotate .6s var(--ease-out) calc(var(--k) * 28ms); }
.ab-rise.is-in .ab-rise__c { translate: 0 0; rotate: 0deg; }
/* espresso-shot scroll progress, right edge */
.ab-shot { --fill: 0; position: fixed; z-index: 80; right: 14px; top: 50%; translate: 0 -50%; width: 8px; height: 150px; border: 2px solid var(--purple); border-radius: 2px; background: transparent; }
.ab-shot__fill { position: absolute; inset: 2px; transform-origin: 50% 100%; scale: 1 var(--fill); background: var(--purple); }
.ab-shot.is-dark { border-color: var(--purple-light); }

/* 3. books — one shelf on black, spines in tints/shades of the blue-purple and greys.
   Hover: the book lifts and a label shows title + author. Click: it's pulled out. */
.ab-books { padding: clamp(40px, 6vw, 90px) 0 clamp(72px, 10vw, 130px); color: #fff; overflow-x: clip; }
.ab-piles { position: relative; display: flex; justify-content: center; margin-top: clamp(24px, 4vw, 48px); padding: 60px 0 10px; }
.ab-pile { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
/* each book rests on the cover of the one below: overlap by the cover's depth */
.ab-pile li { position: relative; translate: var(--x) 0; rotate: var(--r); }
.ab-pile li + li { margin-top: calc(var(--lap) * -1 + 2px); }
.ab-pile li:hover, .ab-pile li:focus-within { z-index: 20 !important; }
/* the pile drops in, bottom book first, when it scrolls into view */
.ab-pile.is-waiting li { opacity: 0; }
.ab-pile.is-waiting.is-dropped li { opacity: 1; animation: ab-drop .75s cubic-bezier(.3, 1.45, .5, 1) var(--drop) both; }
@keyframes ab-drop { from { opacity: 0; transform: translateY(-70vh) rotate(calc(var(--dir) * 14deg)); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.ab-book { position: relative; display: block; padding: 0; border: 0; background: none; cursor: pointer; transition: transform .4s var(--ease-spring); }
.ab-book svg { display: block; max-width: 86vw; height: auto; overflow: visible; }
.ab-book text { font: 700 14px var(--font-sans); letter-spacing: .07em; }
.ab-book:hover, .ab-book:focus-visible { transform: translateX(calc(var(--dir) * 18px)) translateY(-4px); }
.ab-book[aria-pressed="true"] { transform: translateX(calc(var(--dir) * 48px)) translateY(-6px) rotate(calc(var(--dir) * 2deg)); }
.ab-book:focus-visible { outline: 3px solid var(--purple-light); outline-offset: 3px; }
.ab-book__label {
  position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5; display: flex; flex-direction: column; gap: 2px;
  width: max-content; max-width: 240px; padding: 9px 14px; border-radius: 2px; background: #fff; color: var(--ink);
  font-size: .78rem; font-weight: 500; line-height: 1.25; text-align: left; pointer-events: none;
  opacity: 0; transform: translate(-50%, 8px) scale(.9); transition: opacity .18s, transform .35s var(--ease-spring);
}
.ab-book__label b { font-size: .92rem; font-weight: 700; }
.ab-book:hover .ab-book__label, .ab-book:focus-visible .ab-book__label { opacity: 1; transform: translate(-50%, 0) scale(1); }
.ab-spark { position: absolute; width: var(--s); height: var(--s); fill: var(--purple-light); pointer-events: none; animation: ab-twinkle 2.6s ease-in-out var(--d) infinite; }
@keyframes ab-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.55) rotate(20deg); opacity: .45; } }

/* 4. travel: on black (like brands and books); one stamp whose
   photo changes with scroll; small handwritten notes above and below */
.ab-paper { background: var(--ink); color: #fff; }
.ab-paper__track { position: relative; height: calc(100vh + var(--n) * 12vh); }
.ab-paper__pin { position: sticky; top: 0; height: 100vh; height: 100svh; display: grid; place-items: center; overflow: hidden; padding-top: clamp(70px, 12vh, 120px); }
.ab-paper__h { position: absolute; left: clamp(20px, 6vw, 96px); top: clamp(80px, 12vh, 120px); margin: 0; color: #fff; }
/* portrait stamp in the middle, the handwriting on either side of it */
.ab-paper__card { margin: 0; width: min(1100px, 92vw); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: clamp(24px, 4vw, 56px); }
.ab-paper__side { display: grid; gap: 10px; }
.ab-paper__side p { margin: 0; }
.ab-paper__side--l { justify-items: end; text-align: right; rotate: -3deg; }
.ab-paper__side--r { justify-items: start; text-align: left; rotate: 2deg; max-width: 220px; }
.hand-note { font-family: "Caveat", cursive; font-size: clamp(1rem, .9rem + .3vw, 1.2rem); font-weight: 500; line-height: 1.2; color: #2e2e33; }
.ab-paper__card .hand-note { font-size: clamp(1.05rem, .9rem + .5vw, 1.4rem); color: #e9e7e1; }
.ab-paper__stamp {
  --p: 6px; position: relative; height: min(56vh, 500px); aspect-ratio: 4 / 5; background: #e9e7e1; /* portrait */
  -webkit-mask: radial-gradient(var(--p), #0000 98%, #000) round calc(-1.5 * var(--p)) calc(-1.5 * var(--p)) / calc(3 * var(--p)) calc(3 * var(--p)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--p)) calc(100% - 3 * var(--p));
  mask: radial-gradient(var(--p), #0000 98%, #000) round calc(-1.5 * var(--p)) calc(-1.5 * var(--p)) / calc(3 * var(--p)) calc(3 * var(--p)),
    linear-gradient(#000 0 0) no-repeat 50% / calc(100% - 3 * var(--p)) calc(100% - 3 * var(--p));
}
.ab-paper__stamp { perspective: 900px; }
.ab-paper__stamp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: rotateY(80deg); transform-origin: 0 50%; transition: transform .45s var(--ease-out), opacity .2s; backface-visibility: hidden; }
.ab-paper__stamp img.is-on { opacity: 1; transform: none; z-index: 1; }
.ab-paper__stamp img.is-off { opacity: 0; transform: rotateY(-80deg); transform-origin: 100% 50%; }
.ab-paper__stamp img.is-off-back { opacity: 0; transform: rotateY(80deg); }
/* a postmark that turns as you scroll and thunks on every new photo */
.ab-paper__stampwrap { position: relative; }
.ab-paper__postmark { --pm: 0deg; position: absolute; z-index: 3; left: 58%; top: -8%; width: 78%; overflow: visible; pointer-events: none; }
.ab-paper__pmring { transform-box: fill-box; transform-origin: center; rotate: var(--pm); }
.ab-paper__postmark circle, .ab-paper__waves { fill: none; stroke: #e9e7e1; stroke-width: 2; opacity: .85; }
.ab-paper__postmark text { font: 700 8.6px var(--font-sans); letter-spacing: .14em; fill: #e9e7e1; }
.ab-paper__waves { stroke-width: 2.4; }
.ab-paper__postmark.is-thunk { animation: ab-thunk .35s var(--ease-out); }
@keyframes ab-thunk { 0% { scale: 1.12; } 45% { scale: .94; } 100% { scale: 1; } }



@media (prefers-reduced-motion: reduce) {
  .about-page { background: #fff; }
  .ab-brands, .ab-books { background: var(--ink); }
  .ab-story__track { height: auto; }
  .ab-story__pin { position: relative; height: auto; overflow: visible; padding: 60px 0; }
  .ab-story__p { opacity: 1 !important; }
  .ab-story__p .w { opacity: 1; }
  .ab-orbit { height: auto; }
  .ab-orbit__pin { position: relative; height: auto; min-height: 100vh; }
  .ab-orb img { opacity: .9; scale: 1; transition: none; }
  .ab-rise__c { translate: none; rotate: none; transition: none; }
  .ab-paper__stamp img { transition: none; transform: none; }
  .ab-spark { animation: none; }
  .ab-story__side { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; padding: 40px 16px; }
  .ab-side { position: relative; left: auto; top: auto; translate: none; opacity: 1; transform: none; width: 140px; pointer-events: auto; }
  .ab-paper__track { height: auto; }
  .ab-paper__pin { position: relative; height: auto; padding: 100px 20px; }
}
@media (max-width: 859px) {
  .ab-paper__card { grid-template-columns: 1fr; justify-items: center; gap: 18px; }
  .ab-paper__stamp { height: auto; width: min(72vw, 52vh); }
  .ab-paper__side--l, .ab-paper__side--r { justify-items: center; text-align: center; max-width: none; }
  .ab-side { left: var(--mx); top: var(--my); width: 96px; }
  .ab-side img { border-width: 5px; border-radius: 2px; }
  .ab-say { max-width: 160px; font-size: .78rem; }
  .ab-side--top .ab-say { bottom: auto; top: calc(100% + 14px); transform-origin: 50% 0; }
  .ab-side--top .ab-say::after { top: auto; bottom: 100%; translate: -50% 1px; border-top-color: transparent; border-bottom: 8px solid var(--ink); border-top: 0; }
  .ab-story__col { width: min(560px, 100% - 40px); font-size: clamp(1rem, .8rem + 1.1vw, 1.3rem); }
  .ab-pile li { translate: calc(var(--x) * .4) 0; }
  .ab-orbit__rings { --R: 37vw; }
  .ab-orb { width: 74px; margin: -18px 0 0 -37px; }
  .ab-shot { display: none; }
}
@media (max-width: 520px) {
}

/* ---------- Sound toggle (sound.js) ---------- */
.sound-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 90; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px 8px 10px; border: 0; border-radius: 2px; background: rgba(255, 255, 255, .9); color: var(--nav);
  box-shadow: 0 0 0 1px rgba(119, 117, 245, .25);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font: 600 .8rem var(--font-sans); cursor: pointer; transition: transform .3s var(--ease-spring), background-color .2s;
}
.sound-toggle:hover { transform: translateY(-2px); background: #fff; }
.sound-toggle.is-waiting { animation: sound-nudge 2.8s ease-in-out infinite; }
@keyframes sound-nudge { 0%, 80%, 100% { transform: none; } 86% { transform: rotate(-4deg); } 93% { transform: rotate(4deg); } }
.sound-toggle svg { width: 20px; height: 20px; }
.sound-toggle__off { display: none; }
.sound-toggle[aria-pressed="false"] .sound-toggle__waves { display: none; }
.sound-toggle[aria-pressed="false"] .sound-toggle__off { display: inline; }
.sound-toggle[aria-pressed="true"] .sound-toggle__waves { animation: sound-wave 1.6s ease-in-out infinite; transform-origin: 12px 12px; }
@keyframes sound-wave { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@media (max-width: 719px) { .sound-toggle__label { display: none; } .sound-toggle { padding: 9px; } }

/* ---------- Café walk (about-cafe.html, cafe-walk.js) ----------
   A line-drawn café on very light grey; the scene is in scene units (1000 tall), --k = px per
   unit, so every size below is calc(var(--k) * N px). */
.cafe-walk-page { background: #f1f1ef; }
.cw-track { position: relative; }
.cw-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: #f1f1ef; }
.cw-scene { --k: .8; position: absolute; left: 0; top: 0; height: 100%; will-change: transform; }
.cw-art, .cw-strings { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cw-strings { pointer-events: none; }
.cw-ink { fill: none; stroke: #151515; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cw-fill { fill: #f8f8f6; }
.cw-thin { stroke-width: 2; }
.cw-faint { opacity: .45; }
.cw-accent { stroke: var(--purple); }
.cw-board { fill: #232327; stroke: none; }
.cw-screen { fill: #151515; }
.cw-glass { fill: rgba(255, 255, 255, .55); }
.cw-ray { stroke: var(--purple); stroke-width: 2; opacity: .55; stroke-dasharray: 6 8; }
.cw-lamp { transform-box: view-box; }
.cw-steam { stroke-width: 2.5; opacity: .7; animation: cw-steam 2.4s ease-in-out infinite; }
@keyframes cw-steam { 0% { translate: 0 6px; opacity: 0; } 30% { opacity: .75; } 100% { translate: 0 -16px; opacity: 0; } }
.cw-steam--machine { opacity: 0; animation-play-state: paused; }
.cw-scene.is-brewing .cw-steam--machine { animation: cw-steam .9s ease-out 3; }
.cw-frontwrap { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.cw-front { position: absolute; left: 0; top: 0; height: 100%; max-width: none; will-change: transform; }
.cw-art, .cw-strings { max-width: none; }
.cw-layer { position: absolute; inset: 0; }
.cw-at { position: absolute; }
.cw-machine-hit { padding: 0; border: 0; background: none; cursor: pointer; }
.cw-machine-hit:focus-visible { outline: 3px solid var(--purple); }

/* entrance */
.cw-welcome__h { font-size: calc(var(--k) * 74px); font-weight: 800; line-height: 1; letter-spacing: -.03em; color: var(--ink); }
.cw-welcome__sub { margin-top: calc(var(--k) * 22px); font-size: calc(var(--k) * 26px); font-weight: 600; color: var(--purple); }
.cw-welcome__sub span { display: inline-block; animation: cw-nudge 1.6s ease-in-out infinite; }
@keyframes cw-nudge { 50% { translate: calc(var(--k) * 10px) 0; } }
.cw-open { font-size: calc(var(--k) * 26px); font-weight: 800; letter-spacing: .12em; text-align: center; color: var(--purple); }

/* counter: chalkboard (written on as you arrive), Wi-Fi card, receipt, menu cards */
.cw-chalk { color: #f1f1ef; font-family: "Caveat", cursive; }
.cw-chalk__h { font-size: calc(var(--k) * 52px); font-weight: 700; line-height: 1.05; }
.cw-chalk__h mark { background: none; color: var(--purple-light); }
.cw-chalk__p { margin-top: calc(var(--k) * 18px); font-size: calc(var(--k) * 30px); font-weight: 500; line-height: 1.18; }
.cw-chalk p { clip-path: inset(0 100% 0 0); transition: clip-path 1.6s var(--ease-out); }
.cw-chalk__p { transition-delay: .5s; }
.cw-chalk.is-here p { clip-path: inset(0 -5% 0 0); }
.cw-wifi { text-align: center; color: var(--ink); }
.cw-wifi p { margin: 0; }
.cw-wifi b { font-size: calc(var(--k) * 28px); }
.cw-wifi__k { margin-top: calc(var(--k) * 8px) !important; font-size: calc(var(--k) * 13px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); }
.cw-wifi__v { font-family: "Caveat", cursive; font-size: calc(var(--k) * 26px); line-height: 1.05; color: var(--purple); }
.cw-receipt-wrap { overflow: hidden; cursor: pointer; }
.cw-receipt { position: absolute; left: 6%; right: 6%; bottom: 0; padding: calc(var(--k) * 12px) calc(var(--k) * 10px) calc(var(--k) * 16px); background: #fff; border: calc(var(--k) * 2px) solid var(--ink);
  font-size: calc(var(--k) * 12px); font-weight: 600; line-height: 1.3; color: var(--ink); translate: 0 100%; transition: translate 1.8s steps(14); }
.cw-receipt p + p { margin-top: calc(var(--k) * 6px); }
.cw-receipt__h { font-weight: 800; letter-spacing: .1em; border-bottom: calc(var(--k) * 2px) dashed var(--ink); padding-bottom: calc(var(--k) * 6px); }
.cw-receipt__t { font-family: "Caveat", cursive; font-size: calc(var(--k) * 18px); color: var(--purple); }
.cw-receipt-wrap.is-here .cw-receipt { translate: 0 0; }
.cw-counter-note { padding: calc(var(--k) * 14px) calc(var(--k) * 18px); background: #fff; border: calc(var(--k) * 2.5px) solid var(--ink); rotate: var(--r, 0deg);
  font-size: calc(var(--k) * 19px); font-weight: 600; line-height: 1.3; color: var(--ink); }

/* bookcase */
.cw-sign { display: grid; place-items: center; font-size: calc(var(--k) * 28px); font-weight: 800; letter-spacing: -.01em; color: var(--ink); }
.cw-shelf { display: flex; align-items: flex-end; justify-content: center; }
.cw-shelf__books { display: flex; align-items: flex-end; gap: calc(var(--k) * 4px); }
.cw-book { position: relative; width: calc(var(--k) * var(--w) * 1px); height: calc(var(--k) * var(--h) * 1px); padding: 0; cursor: pointer;
  border: calc(var(--k) * 3px) solid var(--ink); background: #fff linear-gradient(transparent 12%, var(--purple) 12% 17%, transparent 17% 83%, var(--purple) 83% 88%, transparent 88%);
  rotate: var(--lean); transform-origin: 50% 100%; transition: translate .35s var(--ease-spring); }
.cw-book__t { position: absolute; inset: 19% 2px; display: grid; place-items: center; writing-mode: vertical-rl; rotate: 180deg; text-align: center;
  font: 700 calc(var(--k) * 11.5px) / 1.08 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; color: var(--ink); overflow: hidden; }
.cw-book:hover, .cw-book:focus-visible { translate: 0 calc(var(--k) * -14px); }
.cw-book.is-out { translate: 0 calc(var(--k) * -34px); }
.cw-book__label { position: absolute; z-index: 5; left: 50%; bottom: calc(100% + var(--k) * 12px); translate: -50% 6px; width: max-content; max-width: calc(var(--k) * 260px);
  display: grid; gap: 2px; padding: calc(var(--k) * 9px) calc(var(--k) * 12px); background: var(--ink); color: #fff; border-radius: 2px;
  font-size: calc(var(--k) * 14px); font-weight: 500; text-align: left; writing-mode: horizontal-tb; rotate: calc(var(--lean) * -1);
  opacity: 0; pointer-events: none; transition: opacity .2s, translate .3s var(--ease-spring); }
.cw-book__label b { font-size: calc(var(--k) * 16px); }
.cw-book:hover .cw-book__label, .cw-book:focus-visible .cw-book__label { opacity: 1; translate: -50% 0; }
.cw-shelf.is-here .cw-book { animation: cw-hop .5s var(--ease-spring) both; }
.cw-shelf.is-here .cw-book:nth-child(2) { animation-delay: .06s; } .cw-shelf.is-here .cw-book:nth-child(3) { animation-delay: .12s; }
.cw-shelf.is-here .cw-book:nth-child(4) { animation-delay: .18s; } .cw-shelf.is-here .cw-book:nth-child(5) { animation-delay: .24s; }
.cw-shelf.is-here .cw-book:nth-child(6) { animation-delay: .3s; } .cw-shelf.is-here .cw-book:nth-child(7) { animation-delay: .36s; }
@keyframes cw-hop { 40% { translate: 0 calc(var(--k) * -18px); } }

/* the table: sticky notes, laptop screen of logos */
.cw-notes-h, .cw-laptop-note { font-family: "Caveat", cursive; font-size: calc(var(--k) * 34px); font-weight: 700; color: var(--purple); }
.cw-laptop-note { font-size: calc(var(--k) * 26px); text-align: left; }
.cw-notes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: calc(var(--k) * 14px); }
.cw-note { display: grid; place-items: center; aspect-ratio: 1.15; padding: calc(var(--k) * 8px); background: #e6e5fd; border: calc(var(--k) * 2px) solid var(--ink); border-radius: 2px;
  font-family: "Caveat", cursive; font-size: calc(var(--k) * 26px); font-weight: 700; line-height: 1; text-align: center; color: var(--ink);
  rotate: var(--r); scale: .2; opacity: 0; transition: scale .5s var(--ease-spring) var(--d), opacity .3s var(--d), rotate .3s; }
.cw-notes-wrap.is-here .cw-note { scale: 1; opacity: 1; }
.cw-note:hover { rotate: calc(var(--r) * -1.6); background: #fff; }
.cw-screen-ui { overflow: hidden; }
.cw-logos { position: absolute; inset: 8% 6% 18%; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 50%; }
.cw-logos img { grid-area: auto; width: 70%; height: 70%; margin: auto; object-fit: contain; opacity: 0; display: none; transition: opacity .4s; }
.cw-logos img.is-on { display: block; }
.cw-screen-ui.is-here .cw-logos img.is-on { opacity: .9; }
.cw-screen-ui__n { position: absolute; right: 5%; bottom: 3%; margin: 0; font-size: calc(var(--k) * 18px); font-weight: 800; color: var(--purple-light); }

/* window + gallery */
.cw-travel-h, .cw-art-h { font-size: calc(var(--k) * 34px); font-weight: 800; letter-spacing: -.02em; color: var(--ink); }
.cw-travel-h span { font-family: "Caveat", cursive; font-weight: 700; color: var(--purple); }
.cw-art-h { font-size: calc(var(--k) * 30px); }
.cw-photo { padding: calc(var(--k) * 5px) calc(var(--k) * 5px) calc(var(--k) * 16px); background: #fff; border: calc(var(--k) * 1.5px) solid var(--ink); rotate: var(--r); transform-origin: 50% 0; transition: rotate .4s var(--ease-spring); }
.cw-photo::before { content: ""; position: absolute; left: 50%; top: calc(var(--k) * -10px); width: calc(var(--k) * 8px); height: calc(var(--k) * 20px); translate: -50% 0; background: var(--purple); border: calc(var(--k) * 1.5px) solid var(--ink); }
.cw-photo img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.cw-photo:hover { rotate: 0deg; z-index: 2; animation: cw-sway .9s ease-in-out; }
@keyframes cw-sway { 25% { rotate: 6deg; } 60% { rotate: -4deg; } }
.cw-layer.is-gallery .cw-photo { animation: cw-sway 1.1s ease-in-out var(--d); }
.cw-frame { padding: calc(var(--k) * 12px); background: #fff; border: calc(var(--k) * 9px) solid var(--ink); transition: rotate .35s var(--ease-spring), scale .35s var(--ease-spring); }
.cw-frame img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.cw-frame:hover { rotate: -2deg; scale: 1.04; z-index: 2; }

/* pastry case: treats = social links */
.cw-treats-sign { font-size: calc(var(--k) * 40px); font-weight: 800; letter-spacing: -.02em; text-align: center; color: var(--ink); }
.cw-treat { display: grid; justify-items: center; gap: calc(var(--k) * 30px); color: var(--ink); text-decoration: none; }
.cw-treat__food { position: relative; height: calc(var(--k) * 100px); transition: translate .3s var(--ease-spring); }
.cw-treat__food img { display: block; height: 100%; width: auto; }
.cw-treat__eaten { position: absolute; left: 0; bottom: 0; opacity: 0; }
.cw-treat.is-eaten .cw-treat__fresh { opacity: 0; } .cw-treat.is-eaten .cw-treat__eaten { opacity: 1; }
.cw-treat:hover .cw-treat__food { translate: 0 calc(var(--k) * -8px); }
.cw-treat__tag { padding: calc(var(--k) * 4px) calc(var(--k) * 14px); background: #fff; border: calc(var(--k) * 2px) solid var(--ink); rotate: -4deg;
  font-family: "Caveat", cursive; font-size: calc(var(--k) * 26px); font-weight: 700; line-height: 1; color: var(--purple); }
.cw-treat:focus-visible { outline: 3px solid var(--purple); outline-offset: 6px; }
.cw-layer.is-treats .cw-treat__food { animation: cw-hop .6s var(--ease-spring) both; }
.cw-door-sign { font-family: "Caveat", cursive; font-size: calc(var(--k) * 30px); font-weight: 700; text-align: center; color: var(--purple); }

/* corner map */
.cw-map { position: absolute; z-index: 5; left: 50%; bottom: 18px; translate: -50% 0; display: flex; gap: 4px; padding: 6px; background: rgba(241, 241, 239, .92); border: 1.5px solid var(--ink); border-radius: 2px; }
.cw-map__stop { display: flex; align-items: center; gap: 6px; padding: 6px 10px; border: 0; border-radius: 2px; background: none; cursor: pointer; font: 600 .74rem var(--font-sans); color: var(--ink-soft); }
.cw-map__dot { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid currentColor; }
.cw-map__stop.is-on { color: var(--purple); background: var(--nav-current); }
.cw-map__stop.is-on .cw-map__dot { background: currentColor; }
@media (max-width: 760px) { .cw-map__label { display: none; } .cw-map { bottom: 70px; } }
@media (prefers-reduced-motion: reduce) {
  .cw-steam, .cw-welcome__sub span { animation: none; }
  .cw-chalk p { clip-path: none; transition: none; }
  .cw-receipt, .cw-note { transition: none; }
  .cw-note { scale: 1; opacity: 1; }
  .cw-receipt { translate: 0 0; }
}

/* ---------- Work as a stack of cards (work-stack.js) ----------
   Rounded cards (this section's own shape: 16px card / 12px media radius) on the dark band.
   Each slot is sticky; JS flies cards in from alternating sides and sinks the ones beneath. */
.ws-shell { width: min(1200px, 100% - 40px); margin: 0 auto; padding-top: clamp(80px, 11vw, 132px); perspective: 1800px; perspective-origin: 50% 0; }
.ws-kicker { margin: 0; text-align: center; font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: #fff; }
.ws-stack { position: relative; padding: clamp(110px, 14vw, 200px) 0 24px; }
.ws-stack::after { content: ""; display: block; height: 70vh; }
.ws-slot { position: sticky; top: clamp(110px, 13vw, 150px); width: min(1040px, 100%); margin: 0 auto; will-change: transform; }
.ws-slot + .ws-slot { margin-top: clamp(64px, 9vw, 112px); }
.ws-card { position: relative; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(260px, .98fr); gap: 12px; min-height: 370px;
  padding: 24px 10px 10px 24px; border-radius: 16px; background: var(--c); color: #08080a; transform-origin: 50% 12%; }
.ws-card--dark { color: #fff; }
.ws-card__meta { position: absolute; left: 28px; top: 24px; margin: 0; display: flex; gap: 56px; font-size: 14px; font-weight: 600; line-height: 1; text-transform: uppercase; }
.ws-card__body { align-self: end; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 24px; align-items: end; padding-top: 84px; }
.ws-card__h { margin: 0; font-size: clamp(36px, 4.4vw, 58px); font-weight: 700; line-height: .92; letter-spacing: -.02em; text-transform: uppercase; }
.ws-card__p { margin: 0 0 6px; max-width: 270px; font-size: 16px; font-weight: 600; line-height: 1.05; text-transform: uppercase; }
.ws-card__media { position: relative; aspect-ratio: 1; min-height: 314px; margin-top: -14px; border-radius: 12px; overflow: hidden; background: rgba(8, 8, 10, .18); }
.ws-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale .6s var(--ease-out); }
.ws-card:hover .ws-card__media img { scale: 1.04; }
.ws-card__link { position: absolute; inset: 0; z-index: 6; border-radius: inherit; }
.ws-card__link:focus-visible { outline: 3px solid #08080a; outline-offset: -6px; }
@media (max-width: 900px) {
  .ws-shell { width: calc(100% - 28px); perspective: 1400px; padding-top: 92px; }
  .ws-stack { padding-top: 110px; }
  .ws-slot + .ws-slot { margin-top: 64px; }
  .ws-card { grid-template-columns: 1fr; gap: 16px; min-height: 0; padding: 20px 16px 16px; border-radius: 20px; }
  .ws-card__meta { left: 0; right: 0; top: 18px; justify-content: center; gap: 28px; font-size: 13px; text-align: center; }
  .ws-card__body { grid-template-columns: 1fr; gap: 12px; padding-top: 52px; place-items: start center; text-align: center; }
  .ws-card__h { font-size: clamp(34px, 11vw, 52px); line-height: .94; }
  .ws-card__p { max-width: 70%; font-size: 15px; line-height: 1.1; }
  .ws-card__media { min-height: 0; margin-top: 4px; aspect-ratio: 1; }
}
@media (max-width: 900px) and (min-width: 600px) { .ws-card__media { aspect-ratio: 16 / 9; } }
@media (prefers-reduced-motion: reduce) { .ws-stack::after { height: 0; } }

/* ---------- Explorations: three café corners (explorations.js) ---------- */
.xp-block { margin-top: clamp(56px, 7vw, 96px); }
.xp-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 12px 32px; margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1.5px solid var(--ink); }
.xp-bar__kicker { margin: 0 0 6px; font-family: "Caveat", cursive; font-size: 1.5rem; font-weight: 700; line-height: 1; color: var(--purple); }
.xp-bar__title { margin: 0; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); }
.xp-bar__title span { margin-left: 8px; font-size: .8rem; font-weight: 700; letter-spacing: .14em; color: var(--pink); vertical-align: super; }
.xp-bar__desc { margin: 6px 0 0; max-width: 50ch; color: var(--ink-soft); }

/* 1. latte art: cups seen from above on a table */
.xp-table { padding: clamp(28px, 4vw, 48px) clamp(12px, 3vw, 40px) clamp(40px, 5vw, 64px); border: 1.5px solid var(--ink); border-radius: 2px;
  background: var(--cream) repeating-linear-gradient(92deg, transparent 0 46px, rgba(21, 21, 21, .05) 46px 47px, transparent 47px 110px); }
.xp-cups { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 18px 6px; }
.xp-cup { width: clamp(96px, 10.6vw, 150px); translate: 0 var(--y); }
.xp-cup a { position: relative; display: block; aspect-ratio: 1; rotate: var(--r); transition: rotate .6s var(--ease-spring); }
.xp-cup a:hover, .xp-cup a:focus-visible { rotate: calc(var(--r) + 50deg); }
.xp-cup__saucer { position: absolute; inset: 0; border-radius: 50%; background: #fff; border: 2px solid var(--ink); }
.xp-cup__saucer::after { content: ""; position: absolute; inset: 11%; border-radius: 50%; border: 1.5px solid rgba(21, 21, 21, .35); }
.xp-cup__handle { position: absolute; right: -2%; top: 43%; width: 22%; height: 14%; border: 3px solid var(--ink); border-radius: 999px; background: #fff; }
.xp-cup__rim { position: absolute; inset: 15%; padding: 6%; border-radius: 50%; border: 3px solid var(--ink); background: #fff; }
.xp-cup__rim img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.xp-cup__steam { position: absolute; inset: 15%; border-radius: 50%; border: 2px solid var(--purple); opacity: 0; pointer-events: none; }
.xp-cup a:hover .xp-cup__steam { animation: xp-steam 1.2s ease-out infinite; }
@keyframes xp-steam { from { opacity: .8; scale: 1; } to { opacity: 0; scale: 1.5; } }
.xp-cup--more .xp-cup__rim { background: var(--ink); display: grid; place-items: center; }
.xp-cup__more { display: grid; text-align: center; color: #fff; font-size: .8rem; font-weight: 600; line-height: 1.1; }
.xp-cup__more strong { font-size: 1.6rem; color: var(--mint); }
.xp-cup a:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; border-radius: 50%; }

/* 2. the packaging shelf: a coffee bag per branding project */
.xp-shelf { position: relative; padding-top: 30px; }
.xp-bags { list-style: none; margin: 0; padding: 0 clamp(8px, 2vw, 24px); display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: clamp(12px, 2vw, 26px); }
.xp-bag { --bc: var(--cream); width: clamp(118px, 12.5vw, 162px); }
.xp-bag:nth-child(6n + 2) { --bc: #c6f0e5; } .xp-bag:nth-child(6n + 3) { --bc: #e6e5fd; } .xp-bag:nth-child(6n + 4) { --bc: #f6d3e3; }
.xp-bag:nth-child(6n + 5) { --bc: #ece9e4; } .xp-bag:nth-child(6n + 6) { --bc: #d9d7fc; }
.xp-bag a { display: block; color: var(--ink); text-decoration: none; rotate: var(--t); transform-origin: 50% 100%; transition: translate .4s var(--ease-spring), rotate .4s var(--ease-spring), scale .4s var(--ease-spring); }
.xp-bag a:hover, .xp-bag a:focus-visible { translate: 0 -16px; rotate: 0deg; scale: 1.05; }
.xp-bag__crimp { display: block; height: 20px; margin: 0 5%; border: 2px solid var(--ink); border-bottom: 0; border-radius: 2px 2px 0 0;
  background: var(--bc) repeating-linear-gradient(90deg, rgba(21, 21, 21, .55) 0 1.5px, transparent 1.5px 7px); }
.xp-bag__body { display: grid; gap: 6px; padding: 10% 9% 12%; aspect-ratio: 3 / 4; border: 2px solid var(--ink); border-radius: 2px; background: var(--bc); text-align: center; }
.xp-bag__label { display: block; aspect-ratio: 1; padding: 5px; background: #fff; border: 1.5px solid var(--ink); }
.xp-bag__label img { width: 100%; height: 100%; object-fit: cover; }
.xp-bag__name { align-self: end; font-size: .78rem; font-weight: 800; line-height: 1.05; letter-spacing: .02em; text-transform: uppercase; }
.xp-bag__tag { font-family: "Caveat", cursive; font-size: 1.05rem; line-height: 1; color: var(--purple); }
.xp-shelf__board { display: block; height: 12px; margin-top: -1px; background: var(--ink); border-radius: 2px; }

/* 3. the capsule rack: pick a capsule, its project shows on the machine's screen */
.xp-machine { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; gap: clamp(20px, 4vw, 56px); padding: clamp(18px, 3vw, 32px); border: 1.5px solid var(--ink); border-radius: 2px; background: #fff; }
.xp-screen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: end; padding: 12px; background: var(--ink); border-radius: 2px; color: #fff; text-decoration: none; }
.xp-screen__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 2px; }
.xp-screen__img img { width: 100%; height: 100%; object-fit: cover; }
.xp-screen__text { display: grid; gap: 6px; padding-bottom: 4px; }
.xp-screen__tag { font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--mint); }
.xp-screen__title { font-size: clamp(1.1rem, .9rem + .7vw, 1.5rem); font-weight: 800; line-height: 1.05; }
.xp-screen__go { font-family: "Caveat", cursive; font-size: 1.3rem; color: var(--purple-light); }
.xp-screen.is-new .xp-screen__img, .xp-screen.is-new .xp-screen__text { animation: xp-flicker .35s steps(3); }
@keyframes xp-flicker { 0% { opacity: .2; } 50% { opacity: .9; } 70% { opacity: .4; } 100% { opacity: 1; } }
.xp-rack { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; }
.xp-capsule { --cc: var(--purple); flex: 1; max-width: 86px; }
.xp-capsule:nth-child(2) { --cc: var(--mint); } .xp-capsule:nth-child(3) { --cc: var(--pink); } .xp-capsule:nth-child(4) { --cc: var(--ink); } .xp-capsule:nth-child(5) { --cc: #a39ff5; }
.xp-capsule a { display: grid; justify-items: center; color: #fff; text-decoration: none; transition: translate .4s var(--ease-spring); }
.xp-capsule__lid { width: 100%; height: 10px; background: var(--cc); border: 2px solid var(--ink); border-radius: 2px; }
.xp-capsule__body { display: grid; place-items: center; width: 84%; aspect-ratio: 1 / 1.1; margin-top: -2px; background: var(--cc);
  clip-path: polygon(0 0, 100% 0, 78% 100%, 22% 100%); }
.xp-capsule__body b { font-size: .8rem; font-weight: 800; letter-spacing: .06em; }
.xp-capsule:nth-child(5) .xp-capsule__body b, .xp-capsule:nth-child(2) .xp-capsule__body b { color: var(--ink); }
.xp-capsule.is-on a, .xp-capsule a:hover { translate: 0 -24px; }
.xp-capsule a:focus-visible { outline: 3px solid var(--purple); outline-offset: 4px; }
.xp-rack__bar { grid-column: 2; display: block; height: 10px; margin-top: calc(-1 * clamp(20px, 4vw, 56px) - 2px); background: var(--ink); border-radius: 2px; }
@media (max-width: 760px) {
  .xp-cup { width: 30%; }
  .xp-bag { width: 30%; }
  .xp-machine { grid-template-columns: 1fr; }
  .xp-screen { grid-template-columns: 1fr; }
  .xp-rack__bar { grid-column: 1; }
}
@media (prefers-reduced-motion: reduce) { .xp-cup a, .xp-bag a, .xp-capsule a { transition: none; } .xp-cup a:hover .xp-cup__steam { animation: none; } }

/* collection pages (branding.html, ai.html without ?p) */
.coll-grid { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.coll-grid .brand-card__title { font-size: 1.2rem; }
@media (max-width: 760px) { .coll-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px) { .coll-grid { grid-template-columns: 1fr; } }