/* ============================================================
   ARA LABS — shared system (stealth site)
   ============================================================ */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Space+Grotesk:wght@300;400;500;600&family=Space+Mono:wght@400&display=swap");

:root{
  --black:#070706;
  --black-2:#0E0E0C;
  --paper:#EFEDE6;
  --paper-2:#E7E4DB;
  --on-dark:#E9E7E0;
  --muted-dark:#8A867C;
  --muted:#6E6B62;
  --line-dark:#262521;
  --line:#CFCBC0;
  --red:oklch(0.58 0.19 28);
  --serif:"Playfair Display", Georgia, serif;
  --sans:"Space Grotesk", system-ui, sans-serif;
  --mono:"Space Mono", ui-monospace, monospace;
  --pad: clamp(24px, 5vw, 90px);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-optical-sizing:auto; }
body{
  font-family:var(--sans); font-weight:400; line-height:1.55;
  background:var(--black); color:var(--on-dark);
  min-height:100svh; overflow-x:hidden;
}
body.theme-light{ background:var(--paper); color:var(--black); }
::selection{ background:var(--paper); color:var(--black); }
.theme-light ::selection{ background:var(--black); color:var(--paper); }
a{ color:inherit; text-decoration:none; }
img{ display:block; max-width:100%; }

/* ---------- atoms ---------- */
.eyebrow{ font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-dark); }
.theme-light .eyebrow{ color:var(--muted); }
.serif{ font-family:var(--serif); font-weight:400; line-height:1.08; letter-spacing:-.01em; }
.rule{ width:56px; height:1px; background:currentColor; opacity:.5; }
.link{ position:relative; display:inline-block; }
.link::after{ content:""; position:absolute; left:0; bottom:-2px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.link:hover::after{ transform:scaleX(1); }
.arrow{ color:currentColor; display:inline-block; transition:transform .45s cubic-bezier(.2,.7,.2,1); }
.has-arrow:hover .arrow{ transform:translateX(8px); }
.dot{ width:6px; height:6px; border-radius:50%; background:var(--red); display:inline-block; }

/* ---------- nav ---------- */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px var(--pad); color:var(--on-dark);
}
.theme-light .nav{ color:var(--black); }
.nav .brand{ font-family:var(--serif); font-weight:600; font-size:37.5px; letter-spacing:.004em;
  line-height:1; white-space:nowrap; display:inline-flex; align-items:center; }
.nav .brand-dot{ width:8px; height:8px; border-radius:50%; background:var(--red);
  margin-left:15px; flex:0 0 auto; transform:translateY(-0.06em);
  transition:transform .55s cubic-bezier(.2,.7,.2,1); }
.nav .brand:hover .brand-dot{ transform:translateY(-0.06em) scale(1.6); }
.nav .right{ display:flex; gap:32px; align-items:center; font-size:13px; letter-spacing:.02em; }
.nav .right a{ opacity:.62; transition:opacity .35s ease; }
.nav .right a:hover,
.nav .right a.active{ opacity:1; }
.nav .access{ display:inline-flex; align-items:center; gap:8px; }
.nav .access .dot{ transition:transform .4s ease; }
.nav .access:hover .dot{ transform:scale(1.6); }

/* ---------- page scaffold ---------- */
.page{ min-height:100svh; position:relative; padding:0 var(--pad); }

/* ============================================================
   COVER (landing) — full-bleed threshold
   ============================================================ */
.cover{ position:relative; height:100svh; width:100%; overflow:hidden; background:#050504; }
.cover-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:58% center;
  transform-origin:62% 44%; will-change:transform, opacity; }
@media (prefers-reduced-motion: no-preference){
  .cover-img{ animation:coverDrift 18s cubic-bezier(.17,.67,.2,1) both; }
}
@keyframes coverDrift{
  0%{ transform:scale(1.085); opacity:.55; }
  14%{ opacity:1; }
  100%{ transform:scale(1); opacity:1; }
}
.cover-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg, rgba(5,5,4,.55) 0%, transparent 19%, transparent 50%, rgba(5,5,4,.85) 100%); }
.cover-foot{ position:absolute; z-index:3; left:var(--pad); right:var(--pad); bottom:clamp(34px,6vh,66px);
  display:flex; justify-content:space-between; align-items:flex-end; gap:40px; }
.cover-foot .lede{ font-family:var(--serif); font-weight:400; font-size:clamp(2.25rem,4.2vw,3.45rem);
  line-height:1.16; color:#F4F1E9; letter-spacing:-.012em; white-space:nowrap; }
.cover-foot .enter{ display:inline-flex; align-items:center; gap:11px; margin-top:24px; font-size:14px; color:#EDEAE1; }
.cover-foot .enter .dot{ transition:transform .5s ease; }
.cover-foot .enter:hover .dot{ transform:scale(1.7); }
.cover-foot .enter .lab{ position:relative; }
.cover-foot .enter .lab::after{ content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.cover-foot .enter:hover .lab::after{ transform:scaleX(1); }
.cover-foot .meta{ font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(233,231,224,.6); text-align:right; white-space:nowrap; }

/* ============================================================
   CONTACT — split with facility image
   ============================================================ */
.contact{ min-height:100svh; display:grid; grid-template-columns:0.92fr 1.08fr; }
.contact .panel{ padding:clamp(110px,12vw,160px) clamp(28px,5vw,84px) 64px; display:flex; flex-direction:column; justify-content:center; }
.contact .media{ position:relative; overflow:hidden; background:#0b0a08; }
.contact .media img{ width:100%; height:100%; object-fit:cover; object-position:center 42%; display:block;
  filter:contrast(1.07) saturate(.82) brightness(.97) sepia(.05); }
.contact .media::after{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(135% 110% at 50% 40%, transparent 58%, rgba(0,0,0,.34) 100%); }
.contact .media::before{ content:""; position:absolute; inset:0; z-index:4; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:160px 160px; opacity:.8; mix-blend-mode:overlay; }
.contact .panel{ padding:clamp(92px,10vw,126px) clamp(28px,5vw,84px) 50px; }
.contact .access-lead h1{ font-size:clamp(2.4rem,4.6vw,4rem); }
.contact .access-lead p{ margin-top:24px; font-size:clamp(15px,1.15vw,17px); line-height:1.65; max-width:40ch; color:var(--muted); }
.contact .access-lead .rule{ margin-top:30px; }
.enq-email{ position:relative; display:inline-block; margin-top:28px; font-family:var(--mono); font-weight:400;
  font-size:clamp(15px,1.2vw,17px); letter-spacing:.01em; color:var(--black); padding-bottom:5px; }
.enq-email::before{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:rgba(0,0,0,.2); }
.enq-email::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:100%; background:var(--black);
  transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.enq-email:hover::after{ transform:scaleX(1); }
.enq-meta{ margin-top:20px; font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); }
.enq-back{ position:relative; display:inline-flex; align-items:center; gap:9px; margin-top:48px;
  font-family:var(--mono); font-size:12px; letter-spacing:.04em; color:var(--muted); transition:color .3s ease; }
.enq-back .txt{ position:relative; }
.enq-back .txt::after{ content:""; position:absolute; left:0; bottom:-3px; height:1px; width:100%; background:currentColor;
  transform:scaleX(0); transform-origin:left; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.enq-back:hover{ color:var(--black); }
.enq-back:hover .txt::after{ transform:scaleX(1); }
.enq-back .arrow{ transition:transform .4s cubic-bezier(.2,.7,.2,1); }
.enq-back:hover .arrow{ transform:translateX(-5px); }

/* ============================================================
   INSPIRATION — Ernst Abbe
   ============================================================ */
.insp-wrap{ max-width:1060px; margin:0 auto; padding:150px 0 130px; }

/* ============================================================
   ACCESS — calm cream
   ============================================================ */
.access-lead .eyebrow{ color:var(--muted); }
.access-lead h1{ font-family:var(--serif); font-weight:400; font-size:clamp(2.8rem,5.4vw,4.8rem);
  line-height:1; margin-top:24px; }
.access-lead p{ margin-top:26px; max-width:32ch; color:var(--muted); font-size:15px; line-height:1.75; }
.access-lead .rule{ margin-top:34px; }

/* ---------- page transition (native cross-document crossfade — no white flash) ---------- */
@view-transition{ navigation:auto; }
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root){ animation:vtOut .26s cubic-bezier(.4,0,1,1) both; }
  ::view-transition-new(root){ animation:vtIn .42s cubic-bezier(0,0,.2,1) both; }
}
@keyframes vtOut{ to{ opacity:0; } }
@keyframes vtIn{ from{ opacity:0; } to{ opacity:1; } }

/* ---------- reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .rv{ opacity:0; transform:translateY(24px); transition:opacity 1s cubic-bezier(.2,.7,.2,1), transform 1s cubic-bezier(.2,.7,.2,1); }
  .rv.in{ opacity:1; transform:none; }
  .rv.d1{ transition-delay:.09s; } .rv.d2{ transition-delay:.18s; } .rv.d3{ transition-delay:.27s; } .rv.d4{ transition-delay:.36s; }
}

/* ============================================================
   META FOOTER (running grid)
   ============================================================ */
.metafoot{ position:fixed; left:0; right:0; bottom:0; z-index:40; display:grid; grid-template-columns:1fr 1fr 1fr;
  padding:18px var(--pad); font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--muted-dark); pointer-events:none; }
.theme-light .metafoot{ color:var(--muted); }
.metafoot .c{ pointer-events:auto; }
.metafoot .mid{ text-align:center; }
.metafoot .end{ text-align:right; }
body.longpage .metafoot{ position:static; margin-top:56px; }

/* ============================================================
   LINEAGE — redacted dossier (the classified present)
   ============================================================ */
.dossier{ background:#F1EDE3; color:#171614; border-radius:5px;
  padding:clamp(38px,4.6vw,68px); margin:clamp(72px,8vw,108px) 0 0;
  box-shadow:0 40px 90px -40px rgba(0,0,0,.7); }
.dossier-tag{ display:flex; align-items:center; gap:12px;
  font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:#756f64; }
.dossier-tag::before{ content:""; width:7px; height:7px; background:#171614;
  transform:rotate(45deg); flex:0 0 auto; }
.dossier-line{ font-family:var(--serif); font-weight:400;
  font-size:clamp(2rem,3.6vw,3.05rem); line-height:1.1; letter-spacing:-.014em;
  margin:20px 0 34px; max-width:none; }
.dossier-cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,3.4vw,52px); }
.dossier-cols p{ font-family:var(--sans); font-weight:300; font-size:16px;
  line-height:1.62; color:#3a362e; margin:0; }
@media (max-width:720px){ .dossier-cols{ grid-template-columns:1fr; gap:22px; } }

/* ink redaction — hand-inked censor mark (rough brushed edge via #ink-edge) */
.rd{ display:inline-block; background:#16130d; color:transparent;
  padding:0 .2em; margin:0 .06em; line-height:1.04; border-radius:1px;
  white-space:nowrap; user-select:none; vertical-align:baseline;
  filter:url(#ink-edge); }
.dossier-line .rd{ padding:0 .2em; margin:0 .09em; line-height:1.0; }

/* ============================================================
   LINEAGE — editorial ledger (numbered chapters on a left rail)
   ============================================================ */
.lin-masthead{ padding-bottom:clamp(34px,4vw,52px); }
.lin-masthead h1{ font-family:var(--serif); font-weight:400; font-size:clamp(2.7rem,5.6vw,4.8rem);
  line-height:1.03; letter-spacing:-.018em; color:#F4F1E9; margin-top:24px; max-width:none; }

.chapter{ display:grid; grid-template-columns:176px minmax(0,1fr); gap:clamp(28px,3.5vw,56px);
  padding:clamp(46px,5.5vw,86px) 0; border-top:1px solid var(--line-dark); }
.chapter-label{ position:sticky; top:118px; align-self:start; display:flex; flex-direction:column; gap:16px; }
.chapter-num{ font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,1.9vw,1.9rem); line-height:1; color:#C9C3B6; }
.chapter-name{ font-family:var(--mono); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted-dark); }
.chapter-flag{ align-self:start; font-family:var(--mono); font-size:9.5px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--muted-dark); border:1px solid var(--line-dark);
  padding:5px 9px; margin-top:2px; }
.chapter-body{ max-width:760px; }

.chapter-body .lede{ font-family:var(--serif); font-weight:400; color:#F4F1E9;
  font-size:clamp(1.55rem,2.5vw,2.2rem); line-height:1.28; letter-spacing:-.012em; margin:0 0 1.1em; max-width:none; }
.chapter-body p{ font-family:var(--sans); font-weight:300; color:var(--muted);
  font-size:clamp(1.08rem,1.25vw,1.22rem); line-height:1.6; margin:0 0 1.05em; }
.chapter-body p:last-child{ margin-bottom:0; }

.chapter-portrait{ width:100%; margin:0; }
.chapter-portrait img{ width:100%; height:auto; display:block;
  filter:grayscale(1) contrast(1.04) brightness(.96); border:1px solid var(--line-dark); }
.chapter-portrait figcaption{ margin-top:12px; display:flex; flex-direction:column; gap:3px; }
.chapter-quote{ font-family:var(--serif); font-weight:400; font-style:italic;
  font-size:clamp(1.9rem,3vw,2.7rem); line-height:1.18; letter-spacing:-.014em;
  color:#F4F1E9; margin:0; text-wrap:pretty; }
.chapter-quote + .attrib{ margin-top:26px; }

/* II — founder beside the law */
.principle-pair{ display:grid; grid-template-columns:180px minmax(0,1fr);
  gap:clamp(36px,4vw,60px); align-items:center; }
.chapter--principle .chapter-quote{ font-size:clamp(1.5rem,2.1vw,2.1rem); line-height:1.24; }
.chapter--principle .chapter-quote + .attrib{ margin-top:30px; }
@media (max-width:820px){
  .principle-pair{ grid-template-columns:1fr; gap:28px; }
  .principle-pair .chapter-portrait{ max-width:260px; }
}

.chapter--wide .dossier{ margin:0; }

.chapter--close{ align-items:end; }
.lin-close{ display:flex; justify-content:space-between; align-items:flex-end; gap:30px; flex-wrap:wrap; }
.lin-close .translation{ font-family:var(--serif); font-size:clamp(1.6rem,2.6vw,2.3rem);
  line-height:1.2; max-width:20ch; color:#F2EFE7; }
.lin-close a{ font-size:15px; white-space:nowrap; }

.lin-coda{ border-top:1px solid var(--line-dark); margin-top:clamp(18px,2.5vw,34px);
  padding:clamp(60px,8vw,112px) 0 0; text-align:center; }
.coda-line{ font-family:var(--serif); font-weight:400; color:#F4F1E9;
  font-size:clamp(1.7rem,2.9vw,2.5rem); line-height:1.2; letter-spacing:-.015em;
  max-width:22ch; margin:0 auto; text-wrap:balance; }
.coda-cta{ display:inline-flex; align-items:center; gap:8px; margin-top:clamp(28px,3vw,40px); font-size:15px; }

@media (max-width:820px){
  .chapter{ grid-template-columns:1fr; gap:24px; padding:38px 0; }
  .chapter-label{ position:static; flex-direction:row; align-items:baseline; gap:14px; flex-wrap:wrap; }
  .chapter-portrait{ flex-basis:100%; max-width:220px; margin-top:8px; }
  .chapter-body{ max-width:none; }
}

/* Zeiss works — archival plate (establishing shot) */
.plate{ margin:clamp(8px,1.5vw,20px) 0 0; }
.plate-frame{ position:relative; width:100%; aspect-ratio:16 / 7; overflow:hidden;
  background:#0e0d0b; display:flex; align-items:center; justify-content:center; }
.plate-frame img{ width:100%; height:100%; object-fit:cover; display:block;
  filter:grayscale(1) contrast(1.03); }
.plate-frame.empty{ border:1px solid rgba(244,241,233,.1); }
.plate-hint{ display:none; font-family:var(--mono); font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(244,241,233,.3); }
.plate-frame.empty .plate-hint{ display:block; }
.plate figcaption{ display:flex; justify-content:space-between; align-items:baseline;
  gap:16px; margin-top:14px; }

/* ============================================================
   PAGE TRANSITION — disabled (no animation)
   ============================================================ */
.iris{ display:none !important; }

/* ---------- responsive ---------- */
@media (max-width: 900px){
  .nav .right{ gap:20px; font-size:12px; }
  .metafoot{ font-size:9.5px; letter-spacing:.1em; }
  .contact{ grid-template-columns:1fr; }
  .contact .media{ min-height:46vh; }
  .cover-foot{ flex-direction:column; align-items:flex-start; gap:16px; }
  .cover-foot .meta{ text-align:left; }
}
@media (max-width: 540px){
  .metafoot .mid{ display:none; }
}