@layer components;

@layer components {
  .exchange {
    margin-block: var(--space-4);
    max-width: var(--measure-read);
  }

  .exchange__speaker {
    margin-bottom: var(--space-1);
    font-size: var(--step-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
  }

  .exchange__speaker b { font-weight: inherit; }

  /* One face throughout; a blockquote is marked by its rule and its size. */
  .exchange__lines blockquote {
    margin-block: var(--space-2);
    padding-left: var(--space-3);
    border-left: 1px solid var(--rule);
    font-size: var(--step-lead);
    line-height: 1.45;
    color: var(--ink);
  }

  /*
   * The case archive still leads with the diagnostic turn: what appeared to be
   * wrong, what was actually happening, what changed. The homepage dropped this
   * treatment when it stopped using uniform cards; this page keeps it, because
   * here the three-part structure is the reason to read on.
   */
  .case-preview {
    margin-block: var(--space-4);
    padding-block-end: var(--space-4);
    border-bottom: 1px solid var(--rule);
  }

  .case-preview h2 { margin-block: var(--space-1) var(--space-2); }

  .case-preview__diagnosis > * + * {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--rule);
  }

  .case-preview__presenting { color: var(--ink-secondary); }
  .case-preview__underlying, .case-preview__changed { color: var(--ink); }

  @media (min-width: 48rem) {
    .case-preview__diagnosis {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0;
    }

    .case-preview__diagnosis > * + * {
      margin-top: 0;
      padding-top: 0;
      padding-left: var(--space-3);
      border-top: 0;
      border-left: 1px solid var(--rule);
    }
  }

  .evidence-note .meta {
    display: block;
    margin-bottom: var(--space-1);
  }

  .marginal__label {
    display: block;
    margin-bottom: var(--space-1);
  }

  @media (min-width: 68rem) {
    .marginal { position: relative; }

    .marginal__label {
      position: absolute;
      right: calc(100% + var(--space-4));
      width: 10rem;
      text-align: right;
    }
  }

  /* The only umber on the site. */
  @media (hover: hover) {
    .cross-site:hover { color: var(--umber); }
  }

  .skip-link {
    position: absolute;
    left: -9999px;
  }

  .skip-link:focus {
    position: static;
    display: inline-block;
    padding: var(--space-1) var(--space-2);
  }

  .site-header {
    padding-block: var(--space-3);
    border-bottom: 1px solid var(--rule);
  }

  .site-header__name a {
    color: var(--ink);
    font-weight: 600;
  }

  .site-header__nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin-top: var(--space-2);
    padding: 0;
    list-style: none;
    font-size: var(--step-meta);
  }

  /* The navigation replaces list semantics entirely, so it also drops the
     long-form `li + li` spacing from base. Without this the first item sits
     higher than the rest, because only the others inherit a top margin. */
  .site-header__nav li + li { margin-top: 0; }

  /* 44px minimum target for standalone navigation. */
  .site-header__nav a {
    display: inline-block;
    padding-block: 0.6rem;
  }

  @media (min-width: 48rem) {
    .site-header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: var(--space-4);
    }

    .site-header__nav ul { margin-top: 0; }
  }

  .site-footer {
    margin-top: var(--space-6);
    padding-block: var(--space-4) var(--space-5);
    border-top: 1px solid var(--rule);
    font-size: var(--step-meta);
  }

  .site-footer p + p { margin-top: var(--space-1); }

  .site-footer a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .episode__header {
    margin-block: var(--space-5) var(--space-4);
  }

  .episode__header h1 { margin-top: var(--space-2); }

  .episode__body > h2 {
    margin-block: var(--space-5) var(--space-3);
  }

  .episode__body > p { margin-block: var(--space-2); }

  .episode__body > ul,
  .episode__body > ol {
    margin-block: var(--space-2);
  }

  .episode__body > blockquote {
    margin-block: var(--space-3);
    padding-left: var(--space-3);
    border-left: 1px solid var(--rule);
    font-size: var(--step-lead);
    line-height: 1.45;
    color: var(--ink);
  }

  .episode__back {
    margin-block: var(--space-5);
    font-size: var(--step-meta);
  }

  .episode__back a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .opening { margin-block: var(--space-5) var(--space-6); }

  .opening__line {
    max-width: var(--measure-orient);
    margin-block: var(--space-2) var(--space-4);
  }

  .opening__episode > * + * { margin-top: var(--space-2); }

  /*
   * Scale contrast, not a card. A short measure is what makes large type read
   * as a statement rather than a banner.
   */
  .featured__title {
    max-width: var(--measure-title);
    font-size: var(--step-h1);
  }

  .featured__title a {
    color: inherit;
    text-decoration-color: var(--ink-secondary);
  }

  @media (hover: hover) {
    .featured__title a:hover { text-decoration-color: currentColor; }
  }

  .featured__mark { max-width: var(--measure-line); }

  /*
   * A list degrades gracefully at any count: one entry looks like a new site,
   * twenty looks like an archive. A grid does neither.
   */
  .episode-list {
    margin-block: var(--space-3);
    padding: 0;
    list-style: none;
  }

  .episode-list li + li { margin-top: 0; }

  .episode-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* On the <li> itself, so it must be block-level or the entries sit side by side. */
  .episode-list__pending {
    display: flex;
    align-items: center;
    min-height: 44px;
  }

  /*
   * Published entries take the darker ink so the list reads as available work
   * first. A coming-soon entry stays at body colour and recedes behind them:
   * the underline says "you can read this", the weight of the ink says which.
   */
  .episode-list a { color: var(--ink); }

  .episode-list__pending { color: var(--ink-secondary); }

  /* Asymmetry is additive and exists only at the wide breakpoint. */
  @media (min-width: 68rem) {
    .opening {
      display: grid;
      grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
      column-gap: var(--space-5);
      align-items: start;
    }

    .opening .meta, .opening__line { grid-column: 1; }
    .opening__episode { grid-column: 2; grid-row: 1 / span 2; }
  }

  /*
   * One treatment for all four. No case is featured, so none of them earns more
   * room than its neighbours — an earlier two-column arrangement gave the first
   * a column of its own and read as lopsided rather than composed. A ruled list
   * is even at any count, and does not have to be re-tuned when the curation in
   * site.yml changes.
   *
   * Each entry keeps one outcome line: those are the sentences that convince
   * someone met twenty minutes ago at a conference. The full case is one click
   * away.
   */
  .cases > * + * {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: 1px solid var(--rule);
  }

  /* A case is read, not scanned across the frame. */
  .case { max-width: var(--measure-read); }

  .cases .case h3 { margin-bottom: var(--space-1); }

  .cases .case h3 a {
    display: inline-block;
    min-height: 44px;
    padding-block: 0.2rem;
    color: var(--ink);
    text-decoration-color: var(--ink-secondary);
  }

  @media (hover: hover) {
    .cases .case h3 a:hover { text-decoration-color: currentColor; }
  }

  .thinking, .evidence, .starts { margin-block: var(--space-6); }

  /*
   * Section headings are labels, not titles. At heading scale they matched the
   * episode and case titles directly beneath them — a case title is the same
   * step — and the page read as one undifferentiated stack of similar lines.
   * Small, spaced and secondary, a label names its region without competing to
   * be the most important line in it. Same treatment as a speaker label.
   */
  .thinking > h2,
  .evidence > h2,
  .starts > h2 {
    font-size: var(--step-meta);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-secondary);
  }

  .starts h2 { margin-bottom: var(--space-2); }

  .thinking > p:last-child a,
  .starts a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  .archive__header { margin-block: var(--space-5) var(--space-5); }

  .row {
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--rule);
  }

  .row h2 { margin-block: var(--space-1) var(--space-2); }

  .row h2 a,
  .case-preview h2 a {
    display: inline-block;
    min-height: 44px;
    padding-block: 0.2rem;
    color: var(--ink);
    text-decoration-color: var(--ink-secondary);
  }

  @media (hover: hover) {
    .row h2 a:hover,
    .case-preview h2 a:hover { text-decoration-color: currentColor; }
  }

  .row__mark { max-width: var(--measure-line); }

  /* Metadata moves to a left column only where there is width for it. */
  @media (min-width: 68rem) {
    .row {
      display: grid;
      grid-template-columns: 12rem minmax(0, 1fr);
      column-gap: var(--space-4);
    }

    .row .meta { grid-column: 1; }
    .row h2, .row__mark { grid-column: 2; }
  }

  /*
   * The only accent on the site. One line per post, chosen at publish time.
   * It is a mark, not a component: no box, no border, no weight change.
   */
  .mark { color: var(--accent); }

  /*
   * Space, and nothing else. A rule, a border or a fill here would separate the
   * tail from the essay, which is exactly what it must not do.
   */
  .tail { margin-block: var(--space-4) var(--space-5); }

  .tail > p:last-child a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /*
   * A long address is one unbreakable word. These links are inline-flex for
   * their tap target, and an inline-flex box sizes to min-content, which
   * `break-word` does not affect — so `anywhere` is the one that stops a
   * 37-character address pushing a 375px screen sideways.
   */
  .tail a,
  .starts a {
    overflow-wrap: anywhere;
  }

  /* No frame, no rounding, no shadow. It is a photograph, not a component. */
  .portrait { margin-block: var(--space-3) var(--space-4); }
}