/* ============================================================
   DIPPEDNBLACK CREATIONS — GLOBAL SHELL STYLESHEET
   Candle-Lit Studio Catalogue
   ============================================================ */

@property --bracket-color {
  syntax: '<color>';
  inherits: true;
  initial-value: #C6A15B;
}

:root {
  /* ---- Palette (single source of truth) ---- */
  --c-bg: #0B0B0C;
  --c-surface: #16171A;
  --c-text: #ECE9E4;
  --c-ink: #111111;          /* structural black: primary button, plinth, drip */
  --c-secondary: #1E5631;    /* witch green */
  --c-accent: #C6A15B;       /* brass */
  --c-paper: #F4F1EA;        /* light band */
  --c-matte: #FFFFFF;        /* product mattes only */

  --c-text-dim: rgba(236, 233, 228, 0.70);
  --c-text-faint: rgba(236, 233, 228, 0.46);
  --c-hairline: rgba(236, 233, 228, 0.12);
  --c-hairline-brass: rgba(198, 161, 91, 0.34);
  --c-hairline-green: rgba(30, 86, 49, 0.55);
  --c-ink-dim: rgba(17, 17, 17, 0.68);
  --c-ink-hairline: rgba(17, 17, 17, 0.16);

  /* ---- Type ---- */
  --ff-display: 'Bodoni Moda', 'Didot', 'Times New Roman', serif;
  --ff-body: 'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;

  --fs-hero: clamp(2.9rem, 6.4vw, 5.6rem);
  --fs-h2: clamp(2rem, 3.6vw, 3.1rem);
  --fs-h3: clamp(1.375rem, 2.1vw, 1.75rem);
  --fs-h4: 1.1875rem;
  --fs-series: 1.6rem;
  --fs-lead: clamp(1.0625rem, 1.35vw, 1.1875rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 13px;
  --fs-kicker: 11px;

  --lh-hero: 0.98;
  --lh-head: 1.06;
  --lh-body: 1.75;

  --tr-hero: -0.015em;
  --tr-word: -0.01em;
  --tr-kicker: 0.24em;
  --tr-sub: 0.28em;
  --tr-btn: 0.16em;

  --measure: 62ch;

  /* ---- Spacing scale ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;
  --sp-9: 88px;
  --sp-10: 120px;
  --sp-11: 160px;
  --section-y: clamp(72px, 9vw, 140px);

  /* ---- Structure ---- */
  --container: 1200px;
  --container-wide: 1400px;
  --container-narrow: 760px;
  --gutter: clamp(20px, 5vw, 56px);
  --header-h: 76px;
  --radius: 0px;          /* the brand has no rounding */
  --radius-pill: 0px;
  --hair: 1px;

  /* ---- Motion signature: 'ink blooming into paper' ---- */
  --mo-dur: 720ms;
  --mo-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --mo-dist: 22px;
  --mo-stagger: 110ms;
  --mo-hover: 220ms;
  --mo-accordion: 320ms;

  /* ---- Devices ---- */
  --drip-h: 28px;
  --drip-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath fill='%230B0B0C' d='M0 0 H1200 V10 C1184 10 1178 25 1160 25 C1143 25 1138 11 1120 11 L1044 11 C1029 11 1023 21 1008 21 C994 21 989 11 975 11 L884 11 C866 11 860 27 841 27 C823 27 817 11 801 11 L706 11 C692 11 686 19 673 19 C661 19 655 11 642 11 L546 11 C527 11 521 24 503 24 C486 24 480 11 464 11 L366 11 C352 11 346 18 334 18 C322 18 316 11 304 11 L206 11 C188 11 182 26 164 26 C147 26 141 11 125 11 L0 11 Z'/%3E%3C/svg%3E");
  --drip-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 28' preserveAspectRatio='none'%3E%3Cpath fill='%23F4F1EA' d='M0 0 H1200 V10 C1184 10 1178 25 1160 25 C1143 25 1138 11 1120 11 L1044 11 C1029 11 1023 21 1008 21 C994 21 989 11 975 11 L884 11 C866 11 860 27 841 27 C823 27 817 11 801 11 L706 11 C692 11 686 19 673 19 C661 19 655 11 642 11 L546 11 C527 11 521 24 503 24 C486 24 480 11 464 11 L366 11 C352 11 346 18 334 18 C322 18 316 11 304 11 L206 11 C188 11 182 26 164 26 C147 26 141 11 125 11 L0 11 Z'/%3E%3C/svg%3E");
}

/* ============================================================
   RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-weight: 300;
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100%;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
img { border-style: none; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: var(--hair) solid var(--c-hairline); margin: var(--sp-7) 0; }

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-display);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: var(--tr-hero);
  color: var(--c-text);
  text-wrap: balance;
}

h1, .h1 { font-size: var(--fs-hero); line-height: var(--lh-hero); }
h2, .h2 { font-size: var(--fs-h2); }
h3, .h3 { font-size: var(--fs-h3); line-height: 1.14; }
h4, .h4 { font-size: var(--fs-h4); line-height: 1.25; letter-spacing: 0; }

p { max-width: var(--measure); }
p + p { margin-top: 1.1em; }

.lead {
  font-size: var(--fs-lead);
  font-weight: 300;
  color: var(--c-text-dim);
  line-height: 1.7;
  max-width: 56ch;
}

.series-name {
  font-family: var(--ff-display);
  font-weight: 400;
  font-style: italic;
  font-size: var(--fs-series);
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--c-text);
}

.pull-quote {
  font-family: var(--ff-display);
  font-weight: 400;
  font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2.15rem);
  line-height: 1.34;
  letter-spacing: -0.01em;
  color: var(--c-text);
  max-width: 26ch;
  border-left: var(--hair) solid var(--c-accent);
  padding-left: var(--sp-5);
}

.label,
.price {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
}
.price { color: var(--c-accent); }

.kicker-plain {
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-kicker);
  text-transform: uppercase;
  letter-spacing: var(--tr-kicker);
  color: var(--c-accent);
}

strong, b { font-weight: 500; }
em { font-style: italic; }
small { font-size: var(--fs-small); }

/* Links */
a { color: var(--c-accent); text-decoration: none; transition: color var(--mo-hover) var(--mo-ease); }
a:hover { color: var(--c-text); }

.text-link {
  position: relative;
  color: var(--c-accent);
  font-weight: 400;
}
.text-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--mo-hover) var(--mo-ease);
}
.text-link:hover::after,
.text-link:focus-visible::after { width: 100%; }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

::selection { background: var(--c-secondary); color: var(--c-text); }

.skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -200%;
  z-index: 200;
  background: var(--c-ink);
  color: var(--c-text);
  border: var(--hair) solid var(--c-accent);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-btn);
  text-transform: uppercase;
}
.skip-link:focus-visible { top: var(--sp-3); }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: var(--section-y);
  background: var(--c-bg);
  color: var(--c-text);
}
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }

/* Modifiers declared after the base rule so they always win */
.section.section--surface { background: var(--c-surface); }
.section.section--ink { background: var(--c-ink); }
.section.section--green { background: var(--c-secondary); }
.section.section--light {
  background: var(--c-paper);
  color: var(--c-ink);
}
.section.section--light h1,
.section.section--light h2,
.section.section--light h3,
.section.section--light h4,
.section.section--light .series-name,
.section.section--light .pull-quote { color: var(--c-secondary); }
.section.section--light p { color: var(--c-ink); }
.section.section--light .lead { color: var(--c-ink-dim); }
.section.section--light a { color: var(--c-secondary); }
.section.section--light a:hover { color: var(--c-ink); }
.section.section--light hr { border-top-color: var(--c-ink-hairline); }
.section.section--light .series-kicker { color: var(--c-secondary); }
.section.section--light .series-kicker::after { background: var(--c-secondary); }
.section.section--light .kicker-plain { color: var(--c-secondary); }
.section.section--light .price { color: var(--c-secondary); }
.section.section--light .pull-quote { border-left-color: var(--c-secondary); }

.section-head { margin-bottom: clamp(40px, 5vw, 72px); max-width: 46ch; }

/* Grids — every fixed-minimum grid collapses to one column on phones */
.grid { display: grid; gap: clamp(20px, 2.6vw, 36px); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid--sidebar { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: start; }

@media (max-width: 1024px) {
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .grid--2,
  .grid--3,
  .grid--4,
  .grid--sidebar { grid-template-columns: minmax(0, 1fr); }
}

.stack > * + * { margin-top: var(--sp-5); }
.stack-sm > * + * { margin-top: var(--sp-3); }
.stack-lg > * + * { margin-top: var(--sp-7); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* Utilities */
.u-center { text-align: center; margin-inline: auto; }
.u-center p, .u-center .lead { margin-inline: auto; }
.u-measure { max-width: var(--measure); }
.u-dim { color: var(--c-text-dim); }
.u-brass { color: var(--c-accent); }
.u-green { color: var(--c-secondary); }
.u-hairline { border-top: var(--hair) solid var(--c-hairline); }
.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mt-4 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-7); }
.u-full { width: 100%; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: 48px;
  padding: 14px 26px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: var(--tr-btn);
  line-height: 1;
  border: var(--hair) solid transparent;
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  transition: background-color var(--mo-hover) var(--mo-ease),
              border-color var(--mo-hover) var(--mo-ease),
              color var(--mo-hover) var(--mo-ease);
}

.btn--primary {
  background: var(--c-ink);
  color: var(--c-text);
  border-color: var(--c-hairline-brass);
}
.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--c-secondary);
  border-color: var(--c-accent);
  color: var(--c-text);
}

.btn--ghost {
  position: relative;
  background: transparent;
  color: var(--c-accent);
  border-color: transparent;
  padding-inline: 2px;
}
.btn--ghost::after {
  content: '';
  position: absolute;
  left: 2px; right: auto; bottom: 10px;
  width: 0; height: 1px;
  background: currentColor;
  transition: width var(--mo-hover) var(--mo-ease);
}
.btn--ghost:hover::after,
.btn--ghost:focus-visible::after { width: calc(100% - 4px); }

.btn--outline {
  background: transparent;
  color: var(--c-text);
  border-color: var(--c-hairline-brass);
}
.btn--outline:hover,
.btn--outline:focus-visible { border-color: var(--c-accent); color: var(--c-accent); }

.section.section--light .btn--ghost { color: var(--c-secondary); }
.section.section--light .btn--outline { color: var(--c-ink); border-color: var(--c-ink-hairline); }
.section.section--light .btn--outline:hover { border-color: var(--c-secondary); color: var(--c-secondary); }

/* ============================================================
   DEVICE 1 — DIPPED EDGE
   ============================================================ */
.dipped-edge {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--drip-h);
  margin-bottom: -1px;
  background-image: var(--drip-dark);
  background-repeat: repeat-x;
  background-position: left top;
  background-size: 1200px var(--drip-h);
  pointer-events: none;
  z-index: 3;
}
.dipped-edge--light { background-image: var(--drip-light); }
.dipped-edge--top {
  top: 0;
  bottom: auto;
  margin-bottom: 0;
  margin-top: -1px;
  transform: rotate(180deg);
}

/* ============================================================
   DEVICE 2 — SERIES INDEX KICKER
   ============================================================ */
.series-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 12px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-kicker);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tr-kicker);
  color: var(--c-accent);
}
.series-kicker::after {
  content: '';
  flex: 0 0 auto;
  width: 24px;
  height: 1px;
  background: var(--c-accent);
}

/* ============================================================
   DEVICE 3 — LEADED-GLASS CARD
   ============================================================ */
.leaded-card {
  --bracket-color: var(--c-accent);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  background: var(--c-surface);
  border: var(--hair) solid var(--c-secondary);
  border-radius: 0;
  padding: var(--sp-6);
  color: var(--c-text);
  transition: border-color var(--mo-hover) var(--mo-ease),
              --bracket-color var(--mo-hover) var(--mo-ease);
}
.leaded-card::before {
  content: '';
  position: absolute;
  inset: 5px;
  pointer-events: none;
  background-image:
    linear-gradient(var(--bracket-color), var(--bracket-color)),
    linear-gradient(var(--bracket-color), var(--bracket-color)),
    linear-gradient(var(--bracket-color), var(--bracket-color)),
    linear-gradient(var(--bracket-color), var(--bracket-color)),
    linear-gradient(var(--bracket-color), var(--bracket-color)),
    linear-gradient(var(--bracket-color), var(--bracket-color)),
    linear-gradient(var(--bracket-color), var(--bracket-color)),
    linear-gradient(var(--bracket-color), var(--bracket-color));
  background-size:
    10px 1px, 1px 10px,
    10px 1px, 1px 10px,
    10px 1px, 1px 10px,
    10px 1px, 1px 10px;
  background-position:
    left top, left top,
    right top, right top,
    left bottom, left bottom,
    right bottom, right bottom;
  background-repeat: no-repeat;
}
.leaded-card:hover,
.leaded-card:focus-within {
  border-color: var(--c-accent);
  --bracket-color: var(--c-text);
}
.leaded-card .price { margin-top: auto; padding-top: var(--sp-4); }
.leaded-card__media { margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) 0; }
.leaded-card__media img { width: 100%; object-fit: cover; }

/* Card variants — defined after the base and compounded so they win */
.leaded-card.card--ink { background: var(--c-ink); }
.leaded-card.card--dark { background: var(--c-bg); }
.leaded-card.card--green { background: var(--c-secondary); border-color: var(--c-accent); }
.leaded-card.card--green .price { color: var(--c-text); }
.leaded-card.card--flat { border-color: var(--c-hairline); }

/* Flat surfaces — testimonials, forms, newsletter (never leaded) */
.flat-panel {
  background: var(--c-surface);
  border: var(--hair) solid var(--c-hairline);
  padding: clamp(24px, 4vw, 48px);
}
.flat-panel.panel--ink { background: var(--c-ink); }
.flat-panel.panel--bare { background: transparent; border-color: var(--c-hairline-green); }

/* Tag chips */
.chip {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 12px;
  background: var(--c-secondary);
  color: var(--c-text);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.chip.chip--brass { background: transparent; color: var(--c-accent); border: var(--hair) solid var(--c-hairline-brass); }

/* ============================================================
   IMAGERY TREATMENT
   ============================================================ */
.img-treated {
  position: relative;
  display: block;
  background: var(--c-bg);
  filter: contrast(1.1) saturate(1.06) brightness(0.93) sepia(0.08) hue-rotate(-6deg);
}
.img-treated img {
  display: block;
  width: 100%;
  filter: contrast(1.06) saturate(1.05) brightness(0.95);
}
.img-treated::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.04;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
}
.img-treated::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(30, 86, 49, 0.18), rgba(11, 11, 12, 0.05) 55%, rgba(198, 161, 91, 0.10));
  mix-blend-mode: soft-light;
}
img.img-treated::before,
img.img-treated::after { content: none; }
.img-treated.img--matte { background: var(--c-matte); }

figure { margin: 0; }
figcaption {
  margin-top: var(--sp-3);
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--c-text-faint);
  letter-spacing: 0.02em;
}

/* ============================================================
   FORMS
   ============================================================ */
.field { display: block; margin-bottom: var(--sp-6); }
.field__label {
  display: block;
  margin-bottom: var(--sp-2);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-kicker);
  text-transform: uppercase;
  letter-spacing: var(--tr-kicker);
  color: var(--c-accent);
}
.input,
.textarea,
.select {
  width: 100%;
  min-height: 48px;
  padding: 12px 2px;
  background: transparent;
  color: var(--c-text);
  font-weight: 300;
  border: 0;
  border-bottom: var(--hair) solid var(--c-hairline);
  border-radius: 0;
  transition: border-color var(--mo-hover) var(--mo-ease);
}
.textarea { min-height: 140px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--c-text-faint); }
.input:focus,
.textarea:focus,
.select:focus { outline: none; border-bottom-color: var(--c-accent); }
.input:focus-visible,
.textarea:focus-visible,
.select:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 4px; }

/* ============================================================
   ACCORDION (FAQ)
   ============================================================ */
.accordion { border-top: var(--hair) solid var(--c-hairline); }
.accordion__item { border-bottom: var(--hair) solid var(--c-hairline); }
.accordion__item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 56px;
  padding: var(--sp-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  letter-spacing: -0.01em;
  color: var(--c-text);
  transition: color var(--mo-hover) var(--mo-ease);
}
.accordion__item > summary::-webkit-details-marker { display: none; }
.accordion__item > summary::after {
  content: '';
  flex: 0 0 auto;
  width: 12px; height: 12px;
  border-right: var(--hair) solid var(--c-accent);
  border-bottom: var(--hair) solid var(--c-accent);
  transform: rotate(45deg) translateY(-3px);
  transition: transform var(--mo-accordion) var(--mo-ease);
}
.accordion__item[open] > summary::after { transform: rotate(225deg) translateY(-3px); }
.accordion__item > summary:hover { color: var(--c-accent); }
.accordion__panel { padding: 0 0 var(--sp-6); color: var(--c-text-dim); }
.section.section--light .accordion { border-top-color: var(--c-ink-hairline); }
.section.section--light .accordion__item { border-bottom-color: var(--c-ink-hairline); }
.section.section--light .accordion__item > summary { color: var(--c-secondary); }
.section.section--light .accordion__panel { color: var(--c-ink-dim); }

/* ============================================================
   REVEAL SYSTEM (driven by the brand motion tokens)
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translate3d(0, var(--mo-dist), 0);
  transition:
    opacity var(--mo-dur) var(--mo-ease),
    transform var(--mo-dur) var(--mo-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}
.reveal--d1 { --reveal-delay: calc(var(--mo-stagger) * 1); }
.reveal--d2 { --reveal-delay: calc(var(--mo-stagger) * 2); }
.reveal--d3 { --reveal-delay: calc(var(--mo-stagger) * 3); }
.reveal--d4 { --reveal-delay: calc(var(--mo-stagger) * 4); }
.reveal--d5 { --reveal-delay: calc(var(--mo-stagger) * 5); }
.reveal--d6 { --reveal-delay: calc(var(--mo-stagger) * 6); }
.reveal--d7 { --reveal-delay: calc(var(--mo-stagger) * 7); }
.reveal--d8 { --reveal-delay: calc(var(--mo-stagger) * 8); }

/* Auto-stagger for index-style groups */
.reveal-group > .reveal:nth-child(1) { --reveal-delay: 0ms; }
.reveal-group > .reveal:nth-child(2) { --reveal-delay: calc(var(--mo-stagger) * 1); }
.reveal-group > .reveal:nth-child(3) { --reveal-delay: calc(var(--mo-stagger) * 2); }
.reveal-group > .reveal:nth-child(4) { --reveal-delay: calc(var(--mo-stagger) * 3); }
.reveal-group > .reveal:nth-child(5) { --reveal-delay: calc(var(--mo-stagger) * 4); }
.reveal-group > .reveal:nth-child(6) { --reveal-delay: calc(var(--mo-stagger) * 5); }
.reveal-group > .reveal:nth-child(7) { --reveal-delay: calc(var(--mo-stagger) * 6); }
.reveal-group > .reveal:nth-child(8) { --reveal-delay: calc(var(--mo-stagger) * 7); }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(11, 11, 12, 0.88);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  border-bottom: var(--hair) solid var(--c-hairline);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  min-height: var(--header-h);
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Identity */
.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--c-text);
  flex: 0 0 auto;
  padding-block: 10px;
}
.brand:hover { color: var(--c-text); }
.brand__mark { flex: 0 0 auto; width: 30px; height: 30px; }
.brand__mark svg { width: 100%; height: 100%; }
.mark-ring { fill: none; stroke: var(--c-accent); stroke-width: 2; }
.mark-dip { fill: var(--c-secondary); }

.brand__text { display: block; }
.wordmark {
  display: block;
  font-family: var(--ff-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--tr-word);
  line-height: 1;
  font-size: 1.16rem;
  color: var(--c-text);
  white-space: nowrap;
}
.wordmark__dim { opacity: 0.7; }
.wordmark__lead { opacity: 1; }
.wordmark__dot { color: var(--c-accent); margin-left: -0.02em; }
.brand__sub {
  display: block;
  margin-top: 5px;
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: 10px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tr-sub);
  color: var(--c-accent);
  white-space: nowrap;
}

/* Desktop nav */
.nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  margin-left: auto;
}
.nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0.01em;
  color: var(--c-text-dim);
  white-space: nowrap;
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 12px;
  width: 0; height: 1px;
  background: var(--c-accent);
  transition: width var(--mo-hover) var(--mo-ease);
}
.nav__link:hover,
.nav__link:focus-visible { color: var(--c-text); }
.nav__link:hover::after,
.nav__link:focus-visible::after,
.nav__link[aria-current='page']::after { width: 100%; }
.nav__link[aria-current='page'] { color: var(--c-text); }

.header-cta { flex: 0 0 auto; margin-left: clamp(12px, 1.8vw, 28px); }

/* Burger + mobile panel */
.nav-toggle { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.nav-burger {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
  width: 48px;
  height: 48px;
  margin-left: auto;
  border: var(--hair) solid var(--c-hairline-brass);
  cursor: pointer;
}
.nav-burger span {
  display: block;
  width: 20px;
  height: 1px;
  background: var(--c-text);
  transition: transform var(--mo-hover) var(--mo-ease), opacity var(--mo-hover) var(--mo-ease);
}
.nav-toggle:focus-visible + .header-inner .nav-burger { outline: 2px solid var(--c-accent); outline-offset: 3px; }

.mobile-panel {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  top: var(--header-h);
  height: calc(100dvh - var(--header-h));
  max-height: calc(100dvh - var(--header-h));
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--c-bg);
  border-top: var(--hair) solid var(--c-hairline-brass);
  padding: var(--sp-5) var(--gutter) calc(var(--sp-8) + env(safe-area-inset-bottom));
  z-index: 99;
}
.mobile-panel__list { display: flex; flex-direction: column; }
.mobile-panel__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: var(--sp-2) 0;
  border-bottom: var(--hair) solid var(--c-hairline);
  font-family: var(--ff-body);
  font-weight: 400;
  font-size: 1.0625rem;
  color: var(--c-text);
}
.mobile-panel__link:hover { color: var(--c-accent); }
.mobile-panel__cta { margin-top: var(--sp-6); width: 100%; }
.mobile-panel__meta {
  margin-top: var(--sp-6);
  font-size: var(--fs-kicker);
  text-transform: uppercase;
  letter-spacing: var(--tr-kicker);
  color: var(--c-text-faint);
}

@media (max-width: 1120px) {
  .nav { display: none; }
  .header-cta { display: none; }
  .nav-burger { display: flex; }
  .mobile-panel { display: block; visibility: hidden; opacity: 0; transform: translate3d(0, -8px, 0); transition: opacity var(--mo-hover) var(--mo-ease), transform var(--mo-hover) var(--mo-ease), visibility 0s linear var(--mo-hover); }
  .nav-toggle:checked ~ .mobile-panel { visibility: visible; opacity: 1; transform: none; transition-delay: 0s; }
  .nav-toggle:checked ~ .header-inner .nav-burger span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle:checked ~ .header-inner .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-toggle:checked ~ .header-inner .nav-burger span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
}

@media (max-width: 560px) {
  :root { --header-h: 68px; }
  .wordmark { font-size: 1.02rem; }
  .brand__sub { font-size: 9px; letter-spacing: 0.22em; }
  .brand__mark { width: 26px; height: 26px; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  position: relative;
  background: var(--c-ink);
  color: var(--c-text);
  border-top: var(--hair) solid var(--c-hairline-green);
  padding-block: clamp(56px, 7vw, 96px) var(--sp-7);
}
.footer-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.footer__brand .brand { margin-bottom: var(--sp-5); }
.footer__blurb {
  max-width: 34ch;
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--c-text-dim);
}
.footer__title {
  margin-bottom: var(--sp-4);
  font-family: var(--ff-body);
  font-weight: 500;
  font-size: var(--fs-kicker);
  text-transform: uppercase;
  letter-spacing: var(--tr-kicker);
  color: var(--c-accent);
}
.footer__list { display: flex; flex-direction: column; gap: 2px; }
.footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  color: var(--c-text-dim);
  font-weight: 300;
  font-size: var(--fs-small);
}
.footer__list a:hover { color: var(--c-accent); }
.footer__meta {
  font-size: var(--fs-small);
  font-weight: 300;
  color: var(--c-text-dim);
  line-height: 1.8;
}
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: var(--sp-5);
  border-top: var(--hair) solid var(--c-hairline);
  font-size: var(--fs-label);
  color: var(--c-text-faint);
}
.footer-legal { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.footer-legal a { color: var(--c-text-faint); font-size: var(--fs-label); }
.footer-legal a:hover { color: var(--c-accent); }
.footer-attribution a { color: var(--c-accent); }
.footer-attribution a:hover { color: var(--c-text); }

@media (max-width: 900px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-visible {
    opacity: 1;
    transform: none;
    transition: none;
    transition-delay: 0ms;
  }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}