/* Cinder & Stave (DEMOS_PLAN.md D3): a fictional wood-fired restaurant. Its own brand, nothing of Sunglint's: a warm
   near-black ground, cream type, one ember accent (the buttons, the chosen state, the eyebrows, the map's route);
   Cormorant Garamond for what you would read on a menu card, Jost for everything you use. The photographs carry it,
   so no ornament competes: hairlines between things, 2 px corners, nothing that moves on its own. Every text pair
   passes WCAG AA; no text is set over a photograph (a caption sits on its own solid label). */
/* fonts.mjs: begin (written by tools/fonts.mjs; do not edit by hand) */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/demos/restaurant/fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 500 700;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("/demos/restaurant/fonts/jost.woff2") format("woff2");
  font-weight: 400 500;
  font-display: swap;
}
/* fonts.mjs: end */

:root {
  --ground: #14100C; --ground-2: #1C1712; --deep: #0B0907;
  --cream: #F3ECE1; --soft: #CFC2AE; --dim: #A8977E;
  --ember: #E07A40; --ember-hi: #EE9A62; --ember-ink: #160E08; --err: #F2A08A;
  --line: #3A3129; --edge: #8A7A64;
  --serif: "Cormorant Garamond", Georgia, serif; --sans: "Jost", system-ui, sans-serif;
  --head: 64px; --gut: clamp(16px, 4vw, 48px); --max: 1184px;
  --fast: 150ms cubic-bezier(.2, .7, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* A jump lands a section's top just under the sticky header. */
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--head); }
body { font-family: var(--sans); font-size: 17px; line-height: 1.6; background: var(--ground); color: var(--cream);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
ul { list-style: none; }
fieldset { border: 0; min-width: 0; }
address { font-style: normal; }
.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gut)); margin-inline: auto; padding-inline: var(--gut); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nw { white-space: nowrap; }
:focus-visible { outline: 2px solid var(--ember-hi); outline-offset: 3px; }
[hidden] { display: none !important; }
.eyebrow { font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--ember-hi); }
.small { font-size: 14px; color: var(--dim); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.02; letter-spacing: -.005em; }
h2 { font-size: clamp(2.3rem, 1.5rem + 2.6vw, 3.9rem); margin: 12px 0 18px; text-wrap: balance; }

/* The way in and out: the skip link, and the studio's strip above the restaurant's own site */
.skip { position: fixed; left: var(--gut); top: calc(var(--head) + 48px); z-index: 30; padding: 10px 16px;
  background: var(--cream); color: var(--ground); font-size: 15px; font-weight: 500; text-decoration: none;
  transform: translateY(-400px); }
.skip:focus-visible { transform: none; outline-color: var(--ember); }
.demo-bar { display: flex; align-items: center; gap: 16px; min-height: 36px; padding: 6px var(--gut); background: var(--deep);
  font-size: 13px; border-bottom: 1px solid var(--line); }
.demo-bar p { color: var(--soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-bar .short, .top .short, .cta .short { display: none; }
.back { font-weight: 500; text-decoration: none; white-space: nowrap; }
.back:hover { text-decoration: underline; text-underline-offset: 3px; }

/* The restaurant's header */
.top { position: sticky; top: 0; z-index: 20; background: var(--ground); border-bottom: 1px solid var(--line); }
.top-in { position: relative; display: flex; align-items: center; gap: 36px; height: var(--head); }
.logo { font-family: var(--serif); font-size: 27px; font-weight: 600; letter-spacing: .01em; white-space: nowrap; line-height: 1; }
.logo i { color: var(--ember-hi); font-weight: 500; }
.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a { font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--soft);
  text-decoration: none; padding-block: 8px; }
.nav a:hover { color: var(--cream); }
.menu-btn { display: none; width: 44px; height: 44px; margin-right: -8px; position: relative; }
.menu-btn span, .menu-btn span::before, .menu-btn span::after { position: absolute; left: 11px; width: 22px; height: 2px;
  background: var(--cream); content: ""; }
.menu-btn span { top: 21px; }
.menu-btn span::before { left: 0; top: -7px; }
.menu-btn span::after { left: 0; top: 7px; }
.menu-btn[aria-expanded="true"] span { background: transparent; }
.menu-btn[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.menu-btn[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px;
  border-radius: 2px; font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--fast), border-color var(--fast); }
.btn-fire { background: var(--ember); color: var(--ember-ink); }
.btn-fire:hover { background: var(--ember-hi); }
.btn-line { border: 1px solid var(--edge); color: var(--cream); }
.btn-line:hover { border-color: var(--cream); background: var(--ground-2); }
.btn-s { min-height: 40px; padding: 0 18px; }

/* The first view: the fire, the headline, tonight's hours and the two ways on. The text column starts on the same
   line as the header's logo and every section below (100cqw is the window without its scroll bar). */
.hero { display: grid; grid-template-columns: minmax(0, 44fr) minmax(0, 56fr); container-type: inline-size;
  min-height: clamp(560px, calc(100svh - var(--head) - 37px), 860px); border-bottom: 1px solid var(--line); }
.hero-pic { grid-column: 2; grid-row: 1; position: relative; display: block; background: var(--ground-2); }
.hero-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-text { grid-column: 1; grid-row: 1; align-self: center; display: flex; flex-direction: column;
  padding: 56px clamp(32px, 4vw, 64px) 48px max(var(--gut), calc((100cqw - var(--max)) / 2)); }
.hero h1 { font-size: clamp(2.35rem, 1.2rem + 4.6vw, 5rem); line-height: .98; margin: 16px 0 22px; text-wrap: balance; }
/* Slovenian's carons (č š ž) stand above the cap height in Cormorant and met the descender of the line above (the j of
   "ognju" on the ž of "postreženo"): its headings get the room for them. */
:lang(sl) :is(h1, h2, h3) { line-height: 1.1; }
.hero h1:lang(sl) { line-height: 1.14; }
.today { display: flex; align-items: center; gap: 10px; font-size: 16px; color: var(--cream); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--ember); flex: none; }
.today.closed .dot { background: var(--dim); }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 30px; }
.lede { color: var(--soft); max-width: 34em; }
.facts { margin-top: 30px; border-top: 1px solid var(--line); max-width: 30rem; }
.facts div { display: grid; grid-template-columns: 6.5rem 1fr; align-items: baseline; gap: 12px; padding: 10px 0;
  border-bottom: 1px solid var(--line); }
.facts dt { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.facts dd { font-size: 16px; }
.facts a { text-decoration: underline; text-decoration-color: var(--edge); text-underline-offset: 4px; }
.facts a:hover { text-decoration-color: var(--cream); }

/* Sections */
.menu, .room, .book, .visit { padding-block: clamp(72px, 9vw, 128px); }
.sec-head { max-width: 44rem; }
.sec-head > p:last-child { color: var(--soft); }
/* The menu's note sits beside its headline, its last line on the headline's baseline. */
.menu .sec-head { max-width: none; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 56px; }
.menu .sec-head > :not(:last-child) { grid-column: 1; }
.menu .sec-head > p:last-child { grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-bottom: 7px; }
.menu .sec-head h2 { margin-bottom: 0; }
.courses { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 32px; padding-block: 14px; border-block: 1px solid var(--line); }
.courses a { font-size: 13px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: var(--soft);
  text-decoration: none; padding-block: 6px; }
.courses a:hover { color: var(--cream); }

/* The menu, course by course, each picture beside or above its own dish */
.course { margin-top: clamp(56px, 7vw, 88px); }
.courses + .course { margin-top: clamp(40px, 5vw, 64px); }
.course h3 { font-size: clamp(1.9rem, 1.4rem + 1.4vw, 2.6rem); padding-bottom: 14px; border-bottom: 1px solid var(--line); }
/* A course jumped to keeps some air under the header (and the house red its top edge). */
.course h3 { scroll-margin-top: 28px; }
.d-name { font-family: var(--serif); font-size: 1.5rem; font-weight: 600; line-height: 1.15; }
.d-price { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; font-variant-numeric: lining-nums; }
.d-desc { grid-column: 1 / -1; color: var(--soft); font-size: 15px; margin-top: 3px; }
.dishes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 64px; margin-top: 12px; }
.dishes-one { grid-template-columns: 1fr; }
.dishes-three { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 40px; }
.dishes li, .plate figcaption { display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: baseline;
  padding: 16px 0 15px; border-bottom: 1px solid var(--line); }

/* To begin: two plates, 7 : 5, the same height, each with its own line under it */
.plates { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 16px; margin-top: 28px; }
.plate picture { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ground-2); }
.plate + .plate picture { aspect-ratio: 80 / 63; }   /* 16 : 9 at five sevenths of the width: the same height */
.plate img { width: 100%; height: 100%; object-fit: cover; }

/* From the fire: the tall mackerel against the two meats */
.pics { display: grid; gap: 16px; margin-top: 28px; }
.pics figure, .wine, .room-pic { position: relative; overflow: hidden; background: var(--ground-2); }
.pics img, .wine img, .room-pic img { width: 100%; height: 100%; object-fit: cover; }
.pics-mosaic { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
.pics-mosaic figure { aspect-ratio: 2 / 1; }
.pics-mosaic .tall { grid-row: 1 / span 2; aspect-ratio: auto; }
.pics-mosaic .tall img, .wine img { position: absolute; inset: 0; }
.pics figcaption, .wine figcaption { position: absolute; left: 0; bottom: 0; padding: 8px 12px 7px; background: var(--ground);
  color: var(--cream); font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; line-height: 1.3; }

/* To finish and to drink, beside the house red: one top line, one bottom line */
.course-end { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 0 56px; margin-top: clamp(56px, 7vw, 88px); }
.course-lists .course:first-child { margin-top: 0; }
.course-lists .course + .course { margin-top: 48px; }
.drink-note { color: var(--soft); font-size: 16px; margin-top: 18px; }
.wine { min-height: 360px; }

/* The room */
.room { background: var(--deep); border-block: 1px solid var(--line); }
.room-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.room-pic { aspect-ratio: 3 / 2; }
.room-text > p:not(.eyebrow) { color: var(--soft); margin-top: 14px; }
.room-text .aside { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 16px; }
.room-text .aside b { color: var(--cream); font-weight: 500; }

/* The booking: party, day, time, who; then the confirmation in its place */
.book-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.book-intro { position: sticky; top: calc(var(--head) + 32px); }
.book-intro > p:not(.eyebrow) { color: var(--soft); margin-bottom: 12px; }
.booking, .booked { background: var(--ground-2); border: 1px solid var(--line); padding: clamp(16px, 3.4vw, 40px); }
.js .needs-js { display: none; }
.needs-js { color: var(--soft); margin-bottom: 20px; }
.step { padding-bottom: 28px; margin-bottom: 26px; border-bottom: 1px solid var(--line); }
.step legend { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; line-height: 1.2; padding: 0; }
.n { display: inline-block; min-width: 1.5em; color: var(--ember-hi); font-variant-numeric: lining-nums; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { position: relative; display: block; }
.chip input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; }
.chip input:disabled { cursor: not-allowed; }
.chip span { display: flex; align-items: center; justify-content: center; min-width: 48px; min-height: 48px; padding: 0 14px;
  border: 1px solid var(--edge); border-radius: 2px; font-size: 16px; font-weight: 500; font-variant-numeric: tabular-nums;
  transition: border-color var(--fast); }   /* the fill and the text change at once: a fade would pass through unreadable pairs */
.chip input:hover:not(:disabled) + span { border-color: var(--cream); }
.chip input:checked + span { background: var(--ember); border-color: var(--ember); color: var(--ember-ink); }
.chip input:focus-visible + span { outline: 2px solid var(--ember-hi); outline-offset: 3px; }
.chip input:disabled + span { border-style: dashed; border-color: var(--line); color: var(--dim); }
.chip .x { text-decoration: line-through; }
/* The days and the times: two grids across the whole panel, with one gap */
.chips-day, .chips-time { display: grid; gap: 6px; }
.chips-day { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.chips-time { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); }
.chips-day span { flex-direction: column; gap: 3px; min-width: 0; min-height: 76px; padding: 8px 2px; line-height: 1; }   /* seven across a phone: no 48 px floor */
.chips-day small { font-size: 12px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; }
.chips-day b { font-family: var(--serif); font-size: 1.6rem; font-weight: 600; line-height: .9; font-variant-numeric: lining-nums; }
.chips-time span { min-width: 0; }
.times { margin-top: 4px; }
.slot-group { margin-top: 18px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); }
.slot-group + .chips { margin-top: 8px; }
.hint { color: var(--soft); font-size: 15px; margin-top: 12px; }
.err { color: var(--err); font-size: 15px; margin-top: 8px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-top: 16px; }
.field-wide { grid-column: 1 / -1; }
.field label { display: block; font-size: 15px; font-weight: 500; margin-bottom: 6px; }
.opt { color: var(--dim); font-weight: 400; }
.field input, .field textarea { width: 100%; min-height: 48px; padding: 11px 14px; background: var(--ground); color: var(--cream);
  border: 1px solid var(--edge); border-radius: 2px; font-size: 16px; }
.field textarea { resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 1px; border-color: var(--ember-hi); }
.field ::placeholder { color: var(--dim); opacity: 1; }
.field [aria-invalid="true"] { border-color: var(--err); }
.field .hint { margin-top: 6px; font-size: 14px; }
.errors { border: 1px solid var(--err); padding: 16px 20px; margin-bottom: 26px; }
.errors p { font-weight: 500; }
.errors ul { list-style: disc; padding-left: 20px; margin-top: 6px; }
.errors a { color: var(--err); text-underline-offset: 3px; }
.submit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.summary { font-family: var(--serif); font-size: 1.45rem; font-weight: 600; }
.booked h3 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.8rem); margin: 10px 0 14px; }
.booked #booked-text { font-size: 19px; margin-bottom: 18px; }
.booked-facts { border-top: 1px solid var(--line); margin-bottom: 16px; }
.booked-facts div { display: grid; grid-template-columns: 9rem 1fr; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.booked-facts dt { font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--dim); padding-top: 3px; }
.booked-facts a { text-underline-offset: 3px; }
.booked-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Visit: the hours, the way there and a drawn map of it */
.visit { border-top: 1px solid var(--line); }
.visit-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr); gap: 40px 56px; margin-top: 40px; align-items: start; }
.visit h3 { font-size: 1.7rem; margin-bottom: 14px; }
.visit .h3-next { margin-top: 30px; }
.visit-grid p { color: var(--soft); margin-bottom: 10px; }
.visit address { color: var(--cream); font-size: 19px; margin-bottom: 10px; }
.visit-grid .contact { color: var(--cream); font-size: 18px; }
.contact a { text-underline-offset: 4px; text-decoration-color: var(--edge); }
.hours div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.hours dt { color: var(--soft); }
.hours dd { text-align: right; font-variant-numeric: tabular-nums; }
.hours + .small { margin-top: 12px; }
.map { border: 1px solid var(--line); background: var(--ground-2); color: var(--soft); }
.map svg { display: block; width: 100%; height: auto; }
.map .streets path { fill: none; stroke: var(--line); stroke-width: 10; }
.map .streets .lane { stroke-width: 6; }
.map .hall { fill: #2A231C; stroke: #4A4036; }
.map .label { fill: currentColor; font-size: 12px; font-weight: 500; letter-spacing: .06em; }
.map .route { fill: none; stroke: var(--ember); stroke-width: 3; stroke-dasharray: 2 7; stroke-linecap: round; stroke-linejoin: round; }
.map .tram { fill: var(--ground); stroke: var(--cream); stroke-width: 2; }
.map .tram-t { color: var(--cream); fill: currentColor; font-size: 14px; font-weight: 500; }
.map .here { fill: var(--ember); }
.map .here-ring { fill: none; stroke: var(--ember); stroke-width: 2; }
.map .here-name { color: var(--cream); fill: currentColor; font-family: var(--serif); font-size: 18px; font-weight: 600; letter-spacing: 0; }
.map figcaption { padding: 10px 14px 12px; border-top: 1px solid var(--line); font-size: 14px; color: var(--dim); }

.foot { border-top: 1px solid var(--line); background: var(--deep); padding: 48px 0 56px; }
.foot-in { display: grid; gap: 14px; justify-items: start; }
.foot-in > p { max-width: 46rem; }
.foot p { color: var(--soft); font-size: 15px; }
.foot .small { color: var(--dim); font-size: 14px; }
.foot a { text-underline-offset: 3px; }

/* Narrower screens */
@media (max-width: 1100px) {
  .visit-grid { grid-template-columns: 1fr 1fr; }
  .map { grid-column: 1 / -1; max-width: 560px; }
}
@media (max-width: 1023px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .hero-pic { grid-column: 1; grid-row: 1; aspect-ratio: 16 / 9; max-height: 62vh; width: 100%; }
  .hero-text { grid-column: 1; grid-row: 2; padding: 28px var(--gut) 44px; max-width: 46rem; }
  .book-in, .room-in { grid-template-columns: 1fr; }
  .book-intro { position: static; }
}
@media (max-width: 760px) {
  :root { --head: 56px; }
  .menu-btn { display: block; }
  .top-in { gap: 12px; }
  .top .btn-s { margin-left: auto; }
  .top .long, .demo-bar .long { display: none; }
  .top .short, .demo-bar .short { display: inline; }
  /* The sections behind the button: a panel under the header, one link a row. `.top-in` is also `.wrap`, and an
     absolute box is placed in its padding box, so 0 is the screen's edge (-gut put the panel 16 px off it, D-102) */
  .nav { display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0;
    flex-direction: column; gap: 0; padding: 4px var(--gut) 12px; background: var(--ground); border-bottom: 1px solid var(--line); }
  .nav.open { display: flex; }
  .nav a { padding-block: 14px; border-bottom: 1px solid var(--line); font-size: 14px; }
  .nav a:last-child { border-bottom: 0; }
  .logo { font-size: 24px; }
  .demo-bar { font-size: 12px; gap: 12px; }
  .hero-pic { aspect-ratio: 4 / 3; max-height: 46vh; }
  .hero-pic img { object-position: 42% 50%; }
  .menu .sec-head, .plates, .dishes, .dishes-three, .course-end, .fields, .visit-grid { grid-template-columns: 1fr; }
  .menu .sec-head > p:last-child { grid-column: 1; grid-row: auto; margin: 0; }
  .plate + .plate { margin-top: 24px; }
  .plate + .plate picture { aspect-ratio: 16 / 9; }
  .pics-mosaic { gap: 8px; }
  .pics-mosaic figcaption { display: none; }   /* the names follow in the list right under the pictures */
  .wine { min-height: 0; aspect-ratio: 4 / 5; margin-top: 40px; }
  .map { max-width: none; }
}
@media (max-width: 420px) {
  body { font-size: 16px; }
  .hero-text { padding-top: 22px; }
  .hero h1 { margin: 12px 0 16px; }
  .cta { margin: 18px 0 24px; gap: 10px; }
  .cta .btn { flex: 1 1 auto; padding: 0 14px; letter-spacing: .1em; }
  .cta .long { display: none; }   /* the two buttons side by side on a phone: the Slovenian menu button's short word */
  .cta .short { display: inline; }
  .btn-s { padding: 0 14px; letter-spacing: .12em; }
  .top-in { gap: 8px; }   /* the Slovenian Rezervacija is wider than Book: room for it beside the logo and the menu */
  .chips-day span { min-height: 66px; }
  .chips-day b { font-size: 1.35rem; }
  .chips-day small { font-size: 11px; letter-spacing: .04em; }
  .chips-day label:first-child small:first-child { font-size: 10px; letter-spacing: 0; }   /* Danes, Today: the widest word in the narrowest chip */
  .booked-facts div { grid-template-columns: 1fr; gap: 2px; }
}

@media (max-width: 359px) {   /* the smallest phones (320 px): the bar's three items still on one line */
  .logo { font-size: 20px; }
  .btn-s { padding: 0 10px; letter-spacing: .06em; }
}

/* Reduced motion: the only movement is a colour change on hover, and that becomes instant. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}