/* ============================================================
   EMMANUEL NTURANYENABO: DIGITAL THESIS
   Design tokens
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;1,9..144,400;1,9..144,500&family=Inter:wght@400;500;600&display=swap');

:root{
  --ink:        #0B0B0C;
  --ink-soft:   #141414;
  --paper:      #EDEAE3;
  --paper-dim:  #B9B4A9;
  --gold:       #C9A24B;
  --oxblood:    #8C2E23;
  --line:       rgba(237,234,227,0.14);

  --display: 'Bebas Neue', sans-serif;
  --serif:   'Fraunces', serif;
  --body:    'Inter', sans-serif;

  --wide: 1180px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scroll-behavior:smooth; }

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

::selection{ background:var(--gold); color:var(--ink); }

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

/* ---------- Chapter mark (signature element) ----------
   A running vertical tag on the left edge, like a book's
   printed running header, naming which chapter you're in. */
.chapter-mark{
  position:fixed;
  left:0; top:0;
  height:100vh;
  width:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:40;
  pointer-events:none;
}
.chapter-mark span{
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--body);
  font-size:11px;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--paper-dim);
  white-space:nowrap;
}
.chapter-mark::after{
  content:'';
  position:absolute;
  bottom:48px;
  left:50%;
  transform:translateX(-50%);
  width:1px;
  height:64px;
  background:var(--line);
}

/* ---------- Nav ---------- */
.site-nav{
  position:fixed;
  top:0; left:44px; right:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px 48px;
  background:linear-gradient(to bottom, rgba(11,11,12,0.92), rgba(11,11,12,0));
  backdrop-filter:blur(2px);
}
.site-nav .mark{
  font-family:var(--serif);
  font-style:italic;
  font-size:18px;
  letter-spacing:0.02em;
  color:var(--paper);
}
.site-nav ul{
  display:flex;
  gap:34px;
  list-style:none;
}
.site-nav ul li a{
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--paper-dim);
  transition:color .25s ease;
  position:relative;
}
.site-nav ul li a::after{
  content:'';
  position:absolute; left:0; bottom:-6px;
  width:0; height:1px;
  background:var(--gold);
  transition:width .25s ease;
}
.site-nav ul li a:hover,
.site-nav ul li a.active{ color:var(--paper); }
.site-nav ul li a.active::after,
.site-nav ul li a:hover::after{ width:100%; }

@media (max-width:820px){
  .chapter-mark{ display:none; }
  .site-nav{ left:0; padding:20px 22px; justify-content:center; }
  .site-nav .mark{ display:none; }
  .site-nav ul{ gap:18px; flex-wrap:wrap; justify-content:center; }
  .site-nav ul li a{ font-size:10.5px; }
}

/* ---------- Layout helpers ---------- */
.wrap{
  max-width:var(--wide);
  margin:0 auto;
  padding:0 48px;
}
@media (max-width:820px){
  .wrap{ padding:0 22px; }
}

section{ position:relative; }

.eyebrow{
  font-size:12px;
  letter-spacing:0.24em;
  text-transform:uppercase;
  color:var(--gold);
  display:flex;
  align-items:center;
  gap:14px;
}
.eyebrow::before{
  content:'';
  width:28px; height:1px;
  background:var(--gold);
}

.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.visible{ opacity:1; transform:none; }

/* ---------- Footer ---------- */
footer{
  border-top:1px solid var(--line);
  padding:64px 48px 40px;
  margin-left:44px;
}
footer .wrap{
  display:grid;
  grid-template-columns:1.2fr 0.8fr 1.3fr;
  gap:48px;
}
.footer-brand{
  display:flex;
  flex-direction:column;
  gap:18px;
}
.footer-brand-mark{
  font-family:var(--serif);
  font-style:italic;
  font-size:19px;
  color:var(--paper);
}
.footer-brand-tag{
  font-size:13px;
  color:var(--paper-dim);
  max-width:260px;
  line-height:1.5;
}
.footer-social{
  display:flex;
  gap:16px;
}
.footer-social a{
  display:flex;
  align-items:center;
  justify-content:center;
  width:32px; height:32px;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--paper-dim);
  transition:border-color .25s ease, color .25s ease;
}
.footer-social a:hover{
  border-color:var(--gold);
  color:var(--gold);
}
.footer-social svg{ width:15px; height:15px; }
.footer-toc{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.footer-toc-label{
  font-size:11px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold);
  margin-bottom:6px;
}
.footer-toc a{
  font-size:13px;
  color:var(--paper-dim);
}
.footer-toc a:hover{ color:var(--gold); }
.footer-contact{
  max-width:320px;
}
.footer-contact-label{
  font-family:var(--serif);
  font-style:italic;
  font-size:15px;
  color:var(--paper-dim);
  margin-bottom:14px;
}
.footer-contact-form{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.footer-contact-form input,
.footer-contact-form textarea{
  background:transparent;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--paper);
  font-family:var(--body);
  font-size:13px;
  padding:8px 0;
  resize:none;
  transition:border-color .25s ease;
}
.footer-contact-form input::placeholder,
.footer-contact-form textarea::placeholder{ color:var(--paper-dim); }
.footer-contact-form input:focus,
.footer-contact-form textarea:focus{ outline:none; border-color:var(--gold); }
.footer-contact-form button{
  align-self:flex-start;
  background:none;
  border:none;
  border-bottom:1px solid var(--line);
  color:var(--paper);
  font-size:12px;
  letter-spacing:0.16em;
  text-transform:uppercase;
  padding-bottom:6px;
  cursor:pointer;
  transition:border-color .25s ease, color .25s ease;
}
.footer-contact-form button:hover{ border-color:var(--gold); color:var(--gold); }
.footer-meta{
  font-size:11px;
  color:var(--paper-dim);
  letter-spacing:0.08em;
  margin-top:44px;
  padding-top:24px;
  border-top:1px solid var(--line);
}
@media (max-width:820px){
  footer{ margin-left:0; padding:48px 22px 32px; }
  footer .wrap{ grid-template-columns:1fr; gap:36px; }
}