/* ==========================================================================
   ARYA pre-launch site
   Travertine stone, Persian lapis, bronze detail.
   Bodoni Moda (display) + Instrument Sans (text).
   One bold moment: the hero archway that opens on scroll.
   ========================================================================== */

:root {
  --travertine: #E6DFD3;
  --limestone: #EFEAE1;
  --lapis: #1B2A4A;
  --lapis-deep: #121D35;
  --bronze: #8B6A3E;
  --brass: #C7A876;

  --bg: var(--travertine);
  --text: var(--lapis);
  --text-soft: #3A4560;
  --rule: rgba(27, 42, 74, 0.18);
  --rule-strong: rgba(27, 42, 74, 0.4);
  --on-lapis: #ECE6DB;
  --on-lapis-soft: #B9BFCC;
  --error-on-lapis: #F3B6A6;

  --display: "Marcellus", "Optima", "Times New Roman", serif;
  --sans: "Instrument Sans", "Helvetica Neue", Arial, system-ui, sans-serif;

  /* Type scale (roughly 1.25 ratio, fluid at the top) */
  --t-small: 0.875rem;
  --t-body: 1.125rem;
  --t-lede: clamp(1.1875rem, 1.1rem + 0.4vw, 1.375rem);
  --t-h3: clamp(1.5rem, 1.3rem + 0.8vw, 2rem);
  --t-section: clamp(2.25rem, 1.5rem + 3vw, 4.25rem);
  --t-display: clamp(3rem, 1.6rem + 6vw, 7.5rem);

  --gutter: clamp(1.25rem, 0.6rem + 3vw, 4rem);
  --wrap: 84rem;
  --space: clamp(4.5rem, 2.5rem + 6vw, 8.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --header-h: 4.25rem;
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--header-h); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 400 var(--t-body)/1.6 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; touch-action: manipulation; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
main:focus { outline: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100;
  padding: 0.75rem 1.25rem; background: var(--lapis); color: var(--on-lapis);
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* ---------- Type roles ---------- */
.h-display, .h-section, .h-statement, .hero-title {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  text-wrap: balance;
}
.h-display { font-size: var(--t-display); line-height: 1.04; letter-spacing: 0; }
.h-section { font-size: var(--t-section); line-height: 1.12; letter-spacing: 0.005em; max-width: 18ch; }
.h-statement { font-size: var(--t-section); line-height: 1.16; letter-spacing: 0.005em; max-width: 22ch; }
.lede { font-size: var(--t-lede); line-height: 1.6; color: var(--text-soft); max-width: 36em; }

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem;
  min-height: 3.25rem; padding: 0 1.75rem;
  font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em;
  text-decoration: none; white-space: nowrap;
  transition: background-color 240ms var(--ease), color 240ms var(--ease);
}
.btn-stone { background: var(--limestone); color: var(--lapis); }
.btn-stone:hover { background: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  color: var(--lapis);
  transition: background-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease);
}
.site-header.is-solid { background: rgba(230, 223, 211, 0.94); box-shadow: 0 1px 0 var(--rule); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.site-header.on-image { color: var(--on-lapis); }

.nav {
  display: flex; align-items: center; gap: 2rem;
  max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter);
  height: var(--header-h);
}
.brand { display: inline-flex; align-items: center; gap: 0.8rem; min-height: 44px; text-decoration: none; --mark-bar: var(--bronze); }
.on-image .brand { --mark-bar: var(--brass); }
.wordmark { height: 1.5rem; width: auto; }
.wordmark-light { display: none; }
.site-header.on-image .wordmark-dark { display: none; }
.site-header.on-image .wordmark-light { display: block; }
.site-header.menu-open .wordmark-dark { display: block; }
.site-header.menu-open .wordmark-light { display: none; }
.site-footer .wordmark { height: 1.9rem; }

.nav-links { display: none; gap: 2rem; margin-left: auto; }
.nav-links a, .nav-cta {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 0.9375rem; text-decoration: none;
}
.nav-links a:hover, .nav-links a[aria-current="true"] { text-decoration: underline; }
.nav-cta { display: none; padding-inline: 1.25rem; border: 1px solid currentColor; }
.nav-cta:hover { background: var(--lapis); color: var(--on-lapis); border-color: var(--lapis); }
.on-image .nav-cta:hover { background: var(--on-lapis); color: var(--lapis); border-color: var(--on-lapis); }

.menu-toggle { margin-left: auto; min-height: 44px; min-width: 44px; font-size: 0.9375rem; }
.mobile-menu { background: var(--travertine); color: var(--lapis); border-top: 1px solid var(--rule); padding: 1rem var(--gutter) 2rem; }
.mobile-menu a {
  display: flex; align-items: center; min-height: 3.5rem;
  font-family: var(--display); font-size: 1.75rem; text-decoration: none;
  border-bottom: 1px solid var(--rule);
}
@media (min-width: 1024px) {
  .nav-links, .nav-cta { display: inline-flex; }
  .nav-cta { margin-left: 0.5rem; }
  .menu-toggle, .mobile-menu { display: none !important; }
}

/* ---------- Hero ----------
   Default (no JS / reduced motion): full-bleed image, stacked title.
   .is-scrolly: an archway in stone that opens to full bleed as you scroll. */
.hero { position: relative; background: var(--travertine); }
.hero-stage {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: calc(var(--header-h) + 2rem) var(--gutter) clamp(2rem, 5vh, 4rem);
}
.hero-window { position: absolute; inset: 0; }
.hero-window img, .hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.hero-video { opacity: 0; transition: opacity 600ms var(--ease); }
.hero-video.is-playing { opacity: 1; }
.hero-window::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 29, 53, 0.5) 0%, rgba(18, 29, 53, 0) 18%),
    linear-gradient(180deg, rgba(18, 29, 53, 0) 40%, rgba(18, 29, 53, 0.62) 100%);
  opacity: var(--shade, 1);
}
.hero-title {
  position: relative;
  color: var(--on-lapis);
  font-size: var(--t-display);
  line-height: 0.98;
  letter-spacing: -0.02em;
  max-width: var(--wrap);
}
.ht { display: block; }
.hero-foot {
  position: relative;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem;
  margin-top: 2rem; color: var(--on-lapis);
}
.hero-foot p { max-width: 28em; }

/* Scroll-driven archway */
.hero.is-scrolly { height: 260vh; }
.is-scrolly .hero-stage {
  position: sticky; top: 0;
  height: 100svh; min-height: 0;
  padding: 0;
  --q: calc(1 - var(--p, 0));
}
.is-scrolly .hero-window {
  /* Arch: half-width radius at the top corners, square at the base */
  clip-path: inset(
    calc(var(--q) * 20vh) calc(var(--q) * var(--side)) calc(var(--q) * 8vh) calc(var(--q) * var(--side))
    round calc(var(--q) * var(--arch-r)) calc(var(--q) * var(--arch-r)) 0 0
  );
  --side: 38vw;
  --arch-r: 12vw;
  will-change: clip-path;
}
.is-scrolly .hero-window img, .is-scrolly .hero-video { transform: scale(calc(1.08 - var(--p, 0) * 0.08)); }
.is-scrolly .hero-window::after { opacity: calc(var(--p, 0) * 1.2 - 0.2); }

.is-scrolly .hero-title { position: absolute; inset: 0; max-width: none; color: var(--lapis); pointer-events: none; font-size: clamp(2.25rem, 0.4rem + 4.3vw, 7rem); }
.is-scrolly .ht { position: absolute; opacity: calc(1 - var(--p, 0) * 3); }
.is-scrolly .ht-1 { left: var(--gutter); top: 34vh; }
.is-scrolly .ht-2 { right: var(--gutter); top: 54vh; text-align: right; }
.is-scrolly .ht-3 {
  left: var(--gutter); right: var(--gutter); bottom: 22vh;
  color: var(--on-lapis);
  opacity: calc((var(--p, 0) - 0.62) * 3.5);
  transform: translateY(calc((1 - var(--p, 0)) * 3rem));
}
.is-scrolly .hero-foot {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(2rem, 6vh, 4rem);
  margin: 0;
  opacity: calc((var(--p, 0) - 0.72) * 4);
  visibility: hidden;
}
.is-scrolly.is-open .hero-foot { visibility: visible; }

.scroll-hint {
  position: absolute; left: 50%; bottom: 2vh; transform: translateX(-50%);
  font-size: var(--t-small); color: var(--text-soft);
  opacity: calc(1 - var(--p, 0) * 6);
}

@media (max-width: 767px) {
  .is-scrolly .hero-window { --side: 16vw; --arch-r: 34vw; }
  .is-scrolly .ht-1 { top: calc(var(--header-h) + 3vh); }
  .is-scrolly .ht-2 { top: auto; bottom: 9vh; right: var(--gutter); }
  .is-scrolly .hero-window { clip-path: inset(
    calc(var(--q) * 22vh) calc(var(--q) * var(--side)) calc(var(--q) * 22vh) calc(var(--q) * var(--side))
    round calc(var(--q) * var(--arch-r)) calc(var(--q) * var(--arch-r)) 0 0); }
  .is-scrolly .hero-title { font-size: clamp(2.5rem, 11vw, 3.5rem); }
  .is-scrolly .ht-3 { bottom: calc(clamp(2rem, 6vh, 4rem) + 15rem); max-width: 9.5ch; }
  .hero-foot p { font-size: var(--t-small); }
}

/* ---------- The name ---------- */
.name { padding-block: var(--space); background: var(--limestone); }


/* ---------- Origin ---------- */
.origin-grid { display: grid; gap: 3rem; align-items: end; }
.arch { border-radius: 999px 999px 0 0; overflow: hidden; background: var(--limestone); }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.origin-figure .arch { aspect-ratio: 3 / 4; max-width: 30rem; }
.origin-figure img { object-position: 38% 50%; }
.places { display: grid; gap: 2rem; margin-top: 3rem; border-top: 1px solid var(--rule-strong); padding-top: 2rem; }
.place p:not(.place-name) { color: var(--text-soft); max-width: 30em; }
.place-name { font-family: var(--display); font-size: var(--t-h3); line-height: 1.2; margin-bottom: 0.5rem; display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap; }
@media (min-width: 900px) {
  .origin-grid { grid-template-columns: 5fr 7fr; gap: 6rem; }
  .places { grid-template-columns: 1fr 1fr; gap: 3rem; }
}

/* ---------- Manifesto ---------- */
.manifesto { padding-block: var(--space); background: var(--limestone); }
.manifesto-grid { display: grid; gap: 2rem; }
.manifesto-body { display: grid; gap: 1.25rem; max-width: 34em; font-size: var(--t-lede); color: var(--text-soft); }
@media (min-width: 900px) {
  .manifesto-grid { grid-template-columns: 7fr 5fr; gap: 5rem; align-items: end; }
}

/* ---------- Fit ---------- */
.fit { padding-block: var(--space); }
.fit-grid { display: grid; gap: 4rem; }
.fit-intro .lede { margin-top: 1.5rem; }
.sizing { display: grid; gap: 0.75rem; margin-top: 2.5rem; }
.sizing li { color: var(--text-soft); }
.sizing strong { display: inline-block; min-width: 9rem; font: 400 1.5rem/1 var(--display); color: var(--lapis); }

.points { border-top: 1px solid var(--rule-strong); }
.point { display: grid; gap: 0.35rem; padding-block: 1.4rem; border-bottom: 1px solid var(--rule); }
.point dt { font-family: var(--display); font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.15; }
.point dd { color: var(--text-soft); max-width: 30em; }
@media (min-width: 768px) {
  .fit-grid { grid-template-columns: 1fr 1fr; gap: 3rem 4rem; align-items: start; }
  .fit-points { grid-column: 1 / -1; }
}
@media (min-width: 1100px) {
  /* text | film | fit tool, so no column is left empty */
  .fit-grid { grid-template-columns: 1.15fr 0.85fr 1.1fr; gap: 4rem; }
  .fit-points { grid-column: auto; }
}

/* ---------- Collection: arch colonnade ---------- */
.collection { padding-block: var(--space); overflow: hidden; }
.collection-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1.5rem 2rem; margin-bottom: 3rem; }
.cut-filter { display: flex; gap: 1.5rem; }
.cut-filter button {
  min-height: 44px; font-size: 1rem; color: var(--text-soft);
  text-decoration: underline transparent; text-underline-offset: 0.35em;
  transition: color 200ms, text-decoration-color 200ms;
}
.cut-filter button:hover { color: var(--lapis); }
.cut-filter button[aria-pressed="true"] { color: var(--lapis); text-decoration-color: currentColor; }

.colonnade { --slide-w: clamp(15rem, 24vw, 23rem); position: relative; }
.track {
  display: flex; gap: clamp(1rem, 2.5vw, 2.5rem);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding: 2rem calc(50% - var(--slide-w) / 2) 1rem;
  scrollbar-width: none;
  cursor: grab;
}
.track::-webkit-scrollbar { display: none; }
.track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.track:focus-visible { outline: 2px solid var(--lapis); outline-offset: -2px; }

.slide {
  flex: 0 0 var(--slide-w);
  scroll-snap-align: center;
  transform: scale(var(--s, 0.84));
  opacity: var(--o, 0.55);
  transform-origin: 50% 100%;
  will-change: transform;
}
.slide[hidden] { display: none; }
.slide-arch {
  position: relative; display: grid; place-items: center;
  width: 100%; aspect-ratio: 3 / 4.4;
  border-radius: 999px 999px 0 0; overflow: hidden;
  background: var(--frame);
  color: var(--ink);
  transition: background-color 700ms var(--ease), color 700ms var(--ease);
}
.slide-arch::before {
  /* soft light falling through the arch */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, 0.22), transparent 70%),
              radial-gradient(80% 40% at 50% 110%, rgba(0, 0, 0, 0.22), transparent 70%);
}
.slide-arch::after {
  /* colour wash: a new colourway rises from the base */
  content: ""; position: absolute; inset: 0;
  background: var(--wash, transparent);
  clip-path: circle(0% at 50% 100%);
}
.slide-arch.is-washing::after { animation: wash 900ms var(--ease) forwards; }
@keyframes wash { to { clip-path: circle(150% at 50% 100%); } }
/* Garment label inside each arch (placeholder until product photography) */
.slide-label {
  position: relative; z-index: 1;
  display: grid; justify-items: center; gap: 0.6rem;
  padding: 0 12%; text-align: center; color: var(--ink);
}
.slide-mark { width: clamp(2.5rem, 4vw, 3.5rem); height: auto; margin-bottom: 1rem; overflow: visible; }
.slide-mark path {
  stroke-dasharray: 1; stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.slide-mark path:nth-child(2) { transition-delay: 0.6s; }
.slide:not(.is-active) .slide-mark path { stroke-dashoffset: 1; transition-duration: 0.4s; transition-delay: 0s; }
.slide-kicker, .slide-cut { font-size: 0.8125rem; letter-spacing: 0.04em; opacity: 0.8; }
.slide-title { font-family: var(--display); font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.75rem); line-height: 1.05; }
.slide-cut { margin-top: 0.4rem; padding-top: 0.7rem; border-top: 1px solid currentColor; border-top-color: color-mix(in srgb, currentColor 40%, transparent); }

.colonnade-bar {
  display: grid; gap: 1.5rem; align-items: center;
  margin-top: 2rem; padding-top: 2rem; border-top: 1px solid var(--rule-strong);
}
.piece-meta { font-size: var(--t-small); color: var(--text-soft); }
.piece-name { font-family: var(--display); font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.75rem); line-height: 1.1; margin-top: 0.25rem; }
.piece-desc { color: var(--text-soft); margin-top: 0.25rem; }
.piece.is-swapping > * { animation: piece-in 520ms var(--ease) both; }
.piece.is-swapping > :nth-child(2) { animation-delay: 60ms; }
.piece.is-swapping > :nth-child(3) { animation-delay: 120ms; }
@keyframes piece-in { from { opacity: 0; transform: translateY(10px); } }

.colorways { display: flex; gap: 0.25rem; }
.colorway { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; }
.colorway::before {
  content: ""; width: 22px; height: 22px; border-radius: 50%;
  background: var(--c); box-shadow: inset 0 0 0 1px rgba(27, 42, 74, 0.2);
  outline: 1px solid transparent; outline-offset: 4px; transition: outline-color 200ms, transform 200ms var(--ease);
}
.colorway:hover::before { transform: scale(1.1); }
.colorway[aria-pressed="true"]::before { outline-color: var(--lapis); }

.colonnade-nav { display: flex; align-items: center; gap: 0.75rem; }
.nav-arrow {
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 1px solid var(--rule-strong); border-radius: 50%;
  transition: background-color 240ms var(--ease), color 240ms var(--ease), border-color 240ms;
}
.nav-arrow svg { width: 20px; height: 20px; }
.nav-arrow:hover { background: var(--lapis); color: var(--on-lapis); border-color: var(--lapis); }
.colonnade-count { min-width: 3.5rem; text-align: center; font-size: var(--t-small); color: var(--text-soft); font-variant-numeric: tabular-nums; }
.collection-note { margin-top: 3rem; color: var(--text-soft); }

@media (min-width: 900px) {
  .colonnade-bar { grid-template-columns: 1fr auto auto; gap: 3rem; }
}

/* ---------- Founders ---------- */
.about { padding-block: var(--space); background: var(--limestone); }
.about-grid { display: grid; gap: 3rem; align-items: center; }
.about-photo { overflow: hidden; max-width: 30rem; }
.about-photo img { width: 100%; aspect-ratio: 682 / 1024; object-fit: cover; }
.about-text .lede { margin-top: 1.75rem; max-width: 30em; color: var(--text); }
@media (min-width: 900px) {
  .about-grid { grid-template-columns: 5fr 7fr; gap: 6rem; }
}
@media (max-width: 899px) { .about-photo img { aspect-ratio: 4 / 5; object-position: 50% 30%; } }

/* ---------- Waitlist ---------- */
.drop { background: var(--lapis-deep); color: var(--on-lapis); padding-block: var(--space); }
.drop-inner { max-width: 48rem; }
.drop-mark { width: 2.5rem; height: 2.2rem; margin-bottom: 2.5rem; color: var(--on-lapis); --mark-bar: var(--brass); }
.drop .lede { color: var(--on-lapis-soft); margin-top: 1.5rem; }
.drop-form { margin-top: 3rem; }
.field label { display: block; font-size: var(--t-small); color: var(--on-lapis-soft); margin-bottom: 0.5rem; }
.field-row { display: flex; flex-direction: column; gap: 0.75rem; }
.field input {
  flex: 1; min-height: 3.25rem; padding: 0 1rem;
  background: rgba(236, 230, 219, 0.07); color: var(--on-lapis);
  border: 0; border-bottom: 1px solid rgba(236, 230, 219, 0.5); border-radius: 0;
  font-size: 1.125rem;
}
.field input:hover { border-bottom-color: var(--on-lapis); }
.field input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-bottom-color: var(--error-on-lapis); }
.field-help { margin-top: 0.75rem; font-size: var(--t-small); color: var(--on-lapis-soft); }
.field-error { margin-top: 0.5rem; font-size: var(--t-small); color: var(--error-on-lapis); }
.drop .btn-stone:focus-visible { outline-color: var(--brass); }
.btn[aria-busy="true"] { cursor: progress; }
.spinner { display: none; width: 14px; height: 14px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
.btn[aria-busy="true"] .spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.interest { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 1.75rem; margin-top: 2rem; font-size: var(--t-small); color: var(--on-lapis-soft); }
.interest legend { float: left; margin-right: 0.75rem; }
.interest label { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; color: var(--on-lapis); cursor: pointer; }
.interest input { width: 18px; height: 18px; margin: 0; accent-color: var(--brass); cursor: pointer; }
.interest input:focus-visible { outline: 2px solid var(--brass); }
.drop-success { margin-top: 3rem; }
.drop-success:focus { outline: none; }
@media (min-width: 600px) {
  .field-row { flex-direction: row; gap: 1.5rem; align-items: flex-end; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--lapis-deep); color: var(--on-lapis-soft); border-top: 1px solid rgba(236, 230, 219, 0.12); padding-top: 4rem; }
.site-footer .brand { color: var(--on-lapis); --mark-bar: var(--brass); }
.site-footer :focus-visible { outline-color: var(--brass); }
.footer-grid { display: grid; gap: 3rem; }
.footer-line { margin-top: 1rem; font-family: var(--display); font-size: 1.25rem; color: var(--on-lapis); }
.footer-nav { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: 1.5rem; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; overflow-wrap: anywhere; }
.footer-nav a:hover { color: var(--on-lapis); text-decoration: underline; }
.footer-base { padding-block: 2.5rem; font-size: var(--t-small); }
@media (min-width: 900px) { .footer-grid { grid-template-columns: 1fr 1.4fr; } }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* Menu open over the hero: switch to a solid header */
.site-header.menu-open { background: var(--travertine); color: var(--lapis); --mark-bar: var(--bronze); }
.site-header.menu-open .brand { --mark-bar: var(--bronze); }
.name .h-display { font-size: clamp(4.5rem, 2rem + 9vw, 10.5rem); line-height: 0.95; max-width: none; }

/* ---------- Photography ---------- */
.origin-figure img { object-position: 60% 50%; }
.fit-photo { margin: 0; }
.fit-photo .arch { aspect-ratio: 4 / 5; max-width: 26rem; border-radius: 0; }
.fit-photo video { width: 100%; height: 100%; object-fit: cover; display: block; }

.drop-grid { display: grid; gap: 4rem; align-items: center; }
.drop-grid .drop-inner { max-width: 40rem; }
.drop-photo .arch { aspect-ratio: 3 / 4; max-width: 26rem; background: var(--lapis); }
.drop-photo img { object-position: 52% 50%; }
@media (min-width: 1024px) {
  .drop-grid { grid-template-columns: 7fr 5fr; gap: 6rem; }
  .drop-photo .arch { margin-left: auto; }
}
@media (max-width: 1023px) { .drop-photo { order: -1; } }
@media (max-width: 767px) { .hero-window img { object-position: 50% 50%; } }

/* ---------- Calm motion (only when motion is allowed) ---------- */


/* Room for parallax drift inside framed photos */
.motion .arch img, .motion .about-photo img { scale: 1.12; }


/* Hero film: the cove is centred on the gap between the cliffs */
.hero-video { object-position: 50% 50%; }
@media (max-width: 899px) {
  .colonnade-bar { grid-template-columns: auto auto; justify-content: space-between; gap: 1.25rem 1rem; }
  .colonnade-nav { gap: 0.25rem; }
  .nav-arrow { width: 44px; height: 44px; }
  .colonnade-count { min-width: 2.5rem; }
  .colonnade-bar .piece { grid-column: 1 / -1; }
}
@media (min-width: 768px) and (max-width: 1099px) {
  .points { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; }
}

/* ---------- Hero signup (compact) ---------- */
.hero-form { flex: 1 1 22rem; max-width: 34rem; }
.hero-form .field-row { display: flex; flex-direction: column; gap: 0.5rem; }
.hero-form input {
  flex: 1; min-height: 3.25rem; padding: 0 1rem;
  background: rgba(245, 239, 228, 0.14); color: var(--on-lapis);
  border: 1px solid rgba(245, 239, 228, 0.6); border-radius: 0;
  font-size: 1rem;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.hero-form input::placeholder { color: rgba(245, 239, 228, 0.8); }
.hero-form input:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; }
.hero-form input[aria-invalid="true"] { border-color: var(--error-on-lapis); }
.hero-form .field-error { margin-top: 0.5rem; font-size: var(--t-small); color: var(--error-on-lapis); }
.hero-form .btn-stone:focus-visible { outline-color: var(--brass); }
.hero-success { color: var(--on-lapis); font-size: var(--t-lede); }
.hero-success:focus { outline: none; }
@media (min-width: 600px) { .hero-form .field-row { flex-direction: row; } }

/* ---------- Refinement pass: quieter, more considered UI details ---------- */
.nav-links a, .nav-cta, .menu-toggle { font-size: 0.875rem; letter-spacing: 0.03em; }
.nav-links a { text-decoration: underline transparent; text-decoration-thickness: 1px; text-underline-offset: 0.45em; transition: text-decoration-color 240ms var(--ease); }
.nav-links a:hover, .nav-links a[aria-current="true"] { text-decoration-color: currentColor; }
.nav-cta { transition: background-color 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease); }
.btn { letter-spacing: 0.03em; }
.lede, .manifesto-body, .point dd, .place p:not(.place-name) { text-wrap: pretty; }
.manifesto-body { color: var(--text); }

/* ---------- Legal pages ---------- */
.legal-page .site-header { position: sticky; }
.legal-page .nav-cta { display: inline-flex; margin-left: auto; padding-inline: 1rem; }
.legal { padding-block: clamp(3rem, 2rem + 4vw, 6rem) var(--space); }
.legal-wrap { max-width: 46rem; }
.legal .h-section { max-width: none; }
.legal-updated { margin-top: 0.75rem; font-size: var(--t-small); color: var(--text-soft); }
.legal-section { margin-top: 2.75rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.legal-section h2 { font-family: var(--display); font-weight: 400; font-size: var(--t-h3); line-height: 1.2; margin-bottom: 1rem; }
.legal-section p { color: var(--text-soft); max-width: 38em; text-wrap: pretty; }
.legal-section p + p { margin-top: 0.9rem; }
.legal-section strong { color: var(--text); font-weight: 500; }
.legal-section a { color: var(--text); }

/* Name + origin read as one chapter: centre each pair and close the doubled gap between them */
@media (min-width: 900px) {
  .origin-grid { align-items: center; }
}
.legal-page .nav-cta { white-space: nowrap; }
@media (max-width: 480px) { .legal-page .nav-cta { padding-inline: 0.75rem; font-size: 0.8125rem; letter-spacing: 0.01em; } .legal-page .wordmark { height: 1.3rem; } }

/* Name + origin, one chapter */
.origin-text .lede { margin-top: 1.5rem; max-width: 32em; }
.origin-text .places { margin-top: 2.5rem; }

/* ---------- Header at large screens: full width, aligned with the hero, scales gently ---------- */
:root { --header-h: clamp(4.25rem, 3.4rem + 1.1vw, 5.5rem); }
.nav { max-width: none; }
.wordmark { height: clamp(1.5rem, 1rem + 0.6vw, 2rem); }
.nav-links a, .nav-cta, .menu-toggle { font-size: clamp(0.875rem, 0.75rem + 0.25vw, 1rem); }
.nav-links { gap: clamp(2rem, 1rem + 1.4vw, 3rem); }
.nav-cta { padding-inline: clamp(1.25rem, 0.8rem + 0.6vw, 1.75rem); min-height: clamp(44px, 2.4rem + 0.4vw, 52px); }

/* Problem section: headline left, three promises stacked right */
.manifesto .h-statement { max-width: 20ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.75rem); }
.promises { border-top: 1px solid var(--rule-strong); align-self: end; }
.promise { display: grid; gap: 0.4rem; padding-block: 1.5rem; border-bottom: 1px solid var(--rule); }
.promise dt { font-family: var(--display); font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem); line-height: 1.15; color: var(--text); }
.promise dd { margin: 0; color: var(--text-soft); max-width: 30em; text-wrap: pretty; }
.collection-lede { margin-top: 1rem; color: var(--text-soft); font-size: var(--t-lede); }

/* Problem section: three promises as columns on wide screens */
@media (min-width: 1100px) {
  .manifesto-grid { grid-template-columns: 5fr 7fr; gap: 4.5rem; align-items: end; }
  .manifesto .h-statement { font-size: clamp(2rem, 0.9rem + 2.2vw, 3.5rem); }
  .promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; border-top: 0; }
  .promise { align-content: start; padding: 1.5rem 0 0; border-bottom: 0; border-top: 1px solid var(--rule-strong); }
  .promise dd { font-size: 1rem; line-height: 1.6; }
}

/* ---------- Top menu v3: announcement bar, centred logo, tucks away on scroll ---------- */
:root { --announce-h: 2.25rem; --top-h: calc(var(--header-h) + var(--announce-h)); }
html.no-announce { --announce-h: 0px; }
html { scroll-padding-top: var(--top-h); }
.site-header { transition: transform 420ms var(--ease), background-color 300ms var(--ease), color 300ms var(--ease), box-shadow 300ms var(--ease); }
.site-header.is-tucked { transform: translateY(-100%); }
.site-header.menu-open { transform: none; }

.announce {
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  height: var(--announce-h); padding-inline: var(--gutter);
  background: var(--lapis-deep); color: var(--on-lapis);
  font-size: 0.8125rem; letter-spacing: 0.03em; text-decoration: none; text-align: center;
  white-space: nowrap; overflow: hidden;
}
.announce span { text-decoration: underline; text-underline-offset: 0.3em; text-decoration-thickness: 1px; }
.announce:hover span { text-decoration-color: var(--brass); }
.announce:focus-visible { outline: 2px solid var(--brass); outline-offset: -4px; }
html.no-announce .announce { display: none; }

/* Hero offsets now account for the announcement bar */
.hero-stage { padding-top: calc(var(--top-h) + 2rem); }
.is-scrolly .hero-stage { padding-top: 0; }
@media (max-width: 767px) { .is-scrolly .ht-1 { top: calc(var(--top-h) + 3vh); } }

/* Desktop: links left, logo centred, button right */
@media (min-width: 1024px) {
  .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 2rem; }
  .nav-links { grid-column: 1; grid-row: 1; justify-self: start; margin-left: 0; }
  .brand { grid-column: 2; grid-row: 1; justify-self: center; }
  .nav-cta { grid-column: 3; grid-row: 1; justify-self: end; margin-left: 0; }
}

/* Phone menu: roomy serif list with Instagram at the foot */
.mobile-menu { min-height: calc(100svh - var(--top-h)); display: flex; flex-direction: column; }
.mobile-menu-foot { margin-top: auto; padding-top: 2rem; font-size: var(--t-small); }
.mobile-menu-foot a { font-family: var(--sans); font-size: var(--t-small); border: 0; min-height: 44px; display: inline-flex; align-items: center; color: var(--text-soft); }
@media (max-width: 480px) { .announce { font-size: 0.75rem; letter-spacing: 0.01em; } }

/* 404 page */
.notfound .lede { margin-top: 1.25rem; }
.notfound-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2.5rem; }
.btn-solid { background: var(--lapis); color: var(--on-lapis); }
.btn-solid:hover { background: var(--lapis-deep); }
.notfound-link { min-height: 44px; display: inline-flex; align-items: center; text-underline-offset: 0.35em; }

/* Why ARYA intro: headline with a short paragraph beneath */
.manifesto-intro .lede { margin-top: 1.5rem; max-width: 30em; color: var(--text-soft); }
@media (min-width: 1100px) { .manifesto .h-statement { max-width: 14ch; } }

/* Fit, compact: copy and details beside the film */
.fit-grid { gap: 3rem; }
.fit .points { margin-top: 2.25rem; display: block; }
.fit .point { grid-template-columns: 1fr; padding-block: 1.1rem; }
.sizing-line { margin-top: 1.75rem; color: var(--text-soft); font-size: var(--t-small); letter-spacing: 0.01em; }
.fit-photo .arch { margin-inline: auto; }
@media (min-width: 900px) {
  .fit-grid { grid-template-columns: 1.1fr 0.9fr; gap: 5rem; align-items: center; }
  .fit .point { grid-template-columns: minmax(12.5rem, auto) 1fr; gap: 1.5rem; align-items: baseline; }
  .fit-photo .arch { margin-inline: auto 0; }
}
@media (min-width: 1100px) { .fit-grid { grid-template-columns: 1.1fr 0.9fr; } }

/* Name now sits beside About: own tone, mirrored layout so the two never read as one block */
.name { background: var(--limestone); }
.about { background: var(--travertine); }
@media (min-width: 900px) {
  .origin-grid { grid-template-columns: 7fr 5fr; }
  .origin-figure { order: 2; }
}

/* Hero headline: "You shouldn't have to choose." crossfades to "Now you don't.", then the subline.
   Opacity only, no movement. The arch finishes opening first so the words sit on the film.
   Without scroll motion both lines simply stack. */
.ht-1, .ht-2 { display: none; }
.ht-a, .ht-b { display: block; }
.is-scrolly .ht-1, .is-scrolly .ht-2 { display: block; }
.hero.is-scrolly { height: 290vh; }
.is-scrolly .hero-window { --q: calc(1 - min(1, var(--p, 0) / 0.6)); }
.is-scrolly .ht-3 { display: grid; opacity: 1; transform: none; }
.is-scrolly .ht-a, .is-scrolly .ht-b { grid-area: 1 / 1; align-self: end; }
.is-scrolly .ht-a { display: none; } /* the split headline already said it; only "Now you don't." appears on the film */
.is-scrolly .ht-b { opacity: clamp(0, (var(--p, 0) - 0.6) * 6, 1); }
.is-scrolly .hero-foot { opacity: clamp(0, (var(--p, 0) - 0.82) * 7, 1); }
@media (max-width: 767px) { .is-scrolly .ht-3 { max-width: 11ch; } }

/* Sizing pass across 320 to 2560 */
@media (max-width: 767px) { .announce { font-size: 0.8125rem; } }
@media (max-width: 374px) {
  .colonnade-bar { grid-template-columns: 1fr; }
  .colonnade-nav { justify-self: start; }
}
@media (min-width: 768px) { .is-scrolly .hero-title { font-size: clamp(3rem, 0.4rem + 4.3vw, 7rem); } }
.sizing-line { max-width: 40em; }
@media (min-width: 900px) { .sizing-line { font-size: 0.9375rem; } }

/* Why ARYA on wide screens: headline and paragraph share a row, the three promises get the full width beneath */
@media (min-width: 900px) {
  .manifesto-grid { grid-template-columns: 1fr; gap: 3.5rem; align-items: start; }
  .manifesto-intro { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 4rem; align-items: end; }
  .manifesto-intro .lede { margin-top: 0; }
  .manifesto .h-statement { max-width: 14ch; font-size: clamp(2.5rem, 0.6rem + 4vw, 4.25rem); }
  .promises { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; border-top: 0; align-self: auto; }
  .promise { align-content: start; padding: 1.5rem 0 0; border-bottom: 0; border-top: 1px solid var(--rule-strong); }
  .promise dd { font-size: 1.0625rem; line-height: 1.6; }
}

/* Final audit: alternate tones so fit and collection never merge, and keep the interest choices on one row on phones */
.collection { background: var(--limestone); }
.name { background: var(--travertine); }
.about { background: var(--limestone); }
@media (max-width: 479px) {
  .interest legend { float: none; width: 100%; margin: 0 0 0.25rem; }
}

/* Announcement bar retired: the menu button and the signup section carry the first drop message */
:root { --announce-h: 0px; }

/* Privacy: Do Not Sell or Share control */
.optout-btn { margin: 0.5rem 0 1.75rem; }
.optout-status:empty { display: none; }

/* Share step after signup */
.share { margin-top: 1.75rem; max-width: 34rem; }
.share-title { font-family: var(--display); font-size: var(--t-h3); line-height: 1.2; }
.share-copy { margin-top: 0.35rem; color: inherit; opacity: 0.85; }
.share-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.share-link { flex: 1 1 16rem; min-width: 0; min-height: 48px; padding: 0 1rem; border: 1px solid currentColor; background: transparent; color: inherit; font: inherit; font-size: 0.9375rem; }
.share-btn { min-height: 48px; background: var(--on-lapis); color: var(--lapis); }
.share-btn:hover { background: #fff; }
.share-status { margin-top: 0.5rem; font-size: var(--t-small); min-height: 1.4em; }
.hero-success .share-copy { font-size: var(--t-small); }

/* Social links in the mobile menu */
.mobile-menu-foot { display: flex; gap: 1.75rem; }