/* The a+ header — one header for every a+ page (/a-plus, its ideas and writing, each thesis, /apply).
     a+ logo        → /a-plus   (the start of the studio, wherever you are in it)
     by Akhil Aryan → /         (the person behind it)
     Ideas · Writing · Tools (not live yet) · + me (always and only: apply)
   Self-contained so pages with their own design (a thesis, the form) can take it as is.
   On /a-plus itself the header is also .top, which aplus.css makes fixed and recolours on dark. */
.aph{--aph-ink:#1B1C1E;--aph-acc:#FF3D00;--aph-ground:#FBFAF8;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:22px 40px;color:var(--aph-ink);font-family:'Geist',system-ui,sans-serif}
.aph a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
.aph .brand{display:inline-flex;align-items:baseline;gap:12px}
.aph .lg{display:inline-block;font:500 34px/1 'Archivo',system-ui,sans-serif;font-variation-settings:'wdth' 80;letter-spacing:-.03em}
.aph .lg b{color:var(--aph-acc);font-weight:500}
.aph .by{font:400 13px/1 'Geist',sans-serif;opacity:.75;transition:opacity .3s}
.aph .by:hover{opacity:1}
.aph .nv{display:flex;align-items:center;gap:32px;font:500 14px/1 'Geist',sans-serif}
.aph .nv a{position:relative;padding:6px 0;opacity:.85;transition:opacity .3s}
.aph .nv a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.aph .nv a:hover,.aph .nv a[aria-current]{opacity:1}
.aph .nv a:hover::after,.aph .nv a[aria-current]::after{transform:scaleX(1);transform-origin:left}
/* not live yet: dimmed, not clickable, says so on hover, focus or tap */
.aph .soon{position:relative;padding:6px 0;cursor:not-allowed;outline:none}
.aph .soon>span{opacity:.35}
.aph .soon::after{content:attr(data-soon);position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,-4px);padding:7px 10px;border-radius:6px;background:var(--aph-ink);color:#fff;font:500 11px/1 'Geist',sans-serif;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:2}
.aph .soon:hover::after,.aph .soon:focus::after{opacity:1;transform:translate(-50%,0)}
/* Tools is the nav's last item, and on the form it is the header's last: open the note
   leftward from its right edge so it can never run off the screen */
.aph .nv .soon:last-child::after{left:auto;right:0;transform:translate(0,-4px)}
.aph .nv .soon:last-child:hover::after,.aph .nv .soon:last-child:focus::after{transform:none}
.aph .soon:focus-visible>span{outline:2px solid var(--aph-acc);outline-offset:4px;border-radius:2px}
.aph .pill{display:inline-flex;align-items:center;justify-content:center;height:42px;padding:0 20px;border-radius:999px;background:var(--aph-ink);color:#fff;font:500 15px/1 'Geist',sans-serif;white-space:nowrap;transition:transform .5s cubic-bezier(.34,1.56,.64,1),background .3s,color .3s}
.aph .pill:hover{transform:scale(1.05);background:var(--aph-acc);color:#fff}
.aph a:focus-visible{outline:3px solid var(--aph-acc);outline-offset:3px;border-radius:2px}
/* a solid bar, for pages that scroll under a sticky header (a thesis, the form) */
.aph.bar{position:sticky;top:0;z-index:50;background:var(--aph-ground);border-bottom:1px solid rgba(27,28,30,.1);padding:12px 28px}
.aph.bar .lg{font-size:28px}
.aph.bar .pill{height:38px;padding:0 18px;font-size:14px}
@media (max-width:767px){
  .aph,.aph.bar{padding:14px 20px;gap:14px}
  .aph .lg,.aph.bar .lg{font-size:28px}
  .aph .by{display:none}
  .aph .nv{gap:16px;font-size:13px}
  .aph .pill,.aph.bar .pill{height:36px;padding:0 14px;font-size:14px}
  .aph .pill:active{transform:scale(.94)}
}
@media (max-width:360px){.aph .nv{gap:12px}}
@media (prefers-reduced-motion:reduce){.aph .pill,.aph .nv a::after,.aph .soon::after{transition:none}}