@charset "UTF-8";
/* ============================================================
   QuantumWaves — design system
   Ground:    warm shell paper
   Accent:    wai (deep sacred water green) + antique gold hairlines
   Signature: cymatic plates — standing-wave rings drawn as
              fine-line engraving, breathing below 60 BPM
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root {
  /* Paper — warm, shell-toned, never cream-yellow */
  --paper:      #F4F2EC;
  --paper-2:    #EDEAE1;
  --paper-3:    #E3DED2;

  /* Ink — near-black, faintly blue */
  --ink:        #2A3238;   /* soft charcoal, never pure black */
  --ink-2:      #5B6469;
  --ink-3:      #63696D;   /* 4.6:1 on paper-2 — .data runs at 11px */

  /* Sky — celestial blue. The one colour that belongs beside gold. */
  --sky:        #2E6E92;   /* 4.64:1 on paper-2 */
  --sky-deep:   #163B50;   /* dark ground */
  --sky-deepest:#0C2634;   /* footer — a second, deeper step */
  --sky-soft:   #7DB4D9;   /* accent on the dark ground */
  --sky-tint:   rgba(46, 110, 146, 0.08);

  /* Gold — the brand's light. Hairlines, seals, energy. Never a flat wash. */
  --gold:       #806428;   /* 4.63:1 on paper-2 — .eyebrow runs at 11px */
  --gold-soft:  rgba(128, 100, 40, 0.32);
  --gold-lift:  #D8B057;   /* gold that still reads on the dark ground */
  --gold-bright:#C9962E;

  --rule:       rgba(20, 24, 26, 0.13);
  --rule-soft:  rgba(20, 24, 26, 0.07);

  /* Type */
  --display: "Marcellus", "Optima", "Palatino", Georgia, serif;
  --sans:    "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono:    "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Fluid scale */
  --t-display-xl: clamp(3.25rem, 8.4vw, 8rem);
  --t-display-l:  clamp(2.5rem, 5.6vw, 5rem);
  --t-display-m:  clamp(1.875rem, 3.6vw, 3rem);
  --t-title:      clamp(1.375rem, 2.1vw, 1.875rem);
  --t-lead:       clamp(1.0625rem, 1.35vw, 1.3125rem);
  --t-body:       1rem;
  --t-micro:      0.6875rem;

  /* Space */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;  --s4: 1rem;
  --s5: 1.5rem;  --s6: 2rem;    --s7: 3rem;    --s8: 4rem;
  --s9: 6rem;    --s10: 8rem;   --s11: 10rem;

  --gutter: clamp(1.25rem, 5vw, 5.5rem);
  --measure: 34rem;
  --max: 90rem;

  /* Form — one radius scale, one shadow scale */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 20px;
  --lift-1: 0 1px 2px rgba(42,50,56,.05), 0 12px 30px -16px rgba(42,50,56,.16);
  --lift-2: 0 2px 4px rgba(42,50,56,.06), 0 26px 56px -20px rgba(42,50,56,.24);

  /* Motion — everything moves below 60 BPM */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --slow: 1.1s;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  color-scheme: light;
}
/* Anchor targets must clear the sticky header */
:target, [id] { scroll-margin-top: 6rem; }
body {
  margin: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(46,110,146,.14);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.6;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
a { color: inherit; text-decoration: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------- 3. Type roles ---------- */
.display {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  line-height: 1.08;
  letter-spacing: 0;
  text-wrap: balance;
}
.display--xl { font-size: var(--t-display-xl); letter-spacing: -0.004em; line-height: 1.04; }
.display--l  { font-size: var(--t-display-l);  letter-spacing: -0.002em; }
.display--m  { font-size: var(--t-display-m);  letter-spacing: 0.002em; line-height: 1.14; }

.serif-lead {
  font-family: var(--display);
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: var(--t-title);
  line-height: 1.38;
  letter-spacing: -0.012em;
}

.lead {
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--ink-2);
  max-width: var(--measure);
  text-wrap: pretty;
}
.body { color: var(--ink-2); max-width: var(--measure); text-wrap: pretty; }
.body + .body { margin-top: var(--s4); }

/* Eyebrow — small caps, gold hairline before it */
.eyebrow {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-weight: 500;
}
.eyebrow::before {
  content: "";
  width: 1.75rem;
  height: 1px;
  background: var(--gold);
  flex: none;
}
.eyebrow--plain::before { display: none; }

/* Data — mono is reserved for measured things: Hz, minutes, price, bit depth */
.data {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-micro);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 400;
}
.data--ink { color: var(--ink-2); }

/* ---------- 4. Layout ---------- */
.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 62rem; }

.section { padding-block: clamp(4.5rem, 11vh, 9rem); position: relative; }
.section--tight { padding-block: clamp(3rem, 7vh, 5.5rem); }
.section--sunk { background: var(--paper-2); }
.section--sky { background: var(--sky-deep); color: var(--paper); }
.section--sky .lead,
.section--sky .body { color: rgba(244, 242, 236, .86); }
.section--sky .data { color: rgba(244, 242, 236, .80); }

.rule { height: 1px; background: var(--rule); border: 0; margin: 0; }

/* Equal two-up — for paired portraits that must align on the baseline */
.duo {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: start;
}
@media (max-width: 62rem) { .duo { grid-template-columns: 1fr; gap: var(--s8); } }

/* Editorial two-column: label rail + content */
.rail {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(1.75rem, 5vw, 5rem);
  align-items: start;
}
@media (max-width: 56rem) { .rail { grid-template-columns: 1fr; gap: var(--s5); } }

/* ---------- 5. Cymatic plate (signature) ----------
   Concentric standing-wave rings, drawn like a Chladni engraving.
   Breathes on a 14s cycle — roughly 4 BPM, deliberately below the music. */
.plate { display: block; overflow: visible; }
.plate circle,
.plate path { fill: none; }

.plate--breathe .plate__ring {
  transform-box: view-box;
  transform-origin: 50% 50%;
  animation: plate-breathe 14s var(--ease) infinite;
}
.plate--breathe .plate__ring:nth-child(2)  { animation-delay: -.5s; }
.plate--breathe .plate__ring:nth-child(3)  { animation-delay: -1s; }
.plate--breathe .plate__ring:nth-child(4)  { animation-delay: -1.5s; }
.plate--breathe .plate__ring:nth-child(5)  { animation-delay: -2s; }
.plate--breathe .plate__ring:nth-child(6)  { animation-delay: -2.5s; }
.plate--breathe .plate__ring:nth-child(7)  { animation-delay: -3s; }
.plate--breathe .plate__ring:nth-child(8)  { animation-delay: -3.5s; }
.plate--breathe .plate__ring:nth-child(9)  { animation-delay: -4s; }
.plate--breathe .plate__ring:nth-child(10) { animation-delay: -4.5s; }
.plate--breathe .plate__ring:nth-child(11) { animation-delay: -5s; }
.plate--breathe .plate__ring:nth-child(12) { animation-delay: -5.5s; }

@keyframes plate-breathe {
  0%, 100% { transform: scale(1);     opacity: .85; }
  50%      { transform: scale(1.035); opacity: 1; }
}

.plate__node { fill: var(--gold); stroke: none; }

/* ---------- 6. Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  padding: .85rem 1.5rem;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: background var(--slow) var(--ease), color var(--slow) var(--ease),
              border-color var(--slow) var(--ease), transform .5s var(--ease);
  will-change: transform;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--primary { background: var(--sky); color: var(--paper); }
.btn--primary:hover { background: var(--sky-deep); }

.btn--ghost {
  border: 1px solid var(--rule);
  color: var(--ink);
}
.btn--ghost:hover { border-color: var(--ink); }

.btn--quiet {
  padding: .95rem 0;
  color: var(--ink-2);
  border-bottom: 1px solid var(--rule);
  border-radius: 0;
}
.btn--quiet:hover { color: var(--ink); border-color: var(--ink); transform: none; }

.section--sky .btn--primary { background: var(--paper); color: var(--sky-deep); }
.section--sky .btn--primary:hover { background: #fff; }
.section--sky .btn--ghost { border-color: rgba(244,242,236,.28); color: var(--paper); }
.section--sky .btn--ghost:hover { border-color: var(--paper); }

.cta-row { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; }

/* ---------- 7. Header ---------- */
.header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(14px);
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .6s var(--ease), background .6s var(--ease);
}
.header[data-scrolled="true"] { border-bottom-color: var(--rule); }
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); height: 4.5rem;
}
.logo { display: flex; align-items: baseline; gap: .4rem; }
.logo__mark {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.3125rem; letter-spacing: -0.02em;
}
.logo__mark em { font-style: normal; color: var(--sky); }

.nav { display: flex; gap: clamp(1rem, 2.4vw, 2.25rem); align-items: center; }
.nav a {
  font-size: .875rem; color: var(--ink-2);
  transition: color .5s var(--ease); position: relative; padding-block: .25rem;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px;
  height: 1px; background: var(--gold);
}
@media (max-width: 60rem) { .nav { display: none; } }

.nav-toggle { display: none; }
@media (max-width: 60rem) {
  .nav-toggle {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .8125rem; color: var(--ink-2);
  }
}
.drawer {
  display: none;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  padding: var(--s5) var(--gutter) var(--s6);
}
.drawer[data-open="true"] { display: block; }
.drawer a {
  display: block; padding: .7rem 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.375rem;
  border-bottom: 1px solid var(--rule-soft);
}

/* ---------- 8. Hero ---------- */
.hero { padding-block: clamp(3rem, 7vh, 6rem) clamp(3.5rem, 9vh, 7rem); }
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2rem, 6vw, 5.5rem);
  align-items: center;
}
@media (max-width: 62rem) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--s7); }
}
.hero__title { margin-top: var(--s5); }
.hero__title .sky { color: var(--sky); }
.hero__lead { margin-top: var(--s5); }
.hero__cta { margin-top: var(--s7); }
.hero__meta { margin-top: var(--s6); display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); }

/* Portrait frame — respects the photographer's 3:4, never crops a face */
.portrait {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--paper-3);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.portrait--tall { aspect-ratio: 4 / 5; }
.portrait--wide { aspect-ratio: 16 / 10; }
.portrait--square { aspect-ratio: 1 / 1; }

.hero__figure { position: relative; }
/* Sits on the figure's inboard corner so it never clips against the page edge */
.hero__plate {
  position: absolute;
  left: -9%;
  bottom: -9%;
  width: clamp(10rem, 25%, 18rem);
  color: var(--gold);
  pointer-events: none;
}
@media (max-width: 62rem) { .hero__plate { left: -3%; bottom: -5%; width: 8rem; } }

/* Caption sits opposite the plate so the two never collide */
.hero__figure .caption { text-align: right; }

.caption {
  margin-top: var(--s3);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ---------- 9. Marquee of niches ---------- */
.strip {
  border-block: 1px solid var(--rule);
  padding-block: var(--s4);
  overflow: hidden;
}
.strip__track {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s3) clamp(1.25rem, 3.4vw, 3rem);
}
.strip__track span:nth-child(n+9) { display: none; }
.strip__track span {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .18em; text-transform: uppercase; color: var(--ink-3);
}


/* ---------- 10. Session cards ---------- */
.grid-sessions {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17.5rem, 1fr));
  gap: clamp(.75rem, 1.4vw, 1.25rem);
}
.card {
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: var(--s5) var(--s5) var(--s5);
  display: flex; flex-direction: column; gap: var(--s4);
  position: relative;
  box-shadow: var(--lift-1);
  transition: box-shadow var(--slow) var(--ease), transform .6s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift-2);
}
.card__plate { width: 100%; aspect-ratio: 1/1; color: var(--sky); opacity: .55;
  transition: opacity var(--slow) var(--ease), color var(--slow) var(--ease); }
.card:hover .card__plate { opacity: .95; color: var(--gold); }
.card__title {
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.5rem; line-height: 1.15; letter-spacing: -0.015em;
}
.card__note { color: var(--ink-2); font-size: .9375rem; }
.card__foot {
  margin-top: auto;                 /* pin to the base so every card's rule aligns */
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s4); padding-top: var(--s4); border-top: 1px solid var(--rule-soft);
}
.card__price { font-family: var(--mono); font-size: .8125rem; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.card__price[data-free="true"] { color: var(--sky); }

.card__link::after { content: ""; position: absolute; inset: 0; }

.badge {
  font-family: var(--mono); font-size: .625rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--gold);
  border: 1px solid var(--gold-soft); padding: .2rem .5rem; border-radius: 999px;
}

/* ---------- 11. Craft steps (a real sequence — numbering earns its place) ---------- */
.steps { display: grid; gap: clamp(.75rem, 1.4vw, 1.25rem); }
@media (min-width: 56rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step {
  background: var(--paper); border-radius: var(--r-lg); padding: var(--s7) var(--s6);
  box-shadow: var(--lift-1);
}
.step__n {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .16em; color: var(--gold);
}
.step__t { margin-top: var(--s5); font-family: var(--display);
  font-optical-sizing: auto;
  font-size: 1.625rem; line-height: 1.12; letter-spacing: -.015em; }
.step__b { margin-top: var(--s4); color: var(--ink-2); font-size: .9375rem; }

/* ---------- 12. Ledger / comparison ---------- */
.ledger { font-size: .9375rem; }
.ledger th, .ledger td {
  text-align: left; padding: var(--s5) var(--s4);
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.ledger thead th {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
  font-weight: 400; padding-block: var(--s3);
}
.ledger tbody th {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3); font-weight: 400; width: 8rem;
}
.ledger .is-ours { color: var(--ink); font-weight: 500; }
.ledger td:not(.is-ours) { color: var(--ink-3); }
.ledger tr:last-child th, .ledger tr:last-child td { border-bottom: 0; }
.ledger-scroll { overflow-x: auto; }
@media (max-width: 48rem) { .ledger { min-width: 40rem; } }

.chips { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s6); }
.chip {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink-2);
  border: 1px solid var(--rule); border-radius: 999px; padding: .4rem .85rem;
}

/* ---------- 13. Quote ---------- */
.pull {
  hanging-punctuation: first;
  text-indent: -0.42em;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(1.5rem, 3.1vw, 2.625rem);
  line-height: 1.22; letter-spacing: -.02em; text-wrap: balance;
}
.pull__cite {
  margin-top: var(--s5); font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3);
}
.section--sky .pull__cite { color: rgba(244,242,236,.80); }

/* Hawaiian phrase treatment */
.olelo {
  font-family: var(--display);
  font-style: normal;
  letter-spacing: .055em;
  color: var(--sky); font-size: var(--t-title);
  line-height: 1.4;
}
.section--sky .olelo { color: var(--paper); }
.olelo__gloss {
  display: block; margin-top: var(--s2);
  font-family: var(--sans); font-size: .9375rem; font-style: normal;
  letter-spacing: 0; color: var(--ink-3);
}
.section--sky .olelo__gloss { color: rgba(244,242,236,.82); }

/* ---------- 14. Accordion ---------- */
.qa { border-top: 1px solid var(--rule); }
.qa__item { border-bottom: 1px solid var(--rule); }
.qa__q {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: var(--s5); padding: var(--s5) 0; text-align: left;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-size: clamp(1.125rem, 1.7vw, 1.375rem); letter-spacing: -.012em;
  transition: color .5s var(--ease);
}
.qa__q:hover { color: var(--sky); }
.qa__sign { flex: none; width: 1rem; height: 1rem; position: relative; }
.qa__sign::before, .qa__sign::after {
  content: ""; position: absolute; inset: 50% 0 auto; height: 1px; background: currentColor;
}
.qa__sign::after { transform: rotate(90deg); transition: transform .6s var(--ease); }
.qa__q[aria-expanded="true"] .qa__sign::after { transform: rotate(0deg); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .6s var(--ease); }
.qa__item[data-open="true"] .qa__a { grid-template-rows: 1fr; }
.qa__a > div { overflow: hidden; }
.qa__a p { padding-bottom: var(--s5); color: var(--ink-2); max-width: var(--measure); }

/* ---------- 15. Footer ---------- */
.footer {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--sky-deepest); color: var(--paper);
  padding-block: var(--s9) var(--s6);
}
.footer__bg {
  position: absolute; inset: 0; z-index: -1;
  opacity: .16;
}
.footer__bg img { width: 100%; height: 100%; object-fit: cover; }
.footer::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--sky-deepest) 0%, rgba(12,38,52,.82) 46%, var(--sky-deepest) 100%);
}
.footer a { color: rgba(244,242,236,.80); transition: color .5s var(--ease); }
.footer a:hover { color: var(--paper); }
.footer__grid {
  display: grid; gap: var(--s7);
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
@media (max-width: 60rem) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .footer__grid { grid-template-columns: 1fr; } }
.footer__h {
  font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .16em;
  text-transform: uppercase; color: rgba(244,242,236,.66); margin-bottom: var(--s4);
}
.footer__list li { margin-bottom: .6rem; font-size: .9375rem; }
.footer__base {
  margin-top: var(--s9); padding-top: var(--s5);
  border-top: 1px solid rgba(244,242,236,.14);
  display: flex; flex-wrap: wrap; gap: var(--s4) var(--s6); justify-content: space-between;
  font-size: .8125rem; color: rgba(244,242,236,.66);
}
.disclaimer { font-size: .8125rem; color: rgba(244,242,236,.66); max-width: 46rem; line-height: 1.6; }

/* ---------- 16. Scroll reveal ----------
   Scoped to .js so the page is fully legible without JavaScript.
   Never hide content behind a script that might not run. */
.js .rise { opacity: 0; transform: translateY(18px); }
.js .is-in .rise, .js .rise.is-in {
  opacity: 1; transform: none;
  transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
}
.js .is-in .rise:nth-child(2) { transition-delay: .07s; }
.js .is-in .rise:nth-child(3) { transition-delay: .14s; }
.js .is-in .rise:nth-child(4) { transition-delay: .21s; }

/* ---------- 17. Utilities ---------- */
.stack > * + * { margin-top: var(--s5); }
.stack-sm > * + * { margin-top: var(--s3); }
.stack-lg > * + * { margin-top: var(--s7); }
.center { text-align: center; margin-inline: auto; }
.center .lead, .center .body { margin-inline: auto; }
.center .pull { text-indent: 0; }
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper); padding: var(--s3) var(--s5);
}
.skip:focus { left: var(--s4); top: var(--s4); }
.vh {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- 18. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rise { opacity: 1; transform: none; }
  .strip__track { animation: none; }
}

/* ============================================================
   19. Commerce — the product IS the page
   ============================================================ */

/* Featured product: cover left, offer right */
.feature {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
@media (max-width: 62rem) { .feature { grid-template-columns: 1fr; gap: var(--s7); } }

.cover {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--paper-3);
  box-shadow: var(--lift-2);
}
.cover img { width: 100%; height: 100%; object-fit: cover; }

.price {
  display: flex; align-items: baseline; gap: var(--s4);
  font-family: var(--mono); letter-spacing: .04em;
}
.price__now {
  font-family: var(--sans); font-size: 1.375rem; font-weight: 500;
  letter-spacing: -.01em; color: var(--ink); font-variant-numeric: tabular-nums;
}
.price__now[data-free="true"] { color: var(--sky); }
.price__note { font-size: var(--t-micro); letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3); }

/* What you get — a plain, scannable list. No cleverness. */
.gets { margin-top: var(--s6); display: grid; gap: var(--s3); }
.gets li {
  display: grid; grid-template-columns: 1.1rem 1fr; gap: var(--s3);
  align-items: start; font-size: .9375rem; color: var(--ink-2);
}
.gets li::before {
  content: ""; width: .4rem; height: .4rem; margin-top: .5rem;
  border-radius: 50%; background: var(--gold);
}

/* Product card: the cover does the selling */
.card__cover {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  background: var(--paper-3); border-radius: var(--r-sm);
}
.card__cover img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.card:hover .card__cover img { transform: scale(1.035); }
.card__sig {
  position: absolute; right: .5rem; bottom: .5rem; width: 2.6rem;
  color: var(--gold-lift); opacity: .8; pointer-events: none;
}

/* ============================================================
   20. Use cases — where you set the field
   ============================================================ */
.uses {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: clamp(1.25rem, 2.4vw, 2rem);
}
.use { display: flex; flex-direction: column; gap: var(--s4); }
.use__media {
  aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--r-md);
  background: var(--paper-3);
}
.use__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s var(--ease);
}
.use:hover .use__media img { transform: scale(1.04); }
.use__k {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--sky);
}
.use__t {
  font-family: var(--display); font-optical-sizing: auto;
  font-size: 1.375rem; line-height: 1.15; letter-spacing: -.014em;
}
.use__b { color: var(--ink-2); font-size: .9375rem; }

/* Full-bleed image band — used where the energy should carry the section */
.band { position: relative; overflow: hidden; }
.band__img { aspect-ratio: 21 / 9; }
.band__img--wide { aspect-ratio: 16 / 9; border-radius: var(--r-md); }
@media (max-width: 48rem) { .band__img { aspect-ratio: 4 / 3; } }
.band__img img { width: 100%; height: 100%; object-fit: cover; }

/* Two-up together band — the founders, equal billing */
.together { display: grid; gap: clamp(.75rem, 1.4vw, 1.25rem); }
@media (min-width: 56rem) { .together { grid-template-columns: 1fr 1fr; } }
.together__half {
  background: var(--paper); border-radius: var(--r-lg); padding: var(--s7) var(--s6);
  box-shadow: var(--lift-1);
}
.together__role {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}

/* Layer stack — what each of them actually contributes */
.layers { display: grid; gap: clamp(.75rem, 1.4vw, 1.25rem); }
@media (min-width: 56rem) { .layers { grid-template-columns: repeat(3, 1fr); } }
.layer {
  background: var(--paper); border-radius: var(--r-lg); padding: var(--s7) var(--s6);
  box-shadow: var(--lift-1);
}
.layer__n {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .16em; color: var(--sky);
}
.layer__t {
  margin-top: var(--s5); font-family: var(--display); font-optical-sizing: auto;
  font-size: 1.5rem; line-height: 1.12; letter-spacing: -.015em;
}
.layer__b { margin-top: var(--s4); color: var(--ink-2); font-size: .9375rem; }

.section--sky .caption { color: rgba(244,242,236,.80); }

/* ============================================================
   21. Sample player — a sound product should let you hear it
   ============================================================ */
.player {
  margin-top: var(--s6);
  display: flex; align-items: center; gap: var(--s4);
  padding: .7rem .9rem .7rem .7rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: var(--paper);
  transition: border-color var(--slow) var(--ease), opacity var(--slow) var(--ease);
}
.section--sunk .player { background: var(--paper); }
.player:hover { border-color: var(--sky); }

.player__btn {
  flex: none; width: 2.5rem; height: 2.5rem; border-radius: 50%;
  background: var(--sky); color: var(--paper);
  display: grid; place-items: center;
  transition: background var(--slow) var(--ease), transform .4s var(--ease);
}
.player__btn:hover { background: var(--sky-deep); transform: scale(1.05); }

/* Triangle → two bars, purely in CSS so there is no icon font to load */
.player__icon {
  width: 0; height: 0;
  border-left: .55rem solid currentColor;
  border-top: .36rem solid transparent;
  border-bottom: .36rem solid transparent;
  margin-left: .12rem;
  transition: border-width .25s var(--ease);
}
.player[data-state="playing"] .player__icon {
  border-left-width: .18rem;
  border-top: 0; border-bottom: 0;
  height: .72rem;
  box-shadow: .3rem 0 0 0 currentColor;
  margin-left: 0;
}

.player__wave { position: relative; flex: 1; height: 1.6rem; overflow: hidden; }
.wave { width: 100%; height: 100%; }
.wave rect { fill: var(--ink-3); opacity: .55; transition: fill var(--slow) var(--ease); }
.player:hover .wave rect { fill: var(--sky); opacity: .5; }
.player__prog {
  position: absolute; inset: 0 100% 0 0;
  background: var(--sky-tint);
  border-right: 1px solid var(--sky);
  pointer-events: none;
}
.player__meta {
  flex: none; font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
}

/* Honest empty state — never a play button that does nothing */
.player[data-state="unavailable"] { opacity: .6; pointer-events: none; }
.player[data-state="unavailable"] .player__btn { background: var(--ink-3); }

/* In a product card the player sits tighter */
.card .player { margin-top: 0; padding: .45rem .7rem .45rem .45rem; }
.card .player__btn { width: 2rem; height: 2rem; }
.card .player__meta { display: none; }

/* Bundle tile — closes the grid and carries the upsell */
.card--cta {
  justify-content: space-between;
  background: color-mix(in srgb, var(--sky) 9%, var(--paper));
}
.card--cta:hover { background: color-mix(in srgb, var(--sky) 14%, var(--paper)); }
.card--cta .card__title { max-width: 14ch; }

/* ============================================================
   22. Full-bleed hero — the banner has to do the explaining
   ============================================================ */
.hero--full {
  position: relative;
  padding-inline: env(safe-area-inset-left) env(safe-area-inset-right);
  min-height: min(88vh, 52rem);
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--paper-3);
  padding-block: var(--s8) var(--s7);
}
.hero--full > .wrap { width: 100%; justify-self: stretch; }
.hero__bg { position: absolute; inset: 0; }
.hero__bg img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: 72% 46%;
}

/* A paper scrim, never a black one — the page stays luminous */
.hero__scrim {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(244,242,236,.97) 0%,
    rgba(244,242,236,.92) 24%,
    rgba(244,242,236,.62) 38%,
    rgba(244,242,236,.18) 52%,
    rgba(244,242,236,0) 66%);
}
.hero__content { position: relative; z-index: 2; max-width: 47rem; }

/* A Didone headline wants a clean sans beneath it — hairline serifs at
   subhead size on a photograph are unreadable. */
.hero__kicker {
  font-family: var(--sans);
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.55; letter-spacing: -.004em;
  color: var(--ink); max-width: 44ch; margin-top: var(--s5);
}
.hero__sub { margin-top: var(--s4); max-width: 42ch; font-size: 1rem; }
/* Hero headline is set one step down so the CTA stays above the fold */
.hero--full .display--xl { font-size: clamp(2.75rem, 5.4vw, 4.75rem); }

@media (max-width: 62rem) {
  .hero--full { min-height: 0; padding-block: 0 var(--s8); }
  .hero__bg { position: relative; height: 58vh; }
  .hero__bg img { object-position: 62% 38%; }
  .hero__scrim {
    inset: auto 0 0 0; height: 42%;
    background: linear-gradient(180deg, rgba(244,242,236,0), var(--paper) 82%);
  }
  .hero__content { margin-top: var(--s5); padding-inline: var(--gutter); }
  .hero--full > .wrap { padding-inline: 0; }
}

/* ============================================================
   23. Closer — the final ask, over a photograph
   ============================================================ */
.closer {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; align-items: center;
  min-height: min(78vh, 44rem);
  padding-block: var(--s10);
  color: var(--paper);
}
.closer__bg { position: absolute; inset: 0; z-index: -2; }
.closer__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 58%; }
.closer__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(12,38,52,.46) 0%, rgba(12,38,52,.80) 44%, rgba(12,38,52,.94) 100%),
    linear-gradient(90deg, rgba(12,38,52,.42) 0%, rgba(12,38,52,.10) 58%, rgba(12,38,52,0) 100%);
}
.closer__content { max-width: 46rem; }
.closer .lead { color: rgba(244,242,236,.90); }
.closer .olelo { color: var(--gold-lift); }
.closer .olelo__gloss { color: rgba(244,242,236,.78); }
.closer .btn--primary { background: var(--paper); color: var(--sky-deep); }
.closer .btn--primary:hover { background: #fff; }
.closer .btn--ghost { border-color: rgba(244,242,236,.42); color: var(--paper); }
.closer .btn--ghost:hover { border-color: var(--paper); }

/* Ours, in the comparison — marked by tone, not by a border */
.layer--ours { background: color-mix(in srgb, var(--sky) 9%, var(--paper)); }
.layer--ours .layer__n { color: var(--sky); }

/* Archival photograph — small and reverent, never blown up past its resolution */
.archival {
  display: flex; align-items: flex-start; gap: var(--s5);
  margin-top: var(--s7); max-width: 34rem;
}
.archival__img {
  flex: none; width: 7.5rem; aspect-ratio: 1/1;
  overflow: hidden; border-radius: var(--r-sm);
  background: rgba(244,242,236,.1);
}
.archival__img img { width: 100%; height: 100%; object-fit: cover; }
.archival__cap {
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .1em; line-height: 1.8; text-transform: uppercase;
  color: rgba(244,242,236,.80);
}
@media (max-width: 40rem) { .archival { flex-direction: column; gap: var(--s4); } }

/* Diptych/triptych — real photographs set side by side, given equal weight */
.diptych {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: clamp(1rem, 2.2vw, 2rem);
}
.section--sky .diptych .caption { color: rgba(244,242,236,.80); }

/* ============================================================
   24. Cart, checkout, legal
   ============================================================ */

/* Header cart button */
.cart-btn {
  position: relative; display: inline-flex; align-items: center; gap: .5rem;
  font-size: .875rem; color: var(--ink-2); padding: .4rem .2rem;
  transition: color .5s var(--ease);
}
.cart-btn:hover { color: var(--ink); }
.cart-btn__n {
  min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--sky); color: var(--paper);
  font-family: var(--mono); font-size: .625rem; letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.cart-btn__n[data-empty="true"] { background: var(--ink-3); }

/* Slide-in drawer */
.cart-scrim {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(20,26,30,.42);
  opacity: 0; pointer-events: none;
  transition: opacity .5s var(--ease);
}
.cart-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }

.cart {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
  width: min(28rem, 100%);
  background: var(--paper);
  display: flex; flex-direction: column;
  transform: translateX(101%);
  transition: transform .55s var(--ease);
  box-shadow: -24px 0 60px -30px rgba(20,26,30,.4);
  overscroll-behavior: contain;
}
.cart[data-open="true"] { transform: none; }
.cart__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--s5) var(--s5) var(--s4);
}
.cart__title {
  font-family: var(--display); font-size: 1.375rem; letter-spacing: 0;
}
.cart__close { font-size: 1.5rem; line-height: 1; color: var(--ink-2); padding: .2rem .4rem; }
.cart__close:hover { color: var(--ink); }
.cart__body { flex: 1; overflow-y: auto; padding: 0 var(--s5); }
.cart__foot { padding: var(--s5); background: var(--paper-2); }

.line { display: grid; grid-template-columns: 4.5rem 1fr auto; gap: var(--s4);
        padding: var(--s4) 0; align-items: start; }
.line + .line { border-top: 1px solid var(--rule-soft); }
.line__art { border-radius: var(--r-sm); overflow: hidden; background: var(--paper-3); }
.line__art img { width: 100%; height: auto; display: block; }
.line__title { font-family: var(--display); font-size: 1.0625rem; line-height: 1.2; }
.line__meta { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em;
              text-transform: uppercase; color: var(--ink-3); margin-top: .25rem; }
.line__price { font-family: var(--sans); font-weight: 500; font-variant-numeric: tabular-nums; }
.line__remove { font-size: .75rem; color: var(--ink-3); margin-left: .5rem; }
.line__remove:hover { color: var(--sky); }
.cart__empty { padding: var(--s7) 0; }

.qty { display: flex; align-items: center; gap: .4rem; margin-top: .55rem; }
.qty__btn {
  width: 1.5rem; height: 1.5rem; border-radius: 50%;
  display: grid; place-items: center; font-size: .875rem;
  background: var(--paper-2); color: var(--ink-2);
  transition: background .4s var(--ease);
}
.qty__btn:hover { background: var(--paper-3); color: var(--ink); }
.qty__n { min-width: 1.25rem; text-align: center; font-family: var(--mono);
          font-size: .8125rem; font-variant-numeric: tabular-nums; }

.sum { display: flex; justify-content: space-between; align-items: baseline;
       padding: .35rem 0; font-size: .9375rem; color: var(--ink-2); }
.sum--total { padding-top: var(--s4); margin-top: var(--s3);
              border-top: 1px solid var(--rule); color: var(--ink);
              font-size: 1.125rem; font-weight: 500; }
.sum span:last-child { font-variant-numeric: tabular-nums; }
.sum--save { color: var(--sky); }
.nudge { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .1em;
         text-transform: uppercase; color: var(--sky); margin-bottom: var(--s4); }

.btn--block { display: flex; justify-content: center; width: 100%; }
[data-disabled="true"] { opacity: .4; pointer-events: none; }

/* Checkout */
.checkout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr);
            gap: clamp(2rem,5vw,4.5rem); align-items: start; }
@media (max-width: 60rem) { .checkout { grid-template-columns: 1fr; } }
.panel { background: var(--paper); border-radius: var(--r-lg); padding: var(--s6);
         box-shadow: var(--lift-1); }
.section--sunk .panel { background: var(--paper); }
.field { display: block; margin-bottom: var(--s4); }
.field__label { display: block; font-family: var(--mono); font-size: var(--t-micro);
                letter-spacing: .13em; text-transform: uppercase; color: var(--ink-3);
                margin-bottom: .45rem; }
.field input, .field select {
  width: 100%; font: inherit; color: var(--ink);
  background: var(--paper-2); border: 1px solid transparent;
  border-radius: var(--r-sm); padding: .7rem .85rem;
  transition: border-color .4s var(--ease), background .4s var(--ease);
}
.field input:hover { background: var(--paper-3); }
.field input:focus-visible { outline: none; border-color: var(--sky); background: var(--paper); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); }
@media (max-width: 34rem) { .field-row { grid-template-columns: 1fr; } }

.handoff {
  border-radius: var(--r-md); padding: var(--s5);
  background: color-mix(in srgb, var(--sky) 7%, var(--paper));
}
.handoff__t { font-family: var(--display); font-size: 1.125rem; }
.handoff__b { margin-top: var(--s3); font-size: .9375rem; color: var(--ink-2); }

.demo-note {
  display: flex; gap: var(--s3); align-items: flex-start;
  background: color-mix(in srgb, var(--gold) 12%, var(--paper));
  border-radius: var(--r-md); padding: var(--s4) var(--s5);
  font-size: .875rem; color: var(--ink-2);
}
.demo-note strong { color: var(--ink); }

/* Order confirmation */
.dl { display: grid; grid-template-columns: 3.5rem 1fr auto; gap: var(--s4);
      align-items: center; padding: var(--s4) 0; }
.dl + .dl { border-top: 1px solid var(--rule-soft); }
.dl__art { border-radius: var(--r-sm); overflow: hidden; }
.dl__art img { width: 100%; height: auto; display: block; }

/* Legal / long-form copy */
.prose { max-width: 44rem; }
.prose h2 { font-family: var(--display); font-size: clamp(1.375rem,2.1vw,1.75rem);
            margin-top: var(--s8); letter-spacing: 0; }
.prose h2:first-of-type { margin-top: var(--s6); }
.prose h3 { font-family: var(--display); font-size: 1.125rem; margin-top: var(--s6); }
.prose p, .prose li { color: var(--ink-2); margin-top: var(--s4); line-height: 1.7; }
.prose ul { margin-top: var(--s4); }
.prose li { position: relative; padding-left: 1.15rem; margin-top: var(--s3); }
.prose li::before { content: ""; position: absolute; left: 0; top: .62rem;
                    width: .32rem; height: .32rem; border-radius: 50%; background: var(--gold); }
.prose a { color: var(--sky); text-decoration: underline; text-underline-offset: .18em; }
.prose .fill { background: color-mix(in srgb, var(--gold) 20%, transparent);
               padding: 0 .25rem; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) { .cart { transition: none; } }

/* Quick-add sits below the fold of the card, revealed on hover/focus */
.card__add {
  width: 100%; justify-content: center; padding: .6rem 1rem; font-size: .875rem;
  opacity: 0; transform: translateY(4px);
  transition: opacity .4s var(--ease), transform .4s var(--ease),
              border-color var(--slow) var(--ease);
  position: relative; z-index: 2;
}
.card:hover .card__add,
.card:focus-within .card__add { opacity: 1; transform: none; }
@media (hover: none) { .card__add { opacity: 1; transform: none; } }

/* ============================================================
   25. The personal pule — the optional ceremony with every order
   ============================================================ */
.pule {
  background: color-mix(in srgb, var(--sky) 6%, var(--paper));
  border-radius: var(--r-lg);
  padding: var(--s6);
}
.section--sunk .pule { background: color-mix(in srgb, var(--sky) 7%, var(--paper)); }
.pule__tag {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: var(--t-micro);
  letter-spacing: .16em; text-transform: uppercase; color: var(--sky);
}
.pule__tag::before {
  content: ""; width: .4rem; height: .4rem; border-radius: 50%; background: var(--gold);
}
.pule__t {
  font-family: var(--display); font-size: 1.375rem; line-height: 1.2;
  margin-top: var(--s4); letter-spacing: 0;
}
.pule__b { margin-top: var(--s3); font-size: .9375rem; color: var(--ink-2); }

/* Opt-in disclosure at checkout */
.optin { border-radius: var(--r-md); background: var(--paper-2); padding: var(--s5); }
.optin__head { display: flex; gap: var(--s4); align-items: flex-start; cursor: pointer; }
.optin__box {
  flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem;
  border-radius: 5px; border: 1.5px solid var(--ink-3); background: var(--paper);
  display: grid; place-items: center;
  transition: background .3s var(--ease), border-color .3s var(--ease);
}
.optin input[type="checkbox"] { position: absolute; opacity: 0; width: 0; height: 0; }
.optin input:checked ~ .optin__head .optin__box,
.optin__head input:checked + .optin__box { background: var(--sky); border-color: var(--sky); }
.optin__box::after {
  content: ""; width: .42rem; height: .72rem; margin-top: -.14rem;
  border: solid var(--paper); border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0); transform-origin: center;
  transition: transform .3s var(--ease);
}
.optin__head input:checked + .optin__box::after { transform: rotate(45deg) scale(1); }
.optin input:focus-visible + .optin__box { outline: 2px solid var(--sky); outline-offset: 2px; }
.optin__label { font-weight: 500; }
.optin__note { margin-top: .3rem; font-size: .875rem; color: var(--ink-2); }
.optin__fields {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .5s var(--ease);
}
.optin[data-open="true"] .optin__fields { grid-template-rows: 1fr; }
.optin__fields > div { overflow: hidden; }
.optin__inner { padding-top: var(--s5); }
.field textarea {
  width: 100%; font: inherit; color: var(--ink); min-height: 7rem; resize: vertical;
  background: var(--paper); border: 1px solid transparent;
  border-radius: var(--r-sm); padding: .7rem .85rem; line-height: 1.6;
}
.field textarea:focus-visible { outline: none; border-color: var(--sky); }
.consent {
  display: flex; gap: var(--s3); align-items: flex-start;
  font-size: .8125rem; color: var(--ink-2); margin-top: var(--s4);
}
.consent input { margin-top: .2rem; accent-color: var(--sky); }