/* =========================================================================
   HOLY GRAIL — WIREFRAME SCAFFOLD
   Structure-first, but wearing the real brand type + greyscale.
   Layers on top of ../colors_and_type.css
   ========================================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hg-paper);
  -webkit-font-smoothing: antialiased;
}
/* Desaturated crumpled-paper wash — the canonical substrate. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("../../assets/textures/paper-cream.png") center top / 1400px auto repeat-y;
  filter: grayscale(1) brightness(1.08) contrast(1.02);
  opacity: 0.45; mix-blend-mode: multiply;
}
img { display: block; max-width: 100%; }
a { text-decoration: none; }

.wrap { max-width: 1200px; margin: 0 auto; padding: 0 56px; }

/* ---- MASTHEAD ----------------------------------------------------------- */
.masthead {
  position: sticky; top: 0; z-index: 50;
  background: rgba(244,243,242,0.9);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--hg-ink);
}
.masthead .wrap { display: flex; align-items: center; gap: 12px; height: 58px; }
.m-pill {
  font-family: var(--font-system); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; border: 1px solid var(--hg-ink);
  border-radius: 999px; padding: 5px 13px; line-height: 1.3; white-space: nowrap;
  color: var(--hg-ink); background: transparent; cursor: pointer;
}
.m-dot { width: 5px; height: 5px; border-radius: 999px; background: var(--hg-ink); flex: none; }
.m-nav { display: flex; gap: 22px; margin-left: 18px; }
.m-nav a {
  font-family: var(--font-system); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--hg-ink); transition: opacity 120ms ease;
  padding-bottom: 2px; border-bottom: 1px solid transparent; white-space: nowrap;
}
.m-nav a:hover { opacity: 0.55; }
.m-nav a.here { border-bottom-color: var(--hg-ink); }
.m-right { margin-left: auto; display: flex; gap: 10px; align-items: center; }

/* ---- SECTION HEADER ----------------------------------------------------- */
.sec-head { display: flex; align-items: baseline; gap: 16px; margin-bottom: 36px; }
.sec-head .idx { font-family: var(--font-system); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--hg-ink); }
.sec-head h2 { font-family: var(--font-editorial); font-weight: 400; text-transform: uppercase; font-size: clamp(32px, 4.6vw, 54px); letter-spacing: 0; line-height: 1.02; }
.sec-head .rule { flex: 1; border-top: 0.5px solid var(--hg-ink); transform: translateY(-6px); opacity: 0.5; }
.sec-head .meta { font-family: var(--font-system); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--hg-ink-3); white-space: nowrap; }

/* ---- CAPSULE PILL / TABS ------------------------------------------------ */
.pill {
  font-family: var(--font-system); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; border: 1px solid var(--hg-ink); border-radius: 999px;
  padding: 5px 14px; cursor: pointer; background: transparent; color: var(--hg-ink);
  transition: background 140ms ease, color 140ms ease; line-height: 1.3;
}
.pill:hover { background: var(--hg-ink); color: var(--hg-paper-warm); }
.pill.active { background: var(--hg-ink); color: var(--hg-paper-warm); }
.btn {
  font-family: var(--font-system); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.14em; padding: 11px 22px; border: 1px solid var(--hg-ink);
  border-radius: 999px; background: transparent; color: var(--hg-ink);
  cursor: pointer; transition: background 140ms ease, color 140ms ease; display: inline-block;
}
.btn:hover { background: var(--hg-ink); color: var(--hg-paper-warm); }
.btn.solid { background: var(--hg-ink); color: var(--hg-paper-warm); }
.btn.solid:hover { background: transparent; color: var(--hg-ink); }

/* ---- WIREFRAME PLACEHOLDER (image-not-yet) ------------------------------ */
/* Greyscale box with a diagonal cross + a labelled chip. Stands in for any
   photograph the wireframe deliberately leaves empty. */
.wf-img {
  position: relative; overflow: hidden;
  background-color: var(--hg-paper-deep);
  border: 1px solid var(--rule);
  background-image:
    linear-gradient(to top left,  transparent calc(50% - 0.5px), rgba(54,54,54,0.20) calc(50% - 0.5px), rgba(54,54,54,0.20) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(54,54,54,0.20) calc(50% - 0.5px), rgba(54,54,54,0.20) calc(50% + 0.5px), transparent calc(50% + 0.5px));
  display: flex; align-items: center; justify-content: center;
}
.wf-img .tag {
  position: relative; z-index: 1;
  font-family: var(--font-system); font-size: 9.5px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--hg-ink-2);
  background: var(--hg-paper); padding: 5px 10px; border: 0.5px solid var(--rule);
  text-align: center; line-height: 1.4; max-width: 80%;
}
.wf-img.dark { background-color: var(--hg-reliquary);
  background-image:
    linear-gradient(to top left,  transparent calc(50% - 0.5px), rgba(236,237,237,0.16) calc(50% - 0.5px), rgba(236,237,237,0.16) calc(50% + 0.5px), transparent calc(50% + 0.5px)),
    linear-gradient(to top right, transparent calc(50% - 0.5px), rgba(236,237,237,0.16) calc(50% - 0.5px), rgba(236,237,237,0.16) calc(50% + 0.5px), transparent calc(50% + 0.5px)); }
.wf-img.dark .tag { background: var(--hg-reliquary); color: var(--hg-reliquary-fg); border-color: rgba(236,237,237,0.3); }

/* A line of placeholder copy — greyscale bars standing in for text. */
.wf-lines { display: flex; flex-direction: column; gap: 7px; }
.wf-lines span { height: 7px; background: rgba(54,54,54,0.14); border-radius: 1px; display: block; }

/* ---- ANNOTATION (margin note / redline, monochrome) --------------------- */
.note {
  position: relative;
  font-family: var(--font-system); font-size: 11px; line-height: 1.5;
  letter-spacing: 0.05em; text-transform: uppercase; color: var(--hg-ink-2);
  border: 1px dashed var(--hg-ink-mute); border-radius: 2px;
  background: rgba(244,243,242,0.6);
  padding: 11px 13px 11px 13px;
}
.note::before {
  content: attr(data-note);
  display: inline-block;
  font-family: var(--font-system); font-size: 9px; letter-spacing: 0.2em;
  color: var(--hg-paper-warm); background: var(--hg-ink);
  padding: 2px 7px; margin: 0 8px 4px 0; vertical-align: 1px; white-space: nowrap;
}
.note b { color: var(--hg-ink); font-weight: 400; }
/* leader dot used to pin a note to a spot */
.note.pin::after {
  content: ""; position: absolute; left: -7px; top: 16px;
  width: 7px; height: 7px; border-radius: 999px;
  background: var(--hg-ink);
}

/* ---- FOOTER (footnote register) ----------------------------------------- */
.wf-footer { border-top: 1px solid var(--hg-ink); padding: 40px 0 52px; margin-top: 8px; }
.wf-footer .row { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.wf-footer .col-title { font-family: var(--font-blackletter); font-size: 34px; line-height: 0.9; }
.wf-footer .links { display: flex; gap: 44px; flex-wrap: wrap; }
.wf-footer .links div { font-family: var(--font-system); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; line-height: 2; color: var(--hg-ink-2); }
.wf-footer .links .h { color: var(--hg-ink-3); display: block; margin-bottom: 4px; }
.wf-footer .fine { font-family: var(--font-system); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hg-ink-3); margin-top: 36px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* Eyebrow + caption helpers */
.eyebrow { font-family: var(--font-system); font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; color: var(--hg-ink-3); }
.cap { font-family: var(--font-system); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--hg-ink-3); }