/* =========================================================================
   Capital Moreno — Design System
   Doctrine: crowned-pawn mark, Instrument Serif display, Inter copy.
   Tier-1 family-office register: restraint, editorial whitespace, hairlines.
   Two grounds — dark (default) and light — toggled via [data-theme].
   ========================================================================= */

/* ---- Webfonts: Neue Haas Grotesk Text (licensed, Commercial Type) ------ */
@font-face {
  font-family: "Neue Haas Grotesk Text";
  src: url("fonts/NeueHaasGroteskText-55Roman-Web.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Text";
  src: url("fonts/NeueHaasGroteskText-56Italic-Web.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Grotesk Text";
  src: url("fonts/NeueHaasGroteskText-65Medium-Web.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

/* ---- Tokens ------------------------------------------------------------ */
:root {
  /* Color — semantic roles (dark ground, default) */
  --ground:       #000000;
  --paper:        #FFFFFF;   /* primary foreground         */
  --grey-1:       #C9C9C9;   /* lead / secondary text      */
  --grey-2:       #8C8C8C;   /* meta, nav, eyebrows        */
  --grey-3:       #5C5C5C;   /* faint, numerals            */
  --line:         rgba(255,255,255,0.14);
  --line-strong:  rgba(255,255,255,0.26);
  --select:       rgba(255,255,255,0.16);
  --emblem-invert: 0;        /* white mark needs no invert on dark */
  --bar-veil:     rgba(0,0,0,0.55);
  --glow:         rgba(255,255,255,0.07);

  /* Type */
  --serif: "Instrument Serif", "Iowan Old Style", "Times New Roman", serif;
  --sans:  "Geist", "Inter", ui-sans-serif, -apple-system, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --wordmark: "Jost", "Century Gothic", "Futura", "Questrial", ui-sans-serif, system-ui, sans-serif;
  --grotesk: "Neue Haas Grotesk Text", "Helvetica Neue", Arial, sans-serif;

  /* Fluid type scale (~1.32 ratio) */
  --t-hero:    clamp(3.4rem, 11vw, 8.5rem);   /* reserved             */
  --t-display: clamp(2.1rem, 6vw, 4.2rem);    /* page statements      */
  --t-mid:     clamp(1.6rem, 3.6vw, 2.6rem);  /* movement headlines   */
  --t-lead:    clamp(1.18rem, 2.1vw, 1.45rem);/* lead copy            */
  --t-body:    clamp(1rem, 1.5vw, 1.1rem);    /* body copy            */
  --t-meta:    0.74rem;                        /* sans labels          */

  /* Space */
  --foot-inset: clamp(2.5rem, 9vw, 8rem);
  --gutter: clamp(1.5rem, 5vw, 4rem);
  --measure: 38rem;
  --measure-wide: 54rem;

  /* Vertical rhythm — three steps, nothing between them. Every adjacency
     inside a document column resolves to exactly one of these. */
  --sp-tight:   clamp(1.1rem, 2.4vw, 1.5rem);   /* within one thought */
  --sp-block:   clamp(2.2rem, 4.6vw, 3.2rem);   /* between blocks     */
  --sp-section: clamp(3.6rem, 7.5vw, 5.4rem);   /* between movements  */
}

/* Light ground */
[data-theme="light"] {
  --ground:       #FBFAF7;
  --paper:        #0B0B0C;
  --grey-1:       #3C3C3E;
  --grey-2:       #6A6A6E;
  --grey-3:       #9A9A9E;
  --line:         rgba(0,0,0,0.12);
  --line-strong:  rgba(0,0,0,0.28);
  --select:       rgba(0,0,0,0.10);
  --emblem-invert: 1;        /* invert white mark → black on light */
  --bar-veil:     rgba(251,250,247,0.62);
  --glow:         rgba(0,0,0,0.05);
}

/* ---- Reset ------------------------------------------------------------- */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  min-height: 100svh;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--paper);
  font-family: var(--sans);          /* copy is sans (Geist) by default */
  font-weight: 400;
  font-size: var(--t-body);
  line-height: 1.62;
  letter-spacing: -0.006em;          /* Geist is wide; settles a hair tighter */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  transition: background-color .45s ease, color .45s ease;
}
body.menu-open { overflow: hidden; }

/* Home: bar + hero fill the first screen; the footer sits just below the fold */
.screen {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}

::selection { background: var(--select); }
a { color: inherit; text-decoration: none; }
img { display: block; }

.emblem-img { filter: invert(var(--emblem-invert)); transition: filter .45s ease; }

/* ---- Sans utility (nav, eyebrows, meta) -------------------------------- */
.sans {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;            /* Geist is wider than Inter — ease the tracking */
  font-size: var(--t-meta);
  font-weight: 500;
}

/* ---- Top bar ----------------------------------------------------------- */
.bar {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.1rem, 2.4vw, 1.7rem) var(--gutter);
  background: var(--bar-veil);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.bar-wordmark {
  font-family: var(--wordmark);
  text-transform: uppercase;
  letter-spacing: 0.22em;
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1;
  color: var(--paper);
  transition: opacity .35s ease;
}
.bar-wordmark:hover { opacity: 0.62; }

/* Hamburger button → morphs to X */
.menu-btn {
  position: relative;
  width: 44px;
  height: 44px;
  margin-right: -10px;          /* optical: align the lines to the gutter */
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--paper);
}
.menu-btn__icon { position: relative; width: 26px; height: 14px; display: block; }
.menu-btn__icon span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background: var(--paper);
  transition: transform .42s cubic-bezier(.16,.84,.34,1), opacity .3s ease, width .35s ease, background-color .45s ease;
}
.menu-btn__icon span:nth-child(1) { top: 0; }
.menu-btn__icon span:nth-child(2) { top: 6px; transform-origin: right center; }
.menu-btn__icon span:nth-child(3) { top: 12px; }
/* hover — middle line retracts, a small designed motion */
.menu-btn:hover .menu-btn__icon span:nth-child(2) { width: 58%; }
/* open — morph to a clean X */
body.menu-open .menu-btn__icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-btn__icon span:nth-child(2) { opacity: 0; transform: scaleX(0); }
body.menu-open .menu-btn__icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
.menu-btn:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 4px; }

/* ---- Full-screen menu -------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: var(--ground);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(6rem, 16vh, 11rem) var(--gutter) clamp(2rem, 6vh, 3.5rem);
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity .5s ease, visibility .5s ease;
}
body.menu-open .menu { opacity: 1; visibility: visible; }

.menu__list { list-style: none; }
.menu__list li {
  border-top: 1px solid var(--line);
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,.84,.34,1);
}
.menu__list li:last-child { border-bottom: 1px solid var(--line); }
body.menu-open .menu__list li { opacity: 1; transform: none; }
body.menu-open .menu__list li:nth-child(1) { transition-delay: .12s; }
body.menu-open .menu__list li:nth-child(2) { transition-delay: .18s; }
body.menu-open .menu__list li:nth-child(3) { transition-delay: .24s; }
body.menu-open .menu__list li:nth-child(4) { transition-delay: .30s; }

.menu__list a {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.1rem, 2.6vw, 1.7rem) 0;
}
.menu__label {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.4rem, 8.5vw, 4.8rem);
  line-height: 1;
  letter-spacing: 0.004em;
  color: var(--grey-2);
  transition: color .35s ease, transform .42s cubic-bezier(.16,.84,.34,1);
}
.menu__list a:hover .menu__label,
.menu__list a:focus-visible .menu__label {
  color: var(--paper);
  transform: translateX(0.5rem);
}
.menu__list a:focus-visible { outline: none; }

/* Menu footer — contact, theme toggle, meta */
.menu__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem 2rem;
  flex-wrap: wrap;
  margin-top: clamp(2.5rem, 7vh, 4rem);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .6s ease .34s, transform .6s ease .34s;
}
body.menu-open .menu__foot { opacity: 1; transform: none; }
.menu__contact {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: var(--t-meta);
  color: var(--grey-1);
  padding-bottom: 2px;
  border-bottom: 1px solid var(--line);
  transition: color .35s ease, border-color .35s ease;
}
.menu__contact:hover { color: var(--paper); border-color: var(--line-strong); }
.menu__social { display: inline-flex; align-items: center; color: var(--grey-1); transition: color .35s ease, opacity .35s ease; }
.menu__social:hover { color: var(--paper); }
.menu__theme {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.menu__theme button {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--grey-3);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color .35s ease, border-color .35s ease;
}
.menu__theme button:hover { color: var(--grey-1); }
.menu__theme button[aria-pressed="true"] { color: var(--paper); border-bottom-color: var(--line-strong); }
.menu__theme .dot { color: var(--grey-3); font-size: 0.6rem; }
.menu__meta {
  flex-basis: 100%;
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.62rem;
  color: var(--grey-3);
}

/* ---- Home (monument) --------------------------------------------------- */
.home-main {
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2rem, 6vw, 4rem) var(--gutter);
  gap: clamp(2rem, 4.5vw, 3rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
/* Ambient glow — breathes (CSS) and drifts toward the pointer (JS) */
.home-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translate(0, 0);
  transition: transform .8s cubic-bezier(.16,.84,.34,1);
}
.home-glow span {
  width: min(130vw, 1150px);
  aspect-ratio: 1 / 1;
  background: radial-gradient(circle, var(--glow) 0%, transparent 60%);
  filter: blur(44px);
  opacity: 0;
  animation: glowIn 2.6s ease .3s forwards, glowBreath 16s ease-in-out 2.9s infinite;
}
/* The slogan IS the page — pure typography, no mark in the body */
.home-slogan {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(3rem, 10vw, 7rem);
  line-height: 1.08;
  letter-spacing: -0.02em;            /* tight display tracking */
  color: var(--paper);
}
.home-slogan .line { display: block; overflow: hidden; padding-bottom: 0.12em; }
.home-slogan .line > span {
  display: block;
  transform: translateY(120%);
  animation: lineUp 1.05s cubic-bezier(.16,.84,.34,1) both;
}
.home-slogan .line:nth-child(1) > span { animation-delay: .25s; }
.home-slogan .line:nth-child(2) > span { animation-delay: .40s; }
.home-slogan em { font-style: italic; color: var(--grey-1); }
.home-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  font-family: var(--sans);
  font-size: 1.02rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  color: var(--grey-1);
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line-strong);
  opacity: 0;
  animation: rise 1s cubic-bezier(.16,.84,.34,1) .7s forwards;
  transition: color .4s ease, border-color .4s ease;
}
.home-link .arrow { transition: transform .4s cubic-bezier(.16,.84,.34,1); }
.home-link:hover, .home-link:focus-visible {
  color: var(--paper);
  border-color: var(--paper);
  outline: none;
}
.home-link:hover .arrow, .home-link:focus-visible .arrow { transform: translateX(4px); }

/* ---- Interior pages (essay) -------------------------------------------- */
.page {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--measure-wide);
  margin: 0 auto;
  padding: clamp(2.5rem, 7vw, 6rem) var(--gutter) clamp(3rem, 7vw, 6rem);
  opacity: 0;
  animation: rise 1.1s cubic-bezier(.16,.84,.34,1) .05s forwards;
}
.eyebrow { color: var(--grey-2); margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }
.statement {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-display);
  line-height: 1.04;
  letter-spacing: -0.02em;            /* tight display tracking, matches the hero */
  max-width: 22ch;
}
.statement em { font-style: italic; color: var(--grey-1); }

.lead {
  font-family: var(--sans);
  font-size: var(--t-lead);
  line-height: 1.5;
  letter-spacing: -0.014em;          /* larger sans → tighter, settles under the serif */
  color: var(--grey-1);
  max-width: var(--measure);
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
}

.rule { border: 0; height: 1px; background: var(--line); margin: clamp(2.4rem, 6vw, 4rem) 0; }
.rule--short { width: 48px; background: var(--line-strong); }

/* Numbered movements (The Thesis) */
.movements { display: flex; flex-direction: column; margin-top: clamp(2.4rem, 6vw, 4rem); }
.movement {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: clamp(1rem, 3vw, 2rem);
  padding: clamp(1.8rem, 4vw, 2.6rem) 0;
  border-top: 1px solid var(--line);
}
.movement:last-child { border-bottom: 1px solid var(--line); }
.movement .num { font-family: var(--serif); font-size: var(--t-mid); line-height: 1; color: var(--grey-3); }
.movement h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: var(--t-mid);
  line-height: 1.1;
  letter-spacing: 0.004em;
}
.movement p {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  letter-spacing: -0.005em;
  color: var(--grey-1);
  margin-top: 0.8rem;
  max-width: 46ch;
}

/* Correction / closing blocks */
.lead.trade { margin-top: clamp(2.4rem, 6vw, 4rem); max-width: var(--measure); }
.block { margin-top: clamp(2.4rem, 6vw, 4rem); }
.block .mid { font-family: var(--serif); font-size: var(--t-mid); line-height: 1.14; max-width: 40ch; }
.block .mid em { font-style: italic; color: var(--grey-1); }
.tenets {
  list-style: none;
  margin-top: clamp(1.4rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: var(--measure);
}
.tenets li { font-family: var(--grotesk); font-size: var(--t-lead); line-height: 1.4; letter-spacing: -0.005em; color: var(--grey-1); }

/* Values (About) — icon · name · line grid */
.values { display: flex; flex-direction: column; margin-top: clamp(1.6rem, 3.5vw, 2.4rem); }
.value {
  display: grid;
  grid-template-columns: clamp(7.5rem, 24%, 11rem) 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: baseline;
  padding: clamp(1.2rem, 2.8vw, 1.7rem) 0;
  border-top: 1px solid var(--line);
}
.value:last-child { border-bottom: 1px solid var(--line); }
.value-name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--paper);
}
.value-line {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.55;
  letter-spacing: -0.004em;
  color: var(--grey-1);
  max-width: 42ch;
}
.closing {
  font-family: var(--serif);
  font-size: var(--t-display);
  line-height: 1.05;
  margin-top: clamp(2.6rem, 6vw, 4.5rem);
}
.closing em { font-style: italic; color: var(--grey-1); }

/* Holdings (Companies) */
.holdings { display: flex; flex-direction: column; margin-top: clamp(2.4rem, 6vw, 4rem); }
.holding { padding: clamp(2rem, 5vw, 3rem) 0; border-top: 1px solid var(--line); }
.holding:last-child { border-bottom: 1px solid var(--line); }
.holding .h-name { font-family: var(--serif); font-weight: 400; font-size: var(--t-mid); line-height: 1.05; }
.holding .h-kicker {
  font-family: var(--serif);
  font-style: italic;
  font-size: var(--t-lead);
  color: var(--grey-1);
  margin-top: 0.3rem;
}
.holding .h-body {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.62;
  letter-spacing: -0.005em;
  color: var(--grey-1);
  margin-top: 1rem;
  max-width: 52ch;
}
.holding .h-status {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.66rem;
  font-weight: 500;
  color: var(--grey-3);
  margin-top: 1.1rem;
  display: inline-block;
}

/* ---- Footer ------------------------------------------------------------ */
.foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--line);
  padding: clamp(2.8rem, 6vw, 4.2rem) var(--gutter);
}
/* Centered band — holds the two groups at ~20% / 80%, off the page edges */
.foot-inner {
  width: 100%;
  max-width: var(--measure-wide);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem 3rem;
  flex-wrap: wrap;
}
/* Left — entity, page list, copyright */
.foot-left { display: flex; flex-direction: column; gap: clamp(1rem, 2.5vw, 1.5rem); }
.foot-entity {
  font-family: var(--wordmark);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--paper);
}
.foot-nav { display: flex; flex-direction: column; gap: 0.55rem; align-items: flex-start; }
.foot-nav a {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: var(--t-meta);
  font-weight: 500;
  color: var(--grey-2);
  transition: color .35s ease;
}
.foot-nav a:hover, .foot-nav a:focus-visible { color: var(--paper); outline: none; }
/* below this the line cannot hold on one row without shrinking past legibility */
@media (max-width: 480px) {
  }

/* ONE container. Same band as the footer content, then inset on the right by
   the same amount as the pawn column, so the quote ends exactly where it does. */
.foot-coda {
  max-width: var(--measure-wide);
  margin: clamp(2.2rem, 5vw, 3.4rem) auto 0;
  padding-top: clamp(1.4rem, 3vw, 2.2rem);
  padding-right: var(--foot-inset);
  border-top: 1px solid var(--line);
  text-align: right;
}

.foot-coda p {
  font-family: var(--serif);
  font-size: clamp(.86rem, 1.15vw, 1.1rem);
  line-height: 1.3;
  letter-spacing: -.008em;
  color: var(--grey-2);
}

/* One serif across the whole line. The attribution separates itself by slope
   alone — the editorial convention — and by sitting a step back in the grey. */
.foot-coda__attr {
  font-style: italic;
  margin-left: 1.9em;
  color: var(--grey-3);
  white-space: nowrap;
}

.foot-legal {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.62rem;
  color: var(--grey-3);
}
/* Right — mark + theme toggle */
.foot-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.8rem, 2vw, 1.3rem);          /* mark sits close to the toggle */
  margin-right: var(--foot-inset);   /* pull in toward the left group */
}
.foot-mark-link { display: inline-flex; transition: opacity .35s ease; }
.foot-mark-link:hover { opacity: 0.62; }
.foot-mark { width: clamp(40px, 5vw, 54px); height: auto; display: block; }
.foot-theme { display: inline-flex; align-items: center; gap: 0.55rem; }
.foot-theme button {
  font-family: var(--sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--grey-3);
  background: none;
  border: 0;
  cursor: pointer;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color .35s ease, border-color .35s ease;
}
.foot-theme button:hover { color: var(--grey-1); }
.foot-theme button[aria-pressed="true"] { color: var(--paper); border-bottom-color: var(--line-strong); }
.foot-theme .dot { color: var(--grey-3); font-size: 0.6rem; }

/* ---- Motion ------------------------------------------------------------ */
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes fade { to { opacity: 1; } }
@keyframes lineUp { from { transform: translateY(120%); } to { transform: translateY(0); } }
@keyframes glowIn { to { opacity: 1; } }
@keyframes glowBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .home-slogan, .home-slogan .line > span, .home-link, .page, .thesis section,
  .menu__list li, .menu__foot, .home-glow span { opacity: 1; transform: none; }
  html { scroll-behavior: auto; }
}

/* ---- Small screens ----------------------------------------------------- */
@media (max-width: 540px) {
  .movement { grid-template-columns: 2.4rem 1fr; }
  .bar { gap: 1rem; }
  .bar-wordmark { letter-spacing: 0.16em; font-size: 0.8rem; }
  .foot-inner { flex-direction: column; align-items: flex-start; gap: clamp(2rem, 8vw, 2.8rem); }
  .foot-right { margin: 0; align-items: flex-start; }
  .foot-coda { padding-right: 0; }
  .value { grid-template-columns: 1fr; gap: 0.4rem; }
}

/* =======================================================================
   Document format — thesis, about, companies
   No labels, no rules across the column. Hierarchy is carried by type,
   colour and interval alone.

   Composition: statements sit on the left rail; supporting copy is inset
   to a second position. Two axes, used consistently, so an assertion is
   distinguishable from its support without a label.

   Structure: one hairline runs the length of the argument, with a short
   tick where each movement begins. Five marks on a page. Below 761px
   there is no margin to draw them in, so they are not drawn and the
   composition collapses to a single axis.

   Pacing: intervals are deliberately uneven. The largest break falls
   before the turn, where the argument changes direction.
   ======================================================================= */
.doc {
  --inset: clamp(0rem, 7vw, 8.5rem);
  --tail: clamp(7rem, 16vh, 12rem);
  --spine: 2.2rem;
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 var(--gutter) var(--tail);
}

@media (min-width: 761px) {
  .doc::before {
    content: "";
    position: absolute;
    left: calc(var(--gutter) - var(--spine));
    top: 0; bottom: var(--tail);
    width: 1px;
    background: var(--line);
  }
  .mv { position: relative; }
  .mv::before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(-1 * var(--spine) - .55rem);
    width: 1.5rem; height: 1px;
    background: var(--line-strong);
  }
  /* the opening statement is centred in its screen; align its tick to the
     statement rather than to the top of the section */
  .open::before { top: 50%; }
}

/* --- movements --------------------------------------------------------- */
.mv + .mv { margin-top: clamp(6rem, 15vh, 10rem); }
.mv > * + * { margin-top: var(--sp-tight); }
.mv.turn { margin-top: clamp(9rem, 24vh, 16rem); }
.mv.end  { margin-top: clamp(8rem, 20vh, 14rem); }

.open {
  min-height: 72svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(3rem, 8vh, 6rem);
}

/* --- statements, on the rail ------------------------------------------- */
.st {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(2.7rem, 7.2vw, 5.4rem);
  line-height: 1.02; letter-spacing: -.028em;
  color: var(--paper); max-width: 19ch; text-wrap: balance;
}
.sh {
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.9rem, 4.4vw, 3.2rem);
  line-height: 1.06; letter-spacing: -.02em;
  color: var(--paper); max-width: 20ch; text-wrap: balance;
}

/* --- supporting copy, inset to the second axis -------------------------- */
.bd {
  margin-left: var(--inset);
  font-size: var(--t-lead); line-height: 1.55; letter-spacing: -.01em;
  color: var(--grey-1); max-width: 44ch;
}
.bd + .bd { margin-top: var(--sp-tight); }
.st + .bd { margin-top: clamp(2.4rem, 5vh, 3.4rem); }
.sh + .bd { margin-top: clamp(1.6rem, 3.4vh, 2.2rem); }

/* The paragraph that opens a page holds the statement's own axis and takes a
   step up in size. Inset at body scale it reads as a caption hanging off the
   headline rather than as the opening of the argument; the inset is for
   supporting material further down, where the reader has already been given
   the claim. Companies has no opening paragraph, so this is About only. */
.mv.open .bd {
  margin-left: 0;
  font-size: clamp(1.22rem, 1.75vw, 1.5rem);
  line-height: 1.5;
  letter-spacing: -.012em;
  color: var(--grey-1);
  max-width: 46ch;
}

/* --- the close ---------------------------------------------------------
   Serif, so a page ends in the voice it opened in. Held on the rail: it
   answers the opening statement, it does not support anything.           */
.cl {
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3.4vw, 2.4rem);
  line-height: 1.2; letter-spacing: -.018em;
  color: var(--paper); max-width: 28ch;
}
.cl .q { color: var(--grey-2); }
/* Companies only. Its close carries the whole argument of the page and its
   supporting sentence sits beside the holdings, so it is given its own step
   of the scale (below .st, above .sh) and the full column width.
   Deliberately NOT applied to .mv.end globally: thesis and about were signed
   off with the default .cl and must not move when this one is tuned. */
/* The premise sits on its own line and a shade back. Same face, same size:
   it is one sentence, so it stays one voice, and only the tone and the break
   separate the setup from the answer. */
.cl-test .q {
  display: block;
  color: var(--grey-2);
  margin-bottom: .1em;
}

/* a close set as separate beats rather than a paragraph */
.cl-beats span { display: block; }
.cl-beats span + span { margin-top: .1em; }
.cl-beats .fade { color: var(--grey-2); }

.mv.end.wide .cl {
  font-size: clamp(1.7rem, 4vw, 4rem);
  line-height: 1.1;
  letter-spacing: -.022em;
  max-width: none;
  text-wrap: pretty;
}

/* The system: the set on the left, what it amounts to on the right.
   The brace is a hairline spanning the three, with a short tie reaching
   toward them — the same vocabulary as the page spine, saying that these
   three are one thing. No diagram, no icons: the rule does the work. */
.sys {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: 0 clamp(2.5rem, 6vw, 5.5rem);
  align-items: stretch;
}
.sys-note {
  position: relative;
  padding-left: clamp(1.6rem, 3.5vw, 3rem);
  display: flex; align-items: center;      /* text centres; brace spans */
}
.sys-note::before {
  content: "";
  position: absolute; left: 0; top: 8%; bottom: 8%;
  width: 1px; background: var(--line-strong);
}
.sys-note::after {
  content: "";
  position: absolute; left: calc(-1 * clamp(1rem, 2.4vw, 2rem)); top: 50%;
  width: clamp(1rem, 2.4vw, 2rem); height: 1px; background: var(--line-strong);
}
.sys-note p {
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  letter-spacing: -.006em;
  color: var(--grey-1);
  max-width: 34ch;
}
/* inside the narrower column the row has to give ground */
.sys .pf-list { margin-left: clamp(1.5rem, 4.5vw, 4.5rem); }
.sys .pf-row {
  grid-template-columns: clamp(8.5rem, 15vw, 11.5rem) minmax(0, 1fr);
  gap: 0 clamp(1.4rem, 3vw, 2.4rem);
  padding: clamp(1.5rem, 3.2vw, 2.4rem) 0;
}
.sys .pf-mark { height: 3.6rem; }
.sys .pf-row .pf-svg { height: 38px; }
.sys .pf-row[href*="occidentalroofing"] .pf-svg { height: 50px; }
.sys .pf-role { font-size: clamp(1.02rem, 1.75vw, 1.32rem); }

@media (max-width: 900px) {
  .sys { grid-template-columns: 1fr; gap: clamp(2.4rem, 6vw, 3.4rem) 0; }
  .sys-note { padding-left: 0; padding-top: clamp(1.6rem, 4vw, 2.4rem); }
  .sys-note::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
  .sys-note::after { display: none; }
  .sys-note p { max-width: 46ch; }
}

/* --- paired statements (thesis decouplings) ----------------------------- */
.dcx { list-style: none; margin-left: var(--inset); margin-top: clamp(2rem, 4.2vh, 2.8rem); }
.dcx li + li { margin-top: clamp(2.4rem, 5.6vh, 3.4rem); }
.dcx .a {
  font-family: var(--serif); font-size: clamp(1.6rem, 3.4vw, 2.4rem);
  line-height: 1.05; letter-spacing: -.018em; color: var(--paper);
}
.dcx .b {
  display: block; margin-top: .5rem;
  font-family: var(--sans); font-size: var(--t-body);
  line-height: 1.5; letter-spacing: -.006em; color: var(--grey-2);
}

/* the coda to the principles: it belongs to them, so it sits with them */
.vl-coda { margin-top: clamp(2.8rem, 6.5vh, 4.4rem); max-width: 52ch; }

/* commitments that run to a full sentence or two need their own air; the
   short form in .cm is set for single clauses */
.cm-long li { max-width: 54ch; }
.cm-long li + li { margin-top: clamp(1.1rem, 2.4vh, 1.6rem); }

/* --- statement lists (commitments) -------------------------------------- */
.cm { list-style: none; margin-left: var(--inset); margin-top: clamp(2.4rem, 5vh, 3.4rem); }
.cm li + li { margin-top: .7rem; }
.cm li {
  font-size: var(--t-lead); line-height: 1.5; letter-spacing: -.01em;
  color: var(--paper); max-width: 42ch;
}

/* a quiet label: it introduces, it does not assert, so it stays in the sans
   and never outranks what follows it */
.lbl {
  font-family: var(--sans);
  font-size: clamp(1.02rem, 1.32vw, 1.14rem);
  line-height: 1.4;
  letter-spacing: -.004em;
  color: var(--grey-2);
}

/* --- the principles (about) ---------------------------------------------
   The set piece of the page, and sized like it. Each name is set at movement
   scale, the numeral matches it, and the gloss sits beneath at lede size with
   room to breathe. Previously the names were 28px under a 51px heading, so
   the label outranked the thing it introduced and the whole section read as a
   spec table. Now the section is the tallest and most open part of the page,
   which is what it should be if these are the page's reason for existing. */
.vl { list-style: none; counter-reset: v; margin-top: clamp(2.6rem, 6vh, 4rem); }
.vl li {
  counter-increment: v;
  position: relative;
  padding-left: calc(3.6rem + clamp(1.2rem, 2.6vw, 2.2rem));
}
.vl li + li { margin-top: clamp(2.6rem, 6.5vh, 4.6rem); }
.vl li::before {
  content: counter(v, upper-roman);
  position: absolute;
  left: 0;
  top: 0;
  width: 3.6rem;
  text-align: right;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.5vw, 3.1rem);
  line-height: 1.05;
  color: var(--grey-3);
}
.vl .n {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3.5vw, 3.1rem);
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--paper);
}
.vl .d {
  display: block;
  margin-top: clamp(.6rem, 1.4vh, .95rem);
  font-family: var(--sans);
  font-size: clamp(1.1rem, 1.5vw, 1.32rem);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: var(--grey-1);
  max-width: 40ch;
}
.motion .vl li.rv {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .8s cubic-bezier(.16,.84,.34,1),
              clip-path 1.15s cubic-bezier(.16,.84,.34,1);
}
.motion .vl li.rv.in { opacity: 1; clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) {
  .motion .vl li.rv { opacity: 1; clip-path: none; transition: none; }
}
@media (max-width: 620px) {
  .vl li { padding-left: calc(2.4rem + .9rem); }
  .vl li::before { width: 2.4rem; }
}

/* --- the one motion -----------------------------------------------------
   A counterpart separates out from under its term on entry, so a
   decoupling is seen rather than described. Used once per page.
   The hidden start-state is scoped to .motion, which is set in <head>
   only when IntersectionObserver exists, so content never depends on JS. */
.motion .dcx .rv .a { opacity: 0; transform: translateY(10px); }
.motion .dcx .rv .b { opacity: 0; transform: translateY(-14px); }
.motion .dcx .rv .a,
.motion .dcx .rv .b {
  transition: opacity .62s cubic-bezier(.16,.84,.34,1),
              transform .78s cubic-bezier(.16,.84,.34,1);
}
.motion .dcx .rv.in .a,
.motion .dcx .rv.in .b { opacity: 1; transform: none; }
.motion .dcx .rv.in .b { transition-delay: .16s; }

@media (prefers-reduced-motion: reduce) {
  .motion .dcx .rv .a,
  .motion .dcx .rv .b { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 760px) {
  .doc { --inset: 0rem; }
  .open { min-height: 0; padding-top: clamp(2.5rem, 8vh, 4rem); }
}

/* Holdings. Three equal components of one stack: the operation, the
   intelligence, the system. Nothing is dimmed and nothing is subordinated
   at rest, so all three marks and all three roles read at full strength.
   Attention adds rather than subtracts: the row being looked at draws its
   rule and its domain arrives from the right. */
.pf-list { list-style: none; margin-left: var(--inset); }
.pf-list li + li { margin-top: clamp(.5rem, 1.4vh, 1.1rem); }

.pf-row {
  position: relative;
  display: grid;
  grid-template-columns: clamp(12rem, 23vw, 17rem) minmax(0, 1fr);
  gap: 0 clamp(3rem, 7vw, 6rem);
  align-items: center;
  width: 100%;
  text-align: left;
  color: inherit;
  padding: clamp(2rem, 4.4vw, 3.2rem) 0;
}
.pf-row:focus-visible { outline: 1px solid var(--line-strong); outline-offset: 10px; }

/* the mark, at full strength */
.pf-mark { display: flex; align-items: center; height: 5.2rem; }
.pf-row .pf-svg {
  height: 56px; width: auto; max-width: 100%;
  filter: brightness(0) invert(1);
  transition: transform .75s cubic-bezier(.16,.84,.34,1);
}
.pf-row[href*="occidentalroofing"] .pf-svg { height: 74px; }   /* 2-line lockup */
[data-theme="light"] .pf-row .pf-svg { filter: none; }
.pf-row:hover .pf-svg,
.pf-row:focus-visible .pf-svg { transform: translateX(4px); }

/* the role, readable at rest, set in the sans */
.pf-role {
  font-family: var(--sans);
  font-size: clamp(1.15rem, 2.2vw, 1.7rem);
  line-height: 1.2;
  letter-spacing: -.014em;
  color: var(--paper);
  white-space: nowrap;          /* a one-liner is a one-liner */
}

/* Continental has no site of its own yet, so its row is not a link. It sits
   at the same weight as the others at rest and simply does not respond: no
   pointer, no rule, no domain. The absence is the honest signal. */

/* the only rule on the page, drawn only while a row is being looked at */
.pf-row::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--line-strong);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .7s cubic-bezier(.16,.84,.34,1);
}
.pf-row:hover::after,
.pf-row:focus-visible::after { transform: scaleX(1); }

/* entrance: each row wipes open from the left, in sequence */
.motion .pf-list li.rv {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  transition: opacity .8s cubic-bezier(.16,.84,.34,1),
              clip-path 1.15s cubic-bezier(.16,.84,.34,1);
}
.motion .pf-list li.rv.in { opacity: 1; clip-path: inset(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
  .motion .pf-list li.rv { opacity: 1; clip-path: none; transition: none; }
  .pf-row .pf-svg, .pf-row::after { transition: none; }
}
@media (max-width: 760px) {
  /* matched to .sys .pf-row specificity: the scoped desktop rules would
     otherwise win inside the media query and the row would never stack */
  .pf-row, .sys .pf-row { grid-template-columns: 1fr; gap: .6rem; padding: clamp(1.4rem,3.4vw,2rem) 0; }
  .pf-mark, .sys .pf-mark { grid-column: 1 / -1; height: auto; }
  .sys .pf-role { font-size: clamp(1.15rem, 4.6vw, 1.4rem); }
  .pf-row .pf-svg { height: 42px; }
  .pf-row[href*="occidentalroofing"] .pf-svg { height: 56px; }
  .pf-role { grid-column: 1; font-size: clamp(1.2rem, 5vw, 1.5rem); }
  .pf-role { white-space: normal; }
}

/* Portfolio band — breaks the inset to use the full document width. */
.pf-band { margin-top: clamp(2.4rem, 5vh, 3.4rem); }


/* ---- touch targets -------------------------------------------------------
   Pointer-coarse only, so the desktop layout is untouched. The footer links,
   theme toggles and social icon render 18-23px tall, well under the 44px a
   thumb needs; padding grows the hit area without moving the type. */
@media (hover: none) and (pointer: coarse) {
  .foot-nav { gap: 0; }
  .foot-nav a { padding: 0.78rem 0; }

  .foot-theme { gap: 0.9rem; }
  .foot-theme button { padding: 0.95rem 0.4rem; }

  .foot-mark-link { padding: 0.5rem; margin: -0.5rem; }

  .menu__social { padding: 0.65rem; margin: -0.65rem; }

  /* 10px legal type is below comfortable reading on a phone */
  .foot-legal { font-size: 0.7rem; }

  /* the remaining sub-44px targets: header wordmark, hero CTA, menu toggles */
  .bar-wordmark { padding: 0.95rem 0; margin: -0.95rem 0; }
  .home-link { padding: 0.62rem 0; }
  .menu__theme { gap: 0.9rem; }
  .menu__theme button { padding: 0.9rem 0.4rem; }
}