@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; }

  /* Inter, not Cormorant: inside an episode dialogue IS the body copy. Spec §5.3. */
  .exchange__lines { font-family: var(--font-body); }

  /* Cormorant marks interruption — the live voice, not the conversation. */
  .exchange__lines blockquote {
    margin-block: var(--space-2);
    padding-left: var(--space-3);
    border-left: 1px solid var(--rule);
    font-family: var(--font-voice);
    font-size: var(--step-lead);
    line-height: 1.45;
    color: var(--ink);
  }

  .pull {
    font-family: var(--font-voice);
    font-size: var(--step-lead);
    line-height: 1.45;
    color: var(--ink);
  }

  .pull__speaker {
    display: block;
    font-family: var(--font-body);
    font-size: var(--step-meta);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink-secondary);
  }

  .pull__line + .pull__speaker { margin-top: var(--space-2); }

  .preview, .case-preview {
    margin-block: var(--space-4);
    padding-block-end: var(--space-4);
    border-bottom: 1px solid var(--rule);
  }

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

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

  /* Diagnosis and outcome remain in DOM reading order. */
  .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-family: var(--font-voice);
    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: 20ch;
    margin-block: var(--space-2) var(--space-4);
  }

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

  /* Asymmetry is additive and exists only at the wide breakpoint. DOM order
     is already reading order, so nothing is reordered here. Spec §7.3. */
  @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; }
    .opening__line { max-width: none; }
  }

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

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

  .opening__episode > p:last-child a,
  .thinking > p:last-child a,
  .contact 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(--rule);
  }

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

  /* 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 p.measure, .row .pull { grid-column: 2; }
  }
}