/* Budget one visible screen for navigation, identity, actions and the full facade. */
.first-screen{position:relative;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);width:100%;height:calc(100svh - 14px);min-height:540px}
.first-screen .navigation{min-width:0;width:calc(100% - 40px);margin:0 auto}
.first-screen .navigation .night-badge{display:none}
[data-mode='night'] .first-screen .navigation .night-badge{display:inline-flex}
.first-screen .hero{min-height:0;padding:clamp(8px,1.5svh,18px) 0 0}
.hero .hero-content{height:100%;width:100%;min-height:0;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:clamp(6px,1.2svh,14px);padding-bottom:0}
.hero-content>.board-9{margin:0}
.hero-content>div:first-child img{width:clamp(80px,16svh,180px);height:clamp(80px,16svh,180px)}
.hero .night-badge-hero{--badge-size:clamp(80px,16svh,180px)}
.hero-content>.board-11{justify-content:center}
.hero .board-12{font-size:clamp(11px,1.5svh,14px);line-height:1.4}
.hero .display-title{font-size:clamp(36px,min(9vw,10svh),112px);line-height:.95;margin:clamp(6px,1svh,12px) 0 0}
.hero .hero-content>div:nth-child(2)>.board-15{font-size:clamp(16px,2.6svh,26px);line-height:1.2;margin-top:clamp(6px,1svh,12px)}
.hero .hero-content>div:nth-child(2)>.board-16{font-size:clamp(11px,1.7svh,16px);line-height:1.5;margin-top:clamp(6px,1svh,10px)}
.hero .actions{margin-top:clamp(10px,1.6svh,18px);gap:10px;justify-content:center}
.hero .actions a{min-height:44px;padding:10px 22px;font-size:clamp(12px,1.6svh,15px);line-height:1.4}
.hero .building-scene{width:100%;height:100%;min-height:0;max-height:100%;margin:0;align-self:end}
@media(max-width:760px){
  .first-screen .navigation{padding-block:8px}
  .hero-content>div{padding-inline:16px}
  .hero-content>div:first-child img{width:clamp(72px,13svh,112px);height:clamp(72px,13svh,112px)}
  .hero .night-badge-hero{--badge-size:clamp(72px,13svh,112px)}
  .hero .hero-content>div:nth-child(2)>.board-12{font-size:11px;max-width:31ch}
  .hero .hero-content>div:nth-child(2)>.board-16{font-size:11px;max-width:34ch;letter-spacing:.08em}
  .hero .actions a{padding:10px 12px;font-size:12px}
  .hero .actions{gap:8px}
}
/* Wide, short windows use the horizontal space rather than shrinking tap targets. */
@media(min-width:600px) and (max-height:600px){
  .first-screen{min-height:360px}
  .first-screen .navigation{flex-wrap:nowrap;padding:8px 42px 8px 0;gap:12px}
  .first-screen .navigation>a:first-child>span:not(.night-badge){display:none}
  .first-screen .nav-links{order:initial;width:auto;min-width:0;flex:1;overflow:auto;gap:14px;padding:0;margin:0}
  .first-screen .nav-links a{white-space:nowrap;flex-shrink:0;font-size:11px}
  .first-screen .navigation>.board-8{font-size:11px;white-space:nowrap;padding:8px 12px}
  .hero .hero-content{grid-template-columns:100px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:6px;max-width:1080px;padding-inline:20px}
  .hero-content>.board-9{grid-column:1;grid-row:1;align-items:center;padding:0}
  .hero-content>.board-11{grid-column:2;grid-row:1;padding:0}
  .hero .building-scene{grid-column:1 / -1;grid-row:2}
  .hero-content>div:first-child img{width:88px;height:88px}
  .hero .night-badge-hero{--badge-size:88px}
  .hero .display-title{font-size:clamp(32px,6vw,54px);margin-top:4px}
  .hero .hero-content>div:nth-child(2)>.board-12{font-size:10px;max-width:none}
  .hero .hero-content>div:nth-child(2)>.board-15{font-size:16px;margin-top:4px}
  .hero .hero-content>div:nth-child(2)>.board-16{font-size:10px;max-width:none;margin-top:4px;letter-spacing:.06em}
  .hero .actions{margin-top:6px}
  .hero .actions a{font-size:11px;padding:8px 12px}
  .first-screen .pull-light{transform:scale(.7);transform-origin:top right}
}

/* Red lettering and black dots by day; illuminated yellow lettering at night. */
.hero .board-15{color:var(--accent)}
[data-mode="day"] .hero .board-15 .board-13{color:var(--ink)}
[data-mode="night"] .hero .board-15{--neon-glow:0 0 3px #ffe9a6aa,0 0 10px #e8b84bcc,0 0 24px #e8b84b99,0 0 48px #e8b84b66;text-shadow:none}
[data-mode="night"] .hero .board-15 .neon-letter,[data-mode="night"] .hero .board-15 .board-13{text-shadow:var(--neon-glow)}

/* Pixel sky is placed around text and the rendered facade by night-sky.js. */
.night-sky{display:none;position:absolute;z-index:0;inset:0;pointer-events:none;user-select:none}
[data-mode="night"] .night-sky{display:block}
.pixel-star{position:absolute;width:2px;height:2px;background:#f4f1e8;opacity:.35;animation:pixel-twinkle var(--duration) steps(1,end) var(--delay) infinite}
.pixel-star:nth-child(3n+1){background:#b8ddf0}
.pixel-star-cross::before,.pixel-star-cross::after{content:"";position:absolute;background:inherit}
.pixel-star-cross::before{width:6px;height:2px;left:-2px;top:0}
.pixel-star-cross::after{width:2px;height:6px;left:0;top:-2px}
@keyframes pixel-twinkle{0%,38%,100%{opacity:.3}40%,46%{opacity:.95}48%,68%{opacity:.5}70%,76%{opacity:.8}78%{opacity:.25}}
@media(prefers-reduced-motion:reduce){.pixel-star{animation:none;opacity:.55}}

.pixel-star[hidden],.pixel-moon[hidden]{display:none}
.pixel-moon{position:absolute;width:48px;height:48px;filter:drop-shadow(0 0 8px #b8ddf022)}
@media(max-width:760px){.pixel-moon{width:32px;height:32px}}

/* Occasional neon faults are scheduled only while the night sign is in view. */
[data-mode="night"] .neon-warming{animation:neon-warm-up 1.25s steps(1,end)}
[data-mode="night"] .neon-falter{animation:var(--neon-pattern) var(--neon-duration) steps(1,end)}
@keyframes neon-warm-up{0%{opacity:.4}24%{opacity:1}52%{opacity:.65}80%,100%{opacity:1}}
/* Dot-and-dash rhythms; only the selected letter loses its glow. */
@keyframes neon-tap{0%,20%,45%,100%{opacity:1;text-shadow:var(--neon-glow)}25%,42%{opacity:.35;text-shadow:none}}
@keyframes neon-dash{0%,15%,70%,100%{opacity:1;text-shadow:var(--neon-glow)}20%,65%{opacity:.3;text-shadow:none}}
@keyframes neon-double-tap{0%,10%,32%,60%,100%{opacity:1;text-shadow:var(--neon-glow)}14%,25%,44%,55%{opacity:.45;text-shadow:none}}
@keyframes neon-dot-dash{0%,10%,27%,90%,100%{opacity:1;text-shadow:var(--neon-glow)}14%,24%,46%,86%{opacity:.3;text-shadow:none}}
@keyframes neon-dash-dot{0%,10%,60%,88%,100%{opacity:1;text-shadow:var(--neon-glow)}14%,55%,74%,84%{opacity:.4;text-shadow:none}}
@media(prefers-reduced-motion:reduce){.neon-warming,.neon-falter{animation:none!important}}

/* The real facade masks the setting moon; sky never paints over the building. */
.hero .hero-content{position:relative;z-index:1}