/* Pirchchat — outer landing.
   Source of truth: docs/16BIT-AESTHETIC.md
   Composition language: MoMA discipline (one dominant element, asymmetric
   balance, generous negative space, single accent). Typography: Plex Serif
   for the dominant display, Plex Sans for body, Plex Mono for technical. */

:root {
  --paper:         #faf9f7;
  --chrome:        #e8e3d8;
  --chrome-dark:   #d4ccba;
  --ink:           #102a43;
  --ink-muted:     #486581;
  --rule:          #8b7d5e;

  --accent:        #d4a017;
  --accent-soft:   #f6e9c4;

  --positive:      #2e7d32;

  --highlight:     #f0c800;

  --border-hair:   1px solid var(--rule);
  --border-strong: 2px solid var(--ink);

  --font-display:  'IBM Plex Serif', 'Bodoni Moda', Georgia, serif;
  --font-body:     'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:     'IBM Plex Mono', ui-monospace, monospace;
  --font-burma:    'Noto Sans Myanmar', 'Pyidaungsu', sans-serif;
}

*, *::before, *::after {
  border-radius: 0 !important;
  box-shadow: none !important;
  background-image: none !important;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--accent); }

::selection { background: var(--highlight); color: var(--ink); }

.frame {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  max-width: 1100px;
  margin: 0 auto;
  background: var(--paper);
  border-top: var(--border-strong);
  border-bottom: var(--border-strong);
}

/* ===== Titlebar (kept tight, like a tab) ===== */

.bar {
  display: flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  background: var(--chrome);
  border-bottom: var(--border-hair);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  position: sticky;
  top: 0;
  z-index: 10;
}

.bar__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  margin-right: 8px;
}

.bar__title { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bar__spacer { flex: 1; }

.bar__meta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
}

/* ===== Page ===== */

.page {
  flex: 1;
  padding: 0;
  background: var(--paper);
}

/* ===== Poster (the dominant element) ===== */

.poster {
  padding: 96px 64px 80px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  max-width: 100%;
}

@media (max-width: 720px) {
  .poster { padding: 56px 28px 48px; gap: 24px; }
}

.poster__brand {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-muted);
  margin: 0 0 8px;
  padding-bottom: 12px;
  border-bottom: var(--border-hair);
  max-width: 680px;
}

.poster__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(72px, 13vw, 168px);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  padding: 0;
  color: var(--ink);
  /* MoMA principle: one element dominates. Everything else recedes. */
}

.poster__title-my {
  display: block;
  font-family: var(--font-burma);
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  margin: 0 0 12px;
  color: var(--ink);
}

.poster__title-en {
  display: block;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(48px, 9vw, 112px);
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--ink);
}

.poster__caption {
  margin: 24px 0 0;
  max-width: 540px;
}

.poster__lede {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.45;
  margin: 0 0 16px;
  color: var(--ink);
}

.poster__lede em { font-style: italic; }

.poster__caption p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 6px;
  color: var(--ink-muted);
  max-width: 480px;
}

/* ===== Enter (the call to action) ===== */

.poster__action {
  margin: 32px 0 0;
}

.enter {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  padding: 8px 0;
  text-decoration: none;
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ink);
  transition: border-color 120ms linear, color 120ms linear;
}

.enter:hover, .enter:focus-visible {
  border-bottom-color: var(--accent);
  color: var(--accent);
  outline: none;
}

.enter__my {
  font-family: var(--font-burma);
  font-weight: 500;
  font-size: 18px;
  color: var(--ink-muted);
  letter-spacing: 0;
}

.enter__arrow {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 32px;
  color: var(--accent);
  display: inline-block;
  margin-left: 4px;
}

/* ===== Hairline rule (between sections) ===== */

.rule {
  border: none;
  border-top: var(--border-hair);
  margin: 0 64px;
}

@media (max-width: 720px) { .rule { margin: 0 28px; } }

/* ===== Aside (secondary sections) ===== */

.aside {
  padding: 56px 64px 40px;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) 2fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 720px) {
  .aside {
    padding: 32px 28px 24px;
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.aside__head { margin: 0; }

.aside__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 6px;
  color: var(--ink);
  line-height: 1.05;
}

.aside__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  margin: 0;
}

.aside__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: b;
  display: grid;
  gap: 12px;
}

.aside__list li {
  counter-increment: b;
  font-size: 14px;
  line-height: 1.55;
  padding: 12px 0 12px 36px;
  border-top: var(--border-hair);
  position: relative;
  color: var(--ink);
}

.aside__list li::before {
  content: counter(b, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.06em;
}

.aside__list li:last-child { border-bottom: var(--border-hair); }

/* ===== Status grid ===== */

.status, .docs {
  padding: 56px 64px 40px;
}

@media (max-width: 720px) {
  .status, .docs { padding: 32px 28px 24px; }
}

.status .aside__head, .docs .aside__head {
  margin: 0 0 24px;
}

.grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border-top: var(--border-hair);
  border-bottom: var(--border-hair);
}

.grid th, .grid td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: var(--border-hair);
  vertical-align: top;
}

.grid th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-muted);
  background: var(--chrome);
  border-bottom-color: var(--rule);
}

.grid td { font-family: var(--font-mono); }
.grid td:nth-child(2) {
  font-family: var(--font-mono);
  width: 140px;
  white-space: nowrap;
}

.dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  vertical-align: middle;
  margin-right: 6px;
}

.dot--ok   { background: var(--positive); }
.dot--plan { background: var(--ink-muted); }
.dot--warn { background: var(--accent); }

/* ===== Docs list ===== */

.docs__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: var(--border-hair);
}

.docs__list li {
  border-bottom: var(--border-hair);
}

.docs__list a {
  display: block;
  padding: 12px 0;
  text-decoration: none;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink);
}

.docs__list a:hover { color: var(--accent); }

/* ===== Colophon ===== */

.colophon {
  padding: 32px 64px 56px;
  font-size: 12px;
  color: var(--ink-muted);
}

@media (max-width: 720px) { .colophon { padding: 24px 28px 32px; } }

.colophon p { margin: 0 0 6px; max-width: 720px; line-height: 1.6; }
.colophon p:last-child { margin-bottom: 0; }

/* ===== Statusbar ===== */

.statusbar {
  display: flex;
  align-items: center;
  height: 22px;
  padding: 0 12px;
  background: var(--chrome);
  border-top: var(--border-hair);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-muted);
  gap: 18px;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
}

.statusbar__spacer { flex: 1; }
.statusbar__item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }