/* Phone and tablet layouts; desktop composition stays in the page styles. */
.mobile-recap-title,.mobile-recap-footer{display:none}
@media(max-width:820px){
  .site-header,.programme-home .site-header{height:72px;gap:18px}
  .site-header .brand{display:inline-flex;align-items:center;min-height:44px}
  .site-nav{gap:18px}
  .site-nav a{min-width:44px;font-size:13px;justify-content:center}
  .section-topline{flex-wrap:wrap;gap:10px 18px}
  .section-topline h2{max-width:100%}
  .section-topline .underlined-link{margin-top:0;min-height:44px;display:inline-flex;align-items:center;padding:8px 0}

  /* Show the recap before the longer introduction on smaller screens. */
  .programme-home .hero{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "stage" "choices" "statement";grid-template-rows:auto;min-height:0}
  .programme-home .hero-copy{padding:24px 24px 18px}
  .programme-home .hero h1{font-size:clamp(32px,7.8vw,58px);line-height:1.1}
  .programme-home .hero h1 span{display:inline}
  .programme-home .hero-role{font-size:min(14px,4.4cqw);margin-top:12px;max-width:none}
  .programme-home .hero-statement{padding:22px 24px 28px}
  .programme-home .hero-blurb{font-size:15px;line-height:1.6;max-width:60ch;margin:0}
  .recap-stage{padding:24px;gap:14px}
  .recap-video{flex:none;aspect-ratio:16/9;min-height:200px}
  .stage-caption{align-items:center;gap:12px}
  .stage-caption .underlined-link{display:inline-flex;align-items:center;min-height:44px;margin:0;padding:8px 0;font-size:13px}
  .programme-home .video-controls{gap:12px;max-width:none}
  .programme-home .text-control{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:8px 4px;font-size:13px}
  .recap-selector{padding:20px 24px 0}
  .recap-selector>.eyebrow{margin-bottom:10px}
  .recap-choices{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
  .recap-choice{min-height:100px;padding:14px}
  .choice-wordmark{min-height:38px}
  .recap-choice .wordmark-kuda{width:76px}
  .recap-choice .wordmark-feed-back{width:180px}

  .programme-home .work-section{padding-top:56px;padding-bottom:56px}
  .programme-home .project-grid{gap:24px}
  .project-panel{grid-template-columns:minmax(0,1fr)}
  .project-panel-copy,.project-panel-kuda .project-panel-copy{order:2;padding:32px}
  .project-panel .project-cover,.project-panel-kuda .project-cover{order:1;height:auto;min-height:0}
  .project-panel-feedback .project-cover{aspect-ratio:3/2}
  .project-panel-kuda .project-cover{aspect-ratio:5/4}
  .project-panel .project-category{font-size:17px}
  .project-panel .project-summary{font-size:16px}
  .project-panel-meta{flex-wrap:wrap;row-gap:8px}
  .project-panel .underlined-link{display:inline-flex;align-items:center;min-height:44px;margin-top:20px;padding:8px 0}

  .project-page .project-intro{padding:40px var(--space) 32px;margin-bottom:36px}
  .project-page .project-intro .back-link{display:inline-flex;align-items:center;min-height:44px;margin-bottom:20px}
  .project-page .project-details{grid-template-columns:minmax(0,1fr);gap:32px;padding-top:0;padding-bottom:44px}
  .project-page .project-description{font-size:18px;line-height:1.65}
  .project-page .project-meta{grid-template-columns:88px minmax(0,1fr);column-gap:16px}
  .project-page .project-meta dd{min-width:0;overflow-wrap:break-word}
  .project-page .recap-section{padding-bottom:48px}
  .project-page .photo-section{padding-bottom:56px}
  .project-page .gallery-open{min-height:44px}

  .about-page .about-layout{grid-template-columns:minmax(0,1fr);padding:40px var(--space) 64px;row-gap:32px}
  .about-page .about-copy{font-size:18px;line-height:1.65;max-width:66ch}
  .about-main-photo{margin-top:24px}
  .about-page .underlined-link{display:inline-flex;align-items:center;min-height:44px;padding:8px 0}
  .site-footer a{display:inline-flex;align-items:center;min-height:44px;width:max-content;max-width:100%}
}

@media(max-width:600px){
  .site-header,.programme-home .site-header{height:64px;gap:16px}
  .site-nav{gap:12px}
  .site-nav a{font-size:12px}
  .programme-home .hero-copy{padding:20px 16px 16px}
  .programme-home .hero-role{line-height:1.45;margin-top:10px}
  .programme-home .hero-statement{padding:20px 16px 24px}
  .recap-stage{padding:16px;gap:10px}
  .stage-topline{font-size:11px}
  .stage-caption{gap:10px}
  .programme-home .recap-title{font-size:16px}
  .programme-home .video-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .programme-home .text-control{width:100%;text-align:center}
  .recap-credit{font-size:12px}
  .recap-selector{padding:16px 16px 0}
  .recap-selector>.eyebrow{font-size:11px;margin-bottom:8px}
  .recap-choices{gap:10px}
  .recap-choice{min-height:96px;padding:10px}
  .choice-wordmark{min-height:36px;margin-bottom:6px}
  .recap-choice .wordmark-kuda{width:72px}
  .recap-choice .wordmark-feed-back{width:150px}
  .choice-kind{display:none}
  .choice-meta{font-size:11px;line-height:1.25}
  .choice-state{font-size:11px;line-height:1.25;margin-top:6px}
  .programme-home .work-section{padding-top:48px}
  .programme-home .project-grid{gap:20px}
  .project-panel-copy,.project-panel-kuda .project-panel-copy{padding:26px 24px}
  .project-panel .eyebrow{margin-bottom:20px}
  .project-panel .wordmark-kuda{width:144px}
  .project-page .photo-grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .photo-grid .photo-button{aspect-ratio:auto}
  .photo-grid .photo-button img{width:100%;height:auto;object-fit:contain;transform:none}
  .about-photo-pair{grid-template-columns:minmax(0,1fr);gap:20px}
}

/* Phone-only refinements: an integrated player and consistent project cards. */
@media(max-width:600px){
  .programme-home .programme-hero .recap-stage{padding:18px 0;background:var(--black);gap:12px}
  .recap-stage>.stage-topline,.recap-stage>.stage-caption,.recap-stage>.video-controls,.recap-stage>.recap-credit,.recap-stage>.player-notice{margin-left:16px;margin-right:16px}
  .programme-home .recap-video{width:100%;min-width:0;align-self:center;aspect-ratio:16/9;min-height:200px}
  .programme-home .hero-player,.programme-home .hero-player iframe{width:100%;max-width:100%;min-width:0}
  .project-panel-feedback .project-cover,.project-panel-kuda .project-cover{aspect-ratio:5/4}
  .project-panel .project-panel-copy{padding:26px 24px;align-items:flex-start;text-align:left}
  .project-panel .project-wordmark{display:flex;align-items:center;height:76px;aspect-ratio:auto;margin:0}
  .project-panel .project-wordmark img{height:auto;object-fit:contain}
  .project-panel .wordmark-feed-back{width:min(280px,100%)}
}

/* A compact playback toolbar on phones, separate from the event link. */
@media(max-width:600px){
  .programme-home .stage-caption{padding-top:6px;gap:16px}
  .programme-home .stage-caption .underlined-link{border:0;border-radius:6px;background:var(--programme-lilac);color:var(--programme-ink);min-height:40px;padding:9px 14px;font-size:12px;white-space:nowrap}
  .programme-home .video-controls{display:flex;align-items:center;gap:10px;padding-top:2px}
  .programme-home .video-controls button.text-control{flex:0 0 44px;width:44px;height:44px;padding:0;border:1px solid var(--line);border-radius:50%;background:var(--indigo);font-size:0}
  .programme-home .video-controls button.text-control:hover{color:var(--paper);border-color:var(--violet)}
  #pause-recaps::before{content:"";display:block;width:14px;height:18px;background:linear-gradient(to right,currentColor 0 35%,transparent 35% 65%,currentColor 65% 100%)}
  #pause-recaps[aria-label="Play recap videos"]::before{width:18px;background:currentColor;clip-path:polygon(20% 0,100% 50%,20% 100%)}
  #sound-recaps{--control-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11%205%206%209H3v6h3l5%204z%22%2F%3E%3Cpath%20d%3D%22m16%209%205%206m0-6-5%206%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E")}
  #sound-recaps[aria-pressed=true]{--control-icon:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M11%205%206%209H3v6h3l5%204z%22%2F%3E%3Cpath%20d%3D%22M15%208a6%206%200%200%201%200%208m3-11a10%2010%200%200%201%200%2014%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E")}
  #sound-recaps::before{content:"";display:block;width:21px;height:21px;background:currentColor;-webkit-mask:var(--control-icon) center/contain no-repeat;mask:var(--control-icon) center/contain no-repeat}
  .programme-home .video-controls .external-recap{margin-left:auto;width:auto;min-width:0;padding:8px 0;border:0;font-size:12px;line-height:1.3;white-space:nowrap;color:var(--muted)}
  .programme-home .recap-credit{font-size:11px;opacity:.7}
}

/* Name the active recap above the video; group its actions directly below. */
@media(max-width:600px){
  .programme-home .programme-hero .recap-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:12px}
  .programme-home .stage-topline{grid-column:1/-1;grid-row:1}
  .programme-home .stage-topline .eyebrow{white-space:nowrap}
  .programme-home .mobile-recap-title{display:inline;letter-spacing:.025em;text-transform:none}
  .programme-home .recap-video{grid-column:1/-1;grid-row:2}
  .programme-home .video-controls{grid-column:1;grid-row:3;margin-right:0;padding-top:0}
  .programme-home .stage-caption{grid-column:2;grid-row:3;justify-content:flex-end;margin-left:0;padding-top:0}
  .programme-home .stage-caption .recap-title,.programme-home .video-controls .external-recap{display:none}
  .programme-home .player-notice{grid-column:1/-1;order:4}
  .programme-home .recap-credit{grid-column:1/-1;order:5}
}

/* Keep the full YouTube interface available on phones. */
@media(max-width:600px){
  .programme-home .programme-hero .recap-stage{display:flex;flex-direction:column;align-items:stretch;padding:18px 0;gap:12px}
  .programme-home .recap-stage>.stage-topline{background:transparent;color:var(--muted);margin:0 16px;padding:0;font-family:var(--font);font-size:12px;line-height:1.5}
  .programme-home .recap-stage .stage-topline .eyebrow{color:inherit;font-family:var(--font);font-size:12px;font-weight:400;line-height:1.5;letter-spacing:.015em;text-transform:none}
  .programme-home .recap-stage .mobile-recap-title{font:inherit;letter-spacing:inherit;color:inherit}
  .programme-home .recap-stage .stage-caption,.programme-home .recap-stage .video-controls,.programme-home .recap-stage .play-prompt{display:none}
  .programme-home .recap-stage>.recap-credit{display:block;margin:0 16px;font-family:var(--font);font-size:12px;font-weight:400;line-height:1.5;letter-spacing:.015em;color:var(--muted);opacity:1}
  .programme-home .programme-hero[data-recap=kuda] .recap-video{aspect-ratio:5/4}
  .programme-home .hero-player{opacity:1}
  .programme-home .recap-stage>.player-notice{margin:0;padding:12px 16px;background:var(--programme-lilac);color:var(--programme-ink);border:0}
  .mobile-recap-footer{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:10px;margin-top:16px}
  .programme-home .mobile-recap-footer .recap-credit{display:none}
  .mobile-recap-footer a{display:inline-flex;align-items:center;min-height:40px;padding:8px 12px;border:1px solid currentColor;border-radius:6px;font-size:12px}
}

/* Keep the active event link beside its footage credit on phones. */
@media(max-width:600px){
  .programme-home .programme-hero .recap-stage{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .programme-home .recap-stage>.recap-credit{grid-column:1;grid-row:3;margin-right:0}
  .programme-home .recap-stage>.stage-caption{display:flex;grid-column:2;grid-row:3;margin-left:0;margin-right:16px;justify-content:flex-end}
  .programme-home .recap-stage>.player-notice{grid-column:1/-1;grid-row:4}
  .programme-home .mobile-recap-footer{display:none}
}

/* Fall’In keeps the lettering from its poster and the full battle photographs. */
.wordmark-fall-in{width:min(420px,100%);aspect-ratio:1125/207}
.wordmark-fall-in img{width:100%;height:auto;object-fit:contain}
.recap-choice .wordmark-fall-in{width:220px;max-width:100%}
.project-panel-fall-in{background:#eee8ff;color:#17111d}
.project-panel-fall-in .wordmark-fall-in img,.project-fall-in .project-intro .wordmark-fall-in img{filter:brightness(0)}
.programme-home .programme-hero[data-recap=fall-in] .hero-player{display:none}
.programme-home .programme-hero[data-recap=fall-in] .video-controls{display:none}
.programme-home .programme-hero[data-recap=fall-in] .recap-video{aspect-ratio:1500/1033;min-height:0;flex:0 0 auto}
.battle-feature{display:block;width:100%;height:auto}
.battle-poster-section{margin:var(--space);padding-top:32px}
.battle-poster-section>img{display:block;width:min(580px,100%);height:auto;margin:24px auto 0}
.project-fall-in .next-project .wordmark-feed-back img{filter:brightness(0)}
@media(max-width:600px){
 .recap-choices{grid-template-columns:repeat(2,minmax(0,1fr))}
 .recap-choice:last-child:nth-child(odd){grid-column:1/-1}
 .recap-choice .wordmark-fall-in{width:150px}
 .project-panel-fall-in .project-cover{aspect-ratio:5/4}
 .project-panel .wordmark-fall-in{width:min(280px,100%)}
}

/* Balance Fall’In with the existing homepage marks and keep photos modest. */
.programme-home .project-panel .wordmark-fall-in{width:min(280px,85%)}
.programme-home .recap-choice .wordmark-fall-in{width:180px;max-width:90%}
.project-fall-in .photo-grid{max-width:1080px;margin-inline:auto;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.project-fall-in .photo-grid .photo-button,.project-fall-in .photo-grid .photo-button:first-child{grid-column:auto;aspect-ratio:auto;background:transparent}
.project-fall-in .photo-grid .photo-button[hidden]{display:none}
.project-fall-in .photo-grid .photo-button img{width:100%;height:auto;object-fit:contain}
.project-fall-in .battle-feature{max-width:760px;margin-inline:auto}
.project-fall-in .lightbox-image{max-width:1100px;max-height:620px;margin-inline:auto}
@media(max-width:820px){.project-fall-in .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}}
@media(max-width:600px){
 .programme-home .project-panel .wordmark-fall-in{width:min(225px,85%)}
 .programme-home .recap-choice .wordmark-fall-in{width:125px}
 .project-fall-in .battle-feature{max-width:340px}
}
.battle-motion{align-self:flex-start;justify-self:start;background:transparent;color:inherit;font:inherit;font-size:12px;border-bottom:1px solid currentColor;padding:5px 0;min-height:40px;cursor:pointer}
.battle-motion[hidden]{display:none}
@media(max-width:600px){.programme-home .battle-motion{grid-row:4;grid-column:1/-1;margin:0 16px;color:var(--muted)}}
.recap-heading{display:flex;flex-direction:column;gap:5px;min-width:0}
.recap-tagline{font-size:14px;font-weight:400;line-height:1.4;color:inherit;opacity:.85}
@media(max-width:600px){
 .programme-home .stage-caption{flex-wrap:wrap;gap:8px}
 .programme-home .recap-heading{width:100%;flex-basis:100%;text-align:right}
 .programme-home .recap-tagline{font-size:12px;max-width:190px;margin-left:auto}
}

/* Give the KUDA homepage mark a little more presence. */
.programme-home .recap-choice .wordmark-kuda{width:116px;max-width:100%}
.programme-home .project-panel .wordmark-kuda{width:180px;max-width:100%}
@media(max-width:600px){
 .programme-home .recap-choice .wordmark-kuda{width:81px}
 .programme-home .project-panel .wordmark-kuda{width:162px}
}