:root {
  --paper: #f6f4ef;
  --ink: #1d1a16;
  --muted: #5e574e;
  --line: #d7d0c4;
  --bad: #8a2a22;
  --good: #24573a;
}

* { box-sizing: border-box; }

html, body { max-width: 100%; overflow-x: clip; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.02rem/1.5 "Segoe UI", sans-serif;
}

.skip {
  position: absolute;
  left: 0.75rem;
  top: -3rem;
  background: var(--ink);
  color: var(--paper);
  padding: 0.35rem 0.6rem;
}

.skip:focus { top: 0.75rem; }

.wrap { width: min(72rem, calc(100% - 2rem)); margin: 0 auto 1.5rem; }

.top { width: min(72rem, calc(100% - 2rem)); margin: 1.5rem auto 0; }

.label { color: var(--muted); margin: 0 0 0.4rem; }

h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 500; line-height: 1.2; }

h1 { font-size: clamp(1.7rem, 3vw, 2.5rem); margin: 0 0 0.6rem; }

.board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.slot { min-width: 0; }

.slot p { margin: 0.35rem 0; font-size: 0.92rem; }

.frame {
  height: 168px;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #fff;
}

.screen { transform-origin: top left; }

.screen[data-width="375"] { width: 375px; transform: scale(0.62); }
.screen[data-width="768"] { width: 768px; transform: scale(0.3); }
.screen[data-width="1440"] { width: 1440px; transform: scale(0.16); }

.site nav a {
  display: inline-block;
  padding: 10px 14px;
  background: #2a2723;
  color: #fff;
  text-decoration: none;
}

.screen[data-mode="broken"] nav { white-space: nowrap; }

.screen[data-mode="fixed"] nav { display: flex; flex-wrap: wrap; }

.hero { position: relative; background: #e7e0d2; padding: 24px; }

.screen[data-mode="broken"] .hero {
  width: 1200px;
  box-sizing: content-box;
}

.screen[data-mode="fixed"] .hero {
  width: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.title { margin: 0 0 0.4rem; }

.screen[data-mode="broken"] .cta {
  position: absolute;
  top: 18px;
  left: 180px;
  background: #8c4a32;
  color: #fff;
  padding: 8px 12px;
}

.screen[data-mode="fixed"] .cta {
  position: static;
  display: inline-block;
  margin: 0 0 0.6rem;
  background: #3f5c4b;
  color: #fff;
  padding: 8px 12px;
}

.cards { display: flex; }
.cards article { background: #fff; border: 1px solid var(--line); padding: 12px; min-width: 140px; }

.screen[data-mode="broken"] .shift { margin-left: 80px; }
.screen[data-mode="fixed"] .cards { gap: 16px; flex-wrap: wrap; }
.screen[data-mode="fixed"] .shift { margin-left: 0; }

.pass { color: var(--good); }
.fail { color: var(--bad); }

button {
  font: inherit;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  padding: 0.55rem 0.8rem;
}

button:focus-visible, a:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }

footer { color: var(--muted); padding-bottom: 2rem; }

@media (max-width: 800px) {
  .board { grid-template-columns: 1fr; }
}