/* ─────────────────────────────────────────────────────────────────────
   SSW design system — the single source of truth.
   Both the portal app (portal.html) and the specimen page
   (design-system.html) link this file; the specimen page documents
   what is defined HERE, it has no component styles of its own.
   Tokens first (light + dark), then components in the same order as
   the design-system page sections.
   ───────────────────────────────────────────────────────────────────── */

:root {
  --font: 'Jost', 'Futura', 'Century Gothic', sans-serif;
  --black: #111;
  --grey: #54595f;
  --muted: #b0aca4;
  --light: #f4f3f1;
  --surface: #ffffff;
  --hairline: #e4e2de;
  --nav-bg: rgba(244, 243, 241, 0.92);
  --shadow: rgba(0, 0, 0, 0.07);
  --pad: clamp(24px, 5vw, 72px);
  --rc: 3px; /* the slight radius — images, buttons, chips, surfaces; 50% stays people-only */
}
/* dark mode: same five-value restraint, warm near-black like the hero underlay.
   Opt-in only — a page goes dark when html[data-theme="dark"] is set. */
html[data-theme="dark"] {
  --black: #f4f3f1;
  --grey: #b6b1a9;
  --muted: #948e83;
  --light: #14110d;
  --surface: #1d1a16;
  --hairline: #2e2a24;
  --nav-bg: rgba(20, 17, 13, 0.92);
  --shadow: rgba(0, 0, 0, 0.4);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* slight radius everywhere a surface, image or control has an edge */
.btn, .rsvp, .toast, .tag, .status-chip, .flat-chip, .badge,
.tile, .note, .ev-img, .mem-ph, .mem-ph .flat-tag, .coll-card,
.ev-img .status-chip, .input-light { border-radius: var(--rc); }
body {
  font-family: var(--font); font-weight: 400; font-size: 18px;
  background: var(--light); color: var(--black); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ─── Type scale (02) ─── */
.kicker { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); }
.wordmark { text-align: right; font-size: 16px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.15; color: var(--black); text-decoration: none; }
.wordmark span { display: block; }
.t-wordmark { font-size: 24px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1.15; }
.t-wordmark span { display: block; }
.t-display { font-size: clamp(28px, 3.4vw, 44px); font-weight: 300; line-height: 1.2; }
.t-h2 { font-size: 27px; font-weight: 300; line-height: 1.3; }
.t-card { font-size: 19px; font-weight: 400; }
.t-body { font-size: 16px; color: var(--grey); line-height: 1.7; max-width: 600px; }
.t-meta { font-size: 14px; color: var(--grey); }
.t-kicker { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); }
.t-date { font-size: 34px; font-weight: 300; line-height: 1; }
.t-date span { display: block; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 6px; }

/* ─── Buttons (04) ─── */
.btn {
  font-family: var(--font); font-size: 13px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 14px 26px; cursor: pointer; transition: opacity 0.25s, background 0.25s, color 0.25s, border-color 0.25s;
  background: var(--black); color: var(--light); border: none;
}
.btn:hover { opacity: 0.8; }
.btn.ghost { background: none; border: 1px solid var(--black); color: var(--black); }
.btn.ghost:hover { background: var(--black); color: var(--light); opacity: 1; }
.btn.sm { padding: 10px 16px; font-size: 11px; letter-spacing: 0.14em; }
/* on imagery the set flips to fixed white — imagery isn't themed */
.btn.light { background: #fff; color: #111; }
.btn.light-ghost { background: none; border: 1px solid rgba(255,255,255,0.75); color: #fff; }
.btn.light-ghost:hover { background: #fff; color: #111; opacity: 1; }
/* quiet underlined text action — rare cases only (sign out, dismiss),
   at most one per screen, never the primary path */
.quiet {
  font-family: var(--font); font-size: 12px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--grey);
  background: none; border: none; cursor: pointer;
  border-bottom: 1px solid var(--hairline); padding: 0 0 2px;
}
.quiet:hover { color: var(--black); }

/* ─── Chips, pills & badges (05) ─── */
.flat-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.flat-chip {
  display: inline-block; background: var(--black); color: var(--light);
  font-size: 14px; font-weight: 400; letter-spacing: 0.04em;
  padding: 7px 14px; min-width: 44px; text-align: center;
}
.badge { display: inline-block; background: var(--black); color: var(--light); font-size: 11px; padding: 2px 10px; letter-spacing: 0.08em; }
.status-chip {
  display: inline-block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 3px 10px; border: 1px solid var(--hairline); color: var(--grey); white-space: nowrap;
}
.status-chip.live { border-color: var(--black); color: var(--black); }
.status-chip.now { border-color: var(--black); background: var(--black); color: var(--light); }
.status-chip .dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: currentColor; margin-right: 6px; vertical-align: 1.5px; animation: ssw-pulse 1.6s ease-in-out infinite; }
@keyframes ssw-pulse { 50% { opacity: 0.35; } }
.tag {
  display: inline-block; font-size: 11.5px; color: var(--grey);
  border: 1px solid var(--hairline); background: var(--surface); padding: 5px 12px; cursor: pointer;
  transition: border-color 0.25s, color 0.25s;
}
.tag:hover { border-color: var(--black); color: var(--black); }
.tag.on { border-color: var(--black); background: var(--black); color: var(--light); }
.ack { display: inline-block; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--black); border-bottom: 1px solid var(--hairline); padding-bottom: 2px; }

/* ─── Avatars & facepiles (06) — monograms, no photos, the only circles ─── */
.av {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--black); color: var(--light);
  font-weight: 400; letter-spacing: 0.06em; flex-shrink: 0;
}
.av.tone-2 { background: #54595f; color: #f4f3f1; }
.av.tone-3 { background: #8d887f; color: #f4f3f1; }
.av.tone-4 { background: var(--surface); color: var(--black); border: 1px solid var(--black); }
.av.xs { width: 26px; height: 26px; font-size: 9px; }
.av.sm { width: 34px; height: 34px; font-size: 11px; }
.av.md { width: 46px; height: 46px; font-size: 14px; }
.av.lg { width: 64px; height: 64px; font-size: 18px; }
.facepile { display: inline-flex; }
.facepile .av { border: 2px solid var(--surface); margin-left: -10px; }
.facepile .av:first-child { margin-left: 0; }
.facepile .more { background: var(--light); color: var(--grey); border: 2px solid var(--surface); }

/* ─── Editorial action link — replaces chunky buttons on photo-led cards ─── */
.card-act {
  display: inline-block; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--black); border-bottom: 1px solid var(--hairline); padding-bottom: 2px;
  cursor: pointer; transition: border-color 0.25s, color 0.25s;
}
.card-act:hover { border-color: var(--black); }
.card-act.done { color: var(--grey); border-color: transparent; cursor: default; }

/* ─── Event cards (07) — chromeless, image-led: the photo is the card ─── */
.ev-rail { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.ev-rail::-webkit-scrollbar { display: none; }
.ev-card {
  flex: 0 0 min(300px, 84vw); scroll-snap-align: start;
  display: block; text-decoration: none; color: var(--black);
}
.ev-img { aspect-ratio: 3/2; background-size: cover; background-position: center; filter: saturate(0.85); position: relative; transition: filter 0.35s; }
.ev-card:hover .ev-img { filter: saturate(1); }
.ev-img .status-chip { position: absolute; top: 14px; left: 14px; background: rgba(255,255,255,0.92); border-color: transparent; color: #111; }
.ev-card .lab { font-size: 12.5px; color: var(--grey); margin-top: 14px; }
.ev-card h4 { font-size: 22px; font-weight: 300; line-height: 1.2; margin-top: 4px; }
.ev-card .sub { font-size: 14px; color: var(--grey); margin-top: 5px; }
.ev-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.ev-foot .going { font-size: 11.5px; color: var(--grey); display: inline-flex; align-items: center; gap: 8px; }
.ev-date { text-align: center; flex-shrink: 0; }
.ev-date b { display: block; font-size: 26px; font-weight: 300; line-height: 1; }
.ev-date span { display: block; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-top: 4px; }
.rsvp {
  font-family: var(--font); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  background: none; border: 1px solid var(--black); color: var(--black);
  padding: 8px 16px; cursor: pointer; transition: background 0.25s, color 0.25s;
}
.rsvp:hover, .rsvp.on { background: var(--black); color: var(--light); }
.ev-row { display: grid; grid-template-columns: 76px 1fr auto; gap: 22px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.ev-row:last-child { border-bottom: none; }
.ev-row .ev-date b { font-size: 30px; }
.ev-row h4 { font-size: 17px; font-weight: 400; margin-bottom: 2px; }
.ev-row .meta { font-size: 14px; color: var(--grey); }

/* ─── Member cards (08) — image-led like the events, monogram panel for privacy ─── */
.mem-rail { display: flex; gap: 24px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.mem-rail::-webkit-scrollbar { display: none; }
.mem-card { flex: 0 0 min(210px, 64vw); scroll-snap-align: start; }
.mem-ph {
  aspect-ratio: 12/13; position: relative;
  display: flex; align-items: center; justify-content: center;
  background: #54595f; color: #f4f3f1;
}
.mem-ph.tone-2 { background: #8d887f; }
.mem-ph.tone-3 { background: #3b3733; }
.mem-ph b { font-size: 52px; font-weight: 300; letter-spacing: 0.1em; }
.mem-ph .flat-tag {
  position: absolute; top: 12px; left: 12px;
  font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(20,17,13,0.55); color: #fff; padding: 4px 9px;
}
.mem-card .who-name { font-size: 18px; font-weight: 400; margin-top: 12px; }
.mem-card .mem-role { font-size: 12.5px; color: var(--grey); margin: 2px 0 8px; }
.mem-card .why { font-size: 13px; color: var(--grey); line-height: 1.6; margin-bottom: 10px; }
.mem-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.mem-tags .tag { font-size: 10.5px; padding: 4px 10px; cursor: default; }
.mem-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--hairline); }
.mem-row:last-child { border-bottom: none; }
.mem-row .who { flex: 1; }
.mem-row .who b { display: block; font-size: 14.5px; font-weight: 400; }
.mem-row .who span { font-size: 12px; color: var(--grey); }

/* ─── Collection cards (09) — compact landscape, scrim to the top ─── */
.coll-rail { display: flex; gap: 20px; overflow-x: auto; padding-bottom: 8px; scrollbar-width: none; scroll-snap-type: x proximity; }
.coll-rail::-webkit-scrollbar { display: none; }
.coll-card {
  position: relative; flex: 0 0 min(250px, 72vw); scroll-snap-align: start; aspect-ratio: 3/2; overflow: hidden;
  display: flex; align-items: flex-end; text-decoration: none; color: #fff;
  background-size: cover; background-position: center;
}
.coll-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(8,7,6,0.74), rgba(8,7,6,0.05) 70%); transition: background 0.35s; }
.coll-card:hover::before { background: linear-gradient(to top, rgba(8,7,6,0.84), rgba(8,7,6,0.12) 70%); }
.coll-body { position: relative; padding: 15px 17px; width: 100%; }
.coll-body .cat { font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.75); }
.coll-body h4 { font-size: 20px; font-weight: 300; line-height: 1.1; margin: 4px 0 3px; }
.coll-body .count { font-size: 11.5px; color: rgba(255,255,255,0.82); display: block; }

/* ─── Notice board & ledger (10) ─── */
.stacks { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
/* a note is a note is a note — one component for everything pinned;
   the tag does the sorting (building, wanted, recommended, safety…) */
.note { position: relative; background: var(--surface); border: 1px solid var(--hairline); padding: 18px 18px 14px; margin-bottom: 14px; box-shadow: 0 2px 6px rgba(0,0,0,0.06); }
.note:nth-child(odd) { transform: rotate(-0.35deg); }
.note:nth-child(even) { transform: rotate(0.3deg); }
.note:nth-child(3n) { transform: rotate(0.55deg); }
.note:nth-child(5n) { transform: rotate(-0.6deg); }
.note .n-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.note .n-tag, .linkcard .n-tag, .bcard .n-tag {
  font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  border: 1px solid var(--hairline); color: var(--grey); padding: 3px 8px; border-radius: var(--rc);
  margin-top: 2px;
}

/* ─── Category tints — coloured paper, like a real board. Apply to .note/.linkcard ─── */
.c-community   { background: #edf0e3; } .c-community .n-tag   { border-color: #c0caa3; color: #65753f; }
.c-safety      { background: #f7e9e3; } .c-safety .n-tag      { border-color: #dcb5a5; color: #9c5236; }
.c-wanted      { background: #f6efda; } .c-wanted .n-tag      { border-color: #dcc794; color: #876a2b; }
.c-recommended { background: #e7edf1; } .c-recommended .n-tag { border-color: #aec4d0; color: #46667a; }
.c-free        { background: #f0e9e0; } .c-free .n-tag        { border-color: #d2bfa9; color: #7d6244; }
.c-story       { background: var(--surface); } .c-story .n-tag { border-color: var(--black); color: var(--black); }
/* official building notices stay white with the quiet grey tag */

/* Dark mode — the bright pastel paper reads harsh on the dark canvas, so the
   notes become deep muted tints of the same hue with a lighter tag. */
html[data-theme="dark"] .c-community   { background: #23291c; } html[data-theme="dark"] .c-community .n-tag   { border-color: #4a5639; color: #a7bd7c; }
html[data-theme="dark"] .c-safety      { background: #2c1f1a; } html[data-theme="dark"] .c-safety .n-tag      { border-color: #5a4035; color: #d09877; }
html[data-theme="dark"] .c-wanted      { background: #2a2415; } html[data-theme="dark"] .c-wanted .n-tag      { border-color: #56492a; color: #cdab5e; }
html[data-theme="dark"] .c-recommended { background: #1c2630; } html[data-theme="dark"] .c-recommended .n-tag { border-color: #3a505f; color: #8eb0c6; }
html[data-theme="dark"] .c-free        { background: #28211a; } html[data-theme="dark"] .c-free .n-tag        { border-color: #524334; color: #c6a983; }

/* ─── Board card — a plain notice as a white card with a category strip;
       post-its (.note) carry the full colour, cards just a strip of it ─── */
.bcard {
  display: block; position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--rc);
  padding: 16px 18px 14px 22px;
}
.bcard .n-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.bcard .ndate { font-size: 22px; font-weight: 300; line-height: 1; }
.bcard .ndate span { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.bcard h4 { font-size: 17px; font-weight: 400; margin: 8px 0 6px; }
.bcard p { font-size: 15px; color: var(--grey); line-height: 1.6; }
.bcard .ack { margin-top: 10px; }

/* ─── Link card — a notice that opens a page (article, guide, list) ─── */
.linkcard {
  display: block; position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--rc);
  padding: 16px 18px 14px 22px; text-decoration: none; color: var(--black);
  transition: border-color 0.25s, box-shadow 0.25s;
}

/* the category strip — cards, link cards and striped tiles wear the colour as an edge */
.tile.striped { position: relative; overflow: hidden; }
.tile.striped::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--black); }
.bcard::before, .linkcard::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: var(--muted);
}
.bcard.c-community::before,   .linkcard.c-community::before   { background: #8a9a62; }
.bcard.c-safety::before,      .linkcard.c-safety::before      { background: #c06a45; }
.bcard.c-wanted::before,      .linkcard.c-wanted::before      { background: #c29a45; }
.bcard.c-recommended::before, .linkcard.c-recommended::before { background: #6b8da2; }
.bcard.c-free::before,        .linkcard.c-free::before        { background: #a98a68; }
.bcard.c-story::before,       .linkcard.c-story::before       { background: var(--black); }
/* cards stay white even when a category class is set — only the strip carries it */
.bcard[class*="c-"], .linkcard[class*="c-"] { background: var(--surface); }
.linkcard:hover { border-color: var(--black); box-shadow: 0 4px 14px var(--shadow); }
.linkcard .lc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 8px; }
.linkcard .lc-arrow { font-size: 14px; color: var(--muted); transition: color 0.25s; }
.linkcard:hover .lc-arrow { color: var(--black); }
.linkcard h4 { font-size: 17px; font-weight: 400; line-height: 1.3; margin-bottom: 4px; }
.linkcard p { font-size: 15px; color: var(--grey); line-height: 1.6; }
.linkcard .lc-act { display: inline-block; margin-top: 10px; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--black); border-bottom: 1px solid var(--hairline); padding-bottom: 2px; }

/* ─── The board — one mixed feed of notices: photo cards, post-its, link cards ─── */
.board { columns: 3 250px; column-gap: 18px; }
.board > * { break-inside: avoid; margin-bottom: 18px; }
.board .note { margin-bottom: 18px; }
.board .ev-card { flex: none; width: 100%; }
/* photo notices stay chromeless — no coloured panel behind the text.
   the category reads as a strip down the LEFT EDGE OF THE PHOTO only */
.board .ev-card[class*="c-"] { background: transparent; }
.board .ev-card .ev-img { border-radius: var(--rc); }
.board .ev-card[class*="c-"] .ev-img::after {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  border-radius: var(--rc) 0 0 var(--rc); background: var(--muted); z-index: 2;
}
.board .ev-card.c-community .ev-img::after   { background: #8a9a62; }
.board .ev-card.c-safety .ev-img::after      { background: #c06a45; }
.board .ev-card.c-wanted .ev-img::after      { background: #c29a45; }
.board .ev-card.c-recommended .ev-img::after { background: #6b8da2; }
.board .ev-card.c-free .ev-img::after        { background: #a98a68; }
.board .ev-card.c-story .ev-img::after       { background: var(--black); }
.note::before { content: ''; position: absolute; top: 8px; left: 50%; width: 5px; height: 5px; border-radius: 50%; background: var(--muted); transform: translateX(-50%); }
.note .ndate { font-size: 22px; font-weight: 300; line-height: 1; }
.note .ndate span { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.note h4 { font-size: 17px; font-weight: 400; margin: 8px 0 6px; }
.note p { font-size: 15px; color: var(--grey); line-height: 1.6; }
.note .ack { margin-top: 10px; }
.ledger { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.ledger th { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); font-weight: 400; text-align: left; padding: 0 16px 12px 0; border-bottom: 1px solid var(--black); }
.ledger td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--hairline); font-size: 16px; vertical-align: top; }
.ledger td:first-child { color: var(--muted); font-size: 13px; letter-spacing: 0.08em; white-space: nowrap; }
/* plain variant: no entry-number column — the first cell is the item itself */
.ledger.plain td:first-child { color: var(--black); font-size: 16px; letter-spacing: 0; white-space: normal; }
.ledger-wrap { overflow-x: auto; }
.ledger-wrap .ledger { min-width: 440px; }

/* ─── Dashboard tiles (11) ─── */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 24px; }
.tile {
  background: var(--surface); padding: 36px 32px; min-height: 200px;
  display: flex; flex-direction: column; text-decoration: none; color: var(--black);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s;
}
.tile:hover { transform: translateY(-3px); box-shadow: 0 12px 32px var(--shadow); }
.tile .t-cat { font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 20px; }
.tile h4, .tile h2 { font-size: 21px; font-weight: 400; margin-bottom: 10px; }
.tile p { font-size: 16px; color: var(--grey); line-height: 1.65; }
.tile .t-foot { margin-top: auto; padding-top: 20px; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tile .t-foot a { color: var(--black); text-decoration: none; transition: opacity 0.25s; }
.tile .t-foot a:hover { opacity: 0.5; }

/* ─── Forms & navigation (12) ─── */
.input-light {
  width: 100%; max-width: 360px; font-family: var(--font); font-size: 15px; font-weight: 400;
  padding: 12px 14px; border: 1px solid var(--hairline); background: var(--surface); color: var(--black);
  outline: none; transition: border-color 0.25s;
}
.input-light:focus { border-color: var(--black); }
.seg { display: inline-flex; border-bottom: 1px solid var(--hairline); }
.seg button {
  font-family: var(--font); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  background: none; border: none; cursor: pointer; color: var(--grey);
  padding: 13px 20px 11px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.seg button.on { color: var(--black); border-bottom-color: var(--black); }
.bn-item {
  flex: 0 1 200px; display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-family: var(--font); font-size: 11.5px; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: none; border: none; cursor: pointer; color: var(--muted);
  padding: 11px 0 9px; transition: color 0.25s;
}
.bn-item:hover, .bn-item.on { color: var(--black); }
.bn-item svg { display: block; }
.toast { display: inline-block; background: var(--black); color: var(--light); font-size: 12.5px; letter-spacing: 0.04em; padding: 12px 22px; }

/* ─── Component responsive rules ─── */
@media (max-width: 640px) {
  .ev-row { grid-template-columns: 60px 1fr; }
  .ev-row .rsvp { grid-column: 2; justify-self: start; }
  .tiles { gap: 14px; }
  .tile { padding: 26px 22px; min-height: 0; }
  .stacks { gap: 18px; }
  .t-h2 { font-size: 22px; }
}

/* ─────────────────────────────────────────────────────────────────────
   Site shell (14) — the public website's shared chrome and patterns.
   Used by index/about/neighbourhood (which also load site-chrome.js for
   the footer + contact band). The portal loads this too but overrides
   header details locally and hides the shell entirely in app mode.
   ───────────────────────────────────────────────────────────────────── */

/* fixed site header — wordmark right, nav left; white over imagery via a
   top scrim, frosted bar once scrolled (.shrunk), flips light over dark
   sections (.over-dark), goes quiet while the menu is open */
header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 28px var(--pad); padding-right: 24px;
  transition: background 0.35s, box-shadow 0.35s, padding 0.35s;
}
header::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(8,7,6,0.55), rgba(8,7,6,0));
  height: 160%; opacity: 1; transition: opacity 0.35s; pointer-events: none;
}
header .wordmark {
  order: 2; margin-left: auto; font-size: clamp(26px, 3vw, 40px);
  font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase;
  color: #fff; text-decoration: none; text-align: right; line-height: 1.1;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
  transition: font-size 0.45s cubic-bezier(0.22, 1, 0.36, 1), color 0.35s, text-shadow 0.35s;
}
header.shrunk .wordmark { font-size: 13px; }
header nav { order: 1; display: flex; align-items: center; gap: 32px; }
header nav a {
  font-size: 12px; font-weight: 500; letter-spacing: 0.14em;
  text-transform: uppercase; color: #fff; text-decoration: none;
  text-shadow: 0 1px 8px rgba(0,0,0,0.45);
  transition: opacity 0.25s, color 0.35s, text-shadow 0.35s;
}
header nav a:hover { opacity: 0.6; }
header nav a.active { border-bottom: 1px solid currentColor; padding-bottom: 2px; }
header nav a.btn-res { border: 1px solid rgba(255,255,255,0.85); padding: 8px 18px; border-radius: var(--rc); }
header nav a.btn-res:hover { background: #fff; color: #000; opacity: 1; }
header::after {
  content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: -64px;
  z-index: -1; pointer-events: none; background: rgba(255,255,255,0.06);
  -webkit-backdrop-filter: blur(7px) saturate(1.3); backdrop-filter: blur(7px) saturate(1.3);
  -webkit-mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.2) 78%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 30%, rgba(0,0,0,0.55) 55%, rgba(0,0,0,0.2) 78%, transparent 100%);
  opacity: 0; transition: opacity 0.35s, background 0.35s;
}
header.shrunk { padding-top: 16px; padding-bottom: 16px; }
header.shrunk::after { opacity: 1; }
header.shrunk::before { opacity: 0; }
header.shrunk .wordmark, header.shrunk nav a { color: var(--black); text-shadow: none; }
header.shrunk nav a.btn-res { border-color: rgba(0,0,0,0.75); }
header.shrunk nav a.btn-res:hover { background: var(--black); color: #fff; }
header.shrunk.over-dark::after { background: rgba(10,9,7,0.35); }
header.shrunk.over-dark .wordmark, header.shrunk.over-dark nav a { color: #fff; }
header.shrunk.over-dark nav a.btn-res { border-color: rgba(255,255,255,0.85); }
header.shrunk.over-dark nav a.btn-res:hover { background: #fff; color: #000; }

/* burger + full-screen overlay menu */
.burger {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  width: 28px; height: 28px; padding: 0;
  background: none; border: 0; cursor: pointer;
  color: #fff; transition: color 0.35s;
}
.burger span {
  display: block; height: 1.5px; width: 100%;
  background: currentColor;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
header.shrunk .burger { color: var(--black); }
header.shrunk.over-dark .burger { color: #fff; }
body.menu-open .burger span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
.menu {
  position: fixed; inset: 0; z-index: 200;
  background: var(--light);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--pad);
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s ease, visibility 0.45s;
}
body.menu-open .menu { opacity: 1; visibility: visible; }
body.menu-open { overflow: hidden; }
.menu .m-link {
  display: block; width: fit-content;
  font-size: clamp(32px, 5vw, 56px); font-weight: 300;
  color: var(--black); text-decoration: none;
  padding: 8px 0; line-height: 1.15;
  transform: translateY(12px); opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease, color 0.25s;
}
body.menu-open .menu .m-link { transform: translateY(0); opacity: 1; }
.menu .m-link:nth-child(2) { transition-delay: 0.05s; }
.menu .m-link:nth-child(3) { transition-delay: 0.1s; }
.menu .m-link:nth-child(4) { transition-delay: 0.15s; }
.menu .m-link:nth-child(5) { transition-delay: 0.2s; }
.menu .m-link:hover { color: #a8a49c; }
.menu .m-meta {
  position: absolute; bottom: 40px; left: var(--pad);
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grey);
}
body.menu-open header { z-index: 300; }
body.menu-open header::before, body.menu-open header::after { opacity: 0; }
body.menu-open header .wordmark,
body.menu-open header nav a,
body.menu-open .burger { color: var(--black); text-shadow: none; }
body.menu-open header nav a.btn-res { border-color: rgba(0,0,0,0.75); }
body.menu-open header nav a.btn-res:hover { background: var(--black); color: #fff; }

/* hero slideshow mechanics — pages supply the slide images */
.hero-slide {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 40%;
  opacity: 0; transition: opacity 2.4s ease-in-out;
  animation: ssw-hero-drift 22s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
.hero-slide.on { opacity: 1; }
@keyframes ssw-hero-drift {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

/* page banner — static full-bleed image with caption, for inner pages */
.page-banner {
  height: 64vh; min-height: 420px; position: relative; overflow: hidden;
  display: flex; align-items: flex-end; background: #14110d;
}
.page-banner .img {
  position: absolute; inset: 0;
  background-size: cover; background-position: center 45%;
  animation: ssw-hero-drift 26s ease-in-out infinite alternate;
}
.page-banner .cap { position: relative; z-index: 2; padding: 0 var(--pad) 48px; color: #fff; }
.page-banner .cap .kicker { color: rgba(255,255,255,0.6); margin-bottom: 14px; }
.page-banner h1 { font-size: clamp(30px, 4vw, 56px); font-weight: 300; line-height: 1.08; max-width: 16em; }

/* section head row — small caps title left, action or meta right, hairline */
.head-row {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 28px; margin-bottom: 48px;
  border-bottom: 1px solid var(--hairline);
}
.head-row h3 { font-size: 12px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; }
.head-row a {
  font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grey); text-decoration: none; transition: color 0.25s;
}
.head-row a:hover { color: var(--black); }
.head-row .meta { font-size: 13px; font-weight: 300; color: var(--grey); }

/* photo card — image-led link card for places and guides (4/5 crop,
   label on the image on desktop, caption row beneath) */
.photo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px clamp(24px, 3vw, 48px); }
.photo-card { text-decoration: none; color: var(--black); display: block; }
.photo-card .img {
  aspect-ratio: 4/5; overflow: hidden; position: relative;
  background: var(--light); margin-bottom: 18px; border-radius: var(--rc);
}
.photo-card .img > div {
  position: absolute; inset: 0;
  background-size: cover; background-position: center; filter: saturate(0.85);
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}
.photo-card:hover .img > div { transform: scale(1.045); }
.photo-card .img::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%);
}
.photo-card .img .label {
  position: absolute; left: 24px; bottom: 22px; z-index: 2;
  color: rgba(255,255,255,0.9);
  font-size: 26px; font-weight: 300; line-height: 1.2; letter-spacing: 0.01em;
}
.photo-card .row { display: flex; justify-content: space-between; align-items: baseline; }
.photo-card .row .name { font-size: 15px; font-weight: 400; }
.photo-card .row .meta { font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--grey); }
.photo-card .desc {
  margin-top: 6px; font-size: 13px; font-weight: 300;
  color: var(--grey); line-height: 1.6; max-width: 34em;
}

/* editorial two-column — label/figure one side, reading body the other */
.editorial {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 100px);
  padding: clamp(80px, 12vh, 160px) var(--pad);
  align-items: start;
}
.editorial.wide-body { grid-template-columns: 0.8fr 1.2fr; }
.editorial.alt { background: var(--light); }
.editorial .col-label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--grey); }
.editorial h2 { font-size: clamp(24px, 2.6vw, 36px); font-weight: 300; line-height: 1.3; margin-bottom: 28px; }
.editorial p { font-size: 16px; font-weight: 300; color: #3a3a3a; line-height: 1.8; margin-bottom: 18px; max-width: 38em; }
html[data-theme="dark"] .editorial p { color: var(--grey); }

/* archive figure — engraving with small-caps caption */
.archive { margin: clamp(32px, 5vw, 56px) 0 0; max-width: 340px; }
.archive img { display: block; width: 100%; height: auto; border-radius: var(--rc); }
.archive figcaption {
  margin-top: 12px; font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--grey); line-height: 1.7;
}

/* facts grid — black-rule stat blocks */
.facts-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px clamp(24px, 3vw, 56px); }
.fact { border-top: 1px solid var(--black); padding-top: 18px; }
.fact dt { font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--grey); margin-bottom: 10px; }
.fact dd { font-size: clamp(22px, 2.4vw, 30px); font-weight: 300; line-height: 1.2; }
.fact dd small { display: block; font-size: 14px; color: var(--grey); margin-top: 8px; line-height: 1.5; }

/* site shell responsive */
@media (max-width: 1024px) {
  header nav { gap: 20px; }
  header nav a { font-size: 11px; letter-spacing: 0.1em; }
}
@media (max-width: 900px) {
  header { padding: 20px 20px 0 20px; }
  header nav { flex-wrap: wrap; gap: 14px 18px; max-width: 55%; }
  header nav a { font-size: 10px; }
  header nav a:not(.keep) { display: none; }
  header .wordmark { font-size: 24px; }
  header.shrunk .wordmark { font-size: 12px; }
  .photo-cards { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .photo-card .img { margin-bottom: 12px; }
  .photo-card .img .label { display: none; } /* name repeats just below the photo */
  .photo-card .row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .photo-card .desc { display: none; }
  .editorial, .editorial.wide-body { grid-template-columns: 1fr; }
  .facts-grid { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 760px) {
  .archive { max-width: 200px; }
}