/* ============================================================
   VSN STUDIO — site design system v2 ("The Field")
   Monochrome master · discipline color as light · negative space
   Motion law: 06_Motion/MOTION.md — Settle & Sweep only.
   ============================================================ */

/* ---------- fonts (self-hosted — no external origins) ---------- */
@font-face {
  font-family: 'Space Grotesk';
  src: url('assets/fonts/SpaceGrotesk-var.ttf') format('truetype-variations');
  font-weight: 300 700; font-display: swap;
}
@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins-Light.ttf') format('truetype'); font-weight: 300; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins-Regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Poppins'; src: url('assets/fonts/Poppins-Medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }

/* ---------- tokens ---------- */
:root {
  --forma:#1FA3A6; --signum:#F46B2A; --motus:#E63888; --lumen:#33C7E8; --ai:#6C4DFF; --fabrica:#F2C230;
  --disp:'Space Grotesk',sans-serif; --body:'Poppins',sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);      /* Signature Settle */
  --ease2:cubic-bezier(.7,0,.2,1);      /* Mechanical Sweep */
  --t-tap:150ms; --t-micro:300ms; --t-move:480ms; --t-scene:900ms; --t-reveal:1000ms;
  --rise:28px; --stagger:80ms;
  --dc:#F2F0ED;                          /* discipline color — sections override */

  /* DARK UNIVERSE */
  --bg:#060609;
  --bg-grad:radial-gradient(130% 100% at 50% 0%,#0b0b12 0%,#060609 55%,#040406 100%);
  --fg:#F2F0ED; --fg-dim:#92908c; --hair:rgba(242,240,237,.10); --hair2:rgba(242,240,237,.2);
  --panel:rgba(255,255,255,.035); --panel-bd:rgba(255,255,255,.09);
  --particle:235,238,255; --grade:6,6,10;
  --veil:radial-gradient(140% 95% at 50% 42%,transparent 58%,rgba(6,6,9,.9) 100%);
  --shadow:0 30px 90px -25px rgba(0,0,0,.85);
  --media-fog:linear-gradient(180deg,transparent 55%,rgba(6,6,9,.82) 100%);
}
[data-theme="light"] {
  --bg:#faf9f6;
  --bg-grad:linear-gradient(175deg,#fdfcfa 0%,#f6f3ee 50%,#edeae3 100%);
  --fg:#101014; --fg-dim:#6b6963; --hair:rgba(16,16,20,.12); --hair2:rgba(16,16,20,.25);
  --panel:rgba(255,255,255,.7); --panel-bd:rgba(16,16,20,.10);
  --particle:54,58,70; --grade:255,255,255;
  --veil:radial-gradient(140% 95% at 50% 42%,transparent 52%,rgba(250,249,246,.88) 100%);
  --shadow:0 30px 80px -30px rgba(40,40,60,.25);
  --media-fog:linear-gradient(180deg,transparent 60%,rgba(250,249,246,.72) 100%);
  --forma:#187D7F; --signum:#C7470A; --motus:#D81B72; --lumen:#117B93; --fabrica:#8D6C09;
}

/* ---------- base ---------- */
* { margin:0; padding:0; box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scrollbar-width:thin; scrollbar-color:var(--hair2) transparent; }
body {
  background:var(--bg); background-image:var(--bg-grad); background-attachment:fixed;
  color:var(--fg); font-family:var(--body); font-weight:300; font-size:16px; line-height:1.7;
  overflow-x:hidden; transition:background var(--t-scene) var(--ease), color var(--t-scene) var(--ease);
}
::selection { background:rgba(242,240,237,.9); color:#060609; }
[data-theme="light"] ::selection { background:#101014; color:#faf9f6; }
img, video { max-width:100%; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; color:inherit; background:none; border:none; cursor:pointer; }
.skip { position:fixed; inset-inline-start:12px; top:-48px; z-index:300; background:var(--fg); color:var(--bg); padding:10px 18px; border-radius:4px; transition:top .2s var(--ease); }
.skip:focus { top:12px; }

/* ---------- atmosphere stack (depth 0-2) ---------- */
#field { position:fixed; inset:0; z-index:0; pointer-events:none; }
#field canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
#veil { position:fixed; inset:0; z-index:1; pointer-events:none; background:var(--veil); }
#grain { position:fixed; inset:-50%; width:200%; height:200%; z-index:2; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  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.8' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.8'/%3E%3C/svg%3E");
  animation:grain 9s steps(10) infinite; }
@keyframes grain { 0%,100%{transform:translate(0,0)} 20%{transform:translate(-3%,2%)} 40%{transform:translate(2%,-3%)} 60%{transform:translate(-2%,-2%)} 80%{transform:translate(3%,3%)} }

/* ---------- content plane ---------- */
main { position:relative; z-index:10; }
.shell { width:min(1240px, calc(100% - 96px)); margin-inline:auto; }
@media (max-width:720px){ .shell { width:calc(100% - 44px); } }

/* ---------- nav ---------- */
/* NOTE: never put backdrop-filter/transform on #nav itself — it would become
   the containing block for the fixed mobile menu (the .nav-links panel). The
   blur lives on the ::after underlay instead. */
#nav { position:fixed; top:0; inset-inline:0; z-index:120; }
#nav::after { content:''; position:absolute; inset:0; z-index:-1; opacity:0; backdrop-filter:blur(14px); background:rgba(var(--grade),.55); border-bottom:1px solid var(--hair); transition:opacity var(--t-move) var(--ease); }
#nav .bar { display:flex; align-items:center; justify-content:space-between; padding:22px 0; transition:padding var(--t-move) var(--ease); }
#nav.scrolled::after { opacity:1; }
#nav.scrolled .bar { padding:14px 0; }
.nav-logo { display:flex; align-items:center; gap:14px; }
.nav-logo svg { height:20px; width:auto; fill:var(--fg); transition:fill var(--t-scene) var(--ease); }
.nav-links { display:flex; gap:34px; align-items:center; font-family:var(--disp); font-size:12.5px; letter-spacing:.18em; text-transform:uppercase; }
.nav-links a { color:var(--fg-dim); position:relative; padding:4px 0; transition:color var(--t-micro) var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color:var(--fg); }
.nav-links a::after { content:''; position:absolute; bottom:0; inset-inline-start:0; width:0; height:1px; background:var(--dc); transition:width var(--t-move) var(--ease2); }
.nav-links a:hover::after { width:100%; }
.theme-btn { width:38px; height:38px; border-radius:50%; border:1px solid var(--panel-bd); background:var(--panel); display:grid; place-items:center; position:relative; transition:transform var(--t-move) var(--ease); }
.theme-btn:hover { transform:scale(1.08) rotate(12deg); }
.theme-btn svg { width:16px; height:16px; position:absolute; transition:all .55s var(--ease); stroke:var(--fg); fill:none; stroke-width:1.5; }
.theme-btn .ic-sun { opacity:0; transform:rotate(-100deg) scale(.4); }
[data-theme="light"] .theme-btn .ic-sun { opacity:1; transform:none; }
[data-theme="light"] .theme-btn .ic-moon { opacity:0; transform:rotate(100deg) scale(.4); }
.burger { display:none; }
@media (max-width:880px){
  .nav-links { position:fixed; inset:0; background:rgba(var(--grade),.96); backdrop-filter:blur(20px); flex-direction:column; justify-content:center; gap:30px; font-size:17px; transform:translateY(-100%); transition:transform var(--t-scene) var(--ease2); }
  .nav-links.open { transform:none; }
  .burger { display:grid; place-items:center; width:38px; height:38px; z-index:130; }
  .burger span { display:block; width:20px; height:1.5px; background:var(--fg); position:relative; transition:background .2s; }
  .burger span::before, .burger span::after { content:''; position:absolute; inset-inline-start:0; width:20px; height:1.5px; background:var(--fg); transition:transform var(--t-move) var(--ease); }
  .burger span::before { top:-6px; } .burger span::after { top:6px; }
  .burger[aria-expanded="true"] span { background:transparent; }
  .burger[aria-expanded="true"] span::before { transform:translateY(6px) rotate(45deg); }
  .burger[aria-expanded="true"] span::after { transform:translateY(-6px) rotate(-45deg); }
}

/* ---------- progress rail ---------- */
#rail { position:fixed; inset-inline-end:26px; top:50%; transform:translateY(-50%); z-index:110; display:flex; flex-direction:column; gap:14px; }
#rail a { width:8px; height:8px; border-radius:50%; border:1px solid var(--hair2); position:relative; transition:all var(--t-move) var(--ease); }
#rail a.on { background:var(--dc); border-color:var(--dc); box-shadow:0 0 12px 0 var(--dc); }
#rail a span { position:absolute; inset-inline-end:20px; top:50%; transform:translateY(-50%); font-family:var(--disp); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-dim); opacity:0; white-space:nowrap; transition:opacity var(--t-micro); pointer-events:none; }
#rail a:hover span { opacity:1; }
@media (max-width:880px){ #rail { display:none; } }

/* ---------- typography ---------- */
.kicker { font-family:var(--disp); font-size:12px; font-weight:400; letter-spacing:.34em; text-transform:uppercase; color:var(--dc); display:flex; align-items:center; gap:16px; }
.kicker::before { content:''; width:44px; height:1px; background:linear-gradient(90deg, var(--dc), transparent); }
.display { font-family:var(--disp); font-weight:300; line-height:1.04; letter-spacing:-.015em; font-size:clamp(2.6rem, 7vw, 6.4rem); }
.display b { font-weight:500; }
.lede { font-size:clamp(1.02rem, 1.5vw, 1.2rem); color:var(--fg-dim); max-width:56ch; }
.hairline { height:1px; background:linear-gradient(90deg, transparent, var(--hair2), transparent); border:0; }

/* ---------- scenes ---------- */
.scene { position:relative; padding:min(19vh,190px) 0; }
.scene-hero { min-height:100svh; display:grid; place-items:center; padding:0; }
.reveal { opacity:0; transform:translateY(var(--rise)); transition:opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease); }
.reveal.in { opacity:1; transform:none; }
.reveal:nth-child(2){ transition-delay:calc(var(--stagger)*1); }
.reveal:nth-child(3){ transition-delay:calc(var(--stagger)*2); }
.reveal:nth-child(4){ transition-delay:calc(var(--stagger)*3); }

/* hero */
#logoBox { position:relative; width:min(760px, 82vw); aspect-ratio:4849/909; }
#heroSub { position:absolute; top:118%; inset-inline-start:0; width:100%; text-align:center; }
/* S-axis law: STUDIO centres at 51.6% of the painted wordmark width */
#studioLine { position:absolute; top:128%; inset-inline-start:51.6%; transform:translateX(-50%); font-family:var(--body); font-weight:500; font-size:clamp(11px,1.6vw,15px); letter-spacing:.78em; margin-inline-end:-.78em; color:var(--fg); opacity:0; transition:opacity 1.4s var(--ease) .1s; }
#studioRule { position:absolute; top:158%; inset-inline-start:51.6%; transform:translateX(-50%) scaleX(0); width:clamp(46px,6vw,76px); height:2px; background:var(--fg); opacity:.9; transition:transform 1.1s var(--ease2) .5s; transform-origin:center; }
.hero-done #studioLine { opacity:1; }
.hero-done #studioRule { transform:translateX(-50%) scaleX(1); }
.hero-meta { position:absolute; bottom:42px; inset-inline:0; display:flex; justify-content:space-between; align-items:flex-end; font-family:var(--disp); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--fg-dim); }
.scroll-cue { display:flex; flex-direction:column; align-items:center; gap:10px; }
.scroll-cue i { width:1px; height:56px; background:var(--hair2); position:relative; overflow:hidden; }
.scroll-cue i::after { content:''; position:absolute; inset-inline-start:0; top:-40%; width:100%; height:40%; background:var(--fg); animation:cue 2.2s var(--ease2) infinite; }
@keyframes cue { 0%{top:-40%} 60%,100%{top:110%} }

/* manifesto */
.manifesto { min-height:78vh; display:grid; place-items:center; text-align:center; }
.manifesto .display { font-size:clamp(1.9rem, 4.6vw, 4.2rem); }
.manifesto .line { display:block; overflow:hidden; }
.manifesto .line span { display:inline-block; transform:translateY(110%); transition:transform 1.1s var(--ease); }
.manifesto.in .line span { transform:none; }
.manifesto .line:nth-child(2) span { transition-delay:.12s; }
.manifesto .line:nth-child(3) span { transition-delay:.24s; }
.manifesto .line:nth-child(4) span { transition-delay:.36s; }
.manifesto .dim { color:var(--fg-dim); }

/* ---------- discipline scenes ---------- */
.disc { --dc:var(--fg); }
/* motif-anchor rides the viewport (sticky, zero layout impact via negative margin)
   so the discipline constellation stays with you through the whole section */
.motif-anchor { position:sticky; top:16vh; height:min(56vh,520px); margin-bottom:calc(-1 * min(56vh,520px)); width:min(44vw,620px); margin-inline-start:auto; margin-inline-end:2%; pointer-events:none; }
@media (max-width:960px){ .motif-anchor { width:86%; margin-inline:7%; height:38vh; margin-bottom:-38vh; top:26vh; } }
.disc[data-d="forma"]   { --dc:var(--forma); }
.disc[data-d="signum"]  { --dc:var(--signum); }
.disc[data-d="motus"]   { --dc:var(--motus); }
.disc[data-d="lumen"]   { --dc:var(--lumen); }
.disc[data-d="ai"]      { --dc:var(--ai); }
.disc[data-d="fabrica"] { --dc:var(--fabrica); }
.disc-head { display:grid; grid-template-columns:1fr auto; gap:28px; align-items:end; margin-bottom:64px; }
.disc-idx { font-family:var(--disp); font-size:clamp(4rem,9vw,8rem); font-weight:300; line-height:.9; color:transparent; -webkit-text-stroke:1px var(--hair2); transition:color 1.2s var(--ease), -webkit-text-stroke 1.2s var(--ease); }
.disc.in .disc-idx { color:color-mix(in srgb, var(--dc) 16%, transparent); -webkit-text-stroke:1px color-mix(in srgb, var(--dc) 55%, transparent); }
.disc-name { font-family:var(--disp); font-weight:500; font-size:clamp(2.4rem,5.4vw,4.6rem); letter-spacing:.04em; }
.disc-name::after { content:''; display:block; width:0; height:2px; margin-top:14px; background:var(--dc); transition:width 1.2s var(--ease2) .2s; }
.disc.in .disc-name::after { width:76px; }
.disc-tag { color:var(--dc); font-family:var(--disp); letter-spacing:.3em; text-transform:uppercase; font-size:12px; margin-top:10px; }
.disc-body { display:grid; grid-template-columns:minmax(280px,42ch) 1fr; gap:64px; align-items:start; }
@media (max-width:960px){ .disc-body { grid-template-columns:1fr; gap:36px; } .disc-head { grid-template-columns:1fr; align-items:start; } }
.caps { list-style:none; margin-top:26px; display:flex; flex-wrap:wrap; gap:9px; }
.caps li { font-size:12px; font-family:var(--disp); letter-spacing:.12em; text-transform:uppercase; color:var(--fg-dim); border:1px solid var(--hair); padding:7px 14px; border-radius:100px; transition:all var(--t-micro) var(--ease); }
.caps li:hover { border-color:var(--dc); color:var(--dc); }
.disc-link { display:inline-flex; align-items:center; gap:12px; margin-top:34px; font-family:var(--disp); font-size:12.5px; letter-spacing:.24em; text-transform:uppercase; color:var(--fg); }
.disc-link i { width:34px; height:1px; background:var(--dc); transition:width var(--t-move) var(--ease2); }
.disc-link:hover i { width:56px; }

/* ---------- carousel ---------- */
.crsl { position:relative; }
.crsl-track { display:flex; gap:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding-bottom:6px; }
.crsl-track::-webkit-scrollbar { display:none; }
.crsl-card { flex:0 0 min(430px, 78vw); scroll-snap-align:start; position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--hair); background:var(--panel); cursor:zoom-in; transform:perspective(900px); transition:transform var(--t-move) var(--ease), border-color var(--t-move); }
.crsl-card:hover { transform:perspective(900px) translateY(-4px); border-color:color-mix(in srgb, var(--dc) 45%, transparent); }
.crsl-card .ph { aspect-ratio:16/10; position:relative; overflow:hidden; background:
  radial-gradient(120% 120% at 30% 20%, color-mix(in srgb, var(--dc) 14%, transparent), transparent 60%),
  linear-gradient(160deg, rgba(255,255,255,.05), transparent 55%); }
.crsl-card .ph img { width:100%; height:100%; object-fit:cover; transform:scale(1.02); transition:transform 1.4s var(--ease); position:relative; z-index:1; }
.crsl-card .ph .noimg { z-index:0; }
.crsl-card:hover .ph img { transform:scale(1.07); }
.crsl-card .ph::after { content:''; position:absolute; inset:0; background:var(--media-fog); }
.crsl-card .ph .noimg { position:absolute; inset:0; display:grid; place-items:center; }
.crsl-card .ph .noimg svg { width:44px; opacity:.4; }
.crsl-meta { position:absolute; bottom:0; inset-inline:0; padding:16px 18px; display:flex; justify-content:space-between; align-items:baseline; gap:10px; z-index:2; }
.crsl-meta b { font-family:var(--disp); font-weight:500; font-size:15px; letter-spacing:.02em; }
.crsl-meta span { font-family:var(--disp); font-size:11px; letter-spacing:.2em; color:var(--fg-dim); }
.crsl-nav { display:flex; gap:10px; justify-content:flex-end; margin-top:18px; }
.crsl-nav button { width:44px; height:44px; border-radius:50%; border:1px solid var(--hair); display:grid; place-items:center; transition:all var(--t-micro) var(--ease); }
.crsl-nav button:hover { border-color:var(--dc); color:var(--dc); transform:translateY(-2px); }
.crsl-nav svg { width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.5; }
.crsl-bar { height:1px; background:var(--hair); margin-top:16px; position:relative; overflow:hidden; }
.crsl-bar i { position:absolute; inset-block:0; inset-inline-start:0; width:20%; background:var(--dc); transition:transform var(--t-move) var(--ease2); }

/* ---------- work grid ---------- */
.work-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:18px; margin-top:64px; }
.work-card { position:relative; border-radius:10px; overflow:hidden; border:1px solid var(--hair); cursor:zoom-in; grid-column:span 4; transition:transform var(--t-move) var(--ease), border-color var(--t-move); }
.work-card:nth-child(6n+1), .work-card:nth-child(6n+6) { grid-column:span 8; }
@media (max-width:960px){ .work-card, .work-card:nth-child(6n+1), .work-card:nth-child(6n+6) { grid-column:span 12; } }
.work-card:hover { transform:translateY(-4px); border-color:var(--hair2); }
.work-card .ph { aspect-ratio:16/9; position:relative; background:
  radial-gradient(130% 130% at 25% 15%, color-mix(in srgb, var(--dc) 12%, transparent), transparent 55%),
  linear-gradient(150deg, rgba(255,255,255,.04), transparent); }
.work-card .ph img, .work-card .ph video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1.6s var(--ease); }
.work-card:hover .ph img, .work-card:hover .ph video { transform:scale(1.05); }
.work-card .ph::after { content:''; position:absolute; inset:0; background:var(--media-fog); }
.work-meta { position:absolute; bottom:0; inset-inline:0; padding:20px 22px; z-index:2; display:flex; justify-content:space-between; align-items:baseline; }
.work-meta b { font-family:var(--disp); font-weight:500; font-size:16.5px; }
.work-meta .wm-r { font-family:var(--disp); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--dc); }

/* ---------- lightbox ---------- */
#lightbox { border:none; padding:0; background:transparent; max-width:100vw; max-height:100vh; width:100vw; height:100vh; }
#lightbox::backdrop { background:rgba(4,4,7,.93); backdrop-filter:blur(18px); }
.lb-stage { position:fixed; inset:0; display:grid; place-items:center; padding:clamp(18px,4vw,64px); }
.lb-media { max-width:100%; max-height:calc(100vh - 170px); border-radius:8px; box-shadow:var(--shadow); animation:lbIn .5s var(--ease); }
@keyframes lbIn { from { opacity:0; transform:translateY(22px) scale(.97);} }
.lb-cap { position:fixed; bottom:34px; inset-inline:0; text-align:center; }
.lb-cap b { font-family:var(--disp); font-weight:500; letter-spacing:.04em; font-size:16px; color:#F2F0ED; }
.lb-cap span { display:block; margin-top:4px; font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-family:var(--disp); color:rgba(242,240,237,.55); }
.lb-btn { position:fixed; z-index:5; width:52px; height:52px; border-radius:50%; border:1px solid rgba(242,240,237,.25); background:rgba(255,255,255,.05); backdrop-filter:blur(8px); display:grid; place-items:center; color:#F2F0ED; transition:all var(--t-micro) var(--ease); }
.lb-btn:hover { border-color:#F2F0ED; transform:scale(1.06); }
.lb-btn svg { width:18px; height:18px; stroke:currentColor; fill:none; stroke-width:1.5; }
.lb-close { top:26px; inset-inline-end:26px; }
.lb-prev { inset-inline-start:26px; top:50%; transform:translateY(-50%); }
.lb-next { inset-inline-end:26px; top:50%; transform:translateY(-50%); }
.lb-prev:hover, .lb-next:hover { transform:translateY(-50%) scale(1.06); }

/* ---------- process ---------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:64px; counter-reset:step; }
@media (max-width:960px){ .steps { grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .steps { grid-template-columns:1fr; } }
.step { border-top:1px solid var(--hair); padding-top:22px; position:relative; }
.step::before { content:''; position:absolute; top:-1px; inset-inline-start:0; width:0; height:1px; background:var(--fg); transition:width 1.2s var(--ease2); }
.step.in::before { width:52px; }
.step i { font-family:var(--disp); font-size:12px; letter-spacing:.2em; color:var(--fg-dim); font-style:normal; }
.step h3 { font-family:var(--disp); font-weight:500; font-size:19px; margin:12px 0 10px; }
.step p { font-size:14px; color:var(--fg-dim); }

/* ---------- studio ---------- */
.founders { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:56px; }
@media (max-width:840px){ .founders { grid-template-columns:1fr; } }
.founder { border:1px solid var(--hair); border-radius:10px; padding:30px 26px; background:var(--panel); transition:transform var(--t-move) var(--ease), border-color var(--t-move); }
.founder:hover { transform:translateY(-4px); border-color:var(--hair2); }
.founder b { font-family:var(--disp); font-weight:500; font-size:17px; }
.founder i { display:block; font-style:normal; font-family:var(--disp); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-dim); margin:8px 0 14px; }
.founder p { font-size:13.5px; color:var(--fg-dim); }

/* ---------- contact ---------- */
.contact { text-align:center; min-height:88vh; display:grid; place-items:center; }
.contact .display { font-size:clamp(2.4rem,6vw,5.4rem); }
.mailto { display:inline-block; margin-top:34px; font-family:var(--disp); font-weight:400; font-size:clamp(1.15rem,2.6vw,1.9rem); letter-spacing:.04em; border-bottom:1px solid var(--hair2); padding-bottom:6px; transition:all var(--t-micro) var(--ease); }
.mailto:hover { border-color:var(--fg); letter-spacing:.06em; }
form.contact-form { max-width:560px; margin:56px auto 0; text-align:start; display:grid; gap:16px; }
.field { display:grid; gap:8px; }
.field label { font-family:var(--disp); font-size:11px; letter-spacing:.24em; text-transform:uppercase; color:var(--fg-dim); }
.field input, .field textarea, .field select {
  background:var(--panel); border:1px solid var(--panel-bd); border-radius:8px; color:var(--fg);
  padding:13px 16px; font-family:var(--body); font-size:14.5px; transition:border-color var(--t-micro);
}
.field input:focus, .field textarea:focus, .field select:focus { outline:none; border-color:var(--fg-dim); }
.hp { position:absolute; inset-inline-start:-9999px; opacity:0; height:0; overflow:hidden; }
.btn-send { justify-self:start; font-family:var(--disp); font-size:12.5px; letter-spacing:.26em; text-transform:uppercase; border:1px solid var(--fg); padding:15px 34px; border-radius:100px; position:relative; overflow:hidden; transition:color var(--t-move) var(--ease); }
.btn-send::before { content:''; position:absolute; inset:0; background:var(--fg); transform:scaleX(0); transform-origin:left; transition:transform var(--t-move) var(--ease2); z-index:-1; }
.btn-send:hover { color:var(--bg); }
.btn-send:hover::before { transform:scaleX(1); }

/* ---------- footer ---------- */
footer { border-top:1px solid var(--hair); padding:44px 0 40px; position:relative; z-index:10; }
.foot { display:flex; flex-wrap:wrap; gap:22px; justify-content:space-between; align-items:center; font-family:var(--disp); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--fg-dim); }
.foot .dots { display:flex; gap:8px; }
.foot .dots i { width:7px; height:7px; border-radius:50%; }

/* ---------- ticker — the six signatures as drifting circles of light ---------- */
.ticker { overflow:hidden; border-block:1px solid var(--hair); padding:20px 0; position:relative; }
.ticker-track { display:flex; gap:0; width:max-content; animation:tick 46s linear infinite; }
.ticker:hover .ticker-track { animation-play-state:paused; }
.ticker-track span { display:flex; align-items:center; gap:56px; padding-inline-end:56px; }
.ticker-track i { width:8px; height:8px; border-radius:50%; flex:none;
  background:var(--tc, var(--fg)); box-shadow:0 0 10px var(--tc, transparent);
  animation:tickBreathe 3.8s ease-in-out infinite; }
.ticker-track i:nth-child(6n+2) { animation-delay:.63s; }
.ticker-track i:nth-child(6n+3) { animation-delay:1.26s; }
.ticker-track i:nth-child(6n+4) { animation-delay:1.9s; }
.ticker-track i:nth-child(6n+5) { animation-delay:2.53s; }
.ticker-track i:nth-child(6n)   { animation-delay:3.16s; }
@keyframes tickBreathe { 0%,100% { transform:scale(1); opacity:.75; } 50% { transform:scale(1.45); opacity:1; } }
@media (prefers-reduced-motion: reduce) { .ticker-track i { animation:none; } }
@keyframes tick { to { transform:translateX(-50%); } }

/* ---------- discipline page hero ---------- */
.dp-hero { min-height:92svh; display:grid; align-content:center; position:relative; }
.dp-hero .disc-idx { font-size:clamp(6rem,17vw,15rem); position:absolute; inset-inline-end:0; top:16%; z-index:-1; }
.dp-kicker { margin-bottom:26px; }
.dp-title { font-family:var(--disp); font-weight:500; font-size:clamp(3rem,9vw,7.6rem); letter-spacing:.02em; line-height:1; }
.dp-title::after { content:''; display:block; width:86px; height:2px; background:var(--dc); margin-top:26px; transform:scaleX(0); transform-origin:left; animation:ruleIn 1.1s var(--ease2) .7s forwards; }
@keyframes ruleIn { to { transform:none; } }
.dp-lede { margin-top:30px; }
.dp-keyart { margin-top:64px; border-radius:12px; overflow:hidden; border:1px solid var(--hair); position:relative; }
.dp-keyart img { width:100%; aspect-ratio:21/9; object-fit:cover; }
.dp-keyart::after { content:''; position:absolute; inset:0; background:var(--media-fog); pointer-events:none; }
.dp-next { display:flex; justify-content:space-between; align-items:center; padding:44px 0; border-top:1px solid var(--hair); font-family:var(--disp); }
.dp-next a { display:flex; align-items:center; gap:16px; font-size:13px; letter-spacing:.22em; text-transform:uppercase; color:var(--fg-dim); transition:color var(--t-micro); }
.dp-next a:hover { color:var(--nx, var(--fg)); }

/* ---------- motion sanity ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .reveal, .manifesto .line span { opacity:1 !important; transform:none !important; }
  html { scroll-behavior:auto; }
}

/* ═══════════ 2026-07-11 · mobile nav ═══════════ */

/* NOTE: vertical page scroll-snap was removed — CSS proximity snap re-grabbed the
   viewport after you stopped and fought the next scroll (irritating). The page now
   uses plain native scrolling (smoothest). Nav anchor links are eased in JS
   (boot.js) instead of a global scroll-behavior:smooth. The carousels keep their
   own horizontal snap (.crsl-track, unrelated). */

/* on mobile, show the 6 disciplines expanded inside the full-screen menu
   (touch has no hover) — the existing .burger/.nav-links.open system (≤880px)
   handles the panel; this just makes the disciplines dropdown usable there. */
@media (max-width:880px){
  .nav-dd .dd-panel { position:static; opacity:1; visibility:visible; transform:none;
    min-width:0; width:auto; background:none; border:0; backdrop-filter:none; box-shadow:none;
    padding:6px 0 2px; display:grid; gap:2px; }
  .nav-dd .dd-panel::before { content:none; }
  .nav-dd > a::after { content:none !important; }
}

/* reduced-motion: instant anchor jumps (JS reads this and skips easing) */
@media (prefers-reduced-motion: reduce){ html { scroll-behavior:auto; } }