/* ==========================================================================
   Chotta Mumbai — 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 badge, 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: taken from the logo (cyan circle, orange lettering, pink
     shadow, cream paper), plus a deep sea blue for text and dark areas */
  --ink-900: #072a39;
  --ink-800: #0b3a4e;
  --sky: #01b9df;
  --sky-100: #ddf2f7;
  --marigold: #fe8604;
  --marigold-deep: #e87500;
  --rani: #cf0457;
  --paper: #fdfeed;
  --paper-200: #f2f0d6;
  --ink: #0a2c3a;
  --ink-soft: #46606b;
  --line: #d3e0de;
  --line-on-dark: rgba(253, 254, 237, 0.18);
  --text-on-dark: #e3eeeb;

  /* 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 round logo badge that hangs from it */
  --header-h: 4.75rem;
  --badge: 8.75rem;          /* diameter of the badge */
  --badge-top: 0.5rem;       /* gap above the badge */
  --badge-stuck: 0.45;       /* badge size after scrolling, as a fraction */
  --badge-type: 1.5rem;      /* text shown until the logo image loads */
  --badge-hang: calc(var(--badge) + var(--badge-top) - var(--header-h));

  /* Focus ring colour; switched to orange on dark surfaces */
  --focus: var(--rani);
}

@media (max-width: 61.99em) {
  :root {
    --header-h: 4rem;
    --badge: 5.75rem;
    --badge-top: 0.375rem;
    --badge-stuck: 0.56;
    --badge-type: 1rem;
  }
}


/* 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(--paper);
  -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(--rani);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
}

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

strong {
  font-weight: 700;
}

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

::selection {
  background: var(--marigold);
  color: var(--ink-900);
}

[hidden] {
  display: none !important;
}

.on-dark {
  --focus: var(--marigold);
  color: var(--paper);
}

.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(--marigold);
  color: var(--ink-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(--sky-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(--ink-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(--marigold);
  color: var(--ink-900);
}

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

.btn--dark {
  background: var(--ink-800);
  color: var(--paper);
}

.btn--dark:hover {
  background: var(--ink-900);
  color: var(--paper);
}

.btn--light {
  border-color: rgba(253, 254, 237, 0.75);
  color: var(--paper);
}

.btn--light:hover {
  border-color: var(--paper);
  background: var(--paper);
  color: var(--ink-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(--ink-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(--paper);
  text-decoration: underline;
}

.topbar__link .icon,
.topbar__item .icon {
  color: var(--sky);
}

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

.topbar__short {
  display: none;
}

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

  .topbar__short {
    display: inline;
  }
}

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


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

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

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

.site-header.is-stuck {
  box-shadow: 0 0.375rem 1.5rem rgba(4, 24, 33, 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 blue. */
.js .page-home .site-header {
  background: transparent;
}

.js .page-home .site-header.is-stuck,
.js .page-home .site-header.nav-open {
  background: var(--ink-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(--badge) + 1.25rem);
}

/* Logo badge -------------------------------------------------------------
   The round logo sits on a cream disc, the colour of the logo's own paper,
   that hangs below the header. After scrolling, or while the phone menu is
   open, the badge shrinks to fit inside the header. */

.brand {
  position: absolute;
  left: 0;
  top: var(--badge-top);
  z-index: 2;
  display: block;
  width: var(--badge);
  height: var(--badge);
  border-radius: 50%;
  text-decoration: none;
}

.brand__badge {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--paper);
  box-shadow: 0 0.5rem 1.5rem rgba(4, 24, 33, 0.4);
  transform-origin: 0 0;
  transition: transform 0.28s ease;
}

.brand__wordmark,
.brand__logo {
  grid-area: 1 / 1;
}

/* The name as text, shown until images/logo.png has loaded (and if it is
   missing). Without JavaScript the logo image is simply shown. */
.brand__wordmark {
  font-size: var(--badge-type);
  font-weight: 800;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--ink-800);
  visibility: hidden;
}

.brand__logo {
  width: 90%;
  height: 90%;
  object-fit: contain;
}

.js .brand__wordmark {
  visibility: visible;
}

.js .brand__logo {
  opacity: 0;
}

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

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

.is-stuck .brand__badge,
.nav-open .brand__badge {
  transform: scale(var(--badge-stuck));
}

/* 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(--paper);
  text-decoration: underline;
  text-decoration-color: var(--marigold);
  text-decoration-thickness: 3px;
  text-underline-offset: 0.5em;
}

.site-nav__link[aria-current="page"] {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--marigold);
  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(253, 254, 237, 0.6);
  border-radius: var(--radius);
  background: var(--ink-800);
  color: var(--paper);
  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(--ink-800);
    box-shadow: 0 1.5rem 2rem rgba(4, 24, 33, 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
   Without a photo, the banner shows a large brush circle taken from the
   logo. A photo saved as images/banner.jpg replaces it automatically.
   ========================================================================== */

.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(--badge-hang) + 3rem);
  padding-bottom: clamp(3rem, 7vw, 5.5rem);
  overflow: hidden;
  background: var(--ink-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(--badge-hang) + 3rem);
}

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

/* Layer 1: the banner photo under a blue tint that keeps the text readable.
   The tint is strongest at the top (menu) and at the bottom (name, buttons). */
.hero__media::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(7, 42, 57, 0.88) 0%,
      rgba(7, 42, 57, 0.45) 24%,
      rgba(7, 42, 57, 0.45) 38%,
      rgba(7, 42, 57, 0.8) 70%,
      rgba(7, 42, 57, 0.94) 100%
    ),
    url("../images/banner.jpg") center / cover no-repeat;
}

/* Layer 2: the brush circle from the logo. js/main.js hides it as soon as
   images/banner.jpg exists. On phones and tablets it sits top right, partly
   behind the header; on wider screens it sits below the menu, to the right
   of the restaurant's name. */
.hero__disk {
  position: absolute;
  top: -2rem;
  right: 0;
  width: min(72vw, 30rem);
  width: clamp(9rem, 88svh - 24.5rem, min(72vw, 30rem)); /* smaller on short screens */
  aspect-ratio: 1;
  transform: translateX(25%); /* a quarter of the circle runs off the edge */
  background: url("../images/brush-circle-sky.png") center / contain no-repeat;
}

.hero.has-banner .hero__disk {
  display: none;
}

@media (min-width: 62em) {
  .hero__disk {
    top: calc(var(--header-h) + 1.5rem);
    width: min(44vw, 40rem);
    width: min(44vw, 40rem, 88svh - 13rem);
    transform: translateX(12%);
  }
}

/* The restaurant's name, lettered like the logo: orange with a hard pink
   shadow, on two lines. */
.hero__title {
  margin-left: 0.05em;
  font-size: min(15.5vw, 5.5rem);
  font-stretch: 125%;
  font-weight: 800;
  line-height: 0.92;
  letter-spacing: -0.02em;
  color: var(--marigold);
  text-shadow: -0.05em 0.05em 0 var(--rani);
}

.hero__title span {
  display: block;
}

@media (min-width: 48em) {
  .hero__title {
    font-size: min(13vw, 7rem);
  }
}

@media (min-width: 62em) {
  .hero__title {
    font-size: min(8.5vw, 9rem);
  }
}

.hero__lead {
  max-width: 34rem;
  margin-top: 1.25rem;
  font-size: clamp(1.1875rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.45;
  color: var(--text-on-dark);
  text-wrap: balance;
}

/* Each sentence of the banner line is wrapped in a <span> so that it stays
   on its own line wherever it fits. */
.hero__lead span {
  display: inline-block;
}

.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: text with an optional photo (images/about.jpg) beside it -------- */

.about__grid {
  display: grid;
  gap: 2.5rem 4rem;
  align-items: center;
}

.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(--paper-200);
}

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

  /* No photo: the text uses the full width. */
  .about__grid:has(> .about__media[hidden]) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* How to order: three steps, each numbered in a small brush circle ------- */

.steps {
  display: grid;
  gap: 3.75rem 2.5rem;
  margin-top: clamp(3.75rem, 7vw, 4.75rem);
  counter-reset: step;
}

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

.step::before {
  content: counter(step);
  position: absolute;
  top: -1.9rem;
  left: -0.3rem;
  display: grid;
  place-items: center;
  width: 3.75rem;
  height: 3.75rem;
  background: url("../images/brush-circle-marigold.png") center / contain no-repeat;
  color: var(--ink-900);
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}

.step__title {
  font-size: 1.375rem;
  font-stretch: 110%;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ink-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: three photos; a missing photo is hidden by js/main.js --------- */

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

/* Each photo takes a third of the row, so one or two photos keep the same
   size as three. */
.gallery__item {
  flex: 0 1 calc((100% - 2rem) / 3);
  min-width: 0;
}

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

@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(--ink-800);
  text-wrap: balance;
}

.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(--ink-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(--ink-900);
  color: var(--text-on-dark);
}

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

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

.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(--paper);
}

.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(--paper);
}

.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(--badge-hang) + 2.75rem);
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
  background: var(--ink-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(--ink-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(--ink-800);
  text-decoration: underline;
}

.toc__link.is-current {
  border-left-color: var(--ink-800);
  color: var(--ink-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(--ink-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 {
  margin-top: 0.45rem;
}

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

.prose a {
  overflow-wrap: anywhere;
}

.contact-card {
  padding: 1.4rem 1.5rem;
  border: 1px solid var(--line);
  line-height: 1.6;
}

.contact-card__name {
  display: block;
  font-size: 1.1875rem;
  font-stretch: 110%;
  font-weight: 700;
  color: var(--ink-800);
}


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

@keyframes badge-drop {
  from {
    transform: translateY(-115%) rotate(-28deg);
  }

  to {
    transform: translateY(0) rotate(0);
  }
}

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

  .page-home .brand {
    animation: badge-drop 0.8s cubic-bezier(0.2, 0.8, 0.25, 1.12) 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;
    width: 6rem;
    height: 6rem;
  }

  .brand__badge {
    box-shadow: none;
    transform: 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;
  }
}