/* Shared foundation for home.simister.xyz.
   Tokens live here so the two pages cannot drift apart. Page-specific layout
   stays inline in each page. */

:root{
  --void:#0B1020;
  --slate:#141A2B;
  --line:#232D45;
  --haze:#8590AB;
  --paper:#E9EEF9;
  --pilot:#FFB13C;

  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --body:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --gut:clamp(20px,5.5vw,40px);
  --col:720px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}

body{
  background:var(--void);
  color:var(--paper);
  font:400 16px/1.6 var(--body);
  /* The page is lit from one point, above the lamp. */
  background-image:radial-gradient(120% 60% at 50% -10%,#16203A 0%,var(--void) 62%);
  background-repeat:no-repeat;
  min-height:100vh;
  padding:0 var(--gut) 72px;
}
.wrap{max-width:var(--col);margin:0 auto}

a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--pilot);outline-offset:3px;border-radius:2px}

/* The lamp: the one moving thing on this site. Amber means awake, everywhere. */
.lamp{
  width:11px;height:11px;border-radius:50%;
  background:var(--pilot);flex:none;
  box-shadow:0 0 0 0 rgba(255,177,60,.55);
  animation:breathe 4.5s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{box-shadow:0 0 0 0 rgba(255,177,60,.5);opacity:1}
  50%    {box-shadow:0 0 0 7px rgba(255,177,60,0);opacity:.62}
}

.mark{
  display:flex;align-items:center;gap:10px;
  font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--haze);
}
.mark .back{margin-left:auto;letter-spacing:.08em;color:#5F6A85}
.mark .back:hover{color:var(--pilot)}

/* Labelled hairline that opens each section. */
.rule{
  display:flex;align-items:center;gap:14px;
  font:500 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:var(--haze);
}
.rule::after{content:"";flex:1;height:1px;background:var(--line)}

footer{
  margin-top:clamp(48px,9vh,76px);
  padding-top:22px;border-top:1px solid var(--line);
  font:400 12.5px/1.7 var(--mono);color:#5F6A85;
  display:flex;flex-wrap:wrap;gap:6px 22px;
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .lamp{box-shadow:0 0 0 5px rgba(255,177,60,.16)}
}