/* ═══════════════════════════════════════════════════════════════════════════
   GENERAL ARRANGEMENT · sheet layouts + plot choreography
   One motion grammar: the sheet plots itself. Lines extend from a start point,
   hidden edges become visible edges, dimension values land last.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ══════════════ SHEET 01 · GENERAL ARRANGEMENT ══════════════ */

.sheet--01 {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block-start: clamp(3.5rem, 8vh, 5.5rem);
  padding-block-end: clamp(5.5rem, 10vh, 7.5rem);
}

.ga {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
}

.ga__type { min-width: 0; }
.ga__acts {
  display: flex; flex-wrap: wrap; gap: .7rem;
  margin-block-start: clamp(1.6rem, 3.2vw, 2.3rem);
}

/* The figure is the drawing's subject. True alpha cut-out, no mask fakery. */
.ga__fig {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 34rem;
}
.ga__portrait {
  width: 100%;
  max-width: 19rem;
  margin-inline: auto;
  height: auto;
  max-height: min(66svh, 38rem);
  object-fit: contain;
  object-position: bottom;
  -webkit-mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 76%, transparent 99%);
  filter: drop-shadow(0 26px 42px color-mix(in srgb, var(--ink) 22%, transparent));
}
/* Model space: cool the studio light so the cut-out sits on dark stock */
:root[data-plot-style="model"] .ga__portrait,
:root:not([data-plot-style="sheet"]) .ga__portrait {
  filter: drop-shadow(0 26px 44px rgb(0 0 0 / .55));
}
@media (prefers-color-scheme: light) {
  :root:not([data-plot-style="model"]) .ga__portrait {
    filter: drop-shadow(0 26px 42px color-mix(in srgb, var(--ink) 22%, transparent));
  }
}

/* Balloon callouts: leader touches the figure, the balloon sits in whitespace */
.balloon {
  position: absolute;
  display: flex; align-items: flex-start; gap: .55rem;
  width: max-content; max-width: 13.5rem;
}
.balloon__no {
  flex: none;
  width: 1.7rem; height: 1.7rem;
  display: grid; place-items: center;
  border: var(--w-med) solid var(--ink);
  border-radius: 50%;
  font-family: var(--f-mono); font-size: .72rem;
  background: var(--sheet);
}
.balloon__txt {
  font-family: var(--f-mono);
  font-size: .68rem; line-height: 1.4;
  padding-block-start: .16rem;
}
.balloon__txt i {
  display: block; font-style: normal;
  font-size: .6rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-2); margin-block-start: .18rem;
}
/* Leader line, drawn thin, reaching toward the subject */
.balloon::before {
  content: ""; position: absolute;
  border-block-start: var(--w-thin) solid var(--ink-2);
  inset-block-start: .85rem;
}
.balloon--1, .balloon--3 {
  inset-inline-end: 80%;
  max-width: 11rem;
  text-align: end;
  flex-direction: row-reverse;
}
.balloon--1::before, .balloon--3::before { inset-inline-start: 100%; width: clamp(2.6rem, 4.4vw, 4rem); }
.balloon--1 .balloon__txt, .balloon--3 .balloon__txt { text-align: end; }
.balloon--1 { inset-block-start: 10%; }
.balloon--3 { inset-block-end: 14%; }

.balloon--2 {
  inset-block-start: 40%;
  inset-inline-start: 76%;
  max-width: 10.5rem;
}
.balloon--2::before { inset-inline-end: 100%; width: 1.9rem; }

@media (max-width: 1200px) {
  .balloon { display: none; }
}
@media (max-width: 1100px) {
  .ga { grid-template-columns: 1fr; gap: clamp(.9rem, 2.5vw, 1.6rem); }
  .ga__fig { order: -1; max-width: 18rem; }
  .ga__portrait { max-width: 100%; max-height: 30svh; }
  .sheet--01 {
    padding-block-start: clamp(2.6rem, 6vh, 3.4rem);
    padding-block-end: clamp(11rem, 22vh, 13rem);
  }
  .sheet--01 .lede { margin-block-start: .8rem; }
  .sheet--01 .ga__acts { margin-block-start: 1.1rem; }
}
@media (max-width: 700px) {
  .ga__fig { max-width: 14rem; }
  .ga__portrait { max-height: 26svh; }
  .sheet--01 { padding-block-end: clamp(9.5rem, 19vh, 11rem); }
  .sheet--01 .plate { font-size: clamp(2.3rem, 1rem + 8vw, 3.4rem); }
  .sheet--01 .lede { font-size: .96rem; line-height: 1.45; }
}
@media (max-width: 620px) {
  .ga__acts .btn { flex: 1 1 100%; }
}

/* ══════════════ SHEET 02 · SECTION A-A ══════════════ */

.sec { max-width: var(--max); margin-inline: auto; }
.sec__cut {
  position: relative;
  margin-block-start: clamp(2.4rem, 5vw, 4rem);
  border-block: var(--w-thick) solid var(--ink);
}

.hatchdefs { position: absolute; width: 0; height: 0; }
.hatchdefs line { stroke: var(--ink); stroke-width: 1; opacity: .34; }

.strata { list-style: none; padding: 0; margin: 0; }
.stratum {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) 2.5rem;
  gap: clamp(1rem, 3vw, 2.6rem);
  align-items: start;
  padding: clamp(1.5rem, 3.4vw, 2.5rem) 0;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 901px) { .stratum { padding-inline-end: 19rem; } }
.stratum + .stratum { border-block-start: var(--w-thin) solid var(--ink-2); }

.stratum__hatch {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -1; opacity: .5;
}
.stratum__name {
  font-variation-settings: "wdth" 112, "wght" 720;
  font-size: clamp(1.15rem, .95rem + .9vw, 1.6rem);
  line-height: 1.05; letter-spacing: -.02em; text-transform: uppercase;
}
.stratum__body { max-width: 62ch; color: var(--ink-2); }
.stratum__mark {
  font-family: var(--f-mono); font-size: .78rem;
  justify-self: end;
  width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  border: var(--w-thin) solid var(--ink-2);
}

/* The cut line sweeps across as you scroll. Chain-dot, ISO section mark. */
.cutline {
  position: absolute; inset-block: -1.4rem; inset-inline-start: 0;
  width: 2px; pointer-events: none;
  display: grid; grid-template-rows: auto 1fr auto; justify-items: center;
  translate: 1.5cqw 0;
}
.cutline__stem {
  width: var(--w-thick);
  background: repeating-linear-gradient(
    to bottom, var(--redline) 0 14px, transparent 14px 20px,
    var(--redline) 20px 24px, transparent 24px 30px);
}
.cutline__arrow {
  font-family: var(--f-mono); font-size: .7rem; color: var(--redline);
  width: 1.5rem; height: 1.5rem; display: grid; place-items: center;
  background: var(--sheet);
  border: var(--w-med) solid var(--redline);
}

.sec__note {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  margin-inline-start: auto;
  max-width: 52ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.13rem);
  color: var(--ink-2);
}

@media (max-width: 820px) {
  /* Place every cell explicitly. Giving the mark a definite row but no column made
     it claim column 1 ahead of the auto-placed heading, which then overflowed the
     auto track. */
  .stratum { grid-template-columns: minmax(0, 1fr) auto; }
  .stratum__name { grid-column: 1; grid-row: 1; }
  .stratum__mark { grid-column: 2; grid-row: 1; justify-self: end; }
  .stratum__body { grid-column: 1 / -1; grid-row: 2; }
  /* The section cut needs width to read as a cut rather than a stripe through text. */
  .cutline { display: none; }
}

/* ══════════════ SHEET 03 · ASSEMBLIES ══════════════ */

.sheet--03 { padding-block-end: 0; }

.idx { max-width: var(--max); margin-inline: auto; }
.idx__list {
  list-style: none; padding: 0;
  margin-block-start: clamp(1.8rem, 3.6vw, 2.8rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  border-block-start: var(--w-thin) solid var(--con-55);
}
.idx__list a {
  display: grid; gap: .18rem;
  padding: .9rem 1rem .9rem 0;
  text-decoration: none;
  border-block-end: var(--w-thin) solid var(--con-55);
  /* pending parts are drawn as hidden edges; hover promotes to a visible edge */
  border-block-start: var(--w-med) dashed var(--ink-2);
  transition: border-color .22s, background-color .22s;
}
.idx__list a:hover, .idx__list a:focus-visible {
  border-block-start: var(--w-med) solid var(--redline);
  background: var(--ink-05);
}
.idx__list b {
  font-family: var(--f-mono); font-weight: 400;
  font-size: .66rem; letter-spacing: .14em; color: var(--ink-2);
}
.idx__list span {
  font-variation-settings: "wdth" 104, "wght" 620;
  font-size: .98rem; line-height: 1.2;
}
.idx__list em {
  font-style: normal; font-family: var(--f-mono);
  font-size: .64rem; color: var(--ink-2);
}

/* --- pinned horizontal pan --- */
.pan {
  margin-block-start: clamp(2.5rem, 5vw, 4rem);
  margin-inline: calc(var(--gut) * -1.35);
}
.pan__stick {
  position: sticky; top: 0;
  height: 100svh;
  display: flex; align-items: center;
  overflow: hidden;
}
.pan__track {
  display: flex;
  gap: clamp(2rem, 5vw, 5rem);
  padding-inline: calc(var(--gut) * 1.35);
  will-change: transform;
}
/* The pan rests with the last plate clear of the corner title block. */
@media (min-width: 901px) {
  .pan__stick { padding-block-end: 4.5rem; }
  .pan__track { padding-inline-end: calc(var(--gut) * 1.35 + 19rem); }
}

.part {
  flex: 0 0 auto;
  max-width: 88vw;
  display: grid;
  grid-template-columns: minmax(16rem, 24rem) auto;
  gap: clamp(1.4rem, 3vw, 3rem);
  align-items: center;
}
.part__txt { min-width: 0; }
.part__no {
  display: block;
  font-family: var(--f-mono); font-size: .7rem;
  letter-spacing: .2em; color: var(--ink-2);
  padding-block-end: .5rem;
  border-block-end: var(--w-thin) solid var(--con-55);
  margin-block-end: .8rem;
}
.part__name {
  font-variation-settings: "wdth" 108, "wght" 720;
  font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.1rem);
  line-height: 1.06; letter-spacing: -.025em;
  /* greedy wrapping, not balanced: balance turns a long project name into four
     short lines where filling gives two */
  text-wrap: pretty;
}
.part__body {
  margin-block-start: .8rem;
  color: var(--ink-2);
  max-width: 46ch;
}
.part__txt .link { margin-block-start: 1.15rem; }

/* Each capture is inset in a drawing frame with corner ticks, shown as it is. */
.part__view {
  position: relative;
  min-width: 0;
  /* Aspect drives the frame, but an ultra-wide capture must not squeeze the text
     column down to its 16rem minimum and force the project name into four lines.
     The cap lives inside width, not max-width: a max-width is ignored while the
     grid works out its intrinsic sizes, so the track would still ask for the full
     aspect width and steal the difference from the text column. */
  width: min(calc(52svh * var(--ar, 1.5)), 50rem);
  max-width: 100%;
  padding: clamp(.7rem, 1.4vw, 1.2rem);
  background: var(--sheet-2);
  border: var(--w-thin) solid var(--ink-2);
}
.part__view::before, .part__view::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 0 solid var(--ink);
}
.part__view::before { top: -1px; left: -1px; border-top-width: var(--w-thick); border-left-width: var(--w-thick); }
.part__view::after  { bottom: -1px; right: -1px; border-bottom-width: var(--w-thick); border-right-width: var(--w-thick); }
.part__view img {
  width: 100%; height: auto;
  border: var(--w-thin) solid var(--ink-18);
}
.part__view figcaption {
  margin-block-start: .6rem;
  font-family: var(--f-mono); font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
}

/* Below the pin, the pan becomes a rail the reader drives. Every plate has to start
   at the same y, so nothing stretches and nothing centres inside a stretched box. */
@media (max-width: 900px) {
  .pan__stick {
    display: block;
    position: static; height: auto; overflow: visible;
  }
  .pan__track {
    align-items: start;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-inline: contain;
    padding-block-end: 1.25rem;
    gap: clamp(1.5rem, 5vw, 2.5rem);
    transform: none;
  }
  .part {
    grid-template-columns: 1fr;
    width: min(30rem, 82vw);
    align-items: start;
    align-content: start;
    gap: 1.15rem;
    scroll-snap-align: center;
  }
  /* the aspect-driven frame width is a desktop device; on the rail the column rules */
  .part__view { width: 100%; max-width: 100%; }
  .part__view img { max-height: none; }
}

/* ══════════════ SHEET 04 · PARTS LIST ══════════════ */

.bom { max-width: var(--max); margin-inline: auto; }

/* The table stays a real table at every width. Wide content scrolls inside its own
   labelled region rather than having its display overridden, which would strip the
   row and cell roles assistive tech navigates by. */
.bom__scroll {
  margin-block-start: clamp(1.8rem, 3.6vw, 2.8rem);
  overflow-x: auto;
  overscroll-behavior-inline: contain;
}
@media (min-width: 901px) { .bom__scroll { padding-inline-end: 19rem; } }
.bom__scroll:focus-visible { outline: var(--w-thick) solid var(--redline); outline-offset: 3px; }

.bom__table {
  width: 100%; min-width: 40rem;
  border-collapse: collapse;
  font-size: .92rem;
}
.bom__table thead th {
  text-align: start;
  font-family: var(--f-mono); font-weight: 400;
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2);
  padding: 0 1rem .6rem 0;
  border-block-end: var(--w-thick) solid var(--ink);
  white-space: nowrap;
}
.bom__table tbody th, .bom__table tbody td {
  padding: .78rem 1rem .78rem 0;
  text-align: start; font-weight: 400; vertical-align: baseline;
  /* one hairline between rows, drawn in construction blue: structure only */
  border-block-end: var(--w-thin) solid var(--con-55);
}
.bom__part {
  display: flex; align-items: center; gap: .6rem;
  font-variation-settings: "wdth" 102, "wght" 620;
  white-space: nowrap;
}
.bom__part img {
  width: 20px; height: 20px; flex: none;
  object-fit: contain;
  filter: grayscale(1) contrast(.85) opacity(.7);
  transition: filter .22s var(--ease);
}
.bom__table tbody tr:hover .bom__part img,
.bom__table tbody tr:focus-within .bom__part img { filter: none; }

.bom__glyph {
  flex: none;
  min-width: 20px; height: 20px; padding-inline: 2px;
  display: grid; place-items: center;
  border: 1px solid var(--ink-2);
  font-family: var(--f-mono); font-size: .44rem; letter-spacing: .02em;
}

.bom__no { color: var(--ink-2); font-size: .72rem; width: 3.5rem; }
.bom__fn { color: var(--ink-2); }
.bom__fn-practice { display: none; }

/* Practice is a classification, not a measurement. It gets a label, not a gauge. */
.bom__practice { width: 1%; white-space: nowrap; }
.bom__practice span {
  font-family: var(--f-mono); font-size: .64rem;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .2rem .5rem .2rem 0;
  border-inline-start: var(--w-thick) solid var(--ink-2);
  padding-inline-start: .5rem;
}
.bom__practice span[data-practice="automation"] { border-inline-start-color: var(--ink); }
.bom__table tbody tr { transition: background-color .18s; }
.bom__table tbody tr:hover { background: var(--ink-05); }

.bom__also {
  margin-block-start: clamp(2rem, 4vw, 3rem);
  max-width: 62ch;
  padding-inline-start: 1.1rem;
  border-inline-start: var(--w-thin) solid var(--redline);
}
.bom__also-h {
  font-family: var(--f-mono); font-weight: 400;
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2); margin-block-end: .5rem;
}
.bom__also p { color: var(--ink-2); }

/* On a phone the table compresses instead of scrolling: the part name is allowed to
   wrap and the practice classification steps aside, so item, part and function all
   stay on screen. The table keeps its real display, so its semantics survive. */
@media (max-width: 760px) {
  .bom__table { min-width: 0; font-size: .86rem; }
  .bom__part { white-space: normal; align-items: start; }
  .bom__part img, .bom__glyph { margin-block-start: .15rem; }
  .bom__no { width: 2.2rem; }
  .bom__table thead th, .bom__table tbody th, .bom__table tbody td { padding-inline-end: .7rem; }
  .bom__table thead th:nth-child(4), .bom__practice { display: none; }
  .bom__fn-practice {
    display: block;
    margin-block-start: .3rem;
    font-family: var(--f-mono); font-size: .6rem;
    letter-spacing: .1em; text-transform: uppercase;
    color: var(--ink);
  }
}

/* ══════════════ SHEET 05 · REVISION HISTORY ══════════════ */

.rev { max-width: var(--max); margin-inline: auto; }
.rev__list {
  list-style: none; padding: 0;
  margin-block-start: clamp(1.8rem, 3.6vw, 2.8rem);
  border-block-start: var(--w-thick) solid var(--ink);
}
.rev__row {
  display: grid;
  grid-template-columns: 3.2rem 10rem minmax(0, 1fr);
  gap: clamp(.9rem, 2.4vw, 2rem);
  padding-block: clamp(1.3rem, 2.6vw, 2rem);
  border-block-end: var(--w-thin) solid var(--con-55);
  position: relative;
}
/* State is line weight and dash pattern. Current roles carry a heavy solid edge. */
.rev__row::before {
  content: ""; position: absolute;
  inset-block: 0; inset-inline-start: -1.1rem;
  border-inline-start: var(--w-med) dashed var(--ink-2);
}
.rev__row[data-state="live"]::before {
  border-inline-start: var(--w-thick) solid var(--redline);
}
.rev__id {
  font-size: 1.5rem; line-height: 1;
  color: var(--ink-2);
}
.rev__row[data-state="live"] .rev__id { color: var(--ink); font-variation-settings: "wght" 700; }
.rev__date {
  font-size: .72rem; letter-spacing: .06em; color: var(--ink-2); line-height: 1.5;
}
.rev__date i { display: block; font-style: normal; }
.rev__row[data-state="live"] .rev__date i { color: var(--ink); }
.rev__desc h3 {
  font-variation-settings: "wdth" 106, "wght" 700;
  font-size: clamp(1.1rem, .95rem + .6vw, 1.42rem);
  line-height: 1.1; letter-spacing: -.02em;
}
.rev__org {
  font-family: var(--f-mono); font-size: .68rem;
  color: var(--ink-2); margin-block: .3rem .8rem;
}
.rev__desc ul { margin: 0; padding-inline-start: 1.05rem; max-width: 68ch; }
.rev__desc li { color: var(--ink-2); margin-block-end: .3rem; }
.rev__desc li::marker { color: var(--con-55); }

.rev__foot {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
  gap: clamp(1.4rem, 3vw, 3rem);
  margin-block-start: clamp(2.2rem, 4.5vw, 3.4rem);
}
.notecell {
  padding: clamp(1.1rem, 2.2vw, 1.6rem);
  background: var(--sheet-2);
  border: var(--w-thin) solid var(--ink-18);
}
.notecell h3 {
  font-family: var(--f-mono); font-weight: 400;
  font-size: .6rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2);
  padding-block-end: .55rem; margin-block-end: .8rem;
  border-block-end: var(--w-thin) solid var(--con-55);
}
.notecell p + p { margin-block-start: .9rem; }
.notecell__meta { color: var(--ink-2); font-size: .88rem; }

@media (max-width: 760px) {
  .rev__row { grid-template-columns: 2.4rem 1fr; }
  .rev__desc { grid-column: 1 / -1; }
  .rev__row::before { inset-inline-start: -.6rem; }
}

/* ══════════════ SHEET 06 · TITLE BLOCK ══════════════ */

.sheet--06 { min-height: 100svh; display: grid; align-content: center; padding-block-end: calc(var(--sheet-pad-y) + 6rem); }
.tbfull { max-width: var(--max); margin-inline: auto; width: 100%; }
.tbfull__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, .8fr);
  border: var(--w-thick) solid var(--ink);
}
.tbfull__cell {
  padding: clamp(1.1rem, 2.4vw, 1.9rem);
  border-block-end: var(--w-thin) solid var(--ink-18);
  border-inline-end: var(--w-thin) solid var(--ink-18);
  min-width: 0;
}
.tbfull__key {
  display: block;
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-2);
  margin-block-end: .28rem;
}
.tbfull__key + .tbfull__val { margin-block-end: 1rem; }
.tbfull__val {
  display: block;
  font-family: var(--f-mono); font-size: .84rem;
  word-break: break-word;
}
a.tbfull__val {
  text-decoration: none;
  border-block-end: var(--w-thin) solid var(--ink-2);
  padding-block-end: .1rem;
  width: max-content; max-width: 100%;
  transition: border-color .2s, color .2s;
}
a.tbfull__val:hover { border-block-end-color: var(--redline); color: var(--redline); }

.tbfull__cell--title { grid-column: 1 / 3; grid-row: 1; }
.tbfull__name {
  font-variation-settings: "wdth" 118, "wght" 820;
  font-size: clamp(2rem, 1rem + 5.4vw, 4.4rem);
  line-height: .94; letter-spacing: -.035em; text-transform: uppercase;
}
.tbfull__sub { margin-block-start: .7rem; color: var(--ink-2); max-width: 42ch; }
.tbfull__status {
  margin-block-start: 1rem;
  display: flex; gap: .6rem; align-items: baseline; flex-wrap: wrap;
  font-family: var(--f-mono); font-size: .84rem;
  padding-block-end: .3rem;
  border-block-end: var(--w-thick) solid var(--ink);
  width: max-content; max-width: 100%;
}
.tbfull__status .tbfull__key { margin-block-end: 0; }

.tbfull__cell--approved {
  grid-column: 3; grid-row: 1 / 3;
  display: grid; align-content: start;
  border-inline-end: 0;
}
.tbfull__cell--approved img {
  width: 100%; max-height: 26rem; object-fit: contain; object-position: bottom;
  margin-block-start: auto;
  /* the source is cropped at the hip; it dissolves rather than being guillotined */
  -webkit-mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 80%, transparent 99%);
  filter: drop-shadow(0 16px 26px color-mix(in srgb, var(--ink) 20%, transparent));
}

.tbfull__cell--contact { grid-column: 1; grid-row: 2; }
.tbfull__cell--act     { grid-column: 2; grid-row: 2; display: grid; align-content: start; gap: .7rem; }
.tbfull__ask {
  font-variation-settings: "wdth" 100, "wght" 560;
  font-size: clamp(1.02rem, .92rem + .5vw, 1.28rem);
  line-height: 1.28; letter-spacing: -.015em;
  margin-block-end: .5rem; text-wrap: balance;
}
.tbfull__cell--act .btn { width: 100%; }

.tbfull__cell--meta {
  grid-column: 1 / -1; grid-row: 3;
  display: flex; flex-wrap: wrap; gap: .3rem 2.4rem; align-items: baseline;
  border-block-end: 0; border-inline-end: 0;
  padding-block: .8rem;
}
.tbfull__cell--meta .tbfull__key { margin-block-end: 0; }
.tbfull__cell--meta .tbfull__key + .tbfull__val { margin-block-end: 0; margin-inline-end: 1rem; }

.tbfull__colophon {
  margin-block-start: 1.1rem;
  font-family: var(--f-mono); font-size: .64rem; line-height: 1.7;
  color: var(--ink-2); max-width: 62ch;
}

@media (max-width: 900px) {
  .tbfull__grid { grid-template-columns: 1fr 1fr; }
  .tbfull__cell--title { grid-column: 1 / -1; grid-row: 1; }
  .tbfull__cell--approved { grid-column: 2; grid-row: 2 / 4; border-inline-end: 0; }
  .tbfull__cell--approved img { max-height: 18rem; }
  .tbfull__cell--contact { grid-column: 1; grid-row: 2; }
  .tbfull__cell--act { grid-column: 1; grid-row: 3; }
  .tbfull__cell--meta { grid-row: 4; }
}
@media (max-width: 620px) {
  .tbfull__grid { grid-template-columns: 1fr; }
  .tbfull__cell { grid-column: 1 !important; border-inline-end: 0; }
  .tbfull__cell--approved { grid-row: auto !important; }
  .tbfull__cell--approved img { max-height: 15rem; }
  .tbfull__cell--contact, .tbfull__cell--act, .tbfull__cell--meta { grid-row: auto !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLOT CHOREOGRAPHY
   Base state is always the finished, visible state. Motion is additive and
   only applies where scroll timelines exist and motion is welcome.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* --- the frame plots itself on load --- */
  .frame__edge--t, .frame__edge--b { animation: draw-x .85s var(--ease) both; }
  .frame__edge--l, .frame__edge--r { animation: draw-y .85s .12s var(--ease) both; }
  .frame__zones, .frame__mark { animation: fade-in .6s .7s ease-out both; }
  @keyframes draw-x  { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes draw-y  { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

  /* --- hero lands in sequence: plate, dimension, lede, actions --- */
  .sheet--01 .plate__l  { animation: plot-up .9s var(--ease) both; }
  .sheet--01 .plate__l:nth-child(2) { animation-delay: .08s; }
  .sheet--01 .dim--hero { animation: plot-up .8s .3s var(--ease) both; }
  .sheet--01 .lede      { animation: plot-up .8s .42s var(--ease) both; }
  .sheet--01 .ga__acts  { animation: plot-up .8s .52s var(--ease) both; }
  .sheet--01 .ga__fig   { animation: plot-fig 1.1s .16s var(--ease) both; }
  .sheet--01 .balloon   { animation: fade-in .7s var(--ease) both; }
  .balloon--1 { animation-delay: .8s; }
  .balloon--2 { animation-delay: .92s; }
  .balloon--3 { animation-delay: 1.04s; }

  @keyframes plot-up  { from { opacity: 0; transform: translateY(1.1rem); filter: blur(6px); }
                        to   { opacity: 1; transform: none; filter: none; } }
  @keyframes plot-fig { from { opacity: 0; transform: translateY(1.6rem) scale(.985); }
                        to   { opacity: 1; transform: none; } }

  /* the hero dimension line strokes itself in */
  .sheet--01 .dim__line  { stroke-dasharray: 600; animation: stroke-in 1s .55s var(--ease) both; }
  .sheet--01 .dim__ext   { stroke-dasharray: 22;  animation: stroke-in .5s .5s var(--ease) both; }
  .sheet--01 .dim__arrow { animation: fade-in .4s 1.2s ease-out both; }
  @keyframes stroke-in { from { stroke-dashoffset: var(--from, 600); } to { stroke-dashoffset: 0; } }
  .sheet--01 .dim__ext { --from: 22; }
}

/* ─── native scroll-driven animation path ─────────────────────────────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Everything marked [data-plot] arrives as a hidden edge becoming visible. */
    [data-plot] {
      animation: plot-in linear both;
      animation-timeline: view();
      animation-range: entry 6% entry 46%;
    }
    @keyframes plot-in {
      from { opacity: 0; transform: translateY(1.4rem); filter: blur(5px); }
      to   { opacity: 1; transform: none; filter: none; }
    }
    /* sheet 01 is choreographed on load; the pan is its own motion */
    .sheet--01 [data-plot], .pan [data-plot] { animation: none; }

    /* A plotter draws a table one row at a time, so the rows keep their stagger,
       but at a fraction of the section reveal. Twelve full arrivals would read as
       twelve separate events; this reads as one sweep down the sheet. */
    .bom__table tbody tr[data-plot] {
      animation-name: plot-row;
      animation-range: entry 22% entry 46%;
    }
    @keyframes plot-row {
      from { opacity: 0; transform: translateY(.4rem); }
      to   { opacity: 1; transform: none; }
    }

    /* --- sheet 02: the cut line sweeps across, hatches settle behind it --- */
    .sec__cut { view-timeline-name: --cut; }
    .sec__cut { container-type: inline-size; }
    .cutline {
      animation: cut-sweep linear both;
      animation-timeline: --cut;
      animation-range: cover 18% cover 82%;
    }
    @keyframes cut-sweep {
      from { translate: 1.5cqw 0; }
      to   { translate: 97cqw 0; }
    }

    .stratum__hatch {
      animation: hatch-in linear both;
      animation-timeline: view();
      animation-range: entry 12% entry 68%;
    }
    @keyframes hatch-in { from { opacity: 0; clip-path: inset(0 100% 0 0); }
                          to   { opacity: .5; clip-path: inset(0 0 0 0); } }

    /* --- sheet 03: the pinned horizontal pan --- */
    .pan { view-timeline-name: --pan; }
    .pan__track {
      animation: pan-x linear both;
      animation-timeline: --pan;
      animation-range: contain 0% contain 100%;
    }
    @keyframes pan-x { to { transform: translateX(calc(-1 * var(--pan-dist, 0px))); } }

    /* --- sheet 05: revision rows sweep in from their revision mark --- */
    .rev__row::before {
      animation: rule-draw linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 52%;
      transform-origin: top;
    }
    @keyframes rule-draw { from { scale: 1 0; } to { scale: 1 1; } }

    /* --- sheet 06: the title block assembles cell by cell --- */
    .tbfull__grid { view-timeline-name: --tbf; }
    .tbfull__cell {
      animation: cell-in linear both;
      animation-timeline: --tbf;
    }
    .tbfull__cell--title    { animation-range: entry 12% entry 50%; }
    .tbfull__cell--approved { animation-range: entry 18% entry 56%; }
    .tbfull__cell--contact  { animation-range: entry 24% entry 62%; }
    .tbfull__cell--act      { animation-range: entry 30% entry 68%; }
    .tbfull__cell--meta     { animation-range: entry 36% entry 74%; }
    @keyframes cell-in {
      from { opacity: 0; transform: translateY(.9rem); }
      to   { opacity: 1; transform: none; }
    }
  }
}

/* ─── fallback path: IntersectionObserver adds .is-plotted ────────────── */
@supports not (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js [data-plot] {
      opacity: 0;
      transform: translateY(1.4rem);
      transition: opacity .7s var(--ease), transform .7s var(--ease);
    }
    html.js .sheet--01 [data-plot] { opacity: 1; transform: none; }
    html.js [data-plot].is-plotted { opacity: 1; transform: none; }
  }
}

/* Under reduced motion nothing moves, and the horizontal rail becomes a
   normal scroll-snap track the reader drives themselves. */
@media (prefers-reduced-motion: reduce) {
  .pan__stick { position: static; height: auto; overflow: visible; }
  .pan__track {
    overflow-x: auto; scroll-snap-type: x mandatory;
    padding-block-end: 1.5rem; transform: none !important;
  }
  .part { scroll-snap-align: center; }
  .cutline { display: none; }
}