/* Dedicated portrait composition. No rules in this file apply above 768px. */
@media (max-width: 768px) {
  :root { --section-heading-size: clamp(40px, 8vw, 58px); --section-body-size: 18px; }
  .hero-header { position: relative; inset: auto; margin: 0; padding: 22px 22px 12px; flex-direction: column; align-items: flex-start; gap: 12px; background: #eee0c8; }
  .hero-header .brand { font-size: 26px; }
  .hero-header nav { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 0; }
  .hero-header nav a, .hero-header nav a:not(:last-child), .hero-header nav a:nth-child(2) { display: inline-flex; font-size: 13px; padding: 0; min-height: 44px; letter-spacing: .5px; }
  .scene-hero { display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none; padding: 28px 22px 0; background: #eee0c8; }
  .scene-copy { width: 100%; max-width: none; padding: 0; margin: 0; }
  .scene-copy h1 { font-size: clamp(64px, 12vw, 88px); line-height: .98; margin-bottom: 26px; }
  .scene-description { max-width: 36ch; font-size: 18px; line-height: 1.5; }
  .course-label { font-size: 12px; }
  .scene-button { min-height: 48px; font-size: 11px; }
  .hero-art { position: relative; inset: auto; order: 2; width: calc(100% + 44px); max-width: none; height: auto; margin: 26px -22px 0; object-fit: contain; z-index: 0; }
  .scene-scroll { position: static; order: 3; padding: 22px 0; font-size: 10px; }
  .science-strip { padding: 32px 22px; }
  .science-strip > h2 { display: block; font-size: 12px; line-height: 1.6; letter-spacing: 1.3px; margin-bottom: 20px; }
  .science-strip > h2::after { display: none; }
  .science-items { grid-template-columns: 1fr; gap: 0; }
  .science-strip .science-items article, .science-strip .science-items article:first-child { grid-template-columns: 70px minmax(0, 1fr); gap: 18px; padding: 22px 0; border-right: 0; border-bottom: 1px solid rgba(197,197,191,.22); }
  .science-strip .science-items article:last-child { border-bottom: 0; padding-bottom: 0; }
  .science-strip .science-icon { width: 70px; height: 65px; transform: none; }
  .science-strip .science-items h3 { font-size: 14px; }
  .science-strip .science-items p { font-size: 17px; line-height: 1.5; }
  .agency-section { display: flex; flex-direction: column; align-items: stretch; gap: 28px; padding: 52px 22px 28px; }
  .agency-label { display: none; }
  .agency-section h2, .ways-section h2 { white-space: normal; }
  .agency-body { max-width: none; }
  .agency-body p { margin-bottom: 20px; }
  .agency-link { font-size: 11px; letter-spacing: 1.5px; min-height: 44px; max-width: 100%; }
  .agency-illustration { margin: 0 -22px; }
  .agency-illustration img { width: 100%; height: auto; }
  .ways-section { display: flex; flex-direction: column; align-items: stretch; aspect-ratio: auto; min-height: 0; height: auto; padding: 52px 22px 0; gap: 28px; }
  .ways-copy { width: 100%; }
  .ways-copy p { max-width: none; }
  .ways-art { position: relative; inset: auto; margin: 0 -22px; }
  .ways-art img { width: 100%; height: auto; margin: 0; object-fit: contain; }
  .mastery-story { background-size: cover; }
  .mastery-story-stage, .mastery-story-stage:has(.mastery-story-vignette) { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 48px 22px 24px; gap: 24px; }
  .mastery-story-copy { width: 100%; }
  main > section#mastery-story h2 { font-size: 14px; letter-spacing: .2em; }
  .mastery-story-passage { font-size: 19px; line-height: 1.45; }
  .mastery-story-line { padding: 9px 0; min-height: 44px; }
  .mastery-story-art, .mastery-story-art:has(:is([data-story-image="8"],[data-story-image="9"],[data-story-image="10"]).is-active) { position: relative; inset: auto; height: auto; aspect-ratio: 4/3; width: 100%; }
  #mastery-story .mastery-story-art .mastery-story-vignette { left: 50%; top: 50%; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; transform: translate(-50%, -50%); }
  #el { container-type: normal; height: auto; min-height: 0; padding: 0; background: #f0ddbf; }
  #el .founder-background { position: relative; display: block; width: 100%; height: auto; }
  #el .founder-editorial { position: relative; inset: auto; transform: none; display: flex; flex-direction: column; gap: 26px; width: 100%; margin: 0; padding: 36px 22px 48px; }
  #el h2 { font-size: var(--section-heading-size); margin: 0; }
  #el p { font-size: 18px; line-height: 1.5; margin-bottom: 22px; }
  #el .founder-intro, #el .founder-continuation { width: 100%; padding: 0; margin: 0; align-self: stretch; }
  #el .founder-photo { float: none; width: min(100%, 340px); margin: 0 auto 28px; }
  #el .founder-photo img { width: 100%; height: auto; }
  #program { padding: 52px 0 40px; }
  #program .program-introduction { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 0 22px 30px; }
  #program h2 { margin-bottom: 22px; }
  #program .program-promise { font-size: 26px; line-height: 1.25; }
  #program .program-description { font-size: 18px; line-height: 1.5; }
  /* The full panorama remains intact inside an explicitly swipeable strip. */
  #program .program-photo-scroll { width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
  #program .program-photo-strip { width: auto; max-width: none; height: 230px; display: block; }
  #program .program-photo-scroll:focus-visible { outline: 2px solid #977142; outline-offset: -2px; }
  #program .program-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 0 22px; margin-top: 24px; }
  #program .program-fact { font-size: 18px; padding: 22px 8px; min-height: 0; gap: 14px; }
  #program .program-fact:last-child { grid-column: 1/-1; }
  #program .program-enquire { margin: 24px 22px 0; min-height: 44px; }
  #contact { min-height: 0; height: auto; padding: 52px 22px 24px; --section-heading-size: clamp(40px, 8vw, 58px); }
  #contact .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  #contact .contact-grid > div { padding: 0; }
  #contact h2 { margin-bottom: 24px; }
  #contact label { font-size: 17px; margin-bottom: 26px; }
  #contact input, #contact select, #contact textarea { font-size: 18px; min-height: 48px; }
  #contact textarea { height: auto; min-height: 110px; }
  #contact .contact-back-top { margin-top: 28px; min-height: 44px; padding: 12px 0; }
}