/* SELINOZSAYAN LTD — selinozsayan.space
   The sheet declares its three layers first and keeps to them: base may set only properties
   that inherit, components owns every box, overrides has the last word on motion and on paper. */

@layer base, components, overrides;

/* ------------------------------------------------------------------ base
   Inherited properties only. No box is described here, nothing is reset. */

@layer base {

  :root {
    --bg: #17211c;
    --ink: #e6ece6;
    --accent: #89b08f;
    --accent2: #c2a36b;
    --surface: #1f2c25;

    --rule: color-mix(in srgb, var(--accent) 38%, transparent);
    --rule-quiet: color-mix(in srgb, var(--accent) 20%, transparent);
    --ruled: color-mix(in srgb, var(--accent) 12%, transparent);
    --ink-quiet: color-mix(in srgb, var(--ink) 70%, var(--bg));
    /* the third ink level is still the quietest, but it clears 4.5:1 on this ground;
       measured, because 44% looked right and read at 3.7 */
    --ink-faint: color-mix(in srgb, var(--ink) 58%, var(--bg));
    --card: color-mix(in srgb, var(--surface) 82%, var(--bg));
    --card-lift: color-mix(in srgb, var(--surface) 96%, var(--ink));
    --brass-quiet: color-mix(in srgb, var(--accent2) 62%, var(--bg));
    --shade: color-mix(in srgb, var(--bg) 70%, transparent);
    --sweep: color-mix(in srgb, var(--ink) 9%, transparent);

    --measure: 32em;
    --column: 54rem;
    --gutter: clamp(1.1rem, 0.6rem + 2.4vw, 2.6rem);
    --rung: clamp(2.05rem, 1rem + 2.4vh, 2.55rem);
    --bow: clamp(6.1rem, 3.4rem + 7.4vw, 9.4rem);
    --band: 2.4s;
    --ease: cubic-bezier(.22, .68, .26, 1);

    color-scheme: dark;
    accent-color: var(--accent);
    color: var(--ink);
    font-family: Labrada, "Iowan Old Style", Palatino, Georgia, serif;
    font-size: clamp(1rem, 0.96rem + 0.22vw, 1.08rem);
    line-height: 1.66;
    font-variant-numeric: tabular-nums;
    text-underline-offset: 0.22em;
    -webkit-text-size-adjust: 100%;
  }

  h1, h2, h3, h4, caption, summary, th {
    font-family: "Antic Didone", "Didot", "Hoefler Text", Georgia, serif;
    font-weight: 400;
    line-height: 1.16;
    text-wrap: balance;
    letter-spacing: 0.012em;
  }

  h1 { font-size: clamp(2.1rem, 1.3rem + 4.2vw, 3.5rem); letter-spacing: 0.04em; }
  h2 { font-size: clamp(1.44rem, 1.1rem + 1.5vw, 1.95rem); }
  h3 { font-size: clamp(1.1rem, 1rem + 0.5vw, 1.3rem); }
  h4 {
    font-size: 0.78rem;
    letter-spacing: 0.17em;
    text-transform: uppercase;
    color: var(--brass-quiet);
    line-height: 1.3;
  }

  p, li, dd, td, figcaption { text-wrap: pretty; }
  strong { font-weight: 600; color: var(--ink); }
  em { font-style: italic; color: var(--ink-quiet); }
  abbr { text-decoration: none; letter-spacing: 0.04em; }
  time { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
  dt { color: var(--brass-quiet); letter-spacing: 0.08em; font-size: 0.74rem; text-transform: uppercase; }
  code, output, samp { font-family: inherit; font-variant-numeric: tabular-nums lining-nums; }
  caption { font-size: 0.95rem; color: var(--ink-quiet); text-align: left; }
  input, select, button, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
  ::selection { background: var(--accent); color: var(--bg); }
  ::placeholder { color: var(--ink-faint); }
}

/* ------------------------------------------------------------- components
   Every box in the site, addressed by what it is rather than by a name.
   Three ids exist in the whole site: #main, #sheet, #notice. */

@layer components {

  html { box-sizing: border-box; }
  *, *::before, *::after { box-sizing: inherit; }

  body {
    margin: 0;
    padding: 0 var(--gutter) calc(var(--rung) * 2.4);
    background-color: var(--bg);
    background-image:
      radial-gradient(118% 62% at 82% -6%, color-mix(in srgb, var(--surface) 90%, transparent), transparent 62%),
      repeating-linear-gradient(to bottom, transparent 0 calc(var(--rung) * 2 - 1px), var(--ruled) calc(var(--rung) * 2 - 1px) calc(var(--rung) * 2));
    background-attachment: scroll, fixed;
    overflow-x: hidden;
  }

  /* -- skip target: the one link above the masthead ------------------- */

  body > a:first-child {
    position: absolute;
    left: var(--gutter);
    top: 0;
    z-index: 40;
    padding: 0.5rem 0.9rem;
    transform: translateY(-140%);
    background: var(--accent);
    color: var(--bg);
    text-decoration: none;
    font-size: 0.82rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: transform 0.24s var(--ease);
  }
  body > a:first-child:focus-visible { transform: translateY(0.4rem); }

  /* -- masthead, and the rule that carries the register ------------- */

  body > header {
    max-width: var(--column);
    margin: 0 auto;
    padding: calc(var(--rung) * 1.5) 0 0;
  }
  body > header > h1,
  body > header > p:first-of-type {
    margin: 0;
  }
  body > header > h1 { text-transform: uppercase; }
  body > header > h1 > a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.3s var(--ease), color 0.3s var(--ease);
  }
  body > header > h1 > a:hover,
  body > header > h1 > a:focus-visible { border-bottom-color: var(--accent); color: var(--accent); }

  body > header > p {
    max-width: var(--measure);
    margin: 0.7rem 0 0;
    color: var(--ink-quiet);
  }
  body > header > p > em { color: var(--accent); font-style: normal; }

  /* the masthead rule is a stack: heavy, hair, hair — the texture of the whole site */
  body > header > dl {
    margin: 1.4rem 0 0;
    padding: 0.7rem 0 0;
    border-top: 2px solid var(--rule);
    box-shadow:
      0 3px 0 -2px var(--rule-quiet),
      0 6px 0 -5px var(--rule-quiet);
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 1.7rem;
    font-size: 0.78rem;
  }
  body > header > dl > dt { flex: 0 0 auto; align-self: baseline; }
  body > header > dl > dd {
    flex: 0 0 auto;
    margin: 0 0.4rem 0 -1.3rem;
    color: var(--ink-quiet);
    font-size: 0.86rem;
  }

  /* the squeegee: one soft band, once, downward from the masthead */
  body > header::after {
    content: "";
    position: fixed;
    inset-inline: -2rem;
    top: 0;
    height: 11rem;
    z-index: 30;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, var(--sweep) 42%, color-mix(in srgb, var(--accent) 14%, transparent) 58%, transparent);
    animation: squeegee var(--band) cubic-bezier(.4, .02, .3, 1) 0.15s both;
  }

  /* -- corner dial: the only navigation, at every width -------------- */

  /* the dial occupies the corner itself rather than floating in from it: a disc set
     in off the edge covers a square of running text, a quadrant covers the corner */
  body > nav {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 35;
  }
  body > nav > details { position: relative; }
  /* the hub keeps no z-index of its own: giving it one would trap the scrim it owns
     inside its stacking context, and the scrim would then paint over the fanned links */
  body > nav summary {
    position: relative;
    display: grid;
    justify-items: center;
    align-content: end;
    gap: 0.1rem;
    width: 5.1rem;
    height: 5.1rem;
    padding: 0 0.45rem 0.5rem 1.1rem;
    margin-left: auto;
    border: 1px solid var(--rule);
    border-right-width: 0;
    border-bottom-width: 0;
    border-radius: 100% 0 0 0;
    background-color: var(--surface);
    background-image:
      radial-gradient(circle at 100% 100%, transparent 0 3.45rem, var(--rule-quiet) 3.45rem 3.5rem, transparent 3.5rem),
      radial-gradient(circle at 100% 100%, var(--card-lift), var(--surface));
    color: var(--accent);
    cursor: pointer;
    list-style: none;
    box-shadow: -0.5rem -0.5rem 1.6rem var(--shade);
    transition: color 0.26s var(--ease), border-color 0.26s var(--ease), box-shadow 0.26s var(--ease);
  }
  body > nav summary::-webkit-details-marker { display: none; }
  body > nav summary > svg { width: 1.55rem; height: 1.55rem; overflow: visible; }
  body > nav summary > svg > path { transition: stroke-dashoffset 0.5s var(--ease), opacity 0.26s var(--ease); }
  body > nav summary > span {
    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-quiet);
  }
  body > nav summary:hover,
  body > nav summary:focus-visible {
    color: var(--accent2);
    border-color: var(--accent2);
    box-shadow: 0 0.5rem 1.6rem var(--shade), 0 0 0 0.3rem color-mix(in srgb, var(--accent2) 18%, transparent);
  }

  /* the scrim belongs to the open summary, so a click on it closes the dial without script */
  body > nav details[open] > summary::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: color-mix(in srgb, var(--bg) 78%, transparent);
    backdrop-filter: blur(2px);
  }
  body > nav details[open] > summary { color: var(--accent2); border-color: var(--accent2); }
  body > nav details[open] > summary > svg > path:last-of-type { opacity: 0.25; }

  body > nav ul {
    position: absolute;
    right: 1.35rem;
    bottom: 1.35rem;
    z-index: 2;
    margin: 0;
    padding: 0;
    list-style: none;
    width: max-content;
  }
  body > nav li {
    position: absolute;
    right: 0;
    bottom: 0;
    white-space: nowrap;
    transform: translate(0, 0) scale(0.6);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.42s var(--ease), opacity 0.3s linear, visibility 0s linear 0.42s;
  }
  body > nav details[open] li {
    visibility: visible;
    opacity: 1;
    transform: translate(calc(var(--bow) * var(--bx) * -1), calc(var(--rung) * var(--k) * -1)) scale(1);
    transition-delay: calc(var(--k) * 24ms), calc(var(--k) * 24ms), 0s;
  }
  /* reading order runs top to bottom; the fan opens from the hub outward, so the item
     nearest the hub is last in the list and first to arrive */
  body > nav li:nth-child(1) { --k: 9; --bx: 0.47; }
  body > nav li:nth-child(2) { --k: 8; --bx: 0.65; }
  body > nav li:nth-child(3) { --k: 7; --bx: 0.80; }
  body > nav li:nth-child(4) { --k: 6; --bx: 0.91; }
  body > nav li:nth-child(5) { --k: 5; --bx: 0.98; }
  body > nav li:nth-child(6) { --k: 4; --bx: 1.00; }
  body > nav li:nth-child(7) { --k: 3; --bx: 0.97; }
  body > nav li:nth-child(8) { --k: 2; --bx: 0.88; }
  body > nav li:nth-child(9) { --k: 1; --bx: 0.74; }

  body > nav a {
    display: block;
    padding: 0.3rem 0.72rem;
    border: 1px solid var(--rule-quiet);
    border-right-width: 3px;
    background: var(--card-lift);
    color: var(--ink);
    text-decoration: none;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    box-shadow: 0 0.3rem 0.9rem var(--shade);
    transition: border-right-color 0.2s var(--ease), color 0.2s var(--ease), translate 0.2s var(--ease);
  }
  body > nav a:hover,
  body > nav a:focus-visible { color: var(--accent2); border-right-color: var(--accent2); translate: -0.25rem 0; }
  body > nav a[aria-current] { color: var(--accent); border-right-color: var(--accent); }
  body > nav a[aria-current]::after { content: " ·"; color: var(--accent); }

  /* -- the page ------------------------------------------------------ */

  main {
    display: block;
    max-width: var(--column);
    margin: 0 auto;
    padding-bottom: calc(var(--rung) * 2);
  }
  main > section {
    padding: calc(var(--rung) * 1.5) 0 0;
    border-top: 1px solid transparent;
  }
  main > section + section { border-top-color: var(--rule-quiet); margin-top: calc(var(--rung) * 1.3); }
  /* the rule under a head is cut to the measure, not to the column: a rule that
     overshoots the text it belongs to by four hundred pixels reads as an accident */
  main > section > h2 {
    position: relative;
    max-width: 17em;
    margin: 0 0 0.9rem;
    padding-bottom: 0.4rem;
  }
  /* underline sweep: drawn as the band passes, and drawn already when motion is declined */
  main > section > h2::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(to right, var(--accent), color-mix(in srgb, var(--accent2) 70%, transparent) 62%, transparent);
    transform-origin: left center;
    transform: scaleX(0);
    animation: sweep 0.72s var(--ease) both;
    animation-delay: calc(0.3s + var(--n, 1) * 0.16s);
  }
  main > section:nth-of-type(1) { --n: 1; }
  main > section:nth-of-type(2) { --n: 2; }
  main > section:nth-of-type(3) { --n: 3; }
  main > section:nth-of-type(4) { --n: 4; }
  main > section:nth-of-type(5) { --n: 5; }
  main > section:nth-of-type(n+6) { --n: 6; }

  main p, main li, main dd { max-width: var(--measure); }
  main > section > p { margin: 0 0 1rem; }
  main > section > p:first-of-type { color: var(--ink); }
  main a:not([aria-current]) {
    color: var(--accent);
    text-decoration-color: var(--rule);
    text-decoration-thickness: 1px;
    transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
  }
  main a:hover, main a:focus-visible { color: var(--accent2); text-decoration-color: var(--accent2); }

  /* -- the spread: left page agreed, right page written down --------- */

  article:has(> div + div) {
    display: grid;
    gap: 0 0;
    margin: 0 0 calc(var(--rung) * 1.1);
    border-top: 1px solid var(--rule-quiet);
  }
  article:has(> div + div) > h3 {
    grid-column: 1 / -1;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0.9rem 0 0.2rem;
  }
  article:has(> div + div) > h3 > small {
    flex: 0 0 auto;
    padding: 0.08rem 0.4rem;
    border: 1px solid var(--rule-quiet);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    color: var(--accent2);
  }
  article > div {
    padding: 0.9rem 0 1.2rem;
    min-width: 0;
  }
  article > div > h4 { margin: 0 0 0.5rem; }
  article > div > p { margin: 0 0 0.7rem; }
  article > div > p:last-child { margin-bottom: 0; }

  /* the recto is ruled paper; the verso is plain. The ruling is carried by the list
     itself so that every rule lands under a line of the entry rather than near one */
  article > div:last-of-type {
    padding-left: 1rem;
    border-left: 1px solid var(--rule-quiet);
  }
  article > div:last-of-type > h4 { color: var(--accent); }
  article > div:last-of-type > ul {
    margin: 0;
    padding-left: 1.1rem;
    list-style: none;
    background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.66rem - 1px), var(--ruled) calc(1.66rem - 1px) 1.66rem);
  }
  article > div:last-of-type > ul > li {
    position: relative;
    margin: 0;
    padding: 0;
    line-height: 1.66rem;
    color: var(--ink-quiet);
  }
  article > div:last-of-type > ul > li::before {
    content: "—";
    position: absolute;
    left: -1.1rem;
    color: var(--accent);
    opacity: 0.6;
  }

  @media (min-width: 46rem) {
    article:has(> div + div) { grid-template-columns: 1fr 1fr; column-gap: calc(var(--gutter) * 1.6); }
    article > div:last-of-type { padding-left: calc(var(--gutter) * 1.1); }
  }

  /* -- the diary table, which the band resolves --------------------- */

  /* both scrollers keep a visible bar: an overlay scrollbar that appears only once you
     have already scrolled cannot tell you that there is anything to scroll to */
  main > section > div:has(> table),
  figure {
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
  }
  main > section > div:has(> table) {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  main > section > div:has(> table):focus-visible { outline: 2px solid var(--accent2); outline-offset: 4px; }
  table {
    width: 100%;
    margin: 1rem 0 0;
    border-collapse: collapse;
    font-size: 0.93rem;
  }
  caption {
    max-width: var(--measure);
    padding: 0 0 0.9rem;
    line-height: 1.45;
  }
  thead th {
    padding: 0 0.6rem 0.45rem 0;
    border-bottom: 2px solid var(--rule);
    text-align: left;
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--brass-quiet);
    white-space: nowrap;
  }
  tbody th, tbody td {
    padding: 0.52rem 0.6rem 0.52rem 0;
    border-bottom: 1px solid var(--ruled);
    text-align: left;
    vertical-align: baseline;
  }
  tbody th { font-size: 0.95rem; letter-spacing: 0.03em; white-space: nowrap; }
  tbody td { color: var(--ink-quiet); white-space: nowrap; }
  tbody td:last-child { color: var(--ink-faint); font-size: 0.88rem; }
  tbody tr {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
    animation: setrow 0.66s var(--ease) both;
    animation-delay: calc(0.42s + var(--r) * 0.17s);
    transition: background-color 0.2s linear;
  }
  tbody tr:hover { background-color: color-mix(in srgb, var(--surface) 70%, transparent); }
  tbody tr:nth-child(1) { --r: 1; }
  tbody tr:nth-child(2) { --r: 2; }
  tbody tr:nth-child(3) { --r: 3; }
  tbody tr:nth-child(4) { --r: 4; }
  tbody tr:nth-child(5) { --r: 5; }
  tbody tr:nth-child(6) { --r: 6; }
  tbody tr:nth-child(n+7) { --r: 7; }
  tfoot td {
    padding: 0.7rem 0.6rem 0 0;
    color: var(--ink-faint);
    font-size: 0.84rem;
  }

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

  main > section:has(> aside) { display: block; }
  main > section > aside {
    position: relative;
    margin: 1.3rem 0 0;
    padding: 1.6rem 1.1rem 1.2rem;
    border: 1px solid var(--rule-quiet);
    background-color: var(--card);
    box-shadow: 0 0.2rem 0 -0.1rem var(--rule-quiet);
    transition: box-shadow 0.26s var(--ease), border-color 0.26s var(--ease);
  }
  main > section > aside:hover {
    border-color: var(--rule);
    box-shadow: 0 0.2rem 0 -0.1rem var(--accent), 0 0.9rem 1.8rem var(--shade);
  }
  main > section > aside > h3 {
    position: absolute;
    top: -0.82rem;
    left: 0.8rem;
    margin: 0;
    padding: 0 0.6rem;
    background: var(--bg);
    font-size: 0.86rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--accent);
  }
  main > section > aside > p { margin: 0 0 0.7rem; }
  /* the card is ruled by its own field list, one rule per field, so the ruling cannot
     drift away from the rows however far the card's opening line wraps */
  main > section > aside > dl {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 0 1rem;
    margin: 0;
    background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.66rem - 1px), var(--ruled) calc(1.66rem - 1px) 1.66rem);
  }
  main > section > aside > dl > dt {
    align-self: baseline;
    line-height: 1.66rem;
  }
  main > section > aside > dl > dd {
    margin: 0;
    line-height: 1.66rem;
    color: var(--ink-quiet);
    font-size: 0.94rem;
    overflow-wrap: anywhere;
  }

  @media (min-width: 42rem) {
    main > section:has(> aside + aside) { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: calc(var(--gutter) * 1.4); }
    main > section:has(> aside) > h2,
    main > section:has(> aside) > p,
    main > section:has(> aside) > figure { grid-column: 1 / -1; }
  }

  /* -- the sheets (both widgets share one frame) -------------------- */

  form {
    margin: 1.2rem 0 0;
    padding: 0;
    border-top: 2px solid var(--rule);
  }
  form > div:first-of-type {
    display: grid;
    gap: 0.9rem 1.2rem;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--rule-quiet);
  }
  form label {
    display: grid;
    gap: 0.28rem;
    font-size: 0.74rem;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--brass-quiet);
  }
  form label > input,
  form label > select {
    padding: 0.44rem 0.55rem;
    border: 1px solid var(--rule-quiet);
    border-bottom-width: 2px;
    background: color-mix(in srgb, var(--surface) 60%, transparent);
    font-size: 1rem;
    letter-spacing: 0.02em;
    text-transform: none;
    color: var(--ink);
    transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
  }
  /* the ring stays. A border that changes colour is not a focus indicator: it is the
     same two pixels in a different green, and on this ground it is nearly invisible. */
  form label > input:focus-visible,
  form label > select:focus-visible {
    outline: 2px solid var(--accent2);
    outline-offset: 2px;
    border-color: var(--accent);
    background: color-mix(in srgb, var(--surface) 95%, transparent);
  }
  form label:has(> input:invalid) > input { border-bottom-color: var(--accent2); }
  form > p { margin: 0.9rem 0 0; font-size: 0.88rem; color: var(--ink-faint); max-width: var(--measure); }

  @media (min-width: 34rem) {
    form > div:first-of-type { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    form:has(label:nth-of-type(5)) > div:first-of-type { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  }

  form button {
    margin: 0.9rem 0 0;
    padding: 0.42rem 1rem;
    border: 1px solid var(--rule);
    border-bottom-width: 3px;
    background: color-mix(in srgb, var(--surface) 80%, transparent);
    color: var(--accent);
    font-size: 0.76rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.2s var(--ease), border-color 0.2s var(--ease), background-color 0.2s var(--ease);
  }
  form button:hover,
  form button:focus-visible {
    color: var(--accent2);
    border-color: var(--accent2);
    background: var(--surface);
  }
  form button:active { border-bottom-width: 1px; margin-top: 1.05rem; }

  output {
    display: block;
    padding: 1.1rem 0 0;
  }
  output > h4 {
    margin: 0 0 0.7rem;
    font-size: 1.04rem;
    letter-spacing: 0.03em;
    text-transform: none;
    color: var(--accent);
  }
  output p { margin: 0 0 0.7rem; max-width: var(--measure); }
  /* one column while the terms are long enough to wrap: a term squeezed into eighty
     pixels beside a date that refuses to break is two columns of wreckage */
  output dl {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    margin: 0 0 1.1rem;
    max-width: 34rem;
  }
  output dl > dt {
    padding: 0.4rem 0 0;
    text-transform: none;
    letter-spacing: 0.01em;
    font-size: 0.86rem;
    color: var(--ink-quiet);
  }
  output dl > dd {
    margin: 0;
    padding: 0 0 0.4rem;
    border-bottom: 1px solid var(--ruled);
    font-size: 1.02rem;
    color: var(--ink);
  }
  output dl > dd:last-of-type {
    border-bottom: 2px solid var(--rule);
    color: var(--accent2);
  }
  @media (min-width: 32rem) {
    output dl { grid-template-columns: minmax(0, 1fr) max-content; }
    output dl > dt {
      padding: 0.4rem 0.9rem 0.4rem 0;
      border-bottom: 1px solid var(--ruled);
      align-self: baseline;
    }
    output dl > dd { padding: 0.4rem 0; text-align: right; white-space: nowrap; }
    output dl > dt:last-of-type { border-bottom: 2px solid var(--rule); color: var(--accent2); }
  }
  output ol {
    margin: 0 0 1.1rem;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
  }
  output ol > li {
    padding: 0.2rem 0.6rem;
    border: 1px solid var(--rule-quiet);
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    font-size: 0.9rem;
    transition: border-left-color 0.2s linear, background-color 0.2s linear;
  }
  output ol > li:hover { border-left-color: var(--accent2); background: var(--surface); }
  output ol > li > b { font-weight: 400; color: var(--ink); }
  output ol > li > span { color: var(--ink-faint); font-size: 0.8rem; }
  output > p:last-child { color: var(--ink-faint); font-size: 0.88rem; }
  output:has(> strong:first-child) > strong { color: var(--accent2); font-weight: 400; }

  /* -- drawings ----------------------------------------------------- */

  /* a drawing scaled to a 320 px column sets its own labels at four pixels, which is
     not a drawing. Below the width it was drawn for it keeps its size and scrolls. */
  figure {
    margin: 1.4rem 0 1.6rem;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }
  figure > svg {
    display: block;
    width: 100%;
    min-width: 30rem;
    height: auto;
    border: 1px solid var(--rule-quiet);
    background: color-mix(in srgb, var(--surface) 55%, transparent);
  }
  figcaption {
    margin: 0.55rem 0 0;
    max-width: var(--measure);
    font-size: 0.84rem;
    color: var(--ink-faint);
  }

  /* -- stacked rules: the plain ordered and unordered lists --------- */

  main > section > ol:not([start]) {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
    counter-reset: rung;
  }
  main > section > ol:not([start]) > li {
    counter-increment: rung;
    position: relative;
    padding: 0.7rem 0 0.7rem 2.9rem;
    border-top: 1px solid var(--ruled);
    max-width: calc(var(--measure) + 2.9rem);
  }
  main > section > ol:not([start]) > li::before {
    content: counter(rung, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.72rem;
    font-size: 0.78rem;
    letter-spacing: 0.1em;
    color: var(--accent2);
  }
  main > section > ol:not([start]) > li > strong { display: block; }

  main > section > ul {
    margin: 1rem 0 0;
    padding: 0;
    list-style: none;
  }
  main > section > ul > li {
    position: relative;
    padding: 0.5rem 0 0.5rem 1.4rem;
    border-top: 1px solid var(--ruled);
  }
  main > section > ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 1.18rem;
    width: 0.6rem;
    height: 1px;
    background: var(--accent);
  }
  main > section > ul:has(> li > a) > li { padding-left: 0; }
  main > section > ul:has(> li > a) > li::before { display: none; }
  main > section > ul > li > a {
    display: block;
    padding: 0.2rem 0;
  }
  main > section > ul > li > a + span {
    display: block;
    max-width: var(--measure);
    color: var(--ink-faint);
    font-size: 0.9rem;
  }

  blockquote {
    margin: 1.2rem 0 0;
    padding: 0.2rem 0 0.2rem 1.1rem;
    border-left: 2px solid var(--accent2);
    max-width: var(--measure);
    color: var(--ink-quiet);
  }
  blockquote > p { margin: 0; }

  /* -- footer ------------------------------------------------------- */

  body > footer {
    max-width: var(--column);
    margin: calc(var(--rung) * 2) auto 0;
    padding: 1.4rem 0 0;
    border-top: 2px solid var(--rule);
    box-shadow: 0 3px 0 -2px var(--rule-quiet), 0 6px 0 -5px var(--rule-quiet);
    font-size: 0.88rem;
    color: var(--ink-quiet);
  }
  body > footer > p { margin: 0 0 0.9rem; max-width: var(--measure); }
  body > footer address {
    margin: 0 0 0.9rem;
    font-style: normal;
    line-height: 1.5;
  }
  body > footer address > span { display: block; }
  body > footer address > span:first-child { color: var(--ink); letter-spacing: 0.06em; text-transform: uppercase; }
  body > footer > p:last-of-type { color: var(--ink-faint); font-size: 0.82rem; }
  body > footer a {
    color: var(--accent);
    text-decoration-color: var(--rule-quiet);
    transition: color 0.2s var(--ease), text-decoration-color 0.2s var(--ease);
  }
  body > footer a:hover, body > footer a:focus-visible { color: var(--accent2); text-decoration-color: var(--accent2); }

  :focus-visible { outline: 2px solid var(--accent2); outline-offset: 3px; }
  /* the skip target takes focus so the next Tab starts inside the page; a brass box
     drawn round the whole page is not the feedback a reader wants for that */
  main:focus, main:focus-visible { outline: none; }
  main:focus-visible > section:first-of-type > h2 { text-decoration: underline; text-decoration-color: var(--accent2); }

  @media (min-width: 46rem) {
    body > footer > address {
      float: right;
      margin-left: calc(var(--gutter) * 2);
      text-align: right;
    }
    body > footer::after { content: ""; display: block; clear: both; }
  }
}

/* -------------------------------------------------------------- motion */

@keyframes squeegee {
  0%   { transform: translateY(-11rem); opacity: 0; }
  9%   { opacity: 1; }
  88%  { opacity: 0.55; }
  100% { transform: translateY(102vh); opacity: 0; }
}

@keyframes setrow {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to   { clip-path: inset(0 0 0 0); opacity: 1; }
}

@keyframes sweep {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(0.7rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes pageOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

::view-transition-old(root) { animation: pageOut 0.2s linear both; }
::view-transition-new(root) { animation: pageIn 0.34s cubic-bezier(.22, .68, .26, 1) both; }

/* ------------------------------------------------------------ overrides
   Last layer, so it wins on normal declarations, and the only layer that
   uses !important, so it wins on those too. */

@layer overrides {

  @media (prefers-reduced-motion: reduce) {

    *, *::before, *::after {
      animation-duration: 1ms !important;
      animation-delay: 0s !important;
      animation-iteration-count: 1 !important;
      transition-duration: 1ms !important;
      transition-delay: 0s !important;
      scroll-behavior: auto !important;
    }

    /* the set-piece lands finished: no band, every row set, every rule drawn */
    body > header::after { display: none !important; }
    tbody tr { clip-path: none !important; opacity: 1 !important; }
    main > section > h2::after { transform: scaleX(1) !important; }
    body > nav li { transform: translate(calc(var(--bow) * var(--bx) * -1), calc(var(--rung) * var(--k) * -1)) scale(1); }
    body > nav details:not([open]) li { transform: none; }
    ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
  }

  @media (forced-colors: active) {
    body > nav a, main > section > aside, figure > svg { border-color: CanvasText; }
    main > section > h2::after, body > nav summary { forced-color-adjust: none; }
  }

  @media print {
    body { background: none; color: #000000; padding: 0; }
    body > nav, body > header::after, body > a:first-child { display: none; }
    main, body > header, body > footer { max-width: none; }
    main > section { break-inside: avoid; }
    article > div:last-of-type { background-image: none; border-left: 1px solid #000000; }
    tbody tr { clip-path: none; opacity: 1; animation: none; }
    main > section > h2::after { transform: scaleX(1); }
    body > footer { border-top: 1pt solid #000000; }
  }
}