/* SiteToMD — Pocket notebook */

@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-italic.woff2") format("woff2"); font-weight: 400 600; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("/fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }

:root {
  --cover: #3b2a1c;
  --cover-deep: #2c1f14;
  --cover-ink: #f2e7d3;
  --cover-ink-soft: #d6c4a6;
  --band: #1c140d;
  --paper: #f7f1e4;
  --paper-edge: #e9dfca;
  --dot: rgba(92, 70, 45, 0.2);
  --rule: #ddd0b6;
  --ink: #2a2017;
  --ink-soft: #5b4b39;
  --ink-faint: #756350;
  --green: #227a4b;
  --green-press: #1a633c;
  --green-on-cover: #7fd1a0;
  --stamp: #34508c;
  --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scrollbar-color: #8a735a var(--cover-deep); }
body {
  margin: 0;
  background: var(--cover-deep);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.55;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  caret-color: var(--green);
}
::selection { background: #cfe7d6; color: var(--ink); }
img { max-width: 100%; display: block; }
a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 4px; }
.board :focus-visible { outline-color: var(--green-on-cover); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: min(1080px, 100% - 2.5rem); margin-inline: auto; }

/* ── Board (covers) ───────────────────────────────────────────── */
.board {
  position: relative;
  background-color: var(--cover);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .07 0 0 0 0 .04 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #43301f 0%, var(--cover) 45%, #35261a 100%);
  color: var(--cover-ink);
}
.board--band::after {
  content: "";
  position: absolute; top: 0; bottom: 0;
  right: clamp(14px, 6vw, 96px);
  width: 13px;
  background: linear-gradient(90deg, #120c07, var(--band) 30%, #2a1f16 55%, #120c07);
  box-shadow: -3px 0 6px rgba(0,0,0,0.35), 2px 0 3px rgba(0,0,0,0.25);
  pointer-events: none;
}

.label {
  display: inline-flex; align-items: baseline;
  background: var(--paper); color: var(--ink);
  padding: 0.35rem 0.9rem 0.4rem;
  border-radius: 3px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.35);
  outline: 1px solid var(--rule); outline-offset: -5px;
  font-weight: 600; font-size: 1.125rem; letter-spacing: 0.01em;
  text-decoration: none;
}
.label b { color: var(--green); font-weight: 600; }

/* ── Store buttons ────────────────────────────────────────────── */
.stores { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.store {
  display: inline-flex; align-items: center; gap: 0.65rem;
  min-width: 11rem;
  padding: 0.6rem 1.1rem 0.6rem 0.9rem;
  border-radius: 12px;
  background: #0d0906; color: #fff;
  border: 1px solid rgba(242,231,211,0.28);
  text-decoration: none; line-height: 1.1;
  transition: border-color 0.2s var(--ease-out);
}
.store svg { width: 22px; height: 22px; flex: none; }
.store small { display: block; font: 400 0.72rem/1.25 var(--mono); color: #d8cbb5; }
.store strong { display: block; font-size: 1.15rem; font-weight: 600; }
a.store:hover { border-color: rgba(242,231,211,0.75); }
.store--soon { background: transparent; border-style: dashed; color: var(--cover-ink); cursor: default; }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 999px;
  background: var(--green); color: #fff;
  font: 600 1.05rem/1 var(--serif); letter-spacing: 0.01em;
  padding: 0.8rem 1.5rem;
  cursor: pointer; text-decoration: none;
  transition: background-color 0.2s var(--ease-out), transform 0.15s var(--ease-out);
}
.pill:hover { background: var(--green-press); }
.pill:active { transform: scale(0.97); }
.pill:disabled { background: #5d8a70; cursor: progress; transform: none; }

/* ── Paper ────────────────────────────────────────────────────── */
.paper {
  background-color: var(--paper);
  background-image: radial-gradient(circle at 1px 1px, var(--dot) 1.1px, transparent 1.5px);
  background-size: 22px 22px;
  background-position: 10px 12px;
}

/* ── Back cover / footer ──────────────────────────────────────── */
.back-cover { padding: 3.5rem 0 3rem; }
.back-cover .wrap { display: grid; gap: 2rem; }
.back-cover h2 { margin: 0 0 0.4rem; font-size: clamp(1.8rem, 4vw, 2.5rem); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; }
.back-cover p { margin: 0; color: var(--cover-ink-soft); max-width: 32rem; }
.colophon {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(242,231,211,0.16);
  font-size: 0.98rem; color: var(--cover-ink-soft);
  padding-right: clamp(40px, 10vw, 140px);
}
.colophon a { color: var(--cover-ink); }
.colophon .spacer { flex: 1; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}