@property --tenan-turn { syntax: '<angle>'; inherits: true; initial-value: 0deg; }
@property --tenan-hub { syntax: '<color>'; inherits: false; initial-value: #ffffff; }

:root {
  --tenan-bg: #c6d6ea;
  --tenan-ink: #4a4038;
  --tenan-accent: #123a7a;
  --tenan-accent2: #6b7a2e;
  --tenan-surface: #ffffff;
  --tenan-rule: rgba(18, 58, 122, .22);
  --tenan-paper: #f2f5fa;
  --tenan-tint: #edf2f9;
  --tenan-lime: #cfe08a;
  --tenan-step: 1.15rem;
}

/* =================================================================
   01  the page body, in two forms: the letting document and the
       shorter office pages. Nothing is zeroed globally; every
       component sets the spacing it needs for itself.
   ================================================================= */

body:has(> header) {
  background: var(--tenan-bg);
  color: var(--tenan-ink);
  font-family: 'Fira Sans', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: .01em;
  line-height: 1.62;
  margin: 0;
  padding: 0 0 var(--tenan-step);
  overflow-wrap: break-word;
}

/* =================================================================
   02  the masthead band: the name, the office line, the terrace
       elevation, then the list of pages
   ================================================================= */

header:has(nav) {
  background: var(--tenan-accent);
  color: var(--tenan-surface);
  padding: calc(var(--tenan-step) * 1.4) var(--tenan-step) 0;
  border-bottom: 6px solid var(--tenan-accent2);
}

header:has(nav) > div {
  max-width: 62rem;
  margin: 0 auto;
}

header:has(nav) > div > h1 {
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(1.5rem, 5.4vw, 2.35rem);
  line-height: 1.14;
  margin: 0 0 .55rem;
}

header:has(nav) > div > p {
  margin: 0 0 .5rem;
  max-width: 46rem;
}

/* on the office pages the heading of record is the one inside the
   article, so the masthead name is set as the first paragraph and
   takes the weight the h1 takes on the main page */

header:has(nav) > div:not(:has(h1)) > p:first-child {
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(1.22rem, 4.4vw, 1.8rem);
  line-height: 1.16;
  margin: 0 0 .5rem;
}

header:has(nav) > div > p > small {
  font-size: .84rem;
  line-height: 1.55;
  display: block;
  color: rgba(255, 255, 255, .82);
}

header:has(nav) > div > p > a {
  color: var(--tenan-surface);
  text-decoration-color: var(--tenan-accent2);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: background-color 150ms ease-out, text-decoration-color 150ms ease-out;
}

header:has(nav) > div > p > a:hover {
  background: var(--tenan-accent2);
  text-decoration-color: var(--tenan-surface);
}

/* ---- the terrace elevation: five fronts, drawn once on load ---- */

header:has(nav) > figure {
  max-width: 62rem;
  margin: calc(var(--tenan-step) * .7) auto 0;
  padding: 0;
}

header:has(nav) > figure > svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

header:has(nav) > figure svg path {
  fill: none;
  stroke: var(--tenan-lime);
  stroke-width: 2;
  stroke-linecap: square;
  stroke-linejoin: miter;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: tenan-draw 780ms cubic-bezier(.3, .7, .4, 1) backwards;
}

header:has(nav) > figure svg > path {
  stroke: rgba(255, 255, 255, .5);
  stroke-width: 1.5;
}

header:has(nav) > figure svg > g:nth-child(2) path { animation-delay: 130ms; }
header:has(nav) > figure svg > g:nth-child(3) path { animation-delay: 310ms; }
header:has(nav) > figure svg > g:nth-child(4) path { animation-delay: 490ms; }
header:has(nav) > figure svg > g:nth-child(5) path { animation-delay: 670ms; }
header:has(nav) > figure svg > g:nth-child(6) path { animation-delay: 850ms; }

header:has(nav) > figure svg > g > path:nth-child(n+2) {
  stroke: var(--tenan-surface);
  stroke-width: 1.4;
}

header:has(nav) > figure > figcaption {
  max-width: 62rem;
  margin: .3rem auto 0;
  font-size: .8rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .78);
  animation: tenan-lift 520ms ease-out backwards;
  animation-delay: 1020ms;
}

@keyframes tenan-draw {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes tenan-lift {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}

/* ---- the pages list, sitting on the bottom rule of the band ---- */

header:has(nav) > nav {
  max-width: 62rem;
  margin: calc(var(--tenan-step) * .8) auto 0;
  border-top: 1px solid rgba(255, 255, 255, .3);
  padding-top: .5rem;
}

header:has(nav) > nav > ul {
  list-style: none;
  margin: 0;
  padding: 0 0 .1rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.3rem;
}

header:has(nav) > nav > ul > li > a {
  display: block;
  padding: .4rem 0 .5rem;
  color: rgba(255, 255, 255, .9);
  text-decoration: none;
  font-size: .95rem;
  border-bottom: 4px solid transparent;
  transition: color 150ms ease-out, border-bottom-color 150ms ease-out;
}

header:has(nav) > nav > ul > li > a:hover {
  color: var(--tenan-surface);
  border-bottom-color: rgba(207, 224, 138, .6);
}

header:has(nav) > nav > ul > li:has([aria-current]) > a {
  color: var(--tenan-lime);
  font-weight: 700;
  letter-spacing: -.01em;
  border-bottom-color: var(--tenan-lime);
}

/* =================================================================
   03  the document itself, with the stage rail beside it
   ================================================================= */

main:has(> section) {
  display: block;
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--tenan-step) var(--tenan-step) 0;
  counter-reset: tenan-sec;
}

main:has(> nav) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

main > nav {
  margin: 0 0 var(--tenan-step);
  background: var(--tenan-surface);
  border-top: 4px solid var(--tenan-accent);
  padding: .7rem .9rem .8rem;
}

main > nav > p {
  margin: 0 0 .45rem;
  font-weight: 700;
  font-size: .76rem;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--tenan-accent2);
}

main > nav > ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .4rem;
}

main > nav > ol > li > a {
  display: flex;
  align-items: baseline;
  gap: .4rem;
  padding: .3rem .5rem .3rem .45rem;
  font-size: .88rem;
  color: var(--tenan-ink);
  text-decoration: none;
  background: var(--tenan-paper);
  border-left: 4px solid var(--tenan-rule);
  transition: background-color 170ms ease-out, border-left-color 170ms ease-out, color 170ms ease-out;
}

main > nav > ol > li > a > b {
  font-weight: 700;
  font-size: .74rem;
  letter-spacing: .05em;
  color: var(--tenan-accent2);
  font-variant-numeric: tabular-nums;
}

main > nav > ol > li > a:hover {
  background: var(--tenan-tint);
  border-left-color: var(--tenan-accent2);
  color: var(--tenan-accent);
}

/* the stage the reader is level with, marked from :target alone.
   the first stage carries aria-current as the resting mark, and
   that resting mark steps aside once a stage has been targeted. */

body:has(#tenan-let-agreed:target) main > nav > ol > li > a[href="#tenan-let-agreed"],
body:has(#tenan-referencing:target) main > nav > ol > li > a[href="#tenan-referencing"],
body:has(#tenan-inventory:target) main > nav > ol > li > a[href="#tenan-inventory"],
body:has(#tenan-move-in:target) main > nav > ol > li > a[href="#tenan-move-in"],
body:has(#tenan-in-tenancy:target) main > nav > ol > li > a[href="#tenan-in-tenancy"],
body:has(#tenan-renewal:target) main > nav > ol > li > a[href="#tenan-renewal"] {
  background: var(--tenan-accent);
  border-left-color: var(--tenan-lime);
  color: var(--tenan-surface);
  font-weight: 700;
}

body:has(#tenan-let-agreed:target) main > nav > ol > li > a[href="#tenan-let-agreed"] > b,
body:has(#tenan-referencing:target) main > nav > ol > li > a[href="#tenan-referencing"] > b,
body:has(#tenan-inventory:target) main > nav > ol > li > a[href="#tenan-inventory"] > b,
body:has(#tenan-move-in:target) main > nav > ol > li > a[href="#tenan-move-in"] > b,
body:has(#tenan-in-tenancy:target) main > nav > ol > li > a[href="#tenan-in-tenancy"] > b,
body:has(#tenan-renewal:target) main > nav > ol > li > a[href="#tenan-renewal"] > b {
  color: var(--tenan-lime);
}

main > nav > ol > li:has([aria-current]) > a {
  border-left-color: var(--tenan-accent);
  background: var(--tenan-tint);
  font-weight: 700;
}

body:has(main > section:target) main > nav > ol > li:has([aria-current]) > a {
  border-left-color: var(--tenan-rule);
  background: var(--tenan-paper);
  font-weight: 400;
}

/* =================================================================
   04  the numbered sections
   ================================================================= */

main > section {
  background: var(--tenan-surface);
  border-left: 5px solid var(--tenan-accent2);
  padding: calc(var(--tenan-step) * .95) var(--tenan-step);
  margin: 0 0 var(--tenan-step);
  scroll-margin-top: 1rem;
  transition: border-left-color 220ms ease-out, box-shadow 220ms ease-out;
}

main > section:target {
  border-left-color: var(--tenan-accent);
  box-shadow: inset 0 3px 0 0 var(--tenan-lime);
}

main > section > h2 {
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(1.18rem, 4.2vw, 1.5rem);
  line-height: 1.2;
  color: var(--tenan-accent);
  margin: 0 0 .7rem;
}

main > section > h2::before {
  counter-increment: tenan-sec;
  content: counter(tenan-sec, decimal-leading-zero);
  display: inline-block;
  min-width: 2.4rem;
  font-size: .78em;
  letter-spacing: .06em;
  color: var(--tenan-accent2);
}

main > section > h3 {
  font-weight: 700;
  letter-spacing: -.01em;
  font-size: 1.02rem;
  margin: 1.15rem 0 .4rem;
  color: var(--tenan-ink);
}

main > section > p {
  margin: 0 0 .85rem;
  max-width: 44rem;
}

main > section > p:last-child {
  margin-bottom: 0;
}

main > section > p > strong {
  font-weight: 700;
  display: block;
  border-top: 2px solid var(--tenan-rule);
  padding-top: .7rem;
  color: var(--tenan-accent);
}

main > section > ul {
  margin: 0 0 .9rem;
  padding: 0;
  list-style: none;
  max-width: 44rem;
}

main > section > ul > li {
  padding: .35rem 0 .35rem 1rem;
  border-bottom: 1px dotted var(--tenan-rule);
  position: relative;
}

main > section > ul > li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .95rem;
  width: .45rem;
  height: .45rem;
  background: var(--tenan-accent2);
}

/* =================================================================
   05  the part-month working
   ================================================================= */

#tenan-apportion form {
  margin: .3rem 0 1rem;
  padding: .9rem 1rem .3rem;
  background: var(--tenan-paper);
  border-top: 3px solid var(--tenan-accent);
}

#tenan-apportion form > p {
  margin: 0 0 .8rem;
}

#tenan-apportion form label {
  display: block;
  font-weight: 700;
  font-size: .9rem;
  letter-spacing: .01em;
}

#tenan-apportion form input,
#tenan-apportion form select {
  display: block;
  width: 100%;
  max-width: 20rem;
  margin-top: .3rem;
  font: inherit;
  font-weight: 400;
  padding: .45rem .55rem;
  color: var(--tenan-ink);
  background: var(--tenan-surface);
  border: 1px solid var(--tenan-accent);
  border-radius: 0;
  transition: border-color 160ms ease-out, box-shadow 160ms ease-out;
}

#tenan-apportion form input:hover,
#tenan-apportion form select:hover {
  border-color: var(--tenan-accent2);
  box-shadow: inset 0 -3px 0 0 var(--tenan-tint);
}

#tenan-apportion dl,
#tenan-move-in dl {
  margin: 0 0 1rem;
  padding: 0;
  max-width: 44rem;
}

#tenan-apportion dl > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .2rem 1rem;
  padding: .45rem 0;
  border-bottom: 1px dotted var(--tenan-rule);
}

#tenan-apportion dl > div > dt {
  margin: 0;
  font-size: .92rem;
  flex: 1 1 14rem;
}

#tenan-apportion dl > div > dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tenan-accent);
}

#tenan-apportion dl > div:last-child {
  border-bottom: 3px solid var(--tenan-accent2);
}

#tenan-apportion dl > div:last-child > dd {
  color: var(--tenan-accent2);
}

/* =================================================================
   06  the thirty-day clock on a deposit. the same kind of
       arithmetic, set as cards rather than as a ledger, so the two
       workings on this page never read as one component used twice.
   ================================================================= */

#tenan-move-in form {
  margin: .4rem 0 1rem;
  padding: .9rem 1rem .35rem;
  background: var(--tenan-tint);
  border-left: 5px solid var(--tenan-accent);
}

#tenan-move-in form > p {
  margin: 0 0 .8rem;
}

#tenan-move-in form label {
  display: block;
  font-weight: 700;
  font-size: .88rem;
  letter-spacing: .02em;
}

#tenan-move-in form input {
  display: block;
  width: 100%;
  max-width: 16rem;
  margin-top: .3rem;
  font: inherit;
  padding: .45rem .5rem;
  color: var(--tenan-ink);
  background: var(--tenan-surface);
  border: 2px solid var(--tenan-accent);
  border-radius: 0;
  transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

#tenan-move-in form input:hover {
  border-color: var(--tenan-accent2);
  background: var(--tenan-paper);
}

#tenan-move-in dl > div {
  padding: .5rem .6rem;
  border-left: 3px solid var(--tenan-rule);
  margin: 0 0 .35rem;
  background: var(--tenan-paper);
  transition: border-left-color 200ms ease-out;
}

#tenan-move-in dl > div:hover {
  border-left-color: var(--tenan-accent2);
}

#tenan-move-in dl > div > dt {
  margin: 0;
  font-size: .84rem;
  letter-spacing: .02em;
  color: rgba(74, 64, 56, .92);
}

#tenan-move-in dl > div > dd {
  margin: .1rem 0 0;
  font-weight: 700;
  font-size: 1.04rem;
  font-variant-numeric: tabular-nums;
  color: var(--tenan-accent);
}

#tenan-move-in dl > div:nth-child(2) {
  border-left-color: var(--tenan-accent);
  background: var(--tenan-surface);
  box-shadow: inset 0 -2px 0 0 var(--tenan-lime);
}

#tenan-move-in dl > div:nth-child(2) > dd {
  color: var(--tenan-accent2);
  font-size: 1.12rem;
}

/* =================================================================
   07  the tenancy year wheel
   ================================================================= */

#tenan-wheel figure {
  position: relative;
  margin: 1rem auto 1.1rem;
  max-width: 25rem;
}

#tenan-wheel figure > svg {
  width: 100%;
  height: auto;
  overflow: visible;
}

.tenan-ring {
  transform: rotate(var(--tenan-turn));
  transform-box: view-box;
  transform-origin: 170px 170px;
  transition: --tenan-turn 520ms cubic-bezier(.22, .61, .36, 1);
}

.tenan-ring > g {
  cursor: pointer;
  transition: transform 170ms ease-out;
  animation: tenan-ink 300ms ease-out backwards;
}

.tenan-ring > g > path {
  fill: var(--tenan-surface);
  stroke: var(--tenan-accent);
  stroke-width: 1.5;
  transition: stroke-width 170ms ease-out, fill 200ms ease-out;
}

.tenan-ring > g:nth-child(even) > path {
  fill: var(--tenan-tint);
}

.tenan-ring > g > text {
  font-family: 'Fira Sans', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: .06em;
  fill: var(--tenan-ink);
  pointer-events: none;
}

.tenan-ring > g[aria-current] > path {
  fill: var(--tenan-accent);
  stroke: var(--tenan-accent2);
  stroke-width: 4;
}

.tenan-ring > g[aria-current] > text {
  fill: var(--tenan-surface);
}

.tenan-ring > g:hover > path,
.tenan-ring > g:focus-visible > path {
  stroke-width: 4;
}

@keyframes tenan-ink {
  from { opacity: 0; }
  to { opacity: 1; }
}

.tenan-ring > g:nth-child(1) { animation-delay: 1120ms; }
.tenan-ring > g:nth-child(2) { animation-delay: 1205ms; }
.tenan-ring > g:nth-child(3) { animation-delay: 1290ms; }
.tenan-ring > g:nth-child(4) { animation-delay: 1375ms; }
.tenan-ring > g:nth-child(5) { animation-delay: 1460ms; }
.tenan-ring > g:nth-child(6) { animation-delay: 1545ms; }
.tenan-ring > g:nth-child(7) { animation-delay: 1630ms; }
.tenan-ring > g:nth-child(8) { animation-delay: 1715ms; }
.tenan-ring > g:nth-child(9) { animation-delay: 1800ms; }
.tenan-ring > g:nth-child(10) { animation-delay: 1885ms; }
.tenan-ring > g:nth-child(11) { animation-delay: 1970ms; }
.tenan-ring > g:nth-child(12) { animation-delay: 2055ms; }

.tenan-ring > g:nth-child(1):hover, .tenan-ring > g:nth-child(1):focus-visible { transform: translate(0px, -2px); }
.tenan-ring > g:nth-child(2):hover, .tenan-ring > g:nth-child(2):focus-visible { transform: translate(1px, -1.73px); }
.tenan-ring > g:nth-child(3):hover, .tenan-ring > g:nth-child(3):focus-visible { transform: translate(1.73px, -1px); }
.tenan-ring > g:nth-child(4):hover, .tenan-ring > g:nth-child(4):focus-visible { transform: translate(2px, 0px); }
.tenan-ring > g:nth-child(5):hover, .tenan-ring > g:nth-child(5):focus-visible { transform: translate(1.73px, 1px); }
.tenan-ring > g:nth-child(6):hover, .tenan-ring > g:nth-child(6):focus-visible { transform: translate(1px, 1.73px); }
.tenan-ring > g:nth-child(7):hover, .tenan-ring > g:nth-child(7):focus-visible { transform: translate(0px, 2px); }
.tenan-ring > g:nth-child(8):hover, .tenan-ring > g:nth-child(8):focus-visible { transform: translate(-1px, 1.73px); }
.tenan-ring > g:nth-child(9):hover, .tenan-ring > g:nth-child(9):focus-visible { transform: translate(-1.73px, 1px); }
.tenan-ring > g:nth-child(10):hover, .tenan-ring > g:nth-child(10):focus-visible { transform: translate(-2px, 0px); }
.tenan-ring > g:nth-child(11):hover, .tenan-ring > g:nth-child(11):focus-visible { transform: translate(-1.73px, -1px); }
.tenan-ring > g:nth-child(12):hover, .tenan-ring > g:nth-child(12):focus-visible { transform: translate(-1px, -1.73px); }

.tenan-hub {
  background: var(--tenan-hub);
  border: 2px solid var(--tenan-accent);
  border-left-width: 6px;
  padding: .8rem .9rem;
  margin: 0 0 .6rem;
  transition: --tenan-hub 520ms cubic-bezier(.22, .61, .36, 1);
}

.tenan-hub > b {
  display: block;
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 1.05rem;
  color: var(--tenan-accent);
}

.tenan-hub > span {
  display: block;
  font-size: .92rem;
  line-height: 1.5;
}

#tenan-wheel figure > figcaption {
  font-size: .85rem;
  line-height: 1.5;
  color: rgba(74, 64, 56, .85);
  border-top: 1px solid var(--tenan-rule);
  padding-top: .5rem;
}

/* =================================================================
   08  four clocks on one rule, and the table printed under it
   ================================================================= */

#tenan-rule > div {
  overflow-x: auto;
  margin: .6rem 0 .4rem;
  padding: .4rem 0 .5rem;
  background: var(--tenan-paper);
  border-top: 3px solid var(--tenan-accent);
  transition: box-shadow 200ms ease-out;
}

#tenan-rule > div:focus-visible {
  box-shadow: inset 0 0 0 3px var(--tenan-accent2);
}

#tenan-rule > div > svg {
  width: 41rem;
  min-width: 41rem;
  height: auto;
}

#tenan-rule svg line {
  stroke: var(--tenan-accent);
  stroke-width: 1.2;
}

#tenan-rule svg > g:first-child line {
  stroke: rgba(18, 58, 122, .32);
  stroke-dasharray: 2 3;
}

#tenan-rule svg > path {
  stroke: var(--tenan-accent);
  stroke-width: 2.5;
  fill: none;
}

#tenan-rule svg circle {
  fill: var(--tenan-accent2);
  stroke: var(--tenan-surface);
  stroke-width: 1.5;
}

#tenan-rule svg text {
  font-family: 'Fira Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  fill: var(--tenan-ink);
  letter-spacing: .01em;
}

#tenan-rule svg > g:first-child text {
  font-weight: 700;
  font-size: 12px;
  fill: rgba(18, 58, 122, .78);
  letter-spacing: .05em;
}

#tenan-rule > p {
  font-size: 1rem;
}

main > section table {
  width: 100%;
  border-collapse: collapse;
  margin: .7rem 0 1rem;
  font-size: .92rem;
}

main > section table caption {
  text-align: left;
  font-size: .82rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tenan-accent2);
  padding: 0 0 .4rem;
}

main > section table th,
main > section table td {
  text-align: left;
  padding: .42rem .5rem .42rem 0;
  border-bottom: 1px solid var(--tenan-rule);
  vertical-align: top;
}

main > section table thead th {
  border-bottom: 3px solid var(--tenan-accent);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tenan-accent);
}

main > section table tbody tr {
  transition: background-color 160ms ease-out;
}

main > section table tbody tr:hover {
  background: var(--tenan-tint);
}

main > section table tbody th {
  font-weight: 400;
}

main > section table td:last-child {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  padding-right: 0;
  color: var(--tenan-accent);
}

/* =================================================================
   09  the office pages: compliance, schedule, districts, legal
   ================================================================= */

main:has(> article) {
  display: block;
  max-width: 52rem;
  margin: 0 auto;
  padding: var(--tenan-step) var(--tenan-step) 0;
}

main > article {
  background: var(--tenan-surface);
  border-top: 6px solid var(--tenan-accent2);
  padding: calc(var(--tenan-step) * 1.1) var(--tenan-step);
  margin: 0 0 var(--tenan-step);
}

main > article > h1 {
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: clamp(1.35rem, 5vw, 2rem);
  line-height: 1.16;
  color: var(--tenan-accent);
  margin: 0 0 .9rem;
}

main > article > p {
  margin: 0 0 .9rem;
  max-width: 42rem;
}

main > article > section {
  margin: 1.7rem 0 0;
  scroll-margin-top: 1rem;
}

main > article > section > h2 {
  font-weight: 700;
  letter-spacing: -.02em;
  font-size: 1.12rem;
  line-height: 1.25;
  color: var(--tenan-accent);
  border-left: 5px solid var(--tenan-accent2);
  padding-left: .6rem;
  margin: 0 0 .5rem;
}

main > article > section > h3 {
  font-weight: 700;
  font-size: .98rem;
  letter-spacing: -.01em;
  margin: 1rem 0 .35rem;
}

main > article > section > p {
  margin: 0 0 .8rem;
  max-width: 42rem;
}

main > article > section > p:last-child {
  margin-bottom: 0;
}

main > article > section > ul {
  list-style: none;
  margin: 0 0 .9rem;
  padding: 0;
  max-width: 42rem;
}

main > article > section > ul > li {
  padding: .4rem 0 .4rem 1.15rem;
  border-bottom: 1px dotted var(--tenan-rule);
  position: relative;
}

main > article > section > ul > li::before {
  content: '';
  position: absolute;
  left: .15rem;
  top: 1.05rem;
  width: .55rem;
  height: 2px;
  background: var(--tenan-accent2);
}

main > article > section > ul > li > b {
  font-weight: 700;
  color: var(--tenan-accent);
}

main > article table {
  width: 100%;
  border-collapse: collapse;
  margin: .6rem 0 1rem;
  font-size: .82rem;
}

main > article table caption {
  text-align: left;
  font-size: .8rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--tenan-accent2);
  padding: 0 0 .4rem;
}

main > article table th,
main > article table td {
  text-align: left;
  padding: .4rem .3rem .4rem 0;
  border-bottom: 1px solid var(--tenan-rule);
  vertical-align: top;
}

main > article table thead th {
  border-bottom: 3px solid var(--tenan-accent);
  font-size: .78rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--tenan-accent);
}

main > article table tbody tr {
  transition: background-color 160ms ease-out;
}

main > article table tbody tr:hover {
  background: var(--tenan-paper);
}

main > article table tbody th {
  font-weight: 400;
  width: 44%;
}

main > article table tbody td {
  font-weight: 700;
  color: var(--tenan-accent);
}

/* ---- the certificate reckoner on the compliance page ---- */

main > article form {
  margin: .5rem 0 .9rem;
  padding: .85rem .95rem .4rem;
  background: var(--tenan-paper);
  border-left: 5px solid var(--tenan-accent2);
}

main > article form label {
  display: block;
  font-weight: 700;
  font-size: .88rem;
}

main > article form input {
  display: block;
  width: 100%;
  max-width: 16rem;
  margin: .3rem 0 .8rem;
  font: inherit;
  padding: .45rem .5rem;
  color: var(--tenan-ink);
  background: var(--tenan-surface);
  border: 2px solid var(--tenan-accent);
  border-radius: 0;
  transition: border-color 160ms ease-out;
}

main > article form input:hover {
  border-color: var(--tenan-accent2);
}

main > article dl {
  margin: 0 0 .9rem;
  padding: 0;
  max-width: 42rem;
}

main > article dl > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .2rem 1rem;
  padding: .42rem 0;
  border-bottom: 1px dotted var(--tenan-rule);
}

main > article dl > div > dt {
  margin: 0;
  font-size: .9rem;
  flex: 1 1 13rem;
}

main > article dl > div > dd {
  margin: 0;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--tenan-accent);
}

main > article dl > div:last-child {
  border-bottom: 3px solid var(--tenan-accent2);
}

/* ---- the district schematic ---- */

main > article > section > figure {
  margin: .7rem 0 1rem;
  padding: 0;
}

main > article > section > figure > div {
  overflow-x: auto;
  background: var(--tenan-tint);
  border-top: 3px solid var(--tenan-accent);
  padding: .5rem 0;
}

main > article > section > figure svg {
  width: 34rem;
  min-width: 34rem;
  height: auto;
}

main > article > section > figure svg rect {
  fill: var(--tenan-surface);
  stroke: var(--tenan-accent);
  stroke-width: 1.5;
  transition: fill 200ms ease-out;
}

main > article > section > figure svg > g:hover rect {
  fill: var(--tenan-lime);
}

main > article > section > figure svg text {
  font-family: 'Fira Sans', 'Segoe UI', Arial, sans-serif;
  font-size: 12px;
  font-weight: 700;
  fill: var(--tenan-ink);
  letter-spacing: .02em;
  pointer-events: none;
}

main > article > section > figure svg > g:first-of-type rect {
  fill: var(--tenan-accent);
  stroke: var(--tenan-accent2);
  stroke-width: 3;
}

main > article > section > figure svg > g:first-of-type text {
  fill: var(--tenan-surface);
}

main > article > section > figure svg > path {
  fill: none;
  stroke: rgba(18, 58, 122, .45);
  stroke-width: 1.5;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  animation: tenan-draw 900ms ease-out backwards;
  animation-delay: 160ms;
}

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

/* ---- the closing line on an office page ---- */

main > article > p:last-child {
  margin: 1.5rem 0 0;
  border-top: 2px solid var(--tenan-rule);
  padding-top: .8rem;
  font-size: .92rem;
}

main > article a,
main > section a {
  color: var(--tenan-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 150ms ease-out, background-color 150ms ease-out;
}

main > article a:hover,
main > section a:hover {
  color: var(--tenan-accent2);
  background: var(--tenan-tint);
}

/* =================================================================
   10  the foot of every page
   ================================================================= */

body > footer {
  max-width: 62rem;
  margin: 0 auto;
  padding: var(--tenan-step);
  border-top: 6px solid var(--tenan-accent);
  font-size: .9rem;
  line-height: 1.6;
}

body > footer > p {
  margin: 0 0 .6rem;
}

body > footer > p:first-child {
  font-weight: 700;
  letter-spacing: -.01em;
}

body > footer > p:last-child {
  margin-bottom: 0;
}

body > footer a {
  color: var(--tenan-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  transition: color 150ms ease-out;
}

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

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

/* =================================================================
   11  wider screens: the rail moves out to the left margin and
       stays level with the reader
   ================================================================= */

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

  header:has(nav) > nav > ul { gap: 0 1.8rem; }

  main > section { padding: calc(var(--tenan-step) * 1.1) calc(var(--tenan-step) * 1.3); }

  #tenan-apportion form > p { display: inline-block; margin-right: 1.6rem; vertical-align: top; }

  #tenan-move-in form > p { display: inline-block; margin-right: 1.4rem; vertical-align: top; }

  #tenan-move-in dl { display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; }

  #tenan-move-in dl > div { margin: 0; }

  #tenan-move-in dl > div:nth-child(2) { grid-column: 1 / -1; }

  .tenan-hub {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 47%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border-left-width: 2px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    padding: 0 8%;
    margin: 0;
  }

  .tenan-hub > b { font-size: .98rem; margin-bottom: .25rem; }
  .tenan-hub > span { font-size: .74rem; line-height: 1.35; }

  main > article { padding: calc(var(--tenan-step) * 1.2) calc(var(--tenan-step) * 1.4); }

  main > article table { font-size: .9rem; }

  main > article table th,
  main > article table td { padding: .42rem .5rem .42rem 0; }
}

@media (min-width: 64rem) {
  main:has(> nav) {
    grid-template-columns: 13.5rem minmax(0, 1fr);
    column-gap: var(--tenan-step);
  }

  main > nav {
    grid-column: 1;
    grid-row: 1 / span 14;
    position: sticky;
    top: var(--tenan-step);
    margin: 0;
  }

  main > nav > ol { display: block; }

  main > nav > ol > li > a {
    padding: .45rem .5rem .45rem .55rem;
    margin: 0 0 .25rem;
  }

  main > section { grid-column: 2; }

  main > section > p { font-size: 1.02rem; }

  .tenan-hub > span { font-size: .82rem; line-height: 1.45; }

  #tenan-rule > div > svg { width: 100%; min-width: 0; }
}

/* =================================================================
   12  the whole set-piece, switched off where motion is unwanted
   ================================================================= */

@media (prefers-reduced-motion: reduce) {
  header:has(nav) > figure svg path { animation: none; stroke-dashoffset: 0; }
  main > article > section > figure svg > path { animation: none; stroke-dashoffset: 0; }
  .tenan-ring { transition: none; }
  .tenan-ring > g { transition: none; animation: none; }
  .tenan-ring > g > path { transition: none; }
  .tenan-ring > g:hover, .tenan-ring > g:focus-visible { transform: none; }
  .tenan-hub { transition: none; }
  main > nav > ol > li > a { transition: none; }
  main > section { transition: none; }
  main > section table tbody tr { transition: none; }
  main > article table tbody tr { transition: none; }
  header:has(nav) > nav > ul > li > a { transition: none; }
  main > article > section > figure svg rect { transition: none; }
  header:has(nav) > figure > figcaption { animation: none; }
}

svg { display: block; }