/* ============================================================
   Asma Irfan · SHELL
   The nav, the on-this-page rail, and the footer. All three are
   byte-identical on both pages; what differs is marked at
   runtime, never by maintaining two copies.
   ============================================================ */
@layer shell{

.wordmark{font:400 20px/1 var(--serif);color:var(--ink)}
.wordmark b{font-weight:400;color:var(--clay)}

/* ============================================================
   NAV - pages only.
   The top bar lists the two things that are actually pages.
   Sections live in the rail (wide) or the panel (narrow), so a
   reader never has to guess whether a link navigates or scrolls.
   ============================================================ */
.nav{
  position:sticky;top:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-6);
  padding:var(--sp-4) var(--edge);
  border-bottom:1px solid var(--hairline-soft);
  background:var(--white);
  transition:background var(--dur-fast) var(--ease-out),
             box-shadow var(--dur-fast) var(--ease-out),
             backdrop-filter var(--dur-fast);
}
.nav.scrolled{
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px);
  backdrop-filter:blur(16px);
  box-shadow:var(--shadow-nav);
}
.nav-right{display:flex;align-items:center;gap:var(--sp-6)}

.nav-pages{display:flex;align-items:center;gap:var(--sp-6)}
.nav-pages a{
  position:relative;
  font:500 15px/1 var(--sans);color:var(--dim);
  padding-block:var(--sp-2);
  transition:color .15s;
}
.nav-pages a:hover{color:var(--clay-deep)}
.nav-pages a[aria-current="page"]{color:var(--clay-deep)}
.nav-pages a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:0;
  height:2px;border-radius:2px;background:var(--clay);
  animation:navmark .32s var(--ease-out) both;
}
@keyframes navmark{from{transform:scaleX(0);opacity:0}to{transform:none;opacity:1}}

/* social marks - a deliberate exception to "no icons", drawn as
   thin outline strokes so they sit with the text. */
.nav-social{
  display:flex;align-items:center;gap:var(--sp-1);
  padding-left:var(--sp-5);
  border-left:1px solid var(--hairline);
}
.nav-social a{
  display:grid;place-items:center;width:34px;height:34px;
  border-radius:50%;color:var(--muted);
  transition:color .15s,background .15s;
}
.nav-social a:hover{color:var(--clay-deep);background:rgba(185,112,75,.09)}
.nav-social svg{width:18px;height:18px}

.nav .btn{padding:11px 22px;font-size:13.5px}
.nav .btn--primary{color:#fff}

/* ---- burger: only exists where the rail cannot ------------ */
.nav-burger{
  display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:38px;height:38px;border-radius:10px;transition:background .15s;
}
.nav-burger:hover{background:rgba(46,37,28,.05)}
.nav-burger span{
  display:block;width:19px;height:1.75px;border-radius:2px;background:var(--ink);
  transition:transform .24s var(--ease-out),opacity .16s linear;
}
.nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.75px) rotate(45deg)}
.nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.75px) rotate(-45deg)}

/* ---- the popped-out menu ----------------------------------
   The only navigation a phone gets, so it names what each
   destination is rather than just labelling it, and carries the
   ways to reach her. A sheet, not a dropdown of two links. */
/* Full screen, and a sibling of the nav rather than a child: the
   scrolled nav applies backdrop-filter, which makes it a containing
   block for fixed-position descendants, so a fixed child would size
   itself to the bar instead of the viewport.
   It sits under the nav in z-order, so the bar stays put as the
   header and its close button keeps working. */
.nav-panel{
  position:fixed;inset:0;z-index:40;
  overflow-y:auto;overscroll-behavior:contain;
  background:var(--white);
  display:flex;flex-direction:column;
  padding:calc(var(--nav-h, 70px) + var(--sp-6)) var(--edge) var(--sp-8);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .22s var(--ease-out),
             transform .26s var(--ease-out),
             visibility .26s;
}
.nav-panel.open{opacity:1;visibility:visible;transform:none}

/* the two pages, each with a line saying what it is */
.np-pages a{
  display:block;padding:var(--sp-5) 0;
  border-bottom:1px solid var(--hairline);
  transition:transform .18s var(--ease-out);
}
.np-pages a:hover{transform:translateX(3px)}
.np-title{
  display:block;position:relative;
  font:400 clamp(24px,7vw,30px)/1.15 var(--serif);color:var(--ink);
  transition:color .15s;
}
/* the page you are not on gets the invitation */
.np-pages a:not([aria-current="page"]) .np-title::after{
  content:"→";margin-left:.4em;color:var(--clay);
  font-family:var(--sans);font-size:.62em;vertical-align:.1em;
}
.np-pages a[aria-current="page"] .np-title{color:var(--clay-deep)}
.np-desc{
  display:block;margin-top:6px;max-width:34ch;
  font:400 var(--fs-m)/1.5 var(--sans);color:var(--dim);
}

/* reach: four real targets, not two 16px glyphs in a corner */
.np-reach{margin-top:var(--sp-6)}
.np-reach .kicker{display:block;--k-color:var(--muted)}
.np-icons{display:flex;gap:var(--sp-3);margin-top:var(--sp-4)}
.np-icons a{
  display:grid;place-items:center;width:46px;height:46px;
  border:1px solid var(--hairline-strong);border-radius:50%;
  color:var(--dim);
  transition:color .15s,border-color .15s,background .15s;
}
.np-icons a:hover{color:var(--clay-deep);border-color:var(--clay);background:rgba(185,112,75,.07)}
.np-icons svg{width:20px;height:20px}

.np-note{
  margin-top:auto;padding-top:var(--sp-8);
  font-size:20px;color:var(--clay-light);
}

/* ============================================================
   ON THIS PAGE - the section rail.
   Sections are a different kind of destination from pages, so
   they get a different instrument: tick marks in the right
   gutter, label revealed on hover and for the current one.
   Built from [data-nav] by main.js, so there is no list to
   keep in sync.
   ============================================================ */
.secnav{
  --idle:var(--rail-idle);
  --idle-engaged:var(--dim);
  position:fixed;z-index:40;
  right:14px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;align-items:flex-end;
}
.secnav a{
  display:flex;align-items:center;justify-content:flex-end;gap:9px;
  padding:9px 0;color:var(--idle);
  transition:color .22s var(--ease-out);
}
.secnav-label{
  font:400 14px/1.35 var(--sans);
  text-align:right;max-width:132px;
}
/* the dash follows the label, so the whole row reads as one weight */
.secnav-dash{
  flex:none;display:block;width:20px;height:2.5px;border-radius:2px;
  background:currentColor;
  transition:background .22s var(--ease-out);
}

/* At rest the index is deliberately pale - about 1.8:1, which is a
   look rather than a readable state. Engaging with it at all, by
   pointer or by keyboard, brings the whole thing up to 5.7:1, so
   anyone actually trying to read it can. */
.secnav:hover a,
.secnav:focus-within a{color:var(--idle-engaged)}

/* declared after the hover rule so the current section keeps its
   colour whichever state the rail is in */
.secnav a[aria-current="true"]{color:var(--clay-deep)}
.secnav a[aria-current="true"] .secnav-dash{background:var(--clay)}
.secnav a:hover,.secnav a:focus-visible{color:var(--clay-deep)}

/* over the ink and clay bands */
.secnav.on-dark{--idle:rgba(246,239,228,.5);--idle-engaged:var(--on-clay)}
.secnav.on-dark a[aria-current="true"]{color:#fff}
.secnav.on-dark a[aria-current="true"] .secnav-dash{background:var(--clay-light)}

@media (max-width:1239px){
  .secnav{display:none}
  .nav-burger{display:flex}
}
@media (min-width:1240px){
  .nav-panel{display:none}
}
@media (max-width:700px){
  /* pages and profiles live in the menu here, so the bar is just
     the wordmark, the one thing to do, and the way in */
  .nav-pages,.nav-social{display:none}
  .nav-right{gap:var(--sp-3)}
  .wordmark{font-size:18px}
  .nav .btn{padding:10px 18px;font-size:13px}
}
@media (max-width:460px){
  .nav-pages a{font-size:14px}
  .nav-right{gap:var(--sp-3)}
}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:var(--ink);color:var(--on-dark)}
.footer .kicker{--k-color:var(--clay-light)}

.footer-main{
  display:flex;justify-content:space-between;
  gap:clamp(32px,5vw,80px);
  padding:clamp(48px,5.5vw,76px) var(--edge) clamp(32px,3.5vw,48px);
}
.footer-id{max-width:400px}
.footer-id .wordmark{font-size:26px;color:var(--on-dark)}
.footer-blurb{
  margin-top:var(--sp-4);
  font:400 var(--fs-m)/1.7 var(--sans);color:var(--on-dark-dim-2);
  max-width:330px;
}
.footer-hand{margin-top:var(--sp-5);font-size:21px;color:var(--clay-light)}

/* One list, not three columns of section links. The sticky nav
   carries the pages and the index carries the sections, so a footer
   sitemap was restating navigation the reader already has; what it
   could not get anywhere else is how to actually reach her. */
.footer-reach{flex:none;width:min(320px,100%)}
.footer-reach .kicker{display:block;margin-bottom:var(--sp-3)}
.footer-reach .rule-list{--row-y:var(--sp-3)}
.footer-reach a{
  display:flex;align-items:center;gap:var(--sp-3);
  font:400 var(--fs-m)/1.45 var(--sans);color:var(--on-dark);
  transition:color .15s,transform .15s var(--ease-out);
}
.footer-reach a svg{flex:none;width:17px;height:17px;color:var(--clay-light)}
.footer-reach a:hover{color:var(--clay-light);transform:translateX(3px)}

/* the most important lines in the footer, treated that way */
/* scoped: the composer section already owns a .crisis paragraph */
.footer .crisis{
  margin:0 var(--edge) clamp(28px,3vw,40px);
  background:rgba(185,112,75,.18);
  border-left:3px solid var(--clay);
  border-radius:0 var(--radius-panel) var(--radius-panel) 0;
  padding:var(--sp-5) var(--sp-7);
}
.crisis-k{--k-color:var(--clay-light);display:block}
.crisis-msg{
  margin-top:6px;
  font:400 var(--fs-base)/1.6 var(--sans);color:var(--on-dark);
  max-width:640px;
}
.crisis-msg b{font-weight:600;color:var(--clay-light)}

.footer-bar{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  padding:var(--sp-5) var(--edge) var(--sp-8);
  border-top:1px solid var(--hairline-dark);
  font:500 var(--fs-xs)/1.5 var(--sans);color:var(--on-dark-dim-2);
}

@media (max-width:900px){
  .footer-main{flex-direction:column;gap:var(--sp-8);padding-top:44px}
  .footer-reach{width:100%}
  .footer-bar{flex-direction:column;align-items:flex-start;gap:6px}
}

}