/*
 * NESkills Step 101 — global layout and brand foundation
 * Loaded after device/page styles so these canonical tokens and shared shell
 * rules remain the single source of truth across every HTML page.
 */

:root {
  color-scheme: light;

  /* Canonical brand surfaces */
  --surface-hero: #06121c;
  --surface-dark: #06121c;
  --surface-dark-alt: #0a1e2b;
  --surface-paper: #f7f0e5;
  --surface-sand: #efe4d5;
  --surface-proof: #e7d7c2;

  /* Canonical card surfaces */
  --card-dark: #102b3a;
  --card-dark-strong: #123344;
  --card-light: #fffdf8;
  --card-warm: #f9eedf;

  /* Canonical borders */
  --border-dark: #35566b;
  --border-dark-soft: #294756;
  --border-light: #d7c6b1;
  --border-light-strong: #cdb79c;

  /* Canonical accents */
  --orange: #ff6a13;
  --orange-bright: #ff7b25;
  --gold: #ffb53b;
  --teal: #18bfff;
  --emerald: #38d996;
  --mint: #a4f4ce;

  /* Semantic text */
  --text-primary: #20272d;
  --text-secondary: #545b5f;
  --text-inverse: #f7f0e5;
  --text-inverse-muted: #cdd8e0;
  --text-link: #9b350d;

  /* Established semantic names retained for every existing page module */
  --text-on-dark: var(--text-inverse);
  --text-muted-dark: var(--text-inverse-muted);
  --text-on-light: var(--text-primary);
  --text-muted-light: var(--text-secondary);
  --accent-on-light: var(--text-link);

  /* Layout and typography */
  --container-max: 1280px;
  --page-gutter: 24px;
  --section-space: 56px;
  --header-height: 70px;
  --topbar-height: 30px;
  --font-body: "Inter", Arial, sans-serif;
  --font-display: "EB Garamond", Georgia, serif;
  --radius-card: 9px;
  --shadow-elevated: 0 20px 48px rgba(0, 0, 0, 0.24);

  /* Shared production media geometry */
  --image-ratio-hero: 16 / 9;
  --image-ratio-feature: 4 / 3;
  --image-ratio-card: 4 / 3;
  --image-ratio-portrait: 4 / 5;
  --image-ratio-square: 1 / 1;
  --touch-target-min: 44px;

  /* Step 118 — canonical card and type scale */
  --nes-card-radius: 10px;
  --nes-card-gap: 16px;
  --nes-card-padding-block: 24px;
  --nes-card-padding-inline: 22px;
  --nes-card-title-size: 1.38rem;
  --nes-card-body-size: 0.67rem;
  --nes-card-title-leading: 1.05;
  --nes-card-body-leading: 1.58;
  --nes-card-title-lines: 2;
  --nes-card-body-lines: 3;
  --nes-card-title-block: 2.1em;
  --nes-card-body-block: 4.74em;
  --nes-card-focus-height: 228px;
  --nes-card-format-height: 235px;
  --nes-card-spotlight-height: 104px;
  --nes-card-method-height: 104px;
  --nes-card-hub-compact-height: 245px;
  --nes-card-hub-path-height: 230px;
  --nes-card-hub-proof-height: 150px;
  --nes-card-hub-reach-height: 330px;
  --nes-card-shadow-light: 0 14px 32px rgba(50, 37, 27, 0.095), inset 0 1px 0 #fff;
  --nes-card-shadow-dark: 0 14px 30px rgba(0, 0, 0, 0.19), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  --nes-card-stack-top: calc(var(--header-height) + 12px);
  --nes-card-stack-gap: 12px;

  /* Backward-compatible aliases used by established page components */
  --bg: var(--surface-dark);
  --bg2: var(--surface-dark-alt);
  --panel: var(--card-dark);
  --line: var(--border-dark);
  --text: var(--text-inverse);
  --muted: var(--text-inverse-muted);
  --cream: var(--surface-paper);
  --ivory: var(--surface-paper);
  --sand: var(--surface-sand);
  --ink: var(--text-primary);
  --ink-2: var(--surface-dark-alt);
  --plum: var(--surface-dark);
  --plum-2: var(--card-dark);
  --copper: var(--orange-bright);
  --green: var(--emerald);
  --blue: var(--teal);
  --body: var(--font-body);
  --display: var(--font-display);
  --serif: var(--font-display);
  --sans: var(--font-body);
  --shadow: var(--shadow-elevated);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (min-width: 761px) and (max-width: 1120px) {
  :root {
    --container-max: 940px;
    --page-gutter: 17px;
    --section-space: 50px;
    --nes-card-gap: 14px;
    --nes-card-padding-block: 21px;
    --nes-card-padding-inline: 19px;
    --nes-card-title-size: 1.24rem;
    --nes-card-body-size: 0.65rem;
    --nes-card-focus-height: 220px;
    --nes-card-format-height: 228px;
    --nes-card-spotlight-height: 112px;
    --nes-card-method-height: 112px;
    --nes-card-hub-compact-height: 220px;
    --nes-card-hub-path-height: 220px;
    --nes-card-hub-proof-height: 158px;
    --nes-card-hub-reach-height: 286px;
  }
}

@media (max-width: 760px) {
  :root {
    --container-max: 100%;
    --page-gutter: 14px;
    --section-space: 38px;
    --header-height: 62px;
    --topbar-height: 0px;
    --nes-card-gap: 12px;
    --nes-card-padding-block: 16px;
    --nes-card-padding-inline: 14px;
    --nes-card-title-size: 1.06rem;
    --nes-card-body-size: 0.62rem;
    --nes-card-title-leading: 1.05;
    --nes-card-body-leading: 1.52;
    --nes-card-title-block: 2.1em;
    --nes-card-body-block: 4.56em;
    --nes-card-focus-height: 190px;
    --nes-card-format-height: 214px;
    --nes-card-spotlight-height: 140px;
    --nes-card-method-height: 148px;
    --nes-card-hub-compact-height: 190px;
    --nes-card-hub-path-height: 208px;
    --nes-card-hub-proof-height: 160px;
    --nes-card-hub-reach-height: 208px;
  }
}

html {
  min-height: 100%;
  background: var(--surface-dark);
  scroll-padding-top: calc(var(--topbar-height) + var(--header-height) + 16px);
}

body {
  min-width: 0;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface-paper);
  color: var(--text-primary);
  font-family: var(--font-body);
  overflow-x: clip;
}

body > .site-topbar,
body > .site-header,
body > .mobile-menu,
body > .site-footer {
  flex: 0 0 auto;
}

body > .site-topbar.site-topbar {
  top: 0;
  height: 30px;
  background: #02080d;
  border-bottom: 1px solid rgba(255, 181, 59, 0.14);
}

body > .site-header.site-header {
  top: var(--topbar-height);
  width: 100%;
  height: var(--header-height);
  padding-inline: max(var(--page-gutter), calc((100vw - var(--container-max)) / 2));
  background: rgba(3, 13, 20, 0.96);
  border-bottom: 1px solid rgba(24, 191, 255, 0.17);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(16px);
}

body > .mobile-menu.mobile-menu {
  top: calc(var(--topbar-height) + var(--header-height));
}

body > main {
  width: 100%;
  min-width: 0;
  flex: 1 0 auto;
}

body > .site-footer.site-footer-v3 {
  width: 100%;
  margin-top: auto;
  background: #020b11;
  border-top-color: rgba(24, 191, 255, 0.14);
  color: #c7d0d6;
}

body .shell.shell,
body .site-footer-v3 .shell.shell {
  width: min(var(--container-max), calc(100% - var(--page-gutter) - var(--page-gutter))) !important;
  max-width: var(--container-max) !important;
  margin-inline: auto !important;
  padding-inline: 0 !important;
}

body main :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-display);
  text-wrap: balance;
}

body main :is(p, li) {
  text-wrap: pretty;
}

/* Shared image wrapper contract. Page/device styles own the chosen ratio. */
body .card-img-wrap {
  position: relative;
  display: block;
  max-width: 100%;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
}

body .card-img-wrap > picture {
  display: block;
  width: 100%;
  height: 100%;
}

body .card-img-wrap > img,
body .card-img-wrap > picture > img {
  display: block;
  max-width: 100%;
  object-fit: cover;
}

/* Recognition labels are emphatic text, not orphaned level-three headings. */
body .course-proof-copy .course-proof-title {
  display: block;
  margin: 0;
  color: #fff4d6;
  font: 600 16px/1.08 var(--font-display);
  letter-spacing: 0.002em;
  text-wrap: balance;
}

@media (min-width: 761px) and (max-width: 1120px) {
  body .course-proof-copy .course-proof-title {
    font-size: 13px;
    letter-spacing: 0.001em;
  }

  body .institution-carousel-control {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
  }
}

@media (max-width: 760px) {
  body .course-proof-copy .course-proof-title {
    font-size: 12px;
    letter-spacing: 0.001em;
  }
}

body :is(
  .page-section,
  .reach-section,
  .utility-content,
  .creatives-story,
  .creatives-close,
  .insights-featured,
  .insights-library
) {
  padding-block: var(--section-space) !important;
}

body :is(.dark-section, .service-hero, .authority-hero, .method-hero, .insight-hero, .insights-index-hero, .utility-hero, .reach-hero) {
  background-color: var(--surface-hero);
  color: var(--text-inverse);
}

body :is(.light-section, .utility-content, .insights-featured) {
  background-color: var(--surface-paper);
  color: var(--text-primary);
}

body :is(.sand-section, .insights-library) {
  background-color: var(--surface-sand);
  color: var(--text-primary);
}

/* Reach Hub legacy class bridge: the page now shares the canonical dark text system. */
body .rh-main :is(.rh-hero, .rh-feature, .rh-proof, .rh-cta) {
  color: var(--text-inverse);
}

body .rh-main :is(.rh-hero, .rh-feature, .rh-proof, .rh-cta) :is(h1, h2, h3, strong) {
  color: var(--text-inverse);
}

body .rh-main .rh-btn:not(.primary) {
  color: var(--text-inverse);
}

body .rh-main .rh-btn.primary {
  color: var(--surface-dark);
}

body .site-footer-v3 :is(p, a, span) {
  color: #c7d0d6;
}

body .site-footer-v3 :is(h2, h3, h4, strong, summary) {
  color: #ffffff;
}

/* Step 118 — shared card semantics. Device geometry remains in device/card-system.css. */
.nes-card-stack {
  min-width: 0;
}

.nes-card-stack > * {
  min-width: 0;
  box-sizing: border-box;
  border-radius: var(--nes-card-radius);
}

.nes-card-stack :is(h3, p) {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}

.nes-card-stack h3 {
  min-block-size: var(--nes-card-title-block);
  max-block-size: var(--nes-card-title-block);
  font-family: var(--font-display);
  font-size: var(--nes-card-title-size);
  line-height: var(--nes-card-title-leading);
  -webkit-line-clamp: var(--nes-card-title-lines);
  line-clamp: var(--nes-card-title-lines);
}

.nes-card-stack p {
  min-block-size: var(--nes-card-body-block);
  max-block-size: var(--nes-card-body-block);
  font-family: var(--font-body);
  font-size: var(--nes-card-body-size);
  line-height: var(--nes-card-body-leading);
  -webkit-line-clamp: var(--nes-card-body-lines);
  line-clamp: var(--nes-card-body-lines);
}

.skip-link {
  position: fixed;
  z-index: 1000;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  border: 2px solid var(--orange, #ff6a13);
  border-radius: 6px;
  background: #fffdf8;
  color: #06121c;
  font: 800 0.78rem/1.2 var(--font-body, Inter, system-ui, sans-serif);
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.18s ease;
}

.skip-link:focus {
  transform: translateY(0);
}

@media (max-width: 760px) {
  body > .site-topbar.site-topbar {
    display: none;
  }

  body > .site-header.site-header {
    top: 0;
    padding-inline: var(--page-gutter);
  }

  body > .mobile-menu.mobile-menu {
    top: var(--header-height);
  }
}