/* Page layout for the landing page. Tokens live in styles.css. */

/* hero: the basement at cat height, with a BasementOS window beside it */
.hero{position:relative;min-height:min(86vh,760px);display:flex;align-items:flex-end;overflow:hidden;border-bottom:1px solid var(--ll-s3)}
.hero-img{position:absolute;inset:0;background:url("img/basement-cat.webp") center 88%/cover no-repeat}
.hero-img::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,0) 50%,rgba(10,10,10,.9) 86%,var(--ll-night) 100%),
  linear-gradient(90deg,rgba(10,10,10,.82) 0%,rgba(10,10,10,.35) 38%,rgba(10,10,10,0) 62%)}
.hero .wrap{position:relative;width:100%;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:40px;align-items:end;padding-top:120px;padding-bottom:56px}
.hero h1{font-size:clamp(52px,7.4vw,96px)}
.hero h1 b{color:var(--ll-pink);text-shadow:var(--glow-accent);font-weight:400}
.hero .lede{color:var(--ll-bone)}
.hero .crt{max-width:420px;justify-self:end;width:100%}


/* facts strip */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--ll-s3);border-radius:8px;background:var(--ll-s1);overflow:hidden}
.facts>div{padding:18px 20px;border-right:1px solid var(--ll-s3)}
.facts>div:last-child{border-right:0}
.facts .n{font-family:var(--font-display);font-size:44px;line-height:1;color:var(--ll-pink);text-shadow:var(--glow-accent)}
.facts .l{font-size:12.5px;color:var(--text-muted);margin-top:6px}

/* "what's down here" rows: a terminal-style index with a gutter number */
.rooms{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
.rooms li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;padding:20px 0;border-top:1px solid var(--ll-s3)}
.rooms .no{font-family:var(--font-display);font-size:26px;color:var(--ll-pink);line-height:1.1}
.rooms h3{font-size:30px}
.rooms p{margin:0;color:var(--text-muted)}
.rooms p b{color:var(--text-primary)}

/* two-up split: image + text */
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;align-items:center}
.split.rev{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}

/* changelog quoted from the in-world terminal */
.log-crt{font-size:20px}
.log-crt .d{color:var(--ll-bone)}

/* state table */
.state{width:100%;border-collapse:collapse;margin-top:8px}
.state th,.state td{text-align:left;padding:14px 12px;border-top:1px solid var(--ll-s3);vertical-align:top}
.state th{font-family:var(--font-display);font-weight:400;font-size:22px;color:var(--ll-bone);white-space:nowrap;width:30%}
.state td{color:var(--text-muted)}
.pill{display:inline-block;font-family:var(--font-display);font-size:18px;line-height:1;padding:3px 7px 2px;border:1px solid currentColor;margin-right:8px;letter-spacing:.06em}
.pill{border-radius:3px}
.pill.live{color:var(--ll-pink)} .pill.branch{color:var(--ll-amber)} .pill.blocked{color:var(--ll-error)} .pill.plan{color:var(--text-primary)}

/* visit */
.visit{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:40px;align-items:center}
.visit ol{margin:12px 0 0;padding-left:22px;color:var(--text-primary)}
.visit ol li{margin:6px 0}
.poster img{border:1px solid var(--ll-s3);border-radius:8px;box-shadow:0 0 40px rgba(255,62,138,.18)}

@media (max-width:900px){
  .hero .wrap{grid-template-columns:1fr;gap:28px}
  .hero .crt{justify-self:start;max-width:none}
  .facts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts>div:nth-child(2){border-right:0}
  .facts>div:nth-child(-n+2){border-bottom:1px solid var(--ll-s3)}
  .rooms{grid-template-columns:1fr}
  .split,.split.rev{grid-template-columns:1fr;gap:28px}
  .split.rev .shot{order:-1}
  .visit{grid-template-columns:1fr}
  .poster{max-width:260px}
}
@media (max-width:640px){
  .hero{min-height:0;display:block}
  .hero-img{position:relative;inset:auto;aspect-ratio:3/2;background-position:center}
  .hero-img::after{background:linear-gradient(180deg,rgba(10,10,10,0) 60%,var(--ll-night) 100%)}
  .hero .wrap{padding-top:8px;padding-bottom:40px}
  .facts .n{font-size:38px}
  .state th{width:auto;white-space:normal;display:block;border-top:1px solid var(--ll-s3);padding-bottom:2px}
  .state td{display:block;border-top:0;padding-top:0}
  .state tr{display:block}
}