/* ════════════════════════════════════════════════════════════════════
   FRQNCY · Crypto sub-hub artwork — shared chrome.
   Each sub-hub injects its own --sector-accent + --sector-warm.
   ──────────────────────────────────────────────────────────────────── */

:root {
  --navy: #0B1C3D;
  --navy-deep: #081530;
  --navy-mid: #0D2451;
  --gold: #C4973A;
  --gold-light: #E0C06A;
  --gold-soft: rgba(196, 151, 58, 0.14);
  --foam: #F5F8FB;
  --pearl: #FFFFFF;

  --serif: 'Cormorant', Georgia, serif;
  --body: 'Jost', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--navy); scroll-behavior: smooth; }
body {
  font-family: var(--body); font-weight: 300;
  color: var(--foam);
  line-height: 1.7;
  overflow-x: hidden;
  background: var(--navy);
}
::selection { background: var(--sector-soft, rgba(247, 147, 26, 0.4)); color: var(--pearl); }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: rgba(255,255,255,0.02); }
::-webkit-scrollbar-thumb { background: var(--sector-soft, rgba(247, 147, 26, 0.4)); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--sector-warm, rgba(247, 147, 26, 0.7)); }
a { color: var(--sector-warm); text-decoration: none; transition: color 0.3s ease; }
a:hover { color: var(--gold-light); }

nav.snav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  background: rgba(11, 28, 61, 0.55);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  height: 56px;
  display: flex; align-items: center; justify-content: space-between;
}
.snav-left { display: flex; align-items: center; gap: 1.75rem; min-width: 0; overflow: hidden; }
.snav-logo {
  font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.28em;
  color: var(--pearl); text-transform: uppercase; text-decoration: none;
  flex-shrink: 0; opacity: 0.85; transition: opacity 0.3s, text-shadow 0.3s;
}
.snav-logo:hover { opacity: 1; text-shadow: 0 0 20px var(--sector-soft); }
.snav-badge {
  font-size: 0.55rem; letter-spacing: 0.18em; color: var(--sector-warm);
  border: 1px solid currentColor; padding: 1px 6px; border-radius: 2px;
  vertical-align: middle; margin-left: 4px; opacity: 0.9;
}
.breadcrumb {
  font-size: 0.7rem; letter-spacing: 0.06em; color: rgba(245, 248, 251, 0.55);
  display: flex; align-items: center; gap: 0.4rem; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.breadcrumb a { color: rgba(245, 248, 251, 0.6); transition: color 0.2s; }
.breadcrumb a:hover { color: var(--foam); }
.breadcrumb .sep { opacity: 0.3; }
.snav-back {
  font-size: 0.68rem; letter-spacing: 0.12em; color: rgba(245, 248, 251, 0.7);
  border: 1px solid rgba(255,255,255,0.12); padding: 5px 14px; border-radius: 2px;
  transition: all 0.3s; text-decoration: none; flex-shrink: 0; white-space: nowrap;
}
.snav-back:hover { color: var(--foam); border-color: var(--sector-soft); }

.hero {
  position: relative; min-height: 100vh; padding-top: 56px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; background: var(--navy-deep);
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: saturate(0.8) brightness(0.42) contrast(1.1);
  transform: scale(1.04);
  animation: heroDrift 36s ease-in-out infinite alternate;
  z-index: 0;
}
@keyframes heroDrift {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.1) translate(-1%, -2%); }
}
.hero::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background:
    radial-gradient(ellipse at 30% 40%, var(--sector-soft) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(11, 28, 61, 0.55) 0%, rgba(11, 28, 61, 0.3) 30%, rgba(8, 21, 48, 0.92) 95%);
  pointer-events: none;
}
.hero-inner {
  position: relative; z-index: 3;
  width: 100%; max-width: 1280px;
  padding: 0 clamp(1.5rem, 5vw, 4rem);
  display: grid; grid-template-columns: 1fr auto;
  gap: 4rem; align-items: end;
  padding-bottom: clamp(5rem, 10vh, 8rem);
}
/* Hero layout variants — each sector picks one to differentiate identity */
.hero-inner.layout-split-right  { grid-template-columns: 1fr auto; }
.hero-inner.layout-split-left   { grid-template-columns: auto 1fr; }
.hero-inner.layout-split-left > .hero-glyph { order: -1; }
.hero-inner.layout-stacked      { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 1.5rem; max-width: 920px; }
.hero-inner.layout-stacked .hero-quote, .hero-inner.layout-stacked .hero-desc { margin-left: auto; margin-right: auto; }
.hero-inner.layout-centered     { grid-template-columns: 1fr; text-align: center; justify-items: center; max-width: 880px; }
.hero-inner.layout-centered .hero-glyph { display: none; }
.hero-inner.layout-centered .hero-quote, .hero-inner.layout-centered .hero-desc { margin-left: auto; margin-right: auto; }
.hero-inner.layout-corner       { grid-template-columns: 1fr; max-width: 920px; align-items: start; padding-top: 4rem; }
.hero-inner.layout-corner .hero-glyph {
  position: absolute; top: 80px; right: clamp(1.5rem, 5vw, 4rem);
  width: clamp(140px, 16vw, 220px);
}

/* h1 typography variants — five accents for the 21 sectors */
h1.hero-title.t-monumental { font-size: clamp(5rem, 16vw, 17rem); line-height: 0.82; letter-spacing: -0.045em; }
h1.hero-title.t-mid        { font-size: clamp(3rem, 8vw, 7rem); line-height: 0.92; letter-spacing: -0.03em; }
h1.hero-title.t-thin       { font-size: clamp(3.5rem, 10vw, 9rem); font-weight: 200; line-height: 0.9; letter-spacing: -0.02em; }
h1.hero-title.t-tight      { font-size: clamp(2.6rem, 6.5vw, 5.5rem); font-style: normal; font-weight: 400; letter-spacing: 0.05em; text-transform: uppercase; line-height: 1; }
h1.hero-title.t-bold       { font-size: clamp(4rem, 12vw, 11rem); font-weight: 500; line-height: 0.85; letter-spacing: -0.035em; }
h1.hero-title.t-pop        { font-size: clamp(5.5rem, 18vw, 19rem); font-weight: 500; line-height: 0.78; letter-spacing: -0.05em; }

/* Body pattern overlay — sits under all sections, very low opacity, sector-tinted */
main.sector-body::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--sector-pattern, none);
  background-size: var(--sector-pattern-size, 80px 80px);
  opacity: var(--sector-pattern-opacity, 0.05);
  z-index: 0;
}
main.sector-body > * { position: relative; z-index: 1; }
@media (max-width: 760px) {
  main.sector-body::before { opacity: calc(var(--sector-pattern-opacity, 0.05) * 0.6); }
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-size: 0.6rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--sector-warm); margin-bottom: 2rem; opacity: 0.95;
}
.hero-eyebrow::before { content: ''; display: block; width: 36px; height: 1px; background: var(--sector-warm); opacity: 0.5; }
h1.hero-title {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(3rem, 9vw, 8rem);
  line-height: 0.92; letter-spacing: -0.03em;
  color: var(--pearl);
  text-shadow: 0 4px 80px rgba(11, 28, 61, 0.7);
  margin-bottom: 2.5rem;
}
.hero-desc {
  max-width: 580px;
  font-size: clamp(1.05rem, 1.45vw, 1.2rem);
  font-weight: 300; line-height: 1.7;
  color: rgba(245, 248, 251, 0.88);
}
.hero-desc em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--sector-warm); font-size: 1.1em;
}
.hero-quote {
  margin-top: 2rem; padding-top: 1.5rem;
  border-top: 1px solid var(--sector-soft);
  max-width: 560px;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.45;
  color: rgba(245, 248, 251, 0.78);
}
.hero-quote cite {
  display: block;
  font-family: var(--body); font-style: normal; font-weight: 300;
  font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--sector-warm); margin-top: 0.85rem; opacity: 0.9;
}

/* Sector glyph signature */
.hero-glyph {
  width: clamp(180px, 22vw, 320px);
  aspect-ratio: 1; opacity: 0.95;
  filter: drop-shadow(0 0 60px var(--sector-soft));
  overflow: visible;
}
.glyph-rotate { transform-origin: 50% 50%; animation: glyphRotate 110s linear infinite; }
.glyph-rotate-rev { transform-origin: 50% 50%; animation: glyphRotate 140s linear infinite reverse; }
.glyph-pulse-1 { transform-origin: 50% 50%; animation: glyphPulse 6s ease-in-out infinite alternate; }
.glyph-pulse-2 { transform-origin: 50% 50%; animation: glyphPulse 6s ease-in-out infinite alternate; animation-delay: 3s; }
@keyframes glyphRotate { to { transform: rotate(360deg); } }
@keyframes glyphPulse {
  0%   { opacity: 0.4; transform: scale(0.92); }
  100% { opacity: 1;   transform: scale(1.06); }
}

.scroll-hint {
  position: absolute; bottom: 2rem; left: 50%;
  transform: translateX(-50%);
  font-size: 0.55rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(245, 248, 251, 0.55);
  display: flex; flex-direction: column; align-items: center; gap: 0.6rem;
  z-index: 4;
}
.scroll-hint::after {
  content: ''; width: 1px; height: 36px;
  background: linear-gradient(to bottom, rgba(245, 248, 251, 0.55), transparent);
  animation: drip 2.6s ease-in-out infinite;
}
@keyframes drip {
  0%, 100% { opacity: 0.3; transform: scaleY(0.6); transform-origin: top; }
  50%      { opacity: 1;   transform: scaleY(1);   transform-origin: top; }
}

.wave-divider { position: relative; width: 100%; height: 100px; overflow: hidden; pointer-events: none; }
.wave-divider svg { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; display: block; }
.wave-divider .w1 { animation: waveSlide 22s linear infinite; opacity: 0.55; }
.wave-divider .w2 { animation: waveSlide 16s linear infinite reverse; opacity: 0.4; }
.wave-divider .w3 { animation: waveSlide 30s linear infinite; opacity: 0.7; }
@keyframes waveSlide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

main.sector-body { position: relative; background: var(--navy); padding: 0 clamp(1.5rem, 5vw, 3rem); }
.section { max-width: 720px; margin: 0 auto; padding: clamp(5rem, 12vh, 9rem) 0; position: relative; }
.section-wide { max-width: 1080px; }
.section-narrow { max-width: 600px; }

.label {
  font-size: 0.58rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--sector-warm); margin-bottom: 2rem; opacity: 0.9;
  display: inline-flex; align-items: center; gap: 0.7rem;
}
.label::before { content: ''; display: block; width: 32px; height: 1px; background: var(--sector-warm); opacity: 0.5; }

h2 {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(2.2rem, 5.4vw, 4.2rem);
  line-height: 1.04; letter-spacing: -0.02em;
  color: var(--pearl); margin-bottom: 2rem; max-width: 18ch;
}
h2 strong { font-style: normal; font-weight: 400; color: var(--sector-warm); }
h3 {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.2; color: var(--foam); margin-bottom: 0.85rem;
}
p.lede {
  font-size: clamp(1.1rem, 1.4vw, 1.3rem);
  font-weight: 300; line-height: 1.65;
  color: var(--foam); margin-bottom: 1.6rem;
}
p { font-size: 1rem; line-height: 1.85; color: rgba(245, 248, 251, 0.72); margin-bottom: 1.4rem; }
p em { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--sector-warm); font-size: 1.06em; }

blockquote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.5rem, 3vw, 2.4rem);
  line-height: 1.3; letter-spacing: -0.005em;
  color: var(--pearl);
  padding: 2.5rem 0 2.5rem 2rem; margin: 3rem 0;
  border-left: 1px solid var(--sector-soft);
  max-width: 26ch;
}
blockquote cite {
  display: block;
  font-family: var(--body); font-style: normal; font-weight: 300;
  font-size: 0.65rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--sector-warm); margin-top: 1.5rem; opacity: 0.9;
}

.bleed {
  position: relative; width: 100vw; margin-left: calc(50% - 50vw);
  height: clamp(50vh, 70vh, 600px);
  margin-top: clamp(3rem, 6vh, 5rem); margin-bottom: clamp(3rem, 6vh, 5rem);
  overflow: hidden; display: flex; align-items: center; justify-content: center;
}
.bleed img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(0.55) saturate(0.9); }
.bleed::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,28,61,0.55) 0%, rgba(11,28,61,0.18) 30%, rgba(11,28,61,0.18) 70%, rgba(11,28,61,0.78) 100%);
  pointer-events: none;
}
.bleed-cap {
  position: relative; z-index: 2;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.4rem, 3vw, 2.4rem);
  line-height: 1.3; color: var(--pearl);
  text-align: center; max-width: 26ch; padding: 0 1.5rem;
  text-shadow: 0 2px 30px rgba(11, 28, 61, 0.7);
}
.bleed-cap em {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  color: var(--sector-warm);
}

/* HERO STAT STRIP — sector-iconic monospace numbers between h1 and descriptor */
.hero-stats {
  display: flex; gap: clamp(1.5rem, 3vw, 3rem); flex-wrap: wrap;
  margin: 0 0 2.2rem; padding: 0.9rem 0;
  border-top: 1px solid var(--sector-soft);
  border-bottom: 1px solid var(--sector-soft);
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace;
}
.hero-stats > div { display: flex; flex-direction: column; gap: 4px; }
.hero-stat-num {
  font-size: clamp(1rem, 1.4vw, 1.3rem);
  color: var(--sector-warm); font-weight: 500; letter-spacing: -0.01em;
}
.hero-stat-lbl {
  font-size: 0.55rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: rgba(245, 248, 251, 0.5);
  font-family: var(--body); font-weight: 300;
}

/* GHOST H1 — Linear-style atmospheric letterform behind the hero */
.hero-inner > div { position: relative; }
.hero-ghost {
  position: absolute;
  top: -8%; left: -6%;
  pointer-events: none; z-index: 0;
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(10rem, 28vw, 28rem); line-height: 1;
  color: var(--sector-warm); opacity: 0.05;
  white-space: nowrap; user-select: none;
}
.hero-inner > div > * { position: relative; z-index: 1; }

/* DROP CAP — first prelude paragraph gets a serif initial */
.section-narrow > p:first-of-type::first-letter {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 4em; float: left; line-height: 0.85;
  margin: 0.1em 0.14em -0.05em -0.04em;
  color: var(--sector-warm);
}

/* TYPEWRITER QUOTE — clip-path reveal once when hero scrolls in */
.hero-quote { overflow: hidden; }
.hero-quote.in-view {
  animation: typewriter 2.4s steps(40, end) 0.4s both;
}
@keyframes typewriter {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0     0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-quote.in-view { animation: none; clip-path: none; }
}

/* DOWNLOAD CANON — brutalist Bitcoin-maxi treatment for sectors that
   host their canonical text locally. Sharp corners, mono SHA-256
   verify, primary source link. Built for the whitepaper but reusable
   for any sector that drops a PDF in its directory. */
.download-canon {
  margin: 1rem 0 0;
  padding: 2.4rem 2.4rem 2rem;
  background: linear-gradient(180deg, rgba(247, 147, 26, 0.08) 0%, rgba(0, 0, 0, 0.55) 100%);
  border: 1px solid var(--sector-warm);
  border-radius: 0;
  position: relative;
  overflow: hidden;
}
.download-canon::before {
  content: ""; position: absolute;
  top: 0; left: 0; right: 0; height: 3px;
  background: var(--sector-accent);
}
.dl-tag {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: var(--sector-accent);
  margin-bottom: 1.4rem;
}
.dl-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.15; color: var(--pearl);
  margin: 0 0 0.6rem;
  letter-spacing: -0.01em;
  max-width: none;
}
.dl-author {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sector-warm);
  margin-bottom: 1.2rem;
}
.dl-epigraph {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  line-height: 1.5;
  color: rgba(245, 248, 251, 0.7);
  padding: 0.8rem 0 0.8rem 1.2rem;
  border-left: 2px solid var(--sector-soft);
  margin: 0 0 1.2rem;
}
.dl-subtitle {
  font-size: 1rem; line-height: 1.65;
  color: rgba(245, 248, 251, 0.85);
  margin: 0 0 1.6rem;
  max-width: 56ch;
}
.dl-actions {
  display: flex; gap: 0.8rem; flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.dl-btn {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 0.95rem 1.4rem;
  border: 1px solid currentColor;
  text-decoration: none;
  transition: all 0.2s ease;
  font-weight: 500;
}
.dl-btn.primary {
  background: var(--sector-accent);
  color: #000;
  border-color: var(--sector-accent);
}
.dl-btn.primary:hover {
  background: var(--sector-warm);
  border-color: var(--sector-warm);
}
.dl-btn.secondary {
  background: transparent;
  color: var(--sector-warm);
  border-color: var(--sector-warm);
}
.dl-btn.secondary:hover {
  background: rgba(247, 147, 26, 0.08);
  color: var(--pearl);
}
.dl-hash, .dl-genesis {
  display: flex; flex-direction: column; gap: 0.3rem;
  padding: 0.85rem 0;
  border-top: 1px dashed rgba(247, 147, 26, 0.25);
  text-decoration: none;
  transition: background 0.2s;
}
.dl-genesis:hover { background: rgba(247, 147, 26, 0.04); }
.dl-hash-label {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--sector-warm); opacity: 0.85;
}
.dl-hash-value {
  font-family: ui-monospace, 'JetBrains Mono', 'SF Mono', monospace;
  font-size: 0.72rem; letter-spacing: 0.01em;
  color: rgba(245, 248, 251, 0.7);
  word-break: break-all; line-height: 1.4;
  background: transparent; padding: 0;
}
@media (max-width: 600px) {
  .download-canon { padding: 1.8rem 1.4rem 1.5rem; }
  .dl-actions { flex-direction: column; }
  .dl-btn { text-align: center; }
}

/* PROJECT FEATURE GRID — rich per-project cards with image, extended
   explainer, and full link set (website, docs, X, extra). Per user:
   "pictures of these projects on the bitcoin page aswell as ... a
   link to all the projects and explainers to the projects". */
.project-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 1.4rem;
  margin: 1rem 0 1rem;
}
.project-feature {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.project-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.04);
}
.pf-image {
  width: 100%; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; position: relative;
}
.pf-image img {
  width: 100%; height: 100%; object-fit: contain;
  padding: 1.5rem;
  filter: brightness(0.95) saturate(0.95);
  transition: transform 0.5s ease;
}
.project-feature:hover .pf-image img {
  transform: scale(1.03);
}
.pf-body {
  padding: 1.4rem 1.5rem 1.3rem;
  display: flex; flex-direction: column; gap: 0.65rem;
  flex: 1;
}
.pf-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 0.85rem;
}
.pf-name {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.4rem, 2vw, 1.7rem);
  color: var(--pearl); line-height: 1.15;
  margin: 0;
}
.pf-tier {
  font-size: 0.5rem; letter-spacing: 0.22em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 2px;
  border: 1px solid currentColor;
  white-space: nowrap; flex-shrink: 0;
}
.pf-meta {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.62rem; letter-spacing: 0.06em;
  color: rgba(245, 248, 251, 0.55);
  text-transform: uppercase;
}
.pf-tagline {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.05rem; line-height: 1.4;
  color: var(--sector-warm);
  margin: 0;
}
.pf-body-text {
  font-size: 0.84rem; line-height: 1.7;
  color: rgba(245, 248, 251, 0.72);
  margin: 0;
}
.pf-footer {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex; align-items: center; gap: 0.7rem;
  flex-wrap: wrap;
}
.pf-link {
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(245, 248, 251, 0.6);
  border-bottom: 1px dotted rgba(255,255,255,0.2);
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
  padding-bottom: 1px;
}
.pf-link:hover { color: var(--sector-warm); border-color: var(--sector-warm); }
.pf-link.primary {
  color: var(--sector-warm);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  letter-spacing: 0.18em;
}
.pf-link.primary:hover { color: var(--gold-light); border-color: var(--gold-light); }
@media (max-width: 380px) {
  .project-feature-grid { grid-template-columns: 1fr; }
  .pf-body { padding: 1.2rem 1.1rem 1.1rem; }
  .pf-image img { padding: 1.1rem; }
}

/* SEMINAL TEXT — the founding document per sector. Substantial pull-quote
   from a real primary source (Bitcoin whitepaper, Cypherpunk Manifesto,
   etc.) with a direct link. Per user: "excerpts from the bitcoin
   whitepaper and a link to it... Learn from this and improve the other
   sites aswell." */
.seminal {
  margin: 1.5rem 0 0;
  padding: 2rem 2.2rem;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid var(--sector-soft);
  border-radius: 4px;
  position: relative;
}
.seminal::before {
  content: "“"; position: absolute;
  top: -1.4rem; left: 1.6rem;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 5rem; line-height: 1;
  color: var(--sector-warm); opacity: 0.55;
  pointer-events: none;
}
.seminal-head {
  display: flex; flex-direction: column; gap: 0.3rem;
  margin-bottom: 1.4rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--sector-soft);
}
.seminal-title {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(1.3rem, 2.2vw, 1.8rem);
  color: var(--foam); line-height: 1.2;
}
.seminal-meta {
  font-size: 0.6rem; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--sector-warm); opacity: 0.95;
}
.seminal-quote {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.65;
  color: rgba(245, 248, 251, 0.92);
  margin: 0 0 1.6rem;
  padding: 0;
  border: none;
  max-width: none;
}
.seminal-link {
  display: inline-block;
  font-size: 0.65rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sector-warm);
  border-bottom: 1px solid currentColor; padding-bottom: 3px;
  transition: color 0.3s, border-color 0.3s;
}
.seminal-link:hover { color: var(--gold-light); border-color: var(--gold-light); }
@media (max-width: 600px) {
  .seminal { padding: 1.6rem 1.4rem; }
  .seminal::before { font-size: 3.5rem; top: -0.8rem; left: 1rem; }
}

/* COUNTER-BOX — "What would change our mind" objection + falsification.
   Rubric's "Pointed" anchor (Axis 2 score 8+). Lives between the bleed
   image and the tech grid on every sub-hub. */
.counter-box {
  max-width: 720px; margin: clamp(3rem, 6vh, 5rem) auto;
  padding: 1.6rem 1.8rem;
  background: rgba(255, 255, 255, 0.025);
  border-left: 2px solid var(--sector-warm);
  border-radius: 0 3px 3px 0;
}
.counter-box .cb-tag {
  font-size: 0.55rem; letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--sector-warm);
  margin-bottom: 0.85rem; opacity: 0.95;
  font-family: var(--body); font-weight: 400;
}
.counter-box p {
  font-size: 0.94rem; line-height: 1.7;
  color: rgba(245, 248, 251, 0.78);
  margin-bottom: 0.7rem;
}
.counter-box p:last-child { margin-bottom: 0; }
.counter-box strong {
  color: var(--sector-warm); font-weight: 500;
  font-family: var(--body);
}

/* DESK NOTE — dated dispatch, distinct from counter-box.
   Per Juror 3 audit: counter-box keeps the border-left (editorial gravitas),
   desk-note becomes a horizontal monospace dateline with top+bottom rules
   so the two patterns no longer rhyme. */
.desk-note {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.2rem; align-items: center;
  padding: 0.9rem 0;
  margin: 0 0 1.6rem;
  border-top: 1px solid var(--sector-soft);
  border-bottom: 1px solid var(--sector-soft);
  background: transparent;
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.78rem; line-height: 1.55;
  color: rgba(245, 248, 251, 0.78);
  letter-spacing: 0.005em;
}
.desk-note .dn-date {
  font-family: inherit;
  font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sector-warm);
  font-weight: 500;
}
.desk-note .dn-tag {
  font-size: 0.56rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(245, 248, 251, 0.42);
  font-weight: 400;
}

/* TICKER PCT — 24h delta chip */
.tk-pct {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.02em;
  margin-left: 0.35rem;
  padding: 1px 5px; border-radius: 2px;
  white-space: nowrap;
}
.tk-pct.up   { color: #7BD0A0; background: rgba(123, 208, 160, 0.10); }
.tk-pct.down { color: #E58787; background: rgba(229, 135, 135, 0.10); }
.tk-pct.flat { color: rgba(245, 248, 251, 0.5); background: rgba(255, 255, 255, 0.04); }

/* PER-SECTOR HERO FILTER — heavy enough that OG logos crop out
   entirely; only colour-field bleed survives as atmospheric texture.
   Per Juror 3 audit: previous values left logos legible. */
.hero-bg {
  filter: var(--hero-filter, saturate(0.4) brightness(0.32) contrast(1.05) blur(14px));
  background-size: 220%;
  background-position: 50% 50%;
  opacity: 0.55;
}
/* Stronger overlay so the logo can't read through */
.hero::after {
  background:
    radial-gradient(ellipse at 30% 40%, var(--sector-soft) 0%, transparent 55%),
    linear-gradient(to bottom, rgba(11, 28, 61, 0.7) 0%, rgba(11, 28, 61, 0.55) 30%, rgba(8, 21, 48, 0.96) 95%) !important;
}
/* Bleed image gets the same logo-killing treatment */
.bleed img {
  filter: brightness(0.32) saturate(0.5) blur(8px);
  transform: scale(1.4);
}
.bleed::after {
  background: linear-gradient(180deg, rgba(11,28,61,0.78) 0%, rgba(11,28,61,0.5) 30%, rgba(11,28,61,0.5) 70%, rgba(11,28,61,0.9) 100%);
}

/* DEFAULT-HIDE unrated and avoid tiers — conviction over noise */
.tier-bar .ttab[data-tier="unrated"] { opacity: 0.55; }
.tier-bar .ttab[data-tier="avoid"] { display: none !important; }
.project[data-tier="avoid"] { display: none; }

/* TECH-INSIDE-SECTOR explainer block — 5-7 native protocols per sub-hub */
.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 2px; overflow: hidden;
  margin: 2rem 0 1rem;
}
.tech-card {
  background: var(--navy-mid);
  padding: 1.6rem 1.5rem 1.5rem;
  display: flex; flex-direction: column; gap: 0.5rem;
  transition: background 0.4s ease;
}
.tech-card:hover { background: rgba(15, 36, 81, 0.95); }
.tech-card-head { display: flex; align-items: baseline; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.2rem; }
.tech-card-name {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.4rem; color: var(--foam); line-height: 1.15;
}
.tech-card-year {
  font-family: ui-monospace, 'JetBrains Mono', monospace;
  font-size: 0.6rem; letter-spacing: 0.16em; color: var(--sector-warm); opacity: 0.7;
}
.tech-card-tag {
  font-size: 0.55rem; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--sector-warm); opacity: 0.85;
  border: 1px solid var(--sector-soft);
  padding: 1px 7px; border-radius: 2px;
  margin-bottom: 0.6rem; align-self: flex-start;
}
.tech-card p {
  font-size: 0.88rem; line-height: 1.7;
  color: rgba(245, 248, 251, 0.72); margin: 0;
}

/* TICKER RAIL — CoinGecko-style logo strip above the working set */
.ticker-rail {
  display: flex; gap: 0.6rem; flex-wrap: wrap;
  margin: 0 0 1.6rem;
  padding: 0.7rem 0.7rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 4px;
}
.tk-card {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 6px 10px 6px 6px;
  border-radius: 24px;
  background: rgba(11, 28, 61, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.06);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  white-space: nowrap;
}
.tk-card:hover {
  transform: translateY(-1px);
  border-color: var(--sector-warm);
  background: rgba(13, 36, 81, 0.95);
}
.tk-avatar {
  width: 28px; height: 28px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--body); font-weight: 500; font-size: 0.6rem;
  letter-spacing: 0.04em;
  flex-shrink: 0; overflow: hidden; position: relative;
}
.tk-avatar img {
  width: 70%; height: 70%; object-fit: contain;
  display: block;
}
.tk-avatar .tk-fallback {
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  font-size: 0.62rem; letter-spacing: 0.05em;
}
.tk-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px;
  line-height: 1.1;
  min-width: 0;
}
.tk-ticker {
  display: block;
  font-family: var(--body); font-weight: 500;
  font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--foam);
}
.tk-name {
  display: block;
  font-family: var(--body); font-weight: 300;
  font-size: 0.6rem; color: rgba(245, 248, 251, 0.55);
  letter-spacing: 0.01em;
}
@media (max-width: 600px) {
  .ticker-rail { gap: 0.4rem; padding: 0.5rem; }
  .tk-card { padding: 4px 8px 4px 4px; }
  .tk-avatar { width: 22px; height: 22px; }
  .tk-name { display: none; }
}

/* PROJECTS — sector grid */
.tier-bar {
  display: flex; gap: 0.5rem; flex-wrap: wrap;
  margin: 1.5rem 0 1.6rem;
}
.ttab {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 6px 14px; border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(245, 248, 251, 0.65);
  background: none; cursor: pointer; font-family: var(--body);
  transition: all 0.2s ease;
}
.ttab:hover { color: var(--foam); border-color: rgba(255, 255, 255, 0.32); }
.ttab.active {
  color: var(--sector-accent);
  border-color: var(--sector-accent);
  background: var(--sector-soft);
}
.ttab .ct { opacity: 0.55; margin-left: 0.4rem; font-size: 0.95em; }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 1.2rem;
  margin: 0.6rem 0 1rem;
}
.project {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transition: transform 0.3s ease, border-color 0.3s ease, background 0.3s ease;
}
.project:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.05);
}
.project-accent { height: 4px; flex-shrink: 0; }
.project-body {
  padding: 1.4rem 1.4rem 1rem;
  flex: 1; display: flex; flex-direction: column; gap: 0.5rem;
}
.project-head { display: flex; align-items: center; gap: 0.85rem; }
.project-icon {
  width: 56px; height: 56px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 500; font-size: 1.2rem;
  color: var(--pearl); flex-shrink: 0;
  position: relative; overflow: hidden;
}
.project-icon img {
  width: 72%; height: 72%; object-fit: contain; display: block;
}
.project-icon .project-icon-fallback {
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  font-family: var(--serif); font-weight: 500;
}
.project-chain {
  font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245, 248, 251, 0.45);
}
.project-foot-links {
  display: inline-flex; align-items: center; gap: 0.65rem;
}
.project-aux {
  font-size: 0.62rem; letter-spacing: 0.1em;
  color: rgba(245, 248, 251, 0.55);
  border-bottom: 1px dotted rgba(255,255,255,0.2);
  text-decoration: none; transition: color 0.2s;
}
.project-aux:hover { color: var(--sector-warm); border-bottom-color: var(--sector-warm); }
.project-meta { flex: 1; min-width: 0; }
.project-name {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.25rem; color: var(--pearl); line-height: 1.15;
}
.project-ticker {
  font-size: 0.58rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(245, 248, 251, 0.5); margin-top: 2px;
}
.project-tier {
  font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 2px;
  border: 1px solid currentColor;
  margin-left: auto;
  white-space: nowrap;
}
.tier-core        { color: var(--gold-light); border-color: rgba(196,151,58,0.5); }
.tier-conviction  { color: #7BD0A0;          border-color: rgba(123,208,160,0.5); }
.tier-watch       { color: #87B8E0;          border-color: rgba(135,184,224,0.5); }
.tier-speculative { color: #C8A3F0;          border-color: rgba(200,163,240,0.45); }
.tier-avoid       { color: #E58787;          border-color: rgba(229,135,135,0.5); }
.tier-unrated     { color: rgba(245,248,251,0.5); border-color: rgba(255,255,255,0.18); }

.project-tags { display: flex; gap: 0.35rem; flex-wrap: wrap; margin-top: 0.2rem; }
.ptag {
  font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 2px;
  border: 1px solid var(--sector-soft); color: var(--sector-warm);
  background: var(--sector-bg, rgba(255,255,255,0.03));
}
.project-desc { font-size: 0.82rem; line-height: 1.65; color: rgba(245, 248, 251, 0.7); margin-top: 0.2rem; }
.project-why { font-size: 0.76rem; line-height: 1.6; color: rgba(245, 248, 251, 0.85); margin-top: 0.3rem; }
.project-why strong {
  display: block; margin-bottom: 0.3rem;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--gold);
}
.project-foot {
  margin-top: auto;
  padding: 0.85rem 1.4rem;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
}
.project-link {
  font-size: 0.6rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--sector-warm);
  border-bottom: 1px solid currentColor; padding-bottom: 2px;
  transition: color 0.3s, border-color 0.3s;
  text-decoration: none;
}
.project-link:hover { color: var(--gold-light); border-color: var(--gold-light); }
.project-cat { font-size: 0.5rem; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(245, 248, 251, 0.4); }

.empty-grid {
  text-align: center; padding: 3rem 1rem;
  color: rgba(245, 248, 251, 0.5);
  font-style: italic;
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: 4px;
}

/* PRACTICE */
.practice { display: grid; gap: 1.2rem; margin: 2.5rem 0 1rem; }
.step {
  display: grid; grid-template-columns: 60px 1fr; gap: 1.6rem;
  padding: 1.4rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  align-items: baseline;
}
.step:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.step-num {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.7rem, 2.6vw, 2.2rem);
  color: var(--sector-warm); opacity: 0.85; line-height: 1;
}
.step-body strong {
  display: block;
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: 1.25rem; color: var(--foam); margin-bottom: 0.4rem;
}
.step-body p { margin-bottom: 0; max-width: 56ch; font-size: 0.94rem; }

/* CTA + closing */
.cta {
  margin: clamp(2.5rem, 5vh, 4rem) 0 2rem;
  padding: 2rem 2rem;
  background: var(--sector-soft);
  border: 1px solid var(--sector-warm-soft, rgba(247, 147, 26, 0.25));
  border-radius: 4px;
  text-align: center;
}
.cta h3 {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--pearl); margin-bottom: 0.6rem; line-height: 1.2;
}
.cta p {
  font-size: 0.88rem; color: rgba(245, 248, 251, 0.68);
  max-width: 480px; margin: 0 auto 1.2rem; line-height: 1.7;
}
.cta-buttons { display: flex; gap: 0.7rem; justify-content: center; flex-wrap: wrap; }
.cta-btn {
  font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase;
  padding: 10px 24px; border-radius: 2px;
  border: 1px solid; transition: all 0.3s ease;
  text-decoration: none; font-family: var(--body);
}
.cta-btn.primary {
  background: var(--sector-accent); border-color: var(--sector-accent); color: var(--navy-deep);
  font-weight: 500;
}
.cta-btn.primary:hover { background: var(--sector-warm); border-color: var(--sector-warm); }
.cta-btn.secondary { color: rgba(245, 248, 251, 0.8); border-color: rgba(255, 255, 255, 0.18); }
.cta-btn.secondary:hover { color: var(--pearl); border-color: rgba(255, 255, 255, 0.4); }

.closing {
  position: relative; min-height: 70vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  margin-top: clamp(3rem, 8vh, 6rem);
  padding: clamp(3rem, 8vh, 6rem) 1.5rem;
  overflow: hidden;
}
.closing-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: brightness(0.4) saturate(0.85);
}
.closing-bg::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, rgba(11, 28, 61, 0.45) 30%, rgba(11, 28, 61, 0.95) 100%);
}
.closing-inner { position: relative; z-index: 2; max-width: 38ch; margin: 0 auto; }
.closing p {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(1.3rem, 2.4vw, 2rem);
  line-height: 1.45; color: var(--pearl);
  text-shadow: 0 2px 30px rgba(11, 28, 61, 0.7);
  margin: 0 0 1.2rem;
}
.closing p strong { font-style: normal; font-weight: 400; color: var(--sector-warm); }
.closing cite {
  display: block;
  font-family: var(--body); font-style: normal; font-weight: 300;
  font-size: 0.62rem; letter-spacing: 0.4em; text-transform: uppercase;
  color: var(--sector-warm); margin-top: 1.5rem; opacity: 0.9;
}

footer.site-foot {
  background: var(--navy-deep);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 3rem clamp(1.25rem, 5vw, 2.5rem);
  text-align: center; position: relative; z-index: 2;
}
footer.site-foot .wm {
  font-family: var(--serif); font-weight: 300;
  font-size: 1rem; letter-spacing: 0.32em;
  color: rgba(245, 248, 251, 0.4); text-transform: uppercase;
}
footer.site-foot .legal {
  font-size: 0.66rem; letter-spacing: 0.1em;
  color: rgba(245, 248, 251, 0.3);
  margin-top: 0.5rem; display: block;
}

.fade-up {
  opacity: 0; transform: translateY(30px);
  transition: opacity 1.2s cubic-bezier(0.22, 0.61, 0.36, 1),
              transform 1.2s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.fade-up.in { opacity: 1; transform: translateY(0); }

@media (max-width: 760px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2rem; }
  .hero-glyph { width: 180px; }
  .breadcrumb { display: none; }
  .step { grid-template-columns: 40px 1fr; gap: 1rem; }
  blockquote { padding-left: 1rem; font-size: 1.4rem; }
}
/* 380px breakpoint — fixes hero-stats wrap, tech-grid + projects-grid overflow */
@media (max-width: 380px) {
  .hero-stats { flex-direction: column; gap: 0.7rem; padding: 0.8rem 0; }
  .hero-stats > div { flex-direction: row; align-items: baseline; gap: 0.7rem; }
  .tech-grid { grid-template-columns: 1fr; }
  .tech-card { padding: 1.2rem 1rem 1.1rem; }
  .projects-grid { grid-template-columns: 1fr; }
  .desk-note { grid-template-columns: 1fr; gap: 0.5rem; padding: 0.7rem 0; text-align: left; }
  .desk-note .dn-tag { display: none; }
  .counter-box { padding: 1.2rem 1.1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg, .scroll-hint::after,
  .glyph-rotate, .glyph-rotate-rev,
  .glyph-pulse-1, .glyph-pulse-2,
  .wave-divider .w1, .wave-divider .w2, .wave-divider .w3 { animation: none; }
  .fade-up { transition: none; opacity: 1; transform: none; }
}