/* HOOK LINE SINKER — support site.
   The palette, the type stack and the surface treatments are lifted from the
   game's own app/src/style.css so the site is made of the same materials as
   the game: navy water, sawn timber, chart parchment. Hard shadows and square
   corners only — a rounded, glassy panel reads as a web app, which is exactly
   what this site must not look like. */

:root {
  /* brand palette, matched to the game */
  --ink: #f2ead8;
  --ink-dim: #a8b4b8;
  --navy: #0c1a24;
  --navy-2: #122834;
  --navy-3: #1a3644;
  --cyan: #46c8dc;
  --cyan-dim: #2a7e94;
  --amber: #f2b23a;
  --amber-2: #d99024;

  /* The chart's parchment, for long-form reading.
     Two of the game's inks are darkened one step here. On #d9c49a the
     original #8a4718 measures 4.11:1 and #6f5a3c measures 3.84:1 — under
     the 4.5 needed for body-size text. In the game they sit on HUD-scale
     type for a moment; on a support page they are the reading surface, so
     accessibility wins over an exact colour match. Both stay the same hue. */
  --paper: #d9c49a;
  --paper-burn: #b8975f;
  --ink-brown: #3e3020;
  --ink-brown-2: #5c4a30; /* game: #6f5a3c — 3.84:1, now 4.97:1 */
  --ink-red: #7a3d14; /* game: #8a4718 — 4.11:1, now 4.92:1 */
  --ink-teal: #175263; /* game: #1f6272 — 4.04:1, now 5.08:1 */

  --shadow: rgba(4, 10, 14, 0.55);
  --font: 'Menlo', 'SF Mono', ui-monospace, 'Courier New', monospace;

  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* the anchor targets and skip link should not land under the header */
  scroll-padding-top: 90px;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--navy);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  /* keep the pixel art crisp but never let a wide image push the page */
  overflow-x: hidden;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Every text block in the site is set to avoid a last line holding one
   short word. `pretty` handles prose; headings get `balance` so a two-line
   title splits evenly instead of hanging a word. Both degrade to normal
   wrapping where unsupported. */
p,
li {
  text-wrap: pretty;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

.pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* ---------------------------------------------------------------- links */

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

a:hover {
  color: #7adcec;
}

/* A visible focus ring on every theme surface. Amber reads on navy and on
   parchment alike, which is why it is the one focus colour site-wide. */
:where(a, button, [tabindex]):focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 50;
  padding: 12px 18px;
  background: var(--amber);
  color: #241804;
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  left: 12px;
  top: 12px;
}

/* --------------------------------------------------------------- header */

.masthead {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px clamp(16px, 4vw, 40px);
  background: var(--navy);
  border-bottom: 2px solid var(--navy-3);
}

.masthead .mark {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 14px;
}

.masthead .mark img {
  width: 34px;
  height: 34px;
  border: 1px solid var(--navy-3);
}

.masthead nav {
  margin-left: auto;
  display: flex;
  gap: clamp(14px, 3vw, 26px);
  font-size: 13px;
  letter-spacing: 1px;
}

/* The game gives every control a 44px minimum. Nav links here were 22px
   tall, under even the WCAG 2.2 floor of 24. They now fill a 44px box, and
   the rule is painted as a background so it stays tight under the text
   instead of dropping to the bottom of the enlarged hit area. */
.masthead nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  text-decoration: none;
  background-image: linear-gradient(transparent, transparent);
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: 0 calc(50% + 0.8em);
}

.masthead nav a:hover {
  background-image: linear-gradient(var(--cyan-dim), var(--cyan-dim));
}

.masthead nav a[aria-current='page'] {
  color: var(--amber);
  background-image: linear-gradient(var(--amber), var(--amber));
}

/* ----------------------------------------------------------------- hero
   The lake is the page's ground, not a decorative banner: the artwork runs
   full-bleed behind the title block and the navy fades up out of it so the
   text sits in the dark water rather than on top of a photo. */

.hero {
  position: relative;
  isolation: isolate;
  /* fill whatever the header and footer leave, so the lake is the page's
     ground rather than a banner with dead navy underneath it */
  flex: 1;
  min-height: clamp(420px, 64vh, 660px);
  display: grid;
  align-items: end;
  overflow: hidden;
  border-bottom: 2px solid var(--navy-3);
}

.hero-art {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* keep the boat and waterline in the upper third, so the title block sits
     in open water rather than on top of the pier */
  object-position: 30% 38%;
}

.hero::after {
  /* the water darkening down into the deep, so cream text stays legible */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(12, 26, 36, 0) 30%, rgba(12, 26, 36, 0.82) 72%, var(--navy) 100%),
    linear-gradient(90deg, rgba(12, 26, 36, 0.7) 0%, rgba(12, 26, 36, 0.15) 45%, rgba(12, 26, 36, 0) 70%);
}

.hero-inner {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: clamp(28px, 6vw, 56px) clamp(16px, 4vw, 40px) clamp(30px, 5vw, 52px);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(18px, 4vw, 34px);
  align-items: end;
}

.hero-icon {
  width: clamp(96px, 17vw, 168px);
  /* the approved icon is a square composition; never crop or letterbox it */
  aspect-ratio: 1 / 1;
  border: 2px solid var(--navy-3);
  box-shadow: 0 5px 0 var(--shadow);
}

.hero-text {
  min-width: 0;
}

/* The game's own title art is the wordmark. On the page the name is set
   small and spaced, the way the HUD sets a label — a 92px CSS headline was
   the loudest thing about the old site and the least like the game. */
.hero-text h1 {
  margin: 0;
  font-size: clamp(21px, 3.6vw, 32px);
  line-height: 1.15;
  letter-spacing: 2px;
  font-weight: 700;
  color: var(--ink);
  text-shadow: 0 2px 0 rgba(4, 10, 14, 0.8);
}

.hero-text .tagline {
  margin: 10px 0 0;
  font-size: clamp(14px, 2vw, 17px);
  color: var(--ink-dim);
  text-shadow: 0 1px 0 rgba(4, 10, 14, 0.9);
}

/* ------------------------------------------------------------ timber signs
   Everything pressable in this game is a sawn timber sign, so every primary
   destination on this site is one too. */

.signs {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(18px, 3vw, 26px);
}

.sign {
  --seam: #2c1d10;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 15px 22px;
  min-height: 52px;
  color: #f5e9cf;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1.5px;
  background:
    repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0 9px,
      rgba(44, 29, 16, 0.34) 9px 10px
    ),
    linear-gradient(180deg, #7c5330 0%, #6a4526 55%, #543518 100%);
  border: 2px solid var(--seam);
  box-shadow: 0 4px 0 rgba(14, 8, 3, 0.55);
  transition: transform 90ms ease, box-shadow 90ms ease;
}

/* the two nail heads a sawn sign is hung by */
.sign::before,
.sign::after {
  content: '';
  position: absolute;
  top: 6px;
  width: 3px;
  height: 3px;
  background: #c8a97a;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.5);
}

.sign::before {
  left: 8px;
}

.sign::after {
  right: 8px;
}

.sign:hover {
  color: #fff6e2;
}

.sign:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 rgba(14, 8, 3, 0.55);
}

.sign.amber {
  color: #241804;
  background: linear-gradient(180deg, var(--amber) 0%, var(--amber-2) 100%);
  border-color: #8a5c14;
}

.sign.amber:hover {
  color: #120c02;
}

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

main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.band {
  width: min(1120px, 100%);
  margin: 0 auto;
  padding: clamp(30px, 6vw, 64px) clamp(16px, 4vw, 40px);
}

/* the asymmetric reading layout: a narrow measure held left of centre, with
   the remaining column carrying the quiet detail */
.band.split {
  display: grid;
  gap: clamp(24px, 4vw, 40px);
  grid-template-columns: minmax(0, 1fr);
  /* stacked, the sheet holds a readable width rather than running the full
     window with a capped line of text stranded inside it */
  width: min(780px, 100%);
}

/* The sidebar only appears once there is room for both columns to read
   properly. Splitting at 900 squeezed the aside to 28 characters a line;
   below 1120 the page stays one column instead. */
@media (min-width: 1120px) {
  .band.split {
    /* Wide enough that the sheet reads at roughly 60 characters a line.
       At 1040px the same split gave 49, which is short for long-form. */
    width: min(1200px, 100%);
    grid-template-columns: minmax(0, 64fr) minmax(0, 36fr);
    align-items: start;
  }

  .band.split .panel {
    /* the aside follows the reader down a long sheet */
    position: sticky;
    top: 84px;
  }
}

.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 2px;
  color: var(--cyan);
}

/* ------------------------------------------------------------- parchment
   Long-form reading happens on the same aged stock the in-game chart is
   drawn on: hard-edged foxing on two offset grids, a burnt inner margin and
   the double rule. Lifted from .paper in the game's stylesheet. */

.paper {
  position: relative;
  padding: clamp(24px, 5vw, 48px);
  color: var(--ink-brown);
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 5px 7px, rgba(184, 151, 95, 0.28) 0 1px, transparent 1.1px),
    radial-gradient(circle at 18px 13px, rgba(160, 128, 78, 0.16) 0 1px, transparent 1.1px);
  background-size: 31px 27px, 47px 39px;
  border: 2px solid var(--ink-brown);
  box-shadow:
    inset 0 0 0 2px var(--paper-burn),
    0 5px 0 rgba(14, 8, 3, 0.5);
}

.paper::before {
  content: '';
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(62, 48, 32, 0.45);
  pointer-events: none;
}

.paper > * {
  position: relative;
}

.paper h1 {
  margin: 0 0 8px;
  font-size: clamp(20px, 3vw, 27px);
  line-height: 1.25;
  letter-spacing: 1px;
  color: var(--ink-red);
  text-wrap: balance;
}

.paper h2 {
  margin: 34px 0 10px;
  font-size: 15px;
  letter-spacing: 1.5px;
  color: var(--ink-red);
}

.paper h2:first-of-type {
  margin-top: 26px;
}

.paper p,
.paper li {
  /* a comfortable measure for long-form reading */
  max-width: 62ch;
  color: var(--ink-brown);
}

.paper p {
  margin: 0 0 14px;
}

.paper .eyebrow {
  color: var(--ink-brown-2);
}

.paper .lede {
  font-size: 17px;
  line-height: 1.65;
  color: #2f2418;
}

.paper ul {
  margin: 0 0 16px;
  padding-left: 20px;
}

.paper li {
  margin-bottom: 7px;
}

.paper a {
  color: var(--ink-teal);
  text-decoration-thickness: 1px;
}

.paper a:hover {
  color: #0e3a47;
}

.paper hr {
  margin: 30px 0;
  border: 0;
  border-top: 1px solid rgba(62, 48, 32, 0.3);
}

/* a called-out caution, ruled in the chart's red ink rather than boxed */
.caution {
  margin: 0 0 14px;
  padding: 12px 16px;
  max-width: 62ch;
  border-left: 4px solid var(--ink-red);
  background: rgba(138, 71, 24, 0.09);
  color: #4a2f14;
}

/* ------------------------------------------------------- navy side panel */

.panel {
  padding: clamp(20px, 4vw, 28px);
  background: var(--navy-2);
  border: 2px solid var(--navy-3);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.05),
    0 4px 0 var(--shadow);
  border-radius: 3px;
}

.panel h2 {
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 1.5px;
  color: var(--amber);
}

.panel p {
  margin: 0 0 12px;
  /* capped for the one-column case, where the panel runs the full band */
  max-width: 62ch;
  font-size: 14px;
  color: var(--ink-dim);
  line-height: 1.65;
}

.panel p:last-child {
  margin-bottom: 0;
}

/* a standalone link on its own line is a control, not prose: give it a
   real target rather than the 16px the text alone would occupy */
.panel p > a:only-child,
.paper p > a:only-child {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.panel .strip {
  width: 100%;
  margin-bottom: 16px;
  border: 1px solid var(--navy-3);
}

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

.lost {
  flex: 1;
  display: grid;
  place-items: center;
  padding: clamp(40px, 10vh, 100px) clamp(16px, 4vw, 40px);
  text-align: center;
}

.lost img {
  width: clamp(84px, 18vw, 128px);
  margin: 0 auto 24px;
  border: 2px solid var(--navy-3);
  box-shadow: 0 5px 0 var(--shadow);
}

.lost h1 {
  margin: 0 0 10px;
  font-size: clamp(19px, 3vw, 25px);
  letter-spacing: 1.5px;
  text-wrap: balance;
}

.lost p {
  margin: 0 auto 26px;
  max-width: 44ch;
  color: var(--ink-dim);
}

.lost .signs {
  justify-content: center;
}

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

footer {
  border-top: 2px solid var(--navy-3);
  background: #081820;
}

footer .band {
  padding-top: 22px;
  padding-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-dim);
}

footer nav {
  margin-left: auto;
  display: flex;
  gap: 20px;
}

footer nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
}

@media (max-width: 620px) {
  footer nav {
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------- motion
   One movement on the whole site: the hero water drifts a couple of pixels,
   the way the game's water does. Nothing else moves. */

@media (prefers-reduced-motion: no-preference) {
  .hero-art {
    animation: drift 26s ease-in-out infinite alternate;
  }
}

@keyframes drift {
  from {
    transform: scale(1.03) translate3d(-0.5%, 0, 0);
  }
  to {
    transform: scale(1.03) translate3d(0.5%, 0, 0);
  }
}

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

@media (max-width: 700px) {
  /* A portrait viewport cannot hold a landscape scene behind text without
     cropping the angler out of it. On narrow screens the artwork stops being
     a backdrop and becomes a band at its own aspect, with the title block on
     navy underneath — the hard edge between them is the same one the game
     draws between a panel and the water. */
  .hero {
    flex: 0 0 auto;
    min-height: 0;
    display: block;
  }

  .hero picture {
    display: block;
    border-bottom: 2px solid var(--navy-3);
  }

  .hero-art {
    position: static;
    width: 100%;
    height: auto;
    object-fit: contain;
    transform: none;
    animation: none;
  }

  .hero::after {
    display: none;
  }

  .hero-inner {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    align-items: start;
    /* clear of the home indicator on a notched phone */
    padding-bottom: max(30px, env(safe-area-inset-bottom, 0px));
  }

  .hero-text h1,
  .hero-text .tagline {
    text-shadow: none;
  }

  .hero-icon {
    width: 104px;
  }

  /* Monospace is wide: on a phone every pixel of frame is a character the
     line loses. The sheet therefore runs edge to edge, the way a piece of
     paper fills a phone screen, keeping its border and rule but spending
     nothing on an outer margin. Worth about four characters a line. */
  .band {
    padding-left: 0;
    padding-right: 0;
  }

  .paper {
    padding: 22px 16px;
    border-left-width: 2px;
    border-right-width: 2px;
  }

  .paper::before {
    inset: 5px;
  }

  /* the bullet indent costs another two characters a line */
  .paper ul {
    padding-left: 18px;
  }

  /* The opening paragraph drops to body size on a phone. At 17px it was the
     narrowest line on the page — the lede is already marked out by sitting
     first, so the extra two points cost more measure than they earn. */
  .paper .lede {
    font-size: inherit;
    line-height: 1.7;
  }

  .panel {
    padding: 20px 16px;
  }

  /* the masthead and footer keep their own inset, so only the sheet bleeds */
  footer .band {
    padding-left: 14px;
    padding-right: 14px;
  }

  .signs {
    gap: 10px;
  }

  .sign {
    flex: 1 1 100%;
    justify-content: center;
  }
}

/* Very small phones. Monospace is wide, so on a 320px screen the same
   padding costs about seven characters a line; here the frame gives way
   to the text rather than the other way round. */
@media (max-width: 360px) {
  body {
    font-size: 15px;
  }

  .paper {
    padding: 18px 13px;
  }

  .paper::before {
    inset: 4px;
  }

  .paper ul {
    padding-left: 15px;
  }

  footer .band {
    padding-left: 10px;
    padding-right: 10px;
  }

  .masthead {
    padding-left: 12px;
    padding-right: 12px;
    gap: 10px;
  }

  .masthead .mark span {
    font-size: 13px;
    letter-spacing: 0.5px;
  }

  .masthead nav {
    gap: 12px;
    font-size: 12px;
  }
}