/* ============================================================
   ABOUT — universe "house register / portrait gallery"
   The luminous counterpoint to the dark division worlds:
   warm ivory paper, umber ink, engraved gold. Manifesto hero,
   engraved monogram plates, letterpress weights, hairline ledger.
   Loaded after style-v2.css on /about/ and /fr/about/.
   ============================================================ */

/* ---------- Token remap — warm paper + engraved gold ---------- */
.theme-house {
  --paper: oklch(96.4% 0.018 92);
  --paper-raise: oklch(98.4% 0.011 94);
  --paper-sunk: oklch(93.8% 0.022 90);

  --bg: var(--paper);
  --bg-raise: var(--paper-raise);
  --bg-sunk: var(--paper-sunk);
  --ink: oklch(24% 0.02 74);
  --text: oklch(31% 0.02 76);
  --text-dim: oklch(46% 0.02 78);
  --text-faint: oklch(58% 0.02 78);
  --line: oklch(26% 0.02 76 / 0.14);
  --line-strong: oklch(26% 0.02 76 / 0.28);

  --gold: oklch(60% 0.11 80);
  --gold-deep: oklch(48% 0.1 70);
  --gold-bright: oklch(74% 0.12 86);
  --gold-faint: oklch(70% 0.11 84 / 0.16);
  --gold-line: oklch(55% 0.1 76 / 0.48);

  --shadow-soft: 0 1px 2px oklch(26% 0.02 76 / 0.05), 0 14px 44px -14px oklch(35% 0.04 78 / 0.2);
  --shadow-lift: 0 2px 4px oklch(26% 0.02 76 / 0.06), 0 28px 70px -18px oklch(38% 0.05 76 / 0.3);

  background: var(--bg);
  color: var(--text);
}
.theme-house .lede { color: var(--text-dim); }
.theme-house .lede strong { color: var(--ink); font-weight: 550; }

/* light world: the floating nav speaks ink even before scroll */
.theme-house .site-header:not(.is-scrolled) .brand-mark { color: var(--ink); }
.theme-house .site-header:not(.is-scrolled) .brand .brand-name { color: var(--text-dim); }
.theme-house .site-header:not(.is-scrolled) .nav-links a { color: var(--text-dim); }
.theme-house .site-header:not(.is-scrolled) .nav-links a:hover { color: var(--ink); }
.theme-house .site-header:not(.is-scrolled) .nav-links a[aria-current="page"] { color: var(--gold-deep); }
.theme-house .site-header:not(.is-scrolled) .nav-cta {
  border-color: var(--line-strong);
  color: var(--ink) !important;
}
.theme-house .site-header:not(.is-scrolled) .nav-cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--gold-bright) !important;
}
.theme-house .site-header:not(.is-scrolled) .nav-lang a { border-color: var(--line); color: var(--text-faint); }
.theme-house .site-header:not(.is-scrolled) .nav-lang a:hover { color: var(--ink); border-color: var(--gold-line); }
.theme-house .site-header:not(.is-scrolled) .nav-toggle span,
.theme-house .site-header:not(.is-scrolled) .nav-toggle span::before,
.theme-house .site-header:not(.is-scrolled) .nav-toggle span::after { background: var(--ink); }
.theme-house .site-header.is-scrolled .nav {
  background: oklch(96.4% 0.018 92 / 0.78);
  border-color: var(--line);
}
@media (max-width: 900px) {
  .theme-house .nav-links { background: oklch(96.4% 0.018 92 / 0.97); }
}

/* ---------- Hero — the manifesto ---------- */
.house-hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: clamp(8rem, 7rem + 5vw, 12rem);
  isolation: isolate;
  overflow: clip;
  text-align: center;
  background:
    radial-gradient(64rem 40rem at 50% -18%, oklch(99.5% 0.008 96 / 0.9), transparent 60%),
    linear-gradient(180deg, oklch(97.4% 0.014 94), var(--paper) 70%);
}
.house-atmo {
  position: absolute;
  inset: -10%;
  z-index: -1;
  background:
    radial-gradient(42rem 28rem at 50% 30%, oklch(86% 0.075 86 / 0.35), transparent 62%),
    radial-gradient(30rem 22rem at 8% 92%, oklch(88% 0.05 82 / 0.3), transparent 58%),
    radial-gradient(26rem 20rem at 94% 88%, oklch(86% 0.06 84 / 0.28), transparent 60%);
  animation: atmo-drift 26s ease-in-out infinite alternate;
  will-change: transform;
}
/* gallery mat — double hairline framing the hero */
.house-hero::after {
  content: '';
  position: absolute;
  inset: clamp(0.8rem, 2vw, 1.4rem);
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 4px var(--paper), inset 0 0 0 5px oklch(26% 0.02 76 / 0.08);
  pointer-events: none;
}
.house-hero-inner { position: relative; }

/* engraved emblem — the scales of the house */
.emblem-stage {
  position: relative;
  width: clamp(9.5rem, 17vw, 13rem);
  margin: 0 auto clamp(1.8rem, 3.5vh, 2.8rem);
  border-radius: 50%;
  overflow: hidden;
  box-shadow:
    0 18px 44px -16px oklch(40% 0.05 76 / 0.35),
    inset 0 0 0 1px var(--gold-line);
  background:
    radial-gradient(circle at 34% 28%, oklch(99.4% 0.007 96), oklch(93% 0.024 90) 78%);
}
.emblem-halo {
  position: absolute;
  inset: -22%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(circle, oklch(80% 0.1 84 / 0.5), transparent 62%);
  filter: blur(12px);
  animation: house-halo 8s ease-in-out infinite;
}
@keyframes house-halo {
  0%, 100% { opacity: 0.5; transform: scale(0.95); }
  50% { opacity: 0.9; transform: scale(1.05); }
}
.emblem { display: block; width: 100%; height: auto; }
.emblem-outer {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: house-spin 140s linear infinite;
}
@keyframes house-spin { to { transform: rotate(360deg); } }
.el {
  fill: none;
  stroke: oklch(38% 0.045 72 / 0.72);
  stroke-width: 1.6;
  stroke-linecap: round;
}
.el--strong { stroke: oklch(34% 0.05 72 / 0.9); stroke-width: 2; }
.el--dim { stroke: oklch(48% 0.06 76 / 0.4); stroke-width: 1.1; }
.el-ticks {
  fill: none;
  stroke: oklch(52% 0.085 78 / 0.65);
  stroke-width: 5;
  stroke-dasharray: 1.6 13.32;
}
.el-fill { fill: var(--gold-deep); }
.emblem-scales {
  transform-box: view-box;
  transform-origin: 200px 300px;
  animation: scales-sway 11s ease-in-out infinite;
}
@keyframes scales-sway {
  0%, 100% { transform: rotate(-1.1deg); }
  50% { transform: rotate(1.1deg); }
}
.emblem-beam {
  transform-box: view-box;
  transform-origin: 200px 152px;
  animation: beam-tilt 8s var(--ease-soft) infinite;
}
@keyframes beam-tilt {
  0%, 100% { transform: rotate(-2.2deg); }
  50% { transform: rotate(2.2deg); }
}
.emblem-star {
  fill: var(--gold);
  transform-box: view-box;
  transform-origin: 200px 117px;
  animation: house-star 5s ease-in-out infinite;
}
@keyframes house-star {
  0%, 100% { opacity: 0.75; transform: scale(0.94); }
  50% { opacity: 1; transform: scale(1.06); }
}
/* slow sheen sweeping the engraved disc */
.emblem-sheen {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 38%, oklch(99.5% 0.006 96 / 0.7) 50%, transparent 62%);
  transform: translateX(-130%);
  animation: sheen-sweep 8.5s var(--ease-soft) 1.2s infinite;
  pointer-events: none;
}
@keyframes sheen-sweep {
  0% { transform: translateX(-130%); }
  55%, 100% { transform: translateX(130%); }
}

.house-title {
  font-size: clamp(2.9rem, 1.6rem + 5.4vw, 6.25rem);
  line-height: 1.04;
  color: var(--ink);
  margin-inline: auto;
}
.house-title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--gold-deep) 12%, var(--gold) 50%, var(--gold-deep) 88%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.house-title .line {
  display: block;
  overflow: clip;
  padding-bottom: 0.06em;
  margin-bottom: -0.06em;
}
.house-title .line > span {
  display: block;
  transform: translateY(112%);
  animation: hero-line 1.1s var(--ease-out) forwards;
  animation-delay: calc(350ms + var(--i, 0) * 150ms);
}
.house-lede {
  margin: clamp(1.6rem, 3vh, 2.4rem) auto 0;
  max-width: 56ch;
  opacity: 0;
  animation: hero-fade 1.1s var(--ease-out) 900ms forwards;
}

/* register chips — paper tags */
.house-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem;
  margin-top: 2.4rem;
  opacity: 0;
  animation: hero-fade 1.1s var(--ease-out) 1100ms forwards;
}
.house-meta .chip {
  font-size: var(--text-xs);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.6rem 1.05rem;
  background: oklch(98.6% 0.01 94 / 0.6);
  transition: border-color var(--duration-fast) ease, background var(--duration-fast) ease;
}
.house-meta .chip:hover { border-color: var(--gold-line); background: var(--paper-raise); }
.house-meta .chip strong { color: var(--gold-deep); font-weight: 550; }

.house-hero-foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(3rem, 6vh, 5rem);
  margin-bottom: clamp(1.6rem, 3vh, 2.6rem);
  padding-top: 1.3rem;
  border-top: 1px solid var(--line);
  box-shadow: 0 -4px 0 -3px var(--line);
  font-size: var(--text-xs);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--text-faint);
  opacity: 0;
  animation: hero-fade 1s var(--ease-out) 1350ms forwards;
}

/* hairline that draws itself when its block reveals */
.house-rule {
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.4s var(--ease-out) 250ms;
}
.reveal.is-visible .house-rule,
.house-rule.reveal.is-visible { transform: scaleX(1); }

/* ---------- The weights — letterpress row ---------- */
.weights-section {
  background:
    radial-gradient(52rem 30rem at 92% 8%, oklch(90% 0.045 86 / 0.35), transparent 60%),
    linear-gradient(180deg, var(--paper), var(--paper-sunk) 140%);
}
.weights {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2rem, 4vw, 4rem);
}
.weight { position: relative; padding-top: 1.9rem; }
.weight::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 1px;
  background: var(--line);
}
.weight::after {
  content: '';
  position: absolute;
  top: -1px; left: 0;
  width: 2.4rem;
  height: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--ease-out);
  transition-delay: calc(300ms + var(--i, 0) * 180ms);
}
.weights.is-visible .weight::after { transform: scaleX(1); }
.weight h3 {
  font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.5rem);
  color: var(--ink);
  /* letterpress bite: ink pressed into paper */
  text-shadow:
    0 1px 0 oklch(99.5% 0.006 96 / 0.9),
    0 -1px 1px oklch(30% 0.02 76 / 0.16);
  margin-bottom: 0.9rem;
}
.weight p { font-size: var(--text-sm); color: var(--text-dim); }

/* ---------- The people — engraved portrait plates ---------- */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.3rem, 2.6vw, 2.2rem);
}
.plate {
  position: relative;
  text-align: center;
  padding: clamp(2.2rem, 3.4vw, 3rem) clamp(1.4rem, 2.4vw, 2.2rem) clamp(1.9rem, 3vw, 2.6rem);
  background:
    radial-gradient(26rem 16rem at 50% -30%, oklch(99.4% 0.007 96 / 0.9), transparent 65%),
    var(--paper-raise);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow-soft);
  transition: transform var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-soft), border-color var(--duration) ease;
}
.plate::before {
  content: '';
  position: absolute;
  inset: 0.55rem;
  border: 1px solid var(--line);
  pointer-events: none;
  transition: border-color var(--duration) ease;
}
.plate:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lift);
  border-color: var(--gold-line);
}
.plate:hover::before { border-color: var(--gold-line); }
/* engraved monogram medallion */
.plate-mono {
  position: relative;
  overflow: hidden;
  width: clamp(4.9rem, 6vw, 5.6rem);
  aspect-ratio: 1;
  margin: 0 auto 1.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.12em;
  padding-left: 0.12em;
  color: var(--gold-deep);
  background:
    radial-gradient(circle at 33% 27%, oklch(99.4% 0.007 96), oklch(92.6% 0.025 89) 76%);
  border: 1px solid var(--gold-line);
  box-shadow:
    inset 0 0 0 4px var(--paper-raise),
    inset 0 0 0 5px oklch(55% 0.1 76 / 0.4),
    inset 0 3px 8px oklch(30% 0.02 76 / 0.14),
    0 8px 18px -8px oklch(32% 0.03 76 / 0.3);
}
/* sheen crosses the medallion on hover */
.plate-mono::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: linear-gradient(115deg, transparent 36%, oklch(99.6% 0.005 96 / 0.75) 50%, transparent 64%);
  transform: translateX(-130%);
  transition: transform 1.1s var(--ease-out);
}
.plate:hover .plate-mono::after { transform: translateX(130%); }
.plate-role {
  font-size: var(--text-xs);
  font-weight: 550;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.7rem;
}
.plate h3 {
  font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.65rem);
  color: var(--ink);
  margin-bottom: 0.8rem;
}
.plate p:last-child { font-size: var(--text-sm); color: var(--text-dim); margin-inline: auto; }

/* ---------- How we work — hairline ledger ---------- */
.ledger { border-top: 1px solid var(--line); }
.ledger-row {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: baseline;
  padding-block: clamp(1.5rem, 2.6vw, 2.1rem);
  border-bottom: 1px solid var(--line);
  transition: background var(--duration-fast) ease, padding-left var(--duration) var(--ease-out);
}
.ledger-row:hover { background: var(--paper-raise); padding-left: 0.9rem; }
.ledger-row h3 { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); color: var(--ink); }
.ledger-row p { font-size: var(--text-sm); color: var(--text-dim); }

/* ---------- The register — certificate band ---------- */
.register-band {
  position: relative;
  isolation: isolate;
  overflow: clip;
  text-align: center;
  background:
    radial-gradient(48rem 26rem at 50% 122%, oklch(88% 0.055 84 / 0.4), transparent 62%),
    linear-gradient(180deg, var(--paper), var(--paper-sunk));
}
.reg-frame {
  display: grid;
  justify-items: center;
  gap: clamp(1.8rem, 3vw, 2.6rem);
}
.reg-rule {
  position: relative;
  width: min(26rem, 70%);
  height: 5px;
  border-top: 1px solid var(--gold-line);
  border-bottom: 1px solid var(--gold-line);
}
.reg-rule i {
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  background: var(--gold);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 10px oklch(70% 0.11 84 / 0.55);
}
.reg-quote {
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 1.2rem + 2.2vw, 3rem);
  line-height: 1.28;
  max-width: 30ch;
  text-wrap: balance;
  color: var(--ink);
}
.reg-quote em { font-style: normal; color: var(--gold-deep); }

/* ---------- Responsive ---------- */
@media (max-width: 940px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .weights { grid-template-columns: 1fr; gap: 2.4rem; }
}
@media (max-width: 640px) {
  .house-hero::after { inset: 0.6rem; }
  .house-title { font-size: clamp(2.15rem, 9.8vw, 2.8rem); }
  .gallery { grid-template-columns: 1fr; }
  .ledger-row { grid-template-columns: 1fr; gap: 0.35rem; }
  .house-hero-foot { letter-spacing: 0.18em; }
}

/* ---------- QA mode (?qa=1 — screenshot testing) ---------- */
.qa .house-hero { min-height: 0; }
.qa .house-title .line > span { transform: none; animation: none; }
.qa .house-lede, .qa .house-meta, .qa .house-hero-foot { opacity: 1; animation: none; }
.qa .house-atmo, .qa .emblem-halo, .qa .emblem-outer, .qa .emblem-scales,
.qa .emblem-beam, .qa .emblem-star, .qa .emblem-sheen { animation: none; }
.qa .emblem-sheen { opacity: 0; }
.qa .house-rule { transform: scaleX(1); transition: none; }
.qa .weight::after { transform: scaleX(1); transition: none; }
.qa .plate-mono::after { transition: none; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .house-atmo, .emblem-halo, .emblem-outer, .emblem-scales,
  .emblem-beam, .emblem-star, .emblem-sheen { animation: none; }
  .emblem-sheen { opacity: 0; }
  .house-title .line > span { transform: none; animation: none; }
  .house-lede, .house-meta, .house-hero-foot { opacity: 1; animation: none; }
  .house-rule { transform: scaleX(1); transition: none; }
  .weight::after { transform: scaleX(1); transition: none; }
  .plate, .plate-mono::after { transition: none; }
}