/* ─────────────────────────────────────────────────────────────────────────
   PUSSY FACTORY, INC. — site-wide shared styles for the builder-generated
   events surface (the "Operations Bureau" documents).

   Written by services/builder to pussyfactory.org/site.css; every PF
   builder page links it with <link rel="stylesheet" href="/site.css">.
   The landing page (index.html) keeps its OWN styles.css — this file only
   styles the event pages, so the two never collide.

   Mirrors the brand tokens + the document-dossier devices from
   sites/pussyfactory.org/styles.css (the .sheet frame, the warm-paper room,
   the masthead/colophon) so the events surface reads as the same company's
   paperwork. Page-specific styles stay in each page's own <style> block.
   ───────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');
:root {
  --paper:    #e6ddcf;   /* warm fluorescent greige — the wall */
  --paper-2:  #ded3c2;   /* panel / document stock */
  --paper-3:  #d3c7b3;   /* recessed field */
  --ink:      #221d18;   /* warm charcoal */
  --ink-soft: #5a5147;   /* secondary text */
  --taupe:    #8a7d6b;   /* the suit */
  --mauve:    #b6a3a0;   /* the chairs — dusty rose-grey */
  --burgundy: #6e2a33;   /* corporate maroon — the action color */
  --line:     rgba(34,29,24,.22);
  --line-2:   rgba(34,29,24,.40);
  --rec:      #a8313a;
  --page-max: 1180px;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { min-height: 100%; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
  padding: clamp(14px, 2.4vw, 30px);
  min-height: 100vh;
  line-height: 1.6;
}

/* ── fixed atmosphere: the fluorescent-lit room, scanlines, film grain ── */
.room { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(120% 75% at 50% -10%, rgba(255,252,244,.55), transparent 55%),
    radial-gradient(140% 90% at 50% 120%, rgba(40,33,28,.20), transparent 60%);
  animation: flicker 7s steps(1) infinite; }
@keyframes flicker { 0%,96%,100% { opacity: 1; } 97% { opacity: .82; } 98% { opacity: .97; } 99% { opacity: .88; } }
.grain { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .10; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.scan { position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .04;
  background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(34,29,24,1) 2px 3px); }

/* ── the document sheet: every page is a sheet of company paper ── */
.sheet { position: relative; z-index: 2; max-width: var(--page-max); margin: 0 auto;
  border: 1px solid var(--line-2);
  background: linear-gradient(180deg, var(--paper-2), color-mix(in srgb, var(--paper-2) 88%, #000 12%) 220%);
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 30px 80px -50px rgba(34,29,24,.8);
  padding: clamp(20px, 3vw, 40px); }
.sheet::before, .sheet::after { content: ""; position: absolute; width: 16px; height: 16px; pointer-events: none; }
.sheet::before { top: 8px; left: 8px; border-top: 1px solid var(--line-2); border-left: 1px solid var(--line-2); }
.sheet::after { bottom: 8px; right: 8px; border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); }

/* The site header (nav) + footer (colophon) are NOT here — they are one client-side
   reusable symbol, sites/pussyfactory.org/pf-chrome.js (mounted via <pf-nav>/<pf-footer>),
   shared by static AND builder-generated pages so one edit updates the chrome everywhere.
   This stylesheet only styles page bodies. */

/* ── shared kicker (mono eyebrow with a trailing rule) ── */
.kicker { font-family: "Space Mono", monospace; font-size: 11px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink-soft); display: flex; align-items: center; gap: 12px; }
.kicker::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ── action buttons (burgundy, mono, letter-spaced) ── */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: "Space Mono", monospace; font-weight: 700;
  font-size: 12px; letter-spacing: .2em; text-transform: uppercase; color: var(--paper); background: var(--burgundy);
  border: 1px solid var(--burgundy); cursor: pointer; padding: 14px 22px; text-decoration: none;
  transition: background .2s, transform .12s, letter-spacing .2s; }
.btn:hover { background: var(--ink); border-color: var(--ink); letter-spacing: .26em; }
.btn:active { transform: translateY(1px); }
.btn.ghost { color: var(--ink); background: transparent; border-color: var(--line-2); }
.btn.ghost:hover { color: var(--burgundy); border-color: var(--burgundy); background: transparent; }

/* ─── leaked-document furniture (shared by the events surface) ───────────────
   The "confidential corporate memo, since declassified" language: rubber stamps,
   redaction bars that lift on hover/focus, and a typed memorandum routing block.
   Used ONLY on decorative chrome — never over real event facts. */

/* rotated rubber stamp — position via the parent (relative). .tilt-r flips the lean. */
.stamp { position: absolute; z-index: 6; pointer-events: none; transform: rotate(-8deg);
  color: var(--burgundy); border: 2.5px double var(--burgundy); border-radius: 4px; padding: 5px 13px;
  font-family: "Space Mono", monospace; font-weight: 700; font-size: clamp(11px,1.4vw,15px);
  letter-spacing: .14em; text-transform: uppercase; opacity: .42; mix-blend-mode: multiply; white-space: nowrap; }
.stamp.tilt-r { transform: rotate(6deg); }

/* redaction bar — the covered text is decorative flavor only; it lifts on hover or
   keyboard focus (the el is focusable), like skimming a marker off a declassified file. */
.redact { position: relative; display: inline-block; color: var(--ink); cursor: help; outline: none; }
.redact::after { content: ""; position: absolute; inset: -1px -3px; background: var(--ink); border-radius: 1px;
  transition: opacity .2s, clip-path .25s; clip-path: inset(0 0 0 0); }
.redact:hover::after, .redact:focus-visible::after { opacity: 0; clip-path: inset(0 100% 0 0); }

/* classification / distribution strip — a thin run of mono document metadata */
.classbar { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 16px;
  font-family: "Space Mono", monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-soft); padding-top: 12px; border-top: 1px solid var(--line); }
.classbar b { color: var(--burgundy); font-weight: 700; }

/* typed memorandum routing block — FROM / TO / RE / CLASS, the internal-memo header */
.memo-cap { font-family: "Space Mono", monospace; font-size: 10px; letter-spacing: .34em; text-transform: uppercase;
  color: var(--ink-soft); margin-bottom: 8px; }
.routing { display: grid; grid-template-columns: max-content 1fr; gap: 5px 18px;
  font-family: "Space Mono", monospace; font-size: 11.5px; letter-spacing: .03em; color: var(--ink);
  border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); padding: 12px 2px; }
.routing .l { color: var(--ink-soft); text-transform: uppercase; letter-spacing: .18em; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }