/* Final fixes v11 (Oct 13, 2026): the next step after a click, proof in the first screen, the budget guide,
   music first in One team, Julia's words, artists by scale, and more air: sections 120-160 px apart on a
   desktop and 72-96 px on a phone, 24-32 px between a heading and its text, lines of at most 60 characters
   at 1.6, a soft fade-up as sections enter, a very slow zoom on the hero photos, no parallax, no bounce. */

/* what happens after the click */
/* the line under a request button: its own small step below the button, one quiet sentence */
.next-step-line{margin-top:18px;font-size:13px;font-weight:500;line-height:1.55;letter-spacing:.005em;color:color-mix(in srgb,currentColor 62%,transparent);max-width:44ch;text-wrap:balance}
.booking-cta{display:grid;justify-items:end;text-align:right;gap:0}
.booking-cta .next-step-line{max-width:32ch}
/* the closing blocks and the event masthead style their own paragraphs larger: the line keeps its size */
.subpage-cta-grid>div:last-child>p.next-step-line,.event-deck p.next-step-line{margin:18px 0 0;font-size:13px;line-height:1.55}
@media(max-width:700px){.booking-cta{justify-items:start;text-align:left}}
.budget-guide{margin-top:20px;font-size:15px;font-weight:600;line-height:1.6;color:var(--ink)}
.hero-note .hero-proof{margin:6px 0 0;font-size:11px;font-weight:600;line-height:1.6;letter-spacing:.07em;text-transform:uppercase;color:#f7f5efcc;text-shadow:0 1px 12px #0006}
.form-budget-guide{margin:0 0 4px;font-size:13px;font-weight:600;line-height:1.6;color:var(--ink)}
.inquiry-form-wrap .next-step-line{margin-top:4px;max-width:none}

/* One team: the music line leads */
.team-body{display:grid;gap:clamp(20px,2.4vw,32px)}
.music-first{margin:0;font-size:clamp(18px,1.6vw,22px);line-height:1.6;max-width:60ch}
.music-first b{font-weight:700}
/* no rule above the music line: it sat right under the underlined Read our story as a second stripe */
.proof-music{margin-top:32px;padding-top:0;border-top:0}
.proof-music .music-first{font-size:16px}
.proof-booking{margin-top:8px}

/* the closing section */
.contact-title{font-size:clamp(75px,13.5vw,225px);line-height:.88;letter-spacing:-.027em;max-width:82%;position:relative;z-index:1}
.contact-lead{position:relative;z-index:1;margin-top:28px;font-size:clamp(18px,1.7vw,24px);line-height:1.5;max-width:40ch}
.contact-actions{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
.contact-banner .next-step-line{position:relative;z-index:1}
.contact-share .contact-tagline{font:600 12px/1.5 var(--body);letter-spacing:.08em;text-transform:uppercase;max-width:none}

/* Julia's words: the pull quote, then her full text, smaller */
.testimonial-figure{align-items:start}
.testimonial-pull{margin:0;font:600 clamp(28px,3vw,44px)/1.12 var(--display);text-transform:uppercase;letter-spacing:-.01em;text-wrap:balance}
.testimonial-text{margin:22px 0 0;font-size:16px;line-height:1.6;color:var(--muted);max-width:60ch}
.testimonial-text p{margin:0}

/* artists by scale on Our story */
.story-stages{margin-block:clamp(40px,5vw,72px)}
.story-stages-title{margin:0 0 24px;font:600 clamp(24px,2.4vw,34px)/1.15 var(--display);text-transform:uppercase}
.stage-rows{margin:0;border-top:1px solid var(--line)}
.stage-rows>div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px 32px;padding:18px 0;border-bottom:1px solid var(--line)}
.stage-rows dt{font-weight:700}
.stage-rows dt span{font-weight:400;color:var(--muted)}
.stage-rows dd{margin:0;font-size:clamp(18px,1.6vw,22px)}
.story-booking{margin-top:20px;font-size:16px;line-height:1.6;max-width:60ch}

/* the second photograph of an event, lower on its page */
.event-detail-photo{margin:0 auto;padding-block:0 clamp(72px,8vw,120px)}
.event-detail-photo img{display:block;width:auto;max-width:100%;height:auto;max-height:86vh;margin-inline:auto;border-radius:var(--photo-radius,8px)}

/* air */
/* 120-152 px between two sections: a section with its own colour holds it inside its band; plain paper
   sections next to each other each take half, so their gaps do not add up to 300 px */
@media(min-width:701px){
 .experience-section,.story-names,.subpage-cta{padding-block:clamp(120px,10vw,152px)}
 .intro,.booking-path,.team-section,.discretion-section,.testimonial,.event-scope,.event-questions,.story-chapters{padding-block:clamp(60px,5vw,76px)}
 .work-scroller{padding-block:clamp(60px,5vw,76px)}
 .section-heading .eyebrow,.booking-intro .eyebrow,.team-head .eyebrow,.story-section-head .eyebrow,.event-section-heading .eyebrow{margin-bottom:28px}
}
@media(max-width:700px){
 .experience-section,.story-names,.subpage-cta{padding-block:80px}
 .intro,.booking-path,.team-section,.discretion-section,.testimonial,.event-scope,.event-questions,.story-chapters,.work-scroller{padding-block:40px}
 .section-heading .eyebrow,.booking-intro .eyebrow,.team-head .eyebrow,.story-section-head .eyebrow,.event-section-heading .eyebrow{margin-bottom:20px}
 .stage-rows>div{grid-template-columns:1fr}
 .contact-title{font-size:clamp(54px,17vw,94px);line-height:.94;max-width:none}
 .contact-actions .button{width:100%}
}
.intro-copy p,.occasion-copy>p,.discretion-section p,.booking-steps p,.event-deck p,.archive-description,.story-copy p,.proof-private{line-height:1.6;max-width:60ch}

/* bigger pictures: occasion photographs and portfolio panoramas run larger, panoramas edge to edge */
@media(min-width:901px){
 .occasion-panel{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:6%}
 .occasion-photo{height:min(680px,72vh)}
}
.cms-archive-project--panorama .archive-photo{width:calc(100% + 2 * var(--space));margin-inline:calc(-1 * var(--space));border-radius:0}

/* motion: a soft fade-up, a very slow zoom on the hero, nothing tied to the scroll position */
.motion-ready .reveal{transform:translateY(16px);transition:opacity .45s ease,transform .45s ease}
.scroll-motion .motion-photo>img,.scroll-motion [data-motion="panorama"]>img{transform:none!important}
@keyframes hero-slow-zoom{from{transform:scale(1)}to{transform:scale(1.07)}}
.hero-editorial .hero-slide.is-active img{animation:hero-slow-zoom 24s ease-out both}
@media(prefers-reduced-motion:reduce){
 .hero-editorial .hero-slide.is-active img{animation:none}
 .motion-ready .reveal{transform:none;transition:none}
}

/* the footer identity under the full logo on a phone: one column, read from the left */
@media(max-width:700px){
 .footer-identity{display:grid;justify-content:start;gap:12px}
 .footer-identity>p{text-align:left;max-width:none}
}

/* the photograph's own caption, in the chapter's text (v11, P4: "Festival main stage · our production") */
.archive-photo-caption{margin:10px 0 0;font-size:12px;line-height:1.6;color:var(--muted)}

/* photographs: a quiet loader in the photograph's own box until it arrives
   (static/js/image-loader.js); the box keeps the width and height from the markup */
img{transition:opacity .35s ease}
img.is-loading{opacity:1;background-color:rgba(128,128,120,.16);background-image:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.22) 50%,transparent 70%);background-size:220% 100%;background-repeat:no-repeat;animation:image-loading 1.3s linear infinite}
@keyframes image-loading{from{background-position:120% 0}to{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){img.is-loading{animation:none}}

/* the share button: one quiet pill with a filled +1 badge, no underline; the answer appears beside it,
   with a tick only when the link was really copied or shared (data-share-state, share.js) */
.share-group .share-button{gap:12px;min-height:46px;padding:5px 20px 5px 5px;border:1px solid color-mix(in srgb,currentColor 28%,transparent);border-radius:999px;background:transparent;transition:background .25s,color .25s,border-color .25s}
.share-group .share-button:hover,.share-group .share-button:focus-visible{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.share-group .share-symbol,.share-group .share-button:hover .share-symbol{width:36px;height:36px;border:0;border-radius:50%;background:var(--ink);color:var(--paper);font-size:12px;letter-spacing:.02em;transform:none}
.share-group .share-button:hover .share-symbol,.share-group .share-button:focus-visible .share-symbol{background:var(--accent);color:var(--night)}
.share-group .share-status{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;line-height:1.4;animation:share-answer .3s ease both}
.share-group .share-status:empty{display:none}
.share-group[data-share-state=done] .share-status::before{content:'✓';display:grid;place-items:center;flex:none;width:20px;height:20px;border-radius:50%;background:var(--ink);color:var(--paper);font-size:11px;line-height:1}
@keyframes share-answer{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.share-group .share-status{animation:none}}

/* What we offer on Our story: a numbered grid in the display face, like One team on the home page,
   instead of a plain ruled list of sentences */
.story-offer-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(24px,3vw,48px);margin:0;padding:0;border-top:0;list-style:none}
.story-offer-list li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:14px;align-items:baseline;padding:20px 0 22px;border-top:1px solid var(--line);border-bottom:0;font:600 clamp(19px,1.6vw,24px)/1.12 var(--display);text-transform:uppercase;letter-spacing:-.005em;text-wrap:balance}
.offer-number{font:600 11px/1 var(--body);letter-spacing:.08em;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:700px){.story-offer-list{grid-template-columns:1fr}.story-offer-list li{padding:16px 0 18px}}

/* rows that scroll sideways (static/js/hscroll.js): a mouse can grab and drag them */
@media(hover:hover) and (pointer:fine){[data-hscroll]{cursor:grab}}
[data-hscroll].is-dragging{cursor:grabbing;user-select:none}
[data-hscroll].is-dragging *{pointer-events:none}
[data-hscroll] img{-webkit-user-drag:none;user-select:none}

/* Your kind of night: every panel shares one cell, so the section is as tall as its tallest panel and
   never jumps when a tab changes; the old panel fades, the new photograph settles in, the text rises */
.experience-section .occasion-panels.tabs-ready{display:grid}
.experience-section .occasion-panels.tabs-ready>.occasion-panel{grid-area:1/1;min-width:0;opacity:1;transition:opacity .45s ease}
.experience-section .occasion-panels.tabs-ready>.occasion-panel[hidden]{display:grid!important;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .3s ease,visibility 0s linear .3s}
.experience-section .occasion-panel.entering .occasion-copy{animation:occasion-copy-in .55s cubic-bezier(.2,.7,.2,1) both}
.experience-section .occasion-panel.entering .occasion-photo>img,.experience-section .occasion-panel.entering .occasion-scope{animation:occasion-photo-in .8s cubic-bezier(.2,.7,.2,1) both}
@keyframes occasion-copy-in{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes occasion-photo-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
 .experience-section .occasion-panels.tabs-ready>.occasion-panel{transition:none}
 .experience-section .occasion-panel.entering .occasion-copy,.experience-section .occasion-panel.entering .occasion-photo>img,.experience-section .occasion-panel.entering .occasion-scope{animation:none}
}