:root { --ink:#061616; --acid:#d0ec34; --sun:#ff9e0b; --ember:#ef4b1b; --water:#087f78; --cream:#fff0c7; --line:rgba(255,240,199,.34); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--ink); }
body { margin:0; overflow-x:hidden; background:var(--ink); color:var(--cream); font-family:Arial Black,Arial,Helvetica,sans-serif; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; }
::selection { background:var(--acid); color:var(--ink); }
.grain { position:fixed; inset:0; z-index:90; opacity:.11; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.site-header { position:fixed; z-index:70; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:18px 4vw; background:linear-gradient(#061616e8,#06161600); transition:transform .35s ease; }
.site-header.header-hidden { transform:translateY(-110%); }
.brand { font-size:1.55rem; font-weight:950; letter-spacing:.12em; }
nav { display:flex; gap:2rem; text-transform:uppercase; font-size:.82rem; font-weight:900; letter-spacing:.15em; }
nav a { position:relative; }
nav a::after { content:""; position:absolute; left:0; right:100%; bottom:-.45rem; height:3px; background:var(--acid); transition:right .25s; }
nav a:hover::after, nav a:focus-visible::after { right:0; }
.hero,.lore-hero { min-height:100svh; position:relative; display:grid; place-items:center; overflow:hidden; isolation:isolate; }
.hero::before,.lore-hero::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#061616b8 0,transparent 30% 70%,#061616c9 100%),linear-gradient(0deg,#061616 0,transparent 28%); }
.hero-art,.lore-art,.join-art { position:absolute; inset:-3%; z-index:-2; background-position:center; background-size:cover; transform:scale(1.03); animation:breathe 14s ease-in-out infinite alternate; }
.hero-art { background-image:url("lajak-hero.png"); }
.lore-art,.join-art { background-image:url("lajak-lore.png"); }
.hero-copy { width:min(1000px,92vw); text-align:center; padding-top:5rem; }
.eyebrow { margin:0 0 1.5rem; letter-spacing:.34em; font-size:.78rem; font-weight:950; }
h1 { margin:-.05em 0 0; font-size:clamp(7rem,24vw,20rem); line-height:.78; letter-spacing:-.1em; font-weight:1000; text-shadow:0 8px 0 #082d2b,0 18px 40px #0009; }
h1 span { color:var(--acid); }
.lead { max-width:620px; margin:2.2rem auto; font:800 clamp(1.05rem,2vw,1.45rem)/1.45 Arial,sans-serif; }
.hero-actions { display:flex; justify-content:center; flex-wrap:wrap; gap:1.1rem; }
.mosaic-button { --tile:var(--sun); position:relative; display:inline-flex; justify-content:center; align-items:center; min-height:58px; padding:.95rem 1.4rem; border:3px solid var(--ink); border-radius:18px 6px 15px 8px; background:var(--tile); color:var(--ink); box-shadow:5px 5px 0 var(--acid),9px 9px 0 var(--ink); font:950 .84rem/1 Arial,sans-serif; letter-spacing:.08em; cursor:pointer; transform:rotate(-1deg); transition:transform .2s,box-shadow .2s,filter .2s; }
.mosaic-button::before { content:""; position:absolute; inset:5px; border:2px dotted #0719198c; border-radius:9px 3px 11px 4px; pointer-events:none; }
.mosaic-button:hover,.mosaic-button:focus-visible { transform:rotate(1deg) translateY(-3px); box-shadow:7px 8px 0 var(--acid),12px 13px 0 var(--ink); filter:saturate(1.2); }
.mosaic-button.alt { --tile:var(--water); color:white; transform:rotate(1deg); }
.mosaic-button.compact { min-height:40px; padding:.7rem 1rem; box-shadow:3px 3px 0 var(--acid); font-size:.73rem; }
.copy-status { height:1.2em; margin:1.4rem 0 0; font:800 .78rem/1.2 Arial,sans-serif; color:var(--acid); letter-spacing:.1em; }
.scroll-cue { position:absolute; bottom:2rem; left:4vw; font-size:.75rem; font-weight:900; letter-spacing:.18em; }
.scroll-cue span { color:var(--acid); font-size:1.4rem; }
.origin { min-height:88svh; padding:9rem 7vw 7rem; background:var(--acid); color:var(--ink); }
.section-index { border-bottom:3px solid currentColor; padding-bottom:1rem; font-size:.78rem; font-weight:950; letter-spacing:.16em; }
.origin-grid { display:grid; grid-template-columns:1.35fr .65fr; gap:7vw; align-items:end; margin-top:13vh; }
h2 { margin:0; font-size:clamp(3.6rem,9vw,9rem); line-height:.8; letter-spacing:-.075em; }
h2 em { color:var(--ember); font-style:normal; }
.origin-copy { max-width:520px; font:700 clamp(1.1rem,2vw,1.3rem)/1.6 Arial,sans-serif; }
.text-link { display:inline-block; margin-top:1.5rem; border-bottom:3px solid currentColor; font-family:Arial Black,Arial,sans-serif; font-weight:950; }
.signal-band { display:flex; align-items:center; justify-content:space-around; gap:2rem; min-width:max-content; padding:1.35rem 2rem; overflow:hidden; background:var(--ember); color:var(--ink); transform:rotate(-1deg) scale(1.02); }
.signal-band p { margin:0; font-size:clamp(1rem,2.5vw,2rem); font-weight:1000; letter-spacing:-.02em; }
.signal-band i { color:var(--acid); font-style:normal; }
.join { position:relative; min-height:100svh; display:grid; place-items:center; overflow:hidden; isolation:isolate; padding:8rem 5vw; }
.join::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,#06161629,#061616e8 58%); }
.join-art { filter:saturate(.82) brightness(.68); }
.join-card { margin-left:auto; width:min(700px,86vw); padding:clamp(2rem,5vw,5rem); background:#061616d9; border:2px solid var(--line); backdrop-filter:blur(9px); clip-path:polygon(2% 0,97% 2%,100% 95%,7% 100%,0 7%); }
.join-card h2 { font-size:clamp(3.2rem,7vw,7rem); }
.join-card>p:not(.section-index) { max-width:500px; margin:2rem 0; font:700 1.1rem/1.6 Arial,sans-serif; }
.join-card .hero-actions { justify-content:flex-start; }
.lore-title { width:min(1200px,90vw); padding-top:6rem; }
.lore-title h1 { font-size:clamp(7rem,19vw,17rem); }
.lore-title .eyebrow { margin-left:.5rem; }
.story { padding:9rem 8vw; background:var(--cream); color:var(--ink); }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:9vw; margin-top:9vh; }
.story-grid p { margin:0; font:700 clamp(1.15rem,2vw,1.6rem)/1.65 Arial,sans-serif; }
.story-grid .dropcap { font:900 clamp(2rem,3.5vw,3.7rem)/1.14 Arial,sans-serif; letter-spacing:-.035em; }
.dropcap::first-letter { float:left; color:var(--ember); font:1000 8rem/.72 Arial Black,sans-serif; padding-right:.7rem; }
.law { min-height:90svh; padding:8rem 8vw; background:var(--water); display:flex; flex-direction:column; justify-content:space-between; }
blockquote { margin:10vh auto; max-width:1200px; color:var(--acid); text-align:center; font-size:clamp(3rem,7.2vw,7.5rem); line-height:.95; letter-spacing:-.06em; }
.law-note { margin:0; text-align:right; font:750 1.05rem/1.5 Arial,sans-serif; }
.last-call { min-height:88svh; display:grid; align-content:center; justify-items:center; padding:8rem 5vw; text-align:center; background:radial-gradient(circle at 50% 42%,#0a5f58 0,var(--ink) 62%); }
.last-call h2 { margin-bottom:3rem; }
footer { display:flex; justify-content:space-between; gap:2rem; padding:2rem 4vw; font-size:.75rem; letter-spacing:.15em; }
@keyframes breathe { from { transform:scale(1.03); } to { transform:scale(1.08); } }
@media (max-width:760px) {
  .site-header { padding:14px 5vw; }
  .site-header nav { display:none; }
  h1 { font-size:29vw; }
  .hero-copy { padding-top:3rem; }
  .origin-grid,.story-grid { grid-template-columns:1fr; gap:3rem; margin-top:8vh; }
  .origin { min-height:auto; padding:7rem 6vw; }
  .join { place-items:end center; }
  .join::before { background:linear-gradient(0deg,#061616 0,#06161633 80%); }
  .join-card { margin:0; width:94vw; }
  .lore-art { background-position:35% center; }
  .lore-title { align-self:end; padding-bottom:8rem; }
  .lore-title h1 { font-size:27vw; }
  blockquote { text-align:left; }
  footer { flex-direction:column; }
}
@media (max-width:420px) {
  .brand { font-size:1.25rem; }
  .mosaic-button.compact { min-height:36px; padding:.55rem .75rem; font-size:.63rem; }
  .hero-actions { align-items:stretch; flex-direction:column; }
  .hero-actions .mosaic-button { width:100%; }
  .signal-band { justify-content:flex-start; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } .mosaic-button,.site-header { transition:none; } .hero-art,.lore-art,.join-art { animation:none; } }