/* ===========================================================================
   INDIGO · 5 tales of being — premium editorial jewellery recreation
   Disciplined composition · tight rhythm · cinematic motion.
   =========================================================================== */
:root {
  --beige: #f4f3eb;
  --beige-2: #eceae0;
  --black: #050505;
  --ink: #0c0c0e;
  --ink-2: #131318;
  --white: #fff;
  --indaco: #b1b3c3;
  --indaco-deep: #8a8da0;
  --silver: #c9ccd4;
  --purple: #6a15ff;
  --purple-soft: #9a7bff;
  --black-30: #0505054d;
  --black-50: #05050580;
  --black-70: #050505b3;
  --white-20: #ffffff33;
  --white-40: #ffffff66;

  --bg: var(--beige);
  --fg: var(--black);

  --font-sans: 'Hanken Grotesk', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
  --font-display: 'Palette Mosaic', system-ui, serif;

  --gutter: clamp(20px, 4vw, 72px);
  --col-gap: clamp(16px, 1.8vw, 32px);
  --header-h: 78px;

  /* vertical rhythm — generous but never cavernous */
  --sec: clamp(64px, 7vw, 112px);
  --sec-s: clamp(44px, 5vw, 72px);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);

  --t-mega: clamp(64px, 13vw, 210px);
  --t-huge: clamp(44px, 7vw, 104px);
  --t-xl:   clamp(34px, 4vw, 64px);
  --t-l:    clamp(26px, 2.6vw, 40px);
  --t-m:    clamp(19px, 1.7vw, 26px);
  --t-body: clamp(15px, 1.05vw, 18px);
  --t-s:    13px;
  --t-mono: 11px;
}

* , *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-sans); font-size: var(--t-body); line-height: 1.5;
  overflow-x: hidden; cursor: none;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: none; }
::selection { background: var(--purple); color: var(--white); }

/* film grain */
.grain { position: fixed; inset: -50%; width: 200%; height: 200%; z-index: 95; pointer-events: none;
  opacity: 0.03; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(2) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 50%{transform:translate(-2%,1%)} 100%{transform:translate(1%,-2%)} }

/* WebGL canvas — used only for cover images + fullscreen expand */
#curtains-canvas { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 3; }
#curtains-canvas.-is-fullscreen { z-index: 30; }
.-curtains-ready [data-webgl] > img { opacity: 0; }

/* cursor */
.cursor { position: fixed; top:0; left:0; z-index:120; pointer-events:none; width:7px; height:7px;
  margin:-3.5px 0 0 -3.5px; border-radius:50%; background: var(--purple); transition: opacity .3s; }
.cursor-ring { position: fixed; top:0; left:0; z-index:120; pointer-events:none; width:42px; height:42px;
  margin:-21px 0 0 -21px; border-radius:50%; border:1px solid var(--black-50);
  transition: transform .3s var(--ease), border-color .3s, background .3s; display:grid; place-items:center; }
body.-dark .cursor-ring { border-color: var(--white-40); }
.cursor-ring .label { font-family: var(--font-mono); font-size:9px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--white); opacity:0; transition:opacity .3s; }
.cursor-ring.-hover { transform: scale(1.55); border-color: var(--purple); }
.cursor-ring.-view { transform: scale(2.1); background: var(--purple); border-color: var(--purple); }
.cursor-ring.-view .label, .cursor-ring.-labelled .label { opacity: 1; }
.cursor.-hover { opacity: 0; }

.progress-bar { position: fixed; left:0; top:0; height:2px; width:0%; background: var(--purple); z-index:110; box-shadow:0 0 10px var(--purple); }

/* header */
.header { position: fixed; top:0; left:0; width:100%; height: var(--header-h); z-index:90;
  display:flex; align-items:center; justify-content:space-between; padding: 0 var(--gutter);
  mix-blend-mode: difference; color: var(--white); }
.header__brand { font-family: var(--font-display); font-size: 20px; letter-spacing:.01em; }
.header__nav { display:flex; gap: 24px; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing:.12em; text-transform: uppercase; }
.header__nav a { position:relative; }
.header__nav a::after { content:''; position:absolute; left:0; bottom:-5px; width:100%; height:1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease); }
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 720px){ .header__nav{ display:none } }

.chapter-nav { position: fixed; right: 22px; top: 50%; transform: translateY(-50%); z-index:80; display:flex; flex-direction:column; gap: 14px; mix-blend-mode: difference; }
.chapter-nav button { width:8px; height:8px; border-radius:50%; border:1px solid var(--white); opacity:.4; transition: opacity .3s, transform .3s; position:relative; }
.chapter-nav button .n { position:absolute; right:18px; top:50%; transform:translateY(-50%); font-family: var(--font-mono); font-size:10px; color: var(--white); opacity:0; white-space:nowrap; transition:opacity .3s; }
.chapter-nav button:hover .n { opacity:1; }
.chapter-nav button.-active { opacity:1; transform: scale(1.6); background: var(--white); }
@media (max-width: 720px){ .chapter-nav{ display:none } }

/* =========================================================================
   SPLASH
   ========================================================================= */
.splash { position: fixed; inset:0; z-index:100; background: var(--ink); color: var(--white); overflow:hidden; }
.splash__bg { position:absolute; inset:0; }
.splash__bg video, .splash__bg img { width:100%; height:100%; object-fit:cover; opacity:.45; }
.splash__bg::after { content:''; position:absolute; inset:0; background: radial-gradient(120% 90% at 50% 35%, transparent, #0c0c0ee6 80%), #0c0c0e55; }
.splash__inner { position:relative; width:100%; height:100%; display:grid; place-items:center; }
.splash__choice { position:absolute; inset:0; display:grid; place-items:center; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); background: var(--black-30); }
.splash__content { display:flex; flex-direction:column; align-items:center; gap:36px; text-align:center; padding:0 24px; }
.splash__ring { position:relative; width:116px; height:116px; }
.splash__ring svg { width:100%; height:100%; animation: ring-spin 14s linear infinite; }
@keyframes ring-spin { to { transform: rotate(360deg); } }
.splash__abstract { max-width: 600px; font-size: var(--t-m); line-height: 1.32; letter-spacing:-.02em; font-weight: 320; }
.splash__abstract .em { font-style: italic; color: var(--indaco); }
.splash__btns { display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.btn { position:relative; display:inline-flex; align-items:center; gap:10px; padding:14px 26px; border-radius:100px; border:1px solid var(--white-40); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color: var(--white); overflow:hidden; transition: color .4s var(--ease); }
.btn::before { content:''; position:absolute; inset:0; background: var(--purple); transform: translateY(101%); transition: transform .5s var(--ease); z-index:-1; }
.btn:hover::before { transform: translateY(0); }
.btn.-solid { background: var(--white); color: var(--ink); border-color: transparent; }
.btn.-solid:hover { color: var(--white); }
.splash__logo { position:absolute; left:50%; bottom: 38px; transform: translateX(-50%); font-family: var(--font-display); font-size: clamp(44px, 11vw, 130px); line-height:.9; opacity:.9; }
.splash__progress { position:absolute; left:0; bottom:0; height:2px; width:0%; background: var(--indaco); box-shadow:0 0 14px var(--purple); }

/* =========================================================================
   PRIMITIVES
   ========================================================================= */
.app { position: relative; z-index: 2; }
.section { position: relative; padding: var(--sec) var(--gutter); }
.section.-dark { background: var(--ink); color: var(--white); }
.wrap { max-width: 1500px; margin-inline: auto; }
.grid { display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: var(--col-gap); }
.eyebrow { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing:.16em; text-transform:uppercase; color: var(--black-50); }
.-dark .eyebrow, body.-dark .eyebrow { color: var(--indaco); }
.display { font-family: var(--font-display); font-weight: 400; line-height: .92; letter-spacing: -0.02em; }
.line { display:block; overflow:hidden; padding-bottom:.04em; }
.line > span { display:block; will-change: transform; }

/* reusable framed image (optionally a WebGL plane) */
.media { position:relative; overflow:hidden; background:#15151b; }
.media > img { width:100%; height:100%; object-fit:cover; display:block; }
.media.-portrait { aspect-ratio: 3/4; }
.media.-tall { aspect-ratio: 2/3; }
.media.-square { aspect-ratio: 1/1; }
.media.-land { aspect-ratio: 4/3; }
.media.-wide { aspect-ratio: 16/9; }
.media__cap { position:absolute; left:16px; bottom:14px; z-index:4; font-family: var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color: var(--white); mix-blend-mode: difference; }
.media__expand { position:absolute; right:14px; top:14px; z-index:4; width:40px; height:40px; border-radius:50%; border:1px solid var(--white-40); color: var(--white); display:grid; place-items:center; font-size:15px; mix-blend-mode:difference; transition: background .3s, color .3s; }
.media__expand:hover { background: var(--white); color: var(--ink); mix-blend-mode:normal; }
/* clip reveal — animated by GSAP via --rev */
.reveal-media { clip-path: inset(var(--rev, 0%) 0 0 0); }

/* =========================================================================
   HERO
   ========================================================================= */
.hero { position:relative; height: 100svh; min-height: 600px; overflow:hidden; display:flex; flex-direction:column; justify-content:flex-end; padding: 0 var(--gutter) clamp(40px,6vh,80px); color: var(--white); }
.hero__bg { position:absolute; inset:0; }
.hero__bg img { width:100%; height:100%; object-fit:cover; transform: scale(1.06); }
.hero__bg::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, #0c0c0e55 0%, transparent 30%, #0c0c0edd 100%); }
.hero__meta { position:absolute; left: var(--gutter); right: var(--gutter); top: calc(var(--header-h) + 16px); display:flex; justify-content:space-between; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color: var(--indaco); z-index:3; }
.hero__title { position:relative; z-index:3; font-size: clamp(46px, 10vw, 150px); margin:0; letter-spacing:-.03em; }
.hero__sub { position:relative; z-index:3; max-width: 32ch; margin-top: clamp(16px,1.6vw,26px); font-size: var(--t-m); color: var(--indaco); }
.scroll-hint { position:absolute; left:50%; bottom:22px; transform:translateX(-50%); z-index:3; display:flex; flex-direction:column; align-items:center; gap:8px; font-family: var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color: var(--white); }
.scroll-hint .bar { width:1px; height:40px; background: var(--white-40); overflow:hidden; position:relative; }
.scroll-hint .bar::after { content:''; position:absolute; inset:0; background: var(--white); animation: drop 1.9s var(--ease-io) infinite; }
@keyframes drop { 0%{transform:translateY(-100%)} 60%,100%{transform:translateY(100%)} }

/* =========================================================================
   INTRO — tight statement + one detail image
   ========================================================================= */
.intro { display:flex; gap: clamp(40px,5vw,96px); align-items:center; }
.intro__text { flex: 1 1 52%; }
.intro__lead { font-family: var(--font-display); font-size: var(--t-xl); line-height:1.0; letter-spacing:-.02em; margin:0; max-width: 16ch; }
.intro__body { margin-top: clamp(28px,3vw,48px); max-width: 46ch; }
.intro__body p { font-size: var(--t-m); line-height:1.42; letter-spacing:-.015em; margin:0 0 1em; }
.intro__img { flex: 1 1 42%; }
.intro__img .media { aspect-ratio: 4/5; }
@media (max-width: 820px){ .intro { flex-direction: column; align-items:stretch; } }

/* =========================================================================
   VALUES marquee
   ========================================================================= */
.values { background: var(--ink); color: var(--white); padding-block: clamp(56px,8vw,110px); overflow:hidden; }
.values__row { display:flex; white-space:nowrap; width:max-content; }
.values__row span { font-family: var(--font-display); font-size: var(--t-huge); line-height:1.04; display:inline-flex; align-items:center; gap: clamp(28px,3.5vw,64px); padding-right: clamp(28px,3.5vw,64px); letter-spacing:-.02em; }
.values__row .dot { width:12px; height:12px; border-radius:50%; background: var(--purple); flex:0 0 auto; }
.values__row.-alt { margin-top: .15em; }
.values__row.-alt span { color: transparent; -webkit-text-stroke: 1px var(--indaco); }

/* =========================================================================
   CHAPTER COVER — full-bleed portrait, pinned title
   ========================================================================= */
.tale-cover { position:relative; height: 100svh; min-height: 600px; overflow:hidden; color: var(--white); display:flex; align-items:flex-end; padding: 0 var(--gutter) clamp(44px,6vh,84px); }
.tale-cover__bg { position:absolute; inset:0; }
.tale-cover__bg img { width:100%; height:100%; object-fit:cover; }
.tale-cover__bg::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, #0c0c0e44, transparent 32%, transparent 60%, #0c0c0ecc); }
.tale-cover__index { position:absolute; left: var(--gutter); top: calc(var(--header-h) + 16px); z-index:3; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing:.16em; text-transform:uppercase; color: var(--indaco); }
.tale-cover__content { position:relative; z-index:3; width:100%; }
.tale-cover__sub { font-family: var(--font-mono); font-size: var(--t-s); letter-spacing:.1em; text-transform:uppercase; color: var(--indaco); margin-bottom: clamp(10px,1.2vw,18px); }
.tale-cover__title { font-family: var(--font-display); font-size: var(--t-mega); line-height:.84; letter-spacing:-.03em; margin:0; }

/* =========================================================================
   CHAPTER STATEMENT — theme word + 2 editorial images + copy
   ========================================================================= */
.tale-head { display:block; padding: var(--sec) var(--gutter); }
.tale-head__word { font-family: var(--font-display); font-size: clamp(56px,9vw,150px); line-height:.86; letter-spacing:-.03em; margin: 0 0 clamp(36px,4vw,68px); }
.tale-head__row { display:flex; gap: clamp(24px,3vw,56px); align-items:flex-end; }
.tale-head__main { flex: 1 1 56%; }
.tale-head__main .media { aspect-ratio: 4/3; }
.tale-head__aside { flex: 1 1 34%; display:flex; flex-direction:column; }
.tale-head__aside .media { aspect-ratio: 3/4; }
.tale-head__copy { margin-top: clamp(18px,2vw,30px); }
.tale-head__copy p { font-size: var(--t-l); line-height:1.2; letter-spacing:-.02em; margin:0; }
@media (max-width: 820px){ .tale-head__row { flex-direction:column; align-items:stretch; } }

/* =========================================================================
   PRODUCT OVERVIEW — circular medallion + spec sheet (dark)
   ========================================================================= */
.tale-product { background: var(--ink); color: var(--white); padding: var(--sec) var(--gutter); }
.tale-product__stage { grid-column: 1 / 7; position:relative; display:grid; place-items:center; min-height: clamp(360px, 46vw, 560px); }
.ring-float { width: clamp(240px, 30vw, 420px); aspect-ratio: 1/1; position:relative; border-radius:50%; overflow:hidden; box-shadow: 0 50px 100px #000a, inset 0 0 0 1px var(--white-20); will-change: transform; }
.ring-float img { width:100%; height:100%; object-fit:cover; }
.ring-float::after { content:''; position:absolute; inset:0; border-radius:50%; background: radial-gradient(circle at 50% 28%, transparent 52%, #0c0c0e99); }
.ring-float__halo { position:absolute; inset:-24%; border-radius:50%; z-index:-1; background: radial-gradient(circle, #6a15ff44, transparent 60%); filter: blur(30px); }
.ring-float__rot { position:absolute; inset:-9%; border-radius:50%; border:1px solid var(--white-20); }
.tale-product__info { grid-column: 8 / 13; align-self:center; }
.tale-product__cat { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing:.14em; text-transform:uppercase; color: var(--indaco); }
.tale-product__name { font-family: var(--font-display); font-size: var(--t-xl); line-height:.96; letter-spacing:-.02em; margin: 10px 0 0; }
.tale-product__specs { list-style:none; margin: clamp(24px,2.6vw,40px) 0 0; padding:0; border-top:1px solid var(--white-20); }
.tale-product__specs li { display:flex; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--white-20); font-size: var(--t-s); }
.tale-product__specs li span:first-child { color: var(--indaco); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing:.08em; text-transform:uppercase; }
.tale-product__shop { display:inline-flex; align-items:center; gap:10px; margin-top: clamp(26px,2.6vw,38px); padding:14px 28px; border:1px solid var(--white-40); border-radius:100px; font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing:.1em; text-transform:uppercase; transition: background .35s var(--ease), color .35s; }
.tale-product__shop:hover { background: var(--white); color: var(--ink); }
@media (max-width: 820px){ .tale-product__stage, .tale-product__info { grid-column: 1 / -1; } .tale-product__info { margin-top: 40px; } }

/* =========================================================================
   PRODUCT STORY — quote over a wide image
   ========================================================================= */
.tale-story__media { grid-column: 1 / -1; }
.tale-story__media .media { aspect-ratio: 21/9; }
.tale-story__quote { grid-column: 2 / 11; margin-top: clamp(-72px,-5vw,-40px); position:relative; z-index:3; font-family: var(--font-display); font-size: var(--t-l); line-height:1.06; letter-spacing:-.02em; background: var(--beige); padding: clamp(28px,3vw,52px) clamp(28px,3vw,52px) 0 0; }
@media (max-width: 820px){ .tale-story__quote{ grid-column:1 / -1; margin-top: clamp(-40px,-8vw,-24px); } }

/* =========================================================================
   GALLERY — "The Collection" : clean 3-col editorial grid
   ========================================================================= */
.tale-gallery__head { grid-column: 1 / -1; display:flex; justify-content:space-between; align-items:baseline; gap:24px; flex-wrap:wrap; margin-bottom: clamp(36px,4vw,64px); }
.tale-gallery__label { font-family: var(--font-display); font-size: var(--t-xl); letter-spacing:-.02em; }
.tale-gallery__grid { grid-column: 1 / -1; display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px,3vw,56px) var(--col-gap); }
.piece { position:relative; }
.piece .media { aspect-ratio: 3/4; }
.piece:nth-child(3n+2) { transform: translateY(clamp(32px,5vw,80px)); }
.piece__meta { display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-top:14px; }
.piece__name { font-family: var(--font-mono); font-size: var(--t-s); letter-spacing:.04em; text-transform:uppercase; }
.piece__mat { font-family: var(--font-mono); font-size: 10px; color: var(--black-50); text-align:right; }
@media (max-width: 820px){ .tale-gallery__grid { grid-template-columns: repeat(2,1fr); } .piece:nth-child(3n+2){transform:none} .piece:nth-child(2n){ transform: translateY(40px) } }

/* =========================================================================
   LOOKBOOK — two strong frames + sound
   ========================================================================= */
.tale-lookbook { background: var(--ink); color: var(--white); padding: var(--sec) var(--gutter); }
.tale-lookbook__head { grid-column: 1 / -1; margin-bottom: clamp(32px,4vw,56px); }
.tale-lookbook__title { font-family: var(--font-display); font-size: var(--t-huge); line-height:.94; letter-spacing:-.02em; }
.tale-lookbook__main { grid-column: 1 / 8; }
.tale-lookbook__main .media { aspect-ratio: 4/3; }
.tale-lookbook__sec { grid-column: 9 / 13; align-self:end; }
.tale-lookbook__sec .media { aspect-ratio: 3/4; }
@media (max-width: 820px){ .tale-lookbook__main, .tale-lookbook__sec { grid-column:1 / -1; } .tale-lookbook__sec{ margin-top: var(--col-gap) } }

/* sound player */
.sound { grid-column: 1 / -1; display:flex; align-items:center; gap: clamp(16px,2vw,28px); padding: clamp(22px,2.4vw,34px) 0 0; border-top:1px solid var(--white-20); margin-top: clamp(40px,5vw,72px); }
.sound__play { width:58px; height:58px; flex:0 0 auto; border-radius:50%; border:1px solid var(--white-40); display:grid; place-items:center; transition: background .3s, color .3s, transform .3s; }
.sound__play:hover { background: var(--white); color: var(--ink); transform: scale(1.06); }
.sound__play.-playing { background: var(--purple); border-color: var(--purple); color: var(--white); }
.sound__meta { flex:1; }
.sound__title { font-family: var(--font-display); font-size: var(--t-l); letter-spacing:-.02em; line-height:1; }
.sound__cap { font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing:.1em; text-transform:uppercase; color: var(--indaco); margin-top:8px; }
.sound__viz { display:flex; align-items:flex-end; gap:3px; height:34px; }
.sound__viz i { width:3px; background: var(--indaco); height:20%; border-radius:2px; }
.sound.-playing .sound__viz i { animation: viz 0.9s ease-in-out infinite; background: var(--purple-soft); }
.sound__viz i:nth-child(2n){ animation-delay:.15s } .sound__viz i:nth-child(3n){ animation-delay:.3s } .sound__viz i:nth-child(4n){ animation-delay:.45s }
@keyframes viz { 0%,100%{height:16%} 50%{height:96%} }

/* =========================================================================
   OUTRO — the maker
   ========================================================================= */
.tale-outro__media { grid-column: 1 / 6; }
.tale-outro__media .media { aspect-ratio: 4/5; }
.tale-outro__text { grid-column: 7 / 13; align-self:center; }
.tale-outro__title { font-family: var(--font-display); font-size: var(--t-xl); line-height:.98; letter-spacing:-.02em; margin: 14px 0 18px; }
.tale-outro__text p { font-size: var(--t-m); line-height:1.4; letter-spacing:-.015em; max-width: 44ch; color: var(--black-70); }
@media (max-width: 820px){ .tale-outro__media, .tale-outro__text { grid-column:1 / -1; } .tale-outro__text{ margin-top:32px } }

/* divider between chapters */
.tale + .tale .tale-cover { box-shadow: 0 -1px 0 var(--ink); }

/* =========================================================================
   FOOTER + MODAL
   ========================================================================= */
.footer { background: var(--ink); color: var(--indaco); padding: clamp(80px,10vh,150px) var(--gutter) 44px; }
.footer__top { display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; align-items:flex-end; }
.footer__big { font-family: var(--font-display); font-size: var(--t-mega); line-height:.84; letter-spacing:-.03em; color: var(--white); }
.footer__cta { display:inline-flex; align-items:center; gap:10px; padding:16px 32px; border-radius:100px; background: var(--white); color: var(--ink); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing:.1em; text-transform:uppercase; transition: transform .35s var(--ease); }
.footer__cta:hover { transform: translateY(-3px); }
.footer__bottom { display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top: clamp(48px,7vh,100px); padding-top: 28px; border-top:1px solid var(--white-20); font-family: var(--font-mono); font-size: var(--t-mono); letter-spacing:.08em; text-transform:uppercase; }

.modal { position: fixed; inset:0; z-index:115; display:grid; place-items:center; opacity:0; pointer-events:none; transition: opacity .4s var(--ease); }
.modal.-open { opacity:1; pointer-events:auto; }
.modal__bg { position:absolute; inset:0; background: #0c0c0ecc; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.modal__card { position:relative; background: var(--beige); color: var(--ink); padding: clamp(32px,4vw,56px); max-width: 520px; width: calc(100% - 40px); }
.modal__card h3 { font-family: var(--font-display); font-size: var(--t-l); margin:0 0 16px; }
.modal__close { position:absolute; right:20px; top:18px; font-family: var(--font-mono); font-size:12px; letter-spacing:.08em; text-transform:uppercase; }
.modal a.link { color: var(--purple); border-bottom:1px solid var(--purple); }

/* fullscreen image lightbox */
.lightbox { position: fixed; inset:0; z-index:125; }
.lightbox__bg { position:absolute; inset:0; background:#08080acc; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lightbox__img { box-shadow: 0 60px 140px #000a; }
.lightbox__close { position:fixed; right:24px; top:22px; z-index:132; color: var(--white); font-family: var(--font-mono); font-size:12px; letter-spacing:.1em; text-transform:uppercase; mix-blend-mode: difference; }

/* reveal helpers */
[data-reveal]{ opacity:0 }
.no-js [data-reveal]{ opacity:1 }
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important }
  body{ cursor:auto } .cursor,.cursor-ring,.grain{ display:none }
  [data-reveal]{ opacity:1!important; transform:none!important }
  .reveal-media{ clip-path:none!important }
}