/* Every project shares the same media slot; the homepage reserves caption room below. */
[data-showcase] { --showcase-height: 450px; --showcase-bar: 38px; --showcase-inset: 8px; --drink-backdrop: var(--brand-green, #1f7a75); }
.showcase-cell { position: relative; display: grid; grid-template-rows: minmax(0, 1fr) var(--showcase-bar); width: 100%; height: 100%; min-width: 0; color: #f0ebe0; font-family: 'Avenir Next', Avenir, ui-sans-serif, system-ui, sans-serif; }
.hero-world > [data-showcase] { display: block; }
.hero-world .showcase-cell { height: calc(var(--showcase-height) + var(--showcase-bar)); }
.showcase-stage { position: relative; min-width: 0; min-height: 0; border-radius: 14px 14px 0 0; background: #071219; }
.showcase-stage > :is(img, iframe, .showcase-drinks, .piano-world) { display: block; width: 100%; height: 100%; min-width: 0; border: 0; margin: 0; }
.showcase-stage > img { object-fit: contain; border-radius: 14px 14px 0 0; }
.showcase-stage > .showcase-preview { position: absolute; inset: 0; }
.showcase-stage > .showcase-live { position: relative; z-index: 1; opacity: 0; transition: opacity 150ms ease; }
.showcase-stage > .showcase-live[data-showcase-revealed] { opacity: 1; }
[data-showcase][data-project="piano"] .showcase-stage { background: #071219; }
[data-showcase][data-project="football"] .showcase-stage { background: #0b1119; }
/* Posters are 1:1 captures: crop rather than rescale if the stage differs slightly. */
[data-showcase][data-project="football"] .showcase-stage > .showcase-preview { object-fit: cover; object-position: top center; }
[data-showcase][data-project="piano"] .showcase-stage > .showcase-preview { object-fit: cover; object-position: center; }
/* The loaded newspaper parks under the stage, in the same grid cell, and comes forward when selected. */
.showcase-cell > .showcase-stage { grid-row: 1; grid-column: 1; z-index: 1; }
.showcase-newspaper-layer { grid-row: 1; grid-column: 1; position: relative; z-index: 0; min-width: 0; min-height: 0; overflow: hidden; border-radius: 14px 14px 0 0; background: #0b1119; }
.showcase-newspaper-layer[data-showcase-revealed] { z-index: 2; }
.showcase-newspaper-layer > iframe { display: block; width: 100%; height: 100%; border: 0; }
/* Children's page: parked in the football slot, over the cell that visits it. */
#learner-projects .framework-project-media:has(> .showcase-newspaper-layer) { position: relative; }
#learner-projects .framework-project-media > .showcase-newspaper-layer { position: absolute; top: 0; left: 0; width: 100%; height: var(--project-media-height); }
@media screen and (min-width: 1000px) { body[data-page-frame] #learner-projects .framework-project-media > .showcase-newspaper-layer { inset: 0; height: 100%; } }
@media print { .showcase-newspaper-layer { display: none; } }
.showcase-newspaper-layer > .showcase-newspaper { color-scheme: dark; background: #0b1119; }
.showcase-stage > .showcase-match { border-radius: 14px 14px 0 0; }
.showcase-caption { display: flex; align-items: center; gap: 8px; min-width: 0; height: var(--showcase-bar); padding: 0 var(--showcase-inset); border-top: 1px solid #adc4b533; border-radius: 0 0 14px 14px; background: #0b2228; font-size: 12px; line-height: 1.2; }
.showcase-caption .showcase-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.showcase-cell button { min-width: 0; border: 0; color: #f0ebe0; background: transparent; font: inherit; cursor: pointer; }
.showcase-caption > button { flex: 0 0 32px; align-self: stretch; padding: 0; font-size: 18px; }
.showcase-caption button:hover { color: #efac8e; background: #103138; }
.showcase-cell button:focus-visible { outline: 2px solid #efac8e; outline-offset: -3px; }
/* Keep number 2 clear on the left; the play menu sits in the shaded right. */
[data-showcase][data-project="darty"] .showcase-stage > .showcase-preview { object-fit: cover; }
.showcase-darty-title { position: absolute; inset: 0; isolation: isolate; overflow: hidden; border-radius: 14px 14px 0 0; container-type: inline-size; }
.showcase-darty-title::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, transparent 30%, #07121944 48%, #071219d9 100%), linear-gradient(0deg, #07121999, transparent 70%); pointer-events: none; }
.showcase-stage .showcase-darty-title > .showcase-preview { position: absolute; z-index: -2; inset: 0; display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; border-radius: 0; transform-origin: 37% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .showcase-darty-title > .showcase-preview { animation: showcase-darty-zoom 24s ease-in-out infinite alternate; animation-play-state: paused; }
  .showcase-darty-title[data-active="true"][data-ready] > .showcase-preview { animation-play-state: running; }
}
@keyframes showcase-darty-zoom {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}
.showcase-darty-heading { position: absolute; inset: 0 5% 0 54%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; --darty-heading-gap: 18px; gap: var(--darty-heading-gap); padding-block: 24px; text-align: left; }
.showcase-darty-wordmark { display: block; color: #e8642c; font-size: clamp(40px, 11cqw, 82px); font-weight: 900; font-style: italic; line-height: 1; letter-spacing: .025em; text-shadow: 0 3px 0 #793318, 0 8px 24px #0008; }
.showcase-cell .showcase-darty-subtitle { margin: 0; color: #fff7e9; font-size: clamp(11px, 2.3cqw, 14px); font-weight: 500; line-height: 1.4; letter-spacing: .04em; text-shadow: 0 2px 6px #000; }
/* The two short lines read as one tagline under the wordmark. */
.showcase-cell .showcase-darty-subtitle + .showcase-darty-subtitle { margin-top: calc(4px - var(--darty-heading-gap, 12px)); }
.showcase-cell .showcase-match-play { display: block; width: 240px; max-width: 100%; min-height: 58px; padding: 14px 24px; border: 2px solid #fff7e9; border-radius: 4px; color: #10232a; background: #fff7e9; font-size: 19px; font-weight: 800; line-height: 1.2; box-shadow: 0 4px 20px #0005; }
.showcase-cell .showcase-match-play:hover { color: #10232a; background: #ffe0c0; border-color: #ffe0c0; }
.showcase-cell .showcase-match-play:focus-visible { outline: 3px solid #fff7e9; outline-offset: 5px; box-shadow: 0 0 0 5px #10232a; }
/* A wider, centred menu keeps the same title and large button inside narrow cells
   (phones, and the children's page between 768px and 1000px). */
@container (max-width: 440px) {
  .showcase-darty-heading { inset: 0 8%; align-items: center; --darty-heading-gap: 16px; gap: var(--darty-heading-gap); padding-block: 20px; text-align: center; }
  .showcase-darty-wordmark { font-size: clamp(48px, 17cqw, 64px); }
  .showcase-cell .showcase-darty-subtitle { font-size: clamp(12px, 3.6cqw, 14px); }
  .showcase-cell .showcase-match-play { flex-shrink: 0; }
}
.showcase-cell .showcase-match-mute { display: grid; place-items: center; width: 36px; height: 36px; padding: 6px; border: 1px solid #adc4b566; border-radius: 4px; color: #fff7e9; background: #0b2228; }
.showcase-cell .showcase-match-mute:hover { background: #103138; }
.showcase-cell .showcase-match-mute:focus-visible { outline: 2px solid #fff7e9; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .showcase-darty-title > .showcase-preview { animation: none; transform: none; }
}
.showcase-caption [data-project-status] { min-width: 0; color: #c5d5ca; font-size: 11px; font-weight: 400; white-space: nowrap; }
.showcase-cell .piano-toggle { display: flex; align-items: center; justify-content: center; gap: 6px; width: auto; min-height: 36px; padding: 0 8px; border: 0; border-radius: 4px; font-size: 12px; }
.showcase-cell .piano-toggle svg { width: 18px; }
.showcase-cell .piano-toggle span { display: none; }
.showcase-stage .piano-world { position: relative; color: #f0ebe0; line-height: 1.6; }
.showcase-stage .piano-world .world-art { width: 100%; height: 100%; }
/* In the opening the original keyboard still drops below the caption. */
.showcase-cell .piano-panel { inset: calc(100% + var(--showcase-bar) + 1px) -1px auto; }
[data-showcase][data-project="drinks"] .showcase-stage,
.showcase-stage .showcase-drinks,
.showcase-drink-screen { background: var(--drink-backdrop); }
[data-showcase][data-project="drinks"] .showcase-stage > img,
[data-project="drinks"] .showcase-fallback { object-fit: cover; object-position: center; background: var(--drink-backdrop, #1f7a75); }
.showcase-stage .showcase-drinks { position: relative; overflow: hidden; border-radius: 14px 14px 0 0; container-type: inline-size; }
.showcase-drink-screen { position: absolute; inset: 0; }
.showcase-drink-screen .drink-spin, .showcase-drink-screen img { position: absolute; inset: 0; width: 100%; height: 100%; }
.showcase-drink-screen img { display: block; max-height: none; object-fit: cover; object-position: center; border-radius: 0; pointer-events: none; user-select: none; }
.showcase-cell .drink-spin { display: block; padding: 0; border-radius: 14px 14px 0 0; cursor: grab; touch-action: pan-y; user-select: none; }
.showcase-cell .drink-spin[data-dragging] { cursor: grabbing; }
.showcase-drink-controls { position: absolute; z-index: 1; top: var(--showcase-inset); left: var(--showcase-inset); display: flex; flex-direction: column; align-items: stretch; gap: 6px; width: max-content; max-width: calc(100% - 16px); }
.showcase-drink-controls button { min-height: 32px; padding: 6px 10px; border: 1px solid var(--blue, #0b3f51); border-radius: 999px; color: var(--hero-night, #0a272c); background: var(--hero-cream, #f0ebe0); font-size: 12px; line-height: 1.25; white-space: nowrap; }
.showcase-drink-controls button[aria-pressed="true"] { color: var(--hero-cream, #f0ebe0); background: var(--hero-night, #0a272c); }
.showcase-drink-controls button:hover { box-shadow: inset 0 0 0 1px var(--hero-night, #0a272c); }
.showcase-drink-controls button:focus-visible { outline: 2px solid var(--hero-cream, #f0ebe0); outline-offset: 2px; box-shadow: 0 0 0 4px var(--hero-night, #0a272c); }
.drink-info { position: absolute; top: var(--showcase-inset); right: var(--showcase-inset); width: min(168px, 28cqw); margin: 0; padding: 8px 10px; border: 1px solid var(--blue, #0b3f51); border-radius: 10px; color: var(--hero-night, #0a272c); background: var(--hero-cream, #f0ebe0); font-size: 11px; line-height: 1.35; pointer-events: none; }
.drink-info strong { display: block; color: inherit; font-size: 12px; line-height: 1.25; }
.showcase-cell .drink-info p { margin: 4px 0 0; color: inherit; font-size: inherit; line-height: inherit; }
/* Narrow cells reserve a fixed header band, keeping every quote off the drink
   without changing the media slot's height when switching designs. */
@container (max-width: 520px) {
  .showcase-drink-screen { top: 84px; }
  .drink-info { width: min(200px, calc(100% - 16px)); }
}
/* Owner, 29 Oct: phones squeezed the drink into a strip under the card and menu.
   The drink now rises to the top, the menu sits on the empty sky above it, and
   the card takes its own row below, so neither covers a bottle. */
@media (max-width: 760px) {
  .showcase-stage .showcase-drinks { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .showcase-drink-screen { position: relative; inset: auto; grid-row: 1; }
  .showcase-drink-controls { flex-direction: row; }
  .showcase-drink-controls button { min-height: 30px; padding-block: 5px; }
  .drink-info { position: relative; top: auto; right: auto; grid-row: 2; width: auto; margin: 0 var(--showcase-inset) var(--showcase-inset); padding: 6px 8px; }
}
/* The smallest phones have no sky to spare above the can: the menu keeps its own row. */
@media (max-width: 360px) {
  .showcase-stage .showcase-drinks { grid-template-rows: auto minmax(0, 1fr) auto; gap: 6px; padding-top: var(--showcase-inset); }
  .showcase-drink-controls { position: relative; top: auto; left: auto; grid-row: 1; margin-inline: var(--showcase-inset); }
  .showcase-drink-screen { grid-row: 2; }
  .drink-info { grid-row: 3; }
}
.showcase-cell [hidden] { display: none !important; }
[data-showcase][data-enhanced] .showcase-fallback { display: none !important; }
/* Keep the existing still visible while the near-viewport enhancement loads. */
.hero-world .showcase-fallback { display: block; width: 100%; height: calc(var(--showcase-height) + var(--showcase-bar)); object-fit: cover; border-radius: 14px; }
/* Keep the copy/media grid and all copy available without JS and in print. */
#learner-projects .framework-project-viewer > .section-head { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 6px 16px; }
#learner-projects .framework-project-viewer > .section-head h2 { grid-area: 1 / 1; margin: 0; }
#learner-projects .framework-project-viewer > .section-head p { grid-area: 2 / 1 / auto / -1; margin: 0; }
#learner-projects .section-head [data-project-enquiry] { grid-area: 1 / 2; white-space: nowrap; }
#learner-projects .showcase-navigation { grid-area: 1 / 3; justify-self: end; display: grid; grid-template-columns: 32px minmax(0, 1fr) 36px 32px; align-items: center; gap: 6px; width: 300px; max-width: 100%; height: 44px; padding: 0 6px; border: 1px solid #adc4b533; border-radius: 12px; background: #0b2228; color: #f0ebe0; font: 400 12px/1.2 'Avenir Next', Avenir, ui-sans-serif, system-ui, sans-serif; }
#learner-projects .showcase-navigation .showcase-name { min-width: 0; text-align: center; }
#learner-projects .showcase-navigation [data-project-status] { color: #c5d5ca; font-size: 11px; white-space: nowrap; text-align: center; }
#learner-projects .showcase-navigation button { align-self: stretch; min-width: 0; padding: 0; border: 0; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 18px; cursor: pointer; }
#learner-projects .showcase-navigation button:hover { color: #efac8e; background: #103138; }
#learner-projects .showcase-navigation button:focus-visible { outline: 2px solid #efac8e; outline-offset: -3px; }
/* The section has no bottom navigation bar. The piano's own toggle stays with
   its sky, with the same inherited typography as the opening's caption toggle. */
#learner-projects .showcase-cell { grid-template-rows: minmax(0, 1fr); font-size: 16px; line-height: 1.6; }
#learner-projects .showcase-piano-control { position: absolute; z-index: 5; top: 8px; right: 8px; font-size: 12px; line-height: 1.2; }
/* Back-page paragraph spacing must not reach the cloned keyboard. */
#learner-projects .piano-world :is(.piano-hint, .piano-credit) { margin: 0; }
#learner-projects .showcase-darty-subtitle { margin: 0; }
#learner-projects .framework-project-media > .showcase-cell { height: var(--project-media-height); }
#learner-projects [data-showcase][data-enhanced] .framework-project-media { overflow: visible; }
#learner-projects .showcase-stage > img,
#learner-projects .showcase-drink-screen img { height: 100%; max-height: none; }
/* The section keyboard opens inside its media cell so the section footer stays clear. */
#learner-projects .showcase-stage .piano-world { overflow: clip; min-height: 0; }
#learner-projects .showcase-cell .piano-panel { inset: auto -1px 0; max-height: 100%; }
/* Owner, 31 Oct: here the keys sit inside the sky, so the song bar rests on top of them (keys 71px + 19px panel padding and edge). */
#learner-projects .piano-world > .piano-song-controls { bottom: 90px; }
@media (max-width: 760px) { #learner-projects .piano-world > .piano-song-controls { bottom: 83px; } }
#learner-projects .project-note { grid-column: 1 / -1; }
/* Two separate cards fill the copy column, with the payoff anchored at its foot. */
#learner-projects .project-copy-column { display: grid; grid-template-rows: 1fr auto; gap: 12px; min-width: 0; align-self: stretch; }
#learner-projects .project-copy-result { margin: 0; padding: 14px; border: 1px solid #e4be7840; border-radius: var(--radius-md, 16px); background: #0a272c; color: #f5f0e6; overflow-wrap: break-word; }
#learner-projects :is(.project-copy-cells, .project-copy-result) h4 { margin: 0 0 3px; font-size: .85rem; font-weight: 700; line-height: 1.3; letter-spacing: normal; }
/* The newspaper's warm gold accent, on a contrasting deep teal. */
#learner-projects .project-copy-result h4 { margin-bottom: 5px; color: #e4be78; font-size: .78rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } /* Owner: same capitals and size as the subject label (e.g. ENGLISH), in gold. */
#learner-projects .project-copy-result p { margin: 0; color: inherit; }
#learner-projects .project-copy-cells { margin-bottom: 0; }
#learner-projects .framework-project-copy { overflow-wrap: break-word; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #learner-projects .project-copy-result { background: #071f25; }
}
:root[data-theme="dark"] #learner-projects .project-copy-result { background: #071f25; }
/* Intro follows the same copy-left, media-right order as the four projects. */
#learner-projects .framework-project.framework-project--intro { grid-template-columns: minmax(0, 7fr) minmax(0, 13fr); grid-template-rows: minmax(0, 1fr); gap: 12px; align-items: stretch; }
#learner-projects .project-intro-image { position: relative; grid-area: 1 / 2; min-width: 0; min-height: 240px; overflow: hidden; border-radius: 16px; background: #d8e7de; }
#learner-projects .project-intro-image img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-height: none; object-fit: cover; }
#learner-projects .framework-project--intro .framework-project-copy.subject-card { grid-area: 1 / 1; justify-content: center; padding: clamp(16px, 1.5vw, 22px); }
#learner-projects .framework-project--intro .framework-project-copy.subject-card h3 { max-width: 24ch; margin: 0 0 16px; font-size: clamp(1.65rem, 2.5vw, 2.25rem); line-height: 1.15; }
#learner-projects .framework-project--intro .framework-project-copy p { max-width: 65ch; margin: 0; font-size: clamp(.95rem, 1.2vw, 1.05rem); line-height: 1.55; }
#learner-projects [data-project="intro"] > .showcase-cell { display: none; }
@media screen and (max-width: 999px) {
  /* Full paragraphs use natural height, with media after the text on phones. */
  #learner-projects .framework-project-viewer > .section-head { grid-template-columns: minmax(0, 1fr); }
  #learner-projects .showcase-navigation { grid-area: 3 / 1; }
  #learner-projects .section-head [data-project-enquiry] { grid-area: 4 / 1; white-space: normal; }
  #learner-projects [data-showcase][data-enhanced] > .framework-project-slides > [data-project-slide][hidden] { display: none; }
  #learner-projects .framework-project.framework-project--intro { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; }
  #learner-projects .project-intro-image { grid-area: auto; min-height: 0; height: clamp(160px, 45vw, 240px); }
  #learner-projects .framework-project--intro .framework-project-copy.subject-card { grid-area: auto; }
  #learner-projects .project-copy-column { grid-template-rows: auto auto; font-size: .95rem; line-height: 1.45; }
}
@media screen and (min-width: 1000px) and (max-width: 1199px) {
  /* Give the heading room on narrow desktop frames while retaining one shared CTA. */
  #learner-projects .framework-project-viewer > .section-head { grid-template-columns: minmax(0, 1fr) auto; }
  #learner-projects .showcase-navigation { grid-area: 1 / 2; }
  #learner-projects .section-head [data-project-enquiry] { grid-area: 3 / 1 / auto / -1; justify-self: start; }
}
@media screen and (min-width: 1000px) {
  /* Use 6px of each 24px frame inset; the section still has an 18px gutter. */
  body[data-page-frame] #learner-projects { margin-inline: -6px; }
  body[data-page-frame] #learner-projects .framework-project-viewer[data-enhanced] { grid-template-rows: auto 1fr auto; gap: 10px 12px; }
  body[data-page-frame] #learner-projects .framework-project-viewer > .section-head { grid-column: 1 / -1; grid-row: 1; margin: 0; }
  body[data-page-frame] #learner-projects .framework-project-viewer > .section-head h2 { font-size: clamp(1.4rem, 3.2vh, 1.8rem); }
  body[data-page-frame] #learner-projects .framework-project-viewer > .section-head p { font-size: .9rem; line-height: 1.4; }
  body[data-page-frame] #learner-projects .framework-project-viewer[data-enhanced] > .framework-project-slides { grid-row: 2; }
  body[data-page-frame] #learner-projects .project-note { grid-column: 1 / -1; grid-row: 3; }
  /* At 1440px this gives the iframe about 590px, above its 460px phone breakpoint. */
  body[data-page-frame] #learner-projects .framework-project { grid-template-columns: minmax(0, 7fr) minmax(0, 13fr); column-gap: 12px; }
  body[data-page-frame] #learner-projects .project-copy-column { font-size: clamp(.8125rem, 1.75vh, .85rem); line-height: 1.34; }
  body[data-page-frame] #learner-projects .framework-project:not(.framework-project--intro) .framework-project-copy { align-self: stretch; padding: 8px 10px; font-size: inherit; line-height: inherit; }
  body[data-page-frame] #learner-projects .project-label { margin-bottom: 3px; }
  body[data-page-frame] #learner-projects .framework-project-copy h3 { margin-bottom: 5px; font-size: clamp(1.125rem, 2.6vh, 1.35rem); }
  body[data-page-frame] #learner-projects .project-copy-cells { gap: 0; margin-bottom: 0; }
  body[data-page-frame] #learner-projects .project-copy-cells > div { padding-block: 3px; }
  body[data-page-frame] #learner-projects :is(.project-copy-cells, .project-copy-result) h4 { margin-bottom: 1px; font-size: .775rem; line-height: 1.25; }
  body[data-page-frame] #learner-projects .project-copy-result h4 { margin-bottom: 4px; font-size: .65rem; line-height: 1.3; letter-spacing: .08em; }
  body[data-page-frame] #learner-projects .project-copy-result { padding: 8px 10px; }
  body[data-page-frame] #learner-projects .framework-project.framework-project--intro { grid-template-columns: minmax(0, 7fr) minmax(0, 13fr); }
}
@media (min-width: 1550px) { [data-showcase] { --showcase-height: 540px; } }
@media (max-width: 1050px) { [data-showcase] { --showcase-height: 400px; } }
@media (max-width: 760px) { [data-showcase] { --showcase-height: 340px; } }
@media (max-width: 360px) { [data-showcase] { --showcase-height: 280px; } }
/* The compact homepage story fits beside the existing hero copy at 1440x750.
   Reserve one extra 18px text line; only the homepage slot is shorter. */
.living-hero .hero-world > [data-showcase-mode="auto"] { --showcase-height: 352px; }
/* The caption keeps its light palette in both themes, including its subtle border. */
.living-hero .hero-project-caption { flex: none; width: 100%; min-width: 0; margin: 0 0 10px; padding: 10px 14px; border: 1px solid rgba(11, 63, 81, .16); border-radius: 16px; background: #f3ece2; color: #10242d; }
.living-hero .hero-project-caption .project-label { margin: 0 0 2px; color: #1d7470; font-size: .7rem; font-weight: 800; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase; }
.living-hero .hero-project-caption h2 { margin: 0 0 4px; color: #0b3f51; font-size: 18px; font-weight: 800; line-height: 1.3; letter-spacing: normal; }
.living-hero .hero-project-caption > .project-caption-detail { margin: 0; color: inherit; font-size: 13px; line-height: 1.4; }
@media (min-width: 1550px) { .living-hero .hero-world > [data-showcase-mode="auto"] { --showcase-height: 460px; } }
@media (min-width: 768px) and (max-width: 1050px) { .living-hero .hero-world > [data-showcase-mode="auto"] { --showcase-height: 320px; } }
@media (max-width: 767px) {
  .living-hero .hero-layout { grid-template-columns: minmax(0, 1fr); }
  .living-hero .hero-world { width: 100%; margin: 32px auto; padding: 0; }
  .living-hero .hero-world > [data-showcase-mode="auto"] { --showcase-height: 340px; }
}
@media (max-width: 360px) { .living-hero .hero-world > [data-showcase-mode="auto"] { --showcase-height: 280px; } }
/* Match the positioned media slot in back-page-frame.css. Below this breakpoint
   normal flow reserves the cell height; absolute fill would attach to the page. */
@media screen and (min-width: 1000px) {
  body[data-page-frame] #learner-projects .framework-project-media > .showcase-cell { position: absolute; inset: 0; width: 100%; height: 100%; }
  body[data-page-frame] #learner-projects .project-note { grid-column: 1 / -1; }
}
@media print {
  .showcase-cell, .showcase-navigation { display: none !important; }
  [data-showcase][data-enhanced] .showcase-fallback { display: block !important; height: auto !important; position: static !important; }
  #learner-projects .project-copy-result { background: #fff !important; color: #000; border-color: #aaa; break-inside: avoid; }
  #learner-projects .project-copy-result h4 { color: #000; }
}
/* Earlier back-page image rules also reach nested art: keep the mascot's real
   proportions and let media previews fill the available stage. */
body[data-page-frame] #learner-projects .showcase-stage > img,
body[data-page-frame] #learner-projects .showcase-stage .showcase-darty-title img,
body[data-page-frame] #learner-projects .showcase-drink-screen img { width: 100%; height: 100%; max-height: none; }
body[data-page-frame] #learner-projects .showcase-stage .showcase-darty-title img,
body[data-page-frame] #learner-projects .showcase-drink-screen img,
body[data-page-frame] #learner-projects [data-project="drinks"] .showcase-fallback { object-fit: cover; object-position: center; }
#learner-projects .showcase-stage .piano-world .hero-mascot { width: 51%; height: auto; max-height: none; border-radius: 0; object-fit: fill; }
[data-showcase]:focus-visible { outline: 2px solid #efac8e; outline-offset: 3px; }
/* Owner, 29 Oct: the showcase label and the projects invitation sit in opposite corners; they stack when narrow. */
.living-hero .hero-world > .hero-world-eyebrow { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; letter-spacing: .05em; }
.living-hero .hero-world > .hero-world-eyebrow::before { display: none; }
/* Owner, 30 Oct: on phones the project comes first, straight under the slide controls, then its story. */
@media (max-width: 759px) {
  #learner-projects .framework-project-slides > [data-project-slide] > .framework-project-media { order: -1; margin-top: 0; }
}
/* Owner, 30 Oct: the project caption sits above the window; the showcase label moves underneath. */
.living-hero .hero-world > .hero-world-eyebrow { margin: 10px 0 0; }
/* Owner, 30 Oct: a reserved height keeps the project window from jumping as the captions rotate.
   Sized to the tallest current caption: one line each on laptops 1321px+, two below. */
.living-hero .hero-project-caption { box-sizing: border-box; min-height: 103px; }
@media (min-width: 768px) and (max-width: 1099px) { .living-hero .hero-project-caption { min-height: 139px; } }
@media (max-width: 767px) { .living-hero .hero-project-caption { min-height: 175px; } }
.living-hero .hero-project-caption { display: flex; flex-direction: column; justify-content: center; }
/* 1100–1320px laptops: four caption lines fit, and the window gives up the same height. */
@media (min-width: 1100px) and (max-width: 1320px) {
  .living-hero .hero-project-caption { min-height: 139px; }
  .living-hero .hero-world > [data-showcase-mode="auto"] { --showcase-height: 297px; }
}
/* Owner, 31 Oct: the caption starts level with the hero heading and hugs its text (tallest caption only);
   the window follows straight under it. */
@media (min-width: 900px) { .living-hero .hero-world { align-self: stretch; } }
/* Owner, 31 Oct: the caption's top sits level with the hero heading, and the spare height goes to the project window. */
@media (min-width: 900px) {
  .living-hero .hero-world { justify-content: flex-start; }
  .living-hero .hero-world > [data-showcase-mode="auto"] { display: flex; flex: 1 0 auto; flex-direction: column; }
  .living-hero .hero-world > [data-showcase-mode="auto"] > .showcase-cell { flex: 1 0 auto; }
}
/* 1250–1320px: the captions fit on fewer lines now, so the cell only reserves what the tallest needs. */
@media (min-width: 1250px) and (max-width: 1269px) { .living-hero .hero-project-caption { min-height: 121px; } }
@media (min-width: 1270px) and (max-width: 1320px) { .living-hero .hero-project-caption { min-height: 103px; } }
/* Owner, 31 Oct: the caption's top lines up with the top of the "L" in the heading, not the heading's line box
   (cap top ≈ 0.17em of the hero title, whose size is 4.583vw clamped between 2.625rem and 4.5rem). */
@media (min-width: 900px) { .living-hero .hero-world > .hero-project-caption { margin-top: clamp(7px, .78vw, 12px); } }
/* Owner, 31 Oct: the project label sits top right, on the heading's row, so the window gets that line. */
@media (min-width: 1000px) {
  .living-hero .hero-project-caption { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; align-content: center; }
  .living-hero .hero-project-caption .project-label { grid-row: 1; grid-column: 2; align-self: center; margin: 0; }
  .living-hero .hero-project-caption h2 { grid-row: 1; grid-column: 1; }
  .living-hero .hero-project-caption > .project-caption-detail { grid-column: 1 / -1; }
}
/* Reserved caption heights with the label on the heading row (tallest caption at each width). */
@media (min-width: 1000px) and (max-width: 1248px) { .living-hero .hero-project-caption { min-height: 122px; } }
@media (min-width: 1249px) and (max-width: 1269px) { .living-hero .hero-project-caption { min-height: 104px; } }
@media (min-width: 1270px) { .living-hero .hero-project-caption { min-height: 86px; } }