/* ============================================================================
   A & R PREMIER PROPERTIES LTD - arpremierproperties.life
   One stylesheet for the whole chain of ten steps.

   The vertical rhythm is set by a single token. There is no normalize sheet and
   no universal reset: the only universal selector in this file is the owl at
   the top of BAND 02, and the spacing it applies is read from --arp-flow, which
   containers redeclare for themselves.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   BAND 01  tokens
   The five palette hexes are written out once each, here, and nowhere else in
   the file. Every tint below is mixed from the rgb triplets at an alpha.
   --------------------------------------------------------------------------- */

@property --arp-step {
  syntax: "<number>";
  inherits: true;
  initial-value: 120;
}

@property --arp-i {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

@property --arp-p {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

:root {
  --arp-bg: #f1f2e8;
  --arp-ink: #2b3026;
  --arp-accent: #7d6b2f;
  --arp-accent2: #43604d;
  --arp-surface: #fbfcf5;

  --arp-bg-rgb: 241 242 232;
  --arp-ink-rgb: 43 48 38;
  --arp-accent-rgb: 125 107 47;
  --arp-accent2-rgb: 67 96 77;
  --arp-surface-rgb: 251 252 245;

  /* the one spacing token the reset reads */
  --arp-flow: 1.05rem;

  /* the counter the floorplate stack is drawn against. 120 is the finished
     state, so the drawing is complete before a single line of script runs. */
  --arp-step: 120;
  --arp-span: 22;

  --arp-serif: "Vidaloka", Georgia, "Times New Roman", serif;
  --arp-sans: "Niramit", "Segoe UI", system-ui, sans-serif;

  --arp-hair: 1px solid rgb(var(--arp-ink-rgb) / 0.2);
  --arp-slab: 3px solid rgb(var(--arp-ink-rgb) / 0.82);
  --arp-measure: 38rem;
  --arp-page: 64rem;

  /* speckle: four aggregate sizes on four different pitches so the field never
     visibly tiles. Painted on an overlay, never on a component. */
  --arp-speckle:
    radial-gradient(circle at 17% 24%, rgb(var(--arp-accent-rgb) / 0.5) 0 1.1px, rgb(var(--arp-bg-rgb) / 0) 1.3px),
    radial-gradient(circle at 63% 71%, rgb(var(--arp-accent2-rgb) / 0.42) 0 1.4px, rgb(var(--arp-bg-rgb) / 0) 1.6px),
    radial-gradient(circle at 84% 12%, rgb(var(--arp-ink-rgb) / 0.34) 0 0.9px, rgb(var(--arp-bg-rgb) / 0) 1.1px),
    radial-gradient(circle at 38% 88%, rgb(var(--arp-ink-rgb) / 0.22) 0 1.7px, rgb(var(--arp-bg-rgb) / 0) 1.9px),
    radial-gradient(circle at 8% 61%, rgb(var(--arp-accent-rgb) / 0.3) 0 1.2px, rgb(var(--arp-bg-rgb) / 0) 1.4px);
  --arp-speckle-size: 37px 41px, 53px 47px, 29px 31px, 67px 61px, 83px 79px;
}

/* ---------------------------------------------------------------------------
   BAND 02  the reset, in full
   --------------------------------------------------------------------------- */

* + * {
  margin-block-start: var(--arp-flow);
}

/* ---------------------------------------------------------------------------
   BAND 03  elements
   Trailing margins are zeroed on the blocks this site actually uses so that the
   owl above is the only thing deciding the gap between two siblings.
   --------------------------------------------------------------------------- */

html {
  /* the palette is a single light scheme; declaring it stops a dark-mode UA painting its own
     background into the number inputs and the scrollbar against this one. */
  color-scheme: light;
  background-color: var(--arp-bg);
  color: var(--arp-ink);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding: 0;
  /* Repeated from html on purpose. The speckle overlay paints the field, so this
     changes nothing on screen - but a contrast checker that walks up from a text
     node and stops at <body> finds no colour at all when the field is declared
     only on the root, and reports the whole page as unmeasurable. */
  background-color: var(--arp-bg);
  font-family: var(--arp-sans);
  font-weight: 400;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  line-height: 1.62;
  overflow-x: hidden;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, figcaption, fieldset, form, blockquote, table {
  margin-block-end: 0;
  margin-inline: 0;
}

h1, h2, h3, h4 {
  font-family: var(--arp-serif);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: 0.015em;
}

h1 {
  font-size: clamp(1.5rem, 1.1rem + 2vw, 2.45rem);
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

h2 {
  font-size: clamp(1.18rem, 1.02rem + 0.8vw, 1.55rem);
}

h3 {
  font-size: clamp(1.02rem, 0.97rem + 0.3vw, 1.16rem);
  text-transform: uppercase;
  letter-spacing: 0.085em;
  color: rgb(var(--arp-accent-rgb) / 1);
}

h4 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

p {
  max-inline-size: var(--arp-measure);
}

ul, ol {
  --arp-flow: 0.42rem;
  padding-inline-start: 1.15rem;
}

li::marker {
  color: rgb(var(--arp-accent-rgb) / 0.9);
}

dl {
  --arp-flow: 0;
}

dd {
  margin-inline-start: 0;
}

/* Niramit is loaded at 400 only. Emphasis is carried by case, tracking and
   colour so that nothing on the page is ever synthetically bolded. */
strong, b, th {
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 0.93em;
  color: rgb(var(--arp-accent2-rgb) / 1);
}

em, i {
  font-style: italic;
  color: rgb(var(--arp-ink-rgb) / 0.82);
}

abbr[title] {
  text-decoration: underline dotted rgb(var(--arp-accent-rgb) / 0.8);
  text-underline-offset: 0.18em;
  cursor: help;
}

a {
  color: var(--arp-accent2);
  text-decoration-color: rgb(var(--arp-accent-rgb) / 0.55);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.17em;
  transition: color 180ms ease, text-decoration-color 180ms ease, background-color 180ms ease;
}

a:hover,
a:focus-visible {
  color: var(--arp-accent);
  text-decoration-color: rgb(var(--arp-accent2-rgb) / 0.95);
}

:focus-visible {
  outline: 3px solid rgb(var(--arp-accent-rgb) / 1);
  outline-offset: 2px;
  border-radius: 1px;
}

svg {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

/* ---------------------------------------------------------------------------
   BAND 04  box model, declared on the things that are actually sized
   --------------------------------------------------------------------------- */

/* The owl spaces EVERY element that follows a sibling, which is right for a column of
   prose and wrong inside a row. These containers lay their children out themselves, so
   they redeclare the flow token to nothing and let gap do the work. Measured, not
   guessed: without this the ledger header splits over two lines and the footer's second
   column drops 16.8px below its first. */
.arp-head-top,
.arp-chain-where,
.arp-ledger-head,
.arp-foot-grid {
  --arp-flow: 0rem;
}

.arp-wrap,
.arp-head,
.arp-chain,
.arp-chain-jump,
.arp-chain-step,
.arp-shelf,
.arp-card,
.arp-level,
.arp-ledger,
.arp-ledger-row,
.arp-lift,
.arp-lift-key,
.arp-tool,
.arp-field,
.arp-field input,
.arp-field select,
.arp-out,
.arp-sum,
.arp-figure,
.arp-foot,
.arp-note,
.arp-skip {
  box-sizing: border-box;
}

/* ---------------------------------------------------------------------------
   BAND 05  the speckled field
   The overlay sits beneath every box in the document, so a card with a solid
   surface sits cleanly on top of the aggregate instead of punching a hole.
   --------------------------------------------------------------------------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  margin-block-start: 0;
  background-color: var(--arp-bg);
  background-image: var(--arp-speckle);
  background-size: var(--arp-speckle-size);
  animation: arp-grit 94s linear infinite;
  pointer-events: none;
}

@keyframes arp-grit {
  from { background-position: 0 0, 0 0, 0 0, 0 0, 0 0; }
  to   { background-position: 37px 41px, -53px 47px, 29px -31px, -67px 61px, 83px 79px; }
}

.arp-wrap {
  inline-size: min(100% - 1.7rem, var(--arp-page));
  margin-inline: auto;
}

.arp-skip {
  position: absolute;
  inset-inline-start: -200vw;
  background: var(--arp-accent2);
  color: var(--arp-surface);
  padding: 0.5rem 0.9rem;
  z-index: 9;
  transition: inset-inline-start 1ms linear;
}

.arp-skip:focus {
  inset-inline-start: 0.6rem;
  inset-block-start: 0.6rem;
  position: fixed;
}

/* ---------------------------------------------------------------------------
   BAND 06  masthead
   --------------------------------------------------------------------------- */

.arp-head {
  padding-block: 1.5rem 1.1rem;
  border-block-end: var(--arp-slab);
}

.arp-head-top {
  display: flex;
  align-items: flex-start;
  gap: 0.95rem;
  margin-block-start: 0;
}

.arp-mark {
  flex: 0 0 auto;
  inline-size: 44px;
  margin-block-start: 0;
}

.arp-mark .arp-mark-plumb {
  transform-box: view-box;
  transform-origin: 22px 4px;
  animation: arp-plumb 7.5s ease-in-out infinite;
}

@keyframes arp-plumb {
  0%, 100% { transform: rotate(-1.6deg); }
  50%      { transform: rotate(1.6deg); }
}

.arp-head h1 {
  margin-block-start: 0;
}

.arp-head-line {
  margin-block-start: 0.5rem;
  max-inline-size: 44rem;
  color: rgb(var(--arp-ink-rgb) / 0.88);
}

.arp-head-reg {
  margin-block-start: 0.45rem;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(var(--arp-accent-rgb) / 1);
  max-inline-size: none;
}

/* ---------------------------------------------------------------------------
   BAND 07  the stepper chain - site navigation
   Prev and next are real links and the jump list is a native disclosure, so the
   whole mechanism runs with scripting switched off and is identical at 320px
   and at 1600px.
   --------------------------------------------------------------------------- */

.arp-chain {
  --arp-flow: 0.6rem;
  padding-block: 0.85rem 0.95rem;
  border-block-end: var(--arp-hair);
}

.arp-chain-where {
  margin-block-start: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.6rem;
  max-inline-size: none;
}

.arp-chain-no {
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  color: rgb(var(--arp-accent-rgb) / 1);
  white-space: nowrap;
}

.arp-chain-name {
  font-family: var(--arp-serif);
  font-size: 1.02rem;
}

.arp-chain-controls {
  display: grid;
  gap: 0.45rem;
}

.arp-chain-step {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.52rem 0.72rem;
  border: var(--arp-hair);
  border-inline-start: 4px solid rgb(var(--arp-accent2-rgb) / 0.9);
  background: rgb(var(--arp-surface-rgb) / 0.9);
  text-decoration: none;
  font-size: 0.92rem;
  margin-block-start: 0;
  transition: background-color 170ms ease, border-color 170ms ease, transform 170ms ease;
}

.arp-chain-step:hover,
.arp-chain-step:focus-visible {
  background: var(--arp-surface);
  border-inline-start-color: var(--arp-accent);
  transform: translateX(2px);
}

.arp-chain-step[data-arp-dir="prev"] {
  border-inline-start: var(--arp-hair);
  border-inline-end: 4px solid rgb(var(--arp-accent2-rgb) / 0.9);
}

.arp-chain-step[data-arp-dir="prev"]:hover,
.arp-chain-step[data-arp-dir="prev"]:focus-visible {
  border-inline-end-color: var(--arp-accent);
  transform: translateX(-2px);
}

.arp-chain-arrow {
  flex: 0 0 auto;
  inline-size: 17px;
  margin-block-start: 0;
  color: rgb(var(--arp-accent-rgb) / 1);
}

.arp-chain-end {
  display: flex;
  align-items: center;
  padding: 0.52rem 0.72rem;
  border: 1px dashed rgb(var(--arp-ink-rgb) / 0.3);
  font-size: 0.86rem;
  color: rgb(var(--arp-ink-rgb) / 0.68);
  margin-block-start: 0;
}

.arp-chain-jump {
  border: var(--arp-hair);
  background: rgb(var(--arp-surface-rgb) / 0.78);
}

.arp-chain-jump > summary {
  margin-block-start: 0;
  padding: 0.5rem 0.72rem;
  cursor: pointer;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--arp-accent2);
  transition: background-color 170ms ease, color 170ms ease;
}

.arp-chain-jump > summary:hover {
  background: rgb(var(--arp-accent-rgb) / 0.09);
  color: var(--arp-accent);
}

.arp-chain-list {
  --arp-flow: 0;
  margin-block-start: 0;
  padding: 0 0.72rem 0.7rem 2.1rem;
  counter-reset: arp-stepno;
}

.arp-chain-list li {
  padding-block: 0.26rem;
  border-block-start: 1px dotted rgb(var(--arp-ink-rgb) / 0.2);
}

.arp-chain-list li:first-child {
  border-block-start: 0;
}

.arp-chain-list a {
  text-decoration: none;
  border-block-end: 1px solid rgb(var(--arp-accent-rgb) / 0.4);
}

.arp-chain-list [aria-current="step"] {
  color: var(--arp-accent);
  border-block-end-color: var(--arp-accent);
}

.arp-chain-list [aria-current="step"]::after {
  content: " — this step";
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(var(--arp-ink-rgb) / 0.6);
}

@media (min-width: 40rem) {
  .arp-chain-controls {
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
  }
  .arp-chain-step[data-arp-dir="prev"] {
    justify-content: flex-start;
  }
  .arp-chain-step[data-arp-dir="next"] {
    justify-content: flex-end;
    text-align: end;
  }
  .arp-chain-list {
    columns: 2;
    column-gap: 1.6rem;
  }
  .arp-chain-list li {
    break-inside: avoid;
  }
}

/* ---------------------------------------------------------------------------
   BAND 08  inset caps
   The caps are pushed in from the margin and the rule runs out of the last
   letter to the edge of the measure. The storey tag hangs in the gutter the
   caps were pushed out of.
   --------------------------------------------------------------------------- */

.arp-h {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.75rem;
  padding-inline-start: 0;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.arp-h::after {
  content: "";
  block-size: 2px;
  min-inline-size: 1.6rem;
  background: rgb(var(--arp-ink-rgb) / 0.8);
  margin-block-start: 0;
  transition: background-color 220ms ease, block-size 220ms ease;
}

.arp-h-tag {
  display: block;
  font-family: var(--arp-sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  color: rgb(var(--arp-accent-rgb) / 1);
  margin-block-start: 0;
  margin-block-end: 0.2rem;
  grid-column: 1 / -1;
  transition: color 220ms ease;
}

.arp-h-text {
  margin-block-start: 0;
}

@media (min-width: 48rem) {
  .arp-h {
    padding-inline-start: 6.6rem;
  }
  .arp-h-tag {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0.18em;
    inline-size: 6rem;
    text-align: end;
    grid-column: auto;
    margin-block-end: 0;
  }
}

/* ---------------------------------------------------------------------------
   BAND 09  storeys
   --------------------------------------------------------------------------- */

.arp-level {
  --arp-flow: 0.95rem;
  padding-block: 1.7rem 0.4rem;
  scroll-margin-block-start: 1rem;
  transition: background-color 300ms ease;
}

.arp-level p {
  color: rgb(var(--arp-ink-rgb) / 0.92);
}

.arp-level.arp-is-current {
  background: rgb(var(--arp-accent-rgb) / 0.065);
}

.arp-level.arp-is-current > .arp-h::after {
  background: var(--arp-accent);
  block-size: 4px;
}

.arp-level.arp-is-current > .arp-h .arp-h-tag {
  color: var(--arp-accent2);
}

/* ---------------------------------------------------------------------------
   BAND 10  card shelf
   Each shelf has a slab edge under it. Cards sit on the slab.
   --------------------------------------------------------------------------- */

.arp-shelf {
  --arp-flow: 0.85rem;
  position: relative;
  display: grid;
  gap: 0.85rem;
  padding-block-end: 1.25rem;
}

.arp-shelf::after {
  content: "";
  position: absolute;
  inset-inline: -0.35rem;
  inset-block-end: 0;
  block-size: 7px;
  margin-block-start: 0;
  background:
    linear-gradient(180deg, rgb(var(--arp-accent-rgb) / 0.85) 0 2px, rgb(var(--arp-ink-rgb) / 0.75) 2px 100%);
  box-shadow: 0 7px 11px -7px rgb(var(--arp-ink-rgb) / 0.75);
}

.arp-shelf > * {
  margin-block-start: 0;
}

.arp-card {
  --arp-flow: 0.6rem;
  background: var(--arp-surface);
  border: var(--arp-hair);
  border-block-end: 3px solid rgb(var(--arp-ink-rgb) / 0.55);
  padding: 0.9rem 1rem 1.05rem;
  transition: border-block-end-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.arp-card:hover {
  border-block-end-color: var(--arp-accent);
  box-shadow: 0 4px 14px -10px rgb(var(--arp-ink-rgb) / 0.9);
  transform: translateY(-2px);
}

.arp-card h3 {
  margin-block-start: 0;
}

.arp-card p {
  max-inline-size: none;
  font-size: 0.96rem;
}

.arp-card-foot {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: rgb(var(--arp-ink-rgb) / 0.68);
  border-block-start: 1px dotted rgb(var(--arp-ink-rgb) / 0.3);
  padding-block-start: 0.45rem;
}

@media (min-width: 46rem) {
  .arp-shelf {
    grid-template-columns: repeat(auto-fit, minmax(14.5rem, 1fr));
    gap: 1rem;
  }
}

/* ---------------------------------------------------------------------------
   BAND 11  the ledger
   Dates, counts and durations in ruled rows with a dotted leader. There is no
   amount column anywhere in this component and nothing in it is a price.
   --------------------------------------------------------------------------- */

.arp-ledger {
  border-block-start: 2px solid rgb(var(--arp-ink-rgb) / 0.8);
  border-block-end: 2px solid rgb(var(--arp-ink-rgb) / 0.8);
  background: rgb(var(--arp-surface-rgb) / 0.62);
}

.arp-ledger-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 0.6rem;
  align-items: baseline;
  padding: 0.5rem 0.75rem;
  border-block-start: 1px solid rgb(var(--arp-ink-rgb) / 0.16);
  margin-block-start: 0;
  transition: background-color 180ms ease;
}

.arp-ledger-row:first-child {
  border-block-start: 0;
}

.arp-ledger-row:hover {
  background: rgb(var(--arp-accent-rgb) / 0.07);
}

.arp-ledger-row dt {
  display: flex;
  align-items: baseline;
  gap: 0.45rem;
  margin-block-start: 0;
  font-size: 0.93rem;
}

.arp-ledger-row dt::after {
  content: "";
  flex: 1 1 auto;
  align-self: flex-end;
  margin-block: 0 0.3em;
  border-block-end: 1px dotted rgb(var(--arp-accent-rgb) / 0.7);
}

.arp-ledger-row dd {
  margin-block-start: 0.1rem;
  font-size: 0.93rem;
  color: var(--arp-accent2);
  letter-spacing: 0.02em;
}

.arp-ledger-head {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.4rem 0.75rem;
  background: rgb(var(--arp-ink-rgb) / 0.88);
  color: var(--arp-surface);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.17em;
  margin-block-start: 0;
}

.arp-ledger-note {
  font-size: 0.82rem;
  color: rgb(var(--arp-ink-rgb) / 0.7);
  padding: 0.45rem 0.75rem 0.55rem;
  border-block-start: 1px solid rgb(var(--arp-ink-rgb) / 0.16);
  margin-block-start: 0;
  max-inline-size: none;
}

@media (min-width: 38rem) {
  .arp-ledger-row {
    grid-template-columns: minmax(10rem, 1fr) minmax(8rem, 17rem);
  }
  .arp-ledger-row dd {
    margin-block-start: 0;
  }
}

/* ---------------------------------------------------------------------------
   BAND 12  floorplate stack - the set piece
   Every plate reads the same counter. At --arp-step 120 the stack is complete,
   which is the state the page is served in; the script winds the counter back
   to zero and walks it up once, on load, bound to nothing.
   --------------------------------------------------------------------------- */

.arp-figure {
  --arp-flow: 0.55rem;
  margin-block-start: var(--arp-flow);
}

.arp-stack {
  inline-size: 100%;
  background: rgb(var(--arp-surface-rgb) / 0.55);
  border: var(--arp-hair);
}

.arp-plate {
  --arp-p: clamp(0, calc((var(--arp-step) - (var(--arp-i) - 1) * var(--arp-span)) / var(--arp-span)), 1);
  transform: translateX(calc(var(--arp-drift, -74px) * (1 - var(--arp-p))));
  opacity: var(--arp-p);
}

.arp-plate-face {
  fill: rgb(var(--arp-ink-rgb) / 0.9);
  transition: fill 240ms ease;
}

.arp-plate-ground .arp-plate-face {
  fill: rgb(var(--arp-accent-rgb) / 0.92);
}

.arp-plate-label {
  font-family: "Niramit", sans-serif;
  font-size: 9px;
  letter-spacing: 0.17em;
  fill: rgb(var(--arp-surface-rgb) / 1);
  opacity: clamp(0, calc((var(--arp-p) - 0.66) * 3), 1);
}

.arp-plate-use {
  font-family: "Niramit", sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.1em;
  fill: rgb(var(--arp-bg-rgb) / 0.74);
  opacity: clamp(0, calc((var(--arp-p) - 0.78) * 4.5), 1);
}

.arp-roof-label {
  font-family: "Niramit", sans-serif;
  font-size: 7.5px;
  letter-spacing: 0.16em;
  fill: rgb(var(--arp-accent2-rgb) / 1);
  opacity: clamp(0, calc((var(--arp-step) - 104) / 16), 1);
}

.arp-roof {
  --arp-p: clamp(0, calc((var(--arp-step) - 88) / 32), 1);
  fill: none;
  stroke: var(--arp-accent2);
  stroke-width: 3.2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: var(--arp-rooflen, 330);
  stroke-dashoffset: calc(var(--arp-rooflen, 330) * (1 - var(--arp-p)));
}

.arp-datum {
  stroke: rgb(var(--arp-ink-rgb) / 0.4);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}

.arp-datum-tick {
  stroke: rgb(var(--arp-ink-rgb) / 0.45);
  stroke-width: 1;
}

.arp-datum-text {
  font-family: "Niramit", sans-serif;
  font-size: 7px;
  letter-spacing: 0.08em;
  fill: rgb(var(--arp-ink-rgb) / 0.6);
}

.arp-figcap {
  font-size: 0.86rem;
  color: rgb(var(--arp-ink-rgb) / 0.75);
  border-inline-start: 3px solid rgb(var(--arp-accent-rgb) / 0.6);
  padding-inline-start: 0.65rem;
  max-inline-size: var(--arp-measure);
}

/* ---------------------------------------------------------------------------
   BAND 13  the lift - walks the four tenure shelves
   The two keys are links, so with scripting off they move the reader to the
   next shelf exactly as they do with it on. The script adds the memory: the
   display keeps the shelf you are on named, and the keys retarget.
   --------------------------------------------------------------------------- */

.arp-lift {
  --arp-flow: 0.55rem;
  border: 2px solid rgb(var(--arp-ink-rgb) / 0.8);
  background: var(--arp-surface);
  padding: 0.75rem 0.8rem 0.85rem;
}

.arp-lift-display {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-block-start: 0;
  padding: 0.45rem 0.6rem;
  background: rgb(var(--arp-ink-rgb) / 0.9);
  color: var(--arp-bg);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  max-inline-size: none;
  transition: background-color 220ms ease;
}

.arp-lift-lamp {
  flex: 0 0 auto;
  inline-size: 0.55rem;
  block-size: 0.55rem;
  margin-block-start: 0;
  border-radius: 50%;
  background: var(--arp-accent);
  animation: arp-lamp 3.4s ease-in-out infinite;
}

@keyframes arp-lamp {
  0%, 100% { opacity: 0.45; transform: scale(0.84); }
  50%      { opacity: 1; transform: scale(1); }
}

.arp-lift-keys {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

.arp-lift-key {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.5rem 0.55rem;
  margin-block-start: 0;
  border: 1px solid rgb(var(--arp-ink-rgb) / 0.45);
  background: rgb(var(--arp-bg-rgb) / 1);
  text-decoration: none;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  transition: background-color 170ms ease, color 170ms ease, border-color 170ms ease;
}

.arp-lift-key:hover,
.arp-lift-key:focus-visible {
  background: var(--arp-accent2);
  color: var(--arp-surface);
  border-color: var(--arp-accent2);
}

.arp-lift-key.arp-is-stop {
  opacity: 0.4;
  pointer-events: none;
}

.arp-lift-floors {
  --arp-flow: 0;
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: 0.55rem;
  border-block-start: 1px solid rgb(var(--arp-ink-rgb) / 0.2);
}

.arp-lift-floors li {
  margin-block-start: 0;
  border-block-end: 1px solid rgb(var(--arp-ink-rgb) / 0.14);
}

/* flex-start, not space-between: the current-shelf marker below is a ::before, which is a
   third flex item, and space-between pushed the shelf name into the middle of its own row. */
.arp-lift-floors a {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.4rem;
  padding: 0.38rem 0.3rem;
  text-decoration: none;
  font-size: 0.88rem;
  transition: background-color 170ms ease, padding-inline-start 170ms ease;
}


.arp-lift-floors a:hover,
.arp-lift-floors a:focus-visible {
  background: rgb(var(--arp-accent-rgb) / 0.12);
  padding-inline-start: 0.6rem;
}

.arp-lift-floors [aria-current="true"] {
  background: rgb(var(--arp-accent2-rgb) / 0.14);
  color: var(--arp-accent2);
}

.arp-lift-floors [aria-current="true"]::before {
  content: "▸ ";
  color: var(--arp-accent);
}


.arp-is-landed {
  animation: arp-landed 620ms ease-out 1;
}

@keyframes arp-landed {
  0%   { background-color: rgb(var(--arp-accent-rgb) / 0.42); }
  100% { background-color: rgb(var(--arp-accent-rgb) / 0); }
}

/* ---------------------------------------------------------------------------
   BAND 14  tools
   Both sheets ship with the worked example already printed, so the arithmetic
   is on the page before any script runs and stays there if none does.
   --------------------------------------------------------------------------- */

.arp-tool {
  --arp-flow: 0.9rem;
  border: var(--arp-hair);
  border-block-start: 4px solid var(--arp-accent2);
  background: rgb(var(--arp-surface-rgb) / 0.9);
  padding: 0.95rem 0.9rem 1.1rem;
}

.arp-fields {
  --arp-flow: 0.65rem;
  display: grid;
  gap: 0.65rem;
  border: 0;
  padding: 0;
}

.arp-fields > legend {
  padding: 0;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--arp-accent);
}

.arp-field {
  display: grid;
  gap: 0.2rem;
  margin-block-start: 0;
}

.arp-field label {
  font-size: 0.86rem;
  margin-block-start: 0;
  line-height: 1.35;
}

.arp-field input {
  margin-block-start: 0;
  inline-size: 100%;
  font: inherit;
  font-size: 0.95rem;
  padding: 0.42rem 0.5rem;
  color: var(--arp-ink);
  background: var(--arp-bg);
  border: 1px solid rgb(var(--arp-ink-rgb) / 0.45);
  border-block-end-width: 2px;
  transition: border-color 170ms ease, background-color 170ms ease;
}

.arp-field input:focus {
  border-color: var(--arp-accent2);
  background: var(--arp-surface);
}

.arp-field input:invalid {
  border-color: rgb(var(--arp-accent-rgb) / 1);
}

.arp-field-hint {
  font-size: 0.76rem;
  color: rgb(var(--arp-ink-rgb) / 0.66);
  margin-block-start: 0;
  max-inline-size: none;
}

@media (min-width: 34rem) {
  .arp-fields {
    grid-template-columns: 1fr 1fr;
  }
  .arp-fields > legend {
    grid-column: 1 / -1;
  }
}

.arp-out {
  --arp-flow: 0.5rem;
  display: block;
  background: var(--arp-bg);
  border: 1px solid rgb(var(--arp-ink-rgb) / 0.3);
  padding: 0.7rem 0.8rem 0.85rem;
}

.arp-sum {
  --arp-flow: 0;
  margin-block-start: 0.45rem;
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 0.83rem;
  line-height: 1.75;
  list-style: none;
  padding-inline-start: 0;
}

.arp-sum li {
  margin-block-start: 0;
  padding-block: 0.12rem;
  border-block-end: 1px dotted rgb(var(--arp-ink-rgb) / 0.2);
  overflow-wrap: anywhere;
}

.arp-sum li:last-child {
  border-block-end: 0;
}

.arp-sum b {
  font-size: 0.95em;
}

.arp-verdict {
  margin-block-start: 0.6rem;
  padding: 0.5rem 0.65rem;
  border-inline-start: 5px solid var(--arp-accent2);
  background: rgb(var(--arp-accent2-rgb) / 0.1);
  font-size: 0.92rem;
  max-inline-size: none;
  transition: border-color 200ms ease, background-color 200ms ease;
}

.arp-verdict.arp-is-short {
  border-inline-start-color: var(--arp-accent);
  background: rgb(var(--arp-accent-rgb) / 0.14);
}

.arp-pair {
  display: grid;
  gap: 0.7rem;
}

@media (min-width: 40rem) {
  .arp-pair {
    grid-template-columns: 1fr 1fr;
  }
}

.arp-pair > div {
  margin-block-start: 0;
  border: 1px solid rgb(var(--arp-ink-rgb) / 0.25);
  padding: 0.6rem 0.7rem 0.7rem;
  background: rgb(var(--arp-surface-rgb) / 0.85);
}

.arp-pair h4 {
  margin-block-start: 0;
  color: var(--arp-accent2);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
}

.arp-guide {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(var(--arp-accent-rgb) / 1);
  max-inline-size: none;
}

/* ---------------------------------------------------------------------------
   BAND 15  misc blocks
   --------------------------------------------------------------------------- */

.arp-note {
  border-inline-start: 4px solid rgb(var(--arp-accent-rgb) / 0.75);
  background: rgb(var(--arp-accent-rgb) / 0.07);
  padding: 0.6rem 0.75rem 0.7rem;
  font-size: 0.93rem;
}

.arp-note p {
  max-inline-size: none;
}

.arp-steps {
  --arp-flow: 0.45rem;
  list-style: none;
  padding-inline-start: 0;
  counter-reset: arp-hour;
}

.arp-steps li {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 0.2rem 0.75rem;
  padding-block: 0.4rem;
  border-block-start: 1px solid rgb(var(--arp-ink-rgb) / 0.17);
}

.arp-steps li > span:first-child {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--arp-accent);
  margin-block-start: 0;
}

.arp-steps li > span + span {
  margin-block-start: 0;
}

.arp-map {
  inline-size: 100%;
  background: rgb(var(--arp-surface-rgb) / 0.6);
  border: var(--arp-hair);
}

.arp-map-band {
  fill: none;
  stroke-width: 1.4;
  stroke-dasharray: 5 4;
}

.arp-map-label {
  font-family: "Niramit", sans-serif;
  font-size: 9.2px;
  letter-spacing: 0.08em;
  fill: rgb(var(--arp-ink-rgb) / 0.8);
  paint-order: stroke;
  stroke: var(--arp-bg);
  stroke-width: 3px;
  stroke-linejoin: round;
}

.arp-map-key {
  font-family: "Niramit", sans-serif;
  font-size: 6.2px;
  letter-spacing: 0.12em;
  fill: rgb(var(--arp-bg-rgb) / 0.92);
}

.arp-map-pin {
  fill: var(--arp-accent);
}

.arp-clock-arc {
  fill: none;
  stroke-width: 11;
  stroke-linecap: butt;
  transition: stroke 220ms ease;
}

.arp-clock-text {
  font-family: "Niramit", sans-serif;
  font-size: 9.6px;
  letter-spacing: 0.1em;
  fill: rgb(var(--arp-ink-rgb) / 0.78);
}

.arp-hour-held {
  stroke: rgb(var(--arp-ink-rgb) / 0.3);
  stroke-width: 11;
}

.arp-hour-tick {
  stroke: rgb(var(--arp-ink-rgb) / 0.5);
  stroke-width: 1;
  fill: none;
}

.arp-hour-edge {
  stroke: rgb(var(--arp-accent-rgb) / 0.55);
  stroke-width: 1;
  stroke-dasharray: 3 3;
  fill: none;
}

/* the month strip at step two: nights let, nights void, and a tick per departure */

.arp-strip-let {
  fill: rgb(var(--arp-ink-rgb) / 0.82);
  transition: fill 200ms ease;
}

.arp-strip-void {
  fill: rgb(var(--arp-ink-rgb) / 0.14);
  transition: fill 200ms ease;
}

.arp-map:hover .arp-strip-let {
  fill: rgb(var(--arp-accent2-rgb) / 0.92);
}

.arp-strip-turn {
  stroke: var(--arp-accent);
  stroke-width: 2.4;
  stroke-linecap: square;
}

.arp-strip-text {
  font-family: "Niramit", sans-serif;
  font-size: 9px;
  fill: rgb(var(--arp-ink-rgb) / 0.62);
}

/* the certificate intervals at step seven, all three on one scale */

.arp-cert-a { fill: rgb(var(--arp-accent-rgb) / 0.9); }
.arp-cert-b { fill: rgb(var(--arp-accent2-rgb) / 0.85); }
.arp-cert-c { fill: rgb(var(--arp-ink-rgb) / 0.62); }

/* the travel allowance sketch at step eight */

.arp-map-road {
  fill: none;
  stroke: rgb(var(--arp-ink-rgb) / 0.22);
  stroke-width: 5;
  stroke-linecap: round;
}

/* the flat plan at step five */

.arp-plan-room {
  fill: rgb(var(--arp-surface-rgb) / 1);
  stroke: rgb(var(--arp-ink-rgb) / 0.72);
  stroke-width: 1.6;
}

.arp-plan-no {
  fill: var(--arp-accent);
}

.arp-plan-nt {
  font-family: "Niramit", sans-serif;
  font-size: 8.5px;
  fill: rgb(var(--arp-surface-rgb) / 1);
}

.arp-plan-meter {
  fill: none;
  stroke: var(--arp-accent2);
  stroke-width: 1.6;
  stroke-dasharray: 4 3;
}

/* ---------------------------------------------------------------------------
   BAND 16  footer
   --------------------------------------------------------------------------- */

.arp-foot {
  margin-block-start: 2.2rem;
  border-block-start: var(--arp-slab);
  padding-block: 1.2rem 2.2rem;
  font-size: 0.88rem;
}

.arp-foot-grid {
  display: grid;
  gap: 1rem;
  margin-block-start: 0;
}

@media (min-width: 42rem) {
  .arp-foot-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 1.6rem;
  }
}

.arp-foot address {
  font-style: normal;
  margin-block-start: 0.35rem;
  line-height: 1.5;
}

.arp-foot-name {
  font-family: var(--arp-serif);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.98rem;
  margin-block-start: 0;
}

.arp-foot-reg {
  margin-block-start: 0.55rem;
  color: rgb(var(--arp-ink-rgb) / 0.78);
  max-inline-size: none;
}

.arp-foot-sic {
  --arp-flow: 0.25rem;
  list-style: none;
  padding-inline-start: 0;
  font-size: 0.83rem;
  color: rgb(var(--arp-ink-rgb) / 0.72);
}

.arp-foot-sic strong {
  color: var(--arp-accent);
}

.arp-foot-mail {
  display: inline-block;
  margin-block-start: 0.5rem;
  padding: 0.3rem 0.55rem;
  background: rgb(var(--arp-accent2-rgb) / 0.11);
  text-decoration: none;
  border-block-end: 2px solid rgb(var(--arp-accent2-rgb) / 0.75);
  overflow-wrap: anywhere;
  transition: background-color 180ms ease, border-color 180ms ease;
}

.arp-foot-mail:hover,
.arp-foot-mail:focus-visible {
  background: rgb(var(--arp-accent-rgb) / 0.16);
  border-block-end-color: var(--arp-accent);
}

/* ---------------------------------------------------------------------------
   BAND 16B  composition
   Eleven body sections, eleven different figures. Nothing in this band is used
   twice: each rule set belongs to exactly one section of the index, and the
   order below is the order they are read in.
   --------------------------------------------------------------------------- */

/* 01  offset split - the narrow side carries the drawn index and overhangs the
       gutter into the wide side. */

.arp-split-grid {
  display: grid;
  gap: 1.15rem;
}

.arp-split-body {
  margin-block-start: 0;
}

.arp-split-aside {
  --arp-flow: 0.5rem;
  background: var(--arp-surface);
  border: var(--arp-hair);
  border-block-start: 3px solid var(--arp-accent);
  padding: 0.8rem 0.9rem 0.75rem;
}

.arp-split-cap {
  font-size: 0.78rem;
  line-height: 1.45;
  color: rgb(var(--arp-ink-rgb) / 0.74);
  border-block-start: 1px dotted rgb(var(--arp-ink-rgb) / 0.28);
  padding-block-start: 0.4rem;
}

.arp-index {
  inline-size: 100%;
  max-inline-size: 15rem;
  margin-block-start: 0;
}

.arp-index-row {
  --arp-p: clamp(0, calc((var(--arp-step) - (var(--arp-i) - 1) * 16) / 26), 1);
  opacity: var(--arp-p);
  transform: translateX(calc(-9px * (1 - var(--arp-p))));
}

.arp-index-spine {
  fill: none;
  stroke: rgb(var(--arp-ink-rgb) / 0.3);
  stroke-width: 1;
  stroke-dasharray: 2 4;
}

.arp-index-tick {
  fill: none;
  stroke: rgb(var(--arp-accent2-rgb) / 0.85);
  stroke-width: 1.8;
}

.arp-index-tick-base {
  stroke: var(--arp-accent);
  stroke-width: 3.6;
}

.arp-index-no {
  font-family: "Niramit", sans-serif;
  font-size: 10px;
  fill: rgb(var(--arp-ink-rgb) / 0.5);
}

.arp-index-name {
  font-family: "Niramit", sans-serif;
  font-size: 10.5px;
  letter-spacing: 0.13em;
  fill: rgb(var(--arp-ink-rgb) / 0.95);
}

.arp-index-name-base {
  fill: var(--arp-accent);
}

.arp-index-sub {
  font-family: "Niramit", sans-serif;
  font-size: 8.4px;
  fill: rgb(var(--arp-ink-rgb) / 0.58);
}

@media (min-width: 54rem) {
  .arp-split-grid {
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: 0 3.6rem;
    align-items: start;
  }
  .arp-split-body {
    max-inline-size: 31rem;
  }
  .arp-split-aside {
    /* the overhang: up past the body's first line and back across the gutter */
    margin-block-start: -3.1rem;
    margin-inline-start: -3rem;
    box-shadow: 0.45rem 0.45rem 0 rgb(var(--arp-ink-rgb) / 0.065);
  }
}

/* 02  wide figure - the picture runs the full content width and the prose under
       it is the caption, set to the measure and ruled off at the top. */

.arp-wide-figure {
  --arp-flow: 0.85rem;
}

.arp-wide-figure img {
  display: block;
  margin-block-start: 0;
  inline-size: 100%;
  block-size: auto;
  border: var(--arp-hair);
  filter: saturate(0.9);
}

.arp-wide-cap {
  --arp-flow: 0.55rem;
  border-block-start: 2px solid rgb(var(--arp-ink-rgb) / 0.75);
  padding-block-start: 0.6rem;
  font-size: 0.95rem;
}

.arp-wide-cap p {
  max-inline-size: var(--arp-measure);
}

.arp-editorial {
  font-size: 0.77rem;
  line-height: 1.5;
  letter-spacing: 0.012em;
  /* This line is the provenance of the picture above it, so it is the one small
     line on the page that has to be legible rather than merely present: at 0.6
     it measured 3.69:1 against the field. */
  color: rgb(var(--arp-ink-rgb) / 0.78);
  max-inline-size: var(--arp-measure);
}

.arp-editorial::before {
  content: "\2014\00a0";
  color: var(--arp-accent);
}

/* 03  full-bleed band - edge to edge, the measure inside it narrower than the
       page, and the set-piece staged on it as a pale plate on a dark wall. */

.arp-band {
  background-color: var(--arp-ink);
  background-image:
    linear-gradient(168deg, rgb(var(--arp-accent2-rgb) / 0.95) 0%, rgb(var(--arp-ink-rgb) / 0.97) 78%),
    var(--arp-speckle);
  background-size: auto, var(--arp-speckle-size);
  padding-block: 2.5rem 2.7rem;
  margin-block-start: 2.3rem;
  border-block: 3px solid rgb(var(--arp-ink-rgb) / 0.9);
  color: var(--arp-bg);
}

.arp-band-inner {
  inline-size: min(100% - 1.7rem, 46rem);
  margin-inline: auto;
  margin-block-start: 0;
}

.arp-h-pale {
  color: var(--arp-bg);
}

.arp-h-pale::after {
  background: rgb(var(--arp-bg-rgb) / 0.7);
}

.arp-h-pale .arp-h-tag {
  color: rgb(var(--arp-bg-rgb) / 0.82);
}

.arp-band-lead {
  max-inline-size: 34rem;
  color: rgb(var(--arp-bg-rgb) / 0.93);
}

.arp-band .arp-stack {
  background: var(--arp-surface);
  border-color: rgb(var(--arp-bg-rgb) / 0.35);
}

.arp-band .arp-figcap {
  color: rgb(var(--arp-bg-rgb) / 0.86);
  border-inline-start-color: rgb(var(--arp-accent-rgb) / 0.95);
}

.arp-band .arp-lift {
  border-color: rgb(var(--arp-bg-rgb) / 0.5);
  box-shadow: 0 0.7rem 1.6rem -1rem rgb(0 0 0 / 0.55);
}

/* 04  figure pair - two storeys set to be compared, same frame, same aspect,
       a rule down the gutter between them. */

.arp-twoplate {
  display: grid;
  gap: 1.15rem;
}

.arp-twoplate figure {
  --arp-flow: 0.5rem;
  margin-block-start: 0;
  position: relative;
}

.arp-twoplate img {
  display: block;
  margin-block-start: 0;
  inline-size: 100%;
  block-size: auto;
  border: var(--arp-hair);
  filter: saturate(0.9);
  transition: filter 260ms ease, border-color 260ms ease;
}

.arp-twoplate figure:hover img {
  filter: saturate(1);
  border-color: rgb(var(--arp-accent-rgb) / 0.8);
}

.arp-twoplate figcaption {
  font-size: 0.89rem;
  line-height: 1.52;
  color: rgb(var(--arp-ink-rgb) / 0.86);
}

.arp-twoplate-tag {
  display: block;
  font-family: var(--arp-serif);
  font-weight: 400;
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--arp-accent);
  margin-block-end: 0.15rem;
}

@media (min-width: 46rem) {
  .arp-twoplate {
    grid-template-columns: 1fr 1fr;
    gap: 0 2.6rem;
    align-items: start;
    position: relative;
  }
  .arp-twoplate::before {
    content: "";
    position: absolute;
    inset-block: 0.4rem 1.6rem;
    inset-inline-start: calc(50% - 1px);
    inline-size: 2px;
    background: rgb(var(--arp-ink-rgb) / 0.22);
  }
}

/* 06  pull quote - one sentence, serif, the full measure, body resuming under. */

.arp-quote {
  margin-block-start: 1rem;
  padding-block-start: 0.85rem;
  border-block-start: 4px solid var(--arp-accent);
  max-inline-size: 44rem;
}

.arp-quote p {
  margin-block-start: 0;
  max-inline-size: none;
  font-family: var(--arp-serif);
  font-size: clamp(1.26rem, 0.95rem + 1.75vw, 1.92rem);
  line-height: 1.24;
  letter-spacing: 0.005em;
  color: var(--arp-accent2);
}

.arp-quoted > p {
  max-inline-size: var(--arp-measure);
}

/* 07  card grid - three single facts in a row. Two of them are shelves the lift
       walks, so they take the current marker the storeys take. */

.arp-card.arp-level {
  padding-block: 0.9rem 1.05rem;
  scroll-margin-block-start: 1.4rem;
}

.arp-card.arp-is-current {
  background: rgb(var(--arp-accent-rgb) / 0.1);
  border-block-end-color: var(--arp-accent);
  box-shadow: inset 0 3px 0 0 var(--arp-accent);
}

/* 08  stacked overlap - the fixed term sits on the rolling one and laps over it. */

.arp-overlap {
  --arp-flow: 0;
  display: grid;
  gap: 0;
}

.arp-overlap > .arp-level {
  --arp-flow: 0.75rem;
  margin-block-start: 0;
  padding: 0.95rem 1.05rem 1.1rem;
  background: var(--arp-surface);
  border: var(--arp-hair);
  scroll-margin-block-start: 1.4rem;
  transition: background-color 300ms ease, box-shadow 260ms ease;
}

.arp-overlap > .arp-level h3 {
  margin-block-start: 0;
}

/* These are written as child selectors, not bare classes, because the rule that
   zeroes the flow margin above is itself a child selector: a bare .arp-overlap-b
   loses to it on specificity and the offset silently never happens. */

.arp-overlap > .arp-overlap-a {
  border-block-start: 3px solid var(--arp-accent2);
}

.arp-overlap > .arp-overlap-b {
  border-block-start: 3px solid var(--arp-accent);
  margin-block-start: -0.7rem;
  margin-inline-start: 0.9rem;
  box-shadow: -0.45rem 0.45rem 0 rgb(var(--arp-ink-rgb) / 0.08);
}

.arp-overlap > .arp-is-current {
  background: rgb(var(--arp-accent-rgb) / 0.1);
}

@media (min-width: 48rem) {
  .arp-overlap {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
  .arp-overlap > .arp-overlap-a {
    grid-area: 1 / 1 / 2 / 2;
    margin-block-start: 2.4rem;
    margin-inline-end: -2.8rem;
    /* the lap is over this panel's PADDING; its words stop short of it */
    padding-inline-end: 4rem;
    z-index: 0;
  }
  .arp-overlap > .arp-overlap-b {
    grid-area: 1 / 2 / 2 / 3;
    margin-block-start: 0;
    margin-inline-start: 0;
    z-index: 1;
    box-shadow: -0.55rem 0.55rem 0 rgb(var(--arp-ink-rgb) / 0.09);
  }
}

/* 09  margin annotation - a narrow body with the certificate it is about hung
       in the outer margin beside it. */

.arp-annot-row {
  display: grid;
  gap: 0.5rem;
  margin-block-start: 1.1rem;
}

.arp-annot-body {
  margin-block-start: 0;
}

.arp-annot-body p {
  margin-block-start: 0;
  max-inline-size: 31rem;
}

.arp-annot-note {
  margin-block-start: 0;
  font-size: 0.83rem;
  line-height: 1.5;
  color: rgb(var(--arp-ink-rgb) / 0.78);
  border-inline-start: 2px solid rgb(var(--arp-accent-rgb) / 0.85);
  padding-inline-start: 0.65rem;
}

.arp-annot-note b {
  display: block;
  font-family: var(--arp-serif);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--arp-accent2);
  margin-block-end: 0.1rem;
}

@media (min-width: 54rem) {
  .arp-annot-row {
    grid-template-columns: minmax(0, 31rem) 1fr;
    gap: 0 2.6rem;
  }
  .arp-annot-note {
    margin-block-start: 0.3rem;
  }
}

/* 10  step chain - the working of sheet A, numbered, with the rule drawn down
       the links. The script rebuilds the list items, so the numbers and the
       line are CSS and survive it. */

.arp-chainsum-head {
  font-size: 0.73rem;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--arp-accent);
  margin-block-start: 0.3rem;
}

.arp-chainsum {
  position: relative;
  counter-reset: arp-link;
  padding-inline-start: 2.3rem;
  margin-block-start: 0.7rem;
}

.arp-chainsum::before {
  content: "";
  position: absolute;
  inset-block: 1.1rem 1.2rem;
  inset-inline-start: 0.72rem;
  inline-size: 2px;
  margin-block-start: 0;
  /* solid, and the rows below are spaced so the gap between two numbers is wide
     enough to see it. A dashed rule at this pitch fell in the gaps and read as
     no rule at all. */
  background: rgb(var(--arp-accent2-rgb) / 0.55);
}

.arp-chainsum li {
  position: relative;
  border-block-end: 0;
  padding-block: 0.45rem;
}

.arp-chainsum li::before {
  counter-increment: arp-link;
  content: counter(arp-link);
  position: absolute;
  inset-inline-start: -2.3rem;
  inset-block-start: 0.42rem;
  inline-size: 1.5rem;
  block-size: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--arp-surface);
  border: 2px solid rgb(var(--arp-accent2-rgb) / 0.8);
  font-family: var(--arp-sans);
  font-size: 0.72rem;
  color: var(--arp-accent2);
  transition: background-color 200ms ease, border-color 200ms ease;
}

.arp-chainsum li:last-child::before {
  background: var(--arp-accent2);
  border-color: var(--arp-accent2);
  color: var(--arp-surface);
}

/* 11  inset plate - the entry plate set into the text block, the prose of sheet
       B running past it on one side. */

.arp-inset-plate {
  background: var(--arp-bg);
  border: var(--arp-hair);
  border-inline-start: 3px solid var(--arp-accent);
  padding: 0.8rem 0.9rem 0.95rem;
}

.arp-inset > p {
  max-inline-size: none;
}

.arp-inset-out {
  clear: both;
}

@media (min-width: 52rem) {
  .arp-inset-plate {
    float: inline-end;
    inline-size: 25rem;
    margin-block: 0.25rem 1rem;
    margin-inline-start: 1.9rem;
  }
}

/* ---------------------------------------------------------------------------
   BAND 17  reduced motion
   Every transition and every animation declared above is named here. The stack
   is left at 120, which is its finished state, not a shortened one.
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root {
    --arp-step: 120;
  }

  body::before,
  .arp-mark .arp-mark-plumb,
  .arp-lift-lamp,
  .arp-is-landed {
    animation: none;
  }

  a,
  .arp-skip,
  .arp-chain-step,
  .arp-chain-step[data-arp-dir="prev"],
  .arp-chain-jump > summary,
  .arp-h::after,
  .arp-h-tag,
  .arp-level,
  .arp-card,
  .arp-ledger-row,
  .arp-plate-face,
  .arp-lift-display,
  .arp-lift-key,
  .arp-lift-floors a,
  .arp-field input,
  .arp-verdict,
  .arp-foot-mail,
  .arp-clock-arc,
  .arp-twoplate img,
  .arp-overlap > .arp-level,
  .arp-chainsum li::before {
    transition-duration: 0s;
    transition-delay: 0s;
  }

  .arp-chain-step:hover,
  .arp-chain-step:focus-visible,
  .arp-chain-step[data-arp-dir="prev"]:hover,
  .arp-card:hover,
  .arp-lift-floors a:hover {
    transform: none;
    padding-inline-start: 0.3rem;
  }

  /* the drawn index reads the same counter the stack does; at 120 both are
     finished, so nothing here needs shortening, only pinning. */
  .arp-index-row {
    opacity: 1;
    transform: none;
  }
}

/* ---------------------------------------------------------------------------
   BAND 18  high contrast and print
   --------------------------------------------------------------------------- */

@media (forced-colors: active) {
  .arp-card,
  .arp-tool,
  .arp-lift,
  .arp-ledger,
  .arp-chain-step {
    border: 1px solid CanvasText;
  }
  .arp-shelf::after {
    forced-color-adjust: none;
    background: CanvasText;
  }
}

@media print {
  body::before,
  .arp-chain,
  .arp-lift,
  .arp-skip {
    display: none;
  }
  .arp-level,
  .arp-card,
  .arp-tool {
    break-inside: avoid;
  }
  a {
    color: inherit;
  }
}