:root { --haze-a: #dcc49c; --haze-b: #efdfc3; }
/* the hero invitation */
.home .hero-copy { bottom: 72px; gap: 24px; }
.home .hero-copy > p { font-size: 22px; line-height: 1.35; max-width: 30ch; }
@media (max-width: 800px) { .home .hero-copy { bottom: 40px; } .home .hero-copy > p { font-size: 18px; } }
.hz-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.hz-cta .btn { width: auto; flex: 0 0 auto; min-width: 0; padding-inline: 32px; }
.hz-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--ground); border-top: 1px solid var(--line); transform: translateY(100%); visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s; }
.hz-bar.is-on { transform: none; visibility: visible; transition: transform .35s var(--ease); }
.hz-bar .hz-cta { flex-wrap: nowrap; justify-content: center; }
@media (max-width: 800px) { .hz-bar .hz-cta { width: 100%; justify-content: space-between; } .hz-bar .btn { flex: 1 1 auto; } .hz-bar .lnk { flex: 0 0 auto; white-space: nowrap; } }
/* product slots drawn as a soft haze: an abstract warm shape, blurred, drifting slowly */
.hz-t { position: relative; display: block; overflow: hidden; background: var(--tile); aspect-ratio: 4 / 5; }
.hz-t > span { position: absolute; inset: 22% 26%; border-radius: 46% 54% 40% 60% / 50% 42% 58% 50%;
  background: radial-gradient(60% 60% at 40% 35%, var(--haze-b), var(--haze-a)); filter: blur(18px); opacity: .95;
  animation: hz-drift 9s ease-in-out infinite alternate; }
.hz-1 > span { inset: 18% 30% 26% 30%; border-radius: 40% 40% 48% 48%; animation-delay: -2s; }
.hz-2 > span { inset: 30% 20% 24% 20%; border-radius: 50%; animation-delay: -4s; }
.hz-3 > span { inset: 16% 34% 20% 34%; border-radius: 36%; animation-delay: -6s; }
.hz-4 > span { inset: 26% 24%; border-radius: 58% 42% 50% 50%; animation-delay: -1s; }
.hz-5 > span { inset: 20% 28% 28%; border-radius: 44%; animation-delay: -5s; }
@keyframes hz-drift { to { transform: translate(4%, -3%) scale(1.06); opacity: .7; } }
@media (prefers-reduced-motion: reduce) { .hz-t > span { animation: none; } }
/* the New in rail keeps its shape, with soft bars where names and prices sit */
.hz-shelf .shelf-t.hz-t { aspect-ratio: 1; width: 56px; }
.hz-shelf .shelf-t.hz-t > span { inset: 18%; filter: blur(8px); }
.hz-l { display: block; width: 64px; height: 8px; border-radius: 4px; background: var(--haze-a); opacity: .8; }
.hz-l2 { width: 104px; margin-top: 8px; }
/* the hazy grid with its invitation laid over it */
.hz-sec { position: relative; padding: 0 6px; }
.hz-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.hz-gate { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 16px; padding: 24px; text-align: center;
  background: radial-gradient(60% 50% at 50% 50%, rgba(251,250,245,.88), rgba(251,250,245,.35)); }
.hz-gate h2 { font-family: var(--serif); font-size: 44px; font-weight: 500; line-height: 1; max-width: 14ch; text-wrap: balance; }
.hz-gate p { max-width: 40ch; }
/* brands: every letter in one quiet tone, none of them a link */
/* the access sheet: two tabs in the sheet's header, one pane at a time */
.sh--access { width: min(560px, calc(100vw - 32px)); }
.tabs { display: flex; gap: 24px; }
.tabs [role=tab] { padding: 8px 0 10px; font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1; letter-spacing: -.01em; color: var(--muted); border-bottom: 1px solid transparent; }
.tabs [role=tab][aria-selected=true] { color: var(--ink); border-color: var(--ink); }
.sh-p { margin: 0 0 20px; max-width: 46ch; }
.sh--access .fm { grid-template-columns: 1fr 1fr; gap: 12px; }
.sh--access .fm .btn { margin-top: 6px; width: 100%; justify-self: stretch; }
.sh--access .hz-code { display: grid; gap: 12px; }
.hz-msg, .sh--access .fm-ok { font-size: 14px; }
/* Apply: three dots on the button while it sends, then the thank-you (study 04 Quiet, 30 Oct) */
.sh--access .btn { position: relative; }
.sh--access .btn .dots { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 6px; }
.sh--access .btn .dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--paper); animation: hz-dot 1s infinite; }
.sh--access .btn .dots i:nth-child(2) { animation-delay: .15s; } .sh--access .btn .dots i:nth-child(3) { animation-delay: .3s; }
@keyframes hz-dot { 0%, 60%, 100% { opacity: .25; } 30% { opacity: 1; } }
.is-loading .btn > span:first-child { visibility: hidden; } .is-loading .btn .dots { display: flex; }
.sh-done { display: grid; justify-items: center; align-content: center; text-align: center; gap: 14px; min-height: 360px; padding: 12px 0; }
.sh--access.is-thanks .sh-h, .sh--access.is-thanks [data-pane] { display: none; }
.sh-done .r { width: 56px; aspect-ratio: 662 / 978; background: var(--ink); -webkit-mask: url("../img/revae-icon.svg") center / contain no-repeat; mask: url("../img/revae-icon.svg") center / contain no-repeat; }
.sh-done h3 { margin: 0; font-family: var(--serif); font-size: 32px; font-weight: 500; line-height: 1; letter-spacing: -.01em; }
.sh-done p { margin: 0; max-width: 32ch; color: var(--muted); }
.sh-done .lnk { margin-top: 6px; }
.sh-done.is-on .r { animation: hz-breathe 1.4s var(--ease) both; }
@keyframes hz-breathe { 0% { opacity: 0; transform: scale(.7); } 45% { opacity: 1; transform: scale(1.08); } 100% { transform: scale(1); } }
.sh-done.is-on h3 { animation: hz-type 1s steps(24) both; animation-delay: 1s; white-space: nowrap; overflow: hidden; max-width: 100%; }
@keyframes hz-type { from { width: 0; } to { width: 100%; } }
.sh-done.is-on p, .sh-done.is-on .lnk { animation: hz-up .6s var(--ease) both; animation-delay: 1.9s; }
@keyframes hz-up { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .sh-done.is-on * { animation-duration: .01s !important; animation-delay: 0s !important; } }
/* D1: a filled field with the label inside and a line along the bottom, which turns to ink while typing */
.fl { position: relative; display: block; }
.fl > span { position: absolute; top: 9px; left: 14px; font-size: 11.5px; color: var(--muted); letter-spacing: .01em; pointer-events: none; }
.fl > input { width: 100%; height: 56px; padding: 20px 14px 0; border: 0; border-bottom: 1px solid rgba(35,34,30,.45); border-radius: 6px 6px 0 0; background: #e6dccb; font-size: 15px; color: var(--ink); outline: 0; }
.fl > input:focus { border-bottom: 2px solid var(--ink); padding-bottom: 0; }
.fl > input:-webkit-autofill { -webkit-box-shadow: inset 0 0 0 60px #e6dccb; }
.fl > textarea { width: 100%; min-height: 160px; padding: 26px 14px 12px; border: 0; border-bottom: 1px solid rgba(35,34,30,.45); border-radius: 6px 6px 0 0; background: #e6dccb; font: inherit; font-size: 15px; color: var(--ink); outline: 0; resize: vertical; }
.fl > textarea:focus { border-bottom: 2px solid var(--ink); }
.btn--fit { width: auto; justify-self: start; }
.btn--pill { width: 100%; height: 52px; border-radius: 999px; justify-self: stretch; padding-inline: 32px; }
.fm-note { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--muted); max-width: 46ch; }
.sh--access .fm .fm-ok { grid-column: 1 / -1; }
/* the footer's mailing list field, in the same family */
.ft .nl-f { position: relative; display: flex; align-items: center; border: 0; border-bottom: 1px solid rgba(35,34,30,.45); border-radius: 6px 6px 0 0; background: #e6dccb; }
.ft .nl-f input { height: 56px; padding-inline: 14px; }
.ft .nl-f:focus-within { border-bottom: 2px solid var(--ink); }
.ft .nl-f button { padding-inline: 14px; }
/* on a phone the sheet runs edge to edge; iOS zooms on focus if a field's text is under 16px */
@media (pointer: coarse), (max-width: 800px) { .fl > input, .fl > textarea, .ft .nl-f input { font-size: 16px; } }
@media (max-width: 800px) { .sh--access { width: 100%; } .sh--access .fm { grid-template-columns: 1fr; } .tabs { gap: 18px; } .tabs [role=tab] { font-size: 19px; white-space: nowrap; } }
.ft--lite { grid-template-columns: 1fr; gap: 40px; }
.ft--lite .ft-a { display: grid; grid-template-columns: 5fr 7fr; gap: 56px 64px; align-items: end; }
@media (max-width: 800px) { .ft--lite .ft-a { grid-template-columns: 1fr; gap: 28px; } }
.hd-apply { font-weight: 500; }
/* the application page */
.hz-apply { display: grid; grid-template-columns: 5fr 7fr; gap: 48px 64px; padding: 48px var(--pad) 96px; }
.hz-apply-t h1 { font-family: var(--serif); font-size: 64px; font-weight: 500; line-height: 1; margin: 12px 0 18px; }
.hz-apply-t p:last-child { max-width: 42ch; font-size: 16px; }
.hz-form { align-self: start; }
.hz-code { grid-column: 2; display: grid; gap: 10px; padding-top: 32px; border-top: 1px solid var(--line); }
.hz-code h2 { font-family: var(--serif); font-size: 30px; font-weight: 500; }
.hz-msg { font-size: 14px; }
@media (max-width: 800px) {
  .hz-grid { grid-template-columns: repeat(2, 1fr); }
  .hz-gate h2 { font-size: 34px; }
  .hz-apply { grid-template-columns: 1fr; padding: 32px 16px 64px; }
  .hz-code { grid-column: 1; }
  .hz-apply-t h1 { font-size: 44px; }
}