/*
  I AGREE — submission packet.

  The product lives in contracts. This packet lives one room over, in court
  filings: the same legal world, a different artifact, so it reads as family
  without being a copy of the app.

  Signature — pleading paper. Legal filings carry numbered lines down the left
  margin behind a double rule. Those numbers exist for one reason: so a reader
  can cite an exact line. That is this product's entire claim, so the page
  structure and the thesis are the same idea. The numbers here are real (one
  per content block, in document order) and the exhibit index reads them back
  at runtime, so a citation cannot go stale.

  Second device — exhibit stickers. Real exhibit labels are yellow, which is
  why canary appears: not brand carry-over, but the literal colour of the
  thing. The five deliverables are Exhibits A–E because they are, in fact,
  five items entered for a judge.

  Type is all-serif because legal documents are:
    Libre Caslon Display — the caption and headings, engraved-certificate
    Source Serif 4       — the body, schoolbook legibility for actual reading
    Courier Prime        — line numbers, citations, metadata; the pleading
                           typewriter, and the one thread back to the app
*/

:root {
  --blueback: #12275c;
  --onion: #f7f8f4;
  --carbon: #2c2a4a;
  --carbon-soft: #5d5a7d;
  --carbon-faint: #918eae;
  --rule: #c9cfdd;
  --canary: #f0c64a;
  --canary-deep: #a8790c;
  --oxblood: #8e2436;
  --sage: #3f7a5e;

  --display: "Libre Caslon Display", Georgia, serif;
  --body: "Source Serif 4", Georgia, serif;
  --type: "Courier Prime", ui-monospace, monospace;

  --rail: 78px;
  --wrap: 1080px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--blueback);
  color: var(--carbon);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* --------------------------------------------------- the filed document */

/* The blueback shows as a margin on every side; the paper sits on top of it. */
.filing {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 16px 40px;
}

.paper {
  background: var(--onion);
  position: relative;
  counter-reset: ln;
  padding: 0 40px 0 var(--rail);
  box-shadow: 0 0 0 1px rgba(18, 39, 92, 0.18);
}

/* The pleading margin: two rules, the outer heavier. */
.paper::before,
.paper::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rule);
}

.paper::before {
  left: calc(var(--rail) - 16px);
}

.paper::after {
  left: calc(var(--rail) - 11px);
}

/* A numbered line. Every block that carries content gets one, in document
   order, so the number is a real address rather than an ornament. */
/* A numbered element must span the paper's full content width, or its number
   hangs beside the text instead of in the margin. `display: block` covers the
   inline cases (a link wrapping an image). */
.line {
  position: relative;
  display: block;
  counter-increment: ln;
}

.line::before {
  content: counter(ln, decimal-leading-zero);
  position: absolute;
  left: calc(-1 * var(--rail) + 12px);
  top: 0.34em;
  width: 34px;
  text-align: right;
  font-family: var(--type);
  font-size: 0.6875rem;
  color: var(--carbon-faint);
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- masthead */

.tab {
  background: var(--blueback);
  color: var(--onion);
  display: flex;
  align-items: baseline;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 24px;
  max-width: var(--wrap);
  margin: 0 auto;
  position: sticky;
  top: 0;
  z-index: 30;
}

.tab .mark {
  font-family: var(--display);
  font-size: 1.15rem;
  letter-spacing: 0.06em;
}

.tab .docket {
  font-family: var(--type);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9aa9d4;
}

.tab .open {
  margin-left: auto;
  font-family: var(--type);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blueback);
  background: var(--canary);
  padding: 8px 14px;
  text-decoration: none;
  border: 1px solid var(--canary);
  transition: background 0.15s, color 0.15s;
}

.tab .open:hover {
  background: transparent;
  color: var(--canary);
}

/* -------------------------------------------------------- case caption */

.caption {
  padding: 76px 0 54px;
  text-align: center;
}

.caption .court {
  font-family: var(--type);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--carbon-faint);
  margin: 0 0 26px;
}

.caption .double {
  border-top: 3px solid var(--carbon);
  border-bottom: 1px solid var(--carbon);
  height: 5px;
  margin: 0 auto;
  max-width: 560px;
}

.caption h1 {
  font-family: var(--display);
  font-size: clamp(2.5rem, 7vw, 4.4rem);
  font-weight: 400;
  line-height: 1.02;
  margin: 26px 0 10px;
  letter-spacing: -0.005em;
}

.caption .sub {
  font-family: var(--type);
  font-size: clamp(0.72rem, 1.7vw, 0.92rem);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--carbon-soft);
  margin: 0 0 26px;
}

.caption .stand {
  font-size: 1.14rem;
  color: var(--carbon-soft);
  max-width: 58ch;
  margin: 26px auto 0;
  text-align: left;
}

/* --------------------------------------------------------------- index */

.index {
  margin: 44px 0 0;
  border-top: 3px solid var(--carbon);
  border-bottom: 3px solid var(--carbon);
  padding: 0;
  list-style: none;
}

.index-head {
  font-family: var(--type);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--carbon-faint);
  padding: 12px 0 10px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.index li + li a {
  border-top: 1px solid var(--rule);
}

.index a {
  display: grid;
  grid-template-columns: 2.6rem 1fr auto;
  align-items: baseline;
  gap: 16px;
  padding: 13px 8px 13px 0;
  text-decoration: none;
  color: var(--carbon);
  transition: background 0.14s, padding-left 0.14s;
}

.index a:hover {
  background: rgba(240, 198, 74, 0.22);
  padding-left: 8px;
}

.index .ex {
  font-family: var(--type);
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  color: var(--canary-deep);
}

.index .what {
  font-family: var(--display);
  font-size: 1.12rem;
  line-height: 1.25;
}

.index .at {
  font-family: var(--type);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--carbon-faint);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ------------------------------------------------------------ exhibits */

.exhibit {
  padding: 62px 0;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 74px;
}

.exhibit-head {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 8px;
}

/* The exhibit sticker. Yellow because exhibit labels are yellow. */
.sticker {
  flex-shrink: 0;
  background: var(--canary);
  border: 1px solid var(--canary-deep);
  padding: 7px 12px 6px;
  font-family: var(--type);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #4a3403;
  line-height: 1.25;
  text-align: center;
  rotate: -1.6deg;
  box-shadow: 1px 2px 0 rgba(18, 39, 92, 0.16);
}

.sticker b {
  display: block;
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1;
  margin-top: 2px;
}

.exhibit h2 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  line-height: 1.12;
  margin: 0;
}

.exhibit .note {
  color: var(--carbon-soft);
  margin: 6px 0 30px;
  max-width: 62ch;
}

.prose {
  max-width: 64ch;
  font-size: 1.1rem;
}

.prose p {
  margin: 0 0 1.05em;
}

.prose p:last-child {
  margin-bottom: 0;
}

.stamped {
  display: inline-block;
  margin-top: 26px;
  border-top: 1px solid var(--rule);
  padding-top: 12px;
  font-family: var(--type);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--carbon-faint);
}

/* ----------------------------------------------------------- the slides */

.deck {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 14px;
}

.slide {
  flex: 0 0 min(840px, 86vw);
  scroll-snap-align: center;
  aspect-ratio: 16 / 9;
  background: #fff;
  border: 1px solid var(--carbon);
  padding: 34px 38px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow: 6px 6px 0 rgba(18, 39, 92, 0.12);
}

.slide h3 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.25rem, 2.5vw, 1.9rem);
  line-height: 1.1;
  margin: 6px 0 0;
}

.slide .eyebrow {
  font-family: var(--type);
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--carbon-faint);
  margin: 0;
}

.slide .no {
  position: absolute;
  right: 20px;
  top: 16px;
  font-family: var(--type);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--carbon-faint);
}

.slide .body {
  margin-top: 12px;
  font-size: clamp(0.84rem, 1.3vw, 1rem);
  color: var(--carbon-soft);
  line-height: 1.5;
}

/* Anchored to the foot of the slide rather than stretched to fill it: the
   claim sits at the top, the evidence along the bottom edge. Stretching left
   a dead band under the columns. */
.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: auto;
  padding-top: 18px;
}

.grid3 .cell {
  border-top: 3px solid var(--canary-deep);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
}

.grid3 .cell:nth-child(1) {
  border-top-color: var(--sage);
}

.grid3 .cell:nth-child(3) {
  border-top-color: var(--oxblood);
}

.grid3 .big {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.2vw, 1.7rem);
  line-height: 1.06;
  margin-bottom: 6px;
}

.grid3 .cap {
  font-size: clamp(0.72rem, 1.05vw, 0.86rem);
  color: var(--carbon-soft);
  line-height: 1.42;
}

.flow {
  display: flex;
  gap: 10px;
  margin-top: auto;
  padding-top: 18px;
}

.step {
  flex: 1;
  border-top: 3px solid var(--rule);
  padding-top: 10px;
  display: flex;
  flex-direction: column;
}

.step.key {
  border-top-color: var(--sage);
}

.step .k {
  font-family: var(--type);
  font-size: 0.58rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--carbon-faint);
  margin-bottom: 5px;
}

.step .v {
  font-family: var(--display);
  font-size: clamp(0.9rem, 1.4vw, 1.1rem);
  line-height: 1.16;
  margin-bottom: 6px;
}

.step .d {
  font-size: clamp(0.7rem, 1.05vw, 0.84rem);
  color: var(--carbon-soft);
  line-height: 1.42;
}

/* ------------------------------------------------------------- exhibits */

.shot,
video {
  display: block;
  width: 100%;
  border: 1px solid var(--carbon);
  background: #fff;
}

.acts {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.act {
  font-family: var(--type);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 13px 22px;
  border: 1px solid var(--blueback);
  background: var(--blueback);
  color: var(--onion);
  transition: background 0.15s, color 0.15s;
}

.act:hover {
  background: transparent;
  color: var(--blueback);
}

.act.plain {
  background: transparent;
  color: var(--blueback);
}

.act.plain:hover {
  background: var(--canary);
  border-color: var(--canary-deep);
}

/* ------------------------------------------------------------- schedule */

.schedule {
  width: 100%;
  border-collapse: collapse;
}

.schedule th,
.schedule td {
  text-align: left;
  padding: 13px 12px 13px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.schedule th {
  font-family: var(--type);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--carbon-faint);
  font-weight: 400;
  border-bottom: 2px solid var(--carbon);
}

.schedule .item {
  font-family: var(--display);
  font-size: 1rem;
  white-space: nowrap;
}

.schedule .desc {
  color: var(--carbon-soft);
  font-size: 0.96rem;
}

.schedule a {
  font-family: var(--type);
  font-size: 0.78rem;
  color: var(--blueback);
  word-break: break-word;
  text-underline-offset: 3px;
}

.scroller {
  overflow-x: auto;
}

/* -------------------------------------------- certificate of service */

.certificate {
  background: var(--blueback);
  color: #c3cce6;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 40px 40px 48px;
}

.certificate .ttl {
  font-family: var(--type);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8b9bc9;
  margin: 0 0 12px;
}

.certificate p {
  margin: 0;
  max-width: 68ch;
  font-size: 0.98rem;
  line-height: 1.6;
}

.certificate a {
  color: var(--canary);
}

/* ------------------------------------------------------ quality floor */

a:focus-visible,
video:focus-visible {
  outline: 2px solid var(--oxblood);
  outline-offset: 3px;
}

/* One orchestrated gesture: each sticker settles as its exhibit is reached,
   the way a label is pressed down. Nothing else on the page moves. */
@keyframes press {
  from {
    rotate: -7deg;
    scale: 1.16;
    opacity: 0;
  }
  to {
    rotate: -1.6deg;
    scale: 1;
    opacity: 1;
  }
}

/* Gated on support: without a view timeline this would either fire all five at
   once on load, or leave a sticker stuck at its 0-opacity start. Unsupported
   browsers get the sticker with no animation, which is the right fallback. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sticker {
      animation: press 420ms cubic-bezier(0.2, 0.9, 0.3, 1.05) both;
      animation-timeline: view();
      animation-range: entry 0% cover 18%;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ------------------------------------------------------------- narrow */

@media (max-width: 720px) {
  :root {
    --rail: 46px;
  }
  body {
    font-size: 17px;
  }
  .filing {
    padding: 0 0 24px;
  }
  .paper {
    padding-right: 20px;
  }
  /* One rule at this width; two reads as clutter rather than as a margin. */
  .paper::after {
    display: none;
  }
  .line::before {
    left: calc(-1 * var(--rail) + 6px);
    width: 24px;
    font-size: 0.6rem;
  }
  .caption {
    padding: 48px 0 36px;
  }
  .exhibit {
    padding: 46px 0;
  }
  .index a {
    grid-template-columns: 2rem 1fr;
    row-gap: 2px;
  }
  .index .at {
    grid-column: 2;
  }
  /* Deck items stretch to the tallest slide, so bottom-anchoring strands the
     columns below a gap once the slides are content-height. */
  .grid3,
  .flow {
    grid-template-columns: 1fr;
    flex-direction: column;
    gap: 10px;
    margin-top: 18px;
    padding-top: 0;
  }
  /* Each slide takes its own height instead of matching the tallest. */
  .deck {
    align-items: flex-start;
  }
  .slide {
    aspect-ratio: auto;
    padding: 26px 22px;
  }
  /* A three-row sticky bar costs 135px of a phone screen. The packet is a
     document read top to bottom; the masthead can scroll away with it. */
  .tab {
    position: static;
    padding: 12px 20px;
  }
  .exhibit {
    scroll-margin-top: 12px;
  }
  .certificate {
    padding: 32px 20px 40px;
  }
}