/* ==========================================================================
   iPattern — shared chrome (header + footer) and base reset.
   Markup is rendered by /assets/js/chrome.js (<site-header>, <site-footer>).
   Styling mirrors the About Me design header/footer 1:1, using /tokens.css.
   ========================================================================== */
html,body{margin:0;padding:0;}
body{background:var(--bg);color:var(--ink);font-family:var(--font-body);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
::selection{background:var(--accent);color:var(--bg);}
*,*::before,*::after{box-sizing:border-box;}
a{color:var(--ink);text-decoration:none;}
a:hover{color:var(--accent);}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-transform:inherit;letter-spacing:inherit;white-space:nowrap;}

/* ---- header ---- */
site-header{display:block;position:relative;z-index:20;}
site-header[fixed]{position:fixed;top:0;left:0;right:0;}
.ip-header{padding:var(--header-pt) var(--pad-x) var(--section-gap);display:flex;align-items:center;justify-content:space-between;gap:var(--gap-nav);color:var(--ink);}
.ip-logo,.ip-logo:hover{display:flex;align-items:flex-start;color:var(--ink);font-family:var(--font-display);font-weight:900;letter-spacing:var(--track-logo);font-size:var(--logo);line-height:1;transition:opacity var(--dur);white-space:nowrap;}
.ip-logo:hover{opacity:.8;}
.ip-logo .deg{font-size:var(--logo-deg);margin-top:-0.125rem;margin-left:0.125rem;line-height:1;}
.ip-nav{display:flex;align-items:center;gap:var(--gap-nav);font-weight:500;text-transform:uppercase;letter-spacing:var(--track-nav);font-size:var(--nav);}
.ip-nav a,.ip-nav button{color:var(--ink);transition:color var(--dur);white-space:nowrap;}
.ip-nav a:hover,.ip-nav button:hover{color:var(--accent);}
.ip-nav .ip-sep{color:var(--sep);font-weight:400;}
.ip-nav .ip-contact{position:relative;display:flex;align-items:center;}
.ip-nav .ip-contact svg{width:var(--icon);height:var(--icon);display:block;}
/* narrow phones: the design has no mobile nav, so let the nav wrap under the logo instead of clipping */
@media (max-width:560px){
  .ip-header{flex-wrap:wrap;row-gap:var(--section-gap);}
  .ip-nav{width:100%;justify-content:flex-start;gap:clamp(0.75rem,3vw,1.25rem);}
}

/* ---- footer ---- */
site-footer{display:block;position:relative;z-index:10;}
site-footer[fixed]{position:fixed;left:0;right:0;bottom:0;pointer-events:none;}
.ip-footer{padding:0 var(--pad-x) var(--pad-y);text-align:center;text-transform:uppercase;letter-spacing:var(--track-micro);font-size:var(--micro);color:var(--muted);}
site-footer[fixed] .ip-footer{padding-bottom:calc(var(--pad-y) * .5);}