/* ============================================================
   baileyw.com — shared foundation
   Linked by index.html, resume.html, index-list.html.
   Page-specific rules stay in each page's own <style> block.
   Anything that appears on more than one page belongs HERE, so
   the three pages cannot drift apart again.
   ============================================================ */

@font-face{
  font-family:'Satoshi';
  src:url('fonts/Satoshi-Variable.woff2') format('woff2-variations');
  font-weight:300 900;font-style:normal;font-display:swap;
}

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

/* Registered so it can be interpolated. The icon size is a plain number
   multiplied by 1em, which means it tracks the animating font-size AND
   animates its own multiplier — no transition on `height` itself, which
   would otherwise chase a target that font-size is still moving. */
@property --nav-icon-scale{
  syntax:"<number>";
  inherits:true;
  initial-value:2.5;
}

:root{
  --bg:#0a0a0a;
  --fg:#f0f0f0;
  --fg-dim:#888;
  --fg-sub:#7d7d7d;   /* nav sub-labels: 4.6:1 on --bg (was #555 = 3.1:1) */
  --accent:#5b8abd;

  /* Single shared left edge. Page content, section titles and the
     wordmark all sit on this line so nothing is off by a few px. */
  --edge:4px;

  --mark-size:clamp(26px,2.9vw,44px);
  --nav-size:clamp(20px,2.35vw,38px);
  --nav-gap:clamp(14px,2.4vw,38px);

  /* Nav icon size as a multiple of the word beside it. Single knob —
     change this one number to rescale every icon in the bar. */
  --nav-icon-scale:2.5;
  --nav-icon-drop:0em;      /* raises icons off the shared bottom line */

  /* One timing for the whole header compaction, so every part of the bar
     resizes on the same curve instead of snapping. */
  --bar-dur:.32s;
  --bar-ease:cubic-bezier(.4,0,.2,1);
}

html{
  font-family:'Satoshi','Helvetica Neue',Helvetica,Arial,sans-serif;
  background:var(--bg);color:var(--fg);
}
body{min-height:100vh;padding:0 1%}

/* ── Header ───────────────────────────────────────────────────
   Sticky: full size at rest, compacts to a slim bar once you
   scroll past it (see .compact below, toggled by site.js).
   ------------------------------------------------------------ */
header{
  position:sticky;top:0;z-index:100;
  display:flex;align-items:flex-start;gap:clamp(16px,2.5vw,40px);
  padding:22px var(--edge) 14px;
  background:var(--bg);
  transition:
    padding var(--bar-dur) var(--bar-ease),
    background-color var(--bar-dur) var(--bar-ease),
    border-color var(--bar-dur) var(--bar-ease),
    backdrop-filter var(--bar-dur) var(--bar-ease);
  border-bottom:1px solid transparent;
}

.wordmark{
  font-size:var(--mark-size);font-weight:400;letter-spacing:-.02em;line-height:1.02;
  color:var(--fg);text-decoration:none;white-space:nowrap;flex-shrink:0;
  transition:
    font-size var(--bar-dur) var(--bar-ease),
    line-height var(--bar-dur) var(--bar-ease);
}
.supertext{display:none}

nav{
  display:flex;align-items:stretch;   /* every item takes the tallest item's
                                         height, giving the icons one shared
                                         bottom line to sit on */
  gap:var(--nav-gap);
  margin-left:auto;min-width:0;
  transition:
    gap var(--bar-dur) var(--bar-ease),
    --nav-icon-scale var(--bar-dur) var(--bar-ease);
}

/* Icon and word share one top line, so items with sub-labels and
   items without still align to the same baseline. */
nav a{
  display:flex;align-items:flex-start;gap:.22em;
  font-size:var(--nav-size);font-weight:400;letter-spacing:-.02em;line-height:1;
  color:var(--fg-dim);text-decoration:none;
  transition:color .2s,font-size var(--bar-dur) var(--bar-ease);
  white-space:nowrap;
}
nav a:hover,nav a.active{color:var(--fg)}

/* height-only sizing: each icon fills its own box, so the gap between
   icon and word is identical across icons despite their differing
   viewBox ratios (98x125, 94x126, 104x98, 90x92, 98x92). */
/* Icons bottom-align with the bottom of the text block; the words stay on
   their shared top line. --nav-icon-drop nudges the icons off that line. */
/* The calc lives here, not in :root — a nested var() inside a custom
   property is resolved where that property is DECLARED, so hoisting it to
   :root would bake in the root scale and ignore the per-state overrides. */
nav a img{
  height:calc(var(--nav-icon-scale) * 1em);width:auto;flex-shrink:0;
  align-self:flex-end;
  /* negative top margin cancels the icon's own height, so the text block
     alone sets the row height and the icon can be taller than the text
     without pushing its own bottom edge below it */
  margin-top:calc(-1 * var(--nav-icon-scale) * 1em);
  margin-bottom:var(--nav-icon-drop);
  /* height and margin follow the animated font-size and scale directly,
     so they must NOT have their own transitions */
  opacity:.5;transition:opacity .2s;
}
nav a:hover img,nav a.active img{opacity:.8}

nav a>span{line-height:1}

/* Collapses rather than display:none-ing, because display cannot be
   transitioned — that switch was the hardest jump in the old bar. */
.nav-sub{
  display:block;
  font-size:clamp(10px,.32em,14px);font-weight:300;letter-spacing:.04em;line-height:1.35;
  color:var(--fg-sub);margin-top:.28em;
  max-height:6em;opacity:1;overflow:hidden;
  transition:
    max-height var(--bar-dur) var(--bar-ease),
    opacity calc(var(--bar-dur) * .6) var(--bar-ease),
    margin-top var(--bar-dur) var(--bar-ease);
}

/* ── Compact (scrolled) state ─────────────────────────────── */
header.compact{
  padding:9px var(--edge);
  background:rgba(10,10,10,.94);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border-bottom-color:#1e1e1e;
  --mark-size:15px;
  --nav-size:clamp(14px,1.35vw,18px);
  --nav-gap:clamp(14px,1.8vw,28px);
}
header.compact .wordmark{line-height:1.1}
header.compact .nav-sub{max-height:0;opacity:0;margin-top:0}
/* In the slim bar the icon matches the word height, so nothing overhangs
   the reduced padding. Set on nav so it beats the breakpoint overrides. */
header.compact nav{--nav-icon-scale:1.15}

/* ── Focus ────────────────────────────────────────────────── */
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── Footer ───────────────────────────────────────────────── */
footer{
  padding:40px var(--edge) 24px;
  font-size:.6rem;letter-spacing:.25em;text-transform:uppercase;
  color:#333;text-align:center;
}

/* ── Responsive ───────────────────────────────────────────── */

/* Tablet: drop the sub-labels before the row ever has to clip.
   With the sub-labels gone the text block is only one line tall, so a
   bottom-aligned icon overhangs above it — the header needs headroom
   for that overhang, and the icon runs a little smaller. */
@media(max-width:1000px){
  .nav-sub{display:none}
  header{padding-top:38px}
  nav{--nav-icon-scale:1.9}
  header.compact{padding-top:9px}
}

/* Phone: nav moves to its own full-width line under the wordmark
   and distributes, rather than scrolling out of reach. */
@media(max-width:680px){
  header{flex-wrap:wrap;padding-top:16px;gap:18px}
  nav{
    margin-left:0;width:100%;
    justify-content:space-between;
    gap:8px;
    --nav-size:clamp(13px,3.7vw,18px);
    /* five items must share one row here, so the icons run smaller
       than the desktop --nav-icon */
    --nav-icon-scale:1.75;
  }
  header.compact{padding-top:8px;gap:6px}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important;
  }
}