/* ============================================================
   codebymks — COMMON styles
   Shared by every page: design tokens, base reset, top nav,
   page wrapper, reveal helper, reduced-motion.
   Page-specific rules live in home.css / work.css / about.css.
   ============================================================ */

:root{
  --ground:#f6efe8;
  --surface:#ffffff;
  --ink:#2f2f31;
  --ink-soft:#6f6f72;
  --sage:#c5d0c6;
  --sage-deep:#a9b8ab;
  --pink:#e79ab0;
  --pink-deep:#c96b89;
  --line:rgba(47,47,49,.12);
  --card:#f6efe8;
  --mono:'Instrument Serif',Georgia,serif;
  --serif:'Instrument Serif',Georgia,serif;
  --sans:'Instrument Serif',Georgia,serif;
  --brand:'Inter',system-ui,sans-serif;
  color-scheme:light;
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme:dark){
    --ground:#211f1e; --surface:#2a2726; --ink:#f2ece5; --ink-soft:#b4aba3;
    --pink-deep:#e79ab0; --line:rgba(255,255,255,.14); --card:#2a2726;
  }
}
:root[data-theme="dark"]{
  --ground:#211f1e; --surface:#2a2726; --ink:#f2ece5; --ink-soft:#b4aba3;
  --pink-deep:#e79ab0; --line:rgba(255,255,255,.14); --card:#2a2726;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);color:var(--ink);background:var(--ground);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* ---------- Top nav (work + about; hidden on home) ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,5vw,60px);
  padding-top:calc(18px + env(safe-area-inset-top,0px));
}
nav .brand{display:flex;align-items:center}
nav .brand img{height:24px;width:auto;display:block}
nav .links{display:flex;gap:clamp(14px,3vw,30px)}
nav .links a{font-family:var(--mono);font-size:1.45rem;color:#2b2622;letter-spacing:.04em;opacity:1;transition:color .2s;padding-bottom:3px;position:relative;text-shadow:0 1px 10px rgba(248,246,242,.7)}
nav .links a:hover{color:#c96b89}
nav .links a.active{color:#c96b89}
nav .links a.active::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:1.5px;background:#c96b89}
:root[data-page="home"] nav.site-nav{display:none}
/* keep the top nav comfortable on small phones */
@media(max-width:520px){
  nav{padding:16px 18px;padding-top:calc(16px + env(safe-area-inset-top,0px))}
  nav .links{gap:16px}
  nav .links a{font-size:1.1rem}
}

/* ---------- Page wrapper (each page is its own HTML file) ---------- */
.page{display:block;animation:fade .5s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}

/* ---------- Reveal (disabled — content is shown immediately) ---------- */
.reveal{opacity:1;transform:none}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .page{animation:none}
  html{scroll-behavior:auto}
}