/* Liquid-glass material layer. Brand colors, text contrast and button spacing
   remain defined in brand.css; these surfaces add optical depth. */
:root {
  --liquid-face:linear-gradient(135deg,#FFFFFFE0 0%,#FFFFFFA8 48%,#FFFFFFD1 100%);
  --liquid-blur:18px;
  --liquid-depth:inset 0 1px 1px #FFFFFF,inset 1px 0 0 #FFFFFF99,inset 0 -1px 1px #2D34360A,0 12px 32px #2D34360D,0 1px 2px #2D343614;
}
body[data-page="home"] {
  background:radial-gradient(ellipse 570px 620px at 100% 16%,#FFD5CD66,transparent 74%),radial-gradient(ellipse 450px 600px at 0% 52%,#FFF5F3,transparent 78%),#FFFFFF;
}
body[data-page="career"] {
  background:radial-gradient(ellipse 520px 620px at 100% 6%,#FFF5F3,transparent 78%),radial-gradient(ellipse 420px 680px at 0% 52%,#FFD5CD33,transparent 78%),#FFFFFF;
}
body[data-page="creator"] {
  background:radial-gradient(ellipse 660px 620px at 100% 12%,#FFD5CD73,transparent 76%),radial-gradient(ellipse 460px 600px at 0% 56%,#FFF5F3,transparent 78%),#FFFFFF;
}
/* A brighter upper rim and a darker lower rim give glass visible thickness. */
.site-header,body[data-page="creator"] .site-header {
  background:linear-gradient(118deg,#FFFFFFED,#FFFFFFC7 46%,#FFFFFFE6);
  border-color:#FFFFFFF2;
  backdrop-filter:blur(28px) saturate(1.6); -webkit-backdrop-filter:blur(28px) saturate(1.6);
  box-shadow:inset 0 1px 2px #FFFFFF,inset 1px 0 0 #FFFFFFB8,inset 0 -1px 1px #2D343614,0 14px 36px #2D343614,0 0 0 1px #2D343609;
}
.page-nav {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:3px;
  border:1px solid #FFFFFFB8; border-radius:28px;
  background:linear-gradient(135deg,#2D34360A,#FFFFFF70);
  box-shadow:inset 0 1px 2px #2D343609,inset 0 -1px 0 #FFFFFF99;
}
.page-nav a { padding-inline:18px; }
.page-nav a:active { opacity:.72; }
.nav-pill {
  background:linear-gradient(135deg,#FFFFFFF2,#FFFFFFA8);
  border-color:#FFFFFFD9;
  box-shadow:inset 0 1px 2px #FFFFFF,inset 0 -1px 1px #2D34360D,0 2px 7px #2D34361A;
  backdrop-filter:blur(12px) saturate(1.5); -webkit-backdrop-filter:blur(12px) saturate(1.5);
}
.site-header .header-contact,body[data-page="creator"] .header-contact,
.site-header .icon-button {
  background:linear-gradient(130deg,#FFFFFFD1,#FFFFFF70);
  border:1px solid #FFFFFFF2;
  box-shadow:inset 0 1px 1px #FFFFFF,inset 0 -1px 1px #2D34360D,0 4px 12px #2D343608;
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
/* Keep functional labels monochromatic over light glass. */
.latest-copy .text-link,.collaboration-note .text-link { color:var(--deep-slate); }
/* Clear glass for secondary actions; smoked glass for primary actions. */
.secondary,.copy-button,body[data-page="creator"] .secondary,body[data-page="creator"] .copy-button {
  background:var(--liquid-face); border-color:#FFFFFFF2;
  box-shadow:var(--liquid-depth);
  backdrop-filter:blur(var(--liquid-blur)) saturate(1.5); -webkit-backdrop-filter:blur(var(--liquid-blur)) saturate(1.5);
}
.secondary:hover,.copy-button:hover {
  background:linear-gradient(135deg,#FFFFFFF2,#FFFFFFB8); border-color:#FFFFFF;
  box-shadow:inset 0 1px 2px #FFFFFF,inset 0 -1px 1px #2D34360D,0 14px 30px #2D34361A;
}
.button.primary,body[data-page="creator"] .button.primary {
  background:linear-gradient(135deg,#2D3436F2,#2D3436E6 48%,#2D3436D9);
  border-color:#FFFFFF47;
  box-shadow:inset 0 1px 1px #FFFFFF59,inset 1px 0 0 #FFFFFF1F,inset 0 -1px 1px #2D343666,0 10px 24px #2D343626;
  backdrop-filter:blur(var(--liquid-blur)) saturate(1.4); -webkit-backdrop-filter:blur(var(--liquid-blur)) saturate(1.4);
}
.button.primary:hover {
  background:linear-gradient(135deg,#2D3436FA,#2D3436E6);
  box-shadow:inset 0 1px 2px #FFFFFF70,inset 0 -1px 1px #2D343666,0 14px 30px #2D343633;
}
.brand-icon-disc {
  box-shadow:inset 0 1px 1px #FFFFFF,0 1px 4px #2D343612;
  border-color:#FFFFFFCC;
}
/* Photograph frames and floating objects retain their authentic imagery. */
.portrait-halo { opacity:.55; }
.portrait-frame,.career-avatar,.mini-profile,.hometown-film,.portrait-caption,
.clay-code,.clay-play,.clay-mini-play,.soft-play,body[data-page="creator"] .soft-play,
.round-arrow,.company-monogram,.capability-icon {
  background:var(--liquid-face); border:1px solid #FFFFFFF2;
  box-shadow:var(--liquid-depth);
  backdrop-filter:blur(var(--liquid-blur)) saturate(1.45); -webkit-backdrop-filter:blur(var(--liquid-blur)) saturate(1.45);
}
.portrait-frame,.career-avatar,.hometown-film {
  box-shadow:inset 0 1px 2px #FFFFFF,inset 0 -1px 1px #2D34360D,0 20px 48px #2D343614,0 1px 2px #2D343614;
}
/* Content glass has a milky face so supporting copy stays easy to read. */
.route-card,.experience-card,.capability-card,.outcome-list details,.career-creator-note,
.creator-feature,body[data-page="creator"] .creator-feature,.latest-player-card,.video-card {
  background:linear-gradient(135deg,#FFFFFFED,#FFFFFFC2 50%,#FFFFFFDE);
  border-color:#FFFFFFF2; box-shadow:var(--liquid-depth);
  backdrop-filter:blur(var(--liquid-blur)) saturate(1.25); -webkit-backdrop-filter:blur(var(--liquid-blur)) saturate(1.25);
}
.career-route { border-top-color:#2D3436CC; }
.creator-route { border-top-color:var(--vibrant-coral); }
.outcome-list details[data-expanded="true"] {
  background:linear-gradient(130deg,#FFFFFFF5,#FFFFFFD9); border-color:#FFFFFF;
  box-shadow:inset 3px 0 0 var(--vibrant-coral),var(--liquid-depth);
}
.career-sections,.personal-tags span,.mini-profile-line span,
body[data-page="creator"] .video-filter button,.footer-social a {
  background:var(--liquid-face); border-color:#FFFFFFF2;
  box-shadow:inset 0 1px 1px #FFFFFF,inset 0 -1px 1px #2D34360D,0 5px 16px #2D343609;
  backdrop-filter:blur(12px) saturate(1.35); -webkit-backdrop-filter:blur(12px) saturate(1.35);
}
body[data-page="creator"] .video-filter button[aria-checked="true"] {
  background:linear-gradient(135deg,#2D3436F2,#2D3436D9); border-color:#FFFFFF47;
  box-shadow:inset 0 1px 1px #FFFFFF40,inset 0 -3px 0 var(--vibrant-coral),0 5px 15px #2D343614;
}
.feature-play,.video-play {
  background:linear-gradient(135deg,#FFFFFFF2,#FFFFFFB8); border-color:#FFFFFF;
  box-shadow:var(--liquid-depth);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
}
/* Dark sections use the same optical edges and depth, with white text. */
body[data-page="career"] .career-facts,.creator-community,body[data-page="creator"] .creator-community {
  background:linear-gradient(125deg,#2D3436FA,#2D3436E6 55%,#2D3436D9);
  border-color:#FFFFFF59;
  box-shadow:inset 0 1px 1px #FFFFFF4D,inset 1px 0 0 #FFFFFF21,inset 0 -1px 1px #2D343666,0 18px 40px #2D34361F;
  backdrop-filter:blur(var(--liquid-blur)) saturate(1.4); -webkit-backdrop-filter:blur(var(--liquid-blur)) saturate(1.4);
}
.creator-community,body[data-page="creator"] .creator-community { border-top-color:var(--vibrant-coral); }
.creator-community .button.primary,body[data-page="creator"] .creator-community .button.primary {
  background:linear-gradient(135deg,#FFFFFFFA,#FFFFFFDE); color:var(--deep-slate); border-color:#FFFFFF;
  box-shadow:inset 0 1px 2px #FFFFFF,inset 0 -1px 1px #2D343621,0 8px 22px #2D343633;
}
.creator-community .button.secondary {
  background:linear-gradient(135deg,#FFFFFF21,#FFFFFF0D); color:var(--studio-white); border-color:#FFFFFF59;
  box-shadow:inset 0 1px 1px #FFFFFF40,inset 0 -1px 1px #2D343633,0 8px 20px #2D34361F;
}
/* HIG-inspired segmented topic selection: equal widths and one selected thumb. */
.video-filter {
  --filter-index:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr));
  position:relative; isolation:isolate; gap:0; padding:4px; width:min(100%,500px);
  border:1px solid #FFFFFFD9; border-radius:25px;
  background:linear-gradient(135deg,#2D34360D,#FFFFFF73);
  box-shadow:inset 0 1px 2px #2D34360C,inset 0 -1px 0 #FFFFFFB8,0 5px 18px #2D343608;
  backdrop-filter:blur(16px) saturate(1.4); -webkit-backdrop-filter:blur(16px) saturate(1.4);
}
.video-filter::before {
  content:""; box-sizing:border-box; position:absolute; top:4px; bottom:4px; left:4px;
  width:calc((100% - 8px)/4); border:1px solid #FFFFFFF2; border-radius:20px;
  background:linear-gradient(135deg,#FFFFFFFA,#FFFFFFB8);
  box-shadow:inset 0 1px 1px #FFFFFF,inset 0 -1px 1px #2D34360D,0 2px 7px #2D34361F;
  transform:translateX(calc(var(--filter-index) * 100%)); pointer-events:none; z-index:0;
  transition:transform .24s cubic-bezier(.2,.8,.2,1);
}
body[data-page="creator"] .video-filter button,
body[data-page="creator"] .video-filter button:hover,
body[data-page="creator"] .video-filter button[aria-checked="true"] {
  position:relative; z-index:1; min-width:0; min-height:44px; padding:0 10px;
  border:0; border-radius:20px; color:var(--deep-slate); background:transparent;
  box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none;
  font-size:12px; line-height:1.25; font-weight:500; white-space:nowrap;
  transform:none; transition:opacity .12s ease;
}
body[data-page="creator"] .video-filter button[aria-checked="true"] { color:var(--deep-slate); }
body[data-page="creator"] .video-filter button:active { opacity:.65; }
body[data-page="creator"] .video-filter button:focus-visible { outline:2px solid var(--deep-slate); outline-offset:-3px; }
.button:active { transform:scale(.975); }
@media(max-width:620px) {
  :root { --liquid-blur:12px; }
  .page-nav a { padding-inline:12px; }
  body[data-page="creator"] .video-filter button { padding-inline:4px; }
}
@media(max-width:380px) { .page-nav a { padding-inline:10px; } }
@media(prefers-reduced-motion:reduce) { .video-filter::before { transition:none; } }
html[data-motion="off"] .video-filter::before { transition:none; }

/* Respect accessibility preferences and browsers without backdrop filtering. */
@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
  .site-header,body[data-page="creator"] .site-header,.site-header .header-contact,.site-header .icon-button,
  .secondary,.copy-button,body[data-page="creator"] .secondary,body[data-page="creator"] .copy-button,
  .portrait-frame,.career-avatar,.mini-profile,.hometown-film,.portrait-caption,
  .clay-code,.clay-play,.clay-mini-play,.soft-play,body[data-page="creator"] .soft-play,
  .round-arrow,.company-monogram,.capability-icon,.route-card,.experience-card,.capability-card,
  .outcome-list details,.outcome-list details[data-expanded="true"],.career-creator-note,
  .creator-feature,body[data-page="creator"] .creator-feature,.latest-player-card,.video-card,
  .career-sections,.personal-tags span,.mini-profile-line span,body[data-page="creator"] .video-filter button,.footer-social a {
    background:var(--studio-white); backdrop-filter:none; -webkit-backdrop-filter:none;
    border-color:#2D343647; box-shadow:none;
  }
  .button.primary,body[data-page="creator"] .button.primary,
  body[data-page="career"] .career-facts,.creator-community,body[data-page="creator"] .creator-community,
  body[data-page="creator"] .video-filter button[aria-checked="true"] {
    background:var(--deep-slate); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none;
  }
  .creator-community .button.primary,body[data-page="creator"] .creator-community .button.primary { background:var(--studio-white); }
  .creator-community .button.secondary { background:var(--deep-slate); border-color:#FFFFFFB8; }
  .nav-pill { background:var(--soft-peach); backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
  .page-nav,.video-filter { background:var(--softer-peach); border-color:#2D343647; backdrop-filter:none; -webkit-backdrop-filter:none; }
  .video-filter::before { background:var(--studio-white); border-color:var(--deep-slate); box-shadow:none; }
  body[data-page="creator"] .video-filter button[aria-checked="true"] { background:transparent; }
}
@supports not (backdrop-filter:blur(1px)) {
  .site-header,body[data-page="creator"] .site-header,.secondary,.copy-button,
  body[data-page="creator"] .secondary,body[data-page="creator"] .copy-button,
  .portrait-frame,.career-avatar,.route-card,.experience-card,.capability-card,.outcome-list details,
  .creator-feature,body[data-page="creator"] .creator-feature,.latest-player-card,.video-card { background:var(--studio-white); }
}
@media print {
  body[data-page="career"] { background:var(--studio-white); }
  body[data-page="career"] .career-facts {
    background:var(--studio-white); border-color:var(--deep-slate); box-shadow:none;
    backdrop-filter:none; -webkit-backdrop-filter:none;
  }
}