/* Staff of Shamgar site. Tokens are the game's: staff-of-shamgar/docs/style-guide.md §1.2.
   Day paper by default, night paper when the phone is in dark mode. Pencil greys, one blue-grey for
   Shamgar's hand, the margin red, and nothing else. No icons, no glow, no drop shadows except the
   one under a loose scrap (§7). */

@font-face{font-family:"Caveat";src:url("/assets/fonts/Caveat.ttf") format("truetype");font-weight:400 700;font-display:swap}
@font-face{font-family:"Patrick Hand";src:url("/assets/fonts/PatrickHand.ttf") format("truetype");font-display:swap}
@font-face{font-family:"Reenie Beanie";src:url("/assets/fonts/ReenieBeanie.ttf") format("truetype");font-display:swap}

:root{
  --paper:#d1c4a6; --table:#2a2927;
  --ink:#3a3a3a; --gm:#4a4a4a; --ink2:#55524c; --ink3:#6b675f;
  --grid:rgba(60,90,140,.20); --margin:rgba(170,80,80,.42);
  --sham:#3b4a6b; --scrap:#efe9d6; --scrap-ink:#3a3a3a;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#34312b; --table:#0f0e0d;
    --ink:#dad4c6; --gm:#cfc8b8; --ink2:#aaa497; --ink3:#827c71;
    --grid:rgba(150,172,210,.14); --margin:rgba(205,115,115,.38);
    --sham:#a7b7dc;
  }
}

*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--table)}
body{
  min-height:100vh;
  background-color:var(--paper);
  /* 10' squares: 22 px, one line each way. */
  background-image:
    linear-gradient(to right, var(--grid) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid) 1px, transparent 1px);
  background-size:22px 22px;
  color:var(--ink);
  font-family:"Patrick Hand","Comic Sans MS",sans-serif;
  font-size:1.2rem; line-height:1.55;
  -webkit-font-smoothing:antialiased;
  position:relative;
}
/* The red margin line, down the whole sheet. */
body::before{
  content:""; position:absolute; top:0; bottom:0; left:46px; width:1.5px;
  background:var(--margin); pointer-events:none;
}
.wrap{max-width:42rem;margin:0 auto;padding:0 1.4rem 4rem 4.4rem}
@media (min-width:52rem){ .wrap{padding-left:1.4rem} }

header{padding:4rem 0 0}
h1{
  font-family:"Caveat",cursive; font-weight:700;
  font-size:clamp(3rem,13vw,4.6rem); line-height:1; color:var(--ink);
  transform:rotate(-1.5deg); transform-origin:left;
}
.sub{
  margin-top:.5rem; color:var(--ink2);
  font-size:.95rem; letter-spacing:.09em; text-transform:uppercase;
}
.tagline{
  margin-top:1.6rem;
  font-family:"Caveat",cursive; font-size:1.9rem; color:var(--gm);
  transform:rotate(-2deg); transform-origin:left;
}
.status{
  display:inline-block; margin-top:1.8rem; padding:.2rem .8rem;
  border:1.5px solid var(--ink3); border-radius:3px;
  color:var(--ink2); font-size:.95rem; letter-spacing:.08em; text-transform:uppercase;
  transform:rotate(-.6deg);
}

section{margin-top:3.2rem}
h2{
  font-family:"Caveat",cursive; font-weight:700;
  font-size:2.1rem; line-height:1.1; color:var(--ink);
  margin-bottom:.7rem;
}
h3{
  font-family:"Caveat",cursive; font-weight:700;
  font-size:1.65rem; line-height:1.15; color:var(--ink);
  margin:2rem 0 .3rem;
}
p+p{margin-top:.9rem}
ul{margin:.6rem 0 0 1.2rem}
li{margin-top:.45rem}
strong{font-weight:400;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:3px}

/* The GM writes in the margins: his own hand, slanted, a shade lighter than the player's. */
.gm{
  margin-top:.7rem;
  font-family:"Caveat",cursive; font-size:1.55rem; line-height:1.25; color:var(--gm);
  transform:rotate(-2.5deg); transform-origin:left;
}
.gm::before{content:"GM: ";font-family:"Patrick Hand",sans-serif;font-size:1rem;color:var(--ink3);letter-spacing:.06em}

/* Shamgar's torn page: a loose scrap, the one shadow allowed. */
.scrap{
  margin:1.6rem 0 .4rem; padding:1.1rem 1.3rem 1.2rem;
  background:var(--scrap); color:var(--scrap-ink);
  box-shadow:0 4px 4px rgba(0,0,0,.18);
  transform:rotate(1.2deg);
  clip-path:polygon(0 2%,6% 0,14% 3%,23% 0,35% 2%,47% 0,58% 3%,70% 0,81% 2%,92% 0,100% 3%,100% 100%,0 100%);
}
.scrap .verse{font-family:"Reenie Beanie",cursive;font-size:1.75rem;line-height:1.2;color:#3b4a6b}
.scrap .cite{margin-top:.5rem;font-size:.9rem;letter-spacing:.06em;color:#55524c}

a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--margin);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
.home{display:inline-block;margin-bottom:1.2rem;font-size:1rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}

footer{
  margin-top:4rem; padding-top:1.2rem;
  border-top:1.5px solid var(--ink3);
  color:var(--ink2); font-size:1rem;
}
footer a{margin-right:1.1rem}
footer .copy{margin-top:.8rem;color:var(--ink3)}

.updated{margin-top:.6rem;color:var(--ink3);font-size:1rem}
.lede{margin-top:2rem}
.privacy h1{font-size:clamp(2.6rem,11vw,3.6rem)}