/* Palette — "receipt paper": warm off-white ground, charcoal ink, the brand coral kept as
   the single accent (deepened for contrast on light). The dark top strip carries the AD
   mark so the page still matches the avatar/banners. Accent is reserved for the primary
   action, the prompt rule, focus and hover; everything else is neutral. */
:root {
  --paper: #f7f5f0;
  --card: #ffffff;
  --ink: #15171b;
  --dim: #555c68;
  --muted: #8a919c;
  --line: #e3dfd6;
  --accent: #e5482a;
  --accent-ink: #c93b21;
  --dark: #0b0d11;
  --r: 12px;
}
* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; background: var(--paper); }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  line-height: 1.55;
  padding-bottom: 64px;
}
a { color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.15; }
.wrap { max-width: 720px; margin: 0 auto; padding: 0 20px; }

.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--paper); padding: 8px 12px; border-radius: 6px; }
.skip:focus { left: 8px; }

/* Top strip — the one dark element, matching the avatar */
.top { background: var(--dark); color: #f5f6f8; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 20px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 800; text-decoration: none; }
.brand img { border-radius: 8px; }
.menu { display: flex; gap: 4px 18px; font-weight: 700; }
.menu a { color: #b4bcc8; text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; }
.menu a:hover { color: #fff; }
.menu a[aria-current] { color: #fff; border-bottom-color: var(--accent); }
.social { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.9rem; }
.social a { color: #b4bcc8; text-decoration: none; font-weight: 600; }
.social a:hover { color: #fff; }

/* Landing */
.hero.small { padding: 36px 0 24px; }
.hero.small h1 { font-size: clamp(1.5rem, 4vw, 2rem); }
.paths { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 32px 0 8px; }
.path { display: flex; flex-direction: column; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; text-decoration: none; box-shadow: 0 1px 2px rgba(21, 23, 27, 0.04); }
.path:hover { border-color: var(--muted); }
.path h2 { font-size: 1.15rem; }
.path p { color: var(--dim); font-size: 0.95rem; flex: 1; }
.go { color: var(--accent-ink); font-weight: 700; font-size: 0.9rem; }
.latest { padding-top: 8px; }
.latest .head a { text-decoration: none; font-weight: 600; }
.freebie { display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: center; margin-top: 32px; background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 20px; }
.freebie img { width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.freebie h2 { font-size: 1.2rem; margin: 4px 0 8px; }
.freebie p { color: var(--dim); margin-bottom: 14px; }
.products h1 { font-size: 1.6rem; }
@media (max-width: 600px) { .paths { grid-template-columns: 1fr; } .freebie { grid-template-columns: 1fr; } .freebie img { max-width: 160px; } }

/* About */
.about-hero { display: grid; grid-template-columns: 1fr 200px; gap: 28px; align-items: start; }
.about-hero h1 { max-width: 22ch; }
.portrait { width: 100%; height: auto; border-radius: var(--r); border: 1px solid var(--line); }
.story { padding-top: 8px; max-width: 62ch; }
.story h2 { font-size: 1.2rem; margin: 28px 0 10px; }
.story p { color: var(--dim); margin-bottom: 14px; }
.story a { color: var(--ink); }
.rules { list-style: none; padding: 0; margin: 0; }
.rules li { padding: 12px 0 12px 16px; border-left: 3px solid var(--accent); margin-bottom: 10px; color: var(--dim); }
.rules strong { color: var(--ink); }
.follow { margin-top: 32px; }
.follow h2 { font-size: 1.2rem; }
.follow p { color: var(--dim); margin: 6px 0 4px; }
@media (max-width: 600px) { .about-hero { grid-template-columns: 1fr; } .portrait { max-width: 220px; } }

/* Hero */
.hero { padding: 48px 0 40px; border-bottom: 1px solid var(--line); }
.kicker { color: var(--accent-ink); font-weight: 700; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); font-weight: 800; margin-top: 10px; max-width: 18ch; }
.sub { color: var(--dim); margin-top: 16px; max-width: 54ch; font-size: 1.05rem; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.btn {
  display: inline-block; padding: 11px 18px; border-radius: 8px; text-decoration: none;
  font-weight: 700; border: 1px solid var(--line); background: var(--card); color: var(--ink);
}
.btn:hover { border-color: var(--muted); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-ink); }
.fine { color: var(--muted); font-size: 0.85rem; margin-top: 10px; }

/* Products */
.products { padding: 40px 0 8px; border-bottom: 1px solid var(--line); }
.products .head { margin-top: 0; }
.products .head a { text-decoration: none; font-weight: 600; }
.products .head a:hover { color: var(--ink); }
.lede { color: var(--dim); max-width: 58ch; margin-bottom: 20px; }
.product {
  display: grid; grid-template-columns: 150px 1fr; gap: 20px; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(21, 23, 27, 0.04);
}
.thumb img, .peek img { display: block; width: 100%; height: auto; border-radius: 6px; border: 1px solid var(--line); }
.price { color: var(--muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.price.free { color: var(--accent-ink); }
.product h3 { font-size: 1.2rem; font-weight: 800; margin: 4px 0 8px; }
.product p { color: var(--dim); }
.product ul { margin: 10px 0 16px; padding-left: 18px; color: var(--dim); font-size: 0.92rem; }
.product li { margin: 3px 0; }
.peek { grid-column: 1 / -1; }
@media (max-width: 560px) { .product { grid-template-columns: 1fr; } .thumb { max-width: 180px; } }

/* Search + categories */
.bar { position: sticky; top: 0; z-index: 1; background: var(--paper); padding: 16px 0 10px; }
.search {
  width: 100%; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: 8px;
  font: inherit; font-size: 1rem; padding: 12px 40px 12px 14px;
}
.search::placeholder { color: var(--muted); }
.search:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(229, 72, 42, 0.15); }
.hint {
  position: absolute; right: 32px; top: 26px; color: var(--muted); background: var(--paper);
  border: 1px solid var(--line); border-radius: 4px; font: 600 0.75rem/1 inherit; padding: 4px 6px;
}
.cats { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 0 8px; }
.cat {
  background: var(--card); color: var(--dim); border: 1px solid var(--line); border-radius: 999px;
  font: 600 0.8rem/1 inherit; padding: 6px 11px; cursor: pointer;
}
.cat:hover { border-color: var(--muted); color: var(--ink); }
.cat.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.card .cat { margin-top: 4px; }

/* Library */
.head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 14px; }
h2 { font-size: 1.15rem; font-weight: 800; }
.count { color: var(--muted); font-size: 0.85rem; }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r);
  padding: 20px; margin-bottom: 14px; box-shadow: 0 1px 2px rgba(21, 23, 27, 0.04);
}
.card:target { border-color: var(--accent); }
.card h3 { font-size: 1.15rem; font-weight: 700; }
.prompt {
  white-space: pre-wrap; font-family: ui-monospace, Consolas, monospace; font-size: 0.9rem; line-height: 1.6;
  color: var(--ink); background: var(--paper); border-left: 3px solid var(--accent);
  border-radius: 0 6px 6px 0; padding: 12px 14px; margin: 14px 0;
}
.tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.copy, .share {
  border: 1px solid var(--line); border-radius: 6px; font: 700 0.9rem/1 inherit; padding: 9px 14px; cursor: pointer;
  background: var(--paper); color: var(--ink);
}
.copy:hover, .share:hover { border-color: var(--muted); }
.copy.done, .share.done { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.watch { color: var(--dim); font-size: 0.9rem; margin-left: auto; }
.watch:hover { color: var(--ink); }
.receipt { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--dim); font-size: 0.92rem; }
.receipt b { color: var(--ink); font-weight: 700; margin-right: 6px; }
.empty { color: var(--dim); padding: 24px 0; }
.empty a { color: var(--ink); }
.more {
  display: block; width: 100%; margin-top: 4px; background: var(--card); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--r); font: 700 0.95rem/1 inherit; padding: 14px; cursor: pointer;
}
.more:hover { border-color: var(--muted); }

/* Footer */
.foot { margin-top: 48px; border-top: 1px solid var(--line); padding-top: 28px; color: var(--dim); font-size: 0.95rem; }
.foot a { color: var(--ink); }
.foot .fine a { color: var(--dim); }

@media (max-width: 640px) {
  .top .wrap { flex-wrap: wrap; gap: 8px 16px; }
  .social { width: 100%; }
  .watch { margin-left: 0; width: 100%; }
}