/* ==========================================================================
   Components — header, overlay menu, buttons, links, journal rows, footer
   ========================================================================== */

/* --------------------------------------------------------------------------
   Header  (Figma 461:16337)
   -------------------------------------------------------------------------- */
.site-header {
  /* Fixed.  Figma draws the header inside the hero frame and it was absolute
     to match — it scrolled away with the hero and never came back, so on a
     page this long the way to the menu was a trip to the top.  It now behaves
     the way it always has below the desktop branch: out of the way going down,
     back on the way up.  js/header.js decides; the rules under it are the
     moves it makes. */
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: 15.1rem;
  pointer-events: none;
  transition: transform 0.32s var(--ease-out);
}

.site-header.is-hidden { transform: translateY(-100%); }

.site-header > * { pointer-events: auto; }

/* A fixed header crosses photographs an absolute one never met, and type on a
   bright vineyard reads as a smudge.  A scrim rides in once the page has
   actually moved, so the very top of every page is still the composition
   Figma drew. */
.site-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(252, 252, 252, 0.94) 0%, rgba(252, 252, 252, 0) 100%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.site-header--light::before {
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
}
.site-header.is-stuck::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .site-header { transition: none; }
}

.site-header__inner {
  position: relative;
  width: 100%;
  max-width: var(--design-width);
  height: 100%;
  margin-inline: auto;
}

/* BOOK A VISIT — left 63, top 96 */
/* Set with the nav: same family, same Book cut.  CF Din Condensed Book is the
   face declared at 400 in css/fonts.css — 500 is Regular, which is what this
   was asking for before. */
.header-cta {
  position: absolute;
  left: var(--nav-x);
  top: 9.6rem;
  font-family: var(--f-ui);
  letter-spacing: var(--ls-ui);
  font-size: var(--fs-ui-lg);
  font-weight: var(--fw-regular);
  line-height: normal;
  text-transform: uppercase;
  color: var(--c-ink);
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.header-cta::after {
  content: '';
  display: block;
  height: 1px;
  margin-top: 0.2rem;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-base) var(--ease-out);
}

.header-cta:hover::after,
.header-cta:focus-visible::after { transform: scaleX(1); }

/* Brand mark — centred, top 57, 111 x 94 */
.brand {
  position: absolute;
  left: 50%;
  top: 5.7rem;
  width: 11.1rem;
  height: 9.4rem;
  transform: translateX(-50%);
}

.brand img { width: 100%; height: 100%; }

/* Menu toggle — left 1791, top 99, 64 x 29 */
.nav-toggle {
  position: absolute;
  left: 179.1rem;
  top: 9.9rem;
  width: 6.4rem;
  height: 2.9rem;
  padding: 0;
}

/* The height is rounded to a whole pixel, and that is the whole point of the
   second declaration.

   All three bars are the same 0.435rem, but a fractional height snaps to a
   different number of device rows depending on where the bar's top edge falls
   inside a pixel — and the three tops are 0, 1.2325 and 2.465rem, three
   different phases.  At 1920 that painted them 4, 5 and 4 rows: the middle bar
   really was a quarter thicker than its neighbours.  At 1600 it was the third
   bar, at 1440 the middle one again, at 1366 none of them.

   A whole-pixel height cannot do this: round(top + h) - round(top) is h for any
   phase when h is an integer.  The tops stay in rem, because a sub-pixel shift
   in where a bar sits is invisible — it was only ever the thickness that showed.

   The plain declaration above it is the fallback for browsers without CSS
   round(); they get what they have now, which is the design, unevenly snapped. */
.nav-toggle__bar {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.435rem;
  height: round(0.435rem, 1px);
  border-radius: 999px;
  background: var(--c-black);
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out),
              background-color var(--dur-fast) linear;
}

.nav-toggle__bar:nth-child(1) { top: 0; }
.nav-toggle__bar:nth-child(2) { top: 1.2325rem; }
.nav-toggle__bar:nth-child(3) { top: 2.465rem; }

.nav-toggle:hover .nav-toggle__bar:nth-child(2) { transform: scaleX(0.72); transform-origin: left; }

/* --------------------------------------------------------------------------
   Overlay menu  (Figma 555:162)
   -------------------------------------------------------------------------- */
.menu {
  position: fixed;
  inset: 0;
  z-index: var(--z-menu);
  background: var(--c-black);
  display: flex;
  align-items: center;
  justify-content: center;
  visibility: hidden;
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base);
}

.menu.is-open {
  visibility: visible;
  opacity: 1;
  transition: opacity var(--dur-base) var(--ease-out), visibility 0s;
}

/* The river runs behind the words. The clip is already graded to the frame's
   own treatment — greyscale, luminance at 15% — so nothing is layered on top
   of it here; the black beneath only shows while it is still loading. */
.menu__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  user-select: none;
}

.menu__list { position: relative; }
.menu__list,
.menu__close { z-index: 1; }

.menu__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.menu__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24.218rem;
  height: 10.2927rem;
  margin-bottom: 1.5073rem;   /* 118px pitch − 102.927px item */
}

.menu__item:last-child { margin-bottom: 0; }
.menu__item--wide { width: 42.5rem; height: 10.3rem; }

/* Resting ellipse: 54.491 x 22.704, centred. Hover: fills the item. */
.menu__ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 5.4491rem;
  height: 2.2704rem;
  border: 1px solid var(--c-menu-active);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: width var(--dur-base) var(--ease-out),
              height var(--dur-base) var(--ease-out),
              opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}

/* Book, not Medium — the graphic designer's call for the nav.  CF Din
   Condensed Book is declared at weight 400 in css/fonts.css, so this asks for
   the real Book cut on any machine that has the licensed family installed and
   for the stand-in at the same weight everywhere else. */
.menu__link {
  position: relative;
  z-index: 1;
  font-family: var(--f-ui);
  letter-spacing: var(--ls-ui);
  font-size: var(--fs-menu);
  font-weight: var(--fw-regular);
  line-height: 1.145;
  text-transform: uppercase;
  text-align: center;
  color: var(--c-menu-idle);
  transition: color var(--dur-base) var(--ease-out),
              padding-left var(--dur-base) var(--ease-out);
}

.journal__title::before {
  content: '\2022';
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transition: opacity 0.45s var(--ease-out),
              transform 0.55s var(--ease-out);
}

.menu__item:hover .menu__link,
.menu__link:focus-visible,
.menu__item.is-current .menu__link { color: var(--c-menu-active); }

.menu__item:hover .menu__ring,
.menu__link:focus-visible + .menu__ring {
  width: 100%;
  height: 100%;
  opacity: 1;
}

.menu__close {
  position: absolute;
  left: 177.3rem;
  top: 5.6rem;
  font-family: var(--f-ui);
  letter-spacing: var(--ls-ui);
  font-size: var(--fs-close);
  font-weight: var(--fw-regular);   /* Book, with the rest of the nav */
  line-height: normal;
  text-transform: uppercase;
  color: var(--c-white);
}

.menu__close::after {
  content: '';
  display: block;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--dur-base) var(--ease-out);
}

.menu__close:hover::after,
.menu__close:focus-visible::after { transform: scaleX(1); }

/* --------------------------------------------------------------------------
   Oval button  (Figma 550:141 / 555:397 / 645:275)
   370 x 158 ellipse, 1px stroke. On hover the label and arrow spread by 20px.
   -------------------------------------------------------------------------- */
.btn-oval {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  width: 37rem;
  height: 15.8rem;
  border: 1px solid var(--c-ink);
  border-radius: 50%;
  font-family: var(--f-ui);
  letter-spacing: var(--ls-ui);
  font-size: var(--fs-ui-lg);
  font-weight: var(--fw-medium);
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink);
  transition: gap var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}

.btn-oval:hover,
.btn-oval:focus-visible { gap: 3.6rem; }

.btn-oval__arrow {
  width: 2.4rem;
  height: 2.0364rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url('../assets/icons/arrow-dark.svg') center / contain no-repeat;
  mask: url('../assets/icons/arrow-dark.svg') center / contain no-repeat;
  transform: rotate(90deg);
}

.btn-oval--dark { border-color: var(--c-white); color: var(--c-white); }

/* --------------------------------------------------------------------------
   Arrow link  ("DISCOVER GIANNOUDI →")
   -------------------------------------------------------------------------- */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  font-family: var(--f-ui);
  letter-spacing: var(--ls-ui);
  font-size: var(--fs-ui-lg);
  font-weight: var(--fw-medium);
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink);
}

.arrow-link__arrow {
  width: 2.4rem;
  height: 2.0364rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url('../assets/icons/arrow-dark.svg') center / contain no-repeat;
  mask: url('../assets/icons/arrow-dark.svg') center / contain no-repeat;
  transform: rotate(90deg);
  transition: transform var(--dur-base) var(--ease-out);
}

.arrow-link:hover .arrow-link__arrow,
.arrow-link:focus-visible .arrow-link__arrow { transform: rotate(90deg) translateY(-0.8rem); }

/* --------------------------------------------------------------------------
   Scroll pill  (Figma Component 12, 724:521)
   220 x 67 clipped pill: the frog roundel sits at the right-hand end and the
   label slides in from behind it on hover.
   -------------------------------------------------------------------------- */
.pill {
  position: relative;
  display: block;
  width: 22rem;
  height: 6.7rem;
  border-radius: 10rem;
  overflow: hidden;
}

/* Parked clear of the pill, not behind the roundel.  At 15.4rem the word sat
   under the disc with its tail overflowing the pill's rounded end, and the two
   coincident anti-aliased circles left a seam it bled through — a hairline arc
   on the right of the badge.  Measured, 22.5rem is where the last of it clears;
   23rem is that with a little room.  It costs a longer slide on hover, which is
   the same gesture at a slightly quicker pace. */
.pill__label {
  position: absolute;
  top: 1.7rem;
  left: 23rem;
  /* The same face, size, tracking and weight as BOOK A VISIT: the two are the
     site's standing labels, one in each top corner, and they should read as
     one thing said twice.  This was CF Din Regular against that one's Book. */
  font-family: var(--f-ui);
  letter-spacing: var(--ls-ui);
  font-size: var(--fs-ui-lg);
  font-weight: var(--fw-regular);
  line-height: normal;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--c-ink);
  transition: left var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out);
}

/* The pill is fixed for the whole page, so unlike everything else on it the
   label meets every background the page has.  Over the dark ones — the video
   heroes, the Territory band and map, the Terrain void and frog, the closing
   wine slide — it inverts.  The roundel is a white disc and needs nothing.
   js/sustain-pill.js decides, against the pill's own box rather than the
   header's band, because the two sit in opposite corners. */
.pill--on-dark .pill__label { color: var(--c-white); }

/* 1rem, not 0.  The pill is `overflow: hidden` with fully rounded ends, so at
   the bottom of the first letter the cap has already curved 9.6px inwards and
   a word starting at 0 loses that corner of its S.  1rem clears it with a
   little room and still leaves 0.8rem between the word and the roundel. */
.pill:hover .pill__label,
.pill:focus-visible .pill__label { left: 1rem; }

.pill__roundel {
  position: absolute;
  left: 15.3rem;
  top: 0;
  width: 6.7rem;
  height: 6.7rem;
  border-radius: 50%;
  /* No ring of its own any more — the arrows stand where it did.  The disc
     itself stays: it is what the mark is read against when the pill passes
     over the hero film, and it is what covers the label at rest.

     The word used to be parked behind it, overflowing the pill to the right.
     This disc and the pill's own rounded end are the same circle, so between
     their two anti-aliased edges lay a seam about a pixel wide, and the
     parked word showed through it as a hairline arc down the right-hand side.
     The old black ring was 3.85px of cover and hid it; nothing does now, so
     the word is parked clear of the pill instead — see .pill__label. */
  background: var(--c-white);
  display: grid;
  place-items: center;
}

/* The seedling-in-a-loop mark.  It is inline rather than a mask because the
   four arrows turn on their own as the page is scrolled, and a mask has no
   parts to address — see js/sustain-pill.js.

   Its own outer circle is left out and nothing draws one now: the arrows are
   the outer edge of the mark, standing on the radius the roundel's ring used
   to occupy.  The viewBox is cropped to make them reach that far without the
   element growing past the disc and into the pill's overflow.

   Cropped to their turning RADIUS, 797, not to their bounding box, 686.  A
   rotation carries every point onto the axes in turn, so a box drawn round
   the shape at rest is too small the moment it moves — which cut the
   arrowheads off on the way down the page.

   And the crop is written into the coordinates rather than into the viewBox's
   origin, because transform-box: view-box measures its percentages from 0,0
   and ignores a viewBox min-x/min-y: with "138 138 1644 1644" the 50% below
   resolved to 822 while the mark's centre was at 960, and the arrows orbited
   a point 138 units off, swinging out of the disc.  The viewBox starts at 0
   now, so 50% is the centre and means it. */
.pill__loop {
  position: relative;
  width: 6.7rem;
  height: 6.7rem;
  fill: var(--c-ink);
}

/* No swell on hover any more: the mark fills the disc, and the disc is the
   pill's own rounded end, so anything larger is cut off by its overflow.
   The label sliding out is the affordance. */

/* Turned by the scroll.  The origin is the middle of the viewBox rather than
   of the group's own bounding box, so the arrows run true around the
   seedling instead of about their own centre. */
.pill__loop-arrows {
  transform-box: view-box;
  transform-origin: 50% 50%;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .pill__loop-arrows { transform: none !important; }
}

/* The Sustainability pill rides the viewport, not the hero.

   Figma parks it in the top right of the hero, where it is gone the moment
   anyone scrolls a screen — and it is the one page on the site that never
   otherwise offers the way in.  So it is fixed to the bottom right instead:
   the corner nothing else on the home page occupies, and the corner a
   persistent control is looked for in.

   At rest the word is parked off the pill entirely, so what floats there is
   just the roundel; it slides out from under it on hover.  That is why this
   reads as a button rather than as a banner stuck to the page.

   It is on every page but Sustainability itself, where it would only point
   at the page you are already reading.

   It steps aside for the footer, whose legal links sit in exactly that
   corner — js/sustain-pill.js does that part. */
.pill--sticky {
  position: fixed;
  left: auto;
  top: auto;
  right: var(--page-x);
  bottom: 4rem;
  z-index: 60;                    /* over the content, under header and menu */
  transition: opacity var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}

.pill--sticky.is-parked {
  opacity: 0;
  transform: translateY(1.2rem);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .pill--sticky { transition: none; }
}

/* --------------------------------------------------------------------------
   Journal row  (Figma Blog 1 / Blog 2)
   -------------------------------------------------------------------------- */
.journal__row { position: relative; }

/* The title slides right to make room for the bullet.  It moves on a
   transform, not `padding-left`: padding was never in the transition list, so
   the 44px step landed in a single frame while the colour faded over 0.6s —
   which is what made the hover feel like it was snapping.  The bullet is a
   child, so it would ride along; it carries an equal counter-translate and
   stays put at the row's left edge. */
.journal__title {
  position: relative;
  font-family: var(--f-display);
  font-weight: var(--fw-medium);
  font-size: var(--fs-display-lg);
  line-height: normal;
  letter-spacing: var(--ls-display-lg);
  text-transform: uppercase;
  color: var(--c-grey-300);
  white-space: nowrap;
  transition: color 0.55s var(--ease-out),
              transform 0.55s var(--ease-out);
}

.journal__row:hover .journal__title,
.journal__link:focus-visible .journal__title {
  color: var(--c-ink);
  transform: translateX(4.4rem);
}

.journal__row:hover .journal__title::before,
.journal__link:focus-visible .journal__title::before {
  opacity: 1;
  transform: translateX(-4.4rem);
}

.journal__meta {
  font-family: var(--f-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  text-transform: uppercase;
  color: var(--c-ink);
}

.journal__excerpt {
  font-family: var(--f-body);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--c-ink);
  max-width: 56rem;
}

.journal__rule {
  height: 0;
  border-top: 0.2rem solid var(--c-black);
}

/* --------------------------------------------------------------------------
   Footer  (Figma 544:162)
   -------------------------------------------------------------------------- */
.site-footer {
  position: relative;
  height: 56.2rem;
  overflow: hidden;
  background: var(--c-page);
}

.site-footer__logotype {
  position: absolute;
  left: 0;
  top: 9.8rem;
  width: 192rem;
  height: 71.2rem;
  mix-blend-mode: multiply;
}

.site-footer__ripple {
  position: absolute;
  left: 0;
  top: 15.8rem;
  width: 219.1798rem;
  height: 7.6046rem;
  max-width: none;
}

/* The frog film is black line art on white; multiply drops the white plate
   so it sits on the footer rather than in a box. */
.site-footer__frog {
  position: absolute;
  left: 117.9rem;
  top: 13.3rem;
  width: 33.9rem;
  height: 19rem;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.site-footer__legal {
  position: absolute;
  left: 6.7rem;
  top: 50rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--f-ui);
  /* NOT --ls-ui.  That -0.06em is the correction that makes the Oswald
     stand-in match CF Din Condensed *Medium* at button and menu sizes; this
     line is CF Din Condensed *Book*, and the same tracking crushed it to
     230px against the Figma node's 282 (544:169).  At normal tracking the
     string measures 283px — one pixel off the design — so it stays at 0. */
  letter-spacing: normal;
  font-size: var(--fs-legal);
  /* Figma sets the footer legal type in CF Din Condensed *Book* (light). */
  font-weight: var(--fw-light);
  line-height: var(--lh-legal);
  color: var(--c-black);
  white-space: nowrap;
}

.site-footer__dev { width: 9.1052rem; height: 1.4107rem; }

.site-footer__links {
  position: absolute;
  right: 6.5rem;
  top: 50rem;
  display: flex;
  gap: 3.2rem;
  font-family: var(--f-ui);
  /* Book weight again, so the Medium correction is too heavy here: at
     --ls-ui these read 89 and 117 against the Figma nodes' 96 and 130
     (704:2169 / 704:2168).  -0.03em lands both within 2px. */
  letter-spacing: -0.03em;
  font-size: var(--fs-body);
  font-weight: var(--fw-light);
  line-height: normal;
  text-transform: uppercase;
  color: var(--c-ink);
}

.site-footer__links a { transition: opacity var(--dur-fast) var(--ease-out); }
.site-footer__links a:hover { opacity: 0.55; }

.site-header .brand img { transition: filter var(--dur-fast) linear; }

/* Inner-page header ------------------------------------------------------
   The About / Terrain / Sustainability heroes are full-bleed dark media and
   those pages set `--on-dark` in their markup, because Figma renders BOOK A
   VISIT in white on them.

   That was a constant while the header was absolute and never left the hero.
   Now that it is fixed it crosses every pale section below, and a permanently
   white header on a #fcfcfc page is a header nobody can see — measured at
   1.02:1 against its own background on Terrain.  js/header.js already turns
   the flag into a zone whenever the header is fixed: light over the hero, ink
   past it.  This is the rendering that follows from it. */
.site-header--on-dark .header-cta { color: var(--c-ink); }
.site-header--on-dark .nav-toggle__bar { background: var(--c-black); }
.site-header--on-dark .brand img { filter: none; }

/* Dark-section header ----------------------------------------------------
   The dynamic flag: a dark region — a hero, the black Territory band, the
   pinned slider's last slide — is under the header right now.  Written after
   `--on-dark` so it wins while both are present. */
.site-header--light .header-cta { color: var(--c-white); }
.site-header--light .nav-toggle__bar { background: var(--c-white); }
.site-header--light .brand img { filter: brightness(0) invert(1); }

/* ==========================================================================
   Inner page shell — shared by every page except Home
   ========================================================================== */

/* Full-bleed media hero with the page statement over it */
.page-hero {
  position: relative;
  height: 139.6rem;
  overflow: hidden;
  background: var(--c-black);
}

.page-hero__media {
  position: absolute;
  left: 50%;
  top: 0;
  width: 100vw;
  max-width: none;
  height: 100%;
  transform: translateX(-50%);
  object-fit: cover;
  filter: grayscale(1);              /* Figma: black fill, mix-blend-mode: color */
}

/* Figma: linear-gradient(black 30.804% → transparent), multiply */
.page-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #000 0%, #000 30.804%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: multiply;
  pointer-events: none;
}

.page-hero__statement {
  position: absolute;
  left: 6.5rem;
  top: 39.4rem;
  width: 132.8rem;
  color: var(--c-white);
  z-index: var(--z-content);
}

/* Closing CTA band: illustration + oval button (Figma "Frame 14") */
.closing {
  position: relative;
  height: 70.2rem;
}

.closing__art {
  position: absolute;
  left: 17.3rem;
  top: 0;
  width: 122.5714rem;
  height: 70.2rem;
  object-fit: cover;
  mix-blend-mode: multiply;
}

.closing__cta { position: absolute; left: 137.6rem; top: 10rem; }

/* Oversized closing statement */
.page-statement {
  position: absolute;
  left: 6.5rem;
  color: var(--c-grey-200);
  white-space: nowrap;
}

/* The developer credit is a link to their site.  Flex so the anchor hugs the
   mark exactly and the legal row's alignment is untouched; the hover is the
   one the footer's other links already use. */
.site-footer__dev-link {
  display: flex;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.site-footer__dev-link:hover,
.site-footer__dev-link:focus-visible { opacity: 0.55; }

/* The honeypot.  A field a person never sees and therefore never fills, which
   bots fill because they fill every input they find — js/contact-form.js sends
   it and functions/index.js drops anything that arrives with it set.

   `display: none` is the wrong tool: the better scrapers skip hidden fields
   precisely because they know the trick.  Taking it out of flow and parking it
   off-canvas leaves it in the accessibility tree looking like any other input,
   which is the point — but aria-hidden and tabindex="-1" in the markup keep it
   away from screen readers and off the tab order, so no real visitor can land
   in it by accident. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}