/* ==========================================================================
   Components — nav, menu, scroll chrome, buttons, footer
   ========================================================================== */

/* --- Nav ------------------------------------------------------------------
   Permanently visible. Never hides on scroll. Colour is swapped by nav.js as
   each section's background passes behind it.
   -------------------------------------------------------------------------- */

/* Logo height, shared with the menu's close button so it lands exactly
   where the hamburger was. */
:root {
  --nav-logo-h: 60px;
  /* Where the lettering's centre sits below the image's centre, as a share
     of the logo's height (see .nav below). */
  --nav-text-ratio: 0.21;
}

@media (max-width: 640px) {
  :root {
    --nav-logo-h: 44px;
  }
}

/* The English logo is wider and its letters fill more of its height, so it
   runs shorter to match the Hebrew letter size (cap height ≈ 20px desktop,
   15px phone), and its lettering sits lower in the image (cap-height centre
   at ~78% of the height, nudged toward the lowercase x-height). */
[dir="ltr"] {
  --nav-logo-h: 48px;
  --nav-text-ratio: 0.29;
}

@media (max-width: 640px) {
  [dir="ltr"] {
    --nav-logo-h: 35px;
  }
}

/* The logo's lettering sits low in its image (the building mark rises above
   it): the letters' centre is 21% of the image height below the image's
   centre. The controls drop by that much so they line up with the words,
   not with the image box. */
.nav {
  --nav-text-offset: calc(var(--nav-logo-h) * var(--nav-text-ratio));

  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-nav);
  pointer-events: none;
}

/* The bar is transparent, so page content scrolls under it. A soft scrim
   guarantees the logo and menu stay readable no matter what passes behind —
   an illustration, a photograph, or a bright accent panel. It fades to
   nothing, so it never reads as a solid header bar. */
.nav::before {
  content: "";
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  block-size: 140px;
  /* Without a z-index this absolutely-positioned scrim paints after the
     in-flow .nav__inner, sitting on top of the logo and rule lines. */
  z-index: -1;
  background: linear-gradient(
    to bottom,
    var(--nav-scrim, rgb(255 252 244 / 0.92)) 0%,
    var(--nav-scrim-mid, rgb(255 252 244 / 0.6)) 45%,
    transparent 100%
  );
  pointer-events: none;
  transition: background var(--dur-s) var(--ease-out);
}

.nav__inner {
  display: flex;
  align-items: center;
  gap: var(--u-4);
  inline-size: min(100% - (2 * var(--gutter)), var(--w-max));
  margin-inline: auto;
  padding-block: var(--u-4);
}

.nav__inner > * {
  pointer-events: auto;
}

/* Hamburger */
.nav__toggle {
  display: grid;
  place-content: center;
  gap: 5px;
  inline-size: 44px;
  block-size: 44px;
  color: var(--nav-fg, var(--ink));
}

.nav__toggle span:not(.sr-only) {
  display: block;
  inline-size: 22px;
  block-size: 1.5px;
  background: currentColor;
  transition: transform var(--dur-s) var(--ease-out),
    opacity var(--dur-s) var(--ease-out);
}

.nav__toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(6.5px) rotate(45deg);
}
.nav__toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav__toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-6.5px) rotate(-45deg);
}

/* Language switch, beside the hamburger. Each link keeps a 44px-tall tap
   target even though the letters themselves are small. */
.nav__lang {
  display: flex;
  align-items: center;
  gap: var(--u-1);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-body-strong);
  letter-spacing: 0.08em;
  color: var(--nav-fg, var(--ink));
  transition: color var(--dur-s) var(--ease-out);
}

.nav__lang a {
  display: grid;
  place-items: center;
  min-block-size: 44px;
  min-inline-size: 32px;
  /* 0.72, not lower: the dimmed language is still text and needs 4.5:1. */
  opacity: 0.72;
  transition: opacity var(--dur-s) var(--ease-out);
}

.nav__lang a:hover,
.nav__lang a[aria-current="true"] {
  opacity: 1;
}

.nav__lang span {
  opacity: 0.4;
}

/* The long logo, at the inline start (far right in Hebrew, far left in
   English); its auto margin pushes the language switch and hamburger to the
   opposite edge. Two stacked images — full colour for light sections, a
   white silhouette for dark ones — so the swap is the same display toggle
   nav.js already drives. */
.nav__logo {
  /* Flex so a logo shorter than the link's 44px tap height sits centred in
     it (the English logo on a phone) — the controls' text offset assumes
     the image is centred in the row. */
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  margin-inline-end: auto;
}

.nav__logo img {
  block-size: var(--nav-logo-h);
  inline-size: auto;
}

.nav__lang,
.nav__toggle {
  translate: 0 var(--nav-text-offset);
}

@media (max-width: 640px) {
  .nav__inner {
    gap: var(--u-2);
  }
}

/* Two logos stacked: full colour for light backgrounds, flat white for dark.
   Only one is ever visible. */
.nav__logo-colour {
  display: block;
}
.nav__logo-mono {
  display: none;
}

.nav.is-on-light {
  --nav-fg: var(--ink);
  --nav-scrim: rgb(255 252 244 / 0.92);
  --nav-scrim-mid: rgb(255 252 244 / 0.55);
}

.nav.is-on-dark {
  --nav-fg: #ffffff;
  --nav-scrim: rgb(35 31 32 / 0.5);
  --nav-scrim-mid: rgb(35 31 32 / 0.24);
}

.nav.is-on-dark .nav__logo-colour {
  display: none;
}
.nav.is-on-dark .nav__logo-mono {
  display: block;
}

/* --- Menu ----------------------------------------------------------------- */

.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  background: var(--paper);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-2%);
  transition: opacity var(--dur-m) var(--ease-out),
    transform var(--dur-m) var(--ease-out), visibility 0s linear var(--dur-m);
}

.menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.menu .container {
  display: grid;
  justify-items: center;
}

.menu__close {
  position: absolute;
  /* Same spot as the hamburger: nav padding, centred in the logo's row,
     then the same drop to the lettering. */
  inset-block-start: calc(var(--u-4) + (max(var(--nav-logo-h), 44px) - 44px) / 2 + var(--nav-logo-h) * var(--nav-text-ratio));
  inset-inline-end: var(--gutter);
  display: grid;
  place-items: center;
  inline-size: 44px;
  block-size: 44px;
  color: var(--ink);
  transition: color var(--dur-s) var(--ease-out);
}

.menu__close:hover {
  color: var(--field-ink);
}

.menu__close .icon {
  inline-size: 22px;
  block-size: 22px;
}

.menu__logo {
  display: block;
  inline-size: 72px;
  margin-block-end: var(--u-6);
}

.menu__list {
  display: grid;
  justify-items: center;
  gap: var(--u-1);
}

/* Sized down from a near-hero scale: at clamp(1.5rem … 2.75rem) four items
   filled the screen and read as a wall of type rather than a list. */
.menu__link {
  display: inline-block;
  font-family: var(--font-display);
  font-size: clamp(1.125rem, 0.95rem + 1vw, 1.5rem);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-heading);
  line-height: 1.5;
  color: var(--ink);
  transition: color var(--dur-s) var(--ease-out);
}

.menu__link:hover,
.menu__link[aria-current="page"] {
  color: var(--field-ink);
}

.menu__meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--u-5);
  margin-block-start: var(--u-6);
  font-size: var(--fs-small);
  color: var(--ink-60);
}

/* The plowed-field stripes in the full-colour mark: original solid brand green
   rather than the drifting earth→green gradient, which read as washed-out. */
.logo-field {
  fill: var(--field);
}

.menu__meta a {
  display: inline-flex;
  align-items: center;
  min-block-size: 24px;
  min-inline-size: 24px;
}

.menu__meta a:hover {
  color: var(--field-ink);
}

/* --- Scroll chrome --------------------------------------------------------
   Progress rail, act counter and scroll cue. These exist so a pinned section
   never reads as a frozen page.
   -------------------------------------------------------------------------- */

.progress {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  inline-size: 2px;
  z-index: var(--z-nav);
  /* The rail spans the full viewport height, so it is always over several
     sections at once and cannot pick a side. A neutral translucent track
     reads against both light and dark; the fill is brand green, which does
     the same. */
  background: rgb(128 120 100 / 0.22);
  pointer-events: none;
}

.progress__fill {
  inline-size: 100%;
  block-size: 100%;
  background: var(--field);
  transform: scaleY(0);
  transform-origin: top center;
}

/* Sits opposite the scroll cue. The cue lives at the reading start (right in
   Hebrew), so the counter takes the other corner. `direction: ltr` is scoped
   to the numerals — putting it on the positioned box would flip which
   physical corner inset-inline-end resolves to. */
.act-counter {
  display: none;                    /* number scroller removed per request */
  position: fixed;
  inset-block-end: var(--u-5);
  inset-inline-end: var(--u-5);
  z-index: var(--z-nav);
  align-items: baseline;
  gap: 2px;
  font-family: var(--font-display);
  font-size: var(--fs-counter);
  font-weight: var(--fw-label);
  letter-spacing: 0.08em;
  padding: var(--u-2) var(--u-3);
  border-radius: var(--r-pill);
  /* A real backdrop, not just a colour swap. The counter floats over
     photography whose luminance changes across the frame — inverting the text
     alone cannot guarantee contrast against a bright sky. The plate is opaque
     and themed, so it disappears into flat sections and does its job over
     images. */
  background: var(--chrome-bg, var(--paper));
  color: var(--chrome-fg, var(--ink));
  pointer-events: none;
  transition: color var(--dur-s) var(--ease-out),
    background var(--dur-s) var(--ease-out),
    opacity var(--dur-m) var(--ease-out);
}

/* The LTR run is an inner box. Putting direction:ltr on the positioned
   element itself would also flip which physical corner inset-inline-end
   resolves to, moving the counter across the screen. */
.act-counter__nums {
  display: flex;
  align-items: baseline;
  gap: 2px;
  direction: ltr;
  unicode-bidi: isolate;
}

.act-counter__total {
  opacity: 0.5;
}

.act-counter.is-gone {
  opacity: 0;
}

/* Resolved per element against whatever is behind that element, not shared
   with the nav — the nav is at the top of the viewport and the counter at the
   bottom, so they are frequently over different sections. */
.chrome-on-light {
  --chrome-fg: var(--ink);
  --chrome-bg: var(--paper);
}

.chrome-on-dark {
  --chrome-fg: #ffffff;
  --chrome-bg: var(--ink);
}

/* A single thin chevron, centred at the bottom of the hero. Physical
   left/translate rather than logical inset: centring is direction-neutral. */
.cue {
  position: absolute;
  inset-block-end: var(--u-4);
  left: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  transition: opacity var(--dur-m) var(--ease-out);
}

.cue.is-gone {
  opacity: 0;
}

.cue__chevron {
  inline-size: 28px;
  block-size: 14px;
  overflow: visible;
  opacity: 0.85;
}

/* Beat dots — progress within a pinned sequence */
.beat {
  display: flex;
  gap: var(--u-2);
  align-items: center;
}

.beat__dot {
  inline-size: 6px;
  block-size: 6px;
  border-radius: var(--r-pill);
  background: currentColor;
  opacity: 0.3;
  transition: opacity var(--dur-s) var(--ease-out),
    transform var(--dur-s) var(--ease-out);
}

.beat__dot.is-active {
  opacity: 1;
  transform: scale(1.5);
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--u-3);
  padding: var(--u-4) var(--u-6);
  border: 1px solid currentColor;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-label);
  letter-spacing: 0.08em;
  color: var(--t-fg);
  transition: background var(--dur-s) var(--ease-out),
    color var(--dur-s) var(--ease-out);
}

.btn:hover {
  background: var(--t-fg);
  color: var(--t-bg);
}

.btn .icon {
  inline-size: 16px;
  block-size: 16px;
  /* The arrow points along the reading direction, so it flips with dir. */
  transform: scaleX(var(--flip));
}

.icon {
  inline-size: 1em;
  block-size: 1em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* --- Footer ---------------------------------------------------------------
   Carried over from the previous build unchanged — same markup, same metrics,
   same colours. Its palette is pinned locally so the new section tokens can
   change without moving it.
   -------------------------------------------------------------------------- */

.footer {
  --c-ink: #262626;
  --c-muted: #6b7280;
  --c-border: #e6e2d5;
  --c-green: #41634a;

  /* The section above the footer bleeds downward (a negative bottom margin so
     its photo can run under the furrow's curve), which pulls the footer up
     into it. This top padding is the clearance that keeps out of its way. */
  padding-block: calc(var(--u-6) + clamp(64px, 12vw, 140px)) var(--u-5);
  background: var(--paper);
  color: var(--c-ink);
  border-block-start: 1px solid var(--c-border);
}

.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--u-6) clamp(var(--u-6), 6vw, var(--u-8));
  padding-block-end: var(--u-6);
}

.footer__brand {
  margin-inline-end: auto;
  display: grid;
  gap: var(--u-3);
  justify-items: start;
}

.footer__logo {
  display: inline-flex;
  align-items: center;
  min-block-size: 0;
  min-inline-size: 0;
}

.footer__logo img {
  block-size: 56px;
  inline-size: auto;
}

/* English logo: shorter, to match the Hebrew letter size. */
[dir="ltr"] .footer__logo img {
  block-size: 44px;
}

.footer__name {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--c-ink);
}

.footer__tagline {
  margin-block-start: calc(var(--u-2) * -1 + 2px);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.footer__heading {
  margin-block-end: var(--u-3);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--c-ink);
}

.footer__list {
  display: grid;
  gap: var(--u-2);
  font-size: var(--fs-small);
}

/* 24px is the WCAG 2.2 AA minimum target size. The links are 14px text on a
   tight line box, so the box is grown rather than the type — the footer looks
   identical, the tap target does not. */
.footer__list a {
  display: inline-flex;
  align-items: center;
  color: var(--c-muted);
  min-block-size: 24px;
  min-inline-size: 24px;
  transition: color 200ms var(--ease-out);
}

.footer__list a:hover {
  color: var(--c-green);
}

.footer__contact {
  font-style: normal;
}

.footer__social {
  display: inline-flex;
  align-items: center;
  gap: var(--u-2);
  min-block-size: 24px;
}

.footer__social .icon {
  inline-size: 16px;
  block-size: 16px;
}

.footer__bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--u-2) var(--u-4);
  padding-block-start: var(--u-4);
  border-block-start: 1px solid var(--c-border);
  font-size: var(--fs-small);
  color: var(--c-muted);
}

.footer__legal {
  display: inline-flex;
  align-items: center;
  gap: var(--u-3);
}

.footer__legal a {
  display: inline-flex;
  align-items: center;
  color: var(--c-muted);
  min-block-size: 24px;
  min-inline-size: 24px;
  transition: color 200ms var(--ease-out);
}

.footer__legal a:hover {
  color: var(--c-green);
}

/* Reopens the cookie consent question; looks like its neighbouring links. */
.footer__consent {
  min-block-size: 24px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--c-muted);
  font: inherit;
  cursor: pointer;
  transition: color 200ms var(--ease-out);
}

.footer__consent:hover {
  color: var(--c-green);
}

.footer__disclaimer {
  flex-basis: 100%;
  color: var(--c-muted);
  font-size: 0.8125rem;
}

@media (max-width: 640px) {
  .footer__brand {
    flex-basis: 100%;
    margin-inline-end: 0;
  }
  .footer__bar {
    justify-content: flex-start;
  }
  .menu__link {
    font-size: var(--fs-h3);
  }
}

/* --- Split text scaffolding -----------------------------------------------
   SplitText writes these classes. The mask wrapper is what makes body lines
   rise from behind a hard edge instead of just fading.
   -------------------------------------------------------------------------- */

.split-char,
.split-word {
  display: inline-block;
  will-change: transform, opacity;
}

.split-line {
  display: block;
  will-change: transform;
}


/* Honeypot. Not .sr-only — that keeps it in the accessibility tree, which is
   the opposite of what is wanted: a person must never reach this field. It is
   removed from layout, from painting and from the tab order. */
.form__hp {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  opacity: 0;
  pointer-events: none;
}

/* ==========================================================================
   Accessibility menu — assets/js/a11y.js
   ========================================================================== */

/* Every size in the design is a clamp() in rem, so one multiplier on the root
   moves the whole scale together and keeps the relationships between heading,
   body and label intact. The vw half of each clamp stays put, which is what
   stops the largest step from breaking the layouts it grows inside. */
html {
  font-size: calc(100% * var(--a11y-scale, 1));
}

.a11y {
  position: fixed;
  inset-block-end: clamp(16px, 3vw, 28px);
  inset-inline-start: clamp(16px, 3vw, 28px);
  z-index: 90; /* above the page, below the full-screen menu */
  display: grid;
  justify-items: start;
  gap: var(--u-3);
  font-family: var(--font-body);
}

.a11y__toggle {
  display: grid;
  place-items: center;
  inline-size: 48px;
  block-size: 48px;
  border-radius: 50%;
  border: 1px solid var(--paper);
  background: var(--field);
  color: var(--paper);
  box-shadow: 0 4px 18px rgb(35 31 32 / 0.28);
  transition: background var(--dur-s) var(--ease-out), scale var(--dur-s) var(--ease-out);
}

.a11y__toggle svg {
  inline-size: 26px;
  block-size: 26px;
}

.a11y__toggle:hover {
  background: var(--ink);
  scale: 1.05;
}

.a11y__panel {
  position: absolute;
  inset-block-end: calc(48px + var(--u-3));
  inset-inline-start: 0;
  inline-size: min(280px, calc(100vw - 32px));
  padding: var(--u-4);
  border: 1px solid var(--ink-10);
  border-radius: 14px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 12px 40px rgb(35 31 32 / 0.22);
  display: grid;
  gap: var(--u-2);
  text-align: start;
}

/* The hidden attribute is a UA rule, so any class that sets display beats it.
   Without this the panel is open on every page load. */
.a11y__panel[hidden] {
  display: none;
}

.a11y__title {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  font-weight: var(--fw-heading);
  letter-spacing: var(--ls-label);
  margin-block-end: var(--u-1);
}

.a11y__close {
  position: absolute;
  inset-block-start: 4px;
  inset-inline-end: 4px;
  inline-size: 36px;
  block-size: 36px;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ink-60);
}

.a11y__close:hover {
  color: var(--ink);
}

.a11y__item {
  display: block;
  inline-size: 100%;
  min-block-size: 40px;
  padding: var(--u-2) var(--u-3);
  border: 1px solid var(--ink-10);
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: var(--fs-small);
  text-align: start;
  transition: background var(--dur-s) var(--ease-out);
}

.a11y__item:hover {
  background: var(--surface);
}

/* aria-pressed is the state; the tint is only its visible echo, so the
   control is still readable to someone who cannot see the tint. */
.a11y__item[aria-pressed="true"] {
  background: var(--field);
  border-color: var(--field);
  color: var(--paper);
}

.a11y__item[aria-pressed="true"]::after {
  content: " ✓";
}

.a11y__item--link {
  text-decoration: none;
}

.a11y__item--reset {
  margin-block-start: var(--u-2);
  border-style: dashed;
  color: var(--ink-60);
}

.a11y__size {
  display: flex;
  align-items: center;
  gap: var(--u-2);
  min-block-size: 40px;
  padding-inline: var(--u-3);
}

.a11y__size-label {
  flex: 1;
  font-size: var(--fs-small);
}

.a11y__step {
  inline-size: 36px;
  block-size: 36px;
  border: 1px solid var(--ink-10);
  border-radius: 8px;
  font-size: 1.1rem;
  line-height: 1;
  color: inherit;
}

.a11y__step:hover:not(:disabled) {
  background: var(--surface);
}

.a11y__step:disabled {
  opacity: 0.35;
}

.a11y__gauge {
  min-inline-size: 3ch;
  font-size: var(--fs-small);
  font-weight: var(--fw-body-strong);
  text-align: center;
}

/* --- The four modes ------------------------------------------------------ */

/* Contrast: the muted tokens go to full ink, and every scrim over imagery is
   pushed to near-opaque so white type on a photo stops depending on the photo.
   !important is deliberate — these have to beat section-level overrides. */
.a11y-contrast {
  --t-muted: var(--ink);
  --ink-60: var(--ink);
  --scrim: rgb(35 31 32 / 0.82);
}

.a11y-contrast .hero__scrim,
.a11y-contrast .reveal__scrim,
.a11y-contrast .statement__scrim,
.a11y-contrast .phero__scrim,
.a11y-contrast .vid__scrim {
  background: rgb(16 20 12 / 0.78) !important;
}

.a11y-contrast :is(h1, h2, h3, p, a, li, span) {
  text-shadow: none !important;
}

.a11y-links :is(main, .footer, .menu) a {
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
  text-decoration-thickness: 2px;
}

/* Stopping motion has to reach further than transitions: GSAP writes inline
   transforms, so anything already moved is frozen where it is and everything
   waiting to be revealed is forced visible rather than left blank. */
.a11y-no-motion *,
.a11y-no-motion *::before,
.a11y-no-motion *::after {
  animation-duration: 0.001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.001ms !important;
  scroll-behavior: auto !important;
}

.a11y-no-motion [data-anim],
.a11y-no-motion [data-reveal-panel] {
  opacity: 1 !important;
  translate: none !important;
  clip-path: none !important;
}

.a11y-cursor,
.a11y-cursor * {
  cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><path d='M8 4 8 40 17 31 23 44 30 41 24 28 36 28Z' fill='white' stroke='black' stroke-width='2.5' stroke-linejoin='round'/></svg>")
      6 4,
    auto !important;
}

@media (max-width: 640px) {
  .a11y__toggle {
    inline-size: 44px;
    block-size: 44px;
  }
}

/* ==========================================================================
   Cookie consent — assets/js/consent.js
   ========================================================================== */

.consent {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 95;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--u-4) var(--u-6);
  padding: var(--u-4) var(--gutter);
  background: var(--ink);
  color: var(--paper);
  translate: 0 100%;
  transition: translate var(--dur-m) var(--ease-out);
}

.consent.is-in {
  translate: 0 0;
}

.consent__text {
  max-inline-size: 62ch;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}

.consent__text a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.consent__actions {
  display: flex;
  gap: var(--u-3);
}

/* Both answers carry the same visual weight. A prominent "accept" beside a
   faint "decline" is not a real choice, and a consent banner that nudges is
   the thing the rules exist to prevent. */
.consent__btn {
  min-block-size: 44px;
  padding-inline: var(--u-5);
  border: 1px solid var(--paper);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-display);
  font-size: var(--fs-small);
  font-weight: var(--fw-label);
  letter-spacing: 0.04em;
  transition: background var(--dur-s) var(--ease-out), color var(--dur-s) var(--ease-out);
}

.consent__btn--ghost {
  background: transparent;
  color: var(--paper);
}

.consent__btn:hover {
  background: var(--field);
  border-color: var(--field);
  color: var(--paper);
}