/* Vestige Defense, shared stylesheet.
   Chrome: masthead, boxed destinations, footer strip, corner marks.
   Page layout lives in each page's own style block. */

:root{
  --navy:#1a1b1d; --bg:#1a1b1d; --panel:#232427; --rule:#3a3c40;
  --white:#fff; --head:#f4f1e8; --body:#e8e4d8;
  --muted:#b5b1a6; --dim:#8e8a80; --sand:#c8b89a;

  --f:'IBM Plex Sans',ui-sans-serif,-apple-system,"Segoe UI",Arial,sans-serif;
  --fc:'IBM Plex Sans Condensed','IBM Plex Sans',Arial,sans-serif;

  --t-page:44px; --t-head:26px; --t-sub:20px;
  --t-body:17px; --t-cap:13px; --t-unit:11px;

  --edge:52px; --in:52px; --m-read:34rem; --m-bio:31.5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scrollbar-gutter:stable}
body{
  margin:0; min-height:100vh; display:flex; flex-direction:column;
  background:var(--navy); color:var(--body);
  font:400 var(--t-body)/1.62 var(--f); -webkit-font-smoothing:antialiased;
}
main{flex:1 0 auto}
a{color:inherit}
img{display:block; max-width:100%}
::selection{background:rgba(200,184,154,.25)}

h1{margin:0 0 18px; font:700 var(--t-page)/1.06 var(--fc);
   letter-spacing:-.015em; text-transform:uppercase; color:var(--white)}
p{margin:0 0 18px}
p:last-child{margin-bottom:0}

/* masthead */
.top{display:flex; align-items:flex-start; justify-content:space-between;
     gap:24px; padding:32px var(--edge) 0}
.id{display:flex; align-items:center; gap:14px; text-decoration:none}
.id svg{width:40px; height:31px; display:block; flex:none}
.wm{display:block; font:700 15px/1.05 var(--fc);
    letter-spacing:.14em; text-transform:uppercase; color:var(--white)}
nav{display:flex; gap:12px}
nav a{
  font:600 11px/1 var(--f); letter-spacing:.24em; text-transform:uppercase;
  text-decoration:none; color:var(--sand); border:1px solid var(--sand);
  padding:13px 20px; transition:background-color .14s linear, color .14s linear;
}
nav a:hover{background:var(--sand); color:var(--navy)}

/* footer utility strip */
footer{
  flex:none; padding:0 var(--edge) 36px;
  display:flex; justify-content:space-between; gap:12px 48px;
  font:500 var(--t-unit)/1.4 var(--f); letter-spacing:.18em;
  text-transform:uppercase; color:rgba(232,228,216,.78);
}
footer b{font-weight:500; color:var(--dim)}
footer .v{color:var(--bone,var(--body))}
footer a{color:var(--body); text-decoration:none;
         border-bottom:1px solid var(--rule); padding-bottom:3px;
         transition:border-color .14s linear}
footer a:hover{border-color:var(--sand)}

@media (max-width:860px){
  :root{--edge:22px; --in:22px; --t-page:32px}
  .top{flex-direction:column; align-items:flex-start; gap:20px; padding-top:26px}
  nav a{padding:11px 15px; letter-spacing:.18em}
  footer{gap:10px 24px}
  body{font-size:16px}
}