/* Dana Wilcher Art: her drums page, /commissions/drums. css/site.css comes first.
   From her confirmed mockup, docs/mockups/telify-web/dana-wilcher/landing-commission-site.html (page 1 on her site). */

:root {
  --bar: var(--head-h);   /* where the pinned parts sit: under her header */
  --gut: max(32px, env(safe-area-inset-left, 0px)); --gut-r: max(32px, env(safe-area-inset-right, 0px));
}

/* this page's element look, below Telify's layer */
@layer site-reset {
  main { font-size: 17px; }
  h1, h2, h3 { font-family: var(--serif); font-weight: 500; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
  p { margin: 0; }
  section { padding-block: clamp(76px, 9vw, 132px); }
}
[id] { scroll-margin-top: calc(var(--bar) + 12px); }

.h2 { font-size: clamp(40px, 4.4vw, 62px); line-height: 1.02; }
.lead { font-size: clamp(18px, 1.6vw, 20px); color: var(--ink-2); line-height: 1.6; font-weight: 300; }
.band { background: var(--night); }

/* hero: her photo beside her words, the garnet glow of her site behind them */
/* her photo keeps one shape on every screen, so her face and the whole drum always show: its column is never wider
   than 0.82 of the hero's height */
.hero { --hero-h: clamp(620px, calc(100vh - var(--bar)), 880px); padding: 0; display: grid; grid-template-columns: minmax(0, min(51.2%, calc(var(--hero-h) * .82))) minmax(0, 1fr); min-height: var(--hero-h); }
.hero-photo { position: relative; overflow: hidden; background: var(--night); }
.hero-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 90%, rgba(42, 33, 28, .55)); pointer-events: none; }
.hero-txt { display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 56px var(--gut-r) 64px clamp(32px, 5vw, 80px); background: radial-gradient(ellipse 70% 60% at 40% 38%, rgba(148, 37, 42, .3), transparent 72%); }
.hero h1 { max-width: 11em; font-size: clamp(50px, 5.4vw, 88px); line-height: .96; }
.hero .lead { max-width: 500px; }
.hero-act { display: grid; gap: 14px; justify-items: start; margin-top: 4px; }
.hero-act .btn { height: 54px; padding: 0 34px; font-size: 16px; }
.hero-act p { font-size: 14.5px; color: var(--ink-3); letter-spacing: .02em; }

/* her drums, right under the hero: one drum on a band of rising embers, turning over to each of them as you scroll */
.spin { padding: 0; height: 810vh; background: var(--night); color: var(--ink); position: relative; }
.spin-stick { position: sticky; top: var(--bar); height: calc(100vh - var(--bar)); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; justify-items: center; padding-block: clamp(26px, 5vh, 56px) clamp(24px, 4.5vh, 48px); }
.spin-stick::before { content: ""; position: absolute; inset: auto -10% -18% -10%; height: 66%; background: radial-gradient(ellipse 50% 60% at 50% 100%, rgba(255, 140, 56, .5), rgba(176, 48, 32, .24) 45%, transparent 74%); opacity: var(--fire, 1); pointer-events: none; }
.spin-embers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.spin-head { position: relative; z-index: 1; width: 100%; max-width: 1304px; padding-left: var(--gut); padding-right: var(--gut-r); }
.spin-stage { position: relative; z-index: 1; width: 100%; display: grid; place-items: center; min-height: 0; will-change: transform; }
.spin-drum { width: min(calc(70vh - var(--bar) * .7), 92vw, 760px); aspect-ratio: 1; max-width: 100%; display: block; }
.spin-name { position: relative; z-index: 1; font: italic 500 clamp(28px, 2.8vw, 38px)/1.1 var(--serif); color: var(--wheat); text-align: center; transition: opacity .18s; min-height: 1.1em; opacity: var(--rise, 0); }
.spin-name.swap { opacity: 0; }
.spin-dots { position: relative; z-index: 1; display: flex; gap: 8px; margin-top: 14px; opacity: var(--rise, 0); }
.spin-dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(239, 231, 214, .26); transition: background .3s, transform .3s; }
.spin-dots i.on { background: #F0A35E; transform: scale(1.25); }
.spin-still { display: none; }
.spin.still { height: auto; padding-block: clamp(64px, 8vw, 110px); }
.spin.still .spin-stick { position: static; height: auto; display: block; padding: 0; }
.spin.still .spin-stage, .spin.still .spin-name, .spin.still .spin-dots, .spin.still .spin-embers, .spin.still .spin-stick::before { display: none; }
.spin.still .spin-still { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 26px 18px; margin-top: 34px; }
.spin-still figure { margin: 0; display: grid; gap: 10px; justify-items: center; text-align: center; font: italic 500 20px/1.2 var(--serif); color: var(--wheat); }
.spin-still img { width: 100%; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }

/* what comes with it: the drum, read like an anatomy plate */
.anat .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.anat-copy { display: grid; gap: 24px; }
.plate { position: relative; }
.plate img { width: 100%; height: auto; aspect-ratio: 852 / 1014; object-fit: cover; border-radius: 3px; }
/* small and quiet under the photo, so it's there without drawing the eye (Dana's copy review 2026-11-02) */
.plate-note { margin: 10px 0 0; font-size: 12.5px; letter-spacing: .02em; color: var(--ink-3); text-align: right; }
.pin { position: absolute; display: flex; align-items: center; gap: 10px; font-size: 14.5px; line-height: 1.35; color: var(--ink-2); }
.pin b { font: 500 19px/1.15 var(--serif); color: var(--ink); display: block; margin-bottom: 2px; }
.pin i { flex: none; width: 12px; height: 12px; border-radius: 50%; background: var(--wheat); border: 3px solid var(--garnet); box-shadow: 0 0 0 4px rgba(21, 16, 13, .4), 0 0 14px rgba(184, 69, 74, .6); }
.pin span { background: rgba(21, 16, 13, .9); border: 1px solid var(--hair); padding: 10px 13px; border-radius: 6px; max-width: 230px; box-shadow: 0 10px 26px rgba(0, 0, 0, .4); }
.pin.l { flex-direction: row-reverse; text-align: right; }
/* a pin placed by where its dot sits on the photo (--x, --y), its label beside it */
.pin.at { left: var(--x); top: var(--y); transform: translate(-6px, -50%); }
.pin.at.l { left: auto; right: calc(100% - var(--x)); transform: translate(6px, -50%); }
.also { display: grid; gap: 18px; margin: 6px 0 0; padding: 0; }
.also li { list-style: none; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; font-size: 16.5px; color: var(--ink-2); }
.also li b { font: 500 22px/1.2 var(--serif); color: var(--ink); display: block; margin-bottom: 4px; }
.also svg { width: 26px; height: 26px; color: var(--camel); margin-top: 3px; }

/* testimonials */
.words .wrap { display: grid; gap: 76px; }
.quote { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr); gap: clamp(28px, 5vw, 72px); align-items: start; }
.quote:nth-child(even) { grid-template-columns: minmax(0, 1.4fr) minmax(0, .8fr); }
.quote:nth-child(even) .qp { order: 2; }
.qp img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.qt { display: grid; gap: 20px; }
.qt .pull { font: italic 500 clamp(30px, 3.1vw, 44px)/1.12 var(--serif); color: var(--ink); }
.qt .rest { color: var(--ink-2); font-size: 16.5px; font-weight: 300; }
.qt .who { font-weight: 450; font-size: 15.5px; letter-spacing: .02em; }
.qt .who span { font-weight: 300; color: var(--ink-3); }

/* the drum being made */
.build { padding-block: clamp(76px, 9vw, 124px) 0; }
.build-head { display: grid; gap: 18px; max-width: 660px; margin-bottom: 20px; }
.build-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(32px, 5vw, 80px); }
.stage { position: sticky; top: calc(var(--bar) + 2vh); height: calc(96vh - var(--bar)); display: flex; flex-direction: column; justify-content: center; align-items: center; }
.stage canvas { width: min(100%, calc(88vh - var(--bar))); aspect-ratio: 1; opacity: 0; transition: opacity .8s; }
.stage canvas.ready { opacity: 1; }
/* the drum's name sits right under the drum, whatever size the drum is drawn */
.stage .cap { margin: 0; text-align: center; font: italic 500 19px/1.2 var(--serif); color: var(--wheat); }
.phone-cap { display: none; }
/* the steps end so the drum lets go, and the page scrolls on, while Your intention sits level with the drum's middle */
.bsteps { padding-block: 22vh max(0px, calc(12vh - var(--bar) / 2)); display: grid; gap: 0; }
.bstep { min-height: 72vh; display: flex; flex-direction: column; justify-content: center; gap: 12px; opacity: .3; transition: opacity .5s; }
.bstep.on { opacity: 1; }
.bstep .n, .phone-cap .n { font: 500 15px/1 var(--sans); color: var(--camel); letter-spacing: .04em; }
.bstep h3 { font-size: clamp(34px, 3.3vw, 48px); line-height: 1.02; }
.bstep p { color: var(--ink-2); max-width: 460px; font-weight: 300; }

/* steps */
.steps { border-top: 1px solid rgba(187, 148, 104, .14); margin-top: clamp(40px, 6vw, 80px); }
.steps .wrap { display: grid; gap: 48px; }
.srow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; counter-reset: s; padding: 0; margin: 0; }
.srow li { list-style: none; counter-increment: s; display: grid; gap: 14px; align-content: start; }
.srow img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 3px; }
.srow h3 { font-size: 27px; line-height: 1.08; display: flex; gap: 12px; align-items: baseline; }
.srow h3::before { content: counter(s); font: 500 15px/1 var(--sans); color: var(--camel); }
.srow p { font-size: 15.5px; color: var(--ink-2); font-weight: 300; }

/* a note from Dana, signed in her hand */
.note { background: radial-gradient(ellipse 46% 70% at 72% 50%, rgba(148, 37, 42, .3), transparent 72%), var(--night); }
.note .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.note img.ph { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 3px; }
.letter { display: grid; gap: 20px; max-width: 580px; }
.letter p { color: var(--ink-2); font-weight: 300; }
.letter .sig { display: block; width: min(300px, 76vw); margin-top: 10px; }
/* her signature writes itself in as it comes into view, as on her home page hero (js/drums.js adds .go) */
@media (prefers-reduced-motion: no-preference) {
  .letter .sig.write {
    -webkit-mask: var(--sig-mask) center / contain no-repeat, linear-gradient(90deg, #000 44%, transparent 56%) 100% 0 / 230% 100% no-repeat;
    -webkit-mask-composite: source-in;
    mask: var(--sig-mask) center / contain no-repeat, linear-gradient(90deg, #000 44%, transparent 56%) 100% 0 / 230% 100% no-repeat;
    mask-composite: intersect;
  }
  .letter .sig.write.go { animation: drum-sig-write 2.6s cubic-bezier(.45, .05, .3, 1) .25s both; }
  @keyframes drum-sig-write {
    from { -webkit-mask-position: center, 100% 0; mask-position: center, 100% 0; }
    to { -webkit-mask-position: center, 0% 0; mask-position: center, 0% 0; }
  }
}

/* the exchange */
.price .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); align-items: start; }
.price-copy { display: grid; gap: 22px; }
.ways { display: grid; gap: 0; border-top: 1px solid var(--hair); }
.way { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--hair); }
.way b { font: 500 clamp(36px, 3.4vw, 48px)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.way span { color: var(--ink-2); font-size: 16px; }
.way small { font: 300 15px/1 var(--sans); color: var(--ink-3); margin-left: 6px; }
.limit { display: flex; gap: 14px; align-items: center; padding: 18px 20px; background: var(--night); border: 1px solid var(--hair); border-radius: 10px; margin-top: 22px; }
.limit svg { width: 30px; height: 30px; flex: none; color: var(--camel); }
.limit p { font-size: 16px; }
.extra { display: grid; gap: 14px; margin-top: 24px; }
.extra p { font-size: 16px; color: var(--ink-2); font-weight: 300; }
.extra b { color: var(--ink); font-weight: 450; }

/* questions, open */
.faq .wrap { display: grid; gap: 44px; }
.qa { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 34px 48px; }
.qa div { display: grid; gap: 10px; }
.qa h3 { font-size: 27px; line-height: 1.12; }
.qa p { color: var(--ink-2); font-size: 16px; font-weight: 300; }

/* the request: her words beside the forms plug-in's piece, in its frame. The frame waits for the piece to draw. */
.start .wrap { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(36px, 6vw, 96px); align-items: start; }
.start-copy { display: grid; gap: 22px; position: sticky; top: calc(var(--bar) + 36px); }
.start-copy img { width: 100%; height: auto; max-width: 420px; aspect-ratio: 1; border-radius: 50%; object-fit: cover; box-shadow: 0 30px 70px rgba(8, 5, 4, .6), 0 0 60px rgba(148, 37, 42, .25); }
.formcard { background: var(--night); border: 1px solid var(--hair); border-radius: 16px; padding: clamp(22px, 3vw, 40px); }
.formcard:has(> [data-telify="site-form"]:empty) { display: none; }
/* Her look for the piece (the Dana thread's landing/request.css, by the built part names): her site's tokens come from
   site.css; here, her part rules. The one filled action is her garnet button, as everywhere on her site. Telify's own
   rules for a form's questions sit outside its layer and load after this file, so the rules on the questions name
   the questions part too, to outweigh them. */
[data-telify="site-form"] {
  --form-action: radial-gradient(circle at 30% 28%, var(--garnet-hot) 0%, var(--garnet) 55%, var(--oxblood) 130%);
  --form-action-line: rgba(187, 148, 104, .4); --form-action-glow: 0 0 26px rgba(148, 37, 42, .4);
}
[data-telify="site-form"] :is([data-part="next"], [data-part="send"]) { justify-self: start; width: auto; padding-inline: 26px; background: var(--form-action); color: var(--ink); border-color: var(--form-action-line); box-shadow: var(--form-action-glow); font-weight: 450; letter-spacing: .04em; }
[data-telify="site-form"] [data-part="questions"] [data-part="choice"][data-state="selected"] { background: var(--garnet); border-color: var(--garnet-hot); color: var(--ink); }
[data-telify="site-form"] :is([data-part="detailsHeading"], [data-part="doneHeading"]) { font-weight: 500; font-size: clamp(30px, 3vw, 38px); }
/* her questions: the one she asks first is her big serif line; the rest are her quiet sans labels */
[data-telify="site-form"] [data-part="questions"] [data-part="label"] { font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: .01em; color: var(--text-primary); }
[data-telify="site-form"] [data-part="question"]:first-child [data-part="label"] { font-family: var(--font-display); font-weight: 500; font-size: clamp(32px, 3.2vw, 42px); line-height: 1.1; letter-spacing: -.01em; text-wrap: balance; color: var(--ink); }
[data-telify="site-form"] [data-part="question"]:first-child [data-part="hint"] { order: 0; margin-top: 0; font-size: 16px; line-height: 1.5; color: var(--text-secondary); }
[data-telify="site-form"] [data-part="offerSignIn"] { font-weight: 450; letter-spacing: .03em; }
/* signed in: the lines balanced and her name kept whole, so a phone never leaves "Art." alone on the last line */
[data-telify="site-form"] [data-part="signedIn"] { text-wrap: balance; }
[data-telify="site-form"] [data-part="signedIn"] b { white-space: nowrap; }
/* the piece moves focus to the details heading as a step changes; her focus ring stays on the controls only */
[data-telify="site-form"] :is([data-part="detailsHeading"], [data-part="doneHeading"], [data-part="changed"], [data-part="error"]):focus-visible { outline: none; }

@media (max-width: 900px) {
  :root { --gut: max(16px, env(safe-area-inset-left, 0px)); --gut-r: max(16px, env(safe-area-inset-right, 0px)); }
  @layer site-reset { main { font-size: 16.5px; } }
  .hero { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero-photo { height: auto; aspect-ratio: .82; }
  .hero-photo::after { background: linear-gradient(180deg, transparent 94%, var(--espresso)); }
  .hero-txt { padding: 26px var(--gut-r) 52px var(--gut); background: radial-gradient(ellipse 90% 60% at 30% 30%, rgba(148, 37, 42, .26), transparent 72%); }
  .spin-drum { width: min(100vw, calc(60vh - var(--bar) * .6)); }
  .anat .wrap, .price .wrap, .note .wrap, .start .wrap { grid-template-columns: minmax(0, 1fr); }
  .pin { font-size: 12.5px; }
  .pin b { font-size: 16px; }
  .pin span { max-width: 150px; padding: 7px 9px; }
  .quote, .quote:nth-child(even) { grid-template-columns: minmax(0, 1fr); }
  .quote:nth-child(even) .qp { order: 0; }
  .qp img { aspect-ratio: 4 / 3; }
  .build-grid { grid-template-columns: minmax(0, 1fr); }
  .stage { top: var(--bar); height: calc(100vh - var(--bar)); z-index: 2; background: var(--espresso); display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 10px; padding-top: 2vh; }
  .stage canvas { width: min(100%, calc(48vh - var(--bar) * .5)); flex: none; }
  .stage .cap { position: static; order: 3; }
  .phone-cap { display: grid; gap: 8px; width: 100%; min-height: 32vh; align-content: start; }
  .phone-cap h3 { font-size: 32px; line-height: 1.02; }
  .phone-cap p { color: var(--ink-2); font-size: 16px; font-weight: 300; }
  /* The steps still drive the drum as they scroll past and still read to a screen reader; the phone shows them in the
     stage's caption (aria-hidden), so here they are clipped to nothing, keeping their box (Codex review 2026-10-26). */
  .bsteps { padding-block: 0 20vh; margin-top: -40vh; clip-path: inset(50%); }
  .bstep { min-height: 70vh; }
  .srow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 16px; }
  .qa { grid-template-columns: minmax(0, 1fr); }
  .start-copy { position: static; }
  .start-copy img { max-width: 220px; }
}
@media (max-width: 520px) {
  .srow { grid-template-columns: minmax(0, 1fr); }
  .srow img { aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) { .bstep, .stage canvas { transition: none; } }