/* ============================================================
   Terra — coming soon
   Built on the "Modernist" design system from the Terra 3C
   Asset Kit. Tokens and component classes below are the kit's;
   anything added for this page is marked EXTENSION.
   ============================================================ */

/* ── Archivo (variable, self-hosted from the kit) ─────────── */
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:100 900;
  font-stretch:100%; font-display:swap;
  src:url("../fonts/archivo-latin.woff2") format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:100 900;
  font-stretch:100%; font-display:swap;
  src:url("../fonts/archivo-latin-ext.woff2") format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:100 900;
  font-stretch:100%; font-display:swap;
  src:url("../fonts/archivo-vietnamese.woff2") format('woff2');
  unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,
    U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB;
}

/* ── Tokens ───────────────────────────────────────────────── */

/* The kit ships a light "paper" theme. This page runs its dark counterpart,
   built from the kit's own reverse-lockup ground (#2b2620) and the interior
   render, with the roles swapped rather than re-invented:

     kit (light)                     here (dark)
     --color-bg      #f3f2f2   →     #211d19   deep soil, a step under 2b2620
     --color-surface #eae9e9   →     #2b2620   the kit's reverse ground
     --color-text    #201e1d   →     #f3f2f2   the kit's paper, now the ink
     --color-accent  #8a4a2b   →     #c9743f   trunk, lifted to carry on dark
     --color-accent-2 #6f7a52  →     #93a06f   canopy, likewise lifted

   Spacing, radii, type and components are unchanged from the kit. */

:root{
  --color-bg: #211d19;
  --color-surface: #2b2620;
  --color-text: #f3f2f2;
  --color-divider: color-mix(in srgb, #f3f2f2 20%, transparent);

  /* kit: neutral ramp (OKLCH, one shared lightness scale) */
  --color-neutral-100:#f8f4f4; --color-neutral-200:#eae7e7;
  --color-neutral-300:#d7d3d3; --color-neutral-400:#bab6b6;
  --color-neutral-500:#9b9797; --color-neutral-600:#7d7979;
  --color-neutral-700:#605d5d; --color-neutral-800:#444141;
  --color-neutral-900:#2d2b2b;

  /* 3C "Terracotta trunk" colorway, at dark-ground luminance */
  --color-accent: #c9743f;     /* trunk, lifted   */
  --color-accent-2: #93a06f;   /* canopy, lifted  */
  --terra-trunk: #8a4a2b;      /* the kit's own trunk, kept for deep fills */
  --terra-canopy: #6f7a52;
  --terra-ink: #3b3128;
  --terra-ground: #2b2620;     /* the kit's reverse-lockup ground */

  /* hover/active steps, built the way the kit builds its ramp */
  --color-accent-600:#dc8a55;
  --color-accent-700:#e8a071;
  --color-accent-wash: color-mix(in srgb, #c9743f 12%, transparent);

  /* kit: type */
  --font-heading:"Archivo", system-ui, sans-serif;
  --font-heading-weight:800;
  --font-body:"Archivo", system-ui, sans-serif;

  /* kit: spacing, 4px base */
  --space-1:4px;  --space-2:8px;  --space-3:12px;
  --space-4:16px; --space-6:24px; --space-8:32px;
  /* EXTENSION: the same base carried up to page scale */
  --space-12:48px; --space-16:64px; --space-24:96px;

  /* kit: corners are square */
  --radius-sm:0px; --radius-md:0px; --radius-lg:0px;

  /* kit: elevation, deepened for a dark ground */
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 3px 10px rgba(0,0,0,.45);
  --shadow-lg:0 12px 32px rgba(0,0,0,.55);

  /* EXTENSION: page rhythm + display step above the kit's h1 (42px) */
  --gut: clamp(20px, 5vw, 64px);
  --sec: clamp(72px, 11vw, 128px);
  --font-display: clamp(34px, 5.2vw, 68px);
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ── Base (kit) ───────────────────────────────────────────── */

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--color-bg); color-scheme:dark; color:var(--color-text);
  font-family:var(--font-body); font-size:15px; line-height:1.55; font-weight:400;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body.is-loading{ overflow:hidden; height:100vh; }

h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading); font-weight:var(--font-heading-weight);
  line-height:1.12; letter-spacing:-.015em; margin:0 0 var(--space-2);
}
h1{ font-size:42px; } h2{ font-size:32px; } h3{ font-size:25px; }
h4{ font-size:20px; } h5{ font-size:16px; }
h6{ font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
p{ margin:0 0 var(--space-3); }
a{ color:var(--color-accent); text-underline-offset:3px; }
img{ display:block; max-width:100%; }
figure{ margin:0; }
figcaption{ font-size:11px; margin-top:var(--space-1); color:color-mix(in srgb, var(--color-text) 55%, transparent); }
ul,ol{ margin:0; padding:0; list-style:none; }
.text-muted{ color:color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }
::selection{ background:color-mix(in srgb, var(--color-accent) 30%, transparent); }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.skip{
  position:fixed; top:-100px; left:var(--space-4); z-index:200;
  background:var(--color-text); color:var(--color-bg); padding:var(--space-2) var(--space-4);
  transition:top .2s var(--ease);
}
.skip:focus-visible{ top:var(--space-4); }

/* fixed header clearance for in-page anchors */
section[id], footer[id]{ scroll-margin-top:clamp(64px,9vh,88px); }

/* ── Buttons (kit) ────────────────────────────────────────── */

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  cursor:pointer; text-decoration:none;
  font-family:var(--font-heading); font-weight:var(--font-heading-weight);
  font-size:14px; line-height:1.2; color:var(--color-text);
  background:transparent; border:1px solid transparent;
  padding:var(--space-2) calc(var(--space-3) * 1.2);
  border-radius:var(--radius-md);
  transition:background .2s var(--ease), color .2s var(--ease),
             border-color .2s var(--ease), transform .3s var(--ease-out);
}
.btn svg{ display:block; }
.btn:disabled{ opacity:.45; cursor:not-allowed; }
.btn-primary{ background:var(--color-accent); color:var(--color-bg); }
.btn-primary:hover{ background:var(--color-accent-600); }
.btn-primary:active{ background:var(--color-accent-700); }
.btn-secondary{ border-color:var(--color-divider); }
.btn-secondary:hover{ background:color-mix(in srgb, var(--color-text) 10%, transparent); border-color:var(--color-text); }
.btn-secondary:active{ background:color-mix(in srgb, var(--color-text) 18%, transparent); }
.btn-ghost{ color:var(--color-accent); padding-inline:var(--space-1); }
.btn-ghost:hover{ background:color-mix(in srgb, var(--color-accent) 10%, transparent); }
/* EXTENSION: a roomier hero-scale button, same component otherwise */
.btn-lg{ font-size:15px; padding:var(--space-3) var(--space-6); }

/* ── Tags (kit) ───────────────────────────────────────────── */

.tag{
  display:inline-flex; align-items:center; gap:6px;
  padding:3px var(--space-2); font-size:11px; letter-spacing:.06em;
  border:1px solid var(--color-divider); border-radius:var(--radius-sm);
}

/* ============================================================
   Page — EXTENSION, composed from the components above
   ============================================================ */

/* ── Ambient layers (film grain, cursor, pointer glow) ────── */

.grain{
  position:fixed; inset:0; z-index:90; width:100%; height:100%;
  pointer-events:none; opacity:.05; mix-blend-mode:overlay;
}
.glow{
  position:fixed; z-index:0; top:0; left:0;
  width:44vmax; height:44vmax; margin:-22vmax 0 0 -22vmax; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb, var(--color-accent) 14%, transparent) 0%,
                                     color-mix(in srgb, var(--color-accent) 4%, transparent) 42%, transparent 70%);
  pointer-events:none; opacity:0; transition:opacity .6s var(--ease); will-change:transform;
}
body.has-fine-pointer .glow{ opacity:1; }

.cursor{ position:fixed; z-index:120; top:0; left:0; pointer-events:none; display:none; }
body.has-fine-pointer .cursor{ display:block; }
.cursor__dot,.cursor__ring{ position:absolute; top:0; left:0; border-radius:50%; transform:translate(-50%,-50%); }
.cursor__dot{ width:5px; height:5px; background:var(--color-accent); }
.cursor__ring{
  width:32px; height:32px; border:1px solid var(--color-divider);
  transition:width .3s var(--ease), height .3s var(--ease), border-color .3s var(--ease);
}
body.cursor-hot .cursor__ring{ width:56px; height:56px; border-color:var(--color-accent); }

/* ── Preloader ────────────────────────────────────────────── */

.loader{
  position:fixed; inset:0; z-index:150;
  display:grid; place-content:center; gap:var(--space-6); justify-items:center;
  background:var(--color-bg);
  transition:opacity .6s var(--ease), visibility .6s;
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__mark{ width:76px; height:auto; animation:breathe 2.4s var(--ease) infinite; }
.loader__bar{ width:min(160px,40vw); height:2px; background:var(--color-divider); overflow:hidden; }
.loader__bar span{ display:block; height:100%; width:0; background:var(--color-accent); transition:width .25s linear; }
@keyframes breathe{ 0%,100%{opacity:.5; transform:scale(.98);} 50%{opacity:1; transform:scale(1);} }

/* ── Header ───────────────────────────────────────────────── */

.nav{
  position:fixed; inset:0 0 auto 0; z-index:80;
  display:flex; align-items:center; justify-content:space-between; gap:var(--space-4);
  padding:var(--space-3) var(--gut);
  border-bottom:1px solid transparent;
  transform:translateY(0);
  transition:transform .45s var(--ease), background .35s var(--ease),
             border-color .35s var(--ease), padding .35s var(--ease);
}
.nav.is-stuck{
  background:color-mix(in srgb, var(--color-bg) 82%, transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom-color:var(--color-divider);
}
.nav.is-hidden{ transform:translateY(-102%); }

.nav__brand{ display:flex; align-items:center; gap:var(--space-2); color:inherit; text-decoration:none; }
.nav__mark{ width:30px; height:auto; }
.nav__word{
  font-family:var(--font-heading); font-weight:var(--font-heading-weight);
  font-size:13px; letter-spacing:.22em; text-transform:uppercase;
}

.nav__links{ display:none; gap:var(--space-8); font-size:13px; letter-spacing:.08em; text-transform:uppercase; }
.nav__links a{ color:var(--color-text); text-decoration:none; position:relative; padding-block:2px; }
.nav__links a::after{
  content:""; position:absolute; left:0; bottom:0; width:100%; height:2px;
  background:var(--color-accent); transform:scaleX(0); transform-origin:right;
  transition:transform .4s var(--ease-out);
}
.nav__links a:hover::after{ transform:scaleX(1); transform-origin:left; }

.nav__side{ display:flex; align-items:center; gap:var(--space-3); }
.lang{
  display:flex; gap:var(--space-1); align-items:center;
  background:none; border:0; cursor:pointer; font:inherit; font-size:12px;
  letter-spacing:.1em; color:color-mix(in srgb, var(--color-text) 50%, transparent);
  font-family:var(--font-heading); font-weight:600;
}
.lang__opt.is-on{ color:var(--color-text); }
.lang__sep{ opacity:.4; }
.nav .btn-primary{ display:none; }

/* ── Hero ─────────────────────────────────────────────────── */

.hero{
  position:relative; min-height:100svh;
  display:grid; align-content:center; justify-items:start; text-align:left;
  padding:clamp(96px,14vh,132px) var(--gut) var(--space-24);
  overflow:hidden;
}

/* The room itself carries the section; the scrim keeps the type legible and
   the warm layer picks up the light already in the photograph. */
.hero__ground{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hero__bg{
  width:100%; height:100%; object-fit:cover; object-position:center right;
  /* the same scale the scroll loop keeps it at, so nothing jumps on first
     scroll and the drift never exposes an edge */
  transform:scale(1.06); will-change:transform;
}
.hero__scrim{
  position:absolute; inset:0;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--color-bg) 88%, transparent) 0%,
                           color-mix(in srgb, var(--color-bg) 70%, transparent) 40%,
                           color-mix(in srgb, var(--color-bg) 16%, transparent) 72%,
                           color-mix(in srgb, var(--color-bg) 26%, transparent) 100%),
    linear-gradient(0deg, var(--color-bg) 0%, color-mix(in srgb, var(--color-bg) 42%, transparent) 15%, transparent 46%);
}
.hero__layer{ position:absolute; inset:0; will-change:transform; }
.hero__layer--warm{
  background:radial-gradient(46% 34% at 22% 100%, color-mix(in srgb, var(--color-accent) 20%, transparent) 0%, transparent 70%);
  animation:warmPulse 7s ease-in-out infinite;
}
@keyframes warmPulse{ 0%,100%{opacity:.7;} 50%{opacity:1;} }

.hero__inner{ position:relative; z-index:1; max-width:1180px; width:100%; margin-inline:auto; }

.hero__kicker{
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--color-accent); margin-bottom:var(--space-6);
  font-family:var(--font-heading); font-weight:600;
}

.hero__title{
  font-size:var(--font-display); letter-spacing:-.03em; line-height:1.02;
  max-width:16ch; margin:0 0 var(--space-8); text-wrap:balance;
}

/* The printed lines keep their own rhythm: one thought per line. */
.hero__verse{ margin:0 0 var(--space-6); }
.hero__line{
  margin:0; font-size:clamp(16px,1.7vw,21px); line-height:1.5;
  color:color-mix(in srgb, var(--color-text) 78%, transparent);
  max-width:44ch; text-wrap:pretty;
}
.hero__line--gap{ margin-top:var(--space-4); }
.hero__close{
  font-family:var(--font-heading); font-weight:var(--font-heading-weight);
  font-size:clamp(19px,2.3vw,29px); letter-spacing:-.015em;
  margin:0 0 var(--space-8); color:var(--color-text);
}

.hero__cta{ display:flex; flex-wrap:wrap; gap:var(--space-3); }

.hero__scroll{
  position:absolute; left:50%; bottom:var(--space-6); transform:translateX(-50%);
  display:grid; justify-items:center; gap:var(--space-2); z-index:1;
  font-size:10px; letter-spacing:.24em; text-transform:uppercase;
  color:color-mix(in srgb, var(--color-text) 45%, transparent);
  font-family:var(--font-heading); font-weight:600;
}
.hero__scrollLine{ width:1px; height:44px; background:var(--color-divider); position:relative; overflow:hidden; }
.hero__scrollLine::after{ content:""; position:absolute; inset:0; background:var(--color-accent); animation:scrollRun 2.2s var(--ease) infinite; }
@keyframes scrollRun{ 0%{transform:translateY(-100%);} 60%,100%{transform:translateY(100%);} }

/* On a narrow frame the copy spans the full width, so the scrim stops being a
   left-to-right split and simply settles the whole picture; the crop shifts to
   keep the logo wall in shot. */
@media (max-width:699px){
  .hero__bg{ object-position:64% center; }
  .hero__scrim{
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 72%, transparent) 0%,
                              color-mix(in srgb, var(--color-bg) 58%, transparent) 40%,
                              color-mix(in srgb, var(--color-bg) 78%, transparent) 78%,
                              var(--color-bg) 100%),
      linear-gradient(90deg, color-mix(in srgb, var(--color-bg) 45%, transparent) 0%, transparent 72%);
  }
}

.kicker{
  font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-accent); font-family:var(--font-heading); font-weight:600;
  margin:0 0 var(--space-4);
}

/* ── Opening statement ────────────────────────────────────── */

.opening{
  position:relative; overflow:hidden;
  background:var(--color-surface);
  border-block:1px solid var(--color-divider);
  padding:var(--sec) var(--gut); text-align:center;
}
.opening::before{
  content:""; position:absolute; inset:auto 0 -30% 0; height:70%; pointer-events:none;
  background:radial-gradient(50% 100% at 50% 100%, color-mix(in srgb, var(--color-accent) 16%, transparent), transparent 70%);
}
.opening__inner{ position:relative; max-width:680px; margin-inline:auto; display:grid; justify-items:center; }
.opening__logo{ width:clamp(150px,20vw,210px); height:auto; margin-bottom:var(--space-8); }
.opening__h{
  font-size:clamp(44px,8vw,92px); letter-spacing:-.04em; line-height:1;
  margin:0 0 var(--space-6);
}
.opening__note{
  font-size:clamp(15px,1.4vw,17px); max-width:46ch;
  color:color-mix(in srgb, var(--color-text) 70%, transparent);
  margin:0 0 var(--space-8); text-wrap:pretty;
}

/* ── Footer ───────────────────────────────────────────────── */

.foot{ padding:var(--space-24) var(--gut) var(--space-8); }
.foot__grid{ max-width:1180px; margin-inline:auto; display:grid; gap:var(--space-8); grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); }
.foot h6{ color:var(--color-accent); margin-bottom:var(--space-3); }
.foot p{ color:color-mix(in srgb, var(--color-text) 70%, transparent); margin:0; }
.foot a{ color:inherit; text-decoration:none; }
.foot a:hover{ color:var(--color-accent); }
.foot__base{
  max-width:1180px; margin:var(--space-16) auto 0; padding-top:var(--space-4);
  border-top:1px solid var(--color-divider);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:var(--space-2);
  font-size:12px; color:color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ── Motion primitives ────────────────────────────────────── */

.reveal{ opacity:0; transform:translateY(20px); }
.reveal.is-in{
  opacity:1; transform:none;
  transition:opacity .8s var(--ease-out), transform 1s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.split-wrap{ display:block; overflow:hidden; }
.line{ display:block; white-space:nowrap; transform:translateY(105%); opacity:0; }
.is-in .line{
  transform:none; opacity:1;
  transition:transform .9s var(--ease-out), opacity .7s var(--ease-out);
  transition-delay:calc(var(--i) * 90ms);
}

/* ── Breakpoints ──────────────────────────────────────────── */

/* Below 600px the header has no CTA to anchor it, so the brand shows from
   the start rather than waiting for the scrolled state. */
@media (max-width:599px){
  .cursor,.glow,.grain{ display:none; }
}
@media (min-width:900px){
  .nav__links{ display:flex; }
}

/* ── Reduced motion ───────────────────────────────────────── */

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