:root {
  --cork: #b88958;
  --cork-dark: #8d6240;
  --paper: #f4ead4;
  --stain: #efe0c0;
  --ink: #1a1410;
  --red: #9b2c1a;
  --green: #24372a;
  --hivis: #d6e000;
  --muted: #5c5144;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: "Source Serif 4", Georgia, serif;
  color: var(--ink);
  background: #2a2118;
}

.frame {
  min-height: 100vh;
  margin: 0 auto;
  padding: 1.2rem 1rem 2.5rem;
  background-color: var(--cork);
  background-image:
    radial-gradient(circle at 18% 22%, rgba(0,0,0,.12) 1px, transparent 2px),
    radial-gradient(circle at 62% 48%, rgba(80,40,16,.18) 1.2px, transparent 2.2px),
    radial-gradient(circle at 80% 16%, rgba(255,255,255,.08) 1px, transparent 2px),
    repeating-linear-gradient(18deg, transparent 0 7px, rgba(90,50,20,.05) 7px 8px),
    linear-gradient(180deg, #c9a06a 0%, var(--cork) 42%, var(--cork-dark) 100%);
  box-shadow: inset 0 0 0 14px #1c1611, inset 0 0 0 16px #3a2c20;
  position: relative;
}

.hivis {
  position: absolute;
  top: 18px;
  left: 18px;
  width: 72px;
  height: 10px;
  background: repeating-linear-gradient(-45deg, var(--hivis), var(--hivis) 6px, #111 6px 10px);
  opacity: .85;
}

.board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem 1rem .4rem;
  max-width: 720px;
  margin: 0 auto;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--paper);
  border: 3px solid #1a1410;
  box-shadow: 0 6px 0 rgba(0,0,0,.25), inset 0 0 0 3px #d7c4a0;
  font-family: "Archivo Black", Arial Black, sans-serif;
  letter-spacing: .08em;
  font-size: .9rem;
  color: var(--ink);
  text-decoration: none;
  position: relative;
}
.badge .hole {
  position: absolute;
  top: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cork-dark);
  box-shadow: inset 0 1px 2px #000;
}

nav a {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #1a1410;
  text-decoration: none;
  margin-left: .85rem;
  background: var(--paper);
  padding: .35rem .55rem;
  box-shadow: 1px 2px 0 rgba(0,0,0,.2);
}
nav a:hover { outline: 2px solid var(--red); }

main { max-width: 720px; margin: 0 auto; padding: 1rem .4rem 2rem; }

.paper {
  background: var(--paper);
  padding: 1.4rem 1.3rem 1.5rem;
  position: relative;
  box-shadow: 4px 6px 0 rgba(26,20,16,.18);
  margin: 1.2rem 0;
}
.title-sheet { transform: rotate(-1.1deg); }
.intro-sheet { transform: rotate(.7deg); background: var(--stain); }

.pin {
  position: absolute;
  top: -9px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: 1px 2px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.35);
}
.pin-red { background: var(--red); left: 50%; margin-left: -8px; }
.pin-steel { background: #c5c8cc; left: 22px; }

.kicker {
  margin: 0 0 .35rem;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--green);
  text-align: center;
}
h1 { margin: 0; text-align: center; }
.wm {
  display: block;
  font-family: "Archivo Black", Arial Black, sans-serif;
  font-size: clamp(2.3rem, 9vw, 4.4rem);
  line-height: .86;
  letter-spacing: -.03em;
  text-transform: uppercase;
}
.sub {
  display: block;
  margin-top: .15rem;
  font-family: "Archivo Black", Arial Black, sans-serif;
  font-size: clamp(1.4rem, 5vw, 2.2rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
}
.tag { text-align: center; margin: .8rem 0 0; font-size: 1.05rem; }
.intro-sheet p { font-size: 1.12rem; margin: 0 0 .7rem; }
.intro-sheet p:last-child { margin: 0; }

.board-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--paper);
  background: var(--red);
  display: inline-block;
  padding: .25rem .5rem;
  margin: .6rem 0;
}

.notes { display: grid; grid-template-columns: 1fr; gap: 1.1rem; }
@media (min-width: 640px) {
  .notes { grid-template-columns: 1.3fr .8fr; align-items: start; }
}

.sticky {
  display: block;
  background: #f7e7a1;
  padding: 1.3rem 1.1rem 1.2rem;
  text-decoration: none;
  color: inherit;
  position: relative;
  transform: rotate(-1.4deg);
  box-shadow: 3px 5px 0 rgba(0,0,0,.16);
}
.sticky-2 { background: #f3efe4; transform: rotate(2deg); }
.sticky h2 {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.35rem;
  margin: .2rem 0 .45rem;
}
.sticky:hover { outline: 3px solid var(--red); }
.meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}
.hand { font-style: italic; margin: .4rem 0 0; }

footer {
  max-width: 720px;
  margin: 1.5rem auto 0;
  text-align: center;
  font-family: "IBM Plex Mono", monospace;
  font-size: .72rem;
  color: #2a2118;
  background: rgba(244,234,212,.72);
  padding: .6rem;
}
.prose { max-width: 40rem; }
.prose p { font-size: 1.12rem; }
.prose a { color: var(--red); }