/* ============================================================
   THEME LAYER
   Loads after style.css. Contains:
     1. Blueprint-negative dark mode
     2. Mobile navigation
     3. Scroll-spy active states
     4. Print stylesheet
   ============================================================ */

/* ---------- 1. DARK MODE: blueprint negative ---------- */
:root[data-theme="dark"]{
  --mylar:#0D1520;
  --mylar-2:#162232;
  --ink:#DCE6F0;
  --graphite:#7E8FA3;
  --rule:#22344A;
  --rule-dark:#2C4157;
  --pen:#E8A33D;
  --pen-2:#4A9FD4;
  --paper-on-dark:#DCE6F0;
}
[data-theme="dark"] .frame{mix-blend-mode:normal}
[data-theme="dark"] .nav{background:rgba(13,21,32,.92)}
[data-theme="dark"] .lede,
[data-theme="dark"] .row__body,
[data-theme="dark"] .legend li,
[data-theme="dark"] .step__cap,
[data-theme="dark"] .cred p{color:#A8B8C8}

/* the two dark sections become raised panels so the rhythm survives */
[data-theme="dark"] .viewport,
[data-theme="dark"] .titleblock{background:var(--mylar-2);color:var(--ink)}
[data-theme="dark"] .viewport .lede,
[data-theme="dark"] .tb__lead p{color:#A8B8C8}
[data-theme="dark"] .level__date{color:#7E8FA3}
[data-theme="dark"] .level__org{color:#8FA2B5}
[data-theme="dark"] .level ul{color:#B8C6D4}
[data-theme="dark"] .level::before{background:var(--ink)}
[data-theme="dark"] .tb__cell dt,
[data-theme="dark"] .tb__foot{color:#7E8FA3}
[data-theme="dark"] .tb__cell a{border-bottom-color:var(--rule-dark)}
[data-theme="dark"] .tb__contact .btn{border-color:var(--rule-dark);color:var(--ink)}
[data-theme="dark"] .tb__contact .btn:hover{background:var(--pen);border-color:var(--pen);color:#0D1520}

/* amber accent needs dark text sitting on it */
[data-theme="dark"] .btn{border-color:var(--ink)}
[data-theme="dark"] .btn--solid{background:var(--pen);border-color:var(--pen);color:#0D1520}
[data-theme="dark"] .btn--solid:hover{background:#F2BC66;border-color:#F2BC66;color:#0D1520}
[data-theme="dark"] .btn--ghost:hover{background:var(--ink);color:var(--mylar)}
[data-theme="dark"] .proj__empty,
[data-theme="dark"] .shot__empty{color:#5E7186}
[data-theme="dark"] a.proj:hover .proj__name{color:var(--pen)}

/* ---------- 2. NAV CONTROLS ---------- */
.nav__tools{display:flex;align-items:center;gap:.6rem}
.theme-toggle,.nav__burger{
  background:none;border:1px solid var(--rule);color:var(--graphite);
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  padding:.42rem .7rem;cursor:pointer;line-height:1;
  transition:color .18s ease,border-color .18s ease;
}
.theme-toggle:hover,.nav__burger:hover{color:var(--ink);border-color:var(--pen)}
.nav__burger{display:none}

@media(max-width:760px){
  .nav__burger{display:inline-block}
  .nav__links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;
    background:var(--mylar);border-bottom:1px solid var(--rule);
    padding:.4rem var(--gut) 1.1rem;
  }
  .nav__links.open{display:flex}
  .nav__links a{padding:.7rem 0;border-bottom:1px solid var(--rule)}
  .nav__links li:last-child a{border-bottom:none}
}

/* ---------- 3. SCROLL-SPY ---------- */
.nav__links a.active{color:var(--ink);border-color:var(--pen)}
@media(max-width:760px){.nav__links a.active{color:var(--pen)}}

/* ---------- 4. PRINT ---------- */
@media print{
  .nav,.frame,.hero__cta,.tb__contact,.nav__tools{display:none!important}
  html,body{background:#fff!important;color:#000!important}
  body{font-size:10.5pt;line-height:1.45}
  .sec,.hero,.phead,.steps{padding:.5cm 0!important}
  .viewport,.titleblock,.sec,.hero{background:#fff!important;color:#000!important}
  .wrap{max-width:none;padding:0 .4cm}
  .lede,.row__body,.legend li,.step__cap,.cred p,.level ul,.viewport .lede,
  .tb__lead p,.level__org,.level__date,.proj__loc,.step__tool,.hero__meta{color:#222!important}
  .bubble b{border-color:#000!important;color:#000!important}
  .tb__cell,.tb__grid,.level,.step,.row,.cred,.sec,.matrix{border-color:#999!important}
  .tb__cell dt,.tb__foot{color:#444!important}
  a{text-decoration:none;color:#000!important}
  .h-xl{font-size:26pt}
  .h-lg{font-size:15pt}
  .h-md{font-size:11.5pt}
  video,.proj__more{display:none!important}
  .proj__frame:has(.proj__empty),.shot:has(.shot__empty){display:none!important}
  .level,.step,.row,.cred,.proj{break-inside:avoid;page-break-inside:avoid}
  .sec{border-top:1px solid #999}
  .reveal-target{opacity:1!important;transform:none!important}
  .projects{grid-template-columns:repeat(3,1fr)!important}
  .tb__grid{grid-template-columns:repeat(2,1fr)!important}
}