/* ============================================================================
 *  sections.css — EVERY SECTION EXCEPT THE TITLE SCREEN
 *  ---------------------------------------------------------------------------
 *  Loaded after scenes.css, and it deliberately shares none of its vocabulary.
 *  The hero is untouched — the nameplate, the band, the pills and the loader
 *  hand-off are all still scenes.css. Everything below it is this file.
 *
 *  WHAT CHANGED, AND WHY
 *
 *    NINE SECTIONS BECAME FIVE. Studying, Building with and Listing on were a
 *    screen each carrying about twenty words. The two archived storefronts, the
 *    TREASURES intro and "where to find it" were four screens telling one
 *    story. New World Systems and New World OS were a screen each for a company
 *    and its own product. Every one of those was a full viewport holding a
 *    paragraph, which is what made the page feel like it was padding.
 *
 *    ONE COMPOSITION, USED FOUR TIMES. A quiet label, then the content, in a
 *    column that starts at the left edge of the measure and stops well before
 *    the right. No section invents a layout of its own, so moving between them
 *    feels like reading rather than like being presented to.
 *
 *    THE ROW IS THE ONLY REPEATING OBJECT. Date, name, one line, the links.
 *    Ventures and projects are the same kind of thing and are set identically —
 *    the only difference between a live one and a closed one is that the live
 *    one's date is gold.
 *
 *    NOTHING IS CENTRED, NOTHING IS BOXED. No card, no panel, no halo, no
 *    plate, no drifting mark, no brand logo. On a starfield the quietest
 *    possible type is the strongest thing you can do.
 * ========================================================================== */

/* ---------------------------------------------------------------------------
 *  THE PANEL — the one composition
 *  `.scene--commerce-intro` (scenes.css) centres its child and applies the
 *  camera transform. This only decides what that child is.
 * ------------------------------------------------------------------------- */
.panel__in {
  width: min(100%, 1080px);
  display: grid;
  gap: clamp(22px, 4vh, 44px);
  justify-items: start;
}

/* the small line that names a section. There is no number beside it and no
   rule under it — it is a label, not a chapter heading. */
.panel__label {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* ABOUT is the only section set at reading size, because it is the only one
   that is a sentence rather than a list. */
.panel__lede {
  max-width: 20ch;
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 72, "wght" 800;
  font-weight: 400;
  font-size: clamp(30px, 5vw, 76px);
  line-height: 0.94;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  color: var(--ink);
}
.panel__body {
  max-width: 54ch;
  margin: 0;
  font-family: var(--prose);
  font-size: var(--prose-size);
  line-height: var(--prose-lead);
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
 *  THE LIST — ventures and projects, identically
 * ------------------------------------------------------------------------- */
.list {
  display: grid;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.list__row {
  display: grid;
  grid-template-columns: 10rem minmax(0, 1fr);
  gap: 6px clamp(18px, 3vw, 48px);
  align-items: baseline;
  padding-block: clamp(18px, 3vh, 34px);
  border-top: var(--hair) solid var(--ink-line-faint);
}
.list__row:first-child { border-top: 0; padding-top: 0; }

.list__when {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  font-family: var(--mono);
  font-size: var(--meta-size);
  letter-spacing: var(--meta-track);
  color: var(--ink-dim);
}
/* the only colour in the section, and it means one thing */
.list__row--live .list__when { color: var(--signal); }

.list__name {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  font-family: var(--display);
  font-variation-settings: "wdth" 74, "wght" 780;
  font-weight: 400;
  font-size: clamp(24px, 3.4vw, 48px);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ink);
}
.list__note {
  grid-column: 2;
  max-width: 52ch;
  margin: 10px 0 0;
  font-family: var(--prose);
  font-size: clamp(14px, 1.15vw, 18px);
  line-height: 1.5;
  color: var(--ink-soft);
}
.list__go {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(16px, 2.2vw, 30px);
  margin: 14px 0 0;
}
.list__go a {
  padding-bottom: 3px;
  border-bottom: var(--hair) solid var(--ink-line);
  font-family: var(--mono);
  font-size: var(--action-size);
  letter-spacing: var(--action-track);
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.list__go a:hover,
.list__go a:focus-visible { color: var(--signal); border-bottom-color: var(--signal); }

/* ---------------------------------------------------------------------------
 *  THE COLUMNS — three short lists of names on one screen
 *  This is three former sections. They are set at meta size and stacked tight,
 *  because a list of tool names is scanned, not read.
 * ------------------------------------------------------------------------- */
.cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(24px, 4vw, 70px);
  width: 100%;
}
.cols__col { display: grid; gap: 14px; align-content: start; }
.cols__head {
  margin: 0;
  padding-bottom: 10px;
  border-bottom: var(--hair) solid var(--ink-line);
  font-family: var(--mono);
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-track);
  text-transform: uppercase;
  color: var(--ink-dim);
}
.cols__list { display: grid; gap: 5px; margin: 0; padding: 0; list-style: none; }
.cols__list li {
  font-family: var(--mono);
  font-size: var(--meta-size);
  letter-spacing: 0.06em;
  color: var(--ink-soft);
}

/* ---------------------------------------------------------------------------
 *  THE BAR'S NAME — what the rotating statement used to occupy
 * ------------------------------------------------------------------------- */
.chrome__name {
  margin: 0;
  font-family: var(--mono);
  font-size: var(--meta-size);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 *  NARROW — the date stops being a column of its own
 * ------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .list__row { grid-template-columns: minmax(0, 1fr); }
  .list__when, .list__name, .list__note, .list__go { grid-column: 1; }
  .list__when { grid-row: auto; }
  .list__name { grid-row: auto; margin-top: 4px; }
}