/* ============================================================
   gregclement.com — Steel & Stone theme for subpages
   Loads AFTER styles-v3.css (+ styles-v2.css on /about) and remaps
   the old editorial tokens to the homepage's v7 world: graphite +
   steel blue + cool bone, Archivo throughout. Structural styles on
   these pages are untouched; this is palette + type only.
   ============================================================ */

:root {
  --paper:   #ECEDEA;
  --ink:     #14171A;
  --orange:  #3F6E92;
  --divider: #D3D6D2;
  --dark:    #191E23;

  --ink-70:  rgba(20, 23, 26, 0.72);
  --ink-55:  rgba(20, 23, 26, 0.55);
  --ink-40:  rgba(20, 23, 26, 0.40);
  --paper-90: rgba(236, 237, 234, 0.92);
  --paper-70: rgba(236, 237, 234, 0.70);
  --paper-45: rgba(236, 237, 234, 0.45);
  --paper-22: rgba(236, 237, 234, 0.22);
  --paper-14: rgba(236, 237, 234, 0.14);

  --serif: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --sans:  "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Archivo carries headings where Fraunces was: tighten to suit */
h1, h2, h3, h4 { letter-spacing: -0.015em; font-weight: 640; }

/* the old paper-grain overlay reads dated against the steel world */
body::before { display: none; }

/* steel button needs light text (v3 assumed dark-on-orange was paper) */
.btn-orange { color: #F5F7F8; }


/* ---- The homepage's two-tier nav, for subpages ---- */
.nav,
.nav.scrolled {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: rgba(16, 20, 24, 0.90);
  border-bottom: 1px solid rgba(236, 237, 234, 0.14);
  box-shadow: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.nav.scrolled .wordmark { color: var(--paper); }
.nav.scrolled .nav__link { color: var(--paper-70); }
.nav.scrolled .nav__link:hover { color: var(--paper); }
.nav.scrolled .nav__burger span { background: var(--paper); }
.nav__inner { padding: 0 var(--edge, clamp(1.25rem, 4vw, 4rem)); max-width: none; margin: 0; display: block; }
.nav__top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0.8rem 0;
}
.nav__logo { justify-self: center; }
.nav__logo img {
  height: 46px;
  width: auto;
  display: block;
  filter: brightness(0) invert(1) opacity(0.92);
}
.nav__right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.wordmark {
  font-family: "Anton", "Arial Narrow", sans-serif;
  font-weight: 400;
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.nav .wordmark { color: var(--paper); }
.nav__links {
  display: flex;
  justify-content: center;
  gap: 2.25rem;
  margin: 0 calc(-1 * var(--edge, 2rem));
  padding: 0.6rem var(--edge, 2rem);
  border-top: 1px solid rgba(236, 237, 234, 0.14);
}
.nav__link {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--paper-70);
  transition: color 0.25s ease;
}
.nav__link:hover { color: var(--paper); }
.nav__cta { font-size: 0.95rem; padding: 0.75em 1.5em; }
.nav__burger span { background: var(--paper); }
body.menu-open .nav__burger span { background: var(--ink); }

@media (max-width: 920px) {
  .nav__links, .nav__cta { display: none; }
  .nav__burger { display: flex; }
  .nav .wordmark { display: none; }
  .nav__top { grid-template-columns: auto 1fr; }
  .nav__logo { grid-column: 1; justify-self: start; }
  .nav__logo img { height: 40px; }
  .nav__right { grid-column: 2; }
}

/* essays index: wider headline measure (3-4 lines, not 5) */
.essays__title { max-width: 27ch; }