/* Rabbit Hole Digital — layout, shared chrome, and reusable section grids.
   Ported from shared/site.jsx + the page JSX. Token-driven; responsive collapses added. */

/* ---------- Helpers ---------- */
.rh-wrap{ max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad-desktop); }
.rh-wrap--narrow{ max-width:820px; }
.rh-wrap--tight{ max-width:760px; }
.rh-mono{ font-family:var(--font-mono); font-size:var(--mono-size); letter-spacing:.12em; text-transform:uppercase; }
.rh-h2{ font-family:var(--font-display); font-weight:800; font-size:var(--h2-size); line-height:var(--h2-lh); letter-spacing:var(--h2-ls); margin:0; color:var(--text-hi); text-wrap:balance; }
.rh-lede{ font-family:var(--font-body); font-size:var(--body-lg-size); line-height:var(--body-lg-lh); color:var(--text-muted); margin:0; }
.rh-display{ font-family:var(--font-display); font-weight:var(--weight-black); font-size:var(--display-size); line-height:var(--display-lh); letter-spacing:var(--display-ls); text-transform:uppercase; color:var(--text-hi); margin:0; }
.rh-h1{ font-family:var(--font-display); font-weight:900; font-size:clamp(40px,6vw,68px); line-height:.98; letter-spacing:-.02em; text-transform:uppercase; color:var(--text-hi); margin:0; }
.rh-section{ padding-top:var(--space-9); padding-bottom:var(--space-9); }
.rh-accent{ color:var(--accent); }
.rh-link-mono{ font-family:var(--font-mono); font-size:var(--mono-size); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); text-decoration:none; }

/* Masked technical grid overlay used in dark headers. */
.rh-gridbg{ position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size:64px 64px; opacity:var(--gridbg-opacity,.5);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000, transparent);
  mask-image:radial-gradient(ellipse 90% 70% at 50% 0%, #000, transparent); }

/* ---------- Wordmark ---------- */
.rh-wordmark{ display:inline-flex; align-items:flex-end; gap:10px; text-decoration:none; }
.rh-wordmark__mark{ display:block; flex:0 0 auto; color:var(--accent); width:25px; height:19.5px; }
.rh-wordmark__text{ font-family:var(--font-display); font-weight:900; line-height:.82; letter-spacing:-.01em; text-transform:uppercase; color:var(--wordmark-color,var(--text-hi)); }
.rh-wordmark__text em{ font-style:normal; color:var(--accent); }

/* ---------- Nav ---------- */
.rh-nav-spacer{ height:69px; }
/* Offset the fixed nav below the WP admin bar for logged-in users. */
.admin-bar .rh-nav{ top:32px; }
@media screen and (max-width:782px){ .admin-bar .rh-nav{ top:46px; } }
.rh-nav{ position:fixed; top:0; left:0; right:0; z-index:100; background:transparent; border-bottom:1px solid transparent;
  transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease), backdrop-filter var(--dur) var(--ease); }
.rh-nav.is-scrolled{ background:rgba(13,18,19,.72); -webkit-backdrop-filter:blur(16px) saturate(1.4); backdrop-filter:blur(16px) saturate(1.4); border-bottom-color:var(--hairline-strong); }
.rh-nav__inner{ display:flex; align-items:center; justify-content:space-between; padding-top:var(--space-4); padding-bottom:var(--space-4); }
.rh-nav__links{ display:flex; gap:var(--space-6); align-items:center; }
.rh-nav__link{ font-family:var(--font-mono); font-size:var(--mono-size); letter-spacing:.12em; text-transform:uppercase; color:var(--text-muted); text-decoration:none; transition:color var(--dur) var(--ease); }
.rh-nav__link:hover{ color:var(--accent)!important; }
.rh-nav__link.is-active{ color:var(--accent); }
.rh-nav__toggle{ display:none; background:transparent; border:0; color:var(--text-hi); cursor:pointer; padding:6px; }

/* ---------- Page header (interior dark hero) ---------- */
.rh-pagehead{ position:relative; overflow:hidden; background:linear-gradient(180deg, var(--bg) 0%, var(--ink-800) 65%); }
.rh-pagehead__inner{ position:relative; }
.rh-pagehead__body{ padding-top:var(--space-8); padding-bottom:var(--space-8); }
.rh-hero__title{ font-family:var(--font-display); font-weight:900; font-size:clamp(40px,6vw,68px); line-height:.98; letter-spacing:-.02em; text-transform:uppercase; color:var(--text-hi); margin:var(--space-4) 0 0; max-width:900px; }

/* ---------- CTA band ---------- */
.rh-cta{ padding-top:var(--space-9); padding-bottom:var(--space-9); }
.rh-cta__inner{ max-width:760px; text-align:center; }
.rh-cta__actions{ display:flex; gap:var(--space-3); margin-top:var(--space-6); justify-content:center; flex-wrap:wrap; }

/* ---------- Footer ---------- */
.rh-footer{ background:var(--bg); border-top:1px solid var(--hairline); }
.rh-footer__grid{ padding-top:var(--space-8); padding-bottom:var(--space-7); display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--space-7); }
.rh-footer__tagline{ font-family:var(--font-body); font-size:14px; line-height:1.6; color:var(--text-muted); margin:var(--space-4) 0 0; max-width:260px; }
.rh-footer__coltitle{ font-family:var(--font-mono); font-size:var(--mono-size); letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); margin-bottom:var(--space-4); }
.rh-footer__links{ display:flex; flex-direction:column; gap:var(--space-3); }
.rh-footer__links a{ font-family:var(--font-body); font-size:14px; color:var(--text-muted); text-decoration:none; display:inline-flex; align-items:center; gap:8px; }
.rh-footer__links a:hover{ color:var(--accent)!important; }
.rh-footer__bar{ padding-top:var(--space-5); padding-bottom:var(--space-6); border-top:1px solid var(--hairline); display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--space-4); align-items:center; }
.rh-footer__meta{ font-family:var(--font-mono); font-size:var(--mono-size); letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); display:inline-flex; align-items:center; gap:8px; }
.rh-dot-ok{ width:6px; height:6px; border-radius:999px; background:var(--ok); display:inline-block; }

/* ---------- Reusable section header (eyebrow + title + right link) ---------- */
.rh-sechead{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:var(--space-4); }

/* ---------- Reusable grids ---------- */
.rh-grid-auto{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:var(--space-6); }
.rh-grid-auto-3{ display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:var(--space-6); }
.rh-grid-fill{ display:grid; grid-template-columns:repeat(auto-fill, minmax(320px,1fr)); gap:var(--space-6); }
.rh-stack-6{ display:flex; flex-direction:column; gap:var(--space-6); }
.rh-stack-8{ display:flex; flex-direction:column; gap:var(--space-8); }

/* Placeholder media tiles (grid-lined ink) */
.rh-media{ border-radius:var(--radius-card); background:linear-gradient(135deg, var(--ink-800), var(--ink-750)); border:1px solid var(--hairline); position:relative; overflow:hidden; }
.rh-media__grid{ position:absolute; inset:0; background-image:linear-gradient(var(--hairline) 1px, transparent 1px), linear-gradient(90deg, var(--hairline) 1px, transparent 1px); background-size:22px 22px; opacity:.5; }
.rh-media__label{ position:absolute; left:14px; top:12px; font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-faint); }
.rh-media__mark{ position:absolute; right:14px; bottom:12px; color:var(--ink-600); }

/* ---------- Entrance handled in base.css (.rh-rise*) ---------- */

/* ---------- Responsive ---------- */
@media (max-width:900px){
  :root{ --container-pad-desktop:var(--container-pad-mobile); }
  .rh-footer__grid{ grid-template-columns:1fr 1fr; gap:var(--space-6); }
  .rh-split,.rh-split-work,.rh-split-article,.rh-split-about,.rh-split-contact{ grid-template-columns:1fr!important; }
}
@media (max-width:720px){
  .rh-nav__links{ display:none; }
  .rh-nav__links.is-open{ display:flex; position:absolute; top:100%; right:var(--container-pad-mobile); flex-direction:column; align-items:flex-end; gap:var(--space-4); background:rgba(13,18,19,.95); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); padding:var(--space-5); border:1px solid var(--hairline-strong); border-radius:var(--radius-card); }
  .rh-nav__toggle{ display:inline-flex; }
  .rh-footer__grid{ grid-template-columns:1fr; }
  .rh-display{ font-size:clamp(2.5rem,12vw,3.25rem); }
}