/* ============================================================
   Pygmalion Visual — base styles (shared across all pages)
   ============================================================ */
:root{
  --navy:#121566;
  --navy-2:#1B1C4C;
  --paper:#FAF9F9;
  --cream:#F6F2E8;
  --rust:#C96A3E;
  --teal:#1F5C63;
  --line-on-navy: rgba(246,242,232,0.18);
  --line-on-cream: rgba(18,21,102,0.14);
  --mono: 'JetBrains Mono', monospace;
  --disp: 'Archivo Black', sans-serif;
  --sans: 'Archivo', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{ font-family:var(--sans); background:var(--paper); color:var(--navy); overflow-x:hidden; }
img{ max-width:100%; display:block; }
::selection{background:var(--rust);color:var(--cream);}

/* ---------- timecode rail ---------- */
#rail{
  position:fixed; left:0; top:0; bottom:0; width:52px;
  display:flex; flex-direction:column; align-items:center; justify-content:space-between;
  padding:28px 0; z-index:50; pointer-events:none; mix-blend-mode:difference;
}
#rail .tick{ width:1px; height:100%; background:rgba(255,255,255,0.35); }
#rail-time{ writing-mode:vertical-rl; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:#fff; position:absolute; top:28px; left:16px; }
#rail-bottom{ writing-mode:vertical-rl; font-family:var(--mono); font-size:11px; letter-spacing:0.08em; color:#fff; position:absolute; bottom:28px; left:16px; }
@media (max-width:820px){ #rail{display:none;} }

section{ padding-left:64px; }
@media (max-width:820px){ section{ padding-left:20px; padding-right:20px; } }

/* ---------- top bar (shared) ---------- */
.topbar{ display:flex; justify-content:space-between; align-items:center; padding-left:24px; }
.topbar-left{ display:flex; align-items:center; gap:22px; }
.topbar-right{ display:flex; align-items:center; gap:22px; }
.brand-mark{ display:flex; align-items:center; }
.brand-mark img{ height:30px; width:auto; }
.back-link{ font-family:var(--mono); font-size:11px; letter-spacing:0.06em; color:rgba(246,242,232,0.6); text-decoration:none; }
.back-link:hover{ color:var(--rust); }
.tc{ font-family:var(--mono); font-size:11px; color:rgba(246,242,232,0.55); }
.rec{
  display:flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11px; letter-spacing:0.1em; color:rgba(246,242,232,0.7);
}
.rec i{ width:7px; height:7px; border-radius:50%; background:var(--rust); animation:blink 1.4s infinite; }
@keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:0.15;} }

.menu-btn{
  background:none; border:none; cursor:pointer;
  display:flex; flex-direction:column; gap:4px; padding:6px; z-index:120;
}
/* when the overlay is open, lift the button out of any header stacking context */
body.nav-open .menu-btn{ position:fixed; top:22px; right:32px; }
@media (max-width:820px){ body.nav-open .menu-btn{ right:20px; } }
.menu-btn span{ width:20px; height:1.5px; background:var(--cream); display:block; transition:transform .3s ease, opacity .2s ease; }
body.nav-open .menu-btn span:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
body.nav-open .menu-btn span:nth-child(2){ opacity:0; }
body.nav-open .menu-btn span:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

/* ---------- nav overlay (shared) ---------- */
#nav-overlay{
  position:fixed; inset:0; z-index:110;
  background:var(--navy); color:var(--cream);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 32px 0 88px;
  opacity:0; visibility:hidden; transform:translateY(-8px);
  transition:opacity .35s ease, transform .35s ease, visibility .35s;
}
body.nav-open #nav-overlay{ opacity:1; visibility:visible; transform:translateY(0); }
#nav-overlay a{
  font-family:var(--disp); font-size:clamp(30px,7vw,58px); line-height:1.12;
  color:var(--cream); text-decoration:none; display:inline-flex; align-items:baseline; gap:16px;
}
#nav-overlay a .idx{ font-family:var(--mono); font-size:13px; color:var(--rust); }
#nav-overlay a:hover{ color:var(--rust); }
#nav-overlay a[aria-current="page"]{ color:var(--rust); }
#nav-overlay .nav-foot{
  position:absolute; left:88px; bottom:36px; right:32px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-family:var(--mono); font-size:11px; color:rgba(246,242,232,0.5);
}
#nav-overlay .nav-foot a{ font-family:var(--mono); font-size:11px; color:rgba(246,242,232,0.7); }
@media (max-width:820px){
  #nav-overlay{ padding:0 24px; }
  #nav-overlay .nav-foot{ left:24px; right:24px; }
}

/* ---------- shared footer strip ---------- */
.foot-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12.5px; color:rgba(246,242,232,0.5);
  border-top:1px solid var(--line-on-navy); padding-top:20px;
}
.foot-bottom a{ color:rgba(246,242,232,0.7); }

@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
}