/* ============================================================
   MEDIATOWN — VISUAL PASS (override layer)
   Loaded last; wins over the legacy inline styles. !important is
   deliberate here — this file IS the override mechanism.
   Two families: Cairo (display + body, loaded from Google Fonts,
   Archivo kept self-hosted as the fallback) + Space Mono.
   ============================================================ */

/* ---------- Phase 3 — self-hosted fonts: exactly 3 woff2 files ---------- */
@font-face{ font-family:'Archivo'; font-style:normal; font-weight:100 900; font-stretch:62% 125%;
  font-display:swap; src:url('assets/fonts/Archivo-100_900.woff2') format('woff2'); }
@font-face{ font-family:'Space Mono'; font-style:normal; font-weight:400;
  font-display:swap; src:url('assets/fonts/SpaceMono-400.woff2') format('woff2'); }
@font-face{ font-family:'Space Mono'; font-style:normal; font-weight:700;
  font-display:swap; src:url('assets/fonts/SpaceMono-700.woff2') format('woff2'); }

/* ---------- STEP 1 — tokens + font mapping ---------- */
:root{
  --bg:#000; --bg-2:#0A0A0A; --paper:#F2F0EA;
  --ink:rgba(242,240,234,1); --ink-2:rgba(242,240,234,.72); --ink-3:rgba(242,240,234,.55);
  --hairline:rgba(242,240,234,.22); --ink-dark:#0A0A0A; --signal:#D00015;
  --font-display:'Cairo','Archivo',system-ui,sans-serif;   /* Archivo stays as the fallback if the webfont is blocked */
  --font-body:'Cairo','Archivo',system-ui,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;
  --t-4:clamp(21px,1.8vw,26px); --t-5:clamp(26px,2.4vw,33px);
  --t-6:clamp(33px,3.4vw,48px); --t-7:clamp(44px,5.5vw,76px);
  --t-8:clamp(64px,8.5vw,128px); --t-9:clamp(80px,11.5vw,176px);
  --ease-hop:cubic-bezier(.8,0,.3,1);
}
/* kill the old families everywhere */
body, p, a, li, input, textarea, button{ font-family:var(--font-body) !important; }
h1,h2,h3,h4{ font-family:var(--font-display) !important; font-stretch:115%; font-weight:850; letter-spacing:-.02em; }
[class*="mono"], .fc-index, .arc-eye, .arc-meta, .hon-meta, .ab-glabel, .ab-txt, .ab-eye,
.svs-top, .foot-eye, .wk2-cap>span, .wk2-idx, .hon-no, .fc-num, .slide-num, .cta-legal,
.cta-status, .rd-tc, .rd-cat, .rd-manifesto-sub{ font-family:var(--font-mono) !important; }
/* one radius language: square everything */
button, .cta-btn, input, textarea, img, video, [class*="card"]{ border-radius:0 !important; }

/* ---------- STEP 2 (partial rollback): the works keep their poster-card grid —
   the owner prefers it. Only the banner demotion + display-size corrections stay. ---------- */
/* demote the Archive banner */
.arc-title{ font-size:var(--t-6) !important; }
/* hero film titles up a notch */
.fc-title{ font-size:var(--t-7) !important; }
/* contact display moment */
.cta-title{ font-size:var(--t-8) !important; }

/* ---------- STEP 3 — identity layer rolled back on owner's review:
   original hero (no wordmark H1), original two-line statement, no catalog codes ---------- */

/* ---------- STEP 4 — the film layer ---------- */
.rd-grain{ position:fixed; inset:0; z-index:9998; pointer-events:none; opacity:.05; mix-blend-mode:overlay;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.rd-tc{ position:fixed; top:18px; right:20px; z-index:9999; font-size:11px; letter-spacing:.14em;
  color:var(--ink-2); mix-blend-mode:difference; pointer-events:none; }
.rd-tc i{ display:inline-block; width:8px; height:8px; margin-inline-start:8px; background:var(--signal);
  border-radius:50%; animation:rd-rec 1.2s steps(2) infinite; }
@keyframes rd-rec{ 50%{ opacity:.2 } }
.rd-slate{ position:absolute; inset:0; background:#000; transform-origin:top; transform:scaleY(0);
  pointer-events:none; z-index:3; }
@media (prefers-reduced-motion: reduce){ .rd-grain,.rd-tc{ animation:none; display:none; } }

/* ---------- STEP 5 — contrast + polish sweep ---------- */
.arc-meta, .hon-meta, [class*="meta"]{ color:var(--ink-3) !important; }
.ab-rec{ color:var(--ink-3) !important; }
.hon-out{ color:var(--ink-3) !important; }
.rd-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
:focus-visible{ outline:2px solid var(--signal) !important; outline-offset:4px; }
.cta-btn, button[type="submit"]{ font-family:var(--font-mono) !important; text-transform:uppercase;
  letter-spacing:.14em; border:1px solid var(--ink-dark) !important; background:transparent !important;
  color:var(--ink-dark) !important; transition:background .24s,color .24s; }
.cta-btn:hover, button[type="submit"]:hover{ background:var(--signal) !important; color:#000 !important; border-color:var(--signal) !important; }
/* partners wordmarks: quiet -> loud on hover (text marquee, no imgs) */
.ptrack > *{ opacity:.5; transition:opacity .24s; }
.ptrack > :hover{ opacity:1; }

/* ---------- PHASE 2 §2.2 — frame ticks (awards only; works cards keep their own dividers) ---------- */
.hon-line{ height:5px !important; background:repeating-linear-gradient(90deg, var(--hairline) 0 1px, transparent 1px 9px) !important; }

/* ---------- PHASE 2 §2.4 — awards redaction reveal ---------- */
.hon-row{ overflow:hidden; }
.rd-redact{ position:absolute; inset:8px 0; background:var(--paper); z-index:4; pointer-events:none;
  will-change:transform; }
@media (prefers-reduced-motion: reduce){ .rd-redact{ display:none; } }

/* ---------- PHASE 2 §2.5 — services ghost numerals: t-9 solid 6% ink behind each card ---------- */
.svs-body::before{ font-family:var(--font-display) !important; font-stretch:125%; font-weight:900;
  font-size:var(--t-9) !important; color:rgba(10,10,10,.06) !important; -webkit-text-stroke:0 !important; }

/* ---------- STEP 6 — mobile guard ---------- */
@media (max-width:480px){
  .rd-grain{ opacity:.03; }
  .rd-tc{ font-size:10px; top:14px; right:12px; }
}