/* ==========================================================================
   Angry Sam — hub, Privacy and Terms pages (endlessriver.xyz/angrysam)
   The app's world in one band: near-black stage, mustard accents and a sticker
   headline, Sam standing on the edge of the band. The reading sheet below is
   warm paper with dark ink, so long legal text stays calm and fully readable.
   Fonts (Unbounded for the sticker headline, Instrument Sans for text) load in each <head>.
   ========================================================================== */

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

:root {
  --stage:     #0e0e0f;
  --stage-2:   #1a1712;
  --mustard:   #F5B526;
  --mustard-d: #c98c08;
  --tomato:    #EF3E2D;
  --paper:     #fbf7ee;
  --sheet:     #fffdf8;
  --ink:       #1b1a17;
  --ink-2:     #4a463d;
  --ink-3:     #77705f;
  --line:      #e6dcc6;
  --wash:      #fdf0cf;
  --maxw:      720px;
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --sticker:   'Unbounded', 'Arial Black', Impact, system-ui, sans-serif;
  --text:      'Instrument Sans', 'Helvetica Neue', system-ui, -apple-system, sans-serif;
}

html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--paper); color: var(--ink);
  font-family: var(--text); font-size: 17px; line-height: 1.68;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
::selection { background: var(--mustard); color: var(--ink); }
a { color: inherit; }
img { max-width: 100%; display: block; }

/* ---------- the band ---------- */
.as-band {
  position: relative; overflow: hidden; color: #fff;
  background:
    repeating-conic-gradient(from 0deg at 82% 70%, rgba(245,181,38,.07) 0deg 6deg, transparent 6deg 14deg),
    radial-gradient(120% 90% at 85% 80%, var(--stage-2) 0%, var(--stage) 62%);
  padding-inline: 20px;
  padding-block: max(18px, env(safe-area-inset-top)) 0;
}
.as-band__inner { position: relative; max-width: var(--maxw); margin: 0 auto; min-height: 300px; display: flex; flex-direction: column; }
.as-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.as-back {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font-size: 14px; font-weight: 600; color: rgba(255,255,255,.78);
  padding: 8px 12px 8px 10px; border-radius: 999px; background: rgba(255,255,255,.08);
  transition: background .2s var(--ease), color .2s var(--ease);
}
.as-back:hover { background: rgba(255,255,255,.14); color: #fff; }
.as-back:focus-visible, .as-links a:focus-visible, .as-lang a:focus-visible, .as-sheet a:focus-visible { outline: 2.5px solid var(--mustard); outline-offset: 3px; border-radius: 10px; }
.as-mark { display: inline-flex; align-items: center; gap: 10px; font: 800 13px/1 var(--sticker); letter-spacing: .08em; text-decoration: none; color: #fff; }
.as-mark img { width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 1.5px rgba(255,255,255,.18); }
.as-mark em { font-style: normal; color: var(--mustard); }
.as-title-wrap { padding: 54px 0 34px; max-width: 470px; }
.as-kicker {
  display: inline-block; margin: 0 0 14px; padding: 5px 10px 6px; border-radius: 8px;
  background: #fff; color: var(--ink); border: 2.5px solid #141414; transform: rotate(-3deg);
  font: 800 11.5px/1 var(--sticker); letter-spacing: .08em; text-transform: uppercase;
}
.as-title { margin: 0; font: 900 clamp(34px, 7vw, 52px)/1.02 var(--sticker); letter-spacing: -.01em; text-wrap: balance; hyphens: manual; }
.as-title em { font-style: normal; color: var(--mustard); }
.as-meta { margin: 14px 0 0; font-size: 14.5px; color: rgba(255,255,255,.66); }
.as-lang { margin: 18px 0 0; display: flex; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.as-lang span, .as-lang a { padding: 5px 11px; border-radius: 999px; text-decoration: none; }
.as-lang .is-cur { background: var(--mustard); color: var(--ink); font-weight: 700; }
.as-lang a { background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); }
.as-lang a:hover { background: rgba(255,255,255,.16); }
/* Sam stands on the band's floor and never reaches the header row */
.as-sam { position: absolute; right: -8px; bottom: -6px; height: calc(100% - 64px); width: auto; max-width: none; pointer-events: none; filter: drop-shadow(0 18px 30px rgba(0,0,0,.5)); }

/* ---------- the reading sheet ---------- */
.as-sheet { max-width: var(--maxw); margin: 0 auto; padding-inline: 20px; padding-block: 34px 72px; }
.as-intro { margin: 0 0 30px; font-size: 19px; line-height: 1.6; color: var(--ink); text-wrap: pretty; }
.as-short {
  margin: 0 0 34px; padding: 22px 24px 20px; border-radius: 18px;
  background: var(--wash); border: 1.5px solid #f1d58a;
}
.as-short h2 { margin: 0 0 10px; font: 800 13px/1.2 var(--sticker); letter-spacing: .08em; text-transform: uppercase; color: var(--mustard-d); }
.as-short ul { margin: 0; padding-left: 20px; }
.as-short li { margin: 6px 0; }
.as-body section { padding: 22px 0 6px; border-top: 1px solid var(--line); }
.as-body section:first-child { border-top: 0; padding-top: 0; }
.as-body h2 { margin: 0 0 10px; font-size: 21px; line-height: 1.3; font-weight: 700; letter-spacing: -.005em; text-wrap: balance; }
.as-body h3 { margin: 18px 0 6px; font-size: 17px; font-weight: 700; }
.as-body p, .as-body li { color: var(--ink-2); }
.as-body p { margin: 0 0 14px; }
.as-body ul { margin: 0 0 14px; padding-left: 22px; }
.as-body li { margin: 6px 0; }
.as-body strong { color: var(--ink); font-weight: 650; }
.as-body a, .as-intro a, .as-short a { color: var(--ink); text-decoration-color: var(--mustard); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.as-body a:hover { text-decoration-color: var(--tomato); }
.as-table { width: 100%; border-collapse: collapse; margin: 6px 0 16px; font-size: 15px; }
.as-table-wrap { overflow-x: auto; }
.as-table th, .as-table td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.as-table th { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.as-table td:first-child { color: var(--ink); font-weight: 600; min-width: 150px; }
.as-foot { max-width: var(--maxw); margin: 0 auto; padding-inline: 20px; padding-block: 0 48px; font-size: 14px; color: var(--ink-3); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }
.as-foot a { color: var(--ink-2); }

/* ---------- hub ---------- */
.as-hub .as-title-wrap { padding-bottom: 46px; }
.as-tag { margin: 16px 0 0; font-size: 18px; color: rgba(255,255,255,.82); max-width: 380px; }
.as-tag em { font-style: normal; color: var(--mustard); font-weight: 700; }
.as-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.as-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; text-decoration: none;
  padding: 18px 20px; border-radius: 16px; background: var(--sheet); border: 1.5px solid var(--line);
  transition: transform .25s var(--ease), border-color .2s var(--ease), box-shadow .25s var(--ease);
}
.as-links a:hover { transform: translateY(-2px); border-color: var(--mustard); box-shadow: 0 10px 24px -14px rgba(120,80,0,.35); }
.as-links b { display: block; font-size: 17px; }
.as-links small { display: block; color: var(--ink-3); font-size: 14px; }
.as-links .as-arrow { flex: none; font-size: 20px; color: var(--mustard-d); }

@media (max-width: 560px) {
  .as-band__inner { min-height: 0; }
  .as-title-wrap { padding: 34px 0 28px; max-width: calc(100% - 118px); }
  .as-title { font-size: clamp(26px, 7.6vw, 40px); }
  .as-sam { right: -12px; bottom: -4px; height: min(calc(100% - 64px), 220px); }
  .as-intro { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) { .as-links a { transition: none; } }