/* ==========================================================================
   Editorial Ledger: work.css (B1, Work)
   Case files with their explainers (B2 to B4), the receipts (B5), the
   catalogue (B6), the stack (B7), the agenda (B8) and the closing jump.
   Shared parts (tokens, section head, letters, keys, notices, plate, reveal
   states) live in base.css.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Variables
   -------------------------------------------------------------------------- */

:root {
  --ex-stroke: 1.25; /* explainer linework, in screen pixels (non-scaling) */
  --key-slot: 1.5rem;
}


/* --------------------------------------------------------------------------
   Sections: the contents box in the page head (B1), 64rem and up
   -------------------------------------------------------------------------- */

.contents__list {
  margin-top: .5rem;
  padding: 0;
  list-style: none;
}

.contents__list li + li { border-top: 1px solid var(--hairline); }

.contents__link {
  display: flex;
  align-items: baseline;
  gap: .375rem;
  padding-block: .4375rem;
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none;
  transition: color var(--dur-1);
}

.contents__link:hover { color: var(--accent-deep); }

.contents__folio {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--accent);
}


/* --------------------------------------------------------------------------
   Sections: case files (B2 to B4)
   -------------------------------------------------------------------------- */

.case { padding-bottom: min(var(--section-pad), var(--space-3xl)); }

.case__grid {
  align-items: start;
  row-gap: var(--space-m);
}

.case__grid > * { grid-column: 1 / -1; }

.case__head { margin-bottom: 0; }

.case__text {
  display: grid;
  gap: var(--space-l);
}

/* A two-line drop cap: the first paragraph of a case file can be two lines long. */
.case .dropcap::first-letter {
  -webkit-initial-letter: 2;
  initial-letter: 2;
}

.case .prose { font-size: clamp(1.0625rem, .96rem + .42vw, 1.3125rem); }

/* Figure box: a boxed sidebar of big figures under a double rule. */
.figbox {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s) var(--space-l);
  padding-block: var(--space-s);
  border-top: 3px double var(--ink);
  border-bottom: 1px solid var(--ink);
}

.figbox__cell {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: .25rem;
}

.figbox dt {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.figbox dd {
  font-size: clamp(2.25rem, 1.9rem + 1.5vw, 3.25rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

.figbox__cell--text {
  align-self: flex-end;
  margin-left: auto;
}

.figbox__cell--text dd {
  font-size: var(--fs-deck);
  font-style: italic;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--ink-soft);
}

/* Filed under: the tags of a case file, set like a library slip. */
.case__filed {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs) var(--space-m);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--hairline);
}

.case__filed-label {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.case__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
}

/* Explainer: ink linework on a bright sheet, numbered red keys, no words. */
.explainer {
  display: grid;
  gap: .625rem;
}

.explainer__art {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--paper-bright);
  border: 1px solid var(--hairline);
}

.explainer__art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ex-line,
.ex-hair,
.ex-card,
.ex-dash,
.ex-mark,
.ex-leader,
.ex-reader {
  fill: none;
  stroke: var(--ink);
  stroke-width: var(--ex-stroke);
  stroke-linecap: square;
  stroke-linejoin: miter;
}

.ex-hair {
  stroke: var(--ink-muted);
  stroke-width: 1;
}

.ex-card { fill: var(--paper-bright); }
.ex-solid,
.ex-fill { fill: var(--ink); }
.ex-tint { fill: var(--paper-deep); }
.ex-dash { stroke-dasharray: 5 4; stroke-linecap: butt; }
.ex-mark { stroke: var(--accent); stroke-width: 1.5; }
.ex-leader { stroke: var(--accent); stroke-width: 1; }

.explainer pattern circle { fill: var(--ink-muted); }

/* A key sits in a clipping slot, so it can drop into place like a type slug. */
.explainer__slot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--key-slot);
  height: var(--key-slot);
  overflow: clip;
  transform: translate(-50%, -50%);
}

.explainer__slot .key--callout {
  position: static;
  display: grid;
  width: 100%;
  height: 100%;
  transform: none;
}

.explainer__caption {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .25rem var(--space-s);
}

.explainer__title {
  font-family: var(--font-sans);
  font-size: var(--fs-micro);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.explainer__source {
  font-size: var(--fs-small);
  font-style: italic;
  line-height: 1.3;
  color: var(--ink-muted);
}


/* --------------------------------------------------------------------------
   Sections: the receipts (B5)
   -------------------------------------------------------------------------- */

.receipts__list { border-bottom: 1px solid var(--ink); }

.receipt {
  position: relative;
  isolation: isolate;
  gap: var(--space-xs);
  padding-block: var(--space-m);
  border-top: 1px solid var(--ink);
}

/* The wash: a row is posted with one pass of the highlighter. */
.receipt__wash {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--accent-wash);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--dur-3) var(--ease-rule);
}

.receipt__label {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.receipt .letter__text {
  font-size: clamp(1.25rem, 1.04rem + .86vw, 1.8125rem);
  line-height: 1.24;
  letter-spacing: -.006em;
  max-width: 34ch;
}

.receipt .letter__text::before { color: var(--accent); }


/* --------------------------------------------------------------------------
   Sections: the catalogue (B6), set like classified notices
   -------------------------------------------------------------------------- */

.catalogue__grid > * { grid-column: 1 / -1; }

.catalogue__list {
  column-gap: calc(var(--gutter) * 2);
  column-rule: 1px solid var(--rule);
}

.catalogue__list .notice--open {
  break-inside: avoid;
  margin-top: 0;
  padding-block: var(--space-s) var(--space-m);
  border-top: 1px solid var(--ink);
}

.catalogue__list .notice__text {
  font-size: var(--fs-body);
  font-style: normal;
  line-height: 1.5;
  color: var(--ink);
}

.catalogue__receipt {
  margin-top: var(--space-s);
  padding-left: var(--space-s);
  border-left: 1px solid var(--accent);
}

.catalogue__receipt .letter__text { font-style: italic; }


/* --------------------------------------------------------------------------
   Sections: the stack (B7), an agate table with dotted leaders
   -------------------------------------------------------------------------- */

.stack__table { border-top: 1px solid var(--ink); }

.stack__row {
  display: grid;
  gap: var(--space-2xs);
  padding-block: var(--space-s);
  border-bottom: 1px solid var(--hairline);
}

.stack__row dt {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.stack__row .leader { transform-origin: 0 50%; }

.stack__row dd {
  font-size: clamp(1.0625rem, .98rem + .34vw, 1.25rem);
  text-wrap: pretty;
}


/* --------------------------------------------------------------------------
   Sections: order of business (B8), five agenda items
   -------------------------------------------------------------------------- */

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

.agenda__item { position: relative; }

.agenda__item + .agenda__item {
  padding-top: var(--space-l);
  border-top: 1px solid var(--rule);
}

.agenda .col-rule {
  display: none;
  background: var(--rule);
}

.agenda__body {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
}

.agenda__hed {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.agenda__no {
  display: block;
  margin-bottom: var(--space-3xs);
  color: var(--accent);
}

.agenda__text {
  font-size: 1.1875rem;
  line-height: 1.4;
}

.agenda .letter {
  margin-top: var(--space-2xs);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--rule);
}

.agenda .letter__sig::before { background: var(--rule); }


/* --------------------------------------------------------------------------
   Animations: hidden states for the parts work.js draws. Only .motion hides.
   work.js arms a part (.is-in) when it comes within one viewport. A part
   that is not armed after 4 seconds shows as printed (the failsafe).
   -------------------------------------------------------------------------- */

.motion .explainer:not(.is-in) .explainer__art > * {
  visibility: hidden;
  animation: work-failsafe 1ms 4s forwards;
}

.motion .receipts__list:not(.is-in) .receipt > :not(.receipt__wash) {
  opacity: 0;
  animation: work-failsafe 1ms 4s forwards;
}

@keyframes work-failsafe {
  to { visibility: visible; opacity: 1; }
}


/* --------------------------------------------------------------------------
   Media Queries
   -------------------------------------------------------------------------- */

@media (hover: hover) {
  .receipt:hover .receipt__wash { transform: scaleX(1); }
}

@media (min-width: 30rem) {
  .catalogue__list { columns: 2; }
}

@media (min-width: 48rem) {
  :root { --ex-stroke: 1.5; }

  /* Case files: text and explainer side by side; the body row takes the slack. */
  .case__grid { grid-template-rows: auto auto 1fr auto; }
  .case__head { grid-column: 1 / span 3; grid-row: 2; }
  .case__text { grid-column: 1 / span 3; grid-row: 3; }
  .case__art { grid-column: 4 / span 3; grid-row: 2 / span 2; }
  .case--flip .case__head,
  .case--flip .case__text { grid-column: 4 / span 3; }
  .case--flip .case__art { grid-column: 1 / span 3; }

  .stack__row {
    grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: baseline;
  }

  .stack__row dt { grid-column: 1 / span 2; }
  .stack__row dd { grid-column: 3 / -1; }

  .agenda { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .agenda__item + .agenda__item { padding-top: 0; border-top: 0; }
  .agenda__item:nth-child(n + 3) { padding-top: var(--space-l); border-top: 1px solid var(--rule); }
  .agenda__item:nth-child(even) .col-rule { display: block; }
}

@media (min-width: 64rem) {
  .case__head,
  .case__text { grid-column: 1 / span 5; }
  .case__art { grid-column: 6 / span 7; }
  .case--flip .case__head,
  .case--flip .case__text { grid-column: 8 / span 5; }
  .case--flip .case__art { grid-column: 1 / span 7; }

  /* Receipts: label, quote, signature. */
  .receipt {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: baseline;
    padding-block: var(--space-l);
  }

  .receipt__label { grid-column: 1 / span 3; }
  .receipt .letter__text { grid-column: 4 / span 6; }
  .receipt .letter__sig { grid-column: 10 / span 3; }

  .catalogue__head { grid-column: 1 / span 4; margin-bottom: 0; }
  .catalogue__list { grid-column: 5 / span 8; }

  .stack__row dt { grid-column: 1 / span 3; }
  .stack__row dd { grid-column: 4 / -1; }

  .agenda { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .agenda__item:nth-child(n + 3) { padding-top: 0; border-top: 0; }
  .agenda__item:nth-child(n + 4) { padding-top: var(--space-l); border-top: 1px solid var(--rule); }
  .agenda__item:nth-child(n) .col-rule { display: block; }
  .agenda__item:nth-child(3n + 1) .col-rule { display: none; }
}

@media (min-width: 80rem) {
  .agenda { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .agenda__item:nth-child(n + 4) { padding-top: 0; border-top: 0; }
  .agenda__item:nth-child(n + 2) .col-rule { display: block; }
}

@media (forced-colors: active) {
  .ex-line,
  .ex-hair,
  .ex-card,
  .ex-dash,
  .ex-mark,
  .ex-leader,
  .ex-reader { stroke: CanvasText; }
  .ex-card,
  .ex-tint { fill: Canvas; }
  .ex-solid,
  .ex-fill { fill: CanvasText; }
  .receipt__wash { display: none; }
}