/* ===================================================================
   The Executive Function Framework - shared styles (multi-page)
   Home = white theme; Section pages = dark-blue theme.
   =================================================================== */
:root{
  --hero-bg: radial-gradient(120% 120% at 50% 38%, #ffffff 0%, #f3f5f7 70%, #e9edf1 100%);
  --dark-bg: radial-gradient(120% 120% at 50% 35%, #1d2733 0%, #10161f 60%, #0a0e14 100%);
  --ef-ink:#22324e; --ef-accent:#6f8f63; --ink-light:#cdd6e2;
  --bar-h:58px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  min-height:100vh;
  font-family:"Futura","Century Gothic","Avenir Next","Trebuchet MS",system-ui,sans-serif;
  color:var(--ef-ink);
  background:var(--hero-bg); background-attachment:fixed;
}
body.theme-dark{ color:var(--ink-light); background:var(--dark-bg); }

/* ------- fixed frosted top tab bar (sidebar button styling, horizontal) ------- */
#topbar{
  position:fixed; top:0; left:0; right:0; z-index:10; height:var(--bar-h);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(16px) saturate(125%);
  backdrop-filter:blur(16px) saturate(125%);
  border-bottom:1px solid rgba(34,50,78,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65), 0 18px 42px -28px rgba(16,22,31,.5);
  transition:background .6s ease, border-color .6s ease, box-shadow .6s ease;
}
body.theme-dark #topbar{
  background:rgba(17,23,33,.5);
  border-bottom-color:rgba(205,214,226,.16);
  box-shadow:inset 0 1px 0 rgba(205,214,226,.10), 0 18px 42px -28px rgba(0,0,0,.6);
}
#topbar nav{display:flex; align-items:center; height:100%; max-width:100%; overflow-x:auto; scrollbar-width:none; scroll-behavior:smooth; padding:0 8px}
#topbar nav::-webkit-scrollbar{display:none}
/* overflow scroll affordance: chevrons + fade, shown only when tabs overflow */
.tabnav{position:absolute;top:0;bottom:0;width:48px;border:0;z-index:2;cursor:pointer;display:none;align-items:center;justify-content:center;
  font:400 24px/1 "Futura","Century Gothic",system-ui,sans-serif;color:var(--ef-ink);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:color .25s ease}
.tabnav.show{display:flex}
.tabnav.prev{left:0;background:linear-gradient(90deg, rgba(255,255,255,.78) 35%, rgba(255,255,255,0))}
.tabnav.next{right:0;background:linear-gradient(270deg, rgba(255,255,255,.78) 35%, rgba(255,255,255,0))}
.tabnav:hover{color:var(--ef-accent)}
body.theme-dark .tabnav{color:var(--ink-light)}
body.theme-dark .tabnav.prev{background:linear-gradient(90deg, rgba(17,23,33,.82) 35%, rgba(17,23,33,0))}
body.theme-dark .tabnav.next{background:linear-gradient(270deg, rgba(17,23,33,.82) 35%, rgba(17,23,33,0))}
body.theme-dark .tabnav:hover{color:#a9c79a}
#topbar a{
  position:relative; display:flex; align-items:center; white-space:nowrap;
  height:calc(100% - 14px); margin:7px 1px; padding:0 16px; border-radius:12px;
  color:var(--ef-ink); text-decoration:none;
  font:600 12px/1 "Futura","Century Gothic","Avenir Next",system-ui,sans-serif;
  letter-spacing:.18em; text-transform:uppercase; opacity:.82;
  transition:opacity .2s ease, background .2s ease, box-shadow .2s ease, transform .15s ease, color .3s ease;
}
body.theme-dark #topbar a{color:var(--ink-light)}
#topbar a::after{content:"";position:absolute;right:-1px;top:24%;bottom:24%;width:1px;
  background:linear-gradient(180deg,transparent,rgba(34,50,78,.18) 18%,rgba(34,50,78,.18) 82%,transparent);transition:opacity .2s ease}
#topbar a:last-child::after{display:none}
body.theme-dark #topbar a::after{background:linear-gradient(180deg,transparent,rgba(205,214,226,.16) 18%,rgba(205,214,226,.16) 82%,transparent)}
#topbar a:hover,#topbar a:focus-visible{
  opacity:1; outline:none; transform:translateY(-1px);
  background:rgba(255,255,255,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -1px 0 rgba(34,50,78,.07), 0 8px 18px -10px rgba(16,22,31,.4);
}
#topbar a:hover::after,#topbar a:focus-visible::after{opacity:0}
body.theme-dark #topbar a:hover,body.theme-dark #topbar a:focus-visible{
  background:rgba(255,255,255,.07);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12), inset 0 -1px 0 rgba(0,0,0,.3), 0 8px 18px -10px rgba(0,0,0,.55);
}
#topbar a.active{opacity:1; color:var(--ef-accent);
  background:rgba(255,255,255,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 -2px 0 var(--ef-accent);
}
#topbar a.active::after{opacity:0}
body.theme-dark #topbar a.active{color:#a9c79a; background:rgba(255,255,255,.06);
  box-shadow:inset 0 1px 0 rgba(205,214,226,.12), inset 0 -2px 0 #a9c79a;
}

/* ------- logo (Home only): canvas + animated wordmark ------- */
#ef-canvas{position:fixed;inset:0;width:100vw;height:100vh;display:block;z-index:1;pointer-events:none}
#ef-word{position:fixed;z-index:2;pointer-events:none}
#ef-word .efl{position:absolute;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:.6em;opacity:0;transform:translate(0,-50%);will-change:transform,opacity}
#ef-word .ln{height:1px;background:var(--ef-accent);opacity:.85}
#ef-word .tx{white-space:nowrap}
.efl-the{top:82.2%}    .efl-the .tx{color:var(--ef-ink);font-weight:500;letter-spacing:.42em}   .efl-the .ln{width:2.4em}
.efl-main{top:87.2%}   .efl-main .tx{color:var(--ef-ink);font-weight:500;letter-spacing:.20em}
.efl-frame{top:93.1%}  .efl-frame .tx{color:var(--ef-accent);font-weight:500;letter-spacing:.34em} .efl-frame .ln{width:4.2em}

/* ------- content pages: frosted dark text panel + typography ------- */
.page{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:calc(var(--bar-h) + 5vh) 6vw 7vh}
.page .panel{
  width:100%;max-width:1060px;min-height:52vh;color:var(--ink-light);
  background:rgba(17,23,33,.55);
  -webkit-backdrop-filter:blur(15px) saturate(120%);
  backdrop-filter:blur(15px) saturate(120%);
  border:1px solid rgba(205,214,226,.14);
  border-radius:22px;
  box-shadow:inset 1px 1px 0 rgba(205,214,226,.08), 0 34px 90px -46px rgba(0,0,0,.75);
  padding:clamp(22px,3.2vw,44px) clamp(20px,3.4vw,50px);
}
.page .eyebrow{font:600 12px/1 "Futura","Century Gothic",system-ui,sans-serif;letter-spacing:.36em;text-transform:uppercase;color:var(--ef-accent);opacity:.9;margin:0 0 12px}
.page h2{font:500 clamp(23px,2.7vw,36px)/1.12 "Futura","Century Gothic","Avenir Next",system-ui,sans-serif;letter-spacing:.02em;color:#eef2f7;margin:0 0 .5em}
.page .tagline{font:500 clamp(15px,1.5vw,19px)/1.4 "Futura","Century Gothic",system-ui,sans-serif;letter-spacing:.04em;color:var(--ef-accent);margin:0 0 1.1em}
.page h3{font:600 clamp(14px,1.25vw,17px)/1.2 "Futura","Century Gothic",system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#dfe6ef;margin:1.4em 0 .55em;break-inside:avoid}
.page h3.wm{color:#a9c79a} .page h3.inh{color:#e3b35f} .page h3.cf{color:#acc0d6}
.page p{font:400 clamp(12px,1.04vw,14.5px)/1.55 system-ui,"Avenir Next",sans-serif;margin:0 0 .72em}
.page p.lead{color:#e7ecf3}
.page p.kept{margin:0 0 .25em}
.page p.placeholder{color:rgba(205,214,226,.5);font-style:italic;letter-spacing:.03em}
.page ul{list-style:none;margin:.2em 0 .95em;padding:0}
.page li{position:relative;font:400 clamp(12px,1.02vw,14px)/1.45 system-ui,sans-serif;padding-left:16px;margin:.3em 0}
.page li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;border-radius:50%;background:var(--ef-accent);opacity:.85}
.page .ph{display:flex;align-items:center;justify-content:center;text-align:center;border:1px dashed rgba(205,214,226,.32);border-radius:14px;padding:18px;margin:.4em 0 1.1em;color:rgba(205,214,226,.55);font:600 11px/1.5 system-ui,sans-serif;letter-spacing:.24em;text-transform:uppercase;min-height:70px;break-inside:avoid}
.page .cols{column-gap:42px}
.page .cols .blk{break-inside:avoid}
.page .skills{column-count:2;column-gap:26px}
@media (min-aspect-ratio:3/2){
  .page .cols{column-count:2}
  .page .skills{column-count:3}
}
@media (min-width:1600px){ .page .cols{column-count:3} }