/* ==========================================================================
   Visionarium NYC — interior pages (register, FAQ, team)
   Loads after visionarium.css and only on subpages. The homepage never pays
   for form or accordion styles it does not use.
   ========================================================================== */

/* --- Page head -----------------------------------------------------------
   Interior pages open the way the homepage does: inside a photograph. A flat
   navy band was tried first and read like an intranet — the argument of this
   site is pictures of the actual week, so every door into it shows one. */
.pagehead {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 72svh;
  overflow: hidden;
  background: var(--navy);
  color: var(--ink-light);
}
.pagehead__media { position: absolute; inset: 0; z-index: 0; }
.pagehead__media img { width: 100%; height: 100%; object-fit: cover; }
/* Same neutral scrim recipe as the hero — never a colour tint. */
.pagehead__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(1,16,36,.90) 0%, rgba(1,16,36,.72) 30%, rgba(1,16,36,.30) 58%, rgba(1,16,36,.05) 82%),
    linear-gradient(to top, rgba(1,16,36,.84) 0%, rgba(1,16,36,.28) 26%, rgba(1,16,36,0) 52%, rgba(1,16,36,.44) 100%);
}
.pagehead__inner {
  position: relative; z-index: 2; width: 100%;
  padding-top: calc(96px + clamp(2rem, 1rem + 4vw, 4rem));
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5.5rem);
}
.pagehead .label { color: var(--mark); }
.pagehead__title {
  margin-top: var(--s-4);
  font-size: var(--t-hero);
  color: #fff;
  max-width: 18ch;
}
.pagehead__lede {
  margin-top: var(--s-6);
  max-width: var(--measure);
  font-size: var(--t-lede);
  line-height: 1.45;
  color: rgba(255,255,255,.9);
}
/* Names the place in the photograph — the picture is proof, so it gets a name. */
.pagehead__where {
  position: absolute; right: var(--gutter); bottom: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); z-index: 2;
  font-size: var(--t-small); letter-spacing: .02em;
  color: rgba(255,255,255,.7); text-align: right; max-width: 15rem; line-height: 1.5;
}
/* Same art direction as the hero below 900px: a 3:2 photograph forced into a
   portrait viewport loses most of its width, so the header becomes type on
   navy with the photograph whole beneath it, in its own frame. */
@media (max-width: 899px) {
  .pagehead { flex-direction: column; min-height: 0; padding-top: 96px; }
  .pagehead__media { position: static; order: 2; width: 100%; }
  .pagehead__media img { aspect-ratio: 3 / 2; height: auto; }
  .pagehead__scrim { display: none; }
  .pagehead__inner { order: 1; padding-top: clamp(2.5rem, 1.5rem + 5vw, 4rem); }
  .pagehead__where {
    position: static; order: 3; max-width: none; text-align: left;
    margin-inline: var(--gutter);
    padding: var(--s-3) 0 var(--s-8);
    color: var(--ink-light-2);
  }
}

/* Entrance — the interior echo of the hero: label, title, lede rise in order,
   and the photograph settles out of a small push-in on its own signal
   (is-shot, fired on image load) so type never waits for the network.
   Scoped to .js-motion so nothing hides without JS or with reduced motion. */
.js-motion .pagehead .label,
.js-motion .pagehead__title,
.js-motion .pagehead__lede,
.js-motion .pagehead__where { opacity: 0; transform: translateY(22px); }
.js-motion .pagehead.is-lit .label,
.js-motion .pagehead.is-lit .pagehead__title,
.js-motion .pagehead.is-lit .pagehead__lede,
.js-motion .pagehead.is-lit .pagehead__where {
  opacity: 1; transform: none;
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
}
.js-motion .pagehead.is-lit .pagehead__title { transition-delay: 140ms; }
.js-motion .pagehead.is-lit .pagehead__lede  { transition-delay: 300ms; }
.js-motion .pagehead.is-lit .pagehead__where { transition-delay: 420ms; }

.js-motion .pagehead__media img { transform: scale(1.07); }
.js-motion .pagehead.is-shot .pagehead__media img { transform: none; transition: transform 2400ms var(--ease); }
.js-motion .pagehead__scrim { opacity: 0; }
.js-motion .pagehead.is-shot .pagehead__scrim { opacity: 1; transition: opacity 1400ms var(--ease); }

/* ==========================================================================
   Form — underline fields on paper. Boxes would turn the page into
   an admin screen; the underline keeps it editorial.
   ========================================================================== */
.form { display: grid; gap: clamp(3rem, 2rem + 3vw, 5rem); max-width: 56rem; }
.form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.form legend {
  font-family: var(--display); font-weight: 600; font-size: var(--t-h3);
  padding: 0; margin-bottom: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
}
.form__grid { display: grid; gap: var(--s-8) var(--s-12); }
@media (min-width: 720px) { .form__grid { grid-template-columns: 1fr 1fr; } }

.field { display: grid; gap: var(--s-2); align-content: start; }
.field label {
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.field input,
.field select {
  font: inherit; font-family: var(--text); color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid rgba(18, 35, 60, 0.38);
  border-radius: 0; padding: var(--s-3) 0;
  transition: border-color var(--dur) var(--ease);
}
.field input::placeholder { color: var(--ink-3); opacity: .7; }
/* The focus mark is the underline itself thickening to the teal ink — a boxed
   outline around an underline-only field reads as a rendering error. */
.field input:focus-visible,
.field select:focus-visible {
  outline: none;
  border-bottom: 2px solid var(--mark-ink);
  margin-bottom: -1px;             /* the thicker line must not move the row */
}
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230E5568' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 2px center;
  padding-right: var(--s-6);
  /* Second declaration wins only where the browser understands the keyword —
     an unrecognised value drops the whole line and leaves 'none' above
     untouched, so this is a pure enhancement, never a regression. */
  appearance: base-select;
}
/* Chrome/Edge 135+: the dropdown list itself renders in this site's own
   material instead of the OS picker. Everywhere else, `appearance:
   base-select` is simply invalid and the browser keeps the native list —
   still fully usable, just not restyled. (Chrome guidance:
   branded-select-styling; limited availability, Chrome/Edge 135+ only.) */
.field select::picker(select) {
  appearance: base-select;
  margin-top: var(--s-2);
  background: var(--bone);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: 0 16px 40px rgba(1, 21, 56, .18);
  padding-block: var(--s-2);
  max-height: min(60vh, 22rem);
  font-family: var(--text);
  font-size: var(--t-small);
}
/* The native picker draws its own arrow once base-select is active — drop
   the hand-drawn background-image arrow so the two don't double up. */
@supports (appearance: base-select) {
  .field select { background-image: none; }
}
.field select::picker-icon { color: var(--mark-ink); }
.field select option {
  padding: var(--s-3) var(--s-6);
  color: var(--ink);
}
.field select option:hover,
.field select option:focus {
  /* 10% read as barely-there once measured on screen — this is a functional
     affordance (which row is about to be picked), not a decorative accent,
     so it earns more presence than the quiet washes used elsewhere. */
  background: color-mix(in srgb, var(--mark-ink) 20%, var(--bone));
}
.field select option:checked { color: var(--mark-ink); font-weight: 600; }
.field select option::checkmark { color: var(--mark-ink); }
/* Validation surfaces only after the user has left the field or tried to
   submit — :user-invalid, not :invalid, so nothing screams on page load.
   (Chrome guidance: validate-input-after-interaction; Baseline since 2023.) */
.field input:user-invalid,
.field select:user-invalid {
  border-bottom: 2px solid #A33B2E;
  margin-bottom: -1px;
}
.field:has(:user-invalid) label { color: #A33B2E; }
.field__msg { font-size: var(--t-label); letter-spacing: .02em; color: #A33B2E; display: none; }
.field:has(:user-invalid) .field__msg { display: block; }
/* A committed valid value darkens the line to full ink — done, without
   introducing a new colour the palette does not have. */
.field input:user-valid,
.field select:user-valid { border-bottom-color: var(--ink); }

.form__foot { display: grid; gap: var(--s-6); justify-items: start; }
.form__note { font-size: var(--t-small); color: var(--ink-2); max-width: 46ch; line-height: 1.6; }
.form__note a { color: var(--mark-ink); }
/* The static preview cannot submit; this line appears when someone tries. */
.form__status { display: none; font-size: var(--t-small); color: var(--mark-ink); max-width: 46ch; line-height: 1.6; }
.form__status[data-show='true'] { display: block; }
.form__status[data-tone='error'] { color: #A33B2E; }

/* ==========================================================================
   Costs — the numbers are the content, so they get the display face.
   ========================================================================== */
.prices {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 3.5rem);
  margin-top: clamp(2.5rem, 1rem + 3vw, 4rem);
}
@media (min-width: 720px) { .prices { grid-template-columns: 1fr 1fr; } }
.price { border-top: 1px solid var(--line-light); padding-top: var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.price__amount {
  font-family: var(--display); font-weight: 500;
  font-variation-settings: 'opsz' 24;
  font-size: clamp(2.5rem, 1.5rem + 3vw, 4rem);
  line-height: 1; color: #fff; letter-spacing: -0.01em;
}
.price__amount small { font-size: .45em; font-weight: 400; color: var(--ink-light-2); letter-spacing: .04em; }
.price__what { color: #fff; font-weight: 500; font-size: var(--t-small); }
.price__note { color: var(--ink-light-2); font-size: var(--t-small); line-height: 1.6; max-width: 40ch; }

/* ==========================================================================
   Requirements — three facts, each hanging from the shared hairline.
   ========================================================================== */
.reqs {
  display: grid; gap: clamp(2rem, 1rem + 3vw, 3rem);
  margin-top: clamp(2.5rem, 1rem + 3vw, 4rem);
}
@media (min-width: 720px) { .reqs { grid-template-columns: repeat(3, 1fr); } }
.req { border-top: 1px solid var(--line); padding-top: var(--s-4); display: grid; gap: var(--s-2); align-content: start; }
.req__fact { font-family: var(--display); font-weight: 500; font-size: var(--t-h3); }
.req__note { color: var(--ink-2); font-size: var(--t-small); line-height: 1.6; }

/* ==========================================================================
   FAQ — native details/summary. No JS to fail, keyboard for free.
   ========================================================================== */
.faq { max-width: 52rem; border-top: 1px solid var(--line); margin-top: clamp(2.5rem, 1rem + 3vw, 4rem); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-8);
  padding-block: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  font-family: var(--display); font-weight: 500;
  font-size: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);
  line-height: 1.25; letter-spacing: -0.01em;
  transition: color var(--dur) var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--mark-ink); }
.faq summary::after {
  content: '+'; flex: none;
  font-family: var(--text); font-weight: 400; font-size: 1.5rem; line-height: 1;
  color: var(--mark-ink);
  transition: transform var(--dur) var(--ease);
}
.faq details[open] summary::after { content: '\2212'; }
.faq .prose { padding-bottom: clamp(1.5rem, 1rem + 1vw, 2rem); }

/* ==========================================================================
   Team — the founder carries the page; the grids carry the roll call.
   ========================================================================== */
.founder { display: grid; gap: clamp(2rem, 1rem + 4vw, 4.5rem); align-items: start; }
@media (min-width: 940px) { .founder { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.founder__shot { overflow: hidden; background: var(--bone-deep); }
.founder__shot img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: center top; }
.founder__name { font-size: var(--t-h2); }
.founder__role {
  margin-top: var(--s-2); font-size: var(--t-label); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mark-ink);
}
.founder__bio { margin-top: var(--s-8); }

/* Group headings sit above their grid with the same statement voice. */
.group { margin-top: clamp(4rem, 2rem + 6vw, 8rem); }
.group:first-child { margin-top: 0; }

/* ==========================================================================
   Confirmation — thank-you pages. A single centred column: there is nothing
   left to sell here, only to confirm and point to the one next action.
   ========================================================================== */
.confirm { max-width: 40rem; margin-inline: auto; text-align: center; }
.confirm__mark {
  width: 56px; height: 56px; margin-inline: auto;
  display: grid; place-items: center;
  border: 1px solid var(--mark); border-radius: 50%;
  color: var(--mark);
}
.confirm__mark svg { width: 24px; height: 24px; }
.confirm .statement { margin-top: var(--s-8); max-width: none; }
.confirm .prose { margin-top: var(--s-6); margin-inline: auto; text-align: left; }
.confirm__actions {
  margin-top: clamp(2rem, 1rem + 2vw, 3rem);
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-4);
}
@media (max-width: 560px) { .confirm__actions .btn { width: 100%; } }

/* ==========================================================================
   Legal — long-form prose. Narrower measure, no display type: nothing here
   is meant to be skimmed for hierarchy, only read in order.
   ========================================================================== */
.legal { max-width: var(--measure); }
.legal h2 {
  font-size: var(--t-h3);
  margin-top: clamp(2.5rem, 1.5rem + 2vw, 3.5rem);
}
.legal h2:first-child { margin-top: 0; }
.legal p { color: var(--ink-2); line-height: 1.75; margin-top: var(--s-4); }
.legal p:first-of-type { margin-top: 0; }
.legal ul { margin-top: var(--s-4); display: grid; gap: var(--s-2); padding-left: 1.25em; }
.legal li { color: var(--ink-2); line-height: 1.7; list-style: disc; }
.legal strong { color: var(--ink); font-weight: 600; }

/* ==========================================================================
   Profile dialog — a card opens into the room. The overlay button is added
   by team.js: without JS there is no button and no dead affordance.
   ========================================================================== */
.crew__member { position: relative; }
.crew__open {
  position: absolute; inset: 0; z-index: 1;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.crew__open:focus-visible { outline: 2px solid var(--mark-ink); outline-offset: 4px; }
/* The affordance: a small paper chip on the photograph. Always present, so
   touch users know the cards open; it inverts on hover and focus. */
.crew__open::after {
  content: '+';
  position: absolute; right: var(--s-2); top: var(--s-2);
  width: 28px; height: 28px; display: grid; place-items: center;
  background: color-mix(in srgb, var(--bone) 88%, transparent);
  color: var(--navy);
  font-family: var(--text); font-size: 1.125rem; line-height: 1;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.crew__member:hover .crew__open::after,
.crew__open:focus-visible::after { background: var(--navy); color: #fff; }

.profile {
  border: 0; padding: 0; margin: auto;
  background: var(--bone); color: var(--ink);
  width: min(880px, calc(100vw - 2rem));
  max-height: min(85svh, 700px);
  overflow: hidden;
}
.profile::backdrop { background: rgba(1, 16, 36, .64); backdrop-filter: blur(3px); }
@media (prefers-reduced-motion: no-preference) {
  .profile[open] { animation: profile-in 320ms var(--ease); }
  @keyframes profile-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: none; }
  }
}
.profile__grid { display: grid; max-height: inherit; }
.profile__shot { background: var(--bone-deep); }
.profile__shot img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.profile__text {
  padding: clamp(1.5rem, 1rem + 3vw, 3rem);
  overflow-y: auto; min-width: 0;
}
@media (min-width: 760px) {
  .profile__grid { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
  .profile__text { max-height: min(85svh, 700px); }
}
@media (max-width: 759px) {
  .profile__shot { height: 40svh; }
  .profile__text { max-height: calc(min(85svh, 700px) - 40svh); }
}
.profile__name { font-size: var(--t-h3); padding-right: var(--s-12); }
.profile__role {
  margin-top: var(--s-2);
  font-size: var(--t-label); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mark-ink);
}
.profile__bio { margin-top: var(--s-6); }
.profile__close {
  position: absolute; top: 0; right: 0; z-index: 2;
  width: 48px; height: 48px; display: grid; place-items: center;
  background: var(--navy); color: #fff; border: 0; cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.profile__close:hover { background: var(--navy-deep); }
.profile__close svg { width: 16px; height: 16px; }