/* ============================================================
   BRITO · NOESIS — Design System
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Spectral:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400;1,500&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root {
  /* ---- warm near-black, layered ---- */
  --ink-900: oklch(0.118 0.006 64);
  --ink-870: oklch(0.142 0.008 64);
  --ink-840: oklch(0.166 0.010 64);
  --ink-800: oklch(0.196 0.012 64);
  --ink-760: oklch(0.236 0.013 64);

  /* ---- gold / bronze ---- */
  --gold:        oklch(0.745 0.085 79);
  --gold-bright: oklch(0.855 0.090 83);
  --gold-deep:   oklch(0.560 0.070 73);
  --bronze:      oklch(0.440 0.048 66);

  /* ---- text ---- */
  --ivory: oklch(0.925 0.022 82);
  --cream: oklch(0.855 0.028 81);
  --muted: oklch(0.660 0.018 76);
  --faint: oklch(0.500 0.013 72);

  /* ---- lines ---- */
  --line:      color-mix(in oklab, var(--gold) 24%, transparent);
  --line-soft: color-mix(in oklab, var(--gold) 13%, transparent);
  --line-faint:color-mix(in oklab, var(--gold) 7%, transparent);

  --glow: color-mix(in oklab, var(--gold) 60%, transparent);

  --maxw: 1240px;
  --pad: clamp(20px, 5vw, 84px);

  --f-display: 'Cinzel', serif;
  --f-body: 'Spectral', Georgia, serif;
  --f-mono: 'JetBrains Mono', ui-monospace, monospace;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  background: var(--ink-900);
  color: var(--cream);
  font-family: var(--f-body);
  font-weight: 400;
  line-height: 1.6;
  font-size: clamp(15px, 1.05vw, 17px);
  overflow-x: hidden;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

/* faint warm radial wash + vignette over the whole page */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% -10%, color-mix(in oklab, var(--gold) 9%, transparent), transparent 55%),
    radial-gradient(140% 100% at 50% 120%, color-mix(in oklab, var(--bronze) 10%, transparent), transparent 60%);
}
/* grain + vignette */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 240px 40px rgba(0,0,0,0.7);
  opacity: 0.9;
  mix-blend-mode: multiply;
}

.app { position: relative; z-index: 2; }

::selection { background: color-mix(in oklab, var(--gold) 35%, transparent); color: var(--ivory); }

img { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

/* ============================================================
   Constellation canvas (fixed, behind content)
   ============================================================ */
#constellation {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  width: 100%; height: 100%;
}

/* ============================================================
   Custom cursor
   ============================================================ */
.cursor-ring, .cursor-dot {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none; border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.cursor-ring {
  width: 34px; height: 34px;
  margin: -17px 0 0 -17px;
  border: 1px solid var(--gold);
  transition: width .25s var(--ease), height .25s var(--ease),
              margin .25s var(--ease), opacity .25s var(--ease),
              border-color .25s var(--ease);
  opacity: 0.7;
}
.cursor-dot {
  width: 5px; height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--gold-bright);
  opacity: 0.95;
}
.cursor-ring.hot {
  width: 56px; height: 56px; margin: -28px 0 0 -28px;
  border-color: var(--gold-bright); opacity: 1;
}
body.has-cursor, body.has-cursor * { cursor: none !important; }
@media (pointer: coarse) { .cursor-ring, .cursor-dot { display: none; } }

/* ============================================================
   Typography utilities
   ============================================================ */
.eyebrow {
  font-family: var(--f-mono);
  font-size: clamp(10px, 0.78vw, 12px);
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.mono { font-family: var(--f-mono); }
.cinzel { font-family: var(--f-display); }

h1,h2,h3 { font-family: var(--f-display); font-weight: 600; color: var(--ivory); line-height: 1.08; }

.display-quote {
  font-family: var(--f-body);
  font-weight: 300;
  font-style: italic;
  color: var(--ivory);
  line-height: 1.32;
  text-wrap: balance;
}

/* ============================================================
   Section scaffolding
   ============================================================ */
.section {
  position: relative;
  padding: clamp(72px, 11vh, 150px) var(--pad);
}
.wrap { max-width: var(--maxw); margin: 0 auto; }
.wrap-narrow { max-width: 880px; margin: 0 auto; }

.divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line), transparent); border: 0; }

/* section header: eyebrow + title + ticked rule */
.sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: clamp(36px, 6vh, 64px); }
.sec-head .rule {
  display: flex; align-items: center; gap: 16px;
  font-family: var(--f-display);
  font-size: clamp(22px, 3.4vw, 40px);
  color: var(--ivory); font-weight: 600;
  letter-spacing: 0.02em;
}
.sec-head .rule::after {
  content: ""; flex: 1; height: 1px;
  background: linear-gradient(90deg, var(--line), var(--line-faint) 70%, transparent);
}
.sec-head .rule .tick {
  width: 9px; height: 9px; flex: none;
  border-left: 1px solid var(--gold); border-top: 1px solid var(--gold);
  align-self: flex-start; margin-top: 6px;
}

/* ============================================================
   Corner-frame (the recurring panel motif)
   ============================================================ */
.frame { position: relative; }
.frame > .c {
  position: absolute; width: 14px; height: 14px; z-index: 3;
  pointer-events: none;
}
.frame > .c.tl { top: 0; left: 0; border-left: 1px solid var(--gold); border-top: 1px solid var(--gold); }
.frame > .c.tr { top: 0; right: 0; border-right: 1px solid var(--gold); border-top: 1px solid var(--gold); }
.frame > .c.bl { bottom: 0; left: 0; border-left: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }
.frame > .c.br { bottom: 0; right: 0; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }

.panel {
  background:
    linear-gradient(180deg, color-mix(in oklab, var(--ink-840) 92%, transparent), color-mix(in oklab, var(--ink-870) 96%, transparent));
  border: 1px solid var(--line-soft);
}

/* ============================================================
   Reveal-on-scroll
   ============================================================ */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .spin, .pulse, .float-cue span { animation: none !important; }
}

/* last-resort fallback for non-painting capture contexts */
html.reveal-static .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

/* ============================================================
   Top bar / language toggle / progress
   ============================================================ */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  pointer-events: none;
  transition: background .4s var(--ease), border-color .4s var(--ease);
  border-bottom: 1px solid transparent;
}
.topbar.solid {
  background: color-mix(in oklab, var(--ink-900) 82%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-faint);
}
.topbar .brand { display: flex; align-items: center; gap: 11px; pointer-events: auto; }
.topbar .brand svg { width: 20px; height: 26px; }
.topbar .brand .bn { font-family: var(--f-display); font-size: 15px; letter-spacing: 0.22em; color: var(--ivory); font-weight: 600; }
.topbar .brand .bn small { color: var(--gold); }

.lang { display: inline-flex; pointer-events: auto; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; }
.lang button {
  font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.12em;
  background: transparent; color: var(--muted); border: 0;
  padding: 7px 13px; cursor: pointer; transition: color .25s, background .25s;
}
.lang button.on { background: color-mix(in oklab, var(--gold) 88%, black); color: var(--ink-900); font-weight: 700; }

/* scroll progress hairline */
.progress { position: fixed; top: 0; left: 0; height: 2px; z-index: 70; background: linear-gradient(90deg, var(--gold-deep), var(--gold-bright)); width: 0; box-shadow: 0 0 10px var(--glow); }

/* ============================================================
   HERO
   ============================================================ */
.hero { min-height: 100svh; display: grid; place-items: center; text-align: center; padding: 120px var(--pad) 90px; position: relative; }
.hero-inner { display: flex; flex-direction: column; align-items: center; gap: clamp(26px, 4vh, 46px); }

.phi-stage { position: relative; width: clamp(200px, 34vw, 340px); aspect-ratio: 1; display: grid; place-items: center; }
.phi-stage .glow {
  position: absolute; inset: -28%;
  background: radial-gradient(circle, var(--glow), transparent 62%);
  filter: blur(8px); opacity: 0.55;
  animation: pulse 5.5s var(--ease) infinite;
}
@keyframes pulse { 0%,100% { opacity: .38; transform: scale(.96); } 50% { opacity: .7; transform: scale(1.04); } }
.phi-stage .mark {
  position: relative; width: 76%; aspect-ratio: 1; border-radius: 50%;
  object-fit: cover;
  mix-blend-mode: screen;
  -webkit-mask: radial-gradient(circle, #000 58%, transparent 72%);
          mask: radial-gradient(circle, #000 58%, transparent 72%);
}
.phi-stage .ring { position: absolute; inset: 0; }
.phi-stage .ring.spin { animation: spin 48s linear infinite; }
.phi-stage .ring.spin.rev { animation-duration: 72s; animation-direction: reverse; }
@keyframes spin { to { transform: rotate(360deg); } }

.hero h1 {
  font-family: var(--f-display); font-weight: 700;
  font-size: clamp(58px, 15vw, 168px);
  letter-spacing: 0.06em; color: var(--ivory);
  line-height: 0.9;
  text-shadow: 0 0 50px color-mix(in oklab, var(--gold) 30%, transparent);
}
.hero .tagline { font-family: var(--f-body); font-style: italic; font-weight: 300; color: var(--cream); font-size: clamp(16px, 2.4vw, 25px); letter-spacing: 0.01em; }
.hero .expansion { font-family: var(--f-mono); font-size: clamp(11px, 1.2vw, 14px); letter-spacing: 0.18em; color: var(--gold); text-transform: none; max-width: 40ch; line-height: 1.7; }
.hero .mission { font-family: var(--f-body); font-style: italic; font-weight: 300; color: var(--cream); font-size: clamp(15px, 1.9vw, 21px); line-height: 1.5; max-width: 30ch; text-wrap: balance; margin-top: -8px; }
.hero .meta { display: flex; flex-wrap: wrap; gap: 14px 26px; justify-content: center; align-items: center; }
.chip { font-family: var(--f-mono); font-size: clamp(10px, 0.85vw, 12px); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 9px; }
.chip .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 8px var(--glow); }

.float-cue { display: flex; flex-direction: column; align-items: center; gap: 9px; color: var(--faint); font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.3em; }
.float-cue span { display: block; width: 1px; height: 40px; background: linear-gradient(var(--gold), transparent); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); transform-origin: top; opacity: 0; } }

/* ============================================================
   MANIFESTO
   ============================================================ */
.manifesto { text-align: center; }
.manifesto .quote-mark { font-family: var(--f-display); font-size: clamp(60px, 12vw, 140px); color: var(--line); line-height: 0.4; height: 0.5em; }
.manifesto .big {
  font-family: var(--f-body); font-style: italic; font-weight: 300;
  font-size: clamp(26px, 4.8vw, 60px); line-height: 1.28; color: var(--ivory);
  text-wrap: balance; max-width: 16ch; margin: 0 auto;
}
.manifesto .big em { font-style: italic; color: var(--gold-bright); font-weight: 400; }
.manifesto .attrib { margin-top: 34px; }

/* ============================================================
   THE OBSERVER MARK
   ============================================================ */
.mark-grid { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: clamp(24px, 4vw, 60px); align-items: stretch; }
.brito-intro { padding-top: clamp(40px, 7vh, 90px); }
.bi-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 70px); align-items: center; }
.bi-text { display: flex; flex-direction: column; gap: 14px; }
.bi-framing { font-family: var(--f-body); font-style: italic; font-weight: 300; color: var(--muted); font-size: clamp(15px, 1.8vw, 20px); margin-bottom: -10px; }
.bi-name { font-family: var(--f-display); font-weight: 700; font-size: clamp(54px, 9vw, 120px); letter-spacing: 0.05em; color: var(--ivory); line-height: 0.92; text-shadow: 0 0 44px color-mix(in oklab, var(--gold) 26%, transparent); }
.bi-tagline { font-family: var(--f-body); font-style: italic; font-weight: 300; color: var(--gold-bright); font-size: clamp(16px, 2vw, 22px); }
.bi-blurb { font-family: var(--f-body); color: var(--cream); font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65; max-width: 46ch; margin-top: 6px; }
.bi-version { display: inline-block; align-self: flex-start; margin-top: 12px; font-size: 11px; letter-spacing: 0.2em; color: var(--gold); border: 1px solid var(--line); padding: 8px 16px; }
.bi-portrait { position: relative; display: grid; place-items: center; padding: clamp(10px, 2vw, 24px); min-height: 440px; }
.bi-glow { position: absolute; width: 56%; aspect-ratio: 1; top: 6%; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 64%); filter: blur(18px); opacity: 0.26; animation: pulse 6.5s var(--ease) infinite; }
.bi-portrait img { position: relative; z-index: 1; height: clamp(380px, 56vh, 600px); width: auto; max-width: 100%; object-fit: contain; }
.bi-portrait .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 18px; background: linear-gradient(transparent, color-mix(in oklab, var(--ink-900) 92%, transparent)); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); display: flex; justify-content: space-between; gap: 10px; }
.mark-stage { position: relative; display: grid; place-items: center; padding: clamp(28px, 4vw, 56px); min-height: 360px; background: radial-gradient(120% 120% at 50% 42%, color-mix(in oklab, var(--ink-840) 80%, transparent), color-mix(in oklab, var(--ink-900) 96%, transparent)); border: 1px solid var(--line-soft); overflow: hidden; }
.mark-stage .mglow { position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, var(--glow), transparent 64%); filter: blur(10px); opacity: 0.4; animation: pulse 6s var(--ease) infinite; }
.mark-stage img { position: relative; width: min(78%, 360px); aspect-ratio: 1; object-fit: contain; }
.mark-stage .mcap { position: absolute; bottom: 16px; left: 0; right: 0; text-align: center; font-size: 10.5px; letter-spacing: 0.24em; color: var(--muted); }

.mark-read { display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.mark-read .mname { font-size: clamp(22px, 3vw, 34px); color: var(--gold); letter-spacing: 0.14em; font-weight: 600; }
.mark-read .msub { font-family: var(--f-body); font-style: italic; font-weight: 300; color: var(--ivory); font-size: clamp(16px, 1.9vw, 22px); line-height: 1.4; margin-bottom: 14px; max-width: 30ch; }
.readings { list-style: none; display: flex; flex-direction: column; }
.readings li { display: flex; gap: 18px; padding: 18px 0; border-top: 1px solid var(--line-faint); }
.readings li:last-child { border-bottom: 1px solid var(--line-faint); }
.readings .ri { color: var(--gold-deep); font-size: 12px; letter-spacing: 0.1em; padding-top: 3px; flex: none; }
.readings h3 { font-family: var(--f-display); font-size: clamp(15px, 1.5vw, 18px); color: var(--ivory); letter-spacing: 0.03em; margin-bottom: 5px; }
.readings p { font-size: clamp(13.5px, 1.3vw, 15.5px); color: var(--muted); line-height: 1.55; }

/* brand-book feature (gallery) */
.bookfeat { position: relative; margin-top: 16px; overflow: hidden; cursor: pointer; border: 1px solid var(--line-faint); background: var(--ink-870); height: clamp(260px, 38vw, 460px); }
.bookfeat img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: saturate(0.96) brightness(0.92); transition: transform .9s var(--ease), filter .6s; }
.bookfeat:hover img { transform: scale(1.03); filter: saturate(1.04) brightness(1.0); }
.bookfeat .lab { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px; background: linear-gradient(transparent, color-mix(in oklab, var(--ink-900) 92%, transparent)); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); display: flex; justify-content: space-between; }
.bookfeat .c { position: absolute; width: 14px; height: 14px; z-index: 3; }
.bookfeat .c.tl { top: 10px; left: 10px; border-left: 1px solid var(--gold); border-top: 1px solid var(--gold); }
.bookfeat .c.br { bottom: 10px; right: 10px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }

/* ============================================================
   IDENTITY spec sheet
   ============================================================ */
.id-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.spec { padding: clamp(26px, 3.5vw, 46px); }
.spec dl { display: grid; grid-template-columns: max-content 1fr; gap: 0; }
.spec .row { display: contents; }
.spec dt { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold); padding: 18px 28px 18px 0; border-bottom: 1px solid var(--line-faint); white-space: nowrap; align-self: center; }
.spec dd { font-family: var(--f-body); color: var(--cream); padding: 18px 0; border-bottom: 1px solid var(--line-faint); font-size: clamp(15px, 1.4vw, 18px); }
.spec .row:last-child dt, .spec .row:last-child dd { border-bottom: 0; }
.spec dd strong { color: var(--ivory); font-weight: 600; font-family: var(--f-display); letter-spacing: 0.04em; }

.portrait-card { position: relative; overflow: hidden; min-height: 320px; display: grid; }
.portrait-card img { width: 100%; height: 100%; object-fit: cover; }
.portrait-card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 20px; background: linear-gradient(transparent, color-mix(in oklab, var(--ink-900) 92%, transparent)); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream); display: flex; justify-content: space-between; gap: 10px; }

/* ============================================================
   PIPELINE
   ============================================================ */
.pipe { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.node {
  position: relative; padding: 26px 16px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  transition: background .35s var(--ease);
}
.node:not(:last-child)::after {
  content: ""; position: absolute; top: 52px; right: -6px; width: 12px; height: 12px; z-index: 2;
  border-top: 1px solid var(--gold); border-right: 1px solid var(--gold);
  transform: rotate(45deg);
}
.node .glyph { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; transition: border-color .35s, box-shadow .35s, transform .35s var(--ease); }
.node .glyph svg { width: 26px; height: 26px; stroke: var(--gold); fill: none; }
.node .nm { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cream); }
.node .ds { font-size: 13px; color: var(--muted); line-height: 1.45; max-width: 18ch; opacity: 0; max-height: 0; transition: opacity .4s, max-height .4s; }
.node:hover { background: color-mix(in oklab, var(--gold) 5%, transparent); }
.node:hover .glyph { border-color: var(--gold); box-shadow: 0 0 22px color-mix(in oklab, var(--gold) 26%, transparent); transform: translateY(-3px); }
.node:hover .ds { opacity: 1; max-height: 120px; }

/* signature row under pipeline */
.sig-row { display: flex; align-items: center; gap: 20px; justify-content: center; margin-top: 46px; padding-top: 40px; border-top: 1px solid var(--line-faint); flex-wrap: wrap; text-align: center; }
.sig-row svg { width: 38px; height: 48px; flex: none; }
.sig-row .t1 { font-family: var(--f-display); font-size: clamp(26px, 3.5vw, 40px); color: var(--ivory); letter-spacing: 0.06em; }
.sig-row .t2 { font-family: var(--f-body); font-style: italic; color: var(--gold); font-size: clamp(14px, 1.6vw, 18px); }

/* ============================================================
   PRINCIPLES
   ============================================================ */
.princ { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px; background: var(--line-faint); border: 1px solid var(--line-faint); }
.pcard { background: var(--ink-870); padding: clamp(22px, 2.6vw, 34px) clamp(16px, 1.8vw, 24px); display: flex; flex-direction: column; gap: 14px; transition: background .4s var(--ease); position: relative; }
.pcard:hover { background: color-mix(in oklab, var(--gold) 6%, var(--ink-840)); }
.pcard .idx { font-family: var(--f-mono); font-size: 11px; color: var(--gold-deep); letter-spacing: 0.1em; }
.pcard .glyph { width: 40px; height: 40px; }
.pcard .glyph svg { width: 100%; height: 100%; stroke: var(--gold); fill: none; }
.pcard h3 { font-family: var(--f-display); font-size: clamp(15px, 1.5vw, 19px); color: var(--ivory); letter-spacing: 0.04em; }
.pcard .ax { font-family: var(--f-body); font-style: italic; color: var(--cream); font-size: clamp(13px, 1.25vw, 15.5px); line-height: 1.5; }
.pcard .ax b { font-style: normal; color: var(--gold-bright); font-weight: 500; }

/* ============================================================
   BEHAVIOUR verbs
   ============================================================ */
.verbs { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; background: var(--line-faint); border: 1px solid var(--line-faint); }
.verb { background: var(--ink-870); padding: clamp(20px,2.4vw,30px); display: flex; flex-direction: column; gap: 9px; transition: background .35s; }
.verb:hover { background: color-mix(in oklab, var(--gold) 5%, var(--ink-840)); }
.verb .v { font-family: var(--f-display); font-size: clamp(16px,1.8vw,22px); color: var(--gold); letter-spacing: 0.08em; }
.verb p { font-size: clamp(13px,1.2vw,15px); color: var(--muted); line-height: 1.5; }

/* ============================================================
   VISTAS — entity study sheet
   ============================================================ */
.sheet { position: relative; max-width: 820px; margin: 0 auto; cursor: zoom-in; overflow: hidden; border: 1px solid var(--line-soft); background: var(--ink-870); }
.sheet > img { width: 100%; height: auto; display: block; transition: transform 1s var(--ease), filter .6s; filter: saturate(0.97) brightness(0.95); }
.sheet:hover > img { transform: scale(1.015); filter: saturate(1.04) brightness(1.0); }
.sheet .lab { position: absolute; left: 0; right: 0; bottom: 0; padding: 16px 20px; background: linear-gradient(transparent, color-mix(in oklab, var(--ink-900) 92%, transparent)); font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sheet .lab .mono { color: var(--gold); }
.sheet > .c { width: 16px; height: 16px; }

/* ============================================================
   VISTAS — interactive 3D viewer embed + site control panel
   ============================================================ */
.v3d { display: grid; grid-template-columns: 210px 1fr; gap: 18px; align-items: stretch; }
.v3d-controls { display: flex; flex-direction: column; gap: 18px; padding-top: 2px; }
.v3d-grp { display: flex; flex-direction: column; gap: 7px; }
.v3d-lbl { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--faint); margin-bottom: 2px; }
.v3d-btn { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; text-align: left;
  color: var(--cream); background: color-mix(in oklab, var(--ink-870) 80%, transparent); border: 1px solid var(--line-faint);
  padding: 11px 13px; cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.v3d-btn:hover { color: var(--ivory); border-color: var(--line); background: color-mix(in oklab, var(--gold) 6%, var(--ink-840)); }
.v3d-btn.on { color: var(--gold-bright); border-color: var(--gold); background: color-mix(in oklab, var(--gold) 12%, transparent); }
.v3d-stage { position: relative; overflow: hidden; min-height: clamp(460px, 68vh, 760px); background: transparent; }
.v3d-stage iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 820px) {
  .v3d { grid-template-columns: 1fr; }
  .v3d-controls { flex-direction: row; flex-wrap: wrap; gap: 10px 18px; }
  .v3d-grp { flex: 1; min-width: 130px; }
  .v3d-stage { min-height: clamp(420px, 58vh, 640px); }
}

/* ============================================================
   GALLERY
   ============================================================ */
.gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.tile { position: relative; overflow: hidden; cursor: pointer; border: 1px solid var(--line-faint); background: var(--ink-870); aspect-ratio: 3 / 4; }
.tile img { width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .9s var(--ease), filter .6s; filter: saturate(0.95) brightness(0.94); }
.tile:hover img { transform: scale(1.04); filter: saturate(1.05) brightness(1.02); }
.tile .lab { position: absolute; left: 0; bottom: 0; right: 0; padding: 14px 16px; background: linear-gradient(transparent, color-mix(in oklab, var(--ink-900) 90%, transparent)); font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cream); display: flex; justify-content: space-between; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.tile:hover .lab { opacity: 1; transform: none; }
.tile .c { position: absolute; width: 12px; height: 12px; z-index: 3; opacity: 0; transition: opacity .4s; }
.tile:hover .c { opacity: 1; }
.tile .c.tl { top: 8px; left: 8px; border-left: 1px solid var(--gold); border-top: 1px solid var(--gold); }
.tile .c.br { bottom: 8px; right: 8px; border-right: 1px solid var(--gold); border-bottom: 1px solid var(--gold); }

/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: 200; background: color-mix(in oklab, var(--ink-900) 96%, black); backdrop-filter: blur(8px); display: grid; place-items: center; padding: 5vh 5vw; opacity: 0; pointer-events: none; transition: opacity .4s var(--ease); }
.lightbox.open { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 90vh; object-fit: contain; border: 1px solid var(--line); box-shadow: 0 30px 90px rgba(0,0,0,.7); }
.lightbox .x { position: absolute; top: 22px; right: 26px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.2em; color: var(--cream); background: transparent; border: 1px solid var(--line); padding: 9px 14px; cursor: pointer; }
.lightbox .x:hover { border-color: var(--gold); color: var(--ivory); }

/* ============================================================
   DECLARATION (parchment)
   ============================================================ */
.decl { display: grid; place-items: center; }
.parch {
  position: relative; width: min(820px, 100%);
  padding: clamp(38px, 6vw, 72px) clamp(28px, 6vw, 80px);
  color: #2a2114;
  background:
    radial-gradient(120% 120% at 80% 0%, #efe2c4, #e4d3ad 45%, #d8c39a 78%, #cdb78c);
  box-shadow: 0 40px 90px rgba(0,0,0,.55), inset 0 0 90px rgba(120,90,40,.28);
  border-radius: 3px;
}
.parch::before {
  content: ""; position: absolute; inset: 12px; border: 1px solid rgba(90,66,28,.4); pointer-events: none;
}
.parch .deyebrow { font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; color: #6e5223; }
.parch h2 { font-family: var(--f-display); color: #2a2012; font-size: clamp(22px, 3.4vw, 34px); margin: 12px 0 26px; letter-spacing: 0.04em; }
.parch p { font-family: var(--f-body); font-size: clamp(15px, 1.5vw, 18.5px); line-height: 1.74; color: #3a2d18; margin-bottom: 16px; }
.parch p strong { color: #20180c; font-weight: 600; }
.parch .seal { display: flex; align-items: center; gap: 18px; margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(90,66,28,.35); }
.parch .seal .stamp { width: 86px; height: 86px; flex: none; }
.parch .seal .sig .n { font-family: var(--f-display); font-size: 19px; letter-spacing: 0.3em; color: #2a2012; }
.parch .seal .sig .o { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.14em; color: #6e5223; text-transform: uppercase; }

/* parchment image (PT declaration) */
.parch-img { position: relative; max-width: 900px; margin: 0 auto; cursor: zoom-in; overflow: hidden; line-height: 0; box-shadow: 0 40px 90px rgba(0,0,0,.55); }
.parch-img > img { width: 100%; height: auto; display: block; transition: transform 1s var(--ease), filter .6s; filter: saturate(1.02) brightness(0.99); }
.parch-img:hover > img { transform: scale(1.012); filter: saturate(1.06) brightness(1.03); }
.parch-img > .c { width: 16px; height: 16px; z-index: 3; }

/* ============================================================
   FOOTER
   ============================================================ */
.foot { padding: clamp(60px, 9vh, 110px) var(--pad) 60px; border-top: 1px solid var(--line-faint); text-align: center; }
.foot .fmark { display: grid; place-items: center; margin-bottom: 26px; }
.foot .fmark svg { width: 34px; height: 44px; }
.foot .fname { font-family: var(--f-display); font-size: clamp(18px,2.4vw,26px); letter-spacing: 0.18em; color: var(--ivory); }
.foot .fsub { font-family: var(--f-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 10px; }
.foot .flatin { font-family: var(--f-body); font-style: italic; color: var(--gold); margin-top: 22px; font-size: 15px; }
.foot .fmeta { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; margin-top: 30px; font-family: var(--f-mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 980px) {
  .id-grid { grid-template-columns: 1fr; }
  .mark-grid { grid-template-columns: 1fr; }
  .bi-grid { grid-template-columns: 1fr; gap: 32px; }
  .bi-portrait { max-width: 460px; }
  .pipe { grid-template-columns: repeat(2, 1fr); }
  .node:not(:last-child)::after { display: none; }
  .node:nth-child(odd) { border-right: 1px solid var(--line-faint); }
  .node { border-bottom: 1px solid var(--line-faint); }
  .princ { grid-template-columns: repeat(2, 1fr); }
  .pcard:last-child { grid-column: span 2; }
  .gal { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}
@media (max-width: 560px) {
  :root { --pad: 18px; }
  .pipe { grid-template-columns: 1fr; }
  .node:nth-child(odd) { border-right: 0; }
  .princ { grid-template-columns: 1fr; }
  .pcard:last-child { grid-column: span 1; }
  .gal { grid-template-columns: 1fr; }
  .spec dl { grid-template-columns: 1fr; }
  .spec dt { border-bottom: 0; padding-bottom: 4px; }
  .spec dd { padding-top: 2px; }
  .spec .row { display: block; padding: 14px 0; border-bottom: 1px solid var(--line-faint); }
  .spec .row:last-child { border-bottom: 0; }
  .hero h1 { font-size: clamp(56px, 22vw, 96px); }
}