/* ============================================================================
   Corvella — seafood restaurant
   One stylesheet, no build step, no external request.

   0.  Tokens
   1.  Reset and base type
   2.  Helpers
   3.  The logo
   4.  Rails and full-screen menu
   5.  Loader and first paint
   6.  Hero
   7.  Sections, notch, scroll cue
   8.  Photographs and scroll parallax
   9.  Grids
   10. Plates
   11. Wine banner
   12. Carousel
   13. The sentence and the window
   14. Booking
   15. Footer
   16. Scroll reveals
   17. Breakpoints
   18. Reduced motion
   ========================================================================== */

/* --- 0. Tokens ----------------------------------------------------------- */

:root {
  /* The blue carries the whole design, so it needs three values, not one:
     the solid, one step darker for hover, and one lightened for rules and
     drawings that sit ON the blue. Change one and you change all three. */
  --blue: #0b3a5b;          /* 10.8:1 on --cream, 11.9:1 under white text */
  --blue-dark: #06283e;     /* hover; 13.9:1 on --cream */
  --blue-light: #6e9dbb;    /* rules and line art on the blue; 4.1:1 on --blue */
  --cream: #f1f5f7;
  --white: #fff;

  --ink: var(--blue);
  --page: var(--cream);

  /* Type scale. Declared once here, redeclared at each breakpoint in part 17.
     No heading ever carries its own media query. */
  --size-body: 1rem;
  --size-h2: 3rem;          /* 48px */
  --size-h3: 2rem;          /* 32px */
  --size-heading: 3rem;     /* the two large display lines */
  --size-heading-sm: 1.7rem;
  --size-nav: 3.5rem;
  --lead-body: 1.4;
  --lead-title: 1.3;

  /* Rhythm. The original lays its blocks out in viewport units; keeping that
     is what makes the page scale the same way at every width. */
  --gutter: 5vw;            /* the side padding of a section */
  --inset: 15vw;            /* the wider inset used by the text blocks */
  --rail: 5vw;              /* width of the two fixed side rails */
  --plate: 25vw;            /* the two big plates of the hero */
  /* The logo is sized by its font, not by a width: everything in it is an em
     of this value. 1.45vw puts the wordmark at the 15vw the original used. */
  --mark: 1.45vw;

  --ease-out: cubic-bezier(.25, 1, .5, 1);
}

/* --- 1. Reset and base type ---------------------------------------------- */

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

html {
  /* clip, not hidden: hidden would turn the root into a scroll container and
     break every sticky and fixed position below. */
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: var(--size-body)/var(--lead-body) Barlow, system-ui, sans-serif;
  /* the left rail is fixed over the page; nothing must slide under it */
  padding-left: var(--rail);
  padding-right: var(--rail);
}

h1, h2, h3, .heading, .heading-sm {
  margin: 0;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-weight: 400;
  line-height: var(--lead-title);
}

h2 { font-size: var(--size-h2); }
h3 { font-size: var(--size-h3); }

.heading { font-size: var(--size-heading); }

.heading-sm {
  font-size: var(--size-heading-sm);
  letter-spacing: 1px;
  text-transform: uppercase;
}

p { margin: 0 0 .625rem; }
p:last-child { margin-bottom: 0; }

a { color: inherit; text-decoration: none; }
address { font-style: normal; }
/* height: auto matters — every <img> here carries width and height attributes
   so the browser can reserve the box, and without this the attribute wins over
   a CSS width and the picture comes out stretched. */
img, svg { max-width: 100%; height: auto; display: block; }
strong { font-weight: 700; }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* --- 2. Helpers ---------------------------------------------------------- */

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

.skip-link {
  position: fixed;
  top: .5rem; left: 50%;
  z-index: 300;
  transform: translate(-50%, -200%);
  padding: .75rem 1.25rem;
  background: var(--blue);
  color: var(--white);
  transition: transform .2s;
}
.skip-link:focus { transform: translate(-50%, 0); }

.sprite { position: absolute; width: 0; height: 0; }

.stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1em;
}
.stack--centred { align-items: center; text-align: center; }

.btn {
  display: inline-block;
  padding: .5625rem .9375rem;
  border: 1px solid var(--blue);
  background: var(--blue);
  color: var(--white);
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn:hover { background: var(--page); color: var(--blue); }

.btn--light {
  border-color: var(--white);
  background: var(--white);
  color: var(--blue);
}
.btn--light:hover { background: transparent; color: var(--white); }

/* A label that skews away when you point at it, arrow first. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 1em;
  padding: .625rem 0;
}
.link-arrow__label,
.link-arrow__icon {
  transition: transform .2s var(--ease-out);
}
.link-arrow__icon { width: 24px; color: var(--blue); }
.link-arrow:hover .link-arrow__label { transform: translateX(5px) skewX(-10deg); }
.link-arrow:hover .link-arrow__icon { transform: translateX(5px); }

.link-arrow--light,
.link-arrow--light .link-arrow__icon { color: var(--white); }

.row {
  display: flex;
  align-items: flex-start;
  gap: 1em;
}
.row svg { width: 24px; flex: none; }

/* --- 3. The logo --------------------------------------------------------- */

.mark {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35em;
  margin: 0;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  line-height: 1;
  text-align: center;
  color: var(--blue);
}
.mark__icon { width: 5.4em; color: inherit; }

.mark__name {
  padding: .12em 0;
  border-top: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  font-size: 2.4em;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.mark__kind {
  font-size: 1em;
  letter-spacing: .38em;
  text-indent: .38em;      /* letter-spacing pushes the last letter out */
  text-transform: uppercase;
}
.mark--light { color: var(--white); }

/* --- 4. Rails and full-screen menu --------------------------------------- */

.rail {
  position: fixed;
  top: 0; bottom: 0;
  z-index: 50;
  width: var(--rail);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--white);
}
.rail--left { left: 0; }
.rail--right { right: 0; }
.rail__link { display: flex; padding: .5rem; }
.rail__link svg { width: 24px; }

.menu__button {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;      /* <summary> ignores the inherited value */
  padding: .5rem;
  cursor: pointer;
  list-style: none;
}
.menu__button::-webkit-details-marker { display: none; }
.menu__icon { width: 27px; }
.menu__icon--close { display: none; }
.menu[open] .menu__icon--open { display: none; }
.menu[open] .menu__icon--close { display: block; }

.menu__panel {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 1em;
  padding: 0 var(--inset);
  background: var(--blue);
  overflow: hidden;
}
/* The panel slides in from the left. <details> does not re-run keyframes on a
   second opening — the browser hides the closed content with
   content-visibility — so main.js restarts the animation by hand. */
.js .menu[open] .menu__panel { animation: menu-in .4s var(--ease-out) both; }

@keyframes menu-in {
  from { transform: translateX(-100%); }
  to { transform: none; }
}

.menu__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .5em;
  height: 100%;
  justify-content: center;
}

.menu__link {
  width: 100%;
  padding: 0 5px;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: var(--size-nav);
  font-weight: 700;
  line-height: var(--lead-title);
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px var(--white);
  transition: color .2s, -webkit-text-stroke-color .2s;
}
.menu__link:hover,
.menu__link:focus-visible {
  color: var(--white);
  -webkit-text-stroke-color: transparent;
}
/* Outlined text is a webkit property. Where it does not exist the links would
   be invisible, so they stay filled instead. */
@supports not (-webkit-text-stroke: 1px white) {
  .menu__link { color: var(--white); }
}
.js .menu[open] .menu__link { animation: fade-in .4s .1s both; }

.menu__contact {
  display: flex;
  flex-direction: column;
  gap: 1em;
  color: var(--white);
}
.js .menu[open] .menu__contact { animation: fade-in .3s .15s both; }

@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }

/* --- 5. Loader and first paint ------------------------------------------- */

/* Everything here is behind .js, and every step is a CSS animation with a
   delay rather than a class added by script. If the script dies after setting
   .js, the page still finishes appearing on its own. */
.loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 200;
  align-items: center;
  justify-content: center;
  background: linear-gradient(var(--blue), rgba(255, 255, 255, 0) 27%, #456694), var(--blue);
}
.js .loader {
  display: flex;
  animation: loader-out .8s .9s forwards;
}
.loader__mark { font-size: var(--mark); }
.js .loader__mark { animation: loader-mark .7s var(--ease-out) both; }

@keyframes loader-mark {
  from { transform: translateY(100%); filter: blur(10px); }
  to { transform: none; filter: blur(0); }
}
@keyframes loader-out {
  to { transform: translateY(-100vh); visibility: hidden; }
}

.js main, .js .footer { animation: fade-in .5s 1s both; }

/* --- 6. Hero ------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 90vh;
  margin: 0 calc(-1 * var(--rail));   /* the hero runs under the two rails */
  padding: 0 var(--inset);
  background: linear-gradient(var(--blue-dark), rgba(0, 0, 0, 0)), var(--blue);
  color: var(--white);
  overflow: hidden;
}

.hero__mark { font-size: var(--mark); }

.hero__plate { position: absolute; }
.hero__plate--a { top: 0; left: 0; }
.hero__plate--b { right: 0; bottom: 10%; }

.hero__plate .disc__img { width: var(--plate); }

/* The plates arrive from the sides, turning as they come. */
.js .hero__plate--a { animation: plate-a 1s 1.5s var(--ease-out) both; }
.js .hero__plate--b { animation: plate-b 1.4s 1.5s var(--ease-out) both; }
.js .hero__plate .disc__img { animation: plate-spin 1s 1.5s var(--ease-out) both; }
.js .hero__mark { animation: mark-grow 1s 1.5s var(--ease-out) both; }

@keyframes plate-a { from { transform: translateX(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes plate-b { from { transform: translateX(50%); } to { transform: none; } }
@keyframes plate-spin { from { transform: rotate(180deg); } to { transform: none; } }
@keyframes mark-grow { from { transform: scale(.5); } to { transform: none; } }

/* --- 7. Sections, notch, scroll cue -------------------------------------- */

.section {
  position: relative;
  padding: 0 var(--gutter);
}

/* The blue wedge that bites into the top of a photograph. */
.notch {
  position: absolute;
  z-index: 2;
  top: -1px;
  left: var(--gutter);
  right: var(--gutter);
  aspect-ratio: 1438 / 156;
  background: var(--blue);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.notch--bottom {
  top: auto;
  bottom: -1px;
  left: 0;
  right: 0;
  clip-path: polygon(0 100%, 100% 100%, 50% 0);
}

.scroll-cue {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .25em;
  color: var(--white);
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  text-transform: uppercase;
}
.scroll-cue__mouse { width: 30px; }
.scroll-cue__wheel { animation: wheel 1.6s ease-in-out infinite; }

@keyframes wheel {
  0%, 100% { transform: translateY(0); opacity: 1; }
  60% { transform: translateY(12px); opacity: .2; }
}

/* --- 8. Photographs and scroll parallax ---------------------------------- */

/* The frame clips; the image inside is a fifth taller than the frame and
   slides within that margin as the page scrolls. --p is the progress of the
   frame across the viewport, 0 to 1, written by main.js. */
.media {
  margin: 0;
  width: 100%;
  height: 70vh;
  overflow: clip;
}
.media__img,
.carousel__img {
  --p: .5;
  width: 100%;
  height: 120%;
  object-fit: cover;
  transform: translateY(calc((var(--p) - .5) * 16%)) scale(calc(1.1 - var(--p) * .1));
}

.drawing-fish {
  --p: .5;
  width: 30vw;
  transform: translateY(calc(-60% + var(--p) * 90%));
}
.drawing-net {
  --p: .5;
  position: absolute;
  z-index: 1;
  top: -20%;
  left: 10vw;
  width: 25vw;
  transform: translateY(calc(var(--p) * 25%));
}
.stack--drawing {
  position: relative;
  justify-content: center;
  align-self: end;
  justify-self: end;
}

/* --- 9. Grids ------------------------------------------------------------ */

.grid-2, .grid-3, .grid-4 { display: grid; grid-template-rows: auto; }

.grid-2 {
  position: relative;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3em;
  padding: 0 var(--inset);
}
.grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5em;
  padding: 0 var(--gutter);
}
/* The dish grid takes the wide inset but no vertical padding — that belongs
   to the two-column block only. */
.grid-3.pad { padding-block: 0; padding-inline: var(--inset); }
.grid-3__wide { grid-column: 1 / -1; }
.grid-3__centre { display: flex; justify-content: center; }

.grid-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1em;
  padding: 0 10vw;
}

.pad { padding-block: 15vh; }

/* --- 10. Plates ---------------------------------------------------------- */

.disc {
  display: inline-flex;
  max-width: 100%;
  padding: 10px 10px 8px;
  border: 1px solid var(--blue);
  border-radius: 100em;
  transition: transform .3s var(--ease-out);
}
.disc--light { border-color: var(--cream); }
.disc__img { width: 217px; }

.dish {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  padding: 0 15px;
  text-align: center;
}
.dish .disc__img { transition: transform 2s ease-in; }
.dish:hover .disc { transform: scale(1.1); }
.dish:hover .disc__img { transform: rotate(90deg); }

/* --- 11. Wine banner ----------------------------------------------------- */

.banner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .5fr) minmax(0, 1fr);
  gap: 1rem 2em;
  align-items: center;
  margin: 20vh 0 10vh;
  padding: 5vh 10vw;
  /* The size has to be stated: an SVG with only a viewBox has no intrinsic
     size, so `auto` would stretch it to the whole block and the position
     would then do nothing. */
  background: url('../img/shells.svg') 0 100% / 300px no-repeat, var(--blue);
  color: var(--white);
}
.banner__bottle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
/* 22vw, not the 30vw of the original: this bottle is cut out tight to its
   edges while the one it replaces sat in a wider frame, so the same declared
   width would draw a bottle half again as fat. */
.banner__bottle img {
  position: absolute;
  z-index: 5;
  width: 20vw;
  max-width: none;
}
.banner__text { gap: 2em; padding: 1.25rem 0; }

/* --- 12. Carousel -------------------------------------------------------- */

.section--carousel { padding-inline: var(--gutter); }

.carousel { position: relative; width: 100%; height: 100vh; }

.carousel__track {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel__track::-webkit-scrollbar { display: none; }

.carousel__slide {
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: center;
  overflow: clip;
}

.carousel__arrow {
  display: none;              /* shown only when scripts can drive it */
  position: absolute;
  top: 0; bottom: 0;
  z-index: 4;
  width: 80px;
  align-items: center;
  justify-content: center;
  border: 0;
  background: rgb(11 58 91 / .5);
  color: var(--white);
  cursor: pointer;
}
.js .carousel__arrow { display: flex; }
.carousel__arrow svg { width: 45px; }
.carousel__arrow--prev { left: 0; transform: scaleX(-1); }
.carousel__arrow--next { right: 0; }

.carousel__dots {
  position: absolute;
  z-index: 4;
  bottom: 2rem; left: 0; right: 0;
  display: flex;
  justify-content: center;
  gap: .75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.carousel__dots a {
  display: block;
  width: 10px; height: 10px;
  border: 1px solid var(--white);
  border-radius: 50%;
  background: rgb(255 255 255 / .35);
}
.carousel__dots a:hover { background: var(--white); }

/* --- 13. The sentence and the window ------------------------------------- */

.quote {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4em;
  margin: 0 calc(-1 * var(--rail));
  padding: 15vh var(--inset) 5vh;
  background: var(--blue);
  color: var(--white);
}
.quote__text {
  max-width: 40vw;
  font-family: 'Barlow Condensed', system-ui, sans-serif;
  font-size: var(--size-heading);
  line-height: var(--lead-title);
  text-align: center;
}

/* A porthole that follows the pointer. The lens moves; the photograph inside
   moves the same distance the other way, so it stays still behind the hole. */
.window {
  --x: 0px;
  --y: 0px;
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 90vw;
  height: 100vh;
  overflow: hidden;
}
.window__shell {
  width: min(720px, 78%);
  opacity: .9;
}
.window__lens {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  overflow: clip;
  transform: translate(var(--x), var(--y));
  transition: transform .35s ease-out, width .25s, height .25s;
}
.window__lens::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 90vw; height: 100vh;
  background: url('../img/mask-dish.webp') 50% / cover no-repeat;
  transform: translate(-50%, -50%) translate(calc(-1 * var(--x)), calc(-1 * var(--y)));
  transition: transform .35s ease-out;
}
.window:active .window__lens { width: 260px; height: 260px; }

/* No pointer to follow: the lens drifts on its own instead of sitting dead
   centre for the whole visit. */
@media (hover: none) {
  .window__lens { animation: drift 22s ease-in-out infinite alternate; }
  .window__lens::before { animation: drift-back 22s ease-in-out infinite alternate; }
}
@keyframes drift {
  0% { transform: translate(-28vw, -18vh); }
  50% { transform: translate(24vw, 12vh); }
  100% { transform: translate(-10vw, 20vh); }
}
@keyframes drift-back {
  0% { transform: translate(-50%, -50%) translate(28vw, 18vh); }
  50% { transform: translate(-50%, -50%) translate(-24vw, -12vh); }
  100% { transform: translate(-50%, -50%) translate(10vw, -20vh); }
}

/* --- 14. Booking --------------------------------------------------------- */

.contact {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.card-light {
  position: relative;
  z-index: 5;
  align-self: end;
  padding: 5vw;
  background: var(--white);
}
.card-blue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2em;
  padding: 5vw;
  background: var(--blue);
  color: var(--white);
  text-align: center;
}
/* The original put a live map widget here, 70vh tall. This is a drawing, so
   it is cropped to that height rather than letting its own ratio decide.
   42% keeps the pin in frame when the box is narrower than the drawing. */
.card-blue__map {
  width: 100%;
  height: 65vh;
  object-fit: cover;
  object-position: 42% 50%;
}

.form {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  margin-top: 2.5rem;
}
.field {
  width: 100%;
  margin-bottom: 20px;
  padding: 20px 12px;
  border: 1px solid var(--blue);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: .875rem;
}
.field::placeholder {
  color: var(--blue);
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 1;
}
textarea.field { resize: vertical; }
.form label { margin-bottom: 5px; }
.form .btn { align-self: flex-start; cursor: pointer; }
.form__note { margin-top: 1.25rem; }
.form__note a { text-decoration: underline; }

.drawing-net--contact {
  position: absolute;
  z-index: 0;
  top: 0;              /* stays inside the section: beige mesh on the deep
                          blue above it reads as a stain, not as an ornament */
  left: 10vw;
  width: 20vw;
}

/* --- 15. Footer ---------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 10;
  margin-top: 0;
  padding-top: 15vh;
  border-top: 1px solid var(--blue);
  background: var(--page);
  font-family: 'Barlow Condensed', system-ui, sans-serif;
}
.footer .stack { gap: 1em; }
.footer__mark {
  font-size: .8em;
  align-self: start;
  justify-self: end;
}

.footer__bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2em;
  width: 100%;
  margin-top: 10vh;
  padding: 5vh 10vw;
  background: var(--white);
}
.footer__bar p { margin: 0; }
.footer__bar a { text-decoration: underline; }

/* --- 16. Scroll reveals -------------------------------------------------- */

/* The hidden state lives behind .js, so with scripts off nothing is hidden:
   every heading, every block, is on the page from the first paint. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(100px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* --- 17. Breakpoints ----------------------------------------------------- */

@media (min-width: 1920px) {
  :root { --size-body: 1.25rem; --lead-body: 1.2; }
}

@media (max-width: 991px) {
  :root { --plate: 30vw; }

  .grid-2 { grid-template-columns: minmax(0, 1fr); }
  .grid-3.pad { padding-inline: var(--gutter); }
  .quote__text { max-width: 60vw; }

  .banner {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 15vh;
    background-position: 0 0;
    background-size: 151px;
  }
  /* One column: the bottle keeps its absolute position and hangs over the
     text, so its cell must not claim any height of its own. */
  .banner__bottle { min-height: 0; }
  .banner__bottle img { width: 15vw; align-self: flex-end; }
}

@media (max-width: 767px) {
  :root {
    --gutter: 2vw;
    --rail: 0px;
    --size-nav: 2.6rem;
    --mark: 2.9vw;
  }

  body { padding-top: 44px; }

  /* the left rail becomes a bar across the top; the mail rail goes away */
  .rail--left {
    top: 0; left: 0; right: 0; bottom: auto;
    width: 100%;
    padding: 5px 0;
  }
  .rail--right { display: none; }
  .menu__panel { padding-inline: var(--gutter); }

  .contact { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Below this width the three dishes stop sharing a row and stack, exactly
     as the original does — three 217px plates in a 767px row look lost. */
  .dish { grid-column: 1 / -1; }

  .scroll-cue, .banner__bottle { display: none; }
  .banner { grid-template-columns: minmax(0, 1fr); }
  .drawing-net--contact { width: 34vw; }
}

@media (max-width: 479px) {
  :root {
    --gutter: 0px;
    --inset: 5vw;
    --plate: 40vw;
    --mark: 3.84vw;
    --size-heading: 2rem;
    --size-nav: 2.3rem;
  }

  .grid-3 { grid-template-columns: minmax(0, 1fr); }
  .grid-4 { grid-template-columns: minmax(0, 1fr); gap: 2em; }
  .quote { padding-inline: var(--gutter); }
  .quote__text { max-width: 80vw; }
  .hero__plate--a { top: 10%; }
  .carousel__arrow { display: none; }
  .js .carousel__arrow { display: none; }
  .footer__mark { justify-self: center; }
  .footer__bar { flex-direction: column; align-items: flex-start; }
}

/* --- 18. Reduced motion --------------------------------------------------- */

/* Delays are movement spread over time, so they go to zero as well. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
  .media__img, .carousel__img, .drawing-fish, .drawing-net { transform: none; }
  .window__lens, .window__lens::before { animation: none; }
}