/* ============================================================
   About page
   ABOUT-CONTACT-HANDOFF + About.dc.html.

   Values here are taken from the comp's computed styles, not
   estimated from the design tokens. The comp sets display type
   at weight 900 UPPERCASE with tight negative tracking, which is
   noticeably heavier and larger than --text-* would suggest, and
   it uses IBM Plex Mono for every number. Matching the tokens
   instead of the comp produced headings a third too small in
   mixed case, so the literals below are deliberate.

   Reference (1280px viewport, 1200px content):
     h1                3.52rem / 0.98 / -0.028em / 900 / upper
     h2 story, joe     2.30rem / 1.02 / -0.026em / 900 / upper
     h2 materials, ms  2.40rem / 1.00 / -0.026em / 900 / upper
     h3 material       1.50rem / normal / -0.018em / 800 / upper
     h3 milestone      1.55rem / 1.10 / -0.022em / 900 / upper
     body copy         1.12rem / 1.68
     eyebrow           12px mono / 0.18em / upper / amber-400
     figures           IBM Plex Mono 600, amber-400

   Breakpoints follow the handoff: 1000px collapses the two-column
   blocks, 760px is the phone pass.
   ============================================================ */

/* Shared photography slot. The comps use <image-slot>; here it is a real box
   that either holds an image or says a photo is coming, because these boxes
   carry the layout and must not collapse. */
.osj-slot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: #F3EDE1;
  border: 1px solid #E7DECE;
}
.osj-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.osj-slot__empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--sand-500);
}
[data-theme="dark"] .osj-slot { background: var(--ink-800); border-color: var(--border-on-dark-soft); }

/* The dark-band trap, once, for the whole page. The design system sets
   h1-h6 { color: var(--text-strong) }, which beats inherited colour, so every
   heading on an ink band would render ink-on-ink without this. */
.osj-about [data-theme="dark"] h1,
.osj-about [data-theme="dark"] h2,
.osj-about [data-theme="dark"] h3 { color: var(--sand-50); }

/* Every display heading on the page. Uppercase Archivo 900 is the look; the
   comp never renders a heading in mixed case. */
.osj-about h1,
.osj-about h2,
.osj-about h3 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  text-wrap: pretty;
}

.osj-eyebrow {
  margin: 0 0 var(--space-3);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber-400);
}
.osj-eyebrow--light { color: var(--amber-link); }

/* ---------- Hero ---------- */
.osj-about-hero {
  background: radial-gradient(120% 150% at 8% 0%, var(--ink-700) 0%, var(--ink-900) 52%, var(--ink-950) 100%);
  color: var(--sand-50);
}
.osj-about-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
  padding-block: 88px 96px;
}
.osj-about-hero .osj-eyebrow { margin-bottom: 20px; }
.osj-about-hero h1 {
  margin: 0 0 24px;
  font-size: clamp(2.6rem, 4.4vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: -0.028em;
  max-width: 17ch;
}
.osj-about-hero__intro {
  max-width: 46ch;
  margin: 0 0 32px;
  color: var(--text-on-dark-body);
  font-size: 1.12rem;
  line-height: 1.62;
}
.osj-about-hero__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 34px;
  margin: 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--border-on-dark-soft);
  list-style: none;
}
.osj-about-hero__stats li { display: block; }
.osj-about-hero__figure {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: 1.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--amber-400);
}
.osj-about-hero__label {
  display: block;
  margin-top: 5px;
  font-size: 13px;
  color: var(--sand-400);
}

/* ---------- Story ---------- */
/* Deviation from the comp, on request: the comp centres this block on a 760px
   measure, which left it visibly narrower than the photo grid directly beneath
   it. It now shares the page's content width so the two line up. Long-form set
   this wide runs past a comfortable line length, so the paragraphs keep their
   own max-width below rather than filling the full 1200px. */
.osj-about-story { background: var(--surface-page); padding-block: 88px 20px; }
/* Width and gutter come from .osj-container on the element itself, so the
   20px -> 40px gutter change at 761px is tracked in one place. */
.osj-about-story .osj-eyebrow { margin-bottom: 16px; }
.osj-about-story h2 {
  margin: 0 0 28px;
  font-size: 2.3rem;
  line-height: 1.02;
  letter-spacing: -0.026em;
  max-width: 22ch;
  color: var(--text-strong);
}
/* Full content width, on request: the paragraphs sit flush with the quote
   block and the photo grid below them. No max-width.

   Leading and paragraph spacing are set for that measure rather than the
   comp's. At ~164 characters a line the eye has a long way to travel back to
   the start of the next one, so the comp's 1.68 leading and 20px paragraph gap
   (both tuned for a 760px measure) leave the breaks barely visible and the
   section reads as one slab. More air between lines, and a paragraph gap
   clearly larger than the line gap, is what separates them again. */
.osj-about-story p {
  margin: 0 0 30px;
  font-size: 1.12rem;
  line-height: 1.85;
  color: #3A3225;
}
.osj-about-story > .osj-about-story__inner > p:last-child { margin-bottom: 0; }
.osj-about-story__quote {
  margin: 40px 0;
  padding: 28px 32px;
  border-left: 3px solid var(--amber-500);
  background: #F3EDE1;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.osj-about-story__quote p {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 1.32rem;
  line-height: 1.34;
  letter-spacing: -0.015em;
  color: var(--text-strong);
}

/* ---------- Three photos ---------- */
.osj-about-photos { background: var(--surface-page); padding-block: 56px 88px; }
.osj-about-photos__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }

/* ---------- Metrics ---------- */
.osj-about-metrics {
  background: linear-gradient(180deg, var(--ink-900) 0%, #1B160E 100%);
  color: var(--sand-50);
  padding-block: 76px 84px;
}
/* Centred, on request. The comp left-aligns these cells; four centred columns
   read as a row of cards instead, which is what was wanted here. */
.osj-about-metrics__grid {
  text-align: center;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  /* Block-axis only, both of them. This element is also .osj-container, so a
     `margin: 0` shorthand kills its margin-inline: auto and a `padding: 0`
     kills its gutter. Neither shows below 1320px, where the container is full
     width anyway; past it the band alone jumps to the left edge with all the
     slack on the right while every other band stays centred. Resetting the
     list defaults has to stay on the block axis. */
  margin-block: 0;
  padding-block: 0;
  list-style: none;
}
.osj-about-metrics__figure {
  display: block;
  font-family: var(--font-mono);
  font-weight: var(--weight-semibold);
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--amber-400);
}
.osj-about-metrics__label {
  display: block;
  margin: 12px 0 6px;
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 14px;
  line-height: normal;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sand-50);
}
.osj-about-metrics p { margin: 0 auto; max-width: 30ch; font-size: 13.5px; line-height: 1.5; color: var(--sand-400); }

/* ---------- Materials tabs ---------- */
.osj-about-materials { background: var(--ink-900); color: var(--sand-50); padding-block: 88px 96px; }
.osj-about-materials .osj-eyebrow { margin-bottom: 14px; }
.osj-about-materials h2 {
  margin: 0 0 44px;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.026em;
  max-width: 20ch;
}

.osj-about-materials__tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.osj-about-materials__tab {
  display: flex;
  flex-direction: column;
  padding: 20px 22px;
  text-align: left;
  background: #181309;
  border: 1px solid rgba(230, 182, 92, 0.18);
  border-radius: var(--radius-md);
  color: var(--sand-200);
  cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out),
              background var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.osj-about-materials__tab:hover { transform: translateY(-2px); }
.osj-about-materials__tab:active { transform: translateY(1px); }
.osj-about-materials__tab[aria-selected="true"] {
  background: var(--ink-700);
  border-color: var(--amber-500);
}
.osj-about-materials__num {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-400);
}
.osj-about-materials__title {
  margin-bottom: 5px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  line-height: normal;
  letter-spacing: -0.012em;
  text-transform: uppercase;
  color: var(--sand-50);
}
.osj-about-materials__summary { font-size: 13.5px; line-height: 1.45; color: var(--sand-400); }

/* Image left, copy right, flush. The handoff is explicit that the two columns
   sit with no gap, and that the single-column form below 1000px keeps zero gap
   so the image butts against the copy. */
.osj-about-materials__panel {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid rgba(230, 182, 92, 0.18);
  border-radius: var(--radius-lg);
  background: #181309;
}
.osj-about-materials__panel[data-osj-tab-inactive] { display: none; }
/* No JS: every panel shows, stacked, and the tab strip stays hidden. */
html.no-js .osj-about-materials__tabs { display: none; }
html.no-js .osj-about-materials__panel { display: grid; margin-bottom: var(--space-4); }

/* The image window fills the panel, whose height comes from the copy column.
   Not an aspect ratio: pinning one made a 674px-tall portrait slot where the
   comp has a 384px landscape window, which changed the whole section's
   proportions. */
.osj-about-materials__media {
  height: 100%;
  min-height: 320px;
  border: 0;
  border-radius: 0;
}
.osj-about-materials__copy { padding: 40px 42px 44px; }
.osj-about-materials__copy .osj-eyebrow { font-size: 11.5px; margin-bottom: 10px; }
.osj-about-materials__copy h3 {
  margin: 0 0 16px;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: normal;
  letter-spacing: -0.018em;
}
.osj-about-materials__copy p { margin: 0 0 16px; font-size: 15.5px; line-height: 1.62; color: var(--sand-300); }
/* No rule above it and no padding: the comp's note is a bare 12px line, and
   the 20px gap comes from the preceding paragraph. Adding a divider here made
   the note 38px tall instead of 15px and the whole panel 21px taller than the
   design. */
.osj-about-materials__note {
  margin: 4px 0 0 !important;
  padding-top: 0;
  border-top: 0;
  font-family: var(--font-mono);
  font-size: 12px !important;
  line-height: normal;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--sand-500) !important;
}

/* ---------- Milestones ---------- */
.osj-about-timeline { background: var(--surface-page); padding-block: 88px; }
.osj-about-timeline .osj-eyebrow { margin-bottom: 14px; }
.osj-about-timeline h2 {
  margin: 0 0 44px;
  font-size: 2.4rem;
  line-height: 1;
  letter-spacing: -0.026em;
  color: var(--text-strong);
}

.osj-about-timeline__rail {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  /* The dots scale to 1.35 on hover and overflow-x clips anything taller than
     the box, so the rail reserves room above them. The line below offsets by
     the same amount; change one and change the other. */
  padding-top: 12px;
  padding-bottom: var(--space-4);
  margin-bottom: 28px;
}
.osj-about-timeline__line {
  position: absolute;
  left: 0;
  right: 0;
  /* padding-top (12) + half the dot (7) */
  top: 19px;
  height: 1px;
  background: #DCD0BB;
}
.osj-about-timeline__node {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  /* 44px minimum target, per the handoff's accessibility section. */
  min-width: 64px;
  min-height: 44px;
  padding: 0 var(--space-2);
  background: none;
  border: 0;
  cursor: pointer;
}
.osj-about-timeline__dot {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-round);
  background: var(--surface-page);
  border: 2px solid #C9BCA4;
  /* A ring in the page colour masks the line so the dot reads as a node. */
  box-shadow: 0 0 0 5px var(--surface-page);
  transition: transform var(--dur-fast) var(--ease-out);
}
.osj-about-timeline__node:hover .osj-about-timeline__dot { transform: scale(1.35); }
.osj-about-timeline__node[data-state="past"] .osj-about-timeline__dot { background: #C9BCA4; border-color: #C9BCA4; }
.osj-about-timeline__node[data-state="current"] .osj-about-timeline__dot { background: var(--amber-500); border-color: var(--amber-link); }
.osj-about-timeline__year { font-size: 12.5px; color: var(--text-muted); white-space: nowrap; }
.osj-about-timeline__node[aria-selected="true"] .osj-about-timeline__year { color: var(--text-strong); font-weight: var(--weight-semibold); }

/* Copy left, counter and arrows in a narrow right column, as the comp has it.
   A footer row underneath reads as a different component. */
.osj-about-timeline__detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: start;
  padding: 38px 40px 40px;
  background: #FFFFFF;
  border: 1px solid #E7DECE;
  border-radius: var(--radius-lg);
}
.osj-about-timeline__card[data-osj-step-inactive] { display: none; }
/* No JS: all nine read as an ordinary dated list. */
html.no-js .osj-about-timeline__card { display: block; border-top: 1px solid rgba(20, 17, 11, 0.08); padding-top: var(--space-4); margin-top: var(--space-4); }
html.no-js .osj-about-timeline__cards > .osj-about-timeline__card:first-child { border-top: 0; padding-top: 0; margin-top: 0; }

.osj-about-timeline__eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber-link);
}
.osj-about-timeline__card h3 {
  margin: 0 0 14px;
  font-size: 1.55rem;
  line-height: 1.1;
  letter-spacing: -0.022em;
  max-width: 30ch;
  color: var(--text-strong);
}
.osj-about-timeline__card p { margin: 0; font-size: 15.5px; line-height: 1.62; color: var(--text-body); }

.osj-about-timeline__controls {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.osj-about-timeline__counter {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}
.osj-about-timeline__arrows { display: flex; gap: 8px; }
.osj-about-timeline__arrows .osj-iconbtn {
  width: 44px;
  height: 44px;
  color: var(--text-strong);
  border-color: rgba(20, 17, 11, 0.16);
}
.osj-about-timeline__arrows .osj-iconbtn:hover { background: var(--sand-200); }

/* ---------- Joe ---------- */
.osj-about-joe { background: var(--ink-900); color: var(--sand-50); padding-block: 88px 96px; }
.osj-about-joe__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: 56px;
  align-items: center;
}
.osj-about-joe h2 {
  margin: 0 0 20px;
  font-size: 2.3rem;
  line-height: 1.02;
  letter-spacing: -0.026em;
  max-width: 18ch;
}
.osj-about-joe p { margin: 0 0 16px; font-size: 1.02rem; line-height: 1.68; color: var(--sand-300); }
.osj-about-joe__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ============================================================
   Tablet
   ============================================================ */
@media (max-width: 1000px) {
  .osj-about-hero__inner { grid-template-columns: 1fr; gap: 40px; padding-block: 64px 72px; }
  .osj-about-hero__media { max-width: 460px; }

  .osj-about-story { padding-block: 64px 20px; }
  .osj-about-photos { padding-block: 40px 64px; }
  .osj-about-photos__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .osj-about-photos__grid > :first-child { grid-column: 1 / -1; }

  .osj-about-metrics { padding-block: 56px 64px; }
  .osj-about-metrics__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }

  .osj-about-materials,
  .osj-about-timeline,
  .osj-about-joe { padding-block: 64px 72px; }

  /* Single column, and the handoff is explicit that it keeps zero gap so the
     image butts against the copy block. */
  .osj-about-materials__panel { grid-template-columns: 1fr; gap: 0; }
  .osj-about-materials__media { min-height: 0; aspect-ratio: 16 / 9; }

  .osj-about-timeline__detail { grid-template-columns: 1fr; gap: 24px; }
  /* Once stacked, the counter and arrows sit on one row under the copy. */
  .osj-about-timeline__controls {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding-top: 20px;
    border-top: 1px solid rgba(20, 17, 11, 0.08);
  }

  .osj-about-joe__inner { grid-template-columns: 1fr; gap: 40px; }
  .osj-about-joe__media { max-width: 340px; }
}

/* ============================================================
   Phone
   ============================================================ */
@media (max-width: 760px) {
  .osj-about-hero__inner { padding-block: 48px 56px; gap: 32px; }
  .osj-about-hero h1 { font-size: clamp(2.1rem, 9vw, 2.8rem); }
  .osj-about-hero__stats { gap: 22px; }
  .osj-about-hero__media { max-width: none; }

  .osj-about-story { padding-block: 56px 16px; }
  .osj-about-story h2 { font-size: 1.85rem; }
  /* Back to the comp's leading on a phone: the generous 1.85 above exists for
     the desktop measure, and at ~50 characters a line it just looks loose. */
  .osj-about-story p { font-size: 1.05rem; line-height: 1.68; margin-bottom: 22px; }
  .osj-about-story__quote { padding: 22px 24px; margin: 28px 0; }
  .osj-about-story__quote p { font-size: 1.15rem; }

  .osj-about-photos { padding-block: 32px 56px; }
  .osj-about-photos__grid { grid-template-columns: 1fr; }
  .osj-about-photos__grid > :first-child { grid-column: auto; }

  .osj-about-metrics { padding-block: 48px 56px; }
  .osj-about-metrics__grid { grid-template-columns: 1fr; gap: 26px; }
  .osj-about-metrics__figure { font-size: 2.2rem; }

  .osj-about-materials,
  .osj-about-timeline,
  .osj-about-joe { padding-block: 56px 64px; }

  .osj-about-materials h2,
  .osj-about-timeline h2 { font-size: 1.9rem; margin-bottom: 28px; }
  .osj-about-joe h2 { font-size: 1.85rem; }

  /* Tabs stack full width below 760px, per the handoff. */
  .osj-about-materials__tabs { grid-template-columns: 1fr; }
  .osj-about-materials__copy { padding: 26px 22px 28px; }
  .osj-about-materials__copy h3 { font-size: 1.3rem; }

  .osj-about-timeline__detail { padding: 26px 22px 28px; }
  .osj-about-timeline__card h3 { font-size: 1.3rem; }

  .osj-about-joe__media { max-width: none; }
  .osj-about-joe__cta .osj-btn { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .osj-about-materials__tab,
  .osj-about-timeline__dot { transition: none; }
  .osj-about-materials__tab:hover,
  .osj-about-materials__tab:active { transform: none; }
  .osj-about-timeline__node:hover .osj-about-timeline__dot { transform: none; }
}