:root {
  --background: #f7f8fa;
  --foreground: #273039;
  --primary: #345982;
  --primary-foreground: #ffffff;
  --secondary: #e9edf2;
  --secondary-foreground: #273039;
  --muted: #f0f2f4;
  --muted-foreground: #5d6872;
  --border: #cbd2d9;
  --input: #cbd2d9;
  --ring: #345982;
  --cream: #ffffff;
  --sakura: #e9edf2;
  --gold: #829bb4;
  --ink: #273039;
  --red: #345982;
}
.site-stage {
  background: linear-gradient(#dce2e855 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, #dce2e855 1px, transparent 1px) 0 0 / 56px 56px,
    #f7f8fa;
}
.swipe-deck { background: #fff; box-shadow: 0 0 48px #24344515; }
.falling-sakura { display: none; }
.panel:not(.opening-panel) { background: #fff; color: #273039; }
.panel:not(.opening-panel)::before,
.panel:not(.opening-panel)::after { filter: grayscale(1); }
.panel:not(.opening-panel) .section-blossom,
.panel:not(.opening-panel) .hero-blossom { display: none; }
.paper-panel { background: #fff !important; }
.question-panel,
.work-panel,
.together-panel,
.craft-panel,
.perspectives-panel,
.works-panel,
.future-panel,
.requirements-panel,
.entry-panel { background: #fff !important; color: #273039 !important; }
.panel h1, .panel h2, .panel h3 { color: #273039; }
.panel em { color: #345982 !important; }
.panel-counter, .deck-controls button, .diamond-menu { color: #273039; }
.diamond-menu { background: #fff; border: 1px solid #d6dce2; }
.site-menu { background: #fff; color: #273039; }
.site-menu button { color: #273039; }
.site-menu button:hover { background: #edf1f5; }
.panel-watermark, .section-watermark { color: #e3e8ed !important; }
.perspectives-copy, .perspectives-copy p { color: #273039 !important; }
.perspectives-answer { background: #e9eef3 !important; color: #273039 !important; }
.perspectives-answer em { color: #345982 !important; }
.entry-panel::before, .requirements-panel::before { opacity: .1; }
.entry-panel .entry-inner, .requirements-panel .requirements-inner { position: relative; }
.requirements-list { background: #f7f9fb !important; border-color: #b7c4d0 !important; }
.requirements-list dt { color: #345982 !important; }
.requirements-list dd, .requirements-list dd small { color: #273039 !important; }
.requirements-list > div { border-color: #d6dfe7 !important; }
.requirements-cta { background: #345982 !important; color: #fff !important; }
.entry-form input, .entry-form textarea, .entry-select { background: #fff !important; color: #273039 !important; border-color: #d6dce2 !important; }
.entry-source-options { position: absolute; z-index: 20; left: 0; right: 0; top: 100%; padding: 6px; background: #fff; border: 1px solid #d6dce2; box-shadow: 0 12px 24px #27303922; }
.field-row:has(#source) { position: relative; }
.entry-source-options[hidden] { display: none; }
.entry-source-options button { display: block; width: 100%; padding: 8px 12px; border: 0; background: transparent; color: #273039; text-align: left; cursor: pointer; }
.entry-source-options button:hover, .entry-source-options button:focus-visible { background: #edf1f5; }

/* Let photos and spacing shrink before the job descriptions. */
.work-panel .panel-inner {
  height: 100%;
  min-height: 0;
  padding-top: clamp(64px, 10svh, 105px);
  padding-bottom: clamp(12px, 4svh, 40px);
}
.work-panel h2 { font-size: clamp(24px, 5.3svh, 44px); }
.work-panel .role-details {
  flex: 1;
  min-height: 0;
  grid-template-rows: minmax(0, .9fr) minmax(0, 1.1fr);
}
.work-panel .role-detail {
  min-height: 0;
  grid-template-rows: minmax(0, 1fr) auto auto;
}
.work-panel .role-visual { min-height: 0; }
.work-panel .role-visual img { position: absolute; inset: 0; }
.work-panel .role-detail-dark .role-en,
.work-panel .role-detail-dark h3,
.work-panel .role-detail-dark h3 small { color: #fff; }
@media (min-width: 421px) and (min-height: 500px) {
  .work-panel .panel-inner { padding-bottom: 100px; }
}
@media (min-width: 421px) and (max-height: 499px) {
  .work-panel .role-detail:last-child .role-copy { padding-right: 40px; }
}