/* ============================================================
   preservation.studio — Bold Red / editorial luxury
   Design language integrated from the "Bold Red" luxury
   course-creator template: cream paper, bold red accents,
   deep maroon blocks, uppercase display serif, pill CTAs.
   Token NAMES kept stable (vibe tuner / ?vibe=1 depends on
   them); values re-anchored to the new palette.
   ============================================================ */

:root {
  /* Palette — Bold Red editorial (template-anchored warm creams + reds) */
  --paper: #f5f1ea; /* Cream — measured off Asher's newest mockups (brief: Papyrus #F5EDD6) */
  --paper-deep: #eae3d4; /* deeper cream band */
  --card: #ffffff; /* mockup cards are white stock */
  --ink: #24140c; /* Licorice — brief */
  --ink-soft: #5f5a41; /* Olive Night — brief */
  --ink-faint: #8c8273;
  --rule: #d5d5bc; /* Pearl — brief */
  --rule-strong: #b3a189; /* Cinnamon — brief */
  --butter: #ffde8a; /* Honey — brief accent */
  --on-butter: #24140c; /* dark text sits on the light accents */
  --butter-soft: #fbeecb; /* soft Honey band */
  --blue: #9ebec6; /* Light Blue — brief; the CTA colour in the mockups */
  --blue-soft: #dce7ea;
  --plum: #3d2d2e; /* Chocolate Plum — brief; block sections, footer */
  --on-plum: #f5f1ea; /* cream text on plum */
  --error: #a6402e;

  /* Typography — Asher's trio: Paloma (titles) / Promenade (subheads) /
     Makking (paragraph). Free stand-ins are self-hosted; the paid originals
     drop in by swapping the woff2 + the family name in one place. */
  --script:
    "Permanent Marker", "Kaushan Script", cursive; /* Paloma — hand-painted titles */
  --display:
    "Libre Bodoni", "Playfair Display", Georgia, serif; /* Promenade — calligraphic serif */
  --serif:
    "Switzer", "Inter", "Helvetica Neue", Arial, sans-serif; /* Makking — grotesk paragraphs */
  --mono: "IBM Plex Mono", "Courier New", ui-monospace, monospace;
  --hand: "Kalam", "Caveat", cursive;

  /* Fraunces variable axes (tunable via ?vibe=1) */
  --fx-opsz: 110; /* 9–144 optical size for headlines */
  --fx-wght: 560; /* 100–900 display weight */
  --fx-soft: 60; /* 0–100 SOFT */
  --fx-wonk: 0.6; /* 0–1 WONK */

  /* Handwritten annotation (note-taking layer) */
  --hand-size: 1.15rem;
  --hand-rotate: -1.6deg;

  /* Live tracking dial (?vibe=1) — added to every non-zero
     letter-spacing via calc(), so the tuner can widen/tighten the whole
     page proportionally. 0em ships the untouched look. */
  --ls-tune: 0em;

  --measure: 62ch;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: min(1120px, 92vw);
  margin-inline: auto;
}

::selection {
  background: var(--butter);
  color: var(--on-butter);
}

/* ---------- Typography ---------- */

h1,
h2,
h3 {
  font-family: var(--display);
  font-weight: var(--fx-wght);
  line-height: 1.12;
  letter-spacing: calc(-0.01em + var(--ls-tune, 0em));
  font-variation-settings:
    "opsz" var(--fx-opsz),
    "SOFT" var(--fx-soft),
    "WONK" var(--fx-wonk);
}

h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
}
h2 {
  font-size: clamp(1.6rem, 3.4vw, 2.3rem);
  margin-bottom: 1.1rem;
}
h3 {
  font-size: 1.3rem;
  margin-bottom: 0.6rem;
}

p + p {
  margin-top: 0.9em;
}

a {
  color: var(--ink);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
a:hover {
  color: #000;
}

.lede {
  font-size: 1.22rem;
  line-height: 1.55;
  color: var(--ink);
}
.muted {
  color: var(--ink-soft);
}

.mono-label {
  font-family: var(--mono);
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: calc(0.18em + var(--ls-tune, 0em));
  color: var(--ink-soft);
}

/* Stamped section number, archive-style */
.section-num {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: calc(0.14em + var(--ls-tune, 0em));
  color: var(--ink-soft);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 0.15rem 0.55rem;
  margin-bottom: 1.2rem;
}

/* ---------- Header ---------- */

.site-header {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 0.9rem;
  flex-wrap: wrap;
}

.wordmark {
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 600;
  letter-spacing: calc(-0.02em + var(--ls-tune, 0em));
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  font-variation-settings:
    "opsz" 30,
    "SOFT" var(--fx-soft),
    "WONK" var(--fx-wonk);
}
.wordmark .wordmark-dot {
  color: var(--butter);
}

/* ---------- Sections ---------- */

.section {
  padding-block: 4.5rem;
}
.section-tight {
  padding-block: 2.5rem;
}
.section-alt {
  background: var(--paper-deep);
}
.section-rule {
  border-top: 1px solid var(--rule);
}

.hero {
  padding-block: 5.5rem 4rem;
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1.6rem;
}
.hero-eyebrow .rule-tick {
  flex: 0 0 3rem;
  height: 1px;
  background: var(--rule-strong);
}

.hero h1 {
  margin-bottom: 1.4rem;
  max-width: 18ch;
}
.hero .lede {
  max-width: var(--measure);
}

.hero-meta {
  margin-top: 2.2rem;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  font-family: var(--mono);
  font-size: 0.78rem;
  letter-spacing: calc(0.1em + var(--ls-tune, 0em));
  text-transform: uppercase;
  color: var(--ink-soft);
}
.hero-meta span b {
  color: var(--ink);
  font-weight: 700;
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: calc(0.12em + var(--ls-tune, 0em));
  text-decoration: none;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--ink);
  border-radius: 2px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}
.btn:hover {
  background: var(--ink);
  color: var(--paper);
}

.btn-yellow {
  background: var(--butter);
  border-color: var(--butter);
  color: var(--ink);
}
.btn-yellow:hover {
  background: var(--ink);
  color: var(--butter);
  border-color: var(--ink);
}

.btn-blue {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--ink);
}
.btn-blue:hover {
  background: var(--ink);
  color: var(--blue);
  border-color: var(--ink);
}

.btn-row {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  margin-top: 1.6rem;
}

/* ---------- Intro copy ---------- */

.intro-copy {
  max-width: var(--measure);
}
.intro-copy .lede + p {
  margin-top: 1.1rem;
}

/* ---------- Offering cards (index-card style) ---------- */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.6rem;
  margin-top: 2.4rem;
}

.card {
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  box-shadow: 3px 3px 0 rgba(42, 37, 29, 0.06);
  padding: 2rem 1.9rem 2.2rem;
  display: flex;
  flex-direction: column;
  position: relative;
}
.card::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 1.6rem;
  width: 4.2rem;
  height: 6px;
  background: var(--butter);
}
.card.card-blue::before {
  background: var(--blue);
}

.card h3 {
  font-size: 1.45rem;
  margin-bottom: 0.3rem;
}
.card .card-stats {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: calc(0.08em + var(--ls-tune, 0em));
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 1rem;
}
.card p {
  flex: 1;
}
.card .btn-row {
  margin-top: 1.4rem;
}

/* ---------- Breadcrumb (nested pages) ---------- */

.breadcrumb {
  margin-bottom: 2.4rem;
}
.breadcrumb a {
  font-family: var(--mono);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: calc(0.12em + var(--ls-tune, 0em));
  color: var(--ink-soft);
  text-decoration: none;
}
.breadcrumb a:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Apply CTA band ---------- */

.apply-band {
  margin-top: 0.4rem;
  background: var(--butter-soft);
  border: 1px solid var(--butter);
  border-radius: 4px;
  padding: 2rem 2.2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
}
.apply-band h2 {
  margin-bottom: 0.5rem;
}

/* ---------- Sponsor seat band ---------- */

.sponsor-band {
  margin-top: 3rem;
  background: var(--blue-soft);
  border: 1px solid var(--blue);
  border-radius: 4px;
  padding: 2rem 2.2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.6rem;
  align-items: center;
}
.sponsor-band h3 {
  margin-bottom: 0.5rem;
}
.sponsor-band p {
  max-width: 56ch;
}

/* ---------- Forms ---------- */

.form-card {
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-radius: 4px;
  box-shadow: 3px 3px 0 rgba(42, 37, 29, 0.06);
  padding: 2.4rem 2.2rem;
  margin-top: 2.2rem;
  max-width: 46rem;
}

.form-section {
  border-top: 1px solid var(--rule);
  padding-top: 1.8rem;
  margin-top: 2rem;
}
.form-section:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}
.form-section h3 {
  font-family: var(--mono);
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: calc(0.16em + var(--ls-tune, 0em));
  color: var(--ink);
  margin-bottom: 1.3rem;
}

.field {
  margin-bottom: 1.35rem;
}

/* two answer boxes on one line (intensive application name row) */
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1.2rem;
}

@media (max-width: 560px) {
  .field-row {
    grid-template-columns: 1fr;
  }
}
.field label {
  display: block;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: calc(0.06em + var(--ls-tune, 0em));
  margin-bottom: 0.45rem;
  color: var(--ink);
}
.field .req {
  color: var(--error);
  font-style: normal;
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field textarea,
.field select {
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  color: var(--ink);
  background: #fffdf6;
  border: 1px solid var(--rule-strong);
  /* answer boxes — rounded to sit with the pill vocabulary */
  border-radius: 0.9rem;
  padding: 0.6rem 0.75rem;
}
.field textarea {
  resize: vertical;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: 2px solid var(--butter);
  outline-offset: 1px;
  border-color: var(--ink);
}

/* Radio lists (Django default ul rendering) */
.field ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 0.3rem 0;
}
.field ul li label {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: var(--serif);
  font-size: 1rem;
  font-weight: 400;
  letter-spacing: 0;
  margin-bottom: 0;
  cursor: pointer;
}
.field ul li input {
  accent-color: var(--butter);
  transform: translateY(1px);
}

.help {
  font-size: 0.86rem;
  color: var(--ink-soft);
  margin-top: 0.35rem;
  font-style: italic;
}
.error {
  font-size: 0.86rem;
  color: var(--error);
  margin-top: 0.35rem;
}
.field-error input,
.field-error textarea,
.field-error select {
  border-color: var(--error);
}
.form-errors {
  background: #f7e4de;
  border: 1px solid var(--error);
  border-radius: 3px;
  color: var(--error);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.4rem;
  font-size: 0.95rem;
}

/* Checkbox fields */
.check-field {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  cursor: pointer;
  margin-bottom: 0.8rem;
}
.check-field input {
  accent-color: var(--butter);
  margin-top: 0.3rem;
}
.check-field span {
  font-family: var(--serif);
  font-size: 1rem;
}
.check-field .req {
  color: var(--error);
  font-style: normal;
}

/* Honeypot — hidden via CSS class so it survives strict CSP */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

/* ---------- Waitlist strip ---------- */

.waitlist-strip {
  background: var(--butter-soft);
  border: 1px solid var(--butter);
  border-radius: 4px;
  padding: 2.2rem 2.2rem 2.4rem;
  margin-top: 3rem;
}
.waitlist-strip .inline-form {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.3rem;
  flex-wrap: wrap;
  max-width: 34rem;
}
.waitlist-strip .inline-form .field {
  margin-bottom: 0;
  flex: 1 1 16rem;
}
.waitlist-strip .inline-form input[type="email"] {
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  padding: 0.7rem 0.8rem;
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  background: #fffdf6;
}

/* ---------- Session list (intensive) ---------- */

.session-list {
  list-style: none;
  margin: 1.4rem 0;
  border-top: 1px solid var(--rule);
}
.session-list li {
  display: flex;
  gap: 1.2rem;
  align-items: baseline;
  padding: 0.8rem 0.2rem;
  border-bottom: 1px solid var(--rule);
}
.session-list .wk {
  font-family: var(--mono);
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: calc(0.1em + var(--ls-tune, 0em));
  text-transform: uppercase;
  color: var(--ink-soft);
  flex: 0 0 4.6rem;
}

.takeaway-list {
  margin: 1rem 0 1.4rem;
  padding-left: 1.2rem;
}
.takeaway-list li {
  margin-bottom: 0.5rem;
}

/* ---------- About ---------- */

.about-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(240px, 1fr);
  gap: 3rem;
  align-items: start;
}

.portrait-frame {
  border: 1px solid var(--rule-strong);
  background: var(--card);
  padding: 1rem 1rem 2.4rem;
  box-shadow: 3px 3px 0 rgba(42, 37, 29, 0.06);
  text-align: center;
}
.portrait-frame .frame-inner {
  aspect-ratio: 4 / 5;
  border: 1px solid var(--rule);
  background:
    linear-gradient(135deg, var(--paper-deep) 0%, var(--paper) 60%),
    repeating-linear-gradient(
      0deg,
      transparent 0 22px,
      rgba(42, 37, 29, 0.05) 22px 23px
    );
  display: grid;
  place-items: center;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: calc(0.18em + var(--ls-tune, 0em));
  text-transform: uppercase;
}
.portrait-frame figcaption {
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: calc(0.1em + var(--ls-tune, 0em));
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* ---------- FAQ ---------- */

.faq {
  max-width: var(--measure);
}
.faq details {
  border-bottom: 1px solid var(--rule);
  padding-block: 0.2rem;
}
.faq summary {
  cursor: pointer;
  font-size: 1.08rem;
  font-weight: 600;
  padding-block: 1rem;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "+";
  font-family: var(--mono);
  color: var(--ink-soft);
}
.faq details[open] summary::after {
  content: "–";
}
.faq details[open] summary {
  color: #000;
}
.faq .faq-body {
  padding: 0 0 1.4rem;
  color: var(--ink-soft);
}
.faq .faq-body p + p {
  margin-top: 0.7em;
}

/* ---------- Contact ---------- */

.contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 1.1fr);
  gap: 3rem;
  align-items: start;
}
.contact-methods {
  list-style: none;
  margin-top: 1.6rem;
}
.contact-methods li {
  padding-block: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.contact-methods .mono-label {
  display: block;
  margin-bottom: 0.2rem;
}
.contact-methods a {
  font-size: 1.15rem;
}

/* ---------- Footer ---------- */

.site-footer {
  border-top: 1px solid var(--plum);
  margin-top: 4rem;
  padding-block: 2.6rem;
  background: var(--plum);
  color: var(--on-plum);
}
.footer-inner {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}
.stamp {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: calc(0.16em + var(--ls-tune, 0em));
  border: 1.5px solid var(--butter);
  color: var(--butter);
  border-radius: 4px;
  padding: 0.3rem 0.8rem;
  transform: rotate(-1.2deg);
  margin-bottom: 0.9rem;
}
/* The footer stamp sits on maroon: red-on-maroon is invisible (1.26:1) */
.site-footer .stamp {
  border-color: var(--on-plum);
  color: var(--on-plum);
}
.footer-line {
  display: block;
  color: var(--on-plum);
  font-size: 0.95rem;
}
.footer-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.82rem;
  text-align: right;
}
.footer-links a {
  color: var(--on-plum);
  text-decoration: none;
}
.footer-links a:hover {
  color: var(--card);
  text-decoration: underline;
}

/* ---------- Thanks page ---------- */

.thanks-block {
  max-width: 40rem;
  margin: 6rem auto;
  text-align: center;
  border: 1px solid var(--rule-strong);
  background: var(--card);
  border-radius: 4px;
  padding: 3.4rem 2.6rem;
  box-shadow: 3px 3px 0 rgba(42, 37, 29, 0.06);
}
.thanks-block .stamp {
  transform: none;
  border-color: var(--butter);
  color: var(--ink);
  margin-bottom: 1.4rem;
}

/* ---------- Error pages ---------- */

.error-page {
  min-height: 58vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 4rem 1rem;
}
.error-page h1 {
  font-size: clamp(5rem, 16vw, 9rem);
  line-height: 1;
  color: var(--ink);
}
.error-page .btn-row {
  justify-content: center;
}

/* ---------- Small screens ---------- */

@media (max-width: 760px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .hero {
    padding-block: 3.5rem 2.8rem;
  }
  .section {
    padding-block: 3rem;
  }
  .sponsor-band {
    grid-template-columns: 1fr;
    padding: 1.6rem;
  }
  .about-grid,
  .contact-grid {
    grid-template-columns: 1fr;
  }
  .form-card {
    padding: 1.6rem 1.3rem;
  }
  .footer-links {
    text-align: left;
  }
}

/* ---------- Handwritten annotation (note-taking layer) ---------- */

.annotation {
  font-family: var(--hand);
  font-size: var(--hand-size);
  font-weight: 400;
  line-height: 1.3;
  color: var(--on-butter);
  background: var(--butter);
  display: inline-block;
  padding: 0.05em 0.55em 0.15em;
  border-radius: 3px;
  transform: rotate(var(--hand-rotate));
  box-shadow: 2px 2px 0 rgba(36, 20, 12, 0.1);
}
.hero .annotation {
  margin-top: 1.7rem;
  margin-left: 2rem;
}
.annotation-mark {
  font-weight: 700;
}

/* ============================================================
   BOLD RED editorial layer — template-style components
   (uppercase display, pill buttons, split hero, specimen
   card, value band, maroon "MEET" band, polaroid collage)
   ============================================================ */

/* Uppercase display headlines ("BUILD THE LIFE" style) */
.display-upper {
  text-transform: uppercase;
  letter-spacing: calc(0.015em + var(--ls-tune, 0em));
}

/* ---------- Pill buttons ---------- */

.btn {
  border-radius: 999px;
  padding: 0.9rem 1.9rem;
}
.btn-yellow {
  background: var(--butter);
  border-color: var(--butter);
  color: var(--on-butter);
}
.btn-yellow:hover {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--on-plum);
}
.btn-blue {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--on-butter);
}
.btn-blue:hover {
  background: var(--plum);
  border-color: var(--plum);
  color: var(--on-plum);
}
/* Cream pill for use on maroon blocks */
.btn-cream {
  background: var(--on-plum);
  border-color: var(--on-plum);
  color: var(--plum);
}
.btn-cream:hover {
  background: #fffdf6;
  border-color: #fffdf6;
  color: var(--plum);
}

/* ---------- Header: bold red top rule, red current-page ---------- */

.site-header {
  border-top: 4px solid var(--plum);
}
/* ---------- Hero: split editorial layout ---------- */

.hero {
  padding-block: 4.5rem 3.5rem;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 3.5rem;
  align-items: center;
}
.hero-copy h1 {
  margin-bottom: 1.3rem;
  font-weight: 620;
}
.hero-copy .lede {
  max-width: 46ch;
}

/* Specimen card — the "framed piece" standing in for photography */
.hero-figure {
  position: relative;
  display: grid;
  place-items: center;
  padding: 1.2rem;
}
.specimen {
  position: relative;
  z-index: 2;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  padding: 0.8rem 0.8rem 1rem;
  box-shadow: 8px 10px 0 rgba(36, 25, 21, 0.12);
  transform: rotate(1.2deg);
  max-width: 26rem;
  width: 100%;
}
.specimen-frame {
  border: 10px solid var(--plum);
  background: var(--paper);
}
.specimen-art {
  aspect-ratio: 4 / 5;
  background:
    linear-gradient(160deg, #c96a52 0%, var(--plum) 55%, #5a2020 100%),
    repeating-linear-gradient(
      0deg,
      transparent 0 20px,
      rgba(255, 255, 255, 0.06) 20px 21px
    );
  position: relative;
  display: grid;
  place-items: center;
}
.specimen-art::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(245, 238, 225, 0.35);
}
.specimen-stamp {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: calc(0.22em + var(--ls-tune, 0em));
  text-transform: uppercase;
  color: rgba(245, 238, 225, 0.9);
  transform: rotate(-90deg);
}
.specimen-caption {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: calc(0.08em + var(--ls-tune, 0em));
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding: 0.7rem 0.4rem 0.2rem;
}
.specimen-note {
  position: absolute;
  right: -1.4rem;
  bottom: -1.1rem;
  font-family: var(--hand);
  font-size: 1.05rem;
  background: var(--butter);
  color: var(--on-butter);
  padding: 0.1em 0.7em 0.2em;
  border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow: 2px 2px 0 rgba(36, 25, 21, 0.15);
}
.polaroid-ghost {
  position: absolute;
  font-family: var(--hand);
  font-size: 1.4rem;
  background: var(--card);
  border: 1px solid var(--rule-strong);
  padding: 0.15em 0.7em;
  box-shadow: 3px 3px 0 rgba(36, 25, 21, 0.1);
  z-index: 1;
}
.polaroid-ghost-a {
  top: 0.2rem;
  left: -0.2rem;
  transform: rotate(-6deg);
  color: var(--butter);
}
.polaroid-ghost-b {
  bottom: 0.4rem;
  right: -0.4rem;
  transform: rotate(5deg);
  color: var(--ink);
}

/* ---------- Value band (two-column editorial) ---------- */

.value-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2.6rem;
  margin-top: 2.4rem;
  max-width: 58rem;
}
.value-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.2rem;
  align-items: start;
}
.value-illu {
  width: 3.4rem;
  height: 3.4rem;
  color: var(--ink-soft);
}
.value-illu .illu-accent {
  color: var(--butter);
}
.value-item h3 {
  font-size: 1.35rem;
  margin-bottom: 0.35rem;
}
.value-item p {
  color: var(--ink-soft);
}

/* ---------- Maroon band (template's "MEET" section) ---------- */

.section-maroon {
  background: var(--plum);
  color: var(--on-plum);
  border-top: 1px solid rgba(245, 238, 225, 0.2);
  border-bottom: 1px solid rgba(245, 238, 225, 0.2);
}
.section-maroon .lede {
  color: var(--on-plum);
}
.section-maroon .mono-label,
.section-maroon .muted {
  color: rgba(245, 238, 225, 0.75);
}
.section-maroon .section-num {
  color: rgba(245, 238, 225, 0.8);
  border-color: rgba(245, 238, 225, 0.45);
}
.section-maroon a:not(.btn) {
  color: var(--on-plum);
}
.meet-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  margin-top: 2rem;
}
.meet-copy .lede {
  font-size: 1.18rem;
}
.meet-signature {
  font-family: var(--hand);
  font-size: 1.6rem;
  color: var(--on-plum);
  display: inline-block;
  margin-top: 1rem;
  transform: rotate(-1.5deg);
}

/* ---------- Polaroid collage ---------- */

.polaroids {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  align-items: center;
}
.polaroid {
  background: var(--card);
  border: 1px solid var(--rule-strong);
  padding: 0.55rem 0.55rem 0.8rem;
  box-shadow: 4px 5px 0 rgba(20, 12, 8, 0.25);
}
.polaroid:nth-child(1) {
  transform: rotate(-4deg) translateY(0.4rem);
}
.polaroid:nth-child(2) {
  transform: rotate(1.5deg) translateY(-0.5rem);
}
.polaroid:nth-child(3) {
  transform: rotate(4deg) translateY(0.3rem);
}
.polaroid .polaroid-art {
  aspect-ratio: 1;
  border: 1px solid var(--rule);
  background: var(--paper);
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: calc(0.2em + var(--ls-tune, 0em));
  text-transform: uppercase;
  color: var(--ink);
}
.polaroid:nth-child(1) .polaroid-art {
  background: linear-gradient(135deg, #d9a48e, #b5675a);
}
.polaroid:nth-child(2) .polaroid-art {
  background: linear-gradient(135deg, #cdd9c9, #93a893);
}
.polaroid:nth-child(3) .polaroid-art {
  background: linear-gradient(135deg, #e3c9a8, #c9a37c);
}
.polaroid figcaption {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: calc(0.06em + var(--ls-tune, 0em));
  text-transform: uppercase;
  color: var(--ink-soft);
  text-align: center;
  padding-top: 0.55rem;
}

/* ---------- "Is this for you?" grid ----------
   Recreated from Asher's Canva mockup (Intensive page): a grid of
   bold lead-ins, each with the visitor's own words underneath. */

.for-you {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: 1.3rem;
  margin-top: 1.8rem;
}
.for-you-item {
  background: var(--card);
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--butter);
  /* organic blob corners — uneven radii so the cards read hand-set */
  border-radius: 1.6rem 2.4rem 2rem 2.8rem / 2.4rem 1.8rem 2.6rem 2rem;
  padding: 1.4rem 1.5rem 1.6rem;
}
.for-you-item h3 {
  font-size: 1.14rem;
  line-height: 1.28;
  margin-bottom: 0.65rem;
  color: var(--ink);
}
.for-you-item p {
  font-size: 0.97rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
.for-you-item p + p {
  margin-top: 0.55rem;
}

/* ---------- Bold Red responsive ---------- */

@media (max-width: 860px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 2.6rem;
  }
  .meet-grid {
    grid-template-columns: 1fr;
  }
  .polaroids {
    gap: 0.7rem;
  }
  .specimen-note {
    right: 0.2rem;
  }
  .polaroid-ghost-b {
    right: 0.2rem;
  }
  .for-you {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   ARCHIVE LAYER — Asher's newest mockups + the Site Info brief
   ============================================================

   Direction (merged from three sources):
     · the newest mockups (Home, Intensive, Weekend)
     · the Site Info brief: "minimal / archive research library vibes",
       "Magazine meets Institution meets Note taking", warm neutral
       with a pop of Butter Yellow / Light Blue
     · Asher's font picks: Paloma titles, Promenade subheads,
       Makking paragraphs (free stand-ins, self-hosted)

   Devices: hand-painted script headings, white catalogue cards on
   cream, index cards, pinned notices, a stamped seal.

   NOTE ON IMAGERY — the mockups lead with documentary photography,
   but no full-resolution originals exist yet. Every image slot below
   is a deliberate CSS stand-in (archival field + grain), never a
   third-party photo: the inspiration images in the brief are
   Pinterest finds and are not ours to publish. Drop real photos into
   `.photo` as a background-image when Asher sends them.
   ============================================================ */

/* ---------- Hand-painted headings (Paloma stand-in) ---------- */

.script-head {
  font-family: var(--script);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: calc(-0.005em + var(--ls-tune, 0em));
  color: var(--ink);
}

/* ---------- Hero: full-bleed archival field ---------- */

.hero-archive {
  position: relative;
  padding-block: 6.5rem 5rem;
  border-bottom: 0;
  background-color: var(--plum);
  background-image:
    radial-gradient(
      120% 90% at 22% 12%,
      rgba(255, 222, 138, 0.16),
      transparent 62%
    ),
    radial-gradient(
      90% 80% at 84% 88%,
      rgba(158, 190, 198, 0.18),
      transparent 60%
    ),
    repeating-linear-gradient(
      0deg,
      transparent 0 3px,
      rgba(255, 255, 255, 0.022) 3px 4px
    );
  color: var(--on-plum);
  text-align: center;
}

/* .photo turns any block into a real image slot */
.photo {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.hero-archive .hero-inner {
  position: relative;
  z-index: 2;
}

.hero-archive .hero-presents {
  font-family: var(--display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1rem, 1.6vw, 1.35rem);
  letter-spacing: calc(0.02em + var(--ls-tune, 0em));
  color: rgba(245, 241, 234, 0.82);
  margin-bottom: 0.2rem;
}

.hero-archive .hero-wordmark {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2.1rem, 6.4vw, 5rem);
  line-height: 1;
  letter-spacing: calc(0.005em + var(--ls-tune, 0em));
  text-transform: uppercase;
  color: var(--card);
  margin: 0 0 1.1rem;
}

.hero-archive .hero-tagline {
  font-family: var(--display);
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  color: rgba(245, 241, 234, 0.94);
  max-width: 30ch;
  margin-inline: auto;
}

.hero-archive .btn-row {
  justify-content: center;
  margin-top: 2.2rem;
}

/* ---------- Catalogue cards (the PRACTICE row) ---------- */

.catalogue {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.6rem;
  margin-top: 2.2rem;
}

.catalogue-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.9rem 1.7rem 2rem;
  box-shadow: 2px 3px 0 rgba(36, 20, 12, 0.06);
  display: flex;
  flex-direction: column;
}

.catalogue-card h3 {
  font-family: var(--display);
  font-size: 1.3rem;
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.catalogue-card p {
  color: var(--ink-soft);
  font-size: 1rem;
  margin-bottom: 1.2rem;
}

.catalogue-card .btn-row {
  margin-top: auto;
}

/* ---------- Stamped seal (the union-label device, redrawn) ---------- */

/* A vintage union-label badge, drawn from scratch: the studio's own name
   in the device, not a real union's mark. */
.seal {
  --seal-size: 9.5rem;
  width: var(--seal-size);
  height: var(--seal-size);
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 3px double var(--plum);
  border-radius: 50%;
  color: var(--plum);
  text-align: center;
  transform: rotate(-8deg);
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: calc(0.14em + var(--ls-tune, 0em));
  text-transform: uppercase;
  line-height: 1.5;
  opacity: 0.85;
}

.seal-inner {
  padding: 0.6rem;
}

.seal-rule {
  display: block;
  border-top: 1px solid currentColor;
  margin: 0.3rem 0;
  opacity: 0.6;
}

.seal-year {
  font-size: 0.62rem;
  font-weight: 700;
}

/* ---------- Waitlist band with index-card furniture ---------- */

.waitlist-archive {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 3rem;
  align-items: center;
}

/* index-card stack: the archive drawer, drawn in CSS */
.card-stack {
  position: relative;
  min-height: 15rem;
  aspect-ratio: 4 / 5;
  background: var(--paper-deep);
  border: 1px solid var(--rule-strong);
  border-radius: 3px;
  padding: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  box-shadow: 6px 7px 0 rgba(36, 20, 12, 0.09);
}

.index-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 2px;
  padding: 0.5rem 0.7rem;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: calc(0.1em + var(--ls-tune, 0em));
  text-transform: uppercase;
  color: var(--ink-soft);
}

.index-card:first-child {
  border-top: 3px solid var(--butter);
}

/* ---------- Script section heading + rule ---------- */

.section-script {
  display: flex;
  align-items: baseline;
  gap: 1.2rem;
  margin-bottom: 0.4rem;
}

.section-script h2 {
  font-family: var(--script);
  font-weight: 400;
  text-transform: lowercase;
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1;
}

/* ---------- Light-blue pill CTA with script label (the mockup button) ---------- */

.btn-cta {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--ink);
  border-radius: 999px;
  padding: 0.85rem 2.1rem;
  font-family: var(--script);
  font-size: 1.05rem;
  text-transform: lowercase;
  letter-spacing: calc(0.01em + var(--ls-tune, 0em));
}

.btn-cta:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--blue-soft);
}

/* ---------- Poster type: enormous whitespace (the Weekend mockup) ---------- */

.poster {
  min-height: 46vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 3rem;
}

.poster h1 {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 4.2rem);
  line-height: 1.05;
  margin: 0;
}

.two-col-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: start;
}

.two-col-foot h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.05rem;
  margin-bottom: 0.8rem;
}

.day-list {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
}

.day-list dt {
  font-weight: 500;
  margin-top: 0.9rem;
}

.day-list dd {
  margin: 0 0 0.2rem;
  color: var(--ink-soft);
}

.pricing-note {
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

.pricing-note strong {
  color: var(--ink);
}

/* ---------- Archive responsive ---------- */

@media (max-width: 860px) {
  .waitlist-archive,
  .two-col-foot {
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }
  .card-stack {
    aspect-ratio: auto;
    min-height: 0;
  }
  .hero-archive {
    padding-block: 4.5rem 3.5rem;
  }
}

/* ============================================================
   TRACK + SCENE LAYOUT — the rabenrifaie.com composition
   ============================================================

   Structure, read off the reference's live DOM: ONE page. A fixed
   UI at the viewport edges, and full-viewport scenes (100vw x
   100svh) sitting side by side in a horizontal track. The page
   never scrolls vertically — html/body are clipped and the track
   is the only scroller, moved one viewport at a time.

   Rendered in PRESERVATION STUDIO's own colours and copy, not the
   reference's black/white — and with the client's own type trio
   instead of PP Eiko / PP Neue Montreal.

   Deliberate differences from the reference, both for function:
     · the track is a native horizontal scroller with snap points,
       so touch, trackpad, keyboard and the on-screen controls all
       work — the reference drives it with a transform only.
     · the scene words are always visible in the scene bar rather
       than hidden behind the reference's collapsed circle menu.
       This site's job is to collect applications.
   ============================================================ */

:root {
  --ui-h: 4.75rem;
  --display-italic: "Playfair Display", Georgia, serif;
}

/* ---------- Fixed corner UI ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  border-top: 0;
  border-bottom: 1px solid var(--rule);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(8px);
}

.site-header .header-inner {
  width: min(1600px, 95vw);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: 0.95rem;
}

.site-header .wordmark {
  font-size: 0.9rem;
  letter-spacing: calc(0.01em + var(--ls-tune, 0em));
}

/* ---------- Pills (the reference's button vocabulary) ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: calc(0.13em + var(--ls-tune, 0em));
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: transparent;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}

.pill:hover {
  background: var(--butter);
  border-color: var(--butter);
  color: var(--on-butter);
}

.pill-solid {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

.pill-solid:hover {
  background: var(--butter);
  border-color: var(--butter);
  color: var(--on-butter);
}

.pill-quiet {
  border-color: var(--rule-strong);
  color: var(--ink-soft);
}

/* ---------- Small editorial type ---------- */

.micro {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: calc(0.2em + var(--ls-tune, 0em));
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* The signature move: one sentence alternating a true italic serif with the
   grotesk. Same size, same baseline — the switch is the whole effect. */
.mix {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.55vw, 2.3rem);
  line-height: 1.35;
  letter-spacing: calc(-0.008em + var(--ls-tune, 0em));
  color: var(--ink);
  max-width: 30ch;
}

.mix em {
  font-family: var(--display-italic);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}

.mix-sm {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  line-height: 1.5;
  max-width: 42ch;
}

/* ---------- The track ---------- */

main {
  padding-top: calc(var(--ui-h) + 0.5rem);
}

body.is-track main {
  padding-top: 0;
}

/* The page itself never scrolls: the reference clips the document and lets
   the track be the only thing that moves. */
body.is-track {
  height: 100svh;
  overflow: hidden;
}

body.is-track .site-footer {
  display: none;
}

.track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  height: 100svh;
  scrollbar-width: none;
  overscroll-behavior-x: contain;
}

.track::-webkit-scrollbar {
  display: none;
}

/* One scene = one full viewport, exactly like the reference's sections. */
.scene {
  position: relative;
  flex: 0 0 100vw;
  width: 100vw;
  height: 100svh;
  overflow: hidden;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.15rem;
  padding: 6.5rem clamp(1.3rem, 5vw, 5rem) 8.5rem;
  border-right: 1px solid var(--rule);
}

.scene:last-child {
  border-right: 0;
}

/* The reference's full-bleed imagery layer, in our colours and quiet enough
   that type stays readable on top of it. */
.scene-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--paper-deep);
  background-image:
    radial-gradient(
      70% 90% at 18% 12%,
      rgba(255, 222, 138, 0.28),
      transparent 62%
    ),
    radial-gradient(
      60% 80% at 84% 82%,
      rgba(158, 190, 198, 0.22),
      transparent 60%
    ),
    linear-gradient(180deg, rgba(61, 45, 46, 0.04), rgba(61, 45, 46, 0.1));
}

.scene:nth-child(even) .scene-media {
  background-color: var(--paper);
  background-image:
    radial-gradient(
      64% 84% at 82% 16%,
      rgba(255, 222, 138, 0.22),
      transparent 60%
    ),
    radial-gradient(
      70% 90% at 12% 86%,
      rgba(158, 190, 198, 0.2),
      transparent 62%
    ),
    linear-gradient(180deg, rgba(61, 45, 46, 0.03), rgba(61, 45, 46, 0.08));
}

.scene-inner {
  position: relative;
  z-index: 2;
  width: min(46rem, 92vw);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.05rem;
  text-align: center;
}

.scene-inner .mix {
  max-width: 34ch;
}

.scene-note {
  font-family: var(--serif);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 52ch;
}

/* the service row under the hero's pill, straight off the reference */
.scene-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem clamp(1.1rem, 2.6vw, 2.4rem);
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
}

.scene-row a {
  font-family: var(--serif);
  font-size: 0.98rem;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 0.15rem;
}

.scene-row a:hover {
  border-color: var(--ink);
}

.scene-facts {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem clamp(1rem, 2.2vw, 2rem);
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: calc(0.14em + var(--ls-tune, 0em));
  text-transform: uppercase;
  color: var(--ink-soft);
}

.scene-facts b {
  font-weight: 600;
  color: var(--ink);
}

.scene-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.6rem;
}

.scene-links a {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: calc(0.16em + var(--ls-tune, 0em));
  text-transform: uppercase;
  color: var(--ink-soft);
}

.scene-links a:hover {
  color: var(--ink);
}

/* The per-scene pill the reference keeps at the bottom-right. */
.scene-cta {
  position: absolute;
  z-index: 3;
  right: clamp(1.3rem, 4vw, 4.5rem);
  bottom: clamp(1.3rem, 3vh, 2rem);
  background: var(--card);
}

/* ---------- The scene bar (reference's fixed bottom UI) ---------- */

.scene-bar {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.55rem;
  padding: 1.6rem clamp(1rem, 3vw, 2.4rem) 1.1rem;
  background: linear-gradient(
    to top,
    color-mix(in srgb, var(--paper) 94%, transparent) 55%,
    transparent
  );
  pointer-events: none;
}

.scene-bar > * {
  pointer-events: auto;
}

.scene-menu {
  display: flex;
  gap: clamp(0.75rem, 1.7vw, 1.6rem);
  max-width: 94vw;
  overflow-x: auto;
  scrollbar-width: none;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: calc(0.16em + var(--ls-tune, 0em));
  text-transform: uppercase;
}

.scene-menu::-webkit-scrollbar {
  display: none;
}

.scene-menu a {
  color: var(--ink-soft);
  text-decoration: none;
  white-space: nowrap;
}

.scene-menu a:hover,
.scene-menu a[aria-current="true"] {
  color: var(--ink);
}

.scene-controls {
  display: flex;
  align-items: center;
  gap: clamp(0.5rem, 1.4vw, 1rem);
}

.explore-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
}

.explore {
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--card);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 0.85rem;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease;
}

.explore:hover {
  background: var(--butter);
}

.scene-step {
  width: 2.1rem;
  height: 2.1rem;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: none;
  color: var(--ink-soft);
  font-family: var(--mono);
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
}

.scene-step:hover:not(:disabled) {
  background: var(--butter);
  border-color: var(--butter);
  color: var(--on-butter);
}

.scene-step:disabled {
  opacity: 0.35;
  cursor: default;
}

.scene-index {
  margin-left: 0.3rem;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: calc(0.14em + var(--ls-tune, 0em));
  color: var(--ink-soft);
}

/* ---------- Quote wall (the reference's scattered testimonials) ---------- */

.quote-wall {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.1rem 1.6rem;
  margin-top: 0.6rem;
  text-align: left;
}

.quote {
  font-family: var(--serif);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
}

.quote cite {
  display: block;
  margin-top: 0.35rem;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: calc(0.14em + var(--ls-tune, 0em));
  text-transform: uppercase;
  font-style: normal;
  color: var(--ink-soft);
  opacity: 0.85;
}

/* ---------- Scene form (the waitlist) ---------- */

.scene-inner form {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
  max-width: 30rem;
  margin-top: 0.2rem;
}

.scene-inner form input[type="email"] {
  flex: 1 1 15rem;
  min-width: 12rem;
}

.scene-inner .error {
  flex: 1 1 100%;
  color: var(--error);
  font-size: 0.85rem;
}

/* ---------- Track responsive ----------
   One structure at every width: scenes stay one viewport wide and the track
   still moves sideways, exactly as the reference does. Only the type and the
   fixed bar tighten up. */

@media (max-width: 900px) {
  .scene {
    padding: 5.5rem 1.3rem 9rem;
  }
  .scene-cta {
    right: 1.3rem;
    bottom: 1.2rem;
  }
  .scene-menu {
    font-size: 0.55rem;
    letter-spacing: calc(0.12em + var(--ls-tune, 0em));
    gap: 0.8rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .track {
    scroll-behavior: auto;
  }
}

/* ---------- Track layer: element resets ---------- */

h1.mix,
h2.mix {
  margin: 0;
}

.scene-inner .pill {
  margin-top: 0.2rem;
}

/* ============================================================
   WELCOME GATE — the reference's entry screen
   ============================================================

   Composition read off rabenrifaie.com's live DOM: a full-bleed
   near-black surface (rgb(8,8,8)) with a percentage counting up
   bottom-right in an ITALIC SERIF (24px, PP Eiko Italic Light),
   and — the part that carries the screen — the LOADING BAR IS THE
   STUDIO NAME. Their bar is a 132x40 white plane scaled from the
   centre (transform-origin at its middle) under a black panel
   masked by an SVG of the wordmark's own letterforms, so the
   title's letters are what fills in as the page loads. At 100% a
   thin pill-outlined "Welcome" appears beneath it — click and the
   site opens.

   We do the same thing with one element instead of a mask file:
   the wordmark is painted in two background layers both clipped to
   its own glyphs (background-clip: text) — a dim one that is always
   there, and a solid one sized by --fill and anchored centre, so it
   grows outward through the letters exactly as theirs does. No
   mask asset, no duplicated text node, and the letters stay real
   selectable text.

   Ours is that composition in our own surface and type: plum
   instead of black, the wordmark in Playfair italic (our
   --display-italic, doing the job the reference's Eiko italic
   does), the pill filling Honey on hover/focus.

   Two safety rules live here rather than in JS, because they have
   to work when the script does NOT run:
     · the <noscript> rule in the template hides the gate;
     · the failsafe animation below clears it after 15s, and
       welcome.js cancels it by adding .is-live. A gate whose only
       exit is scripted is a trap, so it must be able to let go of
       the visitor by itself.
   ============================================================ */

.welcome {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  background: var(--plum);
  color: var(--paper);
  text-align: center;
  animation: welcome-failsafe 0.5s ease 15s forwards;
}

.welcome.is-live {
  animation: none;
}

@keyframes welcome-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* The gate is modal: nothing underneath takes a click while it is up. */
body.is-welcome .track,
body.is-welcome .scene-bar,
body.is-welcome .site-header {
  pointer-events: none;
}

/* For the progress role: the visual is the wordmark, but a progressbar
   needs a value a screen reader can read. */
.welcome-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.welcome-inner {
  display: grid;
  justify-items: center;
  gap: 1.6rem;
}

.welcome-stage {
  display: grid;
  place-items: center;
  min-height: 2.5rem;
}

/* THE BAR: the wordmark, filling with itself.
   Two layers, both clipped to the glyphs — a dim one that is always
   visible (the empty track) and a solid one whose width is --fill,
   centred, so a full bar grows outward from the middle letters. */
.welcome-name {
  --fill: 0%;
  margin: 0;
  font-family: var(--display-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  line-height: 1.1;
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-image:
    linear-gradient(
      color-mix(in srgb, var(--paper) 20%, transparent),
      color-mix(in srgb, var(--paper) 20%, transparent)
    ),
    linear-gradient(var(--paper), var(--paper));
  background-repeat: no-repeat;
  background-position:
    0 0,
    50% 50%;
  background-size:
    100% 100%,
    var(--fill) 100%;
  -webkit-background-clip: text;
  background-clip: text;
}

.welcome-name .wordmark-dot {
  color: var(--butter);
  -webkit-text-fill-color: var(--butter);
}

.welcome-enter {
  border-color: color-mix(in srgb, var(--paper) 55%, transparent);
  color: var(--paper);
  background: transparent;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 0.5s ease,
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.welcome.is-ready .welcome-enter {
  opacity: 1;
  pointer-events: auto;
}

.welcome-enter:hover,
.welcome-enter:focus-visible {
  background: var(--butter);
  border-color: var(--butter);
  color: var(--on-butter);
}

.welcome-count {
  position: fixed;
  right: clamp(1.3rem, 4vw, 4.5rem);
  bottom: clamp(1.3rem, 3vh, 2rem);
  margin: 0;
  font-family: var(--display-italic);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.1rem, 1.7vw, 1.5rem);
  line-height: 1;
  color: var(--paper);
}

.welcome.is-leaving {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s ease;
}

@media (prefers-reduced-motion: reduce) {
  .welcome,
  .welcome.is-leaving,
  .welcome-enter {
    animation: none;
    transition: none;
  }
}