/* ---- field.css ---- */
/*
  Field reports (brief 6.5, Phase 8): the index at /field and each report
  at /field/<slug>/. The report is a document: title block, provenance
  margin, Newsreader text, photographs that run the full width of the page,
  and the "What we inspected" ledger. No entrance motion.
*/

/* ---- Report: a full-width flow with a content column ---- */

.report {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--page-margin), 1fr)
    [content-start] min(100% - 2 * var(--page-margin), var(--content-max))
    [content-end] minmax(var(--page-margin), 1fr)
    [full-end];
  row-gap: var(--space-l);
  padding-block-end: var(--space-2xl);
}

.report > * {
  grid-column: content;
}

/* Text from the Markdown body. In the content column, and from 48rem
   offset past the three margin columns: 3 of 12 columns plus 3 gutters,
   which is 25% of the column plus a quarter gutter. */
.report > :is(p, h2, h3, ul, ol, blockquote) {
  font-family: var(--font-editorial);
  font-size: var(--step-0);
  line-height: var(--leading-body);
  max-inline-size: var(--measure-body);
}

.report > :is(h2, h3) {
  font-family: var(--font-structural);
  line-height: var(--leading-snug);
}

/* ---- Bleed plates: full width, never wider than the 1600px source ---- */

.report > .plate-bleed {
  grid-column: full;
  justify-self: center;
  inline-size: 100%;
  max-inline-size: var(--plate-max);
  margin-block: var(--space-m);
}

.plate-bleed img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: var(--ratio-landscape);
  object-fit: cover;
  object-position: 50% 50%; /* per-photo crop points: generated .plate-focus-* classes */
}

/* The caption lines up with the page's 12 columns, whatever the plate's width. */
.plate-bleed figcaption {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  inline-size: min(100% - 2 * var(--page-margin), var(--content-max));
  max-inline-size: none;
  margin-inline: auto;
  padding-block-start: var(--space-xs);
}

.plate-bleed figcaption > :is(.caption-text, .caption-meta) {
  grid-column: 1 / -1;
  max-inline-size: var(--measure-ui);
}

/* ---- Pairs: two portrait frames side by side ---- */

.plate-pair {
  display: grid;
  gap: var(--space-l) var(--gutter);
}

.plate-pair figure {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.plate-pair img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: var(--ratio-portrait);
  object-fit: cover;
}

/* ---- Ledger ---- */

.report-ledger {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  margin-block-start: var(--space-l);
}

.report-ledger h2 {
  margin-block-end: var(--space-m);
}

.report-ledger-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  align-self: start;
}

@media (width >= 48rem) {
  .plate-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-inline-size: var(--plate-pair-max);
  }

  .report > :is(p, h2, h3, ul, ol, blockquote),
  .report > .plate-pair {
    margin-inline-start: calc(var(--margin-column) + var(--gutter) / 4);
  }

  .plate-bleed img {
    aspect-ratio: var(--ratio-wide);
  }

  /* The heading comes first in the markup (for heading navigation); a
     subgrid puts the note back in the margin beside it and the table. */
  .report-ledger-table {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: start;
  }

  .report-ledger-table > h2,
  .report-ledger-table > .table-scroll {
    grid-column: 4 / -1;
  }

  .report-ledger-note {
    grid-column: 1 / 4;
    grid-row: 1 / span 2;
  }
}

@media (width >= 64rem) {
  /* The caption sits in the provenance margin, under the photograph's left edge. */
  .plate-bleed figcaption > :is(.caption-text, .caption-meta) {
    grid-column: 1 / 4;
  }

  .report-ledger-table > h2,
  .report-ledger-table > .table-scroll {
    grid-column: 4 / 12;
  }
}

/* ---- ChainTimeline (partials/chain.njk; modules/chain.js) ---- */

.chain {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.chain-head {
  display: grid;
  gap: var(--space-s) var(--gutter);
}

@media (width >= 64rem) {
  .chain-head {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  .chain-count {
    grid-column: 1 / 6;
  }

  .chain-note {
    grid-column: 7 / -1;
  }
}

.chain-count {
  font-family: var(--font-structural);
  font-size: var(--step-3);
  font-stretch: calc(var(--wdth-display) * 1%);
  font-weight: var(--weight-display);
  line-height: var(--leading-heading);
}

.chain-note {
  color: var(--theme-muted);
}

.chain-body {
  position: relative;
}

.chain-stages {
  display: grid;
  gap: var(--space-m);
  margin: 0;
  padding: 0;
  list-style: none;
}

.chain-stage {
  position: relative;
  display: grid;
  grid-template-columns: var(--chain-dot) 1fr;
  gap: var(--space-3xs) var(--space-s);
  align-content: start;
}

.chain-stage > :not(.chain-dot) {
  grid-column: 2;
}

.chain-dot {
  grid-row: 1 / span 4;
  inline-size: var(--chain-dot);
  block-size: var(--chain-dot);
  border: var(--rule-strong) solid var(--theme-rule);
  border-radius: 50%;
  background: var(--theme-bg);
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}

.chain-stage.is-inspected .chain-dot {
  border-color: var(--amber);
  background: var(--amber);
}

.chain-index {
  color: var(--theme-muted);
  font-family: var(--font-structural);
  font-size: var(--step--1);
  font-stretch: calc(var(--wdth-record) * 1%);
}

.chain-name {
  font-family: var(--font-structural);
  font-size: var(--step-0);
  font-weight: var(--weight-bold);
  line-height: var(--leading-ui);
}

.chain-status,
.chain-evidence {
  color: var(--theme-muted);
  font-family: var(--font-structural);
  font-size: var(--step--1);
  line-height: var(--leading-ui);
}

.chain-stage.is-inspected .chain-status {
  color: var(--amber-700);
  font-weight: var(--weight-bold);
}

.chain-thumb {
  display: block;
  inline-size: var(--thumb-row);
  margin-block-start: var(--space-2xs);
  overflow: hidden;
  border: var(--ring-amber) solid var(--amber);
  border-radius: 50%;
}

.chain-thumb img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: var(--ratio-square);
  object-fit: cover;
}

/* The line: down the dots on phones, along them from 64rem. */
.chain-line {
  position: absolute;
  inset-block: 0;
  inset-inline-start: calc(var(--chain-dot) / 2 - var(--rule-hair));
  inline-size: var(--rule-strong);
  background: var(--theme-rule);
}

.chain-fill {
  position: absolute;
  inset: 0;
  background: var(--amber);
  transform: scaleY(var(--progress, 0));
  transform-origin: center top;
}

@media (width >= 64rem) {
  .chain-stages {
    grid-template-columns: repeat(9, minmax(0, 1fr));
    gap: var(--gutter);
  }

  .chain-stage {
    grid-template-columns: 1fr;
  }

  .chain-stage > :not(.chain-dot) {
    grid-column: 1;
  }

  .chain-dot {
    grid-row: auto;
    margin-block-end: var(--space-xs);
  }

  .chain-line {
    inset-block: calc(var(--chain-dot) / 2 - var(--rule-hair)) auto;
    inset-inline: 0;
    inline-size: auto;
    block-size: var(--rule-strong);
  }

  .chain-fill {
    transform: scaleX(var(--progress, 0));
    transform-origin: left center;
  }

  /* While scrubbed, a stage lights only once the line has reached it. */
  .chain.is-scrubbed .chain-stage.is-inspected:not(.is-reached) .chain-dot {
    border-color: var(--theme-rule);
    background: var(--theme-bg);
  }
}

/* ---- ShowcaseSlider (/field; modules/showcase.js) ---- */

.page > .showcase {
  grid-column: full;
}

.showcase {
  position: relative;
  isolation: isolate;
  display: grid;
}

.showcase-head {
  position: absolute;
  inset-block-start: calc(var(--nav-top) + var(--nav-pill-h) + var(--space-l));
  inset-inline: var(--page-margin);
  z-index: var(--layer-raised);
  display: flex;
  justify-content: space-between;
  gap: var(--space-s);
  pointer-events: none;
}

.showcase-count {
  font-family: var(--font-structural);
  font-size: var(--step--1);
  font-stretch: calc(var(--wdth-record) * 1%);
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums lining-nums;
}

.slide {
  position: relative;
  display: grid;
  align-items: end;
  min-block-size: var(--slide-min);
  overflow: hidden;
  color: var(--paper);
}

.slide-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--ground-petrol);
}

.slide-bg picture,
.slide-bg img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

.slide-bg::after {
  position: absolute;
  inset: 0;
  background: var(--scrim-side), var(--scrim-photo);
  content: "";
}

.slide-plain .slide-bg::after {
  content: none;
}

.slide-inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xs);
  inline-size: min(100% - 2 * var(--page-margin), var(--content-max));
  margin-inline: auto;
  padding-block: calc(var(--hero-pad-top) + var(--space-m)) var(--space-xl);
}

.slide-title {
  max-inline-size: var(--hero-title-max);
  font-size: min(var(--step-5), var(--display-cap));
  font-stretch: calc(var(--wdth-display) * 1%);
  font-weight: var(--weight-display);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display);
}

.slide-title a {
  color: inherit;
  text-decoration-line: none;
}

.slide-title a:hover,
.slide-title a:focus-visible {
  text-decoration-line: underline;
  text-decoration-thickness: var(--underline-hover);
}

.slide-record {
  font-family: var(--font-structural);
  font-size: var(--step-2);
  font-stretch: calc(var(--wdth-display) * 1%);
  font-weight: var(--weight-display);
  color: var(--amber);
}

.slide-summary {
  max-inline-size: var(--measure-standfirst);
  font-size: var(--step-1);
  line-height: var(--leading-ui);
}

/* With JavaScript (the .js class is set in the head, before first paint),
   the slides share one cell and only the current one shows, so the layout
   never shifts when the script arrives. Before showcase.js marks a slide
   current, the first one shows. Without JavaScript they stack. */
.js .showcase-slides {
  display: grid;
}

.js .slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity var(--dur-enter) var(--ease-out),
    visibility 0s linear var(--dur-enter);
}

.js .showcase:not(.is-live) .slide:first-child,
.js .slide.is-current {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-enter) var(--ease-out);
}

.showcase-controls {
  z-index: var(--layer-raised);
  display: flex;
  inline-size: min(100% - 2 * var(--page-margin), var(--content-max));
  margin-inline: auto;
  padding-block: var(--space-m) var(--space-l);
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  color: var(--paper);
}

.no-js .showcase-controls {
  display: none;
}

.showcase-controls .round-link {
  border-color: var(--rule-on-dark);
  background: transparent;
  font: inherit;
  cursor: pointer;
}

.showcase-segments {
  display: flex;
  flex: 1;
  gap: var(--space-2xs);
  max-inline-size: var(--measure-standfirst);
  margin: 0;
  padding: 0;
  list-style: none;
}

.showcase-segments li {
  flex: 1;
  block-size: var(--slide-segment-h);
  background: var(--rule-on-dark);
}

.showcase-segments span {
  display: block;
  block-size: 100%;
  background: var(--amber);
  transform: scaleX(var(--fill, 0));
  transform-origin: left center;
}

/* ---- The drawer: every report ---- */

.drawer {
  inline-size: min(100%, var(--narrow-max) + 2 * var(--space-xl));
  max-inline-size: 100%;
  block-size: 100%;
  max-block-size: none;
  margin: 0 0 0 auto;
  padding: 0;
  border: 0;
}

.drawer::backdrop {
  background: var(--scrim);
}

.drawer-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-l);
  padding: var(--space-xl) var(--page-margin);
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-s);
}

.drawer .chapter-title {
  font-size: var(--step-4);
}

/* From 64rem the controls sit over the foot of the slide; below that they
   follow it, so they never cover the text. */
@media (width >= 64rem) {
  .showcase-controls {
    position: absolute;
    inset-block-end: 0;
    inset-inline: 0;
  }

  .slide-inner {
    padding-block-end: calc(var(--round-button) + 2 * var(--space-l));
  }
}

/* ---- generated from src/field/*.md ---- */
.plate-focus-husk-partnership-hero img { object-position: 50% 30%; }
.plate-focus-mill-grain-inspection-wide img { object-position: 50% 45%; }