/* Dana Wilcher Art: Sacred Initiations, the Streams version. css/site.css comes first.
   From her confirmed mockup, docs/mockups/telify-web/dana-wilcher/sacred-initiations.html. */

/* sections rise in, her words write themselves in */
/* hidden only once the page's script has started (.reveal on <html>): a script that never loads leaves it all shown */
.reveal .rv { opacity: 0; transform: translateY(22px); transition: opacity .9s ease, transform 1s cubic-bezier(.2, .7, .2, 1); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.wr .w { opacity: 0; color: var(--camel); transition: opacity .45s ease, color 1.2s ease; }
.wr .w.on { opacity: 1; color: inherit; }
@media (prefers-reduced-motion: reduce) { .reveal .rv { opacity: 1; transform: none; transition: none; } }
[id] { scroll-margin-top: 100px; }

/* =====================================================================
   SACRED INITIATIONS
   ===================================================================== */
.num { font-family: var(--serif); font-weight: 500; letter-spacing: .12em; color: var(--camel); }

/* Opening: the name of the series, and its twelve places: eight paintings and four still to come */
.si-hero { position: relative; overflow: hidden; padding: 84px 0 96px; text-align: center;
  background: radial-gradient(ellipse 46% 64% at 50% 0%, rgba(148, 37, 42, 0.38), transparent 72%); }
.si-hero h1 { margin: 16px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(58px, 9vw, 136px); line-height: .94; letter-spacing: -0.015em; text-wrap: balance; }
.si-hero .sub { margin: 22px auto 0; max-width: 32em; font-family: var(--serif); font-size: clamp(20px, 2vw, 26px); line-height: 1.45; color: var(--ink-2); text-wrap: balance; }
.twelve { list-style: none; margin: 64px auto 0; padding: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(6px, 1.1vw, 16px); max-width: 1080px; }
.twelve a { display: grid; gap: 10px; justify-items: center; cursor: pointer; }
.twelve .slot { width: 100%; aspect-ratio: 2 / 5; overflow: hidden; border-radius: 2px; background: #1a1411; box-shadow: 0 14px 30px rgba(8, 5, 4, 0.55); transition: transform .5s cubic-bezier(.2, .7, .2, 1); will-change: transform; }
.twelve .slot img { width: 100%; height: 100%; object-fit: cover; }
.twelve a:hover .slot { transform: translateY(-6px); }
.twelve .refl { display: block; width: 100%; aspect-ratio: 2 / 1.5; margin-top: -6px; overflow: hidden; opacity: .3; pointer-events: none;
  -webkit-mask: linear-gradient(#000, transparent 80%); mask: linear-gradient(#000, transparent 80%); }
.twelve .refl img, .twelve .refl i { display: block; width: 100%; aspect-ratio: 2 / 5; object-fit: cover; transform: scaleY(-1); filter: blur(1px); }
.twelve .slot.wait, .twelve .refl i { background: repeating-linear-gradient(135deg, rgba(187, 148, 104, 0.05) 0 2px, transparent 2px 7px), #1d1714; box-shadow: inset 0 0 0 1px rgba(187, 148, 104, 0.32); }
.twelve .num { font-size: clamp(11px, 1.1vw, 14px); margin-top: -18px; }
.twelve li.waiting .num { color: var(--ink-3); }
.count { margin: 18px 0 0; font-size: 14.5px; letter-spacing: .05em; color: var(--ink-3); }

/* Her words about the series, writing themselves in as the page scrolls */
.si-word { padding: 40px 0 130px; }
.si-word .wrap { max-width: 780px; }
.si-word .h2 { text-align: center; margin-bottom: 48px; }
.si-word p { margin: 0 0 1.15em; white-space: pre-line; font-family: var(--serif); font-size: clamp(21px, 1.95vw, 25.5px); line-height: 1.55; }
.si-word p.last { font-style: italic; text-align: center; margin-top: 1.6em; color: var(--wheat); }
.si-word .signed { display: flex; justify-content: center; margin-top: 30px; }
.si-word .signed .sig { width: 220px; }

/* What a painting carries: who owns the original, prints, and looking closer */
.own { margin-top: 30px; }
.own p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.own .ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
/* Ask about the original, Telify's Message the studio drawn as her button (js/si.js) */
.own .ask [data-part="signInError"] { margin: 8px 0 0; font-size: 14px; color: #E28A8D; }
.look { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; padding: 0 0 3px; background: none; border: 0; border-bottom: 1px solid rgba(230, 212, 166, 0.4); color: var(--wheat); font-size: 14.5px; letter-spacing: .04em; cursor: pointer; }
.look:hover { border-bottom-color: var(--wheat); }
.look svg { width: 16px; height: 16px; }
.poem { white-space: pre-line; font-family: var(--serif); }

/* ------------------------------------------------ a chamber for each painting */
/* one even dark ground through the chambers (no lighter bands where two meet); it fades in from the page above the
   first and back out below the last */
.room { position: relative; padding: 120px 0; background: #1C1512; }
/* the shade round the words and the painting reaches past the edge of the screen: cut there, so the page never scrolls
   sideways (clip, unlike hidden, leaves the painting and the studio photos sticky) */
.room { overflow-x: clip; }
.room:first-child { background: linear-gradient(180deg, var(--espresso), #1C1512 18%); }
.room:last-child { background: linear-gradient(180deg, #1C1512 82%, var(--espresso)); }
.room .wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 0 96px; align-items: start; }
.room.flip .art-col { order: 2; }
/* a flipped chamber mirrors the columns too, so the words and the studio photos are the same width in every chamber */
.room.flip .wrap { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); }
/* the painting carries on past the end of the words by the height of what sits under it, so the last studio photo
   stops level with the painting, not with its See prints button (--uh, set from the page) */
.art-col { align-self: stretch; margin-bottom: calc(-1 * var(--uh, 0px)); }
/* the painting sets the width: its reflection and what sits under it take its width, not their own */
.art-stick { position: sticky; top: 183px; width: fit-content; max-width: 100%; margin: 0 auto; }
.lit { position: relative; width: fit-content; max-width: 100%; margin: 0 auto; }
.lit img { display: block; width: auto; max-width: 100%; max-height: calc(100vh - 400px); cursor: zoom-in; box-shadow: 0 0 60px rgba(0, 0, 0, 0.45); }
.lit .mirror { display: block; width: 0; min-width: 100%; height: 120px; margin-top: 4px; overflow: hidden; opacity: .3; pointer-events: none; -webkit-mask: linear-gradient(#000, transparent 85%); mask: linear-gradient(#000, transparent 85%); }
.lit .mirror img { width: 100%; max-height: none; transform: scaleY(-1); filter: blur(1.5px); box-shadow: none; cursor: default; }
.room .txt-col { padding-top: 6px; }
.room .txt-col, .art-stick { z-index: 2; }
.room .txt-col { position: relative; }
.streams-cv { position: fixed; left: 0; top: -30vh; z-index: 1; width: 100%; height: 160vh; pointer-events: none; }
.streams-cv[hidden] { display: none; }
body.streams .room .txt-col { text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 18px rgba(0,0,0,.85); }
body.streams .lit .mirror { display: none; }
body.streams .under { margin-top: 18px; }
/* the shade under the words, and the one around the painting and its buttons, are part of the page, so they move
   exactly with them; the painting's shade sits behind the painting and its buttons */
body.streams .art-stick { z-index: 3; }
body.streams .lit { z-index: 1; }
/* the same soft shade as before: it reaches --e past the words and ramps up gently to full by --e inside them */
body.streams .room .txt-col::before, body.streams .art-stick::before { --e: 50px; --ramp: rgba(0,0,0,0), rgba(0,0,0,.16) calc(var(--e) * .5), rgba(0,0,0,.5) var(--e), rgba(0,0,0,.84) calc(var(--e) * 1.5), #000 calc(var(--e) * 2), #000 calc(100% - var(--e) * 2), rgba(0,0,0,.84) calc(100% - var(--e) * 1.5), rgba(0,0,0,.5) calc(100% - var(--e)), rgba(0,0,0,.16) calc(100% - var(--e) * .5), rgba(0,0,0,0);
  content: ""; position: absolute; inset: calc(var(--e) * -1); z-index: -1; pointer-events: none; background: rgba(28, 21, 18, .6);
  -webkit-mask-image: linear-gradient(to right, var(--ramp)), linear-gradient(var(--ramp)); -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, var(--ramp)), linear-gradient(var(--ramp)); mask-composite: intersect; }
/* the blank canvases and the footer stand in front of the colour, solid */
body.streams .room.later .wrap, body.streams .foot { position: relative; z-index: 2; }
.room .num { margin: 0; font-size: 22px; }
.room h2 { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(44px, 4.8vw, 72px); line-height: 1; text-wrap: balance; }
.room .meta { margin: 18px 0 0; font-size: 14.5px; letter-spacing: .05em; color: var(--ink-3); }
/* her story of the painting, then her poem set apart below it */
.room .story { margin: 40px 0 0; }
.room .story p { margin: 0 0 1em; font-family: var(--serif); font-size: clamp(19px, 1.5vw, 21px); line-height: 1.6; color: var(--ink); }
.room .poem { margin: 44px 0 0; padding-top: 40px; border-top: 1px solid var(--hair); font-size: clamp(20px, 1.7vw, 23px); line-height: 1.62; color: var(--ink); }
.under { position: relative; width: 0; min-width: 100%; margin-top: -54px; }
.under .own { margin-top: 12px; }
.under .own p { font-size: 14.5px; color: var(--ink-3); }
.under .own .ctas { margin-top: 12px; gap: 10px; }
.under .look { margin-top: 0; }
/* In the studio: her photos of the painting being made, as many as she has, to scroll through */
.studio { margin-top: 64px; padding-top: 34px; border-top: 1px solid var(--hair); }
/* Once its photo comes level with the painting it stops there (--st, set from the page); the painting and the photo
   then hold still together for the next bit of scrolling (the pause's height) and move on together. 90px: wherever a
   wheel click lands, the click that brings them level stops there and the next whole click does nothing (Gabriel's
   wheel moves about 50 a click). The browser does it all; nothing catches the wheel. */
.studio { position: sticky; top: var(--st, 0px); }
.st-pause { height: 90px; }
.st-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.studio h3 { margin: 0; font-family: var(--serif); font-weight: 500; font-size: 30px; }
.st-count { margin-left: auto; font-size: 13.5px; letter-spacing: .06em; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.st-arrows { display: flex; gap: 8px; }
.st-arrows button { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(30, 24, 20, 0.4); border: 1px solid rgba(230, 212, 166, 0.4); color: var(--ink); cursor: pointer; }
.st-arrows button:disabled { opacity: .3; cursor: default; }
.st-arrows svg { width: 17px; height: 17px; }
.st-row { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; overscroll-behavior-x: contain; }
.st-row::-webkit-scrollbar { display: none; }
.st-row figure { flex: 0 0 100%; margin: 0; scroll-snap-align: start; }
.st-row .im { aspect-ratio: 4 / 5; overflow: hidden; background: #1d1714; box-shadow: 0 18px 34px rgba(8, 5, 4, 0.5); }
.st-row img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.st-row img.ink { mix-blend-mode: multiply; }
.st-row figcaption { margin-top: 10px; font-size: 13px; letter-spacing: .04em; color: var(--ink-3); }
/* the room that waits: four blank canvases */
.room.later { padding: 130px 0 150px; text-align: center; }
.room.later .wrap { display: block; max-width: 980px; }
.blanks { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 3vw, 40px); margin: 0 auto 56px; }
.blank { display: grid; gap: 14px; justify-items: center; }
.blank .cv { width: 100%; aspect-ratio: 3 / 4; background: repeating-linear-gradient(135deg, rgba(187, 148, 104, 0.05) 0 2px, transparent 2px 7px), #1d1714; box-shadow: inset 0 0 0 1px rgba(187, 148, 104, 0.32), 0 22px 40px rgba(8, 5, 4, 0.5); }
.blank .num { font-size: 16px; }
.later h2 { margin: 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(48px, 6vw, 86px); line-height: 1; }
.later p.say { margin: 22px auto 0; max-width: 30em; font-family: var(--serif); font-size: clamp(20px, 1.8vw, 24px); color: var(--ink-2); }
/* where you are among the twelve, down the right edge */
.rail-idx { position: fixed; right: 22px; top: 50%; z-index: 20; translate: 0 -50%; display: grid; gap: 7px; opacity: 0; pointer-events: none; transition: opacity .4s ease; }
.rail-idx.show { opacity: 1; pointer-events: auto; }
.rail-idx a { display: flex; align-items: center; justify-content: flex-end; gap: 10px; height: 18px; font-family: var(--serif); font-size: 13px; letter-spacing: .1em; color: var(--ink-3); cursor: pointer; }
.rail-idx a i { width: 14px; height: 1px; background: currentColor; transition: width .3s ease; }
.rail-idx a.wait { opacity: .45; }
.rail-idx a.on { color: var(--wheat); }
.rail-idx a.on i { width: 28px; }

/* ------------------------------------------------ Looking closer: her biggest photo of the painting */
.zoom { position: fixed; inset: 0; z-index: 60; background: rgba(12, 9, 7, 0.96); opacity: 0; transition: opacity .3s ease; }
.zoom.open { opacity: 1; }
.zoom .sc { position: absolute; inset: 0; overflow: auto; display: grid; place-items: center; overscroll-behavior: contain; scrollbar-width: none; }
.zoom .sc::-webkit-scrollbar { display: none; }
.zoom img { max-width: 92vw; max-height: 86vh; cursor: zoom-in; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6); }
.zoom img.ink { background: #EDE3D0; }
.zoom.big .sc { place-items: start; }
.zoom.big img { max-width: none; max-height: none; cursor: zoom-out; }
.zoom .x { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: rgba(30, 24, 20, 0.7); border: 1px solid rgba(230, 212, 166, 0.4); color: var(--ink); cursor: pointer; }
.zoom .x svg { width: 20px; height: 20px; }
.zoom .zc { position: absolute; left: 0; right: 0; bottom: 18px; text-align: center; font-family: var(--serif); font-style: italic; font-size: 19px; color: var(--ink-2); pointer-events: none; }

@media (max-width: 1360px) { .rail-idx { display: none; } }
@media (max-width: 999px) {
  .room .wrap { gap: 0 56px; }
}
/* a short window, like a laptop's: the studio's title and arrows go under its photos, so the painting can start just
   below her header and stay large (Dana 2026-10-28, via Gabriel: the painting "shrinks down really small") */
@media (min-width: 861px) and (max-height: 940px) {
  .art-stick { top: calc(var(--head-h) + 40px); }
  .lit img { max-height: calc(100vh - var(--head-h) - 220px); }
  .studio { display: flex; flex-direction: column; }
  .st-head { order: 1; margin: 16px 0 0; }
}
/* ---------- narrow screens ---------- */
@media (max-width: 860px) {
  .si-hero { padding: 56px 0 64px; }
  .twelve { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px 8px; margin-top: 44px; }
  .si-word { padding: 24px 0 90px; }
  .room { padding: 72px 0 84px; }
  .room .wrap, .room.flip .wrap { grid-template-columns: 1fr; }
  .room.flip .art-col { order: 0; }
  .art-stick { position: relative; top: auto; }
  .art-col { margin-bottom: 0; }
  .lit img { max-height: 70vh; }
  .lit .mirror { height: 90px; }
  .under { margin-top: -40px; }
  .room .txt-col { padding-top: 34px; }
  .room .story { margin-top: 30px; }
  .room .story p { font-size: 18.5px; }
  .room .poem { margin-top: 30px; padding-top: 30px; font-size: 19.5px; }
  .studio { margin-top: 48px; position: static; }
  .st-pause { display: none; }
  .studio h3 { font-size: 26px; }
  .blanks { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 380px; }
}