/* ============================================================
   IMAGINE REIGN — KIT
   The shared grammar behind the interview, case file, and bag
   pages. These three don't share a skin; they share a way of
   building. This file is that way of building.

   Seven primitives:
     surface   textured ground the world sits on
     display   oversized headline type
     label     small uppercase micro-copy
     tag       rotated sticker, hard shadow
     stamp     rotated outline, accent color
     object    something you can pick up
     hint      the nudge that tells you it's interactive

   Colour and type come from worlds.css. Nothing here names a
   colour directly — only tokens — so one world swap reskins
   the whole page.
============================================================ */

/* ---------- tokens ---------- */
:root{
  /* defaults; each world overrides these */
  --ir-ground:#F7F4EE;
  --ir-raised:#FFFFFF;
  --ir-ink:#14100F;
  --ir-ink-soft:#3A322E;
  --ir-dim:rgba(20,16,15,.56);
  --ir-rule:rgba(20,16,15,.13);
  --ir-rule-soft:rgba(20,16,15,.07);

  --ir-accent:#A87C1F;
  --ir-accent-2:#A31E2F;
  --ir-accent-3:#17605B;
  --ir-on-accent:#FFFFFF;

  --ir-display:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --ir-body:"Plus Jakarta Sans","Helvetica Neue",Arial,sans-serif;
  --ir-micro:"DM Mono",ui-monospace,"SF Mono",monospace;

  --ir-display-weight:800;
  --ir-display-tracking:-.05em;
  --ir-display-case:uppercase;

  /* the textured ground — worlds swap the two gradient layers */
  --ir-texture:
    linear-gradient(rgba(20,16,15,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(20,16,15,.055) 1px,transparent 1px);
  --ir-texture-size:64px 64px;
  --ir-vignette:radial-gradient(120% 60% at 50% 0%,rgba(0,0,0,0),rgba(0,0,0,0));

  /* rhythm */
  --ir-gut:clamp(18px,4vw,64px);
  --ir-step:clamp(46px,7vw,92px);

  /* the two shadow languages these pages use:
     hard = printed sticker, soft = object lifted off a desk */
  --ir-shadow-hard:14px 14px 0 var(--ir-accent);
  --ir-shadow-lift:0 10px 16px rgba(0,0,0,.45);
  --ir-shadow-held:0 26px 34px rgba(0,0,0,.6);

  --ir-ease:cubic-bezier(.2,.7,.3,1);
  --ir-ease-spring:cubic-bezier(.3,1.4,.5,1);
}

/* ---------- reset, scoped ---------- */
.ir,
.ir *,
.ir *::before,
.ir *::after{box-sizing:border-box}
.ir h1,.ir h2,.ir h3,.ir h4,.ir p,.ir ul,.ir figure{margin:0;padding:0}
.ir a{color:inherit;text-decoration:none}
.ir img{display:block;max-width:100%;height:auto}
.ir button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;margin:0;border-radius:0}
.ir :focus-visible{outline:2px solid var(--ir-accent-2);outline-offset:3px}

.ir{
  background:var(--ir-ground);
  color:var(--ir-ink);
  font-family:var(--ir-body);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* ---------- 1. surface ----------
   Every one of the three pages sits on a printed ground: a grid,
   a weave, a paper tooth. Never a flat fill. */
.ir-surface{position:relative}
.ir-surface::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--ir-texture);
  background-size:var(--ir-texture-size);
  opacity:var(--ir-texture-opacity,.85);
  -webkit-mask-image:var(--ir-texture-mask,radial-gradient(120% 60% at 50% 0%,#000,transparent 78%));
          mask-image:var(--ir-texture-mask,radial-gradient(120% 60% at 50% 0%,#000,transparent 78%));
}
.ir-surface > *{position:relative;z-index:1}

/* full-bleed escape from a boxed theme container */
.ir-bleed{
  width:var(--ir-vw,100vw);
  max-width:var(--ir-vw,100vw);
  margin-left:calc(50% - (var(--ir-vw,100vw) / 2));
  margin-right:calc(50% - (var(--ir-vw,100vw) / 2));
}

/* a fixed, non-scrolling world — the case file and bag both use this */
.ir-stage{
  position:fixed;inset:0;overflow:hidden;
  touch-action:none;
  background:var(--ir-ground);
}
.ir-stage.is-tilt{perspective:1700px;perspective-origin:50% 42%}
.ir-stage__plane{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}

/* ---------- 2. display ---------- */
.ir-display{
  font-family:var(--ir-display);
  font-weight:var(--ir-display-weight);
  font-size:clamp(46px,11vw,164px);
  line-height:.84;
  letter-spacing:var(--ir-display-tracking);
  text-transform:var(--ir-display-case);
  text-wrap:balance;
}
.ir-display--sm{font-size:clamp(28px,4.6vw,58px);line-height:.95;letter-spacing:-.04em}
.ir-display--xs{font-size:clamp(19px,1.9vw,24px);line-height:1.05;letter-spacing:-.02em}
/* the hollow second line — from the about page.
   The stroke must name a token: currentColor would resolve to the
   transparent fill on this very element and draw nothing. */
.ir-display .ir-hollow{
  font-style:normal;font-weight:300;color:transparent;
  -webkit-text-stroke:1.5px var(--ir-hollow-stroke,var(--ir-ink));
}

/* ---------- 3. label ----------
   Wide-tracked uppercase micro-copy. Present in all three pages;
   it's the connective tissue of the whole system. */
.ir-label{
  font-family:var(--ir-micro);
  font-size:11px;font-weight:700;
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ir-dim);
}
.ir-label--accent{color:var(--ir-accent-2)}
.ir-label--rule{display:flex;align-items:center;gap:14px}
.ir-label--rule::after{content:"";flex:1;height:1px;background:var(--ir-rule)}

/* ---------- 4. tag ----------
   The gold evidence tag, the lime bag tag. A sticker, slightly
   crooked, sitting on top of something. */
.ir-tag{
  display:inline-block;
  font-family:var(--ir-micro);
  font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  background:var(--ir-accent);color:var(--ir-on-accent);
  padding:6px 11px;
  transform:rotate(var(--ir-tag-tilt,-2deg));
  box-shadow:3px 3px 0 var(--ir-ink);
  border:2px solid var(--ir-ink);
  white-space:nowrap;
}
.ir-tag--flat{border:none;box-shadow:0 2px 4px rgba(0,0,0,.4)}
.ir-tag--alert{background:var(--ir-accent-2)}

/* ---------- 5. stamp ----------
   Outline, rotated, accent-coloured. CASE OPEN, CONFIDENTIAL. */
.ir-stamp{
  display:inline-block;
  font-family:var(--ir-micro);
  font-size:12px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--ir-accent-2);
  border:2.5px solid currentColor;
  padding:7px 15px;
  transform:rotate(var(--ir-stamp-tilt,-4deg));
  opacity:.9;
}
.ir-stamp--pulse{animation:ir-pulse 1.8s ease-in-out infinite}
@keyframes ir-pulse{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- 6. object ----------
   Something you can pick up. Drop-shadow rises as you lift it.
   Used by the case file documents and the bag items alike. */
.ir-object{
  position:absolute;left:0;top:0;
  cursor:grab;
  will-change:transform;
  filter:drop-shadow(var(--ir-shadow-lift));
  transition:filter .25s var(--ir-ease);
  -webkit-tap-highlight-color:transparent;
}
.ir-object img{pointer-events:none;-webkit-user-drag:none;user-select:none}
.ir-object.is-held{cursor:grabbing;z-index:99;filter:drop-shadow(var(--ir-shadow-held))}
.ir-object.is-returning{transition:transform .7s var(--ir-ease),filter .25s}
.ir-object .ir-tag{
  position:absolute;top:-12px;left:12px;
  opacity:0;transition:opacity .3s;
}
.ir-object:hover .ir-tag,
.ir-object:focus-visible .ir-tag{opacity:1}

/* Idle motion: the invitation to touch.

   These animate the independent `rotate` and `translate` properties
   rather than `transform`. That matters: a draggable object stores
   its position in `transform`, and an animation on `transform` would
   overwrite it the moment the object was placed. Because the browser
   composes translate -> rotate -> scale -> transform, the two never
   collide, and an object can sway while still being dragged. */
.ir-idle{animation:ir-sway 4.2s ease-in-out infinite;transform-origin:50% 8%}
@keyframes ir-sway{0%,100%{rotate:-2.4deg}50%{rotate:2.4deg}}
.ir-breathe{animation:ir-breathe 5s ease-in-out infinite}
@keyframes ir-breathe{0%,100%{translate:0 0}50%{translate:0 -7px}}
/* stop swaying once it's been picked up — it's been discovered */
.ir-object.is-held,
.ir-object.has-moved{animation:none;rotate:none}
@media (hover:hover) and (pointer:fine){
  .ir-idle:hover{animation-play-state:paused}
}

/* ---------- 7. hint ----------
   The bottom-centre nudge. Every interactive page needs one, or
   nobody discovers the interaction. */
.ir-hint{
  position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  z-index:20;pointer-events:none;white-space:nowrap;
  font-family:var(--ir-micro);
  font-size:11.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  background:var(--ir-accent);color:var(--ir-on-accent);
  border:2px solid var(--ir-ink);
  padding:9px 18px;
  box-shadow:0 4px 0 rgba(0,0,0,.22);
  transition:opacity .3s var(--ir-ease),transform .3s var(--ir-ease);
  max-width:94vw;overflow:hidden;text-overflow:ellipsis;
}
.ir-hint.is-gone{opacity:0;transform:translateX(-50%) translateY(8px)}

/* ---------- panels, cards, buttons ---------- */
.ir-panel{
  background:var(--ir-raised);
  border:1.5px solid var(--ir-ink);
  box-shadow:var(--ir-shadow-hard);
}
.ir-frame{border:1.5px solid var(--ir-ink);background:var(--ir-raised)}

.ir-btn{
  display:inline-flex;align-items:center;gap:12px;
  background:var(--ir-ink);color:var(--ir-ground);
  font-family:var(--ir-body);
  font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  padding:20px 30px;transition:background .25s var(--ir-ease);
  white-space:nowrap;
}
.ir-btn:hover{background:var(--ir-accent-2);color:var(--ir-ground)}
.ir-btn svg{transition:transform .3s var(--ir-ease)}
.ir-btn:hover svg{transform:translateX(5px)}
.ir-btn--ghost{
  background:none;color:var(--ir-ink);
  border:1.5px solid var(--ir-ink);padding:12px 20px;
  font-family:var(--ir-micro);font-size:10.5px;letter-spacing:.16em;font-weight:700;
}
.ir-btn--ghost:hover{background:var(--ir-ink);color:var(--ir-ground)}

/* ---------- layout ---------- */
.ir-section{padding:var(--ir-step) var(--ir-gut)}
.ir-head{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:20px;flex-wrap:wrap;margin-bottom:clamp(20px,3vw,32px);
}
.ir-head p{font-size:13.5px;color:var(--ir-dim);max-width:44ch;line-height:1.6}
.ir-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,38px);align-items:start}
.ir-cols--2{grid-template-columns:repeat(2,1fr)}
@media(max-width:900px){.ir-cols,.ir-cols--2{grid-template-columns:1fr;gap:34px}}
.ir-col{border-top:3px solid var(--ir-accent);padding-top:16px}

.ir-meter{height:3px;background:var(--ir-rule-soft)}
.ir-meter i{
  display:block;height:100%;width:0;
  background:linear-gradient(90deg,var(--ir-accent),var(--ir-accent-2),var(--ir-accent-3));
  transition:width .5s var(--ir-ease);
}

/* ---------- site chrome ---------- */
.ir-rail{
  position:fixed;left:0;top:0;bottom:0;width:46px;z-index:40;
  border-right:1px solid var(--ir-rule);
  display:flex;align-items:center;justify-content:center;
  background:var(--ir-ground);
}
.ir-rail span{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-family:var(--ir-micro);
  font-size:10px;font-weight:700;letter-spacing:.4em;text-transform:uppercase;
  color:var(--ir-dim);
}
.ir-rail b{color:var(--ir-accent)}
body.ir-has-rail .ir-shell{margin-left:46px}
@media(max-width:700px){.ir-rail{display:none}body.ir-has-rail .ir-shell{margin-left:0}}

.ir-nav{
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:16px var(--ir-gut);
  border-bottom:1px solid var(--ir-rule);
  position:sticky;top:0;z-index:35;
  background:color-mix(in srgb,var(--ir-ground) 92%,transparent);
  backdrop-filter:blur(10px);
}
.ir-brand{display:flex;align-items:center;gap:12px;font-weight:700;font-size:15px;letter-spacing:-.01em}
.ir-brand img{height:30px;width:auto}
.ir-nav ul{display:flex;gap:24px;list-style:none}
.ir-nav a{
  font-family:var(--ir-micro);
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ir-dim);transition:color .25s;
}
.ir-nav a:hover,.ir-nav .current-menu-item > a{color:var(--ir-accent-2)}
@media(max-width:640px){.ir-nav ul{display:none}}

.ir-foot{
  padding:26px var(--ir-gut);border-top:1px solid var(--ir-rule);
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;align-items:center;
  font-family:var(--ir-micro);
  font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ir-dim);
}

/* ---------- prose ---------- */
.ir-prose{max-width:74ch;font-size:16px;line-height:1.68;color:var(--ir-ink-soft)}
.ir-prose > * + *{margin-top:1.1em}
.ir-prose h2{font-family:var(--ir-display);font-size:clamp(24px,3vw,38px);font-weight:800;letter-spacing:-.03em;color:var(--ir-ink);margin-top:1.8em}
.ir-prose h3{font-family:var(--ir-display);font-size:clamp(18px,2vw,24px);font-weight:800;letter-spacing:-.02em;color:var(--ir-ink);margin-top:1.6em}
.ir-prose a{border-bottom:1.5px solid var(--ir-accent);color:var(--ir-ink)}
.ir-prose blockquote{
  border-left:3px solid var(--ir-accent);padding-left:20px;
  font-size:1.1em;color:var(--ir-ink);
}
.ir-prose code{font-family:var(--ir-micro);font-size:.9em;background:var(--ir-rule-soft);padding:2px 6px}

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

/* ---------- WordPress essentials ---------- */
.screen-reader-text{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(1px,1px,1px,1px);white-space:nowrap;
}
.screen-reader-text:focus{
  position:fixed!important;top:12px;left:12px;z-index:999;
  width:auto;height:auto;clip:auto;
  background:var(--ir-ink);color:var(--ir-ground);padding:12px 18px;
}
.ir-full > *{margin-left:0;margin-right:0}
.alignwide{width:min(100%,1400px);margin-inline:auto}
.alignfull{width:100%}
.ir-prose .wp-caption-text,.ir-prose figcaption{
  font-family:var(--ir-micro);font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ir-dim);margin-top:10px;
}
.ir-stage .ir-surface::before,.ir-stage.ir-surface::before{z-index:0}

/* stage mode: one screen, nothing scrolls */
body.ir-is-stage,body.ir-is-stage .ir-shell{height:100%;overflow:hidden}
body.ir-is-stage .ir-foot{display:none}
body.ir-is-stage .ir-nav{position:fixed;left:0;right:0;background:transparent;border:none;pointer-events:none}
body.ir-is-stage .ir-nav a{pointer-events:auto}

/* pagination */
.ir .nav-links{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--ir-micro);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.ir .nav-links .page-numbers{padding:10px 14px;border:1.5px solid var(--ir-rule)}
.ir .nav-links .page-numbers.current{background:var(--ir-ink);color:var(--ir-ground);border-color:var(--ir-ink)}