/* Aspen Creative House — under-construction billboard.
   Production styles, externalized so the page runs under a self-only CSP with
   no 'unsafe-inline'. Self-hosted fonts (no third-party requests). Only the two
   faces this page actually renders are vendored here: Josefin Sans 300/400 and
   JetBrains Mono 400. (Space Grotesk is unused on this page — not shipped.) */

/* ── Self-hosted faces (subset of Lantern's A2 set) ─────────────────────── */
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300;font-display:swap;
  src:url('/fonts/josefin-sans-300-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:'Josefin Sans';font-style:normal;font-weight:300;font-display:swap;
  src:url('/fonts/josefin-sans-300-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:'Josefin Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/josefin-sans-400-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:'Josefin Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/josefin-sans-400-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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/jetbrains-mono-400-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:'JetBrains Mono';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/jetbrains-mono-400-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;}

/* ── Billboard (verbatim from the locked preview) ───────────────────────── */
:root{
  --cyan:#5DDFFF; --cyan-glow:rgba(93,223,255,0.3);
  --text-primary:#F0F0F0; --text-secondary:#A0A0A0; --text-muted:#6B6B6B;
  --teal:#0BA08F;
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:#06030F; color:var(--text-primary);
  font-family:'Josefin Sans',sans-serif; overflow:hidden;
}
@keyframes ff-orb{0%,100%{opacity:1;transform:translateY(-0.12em) scale(1);}50%{opacity:0.5;transform:translateY(-0.12em) scale(0.5);}}

/* Synapse field — scene 04, full-bleed background */
#syn-stage{position:fixed; inset:0; background:#06030F; overflow:hidden;}
#syn-stage canvas{display:block; width:100%!important; height:100%!important;}
/* Edge vignette (from scene 04) */
.vign{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse at center,transparent 32%,rgba(3,1,8,0.72) 100%);}
/* Centre scrim — keeps the wordmark legible over the firing field */
.scrim{position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(ellipse 82% 58% at 50% 50%, rgba(6,3,15,0.72) 0%, rgba(6,3,15,0.34) 56%, transparent 82%);}

/* Poster overlay — brand-doc poster structure: metadata in the corners,
   wordmark carries the centre, status + door as poster captions below. */
.hero{position:fixed; inset:0; display:grid;
  grid-template-rows:auto 1fr auto;
  padding:clamp(20px,4vmin,46px) clamp(22px,5vmin,64px);}

.h-row{display:flex; justify-content:space-between; align-items:flex-start; gap:18px;
  font-family:'JetBrains Mono',monospace; font-size:clamp(9px,1.05vw,12px);
  letter-spacing:0.8px; text-transform:none; color:var(--text-secondary);}
.h-row.bottom{align-items:flex-end; text-transform:none; letter-spacing:0.5px;}
.meta.dim{color:var(--text-muted); text-align:right;}
.meta.state{font-family:'JetBrains Mono',monospace; text-transform:none;
  letter-spacing:0.8px; font-size:clamp(9px,1.05vw,12px); color:var(--text-secondary);
  max-width:62ch; line-height:1.85; text-wrap:pretty;}
.meta.state br{display:none;}                       /* clause breaks only kick in when there's room */
@media (min-width:760px){ .meta.state br{display:inline;} }
.rl{color:#15B8A0; text-decoration:none; border-bottom:1px solid rgba(11,160,143,0.45);
  transition:color .15s ease, border-color .15s ease; cursor:pointer;}
.rl:hover{color:#22D3BD; border-bottom-color:#22D3BD;}
.rl:focus-visible{outline:2px solid #22D3BD; outline-offset:3px; border-radius:2px;}
.coords{font-family:'JetBrains Mono',monospace; font-size:clamp(9px,1.0vw,11px);
  letter-spacing:1px; color:var(--text-muted); text-align:right; line-height:1.7; white-space:nowrap;}
.coords b{color:var(--text-secondary); font-weight:400;}

.centre{display:flex; flex-direction:column; justify-content:center;
  gap:clamp(12px,2.1vmin,22px); transition:align-items .2s ease;}
.hero.align-center .centre{align-items:center; text-align:center;}
.hero.align-left   .centre{align-items:flex-start; text-align:left;
  padding-left:clamp(4px,3vw,40px); max-width:min(92vw,1100px);}
.wm-ach{order:1;}
.hero.order-act .tagline{order:2;} .hero.order-act .powered{order:3;}
.hero.order-afc .powered{order:2;} .hero.order-afc .tagline{order:3;}

.wm-ach{font-weight:300; letter-spacing:0.5px; line-height:0.9; color:var(--text-primary);
  font-size:clamp(40px,7.6vw,98px);}

/* powered by + exact scene-02 fireFly mark/orb */
.powered{display:flex; align-items:center; gap:0.5em;
  font-weight:300; font-size:clamp(15px,1.85vw,22px); letter-spacing:0.4px; color:var(--text-secondary);}
.p-mark-ff{display:inline-flex; align-items:center; font-weight:300; letter-spacing:-0.02em;
  line-height:0.85; color:var(--text-primary); font-size:2.4em;}
.p-mark-ff .ff-dot{display:inline-block; width:0.36em; height:0.36em; border-radius:50%;
  background:var(--cyan); box-shadow:0 0 0.28em var(--cyan),0 0 0.7em var(--cyan-glow);
  animation:ff-orb 3.6s ease-in-out infinite; flex-shrink:0; margin-right:0.2em;
  transform:translateY(-0.12em);}

.tagline{font-weight:300; font-size:clamp(17px,2.3vw,28px); letter-spacing:0.6px; color:var(--text-secondary); text-wrap:balance;}

@media (max-width:560px){
  .h-row{flex-direction:column; gap:6px;}
  .meta.dim{text-align:left;}
  .h-row.bottom{flex-direction:column-reverse; align-items:flex-start; gap:14px;}
}

/* Reduced motion: freeze the orb pulse. The synapse field is frozen in JS
   (a single static frame, no firing, no camera drift) on the same query. */
@media (prefers-reduced-motion: reduce){ .ff-dot{animation:none!important;} }