/* =========================================================================
   Shoti — the about page.

   The founders row, moved off the landing page. It is the same drawing it
   was there — one row of four boxes at 4:5, three portraits and the mark on
   its own plate, one border weight across all four — because the row was
   never the problem: the homepage was the wrong place for it. Here it is the
   subject, so it gets room above and below it rather than a slot between the
   argument and the essays.

   Loads after styles.css and chrome.css, like every page that is not the
   landing page. metal.js draws the plate; the baked still stands until it
   reports it is drawing.
   ========================================================================= */

.about-founders {
  position: relative;
  z-index: 10;
  background: var(--fx-black);
  padding: max(56px, calc(88 / 1440 * 100vw)) var(--fx-edge)
           max(88px, calc(128 / 1440 * 100vw));
}

/* Centred, and the only centred heading on the page below the hero — which is
   what makes it read as an interruption in the argument rather than the next
   step in it. */
.about-founders__head {
  max-width: 62ch;
  margin: 0 auto max(48px, calc(72 / 1440 * 100vw));
  text-align: center;
}
.about-founders__title {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 38px);
  line-height: 1.24;
  font-weight: 400;
  letter-spacing: -0.022em;
  color: var(--fx-off-white);
  text-wrap: balance;
}
.about-founders__sub {
  margin: var(--fx-space-sm) auto 0;
  max-width: 54ch;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fx-smoke);
  text-wrap: pretty;
}


/* ------------------------------------------------------------- the page */

body.about {
  background: var(--fx-black);
  color: var(--fx-off-white);
  min-height: 100dvh;
}

/* styles.css frames <main> as the essays' bordered 728px reading column. This
   page is a full-bleed row of four, not a column of prose, so it unwinds that
   the same way the landing page does — and then takes the pill's clearance and
   its own air above the row, which is the point of giving the founders a page
   rather than a slot. */
.about-wrap {
  background: transparent;
  border: 0;
  max-width: none;
  margin: 0;
  min-height: 0;
  padding: max(120px, calc(168 / 1440 * 100vw)) 0 0;
}

/* One rhythm down the page. Each block owns the gap BELOW itself and nothing
   above, so the spacing between them is one number rather than the sum of two
   paddings that were set independently — which is what it was: 128px between
   the row and the argument, 236px between the argument and the questions, and
   the questions ending flush against the footer.

   The literal is repeated rather than named because a custom property here
   would be a design token declared outside tokens.css, and verify-site fails
   that on purpose. */
.about-founders {
  padding-top: 0;
  padding-bottom: max(72px, calc(112 / 1440 * 100vw));
}

/* --------------------------------------------------------- the closing */

.about-more {
  max-width: 62ch;
  margin: 0 auto;
  padding: 0 var(--fx-edge) max(72px, calc(112 / 1440 * 100vw));
  text-align: center;
}

.about-more__title {
  margin: 0 0 var(--fx-space-md);
  font-size: clamp(19px, 1.85vw, 26px);
  line-height: 1.38;
  font-weight: 300;
  letter-spacing: -0.014em;
  color: var(--fx-off-white);
  text-wrap: balance;
}

.about-more__body {
  margin: 0 0 var(--fx-space-sm);
  font-size: 15px;
  line-height: 1.65;
  color: var(--fx-smoke);
  text-wrap: pretty;
}

.about-more__body a {
  color: var(--fx-off-white);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
.about-more__body a:hover {
  text-decoration-color: currentColor;
}

/* ------------------------------------------------------------- questions */

/* Native <details>, not a scripted accordion: it opens without JavaScript, it
   is keyboard-operable and announced correctly for free, and the browser's
   find-in-page can reach closed answers. The first one stands open so the
   block reads as prose rather than as a row of closed doors.

   ONE ANSWER AT A TIME, AND STILL NO SCRIPT. Every item carries name="faq",
   which is the platform's own exclusive accordion: opening one closes the
   rest, and the browser does the closing. Six answers open at once pushed the
   questions a screen apart and the list stopped reading as a list. On a
   browser too old for the attribute the group simply behaves as it did — all
   of them can stand open — which is the right way for this to degrade. */
.faq {
  max-width: 68ch;
  margin: 0 auto;
  padding: 0 var(--fx-edge) max(72px, calc(112 / 1440 * 100vw));
}

.faq__title {
  margin: 0 0 var(--fx-space-md);
  font-size: clamp(19px, 1.85vw, 26px);
  line-height: 1.38;
  font-weight: 300;
  letter-spacing: -0.014em;
  color: var(--fx-off-white);
  text-align: center;
}

.faq__list {
  border-top: 1px solid var(--fx-line);
}

.faq__item {
  border-bottom: 1px solid var(--fx-line);
}

.faq__q {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  padding: var(--s-5) 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--fx-off-white);
  cursor: pointer;
  list-style: none;          /* the default marker, replaced below */
  text-wrap: pretty;
}
.faq__q::-webkit-details-marker { display: none; }

/* The marker is the page's own mono voice, and it rotates rather than swapping
   glyphs — one character, one transform, no layout change on open. */
.faq__q::before {
  content: "+";
  flex: 0 0 auto;
  width: 1ch;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--fx-orange);
  transition: transform 200ms var(--fx-ease);
}
.faq__item[open] .faq__q::before {
  transform: rotate(45deg);  /* a plus becomes a cross */
}

.faq__q:hover {
  color: var(--fx-off-white);
}
.faq__item:hover .faq__q { opacity: 0.86; }

.faq__a {
  padding: 0 0 var(--s-5) calc(1ch + var(--s-3));
}
.faq__a p {
  margin: 0;
  max-width: 62ch;
  font-size: 14px;
  line-height: 1.65;
  color: var(--fx-smoke);
  text-wrap: pretty;
}

@media (prefers-reduced-motion: reduce) {
  .faq__q::before { transition: none; }
}