/* SPEC-agentville-hall-site §2 — one stylesheet, ported from the design files.
   design/NOTES.md holds the reading: every font, every colour, every hover, and
   the ten places this departs from the comps on purpose.

   The comps render through a React runtime. Nothing of it ships. Everything
   here is CSS, which is why the hover states and the hazard stripe work on a
   page with no JavaScript in it at all. */

:root {
  --ground: #0d0d0d;      /* the front page's ground */
  --ground-room: #0b0b0a; /* a room's, two points down, as the comps have it */
  --paper: #f4efe6;
  --white: #ffffff;       /* the sign, and only the sign */
  --secondary: #c9c3b8;   /* prose that is not the paragraph */
  --grey: #9a958b;
  --faint: #8f8a80;
  --line: #2e2d2a;
  --tile-line: #33312d;
  --tile-gutter: #1a1917;
  --panel-ink: #151513;
  --command: #141413;
  --hazard: #f2c21b;
  --green: oklch(0.76 0.15 150);

  --mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
  --command-mono: "JetBrains Mono", Consolas, "SF Mono", Menlo, monospace;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sign: "Overpass", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--paper);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

body.room { background: var(--ground-room); }

a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--white); }

/* ------------------------------------------------------------ the masthead */

.chrome {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 24px;
  padding: 56px 20px 0;
}

.sign { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

.mark { text-decoration: none; display: block; font-family: var(--sign); color: var(--white); }
.mark:hover { color: var(--white); }

.wordmark {
  display: block;
  font-weight: 800;
  font-size: 34px;
  line-height: 0.9;
  letter-spacing: -0.025em;
}

.pop {
  display: block;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}

/* A room page keeps the sign — smaller — and says which room you are in.
   NOTES departure 3. */
.room-page .wordmark { font-size: 22px; }
.room-page .pop { font-size: 13px; }

.label { margin: 18px 0 0; font-size: 20px; line-height: 1.3; }
.label a { text-decoration: none; }

.intro { grid-column: 2 / span 3; display: flex; flex-direction: column; gap: 22px; }

.intro p.story {
  margin: 0;
  font-family: var(--serif);
  font-size: 23px;
  line-height: 1.36;
  text-wrap: pretty;
}

.intro .under { font-size: 13px; line-height: 1.5; color: var(--secondary); }
.intro .under b { color: var(--paper); font-weight: 400; }

.chrome nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 30px;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
}
.chrome nav a { text-decoration: none; }
.chrome nav a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- the stripe */

.hazard {
  height: 10px;
  margin-top: 56px;
  background: repeating-linear-gradient(-45deg, var(--hazard) 0 10px, var(--ground) 10px 20px);
  animation: hazard-desktop 1.2s linear infinite;
}
@keyframes hazard-desktop { from { background-position-x: 0; } to { background-position-x: 28.2843px; } }
@keyframes hazard-mobile { from { background-position-x: 0; } to { background-position-x: 22.6274px; } }
@media (prefers-reduced-motion: reduce) { .hazard { animation: none; } }

/* ----------------------------------------------------------------- the rooms */

.rooms {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--line);
}

.room {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 300px;
  text-decoration: none;
  color: var(--paper);
  background: var(--ground);
}
.room:nth-child(3n+1), .room:nth-child(3n+2) { border-right: 1px solid var(--line); }
.room:nth-child(n+4) { border-top: 1px solid var(--line); }
.room:hover { background: var(--paper); color: var(--ground); }

.room .num { position: absolute; top: 18px; left: 20px; font-size: 18px; }
.room .name { font-size: 40px; letter-spacing: -0.01em; }
/* The plain name, beside the number, on hover only. */
.room .plain { position: absolute; top: 20px; left: 48px; font-size: 13px; opacity: 0; }
.room:hover .plain { opacity: 1; }

/* --------------------------------------------------------------- the bands */

.band {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: 24px;
  padding: 72px 20px 96px;
}
.band > * { grid-column: 1 / -1; }

.band h2 {
  margin: 0;
  font-family: var(--mono);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.band .lead { margin: 14px 0 0; font-size: 15px; line-height: 1.6; color: var(--secondary); }

/* A reading column: one story, one week's minutes, one form. */
.reading {
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 20px 88px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.reading h1 {
  margin: 0;
  font-family: var(--mono);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.25;
}
.reading p.story { font-family: var(--serif); font-size: 19px; line-height: 1.5; margin: 0; }

/* --------------------------------------------------------------- terminals */

.terminals {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 24px;
  row-gap: 24px;
  align-items: start;
  margin-top: 48px;
}

.terminals .head {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.terminals .step { display: flex; flex-direction: column; gap: 10px; }
.terminals .caption { font-size: 13px; line-height: 1.5; }
.terminals .rule { grid-column: 1 / -1; height: 1px; background: var(--line); margin: 8px 0; }

.command {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  background: var(--command);
  border: 1px solid var(--line);
  padding: 14px 16px;
}
.command pre {
  margin: 0;
  font-family: var(--command-mono);
  font-size: 13px;
  line-height: 1.65;
  white-space: pre;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.command pre.wrap { white-space: pre-wrap; }
/* A label, not a button: there is no JavaScript here to copy anything.
   NOTES departure 5. */
.command .copy { flex: none; font-size: 12px; color: var(--faint); }

/* ------------------------------------------------------------- story tiles */

.tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 44px 24px;
  padding: 64px 20px 80px;
}

.tile { display: flex; flex-direction: column; gap: 14px; }

/* The strip itself: three across, one row per act, so a one-act strip is a
   third as tall rather than two thirds empty. NOTES departure 7. */
.panels {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
  background: var(--tile-gutter);
  border: 1px solid var(--tile-line);
}
.panels.acts1 { aspect-ratio: 3 / 1; }
.panels.acts2 { aspect-ratio: 3 / 2; }
.panels.acts3 { aspect-ratio: 1; }

a.tile-link { text-decoration: none; color: inherit; display: block; }
a.tile-link:hover .panels { border-color: var(--paper); }

.panels .panel {
  background: var(--paper);
  color: var(--panel-ink);
  padding: 5px;
  overflow: hidden;
  text-transform: uppercase;
  text-align: left;
  font-size: 6px;
  line-height: 1.22;
  letter-spacing: 0.01em;
}
/* The checker's verdict is the hinge the joke turns on, so it is the one panel
   that is bigger and bold. */
.panels .panel.verdict { font-size: 10px; font-weight: 700; }

.caption {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  font-size: 13px;
}
.caption a { text-decoration: none; }
.caption a:hover { text-decoration: underline; }
.pick { color: var(--green); letter-spacing: 0.04em; }

/* One story, read at size. */
.story-panels { gap: 6px; }
.story-panels .panel { padding: 22px; font-size: 16px; line-height: 1.3; text-wrap: pretty; }
.story-panels .panel.verdict { font-size: 25px; }

.filed { text-align: center; font-size: 14px; color: var(--secondary); }
.filed form { display: inline; }

/* ------------------------------------------------------------- plain lists */

.rows { display: flex; flex-direction: column; }
.rows a.row {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  text-decoration: none;
  font-size: 14px;
}
.rows a.row:first-child { border-top: 0; }
.rows a.row:hover { text-decoration: underline; }
.rows .when { color: var(--secondary); }

.theme { font-size: 30px; line-height: 1.2; margin: 0; }
.quiet { color: var(--secondary); font-size: 13px; }
.count { color: var(--grey); font-size: 12px; letter-spacing: 0.1em; }
.pager { margin-top: 26px; font-size: 14px; }
.pager a { margin-right: 16px; }

/* ------------------------------------------------------------ decide page */

.kind { color: var(--secondary); font-size: 11px; letter-spacing: 0.18em; margin: 0; }
.moment { margin: 0; }
.moment p { margin: 0 0 2px; color: var(--secondary); font-size: 13px; }
.status { color: var(--grey); font-size: 12px; letter-spacing: 0.1em; margin: 0; }

.dogs { background: var(--paper); color: var(--panel-ink); padding: 12px 14px; max-width: 78ch; }
.dogs p { margin: 0 0 4px; }
.dogs b { display: inline-block; width: 8ch; }

.controls { display: flex; gap: 10px; margin: 0; }

.stamp {
  display: inline-block;
  border: 1px solid var(--green);
  color: var(--green);
  padding: 4px 10px;
  font-size: 12px;
  letter-spacing: 0.18em;
}

/* ------------------------------------------------------------- the forms */

form { margin: 0; }
textarea, input[type="text"] {
  width: 100%;
  max-width: 62ch;
  background: var(--paper);
  color: var(--panel-ink);
  border: 0;
  padding: 10px;
  font-family: var(--mono);
  font-size: 15px;
}
textarea { min-height: 140px; resize: vertical; }
label { display: block; margin: 10px 0; font-size: 13px; }

button {
  background: transparent;
  color: var(--paper);
  border: 1px solid var(--line);
  padding: 9px 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  cursor: pointer;
}
button:hover { border-color: var(--paper); }
button.link {
  border: 0;
  padding: 0;
  font-size: 13px;
  letter-spacing: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
}
button.link:hover { color: var(--white); }

.error { color: var(--hazard); }

pre.command-block {
  background: var(--command);
  color: var(--paper);
  border: 1px solid var(--line);
  padding: 12px 14px;
  margin: 0;
  max-width: 78ch;
  overflow-x: auto;
  font-family: var(--command-mono);
  font-size: 14px;
}

.poster {
  aspect-ratio: 27 / 10;
  background: repeating-linear-gradient(-45deg, #141414 0 12px, #101010 12px 24px);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--grey);
  font-size: 12px;
  letter-spacing: 0.2em;
}

footer {
  border-top: 1px solid var(--line);
  padding: 20px;
  font-size: 12px;
  color: var(--grey);
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 640px) {
  .chrome { grid-template-columns: 1fr; gap: 18px; padding: 32px 16px 0; }
  .intro { grid-column: 1; }
  .intro p.story { font-size: 18px; line-height: 1.4; }
  .intro .under { font-size: 11.5px; line-height: 1.55; }
  .wordmark { font-size: 30px; }
  .pop { font-size: 14px; }
  .label { margin: 0; font-size: 16px; }
  .chrome nav { margin-top: 20px; gap: 5px; font-size: 12px; }

  .hazard {
    height: 8px;
    margin-top: 36px;
    background: repeating-linear-gradient(-45deg, var(--hazard) 0 8px, var(--ground) 8px 16px);
    animation-name: hazard-mobile;
  }

  .rooms { grid-template-columns: 1fr; }
  .room { height: 150px; border-right: 0; }
  .room:nth-child(n+2) { border-top: 1px solid var(--line); }
  .room:nth-child(n+4) { border-top: 1px solid var(--line); }
  .room .num { top: 12px; left: 16px; font-size: 15px; }
  .room .name { font-size: 28px; }
  .room .plain { top: 14px; left: 42px; font-size: 12px; }

  .band { grid-template-columns: 1fr; padding: 48px 16px 64px; }
  .band h2 { font-size: 26px; line-height: 1.15; }
  .band .lead { font-size: 13px; }
  .reading { padding: 36px 16px 64px; }

  /* Two windows, one column: each terminal keeps its own header. */
  .terminals { grid-template-columns: 1fr; row-gap: 22px; margin-top: 28px; }
  .terminals .rule { display: none; }
  .command { gap: 14px; padding: 12px 14px; }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 14px; padding: 40px 16px 56px; }
  .panels { gap: 2px; }
  .panels .panel { padding: 3px; font-size: 4px; line-height: 1.2; }
  .panels .panel.verdict { font-size: 7px; }
  .story-panels { gap: 4px; }
  .story-panels .panel { padding: 10px; font-size: 9px; }
  .story-panels .panel.verdict { font-size: 13px; }

  .caption { font-size: 11px; gap: 3px; }
  footer { padding: 16px; font-size: 10.5px; }
}