/* GRISAILLE. Studio Peter Varga.
   Tone system: scroll position is tonal position. Black pole (fine art) to white pole (surfaces).
   Fonts: Fraunces 300 (display), Schibsted Grotesk 400 (utility). One weight per face. */

@font-face {
  font-family: 'Fraunces';
  src: url('../assets/fonts/fraunces-300.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('../assets/fonts/schibsted-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #050506;
  --gesso: #0A0A0B;
  --graphite: #232326;
  --steel: #63686F;
  --silver: #C3C6CB;
  --pewter: #A9ADB4;
  --bone: #EDEAE4;
  --lime-white: #F7F5F1;
  --ink: #101012;
  --thread: linear-gradient(180deg, #E8EAED 0%, #9EA3AA 45%, #DFE2E6 60%, #878C93 100%);
  --display: 'Fraunces', 'Times New Roman', serif;
  --utility: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --pad: clamp(20px, 4vw, 56px);
  --measure: 34em;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--black);
  color: var(--lime-white);
  font-family: var(--utility);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--silver); color: var(--ink); }

.skip-link {
  position: absolute; left: var(--pad); top: -48px; z-index: 60;
  background: var(--lime-white); color: var(--ink);
  font: 12px/1 var(--utility); letter-spacing: 0.12em; text-transform: uppercase;
  padding: 12px 16px; text-decoration: none; transition: top 160ms ease;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--silver); outline-offset: 3px; }

/* ---------- Chrome ---------- */

.chrome-top {
  position: absolute; inset: 0 0 auto 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 22px var(--pad);
  mix-blend-mode: difference; color: #FFFFFF;
  pointer-events: none;
}
.mode-3d .chrome-top { position: fixed; }
.mode-3d.at-studio .chrome-top {
  mix-blend-mode: normal; color: var(--ink);
  background: linear-gradient(180deg, rgba(247,245,241,0.94) 55%, rgba(247,245,241,0));
}
.chrome-top a { pointer-events: auto; }

.wordmark {
  font: 12px/1 var(--utility); letter-spacing: 0.22em; text-transform: uppercase;
  color: inherit; text-decoration: none; white-space: nowrap;
}
.wordmark span { opacity: 0.72; }

.chrome-nav { display: flex; gap: clamp(14px, 2.4vw, 34px); }
.chrome-nav a {
  font: 11px/1 var(--utility); letter-spacing: 0.16em; text-transform: uppercase;
  color: inherit; text-decoration: none; opacity: 0.78;
}
.chrome-nav a:hover { opacity: 1; }
.nav-inquire { border-bottom: 1px solid currentColor; padding-bottom: 3px; opacity: 1 !important; }

/* ---------- Stage and enhanced-mode chrome (hidden until mode-3d) ---------- */

.stage { position: fixed; inset: 0; z-index: 1; opacity: 0; pointer-events: none; }
.stage canvas { display: block; width: 100%; height: 100%; }
/* opacity is driven per frame by the engine; no CSS transition to fight it */

.thread-rail { display: none; }
.js .thread-rail {
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  position: fixed; z-index: 42; left: calc(var(--pad) / 2); top: 16vh; bottom: 16vh; width: 44px;
}
.thread-svg { position: absolute; left: 50%; top: 0; height: 100%; width: 2px; transform: translateX(-50%); overflow: visible; mix-blend-mode: difference; }
.thread-track { stroke: rgba(140,145,152,0.32); stroke-width: 2; fill: none; }
.thread-fill {
  stroke: #C3C6CB; stroke-width: 2; fill: none;
  stroke-dasharray: 100; stroke-dashoffset: 100;
  filter: drop-shadow(0 0 6px rgba(195,198,203,0.55));
}
.tick {
  position: relative; z-index: 2; width: 44px; height: 44px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: #FFFFFF; mix-blend-mode: difference;
}
.tick span {
  font: 300 13px/1 var(--display); letter-spacing: 0.06em;
  border: 1px solid rgba(255,255,255,0.34); border-radius: 50%;
  width: 26px; height: 26px; display: grid; place-items: center;
  transition: border-color 200ms ease, transform 200ms ease;
}
.tick:hover span, .tick[aria-current="true"] span { border-color: #FFFFFF; transform: scale(1.12); }

.hud { display: none; }
.mode-3d .hud {
  display: block; position: fixed; z-index: 41;
  left: calc(var(--pad) + 44px); bottom: calc(var(--pad) * 0.9);
  mix-blend-mode: difference; color: #FFFFFF; max-width: 44ch;
  pointer-events: none;
}
.hud-series { font: 11px/1 var(--utility); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; }
.hud-title { font: 300 clamp(20px, 2.2vw, 30px)/1.2 var(--display); margin-top: 6px; }

/* In immersive mode chambers I to III hand their rendering to the stage; they stay in the
   accessibility tree. The threshold becomes a fixed overlay the engine fades on first scroll,
   and the studio chamber remains real flow for the landing. */
.mode-3d .doc .chamber:not(.chamber-studio):not(.chamber-threshold) {
  position: absolute; width: 1px; height: 1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}
.mode-3d .chamber-threshold {
  position: fixed; inset: 0; z-index: 6; background: transparent;
}
.scroll-track { height: 0; }
.mode-3d .scroll-track { height: var(--track-h, 820vh); }

/* ---------- Document (default, no-JS, reduced-motion, low-end): the editorial layer ---------- */

.chamber { position: relative; padding: 18vh var(--pad); }

.chamber-threshold {
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; background: var(--black);
}
.eyebrow {
  font: 11px/1 var(--utility); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--silver); opacity: 0.8;
}
.site-title {
  font: 300 clamp(64px, 14vw, 220px)/0.96 var(--display);
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-top: 26px;
  color: var(--lime-white);
}
/* The title IS the thesis: the word set as the gray spectrum itself, engraved metal, not decoration */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  .site-title {
    background: linear-gradient(100deg, #F7F5F1 0%, #C3C6CB 34%, #6E737A 50%, #C3C6CB 66%, #F7F5F1 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
  }
}
.thesis {
  font: 300 clamp(19px, 2.4vw, 30px)/1.35 var(--display);
  margin-top: 30px; max-width: 24em; color: var(--lime-white);
}
.sub { margin-top: 14px; font-size: 14px; letter-spacing: 0.02em; color: var(--pewter); max-width: 36em; }
.scroll-cue {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
  font: 11px/1 var(--utility); letter-spacing: 0.24em; text-transform: uppercase; color: var(--steel);
}
.scroll-cue::after {
  content: ''; display: block; width: 1px; height: 34px; margin: 12px auto 0;
  background: linear-gradient(180deg, var(--silver), transparent);
  animation: cue-drop 2.4s ease-in-out infinite;
}
@keyframes cue-drop { 0% { transform: scaleY(0); transform-origin: top; } 55% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .scroll-cue::after { animation: none; } }

/* Chapter tonal grounds: the document steps through the spectrum */
.chamber-dark   { background: linear-gradient(180deg, var(--black) 0%, var(--gesso) 30%, var(--graphite) 100%); }
.chamber-bridge { background: linear-gradient(180deg, var(--graphite) 0%, var(--steel) 100%); }
.chamber-light  { background: linear-gradient(180deg, var(--pewter) 0%, var(--bone) 100%); color: var(--ink); }
.chamber-studio { background: linear-gradient(180deg, var(--bone) 0%, var(--lime-white) 14%, var(--lime-white) 100%); color: var(--ink); }

.chapter-head { max-width: 1200px; margin: 0 auto 12vh; }
.numeral {
  font: 300 15px/1 var(--display);
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; border: 1px solid currentColor; border-radius: 50%;
  opacity: 0.7;
}
.chapter-head h2 {
  font: 300 clamp(44px, 7vw, 104px)/1.02 var(--display);
  letter-spacing: 0.01em; margin-top: 22px;
}
.chapter-lead { margin-top: 16px; font-size: 15px; letter-spacing: 0.04em; color: currentColor; opacity: 0.72; max-width: var(--measure); }

/* Figures: generous void, alternating placement */
.piece { max-width: 1200px; margin: 0 auto 16vh; }
.piece img { margin: 0 auto; max-height: 82vh; width: auto; max-width: 100%; }
.piece:nth-of-type(odd) img { margin-left: 0; }
.piece:nth-of-type(even) img { margin-right: 0; }
.piece-wide img, .piece-full img { width: 100%; max-height: none; }
.piece-full { max-width: none; margin-left: calc(-1 * var(--pad)); margin-right: calc(-1 * var(--pad)); }
.piece-full figcaption { padding: 0 var(--pad); }

.piece figcaption { margin-top: 18px; display: flex; gap: 18px; align-items: baseline; }
.p-series { font: 11px/1 var(--utility); letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.66; }
.p-title { font: 300 17px/1.3 var(--display); }
.p-sold {
  font: 10px/1 var(--utility); letter-spacing: 0.18em; text-transform: uppercase;
  border: 1px solid currentColor; border-radius: 999px; padding: 4px 10px; opacity: 0.55;
}

.beat-line {
  font: 300 clamp(30px, 5vw, 64px)/1.15 var(--display);
  text-align: center; padding: 10vh 0 14vh; max-width: 16em; margin: 0 auto;
}

/* ---------- Studio chamber ---------- */

.index-grid {
  max-width: 1280px; margin: 0 auto 14vh;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.index-grid figure { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--bone); }
.index-grid img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms cubic-bezier(0.2, 0.6, 0.2, 1); }
.index-grid figure:hover img { transform: scale(1.045); }
.index-grid figcaption {
  position: absolute; inset: auto 0 0 0; padding: 22px 10px 8px;
  font: 10px/1.3 var(--utility); letter-spacing: 0.12em; text-transform: uppercase; color: #FFFFFF;
  background: linear-gradient(180deg, transparent, rgba(5,5,6,0.72));
  opacity: 0; transition: opacity 300ms ease;
}
.index-grid figure:hover figcaption, .index-grid figure:focus-within figcaption { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .index-grid img, .index-grid figcaption { transition: none; }
}

.studio-close {
  max-width: 1100px; margin: 0 auto 14vh;
  display: grid; grid-template-columns: minmax(260px, 420px) 1fr; gap: clamp(24px, 5vw, 72px); align-items: end;
}
.portrait img { width: 100%; }
.credentials p { font: 300 clamp(22px, 2.6vw, 34px)/1.45 var(--display); max-width: 21em; }

.inquire { max-width: 1100px; margin: 0 auto; padding: 10vh 0 14vh; border-top: 1px solid rgba(16,16,18,0.14); }
.inquire-line { font: 300 clamp(34px, 5vw, 72px)/1.12 var(--display); max-width: 15em; }
.button {
  display: inline-block; margin-top: 40px;
  font: 12px/1 var(--utility); letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--lime-white); background: var(--ink); text-decoration: none;
  padding: 20px 44px; border: 1px solid var(--ink);
  transition: background 220ms ease, color 220ms ease;
}
.button:hover { background: transparent; color: var(--ink); }

.site-foot {
  max-width: 1100px; margin: 0 auto; padding: 26px 0 8px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 20px; flex-wrap: wrap;
  border-top: 1px solid rgba(16,16,18,0.14);
  font-size: 12px; letter-spacing: 0.06em; color: rgba(16,16,18,0.62);
}
.site-foot nav { display: flex; gap: 22px; }
.site-foot a { color: inherit; text-decoration: none; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.site-foot a:hover { color: var(--ink); }

/* ---------- Mobile ---------- */

@media (max-width: 720px) {
  .chrome-top { padding: 16px var(--pad); }
  .chrome-nav { display: none; }
  .mode-3d .chrome-nav { display: none; }
  body:not(.mode-3d) .chrome-nav { display: flex; position: absolute; top: 44px; left: var(--pad); }
  /* clear the thread rail: content starts right of the 44px rail zone */
  .chamber { padding: 14vh 24px 14vh 58px; }
  .chamber-threshold { padding-left: 52px; padding-right: 52px; }
  /* the title must fit inside the rail-cleared column; 12.5vw at 390px wide is 273px of glyphs */
  .site-title { font-size: clamp(40px, 12.5vw, 200px); letter-spacing: 0.03em; }
  .thesis { font-size: 17px; }
  .piece { margin-bottom: 11vh; }
  .piece img { max-height: 70vh; }
  .studio-close { grid-template-columns: 1fr; align-items: start; }
  .js .thread-rail { left: 4px; top: 20vh; bottom: 20vh; width: 40px; }
  .hud, .mode-3d .hud { left: var(--pad); right: var(--pad); bottom: 18px; }
  .index-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
}

/* Safety: the mobile no-JS nav row must never overlap content */
@media (max-width: 720px) {
  html:not(.js) .chamber-threshold, body:not(.mode-3d) .chamber-threshold { padding-top: 20vh; }
}