/* Exile Rust — dark industrial. Committed single look: the palette is painted
   explicitly on body so no host theme can bleed through. */

:root {
  --bg:      #12100e;
  --raise:   #1b1815;
  --raise-2: #232019;
  --rule:    #332e27;
  --text:    #ece7df;
  --muted:   #b3a99b;   /* 7.4:1 on --bg — safe for interactive text */
  --faint:   #8b8175;   /* decorative only */
  --rust:    #d1642a;
  --rust-hi: #f0873f;
  --ember:   #e8b04b;
  --on:      #6fbf5b;
  --off:     #9a5b52;
  --measure: 68ch;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  overflow-wrap: break-word;   /* global net: one long token must not scroll the page */
}

.wrap { width: 100%; max-width: 1040px; margin: 0 auto; padding: 0 1.1rem; }

.skip {
  position: absolute; left: -9999px;
}
.skip:focus {
  left: 1rem; top: .6rem; z-index: 10;
  background: var(--rust); color: #fff; padding: .5rem .9rem; border-radius: 4px;
}

a { color: var(--rust-hi); }
a:hover { color: var(--ember); }
code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--raise-2); padding: .12em .4em; border-radius: 3px;
  font-size: .93em;
}
kbd {
  font-family: inherit; font-size: .85em; background: var(--raise-2);
  border: 1px solid var(--rule); border-bottom-width: 2px;
  border-radius: 4px; padding: .05em .4em;
}

/* ---------- header ---------- */
.topbar { border-bottom: 1px solid var(--rule); background: var(--raise); }
.bar { display: flex; align-items: center; justify-content: space-between;
       gap: 1rem; flex-wrap: wrap; padding-block: .8rem; }
.brand { text-decoration: none; letter-spacing: .09em; font-weight: 800; }
.brand-mark { color: var(--rust); }
.brand-sub  { color: var(--text); margin-left: .35em; }
.bar nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.bar nav a {
  color: var(--muted); text-decoration: none; padding: .35rem .7rem;
  border-radius: 4px; font-weight: 600; font-size: .95rem;
}
.bar nav a:hover { color: var(--text); background: var(--raise-2); }

/* ---------- hero ---------- */
.hero { padding: 3rem 0 2rem; }
.eyebrow {
  color: var(--ember); text-transform: uppercase; letter-spacing: .14em;
  font-size: .76rem; font-weight: 700; margin: 0 0 .6rem;
}
.hero h1 {
  font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.08;
  margin: 0 0 1rem; letter-spacing: -.02em;
}
.lede { font-size: 1.1rem; color: var(--muted); max-width: var(--measure); margin: 0 0 1.6rem; }
.lede strong { color: var(--text); }

.connect {
  background: var(--raise); border: 1px solid var(--rule);
  border-left: 3px solid var(--rust);
  border-radius: 6px; padding: 1rem 1.2rem; max-width: var(--measure);
}
.connect .label {
  display: block; text-transform: uppercase; letter-spacing: .12em;
  font-size: .7rem; color: var(--faint); font-weight: 700;
}
.addr {
  font-size: clamp(1.05rem, 3.4vw, 1.5rem); font-weight: 700;
  background: none; padding: 0; color: var(--ember);
}
.connect p { margin: .55rem 0 0; font-size: .9rem; }

.status-line { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; margin-top: 1.2rem; }
.pill {
  display: inline-block; padding: .2rem .65rem; border-radius: 999px;
  font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
}
.pill-on  { background: rgba(111,191,91,.16); color: var(--on);  border: 1px solid rgba(111,191,91,.4); }
.pill-off { background: rgba(154,91,82,.16);  color: #d08a80;    border: 1px solid rgba(154,91,82,.45); }

/* ---------- cards ---------- */
.cards {
  display: grid; gap: 1rem; margin: 1rem 0 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.card {
  background: var(--raise); border: 1px solid var(--rule);
  border-radius: 6px; padding: 1.15rem 1.25rem;
}
.card.accent { border-top: 3px solid var(--rust); }
.card.standalone { max-width: var(--measure); margin: 1.2rem 0; }
.card h2 {
  margin: 0 0 .5rem; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--faint);
}
.card p { margin: .35rem 0; }
.big { font-size: 1.7rem; font-weight: 800; color: var(--ember); line-height: 1.15; }

/* ---------- prose ---------- */
.prose { padding: 2.2rem 0 1rem; max-width: var(--measure); }
.prose h1 { font-size: clamp(1.9rem, 5vw, 2.6rem); margin: 0 0 .8rem; letter-spacing: -.02em; }
.prose h2 {
  font-size: 1.18rem; margin: 2rem 0 .6rem; padding-top: .9rem;
  border-top: 1px solid var(--rule);
}
.prose ul { padding-left: 1.15rem; }
.prose li { margin: .4rem 0; }
.faint { color: var(--faint); }

/* ---------- facts ---------- */
.facts { margin: 0; }
.facts > div {
  display: grid; grid-template-columns: 11rem 1fr; gap: .6rem;
  padding: .6rem 0; border-bottom: 1px solid var(--rule);
}
.facts dt { color: var(--faint); font-size: .9rem; }
.facts dd { margin: 0; }

/* ---------- schedule ---------- */
.sched { width: 100%; border-collapse: collapse; margin: .6rem 0 1rem; }
.sched th, .sched td { text-align: left; padding: .6rem .5rem; border-bottom: 1px solid var(--rule); }
.sched th { font-size: .74rem; text-transform: uppercase; letter-spacing: .1em; color: var(--faint); }
.sched tr.is-next td { background: rgba(209,100,42,.09); }
.tag {
  display: inline-block; font-size: .76rem; font-weight: 700; padding: .12rem .55rem;
  border-radius: 4px; background: var(--raise-2); color: var(--muted);
}
.tag-bp { background: rgba(232,176,75,.16); color: var(--ember); }

/* ---------- footer ---------- */
.foot { border-top: 1px solid var(--rule); margin-top: 3rem; padding-block: 1.5rem 2.5rem; }
.foot p { margin: .2rem 0; font-size: .92rem; }

/* The one fixed-width column on the page is .facts' label track. At 320px that
   leaves too little for the value, so stack instead — same failure the other
   site hit, avoided here rather than rediscovered. */
@media (max-width: 480px) {
  .facts > div { grid-template-columns: 1fr; gap: .15rem; }
}