/* The ship's noticeboard (kruiseship.pages.dev), written out by tools/site.mjs.
   The world is the overlays' own (overlays/ks.css): crimson, plum, ink, gold and paper, Fredoka for
   the stickers and Nunito for reading. The page is a cork board by the gangway; everything on it is
   a paper note pinned or taped up. Shapes: paper is 4px, buttons are pills, the TV is 18px. */

@font-face { font-family: 'Fredoka'; src: url('fonts/fredoka.woff2') format('woff2'); font-weight: 300 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url('fonts/nunito.woff2') format('woff2'); font-weight: 200 1000; font-display: swap; }

:root {
  --crimson: #9b032a;
  --plum: #5a0137;
  --purple: #42003d;
  --ink: #1a0030;
  --gold: #ffce07;
  --paper: #fffaf2;
  --paper-aged: #f6ead4;
  --sticky: #fff1a8;
  --ink-soft: #4a2a52;
  --cork: #b88c5c;
  --cork-dark: #8a6238;
  --cork-light: #d6b083;
  --shadow: 26 0 48;
  --display: 'Fredoka', 'Arial Rounded MT Bold', sans-serif;
  --body: 'Nunito', 'Segoe UI', system-ui, sans-serif;
  color-scheme: light;
}

/* After dark the board sits under the corridor lamps; the paper stays paper. */
@media (prefers-color-scheme: dark) {
  :root {
    --cork: #4a3426;
    --cork-dark: #2c1e16;
    --cork-light: #604634;
    --paper: #f3ead9;
    --paper-aged: #e8dac0;
    --sticky: #ece08f;
    --shadow: 6 2 10;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scrollbar-color: var(--plum) var(--cork-dark); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  min-height: 100dvh;
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  background-color: var(--cork);
  /* Cork: a speckle of light and dark grains over the board's colour. */
  background-image:
    radial-gradient(circle at 20% 30%, var(--cork-light) 0 1.2px, transparent 1.6px),
    radial-gradient(circle at 70% 60%, var(--cork-dark) 0 1.4px, transparent 1.9px),
    radial-gradient(circle at 45% 85%, var(--cork-dark) 0 1px, transparent 1.4px),
    radial-gradient(circle at 85% 15%, var(--cork-light) 0 0.9px, transparent 1.3px);
  background-size: 23px 19px, 31px 27px, 17px 21px, 29px 33px;
}

::selection { background: var(--gold); color: var(--ink); }
a { color: var(--crimson); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { color: var(--plum); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }

.wrap { max-width: 1320px; margin: 0 auto; padding: 32px clamp(16px, 4vw, 40px) 72px; }

/* ---- The top of the board: the mascot as a big sticker, the welcome notice, the ship's TV. */
.hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 28px 44px; align-items: center; }
.hero-left { display: grid; gap: 18px; justify-items: start; }
.lockup { width: min(380px, 78vw); height: auto; filter: drop-shadow(0 14px 18px rgb(var(--shadow) / 0.45)); }
.welcome { max-width: 34rem; }
.welcome h1 { margin: 0; font: 600 clamp(2rem, 3.2vw, 2.75rem)/1.08 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.welcome p { margin: 12px 0 0; max-width: 46ch; }
.actions { display: flex; flex-wrap: wrap; gap: 12px 18px; margin-top: 20px; align-items: center; }
.button {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 24px; border-radius: 999px;
  background: var(--crimson); color: #fffaf2; font: 600 1.125rem/1 var(--display); text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 14px rgb(var(--shadow) / 0.35); transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.2s;
}
.button:hover { background: var(--plum); color: #fffaf2; transform: translateY(-2px); }
.button:active { transform: translateY(1px); }
.button svg { width: 20px; height: 20px; fill: currentColor; }
.links { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 700; }

.tv { position: relative; margin: 0; padding: 14px; border-radius: 18px; background: var(--ink); box-shadow: 0 18px 34px rgb(var(--shadow) / 0.5); transform: rotate(0.6deg); }
.tv iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; background: var(--purple); }
.tv figcaption { margin: 10px 4px 0; color: #fffaf2; font: 600 1rem/1.3 var(--display); }

/* ---- Notes: paper pinned or taped to the cork, each at its own slight angle (--tilt). */
.board { columns: 3 320px; column-gap: 30px; margin-top: 52px; }
/* Each note is a whole block in its column (inline-block), so a pin above a note at the top of a
   column stays with its note instead of being painted at the foot of the column before. */
.board .note { display: inline-block; width: 100%; margin-top: 12px; }
.note {
  position: relative; break-inside: avoid; margin: 0 0 30px; padding: 26px 26px 22px; border-radius: 4px;
  background: var(--paper); color: var(--ink);
  box-shadow: 0 2px 2px rgb(var(--shadow) / 0.18), 0 12px 22px rgb(var(--shadow) / 0.28);
  transform: rotate(var(--tilt, 0deg));
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.note:hover { transform: rotate(var(--tilt, 0deg)) translateY(-3px); box-shadow: 0 3px 3px rgb(var(--shadow) / 0.16), 0 20px 30px rgb(var(--shadow) / 0.3); }
/* A drawing pin: a domed head in crimson, or gold. */
.note.pin::before {
  content: ''; position: absolute; top: -9px; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff6b87, var(--crimson) 55%, #5c0018);
  box-shadow: 0 4px 5px rgb(var(--shadow) / 0.45);
}
.note.pin.gold-pin::before { background: radial-gradient(circle at 35% 30%, #fff1a6, var(--gold) 55%, #9a7400); }
/* Two strips of tape over the top corners. */
.note.tape::before, .note.tape::after {
  content: ''; position: absolute; top: -12px; width: 86px; height: 26px; background: rgb(255 250 235 / 0.62);
  box-shadow: 0 1px 2px rgb(var(--shadow) / 0.2);
}
.note.tape::before { left: 18px; transform: rotate(-6deg); }
.note.tape::after { right: 18px; transform: rotate(5deg); }

.note h2 { margin: 0 0 10px; font: 600 1.75rem/1.1 var(--display); letter-spacing: -0.01em; text-wrap: balance; }
.note h3 { margin: 18px 0 6px; font: 600 1.15rem/1.2 var(--display); }
.note p { margin: 0 0 10px; }
.note .quiet { color: var(--ink-soft); font-size: 0.95rem; }
.note ol, .note ul { margin: 6px 0 0; padding-left: 1.25em; }
.note li { margin: 4px 0; }
.num { font-variant-numeric: tabular-nums; font-weight: 800; }

/* The last voyage: the board's big notice. */
.voyage .when { font: 700 0.95rem/1.3 var(--body); color: var(--crimson); }
.voyage .tally { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 12px 0 4px; padding: 0; list-style: none; }
.voyage .tally li { margin: 0; }
.honours { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 16px; margin: 14px 0 0; }
.honours dt { color: var(--ink-soft); font-weight: 700; }
.honours dd { margin: 0; font: 600 1.05rem/1.4 var(--display); overflow-wrap: anywhere; }

/* The Gazette: newsprint, its name set as a masthead over a double rule. */
.gazette { background: #ebe9e2; }
.gazette .masthead { margin: 0 0 4px; padding-bottom: 8px; border-bottom: 3px double var(--ink); font: 700 1.5rem/1 var(--display); letter-spacing: 0.02em; }
.gazette h2 { margin-top: 10px; font-size: 1.5rem; }

/* A photo from the ship, as a polaroid. */
.polaroid { padding: 12px 12px 16px; }
.polaroid img { display: block; width: 100%; height: auto; border-radius: 2px; }
.polaroid figcaption { margin: 12px 4px 0; font: 600 1.1rem/1.3 var(--display); text-align: center; }

/* Wanted posters for the trophy wall: aged paper, the word set big. */
.wanted { background: var(--paper-aged); text-align: center; }
.wanted .big { margin: 0; font: 700 3rem/0.95 var(--display); letter-spacing: 0.04em; color: var(--crimson); }
.wanted .who { margin: 10px 0 4px; font: 700 1.6rem/1.15 var(--display); overflow-wrap: anywhere; }
.wanted .for { margin: 0; }

/* The quote on a sticky note, the one square of yellow on the board. */
.scrap { background: var(--sticky); }
.scrap blockquote { margin: 0; font: 600 1.45rem/1.3 var(--display); text-wrap: balance; }
/* The treasure map: parchment folded once, the crease running corner to corner. */
.map { background-color: var(--paper-aged); background-image: linear-gradient(135deg, transparent 49.6%, rgb(var(--shadow) / 0.1) 50%, rgb(255 255 255 / 0.35) 50.4%, transparent 51%); }
.map .riddle { font: 600 1.3rem/1.35 var(--display); margin: 8px 0 12px; }

/* Ranked lists: the Idol chart, the ship's purse. */
.ranked { list-style: none; padding: 0; margin: 8px 0 0; counter-reset: rank; }
.ranked li { display: grid; grid-template-columns: 2ch minmax(0, 1fr) auto; gap: 12px; align-items: baseline; padding: 6px 0; counter-increment: rank; }
.ranked li::before { content: counter(rank); font: 700 1.1rem/1 var(--display); color: var(--crimson); font-variant-numeric: tabular-nums; }
.ranked .name { font-weight: 700; overflow-wrap: anywhere; }

/* The ship's rules: what to type in chat. */
.rules dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px; margin: 10px 0 0; }
.rules dt { font: 700 1rem/1.4 var(--display); color: var(--crimson); white-space: nowrap; }
.rules dd { margin: 0; }

.empty { color: var(--ink-soft); }

footer { margin-top: 24px; color: #fffaf2; font-weight: 700; text-shadow: 0 1px 2px rgb(var(--shadow) / 0.7); }
footer p { margin: 6px 0; max-width: 70ch; }
footer a { color: var(--gold); }

/* The one authored moment: on arrival each note is pressed onto the board, settling from a slight
   lift into its pin, one after another. The notes are visible throughout. */
@media (prefers-reduced-motion: no-preference) {
  .note, .tv { animation: pinned 0.7s cubic-bezier(0.16, 1, 0.3, 1) backwards; animation-delay: calc(var(--i, 0) * 70ms); }
  @keyframes pinned {
    from { transform: rotate(calc(var(--tilt, 0deg) + 2.5deg)) translateY(-16px) scale(1.03); box-shadow: 0 26px 40px rgb(var(--shadow) / 0.35); }
  }
}

@media (max-width: 880px) {
  .hero { grid-template-columns: minmax(0, 1fr); }
  .lockup { width: min(300px, 70vw); }
  .tv { transform: none; }
}
@media (max-width: 480px) {
  .note { padding: 22px 20px 18px; transform: rotate(calc(var(--tilt, 0deg) / 2)); }
  .wanted .big { font-size: 2.4rem; }
}