/* Alterras home v2 — shared theme. Lifted from design/umbrella/variant-E.html
   (Louvre, emerald palette, extent 160 — RULED 2026-09-16), dev controls removed. */
:root{
  --ink:#ede4d0;
  --ink-soft:rgba(237,228,208,.62);
  --ink-faint:rgba(237,228,208,.40);
  --paper:#050506;
  --paper-veil:rgba(5,5,6,.86);
  --line:rgba(237,228,208,.10);
  --card:rgba(255,235,200,.04);
  --card-hover:rgba(255,240,215,.07);
  --card-line:rgba(237,228,208,.12);

  /* emerald */
  --slat-lo: rgba(0,0,0,.55);
  --slat-mid:rgba(70,175,110,.22);
  --slat-hi: rgba(130,230,160,.38);
  --spot-1: rgba(140,235,165,.90);
  --spot-2: rgba(70,170,110,.42);
  --spot-3: rgba(30,105,60,.14);
  --glow-1: rgba(130,225,155,.26);
  --glow-2: rgba(180,240,200,.36);
  --acc-1:#cff2d8;
  --acc-2:#58c479;
  --acc-3:#257946;
  --acc-underline:rgba(88,196,121,.55);

  --band-w:160%;
  --band-opacity:1;
  --gutter:clamp(16px,4vw,56px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--paper);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden;
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ============ LOUVRE — fixed slat field + warm-lit column ============ */
.stage{position:fixed;inset:0;z-index:0;background:#040405;overflow:hidden}
.band{
  position:absolute;top:-6%;bottom:-6%;left:50%;
  width:var(--band-w);transform:translateX(-50%);opacity:var(--band-opacity);
  transition:width 1.2s cubic-bezier(.35,.1,.35,1), opacity 1.2s cubic-bezier(.35,.1,.35,1);
}
.band::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(90deg,
    var(--slat-lo) 0px, var(--slat-mid) 3px, var(--slat-hi) 14px, var(--slat-mid) 25px, var(--slat-lo) 28px);
  -webkit-mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 10%, rgba(0,0,0,.98) 30%, rgba(0,0,0,.98) 70%, rgba(0,0,0,.55) 90%, transparent 100%);
          mask-image:linear-gradient(90deg, transparent 0%, rgba(0,0,0,.55) 10%, rgba(0,0,0,.98) 30%, rgba(0,0,0,.98) 70%, rgba(0,0,0,.55) 90%, transparent 100%);
}
.band::after{
  content:"";position:absolute;inset:0;
  background:radial-gradient(38% 82% at 50% 42%, var(--spot-1) 0%, var(--spot-2) 32%, var(--spot-3) 58%, transparent 82%);
  mix-blend-mode:screen;
}
.grain{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='11'/><feColorMatrix values='0 0 0 0 0.86  0 0 0 0 0.80  0 0 0 0 0.66  0 0 0 0.10 0'/></filter><rect width='320' height='320' filter='url(%23n)'/></svg>");
  opacity:.55;mix-blend-mode:overlay;
}
.vignette{
  position:fixed;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(90% 100% at 50% 55%, transparent 40%, rgba(0,0,0,.55) 82%, rgba(0,0,0,.85) 100%);
}
.wrap{position:relative;z-index:2}

/* ============ NAV ============ */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:4;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--gutter);
  transition:background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.nav.solid{background:var(--paper-veil);border-color:var(--line);
  backdrop-filter:blur(14px) saturate(120%);-webkit-backdrop-filter:blur(14px) saturate(120%)}
.nav .mark{display:flex;align-items:center;gap:10px;font-family:'Fraunces',serif;font-size:19px;font-weight:400;letter-spacing:.01em}
.nav .mark img{width:22px;height:auto;filter:drop-shadow(0 0 10px var(--glow-1))}
.nav .links{display:flex;gap:clamp(14px,2.4vw,28px);font-size:13px;color:var(--ink-soft);letter-spacing:.02em}
.nav .links a{padding:4px 0;border-bottom:1px solid transparent;transition:color .2s, border-color .2s}
.nav .links a:hover,.nav .links a[aria-current="page"]{color:var(--ink);border-color:var(--acc-underline)}

/* ============ SHARED TYPE ============ */
.eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.serif{font-family:'Fraunces',serif;font-weight:300}
.gradient-text{
  background:linear-gradient(100deg, #f4fff6 0%, var(--acc-1) 40%, #8fe0a8 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.section{position:relative;padding:clamp(72px,10vw,140px) var(--gutter);background:var(--paper)}
.section .inner{max-width:1040px;margin:0 auto}

/* Placeholder + draft markers — frames only; strip before ship */
.ph{
  display:inline-block;font-family:'Inter',sans-serif;font-style:normal;
  font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  padding:3px 7px;border-radius:999px;vertical-align:middle;
  color:#0e100c;background:var(--acc-1);
}
.ph.draft{background:transparent;color:var(--acc-1);border:1px dashed var(--acc-underline)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 22px;border-radius:999px;font:500 14px 'Inter',sans-serif;letter-spacing:.01em;
  border:1px solid var(--card-line);background:var(--card);color:var(--ink);cursor:pointer;
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
.btn:hover{transform:translateY(-1px);background:var(--card-hover);border-color:rgba(237,228,208,.28)}
.btn.primary{background:linear-gradient(100deg, var(--acc-1), var(--acc-2));color:#0b130d;border-color:transparent}
.btn.primary:hover{filter:brightness(1.05)}

/* ============ FOOTER ============ */
.foot{
  position:relative;z-index:2;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;
  padding:22px var(--gutter) 30px;
  border-top:1px solid var(--line);background:var(--paper);
  font-size:12.5px;color:var(--ink-soft);letter-spacing:.02em;
}
.foot .links{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.foot .links a{padding:2px 0;border-bottom:1px solid transparent;transition:border-color .2s, color .2s}
.foot .links a:hover{color:var(--ink);border-color:var(--ink)}
.foot .sep{width:1px;height:12px;background:var(--line)}

@media (max-width:560px){
  .nav .links{gap:14px;font-size:12.5px}
  .nav .mark span{display:none}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .band{transition:none}
}