@layer base, year, cards, shapes, sheet, motion;

/* layer order is declared above: base holds the three-line reset, year holds the
   board and the month run, cards holds the ruled paper, sheet holds the bottom
   nav, motion holds every animation. The reduced-motion block at the foot of
   this file is unlayered on purpose, so it outranks all five. */

@layer base {
  *, *::before, *::after { box-sizing: border-box }
  body { margin: 0 }
  svg, img { display: block }
}

:root {
  --jb-bg: #f2eef1;
  --jb-ink: #2a2430;
  --jb-accent: #8e2f58;
  --jb-accent2: #4a5560;
  --jb-surface: #fcfafb;

  --jb-rule: 1.75rem;
  --jb-hair: color-mix(in srgb, var(--jb-ink) 20%, transparent);
  --jb-hair-faint: color-mix(in srgb, var(--jb-accent2) 15%, transparent);
  --jb-wine-faint: color-mix(in srgb, var(--jb-accent) 14%, transparent);
  --jb-wine-mid: color-mix(in srgb, var(--jb-accent) 42%, transparent);
  --jb-meta: color-mix(in srgb, var(--jb-ink) 74%, var(--jb-bg));
  --jb-flap: color-mix(in srgb, var(--jb-bg) 72%, var(--jb-accent2));
  --jb-shade: color-mix(in srgb, var(--jb-ink) 9%, transparent);

  --jb-gutter: 2.9rem;
  --jb-handle: 3.4rem;
  --jb-serif: "Frank Ruhl Libre", Georgia, "Times New Roman", serif;
  --jb-sans: "Alexandria", "Segoe UI", system-ui, sans-serif;
  --jb-grain: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="168" height="168"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.92" numOctaves="4" stitchTiles="stitch"/><feColorMatrix type="saturate" values="0"/></filter><rect width="168" height="168" filter="url(%23n)" opacity="0.4"/></svg>');
}

@layer year {

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

  body {
    background-color: var(--jb-bg);
    background-image: var(--jb-grain);
    background-repeat: repeat;
    color: var(--jb-ink);
    font-family: var(--jb-sans);
    font-size: 1rem;
    line-height: var(--jb-rule);
    padding-bottom: calc(var(--jb-handle) + 1.4rem);
    overflow-x: hidden;
  }

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

  .jb_skip {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--jb-surface);
    color: var(--jb-accent);
    border: 1px solid var(--jb-accent);
    padding: 0.4rem 0.8rem;
    z-index: 40;
  }
  .jb_skip:focus { left: 0.6rem; top: 0.6rem }

  .jb_frame {
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    padding: 0 1rem;
  }

  /* --- the leaf: a calendar page with its top-right corner turned down --- */

  .jb_mast { padding: 1.1rem 0 0 }

  .jb_leaf {
    position: relative;
    background: var(--jb-surface);
    border: 1px solid var(--jb-hair);
    border-radius: 2px 0 2px 2px;
    padding: 1.2rem 1.1rem 1.4rem;
    clip-path: polygon(0 0, calc(100% - 3.1rem) 0, 100% 3.1rem, 100% 100%, 0 100%);
    box-shadow: 0 1px 0 var(--jb-shade);
  }

  .jb_leaf::before {
    content: "";
    position: absolute;
    inset: 0.4rem 0.4rem auto 0.4rem;
    height: 1px;
    background: var(--jb-wine-mid);
  }

  .jb_leafwrap { position: relative }

  .jb_fold {
    position: absolute;
    top: 0;
    right: 0;
    width: 3.1rem;
    height: 3.1rem;
    clip-path: polygon(0 0, 100% 100%, 0 100%);
    background:
      linear-gradient(45deg,
        color-mix(in srgb, var(--jb-accent2) 30%, var(--jb-bg)) 0%,
        var(--jb-flap) 46%,
        color-mix(in srgb, var(--jb-surface) 94%, var(--jb-accent)) 100%);
    filter: drop-shadow(-1px 1px 1px color-mix(in srgb, var(--jb-ink) 26%, transparent));
    transform-origin: 100% 100%;
    transition: transform 240ms ease, filter 240ms ease;
  }
  .jb_fold::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent 0 calc(100% - 2px), var(--jb-accent) calc(100% - 2px));
    opacity: 0.55;
  }
  .jb_fold_face {
    position: absolute;
    left: 0.34rem;
    bottom: 0.46rem;
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: 0.88rem;
    line-height: 1;
    letter-spacing: 0.03em;
    color: var(--jb-accent);
    transform: rotate(-45deg);
  }
  .jb_leafwrap:hover .jb_fold { transform: scale(0.82) }

  .jb_kicker {
    margin: 0;
    padding-right: 2.6rem;
    font-size: 0.66rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--jb-accent2);
  }

  .jb_leaf h1 {
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: clamp(1.6rem, 6.4vw, 2.5rem);
    line-height: 1.12;
    margin: 0.5rem 3rem 0.7rem 0;
    letter-spacing: -0.012em;
  }

  .jb_leaf h1 em {
    font-style: normal;
    color: var(--jb-accent);
  }

  .jb_lede {
    margin: 0;
    max-width: 38rem;
  }
  .jb_lede + .jb_lede { margin-top: var(--jb-rule) }

  .jb_glyph {
    position: absolute;
    right: 1rem;
    bottom: 1.1rem;
    width: 2.6rem;
    height: 2.6rem;
    opacity: 0.85;
  }

  /* --- the board: twelve cells, the section index --- */

  .jb_board { padding: 1.6rem 0 0.4rem }

  .jb_board_head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.2rem 0.7rem;
    border-bottom: 1px solid var(--jb-hair);
    padding-bottom: 0.4rem;
  }
  .jb_board_head h2 {
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: 1.22rem;
    margin: 0;
  }
  .jb_board_note {
    margin: 0;
    font-size: 0.78rem;
    color: var(--jb-meta);
  }

  .jb_cells {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--jb-hair-faint);
    border: 1px solid var(--jb-hair);
  }

  .jb_cells > li { display: grid }

  .jb_mon {
    display: block;
    height: 100%;
    background: var(--jb-surface);
    padding: 0.55rem 0.6rem 0.7rem;
    min-height: 6.1rem;
    text-decoration: none;
    color: inherit;
    transition: background-color 200ms ease, box-shadow 200ms ease;
  }
  .jb_mon:hover, .jb_mon:focus-visible {
    background: color-mix(in srgb, var(--jb-accent) 6%, var(--jb-surface));
    box-shadow: inset 3px 0 0 var(--jb-accent);
  }
  .jb_mon_n {
    display: block;
    font-family: var(--jb-serif);
    font-size: 1.5rem;
    line-height: 1;
    color: color-mix(in srgb, var(--jb-accent) 74%, var(--jb-surface));
    transition: color 200ms ease;
  }
  .jb_mon:hover .jb_mon_n { color: var(--jb-accent) }
  .jb_mon_m {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--jb-accent2);
    margin-top: 0.18rem;
  }
  .jb_mon_t {
    display: block;
    font-size: 0.78rem;
    line-height: 1.32;
    margin-top: 0.4rem;
  }

  /* --- the strip: the set-piece --- */

  .jb_strip_wrap { padding: 1.5rem 0 0.2rem }
  .jb_strip_fig { margin: 0 }
  .jb_strip {
    width: 100%;
    height: auto;
    border: 1px solid var(--jb-hair);
    background: var(--jb-surface);
  }
  .jb_strip_cap {
    font-size: 0.76rem;
    color: var(--jb-meta);
    margin-top: 0.5rem;
    max-width: 40rem;
  }
  .jb_legend {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem 1.1rem;
    margin: 0.6rem 0 0;
    padding: 0;
    font-size: 0.74rem;
  }
  .jb_legend li { display: flex; align-items: center; gap: 0.4rem }
  .jb_key { width: 1.5rem; height: 0.7rem; flex: none }

  /* --- the month run: offset, asymmetric --- */

  .jb_run { padding: 0.6rem 0 0 }

  .jb_month {
    display: grid;
    grid-template-columns: var(--jb-gutter) minmax(0, 1fr);
    column-gap: 0.7rem;
    padding: 1.5rem 0 1.2rem;
    border-top: 1px solid var(--jb-hair-faint);
  }
  .jb_month:first-child { border-top: 0 }

  .jb_mh {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: var(--jb-gutter) minmax(0, 1fr);
    column-gap: 0.7rem;
    align-items: start;
    margin: 0 0 0.5rem;
  }
  .jb_mh_num {
    grid-column: 1;
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: clamp(2.3rem, 11vw, 3.1rem);
    line-height: 0.82;
    color: var(--jb-accent);
    letter-spacing: -0.04em;
    position: relative;
  }
  .jb_mh_num::after {
    content: "";
    position: absolute;
    left: -1rem;
    right: -0.35rem;
    bottom: 0.26em;
    height: 1px;
    background: var(--jb-wine-faint);
  }
  .jb_mh_txt {
    grid-column: 2;
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: 1.14rem;
    line-height: 1.25;
  }
  .jb_mh_mon {
    display: block;
    font-family: var(--jb-sans);
    font-weight: 400;
    font-size: 0.62rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--jb-accent2);
    margin-bottom: 0.26rem;
  }

  .jb_body { grid-column: 1 / -1 }
  .jb_body > p { margin: 0 0 var(--jb-rule) }
  .jb_body > p:last-child { margin-bottom: 0 }

  .jb_due {
    margin: 0 0 var(--jb-rule);
    padding: 0 0 0 0.8rem;
    border-left: 2px solid var(--jb-wine-mid);
    font-size: 0.86rem;
    color: var(--jb-accent2);
  }
  .jb_due b { font-weight: 400; color: var(--jb-ink) }

  a { color: var(--jb-accent) }
  a:hover { text-decoration-thickness: 2px }

  .jb_on {
    color: var(--jb-accent);
    text-decoration-color: var(--jb-wine-mid);
    text-underline-offset: 0.18em;
    transition: text-decoration-color 180ms ease, color 180ms ease;
  }
  .jb_on:hover, .jb_on:focus-visible { text-decoration-color: var(--jb-accent) }

  .jb_back {
    display: inline-block;
    font-size: 0.74rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--jb-wine-faint);
    transition: border-color 180ms ease, letter-spacing 180ms ease;
  }
  .jb_back:hover { border-color: var(--jb-accent); letter-spacing: 0.12em }

  /* --- sub-page shell, offset the other way --- */

  .jb_page { padding: 1.3rem 0 0 }
  .jb_page_head {
    border-bottom: 1px solid var(--jb-hair);
    padding-bottom: 0.9rem;
  }
  .jb_page_head h1 {
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: clamp(1.45rem, 5.8vw, 2.1rem);
    line-height: 1.14;
    margin: 0.45rem 0 0;
  }
  .jb_stamp {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.64rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--jb-accent2);
    border: 1px solid var(--jb-hair-faint);
    padding: 0.15rem 0.45rem;
  }
  .jb_stamp b {
    font-family: var(--jb-serif);
    font-size: 0.86rem;
    letter-spacing: 0;
    color: var(--jb-accent);
  }

  .jb_sect {
    padding: 1.4rem 0 0.3rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .jb_sect h2 {
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: 1.16rem;
    line-height: 1.26;
    margin: 0 0 0.55rem;
  }
  .jb_sect h3 {
    font-family: var(--jb-sans);
    font-weight: 400;
    font-size: 0.68rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jb-accent2);
    margin: var(--jb-rule) 0 0.3rem;
  }
  .jb_sect p { margin: 0 0 var(--jb-rule) }
  .jb_sect p:last-child { margin-bottom: 0 }

  .jb_steps {
    counter-reset: jb_step;
    list-style: none;
    margin: 0 0 var(--jb-rule);
    padding: 0;
  }
  .jb_steps li {
    counter-increment: jb_step;
    position: relative;
    padding: 0 0 0 2.2rem;
    margin: 0 0 0.5rem;
  }
  .jb_steps li::before {
    content: counter(jb_step, decimal-leading-zero);
    position: absolute;
    left: 0;
    top: 0;
    font-family: var(--jb-serif);
    font-size: 0.86rem;
    color: var(--jb-accent);
    border-bottom: 1px solid var(--jb-wine-faint);
  }

  .jb_defs { margin: 0 0 var(--jb-rule) }
  .jb_defs dt {
    font-family: var(--jb-serif);
    font-size: 0.98rem;
    border-bottom: 1px solid var(--jb-hair-faint);
    padding-bottom: 0.14rem;
  }
  .jb_defs dd {
    margin: 0.35rem 0 var(--jb-rule);
    font-size: 0.93rem;
  }
  .jb_defs dd:last-child { margin-bottom: 0 }

  figure { margin: 0 0 var(--jb-rule) }
  figcaption {
    font-size: 0.76rem;
    color: var(--jb-meta);
    margin-top: 0.4rem;
  }
  .jb_draw {
    width: 100%;
    height: auto;
    border: 1px solid var(--jb-hair);
    background: var(--jb-surface);
  }

  /* --- footer --- */

  .jb_foot {
    margin: 2.2rem 0 0;
    border-top: 2px solid var(--jb-accent);
    background: color-mix(in srgb, var(--jb-surface) 70%, var(--jb-bg));
  }
  .jb_foot_in {
    width: 100%;
    max-width: 68rem;
    margin: 0 auto;
    padding: 1.2rem 1rem 1.6rem;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
  }
  .jb_foot_name {
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    margin: 0;
  }
  .jb_foot address {
    font-style: normal;
    font-size: 0.86rem;
    line-height: 1.5;
    margin: 0.3rem 0 0;
  }
  .jb_foot p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--jb-meta);
  }
  .jb_foot a {
    color: var(--jb-accent);
    overflow-wrap: anywhere;
    transition: color 180ms ease;
  }
  .jb_foot a:hover { color: var(--jb-ink) }
  .jb_foot_sic {
    font-size: 0.74rem;
    letter-spacing: 0.04em;
  }
}

@layer cards {

  .jb_card {
    position: relative;
    background: var(--jb-surface);
    border: 1px solid var(--jb-hair);
    border-radius: 2px;
    padding: 0.8rem 0.9rem 0.9rem 2.5rem;
    background-image:
      repeating-linear-gradient(
        to bottom,
        transparent 0 calc(var(--jb-rule) - 1px),
        var(--jb-hair-faint) calc(var(--jb-rule) - 1px) var(--jb-rule)
      );
    background-position: 0 0.8rem;
    background-clip: padding-box;
    transition: border-color 220ms ease, box-shadow 220ms ease;
  }
  .jb_card::before {
    content: "";
    position: absolute;
    left: 1.9rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--jb-wine-mid);
  }
  .jb_card:hover {
    border-color: var(--jb-wine-mid);
    box-shadow: 0 1px 0 var(--jb-shade);
  }
  .jb_card > :first-child { margin-top: 0 }
  .jb_card > :last-child { margin-bottom: 0 }
  .jb_card h3 {
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: 1rem;
    line-height: var(--jb-rule);
    margin: 0 0 0.1rem;
    letter-spacing: 0;
    text-transform: none;
    color: var(--jb-ink);
  }
  .jb_card p,
  .jb_card li { line-height: var(--jb-rule) }

  .jb_stack {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.9rem;
  }

  .jb_tag {
    display: inline-block;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--jb-accent2);
  }

  /* --- the two desk tools --- */

  .jb_tool {
    position: relative;
    margin: 0 0 var(--jb-rule);
    padding: 0.9rem 0.9rem 1rem 2.6rem;
    background-color: var(--jb-surface);
    background-image:
      repeating-linear-gradient(
        to bottom,
        transparent 0 calc(var(--jb-rule) - 1px),
        var(--jb-hair-faint) calc(var(--jb-rule) - 1px) var(--jb-rule)
      );
    background-position: 0 1.5rem;
    border: 1px solid var(--jb-hair);
    border-left: 3px solid var(--jb-accent);
    transition: box-shadow 220ms ease;
  }
  .jb_tool::before {
    content: "";
    position: absolute;
    left: 2rem;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--jb-wine-mid);
  }
  .jb_tool:hover { box-shadow: 0 1px 0 var(--jb-shade) }
  .jb_tool h3,
  .jb_tool p { line-height: var(--jb-rule) }
  .jb_tool h3 {
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: 1.02rem;
    margin: 0 0 0.3rem;
  }
  .jb_tool_note {
    font-size: 0.8rem;
    color: var(--jb-meta);
    margin: 0 0 0.8rem;
  }
  .jb_fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.6rem 0.8rem;
    margin: 0 0 0.9rem;
  }
  .jb_f { display: grid; gap: 0.18rem }
  .jb_f > span {
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--jb-accent2);
  }
  .jb_f input {
    font: inherit;
    font-size: 0.92rem;
    color: var(--jb-ink);
    background: color-mix(in srgb, var(--jb-bg) 40%, var(--jb-surface));
    border: 1px solid var(--jb-hair);
    border-radius: 1px;
    padding: 0.38rem 0.45rem;
    min-width: 0;
    width: 100%;
    transition: border-color 180ms ease, background-color 180ms ease;
  }
  .jb_f input:focus-visible {
    border-color: var(--jb-accent);
    background: var(--jb-surface);
  }
  .jb_row_head {
    font-size: 0.66rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jb-accent2);
    border-bottom: 1px solid var(--jb-hair-faint);
    padding-bottom: 0.2rem;
    margin: 0.4rem 0 0.1rem;
  }
  .jb_out {
    overflow-x: auto;
    background: var(--jb-surface);
    border-top: 1px solid var(--jb-wine-faint);
    padding: 0.7rem 0.4rem 0.2rem 0;
    margin-top: 0.4rem;
  }
  .jb_sum {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.82rem;
  }
  .jb_sum, .jb_sum caption, .jb_sum tbody, .jb_sum tr, .jb_sum th, .jb_sum td { display: block }
  .jb_sum tr {
    border-bottom: 1px solid var(--jb-hair-faint);
    padding: 0.35rem 0;
  }
  .jb_sum th, .jb_sum td {
    border-bottom: 0;
    padding: 0;
    white-space: normal;
  }
  .jb_sum .jb_res { font-size: 1.02rem; margin-top: 0.1rem }
  .jb_sum caption {
    text-align: left;
    font-size: 0.68rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--jb-accent2);
    padding-bottom: 0.3rem;
  }
  .jb_sum th,
  .jb_sum td {
    text-align: left;
    vertical-align: top;
    padding: 0.3rem 0.5rem 0.3rem 0;
    border-bottom: 1px solid var(--jb-hair-faint);
    line-height: 1.4;
  }
  .jb_sum th {
    font-weight: 400;
    color: var(--jb-accent2);
    white-space: nowrap;
  }
  .jb_sum .jb_work {
    font-variant-numeric: tabular-nums;
    color: var(--jb-meta);
    font-size: 0.78rem;
  }
  .jb_sum .jb_res {
    font-family: var(--jb-serif);
    font-size: 0.95rem;
    color: var(--jb-accent);
    white-space: nowrap;
  }
  .jb_sum tr:last-child th,
  .jb_sum tr:last-child td { border-bottom: 0 }
  .jb_ask {
    font-size: 0.82rem;
    color: var(--jb-accent2);
    margin: 0;
  }
  .jb_noscript {
    font-size: 0.8rem;
    color: var(--jb-meta);
    margin: 0;
  }
}

@layer sheet {

  .jb_sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 30;
    font-size: 0.9rem;
  }

  .jb_shell {
    background: var(--jb-surface);
    border-top: 2px solid var(--jb-accent);
    box-shadow: 0 -2px 0 var(--jb-shade);
  }

  .jb_handle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-height: var(--jb-handle);
    padding: 0 1rem;
    cursor: pointer;
    list-style: none;
    transition: background-color 200ms ease;
  }
  .jb_handle::-webkit-details-marker { display: none }
  .jb_handle:hover { background: color-mix(in srgb, var(--jb-accent) 7%, var(--jb-surface)) }

  .jb_grip {
    width: 1.6rem;
    height: 0.5rem;
    flex: none;
    border-top: 2px solid var(--jb-accent);
    border-bottom: 2px solid var(--jb-wine-mid);
    transition: transform 240ms ease;
  }
  .jb_shell[open] .jb_grip { transform: rotate(180deg) scaleY(0.6) }

  .jb_handle_txt {
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: 0.95rem;
    flex: 1 1 auto;
    min-width: 0;
  }
  .jb_handle_n {
    font-size: 0.64rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--jb-accent2);
    flex: none;
  }

  .jb_sheet_body {
    max-height: min(64vh, 27rem);
    overflow-y: auto;
    border-top: 1px solid var(--jb-hair-faint);
    padding: 0.4rem 0 0.9rem;
  }

  .jb_sheet_list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .jb_sheet_list a {
    display: grid;
    grid-template-columns: 2.4rem minmax(0, 1fr);
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--jb-ink);
    border-bottom: 1px solid var(--jb-hair-faint);
    transition: background-color 170ms ease, padding-left 170ms ease;
  }
  .jb_sheet_list a:hover,
  .jb_sheet_list a:focus-visible {
    background: color-mix(in srgb, var(--jb-accent) 8%, var(--jb-surface));
    padding-left: 1.3rem;
  }
  .jb_sheet_list a[aria-current="page"] {
    background: color-mix(in srgb, var(--jb-accent) 11%, var(--jb-surface));
    box-shadow: inset 3px 0 0 var(--jb-accent);
  }
  .jb_sheet_list .jb_sl_n {
    font-family: var(--jb-serif);
    font-size: 0.95rem;
    color: var(--jb-accent);
  }
  .jb_sheet_list .jb_sl_t { font-size: 0.88rem; line-height: 1.34 }
  .jb_sheet_list .jb_sl_s {
    display: block;
    font-size: 0.72rem;
    color: var(--jb-meta);
  }
  .jb_sheet_foot {
    padding: 0.6rem 1rem 0;
    font-size: 0.74rem;
    color: var(--jb-meta);
    margin: 0;
  }
}

@layer motion {

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

  @keyframes jb_hatch_in {
    from { opacity: 0 }
    to { opacity: 1 }
  }

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

  @keyframes jb_numeral_in {
    from { opacity: 0; transform: translateX(-0.5rem) }
    to { opacity: 1; transform: translateX(0) }
  }

  @keyframes jb_crease {
    from { transform: scale(0.1) }
    to { transform: scale(1) }
  }

  @keyframes jb_rise {
    from { transform: translateY(1.4rem); opacity: 0.2 }
    to { transform: translateY(0); opacity: 1 }
  }

  .jb_fold { animation: jb_crease 520ms 120ms ease-out both }

  .jb_band {
    transform-box: fill-box;
    transform-origin: left center;
    animation: jb_band_fill 520ms ease-out both;
    animation-delay: calc(var(--jb-bd, 0) * 110ms + 240ms);
  }
  .jb_band--2 { --jb-bd: 1 }
  .jb_band--3 { --jb-bd: 2 }
  .jb_band--4 { --jb-bd: 3 }
  .jb_band--5 { --jb-bd: 4 }
  .jb_band--6 { --jb-bd: 5 }
  .jb_band--7 { --jb-bd: 6 }

  .jb_hatch {
    animation: jb_hatch_in 540ms ease-in both;
    animation-delay: calc(var(--jb-hd, 0) * 160ms + 1150ms);
  }
  .jb_hatch--2 { --jb-hd: 1 }
  .jb_hatch--3 { --jb-hd: 2 }
  .jb_hatch--4 { --jb-hd: 3 }

  .jb_cells > li { animation: jb_cell_in 420ms ease-out both }
  .jb_cells > li { animation-delay: calc(var(--jb-cd, 0) * 55ms + 90ms) }
  .jb_cells > li:nth-child(1) { --jb-cd: 0 }
  .jb_cells > li:nth-child(2) { --jb-cd: 1 }
  .jb_cells > li:nth-child(3) { --jb-cd: 2 }
  .jb_cells > li:nth-child(4) { --jb-cd: 3 }
  .jb_cells > li:nth-child(5) { --jb-cd: 4 }
  .jb_cells > li:nth-child(6) { --jb-cd: 5 }
  .jb_cells > li:nth-child(7) { --jb-cd: 6 }
  .jb_cells > li:nth-child(8) { --jb-cd: 7 }
  .jb_cells > li:nth-child(9) { --jb-cd: 8 }
  .jb_cells > li:nth-child(10) { --jb-cd: 9 }
  .jb_cells > li:nth-child(11) { --jb-cd: 10 }
  .jb_cells > li:nth-child(12) { --jb-cd: 11 }

  .jb_stack > li { animation: jb_cell_in 460ms ease-out both }
  .jb_stack > li { animation-delay: calc(var(--jb-cd, 0) * 70ms + 120ms) }
  .jb_stack > li:nth-child(1) { --jb-cd: 0 }
  .jb_stack > li:nth-child(2) { --jb-cd: 1 }
  .jb_stack > li:nth-child(3) { --jb-cd: 2 }
  .jb_stack > li:nth-child(4) { --jb-cd: 3 }
  .jb_stack > li:nth-child(5) { --jb-cd: 4 }
  .jb_stack > li:nth-child(6) { --jb-cd: 5 }

  .jb_mh_num { animation: jb_numeral_in 460ms ease-out both }
  .jb_month:nth-of-type(2n) .jb_mh_num { animation-delay: 80ms }

  .jb_shell[open] .jb_sheet_body { animation: jb_rise 300ms ease-out both }

  .jb_strip { transition: filter 260ms ease }
  .jb_strip_fig:hover .jb_strip { filter: saturate(1.1) }
}

@layer year {

  .jb_strip_scroll {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border: 1px solid var(--jb-hair);
    background: var(--jb-surface);
  }
  .jb_strip { min-width: 29rem; border: 0 }
  .jb_strip_scroll .jb_draw { min-width: 24rem; border: 0 }

  .jb_foot_lines p + p { margin-top: 0.3rem }

  .jb_page_head .jb_lede { margin-top: var(--jb-rule) }

  .jb_backrow {
    margin: 2.2rem 0 0;
    padding-top: 0.8rem;
    border-top: 1px solid var(--jb-hair-faint);
  }

  .jb_note {
    margin: 0 0 var(--jb-rule);
    padding: 0.55rem 0.7rem;
    background: color-mix(in srgb, var(--jb-accent) 5%, var(--jb-surface));
    border-left: 2px solid var(--jb-wine-mid);
    font-size: 0.84rem;
  }

  .jb_inline {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.2rem 1rem;
    margin: 0 0 var(--jb-rule);
    padding: 0;
    font-size: 0.86rem;
  }
  .jb_inline li { display: flex; gap: 0.4rem }
  .jb_inline b {
    font-family: var(--jb-serif);
    font-weight: 700;
    color: var(--jb-accent);
  }
}

@layer cards {

  .jb_method {
    font-size: 0.82rem;
    color: var(--jb-meta);
    margin: 0.85rem 0 0;
    padding-top: 0.6rem;
    border-top: 1px dashed var(--jb-hair-faint);
  }

  .jb_card .jb_tag { margin-bottom: 0.1rem }
  .jb_card dl { margin: 0 }
  .jb_card dt {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--jb-accent2);
  }
  .jb_card dd { margin: 0 0 0.4rem; font-size: 0.9rem }
  .jb_card dd:last-child { margin-bottom: 0 }
}

/* --- wider boards --- */

@media (min-width: 23rem) {
  .jb_fields { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}

@media (min-width: 26rem) {
  .jb_cells { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}

@media (min-width: 30rem) {
  .jb_sum { display: table }
  .jb_sum caption { display: table-caption }
  .jb_sum tbody { display: table-row-group }
  .jb_sum tr { display: table-row; padding: 0 }
  .jb_sum th, .jb_sum td {
    display: table-cell;
    padding: 0.3rem 0.5rem 0.3rem 0;
    border-bottom: 1px solid var(--jb-hair-faint);
  }
  .jb_sum th { white-space: nowrap }
  .jb_sum .jb_res { font-size: 0.95rem; white-space: nowrap; margin-top: 0 }
  .jb_sum tr:last-child th,
  .jb_sum tr:last-child td { border-bottom: 0 }
}

@media (min-width: 44rem) {
  :root { --jb-gutter: 5.4rem }
  .jb_frame, .jb_foot_in { padding-left: 2rem; padding-right: 2rem }
  .jb_cells { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .jb_leaf { padding: 1.8rem 2rem 2rem; clip-path: polygon(0 0, calc(100% - 4.3rem) 0, 100% 4.3rem, 100% 100%, 0 100%) }
  .jb_fold { width: 4.3rem; height: 4.3rem }
  .jb_fold_face { font-size: 1.02rem; left: 0.5rem; bottom: 0.66rem }
  .jb_kicker { padding-right: 4rem }
  .jb_leaf h1 { margin-right: 5rem }
  .jb_fields { grid-template-columns: repeat(3, minmax(0, 1fr)) }
  .jb_foot_in {
    grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
    column-gap: 2.4rem;
  }
  .jb_foot_name { grid-column: 1 }
  .jb_foot address { grid-column: 1 }
  .jb_foot_lines { grid-column: 2; grid-row: 1 / span 3 }
  .jb_sheet_list { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .jb_sect { grid-template-columns: minmax(0, 44rem) }
  .jb_sect:nth-of-type(2n) { margin-left: 3.2rem }
  .jb_defs { display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr); column-gap: 1.2rem }
  .jb_defs dt { grid-column: 1 }
  .jb_defs dd { grid-column: 2; margin-top: 0 }
}

@media (min-width: 62rem) {
  .jb_cells { grid-template-columns: repeat(4, minmax(0, 1fr)) }
  .jb_mon { min-height: 7rem }
  .jb_leaf h1 { font-size: 2.5rem; max-width: 30ch }
  .jb_stack { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .jb_sheet_list a { padding-top: 0.6rem; padding-bottom: 0.6rem }
}


/* ============================================================================
   TWELVE SECTIONS, TWELVE COMPOSITIONS

   The board and the eleven month blocks below each get one geometry and only
   one. Nothing in here is reused by a second section: when two of them want a
   rule or a tint they take it from the custom properties, never from a shared
   block class. The offset that used to alternate on :nth-of-type now belongs to
   the shape, which is why the column no longer reads as one block repeated.
   ========================================================================= */

@layer shapes {

  /* --- 01 the board: twelve small cards, one fact to a card ---------------- */

  .jb_board .jb_strip_fig { margin: 0 0 1.3rem }
  .jb_strip_cap { line-height: 1.45 }

  .jb_cells {
    background: none;
    border: 0;
    gap: 0.5rem;
    margin-top: 1.1rem;
  }
  .jb_mon {
    border: 1px solid var(--jb-hair);
    border-left: 3px solid var(--jb-wine-mid);
    border-radius: 2px;
    padding: 0.5rem 0.6rem 0.65rem;
    background-color: var(--jb-surface);
    background-image:
      repeating-linear-gradient(
        to bottom,
        transparent 0 calc(1.3rem - 1px),
        var(--jb-hair-faint) calc(1.3rem - 1px) 1.3rem
      );
    background-position: 0 1.5rem;
    transition: border-left-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  }
  .jb_mon:hover, .jb_mon:focus-visible {
    border-left-color: var(--jb-accent);
    transform: translateY(-2px);
    box-shadow: 0 2px 0 var(--jb-shade);
  }

  /* --- geometry shared by none: each month sets its own body --------------- */

  .jb_month {
    display: block;
    padding: 1.5rem 0 1.2rem;
  }
  .jb_lead { margin: 0 0 var(--jb-rule) }

  /* --- 02 January: a wide plate, the prose hung beneath it ----------------- */

  .jb_sh--plate { padding-bottom: 1.6rem }
  .jb_wide { margin: 0 }
  .jb_wide_img {
    width: 100%;
    height: auto;
    border: 1px solid var(--jb-hair);
    background: var(--jb-surface);
  }
  .jb_wide_cap {
    margin-top: 0.85rem;
    font-size: 1rem;
    color: var(--jb-ink);
  }
  .jb_wide_cap > p { margin: 0 0 var(--jb-rule) }
  .jb_wide_cap > p:last-child { margin-bottom: 0 }
  .jb_credit {
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--jb-meta);
    border-bottom: 1px solid var(--jb-hair-faint);
    padding-bottom: 0.55rem;
  }

  /* --- 03 February: ruled rows carry the content -------------------------- */

  .jb_sh--ledger .jb_body { max-width: 47rem }
  .jb_ledger {
    margin: 0 0 var(--jb-rule);
    border-top: 2px solid var(--jb-accent);
  }
  .jb_lr {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.1rem 1.2rem;
    padding: 0.42rem 0.3rem 0.5rem 0;
    border-bottom: 1px solid var(--jb-hair-faint);
    transition: background-color 190ms ease, padding-left 190ms ease;
  }
  .jb_lr:nth-child(odd) { background: color-mix(in srgb, var(--jb-accent) 3.5%, transparent) }
  .jb_lr:hover {
    background: color-mix(in srgb, var(--jb-accent) 8%, transparent);
    padding-left: 0.4rem;
  }
  .jb_ledger dt {
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: 0.93rem;
    line-height: 1.5;
    color: var(--jb-accent);
    border: 0;
    padding: 0;
  }
  .jb_ledger dd {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.5;
  }

  /* --- 04 March: one sentence set large, the body resuming under it -------- */

  .jb_quote {
    margin: 0 0 var(--jb-rule);
    padding: 0.85rem 0 1.05rem;
    border-top: 2px solid var(--jb-accent);
    border-bottom: 1px solid var(--jb-wine-mid);
  }
  .jb_quote p {
    margin: 0;
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: clamp(1.45rem, 7vw, 2.45rem);
    line-height: 1.06;
    letter-spacing: -0.022em;
    color: var(--jb-accent);
  }
  .jb_sh--quote .jb_body > p { max-width: 36rem }

  /* --- 05 April and October: an edge-to-edge band, content centred --------- */

  .jb_sh--band {
    margin-inline: calc(50% - 50vw);
    padding: 1.8rem 1rem 1.6rem;
    border-top: 1px solid var(--jb-wine-mid);
    border-bottom: 1px solid var(--jb-wine-mid);
    background-color: color-mix(in srgb, var(--jb-accent) 9%, var(--jb-bg));
  }
  .jb_band_in {
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
  }
  .jb_sh--band .jb_mh { justify-items: start }
  .jb_sh--band .jb_tool { background-color: var(--jb-surface) }

  /* the two desk tools are the only component this page uses twice, so the second one
     is bound on the head instead of the spine and keeps its own ruled sheet */
  .jb_sh--chain .jb_tool {
    border-left: 1px solid var(--jb-hair);
    border-top: 3px solid var(--jb-accent);
    padding-left: 1rem;
  }
  .jb_sh--chain .jb_tool::before { display: none }
  .jb_sh--chain .jb_tool h3 {
    border-bottom: 1px solid var(--jb-wine-faint);
    padding-bottom: 0.25rem;
    margin-bottom: 0.45rem;
  }

  /* --- 06 May: narrow side carries a figure that overhangs the gutter ------ */

  .jb_split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
  }
  .jb_hang { margin: 0 }
  .jb_hang_svg {
    width: 100%;
    max-width: 8.5rem;
    height: auto;
  }
  .jb_hang figcaption {
    font-size: 0.74rem;
    line-height: 1.42;
    max-width: 15rem;
    margin-top: 0.5rem;
  }
  .jb_split_body > p { margin: 0 0 var(--jb-rule) }
  .jb_split_body > p:last-child { margin-bottom: 0 }

  /* --- 07 June: notes hung in the outer margin ---------------------------- */

  .jb_annot { max-width: 34rem }
  .jb_annot > p { margin: 0 0 var(--jb-rule) }
  .jb_marg {
    font-size: 0.79rem;
    line-height: 1.45;
    color: var(--jb-accent2);
    border-left: 2px solid var(--jb-wine-mid);
    padding: 0.05rem 0 0.05rem 0.7rem;
    margin: 0 0 var(--jb-rule);
  }
  .jb_marg_m {
    font-family: var(--jb-serif);
    font-weight: 700;
    color: var(--jb-accent);
    margin-right: 0.35rem;
  }

  /* --- 08 July: numbered steps on a drawn line ---------------------------- */

  .jb_chain {
    list-style: none;
    counter-reset: jb_link;
    position: relative;
    max-width: 41rem;
    margin: 0 0 var(--jb-rule);
    padding: 0.2rem 0 0 2.5rem;
  }
  .jb_chain::before {
    content: "";
    position: absolute;
    left: 0.74rem;
    top: 1rem;
    bottom: 1.35rem;
    width: 2px;
    background: linear-gradient(to bottom, var(--jb-accent), var(--jb-wine-mid));
  }
  .jb_chain li {
    counter-increment: jb_link;
    position: relative;
    margin: 0 0 0.85rem;
    font-size: 0.92rem;
    line-height: 1.5;
  }
  .jb_chain li:last-child { margin-bottom: 0 }
  .jb_chain li::before {
    content: counter(jb_link);
    position: absolute;
    left: -2.5rem;
    top: 0.02rem;
    width: 1.55rem;
    height: 1.55rem;
    display: grid;
    place-items: center;
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--jb-surface);
    background: var(--jb-accent);
    border-radius: 50%;
    transition: transform 200ms ease;
  }
  .jb_chain li:hover::before { transform: scale(1.16) }
  .jb_chain b {
    font-family: var(--jb-serif);
    font-weight: 700;
    color: var(--jb-ink);
  }

  /* --- 09 August: two panels that overlap ---------------------------------- */

  .jb_overlap {
    position: relative;
    margin: 0 0 var(--jb-rule);
  }
  .jb_pane {
    position: relative;
    background-color: var(--jb-surface);
    background-image:
      repeating-linear-gradient(
        to bottom,
        transparent 0 calc(var(--jb-rule) - 1px),
        var(--jb-hair-faint) calc(var(--jb-rule) - 1px) var(--jb-rule)
      );
    background-position: 0 1.9rem;
    border: 1px solid var(--jb-hair);
    padding: 0.85rem 1rem 1rem;
  }
  .jb_pane h3 {
    font-family: var(--jb-serif);
    font-weight: 700;
    font-size: 0.98rem;
    line-height: var(--jb-rule);
    margin: 0 0 0.1rem;
    color: var(--jb-accent);
  }
  .jb_pane p {
    margin: 0;
    font-size: 0.92rem;
    line-height: var(--jb-rule);
  }
  .jb_pane--front {
    margin-top: -0.85rem;
    margin-left: 1rem;
    border-left: 3px solid var(--jb-accent);
    box-shadow: -3px -3px 0 var(--jb-shade);
    z-index: 2;
  }

  /* --- 10 September: a plate inset into the text, the text wrapping past --- */

  .jb_inset {
    margin: 0 auto var(--jb-rule);
    width: 100%;
    max-width: 11rem;
    background: var(--jb-surface);
    border: 1px solid var(--jb-hair);
    padding: 0.5rem 0.55rem 0.45rem;
  }
  .jb_inset_svg {
    width: 100%;
    height: auto;
    transition: opacity 220ms ease;
  }
  .jb_inset figcaption {
    font-size: 0.68rem;
    line-height: 1.4;
    margin-top: 0.4rem;
    border-top: 1px solid var(--jb-wine-faint);
    padding-top: 0.3rem;
  }
  .jb_sh--inset .jb_due { clear: both }

  /* --- 11 November: two figures meant to be read against each other -------- */

  .jb_pair {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    margin: 0 0 var(--jb-rule);
  }
  .jb_pair_fig { margin: 0 }
  .jb_pair_svg {
    width: 100%;
    height: auto;
    border: 1px solid var(--jb-hair);
    background: var(--jb-surface);
    transition: border-color 220ms ease;
  }
  .jb_pair_fig:hover .jb_pair_svg { border-color: var(--jb-accent) }
  .jb_pair_fig figcaption {
    font-size: 0.78rem;
    line-height: 1.45;
    margin-top: 0.45rem;
    padding-top: 0.35rem;
    border-top: 1px solid var(--jb-wine-faint);
  }

  /* --- 12 December: the page turns over ----------------------------------- */

  .jb_sh--dark {
    padding: 0;
    border-top: 0;
    margin-top: 1.8rem;
  }
  .jb_dark_in {
    background-color: var(--jb-ink);
    color: color-mix(in srgb, var(--jb-bg) 94%, var(--jb-ink));
    border-left: 3px solid var(--jb-accent);
    padding: 1.5rem 1.1rem 1.7rem;
  }
  .jb_sh--dark .jb_mh_txt { color: var(--jb-bg) }
  .jb_sh--dark .jb_mh_mon { color: color-mix(in srgb, var(--jb-bg) 74%, var(--jb-accent)) }
  .jb_sh--dark .jb_mh_num { color: color-mix(in srgb, var(--jb-accent) 62%, var(--jb-bg)) }
  .jb_sh--dark .jb_mh_num::after { background: color-mix(in srgb, var(--jb-bg) 34%, transparent) }
  .jb_sh--dark .jb_due {
    border-left-color: var(--jb-accent);
    color: color-mix(in srgb, var(--jb-bg) 84%, var(--jb-ink));
  }
  .jb_sh--dark .jb_due b { color: var(--jb-bg) }
  .jb_sh--dark a,
  .jb_sh--dark .jb_on {
    color: color-mix(in srgb, var(--jb-accent) 46%, var(--jb-bg));
    text-decoration-color: color-mix(in srgb, var(--jb-accent) 70%, var(--jb-bg));
  }
  .jb_sh--dark .jb_on:hover,
  .jb_sh--dark .jb_on:focus-visible { text-decoration-color: var(--jb-bg) }
  .jb_sh--dark :focus-visible { outline-color: var(--jb-bg) }

  /* --- widths ------------------------------------------------------------- */

  @media (min-width: 30rem) {
    .jb_lr { grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr) }
    .jb_inset {
      float: right;
      width: 9rem;
      max-width: none;
      margin: 0.2rem 0 0.7rem 1.1rem;
    }
  }

  @media (min-width: 38rem) {
    .jb_pair { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem }
  }

  @media (min-width: 44rem) {
    .jb_month { padding: 2rem 0 1.6rem }
    .jb_sh--band { padding: 2.4rem 2rem 2.1rem }
    .jb_dark_in { padding: 2rem 2.2rem 2.2rem }
    .jb_sh--ledger .jb_body,
    .jb_sh--quote .jb_body,
    .jb_sh--chain .jb_body,
    .jb_sh--inset .jb_body { margin-left: calc(var(--jb-gutter) + 0.7rem) }
    .jb_split {
      grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
      column-gap: 2.4rem;
      align-items: start;
      margin-left: calc(var(--jb-gutter) + 0.7rem);
    }
    .jb_hang {
      margin-left: calc((var(--jb-gutter) + 0.7rem) * -1);
      width: calc(100% + var(--jb-gutter) + 0.7rem);
    }
    .jb_hang_svg { max-width: 10.5rem }
    .jb_annot { margin-left: calc(var(--jb-gutter) + 0.7rem) }
    .jb_inset { width: 11rem; margin-left: 1.5rem }
    .jb_overlap {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      margin-left: calc(var(--jb-gutter) + 0.7rem);
    }
    .jb_pane--back {
      grid-column: 1 / span 7;
      grid-row: 1;
      margin-top: 0;
      padding-right: calc(14.3% + 1.1rem);
    }
    .jb_pane--front {
      grid-column: 7 / span 6;
      grid-row: 1;
      margin: 2.1rem 0 0;
      align-self: start;
    }
    .jb_sh--stack .jb_due { margin-left: calc(var(--jb-gutter) + 0.7rem) }
  }

  @media (min-width: 62rem) {
    .jb_wide_cap {
      max-width: 38rem;
      margin-left: 26%;
    }
    .jb_sh--ledger .jb_body { margin-left: calc(var(--jb-gutter) + 6.5rem) }
    .jb_sh--quote .jb_body { margin-left: calc(var(--jb-gutter) + 0.7rem); max-width: 46rem }
    .jb_sh--chain .jb_body { margin-left: calc(var(--jb-gutter) + 3rem) }
    .jb_annot {
      display: grid;
      grid-template-columns: minmax(0, 30rem) minmax(0, 13.5rem);
      column-gap: 2.3rem;
      max-width: none;
    }
    .jb_annot > p { grid-column: 1 }
    .jb_annot > .jb_due { grid-column: 1 }
    .jb_marg {
      grid-column: 2;
      border-left: 0;
      border-top: 1px solid var(--jb-wine-mid);
      padding: 0.45rem 0 0;
      margin: 0.2rem 0 0;
    }
    .jb_sh--inset .jb_body { max-width: 38rem }
    .jb_inset { width: 11.5rem }
    .jb_pair { gap: 1.6rem }
    .jb_split { grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) }
  }
}

@layer motion {

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

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

  .jb_wide_img { animation: jb_plate_settle 620ms 260ms ease-out both }

  .jb_ledger {
    border-top-color: transparent;
    position: relative;
  }
  .jb_ledger::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -2px;
    height: 2px;
    background: var(--jb-accent);
    transform-origin: left center;
    animation: jb_rule_draw 540ms 180ms ease-out both;
  }
}

/* --- reduced motion: unlayered, so it outranks every layer above, and it
       lands the strip finished rather than merely quick --- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }
  .jb_band {
    animation: none !important;
    transform: scaleX(1) !important;
  }
  .jb_hatch {
    animation: none !important;
    opacity: 1 !important;
  }
  .jb_cells > li,
  .jb_stack > li,
  .jb_mh_num,
  .jb_shell[open] .jb_sheet_body {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .jb_fold {
    animation: none !important;
    transform: none !important;
  }
  .jb_leafwrap:hover .jb_fold { transform: none !important }
  .jb_wide_img,
  .jb_ledger::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .jb_mon:hover, .jb_mon:focus-visible { transform: none !important }
  .jb_chain li:hover::before { transform: none !important }
  .jb_lr:hover { padding-left: 0 !important }
  .jb_strip_fig:hover .jb_strip { filter: none !important }
  .jb_sheet_list a:hover,
  .jb_sheet_list a:focus-visible { padding-left: 1rem !important }
  .jb_back:hover { letter-spacing: 0.08em !important }
  html { scroll-behavior: auto !important }
}