/* QXter identity. Final shared layer for public and management views.
   Beige is welcoming; gray separates information; navy carries decisions.
   Cinematic scenes retain their own imagery, runtime and white overlays. */
:root {
  --qx-navy:#142e49; --qx-navy-hover:#244968; --qx-beige:#f5f2eb;
  --qx-gray:#eef1f3; --qx-paper:#fff; --qx-text:#344b60;
  --qx-muted:#526677; --qx-line:#d5dde2; --qx-soft:#f8f9fa;
  --surface:var(--qx-beige); --surface-soft:var(--qx-gray);
  --paper:var(--qx-beige); --card:var(--qx-paper); --wash:var(--qx-gray);
  --ink:var(--qx-navy); --indigo:var(--qx-navy); --carbon:var(--qx-navy);
  --muted:var(--qx-muted); --line:var(--qx-line); --line-soft:var(--qx-line);
  --accent:var(--qx-navy); --trade-accent:var(--qx-navy);
  --navy:var(--qx-navy); --blue:#24577d;
  --font-copy:'Inter','Noto Sans TC','PingFang TC','Microsoft JhengHei',sans-serif;
  --font-title:var(--font-copy); --copy:var(--font-copy);
  color-scheme:light;
}
body {font-family:var(--font-copy);color:var(--qx-navy);-webkit-font-smoothing:antialiased}
body[data-page] {background:var(--qx-beige);font-size:17px;line-height:1.85;letter-spacing:.01em}
body[data-page] main {background:var(--qx-beige);color:var(--qx-navy)}
body[data-page] :is(h1,h2,h3,h4) {font-family:var(--font-title);color:var(--qx-navy);font-weight:700;letter-spacing:-.025em;line-height:1.4;text-wrap:balance}
body[data-page]:not([data-page="/"]) :is(h1,.page-heading h1,.department-hero h1,.offering-hero h1,.archive-heading h1) {font-size:clamp(36px,4.2vw,58px);line-height:1.3;font-weight:700;max-width:100%;letter-spacing:-.03em}
body[data-page]:not([data-page="/"]) h2 {font-size:clamp(28px,2.9vw,38px);line-height:1.4;font-weight:700}
body[data-page]:not([data-page="/"]) h3 {font-weight:700;line-height:1.5}
body[data-page] .eyebrow {font-family:var(--font-copy);color:var(--qx-muted)!important;font-size:12px;line-height:1.7;letter-spacing:.12em;font-weight:700}
body[data-page]:not([data-page="/"]) :is(.intro,.page-heading .intro,.department-hero .intro,.offering-hero .intro,.directory-hero .intro,.enrollment-intro .intro) {font-size:18px;line-height:1.9;color:var(--qx-muted);max-width:760px}
body[data-page]:not([data-page="/"]) main>section {padding:72px 48px;max-width:1296px;margin-inline:auto;border-color:var(--qx-line)}
body[data-page] :is(.page-heading,.directory-hero,.offering-hero,.department-hero) {min-width:0}
body[data-page] :is(.section-heading,.studio-section-heading)>* {min-width:0}
/* Headings have actual columns, rather than shrink-to-fit text and a large void. */
body[data-page]:not([data-page="/"]) .section-heading {display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:end;gap:48px;margin-bottom:36px}
body[data-page]:not([data-page="/"]) .section-heading>div {width:100%;max-width:none}
body[data-page]:not([data-page="/"]) .section-heading h2 {max-width:none;margin:12px 0 0;text-wrap:balance}
body[data-page]:not([data-page="/"]) .section-heading>p {width:auto;max-width:440px;justify-self:end;margin:0;font-size:17px;line-height:1.85;color:var(--qx-muted)}
/* Navigation retains all six equal icon positions. */
body[data-page]>header {background:rgba(245,242,235,.98);border-color:var(--qx-line);box-shadow:none}
body[data-page]>header .wordmark {color:var(--qx-navy)}
body[data-page]>header .brand-symbol {filter:hue-rotate(-35deg) saturate(.8)}
body[data-page]>header #nav>a,body[data-page]>header .nav-courses-trigger>a {font-weight:600;color:var(--qx-muted);letter-spacing:.025em}
body[data-page]>header #nav>a[aria-current],body[data-page]>header .nav-courses-trigger>a[aria-current] {color:var(--qx-navy);font-weight:700}
body[data-page]>header #nav>a:after,body[data-page]>header .nav-courses-trigger>a:after {background:var(--qx-navy);height:2px}
body[data-page]>header .header-actions a {border-color:#b8c5ce;min-height:44px;border-radius:10px}
body[data-page]>header .header-actions .utility-primary {background:var(--qx-navy);border-color:var(--qx-navy);color:#fff}
body[data-page]>header .header-actions .utility-icon {width:44px;height:44px;color:var(--qx-navy)}
body[data-page]>header .header-actions .utility-facebook {width:44px;height:44px}
body[data-page]>header .department-menu {background:var(--qx-beige);border-color:var(--qx-line);box-shadow:0 20px 44px #142e4914;border-radius:0 0 18px 18px}
body[data-page]>header .department-menu>p {color:var(--qx-muted);font-size:14px}
body[data-page]>header .department-menu>div>a {background:var(--qx-paper);border-color:var(--qx-line);border-radius:12px}
body[data-page]>header .department-menu>div>a .department-menu-label {font-family:var(--font-copy);font-weight:700;color:var(--qx-navy)}
body[data-page]>header .department-menu>div>a .department-menu-arrow,body[data-page]>header .department-menu .nav-all-courses,body[data-page]>header #courses-toggle {color:var(--qx-navy)}
body[data-page]>header #courses-toggle {width:44px;min-height:44px;height:44px;top:4px;bottom:auto}
body[data-page]>header #courses-toggle,body[data-page]>header #courses-toggle:hover {background:transparent!important}
/* Every action and field follows the same readable, comfortable sizing. */
body[data-page] .button,body.studio-body .button {font-family:var(--font-copy);font-weight:700;letter-spacing:.015em;min-height:48px;border-radius:10px;border-color:#b8c5ce;color:var(--qx-navy);background:#fff;font-size:15px;line-height:1.6}
body[data-page] .button.primary,body.studio-body .button.primary {background:var(--qx-navy);border-color:var(--qx-navy);color:#fff}
body[data-page] .text-link {color:var(--qx-navy);font-family:var(--font-copy);font-weight:600;border-color:#b8c5ce}
body[data-page] :is(input,select,textarea) {font-family:var(--font-copy);font-size:16px;line-height:1.65;background:#fff;color:var(--qx-navy);border-color:#b8c5ce;border-radius:10px;accent-color:var(--qx-navy)}
body[data-page] :is(a,button,input,select,textarea,summary):focus-visible,body.studio-body :is(a,button,input,select,textarea,summary):focus-visible {outline:3px solid #48769b;outline-offset:4px}
body[data-page] :is(.notice,.offering-note,.offering-empty,.archive-notice) {background:var(--qx-gray);color:var(--qx-text);border-color:var(--qx-line);border-left-color:var(--qx-navy)}
/* About: a compact introduction, real people, and three balanced teaching steps. */
body[data-page="/about/"] main>section.about-intro {padding-bottom:40px}
body[data-page="/about/"] .about-intro h1 {max-width:1000px}
body[data-page="/about/"] .about-jump {display:flex;flex-wrap:wrap;gap:10px;margin-top:30px;padding:0;border:0}
body[data-page="/about/"] .about-jump a {min-height:46px;padding:10px 16px;border:1px solid var(--qx-line);border-radius:10px;background:#fff;color:var(--qx-navy);font-size:14px;line-height:1.6;gap:16px}
body[data-page="/about/"] main>section.person-section {grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:64px;align-items:start;padding-top:56px}
body[data-page="/about/"] .person-copy h2 {font-size:42px!important;font-weight:700;line-height:1.4;margin:6px 0 20px}
body[data-page="/about/"] .person-copy h2 small {font-family:var(--font-copy);font-size:18px;color:var(--qx-muted);font-weight:600}
body[data-page="/about/"] .person-copy h2 span {font-size:16px;font-weight:600;letter-spacing:.015em;color:var(--qx-muted);line-height:1.8;max-width:100%}
body[data-page="/about/"] .person-copy>p:not(.eyebrow):not(.person-role) {font-size:17px;line-height:1.95;color:var(--qx-text);max-width:700px}
body[data-page="/about/"] .person-copy .person-statement {font-size:21px!important;line-height:1.7!important;font-weight:700;color:var(--qx-navy)!important;margin:24px 0}
body[data-page="/about/"] .person-portrait {border-radius:18px;box-shadow:none}
body[data-page="/about/"] .person-portrait img {height:auto;aspect-ratio:4/5;object-fit:cover}
body[data-page="/about/"] :is(.person-highlights li,.teacher-specialties li) {background:var(--qx-gray);color:var(--qx-navy);border-color:var(--qx-line)}
body[data-page="/about/"] main>section.about-approach {background:var(--qx-gray);border:1px solid var(--qx-line);border-radius:20px;max-width:1200px;width:calc(100% - 80px);margin:24px auto;padding:48px}
body[data-page="/about/"] .about-approach .section-heading {grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px}
body[data-page="/about/"] .about-approach h2 {font-size:clamp(28px,3vw,38px);line-height:1.5}
body[data-page="/about/"] .about-approach .section-heading>p {justify-self:start}
body[data-page="/about/"] .about-principles {gap:20px;margin-top:36px}
body[data-page="/about/"] .about-principles article {background:#fff;border:1px solid var(--qx-line);border-top:3px solid var(--qx-navy);border-radius:12px;padding:26px;min-width:0}
body[data-page="/about/"] .about-principles article>span {font-family:var(--font-copy);font-size:12px;font-weight:600;color:var(--qx-muted)}
body[data-page="/about/"] .about-principles h3 {font-size:23px;margin:20px 0 14px}
body[data-page="/about/"] .about-principles p {font-size:16px;line-height:1.85;color:var(--qx-muted);margin:0}
body[data-page] :is(.instructor-evidence,.instructor-video) {border-color:var(--qx-line)}
body[data-page] .instructor-evidence h3 {font-weight:700}
/* Course group, class and full curriculum have one card language. */
body[data-page] :is(.department-card,.offering-card,.course-teachers,.level-stage,.offering-cities>div,.offering-summary,.offering-facts,.resource-feature,.archive-card) {border-color:var(--qx-line);border-radius:16px;box-shadow:none}
body[data-page] :is(.department-card,.offering-card,.level-stage,.offering-cities>div,.course-teachers) {background:#fff}
body[data-page] :is(.department-card,.offering-card) {padding:30px}
body[data-page] :is(.department-card h2,.offering-card h3,.teacher-card h3,.teacher-heading h2,.level-stage h3,.resource-feature h2) {font-family:var(--font-copy)!important;font-weight:700!important}
body[data-page] :is(.department-feature-grid article,.level-stage) {border-top-color:var(--qx-navy)}
body[data-page] :is(.level-stage.is-empty,.offering-facts,.offering-hero-note,.offering-callout,.course-videos,.course-schedule-gallery figcaption) {background:var(--qx-gray);border-color:var(--qx-line);color:var(--qx-text)}
body[data-page] :is(.department-level-tags .has-courses,.level-stage strong,.teacher-card h3,.course-video-current h3,.offering-facts h2,.offering-card h3 a) {color:var(--qx-navy)!important}
body[data-page] :is(.department-teacher,.teacher-card p,.teacher-card .teacher-role,.offering-card>p,.level-stage p,.offering-body p,.course-video-current p,.course-video-help,.course-video-caption,.course-video-context) {color:var(--qx-muted)}
body[data-page] .course-video-choice {background:#fff;border-color:var(--qx-line);color:var(--qx-navy)}
body[data-page] .course-video-choice[aria-pressed=true] {background:#e2eaf0;border-color:var(--qx-navy);color:var(--qx-navy)}
body[data-page] .course-video-choice small {color:var(--qx-muted)}
body[data-page] :is(.offering-hero-note strong,.offering-facts dd,.offering-cities h3,.offering-callout h2) {font-family:var(--font-copy);color:var(--qx-navy)!important}
body[data-page] .course-jump {background:var(--qx-beige);border-color:var(--qx-line)}
body[data-page] .directory-hero {grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}
body[data-page] .directory-levels {background:#fff;border-color:var(--qx-line);border-radius:14px}
body[data-page] .directory-levels b {font-family:var(--font-copy);font-size:20px;font-weight:700;color:var(--qx-navy)}
body[data-page] .directory-levels span {color:var(--qx-muted)}
body[data-page="/resources/"] .resource-feature {background:#fff;border-color:var(--qx-line);border-radius:16px;padding:24px}
body[data-page="/resources/"] .resource-feature h2 {font-size:26px!important;line-height:1.5}
body[data-page="/resources/"] .resource-feature .resource-copy>p:last-child {color:var(--qx-muted);line-height:1.85}
body[data-page] :is(.archive-controls,.archive-sidebar,.archive-tags span) {background:var(--qx-gray);color:var(--qx-text);border-color:var(--qx-line)}
body[data-page] :is(.archive-body,.story-body) {font-size:18px;line-height:1.95;color:var(--qx-text)}
/* Enrollment: calm information on the left, a white task surface on the right. */
body[data-page="/registration/"] .enrollment-layout {grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px}
body[data-page="/registration/"] .enrollment-panel {background:#fff;border-color:var(--qx-line);border-radius:18px;box-shadow:none}
body[data-page="/registration/"] :is(fieldset,legend) {border-color:var(--qx-line);color:var(--qx-navy);font-family:var(--font-copy);font-weight:600}
body[data-page="/registration/"] .enrollment-department {background:var(--qx-soft);border-color:var(--qx-line);color:var(--qx-navy);font-family:var(--font-copy)}
body[data-page="/registration/"] .enrollment-department[aria-pressed=true] {background:#e3ebf1;border-color:var(--qx-navy)}
body[data-page] :is(.base-card,.teaching-base-card,.learning-base-panel) {border-color:var(--qx-line);background:#fff}
/* Footer is QXter navy, with readable secondary text and a restrained divider. */
body[data-page]>footer {background:var(--qx-navy);border-color:var(--qx-navy);color:#fff}
body[data-page]>footer :is(a,p) {color:#dce5ed}
body[data-page]>footer .wordmark {color:#fff}
body[data-page]>footer .site-copyright {border-color:#ffffff29;color:#bacad7;font-size:12px}
/* The cinematic cover carries the same brand without altering the film. */
#crane-native .qxc-cover {background:var(--qx-navy)}
#crane-native .qxc-cover-copy>p:first-child {color:#c7d6e2}
#crane-native .qxc-cover h1 span {color:var(--qx-beige)}
#crane-native .qxc-cover-detail,#crane-native .qxc-cover-proof,#crane-native .qxc-cover-scene figcaption {color:#d8e2eb}
#crane-native .qxc-cover-actions .qxc-enter {background:var(--qx-beige);border-color:var(--qx-beige);border-radius:10px;color:var(--qx-navy);font-weight:700}
#crane-native .qxc-cover-image {border-radius:16px}
#crane-native .qxc-cover-trades a span {color:#b9cbd9}
#crane-native .qxc-learning {background:var(--qx-beige);color:var(--qx-navy)}
#crane-native .qxc-learning h2 {color:var(--qx-navy)}
#crane-native .qxc-learning-intro>p:last-child,#crane-native .qxc-learning-note {color:var(--qx-muted);font-size:16px}
#crane-native .qxc-class-grid {background:var(--qx-line);border-color:var(--qx-line);border-radius:16px}
#crane-native .qxc-class-grid>a {background:#fff;color:var(--qx-navy);font-weight:700}
#crane-native .qxc-class-grid>a>span:last-child,#crane-native .qxc-learning-links a {color:var(--qx-navy)}
/* Back office uses the same type and surfaces, with a permanent navy sidebar. */
body.studio-body {font-family:var(--font-copy);background:var(--qx-gray);color:var(--qx-navy)}
body.studio-body :is(h1,h2,h3) {font-weight:700;letter-spacing:-.025em}
body.studio-body .studio-sidebar {background:var(--qx-navy)}
body.studio-body .studio-main {--studio-gutter:44px}
body.studio-body .studio-topbar {background:var(--qx-beige);margin-inline:calc(-1 * var(--studio-gutter));padding-inline:var(--studio-gutter);border-color:var(--qx-line)}
body.studio-body :is(.studio-panel,.studio-stat,.intake-card,.intake-editor,.management-card,.studio-course,.studio-gate) {border-color:var(--qx-line);border-radius:14px;box-shadow:none}
body.studio-body :is(input,select,textarea) {border-color:#b8c5ce;background:#fff;color:var(--qx-navy)}
body.studio-body .studio-section-heading {gap:24px}
@media(hover:hover) and (pointer:fine) {
  body[data-page] .button:hover,body.studio-body .button:hover {background:var(--qx-gray);border-color:var(--qx-navy);filter:none;transform:none}
  body[data-page] .button.primary:hover,body.studio-body .button.primary:hover,body[data-page]>header .header-actions .utility-primary:hover {background:var(--qx-navy-hover);border-color:var(--qx-navy-hover);color:#fff;box-shadow:none}
  body[data-page]>header #nav>a:hover,body[data-page]>header .nav-courses-trigger>a:hover,body[data-page]>header .department-menu>div>a:hover {background:var(--qx-gray);color:var(--qx-navy)}
}
@media(max-width:1100px) {body.studio-body .studio-main {--studio-gutter:28px}}
@media(max-width:1000px) {
  body[data-page="/about/"] main>section.person-section {gap:36px}
  body[data-page="/about/"] main>section.about-approach {margin-inline:32px;width:calc(100% - 64px);padding:36px}
  body[data-page="/about/"] .about-principles {grid-template-columns:1fr;gap:16px}
  body[data-page="/about/"] .about-principles article {padding:26px}
  body[data-page="/registration/"] .enrollment-layout {gap:32px}
}
@media(max-width:900px) {
  body[data-page]>header .menu {color:var(--qx-navy);border-color:#b8c5ce}
  body[data-page]>header #nav {background:var(--qx-beige);border-color:var(--qx-line)}
  body[data-page]>header #nav>a,body[data-page]>header .nav-courses-trigger>a {background:#fff;border-color:var(--qx-line);color:var(--qx-navy)}
  body[data-page]>header .header-actions {border-color:var(--qx-line)}
  body[data-page]>header .department-menu {background:var(--qx-gray);border-color:var(--qx-line)}
  body[data-page]>header #courses-toggle {right:0;top:0;bottom:auto;padding-inline:14px}

}
@media(max-width:760px) {
  body.studio-body .studio-main {--studio-gutter:20px}
  body[data-page]:not([data-page="/"]) main>section {padding:48px 24px}
  body[data-page]:not([data-page="/"]) :is(h1,.page-heading h1,.department-hero h1,.offering-hero h1,.archive-heading h1) {font-size:34px;line-height:1.4;letter-spacing:-.035em}
  body[data-page]:not([data-page="/"]) h2 {font-size:28px;line-height:1.45}
  body[data-page]:not([data-page="/"]) :is(.intro,.page-heading .intro,.department-hero .intro,.offering-hero .intro,.directory-hero .intro,.enrollment-intro .intro) {font-size:17px;line-height:1.9}
  body[data-page]:not([data-page="/"]) .section-heading {grid-template-columns:1fr;gap:20px;margin-bottom:28px}
  body[data-page]:not([data-page="/"]) .section-heading>p {justify-self:start;max-width:none;font-size:16px}
  body[data-page] .eyebrow {font-size:11px;letter-spacing:.08em}
  body[data-page="/about/"] .about-jump {display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:28px}
  body[data-page="/about/"] .about-jump a {width:100%;font-size:13px;justify-content:space-between;gap:6px;padding:10px 12px}
  body[data-page="/about/"] main>section.person-section {grid-template-columns:1fr;gap:28px;padding-top:40px}
  body[data-page="/about/"] .person-portrait {max-width:420px;width:100%;margin-inline:auto}
  body[data-page="/about/"] .person-copy h2 {font-size:34px!important}
  body[data-page="/about/"] .person-copy h2 small {font-size:16px}
  body[data-page="/about/"] .person-copy h2 span {font-size:15px}
  body[data-page="/about/"] .person-copy .person-statement {font-size:20px!important}
  body[data-page="/about/"] main>section.about-approach {margin:12px 16px;width:calc(100% - 32px);padding:28px 20px;border-radius:16px}
  body[data-page="/about/"] .about-approach .section-heading {grid-template-columns:1fr;gap:20px}
  body[data-page="/about/"] .about-approach h2 {font-size:27px}
  body[data-page="/about/"] .about-principles {margin-top:28px}
  body[data-page="/about/"] .about-principles article {padding:24px}
  body[data-page="/about/"] .about-principles h3 {font-size:22px;margin-top:14px}
  body[data-page] :is(.directory-hero,.offering-hero,.enrollment-layout) {grid-template-columns:1fr;gap:28px}
  body[data-page="/registration/"] .enrollment-layout {grid-template-columns:1fr;gap:28px}
  body[data-page] .directory-levels b {font-size:17px}
  body[data-page] :is(.department-card,.offering-card) {padding:26px}
  body[data-page] .button,body.studio-body .button {min-height:48px;font-size:15px}
  body[data-page]>footer .site-copyright {font-size:11px;line-height:1.8}
}