/*
 * NEXT LEVEL HTML / Private access
 * No framework. No full-frame background image. No compiled CSS.
 * The light is a CSS gradient; the small repeating texture is procedural grain.
 */

:root {
  color-scheme: dark;
  --color-ground: #0a0d14;
  --color-ivory: #e9edf2;
  --color-copy: #a6b2bf;
  --color-muted: #93a1b0;
  --color-rule: #6f7f93;
  --color-accent: #efb5a5;
  --color-accent-2: #ef8cc8;
  --font-display: "Noto Serif Display", "Bodoni MT", Didot, "Times New Roman", serif;
  --font-text: Inter, "Helvetica Neue", Arial, sans-serif;
  --page-inset: clamp(24px, 3.1vw, 72px);
  --seam-position: 11.25%;
  --grain-opacity: 0.12;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 280px;
  min-height: 100%;
  background: var(--color-ground);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-text);
  font-weight: 300;
  color: var(--color-ivory);
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: #fff;
  background: #6a4c55;
}

/* The full-bleed material, light, and single architectural hairline. */
.atmosphere {
  position: fixed;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  background:
    linear-gradient(180deg, transparent 5%, rgb(0 0 0 / 0.24) 100%),
    linear-gradient(112deg, #090c12 0%, #0d111a 49%, #141824 100%);
}

.atmosphere__light {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    140deg,
    transparent 0%,
    transparent 60.5%,
    rgb(239 181 165 / 0.009) 62%,
    rgb(239 181 165 / 0.060) 63.3%,
    rgb(239 181 165 / 0.177) 65%,
    rgb(239 181 165 / 0.242) 66.5%,
    rgb(239 181 165 / 0.234) 68.5%,
    rgb(239 181 165 / 0.169) 70%,
    rgb(239 181 165 / 0.060) 71.4%,
    rgb(239 181 165 / 0.009) 72.7%,
    transparent 74%,
    transparent 74.5%,
    rgb(224 127 196 / 0.036) 75.8%,
    rgb(224 127 196 / 0.137) 77.3%,
    rgb(224 127 196 / 0.186) 79%,
    rgb(224 127 196 / 0.153) 80.5%,
    rgb(224 127 196 / 0.056) 82.3%,
    rgb(224 127 196 / 0.012) 84%,
    transparent 85.5%,
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(35deg, rgb(0 0 0 / 0.12) 15%, rgb(0 0 0 / 0.45) 54%, #000 100%);
  mask-image: linear-gradient(35deg, rgb(0 0 0 / 0.12) 15%, rgb(0 0 0 / 0.45) 54%, #000 100%);
}

.atmosphere__grain {
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 1.4 -.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 240px 240px repeat;
  mix-blend-mode: soft-light;
  opacity: var(--grain-opacity);
}

.atmosphere__seam {
  position: absolute;
  top: 0;
  bottom: 0;
  right: var(--seam-position);
  width: 1px;
  background: linear-gradient(180deg, rgb(239 181 165 / 0.42), rgb(224 127 196 / 0.26) 63%, rgb(154 114 238 / 0.12));
}

.atmosphere__seam::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 1px;
  width: 1px;
  background: rgb(0 0 0 / 0.58);
}

/* A real document layout, not a fixed-height screenshot. */
.page {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding:
    max(clamp(30px, 4.65vh, 58px), env(safe-area-inset-top))
    max(var(--page-inset), env(safe-area-inset-right))
    max(clamp(32px, 6.25vh, 80px), env(safe-area-inset-bottom))
    max(var(--page-inset), env(safe-area-inset-left));
}

.site-header {
  position: relative;
  z-index: 2;
}

.wordmark {
  display: block;
  width: clamp(150px, 11vw, 210px);
  height: auto;
  opacity: 0.92;
}

.main-content {
  display: grid;
  place-items: center;
  min-width: 0;
  padding: 72px 0 84px;
}

.invitation {
  width: 100%;
  text-align: center;
  transform: translateY(-3px);
}

.invitation h1 {
  margin: 0;
  color: var(--color-ivory);
  font-family: var(--font-display);
  font-size: clamp(64px, 5.86vw, 116px);
  font-weight: 200;
  font-synthesis: none;
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.invitation__description {
  margin: 25px auto 0;
  color: var(--color-copy);
  font-size: clamp(13px, 0.957vw, 18px);
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.22em;
  text-wrap: balance;
}

/* The field is a line, not a card or a boxed input. */
.access-form {
  position: relative;
  width: min(100%, clamp(420px, 34.9vw, 664px));
  margin: clamp(74px, 10.1vh, 116px) auto 0;
  transform: translateY(4px);
}

.access-form__row {
  display: flex;
  align-items: flex-end;
  gap: clamp(19px, 1.48vw, 29px);
}

/* The emailed-link confirm page has one action and no fields: center it under the headline. */
.access-form__row--confirm {
  justify-content: center;
}

.access-field {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

.access-field__input {
  display: block;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 3px 0 13px;
  border: 0;
  border-radius: 0;
  outline: 0;
  background: transparent;
  color: var(--color-ivory);
  caret-color: var(--color-ivory);
  font-family: var(--font-text);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.3em;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}

.access-field__label {
  position: absolute;
  top: 8px;
  left: 0;
  max-width: 100%;
  color: var(--color-muted);
  font-size: clamp(12px, 0.835vw, 15px);
  font-weight: 300;
  line-height: 1.5;
  letter-spacing: 0.28em;
  cursor: text;
  transform-origin: left center;
  transition: transform 220ms ease, color 220ms ease;
}

.access-field__input:focus + .access-field__label,
.access-field__input:not(:placeholder-shown) + .access-field__label {
  color: #d9c2bb;
  transform: translateY(-25px) scale(0.83);
}

.access-field__line {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: var(--color-rule);
  opacity: 0.85;
}

.access-field__line::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--color-accent), var(--color-accent-2));
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 350ms ease;
}

.access-field:focus-within .access-field__line::after {
  transform: scaleX(1);
}

.access-form__submit {
  flex: 0 0 auto;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 69px;
  min-height: 44px;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #e3e8ee;
  font-family: var(--font-text);
  font-size: clamp(12px, 0.81vw, 15px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  cursor: pointer;
  transform: translateY(22px);
  transition: color 180ms ease, opacity 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.access-form__submit:hover {
  color: #ffffff;
}

.access-form__submit::after {
  content: "";
  position: absolute;
  right: 4px;
  bottom: 5px;
  left: 0;
  height: 1px;
  background: currentColor;
  opacity: 0;
  transition: opacity 180ms ease;
}

.access-form__submit:focus-visible {
  outline: none;
  color: #ffffff;
}

.access-form__submit:focus-visible::after {
  opacity: 0.85;
}

.access-form__submit:disabled {
  cursor: wait;
  opacity: 0.55;
}

.access-form__message {
  min-height: 22px;
  margin: 10px 0 0;
  color: #f0c9bd;
  font-size: 12px;
  font-weight: 300;
  line-height: 1.8;
  letter-spacing: 0.035em;
  text-align: left;
}



.access-field__input[aria-invalid="true"] ~ .access-field__line {
  background: var(--color-accent);
}

/* Phone digits read as a short code; the account ID keeps normal spacing. */
.access-form[data-mode="phone"] .access-field__input { letter-spacing: 0.6em; }
.access-form:is([data-mode="customer"],[data-mode="code"]) .access-field__input { letter-spacing: 0.14em; }
/* A key that is never remembered (private bundles such as Central Market): masked like a password,
   but a plain text field, so password managers neither offer to save it nor fill it. */
.access-field__input--masked { -webkit-text-security: disc; text-security: disc; }

.access-form__hint {
  margin: 14px 0 0;
  color: var(--color-muted);
  font-size: 12px;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-align: left;
}

/* The override is a quiet text switch, not a second field competing with the first. */
.access-form__switch {
  display: inline-block;
  margin: 30px 0 0;
  padding: 10px 0;
  border: 0;
  background: transparent;
  color: var(--color-copy);
  font: 400 11px/1.5 var(--font-text);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  border-bottom: 1px solid rgb(147 161 176 / 0.35);
  transition: color 180ms ease, border-color 180ms ease;
}

.access-form__switch:hover,
.access-form__switch:focus-visible {
  color: #fff;
  border-bottom-color: var(--color-accent);
  outline: none;
}

.access-form__switch:disabled { opacity: 0.5; cursor: wait; }

.access-form__noscript {
  margin: 35px 0 0;
  color: var(--color-copy);
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: 0.04em;
}

/* Suppress browser-generated filled boxes and built-in reveal decorations. */
.access-field__input::-ms-reveal,
.access-field__input::-ms-clear {
  display: none;
}

.access-field__input:-webkit-autofill,
.access-field__input:-webkit-autofill:hover,
.access-field__input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--color-ivory);
  caret-color: var(--color-ivory);
  transition: background-color 9999s ease-out 0s;
}

.site-footer {
  text-align: center;
}

.site-footer p {
  margin: 0;
  color: var(--color-muted);
  font-size: clamp(10px, 0.66vw, 12px);
  font-weight: 300;
  line-height: 1.6;
  letter-spacing: 0.35em;
}

@media (min-width: 2200px) {
  .invitation__description { letter-spacing: 0.2em; }
}

/* The same composition, with enough room for a readable form on small screens. */
@media (max-width: 760px) {
  :root {
    --page-inset: 30px;
    --seam-position: 20px;
  }

  .page {
    padding-top: max(31px, env(safe-area-inset-top));
    padding-bottom: max(35px, env(safe-area-inset-bottom));
  }

  .wordmark { width: 140px; }

  .main-content {
    padding: 86px 0 96px;
  }

  .invitation { transform: translateY(-6px); }

  .invitation h1 {
    font-size: clamp(46px, 9.65vw, 72px);
    letter-spacing: -0.04em;
    line-height: 1.2;
  }

  .invitation__description {
    max-width: 385px;
    margin-top: 22px;
    font-size: 12px;
    line-height: 1.95;
    letter-spacing: 0.105em;
  }

  .access-form {
    width: min(100%, 390px);
    margin-top: 69px;
  }

  .access-form__row { gap: 20px; }
  .access-field__input { height: 48px; font-size: 18px; }
  .access-field__label { font-size: 11px; letter-spacing: 0.12em; }
  .access-form__submit { min-width: 61px; font-size: 11px; letter-spacing: 0.26em; }
  .access-form__message { font-size: 11px; }

  .site-footer p { font-size: 9px; letter-spacing: 0.22em; }

  .atmosphere__light {
    /* Slightly fainter behind the smaller, more closely spaced text. */
    opacity: 0.8;
  }
}

@media (max-width: 380px) {
  :root { --page-inset: 23px; --seam-position: 13px; }
  .invitation h1 { font-size: 43px; }
  .invitation__description { font-size: 11px; letter-spacing: 0.08em; }
  .access-form__row { gap: 16px; }
  .wordmark { font-size: 9px; letter-spacing: 0.35em; }
}

@media (max-height: 600px) and (min-width: 761px) {
  .page { padding-top: 27px; padding-bottom: 27px; }
  .main-content { padding: 48px 0 84px; }
  .invitation h1 { font-size: 70px; }
  .invitation__description { margin-top: 15px; }
  .access-form { margin-top: 47px; }
  .invitation { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (forced-colors: active) {
  .atmosphere { display: none; }
  .access-field__input { border-bottom: 1px solid CanvasText; }
  .access-form__submit:focus-visible { outline: 1px solid Highlight; outline-offset: 4px; }
  .access-field__input:focus-visible { outline: 1px solid Highlight; outline-offset: 4px; }
}

/* ---------------------------------------------------------------- gold theme (owner, 2026-09-23) */
/* The approved "By invitation." palette, kept as a second theme: warm ground, bronze light, ivory type and a
   greyscale logo with muted gold accents. Set data-theme="gold" on <html>. */
.wordmark--gold { display: none; }
:root[data-theme="gold"] .wordmark--brand { display: none; }
:root[data-theme="gold"] .wordmark--gold { display: block; }
:root[data-theme="gold"] {
  --color-ground: #141414;
  --color-ivory: #e4ded1;
  --color-copy: #a9a49b;
  --color-muted: #a29c91;
  --color-rule: #a9a08e;
  --color-accent: #c9ae84;
  --color-accent-2: #e5d8bf;
  --grain-opacity: 0.19;
}
:root[data-theme="gold"] ::selection { color: #f0eadd; background: #625b4d; }
:root[data-theme="gold"] .atmosphere {
  background:
    linear-gradient(180deg, transparent 5%, rgb(0 0 0 / 0.24) 100%),
    linear-gradient(112deg, #131212 0%, #191917 49%, #22201c 100%);
}
:root[data-theme="gold"] .atmosphere__light {
  background: linear-gradient(
    140deg,
    transparent 0%,
    transparent 60.5%,
    rgb(180 155 123 / 0.012) 62%,
    rgb(180 155 123 / 0.075) 63.3%,
    rgb(180 155 123 / 0.22) 65%,
    rgb(180 155 123 / 0.30) 66.5%,
    rgb(180 155 123 / 0.29) 68.5%,
    rgb(180 155 123 / 0.21) 70%,
    rgb(180 155 123 / 0.075) 71.4%,
    rgb(180 155 123 / 0.012) 72.7%,
    transparent 74%,
    transparent 74.5%,
    rgb(180 155 123 / 0.045) 75.8%,
    rgb(180 155 123 / 0.17) 77.3%,
    rgb(180 155 123 / 0.23) 79%,
    rgb(180 155 123 / 0.19) 80.5%,
    rgb(180 155 123 / 0.07) 82.3%,
    rgb(180 155 123 / 0.015) 84%,
    transparent 85.5%,
    transparent 100%
  );
}
:root[data-theme="gold"] .atmosphere__seam {
  background: linear-gradient(180deg, rgb(191 175 145 / 0.45), rgb(164 148 120 / 0.32) 63%, rgb(140 125 101 / 0.16));
}
:root[data-theme="gold"] .access-field__input:focus + .access-field__label,
:root[data-theme="gold"] .access-field__input:not(:placeholder-shown) + .access-field__label { color: #c5bcac; }
:root[data-theme="gold"] .access-field__line::after { background: #e5d8bf; }
:root[data-theme="gold"] .access-form__submit { color: #d6cfbf; }
:root[data-theme="gold"] .access-form__submit:hover,
:root[data-theme="gold"] .access-form__submit:focus-visible,
:root[data-theme="gold"] .access-form__switch:hover,
:root[data-theme="gold"] .access-form__switch:focus-visible { color: #fff4df; }
:root[data-theme="gold"] .access-form__message { color: #c6bba8; }
:root[data-theme="gold"] .access-form__switch { border-bottom-color: rgb(169 160 142 / 0.35); }
:root[data-theme="gold"] .access-form__switch:hover,
:root[data-theme="gold"] .access-form__switch:focus-visible { border-bottom-color: #c9ae84; }

/* Phone prefix: the page shows the number on file with the last four blank, so the client only types those. */
.access-field__entry { display: flex; align-items: baseline; gap: 0.6em; }
.access-field__entry .access-field__input { flex: 1 1 auto; min-width: 0; }
.access-field__prefix {
  flex: 0 0 auto;
  padding: 3px 0 13px;
  color: var(--color-copy);
  font: 300 18px/1.6 var(--font-text);
  letter-spacing: 0.08em;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.access-field--prefixed .access-field__label { transform: translateY(-25px) scale(0.83); }
.access-form:is([data-mode="customer"],[data-mode="code"]) .access-field__prefix { display: none; }
.access-form:is([data-mode="customer"],[data-mode="code"]) .access-field--prefixed .access-field__label { transform: none; }
.access-form:is([data-mode="customer"],[data-mode="code"]) .access-field--prefixed .access-field__input:focus + .access-field__label,
.access-form:is([data-mode="customer"],[data-mode="code"]) .access-field--prefixed .access-field__input:not(:placeholder-shown) + .access-field__label { transform: translateY(-25px) scale(0.83); }

/* Hub sign-in: two stacked lines, the account ID above the phone digits. */
.access-form--hub .access-form__fields { display: grid; gap: 40px; }
.access-form--hub .access-field__input--code { letter-spacing: 0.14em; text-transform: uppercase; }
.access-form--hub .access-field__input--digits { letter-spacing: 0.6em; }
.access-form--hub .access-field__input--email { letter-spacing: 0.04em; }
.access-form[hidden] { display: none; }