:root{
  --navy:#0E1A35;
  --navy-soft:#16223F;
  --amber:#FFB627;
  --amber-dim:#C98F1B;
  --cream:#FAF8F3;
  --ink:#1B1F2A;
  --slate:#5B6270;
  --line:#E4DFD3;
  --radius:2px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:'Work Sans', sans-serif;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

a{color:var(--navy);}
a:focus-visible, button:focus-visible{outline:2px solid var(--amber); outline-offset:3px;}

/* Signature element: clock rail tracking scroll progress from midnight to dawn */
.clock-rail{
  position:fixed;
  top:0; left:0;
  width:4px; height:100vh;
  background:rgba(255,255,255,0.06);
  z-index:50;
}
.clock-rail-fill{
  position:absolute; top:0; left:0; width:100%;
  height:0%;
  background:linear-gradient(180deg, var(--amber), var(--amber-dim));
}
.clock-dot{
  position:absolute; left:50%; top:0%;
  width:11px; height:11px;
  background:var(--amber);
  border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 8px 2px rgba(255,182,39,0.7);
}

.hero{
  position:relative;
  background:radial-gradient(ellipse at 20% -10%, #1D2C55 0%, var(--navy) 55%), var(--navy);
  color:var(--cream);
  padding:5.5rem 1.75rem 4.5rem 3rem;
  overflow:hidden;
}
.hero-inner{max-width:740px;}
.eyebrow{
  display:flex; align-items:center; gap:.6rem;
  font-family:'Space Mono', monospace;
  font-size:.78rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--amber);
  margin:0 0 1.4rem;
}
.dot-pulse{
  width:8px; height:8px; border-radius:50%;
  background:var(--amber);
  box-shadow:0 0 0 0 rgba(255,182,39,.6);
  animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(255,182,39,.55);}
  70%{box-shadow:0 0 0 10px rgba(255,182,39,0);}
  100%{box-shadow:0 0 0 0 rgba(255,182,39,0);}
}
.hero h1{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:clamp(2.1rem, 5vw, 3.4rem);
  line-height:1.08;
  margin:0 0 1.3rem;
  max-width:14ch;
}
.hero-sub{
  font-size:1.08rem;
  color:#C7CCDC;
  max-width:52ch;
  margin:0 0 2.1rem;
}
.hero-sub strong{color:var(--cream);}

.cta-btn{
  display:inline-block;
  background:var(--amber);
  color:var(--navy);
  font-weight:600;
  text-decoration:none;
  padding:.85rem 1.6rem;
  border-radius:var(--radius);
  font-size:.95rem;
  letter-spacing:.01em;
  transition:transform .15s ease, background .15s ease;
}
.cta-btn:hover{background:#FFC553; transform:translateY(-1px);}
.cta-btn--light{background:var(--cream); color:var(--navy);}
.cta-btn--light:hover{background:#fff;}

.hero-time{
  position:absolute;
  right:2.2rem; bottom:1.6rem;
  font-family:'Space Mono', monospace;
  font-size:.85rem;
  color:rgba(255,255,255,0.35);
  letter-spacing:.04em;
}

main.article{
  max-width:700px;
  margin:0 auto;
  padding:3.5rem 1.75rem 2rem;
}

.lede{
  font-size:1.18rem;
  color:var(--ink);
}

.toc{
  display:flex; flex-direction:column; gap:.5rem;
  background:var(--navy-soft);
  color:#DDE1EE;
  padding:1.5rem 1.6rem;
  border-radius:var(--radius);
  margin:2.2rem 0 2.8rem;
  font-family:'Space Mono', monospace;
  font-size:.82rem;
}
.toc-label{
  color:var(--amber);
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  margin-bottom:.3rem;
}
.toc a{color:#DDE1EE; text-decoration:none; opacity:.85;}
.toc a:hover{color:var(--amber); opacity:1;}

section{margin:3rem 0;}
section h2{
  font-family:'Fraunces', serif;
  font-weight:500;
  font-size:1.55rem;
  display:flex; align-items:baseline; gap:.8rem;
  margin-bottom:1rem;
  border-bottom:1px solid var(--line);
  padding-bottom:.7rem;
}
.sec-time{
  font-family:'Space Mono', monospace;
  font-size:.85rem;
  color:var(--amber-dim);
  background:#FFF3DA;
  padding:.15rem .5rem;
  border-radius:var(--radius);
  flex-shrink:0;
}

p{color:var(--ink);}
section p{color:#33384A;}

.check-list, .step-list{padding-left:1.2rem; margin:1rem 0;}
.check-list li, .step-list li{margin-bottom:.7rem; color:#33384A;}
.step-list{counter-reset:step;}

.callout{
  background:var(--navy);
  color:var(--cream);
  padding:2.2rem 2rem;
  border-radius:var(--radius);
  margin:3.2rem 0;
}
.callout-eyebrow{
  font-family:'Space Mono', monospace;
  color:var(--amber);
  text-transform:uppercase;
  font-size:.75rem;
  letter-spacing:.08em;
  margin:0 0 .8rem;
}
.callout p:not(.callout-eyebrow){color:#D6DAE8; margin-bottom:1.4rem;}

.faq-item{margin-bottom:1.6rem; padding-bottom:1.6rem; border-bottom:1px solid var(--line);}
.faq-item:last-child{border-bottom:none;}
.faq-q{font-weight:600; color:var(--navy); margin-bottom:.4rem;}

.closing{
  border-top:1px solid var(--line);
  padding-top:2rem;
}
.closing h2{
  border-bottom:none;
  font-family:'Fraunces', serif;
}

.site-footer{
  text-align:center;
  padding:2.2rem 1rem 3rem;
  color:var(--slate);
  font-size:.85rem;
}
.site-footer a{color:var(--slate); text-decoration:underline;}

@media (max-width:640px){
  .hero{padding:4rem 1.25rem 3.5rem 1.5rem;}
  .clock-rail{width:3px;}
  .hero-time{display:none;}
}