/* SLSO8, the palette Cinderhall is locked to.
   Rule that keeps biting: never draw a marker or a line in a colour that also means
   terrain. --sea reads as water anywhere it appears. */
:root {
  --sea:    #0d2b45;
  --panel:  #203c56;
  --line:   #544e68;
  --mauve:  #8d697a;
  --ember:  #d08159;
  --accent: #ffaa5e;
  --peach:  #ffd4a3;
  --bone:   #ffecd6;
  --dim:    #6d7f96;

  --px: monospace;
  --display: Silkscreen, ui-monospace, monospace;
  --body: VT323, ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sea);
  color: var(--bone);
  font-family: var(--body);
  font-size: 20px;
  line-height: 1.45;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--peach); }
a:focus-visible, .rg:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--sea); padding: 10px 16px; font-family: var(--display); font-size: 11px;
}
.skip:focus { left: 12px; top: 12px; z-index: 10; }

/* ---- chrome ---- */
.bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 20px 44px; border-bottom: 2px solid var(--line);
}
header.bar { position: sticky; top: 0; z-index: 20; background: var(--sea); }
.foot { border-bottom: 0; border-top: 2px solid var(--line); padding: 22px 44px 30px; color: var(--mauve); }
.brand { display: flex; align-items: center; gap: 14px; color: var(--peach); }
.brand img { display: block; height: auto; }
.brand span { font-family: var(--display); font-size: 13px; letter-spacing: .06em; }
.bar nav { display: flex; gap: 26px; flex-wrap: wrap; }
.bar nav a { color: var(--mauve); }
.bar nav a.on { color: var(--accent); }
.foot nav a { color: var(--peach); font-size: 18px; }

/* ---- hero ---- */
.hero {
  display: grid; grid-template-columns: minmax(0, 1fr) 772px;
  grid-template-areas: "intro map" "panels map";
  grid-template-rows: auto 1fr;
  gap: 26px 44px; padding: 44px; align-items: start;
}
.intro  { grid-area: intro;  display: flex; flex-direction: column; gap: 26px; }
.panels { grid-area: panels; }
.mapframe { grid-area: map; }
h1 {
  margin: 0; font-family: var(--display); font-weight: 700; font-size: 34px;
  line-height: 1.42; color: var(--bone);
}
h1 span { color: var(--accent); }
.lede { margin: 0; font-size: 24px; line-height: 1.5; color: var(--peach); }

/* ---- region panel ---- */
.panel { border: 2px solid var(--accent); background: var(--panel); }
.panel[hidden] { display: none; }
.panel-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 14px; background: var(--accent); color: var(--sea);
  font-family: var(--display); font-size: 10px;
}
.panel-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.panel-body h2 { margin: 0; font-family: var(--display); font-size: 16px; color: var(--bone); }
.lore { margin: 0; color: var(--mauve); }
.work-row { display: flex; gap: 12px; align-items: flex-start; border-top: 2px solid var(--line); padding-top: 16px; }
.work-row + .work-row { border-top: 0; padding-top: 0; }
.work-row h3 { margin: 0 0 4px; font-family: var(--display); font-size: 14px; color: var(--bone); }
.work-row p { margin: 0; color: var(--peach); }
.dot { width: 11px; height: 11px; flex: 0 0 auto; margin-top: 7px; }
.dot.live { background: var(--accent); }
.dot.dev { background: var(--ember); }
.dot.empty { border: 2px solid var(--line); }
.none { margin: 0; display: flex; align-items: center; gap: 12px; color: var(--mauve);
        border-top: 2px solid var(--line); padding-top: 16px; }
.none .dot { margin-top: 0; }
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 13px 18px; background: var(--accent); color: var(--sea);
  font-family: var(--display); font-size: 11px;
}
.btn:hover { background: var(--peach); color: var(--sea); }
.btn.small { align-self: flex-start; padding: 10px 14px; font-size: 10px; }

/* ---- map ---- */
.mapframe { margin: 0; border: 2px solid var(--line); background: var(--sea); }
.mapframe .panel-bar { background: var(--line); color: var(--bone); }
.foot-bar { background: var(--sea) !important; color: var(--mauve) !important;
            border-top: 2px solid var(--line); font-family: var(--body) !important; font-size: 19px !important; }
.coord { font-family: var(--display); font-size: 9px; color: var(--accent); }
.map { position: relative; width: 768px; aspect-ratio: 1; }
.map img, .map .regions { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.map img { image-rendering: pixelated; }

.rg { fill: rgba(255,170,94,0); cursor: pointer; }
.rg:hover { fill: rgba(255,170,94,.32); }
.rg.on { fill: rgba(255,170,94,.55); }

.rlab, .slab, .city-label {
  position: absolute; transform: translate(-50%, -50%);
  font-family: var(--display); font-size: 10px; white-space: nowrap; pointer-events: none;
}
.rlab { color: var(--bone); }
.rlab.on { background: var(--sea); border: 1px solid var(--accent); padding: 3px 6px; }
.slab { color: var(--dim); }
.city-label {
  transform: translate(0, -50%);
  color: var(--bone); background: var(--sea); border: 1px solid var(--mauve); padding: 3px 6px;
}

/* ---- works ---- */
.works { padding: 36px 44px 40px; border-top: 2px solid var(--line); }
.eyebrow { margin: 0 0 20px; font-family: var(--display); font-size: 12px; color: var(--mauve); font-weight: 400; }
.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px;
         grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.card { border: 2px solid var(--line); background: var(--panel); padding: 18px;
        display: flex; flex-direction: column; gap: 10px; }
.card.live { border-color: var(--accent); }
.card-top { display: flex; justify-content: space-between; gap: 10px;
            font-family: var(--display); font-size: 9px; color: var(--mauve); }
.card.live .card-top { color: var(--accent); }
.card h3 { margin: 0; font-family: var(--display); font-size: 18px; color: var(--bone); }
.card p { margin: 0; color: var(--peach); }

/* ---- prose (press) ---- */
.prose { padding: 44px; max-width: 70ch; display: flex; flex-direction: column; gap: 20px; }
.prose h1 { font-size: 28px; }
.prose h2 { margin: 16px 0 0; font-family: var(--display); font-size: 14px; color: var(--accent); }
.prose p, .prose li { color: var(--peach); margin: 0; }
.prose ul { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prose dl { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; }
.prose dt { font-family: var(--display); font-size: 11px; color: var(--mauve); }
.prose dd { margin: 0; color: var(--peach); }

/* Wide screens: grow the MAP, not the prose. With a fixed map and a 1fr text column
   the text absorbs every extra pixel and lines run to 100+ characters. 1024 is the
   next whole multiple of the 256px source. */
@media (min-width: 1700px) {
  .hero { grid-template-columns: minmax(0, 860px) 1028px; justify-content: center; }
  .map { width: 1024px; }
}

/* ---- responsive ----
   The map is a 256px bitmap. Scale it by whole multiples where there is room, so the
   pixels stay square; below that, filling the width beats leaving a strip of dead
   background next to a 256px map. */
@media (max-width: 1400px) {
  .hero { grid-template-columns: minmax(0, 1fr) 516px; }
  .map { width: 512px; }                 /* exact 2x */
  .rlab, .slab { font-size: 9px; }
}
@media (max-width: 1000px) {
  /* one column: the map comes BEFORE the region panel, so the thing the page is
     actually about is not buried under a screen of prose */
  .hero { grid-template-columns: minmax(0, 1fr); grid-template-areas: "intro" "map" "panels"; }
  .mapframe { width: min(772px, 100%); }   /* size the FRAME; a max-content frame makes
                                              the map's own 100% circular and collapses it */
  .map { width: 100%; }
}
@media (max-width: 620px) {
  .bar, .foot, .hero, .works, .prose { padding-left: 20px; padding-right: 20px; }
  /* stack the header: the wordmark and the nav each need a full row at this width */
  .bar { flex-direction: column; align-items: flex-start; gap: 12px; }
  .brand span { white-space: nowrap; }
  h1 { font-size: 24px; }
  .hero { gap: 28px; padding-top: 28px; }
  .mapframe { width: 100%; }
  .map { width: 100%; }
  .rlab, .slab { display: none; }
  .rlab.on { display: block; font-size: 9px; }
  .city-label { font-size: 9px; }
  .lede { font-size: 21px; }
  .brand span { font-size: 11px; }
  .bar { padding-top: 14px; padding-bottom: 14px; }
  .bar nav { gap: 14px; font-size: 18px; }
  .works { padding-top: 28px; }
}