/* ═══════════════════════════════════════════════════════════════════════════
   site-chrome.css — the shared menu and footer for /academies.html and /investors.html

   ⚠ COPIED VERBATIM from saram-os.html (sections "4. Navigation", "4b. Mega menu"
     and "site footer"), where the home, Saram.OS, parents and thesis pages carry
     the same rules inline. If the menu or footer changes there, change it here.

   ⚠ Tokens are declared on #site-nav and .site-footer, NOT on :root, so they
     cannot restyle the page content that /site.css draws with its own tokens.

   ⚠ /site.css has bare element rules (h3, p, img, button defaults). The small
     block after the tokens restores what the chrome needs where those would leak.
   ═══════════════════════════════════════════════════════════════════════════ */

#site-nav, .site-footer{
  --cream:#F5F2EC; --cream-hi:#FAF8F4; --paper:#FFFEFC;
  --ink:#1B1A18; --ink-2:#3B3934; --muted:#66625B; --faint:#98938A;
  --line:#E3DFD6; --line-soft:rgba(27,26,24,.08);
  --celadon:#8FA891; --rust:#8A4B2A;
  --serif:"Source Serif 4","Noto Serif KR",Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --sans:"Inter","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --nav-h:68px; --shell:min(1400px, 91vw); --gutter:5.2vw;
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:24px;
  --e1:0 1px 2px rgba(27,26,24,.05), 0 8px 24px -18px rgba(27,26,24,.30);
  --e2:0 1px 3px rgba(27,26,24,.05), 0 20px 50px -34px rgba(27,26,24,.36);
  --e3:0 2px 6px rgba(27,26,24,.06), 0 34px 80px -46px rgba(27,26,24,.44);
  --ease:cubic-bezier(.22,.7,.25,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  font-family:var(--sans);
}
#site-nav *, #site-nav *::before, #site-nav *::after,
.site-footer *, .site-footer *::before, .site-footer *::after{box-sizing:border-box}
/* what /site.css's element rules would otherwise change inside the chrome */
.os-trigger{font-family:inherit}
.menu-toggle{padding:0}
.feature-copy h3{font-family:var(--serif);font-weight:400;letter-spacing:-.032em;margin:0}
.feature-kicker{margin-top:0}
:where(#site-nav, .site-footer) :where(a,button):focus-visible{
  outline:2px solid var(--celadon);outline-offset:3px;border-radius:4px;
}
body.no-scroll{overflow:hidden}

/* ---------- 4. Navigation --------------------------------------- */
#site-nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:90;
  height:var(--nav-h);
  pointer-events:none;
}
/* No bar. The mark, the two actions and the toggle float on their own. */
.nav-bar{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  height:var(--nav-h);
  width:100%;
  max-width:var(--shell);
  margin-inline:auto;
  padding-inline:0;
  pointer-events:none;
}
.nav-bar > *{pointer-events:auto}

.mark{margin-right:auto;display:inline-flex;align-items:center;text-decoration:none}
.brand-logo{
  height:30px;width:auto;object-fit:contain;
  transition:filter .3s var(--ease);
}

.nav-ghost{
  display:inline-flex;align-items:center;gap:8px;
  height:42px;padding-inline:18px;
  border:1px solid var(--line-soft);
  border-radius:999px;
  background:rgba(255,254,252,.66);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  font-size:13px;font-weight:500;letter-spacing:-.014em;
  text-decoration:none;color:var(--ink);
  transition:background .22s var(--ease), transform .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.nav-ghost::after{content:"\2197";font-size:11px;opacity:.6}
.nav-ghost.nav-link::after{content:none}
.nav-ghost:hover{transform:translateY(-1px);background:var(--paper)}
#site-nav.on-dark:not(.menu-open) .nav-ghost{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24);
  color:#F4F1EA;
}
@media (max-width:720px){ .nav-ghost{display:none} }

/* Language toggle — same pill treatment as .nav-ghost, no outbound arrow,
   and it stays visible at every width (it is the only route to the twin page). */
.nav-lang{
  display:inline-flex;align-items:center;justify-content:center;
  height:42px;padding-inline:16px;
  border:1px solid var(--line-soft);
  border-radius:999px;
  background:rgba(255,254,252,.66);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  font-size:13px;font-weight:500;letter-spacing:-.014em;
  text-decoration:none;color:var(--ink);
  transition:background .22s var(--ease), transform .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.nav-lang:hover{transform:translateY(-1px);background:var(--paper)}
#site-nav.on-dark:not(.menu-open) .nav-lang{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.24);
  color:#F4F1EA;
}

.nav-chat{
  --os-pad:16px;
  --os-caret:36px;
  display:inline-flex;align-items:stretch;justify-content:center;
  height:36px;padding-inline:0;
  border-radius:8px;
  background:var(--ink);color:var(--cream-hi);
  font-size:16px;font-weight:400;letter-spacing:normal;
  text-decoration:none;
  box-shadow:var(--e1);
  transition:transform .22s var(--ease), background .22s var(--ease), color .22s var(--ease);
}
.nav-chat:hover{transform:translateY(-1px);background:#2B2925}
.os-menu{position:relative;display:inline-flex}
.os-trigger{border:0;cursor:pointer;gap:0;padding:0}
.os-label{display:inline-flex;align-items:center;padding-inline:var(--os-pad);white-space:nowrap}
.os-caret{
  display:grid;place-items:center;
  width:var(--os-caret);
  border-left:1px solid rgba(255,254,252,.24);
}
.os-dropdown{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:190px;
  padding:8px;
  border:1px solid var(--line-soft);
  border-radius:var(--r-sm);
  background:rgba(255,254,252,.96);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  backdrop-filter:blur(18px) saturate(150%);
  box-shadow:var(--e2);
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.os-menu:hover .os-dropdown,
.os-menu.open .os-dropdown{opacity:1;visibility:visible;transform:none}
.os-dropdown a{
  display:block;
  padding:10px 11px;
  border-radius:var(--r-xs);
  color:var(--ink);
  font-size:13px;
  font-weight:500;
  line-height:1.25;
  text-decoration:none;
}
.os-dropdown a:hover{background:var(--cream)}

.menu-toggle{
  width:36px;height:36px;
  display:grid;place-items:center;
  border:0;background:transparent;cursor:pointer;
  border-radius:999px;
}
.menu-icon{position:relative;width:24px;height:14px}
.menu-icon span{
  position:absolute;left:0;width:24px;height:1.6px;
  border-radius:999px;background:var(--ink);
  transition:top .28s var(--ease), transform .28s var(--ease), opacity .16s linear, background .3s var(--ease);
}
.menu-icon span:nth-child(1){top:0}
.menu-icon span:nth-child(2){top:6.2px}
.menu-icon span:nth-child(3){top:12.4px}
#site-nav.menu-open .menu-icon span:nth-child(1){top:6.2px;transform:rotate(45deg)}
#site-nav.menu-open .menu-icon span:nth-child(2){opacity:0}
#site-nav.menu-open .menu-icon span:nth-child(3){top:6.2px;transform:rotate(-45deg)}

/* over the black hero the header inverts */
#site-nav.on-dark:not(.menu-open) .brand-logo{filter:brightness(0) invert(1)}
#site-nav.on-dark:not(.menu-open) .menu-icon span{background:#F4F1EA}
#site-nav.on-dark:not(.menu-open) .nav-chat{background:#F4F1EA;color:#17170F;box-shadow:none}
#site-nav.on-dark:not(.menu-open) .os-caret{border-left-color:rgba(23,23,15,.18)}
#site-nav.on-dark:not(.menu-open) .os-dropdown{background:rgba(255,254,252,.96);color:var(--ink)}

/* ---------- 4b. Mega menu --------------------------------------- */
.menu-scrim{
  position:fixed;inset:0;z-index:1;
  background:rgba(27,26,24,.34);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
  opacity:0;visibility:hidden;
  transition:opacity .34s var(--ease), visibility .34s;
  pointer-events:none;
}
#site-nav.menu-open .menu-scrim{opacity:1;visibility:visible;pointer-events:auto}

.mega-wrap{
  position:absolute;
  top:calc(var(--nav-h) - 8px);
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  width:min(var(--shell), calc(100vw - (var(--gutter) * 2)));
  pointer-events:none;
}
/* Closed, the menu is clipped and transparent but its links would still take
   focus and be read out. visibility removes them; the delay (.46s, the
   mega-clip close transition) keeps the close animation visible. */
.mega-wrap{visibility:hidden;transition:visibility 0s linear .46s;}
#site-nav.menu-open .mega-wrap{visibility:visible;transition-delay:0s;}
.mega-clip{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .46s var(--ease-out);
}
#site-nav.menu-open .mega-clip{grid-template-rows:1fr}
.mega-inner{overflow:hidden}

.mega-menu{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:clamp(28px,4vw,56px);
  padding:clamp(28px,3.4vw,44px);
  border:1px solid var(--line-soft);
  border-radius:var(--r-lg);
  background:rgba(255,254,252,.94);
  -webkit-backdrop-filter:blur(24px) saturate(150%);
  backdrop-filter:blur(24px) saturate(150%);
  box-shadow:var(--e3);
  opacity:0;
  transform:translateY(-10px);
  transition:opacity .3s var(--ease), transform .42s var(--ease-out);
}
#site-nav.menu-open .mega-menu{opacity:1;transform:none;pointer-events:auto}

.mega-primary{display:grid;gap:2px;margin-bottom:30px}
.mega-primary a{
  font-family:var(--serif);
  font-size:clamp(24px,2.5vw,32px);
  line-height:1.24;
  letter-spacing:-.036em;
  text-decoration:none;
  color:var(--ink);
  width:max-content;
  transition:color .2s var(--ease), transform .3s var(--ease);
}
.mega-primary a:hover{color:var(--rust);transform:translateX(4px)}

.mega-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px}
.mega-group-title{
  font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-bottom:12px;
}
.mega-group{display:grid;gap:8px}
.mega-group a{
  font-size:14.5px;color:var(--muted);text-decoration:none;width:max-content;
  transition:color .2s var(--ease)
}
.mega-group a:hover{color:var(--ink)}

.mega-feature{
  position:relative;
  display:flex;flex-direction:column;justify-content:flex-end;
  gap:18px;
  min-height:280px;
  padding:26px;
  border-radius:var(--r-md);
  overflow:hidden;
  background:linear-gradient(160deg,#20211E 0%,#141513 100%);
  color:#F2EFE7;
}
.feature-tile{position:absolute;border-radius:3px;opacity:.9}
.feature-tile.one{width:74px;height:92px;top:26px;left:26px;background:linear-gradient(150deg,#D8CDB8,#B96543)}
.feature-tile.two{width:58px;height:58px;top:44px;left:118px;background:linear-gradient(150deg,#7E938E,#D8DDD1)}
.feature-tile.three{width:52px;height:66px;top:112px;left:60px;background:linear-gradient(150deg,#E4A951,#4E4031)}
.feature-copy{position:relative;z-index:2}
.feature-kicker{
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(242,239,231,.6);margin-bottom:8px;
}
.feature-copy h3{color:#F2EFE7;font-size:22px;line-height:1.2}
.feature-action{
  position:relative;z-index:2;
  display:inline-flex;align-items:center;gap:8px;
  width:max-content;
  font-size:14px;text-decoration:none;color:#F2EFE7;
  border-bottom:1px solid rgba(242,239,231,.35);
  padding-bottom:3px;
  transition:gap .24s var(--ease), border-color .24s var(--ease);
}
.feature-action::after{content:"→"}
.feature-action:hover{gap:13px;border-bottom-color:#F2EFE7}

@media (max-width:860px){
  .mega-menu{grid-template-columns:1fr;padding:26px}
  .mega-feature{min-height:180px}
  .mega-primary a{font-size:24px}
}
@media (max-width:520px){
  .mega-columns{grid-template-columns:1fr;gap:20px}
  .nav-chat{--os-pad:15px;--os-caret:34px;font-size:12.5px}
  .nav-lang{height:38px;padding-inline:13px;font-size:12.5px}
}


/* ---------- site footer ---------- */
.site-footer{
  /* NOT var(--panel): a second :root later in this file redefines it to a pale
     cream (#EFEDE5), which would render this footer light-on-light. */
  background:#171816;
  color:var(--cream-hi);
  padding-top:clamp(3.5rem,7vw,6rem);
  position:relative;
  overflow:hidden;
  font-family:var(--sans);
}
.site-footer .wrap{width:100%;max-width:var(--shell);margin-inline:auto}
.site-footer .cols{
  display:grid;gap:clamp(2rem,3.5vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));
}
@media(min-width:1000px){
  .site-footer .cols{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;gap:0}
  .site-footer .col{padding-left:clamp(1.5rem,2.6vw,2.75rem);border-left:1px solid rgba(250,248,244,.13)}
  .site-footer .col:first-child{padding-left:0;border-left:0}
}
.site-footer .mark{
  font-family:var(--serif);font-weight:400;font-size:1.875rem;
  letter-spacing:-.015em;line-height:1;margin:0;color:var(--cream-hi);
}
.site-footer .mark i{font-style:normal;color:var(--celadon)}
.site-footer .blurb{
  font-family:var(--serif);font-weight:400;font-size:1rem;line-height:1.5;
  color:rgba(250,248,244,.5);max-width:26ch;margin:1.1rem 0 0;
}
/* it is always some hour in Seoul */
.site-footer .now{
  display:flex;align-items:center;gap:.55rem;margin-top:1.6rem;
  font-family:var(--mono);font-size:.75rem;letter-spacing:.04em;
  text-transform:uppercase;color:rgba(250,248,244,.42);
}
.site-footer .now .dot{
  width:6px;height:6px;border-radius:50%;background:var(--celadon);
  position:relative;flex:0 0 auto;
}
.site-footer .now .dot::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1px solid var(--celadon);
  animation:ft-ping 3.4s cubic-bezier(.2,.7,.3,1) infinite;
}
@keyframes ft-ping{
  0%{transform:scale(1);opacity:.6}
  70%{transform:scale(3.4);opacity:0}
  100%{transform:scale(3.4);opacity:0}
}
.site-footer .now b{font-variant-numeric:tabular-nums;font-weight:500;color:rgba(250,248,244,.72)}
.site-footer h4{
  font-weight:600;font-size:.9375rem;letter-spacing:-.01em;
  margin:0 0 1.15rem;color:var(--cream-hi);
}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.site-footer ul a{
  display:inline-block;font-size:.9375rem;color:rgba(250,248,244,.56);
  text-decoration:none;
  transition:color 220ms var(--ease), transform 320ms cubic-bezier(.22,.8,.28,1);
}
.site-footer ul a:hover{color:var(--cream-hi);transform:translateX(4px)}
.site-footer .base{
  margin-top:clamp(3rem,6vw,5rem);padding-top:1.85rem;
  border-top:1px solid rgba(250,248,244,.13);
  display:grid;gap:1.75rem;
}
.site-footer .biz{
  display:grid;gap:.5rem 2.75rem;
  font-size:.8125rem;line-height:1.65;color:rgba(250,248,244,.38);
}
@media(min-width:600px){ .site-footer .biz{grid-template-columns:repeat(2,minmax(0,1fr));max-width:62ch} }
.site-footer .biz b{font-weight:600;color:rgba(250,248,244,.6);margin-right:.4rem}
.site-footer .biz a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(250,248,244,.22)}
.site-footer .biz a:hover{color:var(--cream-hi)}
.site-footer .copy{font-size:.8125rem;color:rgba(250,248,244,.3);margin:1.5rem 0 0}
/* footer small print: readable contrast; legal details in three columns on wide screens */
.site-footer .biz{color:rgba(250,248,244,.56)}
.site-footer .biz b{color:rgba(250,248,244,.74)}
.site-footer .copy{color:rgba(250,248,244,.5)}
@media(min-width:1000px){ .site-footer .biz{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none} }



@media (prefers-reduced-motion:reduce){
  #site-nav *, #site-nav *::before, #site-nav *::after,
  .site-footer *, .site-footer *::before, .site-footer *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}