/* The legal pages: the inside of a sauna. Plank walls, a stove with steam, a paper sheet pinned on the wood. */
@font-face { font-family: 'Silkscreen'; src: url('./fonts/silkscreen.woff2') format('woff2'); font-display: swap; }

:root {
  color-scheme: light dark;
  --wood: #8b5a2b; --wood-dark: #6b4423; --wood-light: #9a6a38;
  --paper: #f4ebd8; --ink: #16283a; --muted: #4d5f70; --falu: #b03a2e; --gold: #f2b84b; --line: #d9c9a8;
  --pix: 'Silkscreen', ui-monospace, 'Courier New', monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --wood: #5a3a1c; --wood-dark: #3f2812; --wood-light: #6b4423; --paper: #1b2a38; --ink: #e8eef2; --muted: #a9b9c6; --falu: #e0665a; --line: #2f4256; }
}

* { box-sizing: border-box; }
html { background: var(--wood-dark); }
body {
  margin: 0; min-height: 100vh; color: var(--ink);
  font: 17px/1.6 system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* vertical planks, hard edges like the pixel scene */
  background:
    repeating-linear-gradient(90deg, transparent 0 94px, rgba(0, 0, 0, .18) 94px 96px, rgba(255, 255, 255, .06) 96px 98px),
    var(--wood);
}
a { color: var(--falu); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* the scene across the top */
.scene { position: relative; line-height: 0; border-bottom: 4px solid #3f2812; background: #6b4423; overflow: hidden; }
.scene-inner { position: relative; width: max(100%, 600px); margin-left: min(0px, calc((100% - 600px) * 1)); } /* on a phone the crop keeps the stove and the logs */
.scene img { display: block; width: 100%; height: auto; image-rendering: pixelated; }
@media (prefers-color-scheme: dark) { .scene img { filter: brightness(.72) saturate(1.05); } }

/* steam rising off the stones: a few square puffs, kept still for people who ask for less motion */
.steam { position: absolute; left: 61%; bottom: 62%; width: 17%; height: 52%; pointer-events: none; }
.steam i { position: absolute; bottom: 0; width: clamp(8px, 2.2vw, 16px); aspect-ratio: 1; background: #fff; opacity: 0; animation: rise 5.6s linear infinite; }
.steam i:nth-child(1) { left: 12%; animation-delay: 0s; }
.steam i:nth-child(2) { left: 46%; animation-delay: 1.9s; width: clamp(10px, 2.8vw, 20px); }
.steam i:nth-child(3) { left: 74%; animation-delay: 3.6s; }
@keyframes rise {
  0% { transform: translate(0, 0); opacity: 0; }
  12% { opacity: .7; }
  100% { transform: translate(14px, -120px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .steam i { animation: none; opacity: .5; } .steam i:nth-child(1) { bottom: 8px; } .steam i:nth-child(2) { bottom: 26px; } .steam i:nth-child(3) { bottom: 14px; } }

/* the sheet */
main { position: relative; max-width: 44rem; margin: -26px auto 0; padding: 0 14px 56px; }
.sheet {
  background: var(--paper); border: 3px solid var(--ink); border-radius: 6px; box-shadow: 0 6px 0 #0e1b28;
  padding: 22px 22px 26px;
}
.sheet::before { /* a pixel pin */
  content: ''; position: absolute; left: 50%; top: -12px; width: 16px; height: 16px; margin-left: -8px;
  background: var(--falu); border: 3px solid var(--ink); box-shadow: inset -3px -3px 0 rgba(0, 0, 0, .25);
}
.back {
  display: inline-block; margin: 0 0 14px; padding: 6px 10px; font: 12px/1 var(--pix); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
  color: var(--ink); border: 2px solid var(--ink); border-radius: 4px; background: var(--gold); box-shadow: 0 3px 0 var(--ink);
}
.back:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.back:focus-visible { outline-color: var(--falu); }

h1 { font: 400 clamp(24px, 6vw, 34px)/1.15 var(--pix); margin: 4px 0 6px; letter-spacing: .01em; }
h1 b { color: var(--falu); font-weight: 400; }
h2 { font: 400 14px/1.3 var(--pix); letter-spacing: .06em; text-transform: uppercase; margin: 2em 0 .5em; display: flex; align-items: center; gap: 10px; }
h2::before { /* a log end: cream ring on brown */
  content: ''; flex: none; width: 14px; height: 14px; background: #ebd9b0; border: 3px solid var(--wood-dark); box-shadow: inset 0 0 0 2px #ebd9b0, inset 0 0 0 4px var(--wood);
}
p, li { margin: .5em 0; }
ul { padding-left: 1.2em; }
li::marker { color: var(--falu); }
.updated { color: var(--muted); font-size: .9rem; margin-top: 0; }
.note { background: color-mix(in srgb, var(--falu) 11%, transparent); border-left: 5px solid var(--falu); border-radius: 0 6px 6px 0; padding: 10px 14px; font-size: .95rem; }
footer { max-width: 44rem; margin: 0 auto; padding: 0 14px 40px; text-align: center; font: 11px/1.6 var(--pix); letter-spacing: .1em; text-transform: uppercase; color: #ebd9b0; }
footer a { color: var(--gold); }