/* ---------------------------------------------------------------------------
   WordPress-only additions to the v6 design system.

   styles.css is the homepage. Everything WordPress needs that the design never
   had — form status messages, and the chrome around the legacy Elementor pages
   and the five posts — lives here, so the delta against the approved design is
   one short, reviewable file.

   These rules were written against v4's charcoal palette and are rebuilt here
   on v6's paper ground. page.php and index.php keep their existing class names,
   so neither template changed.
   ------------------------------------------------------------------------- */

/* ── Contact form status, after the admin-post round trip ────────────────── */
.contact__notice{
  margin:0 0 1.6rem;padding:.95rem 1.15rem;
  background:#fff;border-left:3px solid var(--rule);
  font-family:var(--body);font-size:.95rem;line-height:1.55;color:var(--ink);
  max-width:52ch;
}
.contact__notice--ok{border-left-color:#2C5568}
.contact__notice--bad{border-left-color:var(--mark)}

/* ── Sub-page chrome: legacy Elementor pages, posts, search, 404 ─────────────
   Reading pages, not decoration — the Economy League article alone runs to
   31,710 characters, and these URLs carry his search presence.
   ------------------------------------------------------------------------- */
.nav.nav--sub{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  height:var(--mast);padding-inline:var(--pad);
  background:rgba(250,248,244,.93);
  -webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px);
  border-bottom:1px solid var(--ink);
}
.nav__brand{font-family:var(--display);font-size:1.42rem;color:var(--ink);
  text-decoration:none;white-space:nowrap}
.nav__brand span{color:var(--mark);font-style:italic}
.nav__back{font-family:var(--mono);font-size:.65rem;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-2);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px}
.nav__back:hover,.nav__back:focus-visible{color:var(--ink);border-bottom-color:var(--mark)}

.legacy{padding-block:clamp(2.4rem,5vw,4rem) var(--sectionY);min-height:60vh}
.legacy .wrap{max-width:78ch}
.legacy__title{font-family:var(--display);font-weight:400;
  font-size:clamp(2rem,5vw,3.4rem);line-height:1.06;color:var(--ink);
  margin:0 0 2rem;max-width:24ch;letter-spacing:-.012em}
.legacy__body{color:var(--ink-2);font-family:var(--body);
  font-size:1.05rem;line-height:1.75}
.legacy__body :where(h1,h2,h3,h4){color:var(--ink);font-family:var(--display);
  font-weight:400;line-height:1.15;margin:2.4rem 0 .9rem;letter-spacing:-.012em}
.legacy__body :where(h2){font-size:1.9rem}
.legacy__body :where(h3){font-size:1.45rem}
.legacy__body :where(p,ul,ol){margin:0 0 1.15rem}
.legacy__body :where(ul,ol){padding-left:1.3rem}
.legacy__body li{margin-bottom:.4rem}
.legacy__body a{color:var(--mark);text-decoration:underline;
  text-underline-offset:.22em;text-decoration-thickness:1px}
.legacy__body a:hover,.legacy__body a:focus-visible{text-decoration-thickness:2px}
.legacy__body :where(img,iframe,video){max-width:100%;height:auto}
.legacy__body :where(figure){margin:1.8rem 0}
.legacy__body :where(table){width:100%;border-collapse:collapse;
  display:block;overflow-x:auto}
.legacy__body :where(th,td){border:1px solid var(--rule);padding:.5rem .7rem;text-align:left}
.legacy__body blockquote{margin:1.6rem 0;padding-left:1.1rem;
  border-left:3px solid var(--mark);color:var(--ink);font-style:italic}
.legacy__body :where(strong,b){color:var(--ink);font-weight:600}

.footer.footer--sub{background:var(--night-2);color:var(--paper);
  padding-block:2.2rem;margin-top:var(--sectionY)}
.footer--sub .footer__base{display:flex;gap:1rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.57rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(250,248,244,.62)}
.footer--sub .footer__credit{margin-left:auto}
@media(max-width:520px){.footer--sub .footer__credit{margin-left:0}}

/* The WordPress admin bar is fixed-position and sits over the sticky masthead
   for logged-in users. Only ever visible to Harry and Ian, never to a visitor. */
body.admin-bar .mast,
body.admin-bar .nav--sub{top:32px}
body.admin-bar .menu-panel{inset-block-start:calc(var(--mast) + 32px)}
@media screen and (max-width:782px){
  body.admin-bar .mast,
  body.admin-bar .nav--sub{top:46px}
  body.admin-bar .menu-panel{inset-block-start:calc(var(--mast) + 46px)}
}