/* Download page in the style of the Everamble UI system (ui-system/tokens.json):
   Signika, wood board and parchment 9-slice materials, gold/wood tabs. No scripts. */
@font-face { font-family: "Signika"; src: url("signika-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Signika"; src: url("signika-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
:root {
  --ink: #33220F;
  --ink-soft: #55402A;
  --chrome: #FFF6E2;
  --chrome-soft: #EAD8B4;
  --paper: #F1E0BB;
  --wood-dark: #3D220E;
  --wood-line: #24130A;
  --gold: #F7D68A;
  --gold-deep: #E9AE3F;
  --info: #2A6FA8;
  --u: clamp(13px, calc(9px + 0.9vmin), 20px);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: #1c140c; }
body {
  margin: 0;
  min-height: 100vh;
  font: 400 calc(var(--u) * 1.1)/1.45 "Signika", "Trebuchet MS", system-ui, sans-serif;
  color: var(--chrome);
  background:
    linear-gradient(rgba(20, 12, 6, 0.55), rgba(20, 12, 6, 0.86) 70vh),
    url("scene.webp") center top / cover no-repeat fixed,
    #1c140c;
  padding: env(safe-area-inset-top) max(1rem, env(safe-area-inset-right)) env(safe-area-inset-bottom) max(1rem, env(safe-area-inset-left));
}
a { color: var(--gold); }
code { font-family: ui-monospace, "DejaVu Sans Mono", monospace; font-size: 0.85em; overflow-wrap: anywhere; }
h1, h2 { margin: 0; }
h2 {
  font-weight: 600;
  font-size: calc(var(--u) * 1.25);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  text-shadow: 0 2px 0 var(--wood-line);
  margin-bottom: calc(var(--u) * 0.9);
}

.hero, main, footer { max-width: 72rem; margin: 0 auto; }
.hero { text-align: center; padding: calc(var(--u) * 2) 0 calc(var(--u) * 1.5); }
.logo { width: min(36rem, 92%); height: auto; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.6)); }
.tagline {
  max-width: 40rem;
  margin: calc(var(--u) * 0.8) auto calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 1.25);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
}
.actions { display: flex; gap: calc(var(--u) * 0.8); justify-content: center; flex-wrap: wrap; }

.btn {
  display: inline-block;
  min-height: 44px;
  padding: calc(var(--u) * 0.55) calc(var(--u) * 1.4);
  border: 0.45em solid transparent;
  border-image: url("materials/tab.png") 16 fill / 0.45em round;
  color: var(--ink);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  text-decoration: none;
  text-align: center;
}
.btn-gold { border-image-source: url("materials/tab-gold.png"); }
.btn:hover, .btn:focus-visible { filter: brightness(1.08); outline: 2px solid var(--gold); outline-offset: 3px; }

.notice {
  margin: 0 0 calc(var(--u) * 1.4);
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1);
  border: 0.45em solid transparent;
  border-image: url("materials/dark.png") 16 fill / 0.45em round;
}
.notice p { margin: 0; }

.board {
  margin: 0 0 calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.2);
  border: 0.75em solid transparent;
  border-image: url("materials/board.webp") 36 fill / 0.75em round;
}
.meta { color: var(--chrome-soft); margin: 0 0 calc(var(--u) * 0.9); }
.board .meta:last-child { margin: calc(var(--u) * 0.9) 0 0; }

.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); gap: calc(var(--u) * 0.9); }
.gallery figure { margin: 0; }
.gallery a { display: block; }
.gallery img {
  display: block;
  width: 100%;
  height: auto;
  border: 3px solid var(--wood-line);
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
}
.gallery + .sheet { margin-top: calc(var(--u) * 0.9); }
.gallery figcaption { margin-top: 0.35em; color: var(--chrome-soft); font-size: 0.9em; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: calc(var(--u) * 0.9); }
.card, .sheet {
  color: var(--ink);
  padding: calc(var(--u) * 1);
  border: 0.5em solid transparent;
  border-image: url("materials/panel-parch.png") 18 fill / 0.5em round;
}
.card h3 { margin: 0 0 0.2em; font-size: calc(var(--u) * 1.2); font-weight: 600; }
.card .req { margin: 0 0 0.7em; color: var(--ink-soft); }
.card dl { display: grid; grid-template-columns: auto 1fr; gap: 0.15em 0.8em; margin: 0 0 0.9em; font-size: 0.9em; }
.card dt { color: var(--ink-soft); }
.card dd { margin: 0; min-width: 0; }
.card .btn { width: 100%; }
.card .how { margin: 0.8em 0 0; font-size: 0.9em; }
.card .how p { margin: 0.3em 0; }
.card a:not(.btn), .sheet a { color: var(--info); }
.warn { margin: 0 0 0.8em; padding: 0.4em 0.6em; background: rgba(180, 54, 47, 0.12); border-left: 4px solid #B4362F; font-size: 0.9em; }
.later { margin: 0; padding: 0.4em 0.6em; background: rgba(60, 90, 120, 0.12); border-left: 4px solid var(--info); font-size: 0.9em; }
.sheet ol, .sheet ul { margin: 0 0 0.6em; padding-left: 1.3em; }
.sheet li { margin: 0.25em 0; }
.sheet p { margin: 0; }
.sheet p + p { margin-top: 0.5em; }
.sheet h3 { margin: 0 0 0.3em; font-size: calc(var(--u) * 1.1); font-weight: 600; }
.sheet + .sheet { margin-top: calc(var(--u) * 0.9); }

footer { text-align: center; padding: 0 0 calc(var(--u) * 2); color: var(--chrome-soft); font-size: 0.9em; }

@media (max-width: 40rem) {
  .board { padding: calc(var(--u) * 0.6); }
  .hero { padding-top: calc(var(--u) * 1); }
}
/* Phones held sideways: little height, keep the header short. */
@media (max-height: 30rem) and (orientation: landscape) {
  .hero { padding: calc(var(--u) * 0.6) 0; }
  .logo { width: min(22rem, 60%); }
  .tagline { margin: 0.4em auto 0.6em; font-size: calc(var(--u) * 1.05); }
}