/* home.css — home page banner + contents map.
   Tokens sampled from diagrams/diagrams.css; loaded only by the home shortcodes,
   so the .content rules below scope to the home page. */

/* relative url()s: resolved against this file's /css/ directory, so they
   survive subpath hosting (GitHub Pages serves the site under /art-of-evals/) */
@font-face { font-family: 'Newsreader'; font-style: normal; font-weight: 500; font-display: swap; src: url(../fonts/Newsreader-500-latin.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/Inter-400-latin.woff2) format('woff2'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url(../fonts/Inter-600-latin.woff2) format('woff2'); }

/* home prose: warm ink, quiet bold, band spacing */
.content > p { color: #16140f; margin: 36px 0 32px; }
.content strong { font-weight: 600; }

/* ---- banner ---- */
.home-banner {
  position: relative; width: 100%; aspect-ratio: 3168 / 1344;
  background: url(../images/banner-art.png) 0 0 / 100% 100% no-repeat;
  border: 1px solid #e7e3d8; border-radius: 14px; overflow: hidden;
  container-type: inline-size;
}
.home-banner .hb-copy { position: absolute; left: 6.4%; top: 50%; transform: translateY(-50%); }
.home-banner h1 {
  margin: 0; border: none; padding: 0;
  font-family: 'Newsreader', Georgia, serif; font-weight: 500;
  font-size: clamp(22px, 6.3cqw, 41px); line-height: 1.06;
  letter-spacing: -0.015em; color: #16140f;
}
.home-banner p {
  margin: clamp(6px, 2cqw, 13px) 0 0 2px;
  font-family: 'Inter', system-ui, sans-serif; font-weight: 400;
  font-size: clamp(11px, 2.06cqw, 13.5px); letter-spacing: 0.002em; color: #73726c;
}

/* ---- contents map ---- */
.home-contents {
  background: #faf9f5; border: 1px solid #e7e3d8; border-radius: 14px;
  padding: clamp(18px, 4vw, 26px) clamp(20px, 4.5vw, 30px) clamp(12px, 3vw, 18px);
  font-family: 'Inter', system-ui, sans-serif;
}
.home-contents .hc-heading {
  font-family: 'Newsreader', Georgia, serif; font-weight: 500;
  font-size: clamp(22px, 3.8vw, 25px); color: #16140f; margin: 0 0 8px;
}
.home-contents .hc-chap { padding: 15px 2px 13px; }
.home-contents .hc-chap + .hc-chap { border-top: 1px dotted #c4bfb3; }
.home-contents .hc-head { display: flex; align-items: baseline; gap: 15px; }
.home-contents .hc-num {
  font-family: 'Newsreader', Georgia, serif; font-size: 19px; color: #8f8e88;
  width: 16px; text-align: right; flex: none;
}
.home-contents .hc-head a {
  font-weight: 600; font-size: clamp(15.5px, 2.5vw, 16.5px);
  color: #16140f; text-decoration: none;
}
.home-contents .hc-subs {
  margin: 9px 0 2px 23px; padding-left: 19px; border-left: 1.5px dotted #c4bfb3;
  display: flex; flex-direction: column; gap: 8px;
}
.home-contents .hc-subs a {
  font-weight: 400; font-size: clamp(14.5px, 2.3vw, 15px);
  color: #5f5d55; text-decoration: none;
}
.home-contents .hc-head a:hover,
.home-contents .hc-subs a:hover {
  color: #16140f;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #c4bfb3;
}