/* 77th Street: a plain one-column report with pinned map scenes. */

:root {
  --paper: #ffffff;
  --paper-sunk: #f4f4f2;
  --ink: #111111;
  --ink-soft: #444444;
  --ink-faint: #6b6b6b;
  --rule: #d9d9d5;
  --accent: #006b3f;
  --brand: #006b3f;
  --brand-hover: #00552f;
  --on-brand: #ffffff;
  --measure: 40rem;
  --wide: 68rem;
  --nav-h: 3rem;
  --space: clamp(4rem, 10vh, 6rem);
}

html { scroll-padding-top: calc(var(--nav-h) + 1rem); }

.story-page { padding: 0; counter-reset: exhibit sec; }
.story { position: relative; }

html { --stage: #ffffff; }

/* ---- Navigation ---------------------------------------------------- */

.site-nav {
  position: sticky;
  top: 0;
  z-index: 6;
  display: flex;
  gap: 1.5rem;
  align-items: center;
  min-height: var(--nav-h);
  padding: 0 var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.site-nav-mark {
  color: var(--ink);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav-links {
  display: flex;
  flex: 1;
  gap: 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .875rem;
}
.site-nav-links a {
  display: block;
  padding: .3rem 0;
  border-bottom: 2px solid transparent;
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav-links a:hover { color: var(--ink); }
.site-nav-links a[aria-current="true"] { border-bottom-color: var(--ink); color: var(--ink); font-weight: 700; }
.site-nav-sign {
  padding: .35rem .9rem;
  background: var(--brand);
  color: var(--on-brand);
  font-size: .875rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav-sign:hover { background: var(--brand-hover); }
.site-nav-toggle { display: none; }

/* Evidence's sections drop down from the nav. On phones they sit indented in the menu. */
.site-nav-sub { display: none; }
@media (min-width: 58.01rem) {
  .has-sub { position: relative; }
  .has-sub > a::after { content: " \25BE"; }

  /* The panel touches the link, so the pointer can cross without it closing. */
  .has-sub:not(.shut):hover .site-nav-sub,
  .has-sub:focus-within .site-nav-sub {
    display: block;
    position: absolute;
    top: 100%;
    left: -1rem;
    min-width: 15rem;
    margin: 0;
    padding: .4rem 1rem;
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 0 0 6px 6px;
    box-shadow: 0 8px 16px rgba(14, 47, 34, .08);
    list-style: none;
  }
  .site-nav-sub a { padding: .35rem 0; border-bottom: 0; white-space: nowrap; }
}

/* ---- Opening ----------------------------------------------------------- */

/* The page opens like a first page: the title, then the photo, in the text column. */

.hero {
  display: flex;
  flex-direction: column-reverse;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: clamp(2rem, 6vh, 3.5rem) var(--gutter) 0;
}
.hero > img {
  width: 100%;
  aspect-ratio: 3 / 2;
  margin-top: 2rem;
  object-fit: cover;
  object-position: 72% 58%;
}

/* ---- Section openers ---------------------------------------------------- */

/* A rule, a numeral and the section's name, on the text's left edge. */

.opener {
  position: relative;
  z-index: 2;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--space) var(--gutter) 1.75rem;
  counter-increment: sec;
}
.story-body .opener h2 {
  margin: 0;
  padding: 1.1rem 0 0;
  border: 0;
  border-top: 2px solid var(--ink);
  font-size: clamp(1.75rem, 3.6vw, 2.25rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.opener h2::before { content: counter(sec); margin-right: .6em; color: var(--accent); font-weight: 400; }
.opener p { margin: .3rem 0 0; color: var(--ink-soft); text-wrap: pretty; }
.opener + .after, #evidence + .after { padding-top: 0; }
.opener + .after > :first-child, #evidence + .after > :first-child { margin-top: 0; }

/* On wide screens the numeral hangs in the margin, so the heading lines up with the text. */
@media (min-width: 50rem) {
  .story-body .opener h2 { position: relative; }
  .opener h2::before { position: absolute; right: 100%; margin-right: .55em; }
}

/* ---- Pinned scenes --------------------------------------------------- */

/* Without scripts, the text simply reads in order. */
.stage { display: none; }

.js .stage {
  display: block;
  position: sticky;
  top: 0;
  z-index: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: var(--stage);
}

.layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .45s ease;
}
.layer.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .layer { transition: none; }
}

/* The map fills the stage, with its block clear of the card on the left. */
.map-base,
.layer-map img,
.layer-wide img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 62% 50%;
}
.map-base { background: var(--stage); }
.layer-wide img { object-position: 50% 50%; }
.layer-wide { background: var(--stage); }
.layer-route { background: var(--stage); }
.layer-route img {
  position: absolute;
  top: calc(var(--nav-h) + 2vh);
  right: max(var(--gutter), calc(50vw - 24rem));
  width: auto;
  height: calc(96vh - var(--nav-h) - 2vh);
  height: calc(96svh - var(--nav-h) - 2vh);
  border-radius: 14px;
}

.js .steps {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  margin-top: -100svh;
}

.step {
  display: flex;
  align-items: center;
  min-height: 90vh;
  min-height: 90svh;
  padding: 2rem var(--gutter);
  pointer-events: none;
}

/* The first card is already in view when the scene pins, so the second card
   waits longer. Each picture then holds for about one screen of scrolling. */
.js .step + .step:nth-child(2) { margin-top: 45vh; margin-top: 45svh; }

.card {
  position: relative;
  width: 100%;
  max-width: 24rem;
  padding: 1.25rem 1.5rem;
  background: var(--paper);
  border: 1px solid var(--ink);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.45;
  pointer-events: auto;
}
.card p { margin: 0; }
.card p + p { margin-top: .75rem; }
.card sup { font-size: .6em; }
.card sup a { color: inherit; text-decoration: none; }

/* The title sits on the page, not on a card. */
.hero .card-title { max-width: none; padding: 0; border: 0; background: none; font-size: inherit; }
.card-title h1 { margin: 0 0 .85rem; font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1.03; letter-spacing: -.025em; text-wrap: balance; }
.card-title .dateline { margin: 0; color: var(--ink-faint); font-size: .875rem; }
.card-time { font-weight: 700; }

/* ---- Report sections ------------------------------------------------- */

.after {
  position: relative;
  z-index: 2;
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 2rem var(--gutter) 0;
}
.report section { padding-top: 0; }
.story-body h3 { margin: 2.5rem 0 .5rem; font-size: 1.125rem; }
.lede { font-size: 1.1875rem; }
#want { scroll-margin-top: var(--nav-h); }
#sources { padding-bottom: var(--space); }

/* Footnote marks stay gray, so color in the text means a link. */
.story-body sup a { color: var(--ink-faint); }
.story-body sup a:hover { color: var(--accent); text-decoration: underline; }

/* A nav link lands with the section's rule just under the nav. */
.story-page > section[id] { scroll-margin-top: calc(1rem - var(--space)); }

/* ---- What we want: the page's closing argument ----------------------- */

.want {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  margin: 0 auto;
  padding: var(--space) var(--gutter) 0;
}
.story-body .asks {
  width: 100%;
  margin: 0 0 2rem;
  border-collapse: collapse;
  font-size: 1.0625rem;
  line-height: 1.35;
}
.asks th, .asks td {
  padding: .8rem 1rem .8rem 0;
  border-top: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}
.asks thead th { border-top: 0; color: var(--ink-faint); font-size: .875rem; font-weight: 400; }
.asks tbody tr:first-child td { border-top: 2px solid var(--ink); }
.asks td:first-child, .asks th:first-child { width: 2.25rem; color: var(--accent); }
.asks td:nth-child(2) { font-weight: 700; }
.asks td:last-child, .asks th:last-child { width: 30%; padding-right: 0; }
.asks tbody tr:last-child td { border-bottom: 1px solid var(--rule); }
.asks .ask-done td:nth-child(2) { font-weight: 400; }
.asks .ask-done td:first-child { font-size: 1.25rem; font-weight: 700; line-height: 1.1; }
.asks sup a { text-decoration: none; }

.brief th { width: 8rem; }

/* Exhibits run in reading order, so they can be cited in a meeting. */
.ex figcaption::before,
caption.ex::before {
  content: "Exhibit " counter(exhibit) ". ";
  counter-increment: exhibit;
  color: var(--ink);
  font-weight: 700;
}
caption.ex {
  margin-bottom: .5rem;
  color: var(--ink-soft);
  font-size: .875rem;
  line-height: 1.45;
  text-align: left;
}

.photos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
  gap: 1.5rem;
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 2rem auto 0;
  padding: 0 var(--gutter);
}
.photos figure { margin: 0; }
.photos img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  border: 0;
}
.after figure img, .after figure video { border: 0; }

/* One lunch hour: three photos, each under its time. */
.lunch {
  max-width: calc(var(--wide) + 2 * var(--gutter));
  margin: 3.5rem auto 2rem;
  padding: 0 var(--gutter);
}
.lunch-title { margin: 0 0 .5rem; font-size: 1.125rem; }
.lunch-lead { max-width: 40rem; margin: 0 0 2rem; font-size: clamp(1.25rem, 2.5vw, 1.625rem); line-height: 1.3; }
.lunch-frames {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 1.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.lunch-frames p { margin: .6rem 0 0; }
.lunch-frames .lunch-time {
  margin: 0 0 .4rem;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -.02em;
}
.lunch-frames img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; border: 0; }
.lunch figcaption { color: var(--ink-soft); font-size: .875rem; line-height: 1.45; }

.story-body table.crossings td:first-child { font-weight: 400; }
.story-body table.crossings { margin-top: 1rem; }
.crossings .num { padding-left: 0; padding-right: 1rem; text-align: left; }

.clock td:first-child { white-space: nowrap; }
.clock td:last-child { font-weight: 400; }

details.log { margin: 1rem 0 2rem; }
details.log summary { color: var(--ink); cursor: pointer; font-weight: 700; }
details.log .crossings { font-size: .875rem; }
details.log td { padding-top: .45rem; padding-bottom: .45rem; }
details.log td:last-child { overflow-wrap: anywhere; }

/* Crashes placed along the street. Dots keep their size at every width. */
.strip { margin: 1.5rem 0 1rem; }
.strip-field {
  position: relative;
  height: calc(var(--levels) * 13px + 6px);
  margin: 0 5px;
  border-bottom: 2px solid var(--ink);
}
.dot {
  position: absolute;
  bottom: calc(var(--level) * 13px + 3px);
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px var(--paper);
}
.dot.hurt { background: var(--brand); }
.dot.unhurt { background: var(--paper); border: 1.5px solid var(--ink-faint); }
.strip-axis { position: relative; height: 1.75rem; margin: 0 5px; font-size: .8125rem; color: var(--ink-soft); }
.strip-axis span { position: absolute; top: .3rem; transform: translateX(-50%); white-space: nowrap; }
.strip-axis span:first-child { transform: none; }
.strip-axis span:last-child { transform: translateX(-100%); }
.strip-key { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; margin: 0 0 .5rem; color: var(--ink-soft); font-size: .875rem; }
.strip-key .dot { position: static; display: inline-block; margin: 0 .35rem 0 0; }

.story-body .cta {
  background: var(--brand);
  color: var(--on-brand);
}
.story-body .cta:hover { background: var(--brand-hover); }

/* The signature form can't scroll or report its height, so each frame is tall enough
   for the form plus its error messages. Recheck these when the form's text changes. */
.form-embed iframe { display: block; width: 100%; height: 1840px; border: 0; }
.form-open { color: var(--ink-soft); font-size: .875rem; }
@media (max-width: 40rem) {
  .form-embed iframe { height: 2450px; }
}
@media (max-width: 23rem) {
  .form-embed iframe { height: 2870px; }
}

/* One more thing: a check box, the action, and its link. */
.story-body .do-lead { margin: 2rem 0 .5rem; }
.do-list { margin: 0 0 .75rem; padding: 0; list-style: none; }
.do-list li {
  display: grid;
  grid-template-columns: 1.25rem 1fr 6.5rem;
  gap: .75rem;
  align-items: center;
  padding: .6rem 0;
  border-top: 1px solid var(--rule);
}
.do-list li:last-child { border-bottom: 1px solid var(--rule); }
.do-list input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: var(--brand); cursor: pointer; }
.do-list label { line-height: 1.3; cursor: pointer; }
.do-list input:checked + label { color: var(--ink-faint); }
.do-note { color: var(--ink-soft); font-size: .875rem; }


/* ---- Phones ------------------------------------------------------------ */

/* The picture on top, the card below it. Each card rests at the foot of the
   window while its picture holds, so it never passes over the map. */
@media (max-width: 60rem) {
  .step { align-items: flex-end; min-height: 100vh; min-height: 100svh; padding: 0 var(--gutter); }

  .card { position: sticky; bottom: .75rem; max-width: none; margin-bottom: .75rem; padding: 1rem 1.1rem; }
  .js .step + .step:nth-child(2) { margin-top: 30vh; margin-top: 30svh; }

  .map-base,
  .layer-map img,
  .layer-wide img {
    top: calc(var(--nav-h) + 5vh);
    bottom: auto;
    height: 50vh;
    height: 50svh;
    object-position: 70% 50%;
  }
  .layer-wide img { object-position: 50% 50%; }
  .layer-route img {
    top: calc(var(--nav-h) + .5rem);
    right: auto;
    left: 50%;
    height: 54vh;
    height: 54svh;
    transform: translateX(-50%);
  }
}

/* On phones a card fades once the next step takes over, so it never rises over the map. */
@media (max-width: 60rem) {
  .js .card { transition: opacity .2s ease; }
  .js .step:not(.active) .card { opacity: 0; }
}
@media (max-width: 60rem) and (prefers-reduced-motion: reduce) {
  .js .card { transition: none; }
}

/* Below about 58rem the nav folds behind a menu button, as across the suite.
   Open, the links fill the screen under the nav on a sheet that covers the
   page without moving it, and the page stops scrolling. The button's three
   lines turn into a cross. Closed, the links leave the tab order once the
   fade ends. */
@media (max-width: 58rem) {
  .site-nav { gap: .75rem; }
  .site-nav-mark { margin-right: auto; }
  .site-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    order: 3;
    width: 2.2rem;
    height: 2.14rem;
    padding: 0;
    color: var(--ink);
    background: none;
    border: 0;
    cursor: pointer;
    transition: background-color .2s ease;
  }
  .site-nav-toggle:hover, .site-nav.open .site-nav-toggle { background: var(--paper-sunk); }
  .site-nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .site-nav-toggle svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
  .site-nav-toggle path {
    transform-box: view-box;
    transform-origin: 12px 12px;
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), opacity .18s ease;
  }
  .site-nav.open .bar-top { transform: rotate(45deg) translateY(5px); }
  .site-nav.open .bar-mid { opacity: 0; }
  .site-nav.open .bar-bottom { transform: rotate(-45deg) translateY(-5px); }

  .site-nav-links {
    display: block;
    position: fixed;
    top: var(--sheet-top, var(--nav-h));
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: .5rem var(--gutter) max(1.5rem, env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .site-nav.open .site-nav-links { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .site-nav-links a { padding: .7rem 0; border-bottom: 0; font-size: 1rem; }
  .site-nav-links a[aria-current="true"] { color: var(--accent); }
  .site-nav-sub { display: block; margin: 0 0 .25rem; padding: 0 0 0 1rem; list-style: none; }
  .site-nav-sub a { padding: .45rem 0; font-size: .9375rem; }
  html.menu-locked { overflow: hidden; }
}
@media (max-width: 58rem) and (prefers-reduced-motion: reduce) {
  .site-nav-links, .site-nav-toggle, .site-nav-toggle path { transition: none; }
}
/* Without the script the menu can't open, so the links stay in place. */
@media (max-width: 58rem) {
  html:not(.js) .site-nav { flex-wrap: wrap; padding-bottom: .5rem; }
  html:not(.js) .site-nav-toggle { display: none; }
  html:not(.js) .site-nav-links { display: flex; flex-wrap: wrap; gap: 0 1.25rem; position: static; flex-basis: 100%; padding: 0; opacity: 1; visibility: visible; transform: none; overflow: visible; }
  html:not(.js) .site-nav-links a { padding: .3rem 0; font-size: .875rem; }
  html:not(.js) .site-nav-sub { display: none; }
}
/* The petition button keeps its full label on the narrowest phones. */
@media (max-width: 22.5rem) {
  .site-nav { gap: .5rem; }
  .site-nav-sign { padding: .35rem .6rem; }
}

/* ---- The crash clip pins in the middle of its own dark scene --------- */

.clip {
  position: relative;
  z-index: 2;
  height: 160vh;
  height: 160svh;
  margin: 2.5rem 0;
  background: var(--paper-sunk);
}
.clip-pin {
  position: sticky;
  top: var(--nav-h);
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  padding: 1.5rem var(--gutter);
  box-sizing: border-box;
}
.clip figure { display: flex; flex-direction: column; align-items: center; gap: 1rem; width: 100%; max-width: 56rem; margin: 0; }
.clip-frame { position: relative; width: 100%; }
.clip video {
  display: block;
  width: 100%;
  height: auto;
  max-height: min(68vh, 42rem);
  max-height: min(68svh, 42rem);
  background: #000;
}
.clip-play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.5rem;
  height: 4.5rem;
  transform: translate(-50%, -50%);
  background: var(--ink);
  border: 0;
  border-radius: 50%;
  box-shadow: 0 2px 16px rgba(0, 0, 0, .35);
  cursor: pointer;
}
.clip-play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-35%, -50%);
  border-style: solid;
  border-width: .8rem 0 .8rem 1.3rem;
  border-color: transparent transparent transparent #fff;
}
.clip-play:hover, .clip-play:focus-visible { background: var(--accent); }
.clip.playing .clip-play, html:not(.js) .clip-play { display: none; }
.clip figcaption { max-width: 34rem; margin: 0; color: var(--ink-soft); text-align: center; }

@media print {
  .clip { height: auto; background: none; color: inherit; }
  .clip-pin { position: static; height: auto; }
}

@media print {
  :root {
    --paper: #fff;
    --ink: #000;
    --ink-soft: #333;
    --ink-faint: #333;
    --brand: #000;
  }
  .site-nav { display: none; }
  .after { padding: 0; }
}