/* Space Elevators Incorporated — site styles
   Canvas: white. Ink: near-black. One accent: cobalt. One punctuation: signal orange, used rarely.
   Display: Archivo (variable, set expanded + black). Body: IBM Plex Sans. Technical: IBM Plex Mono. */

:root {
  color-scheme: light;
  --paper: #ffffff;
  --ink: #14161a;
  --ink-2: #4a4f57;      /* secondary text, slightly blue-biased */
  --ink-3: #7a8089;      /* captions, mono annotations */
  --rule: #dfe2e6;       /* hairlines */
  --grid: #eceef1;       /* drafting grid on placeholder plates */
  --cobalt: #1d3fe0;
  --cobalt-ink: #ffffff;
  --signal: #e8401c;

  --display: "Archivo", "Archivo Black", "Arial Black", Impact, sans-serif;
  --body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "IBM Plex Mono", "SFMono-Regular", Menlo, Consolas, monospace;

  --pad: clamp(20px, 4vw, 56px);
  --max: 1360px;
  --measure: 62ch;

  --t-xs: 0.75rem;
  --t-sm: 0.875rem;
  --t-base: 1.0625rem;
  --t-lg: clamp(1.25rem, 1.05rem + 0.8vw, 1.625rem);
  --t-xl: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-base);
  line-height: 1.55;
  font-feature-settings: "kern" 1, "liga" 1;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; }
p { margin: 0; }
img, svg { max-width: 100%; display: block; }

.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ---------- Mono utility type ---------- */
.mono {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-block: 1.25rem;
}
.topbar nav { display: flex; gap: clamp(1rem, 2.5vw, 2.5rem); }
.topbar nav a { color: var(--ink); position: relative; }
.topbar nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px;
  height: 1.5px; background: var(--cobalt); transition: right .18s ease;
}
.topbar nav a:hover::after { right: 0; }

/* ---------- First fold ----------
   The hero owns the whole first viewport: top bar, then the name and descriptor
   centered in whatever height remains. Nothing else appears until you scroll. */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
}
.fold {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(2rem, 6vh, 5rem) clamp(3rem, 10vh, 8rem);
}
.name {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125, "wght" 900;
  text-transform: uppercase;
  letter-spacing: -0.015em;
  line-height: 0.86;
  /* fallback size; JS fits the longest line to the container width */
  font-size: calc((100vw - 2 * var(--pad)) / 10.9);
  white-space: nowrap;
  display: grid;
}
.name span { display: block; }

.descriptor {
  margin-top: clamp(1.75rem, 4vh, 3rem);
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 1rem;
  max-width: 44rem;
}
.datum {
  width: 0.7em; height: 0.7em; background: var(--cobalt); flex: none;
}
.descriptor p {
  font-size: var(--t-lg);
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.descriptor .arrow { color: var(--cobalt); padding-inline: 0.2em; }
.descriptor .sub {
  grid-column: 2;
  margin-top: 0.35rem;
  color: var(--ink-2);
  font-size: var(--t-sm);
  font-weight: 400;
}

/* Phones: the name becomes a poster. Each line is fitted to the full width by the
   script (SPACE enormous, INCORPORATED smallest), the name sits at the top of the
   screen, the descriptor at the bottom, and the top bar stays hidden until the
   visitor scrolls past the fold. */
@media (max-width: 640px) {
  .name {
    font-stretch: 72%;
    font-variation-settings: "wdth" 72, "wght" 900;
    font-size: calc((100vw - 2 * var(--pad)) / 6.4);
    line-height: 0.84;
    letter-spacing: -0.01em;
  }
  .name span { line-height: 0.84; }
  /* The two longer lines use the narrowest width so they stand taller at the same length */
  .name span:nth-child(2),
  .name span:nth-child(3) {
    font-stretch: 62%;
    font-variation-settings: "wdth" 62, "wght" 900;
    line-height: 0.86;
  }
  /* Descriptor stacks one phrase per line, arrow leading each step */
  .descriptor p { max-width: none; }
  .descriptor .arrow::before { content: "\A"; white-space: pre; }
  .descriptor .arrow { padding-inline: 0 0.3em; }
  .descriptor { align-items: start; }
  .descriptor .datum { margin-top: 0.45em; }
  .fold {
    justify-content: space-between;
    padding-block: clamp(1.25rem, 4vh, 2rem) clamp(1.5rem, 5vh, 2.5rem);
  }
  .descriptor { margin-top: 2rem; }

  .topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    padding-block: 0.9rem;
    transform: translateY(-100%);
    transition: transform .28s ease;
  }
  .topbar.is-visible { transform: none; }
  .topbar > .mono:first-child { display: none; }   /* location lives in the footer on phones */
  .topbar nav { width: 100%; justify-content: space-between; gap: 0.5rem; }
  @media (prefers-reduced-motion: reduce) { .topbar { transition: none; } }
}

/* ---------- Sections ---------- */
.section {
  border-top: 1px solid var(--rule);
  padding-block: clamp(3rem, 8vh, 6.5rem);
}
.section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
  margin-bottom: clamp(2rem, 5vh, 3.5rem);
}
@media (min-width: 900px) {
  .section-head { grid-template-columns: 220px minmax(0, 1fr); gap: 2rem; }
}
.section-head h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 100%;
  font-variation-settings: "wdth" 100, "wght" 800;
  font-size: var(--t-xl);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-wrap: balance;
  max-width: 22ch;
}
.lede {
  max-width: var(--measure);
  font-size: var(--t-lg);
  line-height: 1.45;
  color: var(--ink);
}
.prose { max-width: var(--measure); color: var(--ink-2); }
.prose p + p { margin-top: 1em; }
.prose strong { color: var(--ink); font-weight: 600; }

/* Text columns with a top rule (not cards) */
.columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
  margin-top: clamp(2rem, 5vh, 3.5rem);
}
.columns > div {
  border-top: 2px solid var(--ink);
  padding-top: 1rem;
}
.columns h3 {
  margin: 0 0 0.5rem;
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.005em;
}
.columns p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; }
.columns ul { margin: 0.75rem 0 0; padding: 0; list-style: none; }
.columns li { font-size: var(--t-sm); color: var(--ink-2); padding: 0.3rem 0; border-top: 1px solid var(--rule); }

/* ---------- Method: numbered because it is a real sequence ---------- */
.steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border-top: 1px solid var(--ink);
}
.steps li {
  padding: 1.25rem 1.25rem 1.75rem 0;
  border-bottom: 1px solid var(--rule);
  position: relative;
}
@media (min-width: 900px) {
  .steps li { border-bottom: 0; border-right: 1px solid var(--rule); padding-right: 1.5rem; }
  .steps li + li { padding-left: 1.5rem; }
  .steps li:last-child { border-right: 0; }
}
.steps .n {
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.08em;
  color: var(--cobalt);
  font-variant-numeric: tabular-nums;
  display: block;
  margin-bottom: 1.5rem;
}
.steps h3 {
  margin: 0 0 0.5rem;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 100, "wght" 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 1rem;
}
.steps p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.6; }
.steps .out {
  margin-top: 1rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--rule);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--ink-3);
  line-height: 1.5;
}
.steps .out b { font-weight: 500; color: var(--ink-2); }

/* ---------- Problems list ---------- */
.problems {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  column-gap: clamp(2rem, 4vw, 4rem);
}
.problems li {
  border-top: 1px solid var(--rule);
  padding: 1rem 0 1.1rem;
  font-size: var(--t-lg);
  line-height: 1.35;
  letter-spacing: -0.005em;
  font-weight: 500;
  display: grid;
  grid-template-columns: 1.1rem 1fr;
  column-gap: 0.75rem;
  row-gap: 0.3rem;
  align-items: baseline;
}
.problems li::before {
  content: "";
  width: 0.5rem; height: 0.5rem;
  background: var(--signal);
  transform: translateY(-0.1em);
}
.problems small { grid-column: 2; display: block; font-size: var(--t-sm); font-weight: 400; color: var(--ink-2); line-height: 1.5; max-width: 40ch; }

/* ---------- Work / plates ---------- */
.work-note {
  margin-bottom: 2rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--signal);
  font-size: var(--t-sm);
  color: var(--ink-2);
  max-width: var(--measure);
}
.work {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.work article a { display: block; }
.work h3 {
  margin: 1rem 0 0.35rem;
  font-size: var(--t-base);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.3;
}
.work h3 .arrow { color: var(--cobalt); }
.work p { color: var(--ink-2); font-size: var(--t-sm); line-height: 1.55; }
.work dl {
  margin: 0.85rem 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1rem;
  row-gap: 0.15rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.work dt { text-transform: uppercase; letter-spacing: 0.08em; }
.work dd { margin: 0; color: var(--ink-2); }
.work article a:hover h3 { text-decoration: underline; text-decoration-color: var(--cobalt); text-underline-offset: 0.2em; }

/* Placeholder plate: fine drafting grid, registration marks, mono note.
   Replace the whole <figure class="plate"> with a real <figure><img></figure>. */
.plate {
  margin: 0;
  position: relative;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--rule);
  background-color: #fbfbfc;
  background-image:
    linear-gradient(var(--grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center;
  overflow: hidden;
}
.plate.wide { aspect-ratio: 16 / 7; }
.plate::before, .plate::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border-color: var(--ink-3); border-style: solid;
}
.plate::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.plate::after  { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }
.plate figcaption {
  position: absolute; inset: auto 1rem 1rem 1rem;
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
  color: var(--ink-3);
  line-height: 1.5;
  max-width: 34ch;
}
.plate figcaption b { color: var(--signal); font-weight: 500; letter-spacing: 0.08em; }
.plate .mark {
  position: absolute; top: 1rem; right: 1rem;
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--ink-3);
  background:
    linear-gradient(var(--ink-3), var(--ink-3)) center / 100% 1px no-repeat,
    linear-gradient(var(--ink-3), var(--ink-3)) center / 1px 100% no-repeat;
}

/* Real image figures (used once photography exists) */
figure.photo { margin: 0; }
figure.photo img { width: 100%; height: auto; border: 1px solid var(--rule); }
figure.photo figcaption { margin-top: 0.6rem; font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.04em; color: var(--ink-3); line-height: 1.5; }

/* ---------- Begin (cobalt field) ---------- */
.begin {
  background: var(--cobalt);
  color: var(--cobalt-ink);
  padding-block: clamp(3.5rem, 10vh, 7rem);
}
.begin .section-head { margin-bottom: 2rem; }
.begin .mono { color: rgba(255,255,255,0.72); }
.begin h2 {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 125%;
  font-variation-settings: "wdth" 125, "wght" 900;
  text-transform: uppercase;
  font-size: clamp(2rem, 1.2rem + 4.5vw, 5.25rem);
  line-height: 0.95;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}
.begin .grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.begin p { color: rgba(255,255,255,0.9); max-width: 46ch; }
.begin .email {
  display: inline-block;
  margin-top: 1.5rem;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 100, "wght" 800;
  font-size: var(--t-lg);
  letter-spacing: -0.01em;
  border-bottom: 2px solid rgba(255,255,255,0.6);
  padding-bottom: 0.1em;
}
.begin .email:hover { border-color: #fff; }
.begin ol {
  margin: 0; padding: 0; list-style: none;
  border-top: 1px solid rgba(255,255,255,0.35);
}
.begin ol li {
  padding: 0.8rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.35);
  display: grid; grid-template-columns: 2.5rem 1fr; gap: 0.5rem;
  font-size: var(--t-sm);
}
.begin ol .n { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.08em; color: rgba(255,255,255,0.72); padding-top: 0.2em; }
.begin .addr { margin-top: 2rem; font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255,255,255,0.72); line-height: 1.8; }

/* ---------- Footer ---------- */
.footer {
  padding-block: 2rem 3rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem;
}
.footer .mono { text-transform: none; letter-spacing: 0.02em; }
.footer nav { display: flex; gap: 1.5rem; }
.footer nav a { color: var(--ink-2); font-size: var(--t-sm); }
.footer nav a:hover { color: var(--cobalt); }

/* ---------- Case study page ---------- */
.case-head { padding-block: clamp(2rem, 6vh, 4rem) clamp(2rem, 5vh, 3rem); }
.case-head .mono { display: block; margin-bottom: 1rem; }
.case-head h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-variation-settings: "wdth" 100, "wght" 800;
  font-size: clamp(1.75rem, 1.1rem + 3vw, 3.75rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 18ch;
  text-wrap: balance;
}
.case-head h1 .arrow { color: var(--cobalt); }
.spec {
  margin: 2rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  border-top: 1px solid var(--ink);
}
.spec > div { padding: 0.75rem 1rem 0.9rem 0; border-bottom: 1px solid var(--rule); }
.spec dt { font-family: var(--mono); font-size: var(--t-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); }
.spec dd { margin: 0.2rem 0 0; font-size: var(--t-sm); font-variant-numeric: tabular-nums; }
.case-body { display: grid; gap: clamp(2.5rem, 6vh, 4.5rem); padding-block: clamp(2rem, 5vh, 3.5rem) clamp(3rem, 8vh, 6rem); }
.case-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem 3rem;
}
@media (min-width: 900px) { .case-row { grid-template-columns: 220px minmax(0, 1fr); } }
.case-row h2 { margin: 0; font-size: var(--t-base); font-weight: 600; }
.case-row .mono { display: block; margin-bottom: 0.35rem; }
.plates-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.deviation {
  margin-top: 1.5rem;
  border-top: 1px solid var(--ink);
  font-family: var(--mono);
  font-size: var(--t-xs);
  letter-spacing: 0.02em;
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.deviation th, .deviation td { text-align: left; padding: 0.55rem 0.75rem 0.55rem 0; border-bottom: 1px solid var(--rule); }
.deviation th { text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 500; }
.table-scroll { overflow-x: auto; }
.back { display: inline-block; margin-top: 0.5rem; }
.back .arrow { color: var(--cobalt); }

/* Visually hidden (accessible name for the SVG-free h1 markup) */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Photo figures inside the work grid crop to one shared aspect so the row lines up */
.work figure.photo img { aspect-ratio: 1.833; object-fit: cover; background: #f4f5f7; }
.plates-2 figure.photo img { aspect-ratio: 1.833; object-fit: cover; }
figure.photo.wide img { width: 100%; }