/* =========================================================
   NOCTURNE — Social Dance Archive
   Dark gallery archive-wall · full collage
   ========================================================= */

:root {
  --bg: #141013;
  --surface: #20191d;
  --surface-2: #2b2126;
  --ink: #EDE4DA;
  --ink-soft: #b9aca0;
  --ink-faint: #8f8377;
  --accent: #9E1B2F;         /* blood-red thread / fills */
  --accent-text: #e0616f;    /* readable red on dark */
  --accent-2: #C79A4B;       /* brass / wax gold */
  --accent-2-text: #dcb972;
  --line: rgba(237, 228, 218, 0.14);
  --line-strong: rgba(237, 228, 218, 0.28);
  --paper: #e7dcc6;          /* tracing / kraft paper light */
  --paper-ink: #241d16;

  --serif: Georgia, "Times New Roman", Times, serif;
  --mono: "Courier New", Courier, monospace;
  --hand: "Segoe Script", "Bradley Hand", "Brush Script MT", cursive;

  --header-h: 76px;
  --container: 1180px;

  interpolate-size: allow-keywords;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  overflow-x: clip;
  max-width: 100%;
}

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

body {
  background-color: var(--bg);
  background-image:
    radial-gradient(circle at 18% 12%, rgba(158,27,47,0.10), transparent 42%),
    radial-gradient(circle at 82% 88%, rgba(199,154,75,0.08), transparent 46%),
    url("../images/doku-cork.jpg");
  background-attachment: fixed, fixed, scroll;
  background-size: cover, cover, 620px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

figure, figcaption, blockquote { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 700;
  font-style: italic;
  letter-spacing: -0.01em;
  line-height: 1.14;
  color: var(--ink);
  margin: 0 0 .5em;
}

p { margin: 0 0 1rem; overflow-wrap: anywhere; }
a { color: var(--accent-2-text); text-decoration: none; }
a:hover { color: var(--ink); }

::selection { background: var(--accent); color: #fff; }

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

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 64px);
  position: relative;
}

.eyebrow {
  font-family: var(--mono);
  font-style: normal;
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 0.72rem;
  color: var(--accent-2-text);
  margin: 0 0 1rem;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--accent); color: #fff; padding: 10px 16px;
  font-family: var(--mono); border-radius: 0 0 6px 0;
}
.skip-link:focus { left: 0; }

/* ---------------------------------------------------------
   COLLAGE PRIMITIVES
   --------------------------------------------------------- */

/* tape strip over a corner */
.tape {
  position: absolute;
  width: 92px; height: 28px;
  background: linear-gradient(105deg, rgba(199,154,75,0.42), rgba(231,220,198,0.30));
  box-shadow: 0 1px 4px rgba(0,0,0,.35);
  opacity: .82;
  pointer-events: none;
  z-index: 4;
}
.tape::after {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.10) 0 3px, transparent 3px 7px);
  mix-blend-mode: overlay;
}
.tape--tl { top: -12px; left: 16px; transform: rotate(-8deg); }
.tape--tr { top: -12px; right: 16px; transform: rotate(7deg); }
.tape--bl { bottom: -12px; left: 24px; transform: rotate(6deg); }
.tape--red { background: linear-gradient(105deg, rgba(158,27,47,0.55), rgba(158,27,47,0.30)); }

/* metal pin / thumbtack */
.pin {
  position: absolute;
  width: 20px; height: 20px; border-radius: 50%;
  background:
    radial-gradient(circle at 34% 30%, #fff 0 12%, var(--accent) 42%, #5c0f1c 100%);
  box-shadow: 0 3px 6px rgba(0,0,0,.5), inset 0 -2px 3px rgba(0,0,0,.35);
  z-index: 5; pointer-events: none;
}
.pin--gold {
  background: radial-gradient(circle at 34% 30%, #fff 0 12%, var(--accent-2) 46%, #6e4e17 100%);
}

/* metal clip */
.clip {
  position: absolute; top: -14px; width: 22px; height: 52px;
  border: 3px solid #b9b2a6; border-radius: 11px;
  background: linear-gradient(90deg, #d9d2c5, #8f887c);
  box-shadow: 0 2px 5px rgba(0,0,0,.45);
  z-index: 5; pointer-events: none;
}

/* wax seal with glossy hover sheen */
.wax {
  position: relative;
  display: inline-grid; place-items: center;
  width: 62px; height: 62px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #c62740, var(--accent) 55%, #5c0f1c 100%);
  color: #f3d9dd; font-family: var(--serif); font-style: italic; font-size: .62rem;
  box-shadow: 0 6px 14px rgba(0,0,0,.5), inset 0 -3px 6px rgba(0,0,0,.4);
  text-align: center; line-height: 1.05;
  overflow: hidden;
}
.wax::before {
  content: ""; position: absolute; inset: 6px; border-radius: 50%;
  border: 1px dashed rgba(255,255,255,.35);
}
.wax::after {
  content: ""; position: absolute; top: -60%; left: -30%;
  width: 60%; height: 220%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.55), transparent);
  transform: translateX(-120%) rotate(8deg);
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
  pointer-events: none;
}
.wax:hover::after { transform: translateX(260%) rotate(8deg); }
.wax--gold { background: radial-gradient(circle at 36% 30%, #e3c078, var(--accent-2) 55%, #6e4e17 100%); color: #2a1e08; }

/* typewriter stamp label */
.stamp {
  display: inline-block;
  font-family: var(--mono);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.66rem;
  color: var(--accent-text);
  border: 1.5px solid var(--accent);
  padding: 4px 9px;
  border-radius: 3px;
  transform: rotate(-3deg);
  box-shadow: inset 0 0 0 1px rgba(158,27,47,.25);
  opacity: .92;
}
.stamp--gold { color: var(--accent-2-text); border-color: var(--accent-2); box-shadow: inset 0 0 0 1px rgba(199,154,75,.25); }

/* registration / crop marks */
.reg {
  position: absolute; width: 16px; height: 16px; pointer-events: none; z-index: 3;
  opacity: .5;
}
.reg::before, .reg::after {
  content: ""; position: absolute; background: var(--ink-faint);
}
.reg::before { left: 50%; top: 0; width: 1px; height: 100%; transform: translateX(-50%); }
.reg::after { top: 50%; left: 0; height: 1px; width: 100%; transform: translateY(-50%); }

/* handwriting scrawl */
.scrawl {
  font-family: var(--hand);
  color: var(--accent-2-text);
  font-size: 1.15rem;
  transform: rotate(-4deg);
  display: inline-block;
}

/* thread-seam divider */
.seam {
  height: 26px; margin: 0; border: 0; position: relative;
  background: none;
}
.seam::before {
  content: ""; position: absolute; top: 50%; left: 6%; right: 6%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--accent) 0 12px, transparent 12px 22px);
  opacity: .6;
}

/* torn / deckle paper edge helper */
.torn {
  clip-path: polygon(0% 4%, 6% 0%, 18% 3%, 32% 0%, 48% 4%, 63% 1%, 78% 4%, 92% 0%, 100% 5%,
                     99% 96%, 88% 100%, 74% 97%, 58% 100%, 43% 96%, 28% 100%, 14% 97%, 3% 100%, 1% 95%);
}

/* photo snapshot (polaroid) */
.snap {
  background: #f3ece0;
  padding: 10px 10px 34px;
  box-shadow: 0 14px 30px -14px rgba(0,0,0,.75), 0 2px 6px rgba(0,0,0,.4);
  position: relative;
}
.snap img { width: 100%; display: block; filter: grayscale(1) contrast(1.05); }
.snap figcaption {
  position: absolute; bottom: 8px; left: 12px; right: 12px;
  font-family: var(--hand); color: #2a2118; font-size: .92rem; text-align: center;
}

/* paper board panel */
.board {
  position: relative;
  background-color: var(--surface);
  background-image: linear-gradient(rgba(20,16,19,.55), rgba(20,16,19,.55)), url("../images/doku-paper.jpg");
  background-size: 480px;
  border: 1px solid var(--line);
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.9), inset 0 0 0 1px rgba(0,0,0,.25);
  overflow: hidden;
}

/* tracing-paper envelope */
.envelope {
  position: relative;
  background:
    linear-gradient(160deg, rgba(43,33,38,.9), rgba(32,25,29,.94)),
    url("../images/doku-kraft.jpg");
  background-size: cover, 360px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 18px 40px -24px rgba(0,0,0,.85);
}

/* ---------------------------------------------------------
   HEADER + NAV
   --------------------------------------------------------- */

.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 1080;
  height: var(--header-h);
  display: flex; align-items: center;
  background: rgba(20, 16, 19, 0.92);
  backdrop-filter: none;
  border-bottom: 1px solid var(--line);
  transition: background .24s ease, height .24s ease, box-shadow .24s ease;
}
.site-header.scrolled {
  background: rgba(16, 12, 15, 0.98);
  height: 64px;
  box-shadow: 0 8px 24px -16px rgba(0,0,0,.7);
}
.header-inner {
  width: 100%; max-width: var(--container); margin-inline: auto;
  padding-inline: clamp(18px, 5vw, 64px);
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand {
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: 1.28rem; letter-spacing: -0.01em; color: var(--ink);
  display: flex; align-items: baseline; gap: 8px;
}
.brand:hover { color: var(--ink); }
.brand span { font-family: var(--mono); font-style: normal; font-size: .58rem;
  letter-spacing: .22em; color: var(--accent-2-text); text-transform: uppercase; }

.nav-desktop { display: none; align-items: center; gap: 18px; }
@media (min-width: 1100px) { .nav-desktop { gap: 24px; } }
.nav-desktop a {
  position: relative; font-family: var(--mono); font-size: .82rem;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft);
  padding: 4px 0; white-space: nowrap;
}
.nav-desktop .nav-cta { white-space: nowrap; }
.nav-desktop a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--accent); transition: right .24s cubic-bezier(.2,.7,.2,1);
}
.nav-desktop a:hover, .nav-desktop a.is-active { color: var(--ink); }
.nav-desktop a:hover::after, .nav-desktop a.is-active::after { right: 0; }
.nav-desktop .nav-cta::after { display: none; }
.nav-desktop .nav-cta {
  background: var(--accent); color: #fff; padding: 9px 16px; border-radius: 3px;
  letter-spacing: .08em; transform: rotate(-1.5deg);
}
.nav-desktop .nav-cta:hover { background: var(--accent-2); color: #241d16; }

/* hamburger */
.nav-toggle {
  position: relative; z-index: 1100;
  width: 44px; height: 44px; border: 1px solid var(--line-strong);
  background: rgba(32,25,29,.7); border-radius: 4px; cursor: pointer;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
}
.nav-toggle span {
  width: 22px; height: 2px; background: var(--ink); border-radius: 2px;
  transition: transform .28s ease, opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* drawer */
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 1050;
  width: min(360px, 92vw);
  background: var(--surface);
  background-image: linear-gradient(rgba(16,12,15,.85), rgba(16,12,15,.9)), url("../images/doku-cork.jpg");
  background-size: cover, 400px;
  border-left: 2px solid var(--accent);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s linear .32s;
  padding: calc(var(--header-h) + 24px) 28px 32px;
  overflow-y: auto;
}
.drawer.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform .32s cubic-bezier(.2,.7,.2,1), visibility 0s;
}
.drawer a {
  display: block; font-family: var(--serif); font-style: italic; font-size: 1.5rem;
  color: var(--ink); padding: 12px 0; border-bottom: 1px dashed var(--line);
  transform: rotate(-1deg);
}
.drawer a:hover, .drawer a.is-active { color: var(--accent-2-text); }
.drawer .nav-cta {
  display: block; text-align: center; margin-top: 22px; font-family: var(--mono);
  font-style: normal; font-size: .9rem; text-transform: uppercase; letter-spacing: .1em;
  background: var(--accent); color: #fff; padding: 14px; border-radius: 3px; border-bottom: 0;
  transform: rotate(-1.5deg);
}
.drawer .nav-cta:hover { background: var(--accent-2); color: #241d16; }
.drawer-backdrop {
  position: fixed; inset: 0; z-index: 1040; background: rgba(0,0,0,.55);
  opacity: 0; visibility: hidden; transition: opacity .24s ease, visibility .24s ease;
}
.drawer-backdrop.is-open { opacity: 1; visibility: visible; }

@media (min-width: 1024px) {
  .nav-desktop { display: flex; }
  .nav-toggle { display: none; }
}

/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--mono); font-size: .84rem; text-transform: uppercase; letter-spacing: .09em;
  padding: 14px 24px; border-radius: 3px; cursor: pointer; border: 1px solid transparent;
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  text-align: center;
}
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -12px rgba(158,27,47,.9); transform: rotate(-1deg); }
.btn-primary:hover, .btn-primary:focus-visible { background: var(--accent-2); color: #241d16; transform: translateY(-2px) rotate(-1deg); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover, .btn-ghost:focus-visible { background: var(--surface-2); color: var(--ink); transform: translateY(-2px); }
.btn-block { width: 100%; }

/* ---------------------------------------------------------
   MAIN + SECTIONS
   --------------------------------------------------------- */

main { padding-top: var(--header-h); }

.section { padding-block: clamp(56px, 9vw, 108px); position: relative; }

.section-head { max-width: 720px; margin-bottom: 44px; position: relative; }
.section-head h2 { font-size: clamp(2rem, 4.6vw, 3.2rem); }
.section-head p { color: var(--ink); max-width: 60ch; }

/* ---------------------------------------------------------
   HERO — night-wall
   --------------------------------------------------------- */

.hero {
  position: relative; overflow: hidden;
  min-height: min(92vh, 820px);
  display: flex; align-items: center;
  padding-block: clamp(60px, 10vw, 120px);
}
.hero-wall {
  position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(rgba(20,16,19,.72), rgba(20,16,19,.82)), url("../images/hero-wall.jpg");
  background-size: cover; background-position: center;
}
.hero-wall::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 50% 40%, transparent 30%, rgba(16,12,15,.7) 100%);
}
/* scattered pinned snaps in hero */
.hero-snaps { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-snaps .snap {
  position: absolute; width: clamp(110px, 13vw, 172px); pointer-events: none;
}
.hero-snaps .s1 { top: 12%; left: 4%; transform: rotate(-7deg); }
.hero-snaps .s2 { top: 8%; right: 6%; transform: rotate(6deg); }
.hero-snaps .s3 { bottom: 9%; left: 8%; transform: rotate(4deg); }
.hero-snaps .s4 { bottom: 12%; right: 5%; transform: rotate(-5deg); }

.hero-inner { position: relative; z-index: 2; max-width: 860px; }
.hero .eyebrow { display: inline-block; background: rgba(16,12,15,.65); padding: 6px 12px; border: 1px solid var(--line); }

.ransom {
  font-family: var(--serif); font-weight: 700; font-style: italic;
  font-size: clamp(2.9rem, 9vw, 6.6rem); line-height: 1.12; letter-spacing: -0.02em;
  margin: 0 0 24px; color: var(--ink);
}
.ransom .cut {
  display: inline-block; padding: .02em .12em; margin: 0 .01em;
  background: var(--surface-2); box-shadow: 0 4px 10px -4px rgba(0,0,0,.7);
  transform: rotate(var(--r, 0deg));
}
.ransom .cut.red { background: var(--accent); color: #fff; }
.ransom .cut.gold { background: var(--accent-2); color: #241d16; }
.ransom .cut.plain { background: transparent; box-shadow: none; }

.hero-sub {
  font-size: clamp(1rem, 1.5vw, 1.18rem); color: var(--ink-soft);
  max-width: 54ch; margin-bottom: 30px;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.trust-strip {
  display: flex; flex-wrap: wrap; gap: 10px 8px; margin-top: 30px;
}
.trust-strip .stamp { transform: rotate(var(--r, -2deg)); }

/* hero stats woven in */
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 28px 40px; margin-top: 40px;
  padding-top: 26px; border-top: 1px dashed var(--line);
}
.hero-stats .stat .num {
  font-family: var(--serif); font-style: italic; font-weight: 700;
  font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--accent-2-text);
  font-variant-numeric: tabular-nums; display: inline-block; min-width: 3ch;
}
.hero-stats .stat .lbl { font-family: var(--mono); font-size: .72rem; text-transform: uppercase;
  letter-spacing: .12em; color: var(--ink-faint); }

/* ---------------------------------------------------------
   OUR STORY — torn diary pages
   --------------------------------------------------------- */

.story-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px);
  align-items: start;
}
.diary-page {
  position: relative;
  background-color: var(--paper);
  background-image: url("../images/doku-paper.jpg");
  background-size: 380px;
  color: var(--paper-ink);
  padding: clamp(26px, 3.4vw, 44px);
  transform: rotate(-1.4deg);
  box-shadow: 0 24px 44px -26px rgba(0,0,0,.85);
}
.diary-page h3 { color: #2b2118; font-size: 1.7rem; }
.diary-page p { color: #3d3227; }
.diary-page .scrawl { color: var(--accent); }
.diary-page.ruled {
  background-image:
    repeating-linear-gradient(transparent 0 30px, rgba(43,33,24,.16) 30px 31px),
    url("../images/doku-paper.jpg");
  background-size: auto, 380px;
}
.story-side { display: grid; gap: 22px; }
.story-side .snap { width: 78%; }
.story-side .snap.offset { margin-left: auto; }
.ticket {
  position: relative; background: var(--surface-2); border: 1px dashed var(--accent-2);
  padding: 16px 18px; transform: rotate(1.6deg); color: var(--ink-soft);
  font-family: var(--mono); font-size: .8rem;
}
.ticket b { color: var(--accent-2-text); font-family: var(--serif); font-style: italic; }

/* ---------------------------------------------------------
   DANCES WE KEEP — envelope cards
   --------------------------------------------------------- */

.dances { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 34px); }
.env-card {
  position: relative; padding: 22px 22px 26px;
}
.env-card:nth-child(1) { transform: rotate(-1.6deg); }
.env-card:nth-child(2) { transform: rotate(1.1deg); }
.env-card:nth-child(3) { transform: rotate(-0.8deg); }
.env-card .photo {
  aspect-ratio: 4/3; overflow: hidden; margin-bottom: 16px;
  border: 6px solid #f3ece0; box-shadow: 0 10px 24px -14px rgba(0,0,0,.8);
}
.env-card .photo img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.06); transition: filter .4s ease, transform .5s ease; }
.env-card:hover .photo img { filter: grayscale(0) contrast(1.02); transform: scale(1.04); }
.env-card h3 { font-size: 1.5rem; }
.env-card .meta { font-family: var(--mono); font-size: .74rem; color: var(--ink-faint); text-transform: uppercase; letter-spacing: .1em; margin-bottom: 10px; }
.env-card p { color: var(--ink-soft); font-size: .92rem; }
.env-card .price-tag {
  position: absolute; top: -10px; right: 14px; z-index: 6;
  background: var(--paper); color: var(--paper-ink); font-family: var(--mono);
  font-size: .74rem; padding: 6px 12px; transform: rotate(4deg);
  box-shadow: 0 6px 14px -8px rgba(0,0,0,.7);
  clip-path: polygon(10% 0, 100% 0, 100% 100%, 10% 100%, 0 50%);
  padding-left: 20px;
}

/* ---------------------------------------------------------
   LEAD-LINE feature (signature effect)
   --------------------------------------------------------- */

.leadline {
  position: relative; overflow: hidden;
}
.leadline-wrap {
  position: relative; max-width: clamp(900px, 92%, 1120px); margin-inline: auto;
  border: 8px solid #efe7d9; box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
  transform: rotate(-0.6deg);
}
.leadline-wrap img { width: 100%; display: block; filter: grayscale(1) contrast(1.08); }
.leadline-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.leadline-path {
  fill: none; stroke: var(--accent); stroke-width: 3; stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(158,27,47,.7));
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.leadline-dot { fill: var(--accent-2); filter: drop-shadow(0 0 5px rgba(199,154,75,.8)); }
.leadline .cap {
  position: absolute; bottom: 14px; left: 18px; z-index: 3;
  font-family: var(--hand); color: #f3d9dd; font-size: 1.2rem; transform: rotate(-3deg);
  text-shadow: 0 2px 6px rgba(0,0,0,.8);
}
.leadline .stamp { position: absolute; top: 16px; right: 18px; z-index: 3; }

/* ---------------------------------------------------------
   MILONGA ARCHIVE — date gallery wall
   --------------------------------------------------------- */

.archive-wall {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
}
.arch-item { position: relative; }
.arch-item .snap { transform: rotate(var(--r, 0deg)); transition: transform .35s ease, box-shadow .35s ease; }
.arch-item .snap img { aspect-ratio: 1/1; object-fit: cover; }
.arch-item:hover .snap { transform: rotate(0deg) scale(1.03); box-shadow: 0 22px 40px -18px rgba(0,0,0,.85); z-index: 5; }
.arch-item .datestamp {
  position: absolute; top: -8px; left: -6px; z-index: 6;
}

/* ---------------------------------------------------------
   TEACHERS DOSSIER — paperclipped files
   --------------------------------------------------------- */

.dossiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); align-items: start; }
.dossier {
  position: relative; padding: 20px; margin-top: 18px;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), filter .35s ease;
}
.dossier:nth-child(1) { transform: rotate(-1.2deg); }
.dossier:nth-child(2) { transform: rotate(0.8deg); }
.dossier:nth-child(3) { transform: rotate(-0.6deg); }
.dossier .clip { left: 26px; }
.dossier .portrait {
  width: 100%; aspect-ratio: 3/4; object-fit: cover;
  filter: grayscale(1) contrast(1.05); border: 5px solid #efe7d9;
  box-shadow: 0 12px 24px -16px rgba(0,0,0,.8); margin-bottom: 16px;
}
.dossier h3 { font-size: 1.4rem; margin-bottom: 2px; }
.dossier .role { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .12em; color: var(--accent-2-text); margin-bottom: 12px; }
.dossier p { font-size: .9rem; color: var(--ink-soft); }
.dossier .credential { font-family: var(--hand); color: var(--accent-text); font-size: 1.05rem; transform: rotate(-2deg); display: inline-block; margin-top: 6px; }

/* ---------------------------------------------------------
   FINDER TOOL — Level & Dance finder
   --------------------------------------------------------- */

.finder {
  position: relative;
  padding: clamp(26px, 3.6vw, 48px);
}
.finder-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 48px); align-items: start; }
.finder-q { margin-bottom: 26px; }
.finder-q > .q-label {
  display: block; font-family: var(--mono); text-transform: uppercase; letter-spacing: .12em;
  font-size: .74rem; color: var(--accent-2-text); margin-bottom: 12px;
}
.opt-row { display: flex; flex-wrap: wrap; gap: 10px; }
.opt {
  font-family: var(--mono); font-size: .82rem; padding: 10px 14px;
  border: 1px solid var(--line-strong); background: var(--surface-2); color: var(--ink-soft);
  border-radius: 3px; cursor: pointer; transition: all .2s ease; transform: rotate(-0.6deg);
}
.opt:hover { border-color: var(--accent); color: var(--ink); }
.opt[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: #fff; transform: rotate(0.6deg); }

.finder-result {
  position: relative; min-height: 100%;
  background-color: var(--paper); background-image: url("../images/doku-paper.jpg"); background-size: 360px;
  color: var(--paper-ink); padding: clamp(22px, 3vw, 34px); transform: rotate(1deg);
  box-shadow: 0 24px 44px -26px rgba(0,0,0,.85);
}
.finder-result .rslip { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--accent); margin-bottom: 12px; }
.finder-result h3 { color: #2b2118; font-size: 1.7rem; margin-bottom: 6px; }
.finder-result .track-name { font-family: var(--serif); font-style: italic; }
.finder-result p { color: #3d3227; font-size: .92rem; }
.finder-result .badge {
  display: inline-block; font-family: var(--mono); font-size: .68rem; text-transform: uppercase;
  letter-spacing: .1em; background: var(--accent); color: #fff; padding: 4px 10px; border-radius: 3px;
  margin: 4px 6px 4px 0;
}
.finder-result .badge.gold { background: var(--accent-2); color: #241d16; }
.finder-result dl { margin: 14px 0 0; }
.finder-result dt { font-family: var(--mono); font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #6b5a44; margin-top: 10px; }
.finder-result dd { margin: 2px 0 0; font-family: var(--serif); font-style: italic; font-size: 1.05rem; color: #2b2118; }
.finder-note { font-family: var(--hand); color: var(--accent); font-size: 1.05rem; transform: rotate(-2deg); display: inline-block; margin-top: 14px; }

/* ---------------------------------------------------------
   PRICING — torn paper tags
   --------------------------------------------------------- */

.pricing-list { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(18px, 3vw, 30px); }
.price-slip {
  position: relative; padding: 24px 26px;
  background-color: var(--paper); background-image: url("../images/doku-kraft.jpg"); background-size: 320px;
  color: var(--paper-ink);
  box-shadow: 0 18px 36px -22px rgba(0,0,0,.8);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.price-slip:nth-child(odd) { transform: rotate(-1.1deg); }
.price-slip:nth-child(even) { transform: rotate(1.2deg); }
.price-slip::before {
  content: ""; position: absolute; top: 18px; left: -1px; width: 14px; height: 14px;
  border-radius: 50%; background: var(--bg); box-shadow: 0 0 0 2px rgba(43,33,24,.35);
}
.price-slip h3 { color: #2b2118; font-size: 1.4rem; }
.price-slip .amount { font-family: var(--serif); font-style: italic; font-weight: 700; font-size: 2rem; color: var(--accent); display: block; margin: 4px 0; font-variant-numeric: tabular-nums; }
.price-slip .per { font-family: var(--mono); font-size: .74rem; color: #6b5a44; }
.price-slip p { color: #3d3227; font-size: .88rem; margin-top: 10px; }
.price-slip .sample { font-family: var(--mono); font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; color: #7a6a52; margin-top: 12px; }

/* ---------------------------------------------------------
   TESTIMONIALS
   --------------------------------------------------------- */

.reviews { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(20px, 3vw, 34px); }
.review {
  position: relative; padding: 22px;
  background-color: var(--paper); background-image: url("../images/doku-paper.jpg"); background-size: 340px;
  color: var(--paper-ink);
  box-shadow: 0 16px 34px -22px rgba(0,0,0,.8);
  transition: transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.review:nth-child(1) { transform: rotate(-1.3deg); }
.review:nth-child(2) { transform: rotate(0.9deg); }
.review:nth-child(3) { transform: rotate(-0.7deg); }
.review .quote { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: #2b2118; line-height: 1.5; }
.review .who { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--accent); margin-top: 14px; }
.review .who span { display: block; color: #6b5a44; letter-spacing: .06em; margin-top: 3px; }
.review .stars { color: var(--accent-2); font-family: var(--mono); letter-spacing: 2px; }

/* ---------------------------------------------------------
   FAQ — card file
   --------------------------------------------------------- */

.faq-list { display: grid; gap: 14px; max-width: 860px; }
.faq-item {
  position: relative; border: 1px solid var(--line-strong);
  background: var(--surface); background-image: linear-gradient(rgba(20,16,19,.6),rgba(20,16,19,.6)), url("../images/doku-kraft.jpg");
  background-size: cover, 320px;
}
.faq-item:nth-child(even) { transform: rotate(-0.4deg); }
.faq-item:nth-child(odd) { transform: rotate(0.4deg); }
.faq-item summary {
  cursor: pointer; list-style: none; padding: 18px clamp(18px, 3vw, 26px);
  font-family: var(--serif); font-style: italic; font-size: 1.12rem; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-family: var(--mono); color: var(--accent-2-text); font-size: 1.4rem; transition: transform .3s ease; }
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item .answer {
  height: 0; overflow: hidden; padding: 0 clamp(18px, 3vw, 26px);
  color: var(--ink-soft); font-size: .92rem;
  transition: height 360ms cubic-bezier(.4,0,.2,1), padding-block-end 360ms cubic-bezier(.4,0,.2,1);
}
.faq-item[open] .answer { height: auto; padding-block-end: 22px; }
@media (prefers-reduced-motion: reduce) { .faq-item .answer { transition: none; } }

/* ---------------------------------------------------------
   JOIN THE WALL — CTA + form
   --------------------------------------------------------- */

.join { position: relative; }
.join-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.join-copy .scrawl { font-size: 1.4rem; }

.form-board {
  position: relative; padding: clamp(24px, 3.4vw, 42px);
  background-color: var(--paper); background-image: url("../images/doku-paper.jpg"); background-size: 400px;
  color: var(--paper-ink); transform: rotate(-0.8deg);
  box-shadow: 0 28px 54px -30px rgba(0,0,0,.9);
}
.form-board h3 { color: #2b2118; }
.form-board .form-title-line { font-family: var(--mono); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--accent); margin-bottom: 8px; }

.field { display: block; margin-bottom: 16px; }
.field > span { display: block; font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: #5c4d3a; margin-bottom: 6px; }
.field input, .field select, .field textarea {
  width: 100%; font-family: var(--mono); font-size: .92rem; color: #241d16;
  background: rgba(255,255,255,.55); border: 0; border-bottom: 2px solid #7a6a52;
  padding: 10px 8px; border-radius: 2px 2px 0 0;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-bottom-color: var(--accent); background: rgba(255,255,255,.75);
}
.field textarea { min-height: 110px; resize: vertical; }
.field-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.field.consent { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; font-size: .82rem; color: #3d3227; }
.field.consent a { color: var(--accent); text-decoration: underline; }
.field input[type="checkbox"] {
  appearance: auto; -webkit-appearance: auto;
  width: 18px; height: 18px; min-width: 18px; min-height: 18px;
  padding: 0; border: 0; margin: 2px 0 0; accent-color: var(--accent);
}

/* ---------------------------------------------------------
   FOOTER
   --------------------------------------------------------- */

.site-footer {
  position: relative; margin-top: 40px;
  background-color: #100c0f;
  background-image: linear-gradient(rgba(16,12,15,.9),rgba(16,12,15,.94)), url("../images/doku-cork.jpg");
  background-size: cover, 500px;
  border-top: 2px solid var(--accent);
  padding-block: clamp(44px, 6vw, 72px) 28px;
}
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(24px, 4vw, 48px); }
.footer-grid h4 { font-family: var(--mono); font-style: normal; text-transform: uppercase; letter-spacing: .14em; font-size: .74rem; color: var(--accent-2-text); margin-bottom: 14px; }
.footer-col a { display: block; color: var(--ink-soft); font-size: .88rem; padding: 4px 0; }
.footer-col a:hover { color: var(--ink); }
.footer-brand .brand { font-size: 1.5rem; margin-bottom: 10px; }
.footer-brand p { color: var(--ink-faint); font-size: .84rem; }
.footer-stamps { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.footer-bottom {
  margin-top: 40px; padding-top: 20px; border-top: 1px dashed var(--line);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: .74rem; color: var(--ink-faint);
}
.footer-legal a { display: inline; color: var(--ink-faint); }
.footer-legal a:hover { color: var(--ink); }
.footer-legal span { margin: 0 8px; color: var(--line-strong); }

/* ---------------------------------------------------------
   COOKIE BANNER
   --------------------------------------------------------- */

.cookie-banner {
  position: fixed; bottom: 16px; left: 16px; right: 16px; max-width: 520px; margin: 0 auto;
  z-index: 9999; background: var(--surface);
  background-image: linear-gradient(rgba(16,12,15,.85),rgba(16,12,15,.9)), url("../images/doku-kraft.jpg");
  background-size: cover, 300px;
  border: 1px solid var(--accent); border-radius: 6px; padding: 20px 22px;
  box-shadow: 0 20px 50px -20px rgba(0,0,0,.9);
  transform: translateY(140%); opacity: 0;
  transition: transform 280ms cubic-bezier(.2,.7,.2,1), opacity 240ms;
}
.cookie-banner.is-visible { transform: translateY(0); opacity: 1; }
.cookie-banner h4 { font-family: var(--serif); font-style: italic; font-size: 1.1rem; margin-bottom: 6px; }
.cookie-banner p { font-size: .82rem; color: var(--ink-soft); margin-bottom: 14px; }
.cookie-banner p a { color: var(--accent-2-text); text-decoration: underline; }
.cookie-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
/* Accept and Reject carry equal visual weight — no dark pattern nudging consent */
.cookie-actions [data-consent="accept"],
.cookie-actions [data-consent="reject"] { flex: 1 1 140px; min-height: 46px; font-weight: 700; }
.cookie-actions [data-consent="reject"] {
  background: var(--paper); color: var(--paper-ink); border-color: var(--paper);
  box-shadow: 0 8px 20px -12px rgba(0,0,0,.7); transform: rotate(1deg);
}
.cookie-actions [data-consent="reject"]:hover,
.cookie-actions [data-consent="reject"]:focus-visible {
  background: #fff; color: var(--paper-ink); border-color: #fff; transform: translateY(-2px) rotate(1deg);
}
/* Settings is a genuinely secondary choice — subordinate, never louder than Reject */
.cookie-actions [data-consent="settings"] {
  flex: 0 1 auto; min-height: 46px; background: transparent; border-color: transparent;
  color: var(--ink-soft); text-decoration: underline; text-underline-offset: 3px; padding-inline: 14px;
}
.cookie-actions [data-consent="settings"]:hover,
.cookie-actions [data-consent="settings"]:focus-visible { color: var(--ink); background: transparent; transform: none; }
@media (min-width: 720px) { .cookie-banner { left: 24px; right: auto; max-width: 440px; } }
@media (max-width: 380px) { .cookie-actions [data-consent="accept"], .cookie-actions [data-consent="reject"] { flex-basis: 100%; } }

/* ---------------------------------------------------------
   REVEAL / MOTION
   --------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(28px);
  transition: opacity 640ms cubic-bezier(.2,.7,.2,1), transform 640ms cubic-bezier(.2,.7,.2,1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }
html.no-js .reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .wax::after, .env-card .photo img { transition: none !important; }
}

/* ambient float for hero snaps */
@keyframes drift { 0%,100% { transform: translateY(0) rotate(var(--rr, 0deg)); } 50% { transform: translateY(-8px) rotate(var(--rr, 0deg)); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-snaps .s1 { --rr: -7deg; animation: drift 9s ease-in-out infinite; }
  .hero-snaps .s2 { --rr: 6deg; animation: drift 11s ease-in-out .6s infinite; }
  .hero-snaps .s3 { --rr: 4deg; animation: drift 10s ease-in-out 1.2s infinite; }
  .hero-snaps .s4 { --rr: -5deg; animation: drift 12s ease-in-out .3s infinite; }
}

/* pinned-paper cards straighten & lift on hover — feels like lifting a print off the wall */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .dossier:hover {
    transform: rotate(0deg) translateY(-6px);
    filter: drop-shadow(0 20px 30px rgba(0,0,0,.5));
  }
  .price-slip:hover, .review:hover {
    transform: rotate(0deg) translateY(-6px) scale(1.015);
    box-shadow: 0 30px 52px -24px rgba(0,0,0,.9);
  }
  /* warm lamp-glow on the primary call to action */
  .btn-primary:hover, .nav-cta:hover {
    box-shadow: 0 10px 26px -8px rgba(199,154,75,.55), 0 0 0 1px rgba(199,154,75,.4) inset;
  }
}

/* ---------------------------------------------------------
   PAGE HERO (subpages)
   --------------------------------------------------------- */

.page-hero { padding-block: clamp(48px, 7vw, 84px) clamp(30px, 4vw, 48px); position: relative; }
.page-hero h1 { font-size: clamp(2.2rem, 6vw, 4rem); }
.page-hero p { color: var(--ink); max-width: 62ch; }

/* prose for legal/content pages */
.prose { max-width: 820px; }
.prose > :first-child { margin-top: 0; }
.prose h2 { font-size: 1.7rem; margin-top: 2em; color: var(--ink); }
.prose h2 + p { margin-top: .35em; }
.prose p { line-height: 1.75; }
.prose h3 { font-size: 1.25rem; margin-top: 1.4em; }
.prose p, .prose li { color: var(--ink); }
.prose ul { padding-left: 1.2em; }
.prose li { margin-bottom: 8px; }
.prose li::before { content: none; }
.prose a { color: var(--accent-2-text); text-decoration: underline; }

/* ---------------------------------------------------------
   TABLES
   --------------------------------------------------------- */

.table-scroll {
  display: block; width: 100%; max-width: 100%; min-width: 0;
  overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 18px 0;
  border: 1px solid var(--line); border-radius: 6px;
}
.table-scroll > table { margin: 0 !important; min-width: 480px; width: 100%; border-collapse: collapse; }
:where(*:has(> .table-scroll), *:has(> * > .table-scroll), *:has(> * > * > .table-scroll)) { min-width: 0; }
table th, table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); font-size: .88rem; }
table th { font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--accent-2-text); background: var(--surface-2); }
table td { color: var(--ink-soft); }

/* ---------------------------------------------------------
   CONTACT PAGE
   --------------------------------------------------------- */

.channel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.channel {
  position: relative; padding: 22px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--surface); background-image: linear-gradient(rgba(20,16,19,.6),rgba(20,16,19,.6)), url("../images/doku-kraft.jpg");
  background-size: cover, 300px;
  transition: transform .24s ease, box-shadow .24s ease;
}
.channel:hover { transform: translateY(-3px); box-shadow: 0 16px 34px -20px rgba(0,0,0,.8); }
.channel .ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%;
  background: var(--accent); color: #fff; font-family: var(--serif); font-style: italic; font-size: 1.1rem; margin-bottom: 14px; }
.channel h3 { font-size: 1.15rem; margin-bottom: 4px; }
.channel a, .channel .val { color: var(--ink); font-family: var(--mono); font-size: .9rem; word-break: break-word; }
.channel a:hover { color: var(--accent-2-text); }
.channel .sub { font-size: .78rem; color: var(--ink-faint); margin-top: 6px; }

.hours-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 20px; }
.hours-grid .day {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
  font-family: var(--mono); font-size: .82rem;
}
.hours-grid .day .d { color: var(--accent-2-text); text-transform: uppercase; letter-spacing: .08em; font-size: .68rem; }
.hours-grid .day .h { color: var(--ink); font-variant-numeric: tabular-nums; margin-top: 4px; }

/* ---------------------------------------------------------
   THANK YOU / 404
   --------------------------------------------------------- */

.centered-page {
  min-height: calc(100vh - var(--header-h)); display: grid; place-items: center;
  text-align: center; padding-block: 60px;
}
.centered-page .card {
  position: relative; max-width: 560px; padding: clamp(30px, 5vw, 56px);
  background-color: var(--paper); background-image: url("../images/doku-paper.jpg"); background-size: 400px;
  color: var(--paper-ink); transform: rotate(-1deg);
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.9);
}
.centered-page .card h1 { color: #2b2118; font-size: clamp(2rem, 6vw, 3.2rem); }
.centered-page .card p { color: #3d3227; }
.centered-page .card .big { font-family: var(--serif); font-style: italic; font-size: clamp(4rem, 16vw, 8rem); color: var(--accent); line-height: 1; }

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 1024px) {
  .join-grid { grid-template-columns: 1fr; }
  .story-grid { grid-template-columns: 1fr; }
  .finder-grid { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
  .dances { grid-template-columns: 1fr; }
  .dossiers { grid-template-columns: 1fr; }
  .reviews { grid-template-columns: 1fr; }
  .archive-wall { grid-template-columns: repeat(3, minmax(0,1fr)); }
  .footer-grid { grid-template-columns: 1fr; }
  .pricing-list { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .archive-wall { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; }
  .field-row { grid-template-columns: 1fr; }
  .hero-snaps { display: none; }
  .hero-stats { gap: 20px 30px; }
  .env-card:nth-child(n), .price-slip:nth-child(n), .review:nth-child(n),
  .dossier:nth-child(n), .diary-page, .form-board, .finder-result { transform: rotate(-0.4deg); }
  .ransom .cut { transform: none; }
}

@media (max-width: 380px) {
  .cookie-actions [data-consent="accept"], .cookie-actions [data-consent="reject"] { flex-basis: 100%; }
}

.scroll-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--accent);z-index:9998;transition:width 80ms linear;pointer-events:none}