/* Homepage village hero. Loaded by site/index.html only; everything else keeps styles-v9.css as it was. */
/* ---- The village hero: the simulation fills a full-bleed, full-height band under the title ---- */
.homepage .hero-village{position:relative;width:100vw;margin-left:calc(50% - 50vw);margin-top:-60px;height:clamp(560px,100vh,1100px);overflow:hidden;background:radial-gradient(ellipse at 50% 40%,#2b3140,#1b2029 70%);color:#fff;font-family:var(--font)}
.homepage .hero-village #village{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}
.homepage .hero-village .hero-copy{position:absolute;left:0;right:0;top:0;z-index:3;padding:clamp(5.5rem,11vh,8rem) 24px 0;text-align:center;pointer-events:none;text-shadow:0 2px 28px rgba(28,32,39,.75),0 1px 3px rgba(28,32,39,.5)}
.homepage .hero-village .hero-copy h1{max-width:17ch;margin:0 auto;color:#fff!important;font-family:'Geologica',var(--font),sans-serif!important;font-weight:500!important;font-size:clamp(2.8rem,6.5vw,5rem);letter-spacing:-.02em!important;line-height:1.05}
.homepage .hero-village .hero-note{max-width:46ch;margin:0 auto 1.6rem;padding-left:1rem;border-left:3px solid rgba(255,255,255,.4);color:rgba(255,255,255,.75)!important;text-align:left}
.homepage .hero-village .hero-note a{color:#fff!important}

.homepage .hero-village .hud{position:absolute;z-index:3;pointer-events:none;font-size:13px;text-shadow:0 2px 28px rgba(28,32,39,.75),0 1px 3px rgba(28,32,39,.5)}
.homepage .hero-village #cap{left:20px;bottom:20px;display:flex;align-items:center;gap:10px;max-width:min(560px,80vw);background:rgba(27,32,41,.94);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:9px 16px 9px 12px;opacity:0;transition:opacity .4s;text-shadow:none}
.homepage .hero-village #cap.on{opacity:1}
.homepage .hero-village #cap .dot{width:8px;height:8px;border-radius:50%;background:#c2b0ff;box-shadow:0 0 10px #c2b0ff;flex:none}
.homepage .hero-village #cap b{font-weight:600;margin-right:4px;color:#fff!important}
.homepage .hero-village #cap span{color:#f1efff!important}
.homepage .hero-village #chip{left:20px;bottom:64px;background:#653cee;color:#fff;border-radius:999px;padding:5px 12px;font-weight:500;opacity:0;transition:opacity .3s}
.homepage .hero-village #chip.on{opacity:1}
.homepage .hero-village #tally{right:20px;bottom:20px;display:flex;gap:10px}
.homepage .hero-village #tally div{background:rgba(27,32,41,.94);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:8px 14px;min-width:118px;text-shadow:none}
.homepage .hero-village #tally b{display:block;font-weight:500;font-size:20px;line-height:24px;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:#fff!important}
.homepage .hero-village #tally small{display:block;color:rgba(255,255,255,.82)!important;font-size:12px!important;font-weight:500;letter-spacing:.01em;line-height:1.3}
.homepage .hero-village #hint{left:50%;bottom:76px;transform:translateX(-50%);color:#e4e0f2;opacity:0;transition:opacity .6s;width:max-content;max-width:calc(100% - 32px);text-align:center;background:rgba(27,32,41,.9);border:1px solid rgba(255,255,255,.14);border-radius:999px;padding:8px 16px;text-shadow:none}
.homepage .hero-village #hint.on{opacity:1}
@media(hover:none){.homepage .hero-village #hint{display:none}}
/* on a wide screen the help line sits on the bottom row, between the caption and the tally */
@media(min-width:1500px){.homepage .hero-village #hint{bottom:20px}}
.homepage .hero-village #tip{position:absolute;left:0;top:0;will-change:transform;backface-visibility:hidden;z-index:5;pointer-events:none;max-width:260px;background:#222831;color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:8px 11px;font-size:12px;line-height:1.35;box-shadow:0 10px 30px -12px rgba(0,0,0,.6);opacity:0;transition:opacity .15s}
.homepage .hero-village #tip.on{opacity:1}
/* a clicked building's or vehicle's card has a nub on the edge facing it; engine.js places it with --nx and --ny */
.homepage .hero-village #tip.nubbed::before{content:"";position:absolute;left:var(--nx,0);top:var(--ny,0);width:10px;height:10px;margin:-5px 0 0 -5px;background:#222831;transform:rotate(45deg)}
.homepage .hero-village #tip b{display:block;font-weight:600;font-size:13px;margin-bottom:2px}
.homepage .hero-village #tip span{display:block;color:#b9c0cc!important}
.homepage .hero-village #tip b{color:#fff!important}
@media(max-width:700px){
  .homepage .hero-village{height:clamp(540px,100vh,900px)}
  .homepage .hero-village .hero-copy{padding-top:5.5rem}
  .homepage .hero-village .hero-note{display:none}
  .homepage .hero-village #tally{left:12px;right:12px;bottom:12px;gap:6px}
  .homepage .hero-village #tally div{min-width:0;flex:1;padding:6px 8px}
  .homepage .hero-village #tally b{font-size:16px;line-height:20px}
  /* the labels never wrap, so the tally is one known height and the caption sits clear above it */
  .homepage .hero-village #tally small{white-space:nowrap;font-size:11px!important;overflow:hidden;text-overflow:ellipsis}
  .homepage .hero-village #cap{left:12px;bottom:76px;max-width:calc(100vw - 24px);font-size:12px}
  .homepage .hero-village #chip{bottom:118px;left:12px}
  .homepage .hero-village #hint{display:none}
}

/* the two calls to action sit in a row under the village */
.homepage .hero-actions-below{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin:2rem auto 1rem}
@media(max-width:700px){.homepage .hero-actions-below{flex-direction:column;align-items:stretch;max-width:320px;gap:10px}.homepage .hero-actions-below a{justify-content:center}}

/* ---- Dark header while the village is under it; the regular header takes over as you scroll past ---- */
.homepage .nav{transition:background .45s ease,border-color .45s ease!important}
.homepage .nav-links a,.homepage .nav-links summary,.homepage .nav-group-text,.homepage .nav-group-label,.homepage .nav-docs,.homepage .mobile-nav-toggle,.homepage .nav-cta .btn-primary{transition:color .35s ease,background .35s ease!important}
.homepage .nav.on-village,.homepage .nav.on-village.scrolled{background:rgba(20,24,32,.35)!important;backdrop-filter:blur(16px) saturate(120%)!important;-webkit-backdrop-filter:blur(16px) saturate(120%)!important;border-bottom:1px solid rgba(255,255,255,.06)!important;box-shadow:none!important}
.homepage .nav.on-village .nav-links a,.homepage .nav.on-village .nav-links summary,.homepage .nav.on-village .nav-group-text,.homepage .nav.on-village .nav-group-label,.homepage .nav.on-village .nav-docs,.homepage .nav.on-village .mobile-nav-toggle{color:rgba(255,255,255,.86)!important}
.homepage .nav.on-village .nav-links a:hover,.homepage .nav.on-village .nav-links summary:hover,.homepage .nav.on-village .nav-docs:hover{color:#fff!important}
.homepage .nav.on-village .nav-panel{background:#1b2029!important;border-color:rgba(255,255,255,.1)!important;color:rgba(255,255,255,.85)!important}
.homepage .nav.on-village .nav-panel a{color:rgba(255,255,255,.82)!important}
.homepage .nav.on-village .nav-panel a:hover{color:#fff!important;background:rgba(255,255,255,.06)!important}
.homepage .nav.on-village .nav-cta .btn-primary{background:#fff!important;color:#222831!important}
.homepage .nav.on-village .nav-cta .btn-primary:hover{background:#f0ebff!important}
@media(max-width:900px){.homepage .nav.on-village .nav-links{background:#1b2029!important;border-color:rgba(255,255,255,.1)!important}.homepage .nav.on-village .nav-links a{color:rgba(255,255,255,.85)!important}}


/* the section rail waits until the hero is well out of the way */
body.homepage .rail{opacity:0;pointer-events:none;transition:opacity .4s ease}
body.homepage.rail-on .rail{opacity:1;pointer-events:auto}

/* the wordmark stands in for the title: cropped above its 1P.DEV line, with the tagline written there instead */
.homepage .hero-village .hero-wordmark{max-width:none;font-size:0;line-height:0;margin:0 auto}
.homepage .hero-village .wordmark-crop{display:block;width:min(340px,58vw);aspect-ratio:894/238;overflow:hidden;margin:0 auto;filter:drop-shadow(0 2px 3px rgba(28,32,39,.5)) drop-shadow(0 4px 28px rgba(28,32,39,.7))}
/* the art is 925 wide; the ™ lives in the last 31 columns, so the image overflows the crop by that much and the mark ends where the tagline's rules end */
.homepage .hero-village .wordmark-crop img{display:block;width:103.47%;max-width:none;height:auto}

/* the tagline sits where the wordmark's own 1P.DEV line was, set the same way: blocky caps, spaced out, a rule either side */
.homepage .hero-village .tagline{display:flex;align-items:center;justify-content:center;gap:14px;width:min(340px,58vw);margin:.35rem auto 0;color:#fff!important;font-family:'Geologica',var(--font),sans-serif!important;font-weight:600;font-size:clamp(.62rem,1.1vw,.78rem);letter-spacing:.42em;text-transform:uppercase;line-height:1;text-indent:.42em;white-space:nowrap}
.homepage .hero-village .tagline::before,.homepage .hero-village .tagline::after{content:"";flex:1;height:2px;background:#fff;opacity:.95}
/* the title and tagline shrink by up to 15% as the camera zooms in, so they take less of the view */
.homepage .hero-village .hero-copy{transform-origin:50% 0;transition:transform .6s ease}