/* ============================================================================
   Auth v2 — the account surface: sign in, create account, passwordless,
   recovery, guest lookup.

   This file is linked site-wide from _Head.cshtml (the modal can be raised over
   ANY page), so every selector here is scoped under `.hau` or a `hau-` body
   class that only auth surfaces emit. Nothing in here may leak onto a page that
   has not opted in.

   Two site-wide rules actively fight this component; both are neutralised in
   the "imported hostility" block at the bottom rather than by sprinkling
   !important through the component:
     - globals.css  button:focus-visible { outline: 2px solid #4a90e2 !important }
     - site.css     body { margin-bottom: 60px }

   Values come from design_handoff_auth_v2/screens/auth.css, which the handoff
   names as the source of truth. Do not round them.
   ========================================================================= */

.hau,
.hau *,
body.hau-page,
body.hau-m {
  box-sizing: border-box;
}

/* Tokens are declared on the component, not :root, so they cannot be read or
   overwritten by unrelated page CSS. */
.hau,
body.hau-page,
body.hau-m {
  --ink: #111827;
  --navy: #1B2333;
  --navy-h: #0E1523;
  --mut: #6B7280;
  --soft: #8A9099;
  --line: #E5E7EB;
  --line-h: #D6D9DE;
  --hair: #EEEFF2;
  --ivory: #FFFDF9;
  --sand: #F7F6F3;
  --ok: #15803D;
  --okbg: #DCFCE7;
  --warn: #B45309;
  --warnbg: #FEF3C7;
  --err: #DC2626;
  --errbg: #FEF2F2;
  --disabled: #C9CDD4;
  --ring: 0 0 0 3px rgba(27, 35, 51, .1);
}

.hau {
  font-family: Inter, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.hau a { color: var(--navy); text-decoration: none; }
.hau a:hover { color: var(--navy-h); }

.hau h1 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -.035em;
  line-height: 1.1;
}

.hau p { margin: 0; }

/* ------------------------------------------------------------------ type -- */

.hau .sub {
  font: 400 14.5px/1.5 Inter, sans-serif;
  color: var(--mut);
  text-wrap: pretty;
}

.hau .lbl {
  display: block;
  font: 500 12.5px Inter, sans-serif;
  color: var(--mut);
  margin-bottom: 7px;
}

.hau .hint {
  display: block;
  font: 400 12.5px Inter, sans-serif;
  color: var(--mut);
  margin-top: 7px;
}

.hau .fine {
  font: 400 12.5px/1.55 Inter, sans-serif;
  color: var(--mut);
  text-wrap: pretty;
}

.hau .lnk { font: 500 14px Inter, sans-serif; color: var(--navy); }
.hau .lnk:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- forms -- */

.hau .fw { position: relative; display: flex; align-items: center; }

.hau .field {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  font: 500 15px Inter, sans-serif;
  color: var(--ink);
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}

/* A select borrows .field so it lines up with the inputs around it, but the
   browser's own arrow and chrome have to be replaced or it renders a head taller
   with a grey native control on the right. The chevron is an inline data URI:
   external images are one more thing to 404. */
select.field {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%236B7280' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  cursor: pointer;
}

.hau .field::placeholder { color: var(--soft); font-weight: 400; }
.hau .field:hover { border-color: var(--line-h); }
.hau .field:focus { border-color: var(--navy); box-shadow: var(--ring); }
.hau .field.pw { padding-right: 52px; }

/* Invalid fields carry aria-invalid too; the attribute selector means a field
   can never look wrong while reading as valid to a screen reader. */
.hau .field.bad,
.hau .field[aria-invalid="true"] {
  border-color: var(--err);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, .1);
}

.hau .field.mono {
  font-variant-numeric: tabular-nums;
  letter-spacing: .34em;
  text-align: center;
  font-size: 20px;
  font-weight: 600;
}

.hau .eye {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--soft);
  cursor: pointer;
}

.hau .eye:hover { background: #F3F4F6; color: var(--ink); }

.hau .err {
  display: flex;
  align-items: center;
  gap: 6px;
  font: 500 12.5px Inter, sans-serif;
  color: var(--err);
  margin-top: 8px;
}

.hau .chk {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font: 400 14px/1.4 Inter, sans-serif;
  color: var(--mut);
  cursor: pointer;
  user-select: none;
}

.hau .chk input {
  flex: none;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  accent-color: var(--navy);
  cursor: pointer;
}

/* --------------------------------------------------------------- buttons -- */

.hau .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 9999px;
  background: var(--navy);
  color: #fff;
  font: 600 15px Inter, sans-serif;
  cursor: pointer;
  transition: background .15s ease;
}

.hau .btn:hover { background: var(--navy-h); }
.hau .btn[disabled] { background: var(--disabled); cursor: default; }

.hau .btn2 {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: #fff;
  color: var(--ink);
  font: 600 15px Inter, sans-serif;
  cursor: pointer;
  transition: border-color .15s ease;
}

.hau .btn2:hover { border-color: var(--navy); }

.hau .oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 11px;
  width: 100%;
  height: 52px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: #fff;
  font: 500 15px Inter, sans-serif;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}

.hau .oauth:hover { border-color: var(--navy); background: #FAFAFB; }

/* --------------------------------------------------------------- layout --- */

.hau .rule {
  display: flex;
  align-items: center;
  gap: 14px;
  font: 500 12.5px Inter, sans-serif;
  color: var(--soft);
}

.hau .rule::before,
.hau .rule::after { content: ""; flex: 1; height: 1px; background: var(--line); }

.hau .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hau .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hau .stack { display: flex; flex-direction: column; }

/* -------------------------------------------------------------- feedback -- */

.hau .halo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 9999px;
  background: var(--hair);
  color: var(--navy);
}

.hau .halo[data-t="warn"] { background: var(--warnbg); color: var(--warn); }
.hau .halo[data-t="ok"]   { background: var(--okbg);   color: var(--ok); }
.hau .halo[data-t="err"]  { background: var(--errbg);  color: var(--err); }

.hau .alert {
  display: flex;
  gap: 11px;
  padding: 13px 15px;
  border-radius: 14px;
  background: var(--errbg);
  border: 1px solid #FBD5D5;
}

.hau .alert[data-t="warn"] { background: var(--warnbg); border-color: #FDE68A; }
.hau .alert svg { flex: none; margin-top: 1px; color: var(--err); }
.hau .alert[data-t="warn"] svg { color: var(--warn); }
.hau .alert .at { font: 600 13.5px Inter, sans-serif; color: #7F1D1D; }
.hau .alert[data-t="warn"] .at { color: #78350F; }
.hau .alert .ab { font: 400 13px/1.5 Inter, sans-serif; color: #991B1B; margin-top: 2px; }
.hau .alert[data-t="warn"] .ab { color: #92400E; }

.hau .meter { display: flex; gap: 5px; margin-top: 9px; }
.hau .meter i { flex: 1; height: 4px; border-radius: 2px; background: var(--line); }
.hau .meter[data-strength="1"] i:nth-child(-n+1) { background: var(--err); }
.hau .meter[data-strength="2"] i:nth-child(-n+2) { background: #D97706; }
.hau .meter[data-strength="3"] i:nth-child(-n+3) { background: var(--ok); }
.hau .meter[data-strength="4"] i { background: var(--ok); }
.hau .mlab { font: 500 12px Inter, sans-serif; color: var(--mut); margin-top: 7px; }

.hau .panel {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}

.hau .panel.flat { background: var(--sand); border-color: #EDEBE6; }
.hau .ptitle { font: 600 13px Inter, sans-serif; color: var(--ink); }

.hau .plist {
  margin: 9px 0 0;
  padding-left: 18px;
  font: 400 13px/1.7 Inter, sans-serif;
  color: var(--mut);
}

.hau .tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

.hau .tile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  font: 500 13.5px Inter, sans-serif;
  color: var(--ink);
}

.hau .tile:hover { border-color: var(--navy); }

/* The address echo on check-email, with its Change button. */
.hau .ident {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 6px 0 16px;
  border: 1px solid var(--line);
  border-radius: 9999px;
  background: #fff;
  font: 500 14.5px Inter, sans-serif;
}

.hau .ident .em {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hau .ident button {
  flex: none;
  height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 9999px;
  background: #F3F4F6;
  font: 500 13px Inter, sans-serif;
  color: var(--ink);
  cursor: pointer;
}

.hau .ident button:hover { background: #E9EBEE; }

.hau .count {
  font: 600 15px Inter, sans-serif;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}

/* --------------------------------------------------------------- motion --- */

.hau .spin {
  display: block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: hau-sp .7s linear infinite;
}

@keyframes hau-sp { to { transform: rotate(360deg); } }

.hau .bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  background: var(--hair);
}

.hau .bar i {
  display: block;
  height: 100%;
  width: 42%;
  background: var(--navy);
  animation: hau-sl 1.3s ease-in-out infinite;
}

@keyframes hau-sl {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(238%); }
}

.hau .prog { height: 3px; border-radius: 2px; background: var(--hair); overflow: hidden; }
.hau .prog i { display: block; height: 100%; width: 62%; background: var(--ok); }

@keyframes hau-shk {
  10%, 90%      { transform: translateX(-1px); }
  20%, 80%      { transform: translateX(2px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60%      { transform: translateX(4px); }
}

.hau .shake { animation: hau-shk .35s both; }

@keyframes hau-pop {
  0%   { transform: scale(.6); opacity: 0; }
  60%  { transform: scale(1.08); }
  100% { transform: scale(1); opacity: 1; }
}

.hau .pop { animation: hau-pop .45s cubic-bezier(.2, .9, .3, 1.3) both; }

.hau .dim { opacity: .55; pointer-events: none; }
.hau .hide { display: none !important; }

/* ======================================================= 1. modal shell === */

/* The backdrop is the real page underneath, dimmed. The prototype used a
   blurred hero image as a stand-in; in production there is a live page there,
   so this is a scrim only. */
.hau-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(4, 18, 28, .55);
}

.hau .card {
  position: relative;
  width: 100%;
  max-width: 452px;
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  background: var(--ivory);
  border-radius: 24px;
  box-shadow: 0 40px 80px -24px rgba(4, 18, 28, .55);
}

.hau .x {
  position: absolute;
  top: 16px;
  right: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--soft);
  cursor: pointer;
  z-index: 2;
}

.hau .x:hover { background: #F1F2F4; color: var(--ink); }
.hau .x[disabled] { opacity: .4; cursor: default; }

.hau .pad { padding: 32px 34px 26px; }

.hau .legal {
  padding: 15px 34px;
  border-top: 1px solid var(--line);
  background: var(--sand);
  border-radius: 0 0 24px 24px;
  text-align: center;
}

/* Sign in / Create account are two real routes, so the tabs are anchors. */
.hau .tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  background: #F1F2F4;
  border-radius: 9999px;
  margin-bottom: 24px;
}

.hau .tabs a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 38px;
  border-radius: 9999px;
  font: 600 14px Inter, sans-serif;
  color: var(--mut);
}

.hau .tabs a[aria-selected="true"] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(4, 18, 28, .12);
}

/* Names why auth appeared: save / rate / reserve. */
.hau .trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  padding: 0 12px;
  border-radius: 9999px;
  background: var(--hair);
  font: 600 12px Inter, sans-serif;
  color: var(--navy);
  margin-bottom: 14px;
}

/* ======================================================== 2. page shell === */

body.hau-page {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  font-family: Inter, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* The shell wrapper is the column, not just a box around one.

   It used to be a plain block sitting between the flex body and .pmain, which
   made .pmain's `flex: 1` inert — the footer floated under the content instead
   of sitting at the bottom. It is also the element that actually spans the whole
   document, which is why the ground variants paint their background here rather
   than on the body: a body background is subject to canvas propagation and does
   not size to the document the way a plain in-flow element does. */
body.hau-page > .hau,
body.hau-m > .hau {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.hau .phead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 34px;
}

.hau .pmain {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px 24px 64px;
}

.hau .pcol { width: 100%; max-width: 452px; }

.hau .sheet {
  padding: 34px 36px 30px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: 0 24px 48px -32px rgba(4, 18, 28, .28);
}

.hau .pfoot { padding: 0 34px 26px; text-align: center; }

/* ====================================================== 3. mobile shell === */

/* Auth is a full page on mobile, never a modal. The prototype fixed the body to
   390x844 to photograph it; here the shell is the viewport and the breakpoint
   drives it, so one set of markup serves both. */
body.hau-m {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ivory);
  font-family: Inter, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.hau .mbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 56px;
  padding: 0 12px;
  background: var(--ivory);
  border-bottom: 1px solid var(--hair);
}

.hau .mbtn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 9999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.hau .mbtn:hover { background: #F1F2F4; }
.hau .mtitle { font: 600 15px Inter, sans-serif; letter-spacing: -.01em; }
.hau .mmain { flex: 1; padding: 22px 20px 32px; }
.hau .mfoot { padding: 0 20px 22px; text-align: center; }

/* 16px fields are what stop iOS zooming on focus; 56px and 44px are the tap
   targets. Applied by breakpoint so a narrow desktop window gets them too. */
@media (max-width: 640px) {
  .hau .field,
  .hau .btn,
  .hau .btn2,
  .hau .oauth { height: 56px; font-size: 16px; }

  .hau .eye { width: 44px; height: 44px; right: 6px; }

  .hau h1 { font-size: 28px; }
  .hau .two { grid-template-columns: 1fr; }
  .hau .phead { padding: 16px 20px; }
  .hau .pmain { padding: 8px 20px 40px; }
  .hau .sheet {
    padding: 24px 22px 22px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* ---------------------------------------------------- imported hostility -- */

/* globals.css forces `outline: 2px solid #4a90e2 !important` on every focused
   button. Inside the component that would paint a blue ring next to our navy
   one, so it is replaced here — the visible indicator is the box-shadow ring
   plus the navy border, which is what the design specifies. Removing the
   outline without replacing it would be an accessibility regression. */
.hau button:focus-visible,
.hau a:focus-visible,
.hau input:focus-visible {
  outline: 2px solid transparent !important;
  outline-offset: 0 !important;
  box-shadow: var(--ring);
  border-color: var(--navy);
}

/* site.css sets `body { margin-bottom: 60px }` site-wide, which leaves a dead
   band under a 100vh auth page. */
body.hau-page,
body.hau-m { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .hau .shake,
  .hau .pop,
  .hau .bar i,
  .hau .spin { animation: none !important; }

  .hau *,
  .hau *::before,
  .hau *::after { transition-duration: .01ms !important; }
}

/* ------------------------------------------------------------- utilities -- */

/* The page shell carries both chromes — the desktop header and the mobile bar —
   and the breakpoint picks one, so a screen's content is authored exactly once
   instead of forked into a separate mobile file per the prototype. */
.hau .hau-desk { display: flex; }
.hau .hau-mob { display: none; }

@media (max-width: 640px) {
  .hau .hau-desk { display: none; }
  .hau .hau-mob { display: flex; }
}

.hau .center { text-align: center; }
.hau .mt7 { margin-top: 7px; }
.hau .mt8 { margin-top: 8px; }
.hau .mt14 { margin-top: 14px; }
.hau .mt16 { margin-top: 16px; }
.hau .mt18 { margin-top: 18px; }
.hau .mt20 { margin-top: 20px; }
.hau .mt22 { margin-top: 22px; }
.hau .mt26 { margin-top: 26px; }
.hau .mb16 { margin-bottom: 16px; }
.hau .mb20 { margin-bottom: 20px; }
.hau .mb24 { margin-bottom: 24px; }
.hau .h1-27 { font-size: 27px; }
.hau .h1-29 { font-size: 29px; }
.hau .h1-31 { font-size: 31px; }
.hau .logo { height: 25px; width: auto; display: block; }

/* The dev-only echo of the sign-in link. Deliberately ugly: it must never be
   mistaken for finished UI, and it never renders in production. */
.hau .devlink {
  margin-top: 18px;
  padding: 12px 14px;
  border: 1px dashed #D97706;
  border-radius: 12px;
  background: #FFFBEB;
  font: 500 12px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
  color: #78350F;
  word-break: break-all;
}

/* ============================================== page shell: ground variants ==

   The quiet ivory page from the prototype reads as a form marooned in an empty
   field: the ground and the card sit at almost the same value, so the card has
   no separation and the brand has no presence. These three give the page a real
   ground. Pick one with Auth:PageStyle; ?style= overrides it on the preview host.

   All three keep the card itself untouched — same 452px column, same radii, same
   type. Only the ground and the card's separation change.
   ========================================================================= */

/* ---- A. photo: hero ground under the card ------------------------------- */

/* Painted on the BODY, not a fixed child layer.

   A `position: fixed` backdrop only ever covers the viewport, so the moment the
   document is taller than the window — a long form, a browser zoom, a stitched
   full-page screenshot — everything past the fold falls through to the flat
   navy underneath. Putting it on the body means the ground is the ground at any
   document height, with no layer to keep in sync.

   The scrim is the first background layer, over the photo, so one declaration
   carries both. The blur the modal applies at runtime is baked into the asset
   instead: it is a decorative ground, and pre-blurring is also what lets it
   compress from 1.2MB to 81KB. */
body.hau-photo { background-color: #0B2534; }

body.hau-photo > .hau {
  /* jpg first; the image-set line below replaces it wherever webp is understood,
     and is simply ignored where it is not. The scrim is the first layer, over the
     photo, so one declaration carries both. The blur the modal applies at runtime
     is baked into the asset instead — it is a decorative ground, and pre-blurring
     is also what takes it from 1.2MB to 81KB. */
  background-image:
    linear-gradient(180deg, rgba(4, 18, 28, .58), rgba(4, 18, 28, .46)),
    url("/assets/web/auth-bg.jpg");
  background-image:
    linear-gradient(180deg, rgba(4, 18, 28, .58), rgba(4, 18, 28, .46)),
    image-set(url("/assets/web/auth-bg.webp") type("image/webp"),
              url("/assets/web/auth-bg.jpg") type("image/jpeg"));
}

body.hau-photo .sheet {
  background: var(--ivory);
  border: 0;
  box-shadow: 0 40px 80px -24px rgba(4, 18, 28, .55);
}

/* Anything OUTSIDE the card sits on the photo, so it has to invert. Views put
   the "Need a hand?" line there as a sibling of .sheet — left as ink it is
   navy-on-navy and effectively invisible. */
body.hau-photo .phead .lnk,
body.hau-photo .pfoot .fine,
body.hau-photo .pfoot .fine a,
body.hau-photo .pcol > .sub,
body.hau-photo .pcol > .sub a { color: rgba(255, 255, 255, .82); }

body.hau-photo .pcol > .sub a { text-decoration: underline; }
body.hau-photo .pcol > .sub a:hover { color: #fff; }
body.hau-photo .phead .lnk:hover { color: #fff; }

/* ---- B. aurora: light, quiet, and still premium ------------------------- */

/* Two soft radial washes on sand. No photography, so nothing to load and
   nothing to misread as a specific hotel. */
body.hau-aurora { background-color: var(--sand); }

body.hau-aurora > .hau {
  background-image:
    radial-gradient(60rem 40rem at 12% -8%, rgba(27, 35, 51, .09), transparent 60%),
    radial-gradient(48rem 34rem at 98% 8%, rgba(180, 83, 9, .07), transparent 58%),
    radial-gradient(52rem 40rem at 50% 108%, rgba(27, 35, 51, .06), transparent 62%);
}

body.hau-aurora .sheet {
  background: #fff;
  border: 1px solid rgba(17, 24, 39, .07);
  box-shadow:
    0 1px 2px rgba(4, 18, 28, .04),
    0 12px 24px -12px rgba(4, 18, 28, .12),
    0 40px 72px -40px rgba(4, 18, 28, .35);
}

/* ---- C. split: editorial pane beside the form -------------------------- */

body.hau-split .pmain {
  padding: 0;
  align-items: stretch;
}

body.hau-split .hau-split-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  min-height: calc(100vh - 84px);
}

body.hau-split .hau-art {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 42px;
}

body.hau-split .hau-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.hau-split .hau-art span {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(4, 18, 28, .25) 20%, rgba(4, 18, 28, .72));
}

body.hau-split .hau-art blockquote {
  position: relative;
  margin: 0;
  max-width: 22ch;
  font: 600 30px/1.18 Inter, sans-serif;
  letter-spacing: -.03em;
  color: #fff;
  text-wrap: balance;
}

body.hau-split .hau-art cite {
  position: relative;
  display: block;
  margin-top: 12px;
  font: 400 13.5px Inter, sans-serif;
  font-style: normal;
  color: rgba(255, 255, 255, .74);
}

body.hau-split .hau-form {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 24px;
  background: var(--ivory);
}

body.hau-split .sheet {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

/* Below the fold-in point the photo pane is dead weight on a form, so it goes. */
@media (max-width: 900px) {
  body.hau-split .hau-split-grid { grid-template-columns: 1fr; min-height: 0; }
  body.hau-split .hau-art { display: none; }
  body.hau-split .hau-form { padding: 8px 20px 40px; }
}

/* ------------------------------------------------- mobile type, last word -- */

/* This block must stay at the end of the file.
   `.hau .h1-27` and the breakpoint rule have identical specificity (0,2,0), so
   whichever is written last wins. The size utilities are declared above, which
   means the mobile override has to come after them or the handset silently
   renders the desktop size. Three cascade bugs on the homepage came from
   exactly this. */
@media (max-width: 640px) {
  .hau h1,
  .hau .h1-27,
  .hau .h1-29,
  .hau .h1-31 { font-size: 28px; }
}