/* =============================================================================
   Gianluca Ragno — Portfolio
   -----------------------------------------------------------------------------
   Structure:
     1. Tokens
     2. Reset & base
     3. Typography primitives
     4. Reveal states (JS-gated, reduced-motion safe)
     5. Components  (buttons, tags, marquee, progress, header, footer)
     6. Sections    (hero, about, skills, work index, chapters, contact)
     7. Responsive  (mobile-first; breakpoints at 600 / 900 / 1200px)
   All colours live in section 1. Nothing else hard-codes a hex value.
============================================================================= */

/* 1. TOKENS ---------------------------------------------------------------- */
:root {
  /* personal palette — near-black + mustard gold */
  --ink:        #08080a;
  --ink-800:    #0f0f12;
  --ink-700:    #17171c;
  --paper:      #f4f4f0;
  --mute:       rgba(244, 244, 240, .68);
  --faint:      rgba(244, 244, 240, .60);
  --line:       rgba(244, 244, 240, .14);
  --gold:       #deb841;
  --gold-hi:    #f2d385;

  /* per-chapter accents are re-declared on each .chapter--* below */
  --accent:     var(--gold);
  --bg:         var(--ink);
  --fg:         var(--paper);

  /* rhythm */
  --gutter:     clamp(20px, 5.5vw, 88px);

  /* soft "iPhone" corners for photos and cards (scale with the element's size) */
  --r-img:      clamp(24px, 3.4vw, 44px);
  --r-card:     clamp(18px, 2vw, 26px);
  /* Vertical rhythm: min(vw, vh) so a wide-but-short window (laptop, Safari with toolbars) does not
     get 180px of empty band above and below every section. Phones are unchanged (72px floor). */
  --block:      clamp(72px, min(12vw, 13vh), 150px);
  --stack:      clamp(40px, min(6vw, 6vh), 64px);   /* gap between the parts of a chapter */
  --maxw:       1240px;                 /* content width — header, sections and chapters all align to it */
  --media:      480px;                  /* width of the picture column in every chapter */
  --col-gap:    clamp(48px, 5.5vw, 88px);/* gap between the two columns: close enough to read as one unit */
  --edge:       max(var(--gutter), calc((100vw - var(--maxw)) / 2));   /* left/right edge of the content */
  --measure:    62ch;

  /* type */
  --display:    'Oswald', 'Arial Narrow', system-ui, sans-serif;
  --body:       'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;

  /* motion */
  --t-fast:     180ms;
  --t-base:     280ms;
  --ease:       cubic-bezier(.22, .61, .36, 1);
}

/* 2. RESET & BASE ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
/* Lenis drives the scroll; native smooth would fight it. */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--body);
  font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
  font-weight: 300;
  line-height: 1.55;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, picture, svg { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3, p { margin: 0; }
sup { font-size: .36em; vertical-align: baseline; position: relative; top: -1.05em; line-height: 0; }

:focus-visible {
  outline: 2px solid var(--gold-hi);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Sections/chapters receive focus from script.js when you follow an anchor link (so the
   keyboard continues from where the page scrolled to). They are not controls — a ring
   drawn around a whole section is just noise. Links and buttons keep theirs. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible { outline: none; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* set by the menu while it is open (also locks scroll when Lenis is not running) */
html.menu-open { overflow: hidden; }

.skip-link {
  position: fixed;
  top: 0; left: 50%;
  translate: -50% -110%;
  z-index: 200;
  padding: 14px 22px;
  min-height: 44px;
  display: grid; place-items: center;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: translate var(--t-base) var(--ease);
}
.skip-link:focus-visible { translate: -50% 0; }

/* 3. TYPOGRAPHY PRIMITIVES ------------------------------------------------- */
.section-label {
  font-family: var(--display);
  font-size: clamp(.72rem, .68rem + .2vw, .82rem);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent);
  display: flex;
  align-items: center;
  gap: .9em;
}
.section-label span {
  font-variant-numeric: tabular-nums;
  color: var(--faint);
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* split-reveal wrappers written by script.js */
/* The mask must be taller than the line box or it slices descenders (g, y, p, comma).
   Padding gives the glyphs room; the matching negative margin keeps the layout unchanged. */
.line  { display: block; overflow: hidden; padding-block: .06em .2em; margin-block: -.06em -.2em; }
.line > span,
.char  { display: inline-block; will-change: transform; }
.word  { display: inline-block; white-space: nowrap; }

/* visually hidden, still read by screen readers */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 4. REVEAL STATES --------------------------------------------------------- */
/* Only hidden when JS is present AND motion is welcome — never hide content
   from a no-JS visitor or from someone who asked for reduced motion. */
.js [data-reveal],
.js [data-stagger] > *,
.js [data-hero-role],
.js [data-hero-meta],
.js [data-hero-cue] { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal],
  .js [data-stagger] > *,
  .js [data-hero-role],
  .js [data-hero-meta],
  .js [data-hero-cue] { opacity: 1; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* 5. COMPONENTS ------------------------------------------------------------ */

/* 5.1 progress bar */
.progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 2px;
  z-index: 120;
  background: rgba(244, 244, 240, .08);
  pointer-events: none;
}
.progress__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

/* 5.2 buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 48px;
  padding: 0 1.4em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--display);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              border-color var(--t-base) var(--ease);
}
.btn svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.btn--ghost { color: var(--paper); border-color: var(--line); }
.btn--ghost:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--gold { color: var(--gold); border-color: var(--gold); }
.btn--gold:hover { background: var(--gold); color: var(--ink); }
/* primary action: filled */
.btn--solid { background: var(--gold); color: var(--ink); border-color: var(--gold); font-weight: 600; }
.btn--solid:hover { background: var(--gold-hi); border-color: var(--gold-hi); }
.btn svg { transition: translate var(--t-base) var(--ease); }
.btn:hover svg { translate: 3px 0; }

/* 5.3 tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.tags li {
  padding: 7px 14px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--display);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mute);
}

/* 5.3b external link: "who it is for → their Instagram", the same pill language as the tags */
.ext-link {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  width: fit-content;
  min-height: 44px;
  padding: 0 1.1em;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--display);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color var(--t-base) var(--ease), border-color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.ext-link b { font-weight: 500; letter-spacing: .06em; text-transform: none; font-size: .86rem; color: var(--fg); }
.ext-link svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--t-base) var(--ease); }
.ext-link:hover { color: var(--accent); border-color: var(--accent); }
.ext-link:hover svg { translate: 2px -2px; }

/* 5.4 marquee */
.marquee {
  display: flex;
  width: max-content;
  font-family: var(--display);
  font-weight: 700;
  font-size: var(--marq);
  line-height: 1;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--line);
  -webkit-text-stroke: 1px color-mix(in srgb, var(--fg, #fff) 26%, transparent);   /* the chapter's own colour */
  white-space: nowrap;
  user-select: none;
}
.marquee span { padding-right: .4em; }

/* 5.5 header */
.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: clamp(12px, 3vw, 40px);
  padding: 14px var(--edge);
  padding-top: calc(14px + env(safe-area-inset-top, 0px));
  /* No backdrop-filter here on purpose: a blurred fixed header forces the browser to
     re-sample everything scrolling underneath it on every single frame, for the whole
     site — one of the most common causes of scroll jank. The gradient alone gives the
     nav text enough contrast without that constant cost. */
  background: linear-gradient(to bottom, rgba(8, 8, 10, .82), rgba(8, 8, 10, 0));
  transition: translate 420ms var(--ease), background var(--t-base) var(--ease);
}
.site-head[data-hidden="true"] { translate: 0 -105%; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  min-height: 44px;
  flex: 1;
}
.brand__mark { width: 26px; height: 26px; color: var(--gold); fill: currentColor; }
.brand__text {
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 300;
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand__text b { font-weight: 600; }

/* header CV pill only from 600px up — on a phone the icon menu + the CV buttons in
   About / Contact / the menu itself cover it, and the brand needs the room */
.site-head__cv { display: none; }

.menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  padding: 0;
  background: none;
  border: 0;
  color: var(--paper);
  cursor: pointer;
}
.menu-btn__bars { position: relative; width: 24px; height: 10px; }
.menu-btn__bars i {
  position: absolute;
  left: 0; right: 0;
  height: 1.5px;
  background: currentColor;
  transition: top var(--t-base) var(--ease), transform var(--t-base) var(--ease);
}
.menu-btn__bars i:first-child { top: 0; }
.menu-btn__bars i:last-child  { top: 8.5px; }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:first-child { top: 4.25px; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] .menu-btn__bars i:last-child  { top: 4.25px; transform: rotate(-45deg); }

.site-nav { display: none; }
.site-nav ul { display: flex; gap: clamp(16px, 2.4vw, 34px); }
.site-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding-inline: 4px;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--mute);
  position: relative;
  transition: color var(--t-base) var(--ease);
}
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0; right: 100%; bottom: 10px;
  height: 1px;
  background: var(--gold);
  transition: right var(--t-base) var(--ease);
}
.site-nav a:hover,
.site-nav a[aria-current="true"] { color: var(--paper); }
.site-nav a:hover::after,
.site-nav a[aria-current="true"]::after { right: 0; }

/* 5.5c quick rail — fixed section dots on the right (js 3e) */
.rail { display: none; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) and (min-height: 560px) {
  .rail {
    display: block;
    position: fixed;
    top: 50%;
    right: clamp(8px, 1.6vw, 26px);
    z-index: 80;
    opacity: 0;
    visibility: hidden;
    translate: 14px -50%;
    transition: opacity var(--t-base) var(--ease), translate 420ms var(--ease), visibility 0s linear 420ms;
  }
  .rail[data-visible="true"] {
    opacity: 1;
    visibility: visible;
    translate: 0 -50%;
    transition-delay: 0s;
  }
}
.rail__list { position: relative; display: grid; }
/* the hairline the dots sit on */
.rail__list::before {
  content: "";
  position: absolute;
  top: 22px; bottom: 22px; right: 21.5px;
  width: 1px;
  background: rgba(244, 244, 240, .16);
}
/* soft panel that opens behind the labels while the rail is hovered / focused */
.rail__list::after {
  content: "";
  position: absolute;
  top: -8px; bottom: -8px; right: -6px;
  width: 56px;
  border-radius: 28px;
  background: rgba(8, 8, 10, .0);
  backdrop-filter: blur(0);
  transition: width 320ms var(--ease), background var(--t-base) var(--ease), backdrop-filter var(--t-base) var(--ease);
  pointer-events: none;
  z-index: -1;
}
.rail:hover .rail__list::after,
.rail:focus-within .rail__list::after {
  width: 232px;
  background: rgba(8, 8, 10, .82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.rail__link {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  margin-left: auto;
  border-radius: 50%;
}
.rail__dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: rgba(244, 244, 240, .42);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
  transition: background var(--t-base) var(--ease), scale var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.rail__link--sub .rail__dot { width: 5px; height: 5px; }
.rail__link:hover .rail__dot { background: var(--paper); scale: 1.5; }
.rail__link[aria-current="location"] .rail__dot {
  background: var(--gold);
  scale: 1.6;
  box-shadow: 0 0 0 4px rgba(222, 184, 65, .2);
}

.rail__label {
  position: absolute;
  right: 48px;
  display: flex;
  align-items: baseline;
  gap: .7em;
  white-space: nowrap;
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--paper);
  opacity: 0;
  translate: 10px 0;
  pointer-events: none;
  transition: opacity var(--t-base) var(--ease), translate var(--t-base) var(--ease), color var(--t-fast) var(--ease);
}
.rail__label i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--faint); }
.rail__link--sub .rail__label { font-weight: 400; letter-spacing: .16em; color: var(--mute); }
.rail:hover .rail__label,
.rail:focus-within .rail__label { opacity: 1; translate: 0 0; }
.rail__link:hover .rail__label,
.rail__link[aria-current="location"] .rail__label { color: var(--gold); }
.rail__link:focus-visible { outline-offset: -2px; }

/* 5.5b full-screen menu (<900px) — opened by .menu-btn, see js 3b */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;               /* under the header (100) so its button stays reachable as "close" */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 32px;
  padding: calc(96px + env(safe-area-inset-top, 0px)) var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px));
  background: var(--ink);
  overflow-y: auto;
}
[hidden] { display: none !important; }
.menu[hidden] { display: none; }
.menu__nav a {
  display: grid;
  grid-template-columns: 3ch 1fr;
  align-items: baseline;
  gap: 0 .5em;
  min-height: 44px;
  padding: clamp(10px, 2.4vh, 18px) 0;
  border-top: 1px solid var(--line);
  font-family: var(--display);
  font-size: clamp(2.4rem, 13vw, 4.6rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  transition: color var(--t-base) var(--ease);
}
.menu__nav li:last-child a { border-bottom: 1px solid var(--line); }
.menu__nav i {
  font-style: normal;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--gold);
}
.menu__nav a:hover { color: var(--gold); }
.menu__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 28px;
  font-family: var(--display);
  font-size: .8rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mute);
}
.menu__foot a { display: inline-flex; align-items: center; min-height: 44px; }
.menu__foot a:hover { color: var(--gold); }

/* 5.6 footer */
.site-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding: 56px var(--gutter) calc(48px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--line);
  text-align: center;
  font-size: .9rem;
  color: var(--faint);
}
.site-foot__mark { width: 30px; height: 30px; color: var(--gold); fill: currentColor; }
.site-foot__top {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-family: var(--display);
  letter-spacing: .18em;
  text-transform: uppercase;
  font-size: .76rem;
  color: var(--mute);
}
.site-foot__top:hover { color: var(--gold); }

/* 6. SECTIONS -------------------------------------------------------------- */
.section {
  position: relative;
  padding: var(--block) var(--gutter);
  max-width: calc(var(--maxw) + 2 * var(--gutter));   /* content = --maxw, same as the chapters */
  margin-inline: auto;
}

/* 6.1 HERO ----------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding: calc(96px + env(safe-area-inset-top, 0px)) var(--gutter) 116px;
  overflow: hidden;
  isolation: isolate;
}
.hero__bg { position: absolute; inset: -8% 0; z-index: -2; }
/* <picture> is inline by default and would collapse, leaving object-fit nothing to fill */
.hero__bg picture,
.chapter__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.52) contrast(1.15) saturate(.2); }
.hero__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(8, 8, 10, .1) 0%, rgba(8, 8, 10, .78) 72%, var(--ink) 100%),
    linear-gradient(to bottom, rgba(8, 8, 10, .55), transparent 28%, rgba(8, 8, 10, .9));
}

.hero__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}

.lockup {
  display: grid;
  justify-items: center;
  gap: clamp(20px, 4vw, 44px);
}

.lockup__mark {
  position: relative;
  width: clamp(190px, 46vw, 340px);
  aspect-ratio: 459.35 / 456.54;
  flex: none;
}
.lockup__ring {
  width: 100%; height: 100%;
  color: var(--gold);
  fill: currentColor;
  filter: drop-shadow(0 18px 50px rgba(0, 0, 0, .55));
}
/* Text column: name, role and location stack in ONE column so they share a left edge
   (desktop) or a centre line (mobile), with the vertical rhythm set here — not by
   margins scattered on each line. */
.lockup__text {
  display: grid;
  justify-items: center;
  gap: clamp(26px, 3.4vw, 44px);
}

/* "GIANLUCA" is ~4em wide in Oswald 700; the sizes below keep it on one line at every
   width, and RAGNO at ~.56 of it, as in the deck. */
.lockup__name {
  display: grid;
  justify-items: center;
  position: relative;
  font-family: var(--display);
  text-transform: uppercase;
  line-height: .84;
  --role-mt: clamp(20px, 2.2vw, 38px);
  --role-fs: clamp(.72rem, .6rem + .8vw, 1.05rem);
  /* .lockup__role is taken out of flow (see below) and pinned absolutely, so its own box no
     longer reserves space; this margin puts that space back so .lockup__text's gap to
     .hero__meta lands exactly where it did when role was still an in-flow grid row. It must be
     a margin, not padding: role's `top: 100%` resolves against .lockup__name's padding box, so
     padding here would push role down by its own amount on top of the margin-top offset below. */
  margin-bottom: calc(var(--role-mt) + var(--role-fs) * 1.2);
}
.lockup__first {
  font-size: clamp(1.9rem, 9.4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}
.lockup__last {
  margin-top: .1em;
  font-size: clamp(3.2rem, 17vw, 6.2rem);
  font-weight: 700;
  letter-spacing: -.012em;
  white-space: nowrap;
}
.lockup__role {
  /* Absolutely positioned (see .lockup__name) so its own nowrap box — which swings from a
     ~1.2em starting letter-spacing down to its final value as the intro animates (js
     heroIntro) — never contributes to .lockup__name's grid sizing. In flow, that transient
     width was briefly the widest item in the name block and dragged RAGNO/GIANLUCA sideways
     as it shrank back down; out of flow, it can resize freely without touching them.
     left + translate centres it under the name on mobile; desktop pins it to the left edge. */
  position: absolute;
  top: 100%;
  left: 50%;
  translate: -50% 0;
  margin-top: var(--role-mt);
  font-size: var(--role-fs);
  font-weight: 400;
  letter-spacing: .44em;
  text-indent: .44em;        /* offsets the trailing letter-space so it centres truly (mobile) */
  line-height: 1.2;
  color: var(--gold);
  white-space: nowrap;
}

.hero__meta {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: .9em;
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 300;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--mute);
}

.scroll-cue {
  position: absolute;
  left: 50%; translate: -50% 0;
  bottom: calc(26px + env(safe-area-inset-bottom, 0px));
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  min-width: 44px;
  justify-content: center;
  font-family: var(--display);
  font-size: .66rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--faint);
}
.scroll-cue svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.scroll-cue:hover { color: var(--gold); }

/* 6.2 ABOUT ---------------------------------------------------------------- */
.about { display: grid; gap: clamp(36px, 6vw, 72px); }
.about__grid { display: grid; gap: clamp(40px, 7vw, 80px); }

.about__lead {
  font-family: var(--display);
  font-size: clamp(2.1rem, 8.4vw, 4.6rem);
  font-weight: 600;
  line-height: .96;
  letter-spacing: -.015em;
  text-transform: none;
}

.about__quote {
  margin-top: clamp(26px, 4vw, 44px);
  padding-left: clamp(16px, 2.4vw, 28px);
  border-left: 2px solid var(--gold);
  max-width: var(--measure);
}
.about__quote p {
  font-size: clamp(1.15rem, 1rem + 1.1vw, 1.9rem);
  font-weight: 300;
  line-height: 1.42;
  color: var(--paper);
  text-wrap: pretty;
}
.about__quote cite {
  display: block;
  margin-top: 1.2em;
  font-family: var(--display);
  font-style: normal;
  font-size: .76rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}
.about__copy .btn { margin-top: clamp(28px, 4vw, 44px); }

.about__figure {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-img);
  aspect-ratio: 1;
}
.about__figure img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.06);
  transition: filter 600ms var(--ease), scale 900ms var(--ease);
}
.about__figure:hover img { filter: grayscale(0) contrast(1); scale: 1.03; }

/* 6.3 SKILLS --------------------------------------------------------------- */
.skills { isolation: isolate; display: grid; gap: clamp(40px, 6vw, 76px); }
/* Backgrounds run edge to edge: .section is capped at --maxw and centred, so a plain
   inset:0 stopped at the column and left hard vertical seams on wide screens. */
.skills__bg { position: absolute; inset: 0 calc(50% - 50vw); z-index: -1; overflow: hidden; }
.skills__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--ink), rgba(8, 8, 10, .86) 40%, var(--ink));
}
.skills__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(.4) saturate(0);
}

.skills__grid { display: grid; gap: clamp(44px, 6vw, 64px); }

/* One horizontal line per column ("HARD SKILLS"), first word in gold. Same size and line
   height everywhere, so the three titles — and the lists under them — start together. */
.skillset__title {
  font-family: var(--display);
  font-size: clamp(2.2rem, 9vw, 4.2rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  white-space: nowrap;
  margin-bottom: clamp(20px, 3vw, 32px);
}
.skillset__rail { color: var(--gold); }

.skillset__list {
  display: grid;
  gap: 2px;
  border-top: 1px solid var(--line);
}
.skillset__list li {
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: clamp(1rem, .9rem + .5vw, 1.32rem);
  font-weight: 300;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mute);
  transition: color var(--t-base) var(--ease), padding-left var(--t-base) var(--ease);
}
.skillset__list li:hover { color: var(--gold); padding-left: 10px; }

/* Soft skills: the longest list. From 600px it flows into two columns (top to bottom, then across); the top rules
   are painted per column so they stop at the gutter instead of running through it. */
@media (min-width: 600px) {
  .skillset__list--cols {
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--rows, 7), auto);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    border-top: 0;
    background:
      linear-gradient(var(--line), var(--line)) left top / calc(50% - 16px) 1px no-repeat,
      linear-gradient(var(--line), var(--line)) right top / calc(50% - 16px) 1px no-repeat;
  }
}

/* 6.4 WORK INDEX ----------------------------------------------------------- */
.work-index {
  position: relative;
  padding: 0 var(--gutter);
  background: var(--ink);
}
.work-index__sticky {
  max-width: var(--maxw);
  margin-inline: auto;
  padding-block: var(--block);
  display: grid;
  gap: clamp(30px, 5vw, 56px);
}
.work-index__list { display: grid; }
.work-index__list a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "num title go" ".  sub go";
  align-items: baseline;
  column-gap: clamp(14px, 2.4vw, 30px);
  padding: clamp(18px, 2.6vw, 30px) 0;
  border-top: 1px solid var(--line);
  transition: color var(--t-base) var(--ease);
}
.work-index__list li:last-child a { border-bottom: 1px solid var(--line); }
.work-index__list i {
  grid-area: num;
  font-family: var(--display);
  font-style: normal;
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .1em;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.work-index__list span {
  grid-area: title;
  font-family: var(--display);
  font-size: clamp(1.9rem, 8vw, 4.4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  transition: translate var(--t-base) var(--ease), color var(--t-base) var(--ease);
}
.work-index__list em {
  grid-area: sub;
  margin-top: .5em;
  font-style: normal;
  font-family: var(--display);
  font-size: .74rem;
  font-weight: 300;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--faint);
}
.work-index__list a:hover span,
.work-index__list a:focus-visible span { color: var(--gold); translate: 12px 0; }

/* arrow that slides in on hover — decorative, empty alt text after the slash */
.work-index__list a::after {
  content: "↗" / "";
  grid-area: go;
  align-self: center;
  font-family: var(--display);
  font-size: clamp(1.6rem, 4vw, 3rem);
  line-height: 1;
  color: var(--gold);
  opacity: 0;
  translate: -12px 0;
  transition: opacity var(--t-base) var(--ease), translate var(--t-base) var(--ease);
}
.work-index__list a:hover::after,
.work-index__list a:focus-visible::after { opacity: 1; translate: 0 0; }

/* cursor-following preview: only where there is a fine pointer and room for it */
.work-preview { display: none; }
@media (hover: hover) and (min-width: 900px) {
  .work-preview {
    display: block;
    position: fixed;
    left: 0; top: 0;
    z-index: 60;
    width: 300px; height: 300px;   /* keep in sync with W / H in js 5.8 */
    opacity: 0;
    visibility: hidden;        /* GSAP flips both via autoAlpha */
    pointer-events: none;
  }
  .work-preview figure {
    position: absolute; inset: 0;
    overflow: hidden;
    border-radius: 50%;        /* a round "lens" instead of a hard-edged card */
    background: var(--bg);     /* each figure borrows its chapter's colour */
    box-shadow: 0 0 0 1px var(--line), 0 30px 70px rgba(0, 0, 0, .55);
    opacity: 0;
  }
  .work-preview img { width: 100%; height: 100%; object-fit: cover; }
}

/* 6.5 CHAPTERS ------------------------------------------------------------- */
.chapter {
  position: relative;
  isolation: isolate;
  background: var(--bg);
  color: var(--fg);
  padding: var(--block) var(--gutter);
  display: grid;
  gap: var(--stack);
  overflow: hidden;
}
.chapter > * { max-width: var(--maxw); margin-inline: auto; width: 100%; }

.chapter--lda-cover { --bg: #05121f; --fg: #eef4f9; --accent: #8fc0e6; --line: rgba(238, 244, 249, .16); --mute: rgba(238, 244, 249, .72); --faint: rgba(238, 244, 249, .62); }
.chapter--lda-logo  { --bg: #050505; --fg: #f4f4f0; --accent: #fde340; --line: rgba(244, 244, 240, .14); --mute: rgba(244, 244, 240, .68); --faint: rgba(244, 244, 240, .60); }
/* Each chapter uses the brand's OWN colours, read from the project files:
   ecoincittà  Forest Green #173D09 / Jet #333333 / gradient Shamrock Green → Maximum Green Yellow
   Clockface   pattern background #10131A / gold gradient #F2BD1D → #BF7E04 (alt. palette: Charleston Green #1B2227, French Bistre #826D50, Middle Grey #9C9289)
   Erwin Fight black / yellow #FFE528 */
.chapter--eco       { --bg: #10131a; --fg: #f1f7ea; --accent: #d4dd22; --line: rgba(241, 247, 234, .22); --mute: rgba(241, 247, 234, .78); --faint: rgba(241, 247, 234, .68); }
.chapter--clock     { --bg: #10131a; --fg: #f6f1e4; --accent: #f2bd1d; --line: rgba(246, 241, 228, .16); --mute: rgba(246, 241, 228, .72); --faint: rgba(246, 241, 228, .64); }
.chapter--erwin     { --bg: #050505; --fg: #f4f4f0; --accent: #ffe528; --line: rgba(244, 244, 240, .18); --mute: rgba(244, 244, 240, .74); --faint: rgba(244, 244, 240, .64); }

/* ecoincittà: the night colour of its own boards, lit by two soft glows in the brand gradient
   (Shamrock Green → Maximum Green Yellow) — no photograph, no tinted overlay */
.chapter--eco {
  background:
    radial-gradient(52% 46% at 82% 18%, rgba(59, 153, 91, .30), transparent 70%),
    radial-gradient(40% 38% at 6% 86%, rgba(212, 221, 34, .11), transparent 72%),
    var(--bg);
}

.chapter__bg { position: absolute; inset: -10% 0; z-index: -2; max-width: none; }
.chapter__bg img { width: 100%; height: 100%; object-fit: cover; }
.chapter__veil {
  position: absolute; inset: 0; z-index: -1; max-width: none;
  background: linear-gradient(to bottom, rgba(5, 18, 31, .55), rgba(5, 18, 31, .82) 55%, var(--bg));
}


/* Full-bleed textures behind a chapter */
.chapter__pattern { position: absolute; inset: 0; z-index: -1; max-width: none; pointer-events: none; }
.chapter__pattern picture { display: block; width: 100%; height: 100%; }
.chapter__pattern img { width: 100%; height: 100%; object-fit: cover; }
/* Clockface: the real pattern — dark on the left (behind the copy), gold on the right (behind the photograph) */
.chapter--clock .chapter__pattern {
  bottom: auto;
  height: min(100%, 1000px);
  opacity: .62;
  -webkit-mask-image: linear-gradient(to bottom, #000 38%, transparent);
  mask-image: linear-gradient(to bottom, #000 38%, transparent);
}
/* Erwin: the campaign's own ERWIN pattern (white icons + wordmark, transparent PNG) spread over the WHOLE
   chapter and feathered on all four edges, so it melts into the black instead of starting at a hard line. */
.chapter__pattern--erwin {
  background: url("../assets/web/erwin-pattern-1000.webp") center top / cover no-repeat;
  opacity: .38;                       /* quiet enough that the copy and the posts stay the hero */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent),
                      linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to bottom, transparent, #000 12%, #000 86%, transparent),
              linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
  mask-composite: intersect;
}
@media (max-width: 599px) {
  /* phones: keep the icons at a readable size instead of scaling the tall image to the page height */
  .chapter__pattern--erwin { background-size: 1000px auto; }
}
/* The image is fetched only when the chapter is about to come into view (js 3g) — it is one of the heaviest files
   and sits near the top of the DOM order but far down the page. Without JS it simply loads as usual. */
.js .chapter__pattern--erwin:not(.is-near) { background-image: none; }
/* a warm touch of the brand yellow, low and to the right (the old artwork carried a yellow band) */
.chapter--erwin {
  background:
    radial-gradient(55% 32% at 84% 6%, rgba(255, 229, 40, .11), transparent 72%),
    var(--bg);
}

/* Legibility scrim: a soft dark wash behind the copy column only, on the three chapters whose
   background (a busy pattern, or in lda-cover's case a photo) sits directly under the text and
   was fighting it for contrast. Text sits on top on phones and on the left from 900px (same
   edge .chapter__split itself switches on), so the gradient tracks that. The picture/media side
   is left alone — the art stays fully visible there. */
.chapter--erwin .chapter__legibility,
.chapter--clock .chapter__legibility,
.chapter--lda-cover .chapter__legibility {
  position: absolute;
  inset: 0;
  z-index: -1;
  max-width: none;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .68), rgba(0, 0, 0, .28) 48%, transparent 70%);
}
@media (min-width: 900px) {
  .chapter--erwin .chapter__legibility,
  .chapter--clock .chapter__legibility,
  .chapter--lda-cover .chapter__legibility {
    background: linear-gradient(to right, rgba(0, 0, 0, .68) 0%, rgba(0, 0, 0, .38) 42%, transparent 68%);
  }
}
/* Clockface's lattice is a bold gold-on-black pattern (vs. Erwin's faint icon watermark), so it
   needs a stronger wash to stop it competing with the title and body copy. */
.chapter--clock .chapter__legibility { background: linear-gradient(to bottom, rgba(0, 0, 0, .78), rgba(0, 0, 0, .34) 50%, transparent 72%); }
@media (min-width: 900px) {
  .chapter--clock .chapter__legibility { background: linear-gradient(to right, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .46) 44%, transparent 70%); }
}

/* The banner sits in the top padding of every chapter, edge to edge — it costs no extra height.
   Its size is tied to the padding (min of width and height, as --block is) so it can never touch the title. */
.chapter { --marq: clamp(2.2rem, min(6.5vw, 8vh), 5rem); }
.chapter__marquee {
  position: absolute;
  top: calc((var(--block) - var(--marq)) / 2);
  left: 0; right: 0;
  max-width: none; margin-inline: 0; width: auto;
  overflow: hidden;
  pointer-events: none;
}

.chapter__head { display: grid; gap: clamp(12px, 1.6vw, 18px); }
.chapter__num {
  font-family: var(--display);
  font-size: .8rem;
  font-weight: 500;
  letter-spacing: .34em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.chapter__title {
  font-family: var(--display);
  font-size: clamp(2.5rem, 11vw, 7rem);
  font-weight: 700;
  line-height: .9;
  letter-spacing: -.025em;
  text-transform: uppercase;
  text-wrap: balance;
}
.chapter__client {
  font-family: var(--display);
  font-size: clamp(.78rem, .72rem + .3vw, .95rem);
  font-weight: 300;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--mute);
}

.chapter__split { display: grid; gap: var(--stack); align-items: start; }   /* phones: stacked; from 900px: copy | picture, both starting at the top */
/* copy + tall picture: start at the top so the text sits right under the title instead of being
   pushed down to the picture's vertical centre */
.chapter__split--top { align-items: start; }
.chapter__body { display: grid; gap: clamp(24px, 3.4vw, 40px); align-content: start; }
.chapter__text {
  max-width: var(--measure);
  font-size: clamp(1.05rem, .98rem + .6vw, 1.5rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--fg);
  text-wrap: pretty;
}
.chapter__text em { font-style: italic; color: var(--accent); }
.chapter__text--sm { font-size: clamp(1rem, .95rem + .4vw, 1.2rem); color: var(--mute); }
.chapter--lda-cover .chapter__text em { font-family: 'Sorts Mill Goudy', Georgia, serif; }

.chapter__equation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3em .5em;
  font-family: var(--display);
  font-size: clamp(1.9rem, 5.4vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  text-transform: uppercase;
  color: var(--accent);
}
.chapter__equation i { font-style: normal; color: var(--faint); font-weight: 300; }
.chapter__equation .bolt { width: .82em; height: .82em; fill: currentColor; flex: none; }

/* "= the real logo": an image, not typed letters — sized to read as the result of the sum */
.chapter__equation-logo { height: 2.1em; width: auto; flex: none; margin-left: .1em; }

.chapter__facts {
  display: grid;
  gap: 18px;
  border-top: 1px solid var(--line);
  padding-top: clamp(18px, 2.4vw, 26px);
}
.chapter__facts > div { display: grid; gap: 4px; }
.chapter__facts dt {
  font-family: var(--display);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--faint);
}
.chapter__facts dd {
  display: flex;
  align-items: center;
  gap: .6em;
  font-size: clamp(1rem, .95rem + .3vw, 1.2rem);
  color: var(--fg);
}
/* each project's own typeface, shown in that typeface */
.is-goudy     { font-family: 'Sorts Mill Goudy', Georgia, serif; font-size: 1.35em; }
.is-baloo     { font-family: 'Baloo Bhai 2', system-ui, sans-serif; font-weight: 600; font-size: 1.2em; }
.is-cantarell { font-family: 'Cantarell', system-ui, sans-serif; font-size: 1.15em; letter-spacing: .02em; }

/* palette chips: colour + name, so each hex is readable and copyable */
.chapter__facts dd.chips { flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 6px 14px 6px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: .92rem;
  line-height: 1.2;
  color: var(--fg);
}
.chip__dot { width: 16px; height: 16px; border-radius: 50%; flex: none; background: var(--c, transparent); box-shadow: 0 0 0 1px var(--line); }
.chip__dot--eco  { background: linear-gradient(135deg, #3b995b, #d4dd22); }
.chip__dot--gold { background: linear-gradient(135deg, #f2bd1d, #bf7e04); }

/* key visuals */
.chapter__shot { position: relative; }
.chapter__shot img { width: 100%; }
.chapter__shot a { display: block; }
.chapter__shot--cutout img { filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .55)); }
/* Tall cut-outs: a fixed height + aspect-ratio reserves their space before they load (width:auto
   would collapse a lazy image to 0×0 and shift the layout when it arrives). */
.chapter__shot--cutout img { width: auto; max-width: 100%; height: min(80vh, 760px); aspect-ratio: 1200 / 1273; object-fit: contain; margin-inline: auto; }
/* framed photographs / covers: soft "iPhone" corners */
.chapter__shot--cover a {
  overflow: hidden;
  border-radius: var(--r-img);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55), 0 0 0 1px var(--line);
}
.chapter__shot--cover img { transition: transform 900ms var(--ease); }
.chapter__shot--cover a:hover img { transform: scale(1.03); }

.logo-idea {
  display: grid;
  gap: clamp(18px, 2.6vw, 26px);
  align-items: center;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: rgba(0, 0, 0, .28);
}
.logo-idea__mark { width: clamp(108px, 22vw, 150px); flex: none; }
.logo-idea__mark img { width: 100%; height: auto; }
.logo-idea p {
  font-size: clamp(.98rem, .94rem + .3vw, 1.15rem);
  color: var(--mute);
  max-width: 46ch;
  text-wrap: pretty;
}
.logo-idea em { font-style: italic; color: var(--accent); }
/* the mark sits in a small rounded tile cut from the project's own board (same night colour) */
.logo-idea__mark { border-radius: var(--r-card); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.logo-idea__mark img { display: block; }
.logo-idea p { min-width: 0; }

/* portrait cover beside the copy (a 4:5 board): capped so it never gets taller than the text column */
.chapter__shot--tile { width: 100%; max-width: min(var(--media), 62vh); margin-inline: auto; }   /* 4:5 → at most ~78vh tall */


/* 6.5c GALLERY — masonry that keeps every image's own proportions */
.gallery { columns: 2; column-gap: 12px; }
.gallery li { break-inside: avoid; margin-bottom: 12px; }
.gallery__item,
.reel__item {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--r-card);
  background: rgba(255, 255, 255, .05);
  cursor: zoom-in;
}
.gallery__item img,
.reel__item img { display: block; width: 100%; height: auto; transition: transform 700ms var(--ease); }
.gallery__item:hover img,
.reel__item:hover img { transform: scale(1.04); }
/* small "open" cue, shown on hover / focus */
.gallery__item::after,
.reel__item::after {
  content: "";
  position: absolute; right: 10px; bottom: 10px;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M12 6v12M6 12h12'/%3E%3C/svg%3E") center / 16px no-repeat;
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.gallery__item:hover::after, .gallery__item:focus-visible::after,
.reel__item:hover::after, .reel__item:focus-visible::after { opacity: 1; }

/* few images: an even square grid reads better than masonry columns */
.gallery--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gallery--grid li { margin: 0; }
.gallery--grid .gallery__item { aspect-ratio: 1; }
.gallery--grid .gallery__item img { height: 100%; object-fit: cover; }
.gallery--grid .gallery__item--fit { background: #0a2036; }
.gallery--grid .gallery__item--fit img { object-fit: contain; padding: 9%; }

/* Portrait gallery (ecoincittà, Clockface): every tile is the same 4:5 board, in an even grid */
.gallery--portrait { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gallery--portrait li { margin: 0; }
.gallery--portrait .gallery__item { aspect-ratio: 4 / 5; }
.gallery--portrait .gallery__item img { height: 100%; object-fit: cover; }
/* a hairline so dark boards stay readable on dark chapters (Clockface's night boards match its background) */
.gallery--portrait .gallery__item::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16);
  pointer-events: none;
}

/* "+N / View all": the last visible card of a long gallery. Same size as its neighbours; the first hidden image sits
   behind it, blurred and dimmed, so it reads as "there is more" rather than as an empty box (js 3f). */
.more-tile { display: grid; place-items: center; aspect-ratio: 4 / 5; isolation: isolate; text-align: center; }
.more-tile::after { display: none; }
.more-tile img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover;
  filter: blur(16px) brightness(.34) saturate(.9); scale: 1.2; transition: filter 500ms var(--ease), scale 700ms var(--ease); }
.more-tile:hover img, .more-tile:focus-visible img { filter: blur(9px) brightness(.5) saturate(1); scale: 1.26; }
.more-tile__body { display: grid; gap: .5em; justify-items: center; padding: 12px; }
.more-tile__n { font-family: var(--display); font-weight: 700; font-size: clamp(2.6rem, 6vw, 4rem); line-height: 1; letter-spacing: -.02em; color: var(--accent, var(--gold)); }
.more-tile__t { display: inline-flex; align-items: center; gap: .55em; font-family: var(--display); font-size: .72rem; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; color: var(--fg, var(--paper)); }
.more-tile__t svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: translate var(--t-base) var(--ease); }
.more-tile:hover .more-tile__t svg { translate: 4px 0; }

/* 6.5d REEL — Erwin's carousel, stories and apparel. Swipe row on phones, fixed-width cards from 700px */
.sub-label {
  display: flex;
  align-items: center;
  gap: .9em;
  font-family: var(--display);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: calc(clamp(40px, 6vw, 72px) * -.55);
}
.sub-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.reel {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  padding-bottom: 10px;
  scrollbar-width: none;
}
.reel::-webkit-scrollbar { display: none; }
.reel li { flex: 0 0 68%; scroll-snap-align: center; }
.reel--stories li { flex-basis: 52%; }

/* Galleries behave like Erwin's reel: on phones (< 700px) every project's images are ONE row you swipe sideways,
   the next card peeking in at the edge — instead of a tall 2-column grid. From 700px they are the static grids above
   (Erwin's reel does the same). Same numbers as .reel, so all five projects feel identical. */
@media (max-width: 699px) {
  .gallery,
  .gallery--portrait,
  .gallery--grid {
    display: flex;
    columns: auto;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery li { flex: 0 0 68%; margin: 0; scroll-snap-align: center; }
}

/* 6.5e WEB — the web-design offer (content from gianlucaragnodesign.com), same two-column system as the chapters */
.web { isolation: isolate; display: grid; gap: var(--stack); }
.web::before {                       /* full-bleed soft gold glow, like the other sections' backgrounds */
  content: "";
  position: absolute; inset: 0 calc(50% - 50vw); z-index: -1;
  background:
    radial-gradient(46% 55% at 84% 40%, rgba(222, 184, 65, .13), transparent 72%),
    radial-gradient(38% 42% at 4% 96%, rgba(222, 184, 65, .07), transparent 74%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 28%, #000 72%, transparent);   /* no hard edge where the section ends */
  pointer-events: none;
}
.web__grid { display: grid; gap: var(--stack); align-items: end; }
.web__title { font-size: clamp(2.4rem, 8.6vw, 6rem); }
.web__lead {
  margin-top: clamp(18px, 2.4vw, 28px);
  font-size: clamp(1.1rem, 1rem + .7vw, 1.6rem);
  font-weight: 300;
  color: var(--mute);
  max-width: 34ch;
}
.web__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(26px, 3.4vw, 40px); }
.web__brief {
  display: grid;
  gap: 14px;
  justify-items: start;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  background: rgba(0, 0, 0, .3);
}
.web__brief-k {
  font-family: var(--display);
  font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--gold);
}
.web__brief-t { font-size: 1.1rem; color: var(--mute); margin-bottom: 8px; }

/* 6.6 CONTACT -------------------------------------------------------------- */
.contact {
  /* The background is drawn taller than the section (inset -6%) so its parallax never shows a gap. Without this
     clip it spilled 70–95px UP over the previous section (Web), covering its bottom padding and its glow and making
     that section look like it ended right under its content. Clipped to the section box vertically; sideways it
     stays full-bleed. */
  clip-path: inset(0 -100vw);
  isolation: isolate;
  display: grid;
  gap: clamp(34px, 5vw, 60px);
  min-height: 92svh;
  align-content: center;
}
.contact__bg { position: absolute; inset: -6% calc(50% - 50vw); z-index: -1; overflow: hidden; }
.contact__bg::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(110% 80% at 70% 40%, rgba(8, 8, 10, .35), var(--ink) 74%);
}
.contact__bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(.4) contrast(1.35);
}

.contact__cta {
  font-family: var(--display);
  font-size: clamp(2.1rem, 8.6vw, 5.4rem);
  font-weight: 600;
  line-height: .98;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.contact__cta em { font-style: normal; color: var(--gold); }

.contact__links { display: grid; border-top: 1px solid var(--line); }
.contact__links a {
  display: grid;
  grid-template-columns: 1fr;
  gap: 4px;
  padding: clamp(18px, 2.4vw, 26px) 0;
  border-bottom: 1px solid var(--line);
  min-height: 64px;
  align-content: center;
  transition: padding-left var(--t-base) var(--ease);
}
.contact__links a:hover { padding-left: 12px; }
.contact__k {
  font-family: var(--display);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--faint);
}
.contact__v {
  font-family: var(--display);
  font-size: clamp(1.15rem, 4.4vw, 2.1rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -.005em;
  word-break: break-word;
  transition: color var(--t-base) var(--ease);
}
.contact__links a:hover .contact__v { color: var(--gold); }

/* 7. RESPONSIVE ------------------------------------------------------------ */
@media (min-width: 600px) {
  .site-head__cv { display: inline-flex; }
  .contact__links a {
    grid-template-columns: 180px 1fr;
    align-items: baseline;
    gap: 0 24px;
  }
  .logo-idea { grid-template-columns: auto 1fr; }
  .chapter__facts { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px 40px; }
}

@media (min-width: 700px) {
  .gallery--portrait { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .gallery { columns: 3; column-gap: 16px; }
  .gallery li { margin-bottom: 16px; }
  .gallery--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  /* reels become fixed-width card rows, left-aligned with the title */
  .reel { overflow: visible; gap: 16px; }
  .reel li { flex: 0 0 auto; }
  .reel--posts   li { width: calc((100% - 48px) / 4); }   /* 3 posts + the "+N" tile fill the column exactly, like the 4-column galleries */
  .reel--stories li { width: min(22%, 290px); }
  .reel--apparel li { width: min(30%, 380px); }
}

@media (min-width: 900px) {
  .lightbox__btn--prev { left: 28px; }
  .lightbox__btn--next { right: 28px; }
  .menu-btn, .menu { display: none !important; }   /* inline nav takes over */
  .site-nav { display: block; }
  .brand { flex: 0 0 auto; }
  .site-nav { flex: 1; display: flex; justify-content: center; }

  /* Two content-sized columns, centred as ONE block in the hero (the old 1fr column
     left empty space on the right, so the lockup looked pushed to the left). */
  .lockup {
    grid-template-columns: auto auto;
    justify-content: center;
    justify-items: start;
    align-items: center;
    gap: clamp(40px, 5.4vw, 88px);
  }
  .lockup__mark { width: clamp(300px, 26vw, 440px); }
  .lockup__text,
  .lockup__name { justify-items: start; }
  .lockup__first { font-size: clamp(2.6rem, 5.1vw, 6.2rem); }
  .lockup__last  { font-size: clamp(4.6rem, 9.2vw, 11rem); }
  .lockup__name  { --role-fs: clamp(.9rem, 1.05vw, 1.3rem); }
  .lockup__role  { left: 0; translate: 0 0; letter-spacing: .5em; text-indent: 0; }
  .hero__meta    { justify-content: flex-start; font-size: clamp(.78rem, .85vw, 1rem); }

  /* Optical alignment: big capitals carry left side-bearing (~.05em), which makes each
     line start a few px to the right of the small text. Pull them back so RAGNO, GIANLUCA,
     the role and the location all start on the same vertical line. */
  .lockup__first { margin-left: -.058em; }
  .lockup__last  { margin-left: -.052em; }

  .about__grid { grid-template-columns: 1.15fr .85fr; align-items: start; }
  /* 900–1319px: Software | Hard on top, Soft underneath at full width */
  .skills__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(36px, 4vw, 60px) clamp(28px, 3.4vw, 52px); }
  .skillset--soft { grid-column: 1 / -1; }
  .skillset__title { font-size: clamp(1.9rem, 3.6vw, 4.2rem); }

  .web__grid { grid-template-columns: minmax(0, 1fr) minmax(0, var(--media)); column-gap: var(--col-gap); }

  /* every chapter: copy on the left, ONE picture column on the right, close together */
  .chapter__split { grid-template-columns: minmax(0, 1fr) minmax(0, var(--media)); column-gap: var(--col-gap); }


}

@media (min-width: 1100px) {
  .gallery { columns: 4; }
  .gallery--portrait { grid-template-columns: repeat(4, minmax(0, 1fr)); }   /* same size in every project */
}

@media (min-width: 1200px) {
  .about__quote p { font-size: 2rem; }
}

/* ≥1320px: one row, left → right Software | Hard | Soft. Soft is the longest list, so it gets a double-width column
   (two sub-columns, see .skillset__list--cols); the titles shrink a little to keep "MY SOFTWARE" on one line in the
   narrower first column (its width is ≈5.5 × the font size). */
@media (min-width: 1320px) {
  .skills__grid { grid-template-columns: minmax(0, .8fr) minmax(0, .8fr) minmax(0, 1.6fr); gap: clamp(28px, 3.4vw, 52px); }
  .skillset--soft { grid-column: auto; }
  .skillset__title { font-size: clamp(2rem, 3.4vw, 3.1rem); }
}

/* Touch devices: hover-only affordances should not linger */
@media (hover: none) {
  .about__figure img { filter: grayscale(0); }
  .skillset__list li:hover { padding-left: 0; }
  .contact__links a:hover { padding-left: 0; }
}


/* 8. LIGHTBOX -------------------------------------------------------------- */
html.lb-open { overflow: hidden; }
.lightbox {
  /* The room an image may use, in plain viewport units. Percentages (max-height:100%) are NOT
     used: Safari resolves them against an auto-sized grid row and lets tall images overflow. */
  --lb-pad-y: clamp(64px, 10vh, 96px);
  --lb-pad-x: clamp(12px, 7vw, 112px);
  --lb-h: calc(100vh - 2 * var(--lb-pad-y));
  --lb-w: calc(100vw - 2 * var(--lb-pad-x));
  --lb-plate: clamp(24px, 5vw, 72px);       /* padding of the colour plate behind transparent logos */

  width: 100vw; height: 100vh;
  max-width: none; max-height: none;
  margin: 0; padding: 0;
  border: 0;
  background: rgba(5, 5, 7, .985);
  color: #fff;
  overflow: hidden;
}
@supports (height: 100dvh) {
  .lightbox { height: 100dvh; --lb-h: calc(100dvh - 2 * var(--lb-pad-y)); }
}
.lightbox::backdrop { background: rgba(0, 0, 0, .7); }
.lightbox[open] { display: grid; animation: lb-in 260ms var(--ease); }
@keyframes lb-in { from { opacity: 0; } }

.lightbox__stage {
  margin: 0;
  width: 100%; height: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template: minmax(0, 1fr) / minmax(0, 1fr);
  place-items: center;
  padding: var(--lb-pad-y) var(--lb-pad-x);
  touch-action: pan-y pinch-zoom;
}
.lightbox__stage > img,
.lightbox__stage > video {
  width: auto; height: auto;
  max-width: var(--lb-w); max-height: var(--lb-h);
  object-fit: contain;
  border-radius: var(--r-card);
}
/* transparent logos get a plate in the colour they were designed for */
.lightbox__plate {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  max-width: var(--lb-w); max-height: var(--lb-h);
  padding: var(--lb-plate);
  background: var(--plate, transparent);
  border-radius: var(--r-img);
}
.lightbox__plate img {
  display: block;
  width: min(calc(var(--lb-w) - 2 * var(--lb-plate)), 900px);
  height: auto;
  max-height: calc(var(--lb-h) - 2 * var(--lb-plate));
  object-fit: contain;              /* logos scale up to fill the plate, never distort */
}

.lightbox__cap,
.lightbox__count {
  position: absolute;
  margin: 0;
  font-family: var(--display);
  font-size: .76rem;
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.lightbox__cap   { left: 0; right: 0; bottom: 22px; padding-inline: 72px; text-align: center; }
.lightbox__count { left: 24px; top: 30px; font-variant-numeric: tabular-nums; }

.lightbox__btn {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 50%;
  background: rgba(255, 255, 255, .06);
  color: #fff;
  cursor: pointer;
  transition: background var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .5); }
.lightbox__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__btn--close { top: 18px; right: 18px; }
.lightbox__btn--prev  { left: 14px;  top: 50%; translate: 0 -50%; }
.lightbox__btn--next  { right: 14px; top: 50%; translate: 0 -50%; }
.lightbox[data-single] .lightbox__btn--prev,
.lightbox[data-single] .lightbox__btn--next,
.lightbox[data-single] .lightbox__count { display: none; }

/* Print: give the page a sane fallback */
@media print {
  .site-head, .progress, .rail, .scroll-cue, .chapter__pattern, .chapter__marquee { display: none; }
  body { background: #fff; color: #000; }
}