/* =========================================================
   REALM HQ · SHARED UI LAYER — "Classified After Hours"
   Components used across pages: header fixes, buttons, section
   shells, stamps, states, The Wall, Hot Mutt blocks, directory
   search, toasts, footer cameo, field notes. Depends on tokens.css.
   Mobile-first. Every animation respects prefers-reduced-motion.
   ========================================================= */

/* ---------- base guard ----------
   The hidden attribute must win over component display rules
   (e.g. .wall-success{display:grid}). Scripts toggle `.hidden`, never classes. */
[hidden]{ display:none !important; }

/* ---------- header hardening (both header systems) ---------- */
.hdr-brand-txt, .hdr-lite-brand span{ white-space:nowrap; }
.hdr-brand, .hdr-lite-brand{ flex:0 0 auto; }
.hdr-nav, .hdr-lite-nav{ flex-wrap:nowrap; white-space:nowrap; }
.hdr-nav a[aria-current="page"], .hdr-lite-nav a[aria-current="page"]{ color:var(--gold); }
.hdr-nav a[aria-current="page"]::after, .hdr-lite-nav a[aria-current="page"]::after{ transform:scaleX(1); opacity:.55; }
.hdr-drawer-nav a[aria-current="page"]{ color:var(--gold); }
/* nine inline links crowd below ~1100px; hand over to the drawer earlier */
@media (max-width: 1100px){
  .hdr-nav, .hdr-lite-nav{ display:none !important; }
  .hdr-burger{ display:inline-block !important; }
  html:not(.js) .hdr-burger{ display:none !important; }
}
.hdr-status .status-word, .hdr-lite-status .status-word{ min-width:0; }

/* search trigger (lives in both headers) */
.hdr-search{
  display:inline-flex; align-items:center; gap:8px;
  min-height:36px; padding:0 12px;
  border:1px solid var(--border-bright); border-radius:var(--radius-sm);
  background:rgba(255,255,255,.02); color:var(--bone-dim);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.18em; text-transform:uppercase;
  cursor:pointer; transition:border-color var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out);
  flex:0 0 auto;
}
.hdr-search:hover, .hdr-search:focus-visible{ border-color:var(--gold); color:var(--gold); }
.hdr-search kbd{ font:inherit; font-size:9.5px; opacity:.65; border:1px solid var(--border-bright); border-radius:3px; padding:1px 5px; }
.hdr-search svg{ width:14px; height:14px; }
@media (max-width: 1100px){ .hdr-search .hdr-search-txt, .hdr-search kbd{ display:none; } .hdr-search{ padding:0 10px; min-width:44px; min-height:44px; justify-content:center; } }
.hdr-drawer-nav a.drawer-search{ cursor:pointer; }
.hdr-drawer-foot small{ display:block; width:100%; color:var(--bone-faint); letter-spacing:.14em; }

/* ---------- reusable buttons ---------- */
.rbtn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:0 22px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  border:1px solid var(--gold-line); border-radius:var(--radius-sm);
  color:var(--bone); background:transparent; cursor:pointer; text-decoration:none;
  transition:background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
}
.rbtn:hover{ border-color:var(--gold); color:var(--gold-hot); background:var(--gold-ink); }
.rbtn:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.rbtn:active{ transform:translateY(1px); }
.rbtn-primary{ background:var(--gold); color:#0b0a07; border-color:var(--gold); font-weight:700; }
.rbtn-primary:hover{ background:var(--gold-hot); border-color:var(--gold-hot); color:#0b0a07; }
.rbtn-quiet{ border-color:var(--border-bright); color:var(--bone-dim); }
.rbtn-quiet:hover{ color:var(--bone); border-color:var(--bone-faint); background:rgba(255,255,255,.03); }
.rbtn[disabled], .rbtn[aria-disabled="true"]{ opacity:.55; cursor:not-allowed; pointer-events:none; }
.rbtn-sm{ min-height:40px; padding:0 14px; font-size:11px; }
.rbtn .arrow{ transition:transform var(--dur-1) var(--ease-out); }
.rbtn:hover .arrow{ transform:translateX(3px); }

/* ---------- section shell ---------- */
.rs{ position:relative; padding:var(--section-pad) var(--gutter); }
.rs-inner{ max-width:var(--wrap); margin:0 auto; }
.rs-kicker{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-mono); font-size:var(--fs-meta); letter-spacing:var(--track-meta); text-transform:uppercase;
  color:var(--gold); margin-bottom:14px;
}
.rs-kicker::before{ content:""; width:26px; height:1px; background:var(--gold); opacity:.7; }
.rs h2, .rs-title{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-h2); line-height:1.02; letter-spacing:-.02em; color:var(--bone); margin:0 0 14px; }
.rs h2 em, .rs-title em{ font-family:var(--font-serif); font-style:italic; font-weight:500; color:var(--gold-hot); letter-spacing:0; }
.rs-lede{ font-size:var(--fs-lede); line-height:1.55; color:var(--bone-dim); max-width:var(--measure); margin:0 0 28px; }
.rs-head{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:16px 32px; margin-bottom:28px; }
.rs-head .rs-lede{ margin-bottom:0; }
.rs-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.rs-rule{ height:1px; background:linear-gradient(90deg, var(--gold-line), transparent 70%); margin:0 var(--gutter); }
.rs-fine{ font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; line-height:1.6; color:var(--bone-faint); }
.rs-fine a{ color:var(--gold); border-bottom:1px dashed var(--gold-dim); }

/* file meta strip (mono labels) */
.meta-row{ display:flex; flex-wrap:wrap; gap:6px 18px; font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-faint); }
.meta-row b{ color:var(--bone-dim); font-weight:500; }

/* ---------- stamps & markers ---------- */
.stamp{
  display:inline-block; padding:6px 10px;
  border:2px solid currentColor; border-radius:3px;
  font-family:var(--font-mono); font-size:var(--fs-micro); letter-spacing:.26em; text-transform:uppercase; line-height:1.3;
  color:var(--gold); transform:rotate(-3deg); opacity:.9;
  -webkit-mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><filter id='g'><feTurbulence baseFrequency='.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
          mask-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='60'><filter id='g'><feTurbulence baseFrequency='.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.4 -.2'/></filter><rect width='100%' height='100%' filter='url(%23g)'/></svg>");
}
.stamp-red{ color:var(--red); }
.stamp-bone{ color:var(--bone-dim); }
.stamp-flat{ transform:none; }
.chip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 9px;
  border:1px solid var(--border-bright); border-radius:3px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-dim);
}
.chip-gold{ border-color:var(--gold-line); color:var(--gold); }
.chip-amber{ border-color:var(--signal-dim); color:var(--signal); }
.chip-red{ border-color:var(--red-dim); color:var(--red); }
.chip-ok{ border-color:var(--ok-dim); color:var(--ok); }

/* ---------- states ---------- */
.state{
  display:grid; justify-items:center; text-align:center; gap:12px;
  padding:36px 20px; border:1px dashed var(--border-bright); border-radius:var(--radius-md);
  color:var(--bone-dim); background:rgba(255,255,255,.012);
}
.state img, .state svg{ width:120px; height:120px; opacity:.9; }
.state h4{ font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--bone); margin:0; }
.state p{ margin:0; max-width:46ch; font-size:.95rem; line-height:1.55; }
.state-error{ border-color:var(--red-dim); }
.state-error h4{ color:var(--red); }
.state-ok{ border-style:solid; border-color:var(--gold-line); background:var(--gold-ink); }
.state-ok h4{ color:var(--gold); }
.spinner{
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--border-bright); border-top-color:var(--gold);
  animation:rspin .9s linear infinite; display:inline-block; vertical-align:middle;
}
@keyframes rspin{ to{ transform:rotate(360deg); } }
.skel{ position:relative; overflow:hidden; background:var(--ink-lift); border-radius:var(--radius-sm); min-height:14px; }
.skel::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg, transparent, rgba(255,255,255,.05), transparent); transform:translateX(-100%); animation:rshimmer 1.6s ease-in-out infinite; }
@keyframes rshimmer{ to{ transform:translateX(100%); } }

/* ---------- forms ---------- */
.field{ display:grid; gap:8px; }
.field label{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-dim); display:flex; justify-content:space-between; gap:12px; }
.field label .count{ color:var(--bone-faint); letter-spacing:.08em; font-variant-numeric:tabular-nums; }
.field label .count.is-near{ color:var(--signal); }
.field label .count.is-over{ color:var(--red); }
.field input, .field textarea{
  width:100%; min-height:50px; padding:14px 16px;
  font-family:var(--font-body); font-size:16px; color:var(--bone);
  background:var(--ink-soft); border:1px solid var(--border-bright); border-radius:var(--radius-sm);
  transition:border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out);
}
.field textarea{ min-height:96px; resize:vertical; line-height:1.5; }
.field input::placeholder, .field textarea::placeholder{ color:var(--bone-faint); }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-ink); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:var(--red); }
.field .hint{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; color:var(--bone-faint); line-height:1.5; min-height:1em; }
.field .hint.is-error{ color:var(--red); }
.form-status{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.08em; line-height:1.6; color:var(--bone-dim); min-height:1.2em; }
.form-status.is-error{ color:var(--red); }
.form-status.is-ok{ color:var(--ok); }

/* ---------- cards ---------- */
.rcard{
  position:relative; background:var(--ink-soft); border:1px solid var(--border); border-radius:var(--radius-md);
  padding:22px; transition:border-color var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.rcard:hover{ border-color:var(--border-bright); box-shadow:var(--shadow-1); }
.rcard-link{ display:block; color:inherit; text-decoration:none; }
.rcard-link:hover{ border-color:var(--gold-line); transform:translateY(-2px); }
.rcard-link:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.rcard-tag{ font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); margin-bottom:10px; display:flex; justify-content:space-between; gap:10px; }
.rcard-tag span:first-child{ white-space:nowrap; }
.rcard-tag span:last-child{ color:var(--bone-faint); text-align:right; }
.issue-card .rcard-tag{ flex-wrap:wrap; justify-content:flex-start; gap:4px 12px; }
.issue-card .rcard-tag span:last-child{ text-align:left; }
.rcard h3{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; letter-spacing:-.01em; line-height:1.15; margin:0 0 8px; color:var(--bone); }
.rcard p{ margin:0; color:var(--bone-dim); line-height:1.55; font-size:.95rem; }
.rcard .rcard-cta{ margin-top:16px; font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:inline-flex; gap:8px; align-items:center; }

/* =========================================================
   HOMEPAGE — Classified After Hours
   ========================================================= */
.hero-v2{
  position:relative; min-height:calc(100svh - 72px); display:grid; align-items:center;
  padding:calc(var(--section-pad) + 56px) var(--gutter) var(--section-pad);
  overflow:hidden; isolation:isolate;
}
.hero-v2-inner{ max-width:var(--wrap); margin:0 auto; width:100%; display:grid; gap:36px; align-items:center; grid-template-columns:1fr; }
.hero-v2-copy{ position:relative; z-index:2; }
.hero-v2 .file-tag{
  display:inline-flex; align-items:center; gap:10px; margin-bottom:22px;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:var(--bone-dim);
  border:1px solid var(--border-bright); padding:7px 12px; border-radius:3px;
}
.hero-v2 .file-tag b{ color:var(--gold); font-weight:500; }
.hero-v2 h1{
  font-family:var(--font-display); font-weight:700; font-size:var(--fs-hero); line-height:var(--lh-tight); letter-spacing:-.035em;
  color:var(--bone); margin:0 0 22px;
}
.hero-v2 h1 em{ font-family:var(--font-serif); font-style:italic; font-weight:500; color:var(--gold-hot); letter-spacing:-.01em; }
.hero-v2 .lede{ font-size:var(--fs-lede); line-height:1.55; color:var(--bone-dim); max-width:52ch; margin:0 0 30px; }
.hero-v2 .lede b{ color:var(--bone); font-weight:500; }
.hero-v2-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:28px; }
.hero-v2-meta{ display:flex; flex-wrap:wrap; gap:8px 22px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-faint); }
.hero-v2-meta span::before{ content:"·"; margin-right:10px; color:var(--gold-dim); }
.hero-v2-meta span:first-child::before{ content:none; }
.hero-v2-art{ position:relative; z-index:1; display:grid; place-items:center; }
.hero-v2-art .crest{ position:relative; width:min(60vw, 300px); aspect-ratio:1; display:grid; place-items:center; }
.hero-v2-art .crest::before{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--gold-line);
  background:radial-gradient(circle at 50% 45%, rgba(207,168,71,.16), rgba(207,168,71,.03) 55%, transparent 70%);
}
.hero-v2-art .crest::after{
  content:""; position:absolute; inset:14px; border-radius:50%;
  border:1px dashed rgba(207,168,71,.28);
}
.hero-v2-art .crest img{ width:62%; height:auto; position:relative; filter:drop-shadow(0 18px 40px rgba(0,0,0,.6)); }
.hero-v2-art .hm-peek{ position:absolute; right:-24%; bottom:-20%; width:44%; max-width:170px; height:auto; filter:drop-shadow(0 10px 20px rgba(0,0,0,.6)); }
.hero-v2-art .crest-label{
  position:absolute; left:50%; bottom:-34px; transform:translateX(-50%);
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:.3em; text-transform:uppercase; color:var(--bone-faint); white-space:nowrap;
}
@media (min-width: 880px){
  .hero-v2-inner{ grid-template-columns:minmax(0, 1.25fr) minmax(0, .9fr); gap:48px; }
  .hero-v2-art .crest{ width:min(32vw, 380px); }
}

/* --- Signal strip under the hero: three honest pointers --- */
.waypoints{ padding:0 var(--gutter) var(--section-pad); }
.waypoints-inner{ max-width:var(--wrap); margin:0 auto; display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.waypoint{ display:grid; gap:6px; padding:20px 22px; background:var(--ink-soft); color:inherit; text-decoration:none; transition:background var(--dur-2) var(--ease-out); min-height:44px; }
.waypoint:hover{ background:var(--ink-lift); }
.waypoint:focus-visible{ outline:2px solid var(--gold); outline-offset:-3px; }
.waypoint .wp-k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.waypoint .wp-t{ font-weight:600; font-size:1.05rem; color:var(--bone); letter-spacing:-.01em; }
.waypoint .wp-d{ font-size:.9rem; color:var(--bone-dim); line-height:1.5; }
@media (min-width: 700px){ .waypoints-inner{ grid-template-columns:repeat(4, 1fr); } }

/* --- Latest Transmission (Music) --- */
.tx-music{ display:grid; gap:24px; align-items:center; }
.tx-art{ position:relative; border:1px solid var(--border-bright); border-radius:var(--radius-md); overflow:hidden; background:var(--ink-soft); aspect-ratio:16/9; }
.tx-art img{ width:100%; height:100%; object-fit:cover; display:block; }
.tx-art .tx-art-tag{ position:absolute; left:14px; top:14px; }
.tx-art .tx-play{
  position:absolute; inset:0; display:grid; place-items:center; color:var(--bone); text-decoration:none;
  background:linear-gradient(180deg, rgba(7,7,8,.05), rgba(7,7,8,.55));
}
.tx-art .tx-play span{
  display:grid; place-items:center; width:72px; height:72px; border-radius:50%;
  border:1px solid var(--gold-line); background:rgba(7,7,8,.7); color:var(--gold-hot); font-size:22px;
  transition:transform var(--dur-2) var(--ease-out), background var(--dur-2) var(--ease-out);
}
.tx-art .tx-play:hover span{ transform:scale(1.06); background:rgba(207,168,71,.18); }
.tx-art .tx-play:focus-visible{ outline:2px solid var(--gold); outline-offset:-4px; }
.tx-copy h3{ font-family:var(--font-display); font-weight:700; font-size:clamp(1.7rem, 3vw, 2.4rem); letter-spacing:-.02em; line-height:1.05; margin:10px 0 12px; }
.tx-copy h3 small{ display:block; font-family:var(--font-serif); font-style:italic; font-weight:500; font-size:.62em; color:var(--gold-hot); letter-spacing:0; margin-top:6px; }
.tx-copy p{ color:var(--bone-dim); line-height:1.55; margin:0 0 20px; max-width:50ch; }
.tx-links{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; }
.tx-links .soon{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint); border:1px dashed var(--border-bright); padding:8px 12px; border-radius:3px; }
@media (min-width: 880px){ .tx-music{ grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:40px; } }

/* --- The Wall preview --- */
.wall-preview{ display:grid; gap:14px; }
.wall-preview .wall-list{ --wall-cols:1; }
.wall-cta-card{
  display:grid; gap:14px; align-content:center; padding:26px; border:1px solid var(--gold-line); border-radius:var(--radius-md);
  background:linear-gradient(160deg, rgba(207,168,71,.12), rgba(207,168,71,.03) 60%, transparent);
}
.wall-cta-card h3{ font-family:var(--font-display); font-weight:700; font-size:1.5rem; letter-spacing:-.02em; margin:0; }
.wall-cta-card p{ margin:0; color:var(--bone-dim); line-height:1.5; }
@media (min-width: 880px){ .wall-preview{ grid-template-columns:minmax(0, 1.6fr) minmax(280px, .8fr); gap:24px; align-items:start; } }

/* --- Archive gateway --- */
.archive-grid{ display:grid; gap:14px; }
.archive-grid .rcard-link.is-wide{ grid-column:1 / -1; }
.archive-personnel{ display:flex; align-items:center; gap:-8px; margin-top:14px; }
.archive-personnel img{ width:40px; height:40px; border-radius:50%; object-fit:cover; border:2px solid var(--ink-soft); margin-right:-10px; filter:grayscale(.5) contrast(1.05); }
.archive-personnel span{ margin-left:18px; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint); }
@media (min-width: 700px){ .archive-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width: 1000px){ .archive-grid{ grid-template-columns:repeat(3, 1fr); } .archive-grid .rcard-link.is-wide{ grid-column:auto; } }

/* --- Meet Hot Mutt --- */
.hm-intro{ display:grid; gap:28px; align-items:center; }
.hm-intro-art{ position:relative; display:grid; place-items:center; padding:20px; }
.hm-intro-art::before{
  content:""; position:absolute; inset:8% 12%; border:1px solid var(--border-bright); border-radius:var(--radius-lg);
  background:repeating-linear-gradient(0deg, transparent 0 7px, rgba(255,255,255,.012) 7px 8px);
}
.hm-intro-art img{ position:relative; width:min(70vw, 360px); height:auto; filter:drop-shadow(0 20px 40px rgba(0,0,0,.6)); }
.hm-intro-art .corner{ position:absolute; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.26em; text-transform:uppercase; color:var(--bone-faint); }
.hm-intro-art .corner.tl{ top:2%; left:4%; } .hm-intro-art .corner.br{ bottom:2%; right:4%; }
.hm-dossier{ display:grid; gap:0; border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; background:var(--ink-soft); margin:22px 0; }
.hm-dossier div{ display:grid; grid-template-columns:120px 1fr; gap:12px; padding:12px 16px; border-top:1px solid var(--border); font-size:.95rem; }
.hm-dossier div:first-child{ border-top:0; }
.hm-dossier dt{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-faint); align-self:center; }
.hm-dossier dd{ margin:0; color:var(--bone); }
.hm-dossier dd.red{ color:var(--red); font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; }
.hm-quote{ font-family:var(--font-serif); font-style:italic; font-size:clamp(1.3rem, 2.2vw, 1.7rem); color:var(--gold-hot); line-height:1.3; margin:0 0 22px; }
@media (min-width: 880px){ .hm-intro{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); gap:48px; } }

/* --- Join the Realm --- */
.join-grid{ display:grid; gap:14px; }
.join-card{ display:grid; gap:14px; align-content:start; }
.join-card .join-k{ font-family:var(--font-mono); font-size:10px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); }
.join-card h3{ margin:0; font-size:1.45rem; }
.join-card ul{ margin:0; padding:0; list-style:none; display:grid; gap:8px; }
.join-card li{ position:relative; padding-left:20px; color:var(--bone-dim); line-height:1.5; font-size:.95rem; }
.join-card li::before{ content:""; position:absolute; left:0; top:.6em; width:10px; height:1px; background:var(--gold); }
.join-card .join-price{ font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--bone-dim); }
.join-card .join-price b{ color:var(--bone); font-weight:600; }
.join-card.is-paid{ border-color:var(--gold-line); }
@media (min-width: 760px){ .join-grid{ grid-template-columns:1fr 1fr; } }

/* --- Field Issue (merch) honesty --- */
.issue-grid{ display:grid; gap:14px; }
.issue-card{ padding:0; overflow:hidden; display:grid; grid-template-rows:auto 1fr; }
.issue-card figure{ margin:0; aspect-ratio:4/3; overflow:hidden; background:var(--ink-lift); position:relative; }
.issue-card figure img{ width:100%; height:100%; object-fit:cover; display:block; filter:saturate(.85); transition:transform var(--dur-3) var(--ease-out); }
.issue-card:hover figure img{ transform:scale(1.03); }
.issue-card figure .chip{ position:absolute; left:12px; top:12px; background:rgba(7,7,8,.75); backdrop-filter:blur(4px); }
.issue-card .issue-body{ padding:18px 20px 20px; display:grid; gap:8px; }
.issue-card .issue-foot{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:6px; padding-top:12px; border-top:1px dashed var(--border); }
.issue-card .issue-price{ font-family:var(--font-mono); font-size:13px; color:var(--bone); letter-spacing:.06em; }
.issue-card .issue-price small{ color:var(--bone-faint); margin-left:4px; }
.issue-card .issue-foot .chip{ white-space:nowrap; flex:0 0 auto; }
@media (min-width: 1000px) and (max-width: 1180px){ .issue-card .issue-price small{ display:block; margin-left:0; } }
@media (min-width: 620px){ .issue-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (min-width: 1000px){ .issue-grid{ grid-template-columns:repeat(4, 1fr); gap:16px; } }

/* --- Latest from the Realm (transmissions table) --- */
.tx-log{ display:grid; gap:1px; background:var(--border); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.tx-row{ display:grid; grid-template-columns:auto 1fr; gap:10px 16px; padding:16px 18px; background:var(--ink-soft); align-items:start; }
.tx-row .tx-kind{ font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); padding-top:3px; min-width:84px; }
.tx-row .tx-kind.incident{ color:var(--red); } .tx-row .tx-kind.weather{ color:var(--signal); } .tx-row .tx-kind.drop{ color:var(--ok); }
.tx-row .tx-body{ color:var(--bone); line-height:1.5; font-size:.98rem; }
.tx-row .tx-time{ grid-column:2; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.12em; color:var(--bone-faint); }
.tx-row.is-pinned .tx-body::before{ content:"PINNED · "; font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; color:var(--gold-dim); }

/* --- Live feed honesty --- */
.feed-honest{ display:grid; place-items:center; gap:10px; padding:28px 20px; text-align:center; }
.feed-honest img{ width:150px; height:150px; opacity:.85; }

/* =========================================================
   THE WALL
   ========================================================= */
.wall-hero{ padding:calc(var(--section-pad) * .8) var(--gutter) 10px; }
.wall-hero .rs-inner{ display:grid; gap:18px; }
.wall-hero h1{ font-family:var(--font-display); font-weight:700; font-size:var(--fs-hero); line-height:.95; letter-spacing:-.035em; margin:0; }
.wall-hero h1 em{ font-family:var(--font-serif); font-style:italic; font-weight:500; color:var(--gold-hot); }
.wall-hero .lede{ font-size:var(--fs-lede); color:var(--bone-dim); max-width:54ch; line-height:1.55; margin:0; }
.wall-count{ font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-faint); min-height:1.2em; }
.wall-count b{ color:var(--gold); font-weight:500; }

.wall-sign{ padding:24px var(--gutter) var(--section-pad); }
.wall-sign-card{
  max-width:var(--wrap); margin:0 auto; display:grid; gap:22px;
  padding:clamp(20px, 3vw, 34px); border:1px solid var(--gold-line); border-radius:var(--radius-md);
  background:linear-gradient(160deg, rgba(207,168,71,.1), rgba(207,168,71,.02) 55%, transparent); position:relative;
}
.wall-sign-card .stamp{ position:absolute; right:16px; top:14px; }
.wall-form{ display:grid; gap:18px; }
.wall-form .wall-form-row{ display:grid; gap:18px; }
.wall-form .wall-form-foot{ display:flex; flex-wrap:wrap; gap:14px 22px; align-items:center; justify-content:space-between; }
.wall-form .rs-fine{ max-width:60ch; }
@media (min-width: 760px){ .wall-form .wall-form-row{ grid-template-columns:minmax(0, .8fr) minmax(0, 1.4fr); } }
.wall-success{ display:grid; gap:12px; justify-items:start; }
.wall-success .wall-success-head{ display:flex; align-items:center; gap:16px; }
.wall-success img{ width:88px; height:88px; }
.wall-success h3{ margin:0; font-family:var(--font-display); font-size:1.5rem; letter-spacing:-.02em; }
.wall-success h3 small{ display:block; font-family:var(--font-mono); font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin-top:4px; font-weight:500; }
.wall-success p{ margin:0; color:var(--bone-dim); line-height:1.5; }
.wall-success .rs-actions{ margin-top:6px; }

.wall-board{ padding:0 var(--gutter) var(--section-pad); }
.wall-board .rs-inner{ display:grid; gap:20px; }
.wall-tools{ display:grid; gap:12px; align-items:center; }
.wall-tools .field{ margin:0; }
.wall-tools .field input{ min-height:46px; padding:10px 14px; font-size:15px; }
.wall-tools .wall-tools-meta{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 18px; }
@media (min-width: 700px){ .wall-tools{ grid-template-columns:minmax(0, 1fr) auto; } }

.wall-list{ --wall-cols:1; list-style:none; margin:0; padding:0; display:grid; gap:14px; grid-template-columns:repeat(var(--wall-cols), minmax(0, 1fr)); }
@media (min-width: 640px){ .wall-list{ --wall-cols:2; } }
@media (min-width: 1000px){ .wall-list{ --wall-cols:3; } .wall-preview .wall-list{ --wall-cols:2; } }
.mark{
  position:relative; display:grid; gap:10px; padding:20px 20px 18px;
  background:var(--ink-soft); border:1px solid var(--border); border-radius:var(--radius-sm);
  min-height:120px; overflow-wrap:anywhere;
  transition:transform var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out);
}
.mark::before{ content:""; position:absolute; left:14px; right:14px; top:0; height:1px; background:linear-gradient(90deg, transparent, var(--gold-line), transparent); }
.mark:hover{ border-color:var(--border-bright); }
.mark .mark-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; }
.mark .mark-name{ font-family:var(--font-display); font-weight:700; font-size:1.08rem; letter-spacing:-.01em; color:var(--bone); line-height:1.2; }
.mark .mark-no{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.22em; color:var(--bone-faint); white-space:nowrap; padding-top:3px; }
.mark .mark-text{ font-family:var(--font-serif); font-size:1.18rem; line-height:1.4; color:var(--bone-dim); font-style:italic; margin:0; }
.mark .mark-text.is-empty{ font-family:var(--font-mono); font-style:normal; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-faint); }
.mark .mark-foot{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-family:var(--font-mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint); margin-top:auto; }
.mark .mark-stamp{ font-size:9px; letter-spacing:.24em; color:var(--gold-dim); border:1px solid var(--gold-dim); padding:2px 6px; border-radius:2px; transform:rotate(-2deg); }
/* controlled variation — never breaks reading order */
.mark:nth-child(3n+1){ transform:rotate(-.35deg); } .mark:nth-child(3n+2){ transform:rotate(.3deg); } .mark:nth-child(5n){ --tilt:-.25deg; }
.mark:nth-child(4n) .mark-stamp{ color:var(--signal-dim); border-color:var(--signal-dim); transform:rotate(2deg); }
.mark:nth-child(7n) .mark-stamp{ color:var(--red-dim); border-color:var(--red-dim); }
.mark.is-new{ border-color:var(--gold); box-shadow:var(--shadow-gold); animation:markIn var(--dur-3) var(--ease-out) both; }
@keyframes markIn{ from{ opacity:0; transform:translateY(10px) scale(.98); } to{ opacity:1; transform:none; } }
.mark.is-you .mark-stamp{ color:var(--gold); border-color:var(--gold); }
.wall-more{ display:grid; justify-items:center; gap:10px; padding-top:6px; }
.wall-list-skel .mark{ min-height:120px; }
.wall-list-skel .skel{ height:14px; } .wall-list-skel .skel.w60{ width:60%; } .wall-list-skel .skel.w90{ width:90%; } .wall-list-skel .skel.w40{ width:40%; }
.wall-rules{ display:grid; gap:8px; }
.wall-rules .rs-fine{ margin:0; }

/* =========================================================
   HOT MUTT — dossier page + integrations
   ========================================================= */
.hm-page .lore-header .stamp{ transform:none; }
.hm-sheet{ display:grid; gap:12px; margin:26px 0; }
.hm-sheet figure{ margin:0; display:grid; gap:8px; justify-items:center; padding:16px 10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--ink-soft); }
.hm-sheet figure img{ width:100%; max-width:140px; height:auto; aspect-ratio:1; }
.hm-sheet figure.wide img{ aspect-ratio:auto; max-width:100%; }
.hm-sheet figcaption{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--bone-faint); text-align:center; }
@media (min-width: 560px){ .hm-sheet{ grid-template-columns:repeat(3, 1fr); } .hm-sheet figure.wide{ grid-column:1 / -1; } }
@media (min-width: 900px){ .hm-sheet{ grid-template-columns:repeat(4, 1fr); } .hm-sheet figure.wide{ grid-column:span 2; } }
.hm-swatches{ display:grid; grid-template-columns:repeat(auto-fit, minmax(120px, 1fr)); gap:10px; margin:14px 0 24px; }
.hm-swatch{ display:grid; gap:6px; }
.hm-swatch i{ display:block; height:44px; border-radius:3px; border:1px solid var(--border-bright); }
.hm-swatch span{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--bone-faint); }
.hm-swatch span b{ display:block; color:var(--bone-dim); font-weight:500; }
.canon-note{ margin:18px 0; padding:14px 16px; border-left:2px solid var(--signal); background:rgba(224,163,58,.05); font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; line-height:1.6; color:var(--bone-dim); }
.canon-note b{ color:var(--signal); font-weight:500; }

/* restrained footer cameo */
.footer-hm{ display:flex; align-items:center; gap:12px; margin-top:18px; color:var(--bone-faint); text-decoration:none; font-family:var(--font-mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; }
.footer-hm img{ width:34px; height:34px; opacity:.75; transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); }
.footer-hm:hover img{ opacity:1; transform:rotate(-6deg); }
.footer-hm:hover{ color:var(--gold); }

/* 404 cameo */
.hm-404{ display:grid; justify-items:center; gap:8px; margin:0 auto 26px; }
.hm-404 img{ width:min(60vw, 220px); height:auto; }
.hm-404 span{ font-family:var(--font-mono); font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--bone-faint); }

/* =========================================================
   DIRECTORY SEARCH (dialog)
   ========================================================= */
.dir-dialog{
  position:fixed; inset:0; z-index:var(--z-dialog); display:none;
  padding:min(12vh, 90px) var(--gutter) 24px; background:rgba(5,5,6,.78); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.dir-dialog.is-open{ display:block; }
.dir-panel{
  max-width:680px; margin:0 auto; background:var(--ink-soft); border:1px solid var(--gold-line); border-radius:var(--radius-md);
  box-shadow:var(--shadow-2); overflow:hidden; display:grid; grid-template-rows:auto auto 1fr auto; max-height:min(76vh, 640px);
}
.dir-head{ display:flex; align-items:center; gap:10px; padding:10px 12px 10px 16px; border-bottom:1px solid var(--border); }
.dir-head svg{ width:16px; height:16px; color:var(--gold); flex:0 0 auto; }
.dir-head input{ flex:1; min-height:44px; background:transparent; border:0; color:var(--bone); font-family:var(--font-body); font-size:17px; outline:none; }
.dir-head input::placeholder{ color:var(--bone-faint); }
.dir-close{ min-width:44px; min-height:44px; border:1px solid var(--border-bright); border-radius:3px; color:var(--bone-dim); font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; cursor:pointer; background:transparent; }
.dir-close:hover, .dir-close:focus-visible{ border-color:var(--gold); color:var(--gold); outline:none; }
.dir-hint{ padding:8px 16px; font-family:var(--font-mono); font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--bone-faint); border-bottom:1px solid var(--border); display:flex; justify-content:space-between; gap:12px; }
.dir-results{ list-style:none; margin:0; padding:6px; overflow:auto; }
.dir-results li a{
  display:grid; grid-template-columns:auto 1fr auto; gap:4px 14px; align-items:center; padding:12px 12px; border-radius:4px; color:inherit; text-decoration:none;
}
.dir-results li a:hover, .dir-results li a[aria-selected="true"]{ background:var(--gold-ink); }
.dir-results li a:focus-visible{ outline:2px solid var(--gold); outline-offset:-2px; }
.dir-results .dir-kind{ font-family:var(--font-mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); min-width:74px; }
.dir-results .dir-title{ font-weight:600; color:var(--bone); }
.dir-results .dir-desc{ grid-column:2 / 4; color:var(--bone-dim); font-size:.9rem; line-height:1.45; }
.dir-results .dir-go{ font-family:var(--font-mono); font-size:11px; color:var(--bone-faint); }
.dir-empty{ padding:28px 16px; text-align:center; color:var(--bone-dim); display:grid; justify-items:center; gap:10px; }
.dir-empty img{ width:84px; height:84px; opacity:.85; }
.dir-foot{ padding:8px 16px; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--bone-faint); }
body.dir-open{ overflow:hidden; }

/* =========================================================
   TOASTS + SHARE
   ========================================================= */
.rtoast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%, 20px); z-index:var(--z-toast); opacity:0; pointer-events:none;
  padding:12px 16px; border:1px solid var(--gold-line); border-radius:4px; background:rgba(12,12,15,.96); color:var(--bone);
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; box-shadow:var(--shadow-2);
  transition:opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out); max-width:min(92vw, 520px); text-align:center;
}
.rtoast.is-on{ opacity:1; transform:translate(-50%, 0); }
.share-btn svg{ width:14px; height:14px; }

/* =========================================================
   FIELD NOTES (browser-local discoveries)
   ========================================================= */
.fn-panel{ border:1px solid var(--border); border-radius:var(--radius-md); background:var(--ink-soft); padding:20px; display:grid; gap:14px; }
.fn-panel h3{ margin:0; font-family:var(--font-mono); font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold); display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.fn-panel h3 span{ color:var(--bone-faint); }
.fn-list{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.fn-list li{ display:grid; grid-template-columns:22px 1fr; gap:12px; align-items:start; font-size:.95rem; color:var(--bone-dim); line-height:1.45; }
.fn-list li i{ width:18px; height:18px; border:1px solid var(--border-bright); border-radius:3px; display:grid; place-items:center; font-style:normal; font-size:11px; color:var(--gold); margin-top:2px; }
.fn-list li.is-found{ color:var(--bone); }
.fn-list li.is-found i{ border-color:var(--gold); background:var(--gold-ink); }
.fn-list li b{ font-weight:600; color:inherit; display:block; }
.fn-list li small{ font-family:var(--font-mono); font-size:10px; letter-spacing:.1em; color:var(--bone-faint); }
.fn-foot{ display:flex; flex-wrap:wrap; gap:10px 18px; justify-content:space-between; align-items:center; }

/* access-granted stamp: transient, never a permanent overlay */
.access-stamp.is-shown{ animation:stampIn .6s cubic-bezier(.5,1.6,.7,1) forwards, stampOut .5s ease-in 4.2s forwards; }
@keyframes stampOut{ to{ opacity:0; transform:rotate(-4deg) translateY(-6px); visibility:hidden; } }

/* the old fixed rubber stamp covered content on every page */
.hot-mutt-stamp{ display:none !important; }

/* portal: visible skip affordance */
.portal-skip{
  position:absolute; left:50%; top:16px; transform:translateX(-50%); z-index:30; /* above every portal2 layer (max 20); top-centre keeps clear of the corner HUD text */
  min-height:44px; padding:0 14px; display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--bone-dim); border:1px solid var(--border-bright); border-radius:3px; background:rgba(5,5,6,.6); cursor:pointer;
}
.portal-skip:hover, .portal-skip:focus-visible{ color:var(--gold); border-color:var(--gold); outline:none; }
@media (max-width:640px){ .portal-skip{ top:10px; } }

@media (prefers-reduced-motion: reduce){
  .mark, .mark.is-new, .rtoast, .rbtn, .rcard, .issue-card figure img, .tx-art .tx-play span{ transition:none !important; animation:none !important; }
  .spinner, .skel::after{ animation:none !important; }
  .access-stamp.is-shown{ animation:none; opacity:0; }
}

/* prevent horizontal overflow from decorative layers */
html, body{ max-width:100%; overflow-x:hidden; }

/* ---------- cross-document view transitions ----------
   Every page opts in so the header stays pinned between pages and the
   browser never half-starts a transition into a page that didn't opt in
   (that logs "AbortError: Transition was skipped"). fx3.css carries the
   richer animations on the pages that load it; here it is a plain fade. */
@view-transition { navigation: auto; }
.hdr-lite, .site-header { view-transition-name: realm-hdr; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }