@import url('./season-layout.css');

:root { --line: #e8e1d9; --season-accent: #9b6848; --season-lead: #7c6858; --season-bg: #19251f; --season-dot: var(--season-accent); }
::selection { background: #c5edf0; }

:focus-visible { outline-color: #007d89; }
.eyebrow, .chapter, .location, .sound-volume, .scene-status, .concept-note span,
.season-work .wildlife-launchers > p { font-size: 10px; }
.header-note { font-size: 11px; }
.credits { font-size: 11px; }
footer { font-size: 10px; flex-wrap: wrap; gap: 8px 16px; }
.season-frame > figcaption { flex-wrap: wrap; gap: 4px 16px; font-size: 10px; line-height: 1.8; background: linear-gradient(transparent, rgb(5 23 28 / .76) 50%); }
@media (min-width: 701px) {
  .autumn-work { height: auto; min-height: clamp(720px, calc(100svh - var(--site-header-height) - 3px), 1120px); max-height: none; }
}

.autumn-nojs-fallback { position: absolute; inset: 0; z-index: 0; display: grid; place-content: center; margin: 0; padding: 24px; color: #fff; background: var(--season-bg); font-size: 12px; line-height: 2; text-align: center; }
#image-fallback { background: var(--season-bg); }

.water-canvas { z-index: 2; pointer-events: none; }
.vegetation-canvas { z-index: 3; pointer-events: none; }
.silent-label { font-size: 10px; color: #697387; padding-left: 14px; border-left: 1px solid var(--line); }
.no-script { font-size: 11px; line-height: 1.8; }
.text-link { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; font-size: 11px; }
.text-link span { color: var(--cyan); }
.credits p { margin: 0 0 12px; }

.work-links { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-top: 24px; }
.work-links a { display: inline-flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; padding: 6px 0; border-bottom: 1px solid #a3b0be; font-size: 11px; text-decoration: none; }
.work-links a:hover { border-bottom-color: var(--cyan); color: #007d89; }
.concept-button { display: inline-flex; align-items: center; gap: 4px; border: 0; border-bottom: 1px solid transparent; background: transparent; min-height: 44px; padding: 0; font-size: 11px; white-space: nowrap; }
.concept-button span { color: var(--cyan); }
.concept-button:hover { border-bottom-color: var(--cyan); }

.concept-dialog { width: min(1120px, calc(100% - 48px)); max-height: calc(100svh - 48px); padding: 28px 36px 24px; border: 0; color: var(--navy); background: white; }
.concept-dialog::backdrop { background: rgb(16 24 39 / .68); }
.dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.dialog-header .eyebrow { margin: 0; }
.dialog-close { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 8px 0 8px 18px; border: 0; background: transparent; font-size: 12px; }
.dialog-close span { font-size: 23px; }
.concept-dialog .dialog-close { flex: 0 0 auto; white-space: nowrap; }
.concept-dialog h2 { margin: 14px 0; }
#concept-description { font-size: 12px; line-height: 2; margin: 0 0 24px; max-width: 740px; }
.concept-image { display: block; width: 100%; height: auto; background: #f3f5f5; }
.concept-credit, .concept-error { font-size: 10px; line-height: 1.9; margin: 16px 0 0; }
body:has(dialog[open]) { overflow: hidden; }

@media (max-width: 700px) {
  .autumn-frame > figcaption { padding-bottom: 4px; }
  .concept-dialog { width: calc(100% - 24px); max-height: calc(100svh - 24px); padding: 16px 20px 24px; }
  .dialog-header .eyebrow { font-size: 10px; letter-spacing: .08em; }
  .concept-dialog h2 { font-size: 23px; }
  #concept-description { font-size: 11px; margin-bottom: 18px; }
}