/* HCM Architect - article pages. Shared by all 100 field notes so the CSS is
   downloaded once and cached, instead of inlined 100 times. */
*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#080c08;--bg2:#0d120d;--bg3:#111811;--cream:#f0ead8;--gold:#c9a84c;
  --gold-lt:#e2c46a;--moss:#6b7c3a;--moss-pale:#b5c472;--white:#eef0e8;--muted:#8a927e;
  --border:#1c231c;--border-gold:rgba(201,168,76,.25);
  --body:'Crimson Pro',Georgia,serif;--mono:'DM Mono',monospace}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--white);font-family:var(--body);line-height:1.7;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto}

/* Scoped to .site-nav. As a bare `nav` selector this also captured the
   prev/next block below the article, pinning it over the header. */
.site-nav{position:fixed;top:0;width:100%;z-index:600;padding:1.4rem 4rem;display:flex;
  justify-content:space-between;align-items:center;background:rgba(8,12,8,.96);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--border-gold)}
.nav-name{font-family:'Bebas Neue',sans-serif;font-size:1.65rem;letter-spacing:3px;color:var(--white)}
.nav-back{font-family:var(--mono);font-size:.7rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--border-gold);padding:.5rem 1.1rem;border-radius:999px;
  transition:background .25s,color .25s;white-space:nowrap}
.nav-back:hover{background:var(--gold);color:var(--bg)}

.wrap{max-width:760px;margin:0 auto;padding:9rem 4rem 5rem}

.crumb{font-family:var(--mono);font-size:.58rem;letter-spacing:1.8px;text-transform:uppercase;
  color:var(--muted);margin-bottom:2rem}
.crumb a{color:var(--gold)}
.crumb a:hover{color:var(--gold-lt)}
.crumb span{opacity:.5;margin:0 .45rem}

.a-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;
  padding-bottom:1rem;border-bottom:1px solid var(--border)}
.a-cat{font-family:var(--mono);font-size:.58rem;letter-spacing:2px;text-transform:uppercase;
  color:var(--gold);border:1px solid var(--border-gold);border-radius:999px;padding:.35rem .9rem}
.a-num{font-family:var(--mono);font-size:.58rem;color:var(--muted);letter-spacing:1px}

h1.a-title{font-family:'Bebas Neue',sans-serif;font-size:clamp(2.1rem,5.5vw,3.4rem);
  line-height:1.02;letter-spacing:.5px;color:var(--white);margin:.6rem 0 1.2rem}
.a-excerpt{font-size:1.14rem;color:var(--moss-pale);font-style:italic;line-height:1.55;
  margin-bottom:2.4rem;padding-left:1.1rem;border-left:2px solid var(--border-gold)}

.a-body p{color:var(--muted);margin-bottom:1.25rem;font-size:1.05rem}
.a-body h3{font-family:'Bebas Neue',sans-serif;font-size:1.4rem;letter-spacing:.5px;
  color:var(--cream);margin:2.2rem 0 .9rem}
.a-body ul,.a-body ol{color:var(--muted);margin:0 0 1.25rem 1.2rem}
.a-body li{margin-bottom:.5rem}
.a-body strong{color:var(--cream)}

.a-cta{margin:3.5rem 0 0;padding:1.8rem;border:1px solid var(--border-gold);border-radius:14px;
  background:linear-gradient(160deg,rgba(201,168,76,.05),transparent 70%)}
.a-cta p{color:var(--muted);font-size:.98rem;margin-bottom:1.1rem}
.a-cta a{display:inline-block;font-family:var(--mono);font-size:.65rem;letter-spacing:2px;
  text-transform:uppercase;color:var(--bg);background:var(--gold);padding:.75rem 1.4rem;
  border-radius:999px;transition:background .25s}
.a-cta a:hover{background:var(--gold-lt)}

.a-nav{position:static;width:auto;z-index:auto;display:flex;gap:1rem;margin-top:2.5rem;border-top:1px solid var(--border);padding-top:2rem}
.a-nav a{flex:1;padding:1rem 1.2rem;border:1px solid var(--border);border-radius:12px;
  transition:border-color .25s,background .25s}
.a-nav a:hover{border-color:var(--border-gold);background:rgba(255,255,255,.02)}
.a-nav .dir{display:block;font-family:var(--mono);font-size:.55rem;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);margin-bottom:.4rem}
.a-nav .t{color:var(--cream);font-size:.95rem;line-height:1.35}
.a-nav .next{text-align:right}

.related{margin-top:3rem;border-top:1px solid var(--border);padding-top:2rem}
.related h2{font-family:'Bebas Neue',sans-serif;font-size:1.3rem;letter-spacing:1.5px;
  color:var(--cream);margin-bottom:1.2rem}
.related a{display:block;padding:.85rem 0;border-bottom:1px solid var(--border);color:var(--muted);
  font-size:.98rem;transition:color .25s}
.related a:last-child{border-bottom:0}
.related a:hover{color:var(--moss-pale)}

footer{border-top:1px solid var(--border);padding:2.5rem 4rem;text-align:center;
  font-family:var(--mono);font-size:.58rem;letter-spacing:1.5px;color:var(--muted)}

@media(max-width:760px){
  .site-nav{padding:1.1rem 1.3rem}
  .nav-name{font-size:1.3rem}
  .nav-back{font-size:.62rem;padding:.45rem .9rem}
  .wrap{padding:7.5rem 1.3rem 3.5rem}
  .a-excerpt{font-size:1.05rem}
  .a-nav{flex-direction:column}
  .a-nav .next{text-align:left}
  footer{padding:2rem 1.3rem}
}