@layer reset, type, shell, slab, fx, parts, register, column, motion, print;

/* ---------------------------------------------------------------------------
   globaltradeday.org — poured-concrete civic reference
   Cast lettering on stacked slabs. Chalk on aggregate, one moss signal.
   Hand-written; no framework, no utility classes.
--------------------------------------------------------------------------- */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  img, svg { display: block; max-width: 100%; height: auto; }
  table { border-collapse: collapse; width: 100%; }
  button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
  summary::-webkit-details-marker { display: none; }
  :focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }
}

@layer type {
  /* Declared by hand rather than via @fontsource, so that font-display is
     `optional` — a swap-in on these wide faces reflows a whole cast line and
     showed up as measurable CLS. Optional means: use it if it is already
     there, otherwise render the fallback and pick it up next navigation. */
  @font-face {
    font-family: 'Big Shoulders var';
    src: url('../fonts/bigshoulders-var.woff2') format('woff2-variations');
    font-weight: 400 900; font-style: normal; font-display: optional;
  }
  @font-face {
    font-family: 'Commissioner var';
    src: url('../fonts/commissioner-var.woff2') format('woff2-variations');
    font-weight: 200 900; font-style: normal; font-display: optional;
  }
  @font-face {
    font-family: 'Martian var';
    src: url('../fonts/martian-mono-var.woff2') format('woff2-variations');
    font-weight: 300 800; font-style: normal; font-display: optional;
  }

  :root {
    --cast: 'Big Shoulders var', 'Arial Narrow', sans-serif;
    --text: 'Commissioner var', system-ui, sans-serif;
    --data: 'Martian var', ui-monospace, 'Courier New', monospace;
  }
}

@layer shell {
  :root {
    /* Poured concrete: warm-grey aggregate, not blue-black. */
    --form:        #22211e;   /* the pour */
    --form-deep:   #191815;   /* shadow gap between slabs */
    --form-raised: #2c2b27;   /* raised / recessed panel face */
    --form-edge:   #38362f;   /* the hard arris where two pours meet */
    --chalk:       #d8d7d1;   /* cast lettering */
    --chalk-dim:   #8d8b83;   /* weathered lettering */
    --moss:        #7fa62e;   /* the one signal: lichen on stone */
    --moss-deep:   #5d7a20;

    --gap: clamp(1.25rem, 4vw, 3rem);
    --measure: 68ch;
    --frame: min(1280px, 100% - (2 * var(--gap)));

    /* slab-settle: heavy things do not bounce. Fast out, long deceleration,
       no overshoot anywhere in the site. */
    --settle: 620ms cubic-bezier(.16, .84, .26, 1);
    --settle-fast: 260ms cubic-bezier(.16, .84, .26, 1);

    color-scheme: dark;
  }

  body {
    background: var(--form);
    color: var(--chalk);
    font-family: var(--text);
    font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
    line-height: 1.66;
    font-weight: 350;
    -webkit-font-smoothing: antialiased;
  }

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

  /* Cast lettering: wide, upper-case, letter-spaced like facade signage.
     The letter-spacing IS the type voice here — it never appears on body. */
  h1, h2, h3, .cast {
    font-family: var(--cast);
    font-weight: 800;
    text-transform: uppercase;
    /* Condensed, so the tracking can open back up without the letterforms
       themselves reading as horizontally scaled — which is exactly what the
       previous extended face did at these sizes. */
    letter-spacing: .045em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
  }
  /* The ramp is set by how much vertical room a cornerstone H1 may occupy, not
     by how large the type can get before it breaks. These titles run to ~78
     characters; at the earlier 4.5rem ceiling that is six cast lines and half
     the first screen before any prose, which reads as a zoom fault rather than
     as a monument. Capped at 2.55rem it settles to three or four lines.
     The old ceiling was derived the other way round — from the widest single
     word ("TRANSATLANTIC", 13 characters at ~1.112em of advance each against a
     column of ~0.92 x viewport, so ~0.062 x viewport). That bound still holds
     and this ramp sits well inside it; below 34rem the hyphenation rule below
     covers the one width where a long word would still be tight. */
  h1 { font-size: clamp(1.35rem, .914rem + 2.18vw, 2.55rem); letter-spacing: .03em; }
  /* Cast lettering is wide by construction and the tracking adds to it, so on a
     narrow phone a long word ("TRANSATLANTIC", "PARTNERSHIP") cannot fit the
     measure. Below 34rem the tracking comes most of the way off and breaks are
     hyphenated: break-word alone strands a single letter on its own line
     ("PARTNERSHI / P"), which reads as a rendering fault rather than a break. */
  @media (max-width: 34rem) {
    h1 { letter-spacing: .015em; }
    h1, h2 { overflow-wrap: break-word; hyphens: auto; }
  }
  h2 { font-size: clamp(1.2rem, .982rem + 1.09vw, 1.8rem); }
  h3 { font-size: clamp(1rem, .93rem + .35vw, 1.15rem); letter-spacing: .08em; }

  p { margin: 0 0 1.15em; max-width: var(--measure); }
  main > .slab:last-child { padding-bottom: clamp(3rem, 7vw, 6rem); }

  .lede { font-size: clamp(1.0625rem, 1rem + .45vw, 1.28rem); font-weight: 330; color: #c6c4bd; }
  .mono { font-family: var(--data); font-size: .78em; letter-spacing: .04em; }

  a { color: var(--chalk); }
}

@layer slab {
  /* Monumental massing. Every band is a pour; the hard line between two
     pours is the form-edge above and the shadow gap below. Slabs alternate
     face value so the stack reads as separate lifts, never as one page. */
  .slab {
    padding-block: clamp(2.5rem, 6vw, 5.5rem);
    border-top: 1px solid var(--form-edge);
    box-shadow: 0 -6px 0 0 var(--form-deep);
    position: relative;
  }
  .slab--lift  { background: var(--form-raised); }
  .slab--deep  { background: var(--form-deep); }
  .slab:first-of-type { border-top: 0; box-shadow: none; }

  /* Recessed panel: text sits inset into the pour, not floating on it. */
  .recess {
    background: var(--form-deep);
    border: 1px solid var(--form-edge);
    border-top-color: #14130f;
    box-shadow: inset 0 2px 0 0 #14130f, inset 0 -1px 0 0 #3d3b33;
    padding: clamp(1.25rem, 3.2vw, 2.5rem);
  }
  .slab--lift .recess { background: var(--form); }

  /* Section titles are cast across the full slab width, with the moss bar
     under them reading as the anchor plate. */
  .slab > .frame > h2 { margin-bottom: 1.6rem; }
  .slab > .frame > h2::after {
    content: ''; display: block; width: 4.5rem; height: 6px;
    margin-top: .9rem; background: var(--moss);
  }

  /* A photographic band is a pour like any other: same arris above, same
     shadow gap below, cropped squat so it reads as a course in the stack
     rather than as a hero. */
  .band { padding-block: 0; overflow: clip; }
  .band picture, .band img { display: block; width: 100%; }
  .band img {
    height: clamp(190px, 26vw, 400px);
    object-fit: cover;
    object-position: center 55%;
    filter: saturate(.72) contrast(1.04);
  }

  .cols { display: grid; gap: var(--gap); }
  /* Only the asymmetric split survives — prose with an aside beside it. An even
     two-column split of body text was removed from the whole site: it forces the
     eye back and forth between two measures, and at these column widths it reads
     as a spread rather than as a page. */
  @media (min-width: 56rem) {
    /* align-items: start, not the default stretch — the aside is an inset panel
       with four links in it, and stretched to the height of the prose beside it
       it becomes a tall recess two thirds full of nothing. */
    .cols--wide { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
  }
  .cols p:last-child { margin-bottom: 0; }
}

@layer parts {
  /* --- header ------------------------------------------------------------ */
  /* The nav-condense recipe owns the header box: it is the flex row itself,
     fixed at a drawn constant height, with .facet-core as the brand and nav as
     its sibling. So the content is centred by padding the header rather than by
     nesting a .frame inside it — a nested wrapper inherits the recipe's own
     brand typography (18px, nowrap) and the two paddings fight. */
  .facet-field {
    padding-inline: max(var(--gap), calc((100vw - 1280px) / 2));
    border-bottom: 1px solid var(--form-edge);
    background: var(--form-deep);
  }
  .facet-field.facet-sunk { border-bottom-color: var(--form-edge); }
  /* min-width:0 on both the item and the text: a flex item defaults to
     min-width:auto, so the wordmark refused to shrink and ran off the right
     edge of a 320px screen while the header itself measured correctly. */
  .brand {
    display: inline-flex; align-items: center; gap: .8rem;
    text-decoration: none; min-width: 0; flex: 1 1 auto;
  }
  .brand__mark { width: 38px; height: 38px; flex: none; }
  /* Overrides the recipe's 18px/nowrap brand type. Both properties have to be
     restated: .facet-core sets them on this very element. */
  .brand.facet-core { font-size: inherit; font-weight: inherit; white-space: normal; }
  .brand__name {
    font-family: var(--cast); font-weight: 800; text-transform: uppercase;
    letter-spacing: .1em; font-size: clamp(.8rem, .64rem + .62vw, .98rem);
    line-height: 1.1; min-width: 0; white-space: nowrap;
  }
  .brand__name small {
    display: block; font-family: var(--data); font-weight: 400;
    letter-spacing: .08em; font-size: .5rem; color: var(--chalk-dim);
    text-transform: uppercase; margin-top: .28rem;
  }

  .nav__list {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: clamp(.9rem, 2vw, 1.9rem);
  }
  .nav a {
    font-family: var(--data); font-size: .68rem; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    text-decoration: none; padding-block: .5rem; display: inline-block;
  }
  .nav a[aria-current='page'] { color: var(--moss); }

  /* cast-inset: a link is engraved rather than underlined — the moss rule is
     cut in from the left edge and the glyphs sink by a hair. */
  .nav a, .inset {
    position: relative;
    transition: color var(--settle-fast), transform var(--settle-fast);
  }
  .nav a::after, .inset::after {
    content: ''; position: absolute; left: 0; right: 100%; bottom: 0;
    height: 2px; background: var(--moss);
    transition: right var(--settle-fast);
  }
  .nav a:hover, .nav a:focus-visible, .inset:hover, .inset:focus-visible {
    color: #fff; transform: translateY(1px);
  }
  .nav a:hover::after, .nav a:focus-visible::after,
  .inset:hover::after, .inset:focus-visible::after { right: 0; }

  .inset { text-decoration: none; border-bottom: 1px solid var(--form-edge); }

  /* CSS-only hamburger — no JS, so the nav works before and without script. */
  .nav__toggle { display: none; }
  .nav__label {
    display: none; align-items: center; gap: .55rem; cursor: pointer;
    font-family: var(--data); font-size: .68rem; letter-spacing: .1em;
    text-transform: uppercase; padding: .7rem 0;
  }
  .nav__label span {
    display: block; width: 22px; height: 2px; background: var(--chalk);
    box-shadow: 0 6px 0 var(--chalk), 0 -6px 0 var(--chalk);
  }
  @media (max-width: 60rem) {
    /* The header keeps the recipe's constant height at every width — a header
       that grows a second row overflows the fixed box and clips its own brand.
       The menu therefore drops out of the header as an overlay panel instead of
       wrapping inside it. */
    .nav { position: static; }
    .nav__label { display: inline-flex; }
    .nav__list {
      display: none; position: absolute; inset: 100% 0 auto 0;
      flex-direction: column; gap: 0;
      background: var(--form-deep);
      border-top: 1px solid var(--form-edge);
      border-bottom: 1px solid var(--form-edge);
      padding-inline: max(var(--gap), calc((100vw - 1280px) / 2));
      max-height: calc(100vh - 73px); overflow-y: auto;
    }
    .nav__list li { border-top: 1px solid var(--form-edge); }
    .nav__list li:first-child { border-top: 0; }
    .nav__list a { display: block; padding: .9rem 0; font-size: .8rem; }
    .nav__toggle:checked ~ .nav__list { display: flex; }
  }

  /* --- figures ---------------------------------------------------------- */
  /* The ghost numeral behind each figure is the same value at low contrast,
     so the strip reads as numbers cast into the slab. */
  .figures { display: grid; gap: 1px; background: var(--form-edge); }
  @media (min-width: 40rem) { .figures { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 64rem) { .figures { grid-template-columns: repeat(4, 1fr); } }
  /* One scale variable per cell drives the number, its ghost and the height of
     the block they share. Everything below is expressed against --n rather than
     against its own font-size, which is what keeps the moss rule on one line
     across the row: the box height is the same number of pixels in all four
     cells regardless of what is set inside it. Sizing by min-height failed here
     — the counter recipe wraps its digits in an element carrying
     `line-height: normal`, so a count came out ~5px taller than the box while
     the date, having no wrapper, sat exactly on it. */
  .figure {
    --n: clamp(1.7rem, 1.372rem + 1.64vw, 2.6rem);
    background: var(--form-deep); padding: clamp(1.1rem, 2.6vw, 1.9rem);
    position: relative; overflow: hidden;
  }
  .figure__n {
    font-family: var(--cast); font-weight: 800; letter-spacing: .02em;
    font-size: var(--n); line-height: 1;
    height: calc(var(--n) * 1.24);
    display: flex; align-items: flex-end;
    position: relative; z-index: 1;
  }
  /* A date is set smaller than a bare count so it still holds one line in the
     narrowest four-column cell. The box it sits in does not change. */
  .figure__n--flat { font-size: calc(var(--n) * .82); letter-spacing: .03em; }
  .figure__ghost {
    position: absolute; inset-inline-start: -.02em; top: -.10em; z-index: 0;
    font-family: var(--cast); font-weight: 800; letter-spacing: .02em;
    font-size: calc(var(--n) * 1.17); line-height: 1;
    color: #2a2925; user-select: none; white-space: nowrap;
  }
  /* The ghost tracks whatever its own value is set at, so the date keeps the
     same relief as the counts instead of going bare. */
  .figure--flat .figure__ghost { font-size: calc(var(--n) * .96); }
  .figure__k {
    position: relative; z-index: 1; display: block; margin-top: .7rem;
    padding-top: .7rem; border-top: 2px solid var(--moss);
    font-family: var(--data); font-size: .62rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--chalk-dim);
  }

  /* --- record rows (agreements) ----------------------------------------- */
  .records { display: grid; gap: 1px; background: var(--form-edge); }
  .record {
    display: grid; gap: .35rem .9rem; align-items: baseline;
    background: var(--form); padding: clamp(1rem, 2.4vw, 1.6rem);
  }
  .slab--lift .record { background: var(--form-raised); }
  @media (min-width: 48rem) {
    .record { grid-template-columns: 7.5rem minmax(0, 1fr) auto; }
  }
  .record__tag {
    font-family: var(--cast); font-weight: 800; letter-spacing: .05em;
    font-size: 1rem;
  }
  .record__name { margin: 0; max-width: none; }
  .record__note { margin: .2rem 0 0; font-size: .88rem; color: var(--chalk-dim); }
  /* The citation line under a record. Set in the data face so it reads as
     apparatus rather than prose, and one notch dimmer than the note it
     follows — a reference that shouts over the record is the wrong way round. */
  .record__src {
    margin: .55rem 0 0; font-family: var(--data);
    font-size: .68rem; letter-spacing: .03em; line-height: 1.5;
  }
  .record__src a { color: var(--chalk-dim); }
  .record__src a:hover, .record__src a:focus-visible { color: var(--chalk); }
  .record__state {
    font-family: var(--data); font-size: .6rem; letter-spacing: .1em;
    text-transform: uppercase; white-space: nowrap;
    border: 1px solid currentColor; padding: .3rem .55rem;
  }
  .is-live   { color: var(--moss); }
  .is-closed { color: #a89a86; }
  .is-held   { color: #c9a24b; }

  /* --- disclosure (FAQ) ------------------------------------------------- */
  /* Questions are real h3 headings inside the summary, so the outline holds
     even though the control is an accordion. */
  .qa { display: grid; gap: 1px; background: var(--form-edge); }
  .qa__item { background: var(--form-deep); }
  .qa__item > summary {
    display: flex; align-items: flex-start; gap: 1rem; cursor: pointer;
    padding: clamp(.95rem, 2.2vw, 1.35rem);
    transition: background var(--settle-fast);
  }
  .qa__item > summary:hover { background: #201f1b; }
  .qa__item > summary h3 {
    font-size: .92rem; letter-spacing: .045em; margin: 0; flex: 1;
    line-height: 1.35;
  }
  .qa__sign {
    flex: none; width: 1.1rem; height: 1.1rem; margin-top: .1rem;
    position: relative; color: var(--moss);
  }
  .qa__sign::before, .qa__sign::after {
    content: ''; position: absolute; inset: 50% 0 auto 0; height: 2px;
    background: currentColor; transform: translateY(-50%);
  }
  .qa__sign::after { transform: translateY(-50%) rotate(90deg); transition: transform var(--settle-fast); }
  .qa__item[open] .qa__sign::after { transform: translateY(-50%) rotate(0deg); }
  .qa__body { padding: 0 clamp(.95rem, 2.2vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.5rem); }
  .qa__body p:last-child { margin-bottom: 0; }

  /* --- quote ------------------------------------------------------------ */
  .quote { margin: 0; padding-left: clamp(1rem, 3vw, 2rem); border-left: 6px solid var(--moss); }
  .quote p { font-family: var(--cast); font-weight: 500; text-transform: none;
             letter-spacing: 0; font-size: clamp(1.0625rem, 1rem + .6vw, 1.45rem);
             line-height: 1.42; }
  .quote footer { font-family: var(--data); font-size: .66rem; letter-spacing: .1em;
                  text-transform: uppercase; color: var(--chalk-dim); }

  /* --- plain lists ------------------------------------------------------ */
  .roster { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: var(--gap); }
  @media (min-width: 60rem) { .roster { columns: 3; } }
  .roster li { break-inside: avoid; padding: .42rem 0; border-bottom: 1px solid var(--form-edge);
               font-size: .92rem; }

  .prose h2 { margin-top: 2.4rem; }
  .prose h3 { margin-top: 1.9rem; margin-bottom: .6rem; }
  .prose ul { padding-left: 1.15rem; max-width: var(--measure); }
  .prose li { margin-bottom: .45rem; }

  /* --- footer ----------------------------------------------------------- */
  .foot { background: var(--form-deep); border-top: 1px solid var(--form-edge);
          padding-block: clamp(2.2rem, 5vw, 3.5rem); }
  .foot__grid { display: grid; gap: var(--gap); }
  @media (min-width: 48rem) { .foot__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
  .foot h2 { font-size: .84rem; letter-spacing: .16em; color: var(--chalk-dim); }
  .foot ul { list-style: none; margin: .9rem 0 0; padding: 0; }
  .foot li { margin-bottom: .5rem; }
  .foot a { font-size: .9rem; text-decoration: none; border-bottom: 1px solid var(--form-edge); }
  .foot__base { margin-top: clamp(1.8rem, 4vw, 2.6rem); padding-top: 1.2rem;
                border-top: 1px solid var(--form-edge); font-family: var(--data);
                font-size: .62rem; letter-spacing: .08em; color: var(--chalk-dim);
                text-transform: uppercase; }

  .skip {
    position: absolute; left: -9999px; top: 0; z-index: 20;
    background: var(--moss); color: #14130f; padding: .7rem 1.1rem;
    font-family: var(--data); font-size: .7rem; letter-spacing: .1em;
  }
  .skip:focus { left: 0; }
}

@layer register {
  /* The 18 April register. A real table of records — country, city, event,
     date — with the filter chips and the sort controls sitting above it. */
  .reg { border: 1px solid var(--form-edge); background: var(--form-deep); }
  .reg__head {
    display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; align-items: baseline;
    justify-content: space-between;
    padding: clamp(.9rem, 2.2vw, 1.3rem); border-bottom: 1px solid var(--form-edge);
  }
  .reg__count { font-family: var(--data); font-size: .66rem; letter-spacing: .1em;
                text-transform: uppercase; color: var(--chalk-dim); }
  .reg__chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: clamp(.9rem, 2.2vw, 1.3rem);
                border-bottom: 1px solid var(--form-edge); margin: 0; }

  /* The filter chips had no styling at all. The reset strips a button's border,
     background and padding, so twelve country filters rendered as a wall of
     bare text with no affordance — nothing said they could be pressed. A chip
     is a small cast tab: inset face, hard arris, count in the data face. */
  .chip {
    display: inline-flex; align-items: baseline; gap: .45rem;
    padding: .5rem .75rem; background: var(--form);
    border: 1px solid var(--form-edge); font-size: .82rem; line-height: 1.15;
    transition: background var(--settle-fast), border-color var(--settle-fast),
                color var(--settle-fast);
  }
  .chip .mono { font-size: .62rem; color: var(--chalk-dim); }
  /* Hover behind a hover query, or a touch tap leaves it stuck: `:hover` on a
     phone persists after the tap, and `:hover:not(:disabled)` outranks the
     pressed rule on specificity, so the chip the reader had just chosen kept the
     raised face and never showed as selected. */
  @media (hover: hover) and (pointer: fine) {
    .chip:hover:not(:disabled) { border-color: var(--moss); background: var(--form-raised); }
  }
  /* :not(:disabled) is here to match the hover rule's specificity, so hovering
     the chip that is already selected does not repaint it as unselected. */
  .chip[aria-pressed='true']:not(:disabled) { background: var(--moss); border-color: var(--moss); color: #14130f; }
  .chip[aria-pressed='true'] { background: var(--moss); border-color: var(--moss); color: #14130f; }
  .chip[aria-pressed='true'] .mono { color: #14130f; opacity: .72; }
  /* Chips ship disabled and the script enables them, so this is what a no-script
     reader sees: present, legibly inert, not offering a control that does nothing. */
  .chip:disabled { opacity: .5; }

  /* The same filter as a select, shown only on narrow screens. Native control,
     so the picker is the platform's own — a 13-row list on a phone is what a
     <select> is for, and it costs no script beyond the change handler. */
  .reg__pick { display: none; }
  .reg__pick-label { display: block; font-family: var(--data); font-size: .6rem;
                     letter-spacing: .12em; text-transform: uppercase;
                     color: var(--chalk-dim); margin-bottom: .5rem; }
  .pick {
    -webkit-appearance: none; appearance: none;
    width: 100%; min-height: 2.9rem;
    padding: .7rem 2.4rem .7rem .8rem;
    font: inherit; font-size: .95rem; color: var(--chalk);
    background-color: var(--form); border: 1px solid var(--form-edge);
    border-radius: 0;
    /* Drawn caret rather than an icon font or an inline SVG data URI: two
       gradients are enough for a chevron and they inherit the palette. */
    background-image:
      linear-gradient(45deg, transparent 50%, var(--chalk-dim) 50%),
      linear-gradient(135deg, var(--chalk-dim) 50%, transparent 50%);
    background-position: right 1.15rem center, right .8rem center;
    background-size: 7px 7px, 7px 7px;
    background-repeat: no-repeat;
  }
  .pick:focus-visible { border-color: var(--moss); }
  .pick:disabled { opacity: .5; }

  /* The generator draws the active sort indicator in its own derived dark grey,
     which on this ground is invisible. It is the one signal colour here. */
  .reg thead th[aria-sort='ascending'] button::after,
  .reg thead th[aria-sort='descending'] button::after {
    background-image: linear-gradient(var(--moss), var(--moss)),
                      linear-gradient(var(--moss), var(--moss));
  }
  .reg__scroll { overflow-x: auto; }

  .reg table { font-size: .88rem; table-layout: fixed; }
  /* 753 rows: skip layout and paint for the ones off screen. Safe only because
     the table is fixed-layout with declared column widths — under auto layout
     every row has to be measured to size a column, which is exactly the work
     this is meant to avoid. contain-intrinsic-size keeps the scrollbar honest.
     Anchor navigation and find-in-page still reach a skipped row. */
  .reg tbody tr { content-visibility: auto; contain-intrinsic-size: auto 2.6rem; }
  .reg th, .reg td { text-align: left; padding: .62rem clamp(.7rem, 1.6vw, 1.1rem);
                     border-bottom: 1px solid #262520; vertical-align: top; }
  .reg thead th {
    font-family: var(--data); font-size: .58rem; letter-spacing: .11em;
    text-transform: uppercase; color: var(--chalk-dim);
    background: var(--form); position: sticky; top: 0; z-index: 2;
    border-bottom: 1px solid var(--form-edge); white-space: nowrap;
  }
  .reg tbody tr:nth-child(even) { background: #1e1d19; }
  .reg td.reg__when { font-family: var(--data); font-size: .68rem; white-space: nowrap;
                      color: var(--chalk-dim); }
  .reg td.reg__where { font-weight: 500; white-space: nowrap; }
  .reg td.reg__city { color: var(--chalk-dim); white-space: nowrap; }
  .reg__title { overflow-wrap: break-word; }
  /* Event titles stay in the language they were filed in — they are records,
     not copy, so they are never translated or normalised. */
  .reg__title[lang] { }
  .reg tbody tr:target { outline: 2px solid var(--moss); outline-offset: -2px; background: #262a1c; }

  /* Table becomes one card per row on narrow screens rather than scrolling. */
  @media (max-width: 44rem) {
    .reg__scroll { overflow-x: visible; }
    /* The whole table display chain has to come apart, not just the row. A
       `display: grid` <tr> inside a still-tabular <tbody> is not a table-row
       any more, so it gets wrapped in an anonymous cell and shrink-to-fits —
       every card came out ~60px wide with the text clipped. Dropping the table
       and row-group to block, and the colgroup out of the layout entirely, is
       what lets the row own the full width. */
    .reg table { display: block; table-layout: auto; }
    .reg colgroup { display: none; }
    .reg tbody { display: block; }
    /* The header row survives as a sort BAR, not as column headings. Hiding the
       whole thead took sorting away from mobile entirely — the two sort controls
       live inside it — while the copy above still told the reader to use the
       column headings. So the two sortable cells stay and the two that never
       sorted go: once the table is `display: block` the row/cell relationships
       are gone for assistive tech anyway, which is why the cards carry their own
       visible labelling and these two read as the buttons they are. */
    .reg thead { display: block; }
    .reg thead tr { display: flex; flex-wrap: wrap; gap: .4rem 1.3rem;
                    padding: .55rem clamp(.7rem, 3vw, 1.1rem); }
    .reg thead th { display: none; position: static; padding: 0; border: 0;
                    background: none; }
    .reg thead th[data-orchard-order] { display: block; }
    .reg thead th button { padding: .7rem 0; }

    /* A row hidden by the country filter has to actually go. `[hidden]` is a UA
       rule of the lowest specificity, so the card's own `display: grid` below
       silently outranked it: pressing a chip updated the count and the pressed
       state and left all 753 cards on screen. Desktop was unaffected — a <tr>
       there has no author display for [hidden] to lose to. */
    .reg tbody tr[hidden] { display: none; }

    /* Chips out, select in. Thirteen chips wrapped to six rows of tabs before
       the first record — the control was bigger than the thing it filtered. */
    .reg__chips { display: none; }
    .reg__pick { display: block; padding: .9rem clamp(.7rem, 3vw, 1.1rem);
                 border-bottom: 1px solid var(--form-edge); }
    /* The hint above repeated what the select's own label says, and the sort bar
       below now shows its two controls, so it is noise on a narrow screen. */
    .reg__head .reg__count + .reg__count { display: none; }
    /* Cards are taller than rows, so the placeholder size has to grow with
       them or the scrollbar jumps as rows render in. */
    .reg tbody tr { contain-intrinsic-size: auto 7rem; }
    .reg tbody tr { display: grid; gap: .18rem; padding: .85rem clamp(.7rem, 3vw, 1.1rem);
                    border-bottom: 1px solid var(--form-edge); }
    .reg tbody tr:nth-child(even) { background: #1e1d19; }
    .reg td { border: 0; padding: 0; white-space: normal; }
    .reg td.reg__where { font-family: var(--data); font-size: .64rem; letter-spacing: .1em;
                         text-transform: uppercase; color: var(--moss); }
    .reg td.reg__city::before { content: '· '; }
    .reg td.reg__city { display: inline; }
    .reg td.reg__where { display: inline; }
    .reg__title { max-width: none; margin-top: .3rem; }
  }

  /* --- generated-widget overrides --------------------------------------- */
  /* The site stylesheet sits in a later @layer than the effect bundles, so these
     win without !important. Two things the generator cannot know: this site has
     exactly one signal colour, and these widgets sit between paragraphs. */
  .strata-bed .strata-tag[aria-selected='true'] { border-bottom-color: var(--moss); }
  .stages { margin: 1.7rem 0 2.2rem; }
  .stages li { font-size: .92rem; }
  /* Every stage is cast; none is greyed out. The recipe ships a wizard's
     current-step state — one mark lit, the marks after it hollow — which is
     right for a form the reader is part-way through and wrong for a fixed
     sequence that a treaty passes through once. Three of six drawn as pending
     read as an unfinished widget rather than as a sequence, so the trail is
     uniform (--quarry-fill: 1 fills the connector the same way the recipe fills
     it behind a current step) and the movement comes from the cast-in instead. */
  .stages .quarry-mark { --quarry-fill: 1; color: var(--chalk); font-weight: 500; }
  .stages .quarry-mark::before { border-color: var(--moss); background: var(--moss); }
  .strata-bed { margin-top: 1.6rem; }

  /* --- opposed positions (replaces the two-column prose pair) ----------- */
  /* Two arguments that answer each other read as a sequence, not as a spread.
     Side by side they force the eye to leapfrog between two measures; stacked
     full width, each one gets read. The edge rule is what carries which is
     which, so the pair stays legible without a colour-coded heading. */
  .positions { display: grid; gap: 1px; background: var(--form-edge); }
  .position {
    background: var(--form-deep);
    padding: clamp(1.2rem, 3vw, 2.1rem) clamp(1.2rem, 3vw, 2.4rem);
    border-inline-start: 6px solid var(--form-edge);
  }
  .position h3 { margin-bottom: .8rem; }
  .position p:last-child { margin-bottom: 0; }
  .position--for { border-inline-start-color: var(--moss); }
  .position--against { border-inline-start-color: #8d6b2f; }
  .position--for h3 { color: var(--moss); }
  .position--against h3 { color: #c69a4c; }

  /* --- editorial rule list --------------------------------------------- */
  .rules { list-style: none; margin: 0; padding: 0;
           display: grid; gap: 1px; background: var(--form-edge); }
  .rules li {
    background: var(--form); padding: .95rem clamp(1rem, 2.4vw, 1.5rem);
    max-width: none; position: relative;
  }
  .rules li::before {
    content: ''; position: absolute; inset-inline-start: 0; top: 0; bottom: 0;
    width: 3px; background: var(--form-edge);
  }

  /* --- the mobilisation tape (signature moment) ------------------------- */
  /* 23 filing dates as cast bars. 18 April is 635 of 753 records, so the
     spike is the point: the strip is drawn to that scale rather than
     normalised away. Built from the register data at build time. */
  .tape { margin: 0; }
  /* A floor on bar width as well as bar height: 23 columns across a 320px
     screen is an 11px-wide target, which fixing the height alone does not
     rescue. Past the floor the strip scrolls rather than shrinking further —
     it stays inside its own box, so the page never scrolls sideways. */
  .tape__plot { display: flex; align-items: flex-end; gap: clamp(2px, .7vw, 6px);
                height: clamp(112px, 18vw, 150px);
                overflow-x: auto; overscroll-behavior-x: contain; }
  .tape__bar { min-width: 22px; }
  /* The link fills the column and the bar is painted into it at --h. Twenty of
     the 23 days hold a single record and plot to a ~4px sliver; as the link
     itself that is an unhittable target, especially by thumb. The pointer target
     is now the whole column height regardless of the value. */
  .tape__bar { flex: 1 1 0; min-width: 0; align-self: stretch;
               position: relative; display: block; text-decoration: none; }
  .tape__bar::after {
    content: ''; position: absolute; inset: auto 0 0 0; height: var(--h);
    background: var(--form-edge);
    transition: background var(--settle-fast);
  }
  .tape__bar[data-peak]::after { background: var(--moss); }
  .tape__bar:hover::after, .tape__bar:focus-visible::after { background: #b3d95f; }
  /* Hovering a low column should say so before the reader commits to the click,
     since most of the target is empty space above the bar. */
  .tape__bar:hover b, .tape__bar:focus-visible b { color: var(--chalk); }
  .tape__bar b { position: absolute; inset: auto 0 var(--h) 0; text-align: center;
                 font-family: var(--data); font-size: .58rem; font-weight: 500;
                 padding-bottom: .3rem; color: var(--chalk-dim);
                 transition: color var(--settle-fast); }
  .tape__axis { display: flex; justify-content: space-between; margin-top: .6rem;
                padding-top: .6rem; border-top: 1px solid var(--form-edge);
                font-family: var(--data); font-size: .58rem; letter-spacing: .08em;
                text-transform: uppercase; color: var(--chalk-dim); }
}

@layer column {
  /* One centred reading column for everything that is read down a measure, and
     a break-out to the full pour for the three things that are read across it.

     Before this the prose was capped at the measure but still flush with the
     frame's LEFT edge, so a body slab left ~500px of dead space on the right at
     1600px and the whole page read as if it had slipped sideways. Centring only
     the paragraphs would have been worse: the h2 and the moss rule under it are
     cast across the frame, so the heading and its own text would no longer share
     a left edge. So every child of a body frame moves together.

     The column is set in rem, not in `ch`. `ch` resolves against each element's
     OWN font, and the cast face at 1.8rem measures nothing like body text at
     1.0625rem — 68ch of h2 is roughly twice 68ch of prose, which would have left
     each heading on a different left edge from its paragraphs. 47rem is the same
     width the measure was already producing for body copy.

     This layer sits after `parts` and `register` on purpose: several components
     set their own shorthand `margin`, which zeroes the inline auto margins if
     the centring is declared earlier. */
  /* 52rem, opened up from the 47rem the body measure was producing on its own.
     That is ~75 characters a line — still inside the comfortable band, and the
     column no longer reads as a narrow chute inside a 1280px pour. */
  :root { --column: 52rem; }

  .slab > .frame > * {
    margin-inline: auto;
    max-width: min(100%, var(--column));
  }

  /* Read across, not down: a four-cell figure strip, the 753-row register and
     the filing-date chart are all comparisons between columns, and a comparison
     compressed to a reading measure stops being one. */
  .slab > .frame > .figures,
  .slab > .frame > .reg,
  .slab > .frame > .tape { max-width: none; }

  /* Nothing made of sentences breaks out, and that includes the prose-and-aside
     grid and the three-column roster of signatories. Both were tried as
     break-outs: a full-pour block of text under a heading that starts 260px
     further in leaves the heading looking detached from its own section. A
     chart, a table and a figure strip get away with it because they read as
     plates set into the page rather than as continued text. */

  /* The title block is NOT exempt. Casting the whole hero across the pour was
     tried first, for the sake of the one hero that carries a prose-and-aside
     grid beside its h1 — but it put every other page's lede on a 1280px line,
     which at the lede's own size is well past 90 characters. So the h1 and the
     lede stay in the column with the prose below them, and the grid breaks out
     under them exactly as the register and the chart do under their headings. */
}

@layer motion {
  /* formwork-strip: a band arrives as if the shuttering were pulled off it —
     a hard-edged wipe up from the slab's own bottom arris, never a soft fade
     and never a scale. Resting state is fully visible, so no-JS and
     reduced-motion readers see finished concrete. */
  .strip { --strip: 1; }
  @media (prefers-reduced-motion: no-preference) {
    .js .strip:not(.is-cast) {
      clip-path: inset(0 0 100% 0);
      transform: translateY(14px);
    }
    .js .strip {
      transition: clip-path var(--settle), transform var(--settle);
      clip-path: inset(0 0 0 0);
      transform: none;
    }
  }
  /* The stage trail casts in one mark at a time, in the direction the sequence
     runs, when its slab is pulled. Opacity and translate only — nothing here
     changes layout, so the page's CLS stays at zero. */
  @media (prefers-reduced-motion: no-preference) {
    .js .strip:not(.is-cast) .stages .quarry-mark { opacity: 0; transform: translateY(9px); }
    .js .stages .quarry-mark {
      opacity: 1; transform: none;
      transition: opacity var(--settle-fast), transform var(--settle-fast);
    }
    .js .stages .quarry-mark:nth-child(2) { transition-delay: 80ms; }
    .js .stages .quarry-mark:nth-child(3) { transition-delay: 160ms; }
    .js .stages .quarry-mark:nth-child(4) { transition-delay: 240ms; }
    .js .stages .quarry-mark:nth-child(5) { transition-delay: 320ms; }
    .js .stages .quarry-mark:nth-child(6) { transition-delay: 400ms; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  }
}

@layer print {
  @media print {
    body { background: #fff; color: #000; }
    .top, .foot, .reg__chips, .nav, .skip, .tape { display: none; }
    .slab { box-shadow: none; border-top: 1px solid #999; padding-block: .8rem; }
    .recess, .figure, .record, .qa__item { background: none; border-color: #999; box-shadow: none; }
    .qa__body { display: block !important; }
    a { text-decoration: underline; }
  }
}

@layer fx {
/* fx:cairn-bed */
.cairn-bed {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background-color: #191815;
}

.cairn-bed::after {
  content: '';
  position: absolute;
  z-index: 2;
  pointer-events: none;
}

.cairn-bed::after {
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n1'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9049' numOctaves='3' seed='1' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%' height='100%' filter='url(%23n1)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  background-repeat: repeat;
  mix-blend-mode: screen;
  opacity: 0.1811;
}

.cairn-above {
  position: relative;
  z-index: 1;
}

@media print {
  .cairn-bed::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cairn-bed::after { animation: none; }
}

/* fx:facet-field */
.facet-field {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  height: 73px;
  padding: 0 39px;
  color: #eaeae9;
  background-color: rgba(25, 24, 21, 0.0000);
  transition:
    height 343ms cubic-bezier(0.16, 0.84, 0.44, 1),
    background-color 343ms linear,
    box-shadow 343ms linear,
    transform 343ms cubic-bezier(0.16, 0.84, 0.44, 1);
}

.facet-holder { height: 73px; }

html { scroll-padding-top: calc(76px + 10px); }

.facet-field .facet-core {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transform-origin: left center;
  transition: transform 343ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.facet-field nav {
  display: flex;
  align-items: center;
  gap: 26px;
}
.facet-field nav a {
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  opacity: 0.78;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  transition: opacity 160ms ease, border-color 160ms ease;
}
.facet-field nav a:hover { opacity: 1; border-bottom-color: rgba(44, 43, 39, 0.9); }
.facet-field nav a:focus-visible {
  outline: 2px solid rgba(44, 43, 39, 0.9);
  outline-offset: 4px;
  opacity: 1;
}

@media print {
  .facet-field {
    position: static;
    height: auto;
    padding: 0 0 8px;
    background: none;
    color: #000;
    box-shadow: none;
    transform: none;
  }
  .facet-holder { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .facet-field,
  .facet-field .facet-core { transition: none; }
  .facet-field.facet-gone { transform: none; }
}

.facet-field {
  box-shadow: none;
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
  transition:
    height 343ms cubic-bezier(0.16, 0.84, 0.44, 1),
    background-color 343ms linear,
    box-shadow 343ms linear,
    transform 343ms cubic-bezier(0.16, 0.84, 0.44, 1),
    -webkit-backdrop-filter 343ms linear,
    backdrop-filter 343ms linear;
}
.facet-field.facet-sunk {
  background-color: rgba(25, 24, 21, 0.5942);
  -webkit-backdrop-filter: blur(8px) saturate(1.4);
  backdrop-filter: blur(8px) saturate(1.4);
  box-shadow: inset 0 -1px 0 rgba(34, 33, 30, 0.3010);
}

/* fx:quill-bed */
.quill-bed { display: inline-block; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-weight: 700; letter-spacing: -0.0128em; color: #cecece; }

.quill-bed .quill-figure { display: inline-block; min-width: 0ch; text-align: left; }

.quill-bed { position: relative; padding-bottom: 7px; }
.quill-bed::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: rgba(34, 33, 30, 0.6225); transform-origin: left center; }
.quill-bed.quill-on::after { animation: quill-glide 979ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes quill-glide {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

@media (prefers-reduced-motion: reduce) {
  .quill-bed::before, .quill-bed::after { transition: none; }
}

/* fx:orchard-bed */
.orchard-bed {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #272623;
  color: #e6e6e5;
  border-radius: 2px;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

.orchard-bed tbody tr { background: #272623; }

.orchard-bed th,
.orchard-bed td {
  padding: 14px 12px;
  text-align: left;
  border-bottom: 1px solid rgba(34, 33, 30, 0.1557);
  background-clip: padding-box;
}
.orchard-bed tbody tr:last-child td { border-bottom: 0; }
.orchard-bed td:first-child { font-weight: 600; }

.orchard-bed thead th {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #a6a6a4;
  border-bottom-width: 2px;
  white-space: nowrap;
  vertical-align: bottom;
}

.orchard-bed thead th button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.orchard-bed thead th button:disabled { cursor: default; }
.orchard-bed thead th button:focus-visible {
  outline: 2px solid rgba(44, 43, 39, 0.85);
  outline-offset: 3px;
  border-radius: 2px;
}
.orchard-bed thead th[aria-sort]:not([aria-sort="none"]) { color: #e6e6e5; }

.orchard-bed tbody td {
  background-color: rgba(44, 43, 39, 0);
  transition: background-color 220ms ease;
}
.orchard-bed tbody td.orchard-chosen { background-color: rgba(44, 43, 39, 0.0796); }

.orchard-bed.orchard-shifting tbody tr {
  position: relative;
  will-change: transform;
}

@media print {
  .orchard-bed { background: none; color: #000; }
  .orchard-bed tbody td.orchard-chosen { background-color: transparent; }
  .orchard-bed thead th button { text-decoration: underline; }
}

.orchard-bed thead th[data-orchard-order] button::after {
  content: "";
  flex: 0 0 auto;
  width: 10px;
  height: calc(2px * 3);
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left top, left bottom;
  background-size: 100% 2px, 58% 2px;
  opacity: 0.34;
  transition: opacity 200ms ease, background-size 260ms cubic-bezier(0.16, 0.84, 0.44, 1);
}
.orchard-bed thead th[aria-sort="descending"] button::after,
.orchard-bed thead th[aria-sort="ascending"] button::after {
  opacity: 1;
  background-image:
    linear-gradient(rgba(44, 43, 39, 1), rgba(44, 43, 39, 1)),
    linear-gradient(rgba(44, 43, 39, 1), rgba(44, 43, 39, 1));
}
.orchard-bed thead th[aria-sort="ascending"] button::after {
  background-size: 58% 2px, 100% 2px;
}

/* fx:almanac-plate */
.almanac-plate {
  display: block;
  border-top: 1px solid rgba(34, 33, 30, 0.1491);
  border-radius: 8px;
}
.almanac-plate:last-of-type { border-bottom: 1px solid rgba(34, 33, 30, 0.1491); }

.almanac-plate > summary {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 19px;
  cursor: pointer;
  color: #e1e1e1;
  list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.almanac-plate > summary::-webkit-details-marker { display: none; }
.almanac-plate > summary:focus-visible {
  outline: 2px solid rgba(44, 43, 39, 0.9);
  outline-offset: -3px;
}

.almanac-plate > summary > :first-child {
  margin: 0;
  font-size: inherit;
  line-height: 1.35;
}

.almanac-detail {
  box-sizing: border-box;
  padding: 12px 19px 15px;
  color: #b7b7b6;
}
.almanac-detail > :first-child { margin-top: 0; }
.almanac-detail > :last-child { margin-bottom: 0; }

.almanac-plate.almanac-live .almanac-detail {
  overflow: hidden;
  will-change: height;
}

.almanac-plate > summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-right: 2px solid rgba(44, 43, 39, 0.85);
  border-bottom: 2px solid rgba(44, 43, 39, 0.85);
  transform: translateY(-18%) rotate(45deg);
  transition: transform 309ms cubic-bezier(0.16, 0.84, 0.44, 1), border-color 309ms linear;
}
.almanac-plate[open] > summary::after {
  transform: translateY(18%) rotate(225deg);
  border-color: rgba(44, 43, 39, 1);
}
.almanac-plate > summary:hover::after { border-color: rgba(44, 43, 39, 1); }
@media (prefers-reduced-motion: reduce) {
  .almanac-plate > summary::after,
  .almanac-plate > summary::before,
  .almanac-plate > summary { transition: none; }
}

/* fx:strata-bed */
.strata-bed .strata-track {
  position: relative;
  display: block;
}

.strata-item {
  display: block;
  padding: 16px;
  border-radius: 6px;
  background-color: rgba(39, 38, 33, 1);
  border: 1px solid rgba(127, 166, 46, 0.1800);
  transform-origin: top;
}

.strata-item[hidden] {
  display: none;
}

.strata-item:focus-visible {
  outline: 2px solid rgba(100, 99, 93, 0.9);
  outline-offset: 2px;
}

.strata-bed.strata-moving .strata-track {
  overflow: hidden;
}

.strata-bed:not([data-strata-wired]) .strata-bank {
  display: none;
}

.strata-bed[data-strata-wired] .strata-value {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.strata-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 0;
  list-style: none;
}

.strata-bed .strata-tag {
  display: inline-flex;
  align-items: center;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.15;
  padding: 9px 13px;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.strata-bed .strata-tag:disabled {
  cursor: default;
}

.strata-bed .strata-bank {
  border-bottom: 1px solid rgba(127, 166, 46, 0.1800);
  margin-bottom: 16px;
  gap: 6px;
}

.strata-bed .strata-tag {
  position: relative;
  opacity: 0.6004;
  border-bottom: 3px solid transparent;
  margin-bottom: -3px;
  transition: opacity 140ms linear, border-color 140ms linear;
}

.strata-bed .strata-tag:hover {
  opacity: 1;
}

.strata-bed .strata-tag[aria-selected='true'] {
  opacity: 1;
  border-bottom-color: rgba(100, 99, 93, 0.95);
}

.strata-bed .strata-tag:focus-visible {
  outline: 2px solid rgba(100, 99, 93, 0.9);
  outline-offset: 3px;
}

@media print {
  .strata-bed .strata-bank { display: none; }
  .strata-bed .strata-item[hidden] { display: block !important; }
  .strata-bed[data-strata-wired] .strata-value {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    clip-path: none;
  }
}

/* fx:quarry-field */
@property --quarry-fill {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.quarry-field {
  list-style: none;
  margin: 0;
  padding: 0;
}

.quarry-mark {
  position: relative;
  font-size: 14px;
  font-weight: 500;
  color: rgba(216, 215, 209, 0.4);
}

.quarry-mark:has(~ .quarry-mark[aria-current]) {
  --quarry-fill: 1;
  color: rgba(216, 215, 209, 0.68);
}

.quarry-mark[aria-current] {
  color: rgba(216, 215, 209, 0.96);
  font-weight: 700;
}

.quarry-field {
  display: grid;
  gap: 31px;
}

.quarry-mark {
  padding-left: 35px;
  line-height: 1.5;
  min-height: calc(14px * 1.5);
}

.quarry-mark::before {
  content: '';
  position: absolute;
  left: 0;
  top: calc((14px * 1.5 - 12px) / 2);
  width: 12px;
  height: 12px;
  border-radius: 999px;
  box-sizing: border-box;
  border: 2px solid rgba(127, 166, 46, 0.4);
  background-color: rgba(56, 54, 47, 1);
  z-index: 1;
  transition: background-color 200ms linear, border-color 200ms linear;
}

.quarry-mark:has(~ .quarry-mark[aria-current])::before,
.quarry-mark[aria-current]::before {
  border-color: rgba(127, 166, 46, 0.95);
  background-color: rgba(127, 166, 46, 0.95);
}

.quarry-mark[aria-current]::before {
  box-shadow: 0 0 0 4px rgba(127, 166, 46, 0.22);
}

.quarry-mark::after {
  content: '';
  position: absolute;
  left: calc((12px - 2px) / 2);
  top: calc(14px * 1.5 / 2);
  bottom: calc(-1 * (31px + 14px * 1.5 / 2));
  width: 2px;
  background-image: linear-gradient(
    to bottom,
    rgba(127, 166, 46, 0.9) calc(var(--quarry-fill) * 100%),
    rgba(127, 166, 46, 0.1720277995672077) calc(var(--quarry-fill) * 100%)
  );
}

.quarry-mark:last-child::after {
  display: none;
}

@media print {
  .quarry-mark { color: #000; }
  .quarry-mark:has(~ .quarry-mark[aria-current])::before,
  .quarry-mark[aria-current]::before { outline: 1px solid #000; }
}

@media (prefers-reduced-motion: reduce) {
  .quarry-mark::before,
  .quarry-mark::after { animation: none; transition: none; }
}

/* fx:ember-bed */
.ember-bed {
  position: relative;
  overflow: clip;
  isolation: isolate;
  background-color: #22211e;
}

.ember-bed::before {
  content: '';
  position: absolute;
  inset: -54px;
  z-index: 0;
  pointer-events: none;
}

@supports (animation-timeline: view()) {
  .ember-bed::before {
    animation: ember-crawl 1ms linear both;
    animation-timeline: view();
  }
}

.ember-bed::before {
  background-image:
    repeating-linear-gradient(
      43deg,
      rgba(127, 166, 46, 0.0833) 0,
      rgba(127, 166, 46, 0.0833) 1px,
      rgba(127, 166, 46, 0) 1px,
      rgba(127, 166, 46, 0) 7px
    ),
    repeating-linear-gradient(
      112deg,
      rgba(127, 166, 46, 0.0478) 0,
      rgba(127, 166, 46, 0.0478) 1px,
      rgba(127, 166, 46, 0) 1px,
      rgba(127, 166, 46, 0) 21px
    );
}

.ember-bed::before {
  -webkit-mask-image:
    linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 9%, #000 88%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 2%, #000 98%, rgba(0, 0, 0, 0) 100%);
  mask-image:
    linear-gradient(to right, rgba(0, 0, 0, 0) 0, #000 9%, #000 88%, rgba(0, 0, 0, 0) 100%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 2%, #000 98%, rgba(0, 0, 0, 0) 100%);
}

.ember-over {
  position: relative;
  z-index: 1;
}

@keyframes ember-crawl {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-52px, -52px, 0); }
}

@media print {
  .ember-bed::before { display: none; }
  .ember-bed { background-color: transparent; }
}

@media (prefers-reduced-motion: reduce) {
  .ember-bed::before { animation: none; }
}

}

@layer parts {
  .almanac-plate { border-radius: 0; border-top-color: var(--form-edge); }
  .almanac-plate:last-of-type { border-bottom-color: var(--form-edge); }
  .almanac-plate > summary { color: var(--chalk); padding: clamp(.95rem, 2.2vw, 1.35rem); }
  .almanac-plate > summary::after { border-color: var(--moss); width: 11px; height: 11px; }
  .almanac-plate[open] > summary::after { border-color: var(--moss); }
  .almanac-detail { color: inherit; padding: 0 clamp(.95rem, 2.2vw, 1.35rem) clamp(1.1rem, 2.4vw, 1.5rem); }
  .orchard-bed thead th button {
    font: inherit; color: inherit; letter-spacing: inherit; text-transform: inherit;
    display: inline-flex; align-items: center; gap: .4rem; padding: 0;
  }
  .orchard-bed thead th[aria-sort]:not([aria-sort="none"]) { color: var(--moss); }
  .orchard-bed tbody td.orchard-chosen { color: inherit; }
}