/* ==========================================================================
   Maison Clerc & Banette, Lyon 8e
   Treatment A: the real shopfront, full bleed above the fold, with the type
   and colour discipline of the previous type-led build kept underneath it.
   The first build shipped no photograph at all, because the Gallery marks
   every harvested file reuse:"no"; the operator overrode that, so three of
   their own Google listing shots are now on the page (selection and
   rejections are documented in the hero comment in index.html).

   Palette sampled from their premises (Gallery report):
     #292B2C  facade cladding, canopy, fascias (dominant)
     #C9A84C  raised letter signage, brass/gold
     #B87333  copper sconce lamps flanking the entrance
     #C2714F  interior floor, terracotta tiles
     #F2EDE4  interior walls, cream plaster
   ========================================================================== */

@font-face {
  font-family: 'Montserrat';
  src: url('montserrat-900-latin.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('lato-400-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* colour */
  --ink:        #292B2C;
  --gold:       #C9A84C;
  --copper:     #B87333;
  --terra:      #C2714F;   /* graphic use only, 3.1:1 on cream */
  --terra-ink:  #8A3F22;   /* text-safe on cream, 6.3:1 */
  --cream:      #F2EDE4;
  --paper:      #FAF7F1;
  --muted:      #5B534A;   /* neutral leaning to the accent hue, 6.4:1 */
  --rule:       #DCD3C4;

  /* type */
  --display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --text:    'Lato', 'Segoe UI', Helvetica, Arial, sans-serif;
  --fs-display: clamp(2.25rem, 10.5vw, 5rem);
  --fs-h2:      clamp(1.5rem, 5.2vw, 2.25rem);
  --fs-h3:      1.0625rem;
  --fs-body:    1.0625rem;
  --fs-small:   0.875rem;

  /* space, four steps */
  --s1: 0.5rem;
  --s2: 1rem;
  --s3: 2rem;
  --s4: 3.5rem;
  --s5: 6rem;

  --wrap: 68rem;
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--fs-body);
  line-height: 1.55;
}

h1, h2, h3, .brand-name, .btn, .eyebrow, .tile-label, .slot-mark, dt {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
}

h1 {
  margin: 0 0 var(--s2);
  font-size: var(--fs-display);
  line-height: 1.03;
  letter-spacing: 0.005em;
}
h2 {
  margin: 0 0 var(--s2);
  font-size: var(--fs-h2);
  line-height: 1.1;
  letter-spacing: 0.02em;
}
h3 {
  margin: var(--s3) 0 var(--s1);
  font-size: var(--fs-h3);
  line-height: 1.2;
  letter-spacing: 0.08em;
}
p { margin: 0 0 var(--s2); max-width: 60ch; }

a { color: var(--ink); }

/* digits: prices, hours, phone numbers and line numbers all line up */
.num, .hours td, .tile-value, table { font-variant-numeric: tabular-nums; }

:focus-visible {
  outline: 3px solid var(--terra-ink);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--gold);
  padding: var(--s2); z-index: 10;
}
.skip:focus { left: var(--s2); top: var(--s2); }

.eyebrow {
  margin: 0 0 var(--s2);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--terra-ink);
}
.eyebrow.gold { color: var(--gold); }

.footnote, .caveat {
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 52ch;
}
.caveat {
  border-left: 2px solid var(--terra);
  padding-left: var(--s2);
  /* It always follows something (the CTA row, the contact tiles), and with no
     top margin it butts straight into it and reads as an error message. */
  margin-top: var(--s2);
}
.muted { color: var(--muted); }

/* --------------------------------------------------------------------------
   THE CANOPY. Their shopfront is a dark charcoal Art Deco arch with layered
   gold hairline moldings and copper sconce lamps either side of the door.
   The header is the flat side fascia, .arch is the curve below it.
   -------------------------------------------------------------------------- */
.site-head {
  background: var(--ink);
  /* Pair every dark background with its foreground, as .invert and .site-foot
     already do. Without this the header inherits charcoal from body and any
     text not explicitly recoloured by a child rule is invisible on it. */
  color: var(--cream);
  padding: var(--s2) var(--s2) var(--s2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2) var(--s3);
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(201,168,76,0.45);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  min-height: 44px;
  /* MUST be set explicitly. The global `a { color: var(--ink) }` rule would
     otherwise give this anchor charcoal text on the charcoal .site-head
     background: computed 1.00:1, i.e. invisible. It only LOOKED fine because
     every glyph sits in a child span that overrides the colour. A contrast
     checker reads the anchor's own computed colour and is right to fail it. */
  color: var(--gold);
}
.brand img { display: block; }
.brand-text { display: flex; flex-direction: column; }
.brand-name {
  color: var(--cream);
  font-size: 0.875rem;
  letter-spacing: 0.11em;
  line-height: 1.2;
}

/* THE WORDMARK, AS THE FASCIA SETS IT.
   On the real canopy the two names are not the same colour: MAISON CLERC is
   in cream/white raised letters and & BANETTE is in brass. The house name and
   the cooperative it belongs to are deliberately distinguished, so the page
   distinguishes them the same way wherever the name is set. Each half is
   nowrap, so a narrow header can only break BETWEEN the two names and never
   orphans the ampersand on a line of its own. */
.wm-house { color: var(--cream); white-space: nowrap; }
.wm-net   { color: var(--gold);  white-space: nowrap; }
.brand-sub {
  color: var(--cream);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.site-nav { display: flex; flex-wrap: wrap; gap: var(--s1) var(--s3); }
.site-nav a {
  color: var(--cream);
  text-decoration: none;
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.site-nav a:hover { color: var(--gold); border-bottom-color: var(--gold); }

.arch {
  position: relative;
  height: 54px;
  background: var(--ink);
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  box-shadow: inset 0 -3px 0 -1px rgba(201,168,76,0.30),
              inset 0 -8px 0 -7px rgba(201,168,76,0.22);
}
.sconce {
  position: absolute;
  top: 12px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--copper);
  box-shadow: 0 0 14px 5px rgba(232,201,138,0.42);
}
.sconce-l { left: 13%; }
.sconce-r { right: 13%; }

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.hero { background: var(--cream); }
.hero-body {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s4) var(--s2) var(--s4);
}
.lede {
  font-size: 1.1875rem;
  line-height: 1.5;
  max-width: 38ch;
  color: var(--ink);
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 var(--s3);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-decoration: none;
  border: 1px solid var(--ink);
  cursor: pointer;
  transition: background-color 160ms ease-out, color 160ms ease-out,
              transform 160ms ease-out;
}
/* the single accent: gold on charcoal, only ever on the call button */
.btn-primary { background: var(--ink); color: var(--gold); }
.btn-primary:hover { transform: translateY(-2px); }
.btn-ghost { background: transparent; color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--cream); }

/* --------------------------------------------------------------------------
   IN BRIEF strip
   -------------------------------------------------------------------------- */
.strip {
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.strip dl {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s3) var(--s2);
  display: grid;
  gap: var(--s3);
}
.strip dt {
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 2px;
}
.strip dd { margin: 0; }
.strip b { font-family: var(--display); letter-spacing: 0.04em; }

/* --------------------------------------------------------------------------
   BANDS
   -------------------------------------------------------------------------- */
.band {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s5) var(--s2);
}
.band-alt { max-width: none; background: var(--paper); }
.band-alt > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.band-intro { font-size: 1.0625rem; color: var(--muted); max-width: 46ch; }

.offer, .specialites, .slots, .plain { list-style: none; margin: 0; padding: 0; }

.offer {
  margin-top: var(--s4);
  display: grid;
  gap: 0;
}
.offer li {
  padding: var(--s3) 0;
  border-top: 1px solid var(--rule);
}
.offer li:last-child { border-bottom: 1px solid var(--rule); }
.offer h3 { margin: 0 0 var(--s1); letter-spacing: 0.1em; }
.offer p { margin: 0; color: var(--muted); }

.specialites {
  margin: var(--s4) 0 var(--s3);
  display: grid;
  gap: var(--s1);
}
.specialites li {
  padding: var(--s2) 0 var(--s2) var(--s3);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.specialites li::before {
  content: "";
  position: absolute;
  left: 0; top: 1.45em;
  width: 10px; height: 10px;
  background: var(--terra);
  transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   THE ONE COLOUR BLOCK
   -------------------------------------------------------------------------- */
.invert {
  background: var(--ink);
  color: var(--cream);
  padding: var(--s5) var(--s2);
}
.invert > * { max-width: 46rem; margin-left: auto; margin-right: auto; }
.invert h2 { color: var(--cream); }
.invert p { color: var(--cream); }

/* --------------------------------------------------------------------------
   PHOTO SLOTS, DORMANT. No markup on the site uses these rules today.

   The page ships with no photograph section at all: every harvested file is
   reuse:"no" and the owner has sent nothing, and Lens flagged the empty
   placeholder grid a previous build used as reading "unfinished" on a live
   page. The request for photographs now travels in the outreach mail.

   These rules are kept, and only these, so that adding the gallery back is
   one <section> of markup on the day the owner's four photographs arrive.
   The frame fill is the terracotta tomette floor from their own interior,
   drawn in CSS. Roughly 0.6 KB, none of it on the critical path.
   -------------------------------------------------------------------------- */
.slots {
  margin-top: var(--s4);
  display: grid;
  gap: var(--s4) var(--s3);
}
.slot-frame {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  border: 1px solid var(--rule);
  background-color: var(--paper);
  background-image:
    repeating-linear-gradient(45deg,  rgba(194,113,79,0.13) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(194,113,79,0.13) 0 1px, transparent 1px 22px);
  margin-bottom: var(--s2);
}
.slot-mark {
  font-size: 1.25rem;
  letter-spacing: 0.14em;
  color: var(--terra);
  border: 1px solid var(--terra);
  padding: var(--s1) 0.75rem;
}
.slot h3 { margin-top: 0; }
.slot p { margin: 0; color: var(--muted); font-size: var(--fs-small); }

/* --------------------------------------------------------------------------
   HOURS / ACCESS
   -------------------------------------------------------------------------- */
.cols { display: grid; gap: var(--s4); margin-top: var(--s4); }
.col h3:first-child { margin-top: 0; }

.hours { width: 100%; max-width: 22rem; border-collapse: collapse; }
.hours th, .hours td {
  text-align: left;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--rule);
  font-weight: 400;
}
.hours th { font-family: var(--text); color: var(--muted); }
.hours td { text-align: right; }

.addr { line-height: 1.7; }
.plain li {
  padding: 0.45rem 0 0.45rem var(--s2);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.plain li::before {
  content: "";
  position: absolute; left: 0; top: 1.05em;
  width: 6px; height: 1px; background: var(--terra);
}
.plain b { font-family: var(--display); font-size: 0.9em; letter-spacing: 0.04em; }

/* inline tel:/mailto: links inside body copy still need a 44px target */
.col p a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 1px solid var(--terra);
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.col p a:hover { color: var(--terra-ink); border-color: var(--terra-ink); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  border-bottom: 1px solid var(--terra);
  transition: border-color 160ms ease-out, color 160ms ease-out;
}
.link-arrow::after { content: " \2192"; white-space: pre; }
.link-arrow:hover { color: var(--terra-ink); border-color: var(--terra-ink); }

/* --------------------------------------------------------------------------
   CONTACT TILES
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--s2); margin-top: var(--s4); }
.tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--s3) var(--s2);
  min-height: 44px;
  text-decoration: none;
  border: 1px solid var(--ink);
  background: transparent;
  transition: background-color 160ms ease-out, color 160ms ease-out;
}
.tile-label { font-size: 0.6875rem; letter-spacing: 0.18em; color: var(--muted); }
.tile-value { font-size: 1.0625rem; word-break: break-word; }
.tile:hover { background: var(--ink); color: var(--cream); }
.tile:hover .tile-label { color: var(--gold); }
/* colour set alongside the background for the same reason as .brand above:
   this is an <a>, so it inherits var(--ink) and would compute 1.00:1 here */
.tile-primary { background: var(--ink); color: var(--gold); }
.tile-primary .tile-label { color: var(--gold); }
.tile-primary .tile-value {
  color: var(--gold);
  font-family: var(--display);
  font-size: 1.375rem;
  letter-spacing: 0.04em;
}
.tile-primary:hover { background: #1E2021; }

/* --------------------------------------------------------------------------
   FOOTER
   -------------------------------------------------------------------------- */
.site-foot {
  background: var(--ink);
  color: var(--cream);
  padding: var(--s4) var(--s2);
  font-size: var(--fs-small);
}
.site-foot > * { max-width: var(--wrap); margin-left: auto; margin-right: auto; }
.site-foot p { margin: 0 0 var(--s1); max-width: none; }
/* inline-flex + min-height keeps these above the 44px tap target while they
   still read as links inside a sentence */
.site-foot a {
  color: var(--cream);
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 2px;
  border-bottom: 1px solid transparent;
  transition: color 160ms ease-out, border-color 160ms ease-out;
}
.site-foot a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.foot-brand {
  font-family: var(--display);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--cream);
  margin-bottom: var(--s2) !important;
}

/* --------------------------------------------------------------------------
   PHOTOGRAPHS. Three of their own listing shots. Every crop is done here with
   aspect-ratio and object-position rather than by editing a file, so the
   originals in photos/ stay exactly as the Gallery harvested them and the
   provenance recorded against those filenames still refers to what is on the
   page. No srcset is written by hand: the build step generates WebP variants
   from these plain <img src> tags afterwards.
   -------------------------------------------------------------------------- */
.hero-shot, .shot-wide { margin: 0; }
.hero-shot img, .shot-wide img, .shot-cab img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
  background: var(--ink);   /* the letterbox while the image decodes */
}

/* The facade. Cropped to hold the canopy and the gold lettering, which is the
   one thing in the frame that identifies the shop; the sky and the pavement
   are what gets cut as the viewport widens. */
.hero-shot img {
  aspect-ratio: 16 / 9;
  object-position: center 46%;
  max-height: 68vh;
  filter: saturate(1.04) contrast(1.02);
}
/* Measured at 390x844: with a 3/2 hero and the full s4 padding, the h1 runs to
   three lines and the call button lands ON the fold. The photograph earns its
   place above the fold, but not at the cost of the tap that the page exists
   for, so the crop is shallower here and the top padding is one step down.
   The 64em rule below restores the larger padding on desktop. */
.hero-body { padding-top: var(--s3); }

/* Counter shot, full bleed between two text blocks. */
.shot-wide img {
  aspect-ratio: 16 / 9;
  object-position: center 55%;
  max-height: 58vh;
  filter: saturate(1.05) contrast(1.03);
}
.shot-wide figcaption {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: var(--s1) var(--s2) 0;
  font-size: var(--fs-small);
  color: var(--muted);
}

/* The specialities cabinet. Tall and narrow on purpose: 1/2 shows all five
   shelves at full height while object-position 62% cuts the mop bucket and
   the socket out of the right of the frame and the fridge out of the left. */
.spec-layout { display: grid; gap: var(--s3); }
.shot-cab {
  margin: 0;
  width: 100%;
  max-width: 15rem;
  justify-self: center;
}
.shot-cab img {
  aspect-ratio: 1 / 2;
  object-position: 62% center;
  border: 1px solid var(--rule);
}

/* Phone number under the hero buttons, so it is readable on a desktop where
   tapping a tel: link does nothing. */
.tel-line {
  margin-top: var(--s1);
  font-size: var(--fs-small);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
/* inline-flex with a 44px min-height: as a bare inline link this measured 20px
   tall, which is under the touch minimum, on the one element the whole page is
   trying to get tapped. */
.tel-line a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--gold);
  transition: color 160ms ease, border-color 160ms ease;
}
.tel-line a:hover { color: var(--terra-ink); border-bottom-color: var(--terra-ink); }

/* --------------------------------------------------------------------------
   WIDER SCREENS
   -------------------------------------------------------------------------- */
@media (min-width: 40em) {
  .strip dl { grid-template-columns: repeat(3, 1fr); }
  .slots { grid-template-columns: repeat(2, 1fr); }
  /* Three tiles again: the operator arbitrated the number conflict and
     04 86 91 45 38 is published. */
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
  .arch { height: 76px; }
}
@media (min-width: 64em) {
  .site-head { padding-left: var(--s3); padding-right: var(--s3); }
  .hero-body { padding: var(--s5) var(--s3); }
  .band, .band-alt, .invert { padding-left: var(--s3); padding-right: var(--s3); }
  .offer { grid-template-columns: repeat(2, 1fr); column-gap: var(--s4); }
  .offer li:nth-child(2) { border-top: 1px solid var(--rule); }
  .offer li:nth-last-child(2) { border-bottom: 1px solid var(--rule); }
  .cols { grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
  .slots { grid-template-columns: repeat(4, 1fr); }
  .specialites { grid-template-columns: repeat(2, 1fr); column-gap: var(--s4); }
  /* TWO-COLUMN HERO on desktop, photograph beside the words rather than above
     them. Measured at 1280x800: stacked, the type block alone is 466px, so
     under any full-bleed photograph the h1, the hours and the call button all
     fell below the fold and a desktop visitor got a picture and nothing to
     act on. No cap on the image height is needed once it sits alongside: the
     row is as tall as the words, and the photograph crops to fit it. */
  .hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas: "arch arch" "shot body";
    align-items: center;
  }
  .arch { grid-area: arch; }
  .hero-shot { grid-area: shot; align-self: stretch; }
  .hero-shot img {
    aspect-ratio: auto;
    height: 100%;
    max-height: none;
    /* biased right: at this column ratio, centring clips the wordmark after
       "MAISON CLERC & BAN", and the name is the point of the photograph. */
    object-position: 65% 45%;
  }
  .hero-body {
    grid-area: body;
    max-width: 36rem;
    margin: 0;
    padding: var(--s4) var(--s3);
  }
  /* The counter shot is itself a close-up, so a full-bleed letterbox of it
     became an extreme macro: the cup lost its top and the eclair its base.
     Contained to the text measure and kept at 16/9, it reads as a photograph
     of a coffee and a pastry rather than a texture. */
  .shot-wide {
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 0 var(--s3);
  }
  .shot-wide img { object-position: center 58%; }
  .shot-wide figcaption { padding-left: 0; padding-right: 0; }
  .spec-layout {
    grid-template-columns: 1fr auto;
    gap: var(--s5);
    align-items: start;
  }
  .shot-cab { max-width: 17rem; justify-self: end; }
}

/* --------------------------------------------------------------------------
   MOTION. One entrance on the hero, plus interactive states above.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .hero-body > * {
    animation: rise 420ms ease-out both;
  }
  .hero-body > *:nth-child(2) { animation-delay: 60ms; }
  .hero-body > *:nth-child(3) { animation-delay: 120ms; }
  .hero-body > *:nth-child(4) { animation-delay: 180ms; }
  .hero-body > *:nth-child(5) { animation-delay: 240ms; }
}
/* The rise animates TRANSFORM ONLY, deliberately. An earlier version faded
   opacity from 0 with a stagger, which meant the headline, the lede and the
   call button were literally invisible for the first 600ms of the page's life.
   A renderer that captured the page in that window measured the h1 contrast
   as 1.00:1 and the visitor saw a blank screen. Content must never depend on
   an animation having finished in order to be readable. */
@keyframes rise {
  from { transform: translateY(8px); }
  to   { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .btn-primary:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   PRINT. Opening hours and the address end up on fridges.
   -------------------------------------------------------------------------- */
@media print {
  .site-nav, .arch, .sconce, .cta-row, .skip { display: none !important; }
  /* Photographs off in print: this gets stuck on a fridge, and a full-bleed
     facade shot costs half a cartridge. The tel-line survives, so the number
     is on the printed copy even though the buttons are not. */
  .hero-shot, .shot-wide, .shot-cab { display: none !important; }
  .spec-layout { display: block !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .site-head, .invert, .site-foot, .strip, .band-alt, .tile, .tile-primary {
    background: #fff !important;
    color: #000 !important;
    border-color: #000 !important;
  }
  /* .brand and .tile-primary are listed because they now carry an explicit
     gold colour, which outranks the `a { color: #000 }` rule below on
     specificity. Gold on white is 2.28:1 and must not survive into print. */
  /* .wm-house/.wm-net for the same reason: cream on white is 1.08:1, i.e. the
     business name would print as a blank space. */
  .brand, .brand-name, .brand-sub, .foot-brand, .invert h2, .invert p,
  .wm-house, .wm-net,
  .site-foot a, .tile-primary, .tile-label, .tile-value { color: #000 !important; }
  .band, .invert, .hero-body { padding: 0.6cm 0 !important; }
  a { color: #000; text-decoration: underline; }
  .site-foot a[href^="http"]::after,
  .link-arrow[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; }
  #acces { break-inside: avoid; }
  h1 { font-size: 22pt; }
}