/* =========================================================
   Landing page – Variante 2 (loaded after home.css)
   Aligns the landing page with the project pages:
   Geist Mono for technical annotations, Doto as rare accent,
   no decorative eyebrow labels.
   ========================================================= */

:root {
  --mono: 'Geist Mono', ui-monospace, monospace;
  --dot: 'Doto', ui-monospace, monospace;
}

/* Technical annotation layer – same role as on the project pages */
.hero-meta,
.project-cat-header,
.project-num-header,
.stat-l,
.footer-credit,
.footer-link { font-family: var(--mono); letter-spacing: 0.08em; }
.project-num-header { color: #3a3a3a; }


/* Accent word in the hero, like "cold." / "to paint." on the project pages */
.hero-title .accent { font-family: var(--dot); font-weight: 800; letter-spacing: -0.02em; word-spacing: -0.34em; color: #5a5a5a; }


/* ── HERO – full-bleed like the project covers ── */
/* snap positions ignore the area under the sticky nav, so the hero is never tucked beneath it */
html { scroll-padding-top: 66px; }
.hero-wrap { max-width: none; padding: 0; }
.hero { aspect-ratio: auto; height: calc(100svh - 66px); min-height: 520px; max-height: none; border-radius: 0; }
/* hero text belongs to the full-bleed image: fixed distance to the screen edge */
.hero-content { padding: 3.5rem max(2.5rem, 3vw); }
.hero-meta { top: 1.75rem; right: max(2.5rem, 3vw); }
.hero-title { font-size: clamp(48px, 7.5vw, 140px); font-weight: 600; line-height: 0.88; letter-spacing: -0.05em; }
.hero-sub { font-size: clamp(15px, 1.15vw, 19px); line-height: 1.6; max-width: 22em; }

/* ── BOTTOM: stats + about + contact + footer fit one screen ── */
/* sizes scale with the viewport height, capped on large monitors */
.stats-section { padding-top: clamp(1.5rem, 4vh, 4rem); padding-bottom: clamp(1.5rem, 4vh, 5rem); }
.stat-n { font-size: clamp(32px, min(5.2vw, 7vh), 84px); letter-spacing: -0.03em; }
.about-section { padding-bottom: clamp(1.5rem, 4vh, 4rem); }
.about-name { font-size: clamp(34px, min(5vw, 7vh), 76px); letter-spacing: -0.03em; margin-bottom: clamp(0.75rem, 2.5vh, 2rem); }
.about-body { font-size: 16px; line-height: 1.75; color: #666; }
.contact-xl { padding-top: clamp(1.75rem, 4vh, 6rem); padding-bottom: clamp(1.25rem, 3vh, 4rem); }
.contact-xl-title { font-size: clamp(72px, min(14vw, 20vh), 240px); }
.contact-xl-meta { margin-top: clamp(1.25rem, 3vh, 3.5rem); }
.footer { padding-top: clamp(1.25rem, 3vh, 4rem); padding-bottom: clamp(1.25rem, 3vh, 3rem); }
@media (min-width: 769px) {
  .about-inner { grid-template-columns: auto 1fr; gap: clamp(2.5rem, 5vw, 5rem); }
  .about-img-wrap { width: clamp(140px, 24vh, 300px); }
}

@media (max-width: 768px) {
  .hero-wrap { padding: 0; }
  .hero { height: 78svh; min-height: 0; }
  .hero-content { padding: 2rem 1rem; }
  .hero-meta { right: 1rem; }
}

/* Doto accent over the slideshow images */
.hero-title .accent { color: rgba(255,255,255,0.55); }

/* ── INTRO – the claim as its own section, like the lead on the project pages ── */
/* a full screen of its own; narrow text block (3 lines), left-aligned but centred on the page */
.home-intro { min-height: calc(100svh - 66px); display: flex; align-items: center; justify-content: center; padding: 6rem 2.5rem; scroll-snap-align: center; scroll-snap-stop: always; }
.home-lead { width: 100%; max-width: 15.5em; font-size: clamp(30px, 4.2vw, 72px); font-weight: 500; line-height: 1.12; letter-spacing: -0.03em; color: #4a4a4a; }
.home-lead strong { font-weight: 500; color: var(--text); }
.home-lead .accent { font-family: var(--dot); font-weight: 800; letter-spacing: -0.02em; word-spacing: -0.34em; color: var(--text); }
.claim-box { position: relative; width: 100%; max-width: calc(15.5 * clamp(30px, 4.2vw, 72px)); }
.claim-box .home-lead { max-width: none; }

/* dimension lines like a technical drawing – position and length are set by js/claim.js to the exact text bounds */
.dim { position: absolute; background: #2e2e2e; color: #4a4a4a; font: 400 11px/1 var(--mono); letter-spacing: 0.08em; opacity: 0; transition: opacity 0.6s ease; }
.dim.is-set { opacity: 1; }
.dim span { position: absolute; padding: 0 12px; background: var(--bg); white-space: nowrap; }
.dim::before, .dim::after { content: ''; position: absolute; background: #4a4a4a; }
.dim-h { height: 1px; }
.dim-h::before, .dim-h::after { top: -6px; width: 1px; height: 13px; }
.dim-h::before { left: 0; } .dim-h::after { right: 0; }
.dim-h span { left: 50%; top: 0; transform: translate(-50%, -50%); }
.dim-v { width: 1px; }
.dim-v::before, .dim-v::after { left: -6px; width: 13px; height: 1px; }
.dim-v::before { top: 0; } .dim-v::after { bottom: 0; }
.dim-v span { top: 50%; left: 0; transform: translate(-50%, -50%) rotate(-90deg); }

/* words light up one by one while scrolling in (letters inside the Doto accent) */
.home-lead .w { color: #1e1e1e; transition: color 0.25s linear; }
.home-lead .w.on { color: #4a4a4a; }
.home-lead strong .w.on { color: var(--text); }

@media (max-width: 768px) {
  .home-intro { min-height: 80svh; padding: 4rem 1rem 4rem 2.5rem; }
  .dim-v span { display: none; }
}

/* snap scrolling switched off for now – the snap rules in home.css and the active/dim logic in home.js stay */
html, body { scroll-snap-type: none; }

/* hero: last 24 px fade into the page background (colour + the same noise texture as body), so the image has no hard bottom edge */
.hero-vignette::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 24px;
  background-color: var(--bg); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.025'/%3E%3C/svg%3E"); background-size: 200px 200px; background-attachment: fixed;   /* same as body */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000); mask-image: linear-gradient(to bottom, transparent, #000); }