/* ==========================================================================
   Vaakh. Implemented from the Claude Design project "Vaakh Site".

   Inline styles from the design source are extracted to classes here, so the
   page has one place where every value is decided.

   House rule kept from the rest of the site: no em dashes and no en dashes in
   visible copy. The design source carried several; they are hyphens, colons or
   commas here.
   ========================================================================== */

@font-face{font-family:'Newsreader';src:url('/assets/fonts/newsreader.woff2') format('woff2-variations');
  font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Spline Sans Mono';src:url('/assets/fonts/spline-mono.woff2') format('woff2-variations');
  font-weight:300 700;font-style:normal;font-display:swap}
/* Poppins has no variable release, so this is a single static weight. It is used
   for the Prelude wordmark and nothing else. For more presence, swap in the 300
   file and change the weight below; nothing else needs to move. */
@font-face{font-family:'Poppins';src:url('/assets/fonts/poppins-200.woff2') format('woff2');
  font-weight:200;font-style:normal;font-display:swap}

:root{
  --ink:#10140f;
  --ink-2:#33382f;
  --ink-3:#4b524c;
  --ink-4:#6a7069;
  --ink-5:#9aa09a;
  --acc:#2e7d4f;
  --acc-deep:#245f3d;
  --paper:#ffffff;
  --dark:#0a0f0b;
  --line:rgba(16,20,15,0.14);
  --serif:'Newsreader',Georgia,serif;
  --mono:'Spline Sans Mono',ui-monospace,monospace;
  --wordmark:'Poppins',system-ui,sans-serif;
  --ease:cubic-bezier(0.2,0.7,0.2,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
a:hover{color:var(--acc)}
::selection{background:var(--acc);color:var(--paper)}
h1,h2,h3,p{margin:0}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px}

@keyframes rise{to{transform:translateY(0)}}
@keyframes fadeUp{to{opacity:1;transform:none}}
@keyframes blink{0%,55%{opacity:1}56%,100%{opacity:0}}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--acc);color:#fff;
  padding:.9rem 1.4rem;font-family:var(--mono);font-size:12px;letter-spacing:.1em}
.skip:focus{left:0}

/* ---------- nav ---------- */
/* The design source blended the nav with mix-blend-mode:difference. That turned
   the green mark black on white, and inverted the green hover into pink. The nav
   now carries an explicit state instead: ink on the white page, light while the
   Prelude chapter is behind it. The mark keeps its own green, and is knocked to
   white only over the dark. */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;color:var(--ink);
  display:flex;justify-content:space-between;align-items:center;padding:22px 4vw;
  font-family:var(--mono);font-size:11px;letter-spacing:0.22em;
  transition:color .5s ease}
.nav a{transition:color .3s ease}
.nav a:hover{color:var(--acc)}
.nav-brand{display:flex;align-items:center;gap:11px}
.nav-brand img{height:26px;width:auto;display:block;transition:filter .5s ease}
.nav-word{font-family:var(--serif);font-size:19px;font-weight:500;letter-spacing:0.12em;line-height:1}
.nav-links{display:flex;gap:32px}
.nav-links a{color:var(--ink-4)}
.nav.on-dark{color:#f4f7f4}
.nav.on-dark .nav-links a{color:rgba(244,247,244,0.72)}
.nav.on-dark a:hover{color:#9fe0b8}
.nav.on-dark .nav-brand img{filter:brightness(0) invert(1)}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;
  position:relative;overflow:hidden}
.hero-in{padding:0 4vw;max-width:1280px}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(52px,8.6vw,124px);
  line-height:1.04;letter-spacing:-0.02em;text-wrap:balance}
.hero h1 .ln{display:block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em}
.hero h1 .ln > span{display:inline-block;transform:translateY(112%);
  animation:rise 1s var(--ease) forwards}
.hero h1 .ln:nth-child(1) > span{animation-delay:.2s}
.hero h1 .ln:nth-child(2) > span{animation-delay:.38s;color:var(--acc)}
.hero-cue{display:flex;justify-content:flex-end;margin:26px 0 0}
.hero-cue p{font-family:var(--mono);font-size:10.5px;letter-spacing:0.28em;color:var(--ink-5);
  opacity:0;animation:fadeUp .9s ease 1.1s forwards}
.sig{width:100%;height:210px;display:block;margin-top:10px}

/* ---------- section chrome ---------- */
.rule{display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  border-bottom:1px solid var(--line);padding-bottom:16px}
.tag{font-family:var(--mono);font-size:11px;letter-spacing:0.32em;color:var(--ink-4)}
.tag-acc{color:var(--acc);letter-spacing:0.2em}
.tag-dim{color:var(--ink-5);letter-spacing:0.2em;margin-left:auto}

/* ---------- facts carousel ---------- */
.facts{padding:20vh 4vw;display:flex;align-items:center}
.facts-in{max-width:1100px;margin:0 auto;width:100%}
.car{position:relative;display:grid;margin-top:64px;min-height:240px}
.slide{grid-row:1;grid-column:1;opacity:0;transform:translateY(18px);
  transition:opacity .8s cubic-bezier(0.2,0.6,0.2,1),transform .8s cubic-bezier(0.2,0.6,0.2,1)}
.slide.on{opacity:1;transform:none}
.slide .fig{font-family:var(--serif);font-weight:300;font-size:clamp(48px,7vw,96px);
  line-height:1.02;letter-spacing:-0.02em}
.slide .fig em{font-style:normal;color:var(--acc)}
.slide .cap{margin-top:22px;font-family:var(--serif);font-size:clamp(18px,2vw,23px);
  line-height:1.5;color:var(--ink-3);max-width:640px;text-wrap:pretty}
.dots{display:flex;gap:10px;margin-top:56px}
.dots button{width:38px;height:3px;border:none;padding:0;background:rgba(16,20,15,0.15);
  cursor:pointer;transition:background .4s}
.dots button.on{background:var(--acc)}

/* ---------- the house ---------- */
.house{padding:14vh 4vw 18vh}
.house-in{max-width:1180px;margin:0 auto}
.house .rule{margin-bottom:56px;padding-bottom:18px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.card{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:6px;
  padding:34px 30px 38px;background:var(--paper);cursor:default;
  transition:background .35s,border-color .35s,transform .35s}
.card .ghost{position:absolute;top:-28px;right:14px;font-family:var(--serif);font-weight:300;
  font-size:120px;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(46,125,79,0.3);
  transition:-webkit-text-stroke .35s;pointer-events:none}
.card .idx{margin-bottom:46px;font-family:var(--mono);font-size:12px;letter-spacing:0.2em;
  color:var(--acc);transition:color .35s}
.card h3{margin-bottom:12px;font-family:var(--serif);font-weight:400;font-size:26px;
  letter-spacing:-0.01em;color:var(--ink);transition:color .35s}
.card .body{font-family:var(--serif);font-size:17px;line-height:1.6;color:var(--ink-3);
  transition:color .35s;text-wrap:pretty}
.card:hover{background:var(--acc);border-color:var(--acc);transform:translateY(-4px)}
.card:hover .idx{color:rgba(255,255,255,0.75)}
.card:hover h3{color:#fff}
.card:hover .body{color:rgba(255,255,255,0.88)}
.card:hover .ghost{-webkit-text-stroke:1px rgba(255,255,255,0.45)}

/* ---------- prelude: a timed chapter ------------------------------------ */
/* One screen tall. The sequence plays itself when the section arrives and then
   holds on the final frame, so nothing depends on scroll position. The ground
   rises from below on a class, and its top edge is a lit rule, which makes the
   boundary itself the transition. */
.prelude{position:relative;background:var(--paper)}
.stage{position:relative;height:100svh;overflow:hidden}

/* the ground rises from below, and later keeps rising until it is gone.
   its top edge is a lit rule, so the boundary itself is the transition. */
.curtain{position:absolute;inset:0;background:var(--dark);transform:translateY(100%);
  transition:transform 1.15s cubic-bezier(0.2,0.7,0.2,1);will-change:transform}
.stage.lit .curtain{transform:translateY(0)}
.curtain::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--acc);box-shadow:0 0 24px 2px rgba(46,125,79,0.55)}
/* the ground is flat dark. depth comes from the starfield, not from a wash. */
.stars{position:absolute;inset:0;width:100%;height:100%;display:block;
  opacity:0;transition:opacity 1.6s ease .3s}
.stage.lit .stars{opacity:1}
.phases{position:relative;height:100%;display:grid;place-items:center;padding:0 6vw}
.ph{grid-row:1;grid-column:1;pointer-events:none;opacity:0;transform:translateY(22px);
  transition:opacity .85s cubic-bezier(0.2,0.7,0.2,1),transform .85s cubic-bezier(0.2,0.7,0.2,1)}
.stage.p1 .ph-a,.stage.p2 .ph-b,.stage.p3 .ph-c{opacity:1;transform:none}

.ph-a{border:1px solid rgba(255,255,255,0.14);padding:30px 38px;font-family:var(--mono);
  font-size:12.5px;line-height:2.5;letter-spacing:0.22em;color:#94a099}
.ph-a .cur{display:inline-block;width:0.6em;height:1em;background:#94a099;margin-left:10px;
  vertical-align:-0.15em;animation:blink 1.1s steps(1) infinite}

.ph-b{width:min(700px,86vw);font-family:var(--mono);font-size:16px;line-height:2.4;
  letter-spacing:0.04em;color:#7e8b82}
.bar{display:inline-block;height:0.68em;border-radius:2px;background:#202b23;
  vertical-align:-0.03em;transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(0.2,0.7,0.2,1);transition-delay:calc(var(--i,0) * 42ms)}
.stage.p2 .bar{transform:scaleX(1)}
.hint{color:#6e7a71;transition:color .4s ease,text-shadow .4s ease}
.hint.lit{color:#9fe0b8;text-shadow:0 0 18px rgba(46,125,79,0.6)}

.ph-c{text-align:center;max-width:900px}
.ph-c .kicker{margin-bottom:26px;font-family:var(--mono);font-size:11px;letter-spacing:0.34em;
  color:#7fbf99}
/* thin and spaced. the hero sets Newsreader at 300; this takes the same face to
   its lightest and opens the tracking right out, so the name reads as air rather
   than as mass. the negative right margin cancels the trailing letter-space so
   the word stays optically centred. */
.wm{font-family:var(--wordmark);font-weight:200;font-size:clamp(38px,9.4vw,140px);
  letter-spacing:0.24em;margin-right:-0.24em;line-height:1.1;color:#f4f7f4;
  white-space:nowrap}
/* no glow here: a blurred text-shadow renders inside each inline-block letter
   and accumulates into a visible rectangle around it. Thin white on this ground
   needs no help anyway. */
/* The wordmark assembles: each letter travels in from its own direction and
   resolves. Final width is reserved from the start (the letters are laid out in
   place and only transformed), so the centred composition never shifts while it
   comes together. */
.wm span[data-ltr]{display:inline-block;opacity:0;filter:blur(7px);
  transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0deg));
  transition:opacity .85s cubic-bezier(0.16,1,0.3,1),
             transform 1.25s cubic-bezier(0.16,1,0.3,1),
             filter .85s ease;
  transition-delay:calc(var(--i,0) * 78ms)}
.stage.p3 .wm span[data-ltr]{opacity:1;filter:blur(0);transform:none}
/* once assembled, drop the filter so seven compositing layers are not kept
   alive for the rest of the page */
.wm.settled span[data-ltr]{filter:none}

/* ---------- contact ---------- */
.contact{padding:20vh 4vw 12vh}
.contact-in{max-width:1180px;margin:0 auto}
.contact h2{font-family:var(--serif);font-weight:300;font-size:clamp(38px,5.4vw,72px);
  line-height:1.08;letter-spacing:-0.018em;max-width:800px;text-wrap:balance}
.routes{margin-top:72px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:20px}
.route{border:1px solid var(--line);border-radius:6px;padding:30px 28px 34px;background:var(--paper);
  transition:border-color .35s,transform .35s,box-shadow .35s}
.route:hover{border-color:var(--acc);transform:translateY(-4px);
  box-shadow:0 14px 34px rgba(46,125,79,0.12)}
.route .lab{margin-bottom:34px;font-family:var(--mono);font-size:11px;letter-spacing:0.24em;
  color:var(--acc)}
.route p{font-family:var(--serif);font-size:19px;line-height:1.55;color:var(--ink-2);text-wrap:pretty}
.cta-row{display:flex;align-items:center;gap:28px;flex-wrap:wrap;margin-top:64px}
.cta{display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:0.22em;color:#fff;
  background:var(--acc);padding:18px 36px;border-radius:4px;transition:background .3s}
.cta:hover{background:var(--acc-deep);color:#fff}
.cta-mail{font-family:var(--mono);font-size:12px;letter-spacing:0.12em;color:var(--ink-4)}

/* ---------- footer ---------- */
footer{padding:26px 4vw 30px;display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  font-family:var(--mono);font-size:10.5px;letter-spacing:0.18em;color:var(--ink-5)}
footer a.research{border-bottom:1px solid rgba(46,125,79,0.4);padding-bottom:2px;color:var(--ink-4);
  transition:color .3s,border-color .3s}
footer a.research:hover{color:var(--acc);border-color:var(--acc)}

/* ---------- 404 ---------- */
.nf{min-height:78svh;display:flex;flex-direction:column;justify-content:center;padding:0 4vw;gap:28px}
.nf h1{font-family:var(--serif);font-weight:300;font-size:clamp(38px,6vw,84px);line-height:1.06;
  letter-spacing:-0.02em}

/* ---------- reveal ---------- */
[data-rv]{opacity:0;transform:translateY(26px);
  transition:opacity .9s cubic-bezier(0.2,0.6,0.2,1),transform .9s cubic-bezier(0.2,0.6,0.2,1),
             border-color .35s,box-shadow .35s,background .35s}
[data-rv].in{opacity:1;transform:none}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  [data-rv]{opacity:1;transform:none;transition:none}
  .hero h1 .ln > span{transform:none;animation:none}
  .hero-cue p{opacity:1;animation:none}
  .ph-a .cur{animation:none}
  /* the chapter stops being a scroll performance and becomes one still frame */
  .stage .curtain{transform:none;transition:none}
  .ph-a,.ph-b{display:none}
  .ph-c{opacity:1;transform:none;transition:none}
  .wm span[data-ltr]{opacity:1;filter:none;transform:none;transition:none}
  .stars{opacity:1}
}

@media (max-width: 760px){
  .nav{padding:16px 5vw;font-size:10px;letter-spacing:0.16em}
  .nav-links{gap:18px}
  .nav-word{font-size:16px}
  .nav-brand img{height:22px}
  .sig{height:150px}
  .facts{padding:14vh 5vw}
  .car{margin-top:44px;min-height:200px}
  .house{padding:10vh 5vw 12vh}
  .contact{padding:14vh 5vw 10vh}
  .ph-a{padding:22px 24px;font-size:11px;letter-spacing:0.16em}
  .ph-b{font-size:13px;line-height:2.2}
  footer{gap:14px;font-size:10px}
}