:root {
  --ink: #171717;
  --paper: #d7dcde;
  --line: rgba(23, 23, 23, .25);
  --sans: Arial, Helvetica, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: var(--sans); }
a { color: inherit; }

.site-header {
  position: absolute; z-index: 2; inset: 0 0 auto; height: 72px; padding: 0 32px;
  display: flex; align-items: center; justify-content: space-between; color: #fff;
}
.wordmark { font-size: 14px; font-weight: 600; text-decoration: none; }
.wordmark span { display: none; }
nav { display: flex; gap: 28px; }
nav a, .menu-button { font: 500 11px var(--sans); letter-spacing: .08em; text-decoration: none; text-transform: uppercase; }
.menu-button { display: none; color: inherit; border: 0; background: none; }
.language-prompt { position: fixed; z-index: 30; left: 20px; bottom: 20px; width: min(390px, calc(100% - 40px)); padding: 18px; color: #f2f2ef; background: #171717; box-shadow: 0 8px 30px rgba(0,0,0,.2); }
.language-prompt[hidden] { display: none; }
.language-prompt p { margin: 0 0 14px; font-size: 16px; }
.language-prompt div { display: flex; align-items: center; gap: 18px; }
.language-prompt a, .language-prompt button { color: inherit; font: 600 11px var(--sans); letter-spacing: .04em; text-transform: uppercase; }
.language-prompt a { text-underline-offset: 3px; }
.language-prompt button { padding: 0; border: 0; background: none; opacity: .65; cursor: pointer; }

.hero { position: relative; min-height: clamp(430px, 66.65vw, 100svh); color: #fff; background: #aebfc1; }
.hero-image { position: absolute; inset: 0; background: url("philip-connaughton-dance-company.jpg") center bottom / contain no-repeat; }
.hero-shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.58), transparent 58%); }
.hero-content { position: absolute; z-index: 1; left: 32px; right: 32px; bottom: 34px; }
.eyebrow { display: none; }
h1 { margin: 0; font-size: clamp(3.5rem, 8.5vw, 8rem); font-weight: 400; line-height: .86; letter-spacing: -.065em; }
h1 br { display: none; }
h1 em { font-style: normal; font-weight: 400; }
.roles { margin: 22px 0 0 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.roles span { margin: 0 .5em; }
.scroll-cue { display: none; }

.section-label { display: none; }
.about { padding: 100px 32px 120px; border-bottom: 1px solid var(--line); }
.about-copy { max-width: 760px; }
.about-copy > p:first-child { margin: 0; max-width: 720px; font-size: clamp(1.65rem, 2.8vw, 2.65rem); font-weight: 400; line-height: 1.15; letter-spacing: -.025em; }
.about-copy em { font-style: normal; }
.detail { max-width: 620px; margin: 48px 0 0; font-size: 17px; line-height: 1.5; }
.support { max-width: 620px; margin: 28px 0 0; font-size: 11px; line-height: 1.5; }

.press { padding: 120px 32px; color: #f2f2ef; background: #171717; }
.press-heading { margin-bottom: 70px; }
h2 { margin: 0; font-size: clamp(3rem, 6vw, 6rem); font-weight: 400; line-height: .95; letter-spacing: -.05em; }
h2 br { display: none; }
h2 em { font-style: normal; font-weight: 400; }
.quotes { max-width: 980px; margin-left: 0; border-top: 1px solid rgba(255,255,255,.3); }
.quote { padding: 40px 0 44px; border-bottom: 1px solid rgba(255,255,255,.3); }
.stars, .quote-mark { margin-bottom: 24px; font-size: 11px; letter-spacing: .1em; }
.quote-mark { display: none; }
blockquote { max-width: 830px; margin: 0 0 30px; font-size: clamp(1.5rem, 2.6vw, 2.6rem); font-weight: 400; line-height: 1.15; letter-spacing: -.025em; }
blockquote em { font-style: normal; }
cite { display: flex; gap: 12px; font-size: 10px; font-style: normal; letter-spacing: .06em; text-transform: uppercase; }
cite span { font-weight: 600; }
.quote-french blockquote { font-size: clamp(1.35rem, 2.2vw, 2.2rem); }

/* About and reviews share one quiet, two-column section. */
.about-reviews { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.about-reviews .about { padding: 92px 32px 96px; border-bottom: 0; }
.about-reviews .press { min-height: 540px; padding: 92px 32px 96px; color: var(--ink); background: transparent; border-left: 1px solid var(--line); }
.about-reviews .press-heading { display: none; }
.about-reviews .quotes { position: relative; height: 100%; min-height: 390px; margin: 0; border: 0; }
.about-reviews .quote,
.about-reviews .quote.reveal.visible { position: absolute; inset: 0; min-height: 0; padding: 0; border: 0; display: flex; flex-direction: column; justify-content: flex-start; opacity: 0; transform: none; pointer-events: none; transition: opacity 1.2s ease; }
.about-reviews .quote.active,
.about-reviews .quote.reveal.visible.active { opacity: 1; }
.about-reviews .stars { margin-bottom: 24px; color: var(--ink); }
.about-reviews blockquote { max-width: 560px; margin-bottom: 30px; font-size: clamp(1.4rem, 2.1vw, 2.1rem); line-height: 1.16; }
.about-reviews cite { color: var(--ink); }
.about-reviews cite span { color: inherit; }

.contact { padding: 64px 32px 70px; }
.contact-main > p { max-width: 760px; margin: 0 0 34px; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1.2; letter-spacing: -.02em; }
.contact-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; margin-top: 0; }
.contact-links a { display: flex; justify-content: center; padding: 10px 18px; font-size: 15px; text-align: center; text-decoration: none; }
.contact-links a + a { padding-left: 18px; }
.contact-links a:hover { opacity: .55; }

footer { padding: 24px 32px; border-top: 1px solid #0b0b0b; display: flex; justify-content: space-between; color: #f2f2ef; background: #0b0b0b; font-size: 10px; }
footer a { text-decoration: none; }
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.visible { opacity: 1; transform: none; }

/* Wide displays fill the frame by trimming only excess sky above the dancers. */
@media (min-width: 1100px) and (min-aspect-ratio: 16/10) {
  .hero { min-height: 100svh; }
  .hero-image { background-size: cover; background-position: center bottom; }
}

@media (max-width: 720px) {
  .site-header { height: 58px; padding: 0 18px; }
  .menu-button { display: block; }
  nav { display: none; position: absolute; right: 18px; top: 46px; flex-direction: column; align-items: flex-end; gap: 10px; }
  nav.open { display: flex; }
  .hero { min-height: calc(66.666vw + 70px); background: #4f5859; }
  .hero-image { inset: 0 0 70px; background-position: center; background-size: cover; }
  .hero-shade { bottom: 70px; }
  .hero-content { inset: 58px 18px 0; }
  h1 { position: absolute; left: 0; bottom: 88px; color: #fff; font-size: 14vw; line-height: .92; }
  h1 em { display: block; }
  .roles { position: absolute; left: 0; bottom: 0; height: 70px; max-width: none; margin: 0; display: flex; align-items: center; color: #fff; line-height: 1.4; }
  .about { padding: 72px 18px 88px; }
  .contact { padding: 48px 18px 52px; }
  .about-copy > p:first-child { font-size: 1.75rem; }
  .detail, .support { margin-left: 0; }
  .detail { margin-top: 40px; font-size: 16px; }
  .about-reviews { display: block; }
  .about-reviews .about { padding: 72px 18px 70px; }
  .about-reviews .press { min-height: 430px; padding: 60px 18px 70px; border-top: 1px solid var(--line); border-left: 0; }
  .about-reviews .quotes { min-height: 300px; }
  .about-reviews blockquote { font-size: 1.65rem; }
  .press { padding: 80px 18px; }
  .press-heading { display: block; margin-bottom: 60px; }
  .press-heading .section-label { margin-bottom: 52px; }
  .quotes { margin-left: 0; }
  .quote { padding: 32px 0 36px; }
  blockquote { font-size: 1.7rem; }
  .contact-links { margin-top: 0; }
  .contact-links { grid-template-columns: 1fr; }
  .contact-links a + a { padding-left: 0; border-left: 0; }
  .contact-links a { overflow-wrap: anywhere; }
  footer { padding: 20px 18px; gap: 20px; }
  .language-prompt { left: 12px; bottom: 12px; width: calc(100% - 24px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
}