/* ═══ the header — what this shoot is, in four lines ═══════════════════════ */

@layer header {
  .intro {
    display: grid; gap: 8px; justify-items: start;
    max-inline-size: var(--measure); margin-inline: auto;
    padding: clamp(32px, 6vw, 72px) max(var(--pad), var(--safe-r))
             clamp(8px, 2vw, 16px) max(var(--pad), var(--safe-l));
  }
  .intro-title {
    font-size: clamp(2.4rem, 6vw, 4rem); font-weight: 600;
    letter-spacing: -.035em; line-height: 1.02;
    text-wrap: balance;
  }
  .intro-meta { margin-block-start: 8px; color: var(--dim); }
  .intro-meta:empty { display: none; }
}

/* ═══ chapters — a heading, then the photographs ═══════════════════════════ */

@layer chapter {
  .chapter {
    max-inline-size: var(--measure); margin-inline: auto;
    padding-block: clamp(40px, 6vw, 72px) 0;
    /* A one-chapter shoot has no heading; the photographs follow the intro. */
    &:not(:has(.ch-head)) { padding-block-start: clamp(20px, 3vw, 36px); }
  }

  .ch-head {
    display: grid; gap: 6px;
    padding-inline: max(var(--pad), var(--safe-l)) max(var(--pad), var(--safe-r));
    padding-block-end: clamp(18px, 2.5vw, 28px);
  }
  .ch-title {
    font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600;
    letter-spacing: -.02em; line-height: 1.15;
  }
  .ch-meta { color: var(--dim); }

  .flow {
    display: grid; gap: var(--gap);
    padding-inline: max(var(--pad), var(--safe-l)) max(var(--pad), var(--safe-r));
  }
  .row { display: flex; gap: var(--gap); }

  .cell {
    position: relative; overflow: hidden;
    border-radius: var(--r-photo);
    background: var(--tint);
    cursor: zoom-in;
    /* The cell's inline/block size is written by contact.js in px — the
       packing solves the row, CSS must not fight it. */
    img {
      inline-size: 100%; block-size: 100%; object-fit: cover;
      transition: opacity var(--quick) var(--ease);
      &[data-pending] { opacity: 0; }
    }
    &:hover img { opacity: .88; }
    &:focus-visible { outline-offset: 2px; }

    .cell-pick {
      position: absolute; z-index: 1;
      inset-block-start: 8px; inset-inline-end: 8px;
      display: none; place-items: center;
      inline-size: 26px; block-size: 26px; border-radius: 50%;
      border: 1.5px solid oklch(100% 0 0 / .85);
      background: oklch(0% 0 0 / .35);
      color: transparent;
      svg { inline-size: 14px; }
    }
    html[data-select] & { cursor: pointer; .cell-pick { display: grid; } }
    &[aria-pressed="true"] {
      outline: 2px solid var(--ink); outline-offset: -2px;
      .cell-pick { background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
      img { opacity: .8; }
    }
  }
}

/* ═══ downloads — taking the originals away ════════════════════════════════ */

@layer downloads {
  .downloads {
    display: grid; gap: 12px; justify-items: start;
    max-inline-size: var(--measure); margin-inline: auto;
    padding: clamp(64px, 9vw, 112px) max(var(--pad), var(--safe-r))
             clamp(56px, 8vw, 96px) max(var(--pad), var(--safe-l));
  }
  .downloads-title {
    font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 600;
    letter-spacing: -.02em; line-height: 1.15;
  }
  .downloads-note { max-inline-size: 60ch; font-size: .95rem; line-height: 1.65; color: var(--mute); }

  .downloads-list {
    justify-self: stretch; max-inline-size: 760px;
    margin-block: 12px 4px;
    border-block-start: 1px solid var(--line-soft);
  }
  .dl-row {
    display: flex; align-items: center; gap: 16px;
    padding-block: 14px;
    border-block-end: 1px solid var(--line-soft);
    > span { display: grid; gap: 2px; min-inline-size: 0; }
    .btn { margin-inline-start: auto; flex: none; }
  }
  .dl-name { font-weight: 600; }
  .dl-meta { color: var(--dim); }

  .downloads-fine { font-size: .85rem; color: var(--dim); }
}