.visual-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  align-items: center;
  gap: clamp(20px, 5vw, 72px);
}

.visual-hero h1 { font-size: clamp(40px, 6.8vw, 92px); }
.visual-hero .lead { max-width: 35rem; }
.visual-hero .visual-card { border: 0; }
.visual-hero .visual-frame { aspect-ratio: 5 / 4; }
.visual-hero .visual-card figcaption { padding-inline: 0; background: var(--bg); }
.visual-hero-action { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin-top: 22px; }
.visual-hero-action strong { padding: .35rem .72rem; border-radius: 6px; background: var(--acc2); color: #151421; }

.visual-programs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 25px);
}

.visual-program {
  display: grid;
  grid-template-rows: auto 1fr;
  border: 1px solid var(--line);
  border-radius: 22px;
  overflow: clip;
  background: var(--card);
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s;
}

.visual-program:hover { border-color: var(--program-color); box-shadow: 0 12px 30px #11132118; }
.visual-program .visual-frame { aspect-ratio: 16 / 9; background: var(--program-soft); }
.visual-program-text { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: clamp(18px, 3vw, 32px); }
.visual-program-text h3 { font-size: clamp(22px, 3.1vw, 38px); }
.visual-program-text p { color: var(--muted); margin: 0 0 4px; }
.visual-program-text small { color: var(--muted); font-family: var(--f-mono); font-size: 12px; }
.visual-program-text strong { color: var(--program-color); margin-top: auto; }

.visual-block { scroll-margin-top: 84px; }
.abs-page .head { grid-template-columns: minmax(0, 1fr); }
.abs-page .head h2 { overflow-wrap: anywhere; }
.visual-block .head { margin-bottom: clamp(18px, 4vw, 38px); }
.visual-block h2 { max-width: 19ch; }
.visual-block .lead { max-width: 67ch; }
.visual-result { background: color-mix(in srgb, var(--soft) 58%, var(--bg)); }
.visual-grid, .staff-grid { display: grid; gap: clamp(12px, 2.2vw, 25px); }
.visual-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.visual-grid.visual-grid-feature { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visual-card, .staff-card {
  margin: 0;
  min-width: 0;
  overflow: clip;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: clamp(12px, 2.2vw, 24px);
}

.visual-frame {
  display: grid;
  width: 100%;
  aspect-ratio: 4 / 3;
  place-items: center;
  overflow: hidden;
  background: var(--soft);
}

.visual-frame img, .staff-frame img { width: 100%; height: 100%; min-height: 0; object-fit: contain; display: block; }
.visual-frame img.visual-cover { object-fit: cover; }
.visual-card figcaption, .staff-copy { display: grid; align-content: start; gap: 6px; padding: clamp(13px, 2.6vw, 24px); }
.visual-card figcaption b, .staff-copy h3 { font-family: var(--f-display); font-size: clamp(15px, 1.65vw, 21px); line-height: 1.28; overflow-wrap: anywhere; }
.visual-card figcaption span, .staff-copy p, .visual-note { font-size: clamp(14px, 1.55vw, 17px); color: var(--muted); margin: 0; }
.visual-card figcaption a { justify-self: start; font-size: 13px; text-underline-offset: 3px; }
.visual-section-action { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; margin-top: 24px; }

.visual-hero-stack { display: grid; gap: 14px; min-width: 0; }
.hero:has(.visual-hero-stack) h1 { font-size: clamp(38px, 5.5vw, 76px); }
.visual-hero-stack .visual-card { border-color: transparent; }
.visual-hero-stack .visual-card figcaption { padding-block: 10px; }
.visual-hero-stack .visual-frame { aspect-ratio: 4 / 3; }
.visual-hero-stack .visual-frame.hero-example { aspect-ratio: 3 / 2; }
.visual-hero-stack .hero-stacked-detail { margin: 0; min-width: 0; }
.visual-hero-stack .hero-stacked-detail summary { cursor: pointer; color: var(--ink); font-weight: 650; padding: 10px 2px; }
.visual-hero-stack .hero-stacked-detail[open] summary { margin-bottom: 10px; }

.staff-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.staff-frame {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 4.5;
  overflow: hidden;
  background: color-mix(in srgb, var(--soft) 80%, var(--card));
}
.staff-frame.staff-monogram {
  background: radial-gradient(circle at 75% 24%, color-mix(in srgb, var(--acc) 26%, transparent), transparent 59%), var(--soft);
  color: var(--ink);
  font-family: var(--f-display);
  font-size: clamp(32px, 5vw, 68px);
}
.staff-frame.staff-monogram span { opacity: .72; }
.staff-copy a { text-underline-offset: 3px; }
.visual-note { margin-top: 18px; }

.visual-example-map { background: var(--card); border: 1px solid var(--line); border-radius: 22px; padding: clamp(16px, 4vw, 30px); }
.visual-example-map h3 { font-size: clamp(20px, 2.7vw, 30px); margin-bottom: 14px; }
.visual-example-map dl { display: grid; gap: 10px; margin: 0; }
.visual-example-map dt { font-weight: 700; }
.visual-example-map dd { margin: 1px 0 0; color: var(--muted); }
.visual-example-map dl > div { padding: 10px 14px; background: var(--soft); border-radius: 10px; }

@media (max-width: 960px) {
  .visual-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .visual-grid, .staff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .visual-hero, .visual-programs, .visual-grid, .visual-grid.visual-grid-feature { grid-template-columns: minmax(0, 1fr); }
  .visual-hero h1 { font-size: clamp(32px, 9.3vw, 44px); }
  .hero:has(.visual-hero-stack) h1 { font-size: clamp(32px, 9vw, 42px); }
  .visual-hero .visual-frame { aspect-ratio: 4 / 3; }
  .visual-card figcaption { gap: 5px; }
  .staff-grid { gap: 10px; }
  .staff-copy { padding: 12px; }
}