/* =========================================================
   MARTINA COLA — Portfolio
   Identity: burgundy stage · warm cream paper · electric blue voice,
   acid yellow under the pointer, red-orange for small facts
   Type: Bebas Neue (display) · Inter (text) · serif italic (accent)
   ========================================================= */

/* =========================================================
   TOKENS
   ========================================================= */
:root {
  /* colour — cream is the white space, burgundy is the stage, electric blue is the voice */
  --burgundy: #451d20;          /* the stage: intro, hero, events, contact, menu; the ink on cream */
  --burgundy-deep: #2f1215;     /* wells on the stage: video frames, the intro's photo window */
  --electric: #387cf8;          /* the poster blue: type and graphics on burgundy, fills */
  --electric-ink: #2a62e0;      /* the same blue tuned for cream: type, links, outlines */
  --cream: #f7f3ea;             /* every light surface (there is no pure white) */
  --cream-2: #eee7da;           /* quiet surfaces on cream: window bars, tiles, placeholders */
  --print: #fbfaf6;             /* a shade lighter than cream: the photo print, white stickers, tool pills */
  --acid: #dfe85a;              /* answers the pointer: hover, highlight, selection, never text */
  --orange: #fc4524;            /* small facts: progress line, ×, list dashes, play marks */
  --pink: #ff86cf;              /* the christening card */

  --ink: var(--burgundy);
  --ink-2: color-mix(in srgb, var(--burgundy) 80%, var(--cream));     /* body copy on cream */
  --ink-3: color-mix(in srgb, var(--burgundy) 70%, var(--cream));     /* metadata on cream */
  --cream-90: color-mix(in srgb, var(--cream) 90%, var(--burgundy));  /* body copy on burgundy */
  --cream-65: color-mix(in srgb, var(--cream) 65%, var(--burgundy));  /* metadata on burgundy */
  --line: color-mix(in srgb, var(--burgundy) 14%, transparent);
  --line-strong: color-mix(in srgb, var(--burgundy) 28%, transparent);
  --line-light: color-mix(in srgb, var(--cream) 22%, transparent);

  /* what the ground under an element asks of it (see GROUNDS), cream by default */
  --voice: var(--electric-ink);   /* display titles, the ® */
  --focus: var(--electric-ink);   /* focus rings */

  /* type */
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-text: "Inter", system-ui, -apple-system, sans-serif;
  --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-hand: "Rock Salt", "Segoe Print", "Bradley Hand", cursive;   /* small painted accents only */
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(3.2rem, 10vw, 8.5rem);
  --fs-h2: clamp(2.2rem, 5.5vw, 4.5rem);
  --fs-h3: clamp(1.35rem, 2.4vw, 2rem);
  --fs-lead: clamp(1.6rem, 3.4vw, 3rem);
  --fs-body: clamp(1rem, 1.1vw, 1.1rem);
  --fs-small: 0.875rem;
  --fs-meta: 0.72rem;

  /* space */
  --pad: clamp(1.25rem, 5vw, 5rem);
  --maxw: 1500px;
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --section-y: clamp(4.5rem, 12vh, 9rem);

  /* shape */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: clamp(1.4rem, 3vw, 2.6rem);
  --r-pill: 999px;
  --shadow-soft: 0 18px 40px -22px rgba(47, 18, 21, 0.35);
  --shadow-float: 0 24px 60px rgba(35, 10, 13, 0.38);

  /* motion */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.25s;
  --dur: 0.45s;
  --dur-slow: 0.9s;
}

/* =========================================================
   BASE
   ========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  /* gentle snapping: only the event slides define snap points */
  scroll-snap-type: y proximity;
}

body {
  font-family: var(--font-text);
  background: var(--burgundy);
  color: var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

::selection { background: var(--acid); color: var(--burgundy); }

a { color: inherit; text-decoration: none; }
em { font-style: normal; }
button { font: inherit; color: inherit; }
img, video { max-width: 100%; }

/* =========================================================
   GROUNDS — three surfaces, each with its own inks
   cream: burgundy text, blue voice · burgundy: cream text, the poster's blue
   electric blue (the CV desk only): cream text, cream voice
   ========================================================= */
.hero, .intro, .menu, .sec--stage, .contact,
.nav:not([data-theme="dark"]) { --voice: var(--electric); --focus: var(--electric); }
.sec--cv,
.nav[data-theme="blue"] { --voice: var(--cream); --focus: var(--cream); }
.about, .sec--paper, .case-page, .cv-sheet__paper, .viewer { --voice: var(--electric-ink); --focus: var(--electric-ink); }

/* =========================================================
   SHARED TYPE & UTILITIES
   ========================================================= */
.eyebrow {
  font-size: var(--fs-meta);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.65;
}

.section-head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* editorial accent: the only place the serif appears */
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}

/* metadata row — "Le Mini Macaron / 2025 / Campaign" */
.meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2em 0;
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.meta > * + *::before { content: "/"; padding: 0 0.8em; opacity: 0.55; }

/* file & folder labels — the digital-document language, used sparingly */
.file {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0;
  text-transform: none;
}
.file::before {
  content: "";
  flex: none;
  width: 0.75em;
  height: 0.95em;
  border: 1.2px solid currentColor;
  border-radius: 2px;
  opacity: 0.75;
}
.file--folder::before {
  width: 1.05em;
  height: 0.8em;
  border-radius: 1px 3px 2px 2px;
  border-top-width: 3px;
}

/* development-only notes: visible on localhost / file://, hidden on the live site */
.todo { display: none; }
.is-dev .todo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  line-height: 1.4;
  color: #3d3000;
  background: #fff3a6;
  border: 1px dashed #c9a400;
  border-radius: var(--r-xs);
  padding: 0.35em 0.7em;
}
.is-dev .todo::before { content: "[TODO]"; font-weight: 700; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* =========================================================
   COMPONENTS
   ========================================================= */

/* buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.95em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: transform var(--dur) var(--ease), background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
.btn--solid { background: var(--burgundy); color: var(--cream); }
.btn--light { background: var(--cream); color: var(--burgundy); }
.btn--blue { background: var(--electric-ink); color: var(--cream); }
.btn--ghost { border: 1.5px solid currentColor; background: transparent; }
.sec--paper .btn--ghost, .about .btn--ghost, .case-page .btn--ghost { color: var(--electric-ink); }
.btn__ic { transition: transform var(--dur) var(--ease); }
/* blue marks what you can press; under the pointer every button lifts and turns acid yellow.
   Every hover effect on the site waits for a pointer that can hover: on a touch screen the
   tap would leave it on, yellow, until the next tap somewhere else */
@media (hover: hover) {
  .btn:hover { transform: translateY(-2px); }
  .btn--solid:hover, .btn--light:hover, .btn--blue:hover, .btn--ghost:hover {
    background: var(--acid);
    border-color: var(--burgundy);
    color: var(--burgundy);
  }
  .btn:hover .btn__ic { transform: translate(3px, -3px); }
}
.btn:active { transform: translateY(0); background: var(--electric-ink); border-color: var(--electric-ink); color: var(--cream); }

/* pills — channels, categories */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.4em 0.95em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.pill--solid { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.pill--blue { background: var(--electric-ink); border-color: var(--electric-ink); color: var(--cream); }

/* window — a thin, quiet frame for media inside case studies */
.window {
  border: 1px solid var(--line);
  background: var(--cream);
  overflow: hidden;
}
.window__bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 2.2rem;
  padding: 0.4rem 0.9rem;
  border-bottom: 1px solid var(--line);
  background: var(--cream-2);
  color: var(--ink-3);
}
.window__dots { display: inline-flex; gap: 5px; }
/* the three dots carry the accents */
.window__dots i { width: 8px; height: 8px; border-radius: 50%; }
.window__dots i:nth-child(1) { background: var(--orange); }
.window__dots i:nth-child(2) { background: var(--acid); }
.window__dots i:nth-child(3) { background: var(--electric); }
.window__body img, .window__body video { display: block; width: 100%; height: auto; }

/* card — base for Campaigns / Collabs / Fun Stuff */
.card { position: relative; display: block; color: inherit; }
.card__media {
  position: relative;
  overflow: hidden;
  background: var(--cream-2);
}
.card__media img, .card__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--dur-slow) var(--ease);
}
@media (hover: hover) {
  .card:hover .card__media img { transform: scale(1.035); }
}
.card__title {
  margin-top: var(--s-4);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 0.95;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.card__meta { margin-top: var(--s-2); }
.card__desc { margin-top: var(--s-2); max-width: 44ch; font-size: var(--fs-small); color: var(--ink-2); }

/* sticker — bold, slightly rotated labels (CV skills), a palette colour each */
.sticker {
  display: inline-flex;
  align-items: center;
  padding: 0.55em 1em;
  border-radius: var(--r-sm);
  background: var(--acid);
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08), 0 12px 20px -14px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--rot, -3deg));
  user-select: none;
}
.sticker--cobalt { background: var(--electric-ink); color: var(--cream); }   /* the deeper blue */
/* full electric can't carry small text: a light tint with burgundy (5.5:1) */
.sticker--electric { background: color-mix(in srgb, var(--electric) 70%, var(--cream)); color: var(--ink); }
.sticker--acid { background: var(--acid); color: var(--ink); }
.sticker--orange { background: var(--orange); color: var(--burgundy-deep); }
.sticker--burgundy { background: var(--burgundy); color: var(--cream); }
.sticker--white { background: var(--print); color: var(--electric-ink); }
.sticker--pink { background: var(--pink); }
/* the first sticker colours, mapped into the palette */
.sticker--lemon { background: var(--acid); }
.sticker--lilac { background: var(--pink); }
.sticker--tomato { background: var(--orange); }
.sticker--lg { font-size: 1.25rem; }
.sticker--sm { font-size: 0.8rem; }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: clamp(1rem, 2.2vw, 1.6rem) var(--pad);
  color: var(--cream);
  --nav-ground: var(--burgundy);   /* the surface under the bar: its veil on small screens (RESPONSIVE) */
  transition: transform 0.5s var(--ease), color 0.45s var(--ease), background-color 0.45s var(--ease);
}
.nav[data-theme="dark"] { color: var(--ink); --nav-ground: var(--cream); }
.nav[data-theme="blue"] { --nav-ground: var(--electric-ink); }
.nav.is-hidden { transform: translateY(-102%); }
/* hairline rule under the nav — adapts to whichever section is behind it */
.nav::after {
  content: "";
  position: absolute;
  left: var(--pad); right: var(--pad); bottom: 0;
  height: 1px;
  background: currentColor;
  opacity: 0.2;
  transition: opacity 0.45s var(--ease);
}
/* over the CV's blue ground the "here's my cv!" note sits just under the bar: no rule through it */
.nav[data-theme="blue"]::after { opacity: 0; }

.nav__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1;
}
.nav__brand-name { text-transform: uppercase; }
.nav__brand-reg { font-size: 0.55em; transform: translateY(-0.35em); color: var(--voice); }
.nav__brand-sub {
  font-family: var(--font-text);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-left: 0.4em;
}

.nav__links {
  display: flex;
  /* spread evenly across the width */
  flex: 1;
  justify-content: space-between;
  max-width: min(62%, 780px);
  margin-left: clamp(1.5rem, 6vw, 6rem);
  gap: clamp(1.2rem, 2.4vw, 2.6rem);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 500;
}
.nav__links a {
  position: relative;
  padding-bottom: 3px;
  border-radius: 1px;
  transition: color var(--dur-fast), background-color var(--dur-fast), box-shadow var(--dur-fast);
}
.nav__links a::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--voice);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.4s var(--ease);
}
/* under the pointer a link becomes a small yellow label; the blue rule marks where you are */
@media (hover: hover) {
  .nav__links a:hover { color: var(--burgundy); background: var(--acid); box-shadow: 0 0 0 0.3em var(--acid); }
  .nav__links a:hover::after { opacity: 0; }
}
.nav__links a.is-active::after,
.nav__links a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* mobile toggle — inherits the nav colour (cream on the stage and the desk, burgundy on cream) */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  background: none;
  border: 0;
  color: inherit;
  cursor: pointer;
  /* a target the size of a fingertip; the negative margin keeps the two 30px lines where they were */
  width: 44px;
  height: 44px;
  padding: 0 7px;
  margin: -11px -7px;
}
.nav__toggle span {
  display: block; height: 2px; width: 100%;
  background: currentColor;
  transition: transform 0.4s var(--ease), opacity 0.3s;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }

/* fullscreen mobile menu — visibility keeps closed links out of the tab order */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--burgundy);
  color: var(--electric);          /* the poster: blue words on burgundy */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: var(--pad);
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.6s var(--ease), visibility 0s linear 0.6s;
  pointer-events: none;
}
.menu.is-open {
  transform: translateY(0);
  visibility: visible;
  transition: transform 0.6s var(--ease), visibility 0s;
  pointer-events: auto;
}
.menu a {
  font-family: var(--font-display);
  font-size: clamp(3rem, 14vw, 6rem);
  line-height: 0.95;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  transition: color var(--dur-fast);
}
@media (hover: hover) {
  .menu a:hover { color: var(--acid); }
}
.menu__mail {
  font-family: var(--font-text) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.02em;
  text-transform: none !important;
  margin-top: 1.4rem;
  opacity: 0.7;
  color: var(--cream);
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 100svh;
  padding: clamp(6rem, 14vh, 9rem) var(--pad) 0;
  display: flex;
  flex-direction: column;
  max-width: var(--maxw);
  margin: 0 auto;
  overflow: hidden;
}

.hero__meta {
  display: flex;
  gap: 0.8em;
  font-size: 0.74rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: clamp(0.6rem, 3vh, 1.6rem);
}
.hero__meta-dot { opacity: 0.5; }

/* the greeting, all lowercase, in the middle of the page: "hi, it's" and "welcome to
   my portfolio" in the italic serif, the name big in heavy, tight Inter (Bebas has no
   lowercase). Yellow stickers hold on to the name: the CV skill badges, bigger */
.hero__intro {
  margin-block: auto;                /* centred between the nav and the foot */
  text-align: center;
}
.hero__greeting {
  position: relative;
  display: inline-block;             /* as wide as the name, so the stickers hold on to its edges */
}
.hero__title { font-weight: 400; }
.hero__hello,
.hero__name { display: block; }
.hero__hello {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(2.1rem, 4.8vw, 4.9rem);
  line-height: 1;
  letter-spacing: -0.01em;
}
.hero__name {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: clamp(3.2rem, 14.5vw, 14rem);
  line-height: 0.92;
  letter-spacing: -0.065em;
  white-space: nowrap;
}
.hero__welcome {
  margin-top: 1.05em;                /* room for the sticker hanging under the name */
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.5vw, 2.4rem);
  line-height: 1.1;
}
/* the lines rise into place one after the other */
.hero__hello, .hero__name, .hero__welcome { animation: heroRise 1s var(--ease) both; }
.hero__hello { animation-delay: 0.08s; }
.hero__name { animation-delay: 0.2s; }
.hero__welcome { animation-delay: 0.36s; }
@keyframes heroRise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* the stickers pop in after the name, then sway like the CV badges, out of step */
.hero__stickers { list-style: none; }
.hero__sticker {
  position: absolute;
  z-index: 1;
  padding: 0.42em 0.78em;
  border-radius: var(--r-xs);
  font-size: clamp(0.8rem, 1.2vw, 1.2rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(47, 18, 21, 0.1), 0 12px 18px -10px rgba(35, 10, 13, 0.55);
  animation: stickerPop 0.7s var(--ease) both, cvSway 3.4s ease-in-out infinite;
  animation-delay: calc(0.6s + var(--i) * 0.12s), calc(var(--i) * -0.7s);
  transition: transform var(--dur) var(--ease);
}
@media (hover: hover) {
  .hero__sticker:hover { transform: translateY(-2px) scale(1.05); }   /* the tilt lets go, as in the CV */
}
@keyframes stickerPop {
  from { opacity: 0; scale: 0.6; }
  to   { opacity: 1; scale: 1; }
}
/* where each one holds on, in percent of the greeting's box */
.hero__sticker:nth-child(1) { --i: 0; --rot: -7deg; left: -4%; top: 14%; }
.hero__sticker:nth-child(2) { --i: 1; --rot: 5deg; right: -6%; top: 32%; animation-duration: 0.7s, 4.1s; }
.hero__sticker:nth-child(3) { --i: 2; --rot: -3deg; left: 33%; bottom: -5%; animation-duration: 0.7s, 2.9s; animation-direction: normal, reverse; }

/* on a phone the name fills the width and the stickers step off the letters:
   two above the greeting, one under the name */
@media (max-width: 640px) {
  .hero__greeting { padding-block: 2.6rem 2.8rem; }
  .hero__name { font-size: 16.5vw; }
  .hero__sticker { font-size: 0.8rem; }
  .hero__sticker:nth-child(1) { --rot: -6deg; left: 0; top: 0.3rem; }
  .hero__sticker:nth-child(2) { --rot: 4deg; right: 0; top: 0.1rem; }
  .hero__sticker:nth-child(3) { --rot: -3deg; left: 26%; bottom: 0.3rem; }
  .hero__welcome { margin-top: 0.4em; }
}

.hero__foot {
  display: flex;
  justify-content: flex-end;
  align-items: end;
  padding: clamp(1.4rem, 3.5vh, 2.4rem) 0 clamp(1.6rem, 5vh, 3.2rem);
}

/* shown only while the photo trail is actually running (mouse, motion allowed) */
.hero__hint {
  align-self: flex-end;
  display: none;
  align-items: center;
  gap: 0.5em;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  transition: opacity 0.6s var(--ease);
}
.hero.is-trail .hero__hint { display: inline-flex; }
.hero.is-trail.hint-gone .hero__hint { opacity: 0; }
.hero__hint span { display: inline-block; color: var(--acid); animation: spin 6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.hero__scroll {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.85;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--cream) 45%, transparent);
  border-radius: 100px;
  padding: 0.7em 1.2em;
  transition: background-color var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast), opacity 0.4s;
}
@media (hover: hover) {
  .hero__scroll:hover { background: var(--acid); border-color: var(--acid); color: var(--burgundy); opacity: 1; }
}
.hero__scroll svg { animation: bob 1.8s var(--ease) infinite; }
@keyframes bob { 0%,100% { transform: translateY(-2px); } 50% { transform: translateY(3px); } }

/* ---------- hero image trail (cursor) ---------- */
.trail {                             /* under the name and the title, never over them */
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hero > *:not(.trail) { position: relative; z-index: 1; }
.trail__img {
  position: absolute;
  width: calc(clamp(145px, 14vw, 220px) * var(--s, 1));   /* --s: a few sizes, script.js */
  height: auto;
  margin: 0;
  opacity: 0;
  will-change: transform, opacity;
  transform: translate(-50%, -50%) scale(0.96);   /* straight and square, like prints on a page */
  transition: transform 0.6s var(--ease), opacity 0.35s ease-out;
  box-shadow: var(--shadow-float);
}
.trail__img.is-live { opacity: 1; transform: translate(-50%, -50%); }
.trail__img.is-out  { opacity: 0; transition: opacity 0.7s ease-in-out; }   /* 0.7s = FADE in script.js */

/* ---------- hero photo stack (touch screens / reduced motion) ---------- */
.hero > .hero__stack {
  position: absolute;
  left: 50%;                         /* above the centred greeting */
  translate: -50% 0;
  z-index: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hero__stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  box-shadow: var(--shadow-float);
  transition: transform 0.6s var(--ease), opacity 0.6s var(--ease);
}
.hero__stack img.is-leaving {            /* straight like the rest: it slides aside and fades */
  opacity: 0;
  transform: translateX(-14%);
}

/* =========================================================
   INTRO — first visit of the session (gate script in <head>, js/intro.js)
   ========================================================= */
.intro { display: none; }
.intro-on .intro {
  position: fixed;
  inset: 0;
  z-index: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--burgundy);
  color: var(--electric);            /* the reference poster: blue letters on burgundy */
  transition: transform 0.75s var(--ease);
}
.intro.is-out { transform: translateY(-100%); }
.intro.is-fast { transition-duration: 0.45s; }

.intro__name {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  /* width- and height-aware, so name + photo window always fit the screen */
  font-size: clamp(3rem, min(19vw, 27vh), 17rem);
  line-height: 0.8;
  text-transform: uppercase;
  letter-spacing: 0.005em;
}
.intro__word { display: block; overflow: hidden; padding: 0.04em 0.02em 0; }
.intro__word--stroke {
  color: transparent;
  -webkit-text-stroke: clamp(1px, 0.16vw, 2.2px) var(--electric);
}
.intro__l {
  display: inline-block;
  transform: translateY(110%);
  animation: introRise 0.6s var(--ease) forwards;
  animation-delay: calc(var(--i) * 35ms);
}
@keyframes introRise { to { transform: translateY(0); } }

/* the gap between the two words opens into a small photo window */
.intro__window {
  display: block;
  width: min(52vw, 560px);
  height: 0;
  overflow: hidden;
  background: var(--burgundy-deep);
  transition: height 0.5s var(--ease), margin 0.5s var(--ease);
}
.intro.is-open .intro__window {
  height: clamp(8rem, 28vh, 16rem);
  margin: clamp(0.6rem, 2vh, 1.2rem) 0;
}
.intro__window img { display: block; width: 100%; height: 100%; object-fit: cover; }

.intro__hint {
  position: absolute;
  left: 50%;
  bottom: clamp(1.2rem, 4vh, 2.2rem);
  transform: translateX(-50%);
  font-size: var(--fs-meta);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.6;
  color: var(--cream);
}

/* the hero title waits for the curtain, then rises as usual */
.hero-hold .hero__hello, .hero-hold .hero__name, .hero-hold .hero__welcome,
.hero-hold .hero__sticker { animation: none; opacity: 0; }

/* =========================================================
   BIO — the statement is the design. The stage holds the words still while
   the photo, in the page flow under it, scrolls up beneath them and away:
   a picture sliding under a printed sheet. No script.
   ========================================================= */
.about {
  position: relative;
  background: var(--cream);
  color: var(--ink);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  margin-block: -1px;                  /* a pixel into both neighbours, so no hairline shows at either edge */
}
.about .eyebrow { opacity: 1; color: var(--electric-ink); }

/* one screen, held while the section scrolls past */
.about__stage {
  position: sticky;
  top: 0;
  z-index: 1;                          /* the words stay over the photo */
  height: 100svh;
  display: flex;
  flex-direction: column;
  padding-block: clamp(4.5rem, 9vh, 6rem) clamp(1.5rem, 4vh, 3rem);
}
/* the room for the label and the words, which sit at its top: the photo comes in
   through the space below them. The type is sized by the room's width (cqi), and
   the room's shape picks the setting (below) */
.about__canvas {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: clamp(1.25rem, 3vh, 2.25rem);
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
  container: about / size;
}
.about__canvas > .section-head { max-width: none; margin: 0; padding: 0; }

/* the statement, justified into one block. Two settings, both picked for their even
   spacing and both keeping the same line breaks at any size: five lines in a wide,
   short room, six when the room is tall enough. The height terms only step in on
   unusually short screens */
.about__statement {
  position: relative;
  z-index: 0;
  font-weight: 500;
  font-size: min(6.45cqi, (100cqh - 4rem) / 5.3);
  line-height: 1.02;
  letter-spacing: -0.02em;
  word-spacing: -0.04em;
  text-align: justify;
  text-align-last: left;
}
@container about (max-aspect-ratio: 2 / 1) {
  .about__statement { font-size: min(7.45cqi, (100cqh - 4rem) / 6.3); }
}
/* the skills are in the serif italic (.serif), whose own space is narrow: a touch more
   keeps "paid media" from reading as one word. The title gets a highlighter stroke,
   drawn a little past the words without moving them (padding and margin cancel out) */
.about__statement .serif { word-spacing: 0.06em; }
.about__statement mark {
  padding-inline: 0.08em;
  margin-inline: -0.08em;
  color: inherit;
  background: linear-gradient(transparent 30%, var(--acid) 30%, var(--acid) 90%, transparent 90%);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* the sheet the words are printed on: cream on the cream page, it only shows
   over the photo, which it softens so the type always reads */
.about__statement::before {
  content: "";
  position: absolute;
  inset: -0.3em calc(-1 * var(--pad));
  z-index: -1;
  background: var(--cream);
  opacity: 0.58;
}
/* Martina's two drawn flowers (the cursor's pair, in the ink) in the room the last
   line leaves, under "marketing,": right edge on the text's, top at the last line's
   cap height, sized with the type. Out of the flow, so the breaks don't move */
.about__flowers {
  position: absolute;
  right: 0;
  top: calc(100% - 0.87em);
  width: auto;
  height: 1.6em;
  pointer-events: none;
}

/* the photo's lane, on the words' grid. It starts right under the stage, so it
   comes in as the words settle; the screen of room after it keeps the stage
   held until the photo has left through the top */
.about__rail {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad) 100svh;
  container-type: inline-size;
}
.about__photo { width: 31%; margin-left: 50%; }
.about__photo img {                   /* square, like a print */
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

/* portrait tablets: a room taller than wide gets a left-aligned column, as on phones
   but bigger */
@container about (max-aspect-ratio: 1 / 1) {
  .about__statement {
    font-size: min(10cqi, (100cqh - 4rem) / 10);
    word-spacing: normal;
    text-align: left;
  }
}
@media (min-width: 641px) and (max-aspect-ratio: 4 / 5) {
  .about__photo { width: 44%; margin-left: 46%; }
  /* the photo's lane reaches under the flowers here: the sheet runs down past
     them, so they stay on paper (as on phones) */
  .about__statement::before { bottom: -0.95em; }
}

/* reduced motion: nothing held — one still composition, the photo tucked under
   the last lines of the statement */
@media (prefers-reduced-motion: reduce) {
  .about__stage { position: relative; height: auto; }
  .about__canvas { container-type: inline-size; }   /* no fixed room to measure */
  .about__statement { font-size: 7.45cqi; }
  .about__rail { padding-bottom: var(--section-y); }
  .about__photo { margin-top: -22cqi; }
}

/* phones: a column, not a shrunk block — a word or two a line, big for the width.
   Justified, lines that short would open wide gaps, so the right edge is ragged */
@media (max-width: 640px) {
  .about__stage { padding-block: 4.5rem 1.5rem; }
  .about__statement {
    font-size: min(12cqi, (100cqh - 4rem) / 11.8);
    letter-spacing: -0.015em;
    word-spacing: normal;
    text-align: left;
  }
  .about__statement::before { bottom: -0.95em; }   /* past the flowers: the photo passes under them */
  .about__photo { width: 58%; margin-left: 34%; }
}


/* =========================================================
   WORK SECTIONS — Campaigns · Events · Brand Collabs · Fun Stuff
   ========================================================= */
.sec { padding: var(--section-y) 0; }
.sec--paper { background: var(--cream); color: var(--ink); }
.sec--stage { background: var(--burgundy); color: var(--cream); }
.sec--paper .eyebrow { opacity: 1; color: var(--voice); }   /* ( Projects ), set like ( About ) */

.sec-head {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--pad);
}
.sec-head__bar {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.sec-head__bar > span:first-child { color: var(--voice); }
.sec--stage .sec-head__bar { border-bottom-color: var(--line-light); color: var(--cream-65); }
.sec--stage .sec-head__bar > span:first-child { color: var(--cream); }
.sec-head__bar .file { letter-spacing: 0.02em; }
.sec-head__count { margin-left: auto; }
.sec-head__title {
  margin-top: clamp(1.2rem, 3vw, 2.4rem);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 0.86;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: var(--voice);
}
.sec__body {
  max-width: var(--maxw);
  margin: clamp(2rem, 5vw, 3.5rem) auto 0;
  padding: 0 var(--pad);
}

.sec-head__count { font-family: var(--font-mono); letter-spacing: 0.02em; text-transform: none; }

/* =========================================================
   CAMPAIGN CARDS — editorial grid; sizes repeat every 7 cards
   (row 1: large + medium, row 2: three small, row 3: medium + large)
   ========================================================= */
/* four cards of the same size, then the "check out more" button */
.c-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.6rem, 3vw, 2.6rem) clamp(0.8rem, 1.8vw, 1.6rem);
  align-items: start;
}
.c-card__link { display: block; color: inherit; container: card / inline-size; }
.c-card__media {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--cream-2);
}
.c-card__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--zoom, 1));        /* per-card crop, set from data */
  transition: transform var(--dur-slow) var(--ease);
}
.c-card__go {
  position: absolute;
  top: var(--s-3); right: var(--s-3);
  display: grid;
  place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: var(--acid);
  color: var(--ink);
  font-size: 0.95rem;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
@media (hover: hover) {
  .c-card__link:hover .c-card__media img { transform: scale(calc(var(--zoom, 1) * 1.04)); }
  .c-card__link:hover .c-card__go { opacity: 1; transform: none; }
}
.c-card__link:focus-visible .c-card__go { opacity: 1; transform: none; }

/* caption: name and year on one line, the rest underneath, small and quiet */
.c-card__cap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;   /* the painted kicker may wrap, the right column never */
  align-items: baseline;
  gap: 0.1rem 0.6rem;
  margin-top: 0.7rem;
}
.c-card__t {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.c-card__y, .c-card__m {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.c-card__k {
  grid-column: 1;
  margin-top: 0.2rem;
  font-family: var(--font-hand);
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--electric-ink);
}
.c-card__m { grid-column: 2; align-self: center; justify-self: end; text-align: right; }
/* a narrow card (two a row on a phone, four a row just past 900px): the type steps down under the
   kicker. On the right it widened its column and ran over the name and the kicker */
@container card (max-width: 15rem) {
  .c-card__m { grid-column: 1 / -1; justify-self: start; text-align: left; }
}

.c-more__wrap { display: flex; justify-content: center; margin-top: clamp(2.4rem, 5vw, 4rem); }
.c-more, .cv-cta { font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; }

/* =========================================================
   FUN STUFF — small tilted cards, the playful corner of the site
   ========================================================= */
.fun {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.fun__card {
  padding: clamp(1rem, 1.6vw, 1.4rem);
  background: var(--cream-2);
  box-shadow: 0 1px 0 rgba(69, 29, 32, 0.06), 0 18px 36px -26px rgba(47, 18, 21, 0.45);
  transform: rotate(var(--tilt, -1.5deg));
  transition: transform var(--dur) var(--ease);
}
.fun__card:nth-child(2n) { --tilt: 1.8deg; margin-top: clamp(1rem, 3vw, 2.5rem); }
.fun__card:nth-child(3n) { --tilt: -2.4deg; }
@media (hover: hover) {
  .fun__card:hover { transform: rotate(0deg) translateY(-4px); } /* straightens when you look at it */
}
/* pink for the christening, clay orange for ceramics (lilac is not in the palette), acid for Hey Gigi */
.fun__card[data-colour="pink"] { background: color-mix(in srgb, var(--pink) 26%, var(--cream)); }
.fun__card[data-colour="lilac"] { background: color-mix(in srgb, var(--orange) 17%, var(--cream)); }
.fun__card[data-colour="lemon"] { background: color-mix(in srgb, var(--acid) 44%, var(--cream)); }

.fun__media { overflow: hidden; background: var(--cream); }
.fun__media img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.fun__media--empty {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  padding: 1rem;
  border: 1.5px dashed var(--line-strong);
  background: transparent;
  text-align: center;
}
.fun__media--empty span {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--ink-3);
}
.fun__text { padding: var(--s-4) var(--s-2) var(--s-2); }
.fun__kicker { font-family: var(--font-hand); font-size: 0.76rem; line-height: 1.7; color: var(--electric-ink); }
.fun__title {
  margin-top: 0.1rem;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.7rem, 2.6vw, 2.4rem);
  line-height: 0.95;
  text-transform: uppercase;
}
.fun__line { margin-top: var(--s-3); font-size: var(--fs-small); color: var(--ink-2); }
.fun__body { margin-top: var(--s-3); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.fun__card .meta { margin-top: var(--s-3); }
.fun__todo { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; margin-top: var(--s-4); }

/* =========================================================
   BRAND COLLABS — wide rows instead of a grid: the two brands locked up
   and the images shown in pairs, so a collaboration reads as a pairing.
   ========================================================= */
.collabs { list-style: none; }
.collab + .collab { border-top: 1px solid var(--line); }
.collab__link {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 5rem);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
  color: inherit;
}
.collab:nth-child(even) .collab__pair { order: 2; }

.collab__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start; /* each image keeps its 4:5 box instead of stretching to the row */
  gap: clamp(0.6rem, 1.4vw, 1.2rem);
}
.collab__pair img {
  width: 100%;
  height: auto; /* beats the width/height attributes, so the 4:5 box below applies */
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--cream-2);
  transition: transform var(--dur-slow) var(--ease);
}
.collab__pair img:last-child { margin-top: clamp(1.5rem, 4vw, 3.5rem); }
@media (hover: hover) {
  .collab__link:hover .collab__pair img { transform: scale(1.025); }
}

.collab__idx { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-3); }
.collab__lockup {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3em;
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.9;
  text-transform: uppercase;
}
.collab__brand { font-size: clamp(1rem, 1.5vw, 1.4rem); letter-spacing: 0.14em; color: var(--ink-3); }
.collab__x {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  text-transform: none;
  color: var(--orange);          /* the × is an orange stamp between the two names */
}
.collab__partner { font-size: clamp(2.6rem, 6vw, 5rem); letter-spacing: 0.01em; }
.collab__kicker {
  margin-top: 0.4rem;
  font-family: var(--font-hand);
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  line-height: 1.6;
  color: var(--electric-ink);
}
.collab .meta { margin-top: var(--s-3); }
.collab__line { margin-top: var(--s-3); max-width: 46ch; font-size: var(--fs-small); color: var(--ink-2); }
.collab__line:empty { display: none; }
.collab__go {
  display: inline-flex;
  gap: 0.5em;
  margin-top: var(--s-4);
  padding-bottom: 2px;
  border-bottom: 1.5px solid var(--electric-ink);
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  transition: background-color var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.collab__go span { transition: transform var(--dur) var(--ease); }
@media (hover: hover) {
  .collab__link:hover .collab__go { background: var(--acid); box-shadow: 0 0 0 0.3em var(--acid); border-bottom-color: transparent; }
  .collab__link:hover .collab__go span { transform: translate(3px, -3px); }
}

/* =========================================================
   EVENTS — a slide per event: vertical video, text beside it.
   The page snaps gently to each slide while scrolling.
   ========================================================= */
.events__wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.events { list-style: none; }
.event {
  display: grid;
  grid-template-columns: auto minmax(0, 46ch);
  align-items: center;
  justify-content: center; /* the pair sits centred, like a slide */
  gap: clamp(2rem, 6vw, 6rem);
  min-height: 100svh;
  padding: clamp(3rem, 8vh, 6rem) 0;
  scroll-snap-align: center;
}
.event__media { position: relative; }
.event__media video {
  display: block;
  height: min(68svh, 600px);
  width: auto;
  aspect-ratio: 9 / 16;
  object-fit: cover;
  background: var(--burgundy-deep);
  box-shadow: var(--shadow-float);
}
.event__media .file { margin-top: var(--s-3); color: var(--cream-65); }

.event__text { max-width: 46ch; }
.event__idx { font-family: var(--font-mono); font-size: 0.74rem; color: var(--cream-65); }
.event__title {
  margin-top: var(--s-3);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 5rem);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.event__kicker {
  display: block;            /* its own line: a long kicker never collides with the meta row */
  margin-top: 0.15em;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.52em;
  line-height: 1.1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--electric);
}
.event__meta { margin-top: var(--s-3); color: var(--cream-65); }
.event__body {
  margin-top: var(--s-4);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.45;
  color: var(--cream-90);
}
.event__todo { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; margin-top: var(--s-4); }

.events__rail {
  position: sticky;
  top: 50svh;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding-top: 0.5rem;
}
.events__rail a {
  display: block;
  width: 11px;
  height: 11px;
  border: 1px solid color-mix(in srgb, var(--cream) 50%, transparent);
  border-radius: 50%;
  transition: background var(--dur-fast), transform var(--dur-fast), border-color var(--dur-fast);
}
@media (hover: hover) {
  .events__rail a:hover { border-color: var(--acid); background: var(--acid); }
}
.events__rail a.is-active { background: var(--electric); border-color: var(--electric); transform: scale(1.2); }

/* =========================================================
   CASE STUDY PAGE — cream, editorial: a curated digital folder, with one
   accent per project (data-accent: blue · yellow · orange, set from data/*.js)
   ========================================================= */
.case-page { background: var(--cream); color: var(--ink); }
.case {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(6.5rem, 14vh, 9rem) var(--pad) var(--section-y);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55em;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--ink-3);
}
@media (hover: hover) {
  .crumbs a:hover { color: var(--ink); background: var(--acid); box-shadow: 0 0 0 0.22em var(--acid); }
}
.crumbs [aria-current] { color: var(--ink); }

.case__head {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: end;
  margin-top: clamp(2rem, 6vh, 4rem);
}
.case__kicker {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2.2rem);
  line-height: 1.1;
  color: var(--electric-ink);
}
.case__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(3.4rem, 10vw, 9.5rem);
  line-height: 0.84;
  letter-spacing: 0.005em;
  text-transform: uppercase;
}
.case__line {
  margin-top: var(--s-5);
  max-width: 44ch;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  line-height: 1.35;
}
.case__line:empty { display: none; }

/* "get info" panel */
.info { border-top: 1px solid var(--ink); font-size: 0.92rem; }
.info > div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--line);
}
.info dt {
  padding-top: 0.2em;
  font-size: var(--fs-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.case__todo { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; margin-top: var(--s-5); }

.case__cover { margin-top: clamp(2.5rem, 6vh, 4rem); }
.case__cover .window__body img { width: 100%; max-height: 80vh; object-fit: cover; }

/* section tabs — folder-like navigation that follows the scroll */
.case__tabs {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  gap: 0.45rem;
  overflow-x: auto;
  scrollbar-width: none;
  margin: clamp(2.5rem, 6vh, 4rem) calc(var(--pad) * -1) 0;
  padding: 0.8rem var(--pad);
  background: color-mix(in srgb, var(--cream) 92%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
  transition: top 0.5s var(--ease);   /* in step with the bar sliding in and out */
}
.case__tabs::-webkit-scrollbar { display: none; }
/* while the bar is shown (scrolling back up) the tabs stay just under it, not behind it */
.nav:not(.is-hidden) ~ .case-page .case__tabs { top: var(--nav-h, 0px); }
.tab {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.45em 0.95em;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  font-size: 0.8rem;
  white-space: nowrap;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
@media (hover: hover) {
  .tab:hover { background: var(--acid); border-color: var(--acid); color: var(--ink); }
}
.tab.is-active { background: var(--electric-ink); border-color: var(--electric-ink); color: var(--cream); }

/* overview */
.case__overview {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 6vw, 6rem);
  padding-top: clamp(3rem, 8vh, 5rem);
  scroll-margin-top: 4.5rem;
}
.case__block + .case__block { margin-top: var(--s-7); }
.needs-content { display: none; }
.is-dev .needs-content { display: block; }
.case__h {
  margin-bottom: var(--s-4);
  font-size: var(--fs-meta);
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.case__text { max-width: 58ch; font-size: clamp(1.05rem, 1.3vw, 1.2rem); line-height: 1.5; color: var(--ink-2); }
.case__list { list-style: none; border-top: 1px solid var(--line); }
.case__list li {
  position: relative;
  padding: 0.9rem 0 0.9rem 1.6rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  line-height: 1.5;
}
.case__list li::before { content: "—"; position: absolute; left: 0; color: var(--orange); }
.results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6rem 2rem; }
.result__value {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 0.85;
  color: var(--electric-ink);
}
.result__label { display: block; max-width: 26ch; margin-top: 0.45rem; font-size: 0.9rem; color: var(--ink-2); }

.quotes {
  align-self: start;
  position: sticky;
  top: 5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: clamp(1.4rem, 2.5vw, 2rem);
  border-radius: var(--r-md);
  background: var(--electric-ink);
  color: var(--cream);
}
.quotes .case__h { margin-bottom: 0; color: color-mix(in srgb, var(--cream) 78%, var(--electric-ink)); }
.quote__text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1.15;
}
.quote__src { margin-top: 0.5rem; font-family: var(--font-mono); font-size: 0.7rem; color: color-mix(in srgb, var(--cream) 78%, var(--electric-ink)); }

/* project accents: blue is the default above; yellow and orange projects recolour the
   kicker and the quotes (orange also the result numbers), the page stays cream */
.case-page[data-accent="yellow"] .case__kicker {
  width: fit-content;
  padding: 0 0.12em;
  color: var(--ink);
  background: linear-gradient(transparent 52%, var(--acid) 52%, var(--acid) 92%, transparent 92%);
}
.case-page[data-accent="yellow"] .quotes { background: var(--acid); color: var(--ink); }
.case-page[data-accent="yellow"] .quotes .case__h,
.case-page[data-accent="yellow"] .quote__src { color: color-mix(in srgb, var(--burgundy) 82%, var(--acid)); }
.case-page[data-accent="orange"] .case__kicker,
.case-page[data-accent="orange"] .result__value { color: var(--orange); }
.case-page[data-accent="orange"] .quotes { background: var(--orange); color: var(--burgundy-deep); }
.case-page[data-accent="orange"] .quotes .case__h,
.case-page[data-accent="orange"] .quote__src { color: var(--burgundy-deep); }

/* media sections */
.case__sec { padding-top: clamp(3.5rem, 9vh, 6rem); scroll-margin-top: 4.5rem; }
.case__sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.2rem;
  margin-bottom: var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--line);
}
.case__sec-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 0.9;
  text-transform: uppercase;
}
.case__sec-head .file { color: var(--ink-3); }
.case__sec-note { font-size: 0.82rem; color: var(--ink-3); }

/* gallery: photos and videos keep their own shape (masonry columns) */
.gallery { list-style: none; columns: 3 260px; column-gap: clamp(0.8rem, 1.6vw, 1.4rem); }
.gallery > li { break-inside: avoid; margin-bottom: clamp(1rem, 2vw, 1.6rem); }
/* files: ads, banners, screenshots, graphics — a quiet icon view */
.files {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 1.6rem clamp(0.8rem, 1.6vw, 1.4rem);
}

.tile {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: zoom-in;
}
.tile__thumb {
  position: relative;
  display: block;
  overflow: hidden;
  background: var(--cream-2);
}
.tile__thumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform var(--dur-slow) var(--ease);
}
@media (hover: hover) {
  .tile:hover .tile__thumb img { transform: scale(1.025); }
}
.files .tile__thumb {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 5;
  padding: 9%;
  border: 1px solid var(--line);
}
.files .tile__thumb img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 10px 22px -14px rgba(0, 0, 0, 0.35);
}
.files .tile__thumb--blue { background: var(--electric-ink); border-color: var(--electric-ink); }
.files .tile__thumb--blue img { box-shadow: none; }
.tile__name {
  display: flex;
  justify-content: space-between;
  gap: 0.6em;
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  color: var(--ink-3);
}
.tile__name b { overflow: hidden; font-weight: 400; color: var(--ink-2); text-overflow: ellipsis; white-space: nowrap; }
.tile__play {
  position: absolute;
  left: 0.7rem; bottom: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.75em 0.35em 0.6em;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--cream) 94%, transparent);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.7rem;
}
.tile__play::before {
  content: "";
  border-left: 7px solid var(--orange);
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
}

/* previous / all / next */
.pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1rem;
  margin-top: var(--section-y);
  padding-top: var(--s-5);
  border-top: 1px solid var(--ink);
}
.pager__label { display: block; font-size: var(--fs-meta); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.pager__title {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 3.4rem);
  line-height: 0.9;
  text-transform: uppercase;
  transition: color var(--dur-fast);
}
@media (hover: hover) {
  .pager a:hover .pager__title { color: var(--electric-ink); }
}
.pager__next { text-align: right; }
.pager__all { font-family: var(--font-mono); font-size: 0.74rem; text-decoration: underline 1.5px var(--electric-ink); text-underline-offset: 3px; }
@media (hover: hover) {
  .pager__all:hover { background: var(--acid); box-shadow: 0 0 0 0.22em var(--acid); text-decoration: none; }
}

/* viewer (native <dialog>) */
.viewer {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: color-mix(in srgb, var(--cream) 98.5%, transparent);
  color: var(--ink);
}
/* one column, never wider than the screen: a long file name is cut short in the bar instead of
   pushing the × off the edge of a phone */
.viewer[open] { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; }
.viewer::backdrop { background: rgba(47, 18, 21, 0.45); }
.viewer button { cursor: pointer; }
.viewer__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.7rem var(--pad);
  border-bottom: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--ink-3);
}
.viewer__title { overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; }
.viewer__count { margin-left: auto; white-space: nowrap; }
.viewer__stage {
  display: grid;
  place-items: center;
  min-height: 0;
  padding: clamp(0.8rem, 3vw, 2.5rem);
  touch-action: pan-y;
}
.viewer__stage img, .viewer__stage video {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  box-shadow: var(--shadow-soft);
}
.viewer__stage video { height: 100%; background: var(--ink); }
.viewer__nav { display: flex; justify-content: space-between; padding: 0.6rem var(--pad) 1.2rem; }
.viewer__btn {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--cream);
  font-size: 1rem;
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
@media (hover: hover) {
  .viewer__btn:hover { background: var(--acid); border-color: var(--ink); color: var(--ink); }
}

/* =========================================================
   CV — a printed resume on the blue desk (the site's one blue ground), the top sheet
   of a small stack, set small and tight: the portrait tucked under an acid-yellow
   binder clip on its top edge, the skills as coloured stickers, the full PDF one
   burgundy button below. Daylight comes from the top left: every shadow (paper, clip,
   print) falls down and to the right
   ========================================================= */
.sec--cv {
  overflow-x: clip;               /* the tilted sheet never widens the page */
  padding-top: clamp(3.2rem, 9vh, 6rem);
  /* a soft pool of light behind the sheet, like a photo of paper on a blue desk */
  background:
    radial-gradient(ellipse 58% 46% at 50% 56%, color-mix(in srgb, var(--electric) 85%, transparent), transparent 72%),
    var(--electric-ink);
}
/* no big section title here: just a note above the sheet, set like the hero's
   "welcome to my portfolio!!" */
.cv-hello {
  padding: 0 var(--pad);
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.35rem, 2.5vw, 2.4rem);
  line-height: 1.1;
  text-align: center;
  rotate: -2deg;
}
.sec--cv .sec__body { margin-top: clamp(3.1rem, 5vw, 3.4rem); }   /* room for the clip under the title */
@media (max-width: 640px) { .sec--cv .sec__body { margin-top: 4.1rem; } }   /* on a phone the clip sits right under the note */

/* the CV's type is set in em, so the sheet's font size scales all of it (a desktop
   screen sets it a little larger, below) */
.cv-sheet {
  --photo-w: clamp(6.4rem, 23cqw, 10.5rem);   /* cqw: a share of the sheet's own width */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9 0.4' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.2 0 0 0 0.1 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23p)'/%3E%3C/svg%3E");
  position: relative;
  container-type: inline-size;
  width: min(100%, 46rem);
  margin: 0 auto;
  rotate: -0.8deg;                /* its own property: the reveal transform leaves it alone */
}
/* the top sheet's lower corners lift a hair off the page below: two soft shadows
   tucked under them, the right one (the corner that curls, away from the light) a
   little darker */
.cv-sheet::before,
.cv-sheet::after {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: 0.8rem;
  width: 40%;
  height: 16%;
  box-shadow: 0.2rem 0.45rem 0.7rem rgba(10, 28, 96, 0.2);
}
.cv-sheet::before { left: 1.2rem; transform: skewY(-2deg) rotate(-2deg); }
.cv-sheet::after {
  right: 0.5rem;
  bottom: 0.6rem;
  width: 30%;
  height: 12%;
  transform: skewY(2.5deg) rotate(2.5deg);
  box-shadow: 0.35rem 0.5rem 0.6rem rgba(10, 28, 96, 0.4);
}

/* the pages under it: the same paper in the shade of the ones above (a neutral grey,
   deeper the lower the page), lit unevenly, fanned out so their edges show at the top
   and the sides — a lit top-left edge, a fine outline, a soft shade where each one goes
   under the next; the lowest carries the soft shadow of the whole stack on the desk */
.cv-sheet__under {
  --edge:
    inset 1px 1px 0 rgba(255, 255, 255, 0.65),
    0 0 0 0.5px rgba(60, 40, 30, 0.1),
    0 0 3px rgba(40, 30, 25, 0.1),
    1.5px 3px 7px -2px rgba(40, 30, 25, 0.22);
  position: absolute;
  z-index: -2;
  inset: 0;
  background-color: color-mix(in srgb, var(--cream) 94%, #b7b2a8);
  background-image:
    radial-gradient(120% 90% at 18% 10%, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0) 60%),
    linear-gradient(135deg, rgba(0, 0, 0, 0) 55%, rgba(50, 40, 30, 0.06)),
    var(--grain);
  box-shadow: var(--edge);
}
.cv-sheet__under:nth-child(1) {
  translate: -1.3rem -0.38rem;
  rotate: -1.8deg;
  background-color: color-mix(in srgb, var(--cream) 88%, #b7b2a8);
  box-shadow:
    var(--edge),
    0.5rem 1rem 1.8rem -0.3rem rgba(8, 22, 80, 0.42),
    1rem 2.2rem 3.6rem -1rem rgba(8, 22, 80, 0.38);
}
.cv-sheet__under:nth-child(2) {
  translate: 1.2rem -0.3rem;
  rotate: 1.4deg;
  background-color: color-mix(in srgb, var(--cream) 91%, #b7b2a8);
  box-shadow: var(--edge), 0.4rem 0.8rem 1.4rem -0.4rem rgba(8, 22, 80, 0.3);
}
.cv-sheet__under:nth-child(3) { translate: -0.4rem -0.45rem; rotate: -0.6deg; }

.cv-sheet__paper {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 8.5 / 11;         /* a letter page; taller only if the content needs it */
  padding: clamp(1.1rem, 5cqw, 2.4rem) clamp(1.1rem, 6cqw, 2.8rem) clamp(0.8rem, 2.2cqw, 1.1rem);
  color: var(--ink);
  /* matte cream with a faint grain, never quite flat: soft daylight from the top left, a
     slow wave across it, a little shade toward the far corner, and the bottom-right corner
     curling up a hair (its bent edge) and catching the light */
  border-bottom-right-radius: 1.6rem 0.35rem;
  background-color: var(--cream);
  background-image:
    radial-gradient(130% 100% at 15% 0%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0) 55%),
    linear-gradient(97deg, rgba(0, 0, 0, 0) 18%, rgba(90, 70, 40, 0.03) 34%, rgba(0, 0, 0, 0) 48%, rgba(255, 255, 255, 0.2) 62%, rgba(0, 0, 0, 0) 78%),
    linear-gradient(140deg, rgba(0, 0, 0, 0) 62%, rgba(50, 40, 30, 0.05)),
    radial-gradient(3.2rem 3.2rem at 100% 100%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0) 75%),
    var(--grain);
  /* it lies on the stack: a lit top-left edge, the edges falling off a touch, a fine
     outline, and a soft shade on the pages below, deeper down and to the right */
  box-shadow:
    inset 1px 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 0 1.4rem rgba(60, 45, 25, 0.045),
    0 0 0 0.5px rgba(60, 40, 30, 0.09),
    0 0 4px rgba(40, 30, 25, 0.12),
    0.5px 1px 1.5px rgba(40, 30, 25, 0.2),
    3px 6px 14px -4px rgba(40, 30, 25, 0.26);
}

/* header, like a printed resume: the name small at the foot of the photo, the photo
   held by the clip on the top edge (the contacts have their own section) */
.cv-sheet__id {
  display: flex;
  flex-direction: column;
  min-height: calc(var(--photo-w) * 1.1);
  padding-right: calc(var(--photo-w) + clamp(0.8rem, 3cqw, 1.5rem));
}
.cv-sheet__who { margin-top: auto; padding-top: 1.2rem; }
.cv-sheet__name {
  font-weight: 500;
  font-size: clamp(1.5em, 4.6cqw, 2.1em);
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.cv-sheet__role { margin-top: 0.25rem; font-size: 0.84em; color: var(--ink-2); }

/* sections: a hairline, a small grey label, the content — the page's spare height
   is shared by the gaps between them */
.cv-sheet__paper > .cv-sheet__sec,
.cv-sheet__cols { margin-top: auto; padding-top: clamp(1rem, 3cqw, 1.5rem); }
.cv-sheet__col > .cv-sheet__sec + .cv-sheet__sec { margin-top: 1.1rem; }
.cv-sheet__h {
  margin-bottom: 0.55rem;
  padding-top: 0.35rem;
  border-top: 1px solid var(--line-strong);
  font-size: 0.7em;
  font-weight: 500;
  color: var(--ink-3);
}

.cv-entry + .cv-entry { margin-top: 0.85rem; }
.cv-entry__meta,
.cv-entry__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1rem; }
.cv-entry__meta { font-size: 0.68em; color: var(--ink-3); }
.cv-entry__role { font-size: 0.9em; font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; }
.cv-entry__org { font-size: 0.8em; font-weight: 500; }
.cv-entry__note { font-size: 0.72em; line-height: 1.4; color: var(--ink-3); }
.cv-entry__points { list-style: none; margin-top: 0.35rem; }
.cv-entry__points li { position: relative; padding-left: 0.9rem; font-size: 0.78em; line-height: 1.5; color: var(--ink-2); }
.cv-entry__points li::before { content: "–"; position: absolute; left: 0; color: var(--orange); }   /* orange, like every list dash */
.cv-entry__points b { font-weight: 700; color: var(--ink); }   /* the figures: bold, nothing louder */
.cv-entry--edu .cv-entry__role { font-size: 0.82em; }

/* education + languages | skills */
.cv-sheet__cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0 clamp(1.2rem, 4cqw, 2rem);
  padding-bottom: clamp(1rem, 3cqw, 1.4rem);
}
.cv-langs { list-style: none; display: flex; flex-wrap: wrap; gap: 0.1rem 0.85rem; font-size: 0.78em; }
.cv-langs span { font-size: calc(0.66em / 0.78); color: var(--ink-3); }   /* 0.66 of the paper's size */

/* skills: coloured stickers that are never quite still — each sways a couple of
   degrees and floats a hair, out of step with the others (--i comes from js/cv.js);
   under the pointer one straightens and lifts. Tools: small white pills */
.cv-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 0.28rem; }
.cv-badge {
  padding: 0.38em 0.72em;
  border-radius: var(--r-xs);
  font-size: 0.68em;
  box-shadow: 0 1px 0 rgba(47, 18, 21, 0.08), 0 6px 10px -7px rgba(47, 18, 21, 0.45);
  animation: cvSway 3.4s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * -0.7s);
  transition: transform var(--dur) var(--ease);
}
.cv-badge:nth-child(3n + 2) { animation-duration: 4.1s; }
.cv-badge:nth-child(3n) { animation-duration: 2.9s; animation-direction: reverse; }
@media (hover: hover) {
  .cv-badge:hover { transform: translateY(-2px) scale(1.05); }   /* the tilt lets go */
}
@keyframes cvSway {
  0%, 100% { rotate: -2deg; translate: 0 0; }
  50% { rotate: 2deg; translate: 0 -2px; }
}
@media (prefers-reduced-motion: reduce) {
  .cv-badge { animation: none; }
}
.cv-badge.sticker--white { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--electric-ink) 30%, transparent), 0 1px 0 rgba(47, 18, 21, 0.06), 0 6px 10px -7px rgba(47, 18, 21, 0.35); }
.cv-sheet__label { margin: 0.8rem 0 0.4rem; font-size: 0.66em; color: var(--ink-3); }
.cv-badges--tools { gap: 0.28rem 0.24rem; }
.cv-tool {
  padding: 0.22em 0.62em;
  border-radius: var(--r-pill);
  background: var(--print);
  box-shadow: inset 0 0 0 1px var(--line-strong);
  font-size: 0.64em;
  font-weight: 500;
  white-space: nowrap;
  color: var(--ink-2);
}

/* the portrait: a small print tucked under the clip by the sheet's top edge, lying flat
   on the paper a little crooked (a thin shadow along its bottom and right edges);
   it swings a little on hover */
.cv-photo {
  position: absolute;
  z-index: 2;
  top: 0.3rem;
  right: clamp(1rem, 6cqw, 2.8rem);
  width: var(--photo-w);
  rotate: 1.5deg;
  transform-origin: 58% 0;        /* hangs from the clip */
  transition: rotate 0.8s var(--ease);
}
@media (hover: hover) {
  .cv-photo:hover { rotate: 0.3deg; }
}
.cv-photo__print {
  margin: 0;
  padding: 5%;                    /* the same white border all round */
  background: var(--print);
  box-shadow: 0.5px 1px 1px rgba(40, 24, 18, 0.28), 2px 3.5px 5px -1px rgba(40, 24, 18, 0.32);
}
.cv-photo__print img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; }
/* Martina's binder clip (assets/binder-clip.webp, relit in acid yellow from redpin.jpg):
   it grips the sheet's top edge — the fold just above it, the jaws over the top of the
   print, the wire standing up — lit like the paper: a soft highlight on its upper left
   (masked to its shape by --clip, js/cv.js), a short shadow down and to the right */
.cv-clip {
  position: absolute;
  z-index: 1;
  top: 0;
  left: 58%;
  width: 56%;
  translate: -50% -60%;
  rotate: -3deg;
  filter: drop-shadow(1px 2px 1.5px rgba(35, 20, 10, 0.4)) drop-shadow(3px 6px 5px rgba(10, 28, 96, 0.26));
  pointer-events: none;
}
.cv-clip img { display: block; width: 100%; height: auto; }
.cv-clip::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(30% 15% at 28% 60%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)),
    radial-gradient(18% 10% at 30% 8%, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  -webkit-mask: var(--clip) center / 100% 100% no-repeat;
  mask: var(--clip) center / 100% 100% no-repeat;
  mix-blend-mode: screen;
}

/* "Download full CV" — a burgundy pill on the blue desk, set like "Check out more" */
.cv-cta__wrap { display: flex; justify-content: center; margin-top: clamp(3rem, 7vw, 5rem); }
.cv-cta { background: var(--burgundy); color: var(--cream); }
@media (hover: hover) {
  .cv-cta:hover { background: var(--acid); border-color: var(--acid); color: var(--burgundy); }
  .cv-cta:hover .btn__ic { transform: translateY(3px); }   /* a download arrow drops */
}
.cv-cta:active { background: var(--burgundy-deep); border-color: var(--burgundy-deep); color: var(--cream); }
.cv-todo { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; margin-top: var(--s-5); }

/* on a desktop the whole CV fits one screen (js/cv.js scales the sheet down on a short
   one): the note sits just under the bar when the bar shows (over this blue the bar has
   no rule, see NAV), with room between it and the stack; the sheet turns landscape —
   wider, only as tall as its content, its type a little larger, the photo bigger and
   further in, education | languages | skills side by side, the languages a small table */
@media (min-width: 901px) {
  .sec--cv { padding-top: calc(var(--nav-h, 4.7rem) - 0.25rem); }
  .sec--cv .sec__body { margin-top: clamp(2rem, 4.2vh, 3rem); }   /* the clip rises beside the note */
  .cv-sheet { --photo-w: 7.5rem; width: min(100%, 58em); font-size: 1.06rem; }   /* wider with its type: the lines break as before */
  .cv-sheet__paper { aspect-ratio: auto; padding-top: 1rem; padding-bottom: 1.1rem; }
  /* the print comes in from the edge, nearer the name, and runs a little past the header
     (the name's column stops short of it) */
  .cv-photo { right: 21%; }
  .cv-sheet__id { min-height: calc(var(--photo-w) * 0.92); padding-right: calc(21% + var(--photo-w)); }
  .cv-sheet__paper > .cv-sheet__sec,
  .cv-sheet__cols { padding-top: 0.85rem; }
  .cv-sheet__name { font-size: 1.85em; }
  .cv-sheet__h { margin-bottom: 0.45rem; }
  .cv-entry + .cv-entry { margin-top: 0.7rem; }
  .cv-entry__points li { line-height: 1.45; }
  .cv-sheet__cols {
    grid-template-columns: minmax(0, 17.5em) minmax(0, 6.5em) minmax(0, 1fr);
    column-gap: 1.6rem;
    padding-bottom: 0.85rem;
  }
  .cv-sheet__col { display: contents; }   /* its sections become the grid's columns */
  .cv-sheet__col > .cv-sheet__sec + .cv-sheet__sec { margin-top: 0; }
  .cv-langs { flex-direction: column; gap: 0.1rem; }
  .cv-langs li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
  .cv-sheet__label { margin: 0.6rem 0 0.35rem; }
}

/* a narrow sheet (phones): one column, the page as tall as its content, and a tighter
   fan (turned, a page this tall swings far out at its ends) */
@container (max-width: 34rem) {
  .cv-sheet__paper { aspect-ratio: auto; }
  .cv-sheet__under:nth-child(1) { translate: -0.35rem -0.3rem; rotate: -0.8deg; }
  .cv-sheet__under:nth-child(2) { translate: 0.35rem -0.25rem; rotate: 0.7deg; }
  .cv-sheet__under:nth-child(3) { translate: -0.15rem -0.3rem; rotate: -0.35deg; }
  .cv-sheet__cols { grid-template-columns: minmax(0, 1fr); }
  .cv-sheet__col + .cv-sheet__col { margin-top: 1.1rem; }
  .cv-entry__points li,
  .cv-langs { font-size: 0.8em; }
  .cv-langs span { font-size: calc(0.66em / 0.8); }
}

/* =========================================================
   CONTACT
   ========================================================= */
.contact {
  position: relative;
  background: var(--burgundy);
  color: var(--cream);
  padding: clamp(5rem, 14vh, 10rem) var(--pad) 0;
  overflow: hidden;
}
.contact .eyebrow { opacity: 1; color: var(--cream-65); }
.contact__inner {
  position: relative;
  max-width: var(--maxw);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
/* lowercase like the hero's name: heavy, tight Inter (Bebas has no lowercase) */
.contact__title {
  font-family: var(--font-text);
  font-weight: 700;
  font-size: clamp(3rem, 11vw, 10.5rem);
  line-height: 0.92;
  letter-spacing: -0.065em;
  margin: 1rem 0 1.5rem;
  color: var(--electric);
}
.contact__mail {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 4rem);
  text-transform: none;
  letter-spacing: 0.01em;
  position: relative;
  display: inline-block;
  transition: color var(--dur-fast);
}
.contact__mail::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0.08em;
  width: 100%; height: 2px;
  background: var(--acid);
  transform: scaleX(1);
  transform-origin: right;
  transition: transform 0.5s var(--ease);
}
@media (hover: hover) {
  .contact__mail:hover::after { transform: scaleX(0); transform-origin: left; }
  .contact__mail:hover,
  .contact__link:hover,
  .foot__top:hover { color: var(--acid); }
}

.contact__row {
  display: flex;
  gap: 2.5rem;
  margin-top: 2.5rem;
  font-size: 0.86rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  flex-wrap: wrap;
  justify-content: center;
}
.contact__link { transition: color var(--dur-fast); }
.contact__link span { display: inline-block; transition: transform 0.4s var(--ease); }
@media (hover: hover) {
  .contact__link:hover span { transform: translate(3px, -3px); }
}
.contact__loc { color: var(--cream-65); }

.foot {
  position: relative;
  max-width: var(--maxw);
  margin: clamp(4rem, 10vh, 7rem) auto 0;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line-light);
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cream-65);
  flex-wrap: wrap;
}
@media (hover: hover) {
  .foot__top:hover { opacity: 1; text-decoration: underline; }
}

/* =========================================================
   UX LAYER — progress, grain, cursor, focus
   ========================================================= */

/* scroll progress: a thin orange line over every page */
.progress {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  z-index: 300;
  pointer-events: none;
}

/* film grain — subtle, static */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 900;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* cursor: a cream arrow with a burgundy edge, drawn like the system one; links, buttons
   and the zoomable tiles keep the system hand and magnifier */
body {
  cursor: url("assets/cursor-arrow-cream.png") 5 3, auto;
  cursor: -webkit-image-set(url("assets/cursor-arrow-cream.png") 1x, url("assets/cursor-arrow-cream-2x.png") 2x) 5 3, auto;
  cursor: image-set(url("assets/cursor-arrow-cream.png") 1x, url("assets/cursor-arrow-cream-2x.png") 2x) 5 3, auto;
}
/* over the hero of the home page the drawn flower takes its place (script.js) */
.has-cursor, .has-cursor a, .has-cursor button { cursor: none; }

/* the drawn flower: sits on the pointer, tilts as you move, sways a little while you rest */
.cursor-flower {
  position: fixed;
  left: 0;
  top: 0;
  width: 88px;
  height: 88px;
  margin: -44px 0 0 -44px;
  z-index: 9999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.cursor-flower.is-on { opacity: 1; }
.cursor-flower__in {
  position: absolute;
  inset: 0;
  transition: transform 0.35s var(--ease);
}
.cursor-flower__in.is-hot { transform: scale(1.35); }
.cursor-flower img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* a whisper of shadow, so the flower stays readable on top of photos */
  filter: drop-shadow(0 1px 3px rgba(35, 10, 13, 0.5));
}

/* skip link + focus visibility */
.skip {
  position: fixed;
  top: 12px; left: 12px;
  z-index: 10000;
  background: var(--cream);
  color: var(--burgundy);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.7em 1.3em;
  border-radius: 100px;
  transform: translateY(-250%);
  transition: transform 0.3s var(--ease);
}
.skip:focus { transform: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 2px; }
/* pills and dots stay round while focused */
.btn:focus-visible, .tab:focus-visible, .hero__scroll:focus-visible { border-radius: var(--r-pill); }
.viewer__btn:focus-visible, .events__rail a:focus-visible { border-radius: 50%; }
.has-cursor :focus:not(:focus-visible) { outline: none; }

/* =========================================================
   REVEAL ANIMATION
   ========================================================= */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }

  /* scrolling back up, the bar comes in over photos and text: on small screens it carries a
     veil of the ground it is on (frosted like the case tabs), so the name and the menu button
     never sit on a picture. Over its own ground it doesn't show */
  .nav {
    background: color-mix(in srgb, var(--nav-ground) 92%, transparent);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }
}

@media (max-width: 1100px) {
}

@media (max-width: 900px) {
  .c-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case__head { grid-template-columns: 1fr; align-items: start; }
  .case__overview { grid-template-columns: 1fr; }
  .quotes { position: static; }

  /* collabs: images on top, lockup and text below */
  .collab__link { grid-template-columns: 1fr; gap: var(--s-5); }
  .collab:nth-child(even) .collab__pair { order: 0; }

  /* events: video on top, text below — still one slide at a time */
  .events__wrap { grid-template-columns: 1fr; }
  .events__rail { display: none; }
  .event {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--s-5);
    min-height: auto;
    padding: clamp(2.5rem, 7vh, 4rem) 0;
  }
  .event__media video { height: min(58svh, 460px); }
}

@media (max-width: 640px) {
  /* CV sheet: straighter on a phone */
  .cv-sheet { rotate: -0.4deg; }

  .c-grid { gap: 1.4rem 0.8rem; }
  .files { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery { columns: 2 140px; }
  .pager { grid-template-columns: 1fr 1fr; }
  .pager__all { grid-column: 1 / -1; grid-row: 2; text-align: center; }
  .viewer__path { display: none; }
}

@media (max-width: 520px) {
  .hero__meta { flex-wrap: wrap; }
  .hero__foot { gap: 1.4rem; }
  .foot { justify-content: flex-start; gap: 0.4rem 1.5rem; }
  .sec-head__bar { gap: 0.9rem; }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  .trail { display: none; }
  .hero__hello, .hero__name, .hero__welcome, .hero__sticker { animation: none; }
}