/* The Superior Fleet Museum: the brochure it printed for an opening that
   never happened. Cream paper, serif type, typewriter headings, double rules,
   and the game's own pixel art.

   Pixel images (img.px) say their native width in style="--w:N" and are shown
   at a whole multiple of it: x1-x6 everywhere, m1-m4 under 700 px. Nothing is
   ever scaled by a fraction. Pictures too wide for their box sit in a .crop,
   which shows the middle (or .left / .right) at full size instead of
   shrinking them. */

:root {
  --paper: #e9e4d2;
  --card: #f2eee1;
  --tag: #e6d6a2;
  --ink: #16131c;
  --ink-soft: #3a3c46;
  --red: #7a282c;
  --blue: #283068;
  --brown: #5c4028;
  --night: #0c0a12;
  --cream: #eeeadc;
  --yellow: #e4c458;
  --green: #98ce68;
  --serif: Georgia, "Times New Roman", Times, serif;
  --mono: "Courier New", Courier, "Nimbus Mono PS", "Liberation Mono", monospace;
  --page: 1120px;
  --pad: 24px;
}

* { box-sizing: border-box; }

html {
  background: var(--paper);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font: 17px/1.55 var(--serif);
}

a { color: var(--blue); text-underline-offset: 2px; }
a:hover { color: var(--red); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 2px; }

p { margin: 0 0 0.9em; }
figure, blockquote { margin: 0; }

.wrap {
  max-width: calc(var(--page) + 2 * var(--pad));
  margin: 0 auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* Out of sight but still on the page until it's focused (parking it off
   the top edge made phones think the page was wider than the screen). */
.skip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 10;
  background: var(--night);
  color: var(--cream);
  font: bold 14px var(--mono);
  padding: 8px 12px;
}
.skip:not(:focus) {
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  clip-path: inset(50%);
}

/* ------------------------------------------------------------ pixel images */

img.px {
  display: block;
  max-width: none;
  height: auto;
  image-rendering: pixelated;
}
img.px.x1 { width: calc(var(--w) * 1px); }
img.px.x2 { width: calc(var(--w) * 2px); }
img.px.x3 { width: calc(var(--w) * 3px); }
img.px.x4 { width: calc(var(--w) * 4px); }
img.px.x5 { width: calc(var(--w) * 5px); }
img.px.x6 { width: calc(var(--w) * 6px); }

.crop {
  display: flex;
  justify-content: center;
  overflow: hidden;
  width: fit-content;
  max-width: 100%;
}
.crop.left { justify-content: flex-start; }
.crop.right { justify-content: flex-end; }
.crop > img.px { flex: none; }

.frame {
  border: 2px solid var(--ink);
  background: var(--night);
}

/* ------------------------------------------------------------ the strip */

.strip {
  background: var(--night);
  color: var(--cream);
  font: 14px/1.4 var(--mono);
}
.strip .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  padding-top: 9px;
  padding-bottom: 9px;
}
.strip p { margin: 0; }
.strip b { color: var(--yellow); letter-spacing: 0.04em; }
.play {
  color: var(--green);
  font: bold 14px/1.2 var(--mono);
  letter-spacing: 0.06em;
  text-decoration: none;
  white-space: nowrap;
  border: 2px solid var(--green);
  padding: 5px 10px;
}
.play:hover, .play:focus-visible { background: var(--green); color: var(--night); }

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

.mast {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 30px;
  padding-bottom: 20px;
  border-bottom: 7px double var(--ink);
}
.mast .name { display: inline-block; color: var(--ink); }
.mast .est {
  margin: 12px 0 0;
  font-style: italic;
  font-size: 16px;
  color: var(--ink-soft);
}
.stamp {
  flex: none;
  margin: 0 12px 0 0;
  padding: 9px 14px 7px;
  font: bold 21px/1 var(--mono);
  letter-spacing: 0.14em;
  color: var(--red);
  border: 3px solid var(--red);
  border-radius: 7px;
  box-shadow: inset 0 0 0 2px var(--paper), inset 0 0 0 4px var(--red);
  transform: rotate(-8deg);
  opacity: 0.86;
  mix-blend-mode: multiply;
  animation: thump 0.24s ease-out both;
}
/* The stamp lands once. Its first frame stays inside the stamp's own
   margin, so it never makes a phone's page wider than the screen. */
@keyframes thump {
  from { transform: rotate(-6deg) scale(1.08); opacity: 0; }
  to { transform: rotate(-8deg) scale(1); opacity: 0.86; }
}

/* ------------------------------------------------------------ the nav */

.nav { border-bottom: 1px solid var(--ink); }
.nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 0;
  padding: 10px 0;
  font: bold 15px/1.4 var(--mono);
  letter-spacing: 0.1em;
}
.nav a {
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  padding: 2px 6px;
}
.nav a:hover { text-decoration: underline; color: var(--ink); }
.nav a[aria-current="page"] { background: var(--ink); color: var(--paper); }
.nav-toggle { display: none; }

/* ------------------------------------------------------------ type */

.page-head { padding: 30px 0 4px; }
.page-head h1 { margin: 0 0 16px; }
.standfirst {
  max-width: 44em;
  font-size: 20px;
  line-height: 1.5;
  font-style: italic;
}

h2, h3 {
  font-family: var(--mono);
  font-weight: bold;
  letter-spacing: 0.1em;
  line-height: 1.25;
}

.section-title {
  margin: 44px 0 20px;
  padding-bottom: 6px;
  border-bottom: 4px double var(--ink);
  font-size: 18px;
}

.note {
  font-style: italic;
  font-size: 15px;
  line-height: 1.5;
  color: var(--brown);
  border-left: 2px solid var(--brown);
  padding-left: 12px;
}
.caption {
  margin: 8px 0 22px;
  font-style: italic;
  font-size: 15px;
  color: var(--brown);
}

.nowrap { white-space: nowrap; }

/* In-world lines quoted from the game, in its capitals. */
.says {
  margin: 0 0 18px;
  font: bold 14px/1.45 var(--mono);
  letter-spacing: 0.06em;
}
.says p { margin: 0 0 4px; }
.says cite {
  display: block;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}

.cta {
  display: inline-block;
  background: var(--night);
  color: var(--green);
  font: bold 16px/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-decoration: none;
  padding: 13px 18px;
  border: 2px solid var(--night);
}
.cta:hover, .cta:focus-visible { background: var(--green); color: var(--night); }

/* ------------------------------------------------------------ Welcome */

.welcome {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 270px;
  gap: 40px;
  padding-top: 30px;
  padding-bottom: 48px;
}
.welcome .lede { font-size: 19px; }
.welcome .lede b { font-family: var(--mono); letter-spacing: 0.06em; }
.welcome .text { max-width: 40em; }
.way-in {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 28px;
  margin: 26px 0 0;
}

.audio-guide { display: flex; align-items: center; gap: 14px; }
.audio-guide p { margin: 0; max-width: 17em; font-size: 15px; font-style: italic; color: var(--brown); }
.guide-btn {
  flex: none;
  font: bold 16px/1.2 var(--mono);
  letter-spacing: 0.08em;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: 0;
  padding: 11px 14px;
  min-width: 13em;
  text-align: left;
  box-shadow: 4px 4px 0 var(--ink);
  cursor: pointer;
}
.guide-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.guide-btn[aria-pressed="true"] { background: var(--night); color: var(--yellow); }
.guide-status:empty { display: none; }

.notices {
  border-left: 1px dotted var(--ink);
  padding-left: 26px;
  font-size: 16px;
  line-height: 1.5;
}
.notices section + section { margin-top: 26px; }
.notices h2 {
  margin: 0 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--ink);
  font-size: 15px;
  letter-spacing: 0.16em;
}
.notices p { margin: 0 0 6px; }
.notices .frame { margin: 4px 0 10px; }
.notices .play { display: inline-block; margin-top: 4px; font-size: 13px; white-space: normal; color: var(--night); border-color: var(--night); }
.notices .play:hover, .notices .play:focus-visible { background: var(--night); color: var(--green); }

.faces { margin: 40px 0 0; }
.faces h2 {
  margin: 0 0 14px;
  padding-bottom: 6px;
  border-bottom: 4px double var(--ink);
  font-size: 16px;
  letter-spacing: 0.14em;
}
.faces ul {
  list-style: none;
  margin: 0 0 12px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(6, max-content);
  gap: 14px 18px;
}
.faces li > a, .faces li > span { display: block; color: var(--ink); text-decoration: none; }
.faces img.px { border: 2px solid var(--ink); box-sizing: content-box; }
.faces li > a:hover img.px { border-color: var(--red); }
.faces .cap {
  display: block;
  margin-top: 5px;
  font: bold 12px/1.2 var(--mono);
  letter-spacing: 0.1em;
  text-align: center;
}
.faces p { margin: 0; font-size: 16px; }

/* ------------------------------------------------------------ Exhibits */

.flagship {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  background: var(--card);
  border: 1px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 3px;
  margin: 8px 4px 40px;
}
.flagship > .plate { border-right: 1px solid var(--ink); }
.flagship .label { padding: 22px 26px 18px; }
.flagship .rooms {
  grid-column: 1 / -1;
  border-top: 1px solid var(--ink);
  padding: 18px 26px 24px;
}
.rooms h3 { margin: 0 0 12px; font-size: 15px; }
.rooms ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.rooms li p { margin: 6px 0 0; font: bold 13px/1.3 var(--mono); letter-spacing: 0.1em; }

.plate {
  background: var(--night);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: auto;
  max-width: none;
}

.exhibits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 32px;
  margin-bottom: 40px;
}
.exhibit {
  background: var(--card);
  border: 1px solid var(--ink);
  display: flex;
  flex-direction: column;
}
.exhibit > .plate { border-bottom: 1px solid var(--ink); padding: 14px 0; }
.label { padding: 18px 22px 8px; }
.label .no {
  margin: 0 0 2px;
  font: bold 13px/1.3 var(--mono);
  letter-spacing: 0.16em;
  color: var(--red);
}
.label h2 { margin: 0; font-size: 24px; letter-spacing: 0.08em; }
.label .kind { margin: 0 0 12px; font-style: italic; color: var(--ink-soft); }

.facts {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: 3px 14px;
  margin: 0 0 14px;
  font-size: 15px;
}
.facts dt { font: bold 13px/1.6 var(--mono); letter-spacing: 0.1em; }
.facts dd { margin: 0; }

.lot88 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 28px;
  align-items: start;
  background: var(--card);
  border: 1px solid var(--ink);
  padding: 22px 26px 12px;
  margin-bottom: 48px;
}
.lot88 .label { padding: 0; }

/* ------------------------------------------------------------ Guides */

.catalogue {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 32px;
  margin-bottom: 8px;
}
.entry {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 22px;
  align-items: start;
  padding: 20px 22px 14px;
  background: var(--card);
  border: 1px solid var(--ink);
}
.entry > img.px { border: 2px solid var(--ink); box-sizing: content-box; }
.entry h2 { margin: 6px 0 0; font-size: 26px; letter-spacing: 0.1em; }
.entry .role { margin: 0 0 8px; font-style: italic; color: var(--ink-soft); }
.entry .desc {
  margin: 0 0 10px;
  font: bold 16px/1.3 var(--mono);
  letter-spacing: 0.06em;
  color: var(--red);
}
.entry p { font-size: 16px; }

.tag {
  position: relative;
  display: inline-block;
  margin: 0;
  padding: 3px 12px 2px 24px;
  background: var(--tag);
  border: 1px solid var(--ink);
  border-radius: 0 3px 3px 0;
  font: bold 14px/1.3 var(--mono);
  letter-spacing: 0.12em;
}
.tag::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -4px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--ink);
}

.founder {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 28px;
  align-items: start;
}
.founder .plaque {
  margin: 10px 0 0;
  padding: 6px 10px;
  background: var(--yellow);
  border: 2px solid var(--brown);
  font: bold 13px/1.3 var(--mono);
  letter-spacing: 0.12em;
  text-align: center;
}

.official {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 26px;
  align-items: start;
  max-width: 860px;
  margin: 20px auto 52px;
  padding: 30px 30px 18px;
  background: #f7f3e6;
  border: 1px solid var(--ink);
  border-top: 10px solid var(--red);
}
.official::before {
  content: "";
  position: absolute;
  top: -19px;
  left: 50%;
  width: 16px;
  height: 16px;
  margin-left: -8px;
  border-radius: 50%;
  background: var(--red);
  border: 2px solid var(--ink);
}
.official > img.px { border: 2px solid var(--ink); box-sizing: content-box; }
.official h2 {
  margin: 0 0 4px;
  font-size: 26px;
  letter-spacing: 0.2em;
  color: var(--red);
}
.official .by { margin: 0 0 14px; font: bold 13px/1.3 var(--mono); letter-spacing: 0.12em; }
.official .rule {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 2px dashed var(--red);
  font: bold 16px/1.45 var(--mono);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------ Plan Your Visit */

.case {
  background: var(--night);
  color: var(--cream);
  border: 2px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 4px;
  margin: 18px 5px 44px;
  padding: 34px 28px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.case .logo { margin: 0 0 26px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.case .crop { max-width: 100%; border: 2px solid #6c707a; }
.case .facts-line {
  margin: 22px 0 22px;
  font: bold 15px/1.5 var(--mono);
  letter-spacing: 0.14em;
  color: var(--yellow);
}
.case .play { font-size: 18px; padding: 12px 18px; border-width: 3px; }

.desk { margin: 0 0 40px; }
.desk > div {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 6px 32px;
  padding: 18px 0 10px;
  border-bottom: 1px solid var(--ink);
}
.desk dt { font: bold 16px/1.5 var(--mono); letter-spacing: 0.12em; }
.desk dd { margin: 0; max-width: 40em; }
.desk ul { margin: 0 0 0.9em; padding-left: 1.2em; }
.desk li { margin-bottom: 4px; }
.desk .shop dd {
  font: bold 20px/1.4 var(--mono);
  letter-spacing: 0.04em;
}

/* ------------------------------------------------------------ From the Curators */

.letter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 48px;
  padding: 4px 0 48px;
}
.letter .body { max-width: 40em; }
.letter h2 { margin: 30px 0 8px; font-size: 16px; letter-spacing: 0.14em; }
.letter h2:first-child { margin-top: 0; }
.letter .sign { margin-top: 26px; font-style: italic; }
.letter .side { display: flex; flex-direction: column; gap: 22px; }
.letter .case { margin: 4px; padding: 26px 16px 24px; outline-offset: 3px; }
.letter .case .logo { margin-bottom: 18px; gap: 8px; }
.letter .case .play { font-size: 15px; }
.letter .faces { margin: 0 4px; }
.letter .faces ul { grid-template-columns: repeat(3, max-content); }
.letter .faces p { font-size: 15px; font-style: italic; color: var(--brown); }

/* ------------------------------------------------------------ 404 */

.lost {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 32px;
  align-items: start;
  padding: 10px 0 56px;
}
.lost > img.px { border: 2px solid var(--ink); box-sizing: content-box; }
.lost .big { font-size: 24px; font-style: italic; }

/* ------------------------------------------------------------ the footer */

.foot {
  margin-top: 8px;
  border-top: 7px double var(--ink);
  padding-top: 14px;
  padding-bottom: 36px;
  font: 14px/1.6 var(--mono);
  color: var(--ink-soft);
}
.foot p { margin: 0; max-width: 60em; }

/* ------------------------------------------------------------ narrower screens */

@media (max-width: 979px) {
  .welcome { grid-template-columns: minmax(0, 1fr); }
  .notices {
    border-left: 0;
    border-top: 1px dotted var(--ink);
    padding: 26px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 32px;
  }
  .notices section + section { margin-top: 0; }
  .flagship { grid-template-columns: minmax(0, 1fr); }
  .flagship > .plate { border-right: 0; border-bottom: 1px solid var(--ink); padding: 14px 0; }
  .catalogue { grid-template-columns: minmax(0, 1fr); }
  .letter { grid-template-columns: minmax(0, 1fr); }
  .desk > div { grid-template-columns: 190px minmax(0, 1fr); }
}

@media (max-width: 699px) {
  :root { --pad: 16px; }
  body { font-size: 16px; }

  img.px.m1 { width: calc(var(--w) * 1px); }
  img.px.m2 { width: calc(var(--w) * 2px); }
  img.px.m3 { width: calc(var(--w) * 3px); }
  img.px.m4 { width: calc(var(--w) * 4px); }

  .strip .wrap { padding-top: 10px; padding-bottom: 12px; }
  .strip p { font-size: 12px; }
  .strip .play { font-size: 13px; }

  .mast { align-items: flex-start; flex-direction: column; padding-top: 22px; padding-bottom: 16px; }
  .mast .est { font-size: 15px; margin-top: 10px; }
  .stamp { align-self: flex-end; margin: -6px 8px 2px 0; padding: 8px 12px 6px; font-size: 16px; }

  .js .nav-toggle {
    display: block;
    width: 100%;
    margin: 0;
    padding: 12px 0;
    background: none;
    border: 0;
    color: var(--ink);
    font: bold 15px/1.2 var(--mono);
    letter-spacing: 0.12em;
    text-align: left;
    cursor: pointer;
  }
  .js .nav-toggle[aria-expanded="true"] { border-bottom: 1px dotted var(--ink); }
  .nav-toggle span { display: inline-block; margin-left: 4px; }
  .nav-toggle[aria-expanded="true"] span { transform: rotate(180deg); }
  .js .nav ul:not(.open) { display: none; }
  .nav ul { flex-direction: column; gap: 0; padding: 4px 0 10px; }
  .nav li a { display: block; margin: 0; padding: 9px 8px; }

  .page-head { padding-top: 22px; }
  .standfirst { font-size: 18px; }

  .welcome { padding-top: 22px; gap: 34px; }
  .welcome .lede { font-size: 17px; }
  .notices { grid-template-columns: minmax(0, 1fr); }
  .audio-guide { flex-direction: column; align-items: flex-start; }
  .faces ul { grid-template-columns: repeat(3, max-content); gap: 14px 22px; }

  .exhibits { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .label { padding: 16px 16px 6px; }
  .flagship { margin: 4px 4px 32px; }
  .flagship .label, .flagship .rooms { padding-left: 16px; padding-right: 16px; }
  .rooms ul { grid-template-columns: minmax(0, 1fr); }
  .lot88 { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 8px; }
  .lot88 > img.px { margin-bottom: 14px; }

  .entry { grid-template-columns: minmax(0, 1fr); padding: 18px 16px 10px; }
  .entry > img.px { margin-bottom: 12px; }
  .founder, .official, .lost { grid-template-columns: minmax(0, 1fr); }
  .founder > div:first-child, .official > img.px, .lost > img.px { margin-bottom: 14px; }
  .official { padding: 26px 16px 12px; }

  .case { padding: 26px 12px 26px; margin: 12px 4px 36px; }
  .desk > div { grid-template-columns: minmax(0, 1fr); }
  .desk .shop dd { font-size: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
  .guide-btn:active { transform: none; }
}

@media print {
  .strip, .nav, .audio-guide, .skip { display: none; }
}