/* ============================================================
   MemberReel — Editorial Civic Gazette
   Display: Cormorant Garamond (platform) · Newsreader (hero only)
   Body:    Manrope (clean characterful sans)
   Mono:    JetBrains Mono (numerals, captions, kickers)
   Palette: warm cream + oxblood + brick red + ink + sage
   Aesthetic: local-business gazette × modern editorial
   ============================================================ */

:root{
  /* paper & ink — warm paper, navy ink */
  --paper:    #f3efe7;
  --paper-2:  #e9e3d6;
  --paper-3:  #d9d1c0;
  --paper-shadow: #c6bca7;
  --ink:      #14233b;
  --ink-2:    #45515f;
  --ink-3:    #7c7c79;
  --hairline: #c9bfab;
  --hairline-2:#b2a78d;

  /* brand — navy primary + warm clay accent */
  --oxblood:  #173458;   /* primary, civic navy */
  --oxblood-2:#21477a;
  --oxblood-3:#3a6396;
  --brick:    #c05f3c;   /* warm clay accent */
  --brick-2:  #9c4727;
  --sage:     #5f6a47;   /* muted olive (sparing) */
  --sage-2:   #46502f;
  --gold:     #a8772f;   /* almost never used */
  --parchment:#ece1c6;   /* highlight panel */
  --verified: #4f7a48;

  /* type — refined editorial */
  --serif: 'Cormorant Garamond', 'EB Garamond', 'Hoefler Text', Georgia, serif;
  --serif-hero: 'Newsreader', 'Hoefler Text', Georgia, serif;
  --sans:  'Manrope', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono:  'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* shadow & radius (editorial is mostly flat) */
  --shadow-paper: 0 1px 0 var(--hairline), 0 24px 60px -36px rgba(15,29,49,.4);
  --shadow-card:  0 1px 2px rgba(15,29,49,.06);

  --max:   1280px;
  --gutter: 32px;
}

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

body{
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "ss02", "kern";
  position: relative;
}

/* cool paper grain — subtle SVG noise */
body::before{
  content:""; position: fixed; inset: 0; z-index: 0;
  pointer-events: none; opacity: .5;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.40 0 0 0 0 0.32 0 0 0 0.06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 200px 200px;
}
body > *{position: relative; z-index: 1;}

img,svg{display:block; max-width: 100%;}
a{color: var(--oxblood); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--hairline);}
a:hover{color: var(--brick); text-decoration-color: var(--brick);}

::selection{background: var(--parchment); color: var(--ink);}

/* ============================================================
   Typography
   ============================================================ */

h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: 400;
  font-style: normal;
  color: var(--ink);
  margin: 0;
  letter-spacing: -.012em;
  line-height: 1.04;
  text-wrap: balance;
}
h1{
  font-size: clamp(34px, 4.2vw, 60px);
  font-weight: 300;
  letter-spacing: -.022em;
  line-height: .98;
}
h1 em, h2 em, h3 em{ font-style: italic; color: var(--oxblood); font-weight: 400; }
h2{ font-size: clamp(25px, 3vw, 42px); font-weight: 300; letter-spacing: -.018em;}
h3{ font-size: clamp(23px, 2.4vw, 34px); font-weight: 400;}
h4{ font-size: 24px; line-height: 1.15; font-weight: 500;}

/* kicker — like newspaper section labels */
.kicker{
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--oxblood);
  display: inline-flex; align-items: center; gap: 12px;
}
.kicker.muted{ color: var(--ink-3); }
.kicker.brick{ color: var(--brick); }

/* horizontal hairline through kicker labels */
.kicker .rule{
  display: inline-block; flex: 0 0 40px; height: 1px;
  background: currentColor; opacity: .5;
}

/* lede — body lede with optional drop cap */
.lede{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.35;
  color: var(--ink);
  max-width: 36ch;
  text-wrap: pretty;
}
.lede.sans{ font-family: var(--sans); font-style: normal; font-weight: 400; font-size: 17px; line-height: 1.6; color: var(--ink-2); }

/* drop cap */
.dropcap::first-letter{
  font-family: var(--serif);
  font-weight: 400;
  font-size: 5.4em;
  float: left;
  line-height: .82;
  padding: 10px 14px 0 0;
  color: var(--oxblood);
}

.small{ font-size: 13.5px; color: var(--ink-2); }
.mono{ font-family: var(--mono); font-size: 12px; letter-spacing: .04em; }
.tabular{ font-variant-numeric: tabular-nums; }
.italic{ font-family: var(--serif); font-style: italic; }
.uppercase{ text-transform: uppercase; letter-spacing: .14em; font-weight: 500; font-size: 11px; font-family: var(--mono); color: var(--ink-2); }

/* ============================================================
   Layout
   ============================================================ */

.container{ max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.section{ padding: 96px 0; position: relative; }
.section.tight{ padding: 56px 0; }
.section.loose{ padding: 128px 0; }
@media (max-width: 980px){ .section{ padding: 64px 0; } }

/* Editorial asymmetric grids */
.grid{ display: grid; gap: 32px; }
.grid-2{ grid-template-columns: repeat(2, 1fr); }
.grid-3{ grid-template-columns: repeat(3, 1fr); }
.grid-4{ grid-template-columns: repeat(4, 1fr); }
.grid-asymm{ grid-template-columns: 5fr 7fr; }
.grid-asymm-r{ grid-template-columns: 7fr 5fr; }
.grid-narrow-wide{ grid-template-columns: 3fr 9fr; }
.grid-wide-narrow{ grid-template-columns: 9fr 3fr; }
@media (max-width:980px){
  .grid-4, .grid-3, .grid-2,
  .grid-asymm, .grid-asymm-r,
  .grid-narrow-wide, .grid-wide-narrow{ grid-template-columns: 1fr; }
}

.row{ display: flex; gap: 16px; }
.col{ display: flex; flex-direction: column; }
.wrap{ flex-wrap: wrap; }
.center{ display: flex; align-items: center; justify-content: center; }
.between{ display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.gap-4{gap:4px;}.gap-6{gap:6px;}.gap-8{gap:8px;}.gap-12{gap:12px;}.gap-16{gap:16px;}
.gap-20{gap:20px;}.gap-24{gap:24px;}.gap-32{gap:32px;}.gap-48{gap:48px;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.mt-8{margin-top:8px;}.mt-12{margin-top:12px;}.mt-16{margin-top:16px;}
.mt-24{margin-top:24px;}.mt-32{margin-top:32px;}.mt-48{margin-top:48px;}
.mb-8{margin-bottom:8px;}.mb-12{margin-bottom:12px;}.mb-16{margin-bottom:16px;}
.mb-24{margin-bottom:24px;}.mb-32{margin-bottom:32px;}.mb-48{margin-bottom:48px;}
.maxw-560{max-width:560px;}.maxw-640{max-width:640px;}.maxw-760{max-width:760px;}

/* Rules — newspaper-style double / single */
.rule{ height: 1px; background: var(--hairline); border: 0; margin: 0; }
.rule-2{ height: 5px; border: 0; background: transparent; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.rule-thick{ height: 3px; background: var(--ink); border: 0; }
.rule-dotted{ border: 0; border-top: 1px dotted var(--hairline-2); }

/* Surfaces */
.surface-ink{ background: var(--ink); color: var(--paper); }
.surface-ink h1,.surface-ink h2,.surface-ink h3,.surface-ink h4{ color: var(--paper); }
.surface-ink h1 em,.surface-ink h2 em{ color: var(--brick); }
.surface-ink .kicker{ color: var(--paper-3); }
.surface-ink .lede{ color: var(--paper-2); }
.surface-ink .small,.surface-ink .uppercase{ color: var(--paper-3); }
.surface-ink a{ color: var(--paper); }

.surface-oxblood{ background: var(--oxblood); color: var(--paper); }
.surface-oxblood h1,.surface-oxblood h2,.surface-oxblood h3,.surface-oxblood h4{ color: var(--paper); }
.surface-oxblood h2 em{ color: var(--parchment); }
.surface-oxblood .kicker{ color: var(--parchment); }
.surface-oxblood .lede{ color: var(--paper-2); }

.surface-parchment{ background: var(--parchment); }
.surface-paper-2{ background: var(--paper-2); }

/* ============================================================
   Masthead / Top nav
   ============================================================ */

.masthead{
  border-bottom: 1px solid var(--ink);
  background: var(--paper);
  position: relative;
}
/* dateline strip */
.dateline{
  border-bottom: 1px solid var(--hairline);
  padding: 6px 0;
  font-family: var(--mono);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .18em;
  color: var(--ink-2);
}
.dateline-inner{
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.dateline .sep{ opacity: .4; }

/* main nav row */
.topnav{
  max-width: var(--max); margin: 0 auto; padding: 18px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
}
.brand-mark{
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--ink);
}
.brand-mark .seal{
  width: 42px; height: 42px; flex-shrink: 0;
}
.brand-mark .wordmark{
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: -.018em;
  line-height: 1;
}
.brand-mark .wordmark em{ font-style: italic; color: var(--oxblood); }

.navlinks{ display: flex; gap: 28px; }
.navlinks a{
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: var(--ink-2);
  position: relative;
  padding: 6px 0;
  letter-spacing: -.005em;
}
.navlinks a:hover{ color: var(--ink); }
.navlinks a.on{ color: var(--oxblood); }
.navlinks a.on::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px;
  height: 2px; background: var(--oxblood);
}

/* ============================================================
   Buttons (printed-poster style)
   ============================================================ */

.btn{
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--sans); font-weight: 600;
  font-size: 14px;
  letter-spacing: -.005em;
  padding: 12px 20px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  transition: transform .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
  white-space: nowrap;
}
.btn:hover{ transform: translateY(-1px); }
.btn .arrow{ display: inline-block; transition: transform .2s ease; }
.btn:hover .arrow{ transform: translateX(3px); }
.btn-primary{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn-primary:hover{ background: var(--oxblood); border-color: var(--oxblood); color: var(--paper);}
.btn-accent{ background: var(--brick); color: var(--paper); border-color: var(--brick); }
.btn-accent:hover{ background: var(--brick-2); border-color: var(--brick-2); color: var(--paper);}
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover{ background: var(--ink); color: var(--paper); }
.btn-inv{ background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-inv:hover{ background: var(--parchment); border-color: var(--parchment); color: var(--ink); }
.btn-sm{ padding: 8px 14px; font-size: 13px; }
.btn-lg{ padding: 16px 28px; font-size: 16px; }
.btn-link{
  background: transparent; padding: 0; border: 0;
  color: var(--oxblood); font-weight: 600;
  border-bottom: 1px solid var(--oxblood);
  padding-bottom: 2px;
}
.btn-link:hover{ color: var(--brick); border-color: var(--brick); }

/* ============================================================
   Tags / pills / stamps
   ============================================================ */

.tag{
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid var(--ink);
  background: transparent;
  color: var(--ink);
  border-radius: 0;
}
.tag.solid{ background: var(--ink); color: var(--paper); }
.tag.brick{ border-color: var(--brick); color: var(--brick); }
.tag.brick.solid{ background: var(--brick); color: var(--paper); }
.tag.oxblood{ border-color: var(--oxblood); color: var(--oxblood); }
.tag.verified{ border-color: var(--verified); color: var(--verified); }
.tag.verified::before{ content: "✓"; }
.tag.featured{ background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tag.featured::before{ content: "★"; }

/* circular stamp/seal — used for highlights */
.stamp{
  width: 92px; height: 92px;
  border: 1.5px solid var(--oxblood);
  border-radius: 50%;
  color: var(--oxblood);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 13px;
  line-height: 1.05;
  text-align: center;
  padding: 8px;
  text-transform: uppercase;
  letter-spacing: .04em;
  transform: rotate(-6deg);
  flex-shrink: 0;
  position: relative;
}
.stamp::before, .stamp::after{
  content: ""; position: absolute; inset: 4px;
  border: 1px solid var(--oxblood);
  border-radius: 50%;
  opacity: .4;
}
.stamp.brick{ border-color: var(--brick); color: var(--brick); }
.stamp.brick::before,.stamp.brick::after{ border-color: var(--brick); }
.stamp.lg{ width: 132px; height: 132px; font-size: 15px; }
.stamp .num{
  font-family: var(--serif);
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  line-height: 1;
  display: block;
}

/* count dot */
.count-dot{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--brick); color: var(--paper);
  font-size: 10px; font-weight: 700; border-radius: 99px;
  font-family: var(--mono);
}

/* ============================================================
   Numbered section markers
   ============================================================ */

.section-marker{
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 32px;
  align-items: baseline;
  border-top: 1px solid var(--ink);
  padding-top: 16px;
  margin-bottom: 56px;
}
.section-marker .num{
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(48px, 5.4vw, 88px);
  line-height: .82;
  color: var(--oxblood);
  letter-spacing: -.02em;
}
.section-marker .head h2{ margin-bottom: 12px; }
.section-marker .head .kicker{ display: block; margin-bottom: 10px;}
@media (max-width: 760px){
  .section-marker{ grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   Hero (editorial)
   ============================================================ */

.hero{
  position: relative;
  padding: 56px 0 96px;
  overflow: hidden;
  --serif: var(--serif-hero);
}
.hero h1{ font-weight: 400; }
.hero-grid{
  display: grid;
  grid-template-columns: 6fr 6fr;
  gap: 48px;
  align-items: flex-end;
}
@media (max-width: 1040px){ .hero-grid{ grid-template-columns: 1fr; gap: 48px; align-items: flex-start;} }

.hero h1{ margin: 0; }
.hero .lede{ margin-top: 32px; max-width: 38ch; }
.hero-ctas{ margin-top: 36px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;}
.hero-meta{ margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--hairline); display: flex; gap: 20px; align-items: center;}
.hero-meta p{ font-family: var(--sans); font-size: 13.5px; color: var(--ink-2); margin: 0; max-width: 280px;}

/* Hero card collage — staggered editorial style */
.hero-collage{
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 18px;
  gap: 16px;
  position: relative;
}
.hero-collage .mcard{ grid-column: span 3; grid-row: span 16; }
.hero-collage .mcard.tall{ grid-row: span 18; }
.hero-collage .mcard.short{ grid-row: span 14; }
.hero-collage .mcard:nth-child(1){ grid-row: 1 / span 17; }
.hero-collage .mcard:nth-child(2){ grid-row: 3 / span 17; }
.hero-collage .mcard:nth-child(3){ grid-row: 18 / span 14; }
.hero-collage .mcard:nth-child(4){ grid-row: 20 / span 16; }

/* ============================================================
   Member cards — editorial print style
   ============================================================ */

.mcard{
  background: var(--paper);
  border: 1px solid var(--ink);
  position: relative;
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .25s ease;
}
.mcard:hover{ transform: translateY(-2px); }
.mcard .thumb{
  position: relative;
  aspect-ratio: 4/3;
  border-bottom: 1px solid var(--ink);
  overflow: hidden;
}
.mcard .thumb-ph{
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, var(--oxblood) 0%, var(--oxblood-2) 100%);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.mcard .thumb-ph::before{
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(243,236,224,.07) 0 12px, transparent 12px 24px);
}
.mcard .thumb-ph .glyph{
  position: relative;
  font-family: var(--serif);
  font-style: italic;
  font-size: 19px;
  color: var(--paper);
  letter-spacing: -.01em;
  padding: 0 16px;
  z-index: 1;
}
.mcard .thumb-ph.ink{ background: linear-gradient(135deg, var(--ink) 0%, #1b2c44 100%); }
.mcard .thumb-ph.parchment{ background: linear-gradient(135deg, var(--parchment), var(--paper-3));}
.mcard .thumb-ph.parchment .glyph{ color: var(--oxblood); }
.mcard .thumb-ph.brick{ background: linear-gradient(135deg, var(--brick), var(--brick-2));}
.mcard .thumb-ph.sage{ background: linear-gradient(135deg, var(--sage), var(--sage-2));}

.mcard .play{
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--paper); display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--ink);
}
.mcard .play svg{ width: 16px; height: 16px; fill: var(--ink); margin-left: 2px; }
.mcard:hover .play{ background: var(--brick); border-color: var(--brick); }
.mcard:hover .play svg{ fill: var(--paper); }

.mcard .duration{
  position: absolute; right: 8px; bottom: 8px;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--paper); background: rgba(15,29,49,.75);
  padding: 2px 7px;
}
.mcard .verified-badge{
  position: absolute; left: 8px; top: 8px;
  font-family: var(--mono);
  font-size: 9.5px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 600;
  padding: 3px 7px;
  background: var(--paper); color: var(--verified);
  border: 1px solid var(--verified);
}
.mcard .body{
  padding: 16px;
  display: flex; flex-direction: column; gap: 6px;
  border-top: 0;
}
.mcard .biz{
  font-family: var(--serif);
  font-size: 22px;
  line-height: 1.05;
  color: var(--ink);
  letter-spacing: -.015em;
}
.mcard .meta{
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2);
}
.mcard .meta .owner{ font-family: var(--serif); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink-3);}

/* ============================================================
   Promise banner — like a newspaper banner
   ============================================================ */

.banner{
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 36px 0;
  background: var(--paper);
  position: relative;
}
.banner-inner{
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter);
  display: flex; gap: 36px; justify-content: center; align-items: center;
  font-family: var(--serif); font-style: italic;
  font-weight: 400;
  font-size: clamp(28px, 3.8vw, 52px);
  flex-wrap: wrap;
  text-align: center;
  letter-spacing: -.01em;
}
.banner-inner .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--brick); flex-shrink: 0;}
.banner-inner b{ font-style: normal; font-weight: 400; color: var(--oxblood); }

/* ============================================================
   Browser-window / partner mock
   ============================================================ */

.window{
  background: var(--paper);
  border: 1px solid var(--ink);
  overflow: hidden;
  box-shadow: var(--shadow-paper);
}
.window-bar{
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--ink);
}
.window-bar .traffic{ display: flex; gap: 6px; }
.window-bar .traffic span{ width: 10px; height: 10px; border-radius: 50%; background: var(--paper-3);}
.window-bar .traffic span:nth-child(1){ background: var(--brick); }
.window-bar .traffic span:nth-child(2){ background: var(--gold); }
.window-bar .traffic span:nth-child(3){ background: var(--sage); }
.window-bar .url{
  flex: 1;
  background: var(--paper);
  border: 1px solid var(--hairline);
  padding: 5px 14px;
  font-family: var(--mono); font-size: 12px;
  color: var(--ink-2);
  text-align: center;
  border-radius: 0;
}
.window-bar .url::before{ content: "⌂  "; color: var(--ink-3); }

/* partner page mock body */
.partner-mock{ padding: 32px 36px; background: var(--paper); }
.partner-head{
  display: flex; justify-content: space-between; align-items: flex-end; gap: 24px;
  border-bottom: 2px solid var(--ink); padding-bottom: 16px; flex-wrap: wrap;
}
.partner-head .org-line{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2);
}
.partner-head h3{ font-size: 38px; margin-top: 6px;}
.partner-head .small{ font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--ink-3); }
.cat-filters{ display: flex; gap: 6px; flex-wrap: wrap; }

/* Spotlight — magazine-style feature block */
.spotlight{
  margin-top: 28px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  overflow: hidden;
}
.spotlight .thumb{
  position: relative;
  aspect-ratio: 5/4;
  min-height: 320px;
  background: linear-gradient(135deg, var(--oxblood), var(--brick-2));
  display: flex; align-items: center; justify-content: center;
}
.spotlight .thumb::before{
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(243,236,224,.05) 0 14px, transparent 14px 28px);
}
.spotlight .thumb .play{
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--paper); border: 1px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.spotlight .thumb .play svg{ width: 24px; height: 24px; fill: var(--ink); margin-left: 4px;}
.spotlight .thumb .glyph{
  position: absolute; bottom: 14px; left: 14px; right: 14px;
  text-align: left;
  font-family: var(--mono); font-size: 11px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--paper); opacity: .7;
}
.spotlight .body{
  padding: 36px;
  display: flex; flex-direction: column; gap: 16px;
  justify-content: center;
}
.spotlight .body h3{ font-size: 40px; color: var(--paper); margin-top: 6px;}
.spotlight .body p{ color: var(--paper-2); font-size: 16px; max-width: 36ch; margin: 0;}
.spotlight .body .actions{ display: flex; gap: 12px; margin-top: 6px; }
@media (max-width: 760px){ .spotlight{ grid-template-columns: 1fr; } }

/* Member grid inside mock */
.mock-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 32px;
}
@media (max-width: 980px){ .mock-grid{ grid-template-columns: repeat(2, 1fr); } }

/* Network board strip inside mock */
.board-strip{
  margin-top: 32px;
  border-top: 1px solid var(--ink);
  padding-top: 20px;
}
.post{
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 8px;
}
.post-head{ display: flex; justify-content: space-between; align-items: center;}
.post-cat{
  font-family: var(--mono); font-size: 10px;
  letter-spacing: .14em; text-transform: uppercase; font-weight: 700;
  padding: 3px 8px;
  border: 1px solid var(--ink);
  background: var(--paper);
}
.post-cat.offer{ background: var(--brick); color: var(--paper); border-color: var(--brick);}
.post-cat.need{ background: var(--ink); color: var(--paper); border-color: var(--ink);}
.post-cat.referral{ background: var(--sage); color: var(--paper); border-color: var(--sage);}
.post-cat.event{ background: var(--gold); color: var(--paper); border-color: var(--gold);}
.post .ts{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-3); }
.post .title{ font-family: var(--serif); font-size: 17px; line-height: 1.2; color: var(--ink);}
.post .who{ font-family: var(--mono); font-size: 10.5px; color: var(--ink-3); letter-spacing: .08em;}

/* ============================================================
   Feature blocks (the four)
   ============================================================ */

.feature{
  position: relative;
  padding: 32px 28px;
  background: var(--paper);
  border: 1px solid var(--ink);
  display: flex; flex-direction: column; gap: 14px;
  transition: background .25s ease;
}
.feature:hover{ background: var(--paper-2); }
.feature .featnum{
  font-family: var(--serif);
  font-style: italic;
  font-size: 64px;
  line-height: 1;
  color: var(--oxblood);
  position: absolute;
  top: 18px; right: 24px;
  opacity: .25;
}
.feature .kicker{ position: relative; z-index: 1; }
.feature h3{ font-size: 28px; max-width: 14ch; }
.feature p{ font-size: 15px; color: var(--ink-2); margin: 0; max-width: 32ch; }
.feature .tags{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.feature.private{
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.feature.private h3{ color: var(--paper); }
.feature.private p{ color: var(--paper-2); }
.feature.private .featnum{ color: var(--brick); opacity: .5; }
.feature.private .kicker{ color: var(--brick); }
.feature.private .tags .tag{ border-color: var(--paper-3); color: var(--paper-2); }
.feature.private .tags .tag.brick{ background: var(--brick); border-color: var(--brick); color: var(--paper);}
.feature.private:hover{ background: #14253c; }
.feature.private::after{
  content: "MEMBERS ONLY"; position: absolute; top: 18px; left: 28px;
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .22em; padding: 3px 8px;
  border: 1px solid var(--brick); color: var(--brick);
}
.feature.private .kicker{ margin-top: 28px; }

/* ============================================================
   Steps (3 steps, partner page)
   ============================================================ */

.step{
  position: relative;
  padding: 36px 28px 28px;
  background: var(--paper);
  border: 1px solid var(--ink);
  border-top: 4px solid var(--ink);
  display: flex; flex-direction: column; gap: 16px;
}
.step .stepnum{
  font-family: var(--serif);
  font-style: italic;
  font-size: 92px;
  line-height: .85;
  color: var(--oxblood);
  position: absolute;
  top: 18px; right: 24px;
  opacity: .35;
}
.step h3{ font-size: 28px; max-width: 14ch; }
.step p{ font-size: 15px; color: var(--ink-2); margin: 0;}
.step .tags{ display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto;}

/* ============================================================
   Timeline (24 hour)
   ============================================================ */

.timeline{
  position: relative;
  padding-left: 36px;
  border-left: 1px solid var(--ink);
}
.timeline .node{
  position: relative;
  padding: 0 0 32px 0;
}
.timeline .node:last-child{ padding-bottom: 0; }
.timeline .node::before{
  content: ""; position: absolute; left: -42px; top: 6px;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--ink);
}
.timeline .node.done::before{ background: var(--ink); }
.timeline .node.accent::before{ background: var(--brick); border-color: var(--brick); }
.timeline .hour{
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .2em; text-transform: uppercase; color: var(--brick);
  font-weight: 600;
}
.timeline h4{
  font-size: 24px;
  margin-top: 6px;
  color: var(--ink);
}
.timeline p{
  font-size: 14.5px; color: var(--ink-2); margin: 6px 0 0; max-width: 42ch;
}

/* ============================================================
   Receipt benefits
   ============================================================ */

.receipt{
  background: var(--paper);
  border: 1px solid var(--ink);
  overflow: hidden;
  position: relative;
}
.receipt::before, .receipt::after{
  content: ""; position: absolute; left: 0; right: 0; height: 8px;
  background:
    linear-gradient(135deg, transparent 33%, var(--paper) 33% 67%, transparent 67%) repeat-x;
  background-size: 12px 12px;
}
.receipt::before{ top: -4px; }
.receipt::after{ bottom: -4px; transform: rotate(180deg); }
.receipt-head{
  padding: 14px 22px;
  background: var(--ink);
  color: var(--paper);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .18em; text-transform: uppercase;
}
.receipt-body{ padding: 8px 6px; }
.receipt-row{
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 22px;
  border-bottom: 1px dotted var(--hairline-2);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.3;
}
.receipt-row:last-child{ border-bottom: none; }
.receipt-row .check{
  font-family: var(--mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: .04em;
  color: var(--verified);
  flex-shrink: 0;
  margin-left: 24px;
}
.receipt-row .check::before{ content: "✓ "; }

/* ============================================================
   Audience cards
   ============================================================ */

.audience{
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 14px;
  position: relative;
  transition: background .2s ease;
}
.audience:hover{ background: var(--paper-2); }
.audience .icon{
  width: 48px; height: 48px;
  border: 1px solid var(--ink);
  font-family: var(--serif); font-style: italic;
  font-size: 22px;
  color: var(--oxblood);
  display: flex; align-items: center; justify-content: center;
  background: var(--paper-2);
}
.audience h4{ font-size: 24px; line-height: 1.05;}
.audience p{ font-size: 14.5px; color: var(--ink-2); margin: 0;}
.audience ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);}
.audience ul li{ position: relative; padding-left: 14px; }
.audience ul li::before{ content: "—"; position: absolute; left: 0; color: var(--brick);}

/* ============================================================
   "Don't have to" cards
   ============================================================ */

.nope{
  background: transparent;
  border: 1px solid var(--ink);
  padding: 28px 24px;
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
  overflow: hidden;
}
.nope::before{
  content: ""; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, transparent 0 18px, rgba(15,29,49,.05) 18px 19px);
  pointer-events: none;
}
.nope > *{ position: relative; z-index: 1; }
.nope .xmark{
  font-family: var(--serif);
  font-size: 40px;
  line-height: 1;
  color: var(--brick);
  font-style: italic;
}
.nope h4{
  font-size: 22px;
  text-decoration: line-through;
  text-decoration-color: var(--brick);
  text-decoration-thickness: 2px;
  text-underline-offset: 0;
}
.nope p{ font-size: 14px; color: var(--ink-2); margin: 0;}

/* ============================================================
   Sales-ready Q&A
   ============================================================ */

.qa{
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 22px 26px;
  display: flex; flex-direction: column; gap: 8px;
}
.qa .q{
  font-family: var(--mono);
  font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-2);
  position: relative; padding-left: 22px;
}
.qa .q::before{ content: 'Q.'; position: absolute; left: 0; color: var(--brick); font-weight: 700;}
.qa .a{
  font-family: var(--serif);
  font-size: 24px; line-height: 1.15;
  color: var(--ink);
  position: relative; padding-left: 22px;
}
.qa .a::before{
  content: 'A.'; position: absolute; left: 0; top: 4px;
  font-family: var(--mono);
  font-size: 12px; letter-spacing: .14em;
  color: var(--brick); font-weight: 700;
}

/* ============================================================
   Pull quote
   ============================================================ */

.pull{
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: 28px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(24px, 2.6vw, 32px);
  line-height: 1.25;
  color: var(--ink);
  text-align: center;
  max-width: 30ch;
  margin: 0 auto;
}
.pull::before{ content: "“"; color: var(--brick); font-size: 1.4em; line-height: 0; vertical-align: -.3em;}
.pull::after{ content: "”"; color: var(--brick); font-size: 1.4em; line-height: 0; vertical-align: -.3em;}

/* ============================================================
   Diagram (your site → memberreel)
   ============================================================ */

.linkdiagram{
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 20px;
  align-items: center;
}
.linkdiagram .arrow-x{
  font-family: var(--serif); font-style: italic;
  font-size: 36px;
  color: var(--brick);
  position: relative;
  display: flex; align-items: center; justify-content: center;
}
.linkdiagram .arrow-x::before{
  content:""; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--ink);
}
.linkdiagram .arrow-x svg{
  width: 28px; height: 28px;
  position: relative; z-index: 1;
  background: var(--paper);
  padding: 4px;
}
.minisite{
  background: var(--paper);
  border: 1px solid var(--ink);
  overflow: hidden;
}
.minisite .head{
  padding: 6px 10px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--ink);
  display: flex; align-items: center; gap: 6px;
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-3);
}
.minisite .head .dot{ width: 6px; height: 6px; border-radius: 50%; background: var(--ink); opacity: .35;}
.minisite .body{ padding: 18px; min-height: 200px; }
.minisite .yourlogo{
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--paper-2); padding: 5px 12px; border: 1px solid var(--ink);
  font-family: var(--serif); font-size: 14px;
}
.minisite .yourlogo::before{ content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--oxblood);}
.minisite .stub{ height: 6px; background: var(--hairline); margin: 12px 0; }
.minisite .stub.short{ width: 50%; } .minisite .stub.mid{ width: 75%; }
.minisite .pblock{
  height: 70px; background: var(--paper-2); border: 1px dashed var(--hairline-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 12px 0;
}
.minisite .ctalink{
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--brick); color: var(--paper);
  padding: 7px 14px;
  font-size: 12.5px; font-weight: 600;
  font-family: var(--sans);
  margin-top: 4px;
}
.minisite.right .mini-grid{
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px;
}
.minisite.right .mini-thumb{
  aspect-ratio: 1; position: relative;
  background: linear-gradient(135deg, var(--oxblood), var(--oxblood-2));
}
.minisite.right .mini-thumb:nth-child(2n){ background: linear-gradient(135deg, var(--ink), #1b2c44);}
.minisite.right .mini-thumb:nth-child(3n){ background: linear-gradient(135deg, var(--brick), var(--brick-2));}

/* ============================================================
   Back-office app shell
   ============================================================ */

.app-window{
  background: var(--paper);
  border: 1px solid var(--ink);
  overflow: hidden;
  box-shadow: var(--shadow-paper);
}
.app-shell{
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  min-height: 560px;
}
@media (max-width: 1040px){ .app-shell{ grid-template-columns: 1fr; } }

.app-side{
  padding: 24px 20px;
  background: var(--paper-2);
  border-right: 1px solid var(--ink);
  display: flex; flex-direction: column; gap: 18px;
}
.app-side .county{
  padding: 12px 14px;
  background: var(--paper);
  border: 1px solid var(--ink);
}
.app-side .county h4{ font-size: 22px; margin: 0; }
.app-side .county .meta{ font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; color: var(--ink-2); margin-top: 4px; text-transform: uppercase;}

.app-side .grouplist{ display: flex; flex-direction: column; gap: 6px; }
.app-side .grouprow{
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px;
  border: 1px solid var(--hairline-2);
  background: var(--paper);
  font-family: var(--sans); font-size: 13px;
}
.app-side .grouprow.on{ background: var(--ink); color: var(--paper); border-color: var(--ink);}
.app-side .grouprow .ct{ font-family: var(--mono); font-size: 11px; color: var(--ink-3); letter-spacing: .04em;}
.app-side .grouprow.on .ct{ color: var(--paper-3); }

.app-main{
  padding: 22px 24px;
  background: var(--paper);
  display: flex; flex-direction: column; gap: 18px;
}
.app-tabs{
  display: flex; gap: 0;
  border-bottom: 1px solid var(--ink);
}
.app-tab{
  padding: 10px 16px;
  font-family: var(--sans); font-size: 13px;
  color: var(--ink-2); font-weight: 500;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.app-tab.on{ color: var(--brick); border-bottom-color: var(--brick); }

.app-results-meta{
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-2);
}
.app-results-meta b{ color: var(--ink); }
.app-results-meta .search{
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  background: var(--paper-2);
  border: 1px solid var(--hairline-2);
  font-size: 11px;
}

.app-members{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
@media (max-width: 760px){ .app-members{ grid-template-columns: repeat(2, 1fr);} }
.member-tile{
  background: var(--paper);
  border: 1px solid var(--ink);
  overflow: hidden;
  transition: background .2s ease;
}
.member-tile:hover{ background: var(--paper-2); }
.member-tile .thumb{ position: relative; aspect-ratio: 16/10; border-bottom: 1px solid var(--ink);}
.member-tile .body{ padding: 10px 12px; display: flex; flex-direction: column; gap: 4px;}
.member-tile .biz{ font-family: var(--serif); font-size: 16px; color: var(--ink);}
.member-tile .meta{ display: flex; justify-content: space-between; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);}
.member-tile .meta .org{ font-style: italic; font-family: var(--serif); letter-spacing: 0; text-transform: none; font-size: 12px;}

.app-right{
  padding: 22px 18px;
  background: var(--paper-2);
  border-left: 1px solid var(--ink);
  display: flex; flex-direction: column; gap: 14px;
}
.dm-thread{ display: flex; flex-direction: column; gap: 10px; }
.dm{
  padding: 10px 14px;
  font-size: 13.5px; line-height: 1.4;
  background: var(--paper);
  border: 1px solid var(--ink);
  max-width: 92%;
}
.dm.them b{ color: var(--brick);}
.dm.you{
  background: var(--ink); color: var(--paper);
  border-color: var(--ink);
  align-self: flex-end;
}
.dm .ts{ font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; color: var(--ink-3); margin-top: 4px; text-align: right;}
.dm.you .ts{ color: var(--paper-3);}

.barter{
  background: var(--paper);
  border: 1px dashed var(--ink);
  padding: 14px;
  display: flex; flex-direction: column; gap: 8px;
}
.barter::before{
  content: "BARTER PROPOSAL";
  font-family: var(--mono); font-size: 9.5px;
  letter-spacing: .22em; color: var(--brick);
  font-weight: 600;
}
.barter .row-kv{
  display: flex; gap: 12px; font-size: 13.5px;
  font-family: var(--serif);
}
.barter .row-kv b{
  font-family: var(--mono); font-style: normal; font-weight: 600;
  font-size: 10.5px; letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brick);
  min-width: 52px; padding-top: 4px;
}
.barter .actions{ display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px;}

/* ============================================================
   Footer
   ============================================================ */

.footer{
  background: var(--ink);
  color: var(--paper-2);
  padding: 64px 0 32px;
  border-top: 1px solid var(--ink);
}
.footer a{ color: var(--paper-2); text-decoration: none; text-underline-offset: 3px;}
.footer a:hover{ color: var(--paper); text-decoration: underline; text-decoration-color: var(--brick);}
.footer-grid{
  display: grid;
  grid-template-columns: 2fr repeat(3, 1fr);
  gap: 48px;
}
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr 1fr; }}
.footer h5{
  font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--paper-3); margin: 0 0 16px; font-weight: 500;
}
.footer ul{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px;}
.footer .brand{
  font-family: var(--serif); font-size: 32px; color: var(--paper);
  letter-spacing: -.018em;
}
.footer .brand em{ font-style: italic; color: var(--brick); }
.footer-bottom{
  margin-top: 48px; padding-top: 20px;
  border-top: 1px solid rgba(243,236,224,.12);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10.5px;
  letter-spacing: .14em; text-transform: uppercase; color: var(--paper-3);
}

/* ============================================================
   Misc utility
   ============================================================ */

.fade-in{ animation: fadeUp .9s ease both;}
.fade-in.d-1{ animation-delay: .08s; }
.fade-in.d-2{ animation-delay: .16s; }
.fade-in.d-3{ animation-delay: .24s; }
.fade-in.d-4{ animation-delay: .32s; }
@keyframes fadeUp{
  from{ opacity: 0; transform: translateY(12px);}
  to{ opacity: 1; transform: translateY(0);}
}