/* style.css — site-wide design system
 *
 * Promotes the patterns from explore/index-b.html (Mockup B — Today-first
 * hub) to be the canonical visual + structural language for every page.
 *
 * Linked from every HTML page. Per-page styles go inline in the page's
 * <style> block (page-specific layout only) — anything that ought to be
 * consistent across the site lives here.
 *
 * Sections:
 *   1. Design tokens (colours, spacing, rules) — light + dark
 *   2. Reset + base typography
 *   3. Layout primitives (main, divider, masthead)
 *   4. Components (search, now-stripe, event/yp/board cards, ask cards,
 *                  page tiles, footer)
 *
 * No build step. No framework. Plain CSS. */


/* ───── 1. Tokens ─────────────────────────────────────────────────────── */

:root {
  --paper:           #faf8f5;
  --paper-deep:      #f3f1ee;
  --paper-card:      #ffffff;
  --ink:             #1a1410;
  --ink-muted:       #7a6b5e;
  --ink-faint:       #a89485;
  --terracotta:      #a0522d;
  --terracotta-soft: rgba(160,82,45,0.09);
  --gold:            #a0522d;
  --gold-soft:       rgba(160,82,45,0.07);
  --green:           #4a7a52;
  --rule:            rgba(120,90,70,0.16);
  --rule-soft:       rgba(120,90,70,0.09);
  --shadow-card:     0 1px 3px rgba(0,0,0,0.04);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper:           #18140f;
    --paper-deep:      #100d09;
    --paper-card:      #221c15;
    --ink:             #ede8e1;
    --ink-muted:       #a0917f;
    --ink-faint:       #6a5c4a;
    --terracotta:      #c8614a;
    --terracotta-soft: rgba(200,97,74,0.14);
    --gold:            #c8614a;
    --gold-soft:       rgba(200,97,74,0.10);
    --green:           #6aaa78;
    --rule:            rgba(180,140,100,0.22);
    --rule-soft:       rgba(180,140,100,0.11);
    --shadow-card:     0 1px 3px rgba(0,0,0,0.3);
  }
}


/* ───── 2. Reset + base ───────────────────────────────────────────────── */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
  font-family: 'Newsreader', Georgia, serif;
  font-weight: 380;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Soft paper noise overlay — kept from the production aesthetic */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none; opacity: 0.4; z-index: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.12  0 0 0 0 0.09  0 0 0 0 0.07  0 0 0 0.07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}
@media (prefers-color-scheme: dark) {
  body::before { opacity: 0.25; mix-blend-mode: screen; }
}

main { position: relative; z-index: 1; }

/* Typography */
h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink);
}
h1 { font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.1; margin: 0 0 .3em; }
h2 { font-size: 1.5rem; margin: 2.4em 0 .6em; }
h3 { font-size: 1.15rem; margin: 0 0 .3em; }
h4 { font-size: 1.05rem; margin: 0 0 .3em; }

p { margin: 0 0 1em; }
em.em, .em { color: var(--terracotta); font-style: italic; font-weight: 500; }

a {
  color: var(--terracotta);
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
a:hover { border-bottom-color: var(--terracotta); }

blockquote { margin: 0; padding: 0; }
blockquote::before { content: '"'; color: var(--ink-faint); }
blockquote::after  { content: '"'; color: var(--ink-faint); }

.meta-mono {
  font-family: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  font-size: .8em;
  color: var(--ink-muted);
  letter-spacing: 0.01em;
}

hr.divider { margin: 3em 0; border: 0; border-top: 1px solid var(--rule); }


/* ───── 3. Layout primitives ──────────────────────────────────────────── */

/* Standard page width — narrow editorial column, comfortable for reading */
.page {
  max-width: 680px;
  margin: 0 auto;
  padding: 4em 1.4em 6em;
}
.page--wide {
  max-width: 880px;     /* directory, board — wider grids */
}

/* Centered, calm masthead — date · h1 · subtitle */
.masthead {
  text-align: center;
  margin-bottom: 3em;
  padding-bottom: 2.2em;
  border-bottom: 1px solid var(--rule);
}
.masthead .date {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82em;
  color: var(--ink-muted);
  letter-spacing: .15em;
  text-transform: uppercase;
  margin-bottom: .8em;
}
.masthead h1 {
  font-size: clamp(2.2rem, 7vw, 3.2rem);
  margin: 0 0 .3em;
  font-weight: 400;
}
.masthead .h1-sub {
  color: var(--ink-muted);
  font-size: .95em;
  font-style: italic;
}

/* Section header with optional "all →" link on the right */
.section-head {
  margin: 3em 0 1em;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: .4em;
  border-bottom: 1px solid var(--rule);
}
.section-head h2 { margin: 0; font-size: 1.25rem; }
.section-head .more {
  font-family: 'JetBrains Mono', monospace;
  font-size: .82em;
  border: none;
}


/* ───── 4. Components ─────────────────────────────────────────────────── */

/* Search pill (used in masthead + standalone) */
.search {
  margin: 2em auto;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: .7em;
  padding: .8em 1.1em;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 999px;
  box-shadow: var(--shadow-card);
}
.search:hover, .search:focus-within { border-color: var(--terracotta); }
.search svg { flex-shrink: 0; color: var(--ink-muted); }
.search input {
  flex: 1; border: none; background: transparent;
  font: inherit; color: var(--ink); outline: none;
}
.search .search-kbd {
  font-family: 'JetBrains Mono', monospace; font-size: .72em;
  color: var(--ink-faint);
  padding: .15em .5em; border: 1px solid var(--rule); border-radius: 3px;
}

/* "Now stripe" — tinted block highlighting the most important thing on a page */
.now-stripe {
  margin: 2em 0 3em;
  padding: 1.4em 1.5em;
  background: var(--terracotta-soft);
  border-radius: 6px;
}
.now-stripe .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: .76em;
  color: var(--terracotta);
  text-transform: uppercase;
  letter-spacing: .12em;
  margin-bottom: .5em;
}
.now-stripe h2 { margin: 0 0 .8em; font-size: 1.2rem; }

/* Event row (used in now-stripe and standalone) */
.event {
  padding: .8em 0;
  border-top: 1px solid var(--rule-soft);
}
.event:first-of-type { border: none; padding-top: 0; }
.event .when {
  font-family: 'JetBrains Mono', monospace;
  font-size: .8em;
  color: var(--terracotta);
}
.event h3 { margin: .1em 0 .2em; font-size: 1.05rem; }
.event .where { font-size: .88em; color: var(--ink-muted); margin-bottom: .3em; }
.event p { margin: 0; font-size: .95em; }

/* Yellow-pages row (left = category, right = body) */
.yp-row {
  display: flex; gap: 1em; align-items: flex-start;
  padding: 1em 0;
  border-bottom: 1px solid var(--rule-soft);
}
.yp-row:last-child { border: none; }
.yp-cat {
  flex: 0 0 110px;
  font-family: 'JetBrains Mono', monospace; font-size: .78em;
  color: var(--ink-muted);
  padding-top: .15em;
}
.yp-body h4 { margin: 0 0 .2em; font-weight: 500; }
.yp-body p { margin: 0 0 .2em; font-size: .94em; }
.yp-body .contact { font-size: .85em; color: var(--ink-muted); }

/* Board card (community board entries) */
.board-card {
  padding: .9em 1.1em;
  margin-bottom: .6em;
  background: var(--paper-card);
  border-left: 3px solid var(--gold);
  border-radius: 0 4px 4px 0;
  box-shadow: var(--shadow-card);
}
.board-card.urgent { border-left-color: var(--terracotta); }
.board-card.free   { border-left-color: var(--green); }
.board-card.lost   { border-left-color: var(--ink-faint); }
.board-card .stripe {
  display: flex; justify-content: space-between;
  font-size: .78em; color: var(--ink-muted); margin-bottom: .3em;
  font-family: 'JetBrains Mono', monospace;
}
.board-card .stripe .kind { color: var(--gold); }
.board-card.urgent .stripe .kind { color: var(--terracotta); }
.board-card.free   .stripe .kind { color: var(--green); }
.board-card p { margin: 0; font-size: .95em; }

/* PMIT-style ask card (match / gap / contribution) */
.ask {
  padding: 1em 1.2em;
  margin-bottom: .8em;
  background: var(--paper-card);
  border-left: 4px solid var(--rule);
  border-radius: 0 6px 6px 0;
  box-shadow: var(--shadow-card);
}
.ask.match   { border-left-color: var(--green); }
.ask.gap     { border-left-color: var(--gold); }
.ask.contrib { border-left-color: var(--terracotta); }

.ask .head {
  display: flex; flex-wrap: wrap; gap: 1em;
  font-family: 'JetBrains Mono', monospace; font-size: .76em;
  color: var(--ink-muted);
  margin-bottom: .4em;
}
.ask .kind { font-weight: 500; }
.ask.match  .kind { color: var(--green); }
.ask.gap    .kind { color: var(--gold); }
.ask.contrib .kind { color: var(--terracotta); }
.ask blockquote { font-style: italic; margin: 0 0 .4em; }
.ask .reply {
  margin-top: .6em;
  padding: .6em .9em;
  background: var(--paper-deep);
  border-radius: 4px;
  font-size: .92em;
}
.ask .reply-label {
  font-size: .7em; text-transform: uppercase; letter-spacing: .08em;
  color: var(--green); font-family: 'JetBrains Mono', monospace;
  display: block; margin-bottom: .25em;
}

/* Page-tile grid (the four squares at the bottom of every page) */
.pages {
  margin-top: 4em;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: .7em;
}
.pages a {
  display: flex; flex-direction: column; align-items: center;
  padding: 1.2em 1em;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  text-align: center;
  color: var(--ink);
}
.pages a:hover { border-color: var(--terracotta); color: var(--terracotta); }
.pages a .name {
  font-family: 'Fraunces', serif; font-size: 1.1rem; font-weight: 500;
  margin-bottom: .2em;
}
.pages a .desc {
  font-family: 'JetBrains Mono', monospace; font-size: .72em;
  color: var(--ink-muted);
  text-transform: uppercase; letter-spacing: .05em;
}

/* Site footer (every page) */
.site-footer {
  margin-top: 5em;
  font-size: .82em;
  color: var(--ink-faint);
  text-align: center;
}
.site-footer .meta-mono { display: inline; }

/* Secondary nav row (Stories · Sources · Release · Terms) — sits in
   the site footer below the page-tile grid. Lower visual weight than
   the tiles. */
.footer-links {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78em;
  color: var(--ink-faint);
  margin: 1.5em 0 .8em;
  letter-spacing: .02em;
}
.footer-links a {
  color: var(--ink-muted);
  border: none;
  margin: 0 .5em;
}
.footer-links a:hover { color: var(--terracotta); }
.footer-links .sep {
  color: var(--ink-faint);
  user-select: none;
}

/* "Verify-note" — soft caution under sections that surface community data */
.verify-note {
  font-size: .88em;
  color: var(--ink-muted);
  font-style: italic;
  margin: 0 0 1em;
  padding-left: .9em;
  border-left: 2px solid var(--rule);
}

/* ───────────────────────────────────────────────────────────────────────
   Top bar + deep footer — site-wide navigation chrome (nav direction C)
   The top bar holds 5 primary destinations + search; the deep footer
   carries the editorial reference content (About · Reference · Fine print).
   The older .pages tile grid still exists above for un-migrated pages.
   ─────────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.topbar-inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; gap: 1.5em;
  padding: .7em 1.2em;
}
.topbar .brand {
  font-family: 'Fraunces', serif;
  font-weight: 460;
  font-size: .9rem;
  color: var(--ink-muted);
  border: none;
  white-space: nowrap;
}
.topbar .brand:hover { color: var(--ink); }

.primary-nav {
  display: flex; gap: 1.4em;
  flex: 1;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.primary-nav::-webkit-scrollbar { display: none; }
.primary-nav a {
  font-family: 'JetBrains Mono', monospace;
  font-size: .76rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-muted);
  border: none;
  padding-bottom: 2px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.primary-nav a:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }
.primary-nav a.is-current {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

.topbar .search {
  margin: 0; padding: .35em .8em;
  max-width: 240px;
  border: 1px solid var(--rule);
  background: var(--paper-card, var(--paper));
  box-shadow: none;
  display: flex; align-items: center; gap: .4em;
  border-radius: 3px;
}
.topbar .search input {
  font-size: .78rem;
  border: none; outline: none; background: transparent;
  flex: 1; min-width: 0;
  color: var(--ink);
  font-family: 'JetBrains Mono', monospace;
}
.topbar .search input::placeholder { color: var(--ink-faint); }
.topbar .search svg { color: var(--ink-faint); flex-shrink: 0; }

@media (max-width: 720px) {
  .topbar-inner { gap: .7em; padding: .55em .8em; }
  .primary-nav { gap: .8em; }
  .primary-nav a { font-size: .68rem; }
  .topbar .search { display: none; }
}

/* Deep footer — site-wide reference area below content */
.deep-footer {
  margin-top: 5em;
  padding: 2.4em 1.5em 1em;
  background: var(--paper-deep, var(--paper-card));
  border-top: 1px solid var(--rule);
}
.deep-footer-inner {
  max-width: 880px; margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2.4em;
}
.deep-footer h4 {
  font-family: 'JetBrains Mono', monospace;
  font-size: .68rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 .9em;
  font-weight: 500;
}
.deep-footer .col p {
  margin: 0 0 .8em;
  font-size: .9rem;
  color: var(--ink-muted);
  line-height: 1.55;
}
.deep-footer .col ul { list-style: none; padding: 0; margin: 0; }
.deep-footer .col li { margin-bottom: .45em; }
.deep-footer .col a {
  color: var(--ink); border: none;
  font-size: .92rem;
}
.deep-footer .col a:hover { color: var(--terracotta); }
.deep-footer .closer {
  margin-top: 2em; padding-top: 1em;
  border-top: 1px solid var(--rule-soft, var(--rule));
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem; color: var(--ink-faint);
  text-align: center;
}
@media (max-width: 720px) {
  .deep-footer-inner { grid-template-columns: 1fr; gap: 1.5em; }
  .deep-footer { padding: 1.8em 1.1em .8em; }
}