/* Real SF Pro optical webfonts, copied byte-exact from bitfield-site global.css so the
   header/body contrast is genuine: Display (tight) for titles, Text (open, rounder) for body.
   Without these files both families fall back to -apple-system and look identical. */
/* ?v=2 forces browsers to re-fetch after the nginx font/otf mime fix. The earlier request
   cached the octet-stream copy (rejected as a font) under the same filename. */
/* Real SF Pro Text weights (Regular/Medium/Semibold/Bold) so body-500 renders a true Medium cut
   and <strong> renders a true Bold, not a synthesized-thin fake. ?v=3 busts the cached copies. */
@font-face { font-family: 'SF Pro Text'; src: url('assets/fonts/SF-Pro-Text-Light.woff2?v=3') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('assets/fonts/SF-Pro-Text-Regular.woff2?v=3') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('assets/fonts/SF-Pro-Text-Medium.woff2?v=3') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('assets/fonts/SF-Pro-Text-Semibold.woff2?v=3') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Text'; src: url('assets/fonts/SF-Pro-Text-Bold.woff2?v=3') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('assets/fonts/SF-Pro-Display-Regular.otf?v=3') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('assets/fonts/SF-Pro-Display-Medium.otf?v=3') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('assets/fonts/SF-Pro-Display-Semibold.otf?v=3') format('opentype'); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: 'SF Pro Display'; src: url('assets/fonts/SF-Pro-Display-Bold.otf?v=3') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* Ethös REAL brand, black & white monochrome (Expansion-drive brand assets, athletic-club).
     Replaces the cream/gold ethos-site(3) mockup that wrongly overrode the real brand. */
  --bg: #ffffff;
  --paper: #ffffff;
  --ink: #0a0a0a;
  --muted: #f4f4f2;
  --line: rgba(10,10,10,.16);
  --accent: #0a0a0a;
  --accent-2: #565656;
  --dark: #0a0a0a;
  --dark-2: #141414;
  --white: #ffffff;
  --max: 1280px;
  --shadow: 0 30px 90px rgba(0,0,0,.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  font-family: Inter, system-ui, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 15% 5%, rgba(255,255,255,.15), transparent 26rem),
    var(--bg);
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}
body:before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 900;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' seed='2' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='saturate' values='0' result='mono'/%3E%3CfeComponentTransfer in='mono' result='contrast'%3E%3CfeFuncR type='linear' slope='3'/%3E%3CfeFuncG type='linear' slope='3'/%3E%3CfeFuncB type='linear' slope='3'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix in='contrast' type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 16 -8'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280' viewBox='0 0 280 280'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' seed='2' stitchTiles='stitch' result='noise'/%3E%3CfeColorMatrix in='noise' type='saturate' values='0' result='mono'/%3E%3CfeComponentTransfer in='mono' result='contrast'%3E%3CfeFuncR type='linear' slope='3'/%3E%3CfeFuncG type='linear' slope='3'/%3E%3CfeFuncB type='linear' slope='3'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix in='contrast' type='matrix' values='1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 16 -8'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  background-size: 220px 220px, 128px 128px;
  background-position: 0 0, 53px 29px;
  background-blend-mode: overlay;
  mix-blend-mode: soft-light;
  filter: contrast(122%) brightness(0.985);
  opacity: 0.15;
}
a { color: inherit; text-decoration: none; }
button, input { border-radius: 0; }

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 4vw;
  color: var(--white);
  border-bottom: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(to bottom, rgba(8,8,7,.86), rgba(8,8,7,.3));
  backdrop-filter: blur(18px);
}
.brand { font-weight: 800; letter-spacing: .24em; font-size: 1rem; }
.desktop-nav { display: flex; align-items: center; gap: 30px; font-size: .86rem; }
.desktop-nav a { opacity: .68; transition: opacity .2s ease; }
.desktop-nav a:hover { opacity: 1; }
.header-cta {
  padding: 10px 17px;
  border: 1px solid rgba(255,255,255,.5);
  font-size: .82rem;
  font-weight: 750;
  transition: .25s ease;
}
.header-cta:hover { background: var(--white); color: var(--ink); }

.section-pad { position: relative; padding: 125px max(6vw, calc((100% - var(--max)) / 2)); }
.section-pad > * { max-width: 100%; margin-left: 0; margin-right: 0; }
.eyebrow, .section-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 24px;
}
.eyebrow:before, .section-kicker:before { content:''; width: 34px; height: 1px; background: currentColor; }

.hero {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: var(--white);
  background:
    linear-gradient(90deg, rgba(7,7,6,.98) 0%, rgba(7,7,6,.88) 49%, rgba(7,7,6,.45) 100%),
    radial-gradient(circle at 77% 34%, rgba(255,255,255,.38), transparent 21rem),
    linear-gradient(135deg, #090908, #161616 58%, #0a0a09);
  overflow: hidden;
  padding-top: 155px;
}
.hero:before {
  content:'';
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: linear-gradient(to right, transparent 7%, black 56%, transparent 100%);
}
.hero:after {
  content:'E';
  position:absolute;
  right:-.03em;
  top:50%;
  transform:translateY(-50%);
  font-family:'Playfair Display', serif;
  font-size:min(62vw, 850px);
  line-height:.7;
  color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.08);
  pointer-events:none;
}
.hero > * { position:relative; z-index:2; }
.hero h1 {
  max-width: 1100px;
  margin: 0;
  font-size: clamp(4rem, 8.2vw, 8.7rem);
  line-height: .9;
  letter-spacing: -.065em;
  font-weight: 780;
}
.hero h1 span {
  display:inline-block;
  font-family: 'Playfair Display', serif;
  font-style: italic;
  font-weight:700;
  color: var(--accent);
  transform: translateY(.02em);
}
.hero-copy {
  max-width: 730px;
  margin: 34px 0 0;
  font-size: clamp(1.08rem, 1.8vw, 1.4rem);
  color: rgba(248,246,239,.67);
}
.hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:38px; }
.button {
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding: 14px 22px;
  font-weight:750;
  border:1px solid rgba(255,255,255,.35);
  overflow:hidden;
  transition:.25s ease;
}
.button.primary { background:var(--accent); border-color:var(--accent); color:var(--ink); }
.button.primary:hover { transform:translateY(-2px); box-shadow:0 14px 38px rgba(255,255,255,.22); }
.button.secondary:hover { background:rgba(255,255,255,.08); }
.hero-proof {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  max-width:900px !important;
  margin-left:0 !important;
  margin-top:78px;
  border-top:1px solid rgba(255,255,255,.18);
}
.hero-proof div { padding:24px 32px 0 0; display:flex; flex-direction:column; gap:5px; }
.hero-proof strong { font-size:.95rem; }
.hero-proof span { color:rgba(248,246,239,.48); font-size:.88rem; }

.dark-panel { background:var(--dark); color:var(--white); }
.dark-panel:before {
  content:'';
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 85% 10%, rgba(255,255,255,.13), transparent 25rem);
  pointer-events:none;
}
.dark-panel .section-kicker { color:#d8d8d4; }
h2 { margin:0; font-size:clamp(2.7rem,5.5vw,5.5rem); line-height:.98; letter-spacing:-.055em; }
h3 { margin:0 0 10px; font-size:1.18rem; }
p { margin:0; }
.two-col { display:grid; grid-template-columns:1.08fr .92fr; gap:85px; align-items:center; }
.two-col.top-align { align-items:start; }
.body-stack { display:grid; gap:24px; font-size:1.12rem; color:rgba(248,246,241,.68); }
.pill-grid, .evidence-grid { display:flex; flex-wrap:wrap; gap:10px; margin-top:58px; }
.pill-grid span, .evidence-grid span, .city-cloud span {
  border:1px solid currentColor;
  padding:10px 14px;
  font-size:.86rem;
  opacity:.78;
  transition:.2s ease;
}
.pill-grid span:hover, .evidence-grid span:hover, .city-cloud span:hover { opacity:1; transform:translateY(-2px); }

.manifesto { background:var(--paper); }
.manifesto blockquote {
  margin:0 0 80px;
  font-family:'Playfair Display',serif;
  font-size:clamp(3.8rem,8.2vw,8.6rem);
  line-height:.86;
  letter-spacing:-.045em;
  color:var(--accent-2);
}
.manifesto-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); box-shadow:var(--shadow); }
.manifesto-grid article { position:relative; background:var(--paper); padding:34px; min-height:220px; overflow:hidden; }
.manifesto-grid article:after { content:'↗'; position:absolute; right:26px; bottom:22px; color:var(--accent); opacity:.75; }
.manifesto-grid p { color:rgba(12,12,11,.65); }

.muted { background:var(--muted); }
.cards { display:grid; gap:18px; margin-top:58px; }
.cards.three { grid-template-columns:repeat(3,1fr); }
.cards.four { grid-template-columns:repeat(4,1fr); }
.card {
  position:relative;
  border:1px solid var(--line);
  padding:32px;
  background:rgba(255,255,255,.3);
  min-height:290px;
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.card:hover { transform:translateY(-7px); box-shadow:0 22px 55px rgba(18,16,10,.1); }
.card.featured { background:var(--ink); color:var(--white); transform:translateY(-12px); box-shadow:0 30px 70px rgba(12,12,11,.24); }
.card.featured:hover { transform:translateY(-18px); }
.card.dark { background:var(--dark-2); border-color:rgba(255,255,255,.1); min-height:260px; }
.card.dark:before { content:''; position:absolute; width:120px; height:120px; border-radius:50%; right:-45px; top:-45px; border:1px solid rgba(255,255,255,.28); }
.card .number { display:block; margin-bottom:70px; color:var(--accent); font-weight:800; font-size:.8rem; letter-spacing:.15em; }
.card p { color:rgba(12,12,11,.62); }
.card.featured p, .card.dark p { color:rgba(248,246,241,.58); }
.large-copy { font-size:1.3rem; color:rgba(12,12,11,.62); }
.callout { margin-top:52px; padding:32px 34px; border-left:4px solid var(--accent); background:var(--paper); font-size:1.22rem; font-weight:750; box-shadow:0 20px 50px rgba(18,16,10,.08); }

.timeline { display:grid; grid-template-columns:repeat(5,1fr); gap:1px; margin-top:64px; background:rgba(255,255,255,.11); border:1px solid rgba(255,255,255,.11); }
.timeline > div { position:relative; background:var(--dark); padding:30px 24px; min-height:285px; transition:background .25s ease; }
.timeline > div:hover { background:#191814; }
.timeline span { display:inline-block; color:var(--accent); font-weight:800; margin-bottom:72px; font-size:.78rem; letter-spacing:.12em; }
.timeline p { color:rgba(248,246,241,.57); }
.ladder { display:grid; margin-top:56px; border-top:1px solid var(--line); }
.ladder > div { display:grid; grid-template-columns:.36fr .64fr; gap:44px; padding:28px 0; border-bottom:1px solid var(--line); transition:padding-left .2s ease; }
.ladder > div:hover { padding-left:14px; }
.ladder strong { font-size:1.05rem; }
.ladder p { color:rgba(12,12,11,.6); }
.checklist { display:grid; gap:14px; }
.checklist.columns { grid-template-columns:repeat(2,1fr); }
.checklist span { padding-bottom:12px; border-bottom:1px solid rgba(12,12,11,.1); }
.checklist span:before { content:'↗'; margin-right:10px; color:var(--accent-2); }

.media-engine { overflow:hidden; background:var(--paper); }
.media-engine:before { content:'COMPOUND'; position:absolute; right:-.02em; bottom:-.15em; font-weight:800; font-size:18vw; line-height:.8; letter-spacing:-.08em; color:rgba(12,12,11,.025); }
.flow { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr auto 1fr auto 1fr auto 1fr; gap:12px; align-items:center; margin-top:58px; }
.flow div { border:1px solid var(--line); padding:23px; min-height:135px; display:flex; align-items:center; font-weight:720; background:rgba(255,255,255,.45); }
.flow span { color:var(--accent-2); font-size:1.4rem; }

.stages { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:56px; }
.stages article { position:relative; border-top:3px solid var(--accent); padding:26px 22px 10px 0; min-height:210px; }
.stages span { font-size:.76rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent-2); font-weight:800; }
.stages p { color:rgba(12,12,11,.6); }
.city-cloud { display:flex; flex-wrap:wrap; gap:10px; margin-top:64px; }
.culture-list { list-style:none; counter-reset:culture; padding:0; margin-top:58px; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.culture-list li { counter-increment:culture; background:var(--muted); padding:30px; min-height:170px; font-weight:740; }
.culture-list li:before { content:'0' counter(culture); display:block; margin-bottom:28px; color:var(--accent-2); font-size:.76rem; letter-spacing:.12em; }

.apply-section {
  color:var(--white);
  background:
    radial-gradient(circle at 75% 20%, rgba(255,255,255,.38), transparent 24rem),
    linear-gradient(145deg,#141414,#060606 72%);
  overflow:hidden;
}
.apply-section:after { content:'ETHÖS'; position:absolute; left:50%; bottom:-.15em; transform:translateX(-50%); font-size:19vw; font-weight:800; letter-spacing:-.08em; color:rgba(255,255,255,.035); white-space:nowrap; }
.apply-inner { position:relative; z-index:2; max-width:900px !important; text-align:center; }
.apply-inner .section-kicker { justify-content:center; color:var(--accent); }
.apply-inner .section-kicker:before { display:none; }
.apply-inner p { max-width:710px; margin:30px auto 0; font-size:1.14rem; color:rgba(248,246,239,.62); }
.apply-form { margin:42px auto 0; max-width:700px; display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.apply-form input { width:100%; border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.06); color:var(--white); padding:17px; font:inherit; outline:none; transition:.2s ease; }
.apply-form input:nth-child(3) { grid-column:1/-1; }
.apply-form input::placeholder { color:rgba(255,255,255,.42); }
.apply-form input:focus { border-color:var(--accent); background:rgba(255,255,255,.09); }
.apply-form button { grid-column:1/-1; border:0; background:var(--accent); color:var(--ink); padding:17px; font:inherit; font-weight:800; cursor:pointer; transition:.2s ease; }
.apply-form button:hover { transform:translateY(-2px); box-shadow:0 16px 45px rgba(255,255,255,.2); }
.form-message { grid-column:1/-1; min-height:24px; font-size:.9rem; color:rgba(255,255,255,.65); }
footer { display:grid; grid-template-columns:repeat(3,1fr); align-items:center; padding:30px 4vw; background:#050505; color:var(--white); font-size:.82rem; border-top:1px solid rgba(255,255,255,.08); }
footer p:nth-child(2) { text-align:center; }
footer p:last-child { text-align:right; opacity:.5; }

.reveal { opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
.reveal.visible { opacity:1; transform:none; }

@media (max-width: 1050px) {
  .desktop-nav { display:none; }
  .two-col, .cards.three, .cards.four, .stages { grid-template-columns:1fr; }
  .manifesto-grid { grid-template-columns:1fr 1fr; }
  .timeline { grid-template-columns:1fr 1fr; }
  .flow { grid-template-columns:1fr; }
  .flow span { transform:rotate(90deg); justify-self:center; }
  .culture-list { grid-template-columns:1fr 1fr; }
  .hero-proof { grid-template-columns:1fr; max-width:520px !important; }
  .hero-proof div { padding-top:17px; }
  .card.featured { transform:none; }
  .card.featured:hover { transform:translateY(-7px); }
}
@media (max-width: 680px) {
  .section-pad { padding:92px 22px; }
  .site-header { padding:16px 18px; }
  .header-cta { display:none; }
  .hero { min-height:100svh; padding-top:120px; }
  .hero h1 { font-size:clamp(3.45rem,17vw,5.35rem); }
  .hero-copy { font-size:1.03rem; }
  .hero-actions { flex-direction:column; }
  .button { width:100%; }
  .manifesto-grid, .timeline, .culture-list { grid-template-columns:1fr; }
  .manifesto blockquote { font-size:3.8rem; }
  .ladder > div { grid-template-columns:1fr; gap:8px; }
  .checklist.columns { grid-template-columns:1fr; }
  .apply-form { grid-template-columns:1fr; }
  .apply-form input:nth-child(3), .apply-form button, .form-message { grid-column:auto; }
  footer { grid-template-columns:1fr; gap:8px; text-align:left; }
  footer p:nth-child(2), footer p:last-child { text-align:left; }
}

/* === Ethös REAL black & white brand: dark-ground contrast fixes + real logo === */
.brand img { height:24px; width:auto; display:block; }
footer .brand img { height:30px; }
.hero .eyebrow, .hero .section-kicker { color:#e9e9e7; }
.hero h1 span { color:#ffffff; }
.button.primary { background:#ffffff; border-color:#ffffff; color:#0a0a0a; }
.button.primary:hover { box-shadow:0 14px 38px rgba(255,255,255,.18); }
.dark-panel .section-kicker { color:#d8d8d4; }
.timeline span { color:#d8d8d4; }
.card.featured .number, .card.dark .number { color:#d8d8d4; }
.apply-inner .section-kicker { color:#e9e9e7; }
.apply-form input:focus { border-color:#ffffff; }
.apply-form button { background:#ffffff; color:#0a0a0a; }
.apply-form button:hover { box-shadow:0 16px 45px rgba(255,255,255,.18); }

/* === Typography tune (Brian 2026-08-04): SF Pro Display + smaller section titles === */
/* SF Pro Display on Apple via -apple-system; Inter fallback elsewhere. */
body { font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; }
/* section titles were too large, bring them down (hero h1 + Playfair "greatness" unchanged) */
h2 { font-size:clamp(1.85rem,3.5vw,3.2rem); line-height:1.05; letter-spacing:-.03em; }

/* Apple pairing (Brian): SF Pro Text for body, SF Pro Display for headings */
body { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; }
h1, h2, h3, .brand, .hero h1, .manifesto blockquote ~ *, .number { font-family: "SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; }
/* keep Playfair cursive explicitly on the italic accents */
.hero h1 span, .manifesto blockquote { font-family: 'Playfair Display', serif; }

/* Kill the Codex cramped letter-spacing (Brian 2026-08-04). Comfortable display tracking. */
.hero h1 { letter-spacing: -0.01em; line-height: 1.04; }
h2 { letter-spacing: -0.01em; line-height: 1.06; }
.manifesto blockquote { letter-spacing: 0; line-height: 1.02; }
.hero h1 span { letter-spacing: 0; }

/* Real hero background image (Brian's sketch render) + House render gallery */
.hero {
  background:
    linear-gradient(90deg, rgba(6,6,5,.96) 0%, rgba(6,6,5,.84) 46%, rgba(6,6,5,.5) 100%),
    url("assets/hero-bg-sketch.png") center right / cover no-repeat,
    #0a0a0a;
}
.render-gallery { display:grid; grid-template-columns:repeat(2,1fr); gap:18px; margin-top:58px; }
.render-gallery figure { margin:0; }
.render-gallery img { width:100%; height:auto; display:block; border:1px solid rgba(255,255,255,.12); }
.render-gallery figcaption { margin-top:12px; color:rgba(248,248,246,.6); font-size:.95rem; line-height:1.5; }
@media (max-width:800px){ .render-gallery { grid-template-columns:1fr; } }

/* === Ethös story rebuild (Brian 2026-08-04): prose sections, House-day figures, word reveal === */
.story { max-width: 820px; display: grid; gap: 26px; margin-top: 44px; }
.story p { font-size: clamp(1.12rem, 1.5vw, 1.34rem); line-height: 1.62; color: rgba(12,12,11,.74); }
.dark-panel .story p, .apply-section .story p { color: rgba(248,246,241,.72); }
.manifesto .story { margin-top: 12px; }

.house .story:last-of-type { margin-top: 48px; }
.house-shot { display: grid; grid-template-columns: 1.28fr .72fr; gap: 46px; align-items: center; margin-top: 46px; }
.house-shot.flip { grid-template-columns: .72fr 1.28fr; }
.house-shot.flip img { order: 2; }
.house-shot.flip figcaption { order: 1; }
.house-shot img { width: 100%; height: auto; display: block; border: 1px solid var(--line); }
.house-shot figcaption { font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.6; color: rgba(12,12,11,.72); }

.path-cards .card p { font-size: 1rem; line-height: 1.55; }

/* word-by-word reveal for the hero headline (reduced-motion safe) */
.reveal-words { visibility: visible; }
html.js .reveal-words .rw { display: inline-block; opacity: 0; transform: translateY(0.42em); transition: opacity .7s cubic-bezier(0.16,1,0.3,1), transform .7s cubic-bezier(0.16,1,0.3,1); }
html.js .reveal-words.is-in .rw { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal-words .rw { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 900px) {
  .house-shot, .house-shot.flip { grid-template-columns: 1fr; gap: 20px; }
  .house-shot.flip img { order: 0; }
  .house-shot.flip figcaption { order: 0; }
}

/* === Ethös fix pass 2 (Brian 2026-08-04): italic scope, clean hero, contrast, kill labels + watermarks === */
/* Headline: ONLY the accent word is Playfair italic. Every other word, including the JS .rw spans, is SF Pro upright. */
.hero h1 { font-family:"SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-style:normal; }
.hero h1 .rw { font-family:inherit; font-style:normal; }
.hero h1 .accent { font-family:'Playfair Display',serif; font-style:italic; color:#ffffff; letter-spacing:0; }

/* Clean black hero. No cartoon illustration, no giant retyped letter behind it. */
.hero {
  background:
    radial-gradient(circle at 78% 30%, rgba(255,255,255,.07), transparent 30rem),
    linear-gradient(160deg,#0b0b0b,#000 72%);
}
.hero:after { display:none !important; }

/* Never retype the wordmark as a background. Kill the ETHÖS watermark in the apply section. */
.apply-section:after { display:none !important; }

/* The little dash + uppercase section labels are removed from markup; hard-block them from ever rendering again. */
.eyebrow, .section-kicker { display:none !important; }

/* Contrast category fix: text color must match its section background. body-stack was light by
   default (correct only on dark), which made it vanish on the white sections. Make it dark by
   default and light only inside dark sections. Same for the stages on the dark movement panel. */
.body-stack, .muted .body-stack { color: rgba(12,12,11,.72); }
.dark-panel .body-stack, .apply-section .body-stack { color: rgba(248,246,241,.74); }
.dark-panel .stages p { color: rgba(248,246,241,.62); }
.dark-panel .stages span { color: #cfcfcb; }
.dark-panel .stages article { border-top-color: rgba(255,255,255,.5); }
.dark-panel h2, .dark-panel h3 { color:#ffffff; }

/* === House building lead + real-room gallery (Brian's poster crops, 2026-08-04) === */
.house-building { margin: 40px 0 0; }
.house-building img { width:100%; height:auto; display:block; border:1px solid var(--line); }
.house-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px 20px; margin-top:26px; }
.house-grid .room { margin:0; }
.house-grid .room img { width:100%; aspect-ratio:16/10; object-fit:cover; display:block; border:1px solid var(--line); }
.house-grid .room h3 { margin:15px 0 6px; font-size:1.02rem; }
.house-grid .room figcaption p { color:rgba(12,12,11,.66); font-size:.94rem; line-height:1.52; }
@media (max-width:1050px){ .house-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .house-grid { grid-template-columns:1fr; } }

/* === Membership weekly loop (grounded in Brian's real member flow, 2026-08-04) === */
.membership .weekly { list-style:none; counter-reset:wk; padding:0; margin:40px 0 0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.membership .weekly li { counter-increment:wk; background:#ffffff; padding:26px 32px 26px 86px; position:relative; }
.membership .weekly li:before { content:counter(wk,decimal-leading-zero); position:absolute; left:32px; top:28px; color:var(--accent-2); font-weight:800; font-size:.82rem; letter-spacing:.1em; }
.membership .weekly h3 { margin:0 0 6px; font-size:1.08rem; }
.membership .weekly p { color:rgba(12,12,11,.66); font-size:1rem; line-height:1.55; margin:0; }
@media (max-width:560px){ .membership .weekly li { padding-left:70px; } }

/* hero button left-aligned (Brian 2026-08-04) */
.hero .hero-actions { margin-left:0; margin-right:auto; max-width:none; }

/* === Generic mosaic hero (data-driven, reusable): B&W portrait tiles cross-fading behind text === */
.hero { background: #050505; }
.mosaic-bg { position:absolute; inset:0; z-index:0; display:grid; overflow:hidden; opacity:.26; }
.mosaic-bg .mosaic-tile { background-size:cover; background-position:center; filter:grayscale(1) contrast(1.04); transition:opacity .9s ease; }
.mosaic-bg:after { content:''; position:absolute; inset:0; background:linear-gradient(90deg, rgba(5,5,5,.94) 0%, rgba(5,5,5,.82) 42%, rgba(5,5,5,.6) 100%); }
@media (prefers-reduced-motion: reduce){ .mosaic-bg .mosaic-tile { transition:none; } }

/* mosaic must span the whole hero, not the section max-width (Brian 2026-08-04) */
.hero .mosaic-bg { max-width: none; margin: 0; left: 0; right: 0; width: 100%; }

/* alignment fixes (Brian 2026-08-04): center only the apply block; full-bleed hero layers */
.apply-inner { margin-left: auto !important; margin-right: auto !important; }
.hero .mosaic-bg { position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%); width: 100vw; max-width: none; margin: 0; }
.hero:before { left: 50%; transform: translateX(-50%); width: 100vw; }

/* Centered section titles + centered content columns (Brian 2026-08-04).
   Titles sit centered above their content; the two-column prose sections stack
   with the title centered over a centered readable body column. */
.section-pad h2 { text-align: center; }
.manifesto blockquote { text-align: center; }
.manifesto .story { margin-left: auto; margin-right: auto; }
.two-col { display: block; }
.two-col > h2 { text-align: center; margin: 0 auto; }
.two-col .body-stack { max-width: 820px; margin: 34px auto 0; }
.membership .story { margin-left: auto; margin-right: auto; text-align: center; }

/* === MENG LIFT (Brian 2026-08-04): tighter type scale, section rhythm, wider prose === */
.section-pad { padding-top: 150px; padding-bottom: 150px; }
h2 { font-size: clamp(2.25rem, 4.2vw, 4rem); line-height: 1.03; letter-spacing: -0.025em; }
.section-pad h2 { margin-bottom: 8px; }
/* prose fills the frame instead of a cramped column */
.story { max-width: 1080px; }
.story p { font-size: clamp(1.18rem, 1.55vw, 1.5rem); line-height: 1.58; }
#about .story { max-width: 1120px; }
#about .story p { font-size: clamp(1.3rem, 1.9vw, 1.75rem); line-height: 1.5; color: rgba(12,12,11,.82); }
.manifesto blockquote { margin-bottom: 40px; font-size: clamp(3.4rem, 8vw, 8rem); }
.two-col .body-stack { max-width: 1080px; }
.two-col .body-stack p { font-size: clamp(1.18rem, 1.5vw, 1.5rem); line-height: 1.55; }
.membership .story { max-width: 900px; }
.house-grid { gap: 30px 24px; margin-top: 40px; }
.house-building { margin-top: 52px; }

/* === READABILITY LIFT (Brian 2026-08-04): larger, darker, bolded body; centered blocks;
   big legible weekly loop; native smooth scroll (Lenis/GSAP removed). === */

/* Body copy fills a comfortable centered measure under the centered titles, and reads dark.
   Blocks are centered on the page so they sit under the centered section titles instead of
   jamming to the left edge. Multi-paragraph reading stays left-aligned; a single lead line
   under a title centers with it. */
.story, .two-col .body-stack { margin-left: auto; margin-right: auto; }
.story { max-width: 960px; gap: 22px; }
.story p, .two-col .body-stack p {
  font-size: clamp(1.24rem, 1.65vw, 1.6rem);
  line-height: 1.6;
  color: rgba(10,10,10,.9);
}
.dark-panel .story p, .dark-panel .body-stack p, .apply-section .story p, .apply-section .body-stack p {
  color: rgba(248,246,241,.86);
}
/* a single-sentence lead under a centered title centers with it */
.story:has(> p:only-child) { max-width: 840px; text-align: center; }

/* #about opening stays wide and large (Brian: do not artificially restrict it) */
#about .story { max-width: 1120px; }
#about .story p { font-size: clamp(1.34rem, 1.95vw, 1.85rem); line-height: 1.5; color: rgba(10,10,10,.9); }

/* bolded key phrases carry real weight and full ink, so the eye has anchors to land on */
.story strong, .body-stack strong, .weekly strong, .membership strong, .path-cards strong {
  font-weight: 700; color: #0a0a0a;
}
.dark-panel strong, .apply-section strong, .dark-panel .body-stack strong { color: #ffffff; }

/* The weekly loop was unreadably small. Make it a substantial, legible list. */
.membership .weekly { margin-top: 48px; }
.membership .weekly li { padding: 34px 42px 34px 104px; }
.membership .weekly li:before { left: 40px; top: 40px; font-size: 1rem; color: var(--accent-2); }
.membership .weekly h3 { margin: 0 0 10px; font-size: clamp(1.38rem, 1.9vw, 1.72rem); color: #0a0a0a; }
.membership .weekly p { font-size: clamp(1.12rem, 1.4vw, 1.3rem); line-height: 1.58; color: rgba(10,10,10,.82); }
/* Mobile: the absolute number badge reserved ~80-104px of left padding, so the text column
   was too narrow and every step wrapped into a very tall card. Put the number ABOVE the title
   (static) and give the text the full width. */
@media (max-width:560px){
  .membership .weekly li { padding: 22px 22px; }
  .membership .weekly li:before { position: static; display: block; left: auto; top: auto; margin-bottom: 10px; }
}

/* path cards read a touch larger and darker */
.path-cards .card p { font-size: 1.06rem; line-height: 1.58; color: rgba(12,12,11,.74); }
.path-cards .card h3 { font-size: 1.28rem; }

/* === TYPE SYSTEM reproduced from dev/bitfield-site landingTypography.ts (Brian likes this scale; L156).
   Fixes the "something off": ethos hero grew too fast (8.2vw, 8.7rem max) and body was thin (weight 400).
   bitfield uses a restrained clamp scale + weight-500 body with controlled line-height. === */
:root {
  --type-hero: clamp(3rem, 5.2vw, 5.7rem);
  --type-section: clamp(2.12rem, 3.85vw, 3.9rem);
  --type-body: clamp(1.24rem, 1.5vw, 1.5rem);
}
/* Headers: EXACT bitfield StatementText.tsx treatment, SF Pro Display, weight 660, letter-spacing -0.055em. */
.hero h1 { font-size: var(--type-hero); line-height: 1.08; letter-spacing: -0.055em; font-weight: 660; }
h2, .section-pad h2 { font-size: var(--type-section); line-height: 1.1; letter-spacing: -0.055em; font-weight: 660; }
/* 'Everything serves the pursuit.' matches every other section header (SF Pro Display, not Playfair). */
.manifesto blockquote {
  font-family: "SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;
  font-style: normal;
  font-size: var(--type-section);
  line-height: 1.1;
  letter-spacing: -0.055em;
  font-weight: 660;
}
.hero h1 .accent { letter-spacing: 0; }  /* Playfair accent word stays untracked */

/* Body: EXACT bitfield, SF Pro Text, weight 500, line-height 1.52, letter-spacing normal. One size everywhere. */
.story p, #about .story p, .two-col .body-stack p, .membership .story p,
.membership .weekly p, .path-cards .card p, .story:has(> p:only-child) p {
  /* Body OWNS its font-family so no ancestor (e.g. .manifesto blockquote ~ * on #about) can
     leak SF Pro Display into body prose. Every body paragraph is SF Pro Text, always. */
  font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;
  font-size: var(--type-body); font-weight: 400; line-height: 1.52; letter-spacing: normal;
}
/* Body color: bitfield rgba(0,0,0,.7) on light grounds; dark grounds re-asserted after (later wins). */
.story p, #about .story p, .two-col .body-stack p, .membership .story p,
.membership .weekly p, .path-cards .card p { color: rgba(0,0,0,0.7); }
.dark-panel .story p, .dark-panel .body-stack p,
.apply-section .story p, .apply-section .body-stack p { color: rgba(255,255,255,0.8); }
/* Every white-on-dark body uses Light(300), same as the hero, so no dark section optically
   out-weighs the dark-on-light sections. <strong> keeps its own 700 rule (stays bold). */
.dark-panel .story p, .dark-panel .body-stack p, .dark-panel .card p, .dark-panel .stages article p,
.dark-panel .story:has(> p:only-child) p,
.apply-section .story p, .apply-section .body-stack p, .apply-inner p { font-weight: 300; }

/* Hero body sits as off-white on a busy bright mosaic, so weight 400 optically reads heavier
   than dark-on-light body elsewhere. Use the Light (300) cut so it matches the section body. */
.hero-copy { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: var(--type-body); font-weight: 300; line-height: 1.52; letter-spacing: normal; }
.membership .weekly h3 { font-size: clamp(1.28rem, 1.7vw, 1.58rem); font-weight: 660; letter-spacing: -0.03em; }
.path-cards .card h3 { font-size: clamp(1.2rem, 1.5vw, 1.45rem); font-weight: 660; letter-spacing: -0.03em; }

/* smooth, cheap reveals (opacity + translate only, no blur, no scroll hijack) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1); }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* Real launch map (the 22 cities in Brian's actual economics model, not fabricated) */
.city-map { margin-top: 84px; text-align: center; }
.city-map-label {
  font-size: .78rem; font-weight: 800; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255,255,255,.5); margin: 0 0 26px;
}
.city-map .city-cloud { justify-content: center; gap: 12px; margin-top: 0; max-width: 1000px; margin-left: auto; margin-right: auto; }
.city-map .city-cloud span { border-color: rgba(255,255,255,.28); color: rgba(255,255,255,.82); font-size: .92rem; padding: 11px 16px; }
.city-map .city-cloud span:hover { border-color: #fff; color: #fff; }

/* ============================================================
   The Pursuit Declaration wizard (declaration.html)
   Matches the site system: SF Pro Display headers, SF Pro Text
   Light body, ink on paper. One question at a time.
   ============================================================ */
.declare-body { background: #fbfbfa; }
.declare-main { min-height: 70vh; }
.declare-shell { max-width: 760px; margin: 0 auto; padding-top: clamp(90px, 12vh, 150px); padding-bottom: clamp(60px, 10vh, 120px); }
.declare-card { background: #ffffff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(28px, 4vw, 52px); box-shadow: 0 24px 70px rgba(10,10,10,.07); }
.declare-card h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.12; letter-spacing: -0.04em; font-weight: 660; margin: 6px 0 14px; }
.declare-kicker { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 600; color: var(--accent-2); margin: 0 0 4px; }
.declare-lead { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: var(--type-body); font-weight: 300; line-height: 1.5; color: rgba(10,10,10,.72); margin: 0 0 18px; }
.declare-note { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: 1.02rem; font-weight: 300; line-height: 1.5; color: rgba(10,10,10,.6); background: #f6f6f4; border-radius: 12px; padding: 16px 18px; margin: 4px 0 0; }
.declare-note strong, .declare-lead strong { font-weight: 700; color: #0a0a0a; }

.declare-progress { height: 4px; background: #ececea; border-radius: 4px; overflow: hidden; margin-bottom: 18px; }
.declare-progress span { display: block; height: 100%; background: #0a0a0a; transition: width .3s ease; }
.declare-count { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: .85rem; font-weight: 600; letter-spacing: .04em; color: var(--accent-2); margin: 0; }
.declare-why { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: 1.05rem; font-weight: 300; line-height: 1.5; color: rgba(10,10,10,.66); margin: 0 0 18px; }

.declare-input { width: 100%; font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: 1.18rem; font-weight: 300; line-height: 1.5; color: #0a0a0a; background: #fbfbfa; border: 1px solid var(--line); border-radius: 12px; padding: 16px 18px; resize: vertical; transition: border-color .2s ease, box-shadow .2s ease; }
.declare-input:focus { outline: none; border-color: #0a0a0a; box-shadow: 0 0 0 3px rgba(10,10,10,.06); }
.declare-input::placeholder { color: rgba(10,10,10,.34); font-style: italic; }

.declare-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 0; }
.ghost-btn { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: .96rem; font-weight: 500; color: #0a0a0a; background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; cursor: pointer; transition: .18s ease; }
.ghost-btn:hover { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.voice-btn.rec { background: #b12a2a; color: #fff; border-color: #b12a2a; }

.declare-examples { margin: 14px 0 0; background: #f6f6f4; border-radius: 12px; padding: 8px 18px; }
.declare-examples p { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: 1rem; font-weight: 300; line-height: 1.5; color: rgba(10,10,10,.72); margin: 12px 0; }
.declare-ex-tag { display: inline-block; font-weight: 600; font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: #0a0a0a; background: #e7e7e4; border-radius: 6px; padding: 2px 8px; margin-right: 8px; }

.declare-evidence { width: 100%; font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: 1rem; font-weight: 300; color: #0a0a0a; background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 14px 2px; margin-top: 18px; }
.declare-evidence:focus { outline: none; border-bottom-color: #0a0a0a; }
.declare-evidence::placeholder { color: rgba(10,10,10,.34); }

.declare-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.declare-nav-right { display: flex; align-items: center; gap: 10px; }
.declare-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 26px; }

/* Review page */
.declare-card.review .review-row { border-top: 1px solid var(--line); padding: 22px 0; }
.declare-card.review .review-row:first-of-type { border-top: 0; }
.review-q { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: 1.04rem; font-weight: 600; line-height: 1.4; color: #0a0a0a; margin: 0 0 10px; }
.review-a { font-size: 1.06rem; }
.review-ev { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: .96rem; font-weight: 300; color: rgba(10,10,10,.6); margin: 8px 0 0; }
.review-ev strong { font-weight: 600; color: #0a0a0a; }
.review-ai { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: .94rem; font-weight: 300; line-height: 1.45; color: rgba(10,10,10,.55); margin: 12px 0 0; }
.ai-tag { display: inline-block; font-weight: 600; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; color: #7a5a12; background: #f3ead2; border-radius: 6px; padding: 3px 8px; margin-right: 8px; }
.review-publish { display: flex; align-items: center; gap: 9px; font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: .96rem; font-weight: 400; color: rgba(10,10,10,.72); margin-top: 12px; cursor: pointer; }
.review-publish input { width: 17px; height: 17px; accent-color: #0a0a0a; }

@media (max-width: 560px) {
  .declare-card { padding: 24px 20px; border-radius: 14px; }
  .declare-nav { flex-direction: column-reverse; align-items: stretch; }
  .declare-nav-right { justify-content: space-between; }
  .declare-nav .button.primary { flex: 1; text-align: center; }
}

/* Declaration primary buttons sit on a light card, so they must be ink-filled
   (the global light-section override paints .button.primary white, which vanishes here). */
.declare-body .button.primary { background:#0a0a0a; border-color:#0a0a0a; color:#ffffff; padding:14px 30px; }
.declare-body .button.primary:hover { transform:translateY(-2px); box-shadow:0 14px 38px rgba(10,10,10,.22); }

/* Ethös editorial intake — the same quiet Instrument type, hairlines, natural
   tracking, and open whitespace as the public Network / Events / Places page. */
@font-face { font-family:'Instrument Serif'; src:url('assets/fonts/InstrumentSerif-Regular.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:'Instrument Serif'; src:url('assets/fonts/InstrumentSerif-Italic.woff2') format('woff2'); font-style:italic; font-weight:400; font-display:swap; }
@font-face { font-family:'Instrument Sans'; src:url('assets/fonts/InstrumentSans-Regular.woff2') format('woff2'); font-style:normal; font-weight:400; font-display:swap; }
@font-face { font-family:'Instrument Sans'; src:url('assets/fonts/InstrumentSans-Medium.woff2') format('woff2'); font-style:normal; font-weight:500; font-display:swap; }
@font-face { font-family:'Instrument Sans'; src:url('assets/fonts/InstrumentSans-Semibold.woff2') format('woff2'); font-style:normal; font-weight:600; font-display:swap; }

.declare-body {
  --declare-serif:'Instrument Serif', Georgia, serif;
  --declare-sans:'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  background:#f7f6f2;
  font-family:var(--declare-sans);
}
.declare-body:before { opacity:.055; }
.declare-body .site-header {
  position:relative;
  min-height:76px;
  padding:0 clamp(22px,4vw,64px);
  color:#0a0a0a;
  background:rgba(247,246,242,.96);
  border-bottom:1px solid rgba(10,10,10,.14);
  backdrop-filter:none;
}
.declare-body .brand img { display:block; width:auto; height:16px; }
.declare-body .desktop-nav { gap:28px; font-size:.78rem; }
.declare-body .desktop-nav a { opacity:.72; }
.declare-body .header-cta {
  border:1px solid #0a0a0a;
  border-radius:999px;
  padding:9px 16px;
  font-family:var(--declare-sans);
  font-size:.75rem;
  font-weight:500;
}
.declare-body .header-cta:hover { background:#0a0a0a; color:#fff; }
.declare-main { min-height:calc(100vh - 76px); }
.declare-shell {
  width:min(100%, 1180px);
  max-width:1180px;
  margin:0 auto;
  padding:clamp(88px,11vw,168px) clamp(22px,5vw,78px) clamp(90px,12vw,170px);
}
.declare-card {
  width:100%;
  max-width:980px;
  margin:0;
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.declare-card h2 {
  max-width:18ch;
  margin:12px 0 28px;
  font-family:var(--declare-serif);
  font-size:clamp(3.25rem,6.7vw,6.75rem);
  font-weight:400;
  line-height:.96;
  letter-spacing:0;
  text-align:left;
}
.declare-kicker,
.declare-count {
  margin:0 0 12px;
  font-family:var(--declare-sans);
  font-size:.7rem;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:rgba(10,10,10,.58);
}
.declare-lead {
  max-width:610px;
  margin:0 0 30px;
  font-family:var(--declare-sans);
  font-size:clamp(1.05rem,1.6vw,1.3rem);
  font-weight:400;
  line-height:1.55;
  color:rgba(10,10,10,.72);
}
.declare-note {
  max-width:610px;
  margin:0;
  padding:18px 0 18px 20px;
  font-family:var(--declare-sans);
  font-size:.95rem;
  font-weight:400;
  line-height:1.55;
  color:rgba(10,10,10,.62);
  background:transparent;
  border-left:1px solid rgba(10,10,10,.38);
  border-radius:0;
}
.declare-progress { height:1px; margin:0 0 28px; background:rgba(10,10,10,.16); border-radius:0; }
.declare-progress span { background:#0a0a0a; border-radius:0; }
.declare-why { max-width:610px; margin:0 0 24px; font-family:var(--declare-sans); font-size:1rem; font-weight:400; line-height:1.55; color:rgba(10,10,10,.64); }
.declare-input {
  width:100%; min-height:158px; padding:22px 0;
  font-family:var(--declare-serif); font-size:clamp(1.55rem,2.6vw,2.25rem); font-weight:400; line-height:1.25; letter-spacing:0;
  color:#0a0a0a; background:transparent; border:0; border-top:1px solid rgba(10,10,10,.18); border-bottom:1px solid rgba(10,10,10,.36); border-radius:0; box-shadow:none;
}
.declare-input:focus { outline:2px solid #0a0a0a; outline-offset:8px; border-color:#0a0a0a; box-shadow:none; }
.declare-input::placeholder { color:rgba(10,10,10,.32); font-style:normal; }
.declare-evidence { padding:18px 0 12px; margin-top:18px; font-family:var(--declare-sans); font-size:.95rem; font-weight:400; background:transparent; border:0; border-bottom:1px solid rgba(10,10,10,.28); }
.declare-actions,.declare-nav { margin-top:32px; }
.declare-actions { gap:10px; }
.declare-body .button.primary,.declare-body .ghost-btn { min-height:42px; padding:11px 20px; font-family:var(--declare-sans); font-size:.78rem; font-weight:500; line-height:1; border-radius:999px; transition:background .18s ease,color .18s ease,border-color .18s ease; }
.declare-body .button.primary { background:#0a0a0a; border:1px solid #0a0a0a; color:#fff; }
.declare-body .button.primary:hover { transform:none; background:#292929; box-shadow:none; }
.declare-body .ghost-btn { background:transparent; border:1px solid rgba(10,10,10,.34); color:#0a0a0a; }
.declare-body .ghost-btn:hover { background:#0a0a0a; border-color:#0a0a0a; color:#fff; }
.declare-tools { margin-top:16px; }
.declare-examples { padding:12px 0; margin-top:18px; background:transparent; border-top:1px solid rgba(10,10,10,.18); border-bottom:1px solid rgba(10,10,10,.18); border-radius:0; }
.declare-examples p { font-family:var(--declare-sans); }
.declare-ex-tag,.ai-tag { color:#0a0a0a; background:transparent; border:1px solid rgba(10,10,10,.2); border-radius:999px; }
.review-row { padding:30px 0; border-top:1px solid rgba(10,10,10,.2); }
.review-q,.review-ev,.review-ai { font-family:var(--declare-sans); }
.review-a { min-height:112px; font-size:1.4rem; }
.declare-body footer { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:28px; padding:34px clamp(22px,4vw,64px); color:#0a0a0a; background:#f7f6f2; border-top:1px solid rgba(10,10,10,.14); }
.declare-body footer p { font-family:var(--declare-sans); font-size:.72rem; color:rgba(10,10,10,.55); }
.declare-body footer p:last-child { justify-self:end; }

@media (max-width:720px) {
  .declare-body .site-header { min-height:64px; }
  .declare-body .desktop-nav { display:none; }
  .declare-body .header-cta { font-size:.7rem; padding:8px 13px; }
  .declare-shell { padding-top:74px; padding-bottom:96px; }
  .declare-card { padding:0; }
  .declare-card h2 { font-size:clamp(3rem,14vw,4.5rem); }
  .declare-input { min-height:132px; font-size:1.55rem; }
  .declare-nav { flex-direction:column-reverse; align-items:stretch; }
  .declare-nav-right { justify-content:space-between; }
  .declare-body footer { grid-template-columns:1fr; gap:14px; }
  .declare-body footer p:last-child { justify-self:start; }
}

/* Event entry: Residency/Founders own the high-contrast editorial frame;
   Luma owns immediate event facts; Partiful owns the single RSVP-like action.
   The grid uses real Ethös source imagery and never invents a scheduled event. */
.declare-body--event {
  color:var(--inverse-text-primary,#fff);
  background:var(--inverse-bg,#090909);
}
.declare-body--event:before {
  content:none;
  display:none;
  width:0;
  height:0;
  background:none;
  opacity:0;
}
.declare-body--event .site-header {
  color:var(--inverse-text-primary,#fff);
  background:color-mix(in srgb,var(--inverse-bg,#090909) 90%,transparent);
  border-bottom-color:var(--inverse-border-secondary,rgba(255,255,255,.16));
}
.declare-body--event .brand img { filter:invert(1); }
.declare-body--event .header-cta { border-color:var(--inverse-text-secondary,rgba(255,255,255,.72)); }
.declare-body--event .header-cta:hover {
  color:var(--inverse-action-text,#090909);
  background:var(--inverse-action-bg,#fff);
}
.declare-body--event .declare-shell {
  width:100%;
  max-width:1480px;
  padding-top:clamp(72px,8vw,116px);
  padding-bottom:clamp(88px,9vw,136px);
}
.event-invitation__mosaic {
  position:absolute;
  inset:0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(4,1fr);
  background:#111;
}
.event-invitation__mosaic:after {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.04) 64%);
  pointer-events:none;
}
.event-invitation__mosaic img {
  width:100%;
  height:100%;
  min-width:0;
  object-fit:cover;
  filter:grayscale(1) contrast(1.06);
}
.event-invitation__mosaic p {
  position:absolute;
  z-index:2;
  left:clamp(24px,4vw,58px);
  right:clamp(24px,4vw,58px);
  bottom:clamp(28px,4vw,56px);
  margin:0;
  font:400 clamp(2rem,3.6vw,4.3rem)/.93 var(--declare-serif);
  letter-spacing:0;
  color:#fff;
}
.declare-body--event footer {
  color:var(--inverse-text-primary,#fff);
  background:var(--inverse-bg,#090909);
  border-top-color:var(--inverse-border-secondary,rgba(255,255,255,.16));
}
.declare-body--event footer .brand img { filter:invert(1); }
.declare-body--event footer p { color:var(--inverse-text-tertiary,rgba(255,255,255,.58)); }

/* Keep every step of the event request legible after the invitation CTA. */
.declare-body--event .declare-card,
.declare-body--event .declare-card h2,
.declare-body--event .review-q,
.declare-body--event .review-ev,
.declare-body--event .review-ai {
  color:var(--inverse-text-primary,#fff);
}
.declare-body--event .declare-kicker,
.declare-body--event .declare-count,
.declare-body--event .declare-lead,
.declare-body--event .declare-why,
.declare-body--event .declare-note {
  color:var(--inverse-text-secondary,rgba(255,255,255,.72));
}
.declare-body--event .declare-note {
  border-left-color:var(--inverse-border-primary,rgba(255,255,255,.4));
}
.declare-body--event .declare-progress {
  background:var(--inverse-border-secondary,rgba(255,255,255,.16));
}
.declare-body--event .declare-progress span {
  background:var(--inverse-text-primary,#fff);
}
.declare-body--event .declare-input,
.declare-body--event .declare-evidence {
  color:var(--inverse-text-primary,#fff);
  caret-color:var(--inverse-text-primary,#fff);
  background:transparent;
  border-color:var(--inverse-border-primary,rgba(255,255,255,.4));
}
.declare-body--event .declare-input::placeholder,
.declare-body--event .declare-evidence::placeholder {
  color:var(--inverse-text-tertiary,rgba(255,255,255,.58));
}
.declare-body--event .declare-input:focus,
.declare-body--event .declare-evidence:focus {
  outline-color:var(--inverse-text-primary,#fff);
  border-color:var(--inverse-text-primary,#fff);
}
.declare-body--event .button.primary {
  color:var(--inverse-action-text,#090909);
  background:var(--inverse-action-bg,#fff);
  border-color:var(--inverse-action-bg,#fff);
}
.declare-body--event .button.primary:hover {
  color:var(--inverse-action-text,#090909);
  background:var(--inverse-action-bg-hover,#dededb);
  border-color:var(--inverse-action-bg-hover,#dededb);
}
.declare-body--event .ghost-btn {
  color:var(--inverse-text-primary,#fff);
  background:transparent;
  border-color:var(--inverse-border-primary,rgba(255,255,255,.4));
}
.declare-body--event .ghost-btn:hover {
  color:var(--inverse-action-text,#090909);
  background:var(--inverse-action-bg,#fff);
  border-color:var(--inverse-action-bg,#fff);
}
.declare-body--event .declare-examples,
.declare-body--event .review-row {
  border-color:var(--inverse-border-secondary,rgba(255,255,255,.16));
}
.declare-body--event .declare-ex-tag,
.declare-body--event .ai-tag {
  color:var(--inverse-text-primary,#fff);
  border-color:var(--inverse-border-primary,rgba(255,255,255,.4));
}

@media (max-width:620px) {
  .declare-body--event .declare-shell { padding-top:68px; padding-bottom:84px; }
}

/* ============================================================
   The Vision deck (deck.html), full-viewport slides as DATA.
   Movement voice, black/white, SF Pro Display headers.
   ============================================================ */
.deck-body { overflow: hidden; height: 100vh; background: #fbfbfa; }
.deck-header { position: fixed; top: 0; left: 0; right: 0; }
.deck-main { height: 100vh; display: flex; flex-direction: column; }
.deck-stage { flex: 1; display: flex; align-items: center; justify-content: center; padding: clamp(90px, 12vh, 140px) clamp(24px, 7vw, 120px) 96px; transition: background .5s ease, color .5s ease; }
.deck-stage.on-light { background: #fbfbfa; color: #0a0a0a; }
.deck-stage.on-dark { background: #0a0a0a; color: #ffffff; }
.slide-inner { max-width: 1040px; width: 100%; animation: deckin .5s ease both; }
@keyframes deckin { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.deck-eyebrow { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; text-transform: uppercase; letter-spacing: .18em; font-size: .82rem; font-weight: 600; color: var(--accent-2); margin: 0 0 22px; }
.deck-eyebrow.light { color: rgba(255,255,255,.6); }

.deck-title { font-size: clamp(2.1rem, 4.6vw, 4.1rem); line-height: 1.08; letter-spacing: -0.05em; font-weight: 660; margin: 0 0 30px; max-width: 20ch; }
.deck-title.light { color: #fff; }
.deck-body p { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: clamp(1.24rem, 1.7vw, 1.6rem); font-weight: 300; line-height: 1.5; color: rgba(10,10,10,.72); margin: 0 0 18px; max-width: 46ch; }

.deck-statement span { display: block; font-size: clamp(2.4rem, 6vw, 5.4rem); line-height: 1.04; letter-spacing: -0.055em; font-weight: 660; }
.deck-statement { margin: 0 0 30px; }
.deck-foot { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: clamp(1.24rem, 1.7vw, 1.6rem); font-weight: 300; line-height: 1.5; color: rgba(10,10,10,.66); margin: 0; max-width: 52ch; }

.deck-list { list-style: none; padding: 0; margin: 8px 0 30px; display: flex; flex-wrap: wrap; gap: 14px; }
.deck-list li { font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 620; letter-spacing: -0.03em; border: 1px solid var(--line); border-radius: 999px; padding: 12px 30px; }

.slide.cover .slide-inner { text-align: left; }
.deck-brand { font-family: "SF Pro Display",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-weight: 700; letter-spacing: .18em; font-size: clamp(3rem, 7vw, 6rem); margin: 0; }
.deck-cover-accent { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: clamp(1.8rem, 3.6vw, 3.1rem); font-weight: 600; margin: 10px 0 26px; }
.deck-cover-sub { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: clamp(1.24rem, 1.8vw, 1.7rem); font-weight: 300; color: rgba(10,10,10,.7); margin: 0; max-width: 40ch; }

.slide.close .slide-inner { text-align: left; }
.slide.close .button.primary { margin-top: 12px; background: #fff; border-color: #fff; color: #0a0a0a; padding: 15px 34px; }

.deck-controls { position: fixed; bottom: 0; left: 0; right: 0; height: 76px; display: flex; align-items: center; justify-content: center; gap: 18px; background: linear-gradient(to top, rgba(251,251,250,.96), rgba(251,251,250,0)); z-index: 20; }
.deck-arrow { font-size: 1.3rem; line-height: 1; width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: #0a0a0a; cursor: pointer; transition: .18s ease; }
.deck-arrow:hover:not(:disabled) { background: #0a0a0a; color: #fff; border-color: #0a0a0a; }
.deck-arrow:disabled { opacity: .3; cursor: default; }
.deck-dots { display: flex; gap: 9px; }
.deck-dot { width: 8px; height: 8px; border-radius: 999px; border: 0; padding: 0; background: rgba(10,10,10,.22); cursor: pointer; transition: .2s ease; }
.deck-dot.active { background: #0a0a0a; transform: scale(1.35); }
.deck-count { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: .86rem; font-weight: 600; color: var(--accent-2); min-width: 52px; text-align: center; }

@media (max-width: 640px) {
  .deck-stage { padding: 96px 22px 90px; align-items: flex-start; }
  .deck-title { margin-bottom: 22px; }
  .deck-dots { display: none; }
  .deck-list li { padding: 9px 20px; }
}

/* Deck controls adapt to the slide ground (the close slide is dark). No light gradient band. */
.deck-controls { background: transparent; }
.deck-controls.on-dark .deck-arrow { background: #fff; color: #0a0a0a; border-color: #fff; }
.deck-controls.on-dark .deck-arrow:disabled { opacity: .35; }
.deck-controls.on-dark .deck-dot { background: rgba(255,255,255,.3); }
.deck-controls.on-dark .deck-dot.active { background: #ffffff; }
.deck-controls.on-dark .deck-count { color: rgba(255,255,255,.62); }

/* Footer nav (links to the vision deck + pursuit declaration) */
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 8px 0 4px; }
.footer-nav a { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: .98rem; font-weight: 400; color: rgba(255,255,255,.72); text-decoration: none; transition: color .18s ease; }
.footer-nav a:hover { color: #fff; }

/* ============================================================
   The Vision Book (book.html), long-form reading, book=DATA.
   ============================================================ */
.book-body { background: #fbfbfa; }
.book-progressbar { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: #0a0a0a; transform: scaleX(0); transform-origin: left; z-index: 60; }
.book-main { padding: 0 clamp(22px, 6vw, 60px); }
#book-root { max-width: 720px; margin: 0 auto; }

.book-cover { padding: clamp(130px, 20vh, 260px) 0 clamp(60px, 10vh, 120px); border-bottom: 1px solid var(--line); }
.book-kicker { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; text-transform: uppercase; letter-spacing: .2em; font-size: .82rem; font-weight: 600; color: var(--accent-2); margin: 0 0 20px; }
.book-title { font-size: clamp(2.6rem, 6vw, 5rem); line-height: 1.04; letter-spacing: -0.05em; font-weight: 660; margin: 0 0 22px; }
.book-subtitle { font-family: "Playfair Display", Georgia, serif; font-style: italic; font-size: clamp(1.4rem, 2.6vw, 2.1rem); font-weight: 600; color: rgba(10,10,10,.78); margin: 0; }

.book-chapter { padding: clamp(56px, 9vh, 104px) 0; border-bottom: 1px solid var(--line); }
.book-chapter-head { margin-bottom: 30px; }
.book-eyebrow { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; text-transform: uppercase; letter-spacing: .16em; font-size: .8rem; font-weight: 600; color: var(--accent-2); margin: 0 0 16px; display: flex; align-items: baseline; gap: 14px; }
.book-chnum { font-size: .8rem; font-weight: 700; color: #0a0a0a; letter-spacing: .1em; }
.book-chapter-title { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.12; letter-spacing: -0.045em; font-weight: 660; margin: 0; max-width: 18ch; }

.book-prose p { font-family: "SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: clamp(1.16rem, 1.4vw, 1.38rem); font-weight: 300; line-height: 1.62; color: rgba(10,10,10,.82); margin: 0 0 1.35em; }
.book-prose p:last-child { margin-bottom: 0; }
.book-prose strong { font-weight: 700; color: #0a0a0a; }

.book-pull { margin: clamp(40px,6vh,64px) 0 0; padding: 0 0 0 26px; border-left: 3px solid #0a0a0a; font-family: "SF Pro Display","SF Pro Text",-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.2; letter-spacing: -0.03em; font-weight: 620; color: #0a0a0a; }

.book-close { padding: clamp(80px,14vh,160px) 0 clamp(90px,16vh,180px); text-align: left; }
.book-close h2 { font-size: clamp(2rem, 4.2vw, 3.4rem); line-height: 1.1; letter-spacing: -0.05em; font-weight: 660; margin: 0 0 30px; max-width: 16ch; }

@media (max-width: 560px) {
  .book-chapter-title, .book-title { max-width: none; }
}