@charset "UTF-8";

/* HAVENPORT STUDIO LTD - sheet styles for a bound register.
   Layers are declared once, in cascade order, so that later layers win on their own
   weight and no rule in this file needs !important. The reduced-motion block at the
   foot of the file is deliberately unlayered: unlayered rules outrank every layer,
   which is the only reliable way to guarantee the motion switch cannot be lost. */

@layer reset, token, frame, type, dial, head, register, prose, panel, sheet, foot;

@layer reset {
  /* Two nested layers, in this order on purpose. The baseline reverts a narrow list of
     elements to their user-agent values; the rules that follow then set what this sheet
     actually wants. Nesting them is what makes the second win: `all: revert-layer` on
     `input` is more specific than a universal selector, so a flat ordering would hand
     the browser's own box-sizing back to every form field. */
  @layer baseline, rules;

  @layer baseline {
    html, body, h1, h2, h3, p, ul, ol, li, dl, dt, dd,
    table, caption, th, td, fieldset, legend, label, input, select, button, output,
    figure, figcaption, address, hr, nav, section, header, footer, details, summary {
      all: revert-layer;
    }
  }

  @layer rules {

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

  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  body, h1, h2, h3, p, ul, ol, dl, dd, figure, address, fieldset, legend { margin: 0; padding: 0; }

  ul, ol { list-style: none; }

  img, svg { display: block; max-width: 100%; }

  table { border-collapse: collapse; width: 100%; }

  input, select, button, output { font: inherit; color: inherit; }

  button { cursor: pointer; }

  summary { cursor: pointer; list-style: none; }
  summary::-webkit-details-marker { display: none; }

  address { font-style: normal; }

  :focus-visible {
    outline: 2px solid var(--hav-accent);
    outline-offset: 3px;
  }

  }
}

@layer token {
  :root {
    --hav-bg: #f6f4ee;
    --hav-ink: #1f2440;
    --hav-accent: #3b4a8c;
    --hav-brass: #8c6f3b;
    --hav-surface: #ffffff;

    /* channel lists, so every tint below is mixed from the five registered colours
       and no sixth colour is ever introduced */
    --hav-ink-ch: 31 36 64;
    --hav-accent-ch: 59 74 140;
    --hav-brass-ch: 140 111 59;
    --hav-bg-ch: 246 244 238;

    --hav-hair: rgb(var(--hav-ink-ch) / 0.16);
    --hav-hair-firm: rgb(var(--hav-ink-ch) / 0.34);
    --hav-hair-brass: rgb(var(--hav-brass-ch) / 0.42);
    --hav-wash: rgb(var(--hav-ink-ch) / 0.045);
    --hav-wash-brass: rgb(var(--hav-brass-ch) / 0.075);
    --hav-quiet: rgb(var(--hav-ink-ch) / 0.62);

    --hav-serif: "Bona Nova", "Iowan Old Style", Georgia, serif;
    --hav-body: "Readex Pro", "Segoe UI", system-ui, sans-serif;

    --hav-step: 0.45rem;
    --hav-folio-w: 2.1rem;
    --hav-gap: 0.8rem;
    --hav-rule-h: 1px;
    --hav-knob: 2.75rem;
    --hav-radius: 0;

    /* woven weft: warp in ink, weft in brass, offset so the crossings read as cloth */
    --hav-weave:
      repeating-linear-gradient(90deg, rgb(var(--hav-ink-ch) / 0.055) 0 1px, transparent 1px 6px),
      repeating-linear-gradient(0deg, rgb(var(--hav-brass-ch) / 0.08) 0 1px, transparent 1px 6px);
    --hav-weave-close:
      repeating-linear-gradient(90deg, rgb(var(--hav-ink-ch) / 0.08) 0 2px, transparent 2px 7px),
      repeating-linear-gradient(0deg, rgb(var(--hav-ink-ch) / 0.05) 0 2px, transparent 2px 7px),
      repeating-linear-gradient(0deg, rgb(var(--hav-brass-ch) / 0.07) 3px 5px, transparent 5px 14px);
  }

  @media (min-width: 46em) {
    :root { --hav-folio-w: 4.5rem; --hav-gap: 1.6rem; --hav-knob: 3.25rem; }
  }

  @media (min-width: 72em) {
    :root { --hav-folio-w: 5.5rem; --hav-gap: 2.1rem; }
  }
}

@layer frame {
  body {
    background-color: var(--hav-bg);
    background-image: var(--hav-weave);
    color: var(--hav-ink);
    font-family: var(--hav-body);
    font-size: 1rem;
    line-height: 1.62;
    min-height: 100vh;
    overflow-x: hidden;
    /* a correspondence address is one long token; let it break rather than run out
       of the column at the narrowest widths */
    overflow-wrap: break-word;
  }

  /* Offset-asymmetric spread. Every leaf of the register is ruled into the same
     columns: a narrow bound margin that carries folio numbers and nothing else, the
     body, and - once there is room - a wide outer margin for side notes. The body
     column is deliberately left of centre; the page is not a centred document. */
  .hav-sheet {
    --hav-spine: calc(var(--hav-folio-w) + 0.75rem);
    max-width: 78rem;
    margin-inline: auto;
    /* The dial is fixed in the corner, so a line of text could otherwise scroll under
       it. The right gutter is exactly the width the dial needs and nothing more: it
       shrinks to the ordinary margin as soon as the centred sheet clears the corner. */
    padding: 0 max(1rem, calc(var(--hav-knob) + 0.95rem - max(0px, (100vw - 78rem) / 2))) 0 0.75rem;
    background-image: linear-gradient(
      to right,
      transparent var(--hav-spine),
      var(--hav-hair) var(--hav-spine),
      var(--hav-hair) calc(var(--hav-spine) + 1px),
      transparent calc(var(--hav-spine) + 1px)
    );
  }

  .hav-leaf {
    display: grid;
    grid-template-columns: var(--hav-folio-w) minmax(0, 1fr);
    column-gap: var(--hav-gap);
  }

  .hav-leaf > .hav-folio { grid-area: 1 / 1; }

  .hav-leaf > .hav-head,
  .hav-leaf > .hav-note,
  .hav-leaf > .hav-foot { grid-area: 1 / 2; }

  /* a wide note keeps its prose at the body measure but lets a shelf, a drawing or a
     working sheet run on into the outer margin */
  @media (min-width: 72em) {
    .hav-leaf > .hav-note--wide { grid-area: 1 / 2 / 2 / -1; }
  }

  @media (min-width: 72em) {
    .hav-sheet { --hav-spine: calc(var(--hav-folio-w) + 2rem); padding-left: 2rem; }
    .hav-leaf { grid-template-columns: var(--hav-folio-w) minmax(0, 63ch) minmax(0, 21ch); }
  }

  .hav-folio {
    font-family: var(--hav-serif);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    color: var(--hav-brass);
    text-align: right;
    padding-top: calc(var(--hav-step) * 5);
    padding-right: 0.35rem;
    transition: color 220ms ease, letter-spacing 220ms ease;
  }

  .hav-folio[data-hav-state="live"] { color: var(--hav-accent); }

  .hav-folio[tabindex] { cursor: pointer; }

  .hav-folio[tabindex]:hover,
  .hav-folio[tabindex]:focus-visible { color: var(--hav-accent); letter-spacing: 0.1em; }

  .hav-folio__num { display: block; font-size: 1.35rem; line-height: 1; }

  .hav-folio__tick { display: block; margin-top: 0.3rem; border-top: 1px solid var(--hav-hair-brass); }

  .hav-note { padding-block: calc(var(--hav-step) * 4) calc(var(--hav-step) * 3); }

  .hav-leaf + .hav-leaf > .hav-note { border-top: 1px solid var(--hav-hair); }

  /* stagger indices are set here rather than in the markup, so that no element in the
     document carries a style attribute */
  .hav-register__row:nth-child(1) { --hav-i: 0; }
  .hav-register__row:nth-child(2) { --hav-i: 1; }
  .hav-register__row:nth-child(3) { --hav-i: 2; }
  .hav-register__row:nth-child(4) { --hav-i: 3; }
  .hav-register__row:nth-child(5) { --hav-i: 4; }
  .hav-register__row:nth-child(6) { --hav-i: 5; }
  .hav-register__row:nth-child(7) { --hav-i: 6; }
  .hav-register__row:nth-child(8) { --hav-i: 7; }
  .hav-register__row:nth-child(9) { --hav-i: 8; }
  .hav-register__row:nth-child(10) { --hav-i: 9; }

  .hav-panel:nth-child(1) { --hav-i: 0; }
  .hav-panel:nth-child(2) { --hav-i: 1; }
  .hav-panel:nth-child(3) { --hav-i: 2; }
  .hav-panel:nth-child(4) { --hav-i: 3; }
  .hav-panel:nth-child(5) { --hav-i: 4; }
  .hav-panel:nth-child(6) { --hav-i: 5; }
  .hav-panel:nth-child(7) { --hav-i: 6; }
  .hav-panel:nth-child(8) { --hav-i: 7; }
  .hav-panel:nth-child(n+9) { --hav-i: 8; }

  /* sines of these angles run 0.14, 0.36, 0.57, 0.79, 0.98 - near enough to an even
     fifth each, which is what puts the tabs an equal distance apart down the arc */
  .hav-dial__spoke:nth-child(1) { --hav-i: 0; --hav-a: -8deg; }
  .hav-dial__spoke:nth-child(2) { --hav-i: 1; --hav-a: -21deg; }
  .hav-dial__spoke:nth-child(3) { --hav-i: 2; --hav-a: -35deg; }
  .hav-dial__spoke:nth-child(4) { --hav-i: 3; --hav-a: -52deg; }
  .hav-dial__spoke:nth-child(5) { --hav-i: 4; --hav-a: -80deg; }
}

@layer type {
  h1, h2, h3 {
    font-family: var(--hav-serif);
    font-weight: 700;
    line-height: 1.16;
    text-wrap: balance;
  }

  h1 {
    font-size: clamp(1.75rem, 1.2rem + 2.6vw, 3.1rem);
    letter-spacing: 0.012em;
  }

  h2 {
    font-size: clamp(1.3rem, 1.08rem + 1.1vw, 1.95rem);
    margin-bottom: calc(var(--hav-step) * 2);
  }

  h3 {
    font-size: 1.06rem;
    letter-spacing: 0.01em;
    margin-bottom: calc(var(--hav-step) * 1.2);
  }

  /* numbered-chapter heads: the chapter number is set above the head, in brass, on its
     own baseline, the way a chapter opening is set in a bound volume */
  .hav-chapter {
    display: block;
    font-family: var(--hav-body);
    font-size: 0.7rem;
    font-weight: 400;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--hav-brass);
    margin-bottom: calc(var(--hav-step) * 1.4);
  }

  p { max-width: 68ch; }

  p + p { margin-top: calc(var(--hav-step) * 2); }

  a { color: var(--hav-accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

  a:hover { color: var(--hav-ink); text-decoration-color: var(--hav-brass); }

  strong, b { font-weight: 500; }

  .hav-lede { font-size: 1.08rem; }

  .hav-tight { letter-spacing: 0.02em; }

  .hav-num { font-variant-numeric: tabular-nums; }

  code, .hav-mono {
    font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
    font-size: 0.86em;
    letter-spacing: -0.01em;
  }
}

@layer dial {
  /* corner-dial navigation. One mechanism at every width: a native details/summary
     disclosure in the top corner whose links are laid out on an arc by rotating each
     spoke about the knob's centre and counter-rotating the label upright again. */
  .hav-dial-wrap {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 30;
    padding: 0.7rem;
  }

  .hav-dial { position: relative; }

  .hav-dial__knob {
    position: relative;
    display: grid;
    place-items: center;
    width: var(--hav-knob);
    height: var(--hav-knob);
    border: 1px solid var(--hav-hair-firm);
    border-radius: 50%;
    background-color: var(--hav-surface);
    background-image: var(--hav-weave-close);
    box-shadow: 0 1px 0 rgb(var(--hav-ink-ch) / 0.1);
    transition: transform 320ms cubic-bezier(.3, .8, .3, 1), border-color 220ms ease,
      box-shadow 220ms ease;
  }

  .hav-dial[open] .hav-dial__knob {
    transform: rotate(-14deg);
    border-color: var(--hav-accent);
    box-shadow: 0 0 0 3px rgb(var(--hav-accent-ch) / 0.14);
  }

  .hav-dial__knob:hover { border-color: var(--hav-accent); }

  .hav-dial__arc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--hav-accent);
  }

  .hav-dial__legend {
    position: relative;
    font-family: var(--hav-serif);
    font-weight: 700;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hav-ink);
  }

  .hav-dial__fan {
    position: absolute;
    top: calc(var(--hav-knob) / 2 + 0.7rem);
    right: calc(var(--hav-knob) / 2 + 0.7rem);
    width: 0;
    height: 0;
    /* the arc. Its angles are picked so the tabs are evenly spaced down the page
       rather than evenly spaced in degrees, which would bunch them at the bottom. */
    --hav-r: clamp(9.5rem, 42vw, 13rem);
  }

  .hav-dial__spoke {
    position: absolute;
    top: 0;
    right: 0;
    width: 6.9rem;
    transform-origin: 100% 0;
    transform: rotate(var(--hav-a)) translateX(calc(-1 * var(--hav-r))) rotate(calc(-1 * var(--hav-a)));
    animation: havSpokeFan 420ms cubic-bezier(.2, .9, .25, 1) both;
    animation-delay: calc(var(--hav-i) * 55ms);
  }

  .hav-dial__link {
    display: block;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--hav-hair-firm);
    border-right-width: 3px;
    background-color: var(--hav-surface);
    color: var(--hav-ink);
    font-size: 0.72rem;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 1px 0 rgb(var(--hav-ink-ch) / 0.08);
    transition: border-color 180ms ease, background-color 180ms ease, translate 180ms ease,
      color 180ms ease;
  }

  .hav-dial__link:hover,
  .hav-dial__link:focus-visible {
    border-color: var(--hav-accent);
    border-right-color: var(--hav-accent);
    background-color: var(--hav-bg);
    translate: -3px 0;
    color: var(--hav-accent);
  }

  .hav-dial__link[aria-current="page"] {
    border-right-color: var(--hav-brass);
    border-right-width: 5px;
    color: var(--hav-brass);
  }

  .hav-dial__ord {
    font-family: var(--hav-serif);
    font-weight: 700;
    font-size: 0.78em;
    letter-spacing: 0.08em;
    color: var(--hav-brass);
    margin-right: 0.4em;
  }

  .hav-dial__ord::after { content: "\00B7"; margin-left: 0.4em; color: var(--hav-hair-firm); }

  @media (min-width: 30em) {
    .hav-dial__spoke { width: 8.2rem; }
    .hav-dial__link { font-size: 0.8rem; padding: 0.38rem 0.6rem; }
  }

  .hav-dial__link[aria-current="page"] .hav-dial__ord { color: var(--hav-accent); }
}

@layer head {
  /* ledger-header: the page opens as the head of a bound register, not as a hero. */
  .hav-head { padding-block: calc(var(--hav-step) * 6) calc(var(--hav-step) * 4); }

  .hav-head__over {
    max-width: none;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 0.8rem;
    font-size: 0.72rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--hav-quiet);
    padding-bottom: calc(var(--hav-step) * 2);
    border-bottom: 2px solid var(--hav-hair-firm);
  }

  .hav-head__cloth { width: 2.1rem; height: 2.1rem; color: var(--hav-brass); flex: none; }

  .hav-head h1 { padding-top: calc(var(--hav-step) * 3); }

  .hav-head__rubric {
    font-family: var(--hav-serif);
    font-size: clamp(1rem, 0.94rem + 0.5vw, 1.2rem);
    color: var(--hav-accent);
    padding-top: calc(var(--hav-step) * 2);
    max-width: 44ch;
  }

  .hav-ledger {
    margin-top: calc(var(--hav-step) * 5);
    border-top: 1px solid var(--hav-hair-firm);
  }

  .hav-ledger__line {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0 1rem;
    padding: calc(var(--hav-step) * 1.6) 0;
    border-bottom: 1px solid var(--hav-hair);
    transition: background-color 200ms ease, padding-left 200ms ease;
  }

  .hav-ledger__line:hover { background-color: var(--hav-wash); padding-left: 0.4rem; }

  @media (min-width: 34em) {
    .hav-ledger__line { grid-template-columns: 11.5rem minmax(0, 1fr); }
  }

  .hav-ledger__col {
    font-size: 0.74rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hav-quiet);
    padding-top: 0.18rem;
  }

  .hav-ledger__val { font-size: 0.98rem; }

  .hav-ledger__val .hav-mono { color: var(--hav-ink); }
}

@layer register {
  /* The signature set piece: ledger rule cascade. Each row's rule is drawn left to
     right, one after another, and the row's wording settles onto the drawn rule. */
  .hav-register {
    margin-top: calc(var(--hav-step) * 4);
    border-top: 2px solid var(--hav-hair-firm);
    background-color: rgb(var(--hav-bg-ch) / 0.5);
  }

  .hav-register__head {
    max-width: none;
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0 0.75rem;
    padding: calc(var(--hav-step) * 1.5) 0.4rem;
    border-bottom: 1px solid var(--hav-hair-firm);
    font-size: 0.7rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hav-quiet);
  }

  @media (min-width: 40em) {
    .hav-register__head { grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr); }
  }

  .hav-register__rows { counter-reset: havline; }

  .hav-register__row {
    position: relative;
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0 0.75rem;
    padding: calc(var(--hav-step) * 1.9) 0.4rem;
    transition: background-color 220ms ease;
  }

  @media (min-width: 40em) {
    .hav-register__row { grid-template-columns: 3rem minmax(0, 15rem) minmax(0, 1fr); }
  }

  .hav-register__row:hover { background-color: var(--hav-wash-brass); }

  /* the rule itself, drawn under each row */
  .hav-register__row::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--hav-rule-h);
    background-color: var(--hav-hair-firm);
    transform: scaleX(0);
    transform-origin: left center;
    animation: havRuleDraw 520ms cubic-bezier(.22, .85, .3, 1) both;
    animation-delay: calc(var(--hav-i) * 115ms);
  }

  .hav-register__row > * {
    opacity: 0;
    animation: havRowSettle 460ms cubic-bezier(.2, .8, .3, 1) both;
    animation-delay: calc(var(--hav-i) * 115ms + 190ms);
  }

  .hav-register__key {
    font-family: var(--hav-serif);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--hav-brass);
  }

  .hav-register__name { font-weight: 500; }

  .hav-register__what { color: var(--hav-quiet); font-size: 0.93rem; }

  @media (max-width: 39.99em) {
    .hav-register__row .hav-register__what { grid-column: 2; padding-top: 0.2rem; }
    .hav-register__head span:last-child { display: none; }
  }

  .hav-register__foot {
    padding: calc(var(--hav-step) * 2) 0.4rem;
    font-size: 0.86rem;
    color: var(--hav-quiet);
    border-top: 1px solid var(--hav-hair);
  }

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

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

  @keyframes havSpokeFan {
    from {
      opacity: 0;
      transform: rotate(var(--hav-a)) translateX(calc(-0.4 * var(--hav-r))) rotate(calc(-1 * var(--hav-a)));
    }
    to {
      opacity: 1;
      transform: rotate(var(--hav-a)) translateX(calc(-1 * var(--hav-r))) rotate(calc(-1 * var(--hav-a)));
    }
  }

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

@layer prose {
  .hav-run > * + * { margin-top: calc(var(--hav-step) * 2); }

  .hav-aside {
    border-left: 3px solid var(--hav-hair-brass);
    padding: 0.2rem 0 0.2rem 0.85rem;
    margin-top: calc(var(--hav-step) * 3);
    font-size: 0.92rem;
    color: var(--hav-quiet);
  }

  /* a split note reaches into the outer margin, so the side note sits beside the body
     rather than interrupting it. Below the breakpoint it is simply the next block. */
  @media (min-width: 72em) {
    .hav-leaf > .hav-note--split {
      grid-area: 1 / 2 / 2 / -1;
      display: grid;
      grid-template-columns: minmax(0, 63ch) minmax(0, 21ch);
      column-gap: var(--hav-gap);
    }
    .hav-note--split > * { grid-column: 1; }
    .hav-note--split > .hav-aside--outer {
      grid-column: 2;
      grid-row: 2 / span 3;
      align-self: start;
      margin-top: 0.4rem;
      border-left: 0;
      border-top: 2px solid var(--hav-hair-brass);
      padding: 0.65rem 0 0 0;
    }
  }

  .hav-defs { margin-top: calc(var(--hav-step) * 3); border-top: 1px solid var(--hav-hair); }

  .hav-defs > div {
    display: grid;
    gap: 0 1rem;
    padding: calc(var(--hav-step) * 2) 0;
    border-bottom: 1px solid var(--hav-hair);
  }

  @media (min-width: 40em) {
    .hav-defs > div { grid-template-columns: 13rem minmax(0, 1fr); }
  }

  .hav-defs dt { font-weight: 500; font-family: var(--hav-serif); font-size: 1.02rem; }

  .hav-defs dd { color: var(--hav-quiet); }

  .hav-steps { margin-top: calc(var(--hav-step) * 3); counter-reset: havstep; }

  .hav-steps > li {
    counter-increment: havstep;
    position: relative;
    padding: 0 0 0 2.5rem;
    margin-bottom: calc(var(--hav-step) * 2.4);
  }

  .hav-steps > li::before {
    content: counter(havstep, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0.08rem;
    font-family: var(--hav-serif);
    font-weight: 700;
    font-size: 0.88rem;
    color: var(--hav-accent);
    border-bottom: 1px solid var(--hav-hair-brass);
    padding-bottom: 0.1rem;
    transition: color 200ms ease, border-color 200ms ease;
  }

  .hav-steps > li:hover::before { color: var(--hav-brass); border-color: var(--hav-accent); }

  .hav-contents { margin-top: calc(var(--hav-step) * 4); }

  .hav-contents > li { border-top: 1px solid var(--hav-hair); }

  .hav-contents a {
    display: grid;
    grid-template-columns: 2.6rem minmax(0, 1fr);
    gap: 0 0.8rem;
    padding: calc(var(--hav-step) * 2) 0.25rem;
    text-decoration: none;
    color: var(--hav-ink);
    transition: background-color 200ms ease, padding-left 200ms ease, color 200ms ease;
  }

  .hav-contents a:hover,
  .hav-contents a:focus-visible {
    background-color: var(--hav-wash);
    padding-left: 0.6rem;
    color: var(--hav-accent);
  }

  .hav-contents b { font-family: var(--hav-serif); color: var(--hav-brass); font-weight: 700; }

  .hav-contents span { color: var(--hav-quiet); font-size: 0.93rem; display: block; }

  .hav-contents em { font-style: normal; display: block; font-weight: 500; color: var(--hav-ink); }
}

@layer panel {
  /* masonry: the kept books are set in columns and flow, so the stack reads as a shelf
     of unequal volumes rather than a grid of equal cards. */
  .hav-shelf {
    margin-top: calc(var(--hav-step) * 4);
    columns: 1;
    column-gap: var(--hav-gap);
  }

  @media (min-width: 44em) { .hav-shelf { columns: 2; } }

  @media (min-width: 76em) { .hav-shelf { columns: 3; column-gap: 1.6rem; } }

  .hav-panel {
    break-inside: avoid;
    margin-bottom: var(--hav-gap);
    padding: 0.95rem 1rem 1.05rem;
    background-color: var(--hav-surface);
    background-image: var(--hav-weave);
    border: 1px solid var(--hav-hair);
    border-top: 3px solid var(--hav-accent);
    opacity: 1;
    translate: 0 0;
    transition: opacity 620ms ease, translate 620ms cubic-bezier(.2, .8, .3, 1),
      border-color 220ms ease, box-shadow 220ms ease;
    transition-delay: calc(var(--hav-i, 0) * 70ms);
  }

  /* first paint only: @starting-style supplies the from-state once, so the panel set
     animates on arrival and never again. No script takes part in this. */
  @starting-style {
    .hav-panel { opacity: 0; translate: 0 0.9rem; }
  }

  .hav-panel:nth-child(3n+2) { border-top-color: var(--hav-brass); }

  .hav-panel:hover {
    border-color: var(--hav-hair-firm);
    box-shadow: 0 2px 0 rgb(var(--hav-ink-ch) / 0.08);
  }

  .hav-panel h3 { color: var(--hav-accent); }

  .hav-panel p { font-size: 0.93rem; color: var(--hav-quiet); max-width: none; }

  .hav-panel__where {
    display: block;
    margin-top: 0.55rem;
    padding-top: 0.45rem;
    border-top: 1px dotted var(--hav-hair-firm);
    font-size: 0.74rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--hav-brass);
  }
}

@layer sheet {
  /* the two working sheets. Both print their arithmetic; neither quotes a price. */
  .hav-work {
    margin-top: calc(var(--hav-step) * 4);
    border: 1px solid var(--hav-hair-firm);
    background-color: var(--hav-surface);
  }

  .hav-work__head {
    padding: 0.8rem 1rem;
    border-bottom: 1px solid var(--hav-hair-firm);
    background-image: var(--hav-weave-close);
  }

  .hav-work__head h3 { margin-bottom: 0.25rem; }

  .hav-work__head p { font-size: 0.86rem; color: var(--hav-quiet); max-width: 58ch; }

  .hav-work__body { padding: 0.9rem 1rem 1.1rem; }

  .hav-fieldset { border: 0; margin: 0 0 1rem; padding: 0; }

  .hav-fieldset legend {
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hav-brass);
    padding: 0 0 0.45rem;
  }

  .hav-field { display: block; margin-bottom: 0.7rem; }

  .hav-field__name {
    display: block;
    font-size: 0.8rem;
    color: var(--hav-quiet);
    margin-bottom: 0.2rem;
  }

  .hav-field input,
  .hav-field select {
    width: 100%;
    max-width: 13rem;
    padding: 0.5rem 0.55rem;
    border: 1px solid var(--hav-hair-firm);
    border-radius: var(--hav-radius);
    background-color: var(--hav-bg);
    font-variant-numeric: tabular-nums;
    transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  }

  .hav-field input:focus,
  .hav-field select:focus {
    border-color: var(--hav-accent);
    background-color: var(--hav-surface);
    box-shadow: inset 0 -2px 0 rgb(var(--hav-accent-ch) / 0.35);
    outline: none;
  }

  .hav-field input:focus-visible,
  .hav-field select:focus-visible { outline: 2px solid var(--hav-accent); outline-offset: 2px; }

  .hav-grid2 { display: grid; gap: 0 0.9rem; }

  @media (min-width: 30em) { .hav-grid2 { grid-template-columns: 1fr 1fr; } }

  .hav-basis { display: flex; flex-wrap: wrap; gap: 0.4rem 0.5rem; }

  .hav-basis label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.32rem 0.55rem;
    border: 1px solid var(--hav-hair-firm);
    font-size: 0.84rem;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease;
  }

  .hav-basis label:hover { border-color: var(--hav-accent); color: var(--hav-accent); }

  .hav-basis input { accent-color: var(--hav-accent); }

  .hav-basis label:has(input:checked) {
    border-color: var(--hav-accent);
    background-color: rgb(var(--hav-accent-ch) / 0.08);
    color: var(--hav-accent);
  }

  .hav-row-ctl { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.2rem 0 0.9rem; }

  .hav-btn {
    padding: 0.38rem 0.7rem;
    border: 1px solid var(--hav-hair-firm);
    background-color: var(--hav-bg);
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease,
      box-shadow 180ms ease;
  }

  .hav-btn:hover {
    border-color: var(--hav-accent);
    color: var(--hav-accent);
    box-shadow: inset 0 -2px 0 rgb(var(--hav-brass-ch) / 0.4);
  }

  .hav-field-row {
    display: grid;
    gap: 0 0.9rem;
    padding: 0.55rem 0 0.1rem;
    border-top: 1px dotted var(--hav-hair-firm);
  }

  @media (min-width: 34em) {
    .hav-field-row { grid-template-columns: minmax(0, 1fr) 9.5rem auto; align-items: end; }
    .hav-field-row > .hav-row-ctl { margin-bottom: 0.7rem; }
  }

  .hav-field-row .hav-field { margin-bottom: 0.7rem; }

  .hav-field-row input[type="number"] { max-width: 6.5rem; }

  .hav-field-row .hav-row-ctl { margin: 0 0 0.9rem; gap: 0.3rem; }

  .hav-field-row .hav-btn { padding: 0.34rem 0.55rem; min-width: 2.4rem; }

  /* a wide working table scrolls inside the sheet; the page itself never scrolls sideways */
  .hav-out {
    display: block;
    margin-top: 0.5rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  .hav-out table { min-width: 33rem; }

  .hav-out .hav-work__sum { min-width: 0; }

  .hav-work .hav-cell { display: block; }

  .hav-work table .hav-work__note {
    display: block;
    margin: 0.1rem 0 0;
    padding: 0;
    border: 0;
    font-size: 0.74rem;
    line-height: 1.35;
  }


  .hav-work table { font-size: 0.88rem; font-variant-numeric: tabular-nums; }

  .hav-work caption {
    text-align: left;
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--hav-brass);
    padding: 0.6rem 0 0.4rem;
  }

  .hav-work th,
  .hav-work td {
    text-align: left;
    padding: 0.42rem 0.5rem 0.42rem 0;
    border-bottom: 1px solid var(--hav-hair);
    vertical-align: top;
  }

  .hav-work thead th {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--hav-quiet);
    font-weight: 400;
    border-bottom-color: var(--hav-hair-firm);
  }

  .hav-work tbody tr { animation: havInkIn 320ms ease both; }

  .hav-work td.hav-fig,
  .hav-work th.hav-fig { text-align: right; padding-right: 0.9rem; white-space: nowrap; }

  .hav-work tr > :last-child { padding-right: 0; }

  .hav-work tbody th[scope="row"] { white-space: nowrap; padding-right: 0.9rem; }

  .hav-work tfoot th,
  .hav-work tfoot td {
    border-top: 2px solid var(--hav-hair-firm);
    border-bottom: 0;
    font-weight: 500;
    padding-top: 0.55rem;
  }

  .hav-work__sum {
    margin-top: 0.8rem;
    padding: 0.7rem 0.8rem;
    background-color: var(--hav-bg);
    border-left: 3px solid var(--hav-accent);
    font-size: 0.88rem;
  }

  .hav-work__sum p { max-width: none; }

  .hav-work__sum p + p { margin-top: 0.4rem; }

  .hav-work__sum[data-hav-state="short"] { border-left-color: var(--hav-brass); }

  .hav-work__note {
    margin-top: 0.75rem;
    font-size: 0.78rem;
    color: var(--hav-quiet);
    border-top: 1px dotted var(--hav-hair-firm);
    padding-top: 0.55rem;
  }

  .hav-work__noscript {
    margin-top: 0.8rem;
    padding: 0.7rem 0.8rem;
    border: 1px dashed var(--hav-hair-firm);
    font-size: 0.86rem;
    color: var(--hav-quiet);
  }

  /* On a narrow screen a six-column working table is a scroll box nobody reads. Below
     this width every row becomes a block and each figure carries its own column name,
     so the arithmetic is read down the page instead of sideways. */
  @media (max-width: 33.99em) {
    .hav-out table,
    .hav-out tbody,
    .hav-out tfoot,
    .hav-out tr,
    .hav-out th,
    .hav-out td { display: block; }

    .hav-out thead { display: none; }

    .hav-out table { min-width: 0; }

    .hav-out tr {
      padding: 0.5rem 0 0.6rem;
      border-bottom: 1px solid var(--hav-hair-firm);
    }

    .hav-out tbody th[scope="row"],
    .hav-out tfoot th[scope="row"] {
      font-family: var(--hav-serif);
      font-size: 1rem;
      border: 0;
      padding: 0 0 0.3rem;
      white-space: normal;
    }

    .hav-out caption { display: block; letter-spacing: 0.1em; }

    .hav-out td {
      display: grid;
      /* the column name is sized to itself and capped, so a long figure wraps rather
         than squeezing the name into a column of single letters */
      grid-template-columns: fit-content(46%) minmax(0, 1fr);
      align-items: baseline;
      gap: 0 0.7rem;
      padding: 0.16rem 0;
      border: 0;
      text-align: right;
    }

    .hav-out td[data-hav-col]::before {
      content: attr(data-hav-col);
      text-align: left;
      font-size: 0.68rem;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: var(--hav-quiet);
    }

    .hav-out td:not([data-hav-col]) { display: block; text-align: left; }

    .hav-out td.hav-fig { padding-right: 0; }

    .hav-out tfoot tr { border-bottom: 0; border-top: 2px solid var(--hav-hair-firm); }

    .hav-out td:empty { display: none; }
  }

  .hav-figure {
    margin-top: calc(var(--hav-step) * 4);
    border-top: 1px solid var(--hav-hair-firm);
    padding-top: calc(var(--hav-step) * 2);
  }

  .hav-figure svg { width: 100%; height: auto; }

  .hav-figure figcaption {
    margin-top: 0.6rem;
    font-size: 0.8rem;
    color: var(--hav-quiet);
  }

  .hav-draw-line { stroke: var(--hav-accent); fill: none; }

  .hav-draw-hair { stroke: var(--hav-hair-firm); fill: none; }

  .hav-draw-brass { stroke: var(--hav-brass); fill: none; }

  .hav-draw-fill { fill: var(--hav-surface); }

  .hav-draw-text {
    fill: var(--hav-ink);
    font-family: var(--hav-body);
    font-size: 11px;
  }

  .hav-draw-text--small { font-size: 9px; fill: var(--hav-quiet); letter-spacing: 0.06em; }
}

@layer foot {
  .hav-foot {
    margin-top: calc(var(--hav-step) * 7);
    padding: calc(var(--hav-step) * 4) 0 calc(var(--hav-step) * 7);
    border-top: 2px solid var(--hav-hair-firm);
    font-size: 0.86rem;
  }

  .hav-foot__name {
    font-family: var(--hav-serif);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.04em;
  }

  .hav-foot address { margin: 0.5rem 0 0.8rem; line-height: 1.5; color: var(--hav-quiet); }

  .hav-foot p + p { margin-top: 0.25rem; }

  .hav-foot__reg { color: var(--hav-quiet); }

  .hav-foot a {
    display: inline-block;
    margin-top: 0.4rem;
    border-bottom: 1px solid var(--hav-hair-brass);
    text-decoration: none;
    transition: border-color 200ms ease, color 200ms ease;
  }

  .hav-foot a:hover { border-color: var(--hav-accent); color: var(--hav-ink); }

  .hav-foot__sic {
    margin-top: 1rem;
    padding-top: 0.7rem;
    border-top: 1px dotted var(--hav-hair);
    font-size: 0.76rem;
    color: var(--hav-quiet);
    max-width: 60ch;
  }
}

/* ---------------------------------------------------------------------------
   Unlayered. Everything below outranks every layer above without !important
   being needed for specificity reasons; !important is used on the motion
   switch only, so that no later edit inside a layer can quietly re-enable it.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  /* the set piece lands ruled and filled, not shortened */
  .hav-register__row::after { transform: scaleX(1) !important; }
  .hav-register__row > * { opacity: 1 !important; transform: none !important; }
  .hav-dial__spoke { opacity: 1 !important; }
  .hav-panel { opacity: 1 !important; translate: 0 0 !important; }
  .hav-work tbody tr { opacity: 1 !important; }
}

@media print {
  .hav-dial-wrap { display: none; }
  body { background-image: none; background-color: var(--hav-surface); }
  .hav-sheet { background-image: none; display: block; max-width: none; padding: 0; }
  .hav-folio { text-align: left; padding-top: 0; }
  .hav-panel { break-inside: avoid; border: 1px solid var(--hav-hair-firm); }
  .hav-register__row::after { transform: scaleX(1); }
  .hav-register__row > * { opacity: 1; }
}