/* ============================================================
   LIFE REORGANIZING — SHARED STYLES v1.0
   This file is the typographic and visual constitution for
   every page of the site. Extracted from the ACA page and
   extended to serve the full institution.

   Visual system: warm paper ground, weathered-brass emphasis,
   muted ocean for the measurement / instrument register.
   Typefaces: Fraunces (editorial serif), Inter (working sans),
   IBM Plex Mono (instrument voice — labels, readings, captions).

   Nothing decorative. Every mark stands for something.
   ============================================================ */

/* ---- TOKENS ---- */
:root {
  /* paper & ink: the base register */
  --paper:      #f7f2e9;
  --paper-2:    #efe8d8;
  --paper-3:    #e5dcc7;
  --ink:        #262119;
  --ink-soft:   #58503f;
  --ink-faint:  #8c8471;
  --line:       #d9cdb0;
  --line-soft:  #e9e0cb;

  /* two accents only, each with a job */
  --brass:      #8a6a2e;  /* weathered brass — emphasis, the "found" mark */
  --brass-soft: #b99a5e;
  --ocean:      #3e5a5e;  /* muted ocean — measurement, instrument, the Lab */
  --ocean-soft: #7c9698;

  --shadow: rgba(38,33,25,0.10);

  /* type scale */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15.5px;
  --text-lg:   17px;
}

/* ---- RESET ---- */
*, *::before, *::after {
  margin: 0; padding: 0; box-sizing: border-box;
}
html { scroll-behavior: smooth; }

/* ---- REDUCED MOTION ---- */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- BODY — light with direction ----
   A soft high-left glow (as if from a window) over the
   warm paper base. The materiality lives in the grain
   layer above, not in the background itself. */
body {
  background:
    radial-gradient(ellipse 1100px 700px at 14% -6%, rgba(255,251,240,0.65), transparent 62%),
    radial-gradient(ellipse 900px 600px at 100% 105%, rgba(217,205,176,0.4), transparent 60%),
    var(--paper);
  background-attachment: fixed;
  color: var(--ink-soft);
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  overflow-x: hidden;
}

/* Fine fiber grain — the close texture of uncoated paper under light */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .036; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch' result='t'/><feColorMatrix in='t' type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-repeat: repeat;
}

/* Coarser grain pass — the long grain of a paper sheet */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: .025; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><filter id='f'><feTurbulence type='turbulence' baseFrequency='0.008 0.09' numOctaves='2' seed='7' result='t'/><feColorMatrix in='t' type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>");
  background-repeat: repeat;
}

/* ---- TYPOGRAPHY ---- */
h1, h2, h3, h4 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--ink);
}

:focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; }

/* ---- UTILITY TYPE CLASSES ---- */

/* instrument voice — readings, captions, labels */
.stage-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: var(--text-xs);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 10px;
  display: block;
}

/* section lead-in — a structural mark, not decoration */
.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
}
.eyebrow::before { content: ""; width: 22px; height: 1px; background: var(--line); }

/* rotated margin annotation */
.margin-tag {
  position: absolute;
  top: 34px; right: 6vw; z-index: 3;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transform: rotate(90deg);
  transform-origin: right top;
}
@media (max-width: 900px) { .margin-tag { display: none; } }

/* ---- GLOBAL NAVIGATION ---- */
.site-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: rgba(247,242,233,0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line-soft);
}

.global-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 32px;
}

.global-nav .brand {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-soft);
  text-decoration: none;
  flex-shrink: 0;
}
.global-nav .brand span { color: var(--brass); }

.global-links {
  display: flex;
  gap: 20px;
  list-style: none;
  align-items: center;
}
.global-links a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color .2s ease;
  white-space: nowrap;
}
.global-links a:hover,
.global-links a.current { color: var(--brass); }

/* mobile nav toggle */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-faint);
  padding: 4px 0;
}
.nav-toggle:focus-visible { outline: 2px solid var(--brass); }

@media (max-width: 900px) {
  .nav-toggle { display: block; }
  .global-links {
    display: none;
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    background: rgba(247,242,233,0.97);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line-soft);
    flex-direction: column;
    align-items: flex-start;
    padding: 16px 32px 20px;
    gap: 14px;
  }
  .global-links.open { display: flex; }
  .global-links a { font-size: 11px; }
}

/* ---- READING PROGRESS BAR ---- */
.mprogress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  background: var(--brass);
  z-index: 101;
  width: 0%;
  transition: width .1s linear;
}

/* ---- ROOM LAYOUT SYSTEM ----
   The primary rhythm of long-form pages. Two-column by default,
   with deliberate asymmetry — not a mirrored template. */
section.room {
  min-height: 100vh;
  display: flex;
  align-items: center;
  position: relative;
  padding: 170px 8vw 100px;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
}

.room-inner {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 70px;
  align-items: center;
  max-width: 1300px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 2;
}

.room.reverse .room-inner { grid-template-columns: 0.95fr 1.05fr; }
.room.reverse .room-text { order: 2; }
.room.reverse .room-visual { order: 1; }

/* quiet: the narrowest room — opening or closing a narrative */
.room.quiet { min-height: 92vh; }
.room.quiet .room-inner {
  grid-template-columns: 1fr;
  max-width: 760px;
  text-align: left;
}
.room.quiet .room-visual { height: auto; margin-top: 46px; }

/* wide: full-width, single column — evidence or dense reading surface */
.room.wide .room-inner {
  grid-template-columns: 1fr;
  max-width: 1180px;
}
.room.wide .room-visual {
  width: 100%;
  height: min(46vh, 380px);
  margin-top: 44px;
}

@media (max-width: 900px) {
  .room-inner { grid-template-columns: 1fr !important; gap: 44px; }
  .room-text { order: 2 !important; }
  .room-visual { order: 1 !important; }
  section.room { padding: 110px 6vw 70px; }
}

/* ---- ROOM CONTENT COMPONENTS ---- */

.room-text h2 {
  font-size: clamp(26px, 3.2vw, 40px);
  margin-bottom: 24px;
}

.room-text .lede {
  font-size: var(--text-lg);
  line-height: 1.75;
  color: var(--ink-soft);
  max-width: 52ch;
  margin-bottom: 20px;
}

.kicker-scene {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: 16px;
  color: var(--ink-faint);
  margin-bottom: 22px;
  line-height: 1.65;
  max-width: 50ch;
}

.signal-list {
  list-style: none;
  margin: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.signal-list li {
  font-size: var(--text-base);
  color: var(--ink-soft);
  padding-left: 22px;
  position: relative;
  line-height: 1.6;
}
.signal-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--brass);
}

.bridge-line {
  margin-top: 26px;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 15px;
  color: var(--ink-faint);
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
  max-width: 48ch;
}

.proof {
  margin-top: 26px;
  padding: 16px 20px;
  border-left: 2px solid var(--brass);
  background: var(--paper-2);
  font-size: 13.5px;
  color: var(--ink-faint);
  line-height: 1.65;
  max-width: 52ch;
  box-shadow: 0 1px 2px rgba(38,33,25,.05), 0 10px 22px -16px rgba(38,33,25,.4);
}
.proof strong { color: var(--ink-soft); font-weight: 500; }

.pillars {
  display: flex;
  gap: 14px;
  margin-top: 28px;
  flex-wrap: wrap;
}
.pillar {
  flex: 1;
  min-width: 140px;
  padding: 18px 16px;
  background: var(--paper-2);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  box-shadow: 0 1px 2px rgba(38,33,25,.04), 0 12px 24px -18px rgba(38,33,25,.35);
  border-top-color: rgba(255,255,255,.5);
}
.pillar .pnum {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--brass);
  letter-spacing: .1em;
}
.pillar h4 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 16px;
  margin: 8px 0 6px;
  color: var(--ink);
}
.pillar p { font-size: 13px; color: var(--ink-faint); line-height: 1.55; }

/* editorial invitation — no promotional buttons */
.invite {
  margin-top: 34px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
}
.invite-link {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 19px;
  color: var(--ink);
  text-decoration: none;
  position: relative;
  padding-bottom: 3px;
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  border-bottom: 1px solid var(--brass);
  transition: color .25s ease, border-color .25s ease;
}
.invite-link:hover { color: var(--brass); }
.invite-link .arrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  font-style: normal;
}

.invite-secondary {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11.5px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.invite-secondary:hover { color: var(--ink-soft); border-color: var(--line); }

.institution-block {
  margin-top: 38px;
  padding-top: 26px;
  border-top: 1px solid var(--line-soft);
  max-width: 52ch;
}
.institution-block p { font-size: 13.5px; color: var(--ink-faint); line-height: 1.7; }
.institution-block .names { color: var(--ink-soft); }

/* scroll invitation */
.scrolldown {
  position: absolute;
  bottom: 36px; left: 8vw; z-index: 3;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  color: var(--ink-faint);
  letter-spacing: .08em;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 10px;
}
.scrolldown::after {
  content: "↓";
  animation: bob 2.4s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

/* ---- VISUAL ROOM ---- */
.room-visual {
  position: relative;
  height: min(52vh, 460px);
}
.room-visual svg { width: 100%; height: 100%; overflow: visible; }

/* ---- SVG VISUAL VOCABULARY ---- */
.trace {
  fill: none;
  stroke: var(--line);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.trace.dim { stroke: var(--line); opacity: .55; }
.trace.accent { stroke: var(--brass); stroke-width: 1.6; }
.trace.ocean { stroke: var(--ocean); stroke-width: 1.5; }
.node { fill: var(--brass); }
.node.dim { fill: var(--ink-faint); opacity: .6; }
.node.ocean { fill: var(--ocean); }
.reading-label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9.5px;
  letter-spacing: .03em;
  fill: var(--ink-faint);
}
.reading-label.accent { fill: var(--brass); }
.axis-tick { stroke: var(--line); stroke-width: 1; }

/* Explanatory note beneath a diagram — public orientation, not methodology */
.diagram-note {
  margin-top: 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .04em;
  color: var(--ink-faint);
  line-height: 1.65;
  max-width: 40ch;
}

/* ---- INTERSTITIALS ---- */

/* breath: an almost-empty pause between sections */
.breath {
  min-height: 38vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 8vw;
  border-bottom: 1px solid var(--line-soft);
  text-align: center;
}
.breath p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 28px);
  color: var(--ink-soft);
  max-width: 34ch;
  line-height: 1.5;
}
.breath .source {
  display: block;
  margin-top: 16px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* threshold: tonal inversion strip between registers */
.threshold {
  background: var(--ink);
  color: var(--paper-2);
  padding: 64px 8vw;
  text-align: center;
  border-bottom: 1px solid var(--ink);
}
.threshold .stage-tag { color: var(--ocean-soft); }
.threshold p {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: clamp(19px, 2.2vw, 25px);
  color: var(--paper-2);
  max-width: 40ch;
  margin: 0 auto;
}

/* ---- PHOTOGRAPH PAUSE ---- */
.photo-pause {
  position: relative;
  width: 100%;
  min-height: 78vh;
  border-bottom: 1px solid var(--line-soft);
  overflow: hidden;
  display: flex;
  align-items: flex-end;
}
.photo-frame {
  position: absolute; inset: 0;
  background:
    linear-gradient(155deg, rgba(38,33,25,.06), rgba(38,33,25,.32) 78%),
    radial-gradient(ellipse 900px 700px at 24% 20%, rgba(255,248,232,.9), transparent 55%),
    linear-gradient(200deg, #d8c9a3 0%, #a99668 42%, #5c6b5f 78%, #384540 100%);
  background-blend-mode: normal, screen, normal;
}
.photo-frame::after {
  content: "";
  position: absolute; inset: 0;
  opacity: .10; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
}
.photo-caption {
  position: absolute; left: 24px; bottom: 22px; z-index: 2;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: rgba(247,242,233,.75);
  max-width: 34ch;
  line-height: 1.6;
  padding: 10px 14px;
  border-left: 2px dashed rgba(247,242,233,.5);
}
.photo-quote {
  position: relative; z-index: 2;
  margin: 0 8vw 64px auto;
  max-width: 26ch;
  text-align: right;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(22px, 3vw, 32px);
  color: var(--paper);
  line-height: 1.45;
  text-shadow: 0 2px 18px rgba(20,17,12,.35);
}
@media (max-width: 700px) {
  .photo-pause { min-height: 60vh; }
  .photo-quote { margin: 0 6vw 40px auto; font-size: 22px; }
}

/* ---- MARGIN NOTE (interactive) ---- */
.margin-note {
  margin-top: 18px;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--ocean);
  text-transform: none;
}
.margin-note:hover { color: var(--brass); }
.margin-note .mark {
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 13px;
}
.margin-reveal {
  max-height: 0;
  overflow: hidden;
  transition: max-height .5s ease, opacity .4s ease, margin-top .4s ease;
  opacity: 0;
  font-family: 'Fraunces', serif;
  font-style: italic;
  font-size: 14.5px;
  color: var(--ink-soft);
  border-left: 2px solid var(--ocean-soft);
  padding-left: 14px;
  max-width: 44ch;
}
.margin-reveal.open { max-height: 120px; opacity: 1; margin-top: 14px; }

/* ---- FOOTER ---- */
footer {
  padding: 80px 8vw 50px;
  background: var(--paper-2);
  border-top: 1px solid var(--line-soft);
}
.footer-inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}
footer .flogo {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  color: var(--ink);
  margin-bottom: 14px;
}
footer .flogo span { color: var(--brass); }
footer .fmission {
  color: var(--ink-faint);
  font-size: 13.5px;
  max-width: 52ch;
  margin: 0 auto 34px;
  line-height: 1.7;
}
.ecosystem-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 0;
  margin-bottom: 30px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.ecosystem-strip span {
  color: var(--ink-soft);
  padding: 0 14px;
  border-right: 1px solid var(--line);
}
.ecosystem-strip span:last-child { border-right: none; }
.ecosystem-strip span.forthcoming { color: var(--ink-faint); }
.footer-links {
  display: flex;
  justify-content: center;
  gap: 26px;
  margin-bottom: 36px;
  flex-wrap: wrap;
}
.footer-links a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-links a:hover { color: var(--brass); }

/* External connect links — a second tier below page navigation.
   Text only, no icons. Restrained upper register. */
.footer-connect {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 26px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.footer-connect a {
  color: var(--ink-faint);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-connect a:hover { color: var(--brass); }
.foot-sep { color: var(--line); font-size: 10px; }

/* Footer explanatory link */
.footer-about {
  margin-bottom: 20px;
}
.footer-about-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--ink-faint);
  text-decoration: none;
  transition: color .2s ease;
}
.footer-about-link:hover { color: var(--brass); }

footer .fnote {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink-faint);
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---- MOTION VOCABULARY ----
   Deliberate, rare, one-time (not looping ambience).
   A single orchestrated moment per scroll intersection. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.in { opacity: 1; transform: translateY(0); }

.draw-in {
  stroke-dasharray: 600;
  stroke-dashoffset: 600;
  transition: stroke-dashoffset 1.6s cubic-bezier(.2,.7,.2,1);
}
.draw-in.in { stroke-dashoffset: 0; }

.emerge-el {
  opacity: 0;
  transition: opacity .9s ease;
}
.emerge-el.in { opacity: 1; }

.drift-el {
  opacity: 0;
  transform: translate(0, 0);
  transition: opacity 1s ease, transform 1.4s cubic-bezier(.2,.7,.2,1);
}
.drift-el.in { opacity: 1; }

.converge-el {
  transition: transform 1.6s cubic-bezier(.2,.7,.2,1), opacity 1s ease;
  opacity: 0;
}
.converge-el.in { opacity: 1; transform: translate(0,0) !important; }