/* Approved V3: stationery photography, silver canvas and softly raised surfaces.
   Homepage only. Existing destinations, admissions pages and game themes are unchanged. */
body.portal-page.graphite-home {
  --klein:#39516a;
  --portal-paper:#f2f3f5;
  --portal-ink:#273545;
  --portal-muted:#526174;
  --portal-line:#cbd3dc;
  --ux-accent:#39516a;
  --ux-ink:#273545;
  --ux-muted:#526174;
  --ux-paper:#f2f3f5;
  --home-card-shadow:0 7px 24px rgb(30 41 54 / 5%);
  --ui-control-radius:12px;
  --ui-card-radius:16px;
  --ui-card-shadow:var(--home-card-shadow);
  color:var(--portal-ink);
  background:var(--portal-paper);
}
.graphite-home .portal-brand { color:var(--portal-ink); }
.graphite-home .portal-header nav a { border-radius:10px; }
.graphite-home .portal-header nav a:hover { color:#243b54; text-decoration:underline; text-underline-offset:6px; }
.portal-page.graphite-home .portal-hero {
  display:block;
  position:relative;
  isolation:isolate;
  min-height:360px;
  overflow:hidden;
  border:0;
  border-radius:16px;
  background:#363e48;
  color:#f7f9fb;
  --ui-card-shadow:0 14px 34px rgb(27 34 44 / 12%);
  box-shadow:0 14px 34px rgb(27 34 44 / 12%);
}
.graphite-home .portal-hero-photo { position:absolute; inset:0; z-index:-2; pointer-events:none; }
.graphite-home .portal-hero-photo img { width:100%; height:100%; display:block; object-fit:cover; object-position:center; }
.graphite-home .portal-hero::after {
  content:'';
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:linear-gradient(90deg,rgb(33 41 50 / 44%) 0%,rgb(33 41 50 / 28%) 40%,transparent 65%);
}
.graphite-home .portal-hero-copy { max-width:540px; }
.portal-page.graphite-home .portal-hero h1 { color:#f7f9fb; }
.graphite-home .portal-hero-copy>p:not(.portal-eyebrow) { color:#e5ebf0; }
.graphite-home .portal-primary {
  position:relative;
  border:0;
  border-radius:12px;
  color:#2e4359;
  background:#f8fafc;
  box-shadow:0 3px 9px rgb(10 18 28 / 12%);
  transition:background-color 160ms ease-out,box-shadow 160ms ease-out;
}
.graphite-home .portal-primary:hover { background:#fff; box-shadow:0 5px 14px rgb(10 18 28 / 18%); }
.portal-page.graphite-home .portal-paths { gap:24px; }
.portal-page.graphite-home .portal-path {
  border:0;
  border-radius:16px;
  background:#fff;
  box-shadow:var(--home-card-shadow);
}
.portal-page.graphite-home .learning-path { background:#e7ebef; }
.graphite-home .portal-path-label { color:#3e5871; }
.graphite-home .portal-path h2 { color:#273545; }
.graphite-home .portal-path>p { color:var(--portal-muted); }
.graphite-home .portal-link-list a { border-radius:0; }
.portal-page.graphite-home .portal-link-list a:hover { background:#edf1f5; color:#253f5a; }
.portal-page.graphite-home .portal-learning-link {
  border:0;
  border-radius:12px;
  color:#f8fafc;
  background:#39516a;
  box-shadow:0 3px 8px rgb(30 41 54 / 9%);
  transition:background-color 160ms ease-out,box-shadow 160ms ease-out;
}
.graphite-home .portal-learning-link:hover { background:#2d435b; box-shadow:0 5px 12px rgb(30 41 54 / 13%); }
.graphite-home .portal-notice,.graphite-home .portal-footer,.graphite-home .portal-footer a { color:var(--portal-muted); }
.graphite-home .portal-footer a:hover { color:#253f5a; text-decoration:underline; text-underline-offset:4px; }
.portal-page.graphite-home a:focus-visible { outline:3px solid #627d99; outline-offset:4px; }
.portal-page.graphite-home .portal-primary:focus-visible { outline-color:#c4d5e5; }
@media(max-width:760px) {
  .portal-page.graphite-home .portal-hero { min-height:510px; padding:28px 26px 218px; }
  .graphite-home .portal-hero-copy { max-width:none; }
  .graphite-home .portal-hero-photo { inset:auto 0 0; height:220px; }
  .graphite-home .portal-hero-photo img { object-position:right center; }
  .graphite-home .portal-hero::after { background:linear-gradient(180deg,#363e48 0%,#363e48 54%,transparent 80%); }
  .portal-page.graphite-home .portal-hero h1 { font-size:clamp(28px,7.7vw,40px); }
  .graphite-home .portal-hero-copy>p:not(.portal-eyebrow) { font-size:15px; }
  .portal-page.graphite-home .portal-path { padding:24px; }
}
@media(max-width:360px) {
  .portal-page.graphite-home .portal-hero { padding-inline:22px; }
  .portal-page.graphite-home .portal-path { padding:20px; }
}
@media(prefers-reduced-motion:reduce) {
  .portal-page.graphite-home :is(a,button) { transition:none; }
}