/* 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:       #7d6a56;   /* 4.9:1 on paper — was #a89485 (2.7:1, failed AA) */
  --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:       #97856f;   /* 4.7:1 on dark card — was #6a5c4a (2.6:1, failed AA) */
    --terracotta:      #d4705a;   /* 5.0:1 on dark card — was #c8614a (4.2:1) */
    --terracotta-soft: rgba(212,112,90,0.14);
    --gold:            #d4705a;
    --gold-soft:       rgba(212,112,90,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; }

/* Mobile search affordance — the inline input hides under 720px, so a
   magnifier link to search.html takes its place. Hidden on desktop. */
.topbar .search-go {
  display: none;
  align-items: center; justify-content: center;
  width: 40px; height: 40px;
  margin: -8px 0;
  color: var(--ink-muted);
  border: none;
  flex-shrink: 0;
}
.topbar .search-go:hover { color: var(--terracotta); }

@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; }
  .topbar .search-go { display: flex; }
}

/* 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 .footer-disclaimer {
  font-style: italic;
  font-size: .82rem;
  color: var(--ink-faint);
  border-top: 1px solid var(--rule-soft, var(--rule));
  padding-top: .8em;
  margin-top: .9em;
}
.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; }
}


/* ───────────────────────────────────────────────────────────────────────
   v4.0 "dawn" refresh — reimagined front-door components + site-wide
   motion & focus polish. Same tokens, same fonts; new life.
   ─────────────────────────────────────────────────────────────────── */

/* Masthead dawn-mark — small abstract sunrise above the h1.
   Inline SVG in the page; these classes colour it from the tokens. */
.mast-mark {
  display: block;
  margin: 0 auto .9em;
  width: 72px; height: auto;
}
.mast-mark .sun     { fill: var(--terracotta); }
.mast-mark .ray     { stroke: var(--gold); stroke-width: 2; stroke-linecap: round; }
.mast-mark .horizon { stroke: var(--green); stroke-width: 2.5; stroke-linecap: round; }

/* Week ribbon — 7-day strip under the masthead. Each cell shows the
   weekday, date, and up to four event dots; today gets the tinted cell.
   Cells link into calendar.html. */
.week-ribbon {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: .45em;
  margin: 0 0 3em;
}
.week-ribbon a {
  display: flex; flex-direction: column; align-items: center; gap: .15em;
  padding: .7em .2em .8em;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 7px;
  text-decoration: none;
  color: var(--ink);
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.week-ribbon a:hover {
  border-color: var(--terracotta);
  transform: translateY(-2px);
  box-shadow: var(--shadow-card);
}
.week-ribbon a.is-today {
  background: var(--terracotta-soft);
  border-color: var(--terracotta);
}
.week-ribbon .dow {
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.week-ribbon a.is-today .dow { color: var(--terracotta); }
.week-ribbon .dnum {
  font-family: 'Fraunces', serif;
  font-weight: 460;
  font-size: 1.15rem;
  line-height: 1.1;
}
.week-ribbon .dots {
  display: flex; gap: 3px; height: 6px; margin-top: .25em;
}
.week-ribbon .dots i {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--terracotta);
}
.week-ribbon .dots i.more { background: var(--gold); }
.week-ribbon .dots:empty { visibility: hidden; }
@media (max-width: 560px) {
  .week-ribbon { gap: .3em; }
  .week-ribbon a { padding: .5em .1em .6em; border-radius: 5px; }
  .week-ribbon .dnum { font-size: .95rem; }
}

/* Poster filmstrip — horizontal scroll-snap strip of wall posters.
   Slight alternating tilt gives the pinboard feel without leaving
   the calm baseline. */
.filmstrip {
  display: flex; gap: 1em;
  overflow-x: auto;
  padding: 1em .3em 1.2em;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.filmstrip .poster {
  flex: 0 0 150px;
  scroll-snap-align: start;
  background: var(--paper-card);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: .45em .45em .6em;
  box-shadow: var(--shadow-card);
  transition: transform .16s ease, box-shadow .16s ease;
  text-decoration: none; color: var(--ink); border-bottom-width: 1px;
}
.filmstrip .poster:nth-child(odd)  { transform: rotate(-.9deg); }
.filmstrip .poster:nth-child(even) { transform: rotate(.9deg); }
.filmstrip .poster:hover {
  transform: rotate(0deg) translateY(-3px);
  box-shadow: 0 6px 18px rgba(0,0,0,.09);
}
.filmstrip .poster img {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  border-radius: 3px; display: block;
  background: var(--paper-deep);
}
.filmstrip .poster .cap {
  font-family: 'JetBrains Mono', monospace;
  font-size: .58rem;
  letter-spacing: .06em;
  color: var(--ink-muted);
  margin-top: .5em;
  line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.filmstrip .poster--more {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 3/4.35;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--terracotta);
  text-align: center;
}

/* Site-wide motion & focus polish */
.pages a,
.board-card,
.ask,
.stripe .card {
  transition: transform .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.pages a:hover { transform: translateY(-2px); }

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
  border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}