/* SYS_THEME — system dashboard portfolio */

:root{
  --bg: #000000;
  --fg: #EDEDED;
  --fg2: rgba(237,237,237,0.72);
  --line: rgba(237,237,237,0.16);
  --line2: rgba(237,237,237,0.10);
  --accent: #FFC800;
  --accent-strong: #D9A800;
  --shadow: 0 10px 30px rgba(0,0,0,0.35);
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  --r: 14px;
  --t: 420ms;
  --ease: cubic-bezier(.2,.8,.2,1);
}

html.theme-light{
  --bg: #F7F7F7;
  --fg: #111111;
  --fg2: rgba(17,17,17,0.72);
  --accent: #E0A800;
  --accent-strong: #D9A800;
  --line: rgba(17,17,17,0.16);
  --line2: rgba(17,17,17,0.10);
  --shadow: 0 10px 30px rgba(0,0,0,0.12);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--sans);
  transition: background-color var(--t) var(--ease), color var(--t) var(--ease);
}

body.hero-locked{overflow:hidden; height:100vh}

img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
code,pre,kbd{font-family:var(--mono)}
::selection{background:rgba(255,200,0,0.22)}

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

/* Layout */
.container{max-width:1100px; margin:0 auto; padding:0 20px}
.container.narrow{max-width:1100px}
.site-main{min-height:70vh}

.section{padding:78px 0; transition: opacity 520ms var(--ease), filter 520ms var(--ease)}

.section.is-active{opacity:1;filter:none;}

/* Homepage-only: dim non-focused sections */
.home-template .section.is-inactive{opacity:0.38;filter:grayscale(1) brightness(0.86) contrast(0.92);}

.seq-item{
  opacity:0;
  transform:translateY(12px);
  transition: opacity 900ms var(--ease), transform 900ms var(--ease);
  transition-delay: calc(var(--seq, 0) * 90ms);
}
.seq-item.is-revealed{opacity:1; transform:none;}
.section-hero{min-height:100vh; min-height:100svh; display:flex; align-items:flex-start; padding-top:24px; padding-bottom:18px; position:relative; overflow:hidden}
/* Desktop: centre the hero, but bias slightly upward (not glued to the top). */
@media (min-width: 921px){
  .section-hero{align-items:center; padding-top:0}
  .hero-grid{transform:translateY(-16px)}
}
.section-head{margin:0 0 26px}
.section-head.row{display:flex; align-items:flex-end; justify-content:space-between; gap:18px}
@media (max-width: 620px){
  .section-head.row{flex-direction:column; align-items:flex-start}
  .section-head.row .pill{align-self:flex-start; margin-top:10px}
}
.section-label{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg2);
  margin-bottom:10px;
}
.section-title{
  margin:0;
  font-family:var(--mono);
  font-weight:600;
  letter-spacing:0.02em;
  font-size:28px;
}
.section-sub{
  margin:10px 0 0;
  color:var(--fg2);
  max-width:64ch;
}

.prose{
  font-size:16px;
  line-height:1.75;
  color:var(--fg2);
}
.prose p{margin:0 0 14px}
.prose strong{color:var(--fg); font-weight:600}

/* Nav */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  opacity:1;
  transform:none;
  pointer-events:auto;
  transition: background-color 420ms var(--ease), border-color 420ms var(--ease);
  background:rgba(0,0,0,0);
}
html.theme-light .site-header{background:rgba(247,247,247,0)}
.site-header.is-visible{opacity:1; transform:none; pointer-events:auto;}

.nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 20px;
  border-bottom:1px solid var(--line2);
  backdrop-filter:saturate(1.2) blur(10px);
  -webkit-backdrop-filter:saturate(1.2) blur(10px);
  background:rgba(0,0,0,0.75);
}
html.theme-light .nav{background:rgba(247,247,247,0.75)}
.brand{
  font-family:var(--mono);
  letter-spacing:0.06em;
  text-transform:uppercase;
  font-size:13px;
  opacity:0.92;
}

.nav-toggle{display:none; border:1px solid var(--line); background:transparent; color:inherit; border-radius:10px; padding:10px 12px}
.nav-toggle-icon{display:block; width:16px; height:10px; border-top:2px solid currentColor; border-bottom:2px solid currentColor; position:relative}
.nav-toggle-icon:after{content:""; position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); border-top:2px solid currentColor}

.nav-links{
  list-style:none;
  display:flex;
  align-items:center;
  gap:14px;
  margin:0;
  padding:0;
}
.nav-links a{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding:9px 10px;
  border-radius:10px;
  opacity:0.78;
  transition: opacity 180ms var(--ease), box-shadow 180ms var(--ease);
}
.nav-links a:hover{opacity:1}
.nav-links a[aria-current="true"]{
  opacity:1;
  box-shadow: inset 0 -2px 0 var(--accent);
}
.nav-actions{display:flex; align-items:center; gap:10px; margin-left:6px}
.cmd{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.08em;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  color:var(--fg);
  background:transparent;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease), transform 180ms var(--ease);
}
.cmd:hover{border-color:rgba(255,200,0,0.55); box-shadow:0 0 0 3px rgba(255,200,0,0.10)}
.cmd.primary{border-color:rgba(255,200,0,0.55)}
.mode{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.12em;
  padding:9px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  cursor:pointer;
  opacity:0.9;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.mode:hover{border-color:rgba(255,200,0,0.55); box-shadow:0 0 0 3px rgba(255,200,0,0.10)}

@media (max-width: 920px){
  .nav-toggle{display:block}
  .nav-links{
    position:absolute;
    left:0;
    right:0;
    top:56px;
    padding:12px 14px 16px;
    background:rgba(0,0,0,0.95);
    border-bottom:1px solid var(--line2);
    display:none;
    flex-direction:column;
    align-items:flex-start;
  }
  html.theme-light .nav-links{background:rgba(247,247,247,0.95)}
  .nav.open .nav-links{display:flex}
  .nav-actions{width:100%; flex-wrap:wrap}
}

/* Hero */
.hero-grid{display:grid; grid-template-columns: 1.55fr 1fr; gap:26px; align-items:start}
@media (max-width: 920px){ .hero-grid{grid-template-columns:1fr} .section-hero{padding-top:18px} }

/* Mobile: ensure hero content fits within the viewport */
@media (max-width: 520px){
  :root{ --nav-h: 58px; }
  .section-hero{min-height:calc(100svh - var(--nav-h)); align-items:flex-start; padding-top:14px; padding-bottom:14px}
  .hero-grid{gap:16px}
  .boot{padding:0}
  .boot-head{font-size:32px}
  .boot-sub{font-size:14px; line-height:1.55; margin-top:8px}
  .boot-load{margin-top:10px}
  .load-bar{height:8px}
  .hero-panel{padding:14px 14px; border-radius:16px}
  .kv{gap:10px 10px}
  .panel-foot{font-size:11px}
}

/* Mission briefing boot-in (JS adds .kv-ready with uneven timing) */
.hero-panel .kv > div{opacity:0; transform:translateY(6px); filter:saturate(0.9) contrast(0.98); transition:opacity 360ms var(--ease), transform 360ms var(--ease), filter 360ms var(--ease);}
.hero-panel .kv > div.kv-ready{opacity:1; transform:none; filter:none; animation:kvFlicker 520ms linear 1 both;}
@keyframes kvFlicker{
  0%{opacity:0; transform:translateY(6px); filter:blur(1px) brightness(1.15);}
  22%{opacity:1; transform:translateY(0); filter:none;}
  30%{opacity:0.35;}
  42%{opacity:1;}
  60%{opacity:0.78;}
  100%{opacity:1;}
}

.boot-label{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--fg2);
  margin-bottom:16px;
}

.boot-id{
  font-family:var(--mono);
  font-size:14px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg);
  font-weight:600;
  margin:-6px 0 14px;
}

.pulse-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 0 rgba(255,200,0,0.32);
  animation:sysPulse 1.6s ease-in-out infinite;
}

@keyframes sysPulse{
  0%{transform:scale(0.9); opacity:0.75; box-shadow:0 0 0 0 rgba(255,200,0,0.28)}
  70%{transform:scale(1.15); opacity:1; box-shadow:0 0 0 10px rgba(255,200,0,0)}
  100%{transform:scale(0.9); opacity:0.75; box-shadow:0 0 0 0 rgba(255,200,0,0.28)}
}

.boot-head{

  margin:0 0 14px;
  font-family:var(--mono);
  font-weight:600;
  letter-spacing:0.02em;
  font-size:34px;
  line-height:1.18;
}
.boot-typed{display:inline}
.cursor{
  display:inline-block;
  width:10px;
  height:1.2em;
  margin-left:4px;
  border-left:2px solid var(--accent);
  transform:translateY(2px);
  opacity:0.0;
  animation:cursorBlink 1.1s steps(1) infinite;
}
.cursor.on{opacity:1}
body.booted .cursor{opacity:0.85}
.cursor.is-typing{opacity:1; animation-duration:420ms}
@keyframes cursorBlink{0%,49%{opacity:0.15}50%,100%{opacity:0.9}}
.boot-sub{
  color:var(--fg2);
  line-height:1.8;
  max-width:68ch;
}

.boot-load{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:14px;
  opacity:0.92;
}
.load-label{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.22em;
  text-transform:uppercase;
  color:var(--fg2);
}
.load-bar{
  flex:1;
  height:10px;
  border-radius:999px;
  border:1px solid var(--line);
  overflow:hidden;
  background:rgba(255,255,255,0.04);
}
html.theme-light .load-bar{background:rgba(0,0,0,0.03)}
.load-bar span{
  display:block;
  height:100%;
  width:100%;
  background:linear-gradient(90deg, rgba(255,200,0,0.0), var(--accent), rgba(255,200,0,0.0));
  background-size:200% 100%;
  background-position:0% 0%;
  transform-origin:left;
  transform:scaleX(0);
  opacity:0.65;
  animation:none;
}
/* Boot fill: run once, then the bar becomes "alive" */
.section-hero.syncing:not(.sync-complete) .load-bar span{
  animation:bootFill 2100ms var(--ease) 1 both;
  animation-delay:700ms;
}
.section-hero.sync-complete .load-bar span{
  transform:scaleX(1);
  opacity:1;
  background:linear-gradient(90deg, rgba(255,200,0,0.10), var(--accent), rgba(255,200,0,0.10));
  background-size:240% 100%;
  background-position:0% 0%;
  animation:barAlive 4200ms linear infinite;
}
.section-hero.sync-complete .load-text{color:var(--fg)}
.load-text{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fg2);
  white-space:nowrap;
}
.boot-cmds{transition:opacity 180ms ease;display:flex; flex-wrap:wrap; gap:10px; margin-top:18px}

/* Boot animation (hero boot-up) */
body:not(.booted) .boot-label,
body:not(.booted) .boot-id,
body:not(.booted) .boot-head,
body:not(.booted) .boot-sub,
body:not(.booted) .boot-load,
body:not(.booted) .boot-cmds,
body:not(.booted) .hero-panel{
  opacity:0;
  transform:translateY(10px);
}
body .boot-label,
body .boot-id,
body .boot-head,
body .boot-sub,
body .boot-load,
body .boot-cmds,
body .hero-panel{
  transition: opacity 560ms var(--ease), transform 560ms var(--ease);
}
body.booted .boot-label{transition-delay:80ms}
body.booted .boot-id{transition-delay:260ms}
body.booted .boot-head{transition-delay:560ms}
body.booted .boot-sub{transition-delay:860ms}
body.booted .boot-load{transition-delay:1120ms}
body.booted .hero-panel{transition-delay:1320ms}
body.booted .boot-cmds{transition:opacity 180ms ease;transition-delay:1720ms}

/* One-shot boot ambience (smooth glitch + data transfer) */
body.booted .boot-label{animation:bootGlitch 920ms var(--ease) 1;}
body.booted .hero-panel{animation:bootPanel 1100ms var(--ease) 1;}
/* continuous system activity (calm) */
@keyframes bootFill{
  0%{transform:scaleX(0); background-position:0% 0%; opacity:0.55}
  30%{opacity:0.95}
  100%{transform:scaleX(1); background-position:100% 0%; opacity:1}
}
@keyframes barAlive{
  0%{background-position:0% 0%}
  100%{background-position:100% 0%}
}
@keyframes heroScan{
  0%{transform:translateY(-10%); opacity:0}
  10%{opacity:0.08}
  50%{opacity:0.06}
  90%{opacity:0.08}
  100%{transform:translateY(110%); opacity:0}
}

/* Passive system activity (hero only, after boot) */
.section-hero.sync-complete::after{
  content:"";
  position:absolute;
  left:-10%;
  right:-10%;
  top:-20%;
  bottom:-20%;
  pointer-events:none;
  background:linear-gradient(180deg, rgba(255,200,0,0.0) 0%, rgba(255,200,0,0.08) 46%, rgba(255,200,0,0.0) 100%);
  mix-blend-mode:overlay;
  animation:heroScan 7800ms linear infinite;
}
@keyframes loadSweep{
  0%{background-position:0% 0%; opacity:0.55}
  50%{opacity:0.95}
  100%{background-position:100% 0%; opacity:0.55}
}

@keyframes lineIn{to{opacity:1; transform:translateY(0)}}

@keyframes bootLoad{0%{width:0%; opacity:0.7} 35%{width:38%} 70%{width:82%} 100%{width:100%; opacity:1}}
@keyframes bootGlitch{0%{filter:none; transform:translateY(10px)} 18%{filter:contrast(1.08); transform:translateY(10px) translateX(1px)} 42%{filter:contrast(1.02); transform:translateY(10px) translateX(-1px)} 100%{filter:none; transform:translateY(0)}}
@keyframes bootPanel{0%{filter:none; transform:translateY(10px)} 30%{filter:contrast(1.05); transform:translateY(10px) translateX(2px)} 60%{filter:contrast(1.01); transform:translateY(6px) translateX(-1px)} 100%{filter:none; transform:translateY(0) translateX(0)}}

.cmd.enter{
  border-color:rgba(255,200,0,0.75);
  color:#000;
  background:var(--accent-strong);
  border-color:var(--accent-strong);
  box-shadow:0 0 0 0 rgba(255,200,0,0.0);
  opacity:0;
  transform:translateY(6px);
  pointer-events:none;
  transition: opacity 600ms var(--ease), transform 600ms var(--ease);
}

.cmd.enter:hover{box-shadow:0 0 0 3px rgba(255,200,0,0.18)}
html.theme-light .cmd.enter{color:#111}
.cmd.enter.is-ready{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.cmd.enter:hover{box-shadow:0 0 0 4px rgba(255,200,0,0.18)}

html.theme-light .cmd.enter{color:#111111}

.hero-panel{
  border:1px solid var(--line);
  border-radius:var(--r);
  padding:18px 18px 10px;
  background:rgba(0,0,0,0.18);
  box-shadow:var(--shadow);
}
html.theme-light .hero-panel{background:rgba(247,247,247,0.65)}
.panel-title{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  margin-bottom:12px;
  color:var(--fg2);
}
.kv{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px 14px;
  padding:10px 0 14px;
  border-top:1px solid var(--line2);
  border-bottom:1px solid var(--line2);
}
.k{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--fg2);
}
.v{
  font-family:var(--mono);
  font-size:12px;
  text-align:right;
}
.panel-foot{
  margin-top:8px;
  font-family:var(--mono);
  font-size:12px;
  color:var(--fg2);
  line-height:1.6;
}

/* Accent usage */
.accent{color:var(--accent)}

/* Experience logs */
.logs{display:grid; gap:12px}
.log-group{
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:rgba(0,0,0,0.12);
}
html.theme-light .log-group{background:rgba(247,247,247,0.65)}
.log-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 16px;
  cursor:pointer;
  user-select:none;
  width:100%;
  background:transparent;
  border:0;
  text-align:left;

  color: var(--fg);
}
.log-title{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  line-height:1;

  color: var(--fg);
}
.log-state{
  font-family:var(--mono);
  font-size:12px;
  color:var(--fg2);
  line-height:1;
}
.log-body{
  padding:0 16px 0;
  border-top:0;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-6px);
  transition: max-height 360ms var(--ease), opacity 220ms var(--ease), padding 260ms var(--ease), transform 320ms var(--ease);
}
.log-group.open .log-body{max-height:1200px; opacity:1; padding:0 16px 14px; border-top:1px solid var(--line2); transform:none}
.entry{padding:12px 0; border-bottom:1px dashed var(--line2)}
.entry:last-child{border-bottom:0}
.entry-top{
  display:grid;
  grid-template-columns: var(--date-col-ch, 10ch) 1fr;
  gap:10px;
  align-items:start;
  cursor:pointer;
  width:100%;
  background:transparent;
  border:0;
  padding:0;
  color:inherit;
  text-align:left;
}
.entry-date{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.12em;
  color:var(--fg2);
}
.entry-stack{display:flex; flex-direction:column; gap:4px}
.entry-role{font-family:var(--mono); font-size:13px; color:var(--fg)}
.entry-org{font-family:var(--mono); font-size:12px; color:var(--fg2)}
.entry-details{
  margin-top:10px;
  color:var(--fg2);
  line-height:1.7;
  max-height:0;
  opacity:0;
  overflow:hidden;
  transition: max-height 320ms var(--ease), opacity 220ms var(--ease);
}
.entry.open .entry-details{max-height:900px; opacity:1}
.lines{display:grid; gap:6px}
.line{
  font-family:var(--mono);
  font-size:12px;
  opacity:0;
  transform:translateY(4px);
}
.entry.open .line{animation: lineIn 180ms var(--ease) both; animation-delay: calc(var(--i, 0) * 40ms);}
.entry-details ul{margin:0; padding-left:18px}
.entry-details li{margin:0 0 6px}
.entry-details ul{margin:0; padding-left:18px}
.entry-details li{margin:0 0 6px}

/* Projects cards */
.card-grid{display:grid; grid-template-columns: repeat(3, 1fr); gap:14px}
@media (max-width: 920px){ .card-grid{grid-template-columns: repeat(2, 1fr)} }
@media (max-width: 560px){ .card-grid{grid-template-columns: 1fr} }

.card{
  position:relative;
  border:1px solid var(--line);
  border-radius:var(--r);
  overflow:hidden;
  background:rgba(0,0,0,0.12);
  transition: border-color 220ms var(--ease), transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
html.theme-light .card{background:rgba(247,247,247,0.65)}
.card:hover{
  border-color:rgba(255,200,0,0.55);
  box-shadow:0 0 0 3px rgba(255,200,0,0.10);
  transform:translateY(-2px);
}
.card-link{position:absolute; inset:0; z-index:3}
.card-media{aspect-ratio: 16 / 10; border-bottom:1px solid var(--line2); overflow:hidden}
.card-media img{width:100%; height:100%; object-fit:cover}
.card-body{padding:14px 14px 16px; position:relative; z-index:2}
.card-title{margin:0 0 8px; font-family:var(--mono); font-size:14px; letter-spacing:0.01em}
.card-excerpt{margin:0 0 10px; color:var(--fg2); line-height:1.6; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.card-meta{display:flex; flex-wrap:wrap; gap:8px}
.tag{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:0.10em;
  text-transform:uppercase;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid var(--line);
  color:var(--fg2);
}
.tag.tag-lg{padding:6px 10px; font-size:12px}

/* Tags are internal system metadata: keep hidden everywhere */
.tag, .tag-list, .post-tags, .kg-tag-card, .kg-tags, [data-tag], [data-tags]{display:none !important;}

.pill{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  opacity:0.9;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.pill:hover{border-color:rgba(255,200,0,0.55); box-shadow:0 0 0 3px rgba(255,200,0,0.10)}
.empty{color:var(--fg2)}

/* Search */
.search{margin:18px 0 20px}
.search-input{
  width:100%;
  padding:14px 14px;
  border-radius:var(--r);
  border:1px solid var(--line);
  background:transparent;
  color:var(--fg);
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:0.02em;
  outline:none;
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.search-input:focus{
  border-color:rgba(255,200,0,0.55);
  box-shadow:0 0 0 3px rgba(255,200,0,0.10);
}
.search-hint{margin-top:10px; color:var(--fg2); font-size:13px}
.hidden{display:none !important}

/* Contact */
.contact-shell{
  border:1px solid var(--line);
  border-radius:var(--r);
  background:rgba(0,0,0,0.12);
  padding:16px;
}
html.theme-light .contact-shell{background:rgba(247,247,247,0.65)}
.contact-prompt{
  font-family:var(--mono);
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--fg2);
  margin-bottom:12px;
}
.contact-list{display:grid; gap:10px}
.contact-item{
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid var(--line2);
  transition: border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.contact-item:hover{
  border-color:rgba(255,200,0,0.55);
  box-shadow:0 0 0 3px rgba(255,200,0,0.10);
}
.contact-item .k{
  font-family:var(--mono);
  letter-spacing:0.14em;
  text-transform:uppercase;
  font-size:12px;
  color:var(--fg2);
}
.contact-item .v{
  font-family:var(--mono);
  font-size:12px;
  text-align:right;
}

/* Footer */
.site-footer{padding:26px 0 40px; border-top:1px solid var(--line2)}
.footer-row{display:flex; justify-content:space-between; align-items:center; gap:14px; color:var(--fg2); font-family:var(--mono); font-size:12px; letter-spacing:0.06em}

/* Section activation */
.section{opacity:1; transform:none}

.section.is-active{opacity:1;filter:none;}
@media (prefers-reduced-motion: no-preference){
  .section[data-section]{
    opacity:0.1;
    transform:translateY(10px);
    transition: opacity 520ms var(--ease), transform 520ms var(--ease);
  }
  .section.is-seen{opacity:1; transform:none}
  .section.is-active{opacity:1;filter:none;}
  
  .cursor{transition: opacity 200ms var(--ease)}
}
a:focus-visible, button:focus-visible, input:focus-visible{
  outline:2px solid rgba(255,200,0,0.65);
  outline-offset:2px;
  border-radius:12px;
}

.muted{color:var(--fg2); font-family:var(--mono); font-size:12px}

/* Hero status light */
.pulse-dot{
  display:inline-block;
  width:8px;
  height:8px;
  border-radius:999px;
  background:var(--accent);
  opacity:0.85;
  animation: sysPulse 1600ms var(--ease) infinite;
}
@keyframes sysPulse{
  0%{opacity:0.55; transform:scale(0.9);}
  55%{opacity:1; transform:scale(1.0);}
  100%{opacity:0.55; transform:scale(0.9);}
}


/* Hide internal tags (tags are internal system metadata) */
.post-tags,.tag,.post-tag,.kg-tag-card,.card-meta{display:none !important;}

@keyframes enterPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,200,0,0.0)}50%{box-shadow:0 0 0 4px rgba(255,200,0,0.10)}}
body.hero-locked .cmd.enter.is-ready{animation:enterPulse 2.6s ease-in-out infinite;}
@media (prefers-reduced-motion: reduce){body.hero-locked .cmd.enter.is-ready{animation:none;}}

.section-heading,
.section-heading h2,
.console-group-title {
  color: var(--color-primary) !important;
}

@media (prefers-colour-scheme: dark){.section-heading,.console-group-title{color:#EDEDED !important;}}

/* HARD OVERRIDE — DESKTOP DARK HEADINGS MUST BE WHITE */
html.theme-dark .section-heading,
html.theme-dark .console-group-title,
html.theme-dark .console-group-title h2,
html.theme-dark .experience-tabs .tab,
html.theme-dark h2[data-section-title="work"],
html.theme-dark h2[data-section-title="leadership"],
html.theme-dark h2[data-section-title="other"] {
  color: #EDEDED !important;
}


/* FIX: ensure log headings are visible in both themes */
html.theme-dark .logs .log-head .log-title,
html.theme-dark .logs .log-head .log-state{
  color: #EDEDED !important;
}
html.theme-light .logs .log-head .log-title{
  color: #111111 !important;
}


/* Reduced motion: hero boot */
@media (prefers-reduced-motion: reduce){
  .section-hero.syncing .load-bar span{animation:none !important; transform:scaleX(1) !important; opacity:1 !important;}
  .section-hero.sync-complete .load-bar span{animation:none !important;}
  .section-hero.sync-complete::after{display:none !important; animation:none !important;}
}


/* Hero boot: commands reveal together */
.boot-cmds{transition:opacity 180ms ease;transition:opacity 260ms var(--ease);}
.boot-cmds:not(.cmds-ready){opacity:0;pointer-events:none;}

/* Ensure load bar fills left -> right */
.load-bar span{transform-origin:left;}


/* FORCE everything always in focus on projects page */
.card-grid,
.page-projects .section,
.projects .section,
.page-projects .card,
.projects .card{
  opacity:1 !important;
  filter:none !important;
  backdrop-filter:none !important;
}

/* LTR progress bar already correct */