/* ===================================================================
   site-chrome.css — canonical nav + footer for ashokmehan.com
   Loaded on every page. Edit HERE to change the menu/footer everywhere.
   Pairs with /js/site-chrome.js
   =================================================================== */

:root{
  --ink:#0d0f12; --panel:#15181d; --panel-2:#1b1f26; --line:#2a2f38;
  --paper:#ece6da; --paper-dim:#9aa0a8; --paper-faint:#6b7280;
  --amber:#e0a44a; --amber-bright:#f3bd63; --signal:#d6573f; --teal:#5fb0a5;
}

/* Hide any legacy nav/footer/signup instantly so there's no flash before JS swaps them */
nav.site-nav, nav.topnav, body > footer:not(.hf-footer), .dispatch-signup{ display:none !important; }

/* ─────────── TOP NAV ─────────── */
.hf-nav{
  position:sticky; top:0; z-index:1000;
  background:rgba(13,15,18,.92); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  font-family:'Space Grotesk',sans-serif;
}
.hf-nav__inner{
  max-width:1080px; margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; height:60px;
}
.hf-brand{
  font-family:'Fraunces',serif; font-weight:900; font-size:1.15rem;
  color:var(--paper); text-decoration:none; letter-spacing:-.01em; white-space:nowrap;
}
.hf-brand:hover{ color:var(--amber-bright); }
.hf-brand .dot{ color:var(--amber); }

.hf-menu{ display:flex; align-items:center; gap:2px; list-style:none; margin:0; padding:0; }
.hf-menu > li{ position:relative; }
.hf-menu > li > a, .hf-menu > li > button{
  display:flex; align-items:center; gap:5px; height:60px; padding:0 14px;
  font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim);
  background:none; border:none; border-bottom:2px solid transparent; cursor:pointer;
  text-decoration:none; transition:color .2s, border-color .2s;
}
.hf-menu > li > a:hover, .hf-menu > li > button:hover,
.hf-menu > li.open > button{ color:var(--paper); border-bottom-color:var(--amber); }
.hf-menu > li > a.current, .hf-menu > li.has-current > button{
  color:var(--amber); border-bottom-color:var(--amber);
}
.hf-menu .arrow{ font-size:8px; opacity:.7; transition:transform .25s; }
.hf-menu > li.open .arrow{ transform:rotate(180deg); }

/* dropdown */
.hf-sub{
  position:absolute; top:60px; left:0; min-width:230px;
  background:var(--panel); border:1px solid var(--line); border-top:2px solid var(--amber);
  border-radius:0 0 8px 8px; box-shadow:0 18px 40px rgba(0,0,0,.5);
  opacity:0; visibility:hidden; transform:translateY(-6px);
  transition:opacity .2s, transform .2s, visibility .2s; list-style:none; padding:6px 0; margin:0;
}
.hf-menu > li.open .hf-sub{ opacity:1; visibility:visible; transform:none; }
.hf-sub li a{
  display:block; padding:11px 18px; font-family:'Space Grotesk',sans-serif;
  font-size:.9rem; color:var(--paper-dim); text-decoration:none;
  border-left:2px solid transparent;
}
.hf-sub li a:hover{ color:var(--paper); background:var(--panel-2); border-left-color:var(--amber); }
.hf-sub li a.current{ color:var(--amber); border-left-color:var(--amber); }
.hf-sub .tag{
  display:block; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--paper-faint); padding:8px 18px 2px;
}

.hf-burger{ display:none; background:none; border:none; color:var(--paper); cursor:pointer; padding:8px; font-size:1.3rem; }

@media(max-width:820px){
  .hf-burger{ display:block; }
  .hf-menu{
    position:absolute; top:60px; left:0; right:0; flex-direction:column; align-items:stretch; gap:0;
    background:var(--panel); border-bottom:1px solid var(--line); padding:8px 0;
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  .hf-menu.show{ max-height:640px; overflow:auto; }
  .hf-menu > li > a, .hf-menu > li > button{ height:auto; padding:13px 28px; width:100%; border-bottom:none; justify-content:space-between; }
  .hf-sub{ position:static; opacity:1; visibility:visible; transform:none; border:none; box-shadow:none;
    background:var(--panel-2); border-radius:0; max-height:0; overflow:hidden; padding:0; }
  .hf-menu > li.open .hf-sub{ max-height:360px; padding:4px 0; }
  .hf-sub li a{ padding-left:42px; }
}

/* ─────────── SOURCES & FURTHER READING (canonical, per essay-001) ─────────── */
.sources{ padding:44px 0; border-bottom:1px solid var(--line); }
.src-title{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--amber); margin-bottom:18px; }
.sources ol{ list-style:none; counter-reset:s; display:grid; grid-template-columns:1fr 1fr; column-gap:44px; margin:0; padding:0; }
.sources li{ break-inside:avoid; margin-bottom:14px; padding-left:26px; position:relative; font-size:.86rem; color:var(--paper-dim); line-height:1.5; }
.sources li::before{ counter-increment:s; content:counter(s); position:absolute; left:0; top:0; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--amber); }
.sources li em{ color:var(--paper); }
.sources a{ color:var(--amber); text-decoration:none; }
.sources a:hover{ text-decoration:underline; }
.essay-nav{ display:flex; justify-content:space-between; gap:16px; padding:40px 0 0; flex-wrap:wrap; }
.essay-nav a{ font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.08em; padding:11px 20px; border:1px solid var(--line); border-radius:6px; color:var(--paper-dim); text-decoration:none; }
.essay-nav a:hover{ color:var(--paper); border-color:var(--amber); }
sup a{ font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--amber); text-decoration:none; font-weight:500; display:inline-block; }
@media(max-width:760px){ .sources ol{ grid-template-columns:1fr; } }

/* ─────────── FOOTER ─────────── */
.hf-footer{
  background:var(--ink); border-top:1px solid var(--line);
  color:var(--paper-faint); font-family:'Space Grotesk',sans-serif; margin-top:64px;
}
.hf-footer__inner{ max-width:1080px; margin:0 auto; padding:52px 28px 72px; }
.hf-foot-top{ display:flex; flex-wrap:wrap; gap:48px; justify-content:space-between; padding-bottom:36px; border-bottom:1px solid var(--line); }
.hf-foot-brand .t{ font-family:'Fraunces',serif; font-weight:600; font-size:1.3rem; color:var(--paper); margin-bottom:8px; }
.hf-foot-brand .s{ font-size:.88rem; max-width:32ch; line-height:1.55; }
.hf-foot-col h4{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); margin:0 0 14px; }
.hf-foot-col ul{ list-style:none; margin:0; padding:0; }
.hf-foot-col li{ margin-bottom:8px; }
.hf-foot-col a{ color:var(--paper-faint); text-decoration:none; font-size:.88rem; transition:color .2s; }
.hf-foot-col a:hover{ color:var(--amber); }

.hf-sub-form{ min-width:260px; }
.hf-sub-form h4{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--amber); margin:0 0 10px; }
.hf-sub-form p{ font-size:.82rem; line-height:1.5; margin:0 0 12px; max-width:34ch; }
.hf-sub-form form{ display:flex; gap:8px; flex-wrap:wrap; }
.hf-sub-form input{ flex:1; min-width:180px; padding:10px 12px; background:var(--panel); border:1px solid var(--line); color:var(--paper); font-family:'Space Grotesk',sans-serif; font-size:.85rem; border-radius:4px; }
.hf-sub-form button{ padding:10px 18px; background:var(--amber); color:var(--ink); border:none; border-radius:4px; font-family:'JetBrains Mono',monospace; font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background .2s; }
.hf-sub-form button:hover{ background:var(--amber-bright); }
.hf-sub-msg{ margin-top:10px; font-size:.8rem; font-style:italic; min-height:1em; }
.hf-sub-msg.ok{ color:var(--teal); } .hf-sub-msg.err{ color:var(--signal); }

.hf-foot-bottom{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; justify-content:space-between; font-size:.8rem; padding-top:26px; }
.hf-foot-bottom a{ color:var(--amber); text-decoration:none; }
.hf-social{ display:flex; align-items:center; gap:16px; order:2; }
.hf-social a{ color:var(--paper-faint); display:flex; transition:color .2s; }
.hf-social a:hover{ color:var(--amber); }
.hf-social svg{ width:18px; height:18px; }
@media(max-width:640px){ .hf-foot-bottom{ justify-content:center; text-align:center; } .hf-social{ order:0; } }

@media(max-width:640px){ .hf-foot-top{ flex-direction:column; gap:30px; } }