/* Isaias page only (round 5, evidence). The datasets waterfall: A at the top left
   stepping down and to the right to E at the bottom right, each layer handing its
   wind field to the next through an elbow connector. */
.falls { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: none; }
.falls > li { position: relative; width: 40%; }
.falls > li + li { margin-top: 112px; }
.falls > li:nth-child(2) { margin-left: 15%; }
.falls > li:nth-child(3) { margin-left: 30%; }
.falls > li:nth-child(4) { margin-left: 45%; }
.falls > li:nth-child(5) { margin-left: 60%; }

.falls .card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 0 16px; padding: 20px 22px 18px; background: var(--sheet); border: 1px solid var(--rule-2); border-left: 3px solid var(--ink-2); position: relative; z-index: 1; }
.falls .ltr { font-family: var(--sans); font-weight: 600; font-size: 26px; line-height: 1; color: var(--ink); padding-top: 3px; }
.falls h3 { font-size: 19px; margin: 0 0 8px; }
.falls .card p { font-size: 15.5px; line-height: 1.5; margin: 0; color: var(--text); }
.falls .what { font-family: var(--sans); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: block; margin-top: 12px; }

/* The connector: out of the card's right side at mid-height, across, then down onto the next card. */
.falls .hand { position: absolute; left: 100%; top: 50%; bottom: -112px; width: 15%; margin: 0; border-top: 1.5px solid var(--ink-2); border-right: 1.5px solid var(--ink-2); font-size: 15px; line-height: 1.4; color: var(--ink-2); font-style: italic; }
.falls .hand::after { content: ""; position: absolute; right: -6px; bottom: -1px; border: 5.5px solid transparent; border-top: 9px solid var(--ink-2); border-bottom: 0; }
.falls .hand .lbl { display: block; white-space: nowrap; font-family: var(--sans); font-style: normal; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; }
/* The label sits in the open space below its card, set right against the drop line. */
.falls li:not(:last-child) .hand { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; text-align: right; padding: 0 0 14px; box-sizing: border-box; }
.falls li:not(:last-child) .hand > .lbl { margin-right: 16px; }
.falls li:not(:last-child) .hand .txt { margin-right: 16px; width: 30ch; }

/* E's result: a short drop to the accent rule, the footprint itself. */
.falls .hand.out { position: relative; left: auto; top: auto; bottom: auto; width: auto; border: 0; padding: 34px 0 0; text-align: left; }
.falls .hand.out::before { content: ""; position: absolute; left: 40px; top: 0; height: 26px; border-left: 1.5px solid var(--ink-2); }
.falls .hand.out::after { left: 35.5px; right: auto; top: 22px; bottom: auto; }
.falls .hand.out .txt { display: block; border-top: 2px solid var(--hl-line); padding-top: 10px; font-style: normal; color: var(--ink); font-size: 16px; }

/* Reveal in sequence when the stack scrolls in (isaias.js adds .pre, then .on). */
.falls.pre .card, .falls.pre .hand { opacity: 0; transform: translateY(-10px); }
.falls.on .card, .falls.on .hand { opacity: 1; transform: none; transition: opacity .45s ease, transform .45s ease; }
.falls.on li:nth-child(1) .hand { transition-delay: .1s; } .falls.on li:nth-child(2) .card { transition-delay: .18s; }
.falls.on li:nth-child(2) .hand { transition-delay: .26s; } .falls.on li:nth-child(3) .card { transition-delay: .34s; }
.falls.on li:nth-child(3) .hand { transition-delay: .42s; } .falls.on li:nth-child(4) .card { transition-delay: .5s; }
.falls.on li:nth-child(4) .hand { transition-delay: .58s; } .falls.on li:nth-child(5) .card { transition-delay: .66s; }
.falls.on li:nth-child(5) .hand { transition-delay: .74s; }
@media (prefers-reduced-motion: reduce) { .falls.pre .card, .falls.pre .hand { opacity: 1; transform: none; } }

/* Laptops: tighter steps so each card stays readable. */
@media (max-width: 1180px) {
  .falls > li { width: 46%; }
  .falls > li:nth-child(2) { margin-left: 13.5%; } .falls > li:nth-child(3) { margin-left: 27%; }
  .falls > li:nth-child(4) { margin-left: 40.5%; } .falls > li:nth-child(5) { margin-left: 54%; }
  .falls .hand { width: 10%; }
  .falls li:not(:last-child) .hand .txt { width: 26ch; }
}

/* Tablets and phones: a stepped stack, the connector dropping down the left with its label beside it. */
@media (max-width: 860px) {
  .falls > li { width: calc(100% - 48px); }
  .falls > li + li { margin-top: 0; }
  .falls > li:nth-child(2) { margin-left: 12px; } .falls > li:nth-child(3) { margin-left: 24px; }
  .falls > li:nth-child(4) { margin-left: 36px; } .falls > li:nth-child(5) { margin-left: 48px; }
  .falls .card { grid-template-columns: 30px minmax(0, 1fr); gap: 0 12px; padding: 16px 16px 14px; }
  .falls .ltr { font-size: 21px; }
  .falls .hand, .falls li:not(:last-child) .hand { position: relative; left: auto; top: auto; bottom: auto; width: auto; display: block; text-align: left; border: 0; border-left: 1.5px solid var(--ink-2); margin: 0 0 0 26px; padding: 14px 0 22px 16px; }
  .falls li:not(:last-child) .hand > .lbl, .falls li:not(:last-child) .hand .txt { margin-right: 0; width: auto; }
  .falls li:not(:last-child) .hand::after { right: auto; left: -6.5px; bottom: -1px; }
  .falls .hand.out { border-left: 0; margin-left: 0; padding: 34px 0 0; }
  .falls .hand.out::before { left: 26px; }
  .falls .hand.out::after { left: 20.5px; }
}

/* batch 7: hero facts centered in their boxes; roof-damage chart */
.ev-facts { grid-template-columns: repeat(3, 1fr); }
.ev-facts > div { padding: 16px 12px 8px; text-align: center; }
@media (max-width: 700px) { .ev-facts { grid-template-columns: 1fr; } .ev-facts > div { border-right: 0; } .ev-facts > div + div { border-top: 1px solid var(--rule); } }
.roofs-box { padding: 18px 18px 8px; }
.roofs-box svg { width: 100%; height: auto; display: block; }
.roofs-m { display: none !important; }
@media (max-width: 560px) { .roofs-d { display: none !important; } .roofs-m { display: block !important; } }
.dl-card .cite { font-size: 14px; }

/* batch 8: the Isaias sign-up page (live/isaias/) */
.ev-mast.gate { padding-bottom: clamp(56px, 8vw, 104px); }
.gate-card { background: var(--sheet); box-shadow: inset 0 0 0 1px rgba(22, 36, 61, .16); padding: clamp(22px, 3vw, 36px); display: grid; gap: 18px; }
.gate-card h2 { font-size: clamp(24px, 2.2vw, 32px); }
.gate-card #gate-intro p { margin: 8px 0 0; }
.gate-done { display: none; } .gate-done.show { display: block; }
.gate-done a { font-weight: 600; }
.gate-card [hidden] { display: none !important; }