/* ==========================================================================
   auture — landing page
   ========================================================================== */

/* Off-screen until keyboard focus, so it is not a banner above the nav. */
.skip-link {
  position: absolute;
  inset-inline-start: var(--gutter);
  top: 0.75rem;
  z-index: calc(var(--z-nav) + 1);
  padding: 0.55rem 1rem;
  background: var(--sand);
  color: var(--espresso);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
  border-radius: 4px;
  transform: translateY(-200%);
}
.skip-link:focus {
  transform: none;
}

/* ---------- shell ---------- */
.shell {
  width: min(100% - (var(--gutter) * 2), var(--shell));
  margin-inline: auto;
}
.shell--narrow { width: min(100% - (var(--gutter) * 2), 940px); }

.section { padding-block: var(--section); position: relative; }
.section--dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
}
.section--sand { background: var(--bg-alt); }

/* ---------- eyebrow / rules ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--walnut);
  margin-bottom: 1.6rem;
}
.section--dark .eyebrow { color: var(--brass); }
.eyebrow::before {
  content: "";
  width: 2.6rem;
  height: 1px;
  background: currentColor;
  opacity: 0.75;
  flex: none;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.7;
  color: var(--text-muted);
  max-width: var(--measure);
}
.section--dark .lede { color: var(--text-on-dark-muted); }

/* ---------- buttons ---------- */
.btn {
  --btn-fg: var(--sand);
  --btn-bg: var(--walnut);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 48px;
  padding: 0.85rem 1.9rem;
  border: 1px solid var(--btn-bg);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--t-fast) var(--ease),
              color var(--t-fast) var(--ease),
              border-color var(--t-fast) var(--ease);
}
.btn:hover { --btn-bg: var(--espresso); }
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--walnut);
  border-color: var(--rule);
}
.btn--ghost:hover { --btn-bg: var(--walnut); --btn-fg: var(--sand); }
.section--dark .btn--ghost,
.hero .btn--ghost { --btn-fg: var(--sand); border-color: rgba(228, 220, 202, 0.55); }
.section--dark .btn--ghost:hover,
.hero .btn--ghost:hover { --btn-bg: var(--brass); --btn-fg: var(--espresso-2); border-color: var(--brass); }
.btn--brass { --btn-bg: var(--brass); --btn-fg: var(--espresso-2); }
.btn--brass:hover { --btn-bg: #C88C2C; }

/* ---------- nav ---------- */
.nav {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  display: flex;
  align-items: center;
  gap: var(--gutter);
  padding: 1rem var(--gutter);
  color: var(--sand);
  transition: background var(--t-base) var(--ease),
              color var(--t-base) var(--ease),
              box-shadow var(--t-base) var(--ease);
}
.nav.is-stuck {
  background: rgba(242, 237, 227, 0.92);
  backdrop-filter: blur(14px) saturate(1.1);
  color: var(--text);
  box-shadow: 0 1px 0 var(--rule);
}
.nav__logo { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.nav__logo-icon svg { height: 30px; width: auto; }
.nav__logo-word svg { height: 13px; width: auto; }
@media (max-width: 480px) { .nav__logo-word { display: none; } }
.nav__links {
  display: flex;
  gap: clamp(1rem, 2vw, 2.2rem);
  margin-inline-start: auto;
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
}
.nav__links a {
  text-decoration: none;
  padding: 0.5rem 0;
  position: relative;
  transition: opacity var(--t-fast) var(--ease);
}
.nav__links a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width var(--t-base) var(--ease);
}
.nav__links a:hover::after { width: 100%; }
.nav__actions { display: flex; align-items: center; gap: 0.75rem; }

.lang {
  min-height: 44px;
  min-width: 44px;
  padding: 0.4rem 0.95rem;
  border: 1px solid currentColor;
  border-radius: 999px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.lang:hover { opacity: 1; background: rgba(218, 158, 60, 0.16); }

.nav__burger { display: none; }

@media (max-width: 900px) {
  .nav__links {
    position: fixed;
    /* Sized in viewport units, not inset:0. The stuck bar uses backdrop-filter,
       which would otherwise trap this panel inside the bar and leave the links
       sitting on a transparent page. */
    top: 0;
    inset-inline: 0;
    height: 100vh;
    height: 100dvh;
    z-index: var(--z-nav);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1.5rem;
    margin: 0;
    padding: 4rem var(--gutter);
    background: var(--espresso);
    color: var(--sand);
    font-size: var(--step-2);
    letter-spacing: 0;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform var(--t-base) var(--ease-out), visibility var(--t-base);
  }
  .nav__links.is-open { transform: translateY(0); visibility: visible; }
  .nav__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: none;
    color: inherit;
    cursor: pointer;
    position: relative;
    z-index: var(--z-overlay);
  }
  .nav__burger span, .nav__burger span::before, .nav__burger span::after {
    content: "";
    display: block;
    width: 17px;
    height: 1.5px;
    background: currentColor;
    transition: transform var(--t-base) var(--ease), opacity var(--t-fast);
  }
  .nav__burger span::before { position: absolute; transform: translateY(-5.5px); }
  .nav__burger span::after  { position: absolute; transform: translateY(5.5px); }
  .nav__logo,
  .nav__actions { position: relative; z-index: var(--z-overlay); }
  .nav.is-open {
    color: var(--sand);
    background: var(--espresso);
    box-shadow: none;
    backdrop-filter: none;
  }
  .nav.is-open .nav__burger span { background: transparent; }
  .nav.is-open .nav__burger span::before { transform: rotate(45deg); }
  .nav.is-open .nav__burger span::after  { transform: rotate(-45deg); }
  .nav__actions { margin-inline-start: auto; }
}

@media (max-width: 600px) {
  /* the nav already carries the monogram — don't repeat it a scroll apart */
  .hero__mark { display: none; }
}

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: end;
  overflow: clip;
  background: var(--espresso-2);
  color: var(--sand);
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}
.hero__media img {
  width: 100%;
  height: 118%;
  object-fit: cover;
  object-position: center 32%;
  will-change: transform;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(15, 7, 2, 0.92) 0%, rgba(15, 7, 2, 0.45) 42%, rgba(15, 7, 2, 0.35) 100%),
    linear-gradient(to var(--edge, right), rgba(15, 7, 2, 0.55), transparent 55%);
}
.hero__inner { padding-block: clamp(3rem, 8vh, 7rem); position: relative; }

.hero__mark { width: clamp(58px, 7vw, 96px); margin-bottom: clamp(1.5rem, 4vh, 2.75rem); color: var(--sand); }

.hero h1 {
  font-size: var(--step-5);
  font-weight: 600;
  line-height: var(--lh-display);
  letter-spacing: -0.03em;
  max-width: 17ch;
  margin-bottom: 1.6rem;
}
.hero h1 em {
  font-style: normal;
  color: var(--brass);
}
.hero__sub {
  font-size: var(--step-1);
  line-height: 1.65;
  color: rgba(228, 220, 202, 0.82);
  max-width: 46ch;
  margin-bottom: 2.5rem;
}
.hero__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; align-items: center; }

.hero__scroll {
  position: absolute;
  inset-block-end: 1.75rem;
  inset-inline-end: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(228, 220, 202, 0.6);
}
.hero__scroll i {
  display: block;
  width: 1px;
  height: 3.2rem;
  background: linear-gradient(to bottom, var(--brass), transparent);
  animation: drip 2.4s var(--ease) infinite;
}
@keyframes drip {
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}
@media (max-width: 700px) { .hero__scroll { display: none; } }

/* ---------- manifesto ---------- */
.manifesto { text-align: center; }
.manifesto__word {
  font-size: var(--step-5);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.06;
  color: var(--walnut);
  margin-bottom: 0.6rem;
  direction: ltr;
  /* "authentic furniture" cannot fit one line on a phone. It used to be held
     together by nbsp and pushed the whole page into horizontal scroll; now it
     breaks between the two words and the gap is carried by word-spacing. */
  word-spacing: 0.5em;
  text-wrap: balance;
}
.manifesto__word span { color: var(--sand-deep); }
.manifesto__eq {
  font-size: var(--step-1);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: clamp(2.5rem, 6vw, 4.5rem);
  direction: ltr;
}
.manifesto__eq b { color: var(--walnut); font-weight: 600; }
.manifesto__body {
  font-size: var(--step-2);
  line-height: 1.55;
  font-weight: 500;
  max-width: 30ch;
  margin-inline: auto;
  letter-spacing: -0.01em;
}
.manifesto__body + .lede { margin-inline: auto; margin-top: 1.8rem; text-align: center; }

/* ---------- craft pillars ---------- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(3rem, 6vw, 5rem);
}
.pillar__fig {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  margin-bottom: 1.75rem;
  background: var(--bark);
}
.pillar__fig img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease-out), filter var(--t-slow) var(--ease);
  filter: saturate(0.94);
}
.pillar:hover .pillar__fig img { transform: scale(1.05); filter: saturate(1.06); }
.pillar__no {
  position: absolute;
  inset-block-start: 1rem;
  inset-inline-start: 1rem;
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--sand);
  mix-blend-mode: difference;
}
.pillar h3 { font-size: var(--step-2); margin-bottom: 0.85rem; }
.pillar p { color: var(--text-on-dark-muted); max-width: 34ch; }
.section--sand .pillar p { color: var(--text-muted); }

/* ---------- collection rail ---------- */
.rail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.rail {
  display: flex;
  gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-inline: var(--gutter);
  padding-block-end: 1.25rem;
  margin-inline: calc(var(--gutter) * -1);
  scrollbar-width: thin;
  scrollbar-color: var(--sand-deep) transparent;
}
.rail::-webkit-scrollbar { height: 3px; }
.rail::-webkit-scrollbar-thumb { background: var(--sand-deep); }
.piece {
  flex: 0 0 clamp(255px, 30vw, 400px);
  scroll-snap-align: start;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.piece__fig {
  aspect-ratio: var(--frame, 3 / 4);
  overflow: hidden;
  background: var(--sand-deep);
  margin-bottom: 1.1rem;
}
/* the range is 3:4, square and wide; cover was slicing the square boxes */
.piece__fig img {
  width: 100%; height: 100%;
  object-fit: contain;
  transition: transform 1.1s var(--ease-out);
}
.piece:hover .piece__fig img { transform: scale(1.06); }
.piece__meta { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.piece__meta h3 { font-size: var(--step-1); }
.piece__meta span { font-size: var(--step--1); color: var(--text-muted); letter-spacing: 0.12em; text-transform: uppercase; white-space: nowrap; }
.piece > p { margin-top: 0.4rem; font-size: var(--step--1); color: var(--text-muted); }

/* ---------- process ---------- */
.steps {
  counter-reset: step;
  display: grid;
  gap: 0;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  border-block-start: 1px solid var(--rule-on-dark);
}
.step {
  counter-increment: step;
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: clamp(1.6rem, 3vw, 2.4rem);
  border-block-end: 1px solid var(--rule-on-dark);
  align-items: start;
}
.step::before {
  content: "0" counter(step);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--brass);
  letter-spacing: -0.02em;
  line-height: 1;
}
.step h3 { font-size: var(--step-1); margin-bottom: 0.5rem; }
.step p { color: var(--text-on-dark-muted); max-width: 58ch; }
@media (max-width: 600px) { .step { grid-template-columns: 1fr; gap: 0.6rem; } }

/* ---------- split feature ---------- */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  align-items: center;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}
.split__fig { aspect-ratio: 1 / 1; overflow: hidden; background: var(--bark); }
.split__fig img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- proof strip ---------- */
.proof {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 145px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.proof__item { border-block-start: 1px solid var(--rule); padding-block-start: 1.2rem; }
.section--dark .proof__item { border-color: var(--rule-on-dark); }
.proof__n {
  display: block;
  font-size: var(--step-3);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--walnut);
  margin-bottom: 0.5rem;
}
.section--dark .proof__n { color: var(--brass); }
.proof__item p { font-size: var(--step--1); color: var(--text-muted); }
.section--dark .proof__item p { color: var(--text-on-dark-muted); }

/* ---------- brand film ---------- */
.film {
  margin: 0;
  margin-block-start: clamp(1.75rem, 4vw, 3rem);
}
.film__frame { position: relative; }
.film__video {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: contain;
  background: var(--espresso-2, #120701);
}
.film__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--sand);
}
.film__play svg {
  width: clamp(56px, 7vw, 84px);
  height: auto;
  aspect-ratio: 1;
  padding: 1.15rem;
  border-radius: 50%;
  border: 1px solid rgba(228, 220, 202, 0.55);
  background: rgba(18, 7, 1, 0.42);
  backdrop-filter: blur(3px);
  box-sizing: border-box;
}
.film__play:hover svg,
.film__play:focus-visible svg { background: rgba(218, 158, 60, 0.28); border-color: var(--brass); }
.film__play[hidden] { display: none; }
.film figcaption {
  margin-block-start: 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
  text-align: center;
}

/* Phones in portrait get the 1080×1920 cut. Keep it a column, not a full-bleed tower. */
@media (max-width: 700px) and (orientation: portrait) {
  .film__frame { width: min(100%, 26rem); margin-inline: auto; }
  .film__video { aspect-ratio: 9 / 16; }
}

@media (prefers-reduced-motion: reduce) {
  .film__play svg { transition: none; }
}

/* ---------- pattern band ---------- */
.band {
  height: clamp(120px, 16vw, 190px);
  background-color: var(--sand);
  background-repeat: repeat;
  background-size: auto 46px;
  background-position: center;
  border-block: 1px solid var(--rule);
}

/* ---------- contact ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.contact-card h3 {
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 1rem;
  font-weight: 600;
}
.contact-card p, .contact-card a {
  color: var(--text-on-dark-muted);
  font-size: var(--step-0);
  text-decoration: none;
  line-height: 1.9;
}
.contact-card a { border-block-end: 1px solid transparent; transition: color var(--t-fast), border-color var(--t-fast); }
.contact-card a:hover { color: var(--sand); border-color: var(--brass); }

/* ---------- form ---------- */
.enquiry {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: 1.25rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.field { display: grid; gap: 0.45rem; }
.field--full { grid-column: 1 / -1; }
.field label {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}
.field input, .field textarea, .field select {
  min-height: 48px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--rule-on-dark);
  border-radius: 4px;
  background: rgba(228, 220, 202, 0.05);
  color: var(--sand);
  font: inherit;
  font-size: var(--step-0);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.7; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: rgba(218, 158, 60, 0.5); }
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--brass);
  background: rgba(228, 220, 202, 0.09);
}
.field option { background: var(--espresso); color: var(--sand); }
.form-note { grid-column: 1 / -1; font-size: var(--step--1); color: var(--text-on-dark-muted); }
.form-status { grid-column: 1 / -1; font-size: var(--step--1); color: var(--brass); min-height: 1.4em; }

/* ---------- footer ---------- */
.footer {
  background: var(--espresso-2);
  color: var(--text-on-dark-muted);
  padding-block: clamp(3rem, 6vw, 5rem) 2rem;
  font-size: var(--step--1);
}
.footer__top {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: flex-start;
  padding-block-end: 2.5rem;
  border-block-end: 1px solid var(--rule-on-dark);
}
.footer__mark { width: 92px; color: var(--sand); }
.footer__cols { display: flex; flex-wrap: wrap; gap: clamp(2rem, 5vw, 4.5rem); }
.footer__cols .footer__label {
  font-size: var(--step--1);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
  margin-bottom: 0.9rem;
}
.footer__cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.footer__cols a { text-decoration: none; transition: color var(--t-fast) var(--ease); }
.footer__cols a:hover { color: var(--brass); }
/* ---------- the Maxima bar ---------- */
/* The parent mark is Maxima's navy, never auture's brass: it is the one thing
   in this footer that must look the same on every Maxima product. */

.footer__maxima {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem 2rem;
  justify-content: space-between;
  align-items: center;
  margin-block-start: clamp(2rem, 4vw, 3rem);
  padding-block-start: 1.6rem;
  border-block-start: 1px solid var(--rule-on-dark);
}
@media (max-width: 640px) {
  .footer__maxima { flex-direction: column; align-items: center; text-align: center; }
}

.footer__owner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-on-dark-muted);
}
.footer__m {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 7px;
  background: #030E50;                 /* Maxima navy, fixed across products */
  color: #fff;
  font-weight: 700;
  font-size: 0.82rem;
  line-height: 1;
  margin-inline-end: 0.2rem;
}
.footer__owner a {
  color: var(--sand);
  font-weight: 600;
  text-decoration: none;
  border-block-end: 1px solid transparent;
  transition: border-color 200ms;
}
.footer__owner a:hover,
.footer__owner a:focus-visible { border-block-end-color: var(--brass); }
.footer__owner .dot { opacity: 0.45; }
.footer__where { color: var(--text-on-dark-muted); }

/* ---------- footer, rebuilt ---------- */
/* Four columns of equal weight beside the mark, rather than the mark on one
   side and two long lists on the other. The store's code sits in the last
   column, where a reader wanting to carry the site to a phone will look. */

.footer__top {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  padding-block-end: 0;
  border-block-end: 0;
}
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr; } }

.footer__brand { display: grid; gap: 1.1rem; }
.footer__claim { color: var(--text-on-dark-muted); max-width: 24ch; line-height: 1.7; }

.footer__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem);
}
@media (max-width: 1020px) { .footer__cols { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .footer__cols { grid-template-columns: 1fr; } }

.footer__qr .footer__label { margin-bottom: 0.9rem; }
.footer__qr img {
  display: block;
  width: clamp(92px, 9vw, 118px);
  height: auto;
  background: #fff;
  padding: 0.45rem;
  border-radius: 4px;
}
.footer__qrnote {
  margin-block-start: 0.8rem;
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text-on-dark-muted);
  max-width: 22ch;
}

/* the price on a rail card: the figure carries the weight, not the currency */
.piece__price {
  margin-block-start: 0.7rem;
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--walnut);
  letter-spacing: -0.01em;
}
.section--dark .piece__price { color: var(--brass); }