/* ------------------------------------------------------------------
   TEEARCH - about page

   Hand-written, loaded AFTER styles.css and only by about.html. It is
   not generated by Tailwind and Tailwind never needs to run for it.

   The palette, the type and the voice are the home page's. The FORM is
   deliberately not: where the home page is a bento of rounded tiles on
   soft shadow, this page is a dossier - full-bleed images, hairline
   rules, a mono index column, an ink ledger band, and almost no cards.
   Every value below is read from the brand tokens that styles.css
   already publishes on :root, so the two pages cannot drift apart.
------------------------------------------------------------------ */

/* -------------------------------------------------------- full bleed */

/* Escape the shell and run to both screen edges. body has overflow-x:
   clip, so 100vw cannot open a horizontal scrollbar. */
.bleed {
  margin-inline: calc(50% - 50vw);
  width: 100vw;
}

/* ------------------------------------------------------------- type */

/* The masthead h1 uses the home page's own `text-display` size from
   styles.css, so both heroes set at the same scale. Only the section
   headings below need a size of their own. */
.display-md {
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--color-ink);
}

.numeral {
  font-family: var(--font-mono);
  font-size: clamp(2.5rem, 5.2vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

/* The serif italic accent, same role as on the home page. */
.accent {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--color-brass);
}

/* ------------------------------------------------------- rules & meta */

/* Eyebrow sitting on its own rule, the page's repeating section marker. */
.marker {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  border-top: 1px solid var(--color-ink);
  padding-top: 1rem;
}
.marker > span:first-child {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--color-brass);
}

/* At the top of the page the marker keeps the pair of labels but drops
   the rule above them - there is nothing yet for a rule to divide. It
   sits left like every other hero on the site; only the home page
   centres its opening block. */
.marker-masthead {
  justify-content: flex-start;
  border-top: 0;
  padding-top: 0;
}

/* Mono facts strung along a hairline under the masthead. */
.meta {
  display: grid;
  gap: 0;
  border-top: 1px solid var(--color-line);
}
.meta > div {
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--color-line);
}
.meta dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-muted-2);
}
.meta dd {
  margin: 0.5rem 0 0;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--color-ink);
}

@media (min-width: 768px) {
  .meta {
    grid-template-columns: repeat(3, 1fr);
    column-gap: 2.5rem;
  }
  .meta > div { border-bottom: 0; }
  .meta > div + div {
    border-left: 1px solid var(--color-line);
    padding-left: 2.5rem;
  }
}

/* --------------------------------------------------------- ink ledger */

/* The four figures, full width, divided by hairlines rather than boxed
   into cards. Dark so it reads as a rule across the page, not a row of
   tiles. */
.ledger {
  background: var(--color-ink);
  color: var(--color-paper);
}
.ledger-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}
.ledger-cell {
  padding: 2.25rem 0;
  border-top: 1px solid rgba(250, 246, 238, 0.14);
}
.ledger-cell:nth-child(odd) { padding-right: 1.5rem; }
.ledger-cell:nth-child(even) {
  padding-left: 1.5rem;
  border-left: 1px solid rgba(250, 246, 238, 0.14);
}
.ledger-cell .numeral {
  margin: 0;
  color: var(--color-amber);
}
/* the caption under the figure - kept off `p` so it cannot outrank .numeral */
.ledger-label {
  margin: 1rem 0 0;
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, 0.55);
}

@media (min-width: 900px) {
  .ledger-grid { grid-template-columns: repeat(4, 1fr); }
  .ledger-cell {
    padding: 3.5rem 0 3.5rem 2.5rem;
    border-top: 0;
    border-left: 1px solid rgba(250, 246, 238, 0.14);
  }
  .ledger-cell:first-child { border-left: 0; padding-left: 0; }
  .ledger-cell:nth-child(odd) { padding-right: 0; }
}

/* --------------------------------------------------------- dossier list */

/* The seven points. A numbered index column and a hairline between each
   row - no tile, no shadow, no hover lift. */
.dossier { list-style: none; margin: 0; padding: 0; }
.dossier > li {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  align-items: start;
  gap: 0 1.25rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--color-line);
}
.dossier > li:last-child { border-bottom: 1px solid var(--color-line); }
.dossier .idx {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.12em;
  color: var(--color-brass);
  padding-top: 0.35em;
}
.dossier p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-ink);
}

@media (min-width: 768px) {
  .dossier > li { grid-template-columns: 3.5rem 1fr; padding: 1.75rem 0; }
  .dossier p { font-size: 1.125rem; }
}

/* ------------------------------------------------------ people spread */

/* A director occupies the full width: portrait in a tall column that
   bleeds to the page edge, credentials set as a plain hairline list. */
/* The portrait column is taller than the text column, so the gap between
   two directors has to be set here rather than left to a utility. */
.spreads > * + * { margin-top: 5rem; }
@media (min-width: 900px) { .spreads > * + * { margin-top: 7rem; } }

.spread { display: grid; gap: 2rem; }
.spread-figure {
  position: relative;
  margin: 0;
  background: var(--color-paper-3);
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.spread-figure img {
  position: absolute;
  inset: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: top;
}
.spread-figure figcaption {
  position: absolute;
  left: 0;
  bottom: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.75rem 1.25rem;
}

/* The space above the list is set HERE, not with a Tailwind mt- class
   in the markup. Tailwind v4 publishes its utilities inside
   @layer utilities, and unlayered CSS beats a layer whatever the source
   order - so this rule's `margin` silently threw away the mt-8 the
   markup was asking for and the first rule sat flush against the
   paragraph above it. */
.credits { list-style: none; margin: 2.5rem 0 0; padding: 0; }
.credits > li {
  padding: 0.875rem 0;
  border-top: 1px solid var(--color-line);
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--color-muted);
}
.credits > li:last-child { border-bottom: 1px solid var(--color-line); }

@media (min-width: 900px) {
  .spread {
    grid-template-columns: 5fr 7fr;
    gap: 3.5rem;
    align-items: start;
  }
  .spread-figure { aspect-ratio: 3 / 4; }
  /* second director mirrors, so the two portraits sit on opposite edges */
  .spread-alt { grid-template-columns: 7fr 5fr; }
  .spread-alt .spread-body { order: 1; }
  .spread-alt .spread-figure { order: 2; }
  /* Two columns of credentials, each line sitting on its own rule. The
     gap has to be wide enough that the end of a line in the left column
     and the start of one in the right cannot be read as a single line -
     40px was not. 72px is, and it is also the widest it can go before
     entries start wrapping. It scales with the viewport so the extra
     space is only taken where there is room to take it: the columns are
     already tight at 1100px and stealing another 30px from them there
     would buy air at the cost of half the list wrapping. */
  .credits { columns: 2; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
  .credits > li { break-inside: avoid; }
}

/* ---------------------------------------------------------- logo grid */

/* The partner logos held still in a ruled grid. The marquee belongs to
   the home page; here they are a register, not a ticker.

   On a phone a 2-column register runs to fifteen rows of dead space, so
   below 640px it turns on its side instead: two rows deep, scrolling
   horizontally. The frame is drawn on the container, so it stays put
   while the cells move inside it - unlike the home page's .rail, which
   bleeds to the screen edge. A register should keep its edges. */
.logo-grid {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
  grid-auto-columns: 11rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-top: 1px solid var(--color-line);
  border-left: 1px solid var(--color-line);
}
.logo-grid::-webkit-scrollbar { display: none; }

.logo-grid > div {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1rem;
  min-height: 7rem;
  border-right: 1px solid var(--color-line);
  border-bottom: 1px solid var(--color-line);
  scroll-snap-align: start;
}
/* Capped on both axes so a wide wordmark and a tall crest end up
   optically similar despite very different source artwork. */
.logo-grid img {
  max-height: 2.5rem;
  width: auto;
  max-width: 9rem;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.4s var(--ease-out-soft), opacity 0.4s var(--ease-out-soft);
}
.logo-grid > div:hover img { filter: none; opacity: 1; }

/* 26 logos leaves a ragged last row. Four blank cells take the count to
   30, which divides evenly at 2, 3 and 5 columns, so the register stays a
   rectangle at every breakpoint. They inherit the cell rules above and
   need nothing of their own beyond being findable. */
.logo-fill { }

/* From 640px up there is room to lay the register out flat again. */
@media (min-width: 640px) {
  .logo-grid {
    grid-auto-flow: row;
    grid-template-rows: none;
    grid-auto-columns: auto;
    grid-template-columns: repeat(3, 1fr);
    overflow-x: visible;
    scroll-snap-type: none;
  }
}
@media (min-width: 900px) { .logo-grid { grid-template-columns: repeat(5, 1fr); } }

/* -------------------------------------------------------- closing band */

.closing {
  background: var(--color-ink);
  color: var(--color-paper);
}
/* Only the plain links in the contact column go amber. The buttons carry
   their own colours from styles.css and must not be overridden here. */
.contact-list a { color: var(--color-amber); }
.contact-list a:hover { color: var(--color-amber-lift); }

.contact-list { list-style: none; margin: 0; padding: 0; }
.contact-list > li {
  padding: 1.25rem 0;
  border-top: 1px solid rgba(250, 246, 238, 0.14);
}
.contact-list dt {
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(250, 246, 238, 0.5);
}
.contact-list dd {
  margin: 0.5rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: rgba(250, 246, 238, 0.85);
}

/* Reveals reuse the home page's .reveal contract - app.js adds .is-in. */