/* ============================================================
   ThreeDoors — experience.css
   /experience page-specific sections only. Loads after the design
   system (tokens.css + components.css) and the shared site layout
   /chrome (site.css). Tokens only — no new colours, type, or
   spacing values. Mirrors the homepage section patterns (claws,
   step row, case-file tile) since home.css is not loaded here.
   ============================================================ */

/* ------------------------------------------------------------
   Establishing still — wide cinematic frame under the intro.
   ------------------------------------------------------------ */
.exp-establish { aspect-ratio: 21 / 9; }
@media (max-width: 640px) { .exp-establish { aspect-ratio: 4 / 3; } }

/* ------------------------------------------------------------
   The format — three cat-claws-prefixed columns
   ------------------------------------------------------------ */
.exp-claws { display: grid; gap: var(--space-5); }
@media (min-width: 760px) { .exp-claws { grid-template-columns: repeat(3, 1fr); gap: var(--space-4); } }
.exp-claw { display: grid; gap: var(--space-2); align-content: start; }
.exp-claw__mark { color: var(--color-accent); margin-bottom: var(--space-1); }
.exp-claw h3 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.exp-claw p { color: var(--color-text-body); }

/* ------------------------------------------------------------
   How an evening runs — 01 → 04 steps
   ------------------------------------------------------------ */
.exp-steps { display: grid; gap: var(--space-4); }
@media (min-width: 680px) { .exp-steps { grid-template-columns: repeat(2, 1fr); gap: var(--space-5) var(--space-6); } }
@media (min-width: 1040px) { .exp-steps { grid-template-columns: repeat(4, 1fr); } }
.exp-step { display: grid; gap: var(--space-2); align-content: start; padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.exp-step__num {
  font-family: var(--font-serif); font-optical-sizing: auto;
  font-weight: var(--w-regular); font-size: var(--t-h2); line-height: 1;
  color: var(--color-accent); letter-spacing: var(--ls-h2);
}
.exp-step h3 { font-size: var(--t-h4); line-height: var(--lh-h4); letter-spacing: var(--ls-h4); }
.exp-step p { color: var(--color-text-body); font-size: var(--t-body); }

/* ------------------------------------------------------------
   The three doors — image + copy split
   ------------------------------------------------------------ */
.exp-split { display: grid; gap: var(--space-5); align-items: center; }
@media (min-width: 880px) { .exp-split { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-6); } }
.exp-split__media { aspect-ratio: 4 / 3; }
.exp-split__copy { display: grid; gap: var(--space-3); max-width: 560px; }
.exp-split__copy .eyebrow { justify-self: start; }
.exp-split__copy p { color: var(--color-text-body); }

/* ------------------------------------------------------------
   The Directorate — case-file tile (mirrors homepage .running)
   ------------------------------------------------------------ */
.exp-case {
  display: grid; gap: 0; overflow: hidden;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  background: var(--color-surface);
}
@media (min-width: 820px) { .exp-case { grid-template-columns: 0.9fr 1.1fr; } }
.exp-case__media { position: relative; min-height: 280px; background: var(--color-bg); }
.exp-case__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.exp-case__body { padding: var(--space-5); display: grid; gap: var(--space-3); align-content: center; }
.exp-case__body .artefact--stamp { justify-self: start; }
.exp-case__title { font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.exp-case__body p:not([class]) { color: var(--color-text-body); }
.exp-case__peer { color: var(--color-text-muted); font-size: var(--t-caption); }

/* ------------------------------------------------------------
   Designation — band head: copy + still
   ------------------------------------------------------------ */
.exp-deg-head { display: grid; gap: var(--space-5); align-items: end; margin-bottom: var(--space-5); }
@media (min-width: 880px) { .exp-deg-head { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-6); } }
.exp-deg-head__still { aspect-ratio: 4 / 3; }

/* Designation — dossier card + supporting copy */
/* Designation — example card: real card photo + the text repeated
   legibly beside it (atmospheric artefact, readable content). */
.exp-deg-card { display: grid; gap: var(--space-5); align-items: center; margin-top: var(--space-6); }
@media (min-width: 880px) { .exp-deg-card { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-6); } }
.exp-deg-card__media { aspect-ratio: 4 / 3; }
.exp-deg-card__copy { display: grid; gap: var(--space-2); align-content: center; max-width: 520px; }
.exp-deg-card__copy .eyebrow { justify-self: start; }
.exp-deg-card__name {
  font-family: var(--font-serif); font-optical-sizing: auto; font-weight: var(--w-semibold);
  font-size: var(--t-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2);
  color: var(--color-text); margin-top: var(--space-1);
}
.exp-deg-card__tag {
  font-family: var(--font-serif); font-optical-sizing: auto; font-style: italic;
  font-size: var(--t-h4); line-height: var(--lh-h4); color: var(--color-critical-fg);
}
.exp-deg-card__copy p:not([class]) { color: var(--color-text-body); }

/* Designation — roster: supporting copy + the fan-of-five photo. */
.exp-deg-roster { display: grid; gap: var(--space-5); align-items: center; margin-top: var(--space-6); }
@media (min-width: 880px) { .exp-deg-roster { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-6); } }
.exp-deg-roster__copy { display: grid; gap: var(--space-3); align-content: center; max-width: 560px; }
.exp-deg-roster__copy h3 { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.exp-deg-roster__copy p:not([class]) { color: var(--color-text-body); }
.exp-deg-roster__copy em { font-style: italic; color: var(--color-text); }
.exp-deg-roster__media { aspect-ratio: 4 / 3; }

/* Roster chips — a selection of designations */
.exp-roster {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: var(--space-1);
}
.exp-roster li {
  font-family: var(--font-serif); font-optical-sizing: auto; font-style: italic;
  font-size: var(--t-caption); color: var(--color-text);
  padding: 4px 12px;
  border: 1px solid var(--color-border-strong); border-radius: 999px;
  white-space: nowrap;
}
.exp-roster__note { font-size: var(--t-caption); color: var(--color-text-soft); letter-spacing: var(--ls-caption); }

/* ------------------------------------------------------------
   Share row + FRINGE distinction
   ------------------------------------------------------------ */
.exp-share {
  display: grid; gap: var(--space-5); align-items: center;
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-border);
}
@media (min-width: 880px) { .exp-share { grid-template-columns: 1.05fr 0.95fr; gap: var(--space-6); } }
.exp-share__copy { display: grid; gap: var(--space-3); max-width: 560px; }
.exp-share__copy h3 { font-size: var(--t-h3); line-height: var(--lh-h3); letter-spacing: var(--ls-h3); }
.exp-share__copy p:not([class]) { color: var(--color-text-body); }
.exp-share__copy em { font-style: italic; color: var(--color-text); }
.exp-share__fringe { color: var(--color-text-muted); font-size: var(--t-caption); }
.exp-share__fringe a { color: var(--color-accent); text-decoration-color: var(--color-accent); }
.exp-share__media { aspect-ratio: 4 / 3; }

/* ------------------------------------------------------------
   CTA — waitlist (mirrors homepage .waitlist)
   ------------------------------------------------------------ */
.exp-cta {
  border: 1px solid var(--color-border-strong); border-radius: var(--radius);
  padding: var(--space-7) var(--space-5);
  display: grid; gap: var(--space-4); justify-items: center; text-align: center;
  background: var(--color-surface);
}
.exp-cta__head { display: grid; gap: var(--space-3); justify-items: center; max-width: 640px; }
.exp-cta__head .eyebrow { white-space: nowrap; }
.exp-cta__title { font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
.exp-cta__ctas { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: center; }
.exp-cta__note { font-size: var(--t-caption); color: var(--color-text-soft); letter-spacing: var(--ls-caption); }

/* Mobile — tighten the CTA gutters and let the long WhatsApp label
   wrap (the shared .btn is white-space:nowrap, which would otherwise
   overflow a 375px viewport). Stacked, full-width buttons. */
@media (max-width: 640px) {
  .exp-cta { padding: var(--space-6) var(--space-3); }
  .exp-cta__ctas { flex-direction: column; justify-self: stretch; width: 100%; }
  .exp-cta__ctas .btn { width: 100%; white-space: normal; }
}