/* Dana Wilcher Art: her home page (layout A, Painted ground, in Crimson). css/site.css comes first. */

/* ---------- the signature, writing itself in ---------- */
/* The signature is the page's h1: "Dana Wilcher Art" in words read only by screen readers, the drawing and ART beside
   them hidden from them. Its slide hides when the carousel moves on (opacity 0, visibility hidden); the heading keeps
   visibility of its own so it stays in the page for screen readers, unseen under the slide on show. */
.a-hero h1.sig-block { margin: 0; font: inherit; visibility: visible; }
.a-hero h1 .sig-glow, .a-hero h1 .sig, .a-hero h1 .sig-art { display: block; }
.a-hero .vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sig-glow { filter: drop-shadow(0 2px 18px rgba(148, 37, 42, 0.35)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.5)); }
.a-hero .sig { width: min(1000px, 84vw); }
/* Safari on some iPhones lays the signature's cut-out a hair below its color at some heights on the screen, and the
   color's top edge showed as a thin line above her name (Gabriel 2026-11-03). Her ink starts 7% down, so the color now
   starts 1px down and there is nothing at the edge to show. */
.a-hero .sig { background-clip: content-box; padding-top: 1px; }
.sig-art { margin-top: 18px; font-size: 15px; font-weight: 300; letter-spacing: 0.62em; padding-left: 0.62em; color: var(--wheat); opacity: .85; }
@media (prefers-reduced-motion: no-preference) {
  .sig-glow .sig {
    -webkit-mask: var(--sig-mask) center / contain no-repeat, linear-gradient(90deg, #000 44%, transparent 56%) 0% 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%) 0% 0 / 230% 100% no-repeat;
    mask-composite: intersect;
  }
  @keyframes 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 hero replays the writing each time it comes round, and un-writes it in reverse on the way out. */
  .a-hero .sig-glow .sig { animation: none; }
  .a-hero .s0.in .sig-glow .sig { animation: sig-write 1.7s cubic-bezier(.45, .05, .3, 1) .15s both; }
  .a-hero .s0.out .sig-glow .sig { animation: sig-unwrite 1s cubic-bezier(.55, 0, .7, .9) both; }
  @keyframes sig-unwrite {
    from { -webkit-mask-position: center, 0% 0; mask-position: center, 0% 0; }
    to { -webkit-mask-position: center, 100% 0; mask-position: center, 100% 0; }
  }
  .a-hero .s0.in .sig-art { animation: rise-in .8s ease .9s both; }
  /* The line and buttons come in with the signature and leave with it. */
  .a-hero .s0.in .lede { animation: rise-in .7s ease .5s both; }
  .a-hero .s0.in .ctas { animation: rise-in .7s ease .7s both; }
  @keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
}

/* Sections fade up as they scroll into view, siblings one after another. */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(28px); transition: opacity 1s ease var(--d, 0s), transform 1.1s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
  .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .a-slide .art { transition: none; transform: none; }
  .a-dots button.on span::after { animation: none; transform: scaleX(1); }
}

/* ---------- section heads ---------- */
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 64px; }
.sec-sub { margin-top: 16px; }

/* ---------- her header on Home ---------- */
/* Clear over the full-screen hero, the night band once the page moves (js/home.js sets body.scrolled), as her mockup.
   Its size, links and stacking are site.css's, as on every page; only where it sits and its ground at the top differ. */
body[data-page="home"] .topbar { position: fixed; top: 0; left: 0; right: 0; background: transparent; box-shadow: none; transition: background-color .35s ease, box-shadow .35s ease; }
body[data-page="home"].scrolled .topbar { background: #15100D; box-shadow: inset 0 -1px 0 rgba(201, 163, 91, 0.45); }
body[data-page="home"] [id] { scroll-margin-top: var(--head-h); }

/* ---------- the hero: the signature on the painted ground, then She Rises, then Emergence ---------- */
/* The hero and the film take the screen's height with its browser bars showing (svh): Android Chrome changes vh as a
   print's window opens and closes, so both sections grew and shrank and moved the page below them (Gabriel 2026-11-01). */
.a-hero { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; background: var(--espresso); }
.a-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 140px; z-index: 1; pointer-events: none; background: linear-gradient(transparent, var(--espresso)); }
.a-slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 0s linear 1s; }
.a-slide.is-active { opacity: 1; visibility: visible; transition: opacity 1s ease, visibility 0s; z-index: 1; }
/* The Book page's band painting, repainted at screen shape with her signature's area kept clear of gold and teal, under the Book page's shading. */
.a-slide .bg { position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(30, 24, 20, 0.62), rgba(30, 24, 20, 0.38) 75%),
    url(/img/home/hero-band-wide.b9eb599e71e5.webp) center / cover no-repeat var(--espresso); }
@media (max-aspect-ratio: 1/1) {
  .a-slide .bg { background:
    radial-gradient(ellipse 60% 80% at 50% 50%, rgba(30, 24, 20, 0.62), rgba(30, 24, 20, 0.38) 75%),
    url(/img/home/hero-band-tall.b254c9b033b2.webp) center / cover no-repeat var(--espresso); }
}
.a-slide .art { position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat; transform: scale(1.07); transition: transform 11s cubic-bezier(.2, .6, .3, 1); }
.a-slide.is-active .art { transform: scale(1); }
.a-slide.s1 .art { background-position: center 3%; transform-origin: 50% 15%; }
.a-slide.s2 .art { background-position: center 30%; }
.a-slide .scrim { position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(30, 24, 20, 0.92) 0%, rgba(30, 24, 20, 0.5) 30%, transparent 58%),
              linear-gradient(90deg, rgba(30, 24, 20, 0.55) 0%, transparent 45%),
              linear-gradient(180deg, rgba(30, 24, 20, 0.65) 0%, transparent 22%); }
.a-hero-body { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 90px 24px 110px; }
.a-hero .lede { text-align: center; margin-top: 40px; font-style: italic; font-size: 24px; color: var(--ink); max-width: 30em; }
.a-hero .ctas { display: flex; gap: 14px; margin-top: 34px; }
.a-slide.s0 .sig-art, .a-slide.s0 .lede, .a-slide.s0 .ctas { transition: opacity .7s ease; }
.a-slide.s0.out .sig-art, .a-slide.s0.out .lede, .a-slide.s0.out .ctas { opacity: 0; }
/* On the way out the signature and ART go first, then the line slowly, then the buttons. */
.a-hero .s0.out .sig-art { animation: fade-away .8s ease .1s both; }
.a-hero .s0.out .lede { animation: fade-away 1.3s ease .7s both; }
.a-hero .s0.out .ctas { animation: fade-away .7s ease 1.7s both; }
@keyframes fade-away { from { opacity: 1; } to { opacity: 0; } }

/* Painting slides: title, then button, rise in one after another */
.a-cap { position: absolute; left: max(40px, calc((100vw - 1240px) / 2)); bottom: 120px; max-width: 760px; z-index: 2; }
.a-cap .t { margin: 10px 0 0; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: clamp(64px, 8.4vw, 132px); line-height: 1.02; letter-spacing: -0.015em; overflow: hidden; padding-bottom: 0.08em; }
.a-cap .t > span { display: inline-block; }
.a-cap .acts { margin-top: 28px; display: flex; gap: 14px; }
.a-cap .acts { opacity: 0; transform: translateY(14px); transition: opacity .5s ease, transform .5s ease; }
.a-cap .t > span { transform: translateY(108%); transition: transform .55s cubic-bezier(.5, 0, .75, 0); }
.a-slide.show-text .a-cap .t > span { transform: none; transition: transform 1.2s cubic-bezier(.2, .75, .2, 1) .35s; }
.a-slide.show-text .a-cap .acts { opacity: 1; transform: none; transition: opacity .9s ease 1s, transform .9s cubic-bezier(.2, .7, .2, 1) 1s; }

.a-dots { position: absolute; right: max(40px, calc((100vw - 1240px) / 2)); bottom: 52px; z-index: 3; display: flex; align-items: center; gap: 10px; }
.a-dots button { width: 44px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.a-dots button span { display: block; height: 2px; background: rgba(239, 231, 214, 0.28); border-radius: 1px; overflow: hidden; }
.a-dots button span::after { content: ""; display: block; height: 100%; background: var(--wheat); transform: scaleX(0); transform-origin: left; }
.a-dots button.done span::after { transform: scaleX(1); }
.a-dots button.on span::after { animation: dot-fill var(--dur, 7s) linear forwards; }
@keyframes dot-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- prints in gliding rows on a lit wall band ---------- */
.a-prints { padding: 120px 0; background: radial-gradient(ellipse 50% 45% at 22% 55%, rgba(148, 37, 42, 0.22), transparent 70%), var(--espresso); }
.pr-wall { margin-top: 8px; display: flex; flex-direction: column; overflow: hidden;
  background: radial-gradient(ellipse 70% 120% at 30% 0%, #EFE6D6 0%, #DCCFBA 55%, #C5B59C 100%); box-shadow: inset 0 18px 30px -18px rgba(30, 20, 12, 0.5), inset 0 -18px 30px -18px rgba(30, 20, 12, 0.45); }
.glide-wall { gap: 40px; padding: 52px 0 46px; }
/* The shop's grid draws inside the kit's frame; it steps aside so her rows lay out as before. */
.glide-wall > [data-telify-frame] { display: contents; }
/* Room above and below inside the row's clip, given back by the margin, so a print lifting on hover keeps its frame top. */
.glide { position: relative; overflow: hidden; padding: 12px 0; margin: -12px 0; cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%); }
.gtrack { display: flex; gap: 36px; width: max-content; will-change: transform; }
.gtrack.gliding { transition: transform 1.5s cubic-bezier(.65, 0, .3, 1); }
.glide.grabbing { cursor: grabbing; }
.glide img, .glide a { -webkit-user-drag: none; }
/* No tap flash on a print; the window opening is the feedback. */
.pitem { -webkit-tap-highlight-color: transparent; }
.glide img { pointer-events: none; }
.pitem { display: flex; flex-direction: column; align-items: center; gap: 12px; color: #2A211C; }
.pitem .frame { position: relative; height: 214px; padding: 13px; background: #FBF8F1; border: 6px solid #2B211B; box-shadow: 0 26px 30px -16px rgba(45, 28, 16, 0.55), 0 4px 10px rgba(45, 28, 16, 0.25); transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .35s; }
.pitem .frame img { position: relative; height: 100%; width: auto; max-width: none; aspect-ratio: auto 3 / 4; opacity: 0; transition: opacity .5s ease; }
/* Until its picture is in, a print shows a soft placeholder the shape of a print, breathing slowly; then the picture
   fades in over it (Gabriel 2026-10-30). js/home.js marks the frame .ld. */
.pitem .frame::before { content: ""; position: absolute; inset: 13px; background: #E9E0CF; animation: print-wait 1.4s ease-in-out infinite alternate; transition: opacity .5s ease; }
.pitem .frame.ld img { opacity: 1; }
.pitem .frame.ld::before { opacity: 0; animation: none; }
@keyframes print-wait { from { opacity: .45; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pitem .frame::before { animation: none; } .pitem .frame img { transition: none; } }
/* a mouse lifts a print as it passes; a finger only when it taps one (.tapped, js/print-window.js), never as a scroll
   or a drag touches it (Gabriel 2026-11-01: an iPhone lifted every print a scroll ran over) */
.pitem.tapped .frame { transform: translateY(-6px); box-shadow: 0 34px 36px -16px rgba(45, 28, 16, 0.6), 0 6px 14px rgba(45, 28, 16, 0.3); }
@media (hover: hover) { .pitem:hover .frame { transform: translateY(-6px); box-shadow: 0 34px 36px -16px rgba(45, 28, 16, 0.6), 0 6px 14px rgba(45, 28, 16, 0.3); } }
.pitem .t { font-family: var(--serif); font-style: italic; font-size: 17px; line-height: 1.1; text-align: center; max-width: 190px; }
.pitem .m { font-size: 13px; color: rgba(42, 33, 28, 0.62); margin-top: -8px; }
/* A print opens in her print window, shared with her Prints page (css/print-window.css). */

/* ---------- her story: a silent loop of her Artist Bio film; the button opens the full film with sound ---------- */
.a-film { position: relative; height: min(88vh, 820px); height: min(88svh, 820px); min-height: 520px; overflow: hidden; background: var(--espresso); }
.a-film .loop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.a-film .scrim { position: absolute; inset: 0; background:
  linear-gradient(180deg, var(--espresso) 0%, transparent 18%, transparent 82%, var(--espresso) 100%),
  radial-gradient(ellipse 55% 60% at 50% 55%, rgba(30, 24, 20, 0.30), rgba(30, 24, 20, 0.72)); }
.a-film-body { position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 24px; }
.a-film .h2 { font-style: italic; font-size: clamp(52px, 6.4vw, 92px); }
.a-film .lede { margin-top: 18px; color: var(--ink); text-align: center; }
.a-film .btn { margin-top: 34px; }
.btn .play-i { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(248, 243, 234, 0.6); display: grid; place-items: center; margin-left: -8px; }
.btn .play-i svg { width: 10px; height: 10px; margin-left: 2px; }
.film-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 6vh 5vw; background: rgba(14, 10, 8, 0.94); opacity: 0; transition: opacity .35s ease; }
.film-modal[hidden] { display: none; }
.film-modal.open { opacity: 1; }
.film-modal video { width: min(1240px, 100%); max-height: 84vh; aspect-ratio: 16 / 9; background: #000; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); }
.film-modal .close { position: absolute; top: 22px; right: 26px; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(239, 231, 214, 0.3); background: rgba(30, 24, 20, 0.6); color: var(--ink); cursor: pointer; display: grid; place-items: center; }
.film-modal .close svg { width: 18px; height: 18px; }

/* ---------- original paintings, hung salon style ---------- */
.a-salon { padding: 70px 0 120px; }
.salon { --u: min(1px, calc((100vw - 64px) / 1300)); display: flex; flex-direction: column; gap: 80px; }
.salon-row { display: flex; justify-content: center; align-items: center; gap: calc(64 * var(--u)); }
.salon figure { margin: 0; display: flex; flex-direction: column; gap: 16px; position: relative; }
/* the title's link covers the whole painting, so a tap anywhere on it opens her Originals page */
.salon figcaption a { color: inherit; text-decoration: none; }
.salon figcaption a::after { content: ""; position: absolute; inset: 0; }
.salon figure img { height: calc(var(--h) * var(--u)); width: auto; }
.salon figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.salon figcaption .title-it { font-size: 22px; }
/* each available original's price beside its title, in her serif (Dana's copy review 2026-11-02) */
.salon figcaption .price { font-family: var(--serif); font-size: 20px; color: var(--wheat); white-space: nowrap; }

/* ---------- Sacred Initiations ---------- */
.a-series { padding: 120px 0; background: linear-gradient(180deg, var(--espresso), var(--night) 30%, var(--night) 70%, var(--espresso)); }
.a-series .wrap { display: grid; grid-template-columns: 1.05fr 1fr; gap: 96px; align-items: center; }
.pair { position: relative; height: 640px; }
.pair img { position: absolute; }
.pair .p1 { height: 560px; left: 0; top: 0; }
.pair .p2 { height: 440px; right: 0; bottom: 0; outline: 10px solid var(--night); }
.a-series .p { margin-top: 26px; }
.a-series .btn { margin-top: 34px; }

/* ---------- Meet Dana ---------- */
/* Her story ends her Home, below Paint with Dana (Gabriel 2026-10-28), so it opens with its own space. */
.a-artist { padding: 120px 0 130px; }
.a-artist .wrap { display: grid; grid-template-columns: 0.9fr 1fr; gap: 96px; align-items: center; }
.a-artist img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 40%; }
.a-artist .p.first { margin-top: 26px; }
.a-artist .p + .p { margin-top: 18px; }
.a-artist .textlink { display: inline-block; margin-top: 30px; }

/* ---------- classes: Telify's offerings piece in her rows ---------- */
.a-classes { padding: 110px 0; background: radial-gradient(ellipse 80% 120% at 0% 0%, rgba(148, 37, 42, 0.42), transparent 60%), linear-gradient(160deg, var(--oxblood) 0%, #3A1B17 45%, var(--night) 100%); border-top: 1px solid rgba(187, 148, 104, 0.18); }
.a-classes .wrap { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 96px; align-items: start; }
.a-classes .p { margin-top: 22px; }
.a-classes .btn { margin-top: 34px; }
.classes [data-part="list"] { border-top: 1px solid var(--hair); }
.classes [data-part="item"] { gap: 4px 24px; padding: 20px 0; border-bottom: 1px solid var(--hair); color: var(--ink); }
.classes [data-part="name"] { margin: 0; font-family: var(--serif); font-size: 25px; font-weight: 500; line-height: 1.2; color: var(--ink); }
.classes [data-part="when"], .classes [data-part="length"], .classes [data-part="separator"], .classes [data-part="spots"] { font-size: 14.5px; letter-spacing: 0.02em; color: var(--ink-3); }
.classes [data-part="spots"][data-state="low"] { color: var(--wheat); font-weight: 400; }
.classes [data-part="price"] { font-family: var(--serif); font-size: 22px; font-weight: 400; color: var(--wheat); }

/* ---------- narrow screens ---------- */
@media (max-width: 860px) {
  .a-hero .sig { width: calc(100vw - 40px); }
  .sig-art { font-size: 12px; margin-top: 12px; }
  .a-hero .lede { font-size: 20px; }
  .a-hero .ctas { flex-direction: column; width: 100%; max-width: 320px; }
  .a-cap { left: 20px; right: 20px; bottom: 92px; }
  .a-cap .t { font-size: 56px; }
  .a-dots { right: 16px; bottom: 36px; }
  .a-slide.s1 .art { background-position: center 6%; }
  .a-slide.s2 .art { background-position: 52% 20%; }
  .sec-head { flex-direction: column; align-items: flex-start; margin-bottom: 36px; }
  .salon { gap: 36px; }
  .salon-row { flex-direction: column; gap: 36px; }
  .salon figure, .salon figure img { width: 100%; height: auto; }
  .a-series .wrap, .a-artist .wrap, .a-classes .wrap { grid-template-columns: 1fr; gap: 48px; }
  .a-series, .a-prints, .a-classes { padding: 72px 0; }
  .a-artist { padding-top: 72px; }
  /* On a phone, Original paintings shows Emergence alone; See all six opens the rest (Gabriel 2026-10-28). */
  .a-salon .salon-row + .salon-row, .a-salon .salon-row figure + figure { display: none; }
  .pair { height: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
  .pair img { position: static; width: 100%; height: auto !important; outline: 0 !important; }
  .glide-wall { gap: 28px; padding: 36px 0 32px; }
  .glide { -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0%, #000 5%, #000 95%, transparent 100%); }
  .gtrack { gap: 20px; }
  .pitem .frame { height: 170px; padding: 10px; border-width: 5px; }
  .pitem .frame::before { inset: 10px; }
  .pitem .t { font-size: 15px; max-width: 150px; }
}

/* ---------- Gallery: a still of her own hall, slowly moving in as if walking; the band opens her Gallery ---------- */
.h-hall { position: relative; display: block; height: min(86vh, 800px); min-height: 520px; overflow: hidden; isolation: isolate; color: var(--ink); }
.h-hall .still { position: absolute; inset: 0; z-index: -2; background: url(/img/home/hall.21a2813002b6.jpg) 38% 46% / cover no-repeat; transform-origin: 52% 48%; }
@media (prefers-reduced-motion: no-preference) {
  .h-hall .still { animation: hall-walk 26s ease-in-out infinite alternate; }
  @keyframes hall-walk { from { transform: scale(1); } to { transform: scale(1.14); } }
}
.h-hall::before { content: ""; position: absolute; inset: 0; z-index: -1; background:
  linear-gradient(180deg, var(--espresso) 0%, rgba(42, 33, 28, 0) 18%, rgba(42, 33, 28, 0) 52%, rgba(20, 14, 11, 0.86) 84%, var(--espresso) 100%),
  radial-gradient(ellipse 60% 50% at 50% 46%, transparent 40%, rgba(14, 9, 7, 0.35) 100%); }
.h-hall .in { position: absolute; left: 0; right: 0; bottom: 84px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.h-hall .h2 { font-size: clamp(52px, 6.4vw, 92px); font-style: italic; }
.h-hall .lede { margin-top: 14px; color: var(--ink); text-align: center; }
.h-hall .btn { margin-top: 30px; }

/* ---------- Commissions: her pictures stacked a little, the words and one button beside them ---------- */
.hc-stack { padding: 120px 0 130px; background: radial-gradient(ellipse 46% 60% at 78% 50%, rgba(148, 37, 42, .2), transparent 70%); }
.hc-stack .wrap { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 96px; align-items: center; }
.hc-stack .p { margin-top: 24px; }
.hc-stack .btn { margin-top: 34px; }
.hc-pile { position: relative; width: min(600px, 100%); aspect-ratio: 1 / 0.92; margin-left: auto; }
.hc-pile img { position: absolute; }
.hc-pile .back { width: 40%; left: 0; top: 4%; transform: rotate(-3deg); }
.hc-pile .mid { width: 54%; right: 0; top: 0; z-index: 1; }
.hc-pile .front { width: 46%; left: 12%; bottom: 0; z-index: 2; border-radius: 50%; outline: 8px solid var(--espresso); }

@media (max-width: 860px) {
  .h-hall { height: 76vh; height: 76svh; min-height: 480px; }
  .h-hall .still { background-position: 30% 50%; }
  .h-hall .in { bottom: 56px; padding: 0 20px; }
  .h-hall .h2 { font-size: 58px; }
  .h-hall .lede { font-size: 19px; }
  .hc-stack { padding: 72px 0 80px; }
  .hc-stack .wrap { grid-template-columns: 1fr; gap: 48px; }
  /* on a phone the pictures come first, then the title, words and button (Gabriel 2026-10-28) */
  .hc-pile { margin: 0 auto; order: -1; }
  .hc-pile .front { outline-width: 6px; }
}