/* The same erased board; colour remains on the physical teaching pieces. */
.atelier-main { width: min(1100px, calc(100% - 4rem)); margin: 2.5rem auto 0; }
.atelier-announcement { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.atelier-intro { max-width: 75ch; margin-bottom: 2.5rem; }
.atelier-intro h1 { font-size: clamp(2.1rem, 4.5vw, 3.6rem); }
.atelier-intro > p { max-width: 65ch; }
.story-context-title { display: block; margin-bottom: .25rem; font-size: 1.3rem; }
.atelier-story { max-width: 65ch; }
.atelier-metadata { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1rem; }
.atelier-subject { display: inline-flex; align-items: center; min-height: 48px; padding: .5rem .8rem; border-radius: 8px; background: var(--blue); color: var(--object-ink); font: 600 1rem/1.3 "Atkinson Hyperlegible Next", sans-serif; box-shadow: var(--magnet-rest); background-image: linear-gradient(165deg, rgb(255 255 255 / 16%), transparent 42%, rgb(0 0 0 / 5%)); }
.is-french .atelier-subject { background-color: var(--orange); }
.level-note, .round-progress, .gesture-help { color: var(--chalk-soft); font-size: 1.1rem; }
.round-progress { margin: 0 0 .5rem; }
#round-prompt { max-width: 65ch; font: 400 clamp(1.4rem, 2.2vw, 1.8rem)/1.4 "Patrick Hand", sans-serif; margin: 0; }
.atelier-stage { padding: 1.75rem 0; margin-top: 1.5rem; border-block: 1px solid var(--line); }
.atelier-stage button, .atelier-actions button, .atelier-finished button { min-width: 48px; min-height: 48px; }
.atelier-stage button { font-family: "Atkinson Hyperlegible Next", sans-serif; font-size: 1rem; }
.representation-summary { font: 500 1.15rem/1.5 "Atkinson Hyperlegible Next", sans-serif; margin: .75rem 0 1.25rem; font-variant-numeric: tabular-nums; max-width: 70ch; }
.quantity-controls { margin-top: 1.5rem; }
.quantity-title { font-size: 1.15rem; margin: 0 0 .6rem; }
.quantity-actions, .atelier-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.quantity-actions > button { flex: 0 1 auto; }
.atelier-actions { margin-top: 1.5rem; }
.atelier-primary { font: 600 1rem/1.4 "Atkinson Hyperlegible Next", sans-serif; border: 0; border-radius: 8px; color: var(--object-ink); background-color: var(--blue); background-image: linear-gradient(165deg, rgb(255 255 255 / 16%), transparent 42%, rgb(0 0 0 / 5%)); box-shadow: var(--magnet-rest); }
.atelier-primary:hover { background-color: var(--blue); box-shadow: var(--magnet-lift); }
.atelier-feedback { min-height: 3em; max-width: 75ch; font-size: 1.3rem; margin: 1.25rem 0; }
.atelier-feedback[data-state="correct"] { border-bottom: 2px double var(--chalk); padding-bottom: .75rem; }
.atelier-hint { color: var(--chalk-soft); max-width: 70ch; padding-block: .75rem; }
.atelier-context { margin-top: 2rem; }
.atelier-context p { max-width: 75ch; }
.atelier-finished { padding-block: 1rem 2rem; }
.atelier-finished > a { display: inline-flex; align-items: center; min-height: 48px; margin-left: 1rem; }
.collection-dots { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: .5rem; width: min(100%, 34rem); min-height: 2.5rem; margin: 1rem 0 1.5rem; }
.collection-dot { display: block; aspect-ratio: 1; background-color: var(--blue); border-radius: 50%; box-shadow: var(--magnet-rest); background-image: linear-gradient(165deg, rgb(255 255 255 / 16%), transparent 42%, rgb(0 0 0 / 5%)); }
.collection-dot:nth-child(3n) { background-color: var(--orange); }
.collection-dot:nth-child(3n + 2) { background-color: var(--green); }
.collection-dots.is-arranged { grid-template-columns: repeat(6, minmax(0, 1fr)); width: min(100%, 28rem); }
.equal-groups { display: grid; gap: .7rem; max-width: 34rem; }
.equal-groups .collection-dots { display: flex; gap: .65rem; margin: 0; width: auto; padding-bottom: .5rem; border-bottom: 1px dashed var(--line); }
.equal-groups .collection-dot { width: clamp(24px, 5vw, 44px); flex: 0 0 auto; }
.number-line { margin: 1.5rem 1.1rem 0; }
.number-line-axis { position: relative; height: 9rem; margin: 0 .5rem; }
.number-line-axis::before { content: ""; position: absolute; top: 6rem; width: 100%; border-bottom: 2px solid var(--chalk); }
.number-tick { position: absolute; top: 5.7rem; height: .6rem; border-left: 1px solid var(--chalk); }
.number-tick.is-zero { border-left-width: 3px; height: .95rem; top: 5.55rem; }
.number-tick > span { position: absolute; top: .8rem; left: 0; transform: translateX(-50%); font: 400 1rem/1.4 "Atkinson Hyperlegible Next", sans-serif; white-space: nowrap; }
.line-marker { position: absolute; top: 0; width: 48px; height: 48px; transform: translateX(-50%); display: grid; place-items: center; background: var(--orange); color: var(--object-ink); border-radius: 50%; font: 600 1.1rem/1.2 "Atkinson Hyperlegible Next", sans-serif; box-shadow: var(--magnet-rest); }
.line-marker::after { content: ""; position: absolute; top: 100%; left: 50%; height: 3rem; border-left: 1px dashed var(--chalk); }
.line-segment { position: absolute; top: 4.5rem; border-top: 2px solid var(--chalk); }
.line-segment::after { content: ""; position: absolute; top: -5px; right: 0; width: 8px; height: 8px; border-top: 2px solid var(--chalk); border-right: 2px solid var(--chalk); transform: rotate(45deg); }
.line-segment.is-left::after { left: 0; right: auto; transform: rotate(-135deg); }
.line-segment.is-completed { border-top-style: dashed; }
.number-line figcaption, .fraction-strip figcaption, .hundred-figure figcaption { font: 400 1.05rem/1.5 "Atkinson Hyperlegible Next", sans-serif; margin-bottom: .7rem; }
.fraction-strip { margin: 0 0 1.5rem; width: min(100%, 42rem); }
.fraction-parts { display: flex; height: 4rem; border: 1px solid var(--chalk); }
.fraction-parts > span { flex: 1 1 0; border-right: 1px solid var(--chalk); }
.fraction-parts > span:last-child { border-right: 0; }
.fraction-parts > .is-filled { background: var(--blue); }
.grids-pair { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; }
.hundred-figure { width: min(100%, 22rem); margin: 0; }
.hundred-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); border-top: 1px solid var(--chalk); border-left: 1px solid var(--chalk); aspect-ratio: 1; }
.hundred-grid > span { border-bottom: 1px solid var(--chalk); border-right: 1px solid var(--chalk); }
.hundred-grid > .is-filled { background: var(--blue); }
.word-slots, .word-bank, .reference-links { display: flex; flex-wrap: wrap; gap: .8rem; margin: .5rem 0 1.25rem; }
.word-place { min-width: 110px !important; border: 2px dashed var(--line); background: transparent; font-size: 1.35rem !important; }
.word-place.has-word { border-style: solid; }
.atelier-magnet { background-color: var(--blue); background-image: linear-gradient(165deg, rgb(255 255 255 / 16%), transparent 42%, rgb(0 0 0 / 5%)); color: var(--object-ink); border: 0; border-radius: 8px; padding: .7rem .9rem; box-shadow: var(--magnet-rest); font-size: 1.25rem !important; }
.is-french ~ #atelier-session .atelier-magnet { background-color: var(--orange); }
.atelier-magnet:hover { background-color: var(--blue); box-shadow: var(--magnet-lift); }
.is-french ~ #atelier-session .atelier-magnet:hover { background-color: var(--orange); }
.atelier-magnet[aria-pressed="true"], .operation-sign[aria-pressed="true"], .evidence-word[aria-pressed="true"] { outline: 3px solid var(--chalk); outline-offset: 4px; }
.atelier-magnet.is-placed { border-bottom: 3px solid var(--object-ink); }
.word-slots.is-text, .word-bank.is-text { display: grid; grid-template-columns: 1fr; max-width: 70ch; }
.word-slots.is-text button, .word-bank.is-text button { text-align: left; white-space: normal; }
.gesture-help { max-width: 70ch; margin-top: 1rem; }
.evidence-passage { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 65ch; margin: 1.25rem 0; }
.evidence-word { background: transparent; font-size: 1.25rem !important; border-width: 0 0 1px; border-radius: 0; padding: .55rem .35rem; }
.evidence-word[aria-pressed="true"] { background: var(--raised); border-bottom: 3px solid var(--chalk); }
.reading-passage { max-width: 65ch; font-size: 1.5rem; margin: .5rem 0 1.5rem; }
.answer-field { display: grid; gap: .5rem; max-width: 30rem; margin: 1.25rem 0; }
.answer-field input { width: 100%; min-width: 0; min-height: 52px; padding: .5rem .7rem; font: 500 1.3rem/1.4 "Atkinson Hyperlegible Next", sans-serif; color: var(--chalk); background: var(--board); border: 1px solid var(--line); border-radius: 4px; caret-color: var(--chalk); }
.operation-expression { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-variant-numeric: tabular-nums; }
.expression-value { display: grid; place-items: center; min-height: 48px; padding: .25rem .35rem; font: 500 clamp(1.6rem, 4vw, 2rem)/1.3 "Atkinson Hyperlegible Next", sans-serif; }
.operation-sign { font-size: 1.6rem !important; padding: .3rem .65rem; }
.calculation-history { max-width: 70ch; padding-left: 1.5rem; margin-top: 1.25rem; }
.calculation-history li { padding-block: .35rem; font-variant-numeric: tabular-nums; }
@media (max-width: 600px) {
  .atelier-main { width: calc(100% - 2.5rem); margin-top: 1.5rem; }
  .atelier-intro { margin-bottom: 2rem; }
  .atelier-actions > button { flex: 1 1 180px; }
  .quantity-actions > button { flex: 1 1 160px; }
  .collection-dots { gap: .35rem; }
  .equal-groups .collection-dots { gap: .55rem; }
  .number-line { margin-inline: .7rem; }
  .number-line-axis { margin-inline: .3rem; }
  .number-tick > span { font-size: .9rem; }
  .atelier-metadata { align-items: flex-start; }
  .atelier-finished > a { margin: 1rem 0 0; }
}
@media (forced-colors: active) {
  .atelier-subject, .atelier-primary, .atelier-magnet, .collection-dot, .line-marker { background-image: none; box-shadow: none; outline: 1px solid ButtonText; }
  .fraction-parts > .is-filled, .hundred-grid > .is-filled, .collection-dot { background: Highlight; forced-color-adjust: none; }
}

/* Navigation is a continuous scene. Its own compact layout leaves the river,
   task and controls together instead of pushing the boat below an essay. */
.is-navigation .game-header { padding-block: .8rem; }
.is-navigation .atelier-main { margin-top: .6rem; }
.is-navigation .atelier-intro { margin-bottom: .9rem; max-width: none; }
.is-navigation .atelier-intro h1 { font-size: clamp(1.8rem, 3.5vw, 2.8rem); margin-bottom: .45rem; }
.is-navigation .atelier-story { max-width: 85ch; margin: .4rem 0; font-size: 1.1rem; line-height: 1.4; }
.is-navigation .story-context-title { display: inline; font-size: inherit; }
.is-navigation #activity-description { display: none; }
.is-navigation .atelier-metadata { display: inline-flex; margin: .35rem 1rem .2rem 0; gap: .65rem; }
.is-navigation .atelier-subject { min-height: 0; padding: .2rem .5rem; font-size: .9rem; }
.is-navigation #activity-notion { font-size: 1rem; }
.is-navigation #activity-level { display: inline; font-size: 1rem; }
.is-navigation .round-progress { font-size: 1rem; margin-bottom: .15rem; }
.is-navigation #round-prompt { font: 400 clamp(1.3rem, 2vw, 1.7rem)/1.3 "Patrick Hand", sans-serif; }
.navigation-event { margin: .4rem 0; max-width: 85ch; font-size: 1.1rem; line-height: 1.35; }
.navigation-task { margin: .5rem 0 .4rem; max-width: 85ch; font-size: 1.2rem; line-height: 1.4; }
.is-navigation .atelier-stage { padding: .4rem 0 0; margin-top: 0; border: 0; }
.navigation-scene { position: relative; height: clamp(260px, 32vw, 380px); margin: 0; isolation: isolate; overflow: hidden; border-radius: 4px; }
.navigation-landscape { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 25%; z-index: -1; }
.navigation-directions { position: absolute; top: .6rem; left: .6rem; right: .6rem; display: flex; justify-content: space-between; gap: 1rem; font: 500 .95rem/1.35 "Atkinson Hyperlegible Next", sans-serif; }
.navigation-directions > span { padding: .25rem .45rem; color: var(--chalk); background: var(--board); border-radius: 3px; }
.navigation-origin { position: absolute; left: 50%; top: 21%; transform: translateX(-50%); padding: .25rem .5rem; color: var(--chalk); background: var(--board); font: 500 1rem/1.3 "Atkinson Hyperlegible Next", sans-serif; white-space: nowrap; }
.navigation-origin::after { content: ""; position: absolute; top: 100%; left: 50%; height: 1.2rem; border-left: 2px dashed var(--chalk); }
.navigation-route { position: absolute; left: clamp(3.75rem, 10vw, 7rem); right: clamp(3.75rem, 10vw, 7rem); top: 58%; height: 7rem; }
.navigation-axis { position: absolute; top: 3.4rem; width: 100%; height: 2px; background: var(--board); box-shadow: 0 1px 0 var(--chalk); }
.navigation-tick { position: absolute; top: -.3rem; height: .65rem; border-left: 2px solid var(--board); }
.navigation-tick.is-zero { height: 1rem; top: -.45rem; border-left-width: 3px; }
.navigation-tick > span { position: absolute; top: .7rem; left: 0; transform: translateX(-50%); padding: .1rem .25rem; background: var(--board); color: var(--chalk); font: 500 .9rem/1.3 "Atkinson Hyperlegible Next", sans-serif; }
.navigation-boat, .navigation-boat:hover { position: absolute; top: -1.6rem; width: clamp(112px, 18vw, 200px); height: clamp(64px, 9vw, 92px); min-width: 112px; min-height: 64px; transform: translateX(-50%); padding: 0; border: 0; background: transparent; box-shadow: none; border-radius: 4px; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; z-index: 3; }
.navigation-boat:disabled { opacity: 1; cursor: default; }
.navigation-boat:focus-visible { outline: 3px solid var(--chalk); outline-offset: 3px; }
.navigation-boat.is-dragging { cursor: grabbing; }
.navigation-boat > img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.navigation-cargo { position: absolute; top: -1.2rem; left: 50%; transform: translateX(-50%); padding: .2rem .4rem; background: var(--blue); color: var(--object-ink); border-radius: 6px; box-shadow: var(--magnet-rest); font: 600 .8rem/1.3 "Atkinson Hyperlegible Next", sans-serif; white-space: nowrap; pointer-events: none; }
.navigation-cargo[data-cargo="vide"] { background: var(--board); color: var(--chalk); box-shadow: none; }
.navigation-supply { position: absolute; top: -4.3rem; transform: translateX(-50%); padding: .25rem .4rem; background: var(--orange); color: var(--object-ink); border-radius: 6px; box-shadow: var(--magnet-rest); font: 600 .8rem/1.3 "Atkinson Hyperlegible Next", sans-serif; white-space: nowrap; }
.navigation-cargo.is-transferred { animation: navigation-load 450ms cubic-bezier(.16,1,.3,1) both; }
@keyframes navigation-load { from { transform: translate(-50%, -24px); opacity: .6; } to { transform: translate(-50%, 0); opacity: 1; } }
.navigation-delivered.is-transferred { animation: navigation-unload 450ms cubic-bezier(.16,1,.3,1) both; }
@keyframes navigation-unload { from { transform: translateY(-18px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }
.navigation-deliveries { display: flex; flex-wrap: wrap; gap: .45rem; margin: .5rem 0 .7rem; }
.navigation-delivered { background: var(--green); color: var(--object-ink); font: 500 .8rem/1.3 "Atkinson Hyperlegible Next", sans-serif; border-radius: 6px; padding: .25rem .4rem; box-shadow: var(--magnet-rest); }
.navigation-destination { margin: .5rem 0 .3rem; color: var(--chalk); font: 500 .9rem/1.4 "Atkinson Hyperlegible Next", sans-serif; }
.navigation-trace { position: absolute; top: 6.1rem; height: 0; border-top: 2px dashed var(--board); filter: drop-shadow(0 1px 0 var(--chalk)); }
.navigation-trace::after { content: ""; position: absolute; top: -5px; right: 0; width: 8px; height: 8px; border-top: 2px solid var(--board); border-right: 2px solid var(--board); transform: rotate(45deg); }
.navigation-trace.is-left::after { left: 0; right: auto; transform: rotate(-135deg); }
.navigation-metrics { display: flex; flex-wrap: wrap; gap: .2rem 2rem; margin-top: .65rem; }
.navigation-metrics .representation-summary { margin: 0; font-size: 1rem; }
.navigation-scale { margin: .3rem 0 .5rem; font-size: 1rem; }
.is-navigation .quantity-controls { margin-top: .65rem; }
.is-navigation .quantity-title { max-width: 85ch; margin-bottom: .6rem; font-size: 1rem; }
.is-navigation .quantity-actions button { flex: 0 1 220px; }
.is-navigation .atelier-actions { margin-top: .75rem; }
.is-navigation .atelier-feedback { margin: .75rem 0; min-height: 0; font-size: 1.15rem; }
.navigation-log { margin-top: .5rem; padding-block: .5rem; }
.navigation-log summary { font-size: 1.1rem; }
.navigation-log ol { padding-left: 1.5rem; margin-block: .5rem; font-size: 1.1rem; }
.navigation-log li { padding-block: .25rem; }
@media (max-width: 600px) {
  .is-navigation .game-header { padding-block: .6rem; }
  .is-navigation .atelier-main { width: calc(100% - 2rem); }
  .is-navigation .atelier-intro h1 { font-size: 1.85rem; }
  .is-navigation .atelier-metadata { margin-right: 0; gap: .4rem; }
  .is-navigation #activity-notion, .is-navigation #activity-level { font-size: .9rem; }
  .navigation-event { font-size: 1rem; }
  .navigation-task { font-size: 1.1rem; }
  .navigation-directions { font-size: .75rem; gap: 1.5rem; }
  .navigation-directions > span { max-width: 47%; }
  .navigation-origin { font-size: .85rem; }
  .navigation-cargo { font-size: .72rem; }
  .navigation-destination { font-size: .8rem; }
  .is-navigation .quantity-actions button { flex: 1 1 112px; }
}
@media (prefers-reduced-motion: reduce) {
  .navigation-boat, .navigation-cargo, .navigation-delivered { animation: none !important; transition: none !important; }
}

/* A module alternates a short illustrated story with one manipulation. */
.module-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 1.5rem; font-size: 1.1rem; }
.module-back, .module-back:hover { min-height: 48px; padding: .5rem 0; color: var(--chalk); background: transparent; border: 0; box-shadow: none; text-decoration: underline; text-underline-offset: .25em; }
.module-bar > span { text-align: right; }
.module-selection { max-width: 950px; margin: 1.5rem auto; }
.module-choice { display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: clamp(1rem, 4vw, 3rem); align-items: center; padding: 1.5rem 0; border-bottom: 1px solid var(--line); }
.module-choice:first-child { padding-top: 0; }
.module-choice h2 { margin: 0 0 .4rem; font: 400 clamp(1.5rem, 3vw, 2rem)/1.15 "CHAWP", cursive; }
.module-choice p { margin: .4rem 0 .8rem; }
.module-choice-level { font-size: 1rem; }
.module-choice .atelier-magnet { min-height: 48px; }
@media (min-width: 1000px) {
  .module-choice { grid-template-columns: 112px 1fr; gap: 2rem; padding-block: .55rem; }
  .module-choice-copy { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; align-items: center; }
  .module-choice h2, .module-choice p { grid-column: 1; margin: 0; }
  .module-choice-copy > p:not(.module-choice-level) { margin-block: .2rem; }
  .module-choice .atelier-magnet { grid-column: 2; grid-row: 1 / 4; }
}
.cargo-object { display: inline-block; width: 100%; aspect-ratio: 1; background-image: url("/assets/images/cartier-cargaisons-103.webp"); background-size: 300% auto; background-repeat: no-repeat; background-position: left center; pointer-events: none; }
.cargo-object[data-cargo="provisions"] { background-position: center; }
.cargo-object[data-cargo="voile"] { background-position: right center; }
.story-page { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .9fr); align-items: center; gap: clamp(1.5rem, 4vw, 3.5rem); margin: 1rem 0 3rem; }
.story-picture { position: relative; margin: 0; min-width: 0; isolation: isolate; }
.story-picture > img:first-child { display: block; width: 100%; height: auto; aspect-ratio: 3/2; object-fit: contain; }
.story-copy { min-width: 0; max-width: 65ch; }
.story-copy h1 { margin: 0 0 1rem; font: 400 clamp(1.7rem, 3.5vw, 2.7rem)/1.15 "CHAWP", cursive; text-wrap: balance; }
.story-copy > p { font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.45; margin: .8rem 0; }
.story-copy .story-math { font: 500 1rem/1.5 "Atkinson Hyperlegible Next", sans-serif; padding-block: .7rem; border-block: 1px solid var(--line); margin-block: 1.3rem; }
.story-copy .story-continue, .story-copy > .atelier-primary { margin-top: .75rem; min-height: 48px; max-width: 100%; white-space: normal; }
.story-boat { position: absolute; width: 60%; height: auto; left: 20%; bottom: 10%; }
.story-cargo { position: absolute; width: 17%; left: 58%; bottom: 10%; }
.is-opening .story-cargo { left: 70%; bottom: 40%; }
.story-page[data-scene="dusk"] .story-picture > img:first-child { filter: brightness(.7); }
.story-page[data-scene="rain"] .story-picture > img:first-child { filter: brightness(.85); }
.story-rain { position: absolute; inset: 15% 0 10%; overflow: hidden; pointer-events: none; }
.story-rain > span { position: absolute; top: 20%; left: 10%; width: 1px; height: 12%; background: var(--chalk); opacity: .6; transform: rotate(15deg); }
.story-rain > span:nth-child(2n) { top: 40%; }
.story-rain > span:nth-child(3n) { top: 65%; }
.story-rain > span:nth-child(2) { left: 20%; }.story-rain > span:nth-child(3) { left: 30%; }.story-rain > span:nth-child(4) { left: 40%; }.story-rain > span:nth-child(5) { left: 50%; }.story-rain > span:nth-child(6) { left: 60%; }.story-rain > span:nth-child(7) { left: 70%; }.story-rain > span:nth-child(8) { left: 80%; }.story-rain > span:nth-child(9) { left: 90%; }
.module-balance { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 1rem 0; font: 500 1rem/1.5 "Atkinson Hyperlegible Next", sans-serif; }
.module-balance p { margin: 0; }
.module-history { margin: 1rem 0; }
.module-history summary { min-height: 48px; display: list-item; cursor: pointer; padding-block: .5rem; }
.module-history li { padding-block: .25rem; }
.story-replay { margin: 1rem 0 0; min-height: 48px; }
.story-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.2rem; }
.story-actions > button { margin: 0; min-height: 48px; max-width: 100%; white-space: normal; }
.story-next { margin-top: 1.5rem; }
.navigation-cargo-object { position: absolute; width: 25%; height: 65%; left: 65%; top: 28%; }
.is-module-challenge #activity-heading .atelier-story, .is-module-challenge #activity-heading .atelier-metadata, .is-module-challenge #activity-heading #activity-level { display: none; }
.is-module-challenge .module-bar { margin-bottom: .8rem; }
.is-unlocked .story-picture { animation: story-unlocked 500ms cubic-bezier(.16,1,.3,1); }
@keyframes story-unlocked { from { opacity: .6; clip-path: inset(0 8% 0 0); } to { opacity: 1; clip-path: inset(0); } }
@media (max-width: 760px) {
  .story-page { grid-template-columns: 1fr; gap: .8rem; }
  .story-picture { max-width: 600px; width: 100%; margin-inline: auto; }
  .story-copy { max-width: none; }
  .module-bar { font-size: 1rem; margin-bottom: .75rem; }
  .module-choice { grid-template-columns: minmax(75px, 24%) 1fr; gap: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .is-unlocked .story-picture { animation: none; } }