/* ===========================
   BASE.CSS — reset & tokens
   =========================== */

/* ♻️ Reset */
*{ box-sizing: border-box; }
html, body{
  margin: 0; padding: 0;
  overscroll-behavior: none;
  height: 100%;
  overflow: hidden; /* outer scrollbar off; .content owns scrolling */
}

/* 🔤 Local Fonts (Junicode Condensed: normal + italic) */
@font-face{
  font-family: "Junicode Condensed";
  src: url("../fonts/junicode-regularcondensed.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face{
  font-family: "Junicode Italic";
  src: url("../fonts/junicode-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* 🎛️ CSS Vars (colors, sizes, stacks) */
:root{
  --bg-main: #F0F0F0;
  --bg-nav:  #0D0D0D;
  --ink:     #0D0D0D;
  --ink-inv: #FFFFFF;
  --accent:  #CC0000;

  --gutter: 20px;
  --nav-w: clamp(280px, 26vw, 360px);
  --stroke: 1px;

  --fs-base: 16px;
  --lh-base: 1.4;

  --font-fallback: "Cormorant Garamond", Georgia, serif;
  --font-display: "Junicode Condensed", var(--font-fallback);
  --font-display-italic: "Junicode Italic", var(--font-fallback);
  --font-body: "Roboto Mono", monospace, var(--font-fallback);
  --font-body-italic: "Roboto Mono", monospace; /* keep italic face mapping */
  --font-body-weight: 300;                       /* Light */
}

/* 🧾 Base Type */
html, body{
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  background: var(--bg-main);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: var(--font-body-weight);  /* ← unify Roboto Mono weight */
}

/* 🔗 Content link behavior */
.content a, .content a:visited{ color: var(--ink); text-decoration: none; }
.content a:hover, .content a:focus-visible{ color: var(--accent); text-decoration: underline; }
.content a:active{ color: var(--accent); }

/* 🏷️ Titles/labels/year */
.project-title{
  font-family: var(--font-display);
  font-weight: 400;
  font-style: normal;
  font-size: clamp(24px, 3vw, 48px);
  line-height: 1.1;
  margin: 0;
}
.content .label, .content .year{
  font-family: var(--font-display);
  font-weight: 400; font-style: normal;
  font-size: clamp(18px, 2vw, 24px);
}

/* 📎 Footer & Back to Top */
.footer-text{
  font-size: clamp(25px, 2vw, 24px);
  font-family: var(--font-display);
  font-weight: 400; font-style: normal;
}
.back-to-top{
  font-size: clamp(30px, 2vw, 40px);
  font-family: var(--font-display);
  font-weight: 400; font-style: normal;
}

/* 💌 Footer email hover: red + italic (no underline) */
#footer-info .footer-text a,
#footer-info .footer-text a:visited{
  color: var(--ink); text-decoration: none;
  font-family: var(--font-display); font-weight: 400; font-style: normal;
}
#footer-info .footer-text a:hover,
#footer-info .footer-text a:focus-visible{
  color: var(--accent);
  text-decoration: none;
  font-family: var(--font-display);   /* keep the same face */
  font-weight: 400;
  font-style: normal;
}

/* ⤴️ Back To Top: always black, no underline */
#footer-top .back-to-top,
#footer-top .back-to-top:visited,
#footer-top .back-to-top:hover,
#footer-top .back-to-top:focus-visible,
#footer-top .back-to-top:active{
  color: var(--ink); text-decoration: none;
}