/* =================================================================
   FULL SPECTRUM LETTINGS LTD — the daylight property ledger.

   The whole of this site is one working paper kept on a desk: a warm
   paper ground, ink-brown writing, and one deep navy reserved for the
   rules, the boxed labels and the single band that reverses out near
   the foot. Nothing here is a brochure and nothing here shouts.

   Three rules govern every page:
     · one wide reading column, with figures and strips breaking out
       past it to the window edge. There is no rail and no margin.
     · a heading opens with a boxed ledger label set inline at the
       start of its own line, never with a rule floated above it.
     · the ground is paper. The dark grounds on the site are the ledge
       that carries the plate, the head row inside each column of the
       board under it, and one short inverted band.
   ================================================================= */


:root {
  --tenan-bg: #f4f1e8;
  --tenan-ink: #4a4038;
  --tenan-accent: #123a7a;
  --tenan-accent2: #6b7a2e;
  --tenan-surface: #ffffff;

  /* the board under the masthead is dressed in these: a washed cell for
     the column the reader is standing in, and the light rule between
     one part of a page and the next */
  --tenan-rule: rgba(18, 58, 122, .22);
  --tenan-tint: #edf2f9;
  --tenan-lime: #cfe08a;
  --tenan-deep: #0c2a59;
  --tenan-slate: #c6d6ea;

  /* the paper itself: a card sits a half tone warmer than the ground,
     and the tint is what a ruled cell is washed with */
  --tenan-card: #fffdf8;
  --tenan-wash: #ece7da;
  --tenan-wash2: #e3ddcd;

  /* hairlines. a ledger has two weights of line and no more: the light
     one between rows, the dark one under a head and over a total */
  --tenan-hair: rgba(74, 64, 56, .26);
  --tenan-hair2: rgba(18, 58, 122, .38);
  --tenan-hair3: rgba(18, 58, 122, .72);

  --tenan-step: 1.15rem;
  --tenan-ledge: 3.25rem;
  --tenan-read: 42rem;
  --tenan-broad: 60rem;

  /* one shadow only, and it is the shadow a sheet of paper casts when it
     is lying flat on a desk rather than floating over one */
  --tenan-lay: 0 1px 0 rgba(74, 64, 56, .13), 0 6px 14px -12px rgba(40, 32, 24, .55);

  /* paper fibre. feTurbulence rather than a grid, because a grid is a
     drawing office and this is a letting office */
  --tenan-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23f)' opacity='0.055'/%3E%3C/svg%3E");
}

/* =================================================================
   01  the paper. Nothing is zeroed with a universal selector; each
       element that this site actually prints is given the spacing
       a ledger would give it, and the rest is left alone.
   ================================================================= */

html {
  background: var(--tenan-bg);
  scroll-padding-top: calc(var(--tenan-ledge) + .8rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  padding-top: var(--tenan-ledge);
  background-color: var(--tenan-bg);
  background-image: var(--tenan-fibre);
  background-repeat: repeat;
  color: var(--tenan-ink);
  font-family: 'Fira Sans', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: 1.02rem;
  line-height: 1.62;
  overflow-x: hidden;
}

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  line-height: 1.22;
  color: var(--tenan-accent);
  letter-spacing: -.004em;
}

h1 { font-size: 1.62rem; }
h2 { font-size: 1.28rem; }
h3 { font-size: 1.06rem; }

p { margin: 0 0 .95rem; }
p:last-child { margin-bottom: 0; }

ol, ul, dl { margin: 0; padding: 0; }
dd { margin: 0; }
figure { margin: 0; }

b, strong { font-weight: 600; }

a {
  color: var(--tenan-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color 150ms linear, background-color 150ms linear;
}

a:hover { color: var(--tenan-accent2); }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
[role="button"]:focus-visible {
  outline: 3px solid var(--tenan-accent2);
  outline-offset: 2px;
}

::selection { background: var(--tenan-lime); color: var(--tenan-ink); }

/* =================================================================
   02  the column set. One reading measure in the middle, a broader
       lane for a sheet or a table, and the window edge for a drawing.
       Everything on this site is one of those three widths, and no
       page anywhere opens a second column beside the first.
   ================================================================= */

main > section,
body > header,
body > footer {
  display: grid;
  grid-template-columns:
    [bleed-start] minmax(var(--tenan-step), 1fr)
    [broad-start] minmax(0, calc((var(--tenan-broad) - var(--tenan-read)) / 2))
    [read-start] min(var(--tenan-read), 100% - (2 * var(--tenan-step))) [read-end]
    minmax(0, calc((var(--tenan-broad) - var(--tenan-read)) / 2)) [broad-end]
    minmax(var(--tenan-step), 1fr) [bleed-end];
}

main > section > *,
body > header > *,
body > footer > * { grid-column: read; }

main > section > figure,
main > section > .tenan-strip,
main > section > .tenan-rule12,
body > header > .tenan-elevation { grid-column: bleed; }

main > section > table,
main > section > .tenan-sheet,
main > section > .tenan-holds,
main > section > div[role="region"] { grid-column: broad; }

/* =================================================================
   02b the ledge. The band across the head of the window carries the
       plate and the desk line and nothing else. There is no key on
       it and no sheet behind it: the index of this site is printed
       under the masthead, in 02c below, where both of its levels
       are read off the paper rather than summoned onto it.
   ================================================================= */

.tenan-ledge {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  background-color: var(--tenan-deep);
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 1px, rgba(255, 255, 255, 0) 1px 34px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .055) 0 1px, rgba(255, 255, 255, 0) 1px 34px),
    linear-gradient(180deg, #081f45 0%, var(--tenan-deep) 100%);
  border-bottom: 3px solid var(--tenan-accent2);
  box-shadow: 0 10px 24px -18px rgba(3, 12, 30, .95);
}

.tenan-ledge > div {
  box-sizing: border-box;
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 var(--tenan-step);
  min-height: var(--tenan-ledge);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}

/* ---- the plate ---- */

.tenan-plate {
  display: flex;
  align-items: baseline;
  gap: .42rem;
  min-width: 0;
  padding: .5rem 0;
  font-size: .74rem;
  letter-spacing: .09em;
  line-height: 1.1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tenan-plate::before {
  content: "";
  flex: 0 0 auto;
  align-self: center;
  width: 4px;
  height: .95rem;
  background: var(--tenan-accent2);
  transition: height 180ms ease-out, background-color 180ms ease-out;
}

.tenan-plate > b { font-weight: 700; color: var(--tenan-surface); }
.tenan-plate > span { font-weight: 400; color: var(--tenan-lime); }
.tenan-plate:hover::before { height: 1.35rem; background: var(--tenan-lime); }
.tenan-plate:focus-visible { outline: 3px solid var(--tenan-lime); outline-offset: 2px; }

/* ---- the desk line. The far end of the band is not left empty now
       that nothing is docked there: it prints where the desk is ---- */

.tenan-desk {
  flex: 0 1 auto;
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tenan-slate);
}

@media (max-width: 29.99rem) { .tenan-desk { display: none; } }

/* =================================================================
   02c the board. The index, printed under the masthead as a ruled
       schedule: one column to a page, its parts folded inside it.
       The first level is simply on the paper and cannot be closed.
       The second is a native disclosure — it pushes the page down
       in its own column rather than laying a sheet over it, so it
       covers nothing and works with the script switched off.
   ================================================================= */

.tenan-board {
  margin: 0 0 2.4rem;
  border-top: 2px solid var(--tenan-accent);
  border-bottom: 2px solid var(--tenan-accent);
  background: var(--tenan-card);
  box-shadow: var(--tenan-lay);
}

/* the rules between the columns are the gaps: one pixel of the dark
   hairline showing through from the ground behind the cells */
.tenan-board > ul {
  box-sizing: border-box;
  list-style: none;
  max-width: var(--tenan-broad);
  margin: 0 auto;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--tenan-hair2);
}

.tenan-board > ul > li {
  margin: 0;
  background-color: var(--tenan-card);
  background-image: repeating-linear-gradient(0deg, var(--tenan-rule) 0 1px, transparent 1px 44px);
}

.tenan-board details { margin: 0; }

/* ---- level one: the heads of the columns, always printed ---- */

.tenan-board summary {
  box-sizing: border-box;
  background-color: var(--tenan-card);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-areas: "num name count mark";
  align-items: center;
  column-gap: .62rem;
  min-height: 56px;
  padding: .6rem var(--tenan-step);
  list-style: none;
  cursor: pointer;
  color: var(--tenan-accent);
  transition: background-color 170ms ease-out;
}

.tenan-board summary::-webkit-details-marker { display: none; }
.tenan-board summary::marker { content: ""; }

.tenan-board summary:hover { background: var(--tenan-tint); }
.tenan-board summary:focus-visible { outline: 3px solid var(--tenan-accent2); outline-offset: -4px; }

/* the numeral is boxed the way every folio and chapter label on this
   site is boxed, and it is the only figure in the head */
.tenan-board summary > b {
  grid-area: num;
  padding: .22rem .5rem .18rem;
  border: 1px solid var(--tenan-hair2);
  background: var(--tenan-surface);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
  color: var(--tenan-accent);
}

.tenan-board summary > span {
  grid-area: name;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
}

.tenan-board summary > em {
  grid-area: count;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .38rem;
  font-style: normal;
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--tenan-accent2);
}

/* the stamp, for the column you are standing in */
.tenan-board summary > em > b {
  padding: .2rem .4rem .16rem;
  background: var(--tenan-accent2);
  color: var(--tenan-surface);
  font-weight: 700;
}

/* the mark: a cross rule that loses its upright when the column is
   folded open, drawn as two backgrounds so nothing has to rotate */
.tenan-board summary > i {
  grid-area: mark;
  justify-self: end;
  width: .8rem;
  height: .8rem;
  background-image:
    linear-gradient(currentColor, currentColor),
    linear-gradient(currentColor, currentColor);
  background-size: 100% 2px, 2px 100%;
  background-position: center, center;
  background-repeat: no-repeat;
  color: var(--tenan-accent2);
  transition: background-size 210ms ease-out, color 170ms ease-out;
}

.tenan-board summary:hover > i { color: var(--tenan-accent); }
.tenan-board details[open] summary > i { background-size: 100% 2px, 2px 0; color: var(--tenan-accent); }

/* the column the reader is standing in: washed, and ruled in olive
   along its head edge */
.tenan-board-here { box-shadow: inset 0 3px 0 var(--tenan-accent2); }
.tenan-board-here > details > summary { background: var(--tenan-tint); }

/* ---- level two: the parts, folded inside the column ---- */

.tenan-board details > div {
  border-top: 1px solid var(--tenan-hair2);
  background: var(--tenan-surface);
}

/* the page itself is the first row of its own list, reversed out the
   way the one dark band further down the page is reversed out */
.tenan-board-whole {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 50px;
  padding: .5rem var(--tenan-step);
  background: var(--tenan-deep);
  color: var(--tenan-lime);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.3;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 170ms ease-out, color 170ms ease-out;
}

.tenan-board-whole::after {
  content: "\2192";
  margin-left: auto;
  font-size: .92rem;
  letter-spacing: 0;
}

.tenan-board-whole:hover { background: var(--tenan-accent); color: var(--tenan-surface); }
.tenan-board-whole:focus-visible { outline: 3px solid var(--tenan-lime); outline-offset: -4px; }
.tenan-board-whole[aria-current] { background: var(--tenan-accent); }
.tenan-board-whole[aria-current]::after { content: "\25CF"; font-size: .6rem; }

.tenan-board details > div > ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tenan-board details > div > ul > li { margin: 0; }

.tenan-board details > div > ul > li > a {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: .55rem;
  min-height: 44px;
  padding: .44rem var(--tenan-step);
  border-bottom: 1px solid var(--tenan-rule);
  border-left: 4px solid transparent;
  color: var(--tenan-ink);
  font-size: .92rem;
  line-height: 1.25;
  text-decoration: none;
  transition: background-color 150ms linear, border-left-color 150ms linear, color 150ms linear;
}

.tenan-board details > div > ul > li:last-child > a { border-bottom: 0; }

/* a short lead rule in front of each part, the way a sub-entry is led
   in on a printed schedule */
.tenan-board details > div > ul > li > a::before {
  content: "";
  flex: 0 0 auto;
  width: .5rem;
  height: 1px;
  background: var(--tenan-hair);
  transition: width 150ms linear, background-color 150ms linear;
}

.tenan-board details > div > ul > li > a:hover {
  background: var(--tenan-tint);
  border-left-color: var(--tenan-accent2);
  color: var(--tenan-accent);
}

.tenan-board details > div > ul > li > a:hover::before {
  width: .95rem;
  background: var(--tenan-accent2);
}

.tenan-board details > div > ul > li > a:focus-visible {
  outline: 3px solid var(--tenan-accent2);
  outline-offset: -4px;
}

@media (prefers-reduced-motion: no-preference) {
  .tenan-board details[open] > div {
    animation: tenan-fold 250ms cubic-bezier(.22, .78, .3, 1) both;
  }
}

@keyframes tenan-fold {
  from { clip-path: inset(0 0 100% 0); opacity: .45; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}

/* ---- the ruling. One column to a phone, then three, then the whole
       schedule across the lane. The mechanism never changes with the
       window: the same five heads, the same fold under each. ---- */

@media (min-width: 46rem) {
  .tenan-board > ul { grid-template-columns: repeat(6, 1fr); }
  .tenan-board > ul > li { grid-column: span 2; }
  .tenan-board > ul > li:nth-child(4),
  .tenan-board > ul > li:nth-child(5) { grid-column: span 3; }

  .tenan-board summary {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "num  mark"
      "name name"
      "count count";
    align-content: space-between;
    row-gap: .55rem;
    min-height: 112px;
    padding: .8rem .95rem .75rem;
  }

  .tenan-board summary > span { font-size: 1.02rem; }
  .tenan-board-whole,
  .tenan-board details > div > ul > li > a { padding-left: .95rem; padding-right: .95rem; }
}

@media (min-width: 64rem) {
  .tenan-board > ul { grid-template-columns: repeat(5, 1fr); }
  .tenan-board > ul > li,
  .tenan-board > ul > li:nth-child(4),
  .tenan-board > ul > li:nth-child(5) { grid-column: span 1; }
}


/* =================================================================
   03  the opener. No masthead card, no facts panel and no title set
       beside anything. The elevation runs the whole width of the
       window and the company name is a small letterpress plate
       resting on the baseline rule the terrace stands on.
   ================================================================= */

body > header { padding: 0 0 2.1rem; }

.tenan-elevation {
  position: relative;
  margin: 0 0 1.4rem;
  padding-top: 1.4rem;
}

.tenan-elevation > div {
  position: relative;
  width: 100%;
}

.tenan-elevation svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.tenan-elevation svg path {
  fill: none;
  stroke: rgba(74, 64, 56, .52);
  stroke-width: 1.1;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}

.tenan-elevation svg > g > path:first-child { stroke: var(--tenan-accent); stroke-width: 1.5; }
.tenan-elevation svg > path { stroke: var(--tenan-accent2); stroke-width: 2; }

/* ink settling: the terrace draws itself once, front by front, and
   after that it is simply a drawing for the rest of the visit */
@media (prefers-reduced-motion: no-preference) {
  .tenan-elevation svg path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: tenan-ink 1500ms cubic-bezier(.5, .02, .2, 1) forwards;
  }
  .tenan-elevation svg > g:nth-of-type(1) path { animation-delay: 120ms; }
  .tenan-elevation svg > g:nth-of-type(2) path { animation-delay: 290ms; }
  .tenan-elevation svg > g:nth-of-type(3) path { animation-delay: 460ms; }
  .tenan-elevation svg > g:nth-of-type(4) path { animation-delay: 630ms; }
  .tenan-elevation svg > g:nth-of-type(5) path { animation-delay: 800ms; }
  .tenan-elevation svg > g > path:nth-child(n+2) { animation-duration: 900ms; }
  .tenan-elevation h1 { animation: tenan-press 620ms 980ms cubic-bezier(.2, .9, .25, 1) both; }
}

@keyframes tenan-ink { to { stroke-dashoffset: 0; } }

@keyframes tenan-press {
  from { opacity: 0; transform: translateY(.5rem); }
  to { opacity: 1; transform: none; }
}

/* the plate: small, quiet, and pressed into the paper rather than
   floated over it. two inset rings stand in for the bite of the type */
.tenan-elevation h1 {
  position: absolute;
  left: clamp(.9rem, 5%, 5rem);
  bottom: 6%;
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding: .46rem .9rem .5rem;
  background: var(--tenan-card);
  border: 1px solid var(--tenan-hair3);
  box-shadow:
    inset 0 0 0 3px var(--tenan-card),
    inset 0 0 0 4px rgba(18, 58, 122, .22),
    var(--tenan-lay);
  font-size: clamp(.72rem, 2.1vw, 1.34rem);
  line-height: 1.08;
  letter-spacing: .105em;
  text-transform: uppercase;
}

.tenan-elevation h1 > b {
  font-weight: 600;
  color: var(--tenan-accent);
  text-shadow: 0 1px 0 rgba(18, 58, 122, .16);
}

.tenan-elevation h1 > span {
  font-weight: 400;
  font-size: .58em;
  letter-spacing: .34em;
  color: var(--tenan-accent2);
}

/* on a phone the whole terrace is drawn, not a crop of it: the caption
   directly beneath counts five fronts, and a reader who can only see three
   reads that as an error. The drawing simply sits smaller instead. */
@media (max-width: 34rem) {
  .tenan-elevation > div { overflow: visible; }
  .tenan-elevation svg { width: 100%; margin-left: 0; }
}

/* the standfirst, and the line that reads the drawing */

.tenan-stand {
  margin: 0 0 .9rem;
  font-size: 1.16rem;
  line-height: 1.48;
  color: var(--tenan-ink);
}

.tenan-caption {
  margin: 0;
  padding-top: .62rem;
  border-top: 1px solid var(--tenan-hair);
  font-size: .84rem;
  line-height: 1.5;
  color: rgba(74, 64, 56, .8);
}

/* the shorter pages open on a ruled page head rather than a drawing:
   a boxed folio, the heading, then the standfirst under a hairline */

.tenan-folio {
  margin: 2rem 0 .85rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tenan-accent2);
}

.tenan-folio > b {
  padding: .22rem .52rem .2rem;
  border: 1px solid var(--tenan-hair2);
  background: var(--tenan-card);
  font-variant-numeric: tabular-nums;
  color: var(--tenan-accent);
}

.tenan-folio::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--tenan-hair2);
}

body > header h1 { text-wrap: balance; }

body > header > h1 { margin: 0 0 .8rem; font-size: clamp(1.5rem, 3.4vw, 2.05rem); }

/* =================================================================
   04  the chapter. A hairline across the window opens it, a boxed
       ledger label opens its heading, and the prose runs in the one
       reading column underneath.
   ================================================================= */

main { display: block; }

main > section {
  padding: 2.3rem 0 2.5rem;
  border-top: 1px solid var(--tenan-hair2);
}

main > section:first-child { border-top: 0; padding-top: 1.4rem; }

main h2 {
  margin: 0 0 .9rem;
  text-wrap: balance;
}

main h2 > small {
  display: inline-block;
  margin: 0 .6rem .16rem 0;
  padding: .2rem .5rem .16rem;
  border: 1px solid var(--tenan-hair2);
  background: var(--tenan-card);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .19em;
  line-height: 1.5;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--tenan-accent2);
  vertical-align: .2em;
}

main h3 {
  margin: 1.4rem 0 .7rem;
  font-size: .96rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--tenan-accent2);
}

main > section > p { max-width: 40rem; }

/* =================================================================
   05  the strip. Six numbered paper cards, and the reader moves
       sideways along the tenancy rather than down a rail beside it.
       Arrow keys move it a card at a time; under a narrow window it
       gives up scrolling and simply stacks.
   ================================================================= */

.tenan-strip { margin: 1.5rem 0 .4rem; }

.tenan-strip > p {
  width: min(100% - (2 * var(--tenan-step)), var(--tenan-broad));
  margin: 0 auto .8rem;
  display: flex;
  align-items: center;
  gap: .7rem;
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tenan-accent2);
}

.tenan-strip > p::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--tenan-hair);
}

.tenan-strip > ol {
  display: flex;
  gap: .85rem;
  list-style: none;
  margin: 0;
  padding: .35rem var(--tenan-step) 1.15rem max(var(--tenan-step), (100% - var(--tenan-broad)) / 2);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-left: max(var(--tenan-step), (100% - var(--tenan-broad)) / 2);
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--tenan-hair2) transparent;
}

.tenan-strip > ol:focus-visible { outline: 3px solid var(--tenan-accent2); outline-offset: -3px; }

.tenan-strip > ol > li {
  flex: 0 0 min(17.5rem, 76vw);
  scroll-snap-align: start;
}

.tenan-strip > ol > li > :is(a, div) {
  display: flex;
  flex-direction: column;
  height: 100%;
  box-sizing: border-box;
  background: var(--tenan-surface);
  border: 1px solid var(--tenan-hair);
  box-shadow: var(--tenan-lay);
  color: inherit;
  text-decoration: none;
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
}

/* the ruled head of the card, the way a card in a tray is headed */
.tenan-strip > ol > li > :is(a, div) > b {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem;
  padding: .42rem .72rem .36rem;
  border-bottom: 2px solid var(--tenan-hair3);
  background: var(--tenan-wash);
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--tenan-accent2);
}

.tenan-strip > ol > li > :is(a, div) > b > i {
  font-style: normal;
  font-size: 1.05rem;
  letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
  color: var(--tenan-accent);
}

.tenan-strip > ol > li > :is(a, div) > em {
  display: block;
  padding: .7rem .72rem .3rem;
  font-style: normal;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.22;
  color: var(--tenan-accent);
}

.tenan-strip > ol > li > :is(a, div) > span {
  display: block;
  padding: 0 .72rem .78rem;
  font-size: .84rem;
  line-height: 1.44;
  color: rgba(74, 64, 56, .84);
}

.tenan-strip > ol > li > :is(a, div):hover,
.tenan-strip > ol > li > :is(a, div):focus-visible {
  border-color: var(--tenan-hair3);
  box-shadow: 0 1px 0 rgba(74, 64, 56, .2), 0 14px 26px -18px rgba(40, 32, 24, .8);
  transform: translateY(-3px);
}

.tenan-strip > ol > li > :is(a, div)[aria-current] > b { background: var(--tenan-accent); color: var(--tenan-lime); }
.tenan-strip > ol > li > :is(a, div)[aria-current] > b > i { color: var(--tenan-surface); }

@media (prefers-reduced-motion: reduce) {
  .tenan-strip > ol { scroll-behavior: auto; }
  .tenan-strip > ol > li > :is(a, div) { transition: none; }
  .tenan-strip > ol > li > :is(a, div):hover { transform: none; }
}

@media (max-width: 40rem) {
  .tenan-strip > ol {
    display: block;
    overflow-x: visible;
    padding-bottom: .2rem;
  }
  .tenan-strip > ol > li { margin-bottom: .7rem; }
}

/* =================================================================
   06  figures. A drawing breaks out of the reading column to the
       window edge, and it does it by laying a full-width sheet of
       paper across the page while the drawing itself stays readable
       in the middle of that sheet.
   ================================================================= */

main > section > figure {
  margin: 1.6rem 0;
  padding: 1.45rem 0 1.3rem;
  background: var(--tenan-card);
  border-top: 1px solid var(--tenan-hair2);
  border-bottom: 1px solid var(--tenan-hair2);
}

main > section > figure > svg,
main > section > figure > div,
main > section > figure > figcaption {
  width: min(100% - (2 * var(--tenan-step)), var(--tenan-broad));
  margin-inline: auto;
}

main > section > figure > svg { display: block; height: auto; }

main > section > figure > div { overflow-x: auto; overscroll-behavior-x: contain; }
main > section > figure > div > svg { display: block; width: 100%; min-width: 21rem; height: auto; }

main > section > figure > figcaption {
  margin-top: 1rem;
  padding-top: .62rem;
  border-top: 1px solid var(--tenan-hair);
  font-size: .84rem;
  line-height: 1.5;
  color: rgba(74, 64, 56, .82);
}

main > section > figure > figcaption > b {
  color: var(--tenan-accent);
  font-weight: 600;
}

/* =================================================================
   07  ledger rows. A numbered list inside a chapter is not a tile
       grid and not a timeline: it is a run of ruled rows, the label
       standing in its own column the way it stands on a schedule.
   ================================================================= */

main > section > ol,
main > section > ul {
  list-style: none;
  margin: 1.3rem 0 1.4rem;
  padding: 0;
  background: var(--tenan-surface);
  border-top: 2px solid var(--tenan-hair3);
  border-bottom: 2px solid var(--tenan-hair3);
  box-shadow: var(--tenan-lay);
}

main > section > ol > li,
main > section > ul > li {
  display: grid;
  grid-template-columns: minmax(7rem, 10.5rem) minmax(0, 1fr);
  align-items: start;
  gap: .15rem 1.1rem;
  padding: .7rem .85rem .74rem;
  border-bottom: 1px solid var(--tenan-hair);
  font-size: .94rem;
  line-height: 1.5;
}

main > section > ol > li:last-child,
main > section > ul > li:last-child { border-bottom: 0; }

main > section > ol > li > b,
main > section > ul > li > b {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  font-weight: 600;
  font-size: .98rem;
  line-height: 1.24;
  color: var(--tenan-accent);
}

main > section > ol > li > b > small,
main > section > ul > li > b > small {
  font-size: .58rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--tenan-accent2);
}

/* a bare run of names — the districts on the round — is set as a ruled
   name column rather than as twenty-two full-height rows */

main > section > ul.tenan-names {
  columns: 12rem auto;
  column-gap: 1.6rem;
  padding: .5rem .85rem .6rem;
}

main > section > ul.tenan-names > li {
  display: block;
  break-inside: avoid;
  padding: .34rem 0 .32rem;
  border-bottom: 1px solid var(--tenan-hair);
  font-size: .9rem;
}

main > section > ul.tenan-names > li > b { font-size: .9rem; font-weight: 400; color: var(--tenan-ink); }

/* =================================================================
   08  the memorandum. Where the old composition put a note in a
       margin, this one lays a slip across the reading column: two
       navy rules, a boxed tag bitten into the top one, no border box.
   ================================================================= */

main aside {
  position: relative;
  margin: 1.35rem 0 1.45rem;
  padding: 1.15rem .1rem .25rem;
  border-top: 2px solid var(--tenan-hair3);
  border-bottom: 1px solid var(--tenan-hair2);
}

main aside > b {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-50%);
  padding: .2rem .55rem .16rem;
  background: var(--tenan-bg);
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--tenan-accent2);
}

main aside > b::before { content: "memo \00b7 "; color: rgba(18, 58, 122, .5); }

main aside > p { font-size: .95rem; line-height: 1.55; }
main aside > p:last-child { margin-bottom: .9rem; }

/* =================================================================
   09  the sheet. Every working on this site is a filled-in paper
       form: a ruled head that names it and stamps it a guide, then
       ruled rows, then the figure it was all for set in a box.
   ================================================================= */

.tenan-sheet {
  margin: 1.6rem 0;
  background: var(--tenan-surface);
  border: 1px solid var(--tenan-hair2);
  box-shadow: var(--tenan-lay);
}

.tenan-sheet > h3 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .8rem;
  margin: 0;
  padding: .6rem .9rem .55rem;
  background: var(--tenan-accent);
  border-bottom: 0;
  color: var(--tenan-surface);
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.tenan-sheet > h3 > span {
  flex: 0 0 auto;
  padding: .12rem .42rem .1rem;
  background: var(--tenan-lime);
  color: var(--tenan-deep);
  font-size: .6rem;
  letter-spacing: .16em;
}

/* the entries. one ruled row to a field, the label written on the left
   and the hand-filled cell on the right */

.tenan-sheet > form { margin: 0; padding: 0; }

.tenan-sheet > form > p {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(8.5rem, 14rem);
  align-items: center;
  gap: .5rem 1rem;
  margin: 0;
  padding: .5rem .9rem;
  border-bottom: 1px solid var(--tenan-hair);
  background: repeating-linear-gradient(180deg, transparent 0 100%);
}

.tenan-sheet > form > p:nth-child(even) { background: var(--tenan-card); }

.tenan-sheet label {
  display: contents;
  font-size: .92rem;
  line-height: 1.4;
}

.tenan-sheet input,
.tenan-sheet select {
  box-sizing: border-box;
  width: 100%;
  min-height: 2.35rem;
  padding: .28rem .55rem;
  border: 1px solid var(--tenan-hair2);
  border-radius: 0;
  background: var(--tenan-wash);
  color: var(--tenan-accent);
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

.tenan-sheet input:focus,
.tenan-sheet select:focus { background: var(--tenan-surface); }

/* the workings. each line is the arithmetic printed out, and the line
   the reader actually came for is boxed the way a total is boxed */

.tenan-sheet > dl { margin: 0; border-top: 2px solid var(--tenan-hair3); }

.tenan-sheet > dl > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(7.5rem, auto);
  align-items: baseline;
  gap: .2rem 1rem;
  padding: .46rem .9rem .48rem;
  border-bottom: 1px solid var(--tenan-hair);
}

.tenan-sheet > dl > div > dt {
  font-size: .86rem;
  line-height: 1.4;
  color: rgba(74, 64, 56, .88);
}

.tenan-sheet > dl > div > dd {
  margin: 0;
  text-align: right;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tenan-accent);
}

.tenan-sheet > dl > div.tenan-total {
  padding: .7rem .9rem .72rem;
  background: var(--tenan-wash);
  border-top: 1px solid var(--tenan-hair3);
  border-bottom: 2px solid var(--tenan-hair3);
}

.tenan-sheet > dl > div.tenan-total > dt { font-weight: 600; color: var(--tenan-ink); }
.tenan-sheet > dl > div.tenan-total > dd { font-size: 1.34rem; letter-spacing: -.01em; }

.tenan-sheet > p {
  margin: 0;
  padding: .62rem .9rem .68rem;
  background: var(--tenan-card);
  border-top: 1px solid var(--tenan-hair);
  font-size: .84rem;
  line-height: 1.5;
}

.tenan-sheet > p > strong { color: var(--tenan-accent); font-weight: 600; }

/* =================================================================
   10  the ledger table. A ruled head, hairline rules between the
       rows, a heavier rule to close it. Under a narrow window the
       whole thing breaks into one record card per row.
   ================================================================= */

main table {
  width: 100%;
  margin: 1.5rem 0;
  border-collapse: collapse;
  background: var(--tenan-surface);
  box-shadow: var(--tenan-lay);
  font-size: .92rem;
}

main caption {
  caption-side: top;
  padding: 0 0 .6rem;
  text-align: left;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--tenan-accent2);
}

main thead th {
  padding: .5rem .8rem .46rem;
  border-top: 2px solid var(--tenan-hair3);
  border-bottom: 1px solid var(--tenan-hair3);
  background: var(--tenan-wash);
  text-align: left;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--tenan-accent);
  vertical-align: bottom;
}

main tbody th,
main tbody td {
  padding: .52rem .8rem .54rem;
  border-bottom: 1px solid var(--tenan-hair);
  text-align: left;
  vertical-align: top;
  line-height: 1.44;
}

main tbody th {
  font-weight: 400;
  color: var(--tenan-ink);
}

main tbody td {
  font-variant-numeric: tabular-nums;
  color: var(--tenan-accent);
  font-weight: 600;
}

main tbody tr:last-child > * { border-bottom: 2px solid var(--tenan-hair3); }
main tbody tr:nth-child(even) { background: var(--tenan-card); }

/* the two-column record: who holds what, set as the ledger table the
   whole page is named after */

.tenan-holds { margin: 1.5rem 0; }

.tenan-holds table { margin: 0; }
.tenan-holds tbody th { width: 34%; font-weight: 600; color: var(--tenan-accent); }
.tenan-holds tbody td { font-weight: 400; color: var(--tenan-ink); font-variant-numeric: normal; }

/* =================================================================
   11  the twelve-month rule. The letting year used to be a ring; a
       ring is a decoration. A rule is how a year is actually read:
       twelve ticks along one line, the month under each tick, and
       the duty that falls in it printed underneath.
   ================================================================= */

.tenan-rule12 { margin: 1.6rem 0 1.2rem; }

.tenan-rule12 > div {
  width: min(100% - (2 * var(--tenan-step)), var(--tenan-broad));
  margin-inline: auto;
}

.tenan-rule12 svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.tenan-rule12 svg .tenan-base { fill: none; stroke: var(--tenan-hair3); stroke-width: 2; }
.tenan-rule12 svg .tenan-hit { fill: transparent; stroke: none; }
.tenan-rule12 svg .tenan-tick { stroke: var(--tenan-hair2); stroke-width: 2; }

.tenan-rule12 svg .tenan-bar {
  fill: var(--tenan-slate);
  stroke: var(--tenan-hair2);
  stroke-width: 1;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transition: fill 170ms linear;
}

.tenan-rule12 svg text {
  font-family: 'Fira Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .14em;
  fill: var(--tenan-accent2);
}

.tenan-rule12 svg .tenan-flag {
  fill: var(--tenan-accent2);
  stroke: none;
  opacity: 0;
  transition: opacity 170ms linear;
}

.tenan-rule12 svg > g[aria-current] .tenan-flag { opacity: 1; }

.tenan-rule12 svg > g[data-tenan-month] { cursor: pointer; }
.tenan-rule12 svg > g[data-tenan-month]:hover .tenan-bar { fill: var(--tenan-lime); }
.tenan-rule12 svg > g[data-tenan-month]:focus-visible { outline: 3px solid var(--tenan-accent2); outline-offset: 2px; }

.tenan-rule12 svg > g[aria-current] .tenan-bar { fill: var(--tenan-accent); stroke: var(--tenan-accent); }
.tenan-rule12 svg > g[aria-current] .tenan-tick { stroke: var(--tenan-accent); }
.tenan-rule12 svg > g[aria-current] text { fill: var(--tenan-accent); }

/* the ticks fill left to right, once, as the page settles */
@media (prefers-reduced-motion: no-preference) {
  .tenan-rule12 svg .tenan-bar { animation: tenan-fill 420ms cubic-bezier(.3, .8, .3, 1) both; }
  .tenan-rule12 svg > g:nth-of-type(1) .tenan-bar { animation-delay: 620ms; }
  .tenan-rule12 svg > g:nth-of-type(2) .tenan-bar { animation-delay: 680ms; }
  .tenan-rule12 svg > g:nth-of-type(3) .tenan-bar { animation-delay: 740ms; }
  .tenan-rule12 svg > g:nth-of-type(4) .tenan-bar { animation-delay: 800ms; }
  .tenan-rule12 svg > g:nth-of-type(5) .tenan-bar { animation-delay: 860ms; }
  .tenan-rule12 svg > g:nth-of-type(6) .tenan-bar { animation-delay: 920ms; }
  .tenan-rule12 svg > g:nth-of-type(7) .tenan-bar { animation-delay: 980ms; }
  .tenan-rule12 svg > g:nth-of-type(8) .tenan-bar { animation-delay: 1040ms; }
  .tenan-rule12 svg > g:nth-of-type(9) .tenan-bar { animation-delay: 1100ms; }
  .tenan-rule12 svg > g:nth-of-type(10) .tenan-bar { animation-delay: 1160ms; }
  .tenan-rule12 svg > g:nth-of-type(11) .tenan-bar { animation-delay: 1220ms; }
  .tenan-rule12 svg > g:nth-of-type(12) .tenan-bar { animation-delay: 1280ms; }
}

@keyframes tenan-fill {
  from { transform: scaleY(0); }
  to { transform: scaleY(1); }
}

/* the reading the rule produces, printed under it on a ruled slip */

.tenan-reading {
  width: min(100% - (2 * var(--tenan-step)), var(--tenan-broad));
  margin: 1rem auto 0;
  display: grid;
  grid-template-columns: minmax(7rem, 10rem) minmax(0, 1fr);
  gap: .2rem 1.1rem;
  padding: .72rem .85rem .78rem;
  background: var(--tenan-surface);
  border-top: 2px solid var(--tenan-hair3);
  border-bottom: 1px solid var(--tenan-hair2);
  box-shadow: var(--tenan-lay);
}

.tenan-reading > b {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--tenan-accent);
}

.tenan-reading > span { font-size: .93rem; line-height: 1.5; }

/* =================================================================
   12  the one inverted band. Deep navy, short, reversed-out type,
       and it happens once on the whole site.
   ================================================================= */

main > section.tenan-inverted {
  background: var(--tenan-deep);
  border-top: 3px solid var(--tenan-accent2);
  border-bottom: 3px solid var(--tenan-accent2);
  color: rgba(244, 241, 232, .9);
  margin: 1.2rem 0;
}

main > section.tenan-inverted h2 { color: var(--tenan-surface); }

main > section.tenan-inverted h2 > small {
  background: transparent;
  border-color: rgba(207, 224, 138, .6);
  color: var(--tenan-lime);
}

main > section.tenan-inverted a { color: var(--tenan-lime); }
main > section.tenan-inverted a:hover { color: var(--tenan-surface); }

main > section.tenan-inverted > div[role="region"] {
  width: min(100% - (2 * var(--tenan-step)), var(--tenan-broad));
  margin: 1.3rem auto .2rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

main > section.tenan-inverted > div[role="region"] > svg {
  display: block;
  width: 100%;
  min-width: 30rem;
  height: auto;
}

main > section.tenan-inverted svg line,
main > section.tenan-inverted svg path { stroke: rgba(198, 214, 234, .55); fill: none; stroke-width: 1.2; }

main > section.tenan-inverted svg circle { fill: var(--tenan-lime); }

main > section.tenan-inverted svg text {
  font-family: 'Fira Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  fill: rgba(244, 241, 232, .92);
  stroke: none;
}

main > section.tenan-inverted svg > g:first-child text {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  fill: var(--tenan-lime);
}

main > section.tenan-inverted svg > g:first-child line { stroke: rgba(198, 214, 234, .24); }

/* =================================================================
   13  the colophon. Everything the registry knows about the company
       is printed here, small, centred, under one hairline, the way
       a printer signs the last leaf of a book.
   ================================================================= */

body > footer {
  padding: 2.4rem 0 3.2rem;
  border-top: 1px solid var(--tenan-hair2);
  margin-top: 1.5rem;
}

body > footer > * { text-align: center; }

body > footer > p {
  margin: 0 0 .8rem;
  font-size: .8rem;
  line-height: 1.66;
  color: rgba(74, 64, 56, .88);
}

body > footer > p:first-child {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--tenan-accent);
}

body > footer > p:first-child > span {
  display: block;
  margin-top: .45rem;
  font-size: .74rem;
  font-weight: 400;
  letter-spacing: .05em;
  text-transform: none;
  color: rgba(74, 64, 56, .88);
}

body > footer > p.tenan-note {
  max-width: 32rem;
  margin-inline: auto;
  font-size: .76rem;
  font-style: italic;
  color: rgba(74, 64, 56, .74);
}

body > footer > p.tenan-leaf {
  margin-top: 1.1rem;
  padding-top: .9rem;
  border-top: 1px solid var(--tenan-hair);
  font-size: .7rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

body > footer > p.tenan-leaf > a { text-decoration: none; }
body > footer > p.tenan-leaf > a:hover { text-decoration: underline; }

/* =================================================================
   14  the drawings inside the figures. Four inks and no more: paper
       white for the thing itself, navy for the frame and the writing
       on it, olive for the thing the sentence beside it is about,
       lime for the one case that overrides everything else.
   ================================================================= */

main svg text {
  font-family: 'Fira Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
}

main > section > figure svg rect {
  fill: var(--tenan-surface);
  stroke: var(--tenan-accent);
  stroke-width: 1.4;
}

main > section > figure svg path {
  fill: none;
  stroke: var(--tenan-accent);
  stroke-width: 1.4;
}

/* ---- the inventory sheet ---- */

svg [data-tenan="sheet"] > rect { fill: var(--tenan-card); stroke-width: 2.5; }
svg [data-tenan="sheet-head"] > rect { fill: var(--tenan-accent); stroke: var(--tenan-accent); }

svg [data-tenan="sheet-head"] > text {
  fill: var(--tenan-surface);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .1em;
}

svg [data-tenan="row"] > rect { fill: var(--tenan-wash); stroke: var(--tenan-hair2); }
svg [data-tenan="row"] > text { font-weight: 600; font-size: 12.5px; fill: var(--tenan-accent); }
svg [data-tenan="written"] > rect { fill: var(--tenan-surface); stroke: var(--tenan-hair2); }
svg [data-tenan="written"] > rect + rect { fill: rgba(74, 64, 56, .34); stroke: none; }
svg [data-tenan="shots"] > rect { fill: var(--tenan-slate); stroke: var(--tenan-accent); }
svg [data-tenan="meters"] > rect { fill: var(--tenan-accent2); stroke: var(--tenan-accent2); stroke-width: 2; }

svg [data-tenan="meters"] > text {
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .07em;
  fill: var(--tenan-surface);
}

/* ---- the thirty squares ---- */

svg [data-tenan="clock-head"] > text {
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .1em;
  fill: var(--tenan-accent2);
}

svg [data-tenan="day"] > rect { fill: var(--tenan-surface); stroke: rgba(18, 58, 122, .38); }
svg [data-tenan="day"] > text { font-size: 13px; fill: rgba(74, 64, 56, .72); }
svg [data-tenan="day-first"] > rect { fill: var(--tenan-accent2); stroke: var(--tenan-accent2); stroke-width: 2; }
svg [data-tenan="day-first"] > text { fill: var(--tenan-surface); font-weight: 600; font-size: 14px; }
svg [data-tenan="day-last"] > rect { fill: var(--tenan-accent); stroke: var(--tenan-accent2); stroke-width: 3; }
svg [data-tenan="day-last"] > text { fill: var(--tenan-lime); font-weight: 600; font-size: 14px; }

/* ---- the route a fault takes ---- */

svg [data-tenan="flow-start"] > rect { fill: var(--tenan-accent); stroke: var(--tenan-accent); }

svg [data-tenan="flow-start"] > text {
  fill: var(--tenan-surface);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .08em;
}

svg [data-tenan="flow-step"] > rect { fill: var(--tenan-wash); stroke: var(--tenan-hair2); }

svg [data-tenan="flow-step"] > text {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .05em;
  fill: var(--tenan-accent);
}

svg [data-tenan="flow-arrow"] > path { stroke: var(--tenan-accent); stroke-width: 2.5; fill: none; }
svg [data-tenan="flow-arrow"] > path + path { fill: var(--tenan-accent); stroke: none; }
svg [data-tenan="flow-rule"] > path { stroke: rgba(18, 58, 122, .5); stroke-width: 2; fill: none; }

svg [data-tenan="flow-branch"] > rect { fill: var(--tenan-surface); stroke-width: 2; }
svg [data-tenan="flow-branch"] > text { font-size: 11.5px; fill: var(--tenan-ink); }

svg [data-tenan="flow-branch"] > text:first-of-type {
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .06em;
  fill: var(--tenan-accent);
}

svg [data-tenan="flow-urgent"] > rect { fill: var(--tenan-lime); stroke: var(--tenan-accent2); stroke-width: 2.5; }
svg [data-tenan="flow-urgent"] > text { font-size: 11.5px; fill: var(--tenan-ink); }

svg [data-tenan="flow-urgent"] > text:first-of-type {
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .04em;
  fill: var(--tenan-ink);
}

svg [data-tenan="flow-end"] > rect { fill: var(--tenan-accent2); stroke: var(--tenan-accent2); }
svg [data-tenan="flow-end"] > text { font-size: 11.5px; fill: var(--tenan-surface); }

svg [data-tenan="flow-end"] > text:first-of-type {
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: .06em;
  fill: var(--tenan-surface);
}

/* ---- the inspection year ---- */

svg [data-tenan="track"] > path { stroke: var(--tenan-accent); stroke-width: 2; fill: none; }

svg [data-tenan="track"] > text {
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .12em;
  fill: var(--tenan-accent);
}

svg [data-tenan="month"] > rect { fill: var(--tenan-surface); stroke: rgba(18, 58, 122, .45); }
svg [data-tenan="month"] > text { font-weight: 600; font-size: 15px; fill: rgba(74, 64, 56, .6); }
svg [data-tenan="month-round"] > rect { fill: var(--tenan-accent2); stroke: var(--tenan-accent2); stroke-width: 2; }
svg [data-tenan="month-round"] > text { font-weight: 600; font-size: 15px; fill: var(--tenan-surface); }
svg [data-tenan="bracket"] > rect { fill: var(--tenan-accent); stroke: none; }

svg [data-tenan="bracket"] > text {
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .12em;
  fill: var(--tenan-accent);
}

/* ---- the plan of the round ---- */

#tenan-plan svg > g:first-of-type > rect { fill: var(--tenan-accent2); stroke: var(--tenan-accent2); stroke-width: 2; }
#tenan-plan svg > g:first-of-type > text { fill: var(--tenan-surface); font-weight: 600; font-size: 12px; letter-spacing: .07em; }
#tenan-plan svg > g:first-of-type > text + text { font-weight: 400; font-size: 10.5px; letter-spacing: .04em; }

#tenan-plan svg > path {
  stroke: var(--tenan-accent);
  stroke-width: 2;
  stroke-dasharray: 7 5;
  fill: none;
}

#tenan-plan svg > g:nth-of-type(n+2) > rect { fill: var(--tenan-surface); stroke: rgba(18, 58, 122, .42); transition: fill 160ms linear; }
#tenan-plan svg > g:nth-of-type(n+2) > text { font-size: 12.5px; fill: var(--tenan-ink); }
#tenan-plan svg > g:nth-of-type(n+2):hover > rect { fill: var(--tenan-wash); }

@media (prefers-reduced-motion: no-preference) {
  #tenan-plan svg > path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: tenan-ink 1700ms 220ms cubic-bezier(.5, .02, .2, 1) forwards;
  }
}

/* =================================================================
   15  narrower than a sheet of A5: every ledger table gives up its
       columns and becomes one record card to a row, the column head
       printed against each cell rather than once at the top.
   ================================================================= */

@media (max-width: 46rem) {
  main table,
  main thead,
  main tbody,
  main tbody tr,
  main tbody th,
  main tbody td { display: block; width: auto; }

  main thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

  main tbody tr {
    margin: 0 0 .7rem;
    border: 1px solid var(--tenan-hair2);
    border-top-width: 2px;
    background: var(--tenan-surface);
  }

  main tbody tr:nth-child(even) { background: var(--tenan-surface); }
  main tbody tr:last-child > * { border-bottom: 0; }

  main tbody th[scope="row"] {
    padding: .5rem .75rem .48rem;
    border-bottom: 1px solid var(--tenan-hair2);
    background: var(--tenan-wash);
    font-weight: 600;
    color: var(--tenan-accent);
  }

  main tbody td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .42rem .75rem .44rem;
    border-bottom: 1px solid var(--tenan-hair);
  }

  main tbody td::before {
    content: attr(data-col);
    flex: 0 0 auto;
    font-size: .58rem;
    font-weight: 600;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--tenan-accent2);
  }

  main tbody td:last-child { border-bottom: 0; }

  .tenan-sheet > form > p { grid-template-columns: minmax(0, 1fr); }
  .tenan-sheet > dl > div { grid-template-columns: minmax(0, 1fr); }
  .tenan-sheet > dl > div > dd { text-align: left; }

  main > section > ol > li,
  main > section > ul > li { grid-template-columns: minmax(0, 1fr); gap: .3rem; }

  .tenan-reading { grid-template-columns: minmax(0, 1fr); gap: .3rem; }
}

/* =================================================================
   16  a wider window. The measure settles, the sheet runs two fields
       to a line, and the paper gets a little more air around it.
   ================================================================= */

@media (min-width: 44rem) {
  :root { --tenan-step: 1.55rem; }

  body { font-size: 1.06rem; }

  main > section { padding: 2.8rem 0 3rem; }

  h1 { font-size: 1.86rem; }
  h2 { font-size: 1.42rem; }

  .tenan-stand { font-size: 1.28rem; }

  .tenan-sheet > form { display: grid; grid-template-columns: 1fr 1fr; }
  .tenan-sheet > form > p:nth-child(odd) { border-right: 1px solid var(--tenan-hair); }
  .tenan-sheet > form > p:nth-child(even) { background: transparent; }
  .tenan-sheet > form > p:only-child { grid-column: 1 / -1; border-right: 0; }

}

@media (min-width: 64rem) {
  body { font-size: 1.08rem; }
  main > section { padding: 3.2rem 0 3.4rem; }
  h1 { font-size: 2.05rem; }
  h2 { font-size: 1.5rem; }
  .tenan-elevation { padding-top: 2.4rem; }
}

/* =================================================================
   17  when the reader has asked for stillness, everything that moves
       on this site simply arrives already finished.
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }

  .tenan-elevation svg path { stroke-dasharray: none; stroke-dashoffset: 0; }
  .tenan-rule12 svg .tenan-bar { transform: none; }
  #tenan-plan svg > path { stroke-dasharray: 7 5; stroke-dashoffset: 0; }
}