/* Leaf by Leaf blog: the site's paper sheets on the night sky, set for long reading. */
:root {
  --dusk: #211a37;
  --dusk-hi: #2e2550;
  --glass: rgba(24, 18, 44, 0.74);
  --cream: #fbe9c8;
  --ember: #f2ae3d;
  --ember-hi: #f7c060;
  --bark: #2a1a10;
  --paper: #f6eedb;
  --paper-under: #e6d8ba;
  --ink: #23336a;
  --print: #3b3152;
  --pencil: #756e88;
  --rule: #c5d1e3;
  --wash: rgba(197, 209, 227, 0.24);
  --font-ui: "Nunito", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --font-logo: "Pixelify Sans", "Courier New", monospace;
  --font-hand: "Patrick Hand", "Segoe Print", "Bradley Hand", cursive;
  --gutter: max(16px, 4vw);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--cream); font: 500 18px/1.6 var(--font-ui); -webkit-font-smoothing: antialiased;
  background: radial-gradient(ellipse at 50% -10%, #3a2f63 0%, var(--dusk) 55%) fixed, var(--dusk);
}
img { max-width: 100%; height: auto; }

/* pixel corners, like the game */
.btn, .chip, .sheet, .card { --n: 4px; clip-path: polygon(var(--n) 0, calc(100% - var(--n)) 0, calc(100% - var(--n)) var(--n), 100% var(--n), 100% calc(100% - var(--n)), calc(100% - var(--n)) calc(100% - var(--n)), calc(100% - var(--n)) 100%, var(--n) 100%, var(--n) calc(100% - var(--n)), 0 calc(100% - var(--n)), 0 var(--n), var(--n) var(--n)); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; font: 800 17px/1 var(--font-ui); color: var(--cream); background: var(--dusk); padding: 13px 18px 15px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.12); }
.btn.gold { background: var(--ember); color: var(--bark); }
.btn.print { background: var(--print); color: var(--paper); }
.btn.small { font-size: 15px; padding: 9px 12px 11px; }
.btn:focus-visible, .chip:focus-visible, .card:focus-visible { outline: 3px solid var(--ember); outline-offset: 2px; }
@media (hover: hover) {
  .btn:hover { background: var(--dusk-hi); }
  .btn.gold:hover { background: var(--ember-hi); }
  .btn.print:hover { background: var(--ink); }
  .chip:hover { background: var(--dusk-hi); }
  .card:hover .card-title { text-decoration: underline; }
}
.chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px 9px; background: var(--glass); font: 700 15px/1 var(--font-ui); color: var(--cream); text-decoration: none; }
.logo { font: 700 18px/1 var(--font-logo); letter-spacing: .02em; }
.logo svg { width: 15px; height: 15px; shape-rendering: crispEdges; }

.top { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: calc(12px + env(safe-area-inset-top, 0px)) var(--gutter) 12px; }
.top nav { display: flex; gap: 8px; align-items: center; }
main { width: min(760px, 100% - 2 * var(--gutter)); margin: 12px auto 48px; display: grid; gap: 28px; }

/* a sheet of paper */
.sheet { background: var(--paper); color: var(--print); filter: drop-shadow(5px 7px 0 rgba(16, 10, 30, .45)); }
.post .hero { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; image-rendering: pixelated; }
.text { padding: 30px 44px 36px; }
.tag { margin: 0 0 6px; font: 800 13px/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase; color: var(--pencil); }
h1 { margin: 0 0 12px; font: 800 clamp(29px, 4.6vw, 42px)/1.15 var(--font-ui); color: var(--print); text-wrap: balance; }
.lede { margin: 0 0 22px; font: 23px/1.4 var(--font-hand); color: var(--ink); }
.text h2 { margin: 34px 0 10px; font: 800 25px/1.25 var(--font-ui); color: var(--print); }
.text h3 { margin: 26px 0 6px; font: 800 20px/1.3 var(--font-ui); color: var(--print); }
.text p, .text li { font-size: 19px; line-height: 1.7; }
.text p { margin: 0 0 16px; }
.text ul, .text ol { margin: 0 0 18px; padding-left: 26px; }
.text li { margin: 6px 0; }
.text li::marker { color: var(--pencil); font-weight: 800; }
.text a { color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.text strong { color: var(--print); font-weight: 800; }
.text em { font-style: italic; }
blockquote { margin: 0 0 18px; padding: 4px 0 4px 18px; border-left: 4px solid var(--ember); font: 22px/1.45 var(--font-hand); color: var(--ink); }

/* the game, at the end of every post */
.try { margin-top: 34px; padding: 22px 22px 18px; background: var(--wash); border-left: 4px solid var(--ember); }
.try-title { margin: 0 0 6px !important; font: 800 22px/1.25 var(--font-ui) !important; color: var(--print); }
.try p { font-size: 17px; }
.cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0 !important; }

.more { padding: 22px 28px 20px; }
.more ul { margin: 0; padding-left: 20px; }
.more li { margin: 8px 0; font-size: 18px; }
.more a { color: var(--ink); text-underline-offset: 3px; }

/* the index */
.intro { padding: 30px 40px 28px; }
.intro .lede { margin: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 22px; }
.card { display: grid; gap: 6px; align-content: start; padding: 0 0 20px; background: var(--paper); color: var(--print); text-decoration: none; filter: drop-shadow(5px 7px 0 rgba(16, 10, 30, .45)); }
.card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; image-rendering: pixelated; margin-bottom: 8px; }
.card .tag, .card-title, .card-line { padding: 0 20px; }
.card-title { font: 800 21px/1.3 var(--font-ui); }
.card-line { font: 19px/1.4 var(--font-hand); color: var(--pencil); }

footer { padding: 0 var(--gutter) calc(28px + env(safe-area-inset-bottom, 0px)); display: grid; justify-items: center; }
.foot { width: min(760px, 100%); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 18px; padding: 14px 16px 15px; background: var(--glass); font: 700 14px/1.3 var(--font-ui); color: var(--cream); }
.foot b { font: 700 15px/1.3 var(--font-logo); }
.foot a { color: var(--cream); }

@media (max-width: 600px) {
  .text { padding: 22px 18px 26px; }
  .intro { padding: 24px 18px 22px; }
  .more { padding: 18px 18px 16px; }
  .text p, .text li { font-size: 18px; }
  .lede { font-size: 21px; }
  .logo span { display: none; }
}