@font-face {
  font-family: Newsreader;
  src: url('../assets/district/newsreader-latin-700-normal.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
:root {
  --district-paper: #ededed;
  --district-light: #f9f9f9;
  --district-ink: #363636;
  --district-petrol: #313131;
  --district-deep: #272727;
  --district-muted: #5f5f5f;
  --district-rule: #bababa;
  --district-copper: #585858;
  --district-gold: #cacaca;
  --district-display: Newsreader, Georgia, serif;
  background: var(--district-deep);
  accent-color: var(--district-petrol);
}

::selection { background: var(--district-gold); color: var(--district-deep); }
.district-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.shell { background: var(--district-deep); }
.shell.motion-off *, .shell.motion-off *::before, .shell.motion-off *::after {
  animation: none !important;
  transition: none !important;
}
.shell .topbar { background: var(--district-deep); border-color: #5d5d5d; }
.shell .brand small, .shell .hud-stat > span, .shell .topbar-intro { color: #dbdbdb; }
.shell .utility, .shell .dock { background: var(--district-petrol); color: var(--district-light); border-color: #8a8a8a; }
.shell .top-actions .utility { min-width: 44px; min-height: 44px; }
.shell .utility:hover, .shell .dock button:hover { background: #4d4d4d; }
.shell .dock button { color: var(--district-light); min-height: 44px; }
.shell .dock button.selected { background: var(--district-gold); color: var(--district-deep); }
.shell :is(button,a,input,select,summary):focus-visible { outline: 3px solid #737373; outline-offset: 3px; }
.shell main :is(h1,h2)[tabindex="-1"]:focus { outline: none; }
.shell .district-cta {
  align-items: center;
  background: var(--district-petrol);
  border-radius: 3px;
  color: var(--district-light);
  display: inline-flex;
  gap: 12px;
  justify-content: center;
  min-height: 46px;
  text-decoration: none;
  box-shadow: none;
}
.shell .district-cta:hover { background: #494949; }
.district-plain, .district-link {
  align-items: center;
  background: transparent;
  color: inherit;
  display: inline-flex;
  font-weight: 700;
  gap: 8px;
  min-height: 44px;
  padding: 0 4px;
  text-decoration: underline;
  text-underline-offset: .26em;
}
.opening, .district-home { background: var(--district-paper); color: var(--district-ink); }
.scene-intro { padding-bottom: 0; }
.opening :is(h1,h2,h3), .district-home :is(h1,h2), .department-scene h1,
.district-build .workspace-head h2, .scene-records h2, .scene-result h1, .scene-finale h1, .modal-card h2 {
  font-family: var(--district-display);
  font-weight: 700;
  letter-spacing: -.035em;
}
.opening-hero {
  display: grid;
  grid-template-columns: minmax(340px, 2fr) minmax(0, 3fr);
  min-height: min(780px, calc(100svh - 75px));
}
.opening-copy { align-self: center; padding: clamp(28px,5vw,90px); }
.opening-copy h1 { font-size: clamp(3rem,6vw,6rem); margin: 0 0 24px; }
.opening-copy h2 { font-size: clamp(1.6rem,3vw,3rem); line-height: 1.07; margin-bottom: 18px; }
.opening-copy p { max-width: 40ch; font-size: clamp(1rem,1.4vw,1.16rem); }
.opening-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 18px; }
.opening-guided {
  background: transparent;
  color: var(--district-copper);
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;
  padding: 0;
  font-weight: 700;
}
.opening-facts {
  border-top: 1px solid var(--district-rule);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  list-style: none;
  margin: 18px 0 0;
  padding: 16px 0 0;
  font-size: .84rem;
}
.opening-scene, .department-scene figure, .opening-quarter figure { margin: 0; overflow: hidden; position: relative; }
.opening-scene img, .department-scene figure img, .opening-quarter figure img, .district-map > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.opening-scene > img { position: absolute; object-position: 54% center; }
.opening-scene figcaption {
  position: absolute;
  right: 16px;
  bottom: 16px;
  background: var(--district-deep);
  color: var(--district-light);
  font-size: .74rem;
  padding: 8px 12px;
}
.ambient-steam {
  pointer-events: none;
  position: absolute;
  top: 9%;
  left: 32%;
  width: 4%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #f5f5f590;
  filter: blur(9px);
  opacity: 0;
  animation: district-steam 7s 1s infinite linear;
}
@keyframes district-steam {
  20% { opacity: .45; }
  75%, 100% { opacity: 0; transform: translate(90%, -150%) scale(2.2); }
}
.district-delivery {
  --delivery-start-x: 41%;
  --delivery-end-x: 54%;
  --delivery-start-y: 76%;
  --delivery-end-y: 86%;
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  animation: district-delivery 20s 1s infinite linear;
}
.opening-scene .district-delivery { --delivery-start-x: 44%; --delivery-end-x: 55%; --delivery-start-y: 71%; --delivery-end-y: 78%; }
.district-delivery img {
  position: absolute;
  inset: 0 auto auto 0;
  width: clamp(25px,5vw,67px);
  height: auto;
  filter: drop-shadow(1px 4px 2px #1d1d1d70);
}
@keyframes district-delivery {
  0% { transform: translate(var(--delivery-start-x), var(--delivery-start-y)); }
  7%, 23% { opacity: 1; }
  31%, 100% { opacity: 0; transform: translate(var(--delivery-end-x), var(--delivery-end-y)); }
}
.opening-spread, .opening-departments, .opening-quarter, .opening-close { padding: clamp(28px,6vw,88px); }
.opening-spread { display: grid; grid-template-columns: 1fr 1.25fr; align-items: end; gap: 28px; }
#how-it-works { scroll-margin-top: 110px; }
.opening-spread p, .opening-close p { max-width: 51ch; }
.opening-journey { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); border-block: 1px solid var(--district-rule); }
.opening-journey > div { display: grid; gap: 10px; padding: 12px 8px; border-inline-end: 1px solid var(--district-rule); }
.opening-journey > div:last-child { border-inline-end: 0; }
.opening-journey span { display: grid; grid-template-columns: repeat(2,1fr); gap: 4px; }
.opening-journey i { font-size: .77rem; font-style: normal; }
.opening-growth { display: grid; grid-template-columns: 1fr 1fr; grid-column: 1/-1; gap: 10px; }
.opening-growth figure { margin: 0; }
.opening-growth img { width: 100%; display: block; aspect-ratio: 2.2; object-fit: cover; }
.opening-growth figcaption { padding-top: 8px; font-size: .9rem; }
.opening-departments { color: var(--district-light); background: var(--district-petrol); }
.opening-department-list { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 14px; }
.opening-department-list details { border-top: 1px solid #9a9a9a; }
.opening-department-list summary { cursor: pointer; padding: 10px 0; min-height: 44px; }
.opening-department-list summary img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #d0d0d0; }
.opening-department-list summary span { display: inline-grid; gap: 5px; margin-top: 10px; }
.opening-department-list small { color: #dadada; }
.department-example img { width: 100%; display: block; margin: 8px 0; }
.opening-quarter { display: grid; grid-template-columns: 1.12fr 1fr; align-items: center; gap: clamp(20px,5vw,72px); }
.opening-quarter figure { aspect-ratio: 3/2; background: #b2b2b2; }
.quarter-steps { display: flex; flex-wrap: wrap; gap: 5px; list-style: none; padding: 0; }
.quarter-steps button { background: transparent; color: inherit; border: 1px solid var(--district-rule); min-height: 44px; padding: 7px; }
.quarter-steps button[aria-pressed=true] { background: var(--district-petrol); color: var(--district-light); }
.quarter-explanation { min-height: 90px; }
.opening-close { display: flex; justify-content: flex-end; min-height: 420px; background: var(--district-petrol) url('../assets/district/district.webp') 32% 67% / cover; }
.opening-close > div { align-self: center; background: var(--district-paper); padding: clamp(24px,4vw,64px); }

.district-home { max-width: 1600px; margin-inline: auto; }
.district-home-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 15px clamp(18px,4vw,64px); }
.district-home-head h1 { font-size: clamp(2.1rem,3.8vw,3.8rem); margin: 0; }
.district-home-head p { margin: 4px 0 0; }
.district-map { position: relative; overflow: hidden; height: clamp(280px, calc(100svh - 355px), 580px); background: #767676; }
.district-map > img { position: absolute; object-position: center 51%; }
.district-map .ambient-steam { top: 2%; }
.map-marker {
  align-items: center;
  background: var(--district-deep);
  border: 1px solid var(--district-gold);
  color: var(--district-light);
  display: inline-flex;
  font-weight: 750;
  gap: 5px;
  min-height: 44px;
  padding: 6px 11px;
  position: absolute;
  transform: translate(-50%, -50%);
}
.map-marker svg { color: var(--district-gold); flex: none; }
.map-marker:hover { background: var(--district-gold); color: var(--district-deep); }
.map-marker:hover svg { color: inherit; }
.marker-factory { top: 47%; left: 30%; }
.marker-market { top: 25%; left: 81%; }
.marker-people { top: 23%; left: 21%; }
.marker-treasury { top: 81%; left: 73%; }
.marker-strategy { top: 58%; left: 88%; }
.workshop-map .marker-factory { top: 64%; left: 25%; }
.workshop-map .ambient-steam { top: 25%; left: 13%; }
.workshop-map .marker-people { top: 43%; left: 73%; }
.district-console, .district-briefing {
  display: grid;
  grid-template-columns: minmax(260px,1fr) minmax(240px,1fr) auto;
  gap: clamp(16px,3vw,48px);
  align-items: center;
  padding: 18px clamp(18px,4vw,64px);
  border-bottom: 1px solid var(--district-rule);
}
.district-console h2, .district-briefing h2 { font-size: 1.4rem; margin: 0 0 6px; }
.district-next p, .district-briefing p { margin: 4px 0 0; }
.district-briefing { grid-template-columns: 1fr minmax(260px, 420px); }
.district-quarters {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(10, minmax(0,1fr));
  gap: 2px;
  padding: 0;
  margin: 0;
  font-size: .7rem;
  font-variant-numeric: tabular-nums;
}
.district-quarters li { text-align: center; border-top: 2px solid var(--district-rule); padding: 3px 0; }
.district-quarters li.complete { border-color: #777777; }
.district-quarters li.current { border-color: var(--district-copper); font-weight: 850; background: #d9d9d9; color: var(--district-deep); }

.district-build { max-width: 1500px; padding-top: 12px; }
.district-route { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 10px; }
.district-route button { padding: 8px clamp(10px,2vw,24px); min-height: 44px; background: transparent; color: var(--district-light); border-bottom: 2px solid transparent; }
.district-route button:hover { border-color: #bcbcbc; }
.district-route button[aria-current=location] { border-color: var(--district-gold); color: var(--district-gold); font-weight: 750; }
.department-scene {
  display: grid;
  grid-template-columns: 1fr 2fr;
  min-height: clamp(230px,30vw,460px);
  position: relative;
  background: var(--district-paper);
  color: var(--district-ink);
}
.department-caption { align-self: center; padding: clamp(20px,4vw,58px); }
.department-caption h1 { font-size: clamp(2.2rem,5vw,5rem); margin: 0 0 12px; }
.department-caption p { font-size: 1rem; max-width: 32ch; margin-bottom: 18px; }
.department-caption span { color: var(--district-copper); font-weight: 750; }
.department-scene figure img { position: absolute; }
.department-scene figcaption {
  position: absolute;
  inset: auto 0 0 auto;
  background: var(--district-deep);
  color: var(--district-light);
  padding: 9px 14px;
  font-size: .84rem;
  font-weight: 650;
}
.department-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; }
.department-actions .district-cta { padding: 8px 12px; }
.district-live summary { cursor: pointer; padding: 12px 0; font-weight: 750; }
.decision-route {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 16px;
  margin: 0 0 20px;
  border-bottom: 1px solid var(--district-rule);
}
.decision-route a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--district-petrol);
  font-weight: 750;
  text-underline-offset: .2em;
}
.district-build .workspace [id][tabindex="-1"] { scroll-margin-top: 105px; }
.district-build .workspace {
  color: var(--district-ink);
  background: var(--district-light);
  border: none;
  border-radius: 0;
  min-height: 0;
  padding: clamp(18px,3vw,48px);
  scroll-margin-top: 100px;
}
.district-build .workspace :is(.sku-card,.role-tile,.channel-tile,.machine-tile,.strategy-tile,.panel,.capacity-ribbon,.treasury-hero,.team-visual,.economic-pulse) {
  border-radius: 3px;
  box-shadow: none;
}
.district-build .workspace :is(.sku-card,.role-tile,.channel-tile,.machine-tile,.panel) { border-top: 1px solid var(--district-rule); }
.district-build .workspace :is(.treasury-hero,.strategy-visual,.team-visual,.economic-pulse) { background: var(--district-petrol); color: var(--district-light); }
.district-build .workspace :is(.treasury-hero,.strategy-visual,.team-visual,.economic-pulse) :is(small,p,.eyebrow) { color: #dedede; }
.district-build .workspace :is(.dark-panel,.light-panel) { border-radius: 3px; }
.district-build .workspace .dark-panel { background: var(--district-petrol); }
.district-build .workspace .dark-panel :is(.panel-title span,.micro-row,.balance-line span) { color: #dedede; }
.district-build .workspace-head p,
.district-build .machine-tile > small,
.district-build .light-panel :is(p,.eyebrow),
.scene-result .result-content :is(.outcome-stats small,.result-insight > span,.result-insight > p),
.modal-card :is(p,.eyebrow,.modal-form label,.commit-rows small) { color: var(--district-muted); }
.scene-records .records-summary { background: var(--district-petrol); color: var(--district-light); }
.scene-records .records-summary span { color: #dedede; }
.modal-card :is(.primary,.quiet-action) { box-shadow: none; }
.modal-card .uncertainty { color: var(--district-muted) !important; }
.district-build .workspace .horizon-disc { display: none; }
.district-build .workspace input[type=range] { accent-color: var(--district-copper); }
.district-build .workspace button, .modal-card button { min-height: 44px; }
.district-build .machine-light { animation: none; box-shadow: none; }
.district-build .tile-illustration { background: #dddddd; border: 1px solid #b9b9b9; border-radius: 3px; width: 100%; }
.district-build .tile-illustration { padding: 0; overflow: hidden; }
.district-build .tile-illustration img { display: block; width: 100%; height: 100%; object-fit: cover; }
.district-build .tile-illustration[aria-pressed=true] { outline: 2px solid var(--district-petrol); outline-offset: 2px; }
.district-build .district-live :is(.living-world,.market-district,.treasury-district) {
  background: var(--district-deep);
  border-color: #828282;
  border-radius: 3px;
  box-shadow: none;
}
.district-build .district-live canvas { filter: sepia(.15) hue-rotate(335deg) saturate(.8); }
.shell .topbar, .shell .dock { box-shadow: 0 6px 20px #20202033; }
.shell .dock button:hover:not(.selected) { background: #4d4d4d; color: var(--district-light); }
@media(min-width: 621px) {
  .shell .dock {
    position: static;
    width: max-content;
    transform: none;
    margin: 20px auto;
  }
  .shell:is(.scene-home,.scene-build,.scene-records) { padding-bottom: 12px; }
}
.scene-records .records-view, .scene-result .results-view, .scene-finale .finale-view {
  background: var(--district-paper);
  color: var(--district-ink);
}
.scene-records .records-head, .scene-result .result-art, .scene-finale .finale-view {
  background: var(--district-deep) url('../assets/district/district.webp') center 64% / cover;
  color: var(--district-light);
}
.scene-records .records-head, .scene-result .result-art {
  padding: clamp(24px,5vw,70px);
  background-image: linear-gradient(90deg,#272727f5,#27272742),url('../assets/district/district.webp');
}
.scene-records .records-head :is(p,.eyebrow), .scene-result .result-art p { color: var(--district-light); }
.scene-result .results-view > .district-quarters, .scene-finale .district-quarters { margin: 18px auto; max-width: 470px; }
.scene-result .district-quarters { margin-bottom: 20px; }
.cash-history { padding: 20px; margin-block: 18px; background: var(--district-light); border-block: 1px solid var(--district-rule); }
.cash-history header { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; }
.cash-history h3 { margin: 0; }
.cash-history ol { display: grid; grid-template-columns: repeat(10,minmax(0,1fr)); gap: 12px 4px; list-style: none; padding: 0; margin: 16px 0 0; }
.cash-history li { display: grid; gap: 4px; text-align: center; font-size: .74rem; font-variant-numeric: tabular-nums; }
.cash-bar-plot { position: relative; height: 70px; background: var(--district-paper); }
.cash-bar-plot::before { content: ''; position: absolute; inset: auto 0 var(--zero); border-bottom: 1px solid var(--district-rule); }
.cash-bar-plot i { position: absolute; inset: auto 25% var(--bar-bottom); height: var(--bar-height); background: var(--district-petrol); }
.cash-bar-plot .below-zero { background: var(--district-copper); }
.scene-finale .finale-view { background-image: linear-gradient(#272727d9,#272727f2),url('../assets/district/district.webp'); }
.scene-finale .finale-view :is(p,.eyebrow) { color: var(--district-light); }
.modal-card { background: var(--district-paper); color: var(--district-ink); box-shadow: 0 18px 45px #27272740; }
.scene-cinematic .cinema-world {
  --replay-plate: url('../assets/district/factory.webp');
  background: var(--district-deep);
  border-color: #767676;
  border-radius: 3px;
  box-shadow: none;
}
.scene-cinematic .cinema-world[data-beat=delivery] { --replay-plate: url('../assets/district/market.webp'); }
.scene-cinematic .cinema-world[data-beat=finance] { --replay-plate: url('../assets/district/treasury.webp'); }
.scene-cinematic .cinema-world[data-beat=news] { --replay-plate: url('../assets/district/strategy.webp'); }
.cinema-plate {
  min-height: clamp(180px,35vw,460px);
  background: var(--replay-plate) center 55% / cover;
}
.cinema-inset {
  width: min(38%,460px);
  position: absolute;
  right: 16px;
  top: clamp(60px, 7vw, 110px);
  z-index: 1;
}
.cinema-inset summary {
  width: max-content;
  max-width: 100%;
  margin-left: auto;
  cursor: pointer;
  min-height: 44px;
  padding: 11px 10px;
  background: var(--district-deep);
  color: var(--district-light);
}
.cinema-diagram { position: relative; background: var(--district-deep); border: 1px solid var(--district-gold); }
.scene-cinematic .cinema-overlay { background: var(--district-deep); }
.scene-cinematic .cinema-director-badge { backdrop-filter: none; border-radius: 3px; }
.scene-cinematic .director-pulse { animation: none; }
.scene-cinematic .cinema-header h1 { font-family: var(--district-display); }

.quarter-review h2 { margin-bottom: 10px; }
.quarter-plan { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); border-block: 1px solid var(--district-rule); }
.quarter-plan > div { padding: 10px 8px; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.quarter-plan > div + div { border-inline-start: 1px solid var(--district-rule); }
.quarter-plan span { color: var(--district-muted); font-size: .78rem; }
.quarter-plan strong { font-size: clamp(1.1rem,2.5vw,1.65rem); font-variant-numeric: tabular-nums; }
.quarter-plan-note { margin: 12px 0; }
.quarter-plan-details > summary { cursor: pointer; display: list-item; padding-block: 12px; min-height: 44px; font-weight: 750; }
.quarter-plan-details dl { margin: 0; }
.quarter-plan-details dd { margin: 0; font-weight: 750; text-align: end; }
.quarter-review .commit-warning { margin: 12px 0; }
.quarter-review .commit-warning p { margin-block: 5px 0; }
.quarter-review-actions, .result-next { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 16px; }
.result-next { border-block: 1px solid var(--district-rule); padding: 16px 0; justify-content: space-between; }
.result-next h3, .result-next p { margin: 0; }
.result-next p { margin-top: 4px; }
.system-calm { color: var(--district-muted); font-size: .82rem; text-align: end; }
.quarter-dispatch { border-top: 1px solid var(--district-rule); padding: 20px 0; }
.quarter-dispatch h2 { font: 700 clamp(1.45rem,3vw,2rem)/1.05 var(--district-display); margin: 0 0 5px; }
.quarter-dispatch p { color: var(--district-muted); font-size: .9rem; }
.quarter-dispatch dl { display: grid; gap: 10px; margin: 0; }
.quarter-dispatch dl > div { display: grid; grid-template-columns: 1fr auto; gap: 5px 10px; align-items: center; }
.quarter-dispatch dd { margin: 0; font-weight: 750; font-variant-numeric: tabular-nums; }
.dispatch-track { grid-column: 1/-1; height: 7px; background: #d6d6d6; }
.dispatch-track i { display: block; height: 100%; background: var(--district-petrol); transform-origin: left; transform: scaleX(var(--dispatch-fill)); }
.quarter-dispatch dl > div:last-child i { background: var(--district-copper); }
.dispatch-track { background: var(--district-rule); }

.shell .advisor-copy > span > small:first-of-type,
.scene-result .result-content :is(.economic-outcome > span,.economic-outcome > small,.sku-results > div > span,.result-rival-moves p),
.district-build .workspace :is(.machine-tile > strong > small,.capacity-ribbon small,.capacity-ribbon strong > span,.crew-intro .eyebrow,.workforce-role-info > small,.crew-cost-note,.department-heading > .eyebrow) {
  color: var(--district-muted);
}
.scene-result .result-rival-moves { opacity: 1; }

@media(prefers-reduced-motion:no-preference) {
  .shell:not(.motion-off) { --game-arrival: cubic-bezier(.16,1,.3,1); }
  .shell:not(.motion-off) .ambient-steam,
  .shell:not(.motion-off) .district-delivery { animation-play-state: paused; }
  .shell:not(.motion-off) .ambient-visible :is(.ambient-steam,.district-delivery) { animation-play-state: running; }
  .shell:not(.motion-off) :is(.district-cta,.decision-route a,.district-plain) { transition: background-color 130ms ease, color 130ms ease, transform 130ms ease; }
  .shell:not(.motion-off) .district-cta:active { transform: translateY(2px); }
  .shell:not(.motion-off) .map-marker { transition: background-color 140ms ease, transform 170ms var(--game-arrival); }
  .shell:not(.motion-off) .map-marker:is(:hover,:focus-visible) { transform: translate(-50%,-55%); }
  .shell:not(.motion-off).scene-arrival .department-scene figure > img { animation: room-arrival 410ms var(--game-arrival); }
  .shell:not(.motion-off).scene-arrival .district-map > img { animation: room-arrival 450ms var(--game-arrival); }
  .shell:not(.motion-off) .dialog-arrival { animation: ledger-arrival 240ms var(--game-arrival); }
  .shell:not(.motion-off).scene-arrival .dispatch-track i { animation: dispatch-post 500ms var(--game-arrival) calc(var(--dispatch-order) * 85ms); }
  .shell:not(.motion-off).scene-arrival .district-quarters li.current { animation: quarter-post 560ms var(--game-arrival); }
  .shell:not(.motion-off) .decision-bubble { animation: ledger-arrival 220ms var(--game-arrival); }
}
@keyframes room-arrival { from { transform: scale(1.035); opacity: .86; } }
@keyframes ledger-arrival { from { transform: translateY(9px); opacity: .82; } }
@keyframes dispatch-post { from { transform: scaleX(0); } }
@keyframes quarter-post { from { background-color: var(--district-gold); } }

@media(max-width: 850px) {
  .opening-hero { grid-template-columns: minmax(275px,1fr) minmax(0,1fr); }
  .opening-department-list { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .district-console { grid-template-columns: 1fr 1fr; }
  .district-console > button { justify-self: start; }
}
@media(min-width: 901px) {
  .scene-result .result-art {
    position: sticky;
    top: 88px;
    align-self: start;
    min-height: min(640px,calc(100svh - 88px));
  }
}
@media(max-width: 620px) {
  .shell .top-actions .utility { min-width: 36px; }
  .opening-hero, .opening-spread, .opening-quarter, .district-console, .district-briefing { grid-template-columns: minmax(0,1fr); }
  .opening-copy { padding: 24px 20px; }
  .opening-copy h1 { margin-bottom: 12px; }
  .opening-scene { aspect-ratio: 1.55; }
  .opening-scene .district-delivery {
    --delivery-start-x: 53%;
    --delivery-end-x: 64%;
    --delivery-start-y: 70%;
    --delivery-end-y: 79%;
  }
  .opening-department-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .opening-growth { grid-template-columns: 1fr; }
  .opening-journey > div { padding-inline: 4px; }
  .opening-journey span { gap: 2px; }
  .opening-journey i { font-size: .69rem; }
  .opening-quarter figure { order: 1; }
  .opening-close { align-items: flex-end; justify-content: stretch; }
  .district-map { aspect-ratio: 1.4; height: auto; }
  .map-marker { font-size: .75rem; padding: 5px 7px; }
  .map-marker svg { width: 12px; }
  .marker-people { left: 18%; }
  .workshop-map .marker-people { top: 23%; left: 18%; }
  .marker-market { left: 83%; }
  .marker-strategy { left: 84%; }
  .marker-treasury { left: 76%; }
  .district-console, .district-briefing { gap: 10px; }
  .district-console > button { justify-self: stretch; }
  .department-scene { grid-template-columns: minmax(0,1fr); }
  .department-caption { padding: 20px 18px 14px; }
  .department-caption p { margin-bottom: 6px; }
  .department-scene figure { aspect-ratio: 2.15; }
  .district-build .workspace { scroll-margin-top: 76px; }
  .district-build .workspace [id][tabindex="-1"] { scroll-margin-top: 78px; }
  .cinema-inset { width: 54%; right: 8px; top: 56px; }
}