/* ============================================================
   sections.css — per-section styling, in scroll order
   Spec: docs/DESIGN.md §2

   Hero · About (a five-part story moved by scrolling) · Practice Areas
   (a sideways rail with a bar beneath) · Founder (one screen) · Contact
   (one screen, over a photograph) · Footer (a thin bar).
   ============================================================ */

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

/* ------------------------------------------------------------
   The section header lockup — italic eyebrow, then a serif title.
   ------------------------------------------------------------ */

.sec-head { margin-bottom: clamp(36px, 4.5vw, 64px); }
.sec-head__eyebrow {
  font-family: var(--f-accent);
  font-style: italic;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.1em;
}
.sec-head__title {
  max-width: 15em;              /* em, not ch — see DESIGN.md §2, the ch trap */
  font-family: var(--f-serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
}

/* Display headings wrap to even line lengths rather than leaving one word
   stranded. Browsers without text-wrap support simply wrap as before. */
.sec-head__title,
.story__title,
.story__heading,
.founder__title,
.contact__title { text-wrap: balance; }


/* ============================================================
   00 · DISCLAIMER GATE
   ============================================================ */

.gate {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: clamp(20px, 5vw, 56px);
  overflow-y: auto;
  background: var(--paper);
  transition: opacity 420ms ease;
}
.gate.is-closing { opacity: 0; }
.gate__inner { width: 100%; max-width: 620px; text-align: center; }

.gate__mark { margin-bottom: clamp(28px, 5vh, 44px); }
.gate__mark-name {
  display: block;
  font-family: var(--f-serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.15;
}
.gate__mark-sub {
  display: block;
  margin-top: 0.55em;
  font-size: var(--t-meta);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.gate__head {
  font-size: var(--t-meta);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.6em;
}
.gate__body { text-align: left; margin-bottom: clamp(28px, 4vh, 40px); }
.gate__body p { font-size: 0.9375rem; line-height: 1.85; }
.gate__body p + p { margin-top: 1.1em; }
.gate__agree:focus { outline: 2px solid var(--ink); outline-offset: 3px; }

.is-gated, .is-gated body { overflow: hidden; }


/* ============================================================
   01 · NAVIGATION
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--paper);
  border-bottom: 1px solid var(--hair-soft);
}
/* The nav is locked open. It used to auto-hide unless the pointer was in the
   top zone or the reader was scrolling up; the client asked for it pinned. */

/* Three columns: the wordmark at the left gutter, the section links centred
   on the window, the Contact me button at the right gutter. */
.nav__inner {
  height: var(--nav-h);
  padding-inline: var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: var(--gap);
}
.nav__mark { justify-self: start; line-height: 1.1; }
.nav__mark:hover { text-decoration: none; }
.nav__mark-name {
  display: block;
  font-family: var(--f-serif);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--ink);
}
.nav__mark-sub {
  display: block;
  margin-top: 3px;
  font-size: 0.5625rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav__links {
  display: flex;
  gap: clamp(28px, 3.8vw, 60px);
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.nav__links a { color: var(--muted); transition: color 200ms ease; }
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); text-decoration: none; }

/* Contact me: replaces the phone number. A small popup beneath it holds
   Email (copies the address) and WhatsApp (opens the chat). */
.nav__contact { position: relative; justify-self: end; }
.nav__cta {
  display: inline-flex;
  align-items: center;
  padding: 0.85em 1.6em;
  border: 1px solid var(--ink);
  background: transparent;
  font-family: inherit;
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 220ms ease, color 220ms ease;
}
.nav__cta:hover,
.nav__cta[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.nav__pop {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 300px;
  background: var(--paper);
  border: 1px solid var(--hair);
  box-shadow: 0 18px 48px rgba(34, 34, 34, 0.1);
  animation: pop-in 180ms ease-out;
}
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px); } }
@media (prefers-reduced-motion: reduce) { .nav__pop { animation: none; } }

.reach__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 32px;
  align-items: center;
  width: 100%;
  padding: 16px 20px;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  color: var(--ink);
  cursor: pointer;
  transition: background-color 200ms ease;
}
.reach__item + .reach__item { border-top: 1px solid var(--hair-soft); }
.reach__item:hover { background: var(--shade); text-decoration: none; }
.reach__label {
  grid-column: 1;
  font-family: var(--f-accent);
  font-style: italic;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.reach__value { grid-column: 1; margin-top: 4px; font-size: 0.9375rem; color: var(--ink); }
.reach__hint {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.reach__item.is-copied .reach__hint { color: var(--ink); }

.nav__toggle {
  display: none;
  justify-self: end;
  font-size: 0.75rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
}
.nav__panel {
  position: fixed;
  inset: 0;
  z-index: 899;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(22px, 5vh, 40px);
  padding: clamp(24px, 8vw, 60px);
}
.nav__panel-links { display: flex; flex-direction: column; gap: clamp(10px, 2.2vh, 20px); }
.nav__panel-links a { font-family: var(--f-serif); font-size: 1.75rem; font-weight: 400; color: var(--ink); }
.nav__panel-reach { width: min(100%, 380px); border: 1px solid var(--hair); }

@media (max-width: 900px) {
  .nav__inner { grid-template-columns: minmax(0, 1fr) auto; }
  .nav__links, .nav__contact { display: none; }
  .nav__toggle { display: inline-flex; }
}
@media (min-width: 901px) { .nav__panel { display: none !important; } }


/* ============================================================
   1 · HERO — firm name centred and bold over the photograph
   ============================================================ */

.hero {
  position: relative;
  /* The first screen is the entire image. svh so mobile browser chrome does
     not push the bottom of it off. */
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  margin-top: calc(-1 * var(--nav-h));   /* the sticky nav reserves flow above */
  background: #23262B;
}
.hero__media { position: absolute; inset: 0; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  /* 0.55 measured: anything lighter left the wordmark under 3:1. */
  background: rgba(22, 24, 28, 0.55);
  pointer-events: none;
}

.hero__inner {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: calc(var(--nav-h) * 0.6) clamp(20px, 5vw, 48px) 0;
  color: #FFFFFF;
}
/* The masthead is the nav's wordmark, scaled up: same faces, case, weight and
   tracking, and the same proportions between the two lines (sub 0.409 of the
   name, gap 0.136), so the first screen and the nav show one mark. */
.hero__inner { --mark: clamp(2.5rem, 6vw, 5.5rem); }
/* On phones the mark scales with the window so the tracked second line stays
   on one row inside the side padding, down to 320px. */
@media (max-width: 600px) { .hero__inner { --mark: clamp(2rem, 9.6vw, 2.5rem); } }
.hero__name {
  font-family: var(--f-serif);
  font-weight: 500;
  font-size: var(--mark);
  line-height: 1.1;
  text-shadow: 0 3px 34px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.35);
}
.hero__sub {
  margin-top: calc(var(--mark) * 0.136);
  padding-left: 0.2em;   /* balances the trailing tracking so it centres true */
  font-size: calc(var(--mark) * 0.409);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.5);
}
.hero__rule {
  display: block;
  width: 56px;
  height: 1px;
  background: rgba(255, 255, 255, 0.5);
  margin: clamp(22px, 3.4vh, 34px) auto;
}
.hero__meta {
  font-size: var(--t-meta);
  line-height: 2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.86);
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.55);
}


/* ============================================================
   2 · ABOUT — five parts, moved by scrolling
   Stacked by default: no script, reduced motion, or a small window.
   Pinned when carousel.js adds data-pinned: the section becomes several
   screens tall, its frame sticks under the nav, and scrolling slides the
   parts across and fills the bar at the bottom.
   ============================================================ */

.story { --parts: 5; }
.story__frame { padding-block: var(--section-y); }
.story__eyebrow { margin-bottom: clamp(28px, 4vw, 48px); }

.story__slide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  row-gap: 18px;
}
.story__slide + .story__slide {
  margin-top: clamp(40px, 6vw, 72px);
  padding-top: clamp(40px, 6vw, 72px);
  border-top: 1px solid var(--hair);
}
.story__num {
  font-family: var(--f-serif);
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  line-height: 0.85;
  letter-spacing: -0.02em;
  color: var(--numeral);
}
.story__label {
  margin-bottom: 1.4em;
  font-family: var(--f-accent);
  font-style: italic;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.story__title {
  max-width: 14em;
  font-family: var(--f-serif);
  font-size: clamp(2.5rem, min(5.2vw, 9vh), 4.75rem);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.story__kicker {
  margin-top: 0.9em;
  font-family: var(--f-accent);
  font-style: italic;
  font-size: clamp(1.25rem, 1.9vw, 1.625rem);
  line-height: 1.4;
  color: var(--body);
}
.story__heading {
  max-width: 16em;
  font-family: var(--f-serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.story__text {
  margin-top: 1.2em;
  max-width: 58ch;
  font-size: var(--t-lead);
  line-height: 1.75;
  color: var(--body);
}
.story__text + .story__text { margin-top: 0.9em; }

.story__progress { display: none; }

@media (min-width: 900px) {
  .story__slide {
    grid-template-columns: minmax(0, 3fr) minmax(0, 9fr);
    column-gap: clamp(32px, 5vw, 80px);
  }
}

/* Pinned. Scroll length is the screen itself plus 60svh per part. */
.story[data-pinned] { height: calc(100svh - var(--nav-h) + var(--parts) * 60svh); }
.story[data-pinned] .story__pin {
  position: sticky;
  top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  overflow: hidden;
}
.story[data-pinned] .story__frame {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-block: clamp(28px, 5vh, 56px) clamp(24px, 4vh, 44px);
}
.story[data-pinned] .story__eyebrow { margin-bottom: 0; }
.story[data-pinned] .story__stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.story[data-pinned] .story__track {
  display: flex;
  width: 100%;
  will-change: transform;
}
.story[data-pinned] .story__slide {
  flex: 0 0 100%;
  margin: 0;
  padding: 0 clamp(20px, 4vw, 64px) 0 0;
  border: 0;
}
.story[data-pinned] .story__progress {
  display: grid;
  grid-template-columns: repeat(var(--parts), minmax(0, 1fr));
  gap: clamp(8px, 1.4vw, 20px);
}
.story__step { display: block; color: var(--muted); }
.story__step-bar {
  position: relative;
  display: block;
  height: 2px;
  background: var(--hair);
  overflow: hidden;
}
.story__fill {
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
}
.story__step-label {
  display: block;
  margin-top: 0.9em;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: color 200ms ease;
}
.story__step.is-active .story__step-label { color: var(--ink); }


/* ============================================================
   3 · PRACTICE AREAS — nine cards on a rail, moved sideways
   ============================================================ */

.areas__head .sec-head { margin-bottom: clamp(32px, 4vw, 56px); }
.areas__head .sec-head__title { max-width: 16em; }

/* Left edge on the container; right edge runs to the viewport, so the next
   card always shows. The same inset is the scroll padding, so settling on a
   card lands it on the container line. Proximity snapping, so dragging the
   bar isn't yanked back to a card mid-gesture. */
.rail__track {
  --card-gap: clamp(14px, 1.8vw, 24px);
  display: flex;
  gap: var(--card-gap);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 2px max(calc((100% - var(--container)) / 2), 16px);
  scroll-padding-inline: max(calc((100% - var(--container)) / 2), 16px);
}
.rail__track::-webkit-scrollbar { display: none; }
.rail__track:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .rail__track { cursor: grab; } }
.rail.is-dragging .rail__track { cursor: grabbing; user-select: none; }

/* The bar beneath: a hairline with a thumb showing how much of the rail is in
   view and where. Press anywhere on it to jump, or drag the thumb. The box is
   taller than the line so it's easy to catch. */
.rail__bar {
  position: relative;
  height: 20px;
  margin-top: clamp(28px, 3.4vw, 44px);
  cursor: pointer;
  touch-action: none;
}
.rail__bar::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--hair);
}
.rail__thumb {
  position: absolute;
  left: 0;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  background: var(--ink);
  transition: height 160ms ease, margin-top 160ms ease;
}
.rail__bar:hover .rail__thumb,
.rail.is-dragging .rail__thumb { height: 4px; margin-top: -2px; }
.rail__bar.is-idle { visibility: hidden; }

.area-card {
  flex: 0 0 calc((var(--container) - 2 * var(--card-gap)) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  min-height: clamp(320px, 27vw, 380px);
  padding: clamp(24px, 2.6vw, 36px);
  background: var(--paper);
}
.area-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.area-card__num {
  font-family: var(--f-serif);
  font-size: clamp(2rem, 2.8vw, 2.75rem);
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--numeral);
}
.area-card__icon { width: 34px; height: 34px; color: var(--muted); stroke-width: 1.6; }
.area-card__name {
  font-size: var(--t-row);
  font-weight: 400;
  line-height: 1.25;
  color: var(--ink);
}
.area-card__note {
  margin: 0.75em 0 1.6em;
  font-size: var(--t-body-sm);
  line-height: 1.7;
  color: var(--body);
}
.area-card__forum {
  margin-top: auto;
  padding-top: 1.1em;
  border-top: 1px solid var(--hair);
  font-family: var(--f-accent);
  font-style: italic;
  font-size: 0.8125rem;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .area-card { flex-basis: calc((var(--container) - var(--card-gap)) / 2); }
}
@media (max-width: 640px) {
  .area-card { flex-basis: 84%; min-height: 0; }
}


/* ============================================================
   4 · FOUNDER — one screen: portrait, name and role, bio, and the
   record in a band that runs edge to edge
   Sizes lean on vh so the whole section fits a laptop screen; below
   900px wide or 640px tall it simply grows with its content.
   ============================================================ */

.founder { display: flex; flex-direction: column; }
@media (min-width: 900px) and (min-height: 640px) {
  .founder { min-height: calc(100svh - var(--nav-h)); }
}

.founder__grid {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(32px, 5vw, 96px);
  align-items: center;
  padding-block: clamp(20px, 3vh, 56px);
}
.founder__figure { margin: 0; }
.portrait {
  display: block;
  height: clamp(320px, 54vh, 600px);
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--shade);   /* shows only while the photograph loads */
}
.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.founder__main .sec-head__eyebrow { margin-bottom: 1.2em; }
.founder__title {
  font-family: var(--f-serif);
  font-size: clamp(2.25rem, min(4.2vw, 7vh), 3.75rem);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.founder__role {
  display: block;
  margin-top: 0.3em;
  font-family: var(--f-accent);
  font-style: italic;
  font-size: 0.52em;
  letter-spacing: 0;
  color: var(--body);
}
.founder__body { margin-top: clamp(16px, 2.6vh, 32px); max-width: 80ch; }
.founder__body p {
  font-size: clamp(0.9375rem, calc(0.55vw + 0.95vh), 1.125rem);
  line-height: 1.6;
  color: var(--body);
}
.founder__body p + p { margin-top: 0.85em; }

/* The record — three cells across the full width of the window, dividers
   between them. The outer cells are padded so their text still lines up with
   the container. The label comes first in the DOM, so a screen reader hears
   "Enrolment, 2003, …" rather than a bare number. */
/* Outer columns are the edge padding plus a fixed quarter of the container,
   so their text keeps the same width on any screen (as plain fractions, a
   1920px window squeezed the left cell to five lines). The middle cell takes
   the rest, wide enough for each qualification to sit on one line.
   margin: 0 because a <dl> brings 1em above and below by default. */
.cred {
  --edge: max(calc((100vw - var(--container)) / 2), 20px);
  display: grid;
  grid-template-columns:
    calc(var(--edge) + var(--container) * 0.25)
    minmax(0, 1fr)
    calc(var(--edge) + var(--container) * 0.25);
  margin: 0;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--hair);
}
.cred__item {
  display: flex;
  flex-direction: column;
  padding: clamp(14px, 2.4vh, 32px) clamp(20px, 3vw, 48px);
}
.cred__item:first-child { padding-left: var(--edge); }
.cred__item:last-child { padding-right: var(--edge); }
.cred__item + .cred__item { border-left: 1px solid var(--hair); }
.cred__figure {
  order: -1;
  margin: 0;
  font-family: var(--f-serif);
  font-size: clamp(2.25rem, min(4.6vw, 6.4vh), 4.25rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.cred dt {
  margin-top: 0.75em;
  font-family: var(--f-accent);
  font-style: italic;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.cred__detail {
  margin: 0.5em 0 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--body);
}
.cred__detail span { display: block; }

@media (max-width: 899px) {
  .founder__grid {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    padding-block: var(--section-y) clamp(32px, 6vw, 48px);
  }
  .portrait { height: auto; width: min(100%, 300px); }
  .cred { grid-template-columns: minmax(0, 1fr); }
  .cred__item,
  .cred__item:first-child,
  .cred__item:last-child { padding-inline: var(--edge); }
  .cred__item + .cred__item { border-left: 0; border-top: 1px solid var(--hair); }
}


/* ============================================================
   5 · CONTACT — one screen over the Bombay High Court; the photograph
   ends where the section ends
   ============================================================ */

.contact {
  position: relative;
  overflow: hidden;
  display: grid;
  place-items: center;
  min-height: calc(100svh - var(--nav-h));
  padding-block: clamp(64px, 10vh, 120px);
  background: #23262B;
  color: #FFFFFF;
}
.contact__media { position: absolute; inset: 0; }
.contact__media img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; }
.contact::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(20, 22, 26, 0.66);
  pointer-events: none;
}
.contact :focus-visible { outline-color: #FFFFFF; }

.contact__inner { position: relative; z-index: 2; text-align: center; }
.contact__eyebrow {
  margin-bottom: 1.1em;
  font-family: var(--f-accent);
  font-style: italic;
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
}
.contact__title {
  font-family: var(--f-serif);
  font-size: var(--t-display);
  font-weight: 400;
  line-height: 1.15;
  color: #FFFFFF;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4);
}
.contact__lead {
  margin: 1em auto 0;
  max-width: 46ch;
  font-size: var(--t-lead);
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.92);
}
.contact__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(28px, 4vh, 44px);
}
.contact__meta {
  margin-top: clamp(24px, 3vh, 36px);
  font-size: var(--t-meta);
  letter-spacing: 0.08em;
  color: rgba(255, 255, 255, 0.8);
}


/* ============================================================
   FOOTER — a thin bar, end to end: the disclaimer across the full
   width, then the copyright left and the photo credits right
   ============================================================ */

.foot { background: var(--shade-deep); }

.foot__bar { padding: clamp(12px, 1.4vw, 18px) var(--gutter); }
.foot__legal p { font-size: 0.6875rem; line-height: 1.5; color: var(--muted); }
.foot__legal strong { color: var(--ink); font-weight: 600; }
.foot__legal a { text-decoration: underline; text-underline-offset: 0.2em; }
.foot__fine {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.2em 2em;
  margin-top: 0.35em;
}