/* Distrito 9 Tattoo, Nou Barris - site stylesheet.
   The only stylesheet written by hand for this site. ds.css, booking.css and
   media.css are shared and load AFTER this file, so anything that has to win
   against them is written at a higher specificity and says why in a comment.

   Design read: a first-presence pitch for a black-and-grey realism studio with
   a confirmed street frontage, with a documentary, daylight language, leaning
   toward a monochrome warm-stone page where the only colour anywhere comes out
   of the photographs.

   The ground is the sunlit stone the storefront is set into. The accent is the
   fascia black: a value, not a hue. There is no chromatic accent on this page
   at all, on purpose, because the studio two streets over is the dark page with
   the red one and these two must not collapse into each other. The red wall
   behind the tinted glass stays inside the photograph and never becomes a
   token. */

/* ---------------------------------------------------------------- tokens --
   :root would lose to booking.css and ds.css, which load later and declare on
   :root themselves. html:root is one specificity step higher, so these values
   hold wherever they have to. */
html:root {
  /* Palette. Contrast figures were computed, not estimated. Nothing here is
     pure black or pure white. */
  --ground: #DED0BB;        /* the sunlit stone facade */
  --ground-2: #D0BAA4;      /* the same stone in shadow */
  --ink: #2A241C;           /* 10.12:1 on the ground */
  --text: #2A241C;          /* media.css reads --text */
  --bg: #DED0BB;            /* media.css reads --bg */
  --muted: #554C40;         /* 5.55:1 on the ground, so it is body-legible */
  --accent: #16130F;        /* the fascia black, 12.21:1 on the ground */
  --accent-ink: #EFE7D8;    /* 15.07:1 on the accent */
  --accent-muted: #B8AC99;  /* 8.29:1 on the accent, for the band caption */

  --bg-2: #D0BAA4;          /* read by media.css for photo frames */
  --bg-3: #D4C0A7;          /* read by booking.css for input fills */
  --line: #8A7A63;          /* hairline dividers */
  --line-strong: #6B5E4B;   /* input and control boundaries, 4.16:1 on ground */

  /* Error text. booking.css sets --bad on :root and then swaps it to a light
     salmon under prefers-color-scheme: dark. This page is a mid-tone stone
     whatever the system setting is, and that salmon lands at 1.32:1 on it,
     which would be the worst piece of contrast on the site. Pinned here at a
     specificity that beats a bare :root inside a media query. The deeper red
     is chosen over the #B3261E default, which also measures 5.87:1, because it
     separates from the solid black fills instead of arguing with them. */
  --bad: #8E1F17;           /* 5.87:1 on the ground */

  /* One corner radius system: none. This is the hardest-edged page of the
     eight and the rule holds for inputs too. */
  --r-s: 0;
  --r-m: 0;

  /* Measured, not assumed: the language switcher is the tallest thing in the
     header (44px links inside a 2px-padded, 1px-bordered shell, so 50px) and
     the row adds 0.55rem top and bottom, which comes to 67.6px. Rounded up to
     69 and set as a min-height so the value is exact at every width. The hero
     subtracts it to fill one screen, and ds.css uses it to keep a focused
     control from landing under the sticky header. */
  --nav-h: 69px;
  --wrap: 72rem;

  /* The margin column of the caption spread. It is the same width from the
     first step to the last, which is the whole idea of the layout, so it is a
     token rather than a number repeated in four rules. */
  --margin-col: 13rem;

  /* One superfamily, two widths. Saira ships a width axis, so the display face
     is the body face expanded to 125% rather than a second download. That
     width contrast is the typographic idea of the page and it is also what the
     fascia is already set in. */
  --font-display: "Saira", "Saira Expanded", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body: "Saira", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Interaction dials, read by ds.css. */
  --ds-lift: 2px;
  --ds-dur: 0.22s;
}

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-stretch: 100%;
  font-size: 1.0625rem;
  line-height: 1.7;
  font-weight: 400;
  /* Nothing on this page may cause a sideways scroll at 360px. */
  overflow-x: hidden;
}

h1, h2, h3, .display {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.04;
  letter-spacing: 0.005em;
  margin: 0;
}

p { margin: 0; }

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

img { max-width: 100%; }

/* Radius zero includes the focus ring, which ds.css rounds to 2px on a bare
   :focus-visible. One step of specificity is enough to square it again. */
html :focus-visible { border-radius: 0; }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: clamp(1.15rem, 4vw, 3rem);
}

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Icons from assets/social.svg. Always beside a word, never instead of one. */
.si {
  flex: none;
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* ---------------------------------------------------------------- reveal --
   The floor under motion.js. If Motion never loads this transition is what
   reveals the page; ds.css switches it off when motion.js takes over. The rise
   matches data-ds-rise so the two paths land identically. */
.rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s cubic-bezier(0.22, 0.75, 0.3, 1),
              transform 0.5s cubic-bezier(0.22, 0.75, 0.3, 1);
}
.rv.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; transition: none; }
}

/* --------------------------------------------------------------- buttons --
   Square, set in the expanded display face, because that is how the shop signs
   itself on the street. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.7rem 1.5rem;
  border: 1px solid transparent;
  border-radius: 0;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  background: none;
}

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-primary:hover { background: #0B0908; border-color: #0B0908; }

.btn-ghost {
  background: transparent;
  border-color: var(--line-strong);
  color: var(--ink);
}
.btn-ghost:hover { background: var(--ground-2); }

/* aria-disabled rather than disabled: site.js leaves the control reachable so
   a reader can still hear why the route is not open yet. */
.btn[aria-disabled="true"] { color: var(--muted); cursor: default; }

/* ---------------------------------------------------------------- header -- */
.site-head {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--ground) 90%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-strong);
}
@supports not (backdrop-filter: blur(2px)) {
  .site-head { background: var(--ground); }
}

.head-row {
  min-height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 2rem);
  padding-block: 0.55rem;
}

/* The two lines of the header mark are the two lines of the fascia. */
.brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 44px;
  line-height: 1.15;
  text-decoration: none;
  color: inherit;
  margin-inline-end: auto;
}
.brand b {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
/* The fascia's second line, and it has to stay one line: at 360px the full
   tracking wrapped it to two and the header grew past the measured 69px. The
   tracking opens back up as soon as there is room for it. */
.brand span {
  white-space: nowrap;
  font-size: 0.6rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (min-width: 420px) {
  .brand span { font-size: 0.66rem; letter-spacing: 0.18em; }
}

.head-nav { display: none; gap: 0.25rem; }
.head-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 0.7rem;
  color: var(--ink);
  text-decoration: none;
  font-size: 0.9rem;
}
.head-nav a:hover { text-decoration: underline; }

.lang {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: 1px solid var(--line-strong);
  background: transparent;
}
.lang a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
}
.lang a:hover { color: var(--ink); }
.lang a[aria-current="true"] {
  background: var(--accent);
  color: var(--accent-ink);
}

.nav-cta {
  display: none;
  align-items: center;
  min-height: 44px;
  padding: 0 1.1rem;
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

@media (min-width: 940px) {
  .head-nav { display: flex; }
  .nav-cta { display: inline-flex; }
}

/* --------------------------------------------------------------- section -- */
.sec { padding-block: clamp(3.25rem, 7vw, 6rem); }

.sec-head { max-width: 46rem; }
.sec-head h2 {
  font-size: var(--step-3, clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem));
  letter-spacing: 0.01em;
}
.sec-head p {
  margin-top: 1.1rem;
  color: var(--muted);
  font-size: 1.0625rem;
  max-width: 64ch;
}

/* ------------------------------------------------------------------ hero --
   Letterboxed frontage, headline BENEATH it. The fascia is already a piece of
   typography and setting a second one on top of it would be two headlines
   fighting in the same rectangle. The source file is 676x1200, so the box gets
   an explicit ratio and object-fit: cover rather than letting a portrait photo
   decide how tall the first screen is. */
.masthead {
  min-height: calc(100dvh - var(--nav-h));
  display: flex;
  align-items: center;
  padding-block: clamp(1.5rem, 4vw, 3rem);
}

.masthead-inner { width: 100%; }

.lead-figure {
  margin: 0;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 34dvh;
  overflow: hidden;
  background: var(--ground-2);
}
.lead-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The fascia occupies 17% to 29% of the source frame's height. Measured,
     because the first value tried here was 30% and at 1280px it sliced the top
     off the sign: with object-fit cover the visible band runs from
     0.78 * P to 0.78 * P + 22 percent of the image at that width, so anything
     above P = 22 starts eating the fascia. 18% keeps the whole sign and the
     window beneath it in frame from 360px up, and on a short desktop viewport
     too. Centring would have shown pavement. */
  object-position: 50% 18%;
}

.masthead h1 {
  margin-top: clamp(1.1rem, 2.5vw, 1.8rem);
  font-size: clamp(2.6rem, 2rem + 3vw, 4.6rem);
  line-height: 1.04;
  letter-spacing: 0.005em;
}

.masthead-foot {
  display: grid;
  gap: 1.25rem;
  margin-top: 1.1rem;
}

.masthead-lede {
  max-width: 34rem;
  font-size: clamp(1.02rem, 0.98rem + 0.35vw, 1.2rem);
  color: var(--muted);
}

/* The location line sits BELOW the headline and the lede. Above it, it would
   read as an eyebrow, and this page spends none. */
.masthead-where {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.7rem;
  margin-top: 0.85rem;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
/* The separator is glued to the second item rather than being an item of its
   own, so it can never end up stranded at the end of a wrapped line. */
.masthead-where span + span::before {
  content: "\00B7";
  margin-inline-end: 0.7rem;
  color: var(--line);
}

.masthead-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.masthead-actions .btn { flex: 1 1 13rem; }

@media (min-width: 760px) {
  .lead-figure { aspect-ratio: 21 / 9; max-height: 46dvh; }
}
@media (min-width: 880px) {
  .masthead-foot {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 2.5rem;
  }
  .masthead-actions { flex: none; }
  .masthead-actions .btn { flex: 0 0 auto; }
}

/* ------------------------------------------------- the process spread -----
   Image in the wide column, its caption hanging in a narrow left margin
   column that keeps the same width all the way down. The steps also step
   rightwards as they go, which is the only thing carrying the sequence apart
   from the caption text: the brief bans section numbering and this page has no
   eyebrows to spend on it.

   motion.js already staggers the children of .steps, so the three land in
   order at 0.11s apart. That is the one animation here with a job: a page that
   is telling a sequence cannot have its steps arrive simultaneously. */
.steps {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
}

.step { display: grid; gap: 1rem; }

.step-note b {
  display: block;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.step-note p {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

.step-figure {
  margin: 0;
  width: min(100%, 26rem);
  background: var(--ground-2);
}
.step-figure img {
  display: block;
  width: 100%;
  height: auto;
}

@media (min-width: 900px) {
  .step {
    grid-template-columns: var(--margin-col) minmax(0, 1fr);
    gap: 0 clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
  .step-figure { margin-inline-start: var(--step-offset, 0); }
  .step:nth-child(2) { --step-offset: 3rem; }
  .step:nth-child(3) { --step-offset: 6rem; }
}

/* ------------------------------------------------------------------ band --
   One solid black block on warm stone, carrying the two figures a visitor
   actually came for. It is the accent used as a fill, the same value as the
   booking button, and it appears exactly once: this is not a page that flips
   theme halfway down. */
.band { background: var(--accent); color: var(--accent-ink); }

.band-row {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 1.5rem;
}

.band-figure {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.band-num {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(3.4rem, 2.4rem + 5vw, 6.5rem);
  line-height: 0.9;
  font-variant-numeric: tabular-nums;
}
.band-lab {
  font-size: 0.8125rem;
  line-height: 1.5;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-muted);
}

.band-hours {
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.35rem);
  line-height: 1.6;
  max-width: 34rem;
  font-variant-numeric: tabular-nums;
}

@media (min-width: 800px) {
  .band-row {
    grid-template-columns: auto minmax(0, 1fr);
    gap: clamp(2rem, 6vw, 5rem);
    align-items: center;
  }
}

/* ----------------------------------------------------------------- visit -- */
.visit-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  align-items: start;
}
@media (min-width: 820px) {
  .visit-grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
  }
}

/* Two open lines and one closed one. This studio shuts at midday and all day
   Monday, which is the one thing about its week a visitor has to be told
   before they walk over. */
.hours {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  /* No column gap: the rule under the day and the rule under the hours are two
     separate borders, and any gap between the columns shows as a nick in what
     should read as one line. */
  gap: 0;
}
.hours dt,
.hours dd {
  margin: 0;
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--line);
}
/* No align-self here, deliberately. The Tuesday-to-Friday row has two lines of
   hours against a one-line day name, and letting the day cell shrink to its
   own content put its rule 8px above the rule beside it. Both cells stretch to
   the row, so the two borders read as one line. */
.hours dt {
  padding-inline-end: 1.5rem;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.hours dd {
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}
.hours .off { color: var(--muted); }

.addr { font-style: normal; font-size: 1.0625rem; }
.addr .street { font-weight: 600; }

.contact-list {
  list-style: none;
  margin: 1.75rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.5rem;
}
.contact-list a {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 44px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* site.js strips the href from anything the studio has not confirmed, so these
   have to read correctly as plain text too. */
.contact-list a:not([href]) {
  color: var(--muted);
  text-decoration: none;
}
.contact-list .aside {
  display: block;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

/* ------------------------------------------------------------------ solo --
   The one colour photograph in the set, alone and late, with its caption in
   the same margin column as the process spread so the two read as one system.
   Everything chromatic on this page is inside a photograph; this is the
   photograph that makes that visible. */
.solo-grid {
  display: grid;
  gap: 1.25rem;
}
.solo-note b {
  display: block;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.solo-note p {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}
/* One step larger than the process figures. The sequence is evidence; this one
   is the point being made, and it is the only colour on the page. */
.solo-figure {
  margin: 0;
  width: min(100%, 28rem);
  background: var(--ground-2);
}
.solo-figure img { display: block; width: 100%; height: auto; }

@media (min-width: 900px) {
  .solo-grid {
    grid-template-columns: var(--margin-col) minmax(0, 1fr);
    gap: 0 clamp(2rem, 4vw, 3.5rem);
    align-items: end;
  }
}

/* --------------------------------------------------------------- booking -- */
.book-grid {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}
@media (min-width: 900px) {
  .book-grid {
    grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
    gap: clamp(2.5rem, 6vw, 5rem);
    align-items: start;
  }
}

.book-aside h2 {
  font-size: var(--step-3, clamp(1.5rem, 1.32rem + 0.9vw, 2.1rem));
  letter-spacing: 0.01em;
}
.book-aside p {
  margin-top: 1.1rem;
  color: var(--muted);
}
.book-aside .aside-note {
  font-size: 0.8125rem;
  line-height: 1.5;
}

.tel-big {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 48px;
  margin-top: 1.5rem;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 2px solid currentColor;
}
.tel-big:not([href]) { color: var(--muted); }

/* The form sits on plain stone. No card, no panel, no frame: the inputs are
   the only boxes on this page and they are the only thing that should look
   like one. */
.form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.1rem;
  background: none;
  border: 0;
  border-radius: 0;
  padding: 0;
}
@media (min-width: 620px) {
  .form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.1rem 1.25rem;
  }
  .form .full { grid-column: 1 / -1; }
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  /* booking.css gives .form textarea `border-radius: inherit`, so the radius
     the textarea uses is the one declared here. Zero, like everything else. */
  border-radius: 0;
  min-width: 0;
}
.field label {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
/* booking.css drops the optional marker to 0.65 opacity, which on this ground
   lands just under the body-text bar. A real muted value instead. */
.field label .opt {
  opacity: 1;
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0.02em;
}
.field input,
.field select {
  font: inherit;
  font-size: 1rem;
  min-height: 48px;
  padding: 0.65rem 0.85rem;
  color: var(--ink);
  background: var(--bg-3);
  border: 1px solid var(--line-strong);
  border-radius: 0;
  width: 100%;
  min-width: 0;
}
.field select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink) 50%),
    linear-gradient(135deg, var(--ink) 50%, transparent 50%);
  background-position: calc(100% - 1.15rem) 55%, calc(100% - 0.8rem) 55%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-inline-end: 2.4rem;
}
.field textarea { width: 100%; }
/* booking.css styles the textarea border with --line, one step lighter than
   the inputs beside it. Equal specificity there, so this needs one more step
   to hold. */
.form .field textarea { border-color: var(--line-strong); }
.field-msg { margin: 0.2rem 0 0; }

.form-error, .form-ok {
  grid-column: 1 / -1;
  display: none;
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}
.form-error {
  color: var(--bad);
  border-inline-start: 3px solid var(--bad);
  padding-inline-start: 0.8rem;
}
.form-error a { color: var(--bad); font-weight: 700; }
.form-ok {
  color: var(--ink);
  border-inline-start: 3px solid var(--accent);
  padding-inline-start: 0.8rem;
}
.form-error.show, .form-ok.show { display: block; }

.book-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
}

/* Radius zero holds for the two panels the shared files draw as well. */
.form .wa-pending-note { border-radius: 0; border-color: var(--line-strong); }
#book-result { border-radius: 0; margin-top: 1.25rem; }

/* ---------------------------------------------------------------- footer -- */
.site-foot {
  border-top: 1px solid var(--line-strong);
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
}

.foot-grid {
  display: grid;
  gap: 1.25rem;
}
@media (min-width: 700px) {
  .foot-grid {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: start;
    gap: 2rem;
  }
}

.foot-brand {
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.site-foot address {
  font-style: normal;
  margin-top: 0.35rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
.foot-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 44px;
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.95rem;
}

.demo-notes {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.45rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 64ch;
}