/* THE INDEPENDENT GEMBROOK / WEBSITE 063
   Gembrook Dining House × Country Editorial Grid
   HTML + CSS only
*/

:root {
  --chalk: #f3f2ec;
  --bottle: #19211c;
  --terracotta: #b95f44;
  --wheat: #d8c6a7;
  --bluegrey: #839399;
  --sage: #aeb9a4;
  --vermilion: #c84132;
  --ink-soft: #677068;
  --line: rgba(25,33,28,.22);
  --white: #fffdf7;
  --serif: "Libre Caslon Display", Georgia, serif;
  --sans: "Manrope", Arial, sans-serif;
  --condensed: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --mono: "DM Mono", Consolas, monospace;
  --max: 1520px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: hidden;
  background: var(--chalk);
  color: var(--bottle);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.58;
}

img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

a {
  color: inherit;
  text-underline-offset: .2em;
}

a:focus-visible {
  outline: 2px solid var(--vermilion);
  outline-offset: 4px;
}

.skip-link {
  position: fixed;
  top: .8rem;
  left: .8rem;
  z-index: 1000;
  padding: .7rem .9rem;
  background: var(--chalk);
  border: 1px solid var(--bottle);
  transform: translateY(-170%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.page-shell {
  width: min(100% - 3rem,var(--max));
  margin-inline: auto;
}

.ledger-masthead {
  display: grid;
  grid-template-columns: minmax(340px,1fr) minmax(500px,1.65fr) minmax(180px,.6fr);
  align-items: end;
  gap: 1.6rem;
  width: min(100% - 3rem,var(--max));
  margin: 0 auto;
  padding: 1.25rem 0 1rem;
  border-bottom: 1px solid var(--bottle);
}

.brand-lockup {
  display: flex;
  align-items: baseline;
  gap: .8rem;
}

.brand {
  font-family: var(--condensed);
  font-size: clamp(1.9rem,2.9vw,3.2rem);
  font-weight: 700;
  letter-spacing: -.035em;
  line-height: .8;
  text-decoration: none;
}

.brand-lockup span,
.masthead-ref,
.kicker,
.table-note,
.hero-photo figcaption,
.menu-no,
.menu-ref,
.menu-image figcaption,
.kitchen-sequence span,
.reservation-card,
.location-marker,
.location-card > span,
.footer-brand p,
.footer-ledger,
.legal-masthead p,
.legal-index {
  font-family: var(--mono);
  font-size: .67rem;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.brand-lockup span {
  white-space: nowrap;
  color: var(--ink-soft);
}

.primary-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem 1.1rem;
}

.primary-nav a {
  position: relative;
  font-family: var(--condensed);
  font-size: .92rem;
  font-weight: 700;
  letter-spacing: .045em;
  text-decoration: none;
  text-transform: uppercase;
}

.primary-nav a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -.35rem;
  left: 0;
  height: 2px;
  background: var(--terracotta);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 150ms ease;
}

.primary-nav a:hover::after,
.primary-nav a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

.masthead-ref {
  display: grid;
  justify-items: end;
  line-height: 1.55;
}

.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  min-height: 770px;
  padding: clamp(3.5rem,7vw,7rem) 0 clamp(4.7rem,8vw,8rem);
}

.hero-copy {
  position: relative;
  z-index: 3;
  align-self: center;
  padding-right: clamp(1rem,5vw,5rem);
}

.kicker {
  margin: 0 0 1.15rem;
  color: var(--ink-soft);
}

.hero h1,
.section-head h2,
.menu-head h2,
.kitchen-copy h2,
.gather-copy h2,
.visit-type h2,
.legal-hero h1,
.legal-copy h2 {
  margin: 0;
  font-family: var(--condensed);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .84;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 11ch;
  font-size: clamp(4.7rem,8.1vw,9.4rem);
}

.hero h1 em {
  color: var(--terracotta);
  font-family: var(--serif);
  font-weight: 400;
  text-transform: none;
}

.hero-intro {
  max-width: 38rem;
  margin: 2.2rem 0 0;
  font-size: clamp(1rem,1.25vw,1.18rem);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 2.2rem;
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding-bottom: .23rem;
  border-bottom: 1px solid currentColor;
  font-family: var(--condensed);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-decoration: none;
  text-transform: uppercase;
}

.text-link span {
  color: var(--vermilion);
  transition: transform 160ms ease;
}

.text-link:hover span {
  transform: translate(.2rem,.2rem);
}

.table-note {
  color: var(--ink-soft);
}

.hero-grid {
  position: relative;
  min-height: 640px;
}

.hero-photo {
  position: absolute;
  margin: 0;
}

.hero-photo--main {
  top: 2%;
  right: 2%;
  width: 71%;
  height: 76%;
}

.hero-photo--detail {
  bottom: 1%;
  left: 2%;
  width: 38%;
  height: 47%;
  border: .65rem solid var(--chalk);
}

.hero-photo figcaption {
  position: absolute;
  right: 0;
  bottom: -1.6rem;
}

.hero-photo::before {
  content: "";
  position: absolute;
  inset: -.55rem;
  z-index: -1;
  border: 1px solid var(--line);
}

.table-plan {
  position: absolute;
  top: 10%;
  left: 4%;
  width: 66%;
  height: 58%;
  pointer-events: none;
}

.plate {
  position: absolute;
  display: block;
  border: 1px solid var(--bottle);
  border-radius: 50%;
  background: rgba(243,242,236,.7);
}

.plate--1 { top: 4%; left: 5%; width: 5rem; height: 5rem; }
.plate--2 { top: 30%; left: 31%; width: 7rem; height: 7rem; }
.plate--3 { right: 4%; bottom: 6%; width: 4.4rem; height: 4.4rem; }

.grid-line {
  position: absolute;
  display: block;
  border-top: 1px dashed var(--bottle);
  opacity: .42;
}

.grid-line--1 { top: 18%; left: 4.5rem; width: 49%; transform: rotate(15deg); }
.grid-line--2 { right: 2rem; bottom: 18%; width: 53%; transform: rotate(-10deg); }

.table-marker {
  position: absolute;
  top: -1rem;
  right: 3%;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 50%;
  background: var(--bluegrey);
  color: var(--white);
  font-family: var(--mono);
  font-size: .66rem;
}

.hero-no {
  position: absolute;
  right: -1rem;
  bottom: 0;
  color: rgba(131,147,153,.17);
  font-family: var(--condensed);
  font-size: clamp(9rem,16vw,18rem);
  font-weight: 700;
  line-height: .72;
}

.intro-section {
  padding: clamp(5rem,8vw,8rem) 0;
  border-top: 1px solid var(--bottle);
}

.section-head {
  display: grid;
  grid-template-columns: .3fr 1.05fr .9fr;
  gap: 2rem;
  align-items: end;
}

.section-head .kicker {
  margin: 0;
}

.section-head h2 {
  font-size: clamp(4rem,7.3vw,7.6rem);
}

.section-head > p:last-child {
  max-width: 42rem;
  margin: 0;
}

.menu-section {
  padding: clamp(5rem,9vw,9rem) 0;
  background: var(--bottle);
  color: var(--chalk);
}

.menu-head {
  display: grid;
  grid-template-columns: .3fr 1.7fr;
  gap: 2rem;
  align-items: end;
  margin-bottom: 3rem;
}

.menu-head .kicker {
  color: rgba(243,242,236,.62);
}

.menu-head h2 {
  font-size: clamp(4rem,7.5vw,7.9rem);
}

.menu-ledger {
  display: grid;
  grid-template-columns: repeat(12,1fr);
  border-top: 1px solid rgba(243,242,236,.6);
  border-left: 1px solid rgba(243,242,236,.6);
}

.menu-panel {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-content: space-between;
  min-height: 230px;
  padding: 1.2rem;
  border-right: 1px solid rgba(243,242,236,.6);
  border-bottom: 1px solid rgba(243,242,236,.6);
}

.menu-panel--start { grid-column: span 4; background: var(--terracotta); }
.menu-panel--main { grid-column: span 5; background: var(--wheat); color: var(--bottle); }
.menu-panel--finish { grid-column: span 3; background: var(--bluegrey); }
.menu-panel--pour { grid-column: span 6; background: var(--sage); color: var(--bottle); }

.menu-panel h3 {
  margin: .25rem 0 .65rem;
  font-family: var(--condensed);
  font-size: clamp(2.8rem,4.4vw,4.9rem);
  line-height: .9;
}

.menu-panel p {
  max-width: 30rem;
  margin: 0;
}

.menu-ref {
  grid-column: 2;
  align-self: end;
}

.menu-images {
  display: grid;
  grid-template-columns: 1.25fr .55fr;
  gap: clamp(1rem,2.5vw,2.5rem);
  align-items: end;
  margin-top: 2.7rem;
}

.menu-image {
  margin: 0;
}

.menu-image--wide { height: clamp(360px,46vw,650px); }
.menu-image--tight { height: clamp(330px,38vw,560px); }

.menu-image figcaption {
  margin-top: .55rem;
  color: rgba(243,242,236,.65);
}

.kitchen-section {
  padding: clamp(5rem,9vw,9rem) 0;
  background: var(--wheat);
}

.kitchen-shell {
  display: grid;
  grid-template-columns: .75fr 1.25fr;
  gap: clamp(2rem,6vw,6rem);
  align-items: start;
}

.kitchen-copy h2 {
  font-size: clamp(4.1rem,6.8vw,7.3rem);
}

.kitchen-copy p {
  max-width: 36rem;
}

.kitchen-sequence {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  border-top: 1px solid var(--bottle);
  border-left: 1px solid var(--bottle);
}

.kitchen-sequence article {
  min-height: 210px;
  padding: 1rem;
  border-right: 1px solid var(--bottle);
  border-bottom: 1px solid var(--bottle);
}

.kitchen-sequence article:nth-child(2) { background: var(--terracotta); color: var(--white); }
.kitchen-sequence article:nth-child(3) { background: var(--bluegrey); }
.kitchen-sequence article:nth-child(4) { background: var(--chalk); }

.kitchen-sequence h3 {
  margin: .65rem 0 .5rem;
  font-family: var(--condensed);
  font-size: 2.1rem;
}

.kitchen-sequence p {
  margin: 0;
}

.kitchen-photos {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.2fr .55fr;
  gap: clamp(1rem,2.5vw,2.5rem);
  align-items: end;
  margin-top: 1rem;
}

.kitchen-photos figure {
  margin: 0;
}

.kitchen-photos figure:first-child {
  height: clamp(370px,47vw,650px);
}

.kitchen-photos figure:last-child {
  height: clamp(320px,35vw,520px);
}

.gather-section {
  padding: clamp(5rem,9vw,9rem) 0;
}

.gather-grid {
  position: relative;
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(2rem,6vw,6rem);
  align-items: center;
}

.gather-copy h2 {
  font-size: clamp(4.2rem,7vw,7.5rem);
}

.gather-copy p {
  max-width: 38rem;
}

.gather-photo {
  min-height: 590px;
  margin: 0;
  border: 1rem solid var(--sage);
}

.reservation-card {
  position: absolute;
  right: 4%;
  bottom: -2rem;
  z-index: 4;
  display: grid;
  gap: .35rem;
  min-width: 12rem;
  padding: 1rem;
  background: var(--chalk);
  border: 1px solid var(--bottle);
}

.reservation-card strong {
  font-family: var(--condensed);
  font-size: 1.5rem;
}

.reservation-card i {
  color: var(--vermilion);
  font-style: normal;
}

.visit-section {
  position: relative;
  min-height: 760px;
  overflow: hidden;
  background: var(--bottle);
  color: var(--chalk);
}

.visit-image {
  position: absolute;
  inset: 0 0 0 47%;
}

.visit-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(25,33,28,.96), rgba(25,33,28,.18));
}

.country-grid {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: .22;
}

.country-grid span {
  position: absolute;
  display: block;
}

.country-grid span:nth-child(1) { top: 24%; right: 0; left: 0; border-top: 1px solid var(--chalk); }
.country-grid span:nth-child(2) { top: 62%; right: 0; left: 0; border-top: 1px dashed var(--chalk); }
.country-grid span:nth-child(3) { top: 0; bottom: 0; left: 22%; border-left: 1px dashed var(--chalk); }
.country-grid span:nth-child(4) { top: 0; bottom: 0; right: 18%; border-left: 1px solid var(--chalk); }

.location-marker,
.visit-type,
.location-card {
  position: relative;
  z-index: 4;
}

.location-marker {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: min(100% - 3rem,var(--max));
  margin: 0 auto;
  padding-top: 4rem;
}

.location-marker span {
  width: .9rem;
  height: .9rem;
  border-radius: 50%;
  background: var(--terracotta);
}

.location-marker p {
  margin: 0;
}

.visit-type {
  width: min(100% - 3rem,var(--max));
  margin: 5rem auto 0;
}

.visit-type strong {
  display: block;
  color: var(--bluegrey);
  font-family: var(--condensed);
  font-size: clamp(9rem,18vw,19rem);
  font-weight: 700;
  line-height: .58;
}

.visit-type h2 {
  margin-top: 1.1rem;
  font-size: clamp(4rem,8vw,9rem);
}

.location-card {
  position: absolute;
  right: max(1.5rem,calc((100vw - var(--max))/2));
  bottom: 4rem;
  width: min(420px,calc(100% - 3rem));
  padding: 1.6rem;
  background: var(--chalk);
  color: var(--bottle);
  border-top: 5px solid var(--vermilion);
}

.location-card address,
.footer-address,
.legal-copy address {
  font-style: normal;
}

.location-card address {
  margin: 1.2rem 0 1.8rem;
  font-size: 1.08rem;
  line-height: 1.6;
}

.site-footer {
  display: grid;
  grid-template-columns: 1.2fr 1fr .78fr;
  gap: 2rem;
  padding: 3.2rem max(1.5rem,calc((100vw - var(--max))/2)) 2rem;
  background: var(--bottle);
  color: var(--chalk);
  border-top: 1px solid rgba(185,95,68,.9);
}

.footer-brand {
  position: relative;
}

.footer-marker {
  position: absolute;
  top: -1rem;
  left: -1rem;
  width: .75rem;
  height: .75rem;
  border-radius: 50%;
  background: var(--terracotta);
}

.footer-brand h2 {
  margin: 0;
  max-width: 8ch;
  font-family: var(--condensed);
  font-size: clamp(4.2rem,7vw,7.6rem);
  line-height: .78;
  letter-spacing: -.045em;
}

.footer-brand p {
  margin: 1rem 0 0;
}

.footer-nav {
  display: grid;
  grid-template-columns: repeat(2,minmax(120px,1fr));
  gap: .5rem 1.2rem;
  align-content: start;
}

.footer-nav a,
.footer-ledger a {
  width: fit-content;
  color: rgba(243,242,236,.82);
  font-family: var(--condensed);
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
}

.footer-address {
  color: rgba(243,242,236,.78);
}

.footer-ledger {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(243,242,236,.28);
  color: rgba(243,242,236,.62);
}

/* Legal */
.legal-masthead {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 1.5rem;
  width: min(100% - 3rem,var(--max));
  margin: 0 auto;
  padding: 1.35rem 0 1.05rem;
  border-bottom: 1px solid var(--bottle);
}

.legal-masthead p {
  margin: 0;
}

.legal-masthead nav {
  display: flex;
  justify-content: end;
  gap: 1rem;
}

.legal-masthead nav a {
  font-family: var(--condensed);
  font-size: .9rem;
  font-weight: 700;
  text-transform: uppercase;
}

.legal-main {
  width: min(100% - 3rem,var(--max));
  margin: 0 auto;
}

.legal-hero {
  display: grid;
  grid-template-columns: .3fr 1.24fr .74fr;
  gap: 2rem;
  align-items: end;
  padding: clamp(4.5rem,8vw,8rem) 0;
  border-bottom: 1px solid var(--bottle);
}

.legal-hero .kicker {
  align-self: start;
}

.legal-hero h1 {
  font-size: clamp(4.8rem,10vw,11rem);
}

.legal-hero > p:last-child {
  max-width: 32rem;
}

.legal-section {
  display: grid;
  grid-template-columns: .3fr 1.7fr;
  gap: clamp(2rem,6vw,6rem);
  padding: clamp(4.5rem,8vw,8rem) 0;
  border-bottom: 1px solid var(--bottle);
}

.legal-index {
  position: sticky;
  top: 1rem;
  align-self: start;
}

.legal-index span {
  display: block;
  margin-bottom: .4rem;
  color: var(--terracotta);
  font-size: 2rem;
}

.legal-index p {
  margin: 0;
}

.legal-copy {
  max-width: 830px;
}

.legal-copy h2 {
  margin-bottom: 2rem;
  font-size: clamp(3.8rem,6.2vw,7rem);
}

.legal-copy h3 {
  margin: 2.1rem 0 .45rem;
  font-family: var(--condensed);
  font-size: 1.45rem;
  text-transform: uppercase;
}

.legal-copy p,
.legal-copy address {
  max-width: 720px;
}

.legal-back {
  display: inline-block;
  margin-top: 2.5rem;
  font-family: var(--condensed);
  font-weight: 700;
  text-transform: uppercase;
}

.site-footer--legal {
  grid-template-columns: 1fr 1fr;
}

.site-footer--legal .footer-ledger {
  grid-column: 1 / -1;
}

@media (max-width: 1160px) {
  .ledger-masthead {
    grid-template-columns: 1fr auto;
  }

  .primary-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-content: flex-start;
    padding-top: .4rem;
  }

  .masthead-ref {
    grid-column: 2;
    grid-row: 1;
  }

  .menu-panel--start,
  .menu-panel--main,
  .menu-panel--finish,
  .menu-panel--pour {
    grid-column: span 6;
  }

  .kitchen-sequence {
    grid-template-columns: repeat(2,1fr);
  }
}

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    gap: 3rem;
    min-height: 0;
  }

  .hero-copy {
    padding-right: 0;
  }

  .hero-grid {
    min-height: 620px;
  }

  .section-head,
  .menu-head,
  .legal-hero,
  .legal-section {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .kitchen-shell {
    grid-template-columns: 1fr;
  }

  .kitchen-photos {
    grid-column: 1;
  }

  .gather-grid {
    grid-template-columns: 1fr;
  }

  .gather-photo {
    min-height: 520px;
  }

  .visit-image {
    inset: 0 0 0 38%;
  }

  .site-footer {
    grid-template-columns: 1fr 1fr;
  }

  .footer-address {
    grid-column: 2;
  }

  .legal-index {
    position: static;
  }
}

@media (max-width: 680px) {
  body {
    font-size: 15px;
  }

  .page-shell,
  .ledger-masthead,
  .legal-main,
  .legal-masthead {
    width: min(100% - 2rem,var(--max));
  }

  .ledger-masthead {
    grid-template-columns: 1fr;
    gap: .8rem;
    padding-top: 1rem;
  }

  .brand-lockup {
    display: grid;
    gap: .35rem;
  }

  .brand-lockup span {
    white-space: normal;
  }

  .masthead-ref {
    grid-column: 1;
    grid-row: 2;
    justify-items: start;
  }

  .primary-nav {
    grid-column: 1;
    grid-row: 3;
    justify-content: flex-start;
    gap: .3rem .9rem;
    padding-top: .7rem;
    border-top: 1px dashed var(--line);
  }

  .primary-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 2.2rem;
  }

  .hero {
    padding: 3.6rem 0 4.7rem;
  }

  .hero h1 {
    font-size: clamp(3.9rem,17.5vw,6rem);
  }

  .hero-actions {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero-grid {
    min-height: 520px;
  }

  .hero-photo--main {
    width: 79%;
  }

  .hero-photo--detail {
    width: 43%;
    border-width: .45rem;
  }

  .hero-no {
    font-size: 9rem;
  }

  .intro-section,
  .menu-section,
  .kitchen-section,
  .gather-section {
    padding: 4.7rem 0;
  }

  .section-head h2,
  .menu-head h2,
  .kitchen-copy h2,
  .gather-copy h2 {
    font-size: clamp(3.8rem,16vw,5.7rem);
  }

  .menu-panel--start,
  .menu-panel--main,
  .menu-panel--finish,
  .menu-panel--pour {
    grid-column: span 12;
  }

  .menu-images {
    grid-template-columns: 1fr;
  }

  .menu-image--wide,
  .menu-image--tight {
    height: 430px;
  }

  .menu-image--tight {
    width: 68%;
    margin-left: auto;
  }

  .kitchen-sequence {
    grid-template-columns: 1fr;
  }

  .kitchen-photos {
    grid-template-columns: 1fr;
  }

  .kitchen-photos figure:first-child,
  .kitchen-photos figure:last-child {
    height: 430px;
  }

  .kitchen-photos figure:last-child {
    width: 68%;
    margin-left: auto;
  }

  .gather-photo {
    min-height: 470px;
    border-width: .65rem;
  }

  .reservation-card {
    position: relative;
    right: auto;
    bottom: auto;
    width: fit-content;
    margin: -1.8rem 1rem 0 auto;
  }

  .visit-section {
    min-height: 700px;
  }

  .visit-image {
    inset: 0;
    opacity: .28;
  }

  .visit-image::after {
    background: rgba(25,33,28,.48);
  }

  .location-marker,
  .visit-type {
    width: min(100% - 2rem,var(--max));
  }

  .visit-type {
    margin-top: 4rem;
  }

  .visit-type strong {
    font-size: clamp(8rem,37vw,12rem);
  }

  .visit-type h2 {
    font-size: clamp(4.1rem,18vw,6.5rem);
  }

  .location-card {
    right: 1rem;
    bottom: 2rem;
    left: 1rem;
    width: auto;
  }

  .site-footer {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding-top: 3.4rem;
  }

  .footer-address {
    grid-column: 1;
  }

  .footer-ledger {
    flex-direction: column;
  }

  .legal-masthead {
    grid-template-columns: 1fr auto;
  }

  .legal-masthead p {
    display: none;
  }

  .legal-masthead nav {
    flex-wrap: wrap;
  }

  .legal-hero,
  .legal-section {
    padding: 4.2rem 0;
  }

  .legal-hero h1 {
    font-size: clamp(4.4rem,19vw,6.8rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: .01ms !important;
  }
}