/* Brickwright — one stylesheet, mobile first, rebuilt 14 Sep 2026.

   Black ground, chalk text, the logo's gold, and one course of stretcher bond doing all the
   decorating. The reasoning, the tokens and what was deliberately removed are in
   website/DESIGN-NOTES.md. Two rules worth keeping in mind before editing:

   1. Gold means something. It is on the primary action, the wordmark and the course motif, and
      nowhere else. If a new element needs a border, that border is --mortar, not gold.
   2. Spacing is in multiples of 8, standing in for the bricklayer's gauge. A course of brick is
      65mm plus a 10mm joint, four courses to 300mm: 3 courses = 24px, 6 = 48px, 12 = 96px.

   Both typefaces are self-hosted, so nothing is fetched from a font CDN and the page looks the
   same with the phone in the van with one bar of signal. */

@font-face {
  font-family: 'Oswald';
  src: url('fonts/oswald-var.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Source Serif 4';
  src: url('fonts/source-serif-4-var.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

/* The page is a dark ground, so say so: without this the browser paints light form controls and a
   light scrollbar into the middle of it. */
:root {
  color-scheme: dark;
  --display: 'Oswald', 'Helvetica Neue Condensed', 'Arial Narrow', Arial, sans-serif;
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --ground: #100f0e;        /* the page: warm black, not the cool default */
  --panel: #17150f;         /* forms, review cards */
  --band: #151312;          /* the alternating band, barely lifted */
  --mortar: #2a2724;        /* every hairline */
  --ink: #f2efe9;           /* headings */
  --body: #d5cfc6;          /* body copy */
  --muted: #9a948a;         /* small print */
  --gold: #a98c57;          /* the logo gold: structure and the one action */
  --gold-lit: #d8bd82;      /* the same gold, light enough to read as text */
  --brick: #7d4436;         /* clay red, only inside the course motif */
  --radius: 2px;
  --max: 1040px;
  --measure: 62ch;

  /* A course of stretcher bond at true geometry: 215mm brick, 65mm high, 10mm joint, each course
     offset half a brick from the one below. Three courses for the rule under the header, two for
     the top of the call band. Bricks vary a shade or two, because a wall of one colour is
     wallpaper. Scaled so one course is 16px. */
  --bond3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='225' viewBox='0 0 450 225'%3E%3Crect width='450' height='225' fill='%233a352f'/%3E%3Crect x='-225' y='0' width='215' height='65' fill='%237d4436'/%3E%3Crect x='0' y='0' width='215' height='65' fill='%237a4133'/%3E%3Crect x='225' y='0' width='215' height='65' fill='%237d4436'/%3E%3Crect x='-112.5' y='75' width='215' height='65' fill='%2380483a'/%3E%3Crect x='112.5' y='75' width='215' height='65' fill='%2378402f'/%3E%3Crect x='337.5' y='75' width='215' height='65' fill='%2380483a'/%3E%3Crect x='-225' y='150' width='215' height='65' fill='%237b4234'/%3E%3Crect x='0' y='150' width='215' height='65' fill='%237e4536'/%3E%3Crect x='225' y='150' width='215' height='65' fill='%237b4234'/%3E%3Crect x='-225' y='0' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3Crect x='0' y='0' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3Crect x='225' y='0' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3Crect x='-112.5' y='75' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3Crect x='112.5' y='75' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3Crect x='337.5' y='75' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3Crect x='-225' y='150' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3Crect x='0' y='150' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3Crect x='225' y='150' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3C/svg%3E");
  --bond2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='450' height='150' viewBox='0 0 450 150'%3E%3Crect width='450' height='150' fill='%233a352f'/%3E%3Crect x='-225' y='0' width='215' height='65' fill='%237d4436'/%3E%3Crect x='0' y='0' width='215' height='65' fill='%237a4133'/%3E%3Crect x='225' y='0' width='215' height='65' fill='%237d4436'/%3E%3Crect x='-112.5' y='75' width='215' height='65' fill='%2380483a'/%3E%3Crect x='112.5' y='75' width='215' height='65' fill='%2378402f'/%3E%3Crect x='337.5' y='75' width='215' height='65' fill='%2380483a'/%3E%3Crect x='-225' y='0' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3Crect x='0' y='0' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3Crect x='225' y='0' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3Crect x='-112.5' y='75' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3Crect x='112.5' y='75' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3Crect x='337.5' y='75' width='215' height='3' fill='%23a05f4a' opacity='.45'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* A finger tap should not wait to see if a second one is coming, and the grey flash that comes
     with it is not wanted: the button already answers back. */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  /* The bar along the bottom is fixed, so anything scrolled to by keyboard or by a #anchor has to
     clear it. */
  scroll-padding-bottom: 88px;
  scroll-padding-top: 24px;
}

body {
  margin: 0;
  background: var(--ground);
  color: var(--body);
  font: 400 17px/1.7 var(--serif);
  padding-bottom: calc(72px + env(safe-area-inset-bottom)); /* room for the call bar */
}

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 20px; }

h1, h2, h3 {
  margin: 0 0 .55em;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: .005em;
}
h1 { font-size: clamp(2rem, 1.35rem + 2.6vw, 2.9rem); }
h2 { font-size: clamp(1.45rem, 1.1rem + 1.3vw, 1.95rem); }
h3 { font-size: 1.22rem; text-wrap: balance; }

p { margin: 0 0 1.1em; max-width: var(--measure); }
ul, ol { max-width: var(--measure); }
li + li { margin-top: .35em; }
a { color: var(--gold-lit); text-underline-offset: 3px; }
a:hover { color: var(--ink); }
strong { color: var(--ink); }

.small, .foot-small { font-size: .88rem; color: var(--muted); }
.big { font-size: 1.1rem; }

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

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 20; padding: 10px 14px;
  background: var(--gold); color: #14120c; font-family: var(--display); font-weight: 600; }

/* header -------------------------------------------------------------------
   The wordmark, the number, the nav, and the one piece of decoration on the site: three courses
   of brick under the nav, which lay themselves in from the left as the page opens. */

.site-head { background: var(--ground); }
.head-in { display: flex; align-items: center; justify-content: space-between;
  gap: 14px; padding: 16px 0 14px; }
.brand { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.brand img { display: block; }
.brand-name { font-family: var(--display); font-weight: 700; font-size: 1.42rem;
  color: var(--gold); letter-spacing: .07em; text-transform: uppercase; }
.brand:hover .brand-name, .brand:focus-visible .brand-name { color: var(--gold-lit); }

.call-btn {
  display: flex; flex-direction: column; align-items: flex-end; justify-content: center;
  min-height: 48px; padding: 8px 16px; border-radius: var(--radius);
  background: var(--gold); color: #14120c; text-decoration: none;
}
.call-btn .call-label { font-size: .78rem; letter-spacing: .01em; opacity: .8; }
.call-btn .call-num { font-family: var(--display); font-weight: 700; font-size: 1.08rem; }
/* the header button is the loudest thing on the page; it should answer the cursor */
.call-btn:hover, .call-btn:focus-visible { background: var(--gold-lit); }

.nav ul { display: flex; flex-wrap: wrap; gap: 2px 22px; list-style: none; margin: 0;
  padding: 12px 0; max-width: none; }
.nav a { display: inline-block; padding: 4px 0; color: #d5d0c7; font-size: 1rem;
  touch-action: manipulation;
  text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav a.on { color: var(--ink); box-shadow: inset 0 -2px 0 var(--gold); }

.nav:after {
  content: "";
  display: block;
  height: 48px;
  background: var(--bond3) repeat-x left top;
  background-size: 96px 48px;
  box-shadow: inset 0 2px 4px rgba(0,0,0,.55), inset 0 -2px 4px rgba(0,0,0,.45);
  transform-origin: left center;
  animation: lay-course 560ms cubic-bezier(.22,.68,.24,1) both;
}
@keyframes lay-course { from { transform: scaleX(.05); } to { transform: scaleX(1); } }

/* hero --------------------------------------------------------------------- */

.hero { padding: 40px 0 44px; border-bottom: 1px solid var(--mortar); }
.hero-in { display: block; }
.hero-copy h1 { margin-bottom: .4em; max-width: 26ch; text-wrap: balance; }
/* The hero subline grew on 15 Sep and pushed the call buttons below the fold on phone AND
   desktop. Flex order puts them back: wall, buttons, then the copy. DOM order (and so
   screen-reader order) is unchanged — heading, words, action, trust. */
.hero-copy { display: flex; flex-direction: column; }
.hero-copy .hero-btns { order: 1; }
.hero-copy .lead { order: 2; }
.hero-copy .trust { order: 3; margin-top: 20px; }
h2 { text-wrap: balance; }
.lead { font-size: 1.09rem; color: var(--body); }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 16px; }

/* the rate board — the right-hand side of the hero until a photograph takes it.
   Three published rates, set as a schedule so the figures can be read at a glance. The 2px gold
   top edge is the only mark on it, because these three numbers are the reason to ring. */

.rate-board { margin-top: 32px; padding: 24px 22px 20px; background: var(--panel);
  border-top: 2px solid var(--gold); }
.rate-board h2 { margin-bottom: .8em; font-size: 1.12rem; font-weight: 600; color: var(--gold-lit); }
.rates { list-style: none; margin: 0; padding: 0; max-width: none; }
.rates li { display: grid; grid-template-columns: 1fr auto; gap: 2px 14px;
  padding: 12px 0; border-top: 1px solid var(--mortar); }
.rates li:first-child { border-top: 0; padding-top: 0; }
.rates li + li { margin-top: 0; }
.rb-what { color: var(--ink); font-size: .95rem; }
.rb-fig { color: var(--ink); font-family: var(--display); font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 1.55rem; line-height: 1; letter-spacing: .01em; }
.rb-note { grid-column: 1 / -1; color: var(--muted); font-size: .92rem; }
.rate-board .small { margin: 14px 0 0; max-width: none; }

/* the prices page, as a schedule: name and figure on one line, the sentence under it --------- */

.rate-sched { max-width: 46rem; }
.rate-row { padding: 22px 0 24px; border-top: 1px solid var(--mortar); }
.rate-row:first-child { border-top: 0; padding-top: 0; }
.rate-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 20px; align-items: baseline; }
.rr-what { margin: 0; font-size: 1.24rem; }
.rr-fig { color: var(--gold-lit); font-family: var(--display); font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-size: 1.24rem; white-space: nowrap; }
.rr-note { grid-column: 1 / -1; margin: 6px 0 0; max-width: 58ch; }
.rate-tail { max-width: 58ch; margin: 26px 0 0; padding-top: 22px;
  border-top: 1px solid var(--mortar); }

.btn {
  touch-action: manipulation;
  display: inline-block; min-height: 48px; padding: 14px 22px;
  border: 1px solid var(--gold); border-radius: var(--radius);
  background: var(--gold); color: #14120c;
  font-family: var(--display); font-weight: 600; font-size: 1.02rem; letter-spacing: .02em;
  text-decoration: none; line-height: 1.2;
}
.btn:hover { background: var(--gold-lit); color: #14120c; }
.btn.ghost { background: transparent; color: var(--gold-lit); border-color: var(--gold); }
.btn.ghost:hover { background: rgba(169,140,87,.14); color: var(--ink); }

.trust { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 8px; }
.trust li { position: relative; padding-left: 24px; font-size: .97rem; color: var(--muted); }
.trust li:before { content: ""; position: absolute; left: 0; top: .62em;
  width: 13px; height: 1px; background: var(--gold); }

.hero-photo { margin-top: 24px; }

/* bands, page heads -------------------------------------------------------- */

.band { padding: 48px 0; border-bottom: 1px solid var(--mortar); }
.band.alt { background: var(--band); }
.band:last-of-type { border-bottom: 0; }
.page-head { padding: 36px 0 30px; border-bottom: 1px solid var(--mortar); }
.page-head h1 { margin-bottom: .35em; max-width: 26ch; text-wrap: balance; }

.ticks { list-style: none; margin: 0 0 1.2em; padding: 0; }
.ticks li { position: relative; padding-left: 26px; margin-bottom: .8em; }
.ticks li + li { margin-top: 0; }
.ticks li:before { content: ""; position: absolute; left: 0; top: .72em;
  width: 14px; height: 1px; background: var(--gold); }

/* services, as a schedule rather than six cards ----------------------------
   One row per service, divided by a mortar hairline: the name in Oswald on the left, the line
   under it in the serif. Reads like a schedule of works, which is what it is. No boxes, because a
   box around every item says nothing about which item matters. */

.cards { display: block; }
.card {
  display: block; padding: 20px 0 22px;
  border-top: 1px solid var(--mortar);
  background: none; border-radius: 0; text-decoration: none;
}
.card:first-child { border-top: 0; }
.card h3 { margin: 0 0 .3em; color: var(--ink); }
.card p { margin: 0; color: var(--body); font-size: 1rem; }
.card:hover h3, .card:focus-visible h3 { color: var(--gold-lit); }
.card-more { display: none; }   /* the row is the link; "More" said nothing */

.areas { color: var(--ink); font-weight: 600; }

/* a sequence, so numbers are information: set on a plumb line, not in a badge */

.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; position: relative; }
.steps li { counter-increment: s; position: relative; padding-left: 46px; margin-bottom: 24px; }
.steps li:last-child { margin-bottom: 0; }
.steps li:before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: -.1em;
  font-family: var(--display); font-weight: 500; font-size: 1.15rem; color: var(--gold-lit);
}
.steps li:after {   /* the plumb line joining them */
  content: ""; position: absolute; left: 11px; top: 1.5em; bottom: -24px;
  width: 1px; background: var(--mortar);
}
.steps li:last-child:after { display: none; }

.cta { background: var(--panel); }
.cta:before {
  content: ""; display: block; height: 32px;
  background: var(--bond2) repeat-x left bottom; background-size: 96px 32px;
}
.cta h2, .cta h1 { color: var(--ink); }
.cta-text { font-size: 1.1rem; color: var(--body); }
.cta .btn { background: var(--gold); border-color: var(--gold); color: #14120c; }
.cta .btn.ghost { background: transparent; color: var(--gold-lit); border-color: var(--gold); }

/* figures and gallery ------------------------------------------------------ */

figure { margin: 0 0 12px; }
figure img { display: block; width: 100%; height: auto; border-radius: 0;
  border: 1px solid var(--mortar); }
figcaption { margin-top: 10px; font-size: .87rem; color: var(--muted); }
.gallery { display: grid; gap: 24px; }

/* reviews — nothing renders until content.py REVIEWS has a review in it ---- */

.reviews { display: grid; gap: 20px; }
.review { margin: 0; padding: 22px 24px; background: var(--panel);
  border-left: 2px solid var(--gold); border-radius: 0; }
.review p { margin-bottom: .8em; color: var(--body); max-width: 54ch; }
.review p:before { content: "\201C"; }
.review p:after { content: "\201D"; }
.review footer { font-family: var(--display); font-size: .9rem; color: var(--muted); }

.missing { padding: 48px 16px; border: 1px solid var(--mortar); color: var(--gold-lit);
  text-align: center; font-family: var(--display); font-weight: 600; }

/* forms -------------------------------------------------------------------- */

.two-col { display: block; }
.form-wrap { margin-top: 32px; }
.quote-form p { margin-bottom: 16px; }
/* the label lights up with the field, so the eye stays with the pair */
.quote-form p:focus-within label { color: var(--gold-lit); }
.quote-form label { display: block; margin-bottom: 6px; color: var(--ink); font-weight: 600; }
.quote-form input, .quote-form textarea {
  width: 100%; padding: 13px; border: 1px solid var(--mortar); border-radius: var(--radius);
  background: var(--panel); color: var(--ink); font: inherit;
}
.quote-form textarea { min-height: 140px; }
.quote-form input::placeholder, .quote-form textarea::placeholder { color: var(--muted); }
.quote-form input[type=file] { padding: 10px; }
.quote-form input:focus, .quote-form textarea:focus { outline: 2px solid var(--gold-lit);
  outline-offset: 1px; border-color: var(--gold); }
.quote-form button { font: inherit; cursor: pointer; }
.hp { position: absolute; left: -9999px; }
.contact-direct { max-width: var(--measure); }

/* footer -------------------------------------------------------------------- */

.site-foot { padding: 40px 0 26px; background: var(--band);
  border-top: 1px solid var(--mortar); }
.foot-grid { display: grid; gap: 28px; }
.foot-brand { color: var(--gold); font-family: var(--display); font-weight: 600; font-size: 1.14rem;
  letter-spacing: .07em; text-transform: uppercase; }
.foot-h { margin-bottom: .4em; color: var(--ink); font-family: var(--display); font-weight: 600; }
.site-foot a { color: var(--gold-lit); text-decoration: none; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
.foot-legal { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--mortar); }

/* the call bar — the single most useful thing on a phone ------------------- */

.call-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 5; background: var(--gold);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 18px rgba(0,0,0,.5); }
.call-bar a { display: block; padding: 17px; color: #14120c; text-align: center;
  font-family: var(--display); font-weight: 700; font-size: 1.1rem; text-decoration: none; }
/* a thumb gets no hover, so the bar answers the press instead */
.call-bar a:active { background: rgba(0,0,0,.14); }

.todo { background: var(--gold); color: #14120c; padding: 1px 5px; border-radius: 3px;
  font-size: .92em; }

/* phones -------------------------------------------------------------------
   Thumbs, not cursors: full-width buttons, bigger nav targets, the rate rows stacked so the
   figure sits under its heading, and the header's call button dropped because the bar along the
   bottom has the number in it already. */
@media (max-width: 619px) {
  .btn { width: 100%; text-align: center; }
  .nav a { padding: 11px 14px 11px 0; }
  /* the number is in the bar along the bottom, twice over is one time too many */
  .head-in .call-btn, .hero .btn[href^="tel:"] { display: none; }
  /* so the one button left has to be the loud one */
  .hero .btn.ghost { background: var(--gold); color: #14120c; border-color: var(--gold); }
  .rate-row { grid-template-columns: 1fr; gap: 4px; }
  .rr-fig { font-size: 1.16rem; }
}

/* --- from a phone lying on its side, and up ------------------------------- */

@media (min-width: 620px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  .two-col { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: start; }
  /* the schedule: name on the left, description on the right, hairline across both */
  .card { display: grid; grid-template-columns: minmax(0,13rem) minmax(0,1fr);
    gap: 4px 32px; align-items: baseline; }
  .card h3 { margin: 0; }
  .card p { grid-column: 2; }
}

@media (min-width: 900px) {
  body { font-size: 18px; padding-bottom: 0; }
  .hero { padding: 64px 0 72px; }
  .band { padding: 72px 0; }
  .page-head { padding: 56px 0 40px; }
  .hero-in { display: grid; grid-template-columns: 1.08fr .92fr; gap: 56px; align-items: start; }
  .hero-photo { margin-top: 0; }
  .rate-board { margin-top: 8px; padding: 28px 26px 24px; }
  .card { grid-template-columns: minmax(0,15rem) minmax(0,1fr); gap: 4px 48px;
    padding: 24px 0 26px; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .foot-grid { grid-template-columns: 1.5fr 1fr 1.1fr 1fr .9fr; gap: 32px; }
  .call-bar { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  /* The one animation on the site is the header's lay-course, and it is on .nav:after.
     This block named .site-head:after, which is not an element that exists, so the
     motion played on for anyone who had asked for less of it. */
  .nav:after { animation: none; }
  * { transition: none !important; }
}

/* ------------------------------------------------------------------ shipped ideas, 15 Sep
   Two ideas from the concepts board, both zero-JS: the hero builds itself course by
   course, and a quote gets drawn as a bar. And the bond guide's diagrams. */

/* A — the hero wall. The site's own bond3 tile at the same scale as the header rule (three
   16px courses), revealed bottom-up in three steps so it reads as bricklayers laying, not a
   curtain opening. The chalk line is the string line: it snaps before the wall starts,
   because that is the order of work. */
.hero-wall { position: relative; height: 48px; margin: 0 0 20px;
  background: var(--bond3) repeat-x left top; background-size: 96px 48px;
  clip-path: inset(0 0 100% 0); animation: wall-up 1.1s steps(3, end) .45s forwards; }
/* The string line is its own element, not a :before on the wall: the wall's clip-path
   (which is what builds the courses) also clips its pseudo-elements, and the line vanished. */
.hero-string { height: 2px; margin: 4px 0 8px; opacity: .85;
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 16px);
  transform: scaleX(0); transform-origin: left;
  animation: chalk .5s ease-out .1s forwards; }
@keyframes wall-up { to { clip-path: inset(0 0 0 0); } }
@keyframes chalk { to { transform: scaleX(1); } }

/* C — the bond guide. Diagrams at true brick geometry (1px = 1mm), so a bricklayer looking
   at them sees a bricklayer's diagram. */
.bond-grid { display: grid; grid-template-columns: 1fr; gap: 26px 36px; }
.bond-grid figure { margin: 0; }
.bond-grid svg { display: block; width: 100%; height: auto; background: #241f16;
  border: 1px solid var(--mortar); }
.bond-grid figcaption { margin-top: 10px; font-size: .95rem; color: var(--body); }
.bond-grid figcaption b { color: var(--ink); }
@media (min-width: 720px) { .bond-grid { grid-template-columns: 1fr 1fr; } }

/* E — the anatomy of a quote. One bar, three parts, the dashed edge where the measured
   work begins. The narrow mortar segment carries no label on the bar itself; the key
   underneath does, because squeezing a word into 11 per cent is how you get clipped text. */
.anat-bar { display: flex; height: 46px; border: 1px solid var(--mortar); }
.anat-bar span { display: flex; align-items: center; justify-content: center;
  font-family: Oswald, "Arial Narrow", sans-serif; font-weight: 600; font-size: .74rem;
  letter-spacing: .09em; white-space: nowrap; overflow: hidden; }
.anat-key { list-style: none; margin: 14px 0 0; padding: 0; max-width: none; }
.anat-key li { padding: 5px 0; font-size: .95rem; color: var(--body); }
.anat-key em { display: inline-block; width: 12px; height: 12px; margin-right: 9px;
  vertical-align: -1px; }
.anat-total { margin: 16px 0 0; font-size: 1.05rem; color: var(--ink); }
.anat-sep { margin: 18px 0 0; padding: 2px 0 2px 16px; border-left: 2px dashed var(--gold);
  color: var(--body); font-size: .95rem; }

/* The hero wall and string line, for anyone who has asked for less motion: the wall
   stands fully built and the line fully snapped, with no animation played. These rules
   sit at the end of the file so they win against the animation rules above. */
@media (prefers-reduced-motion: reduce) {
  .hero-wall { clip-path: none; animation: none; }
  .hero-string { transform: none; animation: none; }
}