/* ==========================================================================
   NICOLESCU PERINI & CO
   Vol. I — The Republic of Letters
   v3 · A publication, not a website. Clean edition.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500&family=Inter+Tight:wght@300;400;500;600&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

/* ==========================================================================
   Tokens — restrained palette
   ========================================================================== */
:root {
  /* Surfaces */
  --paper: #FFFFFF;            /* primary background — true paper white */
  --paper-warm: #FAF8F4;       /* faint warmth for banded sections */
  --paper-deep: #F2EFE8;       /* deeper banding, used very sparingly */

  /* Inks */
  --ink: #121010;              /* main text, near-black */
  --ink-soft: #3A3633;         /* secondary text */
  --ink-ghost: #8A847C;        /* captions, metadata */
  --ink-mute: #C9C4BC;         /* very faint, for rules and dividers */

  /* The single accent — royal violet, used with intent */
  --accent: #440480;
  --accent-hover: #5A0BA0;
  --accent-faint: rgba(68, 4, 128, 0.08);
  --accent-glow: rgba(68, 4, 128, 0.18);

  /* Secondary, rare — gold reserved for traditional ornament only */
  --gold: #B8935A;
  --gold-deep: #8C6B3E;

  /* Rules */
  --rule: rgba(18, 16, 16, 0.18);
  --rule-soft: rgba(18, 16, 16, 0.10);
  --rule-ghost: rgba(18, 16, 16, 0.05);

  /* Type */
  --display: 'Cormorant Garamond', 'Times New Roman', serif;
  --body: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', 'Courier New', monospace;

  /* Rhythm */
  --gutter: clamp(1.5rem, 3.5vw, 3rem);
  --nav-height: 92px;
  --ease: cubic-bezier(0.2, 0.65, 0.25, 1);
  --ease-ink: cubic-bezier(0.25, 0.1, 0.25, 1);
}

/* ==========================================================================
   Reset & base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.55;
  font-weight: 400;
  letter-spacing: 0;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* Whisper of warmth — barely-there gradient, not texture */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse at 12% 8%, rgba(68, 4, 128, 0.018) 0%, transparent 55%),
    radial-gradient(ellipse at 88% 92%, rgba(184, 147, 90, 0.022) 0%, transparent 55%);
}

/* ==========================================================================
   Typography primitives
   ========================================================================== */
h1, h2, h3, h4, h5, h6 { font-family: var(--display); font-weight: 400; color: var(--ink); line-height: 1.08; letter-spacing: -0.008em; }
p { margin: 0; }
a { color: inherit; text-decoration: none; position: relative; }
::selection { background: var(--accent); color: var(--paper); }

.smallcaps {
  font-family: var(--display);
  font-variant: small-caps;
  letter-spacing: 0.14em;
  font-weight: 500;
}

.tabular {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 400;
}

.tabular-ghost {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  font-weight: 400;
}

.accent { color: var(--accent); }

.numeral {
  font-family: var(--display);
  font-style: italic;
  font-weight: 400;
  color: var(--ink-ghost);
  letter-spacing: 0.05em;
}

/* ==========================================================================
   The Bar — top navigation, glassmorphism, always present
   ========================================================================== */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(18, 16, 16, 0.08);
  transition: background 0.4s var(--ease), border-color 0.4s var(--ease);
}

.topbar.scrolled {
  background: rgba(255, 255, 255, 0.78);
  border-bottom-color: rgba(18, 16, 16, 0.12);
}

/* Brand — logo mark + wordmark */
.brand {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--ink);
  flex-shrink: 0;
}

.brand-mark {
  width: auto;
  height: 44px;
  max-width: 160px;
  flex-shrink: 0;
  display: block;
  color: var(--ink);
  transition: color 0.3s var(--ease), transform 0.4s var(--ease);
}

.brand:hover .brand-mark { color: var(--accent); transform: rotate(-3deg); }

.brand-text {
  font-family: var(--display);
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  font-weight: 500;
  line-height: 1;
}

.brand-text em {
  font-style: italic;
  font-weight: 400;
  color: var(--ink-soft);
}

/* Top menu */
.topmenu {
  display: flex;
  gap: 2.25rem;
  align-items: center;
}

.topmenu a {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 0.35rem 0;
  transition: color 0.3s var(--ease);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
}

.topmenu a::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform 0.4s var(--ease);
}

.topmenu a:hover { color: var(--ink); }
.topmenu a:hover::before { transform: scale(1); }

.topmenu a.active { color: var(--accent); }
.topmenu a.active::before {
  transform: scale(1);
  animation: pulse-dot 2.6s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.4); opacity: 0.55; }
}

/* Mobile toggle (hidden on desktop) */
.nav-toggle {
  display: none;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--ink);
}

/* ==========================================================================
   Page scaffolding — single column, top nav above
   ========================================================================== */
.page {
  position: relative;
  z-index: 2;
  padding-top: var(--nav-height);
  min-height: 100vh;
}

.folio {
  position: relative;
  min-width: 0;
}

/* Folio masthead — the running head of the page */
.folio-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: 1.5rem var(--gutter) 1.25rem;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}

.folio-header .edition {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}

.folio-header .edition em { color: var(--ink); font-style: normal; font-weight: 500; }

.folio-header .folio-date {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-soft);
}

/* ==========================================================================
   The Hero — front matter, two-column with ornament panel
   ========================================================================== */
.hero {
  padding: 4.5rem var(--gutter) 4rem;
  max-width: 1500px;
  margin: 0 auto;
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.5rem; }
}

.hero-text { min-width: 0; max-width: 720px; }

.hero-kicker {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-kicker::before {
  content: '';
  display: inline-block;
  width: 32px;
  height: 1px;
  background: var(--accent);
}

.hero-title {
  font-family: var(--display);
  font-size: clamp(3rem, 7vw, 5.6rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin-bottom: 1.75rem;
  color: var(--ink);
}

.hero-title em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}

.hero-deck {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.45;
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 44ch;
  margin-bottom: 2.5rem;
  font-style: italic;
}

.hero-deck em { color: var(--ink); }

.hero-byline {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-wrap: wrap;
}

.hero-byline > * {
  padding-right: 1.25rem;
  border-right: 1px solid var(--rule-soft);
}
.hero-byline > *:last-child { border-right: 0; padding-right: 0; }

/* Ornament panel — right column */
.hero-ornament {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  max-width: 520px;
  justify-self: end;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.85rem;
}

@media (max-width: 960px) {
  .hero-ornament { justify-self: start; max-width: 420px; }
}

.hero-ornament .frame {
  flex: 1;
  position: relative;
  border: 1px solid var(--ink);
  background: var(--paper-warm);
  overflow: hidden;
}

.hero-ornament .frame svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.hero-ornament .frame .photo-slot {
  position: absolute;
  inset: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  pointer-events: none;
  text-align: center;
}

.hero-ornament .caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}

.hero-ornament .caption em {
  font-family: var(--display);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  font-size: 1rem;
  color: var(--ink-soft);
}

/* Ethos badge — bottom-right of hero, decorative */
.ethos-badge {
  position: absolute;
  right: -4px;
  bottom: -4px;
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 0.6rem 0.9rem 0.65rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink);
  letter-spacing: 0.04em;
  white-space: nowrap;
  z-index: 2;
  box-shadow: 4px 4px 0 var(--paper-warm);
}

.ethos-badge .triad {
  display: block;
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.2rem;
}

@media (max-width: 540px) {
  .ethos-badge {
    position: static;
    margin-top: 0.5rem;
    align-self: flex-start;
    box-shadow: none;
  }
}

/* ==========================================================================
   Neoromanian divider — star + flanking lines, secondary ornament
   ========================================================================== */
.neo-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 3rem var(--gutter);
  color: var(--gold);
}

.neo-divider .line {
  flex: 1;
  max-width: 200px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 35%, var(--gold) 65%, transparent);
  position: relative;
}

.neo-divider .line::before,
.neo-divider .line::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  transform: translateY(-50%);
}

.neo-divider .line::before { left: 12%; }
.neo-divider .line::after  { right: 12%; }

.neo-divider .star {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  color: var(--gold);
}

/* ==========================================================================
   Article — body prose
   ========================================================================== */
.article {
  padding: 3.5rem var(--gutter) 5rem;
  max-width: 1100px;
}

.article-kicker {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.article-kicker::before {
  content: '§';
  font-family: var(--display);
  font-style: italic;
  color: var(--ink-ghost);
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
}

.article-title {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 1.5rem;
  color: var(--ink);
  max-width: 18ch;
}

.article-title em { font-style: italic; font-weight: 400; }

.article-deck {
  font-family: var(--display);
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.4;
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 50ch;
  margin-bottom: 2.5rem;
  font-style: italic;
}

.article-byline {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 0.85rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2.5rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-soft);
  flex-wrap: wrap;
}

.article-byline > * {
  padding-right: 1.25rem;
  border-right: 1px solid var(--rule-soft);
}

.article-byline > *:last-child { border-right: 0; padding-right: 0; }

/* Body prose */
.prose {
  max-width: 64ch;
  font-family: var(--body);
  font-size: 1.05rem;
  line-height: 1.75;
  color: var(--ink);
  font-weight: 400;
}

.prose p { margin-bottom: 1.3em; }

.prose p + p:not(.no-indent) {
  text-indent: 1.8em;
  margin-top: -1.3em;
}

.prose p.lede {
  font-family: var(--display);
  font-size: 1.4rem;
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 2em;
  text-indent: 0;
}

.prose p.lede::first-letter {
  font-family: var(--display);
  font-size: 4.6em;
  line-height: 0.82;
  float: left;
  padding: 0.04em 0.1em 0 0;
  color: var(--accent);
  font-weight: 500;
  font-style: normal;
}

.prose em { font-style: italic; }

.prose strong.signal {
  color: var(--accent);
  font-weight: 500;
  font-style: normal;
}

.prose .footnote-ref {
  font-family: var(--mono);
  font-size: 0.65em;
  color: var(--accent);
  vertical-align: super;
  line-height: 0;
  margin-left: 0.1em;
  font-weight: 500;
}

/* Pull-quote */
.pullquote {
  margin: 3rem 0;
  padding: 2rem 0;
  border-top: 2px solid var(--ink);
  border-bottom: 1px solid var(--rule);
}

.pullquote p {
  font-family: var(--display);
  font-size: clamp(1.55rem, 2.6vw, 2.15rem);
  line-height: 1.25;
  font-style: italic;
  font-weight: 400;
  color: var(--ink);
  text-indent: 0;
  margin-bottom: 0.75rem;
}

.pullquote p::before { content: '“'; color: var(--accent); }
.pullquote p::after  { content: '”'; color: var(--accent); }

.pullquote cite {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  font-style: normal;
  display: block;
}

/* ==========================================================================
   The Section Chips — homepage only, appears on scroll
   ========================================================================== */
.chip-bar {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translate(-50%, 140%);
  z-index: 90;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.5rem;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(18, 16, 16, 0.12);
  border-radius: 999px;
  box-shadow: 0 8px 24px rgba(18, 16, 16, 0.08);
  transition: transform 0.65s var(--ease), opacity 0.6s var(--ease);
  opacity: 0;
  pointer-events: none;
  max-width: calc(100vw - 2rem);
  overflow-x: auto;
  scrollbar-width: none;
}

.chip-bar::-webkit-scrollbar { display: none; }

.chip-bar.visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
}

.chip {
  flex-shrink: 0;
  padding: 0.55rem 1rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.3s var(--ease), background 0.3s var(--ease);
  white-space: nowrap;
}

.chip:hover { color: var(--ink); background: rgba(18, 16, 16, 0.04); }

.chip.active {
  color: var(--paper);
  background: var(--accent);
}

@media (max-width: 540px) {
  .chip-bar { padding: 0.35rem 0.4rem; gap: 0.25rem; }
  .chip { padding: 0.5rem 0.7rem; font-size: 0.55rem; }
}

/* ==========================================================================
   Lightbox — zoom-in modal for chip clicks
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.55s var(--ease), visibility 0.55s var(--ease);
  display: flex;
  flex-direction: column;
}

.lightbox.open {
  opacity: 1;
  visibility: visible;
}

.lightbox-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem var(--gutter);
  border-bottom: 1px solid var(--rule);
  flex-shrink: 0;
}

.lightbox-head .marker {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

.lightbox-close {
  background: none;
  border: 1px solid var(--ink);
  color: var(--ink);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s var(--ease), color 0.3s var(--ease), transform 0.4s var(--ease);
  font-family: var(--display);
  font-size: 1.1rem;
  line-height: 1;
}

.lightbox-close:hover {
  background: var(--accent);
  color: var(--paper);
  border-color: var(--accent);
  transform: rotate(90deg);
}

.lightbox-body {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: scale(0.96);
  transition: transform 0.6s var(--ease);
}

.lightbox.open .lightbox-body { transform: scale(1); }

.lightbox-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 3rem var(--gutter) 5rem;
}

/* ==========================================================================
   Three-pillar section — Truth · Beauty · Power
   ========================================================================== */
.pillars {
  padding: 4.5rem var(--gutter) 5.5rem;
  border-top: 1px solid var(--ink);
  max-width: 1500px;
  margin: 0 auto;
}

.pillars-header {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 2rem;
  margin-bottom: 3.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 720px) {
  .pillars-header { grid-template-columns: 1fr; gap: 0.5rem; }
}

.pillars-header h2 {
  font-size: clamp(1.9rem, 3.5vw, 2.7rem);
  font-weight: 400;
  letter-spacing: -0.01em;
}

.pillars-header h2 em { font-style: italic; color: var(--accent); }

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.pillar {
  padding: 0 2.25rem 0 0;
  border-right: 1px solid var(--rule-soft);
  position: relative;
}

.pillar + .pillar { padding-left: 2.25rem; }
.pillar:last-child { border-right: 0; }

.pillar-numeral {
  font-family: var(--display);
  font-size: 0.9rem;
  font-style: italic;
  color: var(--ink-ghost);
  margin-bottom: 0.85rem;
  letter-spacing: 0.05em;
}

.pillar-numeral .accent-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.5rem;
  vertical-align: middle;
}

.pillar-title {
  font-family: var(--display);
  font-size: clamp(2.25rem, 4vw, 3.4rem);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 1.25rem;
  letter-spacing: -0.015em;
}

.pillar-title em { font-style: italic; color: var(--accent); }

.pillar-lede {
  font-family: var(--body);
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
}

.pillar-index {
  list-style: none;
  border-top: 1px solid var(--ink);
}

.pillar-index li {
  border-bottom: 1px dotted var(--rule-soft);
}

.pillar-index a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.7rem 0;
  transition: padding 0.3s var(--ease);
}

.pillar-index a:hover {
  padding-left: 0.4rem;
}

.pillar-index .num {
  font-family: var(--mono);
  font-size: 0.6rem;
  color: var(--ink-ghost);
  letter-spacing: 0.08em;
  transition: color 0.3s var(--ease);
}

.pillar-index .name {
  font-family: var(--display);
  font-size: 1.05rem;
  color: var(--ink);
  font-weight: 400;
  transition: color 0.3s var(--ease), font-style 0.3s var(--ease);
}

.pillar-index .goto {
  font-family: var(--mono);
  font-size: 0.62rem;
  color: var(--ink-ghost);
  letter-spacing: 0.1em;
  transition: color 0.3s var(--ease), transform 0.3s var(--ease);
}

.pillar-index a:hover .name { color: var(--accent); font-style: italic; }
.pillar-index a:hover .num,
.pillar-index a:hover .goto { color: var(--accent); }
.pillar-index a:hover .goto { transform: translateX(3px); }

@media (max-width: 860px) {
  .pillars-grid { grid-template-columns: 1fr; gap: 0; }
  .pillar { padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .pillar:last-child { border-bottom: 0; }
  .pillar + .pillar { padding-left: 0; }
}

/* ==========================================================================
   The Registry — table + clients strip
   ========================================================================== */
.registry {
  padding: 4.5rem var(--gutter) 6rem;
  border-top: 1px solid var(--ink);
  max-width: 1400px;
  margin: 0 auto;
}

.registry-header { margin-bottom: 2.5rem; }

.registry-title {
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin-bottom: 0.75rem;
}

.registry-title em { font-style: italic; color: var(--accent); }

.registry-deck {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
  color: var(--ink-soft);
  max-width: 54ch;
  line-height: 1.5;
}

/* Clients logo strip — placeholder marks for partners */
.clients {
  margin: 2.5rem 0 3rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}

.clients-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  margin-bottom: 1rem;
}

.clients-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
  align-items: center;
}

@media (max-width: 860px) { .clients-grid { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (max-width: 480px) { .clients-grid { grid-template-columns: repeat(2, 1fr); } }

.client-slot {
  aspect-ratio: 3 / 1.2;
  border: 1px dashed var(--rule);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-ghost);
  letter-spacing: 0.02em;
  background: var(--paper-warm);
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.client-slot:hover { border-color: var(--accent); color: var(--accent); }

.registry-table {
  width: 100%;
  border-collapse: collapse;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
}

.registry-table thead th {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  padding: 1rem 1rem 1rem 0;
  text-align: left;
  border-bottom: 1px solid var(--rule);
  font-weight: 400;
}

.registry-table tbody tr.entry {
  cursor: pointer;
  transition: background 0.3s var(--ease);
  border-bottom: 1px solid var(--rule-soft);
}

.registry-table tbody tr.entry:hover { background: var(--paper-warm); }
.registry-table tbody tr.entry.open { background: var(--paper-warm); }

.registry-table tbody td {
  padding: 1.25rem 1rem 1.25rem 0;
  vertical-align: top;
  font-family: var(--body);
  font-size: 0.98rem;
  color: var(--ink);
  line-height: 1.5;
}

.registry-table td.col-year {
  font-family: var(--mono);
  font-size: 0.82rem;
  color: var(--ink-ghost);
  width: 90px;
  letter-spacing: 0.05em;
}

.registry-table td.col-sector {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  color: var(--ink-soft);
  width: 180px;
}

.registry-table td.col-noise {
  color: var(--ink-soft);
  font-size: 0.92rem;
  max-width: 280px;
}

.registry-table td.col-signal {
  color: var(--ink);
  font-weight: 500;
  max-width: 280px;
}

.registry-table td.col-chevron {
  width: 40px;
  text-align: right;
  color: var(--ink-ghost);
  font-family: var(--mono);
  transition: transform 0.4s var(--ease), color 0.3s var(--ease);
}

.registry-table tr.entry.open td.col-chevron {
  color: var(--accent);
  transform: rotate(45deg);
}

.registry-table tbody tr.detail {
  background: var(--paper-deep);
  border-bottom: 1px solid var(--ink);
}

.registry-table tbody tr.detail td { padding: 0; }

.detail-inner {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s var(--ease-ink), padding 0.4s var(--ease);
  padding: 0 1rem 0 0;
}

.detail-inner.show {
  max-height: 800px;
  padding: 2rem 1rem 2.5rem 0;
}

.detail-grid {
  display: grid;
  grid-template-columns: 180px 1fr 1fr;
  gap: 3rem;
}

.detail-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  margin-bottom: 0.5rem;
}

.detail-text {
  font-family: var(--body);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink);
}

.detail-text em { font-style: italic; color: var(--ink-soft); }

/* ==========================================================================
   Correspondence — letter form
   ========================================================================== */
.letter {
  max-width: 760px;
  margin: 0 auto;
  padding: 4rem var(--gutter) 5rem;
}

.letter-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--ink);
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.letter-from {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  line-height: 1.7;
}

.letter-from em { font-family: var(--display); font-style: italic; color: var(--accent); font-size: 1.1rem; letter-spacing: 0; text-transform: none; display: block; margin-top: 0.3rem; }

.letter-date {
  font-family: var(--display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
}

.letter-salutation {
  font-family: var(--display);
  font-size: 1.35rem;
  font-style: italic;
  color: var(--ink);
  margin-bottom: 2rem;
}

.letter-body {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.85vw, 1.4rem);
  line-height: 1.65;
  color: var(--ink);
  font-weight: 400;
}

.letter-body p { margin-bottom: 1.3em; }

.letter-body input.blank,
.letter-body textarea.blank {
  display: inline-block;
  font-family: var(--display);
  font-size: inherit;
  font-style: italic;
  font-weight: 500;
  color: var(--accent);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 0 0.3em 0.1em;
  min-width: 180px;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
  outline: none;
  vertical-align: baseline;
  line-height: inherit;
  resize: none;
  overflow: hidden;
}

.letter-body input.blank:focus,
.letter-body textarea.blank:focus {
  border-color: var(--accent);
  background: var(--accent-faint);
}

.letter-body input.blank::placeholder,
.letter-body textarea.blank::placeholder {
  color: var(--ink-ghost);
  font-weight: 400;
  font-style: italic;
  opacity: 0.7;
}

.letter-body input.blank.wide { min-width: 260px; }
.letter-body textarea.blank {
  display: block;
  width: 100%;
  min-height: 4rem;
  margin-top: 0.5rem;
}

.letter-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px dotted var(--rule);
}

@media (max-width: 540px) { .letter-meta-row { grid-template-columns: 1fr; gap: 1.25rem; } }

.letter-meta-row label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  display: block;
  margin-bottom: 0.5rem;
}

.letter-meta-row input {
  font-family: var(--display);
  font-size: 1.15rem;
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--ink);
  padding: 0.3rem 0;
  width: 100%;
  outline: none;
  transition: border-color 0.3s var(--ease);
}

.letter-meta-row input:focus { border-color: var(--accent); }

.letter-closing {
  margin-top: 2.5rem;
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  color: var(--ink-soft);
}

/* The Seal button — violet wax now */
.seal-wrap {
  margin-top: 2.5rem;
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.seal {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--paper);
  border: 0;
  cursor: pointer;
  font-family: var(--display);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  position: relative;
  transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease);
  box-shadow:
    inset 0 2px 8px rgba(255, 255, 255, 0.20),
    inset 0 -3px 6px rgba(0, 0, 0, 0.28),
    0 2px 6px rgba(68, 4, 128, 0.20);
  flex-shrink: 0;
  overflow: hidden;
}

.seal::before {
  content: '';
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.38);
  pointer-events: none;
}

.seal::after {
  content: 'NP';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  font-style: italic;
  color: var(--paper);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  z-index: 2;
}

.seal span { display: none; }

.seal:hover {
  transform: rotate(-8deg) scale(1.05);
  box-shadow:
    inset 0 2px 8px rgba(255, 255, 255, 0.24),
    inset 0 -3px 6px rgba(0, 0, 0, 0.32),
    0 6px 16px rgba(68, 4, 128, 0.32);
}

.seal.stamped {
  transform: rotate(-12deg) scale(0.95);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.28),
    0 1px 2px rgba(0, 0, 0, 0.18);
}

.seal-note {
  font-family: var(--display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
  max-width: 40ch;
  line-height: 1.5;
}

/* Wax mark drop — violet now */
.wax-mark {
  position: fixed;
  width: 140px;
  height: 140px;
  pointer-events: none;
  z-index: 1000;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0.9s var(--ease-ink), opacity 1.4s var(--ease-ink);
  opacity: 0;
}

.wax-mark svg { width: 100%; height: 100%; }
.wax-mark.fire { transform: translate(-50%, -50%) scale(1) rotate(-15deg); opacity: 1; }
.wax-mark.fade { opacity: 0; }

/* ==========================================================================
   About page — manifesto treatment
   ========================================================================== */
.manifesto-page {
  padding: 3.5rem var(--gutter) 5rem;
  max-width: 920px;
}

.manifesto-marginalia {
  display: grid;
  grid-template-columns: 1fr 200px;
  gap: 3rem;
  align-items: start;
}

@media (max-width: 900px) {
  .manifesto-marginalia { grid-template-columns: 1fr; }
}

.margin-note {
  padding-top: 0.25rem;
  font-family: var(--display);
  font-size: 0.92rem;
  font-style: italic;
  color: var(--ink-ghost);
  line-height: 1.55;
  border-top: 1px solid var(--rule);
}

.margin-note .note-num {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  color: var(--accent);
  display: block;
  margin-bottom: 0.35rem;
}

.margin-note .note-glyph {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--ink-ghost);
}

.margin-note .note-glyph svg { width: 40px; height: 40px; }

/* Principles block */
.principles {
  padding: 4.5rem var(--gutter) 5.5rem;
  border-top: 1px solid var(--ink);
  max-width: 1200px;
  margin: 0 auto;
}

.principles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--rule);
}

@media (max-width: 720px) {
  .principles-grid { grid-template-columns: 1fr; }
}

.principle {
  padding: 2.5rem 2rem 2.5rem 0;
  border-right: 1px solid var(--rule-soft);
  border-bottom: 1px solid var(--rule-soft);
}

.principle:nth-child(2n) { padding-left: 2rem; padding-right: 0; border-right: 0; }

@media (max-width: 720px) {
  .principle { padding: 2rem 0 !important; border-right: 0; }
}

.principle-num {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  color: var(--accent);
  margin-bottom: 0.75rem;
}

.principle h3 {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  color: var(--ink);
}

.principle h3 em { font-style: italic; font-weight: 400; color: var(--accent); }

.principle p {
  font-family: var(--body);
  font-size: 0.96rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ==========================================================================
   Footer — colophon
   ========================================================================== */
.colophon {
  padding: 3.5rem var(--gutter) 2.5rem;
  border-top: 1px solid var(--ink);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: 3rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}

@media (max-width: 900px) { .colophon { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 540px) { .colophon { grid-template-columns: 1fr; } }

.colophon h5 {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.25em;
  color: var(--ink-ghost);
  margin-bottom: 1rem;
  font-weight: 400;
}

.colophon .brand-line {
  font-family: var(--display);
  font-size: 1.2rem;
  letter-spacing: -0.005em;
  text-transform: none;
  color: var(--ink);
  line-height: 1.3;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.colophon .brand-line em { font-style: italic; font-weight: 400; }

.colophon .brand-sub {
  font-family: var(--display);
  font-style: italic;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 36ch;
  margin-bottom: 0;
}

.colophon ul { list-style: none; line-height: 1.9; }

.colophon a {
  color: var(--ink-soft);
  transition: color 0.3s var(--ease);
}

.colophon a:hover { color: var(--accent); }

.colophon-bottom {
  grid-column: 1 / -1;
  padding-top: 1.75rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-size: 0.56rem;
}

.credit-line {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-soft);
}

.credit-line em { color: var(--accent); font-style: italic; }

/* Phi mark — golden ratio dot */
.phi-block {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.phi-mark {
  width: 8px;
  height: 8px;
  border: 1px solid var(--ink-ghost);
  border-radius: 50%;
  display: inline-block;
  transition: background 0.6s var(--ease), border-color 0.6s var(--ease), transform 0.6s var(--ease), box-shadow 0.6s var(--ease);
}

.phi-mark.aligned {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.4);
  box-shadow: 0 0 12px var(--accent-glow);
}

/* ==========================================================================
   Animations — ink-dry & scroll reveal
   ========================================================================== */
@keyframes ink-dry {
  0%   { opacity: 0; filter: blur(2px); color: var(--ink-ghost); }
  50%  { opacity: 0.7; filter: blur(0.5px); }
  100% { opacity: 1; filter: blur(0); color: inherit; }
}

.ink-in {
  opacity: 0;
  animation: ink-dry 1.5s var(--ease-ink) forwards;
}

.ink-in.d1 { animation-delay: 0.05s; }
.ink-in.d2 { animation-delay: 0.2s; }
.ink-in.d3 { animation-delay: 0.4s; }
.ink-in.d4 { animation-delay: 0.6s; }
.ink-in.d5 { animation-delay: 0.8s; }
.ink-in.d6 { animation-delay: 1s; }

.reveal {
  opacity: 0;
  transform: translateY(14px);
  filter: blur(1.5px);
  transition: opacity 1.05s var(--ease-ink), transform 1.05s var(--ease-ink), filter 1.05s var(--ease-ink);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ==========================================================================
   Whisper — inactivity quote (from v1)
   ========================================================================== */
.whisper {
  position: fixed;
  bottom: 6rem;
  right: 2rem;
  max-width: 360px;
  z-index: 60;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 1.4s var(--ease), transform 1.4s var(--ease);
  pointer-events: none;
  padding: 1.25rem 1.4rem;
  border-left: 2px solid var(--accent);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 6px 20px rgba(18, 16, 16, 0.08);
}

.whisper.show { opacity: 1; transform: translateY(0); }

.whisper-text {
  font-family: var(--display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 0.65rem;
}

.whisper-source {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
}

@media (max-width: 640px) {
  .whisper { bottom: 1rem; right: 1rem; max-width: calc(100vw - 2rem); }
}

/* ==========================================================================
   Marginalia — floating margin notes
   ========================================================================== */
.marginalia {
  position: fixed;
  right: 2rem;
  top: 35%;
  width: 180px;
  opacity: 0;
  transition: opacity 0.8s var(--ease);
  pointer-events: none;
  z-index: 5;
}

.marginalia.visible { opacity: 1; }

.marginalia-inner {
  border-left: 1px solid var(--accent);
  padding-left: 1rem;
}

.marginalia-title {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.4rem;
}

.marginalia-text {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.marginalia-glyph {
  margin-bottom: 0.6rem;
  color: var(--ink-ghost);
}

.marginalia-glyph svg { width: 32px; height: 32px; }

@media (max-width: 1280px) { .marginalia { display: none; } }

/* ==========================================================================
   Mobile — Spotify-style bottom nav
   ========================================================================== */
@media (max-width: 860px) {

  .topmenu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    top: auto;
    padding: 0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom, 0));
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(18, 16, 16, 0.10);
    box-shadow: 0 -4px 20px rgba(18, 16, 16, 0.05);
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 0;
    height: auto;
  }

  .topmenu a {
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 0.45rem 0.2rem;
    font-size: 0;
    min-height: 52px;
    color: var(--ink-soft);
  }

  .topmenu a::before {
    content: attr(data-glyph);
    width: auto;
    height: auto;
    background: transparent;
    border-radius: 0;
    transform: scale(1);
    font-family: var(--display);
    font-style: italic;
    font-size: 1.55rem;
    color: var(--ink);
    line-height: 1;
    transition: color 0.3s var(--ease);
    animation: none;
  }

  .topmenu a::after {
    content: attr(data-name);
    font-family: var(--mono);
    font-size: 0.48rem;
    letter-spacing: 0.12em;
    color: var(--ink-ghost);
    text-transform: uppercase;
    line-height: 1;
  }

  .topmenu a.active::before { color: var(--accent); animation: pulse-dot 2.6s ease-in-out infinite; }
  .topmenu a.active::after { color: var(--accent); }

  .page { padding-bottom: 5.5rem; }

  .chip-bar { display: none; }

  .pillars-grid { grid-template-columns: 1fr; gap: 0; }
  .pillar { padding: 2rem 0; border-right: 0; border-bottom: 1px solid var(--rule-soft); }
  .pillar:last-child { border-bottom: 0; }
  .pillar + .pillar { padding-left: 0; }

  .article-byline { flex-wrap: wrap; gap: 0.75rem; }
  .article-byline > * { border-right: 0; padding-right: 0; }

  .detail-grid { grid-template-columns: 1fr; gap: 1.5rem; }

  .registry-table td.col-noise,
  .registry-table td.col-signal { max-width: 40vw; font-size: 0.85rem; }
  .registry-table td.col-sector { display: none; }
  .registry-table thead th.col-sector { display: none; }
}

@media (max-width: 560px) {
  .article { padding: 2.5rem var(--gutter) 4rem; }
  .pillars, .registry { padding: 3rem var(--gutter) 4rem; }
  .manifesto-page, .letter { padding: 3rem var(--gutter) 4rem; }
  .hero { padding: 2.5rem var(--gutter) 3rem; }

  .registry-table thead { display: none; }
  .registry-table tr.entry {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    gap: 0.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .registry-table td {
    display: block;
    padding: 0 !important;
    max-width: none !important;
  }
  .registry-table td.col-year { grid-row: 1; grid-column: 1; font-size: 0.7rem; }
  .registry-table td.col-chevron { grid-row: 1; grid-column: 2; transform: none; }
  .registry-table td.col-noise { grid-row: 2; grid-column: 1 / -1; font-size: 0.85rem; }
  .registry-table td.col-signal { grid-row: 3; grid-column: 1 / -1; font-size: 0.95rem; }
}

/* Print */
@media print {
  body::after, .topbar, .topmenu, .marginalia, .seal-wrap, .chip-bar, .lightbox, .whisper { display: none; }
  .page { padding-top: 0; }
}

/* ==========================================================================
   v3.1 ADDITIONS & AMENDMENTS
   ========================================================================== */

/* --- Reading progress bar --- */
.progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--accent);
  z-index: 200;
  transition: width 0.1s linear;
  pointer-events: none;
}

/* --- Custom cursor --- */
.cursor-dot {
  position: fixed;
  width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.12s var(--ease), opacity 0.3s;
  opacity: 0;
}
.cursor-ring {
  position: fixed;
  width: 28px; height: 28px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.3s var(--ease), height 0.3s var(--ease),
              transform 0.18s var(--ease), opacity 0.3s, background 0.3s;
  opacity: 0;
}
body:hover .cursor-dot,
body:hover .cursor-ring { opacity: 1; }
body.cursor-hover .cursor-ring {
  width: 44px; height: 44px;
  background: rgba(68, 4, 128, 0.06);
}
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* --- Glassmorphism transparency tuning (more transparent) --- */
/* Topbar: was rgba(255,255,255,0.62) */
.topbar {
  background: rgba(255, 255, 255, 0.45) !important;
  border-bottom: 1px solid rgba(18, 16, 16, 0.06) !important;
}
.topbar.scrolled {
  background: rgba(255, 255, 255, 0.60) !important;
  border-bottom-color: rgba(18, 16, 16, 0.09) !important;
}

/* Chip bar: was rgba(255,255,255,0.78) */
.chip-bar {
  background: rgba(255, 255, 255, 0.38) !important;
  border: 1px solid rgba(18, 16, 16, 0.08) !important;
  box-shadow: 0 8px 32px rgba(18, 16, 16, 0.06) !important;
}

/* Mobile nav: was 0.92 */
@media (max-width: 860px) {
  .topmenu {
    background: rgba(255, 255, 255, 0.72) !important;
  }
}

/* Lightbox backdrop: more transparent overlay */
.lightbox {
  background: rgba(255, 255, 255, 0.82) !important;
}

/* Whisper: slightly more transparent */
.whisper {
  background: rgba(255, 255, 255, 0.70) !important;
}

/* --- Mobile: logo always visible top-left, topbar always stays --- */
/* On mobile we keep topbar at top with logo only; menu moves to bottom */
@media (max-width: 860px) {
  .topbar {
    /* Always present at top for logo */
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 56px;
    display: flex;
    align-items: center;
    padding: 0 1.25rem;
  }
  /* Hide text portion of brand-text on very small screens */
  .brand-text em { display: none; }
  /* The menu items stay at bottom (already styled above) */
  .page {
    padding-top: 56px;   /* topbar height on mobile */
    padding-bottom: 5.5rem;
  }
  /* folio header stays below topbar */
  .folio-header {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
}

/* --- Chip bar: auto-hide after inactivity (class added via JS) --- */
.chip-bar.hidden-idle {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 60%) !important;
}
/* Keep the visible transform override so .visible still works */
.chip-bar.visible.hidden-idle {
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translate(-50%, 60%) !important;
}

/* --- Ghost initial letters — ambient large letters on sections --- */
.ghost-letter {
  position: absolute;
  left: var(--gutter);
  top: 0;
  font-family: var(--display);
  font-size: clamp(6rem, 18vw, 16rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1;
  color: var(--ink);
  opacity: 0.022;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  letter-spacing: -0.04em;
  transition: opacity 1.2s var(--ease);
}

/* Only show on sections with enough width */
@media (max-width: 720px) { .ghost-letter { display: none; } }

.section-relative { position: relative; overflow: hidden; }

/* --- Roman numeral ambient watermark variant --- */
.ghost-numeral {
  position: absolute;
  right: var(--gutter);
  bottom: -0.15em;
  font-family: var(--display);
  font-size: clamp(5rem, 15vw, 13rem);
  font-weight: 300;
  font-style: italic;
  line-height: 1;
  color: var(--accent);
  opacity: 0.03;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  letter-spacing: -0.02em;
}
@media (max-width: 720px) { .ghost-numeral { display: none; } }

/* --- Photo placeholder — proper marked zone --- */
.photo-placeholder {
  position: relative;
  background: var(--paper-warm);
  border: 1px dashed rgba(18, 16, 16, 0.22);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 2rem;
  text-align: center;
  overflow: hidden;
}

/* Decorative corner marks on photo placeholder */
.photo-placeholder::before,
.photo-placeholder::after {
  content: '';
  position: absolute;
  width: 20px; height: 20px;
  border-color: var(--gold);
  border-style: solid;
}
.photo-placeholder::before {
  top: 8px; left: 8px;
  border-width: 1px 0 0 1px;
}
.photo-placeholder::after {
  bottom: 8px; right: 8px;
  border-width: 0 1px 1px 0;
}

.photo-placeholder-inner {
  position: relative;
  z-index: 1;
}

.photo-placeholder-glyph svg {
  width: 48px; height: 48px;
  color: var(--ink-ghost);
  opacity: 0.55;
}

.photo-placeholder-label {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  line-height: 1.6;
}

.photo-placeholder-hint {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-mute);
}

/* --- Folio-header inside lightbox is shown (not removed) --- */
/* Lightbox content should include the folio-header so section identity is clear */
.lightbox-content .folio-header {
  border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
  padding: 1.25rem var(--gutter);
}

/* --- Neoromanian divider — improved star, matching the real ornament photo --- */
/* Rope-border circle outer ring for divider */
.neo-divider .star-wrap {
  position: relative;
  width: 52px; height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Architectural window placeholder frame --- */
.arch-window-frame {
  position: relative;
  width: 100%;
  max-width: 480px;
  border: 1px solid var(--ink);
  background: var(--paper-warm);
  overflow: hidden;
  /* Photo comment is in HTML: replace <img> src */
}

.arch-window-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,0.82);
  backdrop-filter: blur(6px);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.arch-window-overlay .photo-credit {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-ghost);
}
.arch-window-overlay .photo-caption {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.88rem;
  color: var(--ink-soft);
}

/* --- SEO / skip link --- */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 9999;
  background: var(--accent);
  color: var(--paper);
  padding: 0.5rem 1rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: top 0.2s;
}
.skip-link:focus { top: 0.5rem; }

/* --- Print refinements --- */
@media print {
  .ghost-letter, .ghost-numeral, .cursor-dot, .cursor-ring,
  .progress-bar, .chip-bar, .lightbox, .whisper, .marginalia,
  .topbar, .topmenu, .seal-wrap, .ethos-badge { display: none !important; }
  .page { padding: 0 !important; }
  body { font-size: 11pt; }
  h1 { font-size: 28pt; }
  h2 { font-size: 20pt; }
  .colophon { display: none; }
}

/* ==========================================================================
   v3.2 AMENDMENTS
   ========================================================================== */

/* #2 FIX — Mobile nav MUST be at bottom, topbar only logo at top.
   The problem was the v3.1 mobile block set .topbar height but the
   .topmenu was still fighting with flex layout.  Re-declare cleanly.  */
@media (max-width: 860px) {
  /* Topbar at top — logo only, no nav items */
  .topbar {
    position: fixed !important;
    top: 0 !important; left: 0 !important; right: 0 !important;
    bottom: auto !important;
    height: 54px !important;
    z-index: 100 !important;
    padding: 0 1.25rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* Completely hide the nav links from the topbar on mobile */
  .topbar .topmenu {
    display: none !important;
  }

  /* Bottom nav — separate element, always at bottom */
  .mobile-nav {
    display: flex !important;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: auto;
    z-index: 100;
    padding: 0.35rem 0 calc(0.35rem + env(safe-area-inset-bottom, 0));
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border-top: 1px solid rgba(18, 16, 16, 0.08);
    box-shadow: 0 -2px 16px rgba(18, 16, 16, 0.05);
    justify-content: space-around;
    align-items: stretch;
  }

  .mobile-nav a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.22rem;
    padding: 0.4rem 0.15rem;
    text-decoration: none;
    color: var(--ink-soft);
    min-height: 50px;
  }

  .mobile-nav a .m-glyph {
    font-family: var(--display);
    font-style: italic;
    font-size: 1.45rem;
    line-height: 1;
    color: var(--ink);
    transition: color 0.3s var(--ease);
  }

  .mobile-nav a .m-name {
    font-family: var(--mono);
    font-size: 0.44rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-ghost);
    line-height: 1;
    transition: color 0.3s var(--ease);
  }

  .mobile-nav a.active .m-glyph { color: var(--accent); }
  .mobile-nav a.active .m-name  { color: var(--accent); }

  /* page padding — top for logo bar, bottom for nav bar */
  .page {
    padding-top: 54px !important;
    padding-bottom: 5.5rem !important;
  }
}

@media (min-width: 861px) {
  .mobile-nav { display: none !important; }
}

/* Ghost letters on mobile — show but smaller, tone down opacity to match */
@media (max-width: 720px) {
  .ghost-letter  { display: block !important; font-size: clamp(4rem, 22vw, 8rem) !important; opacity: 0.018 !important; }
  .ghost-numeral { display: block !important; font-size: clamp(3rem, 18vw, 7rem) !important; opacity: 0.025 !important; }
}

/* #3 FIX — hero ornament caption + ethos badge overlap.
   Put them in a column stack, not absolute positioning fighting each other. */
.hero-ornament {
  display: flex !important;
  flex-direction: column !important;
  gap: 0.6rem !important;
  position: relative !important;
}

.hero-ornament .frame {
  flex: 1 !important;
  min-height: 240px !important;
}

.hero-ornament .caption { flex-shrink: 0; }

.hero-ornament .ethos-badge {
  position: static !important;
  align-self: flex-end !important;
  box-shadow: none !important;
  margin-top: 0 !important;
  border: 1px solid var(--ink) !important;
  background: var(--paper) !important;
}

/* #4 — Marquee / ticker partner strip */
.partner-ticker {
  width: 100%;
  overflow: hidden;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.85rem 0;
  background: var(--paper-warm);
  position: relative;
}

.partner-ticker-label {
  position: absolute;
  left: var(--gutter);
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  z-index: 2;
  background: var(--paper-warm);
  padding-right: 1rem;
}

/* Fade masks left/right */
.partner-ticker::before,
.partner-ticker::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.partner-ticker::before {
  left: 0;
  background: linear-gradient(to right, var(--paper-warm), transparent);
}
.partner-ticker::after {
  right: 0;
  background: linear-gradient(to left, var(--paper-warm), transparent);
}

.partner-ticker-track {
  display: flex;
  align-items: center;
  gap: 3.5rem;
  width: max-content;
  animation: ticker-scroll 28s linear infinite;
  padding: 0 3rem;
}

.partner-ticker-track:hover { animation-play-state: paused; }

@keyframes ticker-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.partner-ticker-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 110px;
  height: 36px;
  flex-shrink: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--ink-ghost);
  letter-spacing: 0.02em;
  /* When real logos are added: */
  /* filter: grayscale(1) opacity(0.55); */
  /* transition: filter 0.3s; */
}

/* Separator between partners in the ticker */
.partner-ticker-sep {
  flex-shrink: 0;
  color: var(--gold);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.2rem;
  opacity: 0.6;
}

/* #5 — Lightbox opening animation — very subtle scale from 0.97 */
.lightbox-body {
  transform: scale(0.97) !important;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) !important;
}
.lightbox.open .lightbox-body {
  transform: scale(1) !important;
}

/* Lightbox folio-header — always visible, styled as section identity */
.lightbox-content .folio-header {
  padding: 1rem var(--gutter) !important;
  border-bottom: 1px solid var(--rule) !important;
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.90);
  backdrop-filter: blur(10px);
  z-index: 5;
}

/* #6 — Custom scrollbar — violet, thin, tasteful */
:root {
  scrollbar-width: thin;
  scrollbar-color: rgba(68, 4, 128, 0.28) transparent;
}
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(68, 4, 128, 0.28);
  border-radius: 99px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(68, 4, 128, 0.52);
}

/* Lightbox inner scroll */
.lightbox-body::-webkit-scrollbar { width: 4px; }
.lightbox-body::-webkit-scrollbar-thumb { background: rgba(68, 4, 128, 0.22); }

/* #1 — Footer colophon-bottom text corrections handled in HTML */
/* (all rights reserved + printed on the web added in HTML) */

/* #7 suggestions — Footnote separator in prose */
.footnote-sep {
  display: block;
  width: 80px;
  height: 1px;
  background: var(--rule);
  margin: 2.5rem 0 1.25rem;
}

.footnotes {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.9rem;
  color: var(--ink-ghost);
  line-height: 1.6;
  counter-reset: fn;
}

.footnotes p::before {
  counter-increment: fn;
  content: counter(fn, lower-roman) '. ';
  color: var(--accent);
  font-style: normal;
  font-family: var(--mono);
  font-size: 0.7rem;
}

/* Article section spacing on mobile */
@media (max-width: 560px) {
  .hero-title { font-size: clamp(2.4rem, 10vw, 3.8rem); }
  .article-title { font-size: clamp(2.2rem, 9vw, 3.5rem); }
  .hero-deck, .article-deck { font-size: clamp(1.1rem, 4vw, 1.35rem); }
  .colophon { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .hero-ornament { max-width: 100%; }
}

/* ==========================================================================
   v3.3 AMENDMENTS
   ========================================================================== */

/* #4a — Pull quote: left border accent instead of curly quotes (cleaner) */
.pullquote {
  margin: 2.5rem 0 !important;
  padding: 0 0 0 2rem !important;
  border-top: none !important;
  border-bottom: none !important;
  border-left: 3px solid var(--accent) !important;
}

.pullquote p {
  font-size: clamp(1.35rem, 2.2vw, 1.9rem) !important;
  margin-bottom: 0.65rem !important;
}

.pullquote p::before { content: none !important; }
.pullquote p::after  { content: none !important; }

/* #4b — Pillar index links: animated underline fill on hover */
.pillar-index a {
  position: relative;
}
.pillar-index a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--accent);
  transition: width 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.pillar-index a:hover::after { width: 100%; }

/* #4c — Registry table: mobile card layout improvement */
@media (max-width: 640px) {
  .registry-table tbody tr.entry {
    position: relative;
    padding: 1.25rem 2rem 1.25rem 0 !important;
  }
  .registry-table td.col-chevron {
    position: absolute;
    right: 0; top: 1.25rem;
  }
}

/* #4d — Letter form inputs: visible floating label on focus */
.letter-meta-row label {
  transition: color 0.3s var(--ease);
}
.letter-meta-row input:focus + label,
.letter-meta-row div:focus-within label {
  color: var(--accent) !important;
}

/* #4e — Section transitions: better breathing room on large screens */
@media (min-width: 1200px) {
  .hero    { padding-top: 5.5rem; padding-bottom: 5rem; }
  .article { padding-top: 4rem; padding-bottom: 5.5rem; }
  .pillars { padding-top: 5rem; padding-bottom: 6rem; }
  .registry { padding-top: 5rem; padding-bottom: 6.5rem; }
}

/* #4f — Folio header: "Vol." text slightly more editorial */
.folio-header .edition {
  font-size: 0.63rem;
  letter-spacing: 0.24em;
}

/* #4g — Partner ticker: slightly taller, more breathing room */
.partner-ticker {
  padding: 1.1rem 0;
}
.partner-ticker-slot {
  font-size: 1rem;
  opacity: 0.72;
  transition: opacity 0.3s var(--ease);
}
.partner-ticker-slot:hover { opacity: 1; }

/* When ticker has real logo images */
.partner-ticker-slot img {
  max-height: 28px;
  width: auto;
  filter: grayscale(1) opacity(0.55);
  transition: filter 0.4s var(--ease);
}
.partner-ticker-slot:hover img { filter: grayscale(0.2) opacity(0.85); }

/* #4h — Mobile: better hero layout */
@media (max-width: 640px) {
  .hero-byline { padding: 0.65rem 0; gap: 0.5rem; }
  .hero-byline > * { border-right: 0; padding-right: 0; }
  .hero-kicker { margin-bottom: 1rem; }
  .hero-title { margin-bottom: 1.25rem; }
  .hero-deck  { margin-bottom: 1.75rem; }
}

/* #4i — Principles grid: tighten on mobile */
@media (max-width: 640px) {
  .principles-grid { grid-template-columns: 1fr !important; }
  .principle { padding: 1.75rem 0 !important; border-right: 0 !important; }
}

/* #4j — Lightbox iframe fallback: handle it cleanly */
.lightbox-body iframe {
  display: block;
  border: 0;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 120px);
  background: var(--paper);
}

/* Ticker no-border on mobile — saves space */
@media (max-width: 560px) {
  .partner-ticker { padding: 0.75rem 0; }
  .partner-ticker-slot { font-size: 0.88rem; min-width: 80px; }
}

/* ==========================================================================
   v3.5 — Photo bands, about-hero-grid, footer link
   ========================================================================== */

/* ── Photo band — full-width landscape strip ── */
.photo-band {
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--paper-deep);
  /* Default: 3:1 ratio for practice band; about band overrides below */
  aspect-ratio: 3 / 1;
}

.photo-band img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.photo-band-credit {
  position: absolute;
  bottom: 0;
  right: 0;
  padding: 0.4rem 0.85rem;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  pointer-events: none;
}

/* About landscape band — slightly taller ratio */
.photo-band + .principles { /* selector when band precedes principles */ }
section.principles ~ .photo-band { aspect-ratio: 8 / 3; }

/* Practice photo band is 3:1 (default above) */
/* On mobile, all bands become 16:9 to avoid too-short strips */
@media (max-width: 720px) {
  .photo-band { aspect-ratio: 16 / 9; }
}

/* ── About page — hero grid with title left, portrait right ── */
.about-hero-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding: 3.5rem var(--gutter) 3rem;
  max-width: 1200px;
}

@media (max-width: 900px) {
  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

.about-hero-text {
  min-width: 0;
}

.about-hero-photo {
  position: sticky;
  top: calc(var(--nav-height) + 1.5rem);
}

/* On mobile, unstick and let it flow */
@media (max-width: 900px) {
  .about-hero-photo {
    position: static;
    max-width: 380px;
  }
}

.about-photo-frame {
  position: relative;
  width: 100%;
  /* Portrait: 3:4 */
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border: 1px solid var(--ink);
  background: var(--paper-warm);
}

.about-photo-frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top; /* bias toward face/top of portrait */
}

/* ── Footer credit link ── */
.credit-line a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(58, 54, 51, 0.25);
  padding-bottom: 1px;
  transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
}

.credit-line a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── manifesto-page: when inside about-hero-grid, don't add its own padding ── */
.manifesto-page .about-hero-grid ~ .manifesto-marginalia {
  padding-top: 0;
}

/* Remove top padding from manifesto-page since about-hero-grid has its own */
.about-hero-grid + .manifesto-marginalia {
  padding: 0 var(--gutter) 3rem;
  max-width: 1200px;
}

/* ==========================================================================
   v3.7 — Photo filters + cursor lightbox fix
   ========================================================================== */

/* ── PHOTO FILTERS ─────────────────────────────────────────────────────────
   Apply one class to any .photo-band, .frame, or .about-photo-frame element
   to give photos an editorial treatment coherent with the site palette.

   HOW TO USE:
     In the HTML, add the class to the container element:
       <div class="photo-band photo-filter-editorial">…</div>
       <div class="frame photo-filter-violet">…</div>

   HOW TO REMOVE:
     Delete the class name. The photo returns to its natural state.
     You can also toggle between variants by switching the class name.

   The ::after pseudo-element is the coloured overlay.
   The img filter is the base treatment.
   ────────────────────────────────────────────────────────────────────────── */

/* Variant 1 — Editorial warm
   Subtle: +20% contrast, -30% saturation, faint warm sepia.
   Closest to a printed photograph. Very natural-looking.
   ✓ Works best with colour photos of architecture and streetscapes. */
.photo-filter-editorial img {
  filter: contrast(1.18) saturate(0.72) sepia(0.12) brightness(1.02);
  transition: filter 0.5s ease;
}

/* Variant 2 — Violet duotone (subtle)
   Desaturates slightly, adds a transparent violet overlay.
   Creates chromatic connection to --accent: #440480.
   ✓ Best for atmospheric / ambient photos. */
.photo-filter-violet {
  position: relative;
}
.photo-filter-violet img {
  filter: grayscale(0.25) contrast(1.1) brightness(1.03);
  transition: filter 0.5s ease;
}
.photo-filter-violet::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(68, 4, 128, 0.10);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* Variant 3 — Duotone editorial (most dramatic)
   Full grayscale + violet overlay. Strongest editorial statement.
   Matches the site most closely in chroma.
   ✓ Best for portraits, strong graphic compositions. */
.photo-filter-duotone {
  position: relative;
  background: var(--accent);
}
.photo-filter-duotone img {
  filter: grayscale(1) contrast(1.08) brightness(1.05);
  mix-blend-mode: luminosity;
  transition: filter 0.5s ease;
}
.photo-filter-duotone::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(68, 4, 128, 0.18);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 1;
}

/* Hover: reveal natural colour (optional — add .photo-reveal-on-hover to enable) */
.photo-reveal-on-hover.photo-filter-editorial:hover img,
.photo-reveal-on-hover.photo-filter-violet:hover img,
.photo-reveal-on-hover.photo-filter-duotone:hover img {
  filter: none;
}
.photo-reveal-on-hover.photo-filter-violet:hover::after,
.photo-reveal-on-hover.photo-filter-duotone:hover::after {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Make sure .photo-band and .about-photo-frame support relative positioning for overlay */
.photo-band { position: relative; }
.about-photo-frame { position: relative; }

/* Fix: ensure overlay doesn't cover the credit text */
.photo-band .photo-band-credit { z-index: 2; }

/* ── CURSOR FIX — hide custom cursor inside lightbox ──────────────────────
   When the lightbox is open (and especially when it uses an iframe fallback),
   the custom cursor dot/ring gets "stuck" because mousemove events stop
   firing once the pointer enters the iframe's browsing context.
   Solution: hide the custom cursor elements while lightbox is open.
   JS sets body.lightbox-open; we respond here in CSS.
   ────────────────────────────────────────────────────────────────────────── */
body.lightbox-open .cursor-dot,
body.lightbox-open .cursor-ring {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* ==========================================================================
   v3.8 — Logo update, topbar height lock, "The House" nav
   ========================================================================== */

/* ── Logo: NPC text SVG / future <img> logo
   Lock the brand mark to a fixed height so the topbar never grows.
   The SVG viewBox is 110×38 — scale it to 36px tall max.
   Works whether the logo is an SVG, an <img>, or inline text.
   ────────────────────────────────────────────────────────── */
.brand-mark {
  width: auto !important;
  height: auto !important;

  max-height: 58px !important;
  max-width: 220px !important;

  flex-shrink: 0 !important;
  display: block;

  object-fit: contain;
}

/* If logo is replaced with <img> */
.brand > img.brand-logo {
  height: auto;
  max-height: 58px;

  width: auto;
  max-width: 220px;

  display: block;
  flex-shrink: 0;

  object-fit: contain;
}

/* Brand text: hide when a heavier logo is used (optional — add .logo-only to .brand) */
.brand.logo-only .brand-text { display: none; }

/* On mobile: slightly smaller logo */
@media (max-width: 860px) {
  .brand-mark { height: 28px !important; max-width: 100px !important; }
  .brand > img.brand-logo { height: 28px; max-width: 100px; }
}

/* ── Topbar height: hard-lock, never expand ── */
.topbar {
  height: var(--nav-height) !important;
  max-height: var(--nav-height) !important;
  overflow: visible;
}
@media (max-width: 860px) {
  .topbar { height: 54px !important; max-height: 54px !important; }
}

/* ── "The House" nav: no special styling needed — it's just a renamed link.
   Included here as a reminder that the name change is global. ── */

/* ==========================================================================
   v3.9 — Lightbox glassmorphism header + hide topbar inside modal
   ========================================================================== */

/* ── Lightbox overlay: same glassmorphism as topbar ── */
.lightbox {
  background: rgba(250, 248, 244, 0.72) !important;
  backdrop-filter: saturate(180%) blur(28px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(28px) !important;
}

/* ── Lightbox head: fully glass, no hard border ── */
.lightbox-head {
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid rgba(18, 16, 16, 0.07) !important;
  padding: 0.9rem var(--gutter) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Section marker in lightbox head */
.lightbox-head .marker {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
}

/* "Open in new tab" link inside lightbox */
.lightbox-tab-link {
  font-family: var(--mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-ghost);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
  padding-bottom: 1px;
}

.lightbox-tab-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* Close button */
.lightbox-close {
  background: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(18, 16, 16, 0.14) !important;
  backdrop-filter: blur(8px);
  transition: background 0.3s var(--ease), color 0.3s var(--ease),
              border-color 0.3s var(--ease), transform 0.4s var(--ease) !important;
}

.lightbox-close:hover {
  background: var(--accent) !important;
  color: var(--paper) !important;
  border-color: var(--accent) !important;
  transform: rotate(90deg) !important;
}

/* ── Hide topbar + mobile-nav when lightbox is open ── */
body.lightbox-open .topbar,
body.lightbox-open .mobile-nav {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.3s ease !important;
}

/* Restore topbar on close */
body:not(.lightbox-open) .topbar,
body:not(.lightbox-open) .mobile-nav {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 0.4s ease;
}

/* ── Lightbox body scroll: clean, no additional padding issues ── */
.lightbox-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

/* Folio-header inside lightbox: same glass sticky treatment */
.lightbox-content .folio-header {
  background: rgba(255, 255, 255, 0.70);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(18, 16, 16, 0.07) !important;
  position: sticky;
  top: 0;
  z-index: 5;
}

/* ── Iframe fallback: glass container ── */
.lightbox-iframe-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.lightbox-iframe-bar {
  flex-shrink: 0;
  padding: 0.6rem var(--gutter);
  text-align: right;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(18, 16, 16, 0.07);
}

/* ==========================================================================
   v4.0 — Lightbox head layout fix: single bar, glass, marker left / actions right
   ========================================================================== */

/* The one and only lightbox bar */
.lightbox-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 0 var(--gutter) !important;
  height: 52px !important;
  flex-shrink: 0 !important;
  gap: 1rem !important;
  /* Glass */
  background: rgba(255, 255, 255, 0.48) !important;
  backdrop-filter: saturate(180%) blur(20px) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
  border-bottom: 1px solid rgba(18, 16, 16, 0.07) !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

/* Right-side group: tab link + close button */
.lightbox-head-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-shrink: 0;
}

/* Tab link — discrete, left of close */
.lightbox-tab-link {
  font-family: var(--mono) !important;
  font-size: 0.58rem !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--ink-ghost) !important;
  text-decoration: none !important;
  border-bottom: 1px solid transparent !important;
  padding-bottom: 1px !important;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease) !important;
  white-space: nowrap !important;
}

.lightbox-tab-link:hover {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* Marker — left */
.lightbox-head .marker {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Close button — stays glass */
.lightbox-close {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px solid rgba(18, 16, 16, 0.12) !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--display) !important;
  font-size: 1.05rem !important;
  line-height: 1 !important;
  transition: background 0.25s var(--ease), color 0.25s var(--ease),
              border-color 0.25s var(--ease), transform 0.35s var(--ease) !important;
  flex-shrink: 0 !important;
}

.lightbox-close:hover {
  background: var(--accent) !important;
  color: var(--paper) !important;
  border-color: var(--accent) !important;
  transform: rotate(90deg) !important;
}

/* Remove any extra bar that might appear inside lightbox-content from folio-header */
.lightbox-content .folio-header {
  /* Keep it subtle — it provides Vol. I · № X context */
  background: rgba(255, 255, 255, 0.55) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  border-bottom: 1px solid rgba(18, 16, 16, 0.06) !important;
  padding: 0.85rem var(--gutter) !important;
  position: sticky !important;
  top: 52px !important; /* below the lightbox-head (52px) */
  z-index: 4 !important;
}

/* Lightbox body: flex column so folio-header sticks and content scrolls */
.lightbox {
  display: flex !important;
  flex-direction: column !important;
}

.lightbox-body {
  flex: 1 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Iframe inside lightbox body — no extra bar, fill height */
.lightbox-body iframe {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: calc(100vh - 52px) !important;
  border: 0 !important;
  background: var(--paper) !important;
}

/* ── Topbar + mobile-nav: hide while lightbox open ──
   Already set in v3.9 CSS but re-asserting with higher specificity */
body.lightbox-open > .topbar,
body.lightbox-open > .mobile-nav,
body.lightbox-open #topbar {
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.25s ease !important;
}