/* About, community and group-programme pages: direction B carried over. A dark opening band, large type, quiet motion. */
.page-hero{position:relative;isolation:isolate;overflow:hidden;background:#11110f;color:#f8f4e8}
.page-hero .wrap{position:relative;z-index:1;display:grid;gap:1.1rem;align-content:end;min-height:clamp(23rem,54vw,35rem);padding-block:clamp(3rem,9vw,6.5rem) clamp(2.2rem,6vw,4.5rem)}
.page-hero h1{max-width:17em;font-size:clamp(2.05rem,6.2vw,4.7rem);font-weight:750;line-height:1.2;letter-spacing:-.06em;word-break:keep-all;text-wrap:balance}
.page-hero h1 em{font-style:normal;color:#ff9a4d}
.page-hero .lead{max-width:34rem;color:#d8d2c6;font-size:clamp(1rem,1.6vw,1.15rem);line-height:1.8}
.editorial-home .page-hero .label{color:#ffd6b8}
.page-hero .button{justify-self:start}
.page-hero :focus-visible{outline-color:#fff}
.beam{position:absolute;inset:0;z-index:0;width:100%;height:100%}
.hero-photo{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.page-hero.has-photo::after{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(0deg,#11110f 6%,#11110fb3 45%,#11110f4d 100%)}

.page-body{padding-bottom:clamp(3rem,8vw,6rem)}
.band{padding-block:clamp(2.6rem,7vw,5.5rem);border-top:1px solid var(--line)}
.page-body>.band:first-child{border-top:0}
.band h2{max-width:22em;margin-bottom:1rem;font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:700;line-height:1.3;letter-spacing:-.05em;text-wrap:balance}
.band h3{font-size:1.15rem;font-weight:700;letter-spacing:-.03em;line-height:1.4}
.band p{max-width:40rem;color:var(--muted);line-height:1.85}
.band p+p{margin-top:.9rem}
.editorial-home .band .label{display:block;margin-bottom:.5rem;color:var(--accent)}
.band a:not(.button,.brand-link){font-weight:650;text-underline-offset:.25em}

/* "Watch briefly, think for long": the idea of the whole project as two lines of type. */
.band .statement{max-width:none;margin-bottom:1.6rem;font-size:clamp(2.3rem,8.4vw,6.2rem);line-height:1.1;letter-spacing:-.07em;word-break:keep-all}
.statement span{display:block}
.band .statement span:first-child{font-weight:300;color:var(--muted)}
.statement span:last-child{font-weight:800;color:var(--ink)}

.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,5vw,4rem);margin-top:1.6rem}
.duo>div{padding-top:1.1rem;border-top:2px solid var(--ink)}
.duo h3{margin-bottom:.5rem;font-size:1.3rem}

/* Questions take turns, one at a time. Without script or with reduced motion they simply stand as a list. */
.ticker p{max-width:22em;padding:.7rem 0;border-top:1px solid var(--line);color:var(--ink);font-size:clamp(1.35rem,4vw,2.9rem);font-weight:700;line-height:1.4;letter-spacing:-.05em;word-break:keep-all}
.ticker.is-live{display:grid}
.ticker.is-live p{grid-area:1/1;border-top:0;opacity:0;transform:translateY(14px);transition:opacity calc(.9s * var(--motion-speed,1)),transform calc(.9s * var(--motion-speed,1))}
.ticker.is-live p.is-on{opacity:1;transform:none}
.band .fineprint{margin-top:.9rem;font-size:.8rem}

/* The evening in order: a line is drawn, then the four moments appear along it. */
.flow-line{display:block;height:1px;margin-top:2rem;background:var(--ink);transform-origin:left center}
.flow{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5rem}
.flow li{position:relative;padding-top:1.4rem}
.flow li::before{content:"";position:absolute;inset:-.3rem auto auto 0;width:.6rem;height:.6rem;border-radius:50%;background:var(--rockcha-orange)}
.flow h3{margin-bottom:.35rem}
.flow p{font-size:.95rem}

.promise{list-style:none;padding:0;margin:1.3rem 0 0;border-top:2px solid var(--ink)}
.promise li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:.4rem 2rem;padding:1.15rem 0;border-bottom:1px solid var(--line)}
.promise strong{font-size:1.2rem;letter-spacing:-.035em;line-height:1.4}
.promise span{color:var(--muted);line-height:1.8}

/* A strip of film frames drifting past. It stops when the pointer or keyboard focus is on it. */
.strip{overflow:hidden;margin-top:1.8rem;padding-block:.9rem;border-block:5px dashed var(--line)}
.strip-track{display:flex;gap:.9rem;width:max-content}
.strip figure{flex:none;width:clamp(7.5rem,17vw,11.5rem);margin:0}
.strip img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;background:var(--line)}
.strip figcaption{margin-top:.35rem;font-size:.76rem;color:var(--muted)}
@keyframes strip{to{transform:translateX(calc(-50% - .45rem))}}
@media (prefers-reduced-motion:no-preference){
  .strip-track{animation:strip calc(60s * var(--motion-speed,1)) linear infinite}
  .strip:hover .strip-track,.strip:focus-within .strip-track{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){.strip{overflow-x:auto}}

.cta-band{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:clamp(1.4rem,4vw,2.4rem);border:1px solid var(--ink)}
.cta-band h2{margin:0 0 .3rem;font-size:clamp(1.25rem,2.6vw,1.7rem)}
.cta-band p{margin:0}
.page-body .community-scenes{margin-top:0}
.band .info-links{margin-top:1rem}
.band address{font-style:normal;color:var(--ink);font-weight:600}
@media(max-width:700px){
  .duo,.promise li{grid-template-columns:minmax(0,1fr)}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Terms, privacy policy, refund rules: long reading text. */
.legal{max-width:calc(46rem + 2 * var(--page-gutter));padding-block:clamp(2rem,6vw,4rem) clamp(3rem,8vw,6rem);word-break:keep-all;overflow-wrap:anywhere}
.legal h1{margin:.3em 0 .6em;font-size:clamp(2rem,5vw,3rem);font-weight:750;letter-spacing:-.05em;line-height:1.2}
.legal h2{margin:2.4rem 0 .7rem;padding-top:1.2rem;border-top:1px solid var(--line);font-size:1.2rem;letter-spacing:-.03em;line-height:1.4;scroll-margin-top:1rem}
.legal :is(p,li){color:var(--muted);line-height:1.85}
.legal p{margin:.6rem 0}
.legal :is(ol,ul){margin:.6rem 0;padding-inline-start:1.3rem}
.legal li{margin:.35rem 0}
.legal li ul{margin:.3rem 0}
.legal-draft{margin:0 0 1.5rem;padding:.8rem 1rem;border:1px solid var(--rockcha-orange);color:var(--ink)!important}
.legal-table{overflow-x:auto;margin:.9rem 0}
.legal-table table{width:100%;border-collapse:collapse;font-size:.92rem}
.legal-table :is(th,td){padding:.65rem .8rem .65rem 0;border-bottom:1px solid var(--line);text-align:start;vertical-align:top;line-height:1.65}
.legal-table th{border-bottom-color:var(--ink);font-size:.8rem;color:var(--muted)}
.legal-table td:first-child{color:var(--ink);font-weight:600}
.legal-table td{color:var(--muted)}
.legal-links{display:flex;flex-wrap:wrap;gap:.2rem 1.3rem;margin-top:3rem;padding-top:1.2rem;border-top:1px solid var(--line)}
.legal-links a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}