/* AQUAVAIL LTD — aquavail.work
   ------------------------------------------------------------------------------------------
   THERE IS NO GLOBAL RESET IN THIS FILE, AND THAT IS DELIBERATE.

   Every observation on this site is a plate that declares its own box model, because the thing
   hung beside it is positioned against THE MEASURE — the column of text — and not against the
   page. A blanket `* { margin: 0; box-sizing: border-box }` would make that relationship an
   accident of whichever rule happened to be written last: the note would be placed against a box
   whose width came from somewhere else entirely, and at the first change of gutter it would sit
   over the text instead of beside it. So each plate below states its own grid, its own columns
   and its own padding, and an element with no rule here keeps the margin the browser gives it.

   The cascade order is fixed on the next line, before anything is written into any layer, so it
   cannot drift as rules are added. Everything after the last layer is unlayered and outranks all
   of them; that tail holds the reduced-motion settlement and the print sheet, the two places
   where a specificity accident must never be able to win.
   ------------------------------------------------------------------------------------------ */

@layer tokens, base, frame, plate, shape, tool, draw, motion;

/* ====================================================================== tokens
   Five assigned colours and nothing else. Every other value on this site is mixed from them, so
   the palette cannot drift and there is no sixth hex to keep in step.

   This is a DARK site, and dark grounds fail small text far more quietly than light ones do: a
   soft grey that looks restrained on cream is often below AA on petrol. Every mix that carries
   text therefore has its measured ratio written beside it, against each ground it is used on.
   The figures are from the pixel probe, not from a calculator against the token's nominal value,
   because what is painted is what the reader has to read. */

@layer tokens {
  :root {
    color-scheme: dark;

    --av-bg: #0f1f24;          /* the page */
    --av-ink: #e4ece9;         /* the writing — 14.1:1 on the page */
    --av-teal: #5fb6a8;        /* the rule, the instrument, the live mark */
    --av-amber: #c98a52;       /* the reading taken, the one warm thing on the page */
    --av-surface: #162b31;     /* a plate laid on the page */

    /* A plate is the page lifted a little, not a different colour. */
    --av-plate: color-mix(in oklab, var(--av-ink) 4%, var(--av-surface));
    --av-plate-deep: color-mix(in oklab, var(--av-bg) 72%, var(--av-surface));

    /* Quiet writing. 76% was chosen over the 60% that reads as "muted" on a light page: at 60%
       this ink measures 5.8:1 on the page but only 4.2:1 on a plate, which is under AA for the
       small print it carries. 76% holds 8.4 / 7.3 / 6.2 on page, surface and plate. */
    --av-ink-soft: color-mix(in oklab, var(--av-ink) 76%, var(--av-bg));
    --av-ink-rule: color-mix(in oklab, var(--av-ink) 26%, var(--av-bg));
    --av-ink-hair: color-mix(in oklab, var(--av-ink) 13%, var(--av-bg));

    --av-teal-lift: color-mix(in oklab, var(--av-teal) 82%, var(--av-ink));
    --av-amber-lift: color-mix(in oklab, var(--av-amber) 84%, var(--av-ink));
    --av-teal-wash: color-mix(in oklab, var(--av-teal) 14%, var(--av-bg));
    --av-amber-wash: color-mix(in oklab, var(--av-amber) 13%, var(--av-bg));

    /* The inversion. On a dark page the inverted plate is paper, and the accents have to be
       taken the other way — teal at full strength measures 2.1:1 on paper and is unreadable, so
       the paper plate carries darkened mixes of the same two colours. */
    --av-paper: color-mix(in oklab, var(--av-ink) 86%, white);
    --av-paper-ink: var(--av-bg);                                       /* 14.5:1 on paper */
    --av-paper-soft: color-mix(in oklab, var(--av-bg) 80%, var(--av-paper));   /* 8.0:1 */
    --av-paper-teal: color-mix(in oklab, var(--av-teal) 45%, var(--av-bg));    /* 5.6:1 */
    --av-paper-amber: color-mix(in oklab, var(--av-amber) 52%, var(--av-bg));  /* 5.5:1 */
    --av-paper-rule: color-mix(in oklab, var(--av-bg) 22%, var(--av-paper));

    /* Tide bands. The texture of the whole site: level lines left by water, close together where
       the water sits longest and spreading as they climb. Three densities, one for the page, one
       for a plate head and one that washes across the set piece. */
    --av-band-faint: repeating-linear-gradient(
        to bottom,
        color-mix(in oklab, var(--av-teal) 7%, transparent) 0 1px,
        transparent 1px 7px);
    --av-band-mid: repeating-linear-gradient(
        to bottom,
        color-mix(in oklab, var(--av-teal) 15%, transparent) 0 1px,
        transparent 1px 5px);
    --av-band-amber: repeating-linear-gradient(
        to bottom,
        color-mix(in oklab, var(--av-amber) 19%, transparent) 0 1px,
        transparent 1px 6px);

    /* The measure is 40rem because the body face sets about 70 characters there, and the note
       column is 15rem because a qualifying note is two or three lines and no more. */
    --av-measure: 40rem;
    --av-note-col: 15rem;
    --av-gutter: 1.25rem;
    --av-step: 0.8rem;
    /* how much of the opening band is photograph before the page takes over */
    --av-open-top: 9.5rem;

    --av-face-head: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --av-face-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;

    --av-ease: cubic-bezier(0.22, 0.68, 0.3, 1);
    --av-ease-out: cubic-bezier(0.16, 0.9, 0.3, 1);
  }

  @media (min-width: 60rem) {
    :root { --av-gutter: 2.25rem; --av-open-top: 13.5rem; }
  }
}

/* ======================================================================== base */

@layer base {
  html {
    background: var(--av-bg);
    /* The faintest tide banding runs the whole height of the document, so a plate edge is a
       change in the banding rather than a line drawn for its own sake. */
    background-image: var(--av-band-faint);
    scroll-behavior: smooth;
  }

  body {
    margin: 0;
    background: transparent;
    color: var(--av-ink);
    font-family: var(--av-face-body);
    font-size: 1rem;
    line-height: 1.62;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
  }

  h1, h2, h3 {
    font-family: var(--av-face-head);
    font-weight: 500;
    line-height: 1.18;
    margin: 0 0 var(--av-step);
  }

  a {
    color: var(--av-teal-lift);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color 180ms var(--av-ease), text-decoration-color 180ms var(--av-ease);
  }
  a:hover { color: var(--av-ink); text-decoration-color: var(--av-amber); }

  /* One focus ring for the whole site, drawn in the warm colour so it is never confused with the
     teal that marks a live reading. :focus-visible only — a mouse click on a plate should not
     light a ring, but every keyboard stop must. */
  :focus-visible {
    outline: 2px solid var(--av-amber-lift);
    outline-offset: 3px;
    border-radius: 1px;
  }

  ::selection { background: color-mix(in oklab, var(--av-teal) 38%, transparent); color: var(--av-ink); }

  /* Available to assistive technology, painted nowhere. */
  .av-sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
  }

  .av-skip {
    position: absolute;
    left: var(--av-gutter);
    top: -4rem;
    z-index: 40;
    background: var(--av-amber);
    color: #10181a;
    font-weight: 600;
    padding: 0.6rem 1rem;
    text-decoration: none;
    transition: top 160ms var(--av-ease-out);
  }
  .av-skip:focus { top: 0.75rem; }
}

/* ======================================================================= frame
   Masthead, the sidecar index and the report column. The index is docked beside the measure from
   72rem up and is a strip under the masthead below that; it is the same list of links either
   way, so with the script blocked, with CSS blocked, or on a phone, every page is still one tap
   from here. */

@layer frame {
  .av-mast {
    position: relative;
    border-bottom: 1px solid var(--av-ink-hair);
    background: linear-gradient(to bottom, var(--av-surface), var(--av-bg));
  }

  .av-mast-in {
    padding: 1.4rem var(--av-gutter) 1.1rem;
    max-width: 78rem;
    margin-inline: auto;
  }

  .av-wordmark {
    margin: 0;
    font-family: var(--av-face-head);
    font-size: 1.5rem;
    letter-spacing: 0.1em;
  }
  .av-wordmark a {
    color: var(--av-ink);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 220ms var(--av-ease);
  }
  .av-wordmark a:hover { border-bottom-color: var(--av-teal); }

  .av-mast-sub {
    margin: 0.35rem 0 0;
    color: var(--av-ink-soft);
    font-size: 0.82rem;
    letter-spacing: 0.04em;
  }

  .av-mast-rule { display: block; width: 100%; height: 14px; }
  .av-foot-rule { display: block; width: 100%; height: 10px; margin-top: 1.6rem; }
  .av-rule-line { stroke: var(--av-teal); stroke-width: 1.4; }
  .av-rule-ticks line { stroke: var(--av-ink-rule); stroke-width: 1.2; }
  .av-rule-read { stroke: var(--av-amber); stroke-width: 2; }

  .av-frame { display: block; }

  /* The sidecar: a strip when narrow. The list wraps rather than scrolling sideways, because a
     horizontally scrolling index on a phone hides half of itself. */
  .av-sidecar {
    border-bottom: 1px solid var(--av-ink-hair);
    padding: 0.9rem var(--av-gutter) 1rem;
    background: color-mix(in oklab, var(--av-surface) 55%, var(--av-bg));
  }

  .av-sidecar-head {
    margin: 0 0 0.5rem;
    font-size: 0.68rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--av-ink-soft);
  }

  .av-sidecar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 1.1rem;
    font-size: 0.86rem;
  }

  .av-sidecar-list > li > a {
    display: inline-block;
    padding: 0.2rem 0;
    color: var(--av-ink);
    text-decoration: none;
    border-bottom: 1px solid var(--av-ink-rule);
    transition: border-color 200ms var(--av-ease), color 200ms var(--av-ease);
  }
  .av-sidecar-list > li > a:hover { border-bottom-color: var(--av-teal); color: var(--av-teal-lift); }
  .av-sidecar-list > li > a[aria-current="page"] {
    border-bottom-color: var(--av-amber);
    color: var(--av-amber-lift);
  }

  /* On the strip the ten observation links are a second rank of the same row; they are the body
     of this page and would double the height of the header for no gain. */
  .av-sidecar-obs { display: none; }

  .av-report { min-width: 0; }
  .av-report:focus { outline: none; }

  @media (min-width: 72rem) {
    .av-frame {
      display: grid;
      grid-template-columns: 16.5rem minmax(0, 1fr);
      align-items: start;
    }

    .av-sidecar {
      position: sticky;
      top: 0;
      border-bottom: 0;
      border-right: 1px solid var(--av-ink-hair);
      padding: 2rem 1.3rem 2rem var(--av-gutter);
      max-height: 100vh;
      overflow-y: auto;
      background: linear-gradient(to right,
        color-mix(in oklab, var(--av-surface) 70%, var(--av-bg)), var(--av-bg));
    }

    .av-sidecar-list {
      display: block;
      font-size: 0.9rem;
    }
    .av-sidecar-list > li { margin-bottom: 0.46rem; }
    .av-sidecar-list > li > a { border-bottom: 0; border-left: 2px solid transparent; padding-left: 0.6rem; }
    .av-sidecar-list > li > a:hover { border-left-color: var(--av-teal); }
    .av-sidecar-list > li > a[aria-current="page"] { border-left-color: var(--av-amber); }

    .av-sidecar-obs {
      display: block;
      list-style: none;
      margin: 0.4rem 0 0.9rem;
      padding: 0 0 0 0.7rem;
      border-left: 1px solid var(--av-ink-hair);
      font-size: 0.78rem;
    }
    .av-sidecar-obs li { margin: 0.1rem 0; }
    .av-sidecar-obs a {
      display: block;
      padding: 0.12rem 0.4rem;
      color: var(--av-ink-soft);
      text-decoration: none;
      transition: background-color 180ms var(--av-ease), color 180ms var(--av-ease);
    }
    .av-sidecar-obs a:hover {
      background: var(--av-teal-wash);
      color: var(--av-ink);
    }
  }
}

/* ======================================================================= plate
   The shared anatomy of an observation: its number, its stamped head, and the note hung beside
   the measure. Each shape below rearranges this; none of them restates it. */

@layer plate {
  .av-open {
    position: relative;
    isolation: isolate;
    border-bottom: 1px solid var(--av-ink-hair);
    overflow: hidden;
  }

  /* The photograph is sized to the BAND, not to the whole opener.
     Stretched over the full height of the opener it is scaled to cover a tall box, so at 390px
     the only part of it inside the visible band is the top of the frame — which on this picture
     is weather. Cropping it to the band instead means object-position chooses what is seen at
     every width, and what is worth seeing here is the wall meeting the shingle. */
  .av-open-art {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    width: 100%;
    height: calc(var(--av-open-top) + 2.5rem);
    object-fit: cover;
    object-position: 56% 62%;
    z-index: -2;
  }

  /* The scrim, and the reason it runs DOWN the band rather than across it.
     The first version faded from left to right, full strength across the text column and thinning
     past 72% where nothing is set. That is safe at 1440 and nowhere else: the measure is centred
     and fixed, so as the viewport widens the text occupies a smaller fraction of the band and as
     it narrows a larger one. At 1024 the lede's last line reached 81% of the band, where the wash
     was down to 0.5 and the ground under it measured about 4.2:1 — under AA for that size, on a
     page the probe only ever measures at 1440.
     Vertically the geometry is fixed in rem: the photograph is clear for the first --av-open-top,
     and every line of type begins below it on a ground that is 0.985 petrol at every width. */
  .av-open::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(to bottom,
      rgba(15, 31, 36, 0.20) 0,
      rgba(15, 31, 36, 0.26) calc(var(--av-open-top) * 0.42),
      rgba(15, 31, 36, 0.62) calc(var(--av-open-top) * 0.72),
      rgba(15, 31, 36, 0.93) calc(var(--av-open-top) * 0.92),
      rgba(15, 31, 36, 0.985) var(--av-open-top),
      rgba(15, 31, 36, 0.99) 100%);
  }

  /* A hairline of the warm colour where the photograph gives way to the page: the band stops
     being a photograph at a stated line rather than dissolving into one. */
  .av-open::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: var(--av-open-top);
    height: 1px;
    background: linear-gradient(to right,
      color-mix(in oklab, var(--av-amber) 70%, transparent), transparent 62%);
    z-index: -1;
  }

  .av-open-in {
    position: relative;
    max-width: var(--av-measure);
    margin-inline: auto;
    padding: calc(var(--av-open-top) + 1.6rem) var(--av-gutter) 3rem;
  }

  .av-open h1 {
    font-size: clamp(1.75rem, 1.15rem + 2.5vw, 3rem);
    letter-spacing: -0.012em;
    margin-bottom: 1.1rem;
    max-width: 22ch;
  }

  .av-open-lede {
    margin: 0 0 1.1rem;
    font-size: 1.04rem;
    color: var(--av-ink);
    max-width: 44ch;
  }

  .av-open-credit {
    margin: 0;
    font-size: 0.74rem;
    letter-spacing: 0.02em;
    color: var(--av-ink-soft);
    border-left: 2px solid var(--av-amber);
    padding-left: 0.6rem;
    max-width: 42ch;
  }

  /* Every observation is this grid. One column of measure, one column of margin, and the note
     lands in the margin column on the row of the body rather than after it. */
  .av-obs {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    padding: 2.6rem var(--av-gutter) 2.8rem;
    border-bottom: 1px solid var(--av-ink-hair);
  }
  /* This is the one place a box model is declared for a whole set of elements, and it is declared
     here rather than in a reset because this is the rule that creates the need for it: the
     children of a plate are given `width: 100%` so that a short one still sits on the measure
     instead of shrinking to its own text. Content-box plus a padding of its own then puts the
     element two gutters wider than the plate — which at 320px is a page that scrolls sideways by
     exactly twice the gutter, and at 1440px is invisible because the max-width has taken over
     and nothing looks wrong. Measured at nine widths; it was wrong at five of them. */
  .av-obs > * {
    box-sizing: border-box;
    grid-column: 1;
    max-width: var(--av-measure);
    margin-inline: auto;
    width: 100%;
  }

  .av-obs-no {
    margin: 0 0 0.5rem;
    font-family: var(--av-face-body);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3em;
    color: var(--av-amber-lift);
  }

  /* stamped-caps: the head is set as a stamp pressed onto the plate — small caps, wide tracking,
     a rule under it that carries the amber reading at its left end. */
  .av-obs-h {
    font-size: clamp(1.18rem, 1rem + 0.8vw, 1.6rem);
    letter-spacing: 0.055em;
    text-transform: uppercase;
    margin: 0 0 1.15rem;
    padding-bottom: 0.55rem;
    position: relative;
    border-bottom: 1px solid var(--av-ink-rule);
  }
  .av-obs-h::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 3.2rem;
    height: 2px;
    background: var(--av-amber);
    transition: width 420ms var(--av-ease-out);
  }
  .av-obs:hover .av-obs-h::after { width: 5.4rem; }

  .av-obs p { margin: 0 0 0.95rem; }

  /* The hanging note. Below 72rem it is a block indented from the measure with the same amber
     key; it never becomes a footnote and it never overflows. */
  .av-note {
    margin: 0.4rem auto 1.2rem;
    padding: 0.7rem 0.9rem 0.75rem;
    background: var(--av-plate-deep);
    border-left: 2px solid var(--av-teal);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--av-ink-soft);
    transition: border-color 260ms var(--av-ease), color 260ms var(--av-ease);
  }
  .av-obs:hover > .av-note { border-left-color: var(--av-amber); color: var(--av-ink); }
  .av-note p { margin: 0; }
  .av-note p + p { margin-top: 0.35rem; }
  .av-note-k {
    font-size: 0.64rem;
    font-weight: 600;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--av-teal-lift);
  }

  @media (min-width: 72rem) {
    .av-obs {
      grid-template-columns: minmax(0, var(--av-measure)) var(--av-note-col);
      column-gap: 2.5rem;
      justify-content: center;
      padding-inline: var(--av-gutter);
    }
    .av-obs > .av-note {
      grid-column: 2;
      grid-row: 2 / span 24;
      align-self: start;
      max-width: none;
      margin: 0.2rem 0 0;
      background: transparent;
      border-left: 1px solid var(--av-ink-rule);
      padding: 0 0 0 0.95rem;
    }
  }
}

/* ======================================================================= shape
   One rule block per composition shape, in plan order. No shape is used twice, and no two of
   them share a grid. */

@layer shape {

  /* 01 offset-split — the statement in a tall left column, the list dropped lower on the right,
     so the eye reads down and then across rather than across and back. */
  @media (min-width: 52rem) {
    .av-split { column-gap: 2.5rem; }
    .av-split .av-split-a,
    .av-split .av-split-b { max-width: none; }
  }
  @media (min-width: 52rem) and (max-width: 71.999rem) {
    .av-split {
      grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
      align-items: start;
    }
    .av-split .av-obs-no, .av-split .av-obs-h { grid-column: 1 / -1; max-width: var(--av-measure); }
    .av-split .av-split-a { grid-column: 1; }
    .av-split .av-split-b { grid-column: 2; margin-top: 2.4rem; }
    .av-split .av-note { grid-column: 1 / -1; }
  }
  @media (min-width: 72rem) {
    .av-split {
      grid-template-columns: minmax(0, 23rem) minmax(0, 15.5rem) var(--av-note-col);
    }
    .av-split .av-obs-no, .av-split .av-obs-h { grid-column: 1 / 3; }
    .av-split .av-split-a { grid-column: 1; }
    .av-split .av-split-b { grid-column: 2; margin-top: 2.6rem; }
    .av-split > .av-note { grid-column: 3; }
  }

  .av-split-b {
    margin: 0;
    padding: 0.9rem 1rem 1rem;
    background: var(--av-plate);
    border-top: 2px solid var(--av-teal);
  }
  .av-split-b dt {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--av-teal-lift);
    margin-top: 0.7rem;
  }
  .av-split-b dt:first-child { margin-top: 0; }
  .av-split-b dd {
    margin: 0.15rem 0 0;
    font-size: 0.9rem;
    color: var(--av-ink-soft);
  }

  /* 02 ledger-rows — entries and readings share one ruled column, as they do on a site sheet.
     The entered rows carry the amber key; the computed rows carry the teal one. */
  .av-ledger-lede { color: var(--av-ink-soft); font-size: 0.92rem; }
  .av-ledger-sheet { margin: 0 auto; }
  .av-ledger-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
  }
  .av-ledger-table th {
    text-align: left;
    font-weight: 400;
    color: var(--av-ink-soft);
    padding: 0.52rem 0.75rem 0.52rem 0.6rem;
    width: 46%;
    vertical-align: baseline;
  }
  .av-ledger-table td { padding: 0.52rem 0.6rem; vertical-align: baseline; }
  /* An entry cell is a field and its unit on one line. Left to themselves the input takes the
     whole cell — which on a wide ledger is a 340px box holding the number 15 — and the unit is
     pushed onto a line of its own under it. */
  .av-ledger-in td {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
  }
  .av-ledger-in input[type="number"] { width: 6.5rem; flex: 0 0 auto; }
  .av-ledger-in { border-bottom: 1px solid var(--av-ink-hair); }
  .av-ledger-in th { border-left: 2px solid var(--av-amber); }
  .av-ledger-out { border-bottom: 1px solid var(--av-ink-hair); background: var(--av-plate-deep); }
  .av-ledger-out th { border-left: 2px solid var(--av-teal); color: var(--av-ink); }
  .av-ledger-out:last-child { border-bottom: 0; }

  /* 03 full-bleed band — runs the full width of the report column, banded ground, the drawing
     standing on it. No note hangs here: the drawing carries its own caption instead. */
  .av-bleed {
    display: block;
    padding: 0;
    background:
      var(--av-band-mid),
      linear-gradient(to bottom, var(--av-bg), var(--av-surface) 46%, var(--av-bg));
    border-top: 1px solid var(--av-teal);
  }
  .av-bleed-in {
    max-width: 52rem;
    margin-inline: auto;
    padding: 2.8rem var(--av-gutter) 2.6rem;
  }
  .av-bleed-lede { color: var(--av-ink-soft); font-size: 0.95rem; max-width: 46ch; }
  .av-stage {
    margin: 1.4rem 0 0.6rem;
    background: color-mix(in oklab, var(--av-bg) 82%, black);
    border: 1px solid var(--av-ink-rule);
    padding: 0.8rem;
  }
  .av-section { display: block; width: 100%; height: auto; }
  .av-stage-cap {
    margin: 0 0 1rem;
    font-size: 0.76rem;
    color: var(--av-ink-soft);
    max-width: 52ch;
  }
  .av-replay {
    font: inherit;
    font-size: 0.8rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--av-ink);
    background: transparent;
    border: 1px solid var(--av-teal);
    padding: 0.5rem 1.1rem;
    cursor: pointer;
    transition: background-color 200ms var(--av-ease), color 200ms var(--av-ease),
                border-color 200ms var(--av-ease);
  }
  .av-replay:hover { background: var(--av-teal); color: #0d1a1e; border-color: var(--av-teal); }

  /* 04 figure-pair — a photograph and a drawing of equal width, read as one statement. */
  .av-pair-lede { color: var(--av-ink-soft); font-size: 0.95rem; }
  .av-pair-grid { display: grid; gap: 1.1rem; }
  @media (min-width: 46rem) {
    .av-pair-grid { grid-template-columns: 1fr 1fr; align-items: end; }
  }
  .av-fig { margin: 0; }
  .av-fig img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--av-ink-rule);
    filter: saturate(0.92);
    transition: filter 400ms var(--av-ease);
  }
  .av-fig:hover img { filter: saturate(1.04); }
  .av-fig figcaption {
    margin-top: 0.5rem;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--av-ink-soft);
    border-top: 1px solid var(--av-ink-hair);
    padding-top: 0.4rem;
  }
  .av-fig-drawn .av-window {
    display: block;
    width: 100%;
    height: auto;
    background: var(--av-plate);
    border: 1px solid var(--av-ink-rule);
  }

  /* 05 inset-plate — set in from the measure on both sides and lifted off the page, so the one
     interactive thing on the plate is visibly a sheet rather than part of the running text. */
  .av-inset .av-plate {
    background: var(--av-plate);
    border: 1px solid var(--av-ink-rule);
    border-top: 3px solid var(--av-teal);
    padding: 1.4rem 1.2rem 1.2rem;
    margin: 0 0 0.6rem;
  }
  @media (min-width: 46rem) {
    /* The inset is the margin: the plate gives back 1.8rem on each side of the measure. A width
       of 100% would spend that margin outside the plate instead, so this one element takes its
       width from what is left after the inset rather than from the measure. */
    .av-inset .av-plate { width: auto; margin-inline: 1.8rem; padding: 1.7rem 1.9rem 1.4rem; }
  }
  .av-plate-lede {
    margin-top: 0;
    font-size: 0.88rem;
    color: var(--av-ink-soft);
  }

  /* 06 margin-annotated — three notes, each one placed on the row of the paragraph it qualifies,
     so the passage reads straight down and the qualifications stand level with their sentences. */
  .av-annot p { max-width: 38rem; }
  @media (min-width: 72rem) {
    .av-annot > .av-note-inline:nth-of-type(1) { grid-row: 3; }
    .av-annot > .av-note-inline:nth-of-type(2) { grid-row: 4; }
    .av-annot > .av-note-inline:nth-of-type(3) { grid-row: 5; }
    .av-annot > .av-note-inline { grid-column: 2; margin-top: 0.3rem; }
  }
  .av-note-inline { border-left-color: var(--av-amber); }
  .av-note-inline .av-note-k { color: var(--av-amber-lift); }

  /* 07 wide-figure — the photograph breaks out wider than the measure and the text returns under
     it, which is the one place on the page where the column is interrupted. */
  .av-wide-fig { margin: 0 0 1.3rem; }
  .av-wide-fig img {
    display: block;
    width: 100%;
    height: auto;
    border: 1px solid var(--av-ink-rule);
  }
  .av-wide-fig figcaption {
    margin-top: 0.45rem;
    font-size: 0.74rem;
    color: var(--av-ink-soft);
  }
  @media (min-width: 60rem) {
    .av-wide > .av-wide-fig { max-width: 54rem; }
  }
  @media (min-width: 72rem) {
    .av-wide { grid-template-columns: minmax(0, var(--av-measure)) var(--av-note-col); }
    .av-wide > .av-wide-fig { grid-column: 1 / -1; max-width: 57.5rem; }
  }
  .av-wide-lede { font-size: 1rem; }
  .av-order {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: av-order;
  }
  .av-order li {
    counter-increment: av-order;
    position: relative;
    padding: 0.45rem 0 0.45rem 2.6rem;
    border-top: 1px solid var(--av-ink-hair);
    font-size: 0.92rem;
    color: var(--av-ink-soft);
  }
  .av-order li:hover { color: var(--av-ink); }
  .av-order li::before {
    content: counter(av-order, decimal-leading-zero);
    transition: color 200ms var(--av-ease);
    position: absolute;
    left: 0;
    top: 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: var(--av-teal-lift);
  }

  /* 08 card-grid — four plates of equal weight. The only grid on the site that repeats a shape
     on purpose: four documents issued together should look like four of one thing. */
  .av-card-grid {
    display: grid;
    gap: 0.9rem;
    grid-template-columns: minmax(0, 1fr);
  }
  @media (min-width: 34rem) { .av-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .av-card {
    background: var(--av-plate);
    border: 1px solid var(--av-ink-rule);
    padding: 0.95rem 1rem 1rem;
    transition: transform 260ms var(--av-ease), border-color 260ms var(--av-ease),
                background-color 260ms var(--av-ease);
  }
  .av-card:hover {
    transform: translateY(-3px);
    border-color: var(--av-teal);
    background: color-mix(in oklab, var(--av-teal) 7%, var(--av-plate));
  }
  .av-card h3 {
    font-size: 0.96rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 0.4rem;
    color: var(--av-ink);
  }
  .av-card p { margin: 0; font-size: 0.87rem; color: var(--av-ink-soft); }

  /* 09 dark-inversion — on a dark page the inversion is paper. Everything inside takes the paper
     palette: full-strength teal measures 2.1:1 here and is simply not used. */
  .av-paper {
    background: var(--av-paper);
    background-image: var(--av-band-amber);
    color: var(--av-paper-ink);
    border-top: 3px solid var(--av-paper-amber);
    border-bottom: 3px solid var(--av-paper-amber);
  }
  .av-paper .av-obs-no { color: var(--av-paper-amber); }
  .av-paper .av-obs-h { color: var(--av-paper-ink); border-bottom-color: var(--av-paper-rule); }
  .av-paper .av-obs-h::after { background: var(--av-paper-amber); }
  .av-paper-lede { color: var(--av-paper-soft); font-size: 0.95rem; }
  .av-clause {
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--av-paper-rule);
  }
  .av-clause li {
    padding: 0.62rem 0 0.62rem 3.6rem;
    border-bottom: 1px solid var(--av-paper-rule);
    position: relative;
    font-size: 0.93rem;
    color: var(--av-paper-ink);
    transition: background-color 200ms var(--av-ease);
  }
  .av-clause li:hover { background: color-mix(in oklab, var(--av-amber) 9%, transparent); }
  .av-clause-n {
    position: absolute;
    left: 0;
    top: 0.62rem;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--av-paper-teal);
  }

  /* 10 pull-quote — the standing note, set at the size it is read at on the document itself. */
  .av-pull {
    margin: 0 0 1.1rem;
    padding: 0.2rem 0 0.2rem 1.3rem;
    border-left: 3px solid var(--av-amber);
  }
  .av-pull p {
    margin: 0;
    font-family: var(--av-face-head);
    font-size: clamp(1.15rem, 0.95rem + 1vw, 1.55rem);
    line-height: 1.34;
    color: var(--av-ink);
  }
  .av-quote-tail { font-size: 0.93rem; color: var(--av-ink-soft); }
  .av-quote-tail a { color: var(--av-amber-lift); }
}

/* ======================================================================== tool
   The two sheets. Both work with the script blocked: the worked example is written into the page
   and the script replaces it as figures are typed. Nothing here is hidden until it is used. */

@layer tool {
  /* 4.2rem for the unit, not 3: "hours" at 0.76rem with the tracking this page uses is wider
     than three rem and was being clipped against the input beside it. */
  .av-field {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 6.2rem 4.2rem;
    align-items: center;
    gap: 0.6rem;
    padding: 0.42rem 0;
    border-bottom: 1px solid var(--av-ink-hair);
  }
  .av-field label { font-size: 0.9rem; color: var(--av-ink); }

  input[type="number"] {
    font: inherit;
    font-size: 0.95rem;
    width: 100%;
    color: var(--av-ink);
    background: var(--av-plate-deep);
    border: 1px solid var(--av-ink-rule);
    border-bottom: 2px solid var(--av-amber);
    padding: 0.36rem 0.5rem;
    transition: border-color 180ms var(--av-ease), background-color 180ms var(--av-ease);
  }
  input[type="number"]:hover { background: color-mix(in oklab, var(--av-teal) 8%, var(--av-plate-deep)); }
  input[type="number"]:focus { border-color: var(--av-teal); }

  /* A ledger entry is a field and its unit on one line, and the field is the width of the number
     it holds. This sits in the tool layer with the rule it narrows: written in the shape layer it
     lost to `width: 100%` here — later layer, no selector weight involved — and every entry cell
     on the ledger was a 344px box holding the number 15. Layer order is not a tie-break of last
     resort; it decides outright. */
  .av-ledger-in input[type="number"] { width: 6.5rem; flex: 0 0 auto; }

  .av-unit {
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    color: var(--av-ink-soft);
  }

  .av-readout {
    margin-top: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid var(--av-ink-rule);
  }
  .av-readout-line {
    margin: 0 0 0.55rem;
    display: grid;
    gap: 0.1rem;
  }
  .av-readout-line:last-child { margin-bottom: 0; }

  /* The step is the arithmetic shown; the reading is the answer. They are different sizes and
     different colours because a sheet that prints them alike is a sheet nobody checks. */
  .av-step {
    font-size: 0.75rem;
    letter-spacing: 0.02em;
    color: var(--av-ink-soft);
    font-variant-numeric: tabular-nums;
  }
  .av-read {
    font-size: 0.97rem;
    font-weight: 600;
    color: var(--av-teal-lift);
    font-variant-numeric: tabular-nums;
    transition: color 200ms var(--av-ease);
  }
  .av-ledger-out .av-step { display: block; }
  .av-ledger-out .av-read { display: block; margin-top: 0.1rem; }

  /* A void reading is not an error message. It states which entry made the reading impossible,
     and it is the only place on the site that uses the warm colour as a ground. */
  .av-void {
    margin: 0.9rem 0 0;
    padding: 0.6rem 0.8rem;
    background: var(--av-amber-wash);
    border-left: 3px solid var(--av-amber);
    font-size: 0.84rem;
    color: var(--av-ink);
  }
  .av-void[hidden] { display: none; }

  .av-read-void { color: var(--av-amber-lift); }
}

/* ======================================================================== draw
   The set piece: a section through a sea wall and the beach in front of it. Everything here is
   drawn in its FINISHED state. The from-state lives in the motion layer and is applied only when
   the script has run, so with the script blocked the section simply stands complete. */

@layer draw {
  .av-sect-grid line { stroke: var(--av-ink-hair); stroke-width: 1; }
  /* The wall is a mass, so it is the only filled shape with a drawn edge; the beach and the land
     behind it are grounds, drawn as fills with a separate surface line over them. Reading the
     three as one filled outline is what made the first version of this drawing look like a
     tower standing on a floor rather than a wall holding back a sea. */
  .av-sect-wall {
    fill: color-mix(in oklab, var(--av-ink) 15%, var(--av-bg));
    stroke: var(--av-ink-soft);
    stroke-width: 1.6;
    stroke-linejoin: round;
  }
  .av-sect-coping {
    fill: color-mix(in oklab, var(--av-ink) 24%, var(--av-bg));
    stroke: var(--av-ink-soft);
    stroke-width: 1.4;
  }
  .av-sect-beach { fill: none; stroke: var(--av-ink-soft); stroke-width: 1.6; stroke-linejoin: round; }
  .av-sect-land { fill: none; stroke: var(--av-ink-soft); stroke-width: 1.4; }
  .av-sect-sand { fill: color-mix(in oklab, var(--av-amber) 19%, var(--av-bg)); stroke: none; }
  .av-sect-ground { fill: color-mix(in oklab, var(--av-ink) 4%, var(--av-bg)); stroke: none; }
  .av-sect-water { fill: color-mix(in oklab, var(--av-teal) 38%, var(--av-bg)); stroke: none; }
  .av-sect-datum line { stroke: var(--av-amber); stroke-width: 1; stroke-dasharray: 2 5; }
  .av-sect-cap {
    fill: var(--av-ink-soft);
    font-family: var(--av-face-body);
    font-size: 9px;
    letter-spacing: 0.06em;
  }
  .av-tide { transform-box: fill-box; }

  .av-pt-stem { stroke: var(--av-ink-rule); stroke-width: 1; }
  .av-pt-dot { fill: var(--av-teal); stroke: var(--av-bg); stroke-width: 1.4; }
  .av-pt-lab {
    fill: var(--av-ink);
    font-family: var(--av-face-body);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .av-pt-lev {
    fill: var(--av-amber-lift);
    font-family: var(--av-face-body);
    font-size: 9px;
    letter-spacing: 0.03em;
  }

  .av-win-axis { stroke: var(--av-ink-rule); stroke-width: 1.2; }
  .av-win-wet { fill: color-mix(in oklab, var(--av-teal) 26%, var(--av-bg)); }
  .av-win-dry { fill: color-mix(in oklab, var(--av-amber) 24%, var(--av-bg)); stroke: var(--av-amber); stroke-width: 1; }
  .av-win-edge { stroke: var(--av-amber); stroke-width: 1.4; }
  .av-win-lab {
    fill: var(--av-ink);
    font-family: var(--av-face-body);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
  }
  .av-win-sub {
    fill: var(--av-ink-soft);
    font-family: var(--av-face-body);
    font-size: 9.5px;
    letter-spacing: 0.04em;
  }
}

/* ====================================================================== motion
   ONE class, set on <html> by the script after the page has parsed, drives every transition on
   this page. Nothing below runs without it, which is the whole reason the page is readable with
   the script blocked: the finished state is the default, and these rules only describe the way
   in to it. Each animation is written with `both` so the element starts at the 0% frame and ends
   at its own natural state, never at a state invented here. */

@layer motion {
  @keyframes avRuleIn {
    from { transform: scaleX(0); opacity: 0; }
    to { transform: scaleX(1); opacity: 1; }
  }

  @keyframes avPlateRise {
    from { opacity: 0; transform: translateY(14px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @keyframes avStampIn {
    0% { opacity: 0; letter-spacing: 0.26em; }
    60% { opacity: 1; }
    100% { opacity: 1; letter-spacing: 0.055em; }
  }

  @keyframes avDrawOn {
    from { stroke-dashoffset: var(--av-len, 1200); }
    to { stroke-dashoffset: 0; }
  }

  @keyframes avPointDrop {
    0% { opacity: 0; transform: translateY(-16px); }
    70% { opacity: 1; transform: translateY(2px); }
    100% { opacity: 1; transform: translateY(0); }
  }

  @keyframes avTideWash {
    0% { opacity: 0.1; transform: translateX(-14px) scaleY(0.72); }
    45% { opacity: 1; transform: translateX(0) scaleY(1.06); }
    100% { opacity: 1; transform: translateX(0) scaleY(1); }
  }

  @keyframes avNoteIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
  }

  .av-live .av-mast-rule .av-rule-line,
  .av-live .av-foot-rule .av-rule-line {
    transform-origin: left center;
    animation: avRuleIn 760ms var(--av-ease-out) both;
  }
  .av-live .av-mast-rule .av-rule-read { animation: avPlateRise 420ms 680ms var(--av-ease-out) both; }

  .av-live .av-open-in > * { animation: avPlateRise 620ms var(--av-ease-out) both; }
  .av-live .av-open h1 { animation-delay: 60ms; }
  .av-live .av-open-lede { animation-delay: 180ms; }
  .av-live .av-open-credit { animation-delay: 300ms; }

  .av-live .av-obs-h { animation: avStampIn 560ms var(--av-ease-out) both; }
  .av-live .av-note { animation: avNoteIn 520ms 160ms var(--av-ease-out) both; }

  /* The section drawing. The wall and the beach are dashed to their own measured length by the
     script and drawn on; the points are held back and dropped one at a time; the tide washes
     once across the foot after the rest has settled. */
  .av-drawing .av-sect-wall,
  .av-drawing .av-sect-beach,
  .av-drawing .av-sect-land {
    stroke-dasharray: var(--av-len, 1200);
    animation: avDrawOn var(--av-dur, 900ms) var(--av-delay, 0ms) var(--av-ease-out) both;
  }
  .av-drawing .av-sect-sand { animation: avPlateRise 700ms 420ms var(--av-ease-out) both; }
  .av-drawing .av-pt { animation: avPointDrop 460ms var(--av-pt-delay, 0ms) var(--av-ease-out) both; }
  .av-drawing .av-tide { animation: avTideWash 1100ms var(--av-tide-delay, 1600ms) var(--av-ease) both; }
}

/* ===================================================================== sheets
   The seven sheets behind the report. They reuse the plate, the stamped head and the hanging
   note without restating any of them; what is added here is the sheet's own opener and the one
   component each sheet carries that the others do not. Reopening the shape layer rather than
   writing these loose keeps them under the same cascade as the shapes on the front page. */

@layer shape {
  /* The sheet head is ONE centred column that its lines are set inside, at every width.
     Written as three blocks each centred on its own, every line gets a different left edge,
     because 24ch of the heading face at 2.4rem is more than twice 24ch of the body face at 1rem:
     the title sat 190px right of its own sheet number and the head read as stray blocks rather
     than as a head. A column, and the lines left-aligned in it. */
  .av-sub-open {
    display: grid;
    justify-content: center;
    grid-template-columns: minmax(0, var(--av-measure));
    padding: 2.6rem var(--av-gutter) 2rem;
    border-bottom: 1px solid var(--av-ink-hair);
    background:
      var(--av-band-faint),
      linear-gradient(to bottom, var(--av-surface), var(--av-bg));
  }
  .av-sub-open > * { max-width: none; margin-inline: 0; }
  .av-sub-open h1 {
    font-size: clamp(1.55rem, 1.15rem + 1.8vw, 2.4rem);
    letter-spacing: -0.008em;
    margin-bottom: 0.9rem;
    max-width: 24ch;
  }
  .av-sub-lede {
    margin: 0;
    font-size: 1rem;
    color: var(--av-ink-soft);
    border-left: 2px solid var(--av-teal);
    padding-left: 0.85rem;
  }
  /* From 72rem the head takes the width of the measure AND the margin beside it, so that the
     sheet opens across the same span the observations below it occupy. */
  @media (min-width: 72rem) {
    .av-sub-open {
      grid-template-columns: minmax(0, calc(var(--av-measure) + var(--av-note-col) + 2.5rem));
    }
    .av-sub-open h1 { max-width: 26ch; }
    .av-sub-lede { max-width: 46ch; }
  }

  /* condition — the grade table. Three columns at reading width, stacked rows below 40rem, so
     the sheet never asks a phone to scroll sideways through a table. */
  .av-grade { width: 100%; border-collapse: collapse; font-size: 0.88rem; margin: 0 0 1.1rem; }
  .av-grade caption {
    text-align: left;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--av-ink-soft);
    padding-bottom: 0.5rem;
  }
  .av-grade thead th {
    text-align: left;
    font-weight: 600;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--av-teal-lift);
    border-bottom: 1px solid var(--av-ink-rule);
    padding: 0 0.6rem 0.4rem 0;
  }
  .av-grade tbody th {
    text-align: left;
    font-weight: 600;
    color: var(--av-ink);
    width: 5.5rem;
    vertical-align: top;
    padding: 0.6rem 0.6rem 0.6rem 0;
  }
  .av-grade td {
    vertical-align: top;
    color: var(--av-ink-soft);
    padding: 0.6rem 0.6rem 0.6rem 0;
    border-top: 1px solid var(--av-ink-hair);
  }
  .av-grade tbody th { border-top: 1px solid var(--av-ink-hair); }
  @media (max-width: 40rem) {
    .av-grade thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
    .av-grade, .av-grade tbody, .av-grade tr, .av-grade th, .av-grade td { display: block; width: auto; }
    .av-grade tr { border-top: 1px solid var(--av-ink-rule); padding: 0.5rem 0; }
    .av-grade tbody th { border-top: 0; padding-bottom: 0.2rem; }
    .av-grade td { border-top: 0; padding: 0.1rem 0 0.35rem; }
  }

  /* specification, christchurch, legal — three definition lists, one key colour each, so a
     reader moving between the sheets can tell at a glance which kind of list is in front of
     them: teal for the parts of a clause, amber for a filed particular, plain for a holding. */
  .av-spec, .av-filed, .av-held { margin: 0 0 1.2rem; font-size: 0.92rem; }
  .av-spec dt, .av-filed dt, .av-held dt {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    margin-top: 0.85rem;
  }
  .av-spec dt:first-child, .av-filed dt:first-child, .av-held dt:first-child { margin-top: 0; }
  .av-spec dd, .av-filed dd, .av-held dd { margin: 0.18rem 0 0; color: var(--av-ink-soft); }
  .av-spec dt { color: var(--av-teal-lift); }
  .av-filed dt { color: var(--av-amber-lift); }
  .av-held dt { color: var(--av-ink); }
  .av-filed {
    border-left: 2px solid var(--av-amber);
    padding: 0.2rem 0 0.2rem 0.95rem;
  }
  .av-held dd { border-bottom: 1px solid var(--av-ink-hair); padding-bottom: 0.7rem; }
  .av-held dd:last-child { border-bottom: 0; }

  /* coastal — the four stacked days. Drawn, not photographed, because the point being made is a
     pattern rather than a particular tide. */
  .av-tideband {
    margin: 1.2rem 0 1.3rem;
    padding: 1rem 1rem 0.8rem;
    background: var(--av-plate);
    border: 1px solid var(--av-ink-rule);
    border-left: 3px solid var(--av-teal);
  }
  .av-clock { display: block; width: 100%; height: auto; max-width: 30rem; }
  .av-clock-base { fill: color-mix(in oklab, var(--av-teal) 24%, var(--av-bg)); }
  .av-clock-win { fill: color-mix(in oklab, var(--av-amber) 46%, var(--av-bg)); stroke: var(--av-amber); stroke-width: 1; }
  .av-clock-lab {
    fill: var(--av-ink-soft);
    font-family: var(--av-face-body);
    font-size: 10px;
    letter-spacing: 0.04em;
  }
  .av-clock-row { transition: opacity 240ms var(--av-ease); }
  .av-tideband-cap {
    margin: 0.6rem 0 0;
    font-size: 0.75rem;
    color: var(--av-ink-soft);
  }
}

/* ====================================================================== footer */

.av-foot {
  border-top: 1px solid var(--av-teal);
  background: linear-gradient(to bottom, var(--av-surface), var(--av-bg));
  padding: 2.2rem var(--av-gutter) 1.6rem;
}
.av-foot-in {
  max-width: 62rem;
  margin-inline: auto;
  display: grid;
  gap: 1.4rem;
}
@media (min-width: 46rem) {
  .av-foot-in { grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 2.5rem; }
}
.av-foot-addr {
  font-style: normal;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--av-ink-soft);
}
.av-foot-co {
  font-family: var(--av-face-head);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--av-ink);
}
.av-foot-facts { margin: 0; font-size: 0.86rem; }
.av-foot-facts dt {
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--av-teal-lift);
  margin-top: 0.7rem;
}
.av-foot-facts dt:first-child { margin-top: 0; }
.av-foot-facts dd { margin: 0.1rem 0 0; color: var(--av-ink-soft); }
.av-foot-facts a { color: var(--av-amber-lift); }

/* ================================================================== small screens
   The measure already collapses to one column; what needs stating here is the ledger, which is
   the one block on the site that would otherwise push the page sideways at 320px. Its rows are
   restacked rather than given a scrollbar of their own: an index or a sheet that hides half of
   itself behind a sideways swipe has stopped being a record. */

@media (max-width: 33.999rem) {
  .av-ledger-table, .av-ledger-table tbody, .av-ledger-table tr { display: block; width: 100%; }
  .av-ledger-table th, .av-ledger-table td { display: block; width: auto; padding: 0.3rem 0.6rem; }
  .av-ledger-table th { border-left-width: 2px; padding-top: 0.55rem; }
  .av-ledger-table td { padding-bottom: 0.6rem; }
  .av-ledger-in th { padding-bottom: 0; }
  /* The entry row keeps its one line here too — the field grows to the thumb and the unit stays
     beside it rather than being orphaned on a line of its own under the box. */
  .av-ledger-in td { display: flex; align-items: center; gap: 0.6rem; }
  .av-ledger-in input[type="number"] { width: auto; flex: 1 1 auto; }

  .av-field { grid-template-columns: minmax(0, 1fr) 4.4rem; row-gap: 0.1rem; }
  .av-field label { grid-column: 1 / -1; }
  /* The opener still clears the photographic band here; only the slack under it is taken back.
     This rule is unlayered and so outranks the plate layer, which is how a flat 2.4rem left over
     from the earlier horizontal scrim put the whole title back on top of the photograph at 390px
     while 1440px looked right. */
  .av-open-in { padding-top: calc(var(--av-open-top) + 0.9rem); }
  .av-obs { padding-top: 2rem; padding-bottom: 2.1rem; }
}

@media (max-width: 24.99rem) {
  :root { --av-gutter: 0.95rem; --av-step: 0.65rem; }
  .av-open h1 { letter-spacing: -0.005em; }
  .av-obs-h { letter-spacing: 0.035em; }
  .av-clause li, .av-order li { padding-left: 2.2rem; }
}

/* ========================================================= unlayered: settlement
   Outside every layer, so nothing can out-rank it.

   Reduced motion LANDS the page. It does not shorten the drawing and it does not skip to a
   halfway state: every animated element is pinned at the value it would have finished on, the
   section is drawn complete with its points down and the tide in place, and the replay button
   still works because redrawing a finished drawing simply leaves it finished. */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  html { scroll-behavior: auto !important; }
  .av-drawing .av-sect-wall,
  .av-drawing .av-sect-beach,
  .av-drawing .av-sect-land {
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
  }
  .av-drawing .av-pt,
  .av-drawing .av-tide,
  .av-drawing .av-sect-sand {
    opacity: 1 !important;
    transform: none !important;
  }
  .av-live .av-open-in > *,
  .av-live .av-obs-h,
  .av-live .av-note {
    opacity: 1 !important;
    transform: none !important;
    letter-spacing: inherit;
  }
  .av-live .av-obs-h { letter-spacing: 0.055em; }
}

/* A report is printed and put in a folder. The index goes, the photographs go, the paper plate
   stops being paper because the page already is, and the arithmetic and the facts stay. */

@media print {
  html, body { background: white; color: black; }
  .av-sidecar, .av-mast-rule, .av-foot-rule, .av-skip, .av-replay, .av-open-art { display: none; }
  .av-open::before { display: none; }
  .av-open, .av-obs, .av-foot { border-color: #999; }
  .av-paper { background: white; color: black; border-color: #000; }
  .av-obs-h, .av-open h1, .av-read, .av-wordmark a { color: black; }
  .av-step, .av-note, .av-foot-addr, .av-foot-facts dd { color: #333; }
  .av-bleed { background: white; }
  .av-stage { background: white; border-color: #999; }
  .av-card, .av-split-b, .av-inset .av-plate { background: white; border-color: #999; }
  .av-obs { break-inside: avoid; }
  a { color: black; }
}