:root {
  --ink: #050505;
  --ink-raised: #101010;
  --charcoal: #1b1b1b;
  --paper: #f2f1ee;
  --white: #ffffff;
  --muted: #a3a3a3;
  --muted-dark: #5c5c5c;
  --line-dark: rgba(255, 255, 255, 0.16);
  --line-light: rgba(5, 5, 5, 0.16);
  --sans: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Noto Sans Thai", Arial, sans-serif;
  --serif: "Iowan Old Style", Baskerville, "Times New Roman", "Noto Serif Thai", serif;
  --page-pad: clamp(1.25rem, 5vw, 5rem);
  --section-space: clamp(6rem, 12vw, 11rem);
  --content-width: 90rem;
  --header-height: 4.75rem;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-height) + 1rem);
  background: var(--ink);
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body::selection { background: #d6d2c8; color: var(--ink); }

a { color: inherit; }
img { max-width: 100%; }
button, summary { font: inherit; }

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--white);
  color: var(--ink);
  transform: translateY(-180%);
  transition: transform 180ms ease;
}

.skip-link:focus { transform: translateY(0); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  min-height: var(--header-height);
  padding: 0 var(--page-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  color: var(--white);
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.88), rgba(0, 0, 0, 0.56));
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: min-height 250ms ease, background-color 250ms ease;
}

.site-header.is-scrolled {
  min-height: 4.15rem;
  background-color: rgba(0, 0, 0, 0.9);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  color: var(--white);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.23em;
  font-size: 0.9rem;
  font-weight: 560;
  white-space: nowrap;
}

.brand-mark {
  display: block;
  width: 1.55rem;
  height: 1.55rem;
  flex: 0 0 auto;
  object-fit: contain;
}

.desktop-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.5vw, 2.3rem);
}

.desktop-nav a,
.site-footer nav a {
  color: rgba(255, 255, 255, 0.74);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.68rem;
  font-weight: 540;
  transition: color 180ms ease;
}

.desktop-nav a:hover,
.desktop-nav a:focus-visible,
.site-footer nav a:hover,
.site-footer nav a:focus-visible { color: var(--white); }

.mobile-menu { display: none; position: relative; }
.mobile-menu summary { list-style: none; cursor: pointer; padding: 0.8rem 0.2rem; }
.mobile-menu summary::-webkit-details-marker { display: none; }
.mobile-menu summary span {
  display: block;
  width: 1.45rem;
  height: 1px;
  margin: 0.28rem 0;
  background: currentColor;
  transition: transform 180ms ease, opacity 180ms ease;
}
.mobile-menu[open] summary span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.mobile-menu[open] summary span:nth-child(2) { opacity: 0; }
.mobile-menu[open] summary span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }
.mobile-menu nav {
  position: fixed;
  inset: var(--header-height) 0 auto;
  padding: 1.4rem var(--page-pad) 2rem;
  display: grid;
  background: rgba(0, 0, 0, 0.97);
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.mobile-menu nav a {
  padding: 0.8rem 0;
  color: var(--white);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.75rem;
}

.hero {
  position: relative;
  isolation: isolate;
  min-height: max(42rem, 100svh);
  padding: calc(var(--header-height) + 3rem) var(--page-pad) 7rem;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 255, 255, 0.055), transparent 29%),
    linear-gradient(#030303, #020202 72%, #0a0a0a);
}

.star-field {
  position: absolute;
  inset: 0;
  z-index: -4;
  opacity: 0.75;
  background-image:
    radial-gradient(circle at 7% 24%, #fff 0 0.8px, transparent 1px),
    radial-gradient(circle at 14% 51%, #fff 0 0.6px, transparent 0.9px),
    radial-gradient(circle at 23% 18%, #fff 0 0.8px, transparent 1px),
    radial-gradient(circle at 31% 65%, #fff 0 0.5px, transparent 0.8px),
    radial-gradient(circle at 41% 12%, #fff 0 0.7px, transparent 1px),
    radial-gradient(circle at 52% 31%, #fff 0 0.5px, transparent 0.9px),
    radial-gradient(circle at 61% 16%, #fff 0 0.7px, transparent 1px),
    radial-gradient(circle at 71% 47%, #fff 0 0.6px, transparent 0.9px),
    radial-gradient(circle at 82% 23%, #fff 0 0.7px, transparent 1px),
    radial-gradient(circle at 91% 58%, #fff 0 0.6px, transparent 0.9px);
}

.orbital-system {
  position: absolute;
  z-index: -2;
  top: 46%;
  left: 50%;
  width: min(73vw, 68rem);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
}

.orbit {
  position: absolute;
  inset: 50%;
  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.orbit-one { width: 42%; height: 42%; }
.orbit-two { width: 68%; height: 68%; border-color: rgba(255, 255, 255, 0.13); }
.orbit-three { width: 94%; height: 94%; border-color: rgba(255, 255, 255, 0.09); }
.orbit-axis {
  position: absolute;
  inset: 2% 50%;
  width: 1px;
  background: linear-gradient(transparent, rgba(255,255,255,.28) 28%, rgba(255,255,255,.28) 72%, transparent);
}
.orbit-point {
  position: absolute;
  width: 5px;
  height: 5px;
  background: var(--white);
  border-radius: 50%;
  box-shadow: 0 0 15px 4px rgba(255, 255, 255, 0.62);
}
.point-one { left: calc(50% - 2px); top: 3%; }
.point-two { left: 15.5%; top: 50%; opacity: 0.42; box-shadow: none; }
.point-three { right: 15.5%; top: 50%; opacity: 0.42; box-shadow: none; }

.hero-glyph {
  position: absolute;
  color: rgba(255, 255, 255, 0.56);
  font-family: var(--serif);
  font-size: clamp(1rem, 1.4vw, 1.35rem);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}
.glyph-time { top: 15%; left: calc(50% - 0.6em); }
.glyph-people { top: 53%; left: 19%; }
.glyph-place { top: 53%; right: 19%; }

.hero-content { position: relative; z-index: 2; text-align: center; transform: translateY(-1.3rem); }
.eyebrow,
.section-kicker {
  margin-bottom: 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.66rem;
  font-weight: 600;
}
.hero .eyebrow { color: rgba(255,255,255,.76); }
.hero h1 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4.5rem, 11vw, 10.5rem);
  font-weight: 400;
  line-height: 0.92;
  letter-spacing: -0.055em;
}
.hero-factors {
  margin: 2.3rem 0 0;
  color: rgba(255,255,255,.82);
  text-transform: uppercase;
  letter-spacing: clamp(.22em, 1vw, .55em);
  font-family: var(--serif);
  font-size: clamp(0.8rem, 1.3vw, 1.05rem);
}
.hero-factors span { margin-inline: 0.55rem; color: rgba(255,255,255,.35); }

.horizon {
  position: absolute;
  z-index: -1;
  bottom: -27vw;
  left: 50%;
  width: 132vw;
  aspect-ratio: 2.3;
  border-radius: 50% 50% 0 0;
  border-top: 1px solid rgba(255,255,255,.86);
  transform: translateX(-50%);
  background:
    radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.3), rgba(255,255,255,.06) 4%, transparent 15%),
    linear-gradient(to bottom, rgba(255,255,255,.05), #010101 28%);
  box-shadow: 0 -3px 30px rgba(255,255,255,.33), 0 -1px 5px rgba(255,255,255,.7);
}

.scroll-cue {
  position: absolute;
  z-index: 4;
  bottom: 2.1rem;
  left: 50%;
  display: grid;
  justify-items: center;
  gap: .75rem;
  transform: translateX(-50%);
  color: rgba(255,255,255,.7);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .2em;
  font-size: .58rem;
}
.scroll-cue i { width: .65rem; height: .65rem; border: solid currentColor; border-width: 0 1px 1px 0; transform: rotate(45deg); }

.section { position: relative; padding: var(--section-space) var(--page-pad); }
.section-shell { width: min(100%, var(--content-width)); margin-inline: auto; }
.section-light { background: var(--paper); color: var(--ink); }
.section-paper { background: #e6e5e1; color: var(--ink); }
.section-dark { background: var(--ink); color: var(--white); }
.section-ink { background: var(--ink-raised); color: var(--white); }
.section-kicker { position: relative; padding-top: .9rem; color: currentColor; opacity: .68; }
.section-kicker::before { content: ""; position: absolute; top: 0; left: 0; width: 2rem; height: 1px; background: currentColor; opacity: .65; }
.section h2 {
  margin-bottom: 2rem;
  font-family: var(--serif);
  font-size: clamp(3rem, 6.2vw, 6rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.045em;
}

.philosophy { overflow: hidden; }
.philosophy::after {
  content: "";
  position: absolute;
  right: -14rem;
  bottom: -17rem;
  width: 42rem;
  height: 42rem;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 50%;
  box-shadow: 0 0 0 5rem rgba(0,0,0,.018), 0 0 0 10rem rgba(0,0,0,.012);
}
.philosophy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .9fr);
  gap: clamp(3rem, 8vw, 9rem);
  align-items: end;
}
.philosophy h2 { margin-bottom: .65rem; font-size: clamp(3.1rem, 6vw, 6.5rem); }
.philosophy .lead { margin: 0; font-family: var(--serif); font-size: clamp(1.6rem, 3vw, 2.7rem); }
.definition { max-width: 39rem; padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--line-light); color: #2b2b2b; font-size: clamp(1.04rem, 1.5vw, 1.22rem); }
.definition p:last-child { margin-bottom: 0; }
.instrument-statement {
  position: relative;
  z-index: 2;
  width: min(100%, 52rem);
  margin: clamp(4rem, 9vw, 8rem) 0 0 auto;
  padding-top: 2rem;
  border-top: 1px solid var(--line-light);
}
.instrument-statement p { margin-bottom: .7rem; color: var(--muted-dark); }
.instrument-statement strong { font-family: var(--serif); font-size: clamp(2rem, 4vw, 3.8rem); font-weight: 400; line-height: 1.08; }

.precision { border-top: 1px solid var(--line-dark); }
.precision-heading { display: grid; grid-template-columns: .5fr 1.5fr; gap: 2rem; align-items: end; }
.precision-heading h2 { max-width: 13ch; margin-bottom: 0; }
.principle-grid {
  margin: clamp(4rem, 8vw, 7rem) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  list-style: none;
  border-top: 1px solid var(--line-dark);
  border-bottom: 1px solid var(--line-dark);
}
.principle-grid li { padding: 2.3rem clamp(1rem, 2.4vw, 2.2rem) 2.6rem; text-align: center; }
.principle-grid li + li { border-left: 1px solid var(--line-dark); }
.principle-grid h3 { margin: 1.25rem 0 .7rem; text-transform: uppercase; letter-spacing: .18em; font-family: var(--serif); font-size: .86rem; font-weight: 400; }
.principle-grid p { margin: 0 auto; max-width: 15rem; color: var(--muted); font-size: .78rem; line-height: 1.65; }
.principle-icon {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: 3.35rem;
  height: 3.35rem;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 50%;
}
.principle-icon::before, .principle-icon::after { content: ""; position: absolute; }
.icon-calculate::before { width: 60%; height: 1px; background: currentColor; box-shadow: 0 -8px currentColor, 0 8px currentColor; transform: rotate(-35deg); opacity: .7; }
.icon-calculate::after { width: 5px; height: 5px; background: currentColor; border-radius: 50%; box-shadow: -10px 6px currentColor, 10px -6px currentColor; }
.icon-measure::before { width: 1px; height: 62%; background: currentColor; transform: rotate(25deg); }
.icon-measure::after { width: 44%; height: 44%; border: 1px solid currentColor; transform: rotate(45deg); }
.icon-organize::before { width: 6px; height: 6px; background: currentColor; border-radius: 50%; box-shadow: -12px 10px currentColor, 12px 10px currentColor, 0 -12px currentColor; }
.icon-organize::after { width: 68%; height: 68%; border: 1px dotted rgba(255,255,255,.55); border-radius: 50%; }
.icon-expose::before { width: 58%; height: 34%; border: 1px solid currentColor; border-radius: 70% 20%; transform: rotate(45deg); }
.icon-expose::after { width: 6px; height: 6px; border: 1px solid currentColor; border-radius: 50%; }
.icon-explain::before { width: 58%; height: 58%; border: 1px solid currentColor; border-radius: 50%; box-shadow: 0 0 0 6px rgba(255,255,255,.08); }
.icon-explain::after { width: 3px; height: 3px; background: currentColor; border-radius: 50%; }
.interpretation-note { margin: 2.5rem auto 0; color: rgba(255,255,255,.75); text-align: center; font-family: var(--serif); font-size: 1.1rem; }

.merin { overflow: hidden; border-top: 1px solid var(--line-dark); }
.merin::after { content: "MERIN"; position: absolute; right: -1.5vw; bottom: -0.23em; color: rgba(255,255,255,.025); font-size: clamp(7rem, 24vw, 25rem); font-weight: 650; line-height: 1; letter-spacing: -.06em; pointer-events: none; }
.merin-grid { position: relative; z-index: 2; display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(3rem, 10vw, 10rem); align-items: center; }
.merin-seal { position: relative; justify-self: center; width: min(68vw, 23rem); aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; box-shadow: 0 0 0 2rem rgba(255,255,255,.025), 0 0 0 5rem rgba(255,255,255,.015); }
.merin-seal::before, .merin-seal::after { content: ""; position: absolute; inset: 12%; border: 1px solid rgba(255,255,255,.15); border-radius: 50%; }
.merin-seal::after { inset: 27%; border-style: dotted; }
.merin-seal span { font-family: var(--serif); font-size: clamp(5rem, 12vw, 9rem); font-weight: 400; }
.merin-seal i { position: absolute; inset: 50% auto auto 50%; width: 125%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); transform: translate(-50%, -50%) rotate(-27deg); }
.merin-intro { max-width: 43rem; color: var(--muted); font-size: clamp(1rem, 1.5vw, 1.2rem); }
.merin-values { margin: 3rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); list-style: none; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.merin-values li { padding: 1.2rem .4rem; text-align: center; text-transform: uppercase; letter-spacing: .15em; font-size: .67rem; }
.merin-values li + li { border-left: 1px solid var(--line-dark); }

.domains { padding-inline: 0; padding-bottom: 0; overflow: clip; }
.domains-intro { padding-inline: var(--page-pad); }
.center-heading { max-width: 58rem; margin: 0 auto clamp(4rem, 9vw, 8rem); text-align: center; }
.center-heading .section-kicker::before { left: 50%; transform: translateX(-50%); }
.center-heading h2 { margin-bottom: 1.7rem; font-size: clamp(5.5rem, 13vw, 12rem); letter-spacing: .04em; line-height: .8; }
.center-heading > p:last-child { max-width: 44rem; margin-inline: auto; color: var(--muted-dark); font-size: 1.05rem; }
.domain-stories { background: var(--ink); color: var(--white); border-top: 1px solid var(--line-dark); }
.domain-story { position: relative; min-height: 100svh; scroll-margin-top: -5.75rem; background: var(--ink); border-bottom: 1px solid var(--line-dark); }
.scroll-story-ready .domain-story { height: 190svh; min-height: 64rem; }
.domain-stage { position: relative; isolation: isolate; min-height: 100svh; display: grid; align-items: end; overflow: hidden; }
.scroll-story-ready .domain-stage { position: sticky; top: 0; height: 100svh; }
.domain-image-wrap { position: absolute; z-index: -4; inset: -5%; overflow: hidden; }
.domain-image { width: 100%; height: 100%; display: block; object-fit: cover; filter: grayscale(1) contrast(1.05); will-change: transform; transform-origin: center; }
.domain-time .domain-image { transform: translate3d(0, calc(var(--story-progress) * -3.5%), 0) scale(calc(1.04 + (var(--story-progress) * .16))); }
.domain-people .domain-image { transform: translate3d(calc(-2.5% + (var(--story-progress) * 4%)), 0, 0) scale(calc(1.18 - (var(--story-progress) * .13))); }
.domain-place .domain-image { transform: translate3d(calc(-3% + (var(--story-progress) * 6%)), calc(2% - (var(--story-progress) * 4%)), 0) scale(calc(1.05 + (var(--story-progress) * .10))); }
.domain-shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.52) 44%, rgba(0,0,0,.1) 74%), linear-gradient(0deg, rgba(0,0,0,.72), transparent 48%, rgba(0,0,0,.25)); }
.domain-people .domain-shade { background: linear-gradient(270deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.54) 42%, rgba(0,0,0,.08) 76%), linear-gradient(0deg, rgba(0,0,0,.7), transparent 50%, rgba(0,0,0,.25)); }
.domain-story-content { width: min(100%, var(--content-width)); margin-inline: auto; padding: 0 var(--page-pad) clamp(4rem, 10vh, 7rem); }
.domain-people .domain-story-content { display: grid; justify-items: end; text-align: right; }
.domain-story-content > * { max-width: 31rem; }
.domain-index { position: absolute; top: calc(var(--header-height) + 2rem); margin: 0; color: rgba(255,255,255,.52); text-transform: uppercase; letter-spacing: .2em; font-size: .62rem; }
.domain-story .thai-label { margin-bottom: .4rem; color: rgba(255,255,255,.68); text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; }
.domain-story h3 { margin: 0 0 1.5rem; font-family: var(--serif); font-size: clamp(4rem, 8.6vw, 8.5rem); font-weight: 400; line-height: .82; letter-spacing: -.05em; }
.domain-story h3 span { display: block; margin-bottom: .18em; font-size: .72em; line-height: .8; }
.domain-story .domain-question { margin: 0 0 .7rem; font-family: var(--serif); font-size: clamp(1.3rem, 2.3vw, 1.85rem); }
.domain-story-content > p:last-child { margin-bottom: 0; color: rgba(255,255,255,.72); font-size: clamp(.9rem, 1.2vw, 1.05rem); }
.domain-geometry { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .55; }
.domain-geometry::before, .domain-geometry::after, .domain-geometry i { content: ""; position: absolute; display: block; }
.geometry-time::before { left: 50%; top: 50%; width: min(64vw, 55rem); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; transform: translate(-50%,-50%) rotate(calc(var(--story-progress) * 12deg)); }
.geometry-time::after { left: 50%; top: 10%; width: 1px; height: 80%; background: linear-gradient(transparent, rgba(255,255,255,.3), transparent); }
.geometry-time i:nth-child(1), .geometry-time i:nth-child(2), .geometry-time i:nth-child(3) { width: 5px; height: 5px; background: #fff; border-radius: 50%; box-shadow: 0 0 12px #fff; }
.geometry-time i:nth-child(1) { left: 50%; top: 18%; }.geometry-time i:nth-child(2) { left: 22%; top: 50%; }.geometry-time i:nth-child(3) { right: 22%; top: 50%; }
.geometry-people::before { left: 50%; top: 50%; width: min(72vw, 62rem); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; transform: translate(-50%,-50%) scale(calc(.94 + (var(--story-progress) * .08))); }
.geometry-people::after { left: 12%; right: 12%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent); }
.geometry-people i { width: 4px; height: 4px; background: #fff; border-radius: 50%; box-shadow: 0 0 9px rgba(255,255,255,.9); }
.geometry-people i:nth-child(1) { left: 18%; top: 31%; }.geometry-people i:nth-child(2) { left: 50%; top: 18%; }.geometry-people i:nth-child(3) { right: 15%; bottom: 27%; }
.geometry-place::before { left: 50%; bottom: -42vw; width: min(110vw, 90rem); aspect-ratio: 1; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; transform: translateX(-50%) rotate(calc(var(--story-progress) * -8deg)); }
.geometry-place::after { left: 50%; top: 8%; width: 1px; height: 84%; background: linear-gradient(transparent, rgba(255,255,255,.32), transparent); }
.geometry-place i { left: 10%; right: 10%; top: 50%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform-origin: center; }
.geometry-place i:nth-child(2) { transform: rotate(45deg); }.geometry-place i:nth-child(3) { transform: rotate(-45deg); }

.portfolio-intro { display: grid; grid-template-columns: .45fr 1fr .7fr; gap: clamp(2rem, 5vw, 5rem); align-items: end; }
.portfolio-intro .section-kicker, .portfolio-intro h2, .portfolio-intro > p { margin-bottom: 0; }
.portfolio-intro > p { color: var(--muted); }
.portfolio-grid { margin-top: clamp(4rem, 8vw, 7rem); display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.tool-family { min-width: 0; padding: clamp(2rem, 4vw, 3.7rem); }
.tool-family + .tool-family { border-left: 1px solid var(--line-dark); }
.family-heading { display: flex; align-items: center; gap: 1.1rem; }
.family-heading h3 { margin: 0; text-transform: uppercase; letter-spacing: .16em; font-family: var(--serif); font-size: 1rem; font-weight: 400; }
.family-orbit, .family-profile, .family-compass { position: relative; width: 3rem; height: 3rem; flex: 0 0 auto; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; }
.family-orbit::before { content: ""; position: absolute; inset: 25%; border: 1px dotted rgba(255,255,255,.6); border-radius: 50%; }
.family-orbit::after { content: ""; position: absolute; left: 50%; top: 5%; width: 1px; height: 90%; background: rgba(255,255,255,.45); transform: rotate(32deg); }
.family-profile::before { content: ""; position: absolute; inset: 18% 27%; border: solid rgba(255,255,255,.55); border-width: 1px 1px 1px 0; border-radius: 45%; }
.family-compass::before, .family-compass::after { content: ""; position: absolute; left: 50%; top: 10%; width: 1px; height: 80%; background: rgba(255,255,255,.55); }
.family-compass::after { transform: rotate(90deg); }
.tool-family > p { min-height: 3.7rem; margin: 1.5rem 0 2rem; color: var(--muted); font-size: .82rem; }
.tool-family ul { margin: 0; padding: 0; list-style: none; }
.tool-family li { padding: .8rem 0; border-top: 1px solid var(--line-dark); font-size: .88rem; }

.crossing-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: clamp(4rem, 10vw, 10rem); align-items: center; }
.crossing-copy { max-width: 36rem; color: var(--muted-dark); }
.matrix-wrap { min-width: 0; overflow-x: auto; }
table { width: 100%; border-collapse: collapse; min-width: 31rem; }
caption { caption-side: bottom; padding-top: 1rem; color: var(--muted-dark); text-align: left; font-size: .72rem; }
th, td { padding: 1.15rem; border-bottom: 1px solid var(--line-light); text-align: center; }
thead th { text-transform: uppercase; letter-spacing: .12em; font-size: .66rem; }
thead th:first-child, tbody th { text-align: left; }
tbody th { font-family: var(--serif); font-size: 1.05rem; font-weight: 400; }
td { font-size: 1.1rem; color: #777; }
.matrix-primary { color: var(--ink); }
.matrix-key { display: flex; justify-content: flex-end; gap: 1.5rem; margin: 1.3rem 0 0; color: var(--muted-dark); font-size: .7rem; }

.technology-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(4rem, 10vw, 10rem); }
.technology-lead { max-width: 40rem; font-family: var(--serif); font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1.35; }
.technology-list { margin: 3rem 0 0; padding: 0; list-style: none; }
.technology-list li { display: grid; grid-template-columns: 2.5rem minmax(10rem, .6fr) 1fr; gap: 1rem; padding: 1.35rem 0; border-top: 1px solid var(--line-light); }
.technology-list span { color: var(--muted-dark); font-size: .7rem; }
.technology-list strong { font-weight: 520; }
.technology-list p { margin: 0; color: var(--muted-dark); font-size: .82rem; }

.license-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(4rem, 10vw, 10rem); align-items: start; }
.license-grid > div > p:last-child { max-width: 32rem; color: var(--muted-dark); }
.license-principles { margin: 0; padding: 0; list-style: none; counter-reset: license; border-top: 1px solid var(--line-light); }
.license-principles li { position: relative; padding: 1.6rem 0 1.6rem 3.5rem; border-bottom: 1px solid var(--line-light); }
.license-principles li::before { counter-increment: license; content: "0" counter(license); position: absolute; left: 0; top: 1.7rem; color: var(--muted-dark); font-size: .68rem; letter-spacing: .1em; }
.license-principles span { text-transform: uppercase; letter-spacing: .13em; font-size: .75rem; font-weight: 600; }
.license-principles p { margin: .35rem 0 0; color: var(--muted-dark); font-size: .84rem; }

.answers-heading { display: grid; grid-template-columns: .5fr 1.5fr; gap: 2rem; }
.answer-list { margin-top: 3rem; border-top: 1px solid var(--line-dark); }
.answer-list article { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 8vw, 8rem); padding: 2.5rem 0; border-bottom: 1px solid var(--line-dark); }
.answer-list h3 { margin: 0; font-family: var(--serif); font-size: clamp(1.4rem, 2.7vw, 2.15rem); font-weight: 400; }
.answer-list p { max-width: 44rem; margin: 0; color: var(--muted); }

.closing { min-height: 78svh; display: grid; place-items: center; overflow: hidden; background: var(--paper); color: var(--ink); text-align: center; }
.closing-orbit { position: absolute; left: 50%; top: 50%; width: min(85vw, 70rem); aspect-ratio: 1; border: 1px solid rgba(0,0,0,.13); border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 7rem rgba(0,0,0,.018), 0 0 0 14rem rgba(0,0,0,.012); }
.closing-orbit::before, .closing-orbit::after { content: ""; position: absolute; background: linear-gradient(90deg, transparent, rgba(0,0,0,.22), transparent); }
.closing-orbit::before { left: -10%; top: 50%; width: 120%; height: 1px; }
.closing-orbit::after { left: 50%; top: -10%; width: 1px; height: 120%; background: linear-gradient(transparent, rgba(0,0,0,.22), transparent); }
.closing-content { position: relative; z-index: 2; }
.closing .section-kicker::before { left: 50%; transform: translateX(-50%); }
.closing h2 { font-size: clamp(3.7rem, 8vw, 8rem); }
.closing-content > p:not(.section-kicker) { font-family: var(--serif); font-size: clamp(1.05rem, 2vw, 1.4rem); }
.text-link { display: inline-flex; gap: .7rem; margin-top: 2rem; padding-bottom: .4rem; border-bottom: 1px solid; text-decoration: none; text-transform: uppercase; letter-spacing: .15em; font-size: .68rem; }

.site-footer {
  padding: 4rem var(--page-pad);
  display: grid;
  grid-template-columns: 1fr auto .7fr;
  gap: 4rem;
  align-items: start;
  background: #030303;
  border-top: 1px solid var(--line-dark);
}
.site-footer > div > p { max-width: 20rem; margin: 1rem 0 0; color: var(--muted); font-size: .76rem; }
.site-footer nav { display: grid; grid-template-columns: repeat(2, minmax(7rem, 1fr)); gap: .8rem 2rem; }
.copyright { justify-self: end; margin: 0; color: var(--muted); font-size: .7rem; }

.reveal-ready [data-reveal] { opacity: 0; transform: translateY(1.4rem); transition: opacity 700ms ease, transform 700ms cubic-bezier(.2,.7,.2,1); }
.reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

@media (max-width: 70rem) {
  .desktop-nav { display: none; }
  .mobile-menu { display: block; }
  .principle-grid { grid-template-columns: repeat(3, 1fr); }
  .principle-grid li:nth-child(4), .principle-grid li:nth-child(5) { border-top: 1px solid var(--line-dark); }
  .principle-grid li:nth-child(4) { border-left: 0; }
  .portfolio-intro { grid-template-columns: .6fr 1.4fr; }
  .portfolio-intro > p { grid-column: 2; }
}

@media (max-width: 52rem) {
  :root { --section-space: clamp(5rem, 16vw, 7rem); }
  .hero { min-height: 44rem; }
  .orbital-system { width: 130vw; }
  .glyph-people { left: 8%; }.glyph-place { right: 8%; }
  .horizon { bottom: -15vw; width: 165vw; aspect-ratio: 2.4; }
  .philosophy-grid, .precision-heading, .merin-grid, .crossing-grid, .technology-grid, .license-grid, .answers-heading { grid-template-columns: 1fr; }
  .definition { padding-left: 0; padding-top: 2rem; border-left: 0; border-top: 1px solid var(--line-light); }
  .instrument-statement { margin-top: 4rem; }
  .principle-grid { grid-template-columns: 1fr 1fr; }
  .principle-grid li:nth-child(n) { border-top: 1px solid var(--line-dark); }
  .principle-grid li:nth-child(1), .principle-grid li:nth-child(2) { border-top: 0; }
  .principle-grid li:nth-child(odd) { border-left: 0; }
  .merin-grid { gap: 6rem; }
  .merin-values { grid-template-columns: 1fr 1fr; }
  .merin-values li:nth-child(3) { border-left: 0; border-top: 1px solid var(--line-dark); }
  .merin-values li:nth-child(4) { border-top: 1px solid var(--line-dark); }
  .scroll-story-ready .domain-story { height: 150svh; min-height: 50rem; }
  .domain-image-wrap { inset: -3%; }
  .domain-time .domain-image { transform: translate3d(0, calc(var(--story-progress) * -1.5%), 0) scale(calc(1.04 + (var(--story-progress) * .07))); }
  .domain-people .domain-image { transform: translate3d(calc(-1% + (var(--story-progress) * 2%)), 0, 0) scale(calc(1.11 - (var(--story-progress) * .06))); }
  .domain-place .domain-image { transform: translate3d(calc(-1.5% + (var(--story-progress) * 3%)), calc(1% - (var(--story-progress) * 2%)), 0) scale(calc(1.04 + (var(--story-progress) * .05))); }
  .domain-shade, .domain-people .domain-shade { background: linear-gradient(0deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.45) 48%, rgba(0,0,0,.14) 78%); }
  .domain-people .domain-story-content { display: block; text-align: left; }
  .domain-story-content { padding-bottom: clamp(3rem, 8vh, 5rem); }
  .domain-story h3 { font-size: clamp(4rem, 18vw, 6.4rem); }
  .domain-story-content > p:last-child { max-width: 29rem; }
  .portfolio-intro { grid-template-columns: 1fr; }
  .portfolio-intro > p { grid-column: auto; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .tool-family + .tool-family { border-left: 0; border-top: 1px solid var(--line-dark); }
  .tool-family > p { min-height: 0; }
  .technology-list li { grid-template-columns: 2rem 1fr; }
  .technology-list p { grid-column: 2; }
  .answer-list article { grid-template-columns: 1fr; gap: 1rem; }
  .site-footer { grid-template-columns: 1fr 1fr; }
  .copyright { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 34rem) {
  :root { --page-pad: 1.15rem; --header-height: 4.25rem; }
  .brand { font-size: .78rem; letter-spacing: .18em; }
  .hero { min-height: 41rem; padding-bottom: 6rem; }
  .hero h1 { font-size: clamp(4rem, 21vw, 6.7rem); }
  .hero-factors { font-size: .7rem; letter-spacing: .18em; }
  .hero-factors span { margin-inline: .25rem; }
  .hero .eyebrow { max-width: 17rem; margin-inline: auto; line-height: 1.7; }
  .horizon { bottom: -3rem; width: 190vw; height: 16rem; }
  .scroll-cue { bottom: 1.5rem; }
  .section h2 { font-size: clamp(2.65rem, 14vw, 4.5rem); }
  .center-heading h2 { font-size: clamp(5rem, 26vw, 8rem); }
  .principle-grid { grid-template-columns: 1fr; }
  .principle-grid li:nth-child(n) { border-left: 0; border-top: 1px solid var(--line-dark); }
  .principle-grid li:first-child { border-top: 0; }
  .merin-values { grid-template-columns: 1fr; }
  .merin-values li:nth-child(n) { border-left: 0; border-top: 1px solid var(--line-dark); }
  .merin-values li:first-child { border-top: 0; }
  .matrix-key { flex-direction: column; gap: .25rem; }
  .site-footer { grid-template-columns: 1fr; gap: 2.5rem; }
  .site-footer nav { grid-template-columns: 1fr 1fr; }
  .copyright { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .reveal-ready [data-reveal] { opacity: 1; transform: none; }
  .scroll-story-ready .domain-story { height: auto; min-height: 0; }
  .scroll-story-ready .domain-stage { position: relative; min-height: 44rem; height: auto; }
  .domain-image { transform: scale(1.04) !important; }
}

@media print {
  .site-header, .scroll-cue { display: none; }
  .hero { min-height: 32rem; }
  .section { break-inside: avoid; }
  .domain-story { min-height: 40rem; }
  .domain-image { transform: none !important; }
}