/* ==========================================================================
   Chef Book — site stylesheet
   --------------------------------------------------------------------------
   1.  Fonts
   2.  Design tokens (colours, type, spacing)
   3.  Base
   4.  Layout helpers
   5.  Buttons and icons
   6.  Top bar
   7.  Header, logo bookmark, navigation
   8.  Home: hero banner
   9.  Home: about, how to order, gallery, contact
   10. Footer
   11. Policy pages
   12. Motion
   13. Print
   ========================================================================== */


/* 1. Fonts
   Anek Malayalam (SIL Open Font License, see fonts/OFL.txt), served from this
   site so no visitor data goes to a font service. The Malayalam file is only
   downloaded if a page actually contains Malayalam text.
   ========================================================================== */

@font-face {
  font-family: "Anek Malayalam";
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("../fonts/anek-malayalam-malayalam.woff2") format("woff2");
  unicode-range: U+0307, U+0323, U+0951-0952, U+0964-0965, U+0D00-0D7F, U+1CDA,
    U+1CF2, U+200C-200D, U+20B9, U+25CC, U+A830-A832;
}

@font-face {
  font-family: "Anek Malayalam";
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("../fonts/anek-malayalam-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
    U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F,
    U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F,
    U+A720-A7FF;
}

@font-face {
  font-family: "Anek Malayalam";
  font-style: normal;
  font-weight: 100 800;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("../fonts/anek-malayalam-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* 2. Design tokens
   ========================================================================== */

:root {
  color-scheme: light;

  /* Colour: curry-leaf greens, turmeric, rice white */
  --leaf-900: #0a2a20;
  --leaf-800: #0f3b2e;
  --leaf-700: #14493a;
  --leaf-600: #1c6b4f;
  --leaf-100: #e7f0e5;
  --turmeric: #f5b82e;
  --turmeric-deep: #e3a417;
  --white: #ffffff;
  --ink: #14231b;
  --ink-soft: #4a5a51;
  --line: #d3ded5;
  --line-on-dark: rgba(255, 255, 255, 0.16);
  --text-on-dark: #dbe7df;

  /* Type */
  --font: "Anek Malayalam", "Segoe UI", system-ui, -apple-system, "Noto Sans",
    "Helvetica Neue", Arial, sans-serif;

  /* Spacing and sizes */
  --container: 72.5rem;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  --section: clamp(4rem, 9vw, 7.5rem);
  --radius: 0.375rem;

  /* Header and the logo bookmark that hangs from it */
  --header-h: 4.75rem;
  --ribbon-w: 7.5rem;
  --ribbon-hang: 4.5rem;
  --ribbon-notch: 1.25rem;
  --ribbon-pad: 0.75rem;
  --ribbon-type: 1.75rem;

  /* Focus ring colour; switched to turmeric on dark surfaces */
  --focus: var(--leaf-600);
}

@media (max-width: 61.99em) {
  :root {
    --header-h: 4rem;
    --ribbon-w: 5.5rem;
    --ribbon-hang: 2.5rem;
    --ribbon-notch: 0.875rem;
    --ribbon-pad: 0.625rem;
    --ribbon-type: 1.3125rem;
  }
}


/* 3. Base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-h) + 2rem);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.65;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure,
address {
  margin: 0;
}

ul[class],
ol[class] {
  padding: 0;
  list-style: none;
}

address {
  font-style: normal;
}

img,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

a {
  color: var(--leaf-600);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--leaf-800);
}

strong {
  font-weight: 700;
}

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

::selection {
  background: var(--turmeric);
  color: var(--leaf-900);
}

[hidden] {
  display: none !important;
}

.on-dark {
  --focus: var(--turmeric);
  color: var(--white);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

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

.skip-link {
  position: absolute;
  left: 0.75rem;
  top: -5rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--radius);
  background: var(--turmeric);
  color: var(--leaf-900);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  top: 0.75rem;
}


/* 4. Layout helpers
   ========================================================================== */

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.section {
  padding-block: var(--section);
}

.section--tint {
  background: var(--leaf-100);
}

.section-title {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  font-stretch: 118%;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--leaf-800);
}

.lead {
  font-size: clamp(1.1875rem, 1.05rem + 0.7vw, 1.4375rem);
  line-height: 1.5;
}


/* 5. Buttons and icons
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.7rem 1.4rem;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font: inherit;
  font-size: 1.0625rem;
  font-stretch: 108%;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease,
    color 0.15s ease;
}

.btn--primary {
  background: var(--turmeric);
  color: var(--leaf-900);
}

.btn--primary:hover {
  background: var(--turmeric-deep);
  color: var(--leaf-900);
}

.btn--dark {
  background: var(--leaf-800);
  color: var(--white);
}

.btn--dark:hover {
  background: var(--leaf-900);
  color: var(--white);
}

.btn--light {
  border-color: rgba(255, 255, 255, 0.75);
  color: var(--white);
}

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

.btn--small {
  min-height: 2.75rem;
  padding: 0.5rem 1.1rem;
  font-size: 1rem;
}

@media (max-width: 23.99em) {
  .btn {
    padding-inline: 0.9rem;
    font-size: 1rem;
  }
}

.icon {
  flex: none;
  width: 1.25em;
  height: 1.25em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* 6. Top bar
   ========================================================================== */

.topbar {
  position: relative;
  z-index: 45;
  background: var(--leaf-900);
  font-size: 0.9375rem;
  line-height: 1.3;
}

.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  min-height: 2.625rem;
}

.topbar__list {
  display: flex;
  align-items: center;
  gap: 1.75rem;
}

.topbar__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-block: 0.5rem;
  color: var(--text-on-dark);
  text-decoration: none;
}

.topbar__link:hover {
  color: var(--white);
  text-decoration: underline;
}

.topbar__link .icon {
  color: var(--turmeric);
}

.topbar__short {
  display: none;
}

@media (max-width: 61.99em) {
  .topbar__long {
    display: none;
  }

  .topbar__short {
    display: inline;
  }
}

@media (max-width: 47.99em) {
  .topbar__email {
    display: none;
  }
}


/* 7. Header, logo bookmark, navigation
   ========================================================================== */

.site-header {
  position: relative;
  z-index: 40;
  background: var(--leaf-800);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

/* The header only sticks when JavaScript is available, because the script
   also tucks the logo bookmark away once the page is scrolled. */
.js .site-header {
  position: sticky;
  top: 0;
}

.site-header.is-stuck {
  box-shadow: 0 0.375rem 1.5rem rgba(6, 28, 21, 0.3);
}

/* On the home page the header sits on top of the banner photo. This needs
   JavaScript (it turns the header solid again on scroll and when the menu
   opens), so without it the header simply stays solid green. */
.js .page-home .site-header {
  background: transparent;
}

.js .page-home .site-header.is-stuck,
.js .page-home .site-header.nav-open {
  background: var(--leaf-800);
}

.site-header__inner {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0.25rem 1.25rem;
  min-height: var(--header-h);
  padding-left: calc(var(--ribbon-w) + 1rem);
}

/* Logo bookmark ---------------------------------------------------------- */

.brand {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  display: block;
  width: var(--ribbon-w);
  text-decoration: none;
  filter: drop-shadow(0 0.5rem 0.9rem rgba(6, 28, 21, 0.3));
}

.brand__ribbon {
  display: grid;
  height: calc(var(--header-h) + var(--ribbon-hang));
  padding: var(--ribbon-pad) var(--ribbon-pad)
    calc(var(--ribbon-notch) + var(--ribbon-pad) * 0.6);
  background: var(--white);
  clip-path: polygon(
    0 0,
    100% 0,
    100% 100%,
    50% calc(100% - var(--ribbon-notch)),
    0 100%
  );
  transition: height 0.28s ease, padding 0.28s ease;
}

.brand__wordmark,
.brand__logo {
  grid-area: 1 / 1;
  align-self: center;
  justify-self: center;
}

/* Shown until images/logo.png has loaded (and if it is missing). */
.brand__wordmark {
  font-size: var(--ribbon-type);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--leaf-800);
  transition: font-size 0.28s ease;
}

.brand__logo {
  width: 100%;
  height: 100%;
  min-height: 0;
  object-fit: contain;
  opacity: 0;
}

.brand__ribbon.has-logo .brand__logo {
  opacity: 1;
}

.brand__ribbon.has-logo .brand__wordmark {
  visibility: hidden;
}

/* Bookmark tucked up: after scrolling, or while the mobile menu is open. */
.is-stuck .brand__ribbon,
.nav-open .brand__ribbon {
  height: calc(var(--header-h) + var(--ribbon-notch));
  padding-top: calc(var(--ribbon-pad) * 0.6);
  padding-bottom: calc(var(--ribbon-notch) + var(--ribbon-pad) * 0.3);
}

.is-stuck .brand__wordmark,
.nav-open .brand__wordmark {
  font-size: calc(var(--ribbon-type) * 0.78);
}

/* Navigation ------------------------------------------------------------- */

.site-nav__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 0 0.25rem;
}

.site-nav__link {
  display: block;
  padding: 0.6rem 0.8rem;
  color: var(--text-on-dark);
  font-weight: 600;
  text-decoration: none;
}

.site-nav__link:hover {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--turmeric);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.5em;
}

.site-nav__link[aria-current="page"] {
  color: var(--white);
  text-decoration: underline;
  text-decoration-color: var(--turmeric);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.5em;
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: var(--radius);
  background: transparent;
  color: var(--white);
  font-size: 1.125rem;
  cursor: pointer;
}

.nav-toggle .icon--close,
.nav-open .nav-toggle .icon--menu {
  display: none;
}

.nav-open .nav-toggle .icon--close {
  display: block;
}

@media (max-width: 61.99em) {
  .js .nav-toggle {
    display: inline-flex;
  }

  /* With JavaScript the links become a drop-down panel. Without it they
     simply wrap below the header so every page stays reachable. */
  .js .site-nav {
    position: absolute;
    top: 100%;
    left: calc(-1 * var(--gutter));
    right: calc(-1 * var(--gutter));
    display: none;
    padding: 1.25rem var(--gutter) 1.75rem;
    border-top: 1px solid var(--line-on-dark);
    background: var(--leaf-800);
    box-shadow: 0 1.5rem 2rem rgba(6, 28, 21, 0.35);
  }

  .js .nav-open .site-nav {
    display: block;
  }

  .js .site-nav__list {
    flex-direction: column;
    align-items: stretch;
  }

  .js .site-nav__link {
    padding: 0.9rem 0.125rem;
    border-bottom: 1px solid var(--line-on-dark);
    font-size: 1.125rem;
  }

  .js .site-nav__link:hover,
  .js .site-nav__link[aria-current="page"] {
    text-underline-offset: 0.3em;
  }
}

@media (max-width: 29.99em) {
  .header-call {
    width: 2.75rem;
    padding-inline: 0;
  }

  .header-call__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}


/* 8. Home: hero banner
   The photo is images/banner.jpg. If that file is missing, the green leaf
   artwork underneath shows instead, so the page never looks broken.
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  min-height: clamp(34rem, 88vh, 50rem);
  min-height: clamp(34rem, 88svh, 50rem);
  padding-top: calc(var(--ribbon-hang) + 3rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
  background: var(--leaf-800);
}

/* Slide the banner up underneath the see-through header. */
.js .hero {
  margin-top: calc(-1 * var(--header-h));
  padding-top: calc(var(--header-h) + var(--ribbon-hang) + 3rem);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* Layer 2: the banner photo */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../images/banner.jpg") center / cover no-repeat;
}

/* Layer 3: green tint that keeps the white text readable on any photo.
   It is strongest at the top (menu) and in the lower half (name, buttons). */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(
    180deg,
    rgba(10, 42, 32, 0.88) 0%,
    rgba(10, 42, 32, 0.45) 24%,
    rgba(10, 42, 32, 0.45) 38%,
    rgba(10, 42, 32, 0.8) 70%,
    rgba(10, 42, 32, 0.94) 100%
  );
}

/* Layer 1: banana-leaf artwork, visible only when there is no photo */
.hero__leaf {
  position: absolute;
  z-index: 0;
  top: -42%;
  right: -9%;
  width: max(56vw, 24rem);
  height: 185%;
  border-radius: 50%;
  transform: rotate(24deg);
  background-color: #1a5a45;
  background-image:
    linear-gradient(
      90deg,
      transparent calc(50% - 3px),
      rgba(255, 255, 255, 0.22) calc(50% - 3px),
      rgba(255, 255, 255, 0.22) calc(50% + 3px),
      transparent calc(50% + 3px)
    ),
    repeating-linear-gradient(
      12deg,
      rgba(255, 255, 255, 0.11) 0,
      rgba(255, 255, 255, 0.11) 2px,
      transparent 2px,
      transparent 1.75rem
    ),
    repeating-linear-gradient(
      -12deg,
      rgba(255, 255, 255, 0.11) 0,
      rgba(255, 255, 255, 0.11) 2px,
      transparent 2px,
      transparent 1.75rem
    );
  background-repeat: no-repeat;
  background-position: center, left top, right top;
  background-size: 100% 100%, 50% 100%, 50% 100%;
}

.hero__title {
  margin-left: -0.04em;
  font-size: clamp(3rem, 14vw, 11rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-shadow: 0 0.125rem 1.75rem rgba(6, 28, 21, 0.4);
}

.hero__lead {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.45;
  color: #eef4f0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: 2rem;
}

@media (max-width: 29.99em) {
  .hero__actions .btn {
    width: 100%;
  }
}


/* 9. Home: about, how to order, gallery, contact
   ========================================================================== */

/* About ------------------------------------------------------------------ */

.about__grid {
  display: grid;
  gap: 2.5rem 4rem;
}

.about__text {
  max-width: 40rem;
  margin-top: 1.5rem;
}

.about__text > * + * {
  margin-top: 1.1rem;
}

.about__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--leaf-100);
}

@media (min-width: 56em) {
  .about__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: center;
  }
}

/* How to order: three steps, each numbered on a small bookmark tab -------- */

.steps {
  display: grid;
  gap: 2.5rem 2.5rem;
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  counter-reset: step;
}

.step {
  position: relative;
  padding-top: 5rem;
  border-top: 2px solid var(--leaf-800);
  counter-increment: step;
}

.step::before {
  content: counter(step);
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: start center;
  width: 2.75rem;
  height: 3.875rem;
  padding-top: 0.55rem;
  background: var(--turmeric);
  color: var(--leaf-900);
  font-size: 1.375rem;
  font-stretch: 125%;
  font-weight: 800;
  line-height: 1;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 0.7rem), 0 100%);
}

.step__title {
  font-size: 1.375rem;
  font-stretch: 110%;
  font-weight: 700;
  line-height: 1.2;
  color: var(--leaf-800);
}

.step__text {
  margin-top: 0.6rem;
  max-width: 24rem;
}

.order__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.order__note {
  max-width: 40rem;
  margin-top: 1.25rem;
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

@media (min-width: 48em) {
  .steps {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 29.99em) {
  .order__actions .btn {
    width: 100%;
  }
}

/* Gallery: "From our kitchen" photo row --------------------------------- */

.gallery__grid {
  display: flex;
  gap: 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.gallery__item {
  flex: 1 1 0;
  min-width: 0;
}

.gallery__item img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  background: var(--leaf-100);
}

@media (max-width: 39.99em) {
  .gallery__grid {
    margin-inline: calc(-1 * var(--gutter));
    padding: 0 var(--gutter) 0.75rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
  }

  .gallery__item {
    flex: 0 0 76%;
    scroll-snap-align: center;
  }
}

/* Contact ---------------------------------------------------------------- */

.contact__grid {
  display: grid;
  gap: 3rem 4rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}

.contact__address {
  font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.75rem);
  font-stretch: 114%;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--leaf-800);
}

.contact__address-rest {
  display: block;
  margin-top: 0.75rem;
  font-size: 1.1875rem;
  font-stretch: 100%;
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink);
}

.contact__directions {
  margin-top: 1.75rem;
}

.contact__list {
  border-top: 2px solid var(--leaf-800);
}

.contact__row {
  display: grid;
  grid-template-columns: 9.5rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding-block: 1.1rem;
  border-bottom: 1px solid var(--line);
}

.contact__row dt {
  color: var(--ink-soft);
}

.contact__row dd {
  font-size: 1.125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

@media (min-width: 56em) {
  .contact__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

@media (max-width: 29.99em) {
  .contact__row {
    grid-template-columns: minmax(0, 1fr);
  }
}


/* 10. Footer
   ========================================================================== */

.site-footer {
  padding-top: clamp(3.5rem, 7vw, 5.5rem);
  background: var(--leaf-900);
  color: var(--text-on-dark);
}

.site-footer a {
  color: var(--white);
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
  text-decoration-color: var(--turmeric);
}

.site-footer__grid {
  display: grid;
  gap: 2.5rem 3rem;
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
}

.site-footer__name {
  font-size: clamp(2.25rem, 1.6rem + 2.6vw, 3.25rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
  color: var(--white);
}

.site-footer__about {
  max-width: 18rem;
  margin-top: 1rem;
}

.site-footer__heading {
  margin-bottom: 0.85rem;
  font-size: 1.0625rem;
  font-stretch: 108%;
  font-weight: 700;
  color: var(--white);
}

.site-footer__list li + li {
  margin-top: 0.45rem;
}

.site-footer__list a {
  overflow-wrap: anywhere;
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block: 1.25rem;
  border-top: 1px solid var(--line-on-dark);
  font-size: 0.9375rem;
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.75rem;
}

@media (min-width: 40em) {
  .site-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 62em) {
  .site-footer__grid {
    grid-template-columns: 1.5fr 1.15fr 1.25fr 1fr;
  }
}


/* 11. Policy pages (privacy-policy.html, terms-and-conditions.html)
   ========================================================================== */

.page-head {
  padding-top: calc(var(--ribbon-hang) + 2.75rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  background: var(--leaf-800);
}

.page-head__title {
  margin-left: -0.03em;
  font-size: clamp(2.5rem, 1.4rem + 5.4vw, 5rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.02em;
}

.page-head__meta {
  margin-top: 1.1rem;
  color: var(--text-on-dark);
}

.legal {
  display: grid;
  gap: 2rem 4.5rem;
  padding-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-bottom: var(--section);
}

/* "On this page" list */

.toc__title {
  font-weight: 700;
  color: var(--leaf-800);
  cursor: pointer;
}

.toc__list {
  margin-top: 0.85rem;
  border-left: 2px solid var(--line);
}

.toc__link {
  display: block;
  margin-left: -2px;
  padding: 0.3rem 0 0.3rem 1rem;
  border-left: 2px solid transparent;
  color: var(--ink-soft);
  font-size: 0.975rem;
  line-height: 1.35;
  text-decoration: none;
}

.toc__link:hover {
  color: var(--leaf-800);
  text-decoration: underline;
}

.toc__link.is-current {
  border-left-color: var(--leaf-800);
  color: var(--leaf-800);
  font-weight: 600;
}

@media (min-width: 62em) {
  .legal {
    grid-template-columns: 16rem minmax(0, 1fr);
    align-items: start;
  }

  .legal__toc {
    position: sticky;
    top: calc(var(--header-h) + 2.25rem);
    max-height: calc(100vh - var(--header-h) - 3.5rem);
    overflow-y: auto;
  }

  .toc__title {
    list-style: none;
    cursor: default;
    pointer-events: none;
  }

  .toc__title::-webkit-details-marker {
    display: none;
  }
}

/* Long-form text */

.prose {
  max-width: 68ch;
}

.prose > * + *,
.prose section > * + * {
  margin-top: 1.1rem;
}

.prose section {
  margin-top: 3rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--line);
}

.prose h2 {
  font-size: clamp(1.5rem, 1.25rem + 1.1vw, 1.875rem);
  font-stretch: 112%;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--leaf-800);
}

.prose h3 {
  margin-top: 2rem;
  font-size: 1.1875rem;
  font-stretch: 106%;
  font-weight: 700;
  line-height: 1.3;
}

.prose ul,
.prose ol {
  padding-left: 1.35rem;
}

.prose li + li,
.prose li > ul {
  margin-top: 0.45rem;
}

.prose li::marker {
  color: var(--leaf-600);
  font-weight: 600;
}

.prose a {
  overflow-wrap: anywhere;
}

.summary {
  padding: 1.4rem 1.5rem 1.5rem;
  border-left: 4px solid var(--turmeric);
  background: var(--leaf-100);
}

.summary__title {
  font-size: 1.1875rem;
  font-stretch: 108%;
  font-weight: 700;
  color: var(--leaf-800);
}

.summary ul {
  margin-top: 0.75rem;
}


/* 12. Motion
   One deliberate movement: on the home page the logo bookmark drops out from
   under the top bar when the page opens. Skipped for people who ask their
   device to reduce motion.
   ========================================================================== */

@keyframes bookmark-drop {
  from {
    transform: translateY(-105%);
  }

  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .page-home .brand {
    animation: bookmark-drop 0.7s cubic-bezier(0.2, 0.8, 0.2, 1.1) 0.15s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
  }
}


/* 13. Print (mainly for the policy pages)
   ========================================================================== */

@media print {
  .topbar,
  .skip-link,
  .site-nav,
  .site-header__actions,
  .legal__toc,
  .hero__media,
  .hero__actions,
  .order__actions,
  .site-footer__grid {
    display: none !important;
  }

  body {
    font-size: 11pt;
    color: #000;
  }

  .site-header,
  .js .site-header {
    position: static;
    background: none;
    box-shadow: none;
  }

  .site-header__inner {
    min-height: 0;
    padding-left: 0;
  }

  .brand {
    position: static;
    filter: none;
  }

  .brand__ribbon {
    height: auto;
    padding: 0;
    clip-path: none;
  }

  .hero,
  .page-head,
  .site-footer {
    min-height: 0;
    margin-top: 0;
    padding-block: 1rem;
    background: none;
    color: #000;
  }

  .hero__lead,
  .page-head__meta,
  .site-footer a {
    color: #000;
  }

  .legal {
    display: block;
    padding-block: 0;
  }

  .prose {
    max-width: none;
  }

  .prose section {
    break-inside: avoid-page;
  }

  .section {
    padding-block: 1.5rem;
  }
}