/* ===========================================================================
   REVOCLE v2 — THE FUNK
   ---------------------------------------------------------------------------
   Loaded by EVERY v2 page, immediately after revocle-v2.css. Subpages then
   load revocle-v2-page.css on top for scrolling-page layout.

   THE BRIEF: don't look like other distributors. Every one of them looks like
   the same clean SaaS product — rounded cards, soft drop shadows, gradient
   hero, friendly sans, a photo of someone in headphones. So Revocle goes the
   other way: this is PRINT, not software. Screenprinted flyer, record sleeve,
   sticker sheet, dub-plate label.

   THE FIVE RULES
     1. Hard rules, zero radius on anything card-shaped. (Buttons stay pills —
        that shape is the brand's and it survives the translation.)
     2. Never a blurred shadow. A solid offset block instead, like a second
        print pass that landed a few millimetres out. Blur is the SaaS tell.
     3. Headlines print twice, slightly misregistered, in a clashing colour.
     4. Halftone dot screen over every flat colour field.
     5. Things sit crooked on purpose — but under ~1.4deg, or it stops reading
        as deliberate and starts reading as broken.

   NAMING: every primitive is prefixed `fk-`. `.sticker` was tried first and
   collided with `.plan .sticker` in the price plate, which would have put a
   2px rule around the pricing badges. Same lesson as `.flow`/`.pflow` in the
   v1 stylesheet — grep before naming.

   HEIGHT DISCIPLINE: the homepage plates are one viewport each with mandatory
   scroll-snap, so nothing here may add height. Every rule below changes
   borders, colour, shadow or rotation — never padding, never font-size on a
   homepage element. Verified at 1920x1080 and 1920x900 after every change.
   =========================================================================== */

:root{
  --rule:#141109;   /* the black it is all drawn in */
  --off:7px;        /* offset-shadow distance */
}
/* NOTE: rules are written out as `3px solid var(--rule)` at each use site and
   never bundled into an `--edge` token. A var() nested inside a custom
   property resolves where that property is DEFINED, so `--edge` on :root
   freezes --rule to the :root black and any `--rule:currentColor` override
   further down silently does nothing. */

/* ── PRIMITIVES ──────────────────────────────────────────────────────────── */

/* A printed object: hard rule, no radius, solid second pass behind it. */
.fx{
  position:relative;
  border:3px solid var(--rule);
  border-radius:0;
  background:var(--paper);
  color:var(--ink);
  box-shadow:var(--off) var(--off) 0 var(--fx-shadow,var(--rule));
}
.fx--flat{box-shadow:none}

/* Crooked on purpose. */
.tilt-l{transform:rotate(-1.15deg)}
.tilt-r{transform:rotate(.9deg)}
.tilt-lx{transform:rotate(-2.4deg)}
.tilt-rx{transform:rotate(2deg)}

/* Misregistration. The ghost is decorative: it is duplicated from a data
   attribute onto a pseudo-element, so screen readers still read the headline
   exactly once. */
.mis{position:relative;display:inline-block;isolation:isolate}
.mis::before{
  content:attr(data-mis);
  position:absolute;left:-.045em;top:.04em;
  color:var(--mis,var(--lime));
  z-index:-1;
  pointer-events:none;
}

/* Halftone dot screen, drawn in the surface's own ink. */
.halftone{position:relative;isolation:isolate}
.halftone::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at center,currentColor 1.5px,transparent 1.6px);
  background-size:10px 10px;
  opacity:.09;
}
.halftone>*{position:relative;z-index:1}

/* A stamped numeral. Pally, because the brief gives Pally every number. */
.stamp{
  font-family:var(--num);font-weight:700;
  font-size:clamp(2.6rem,6vw,5rem);
  line-height:.8;letter-spacing:-.04em;
  display:block;
}

/* A tag slapped on top of something. NOT `.sticker` — see NAMING above. */
.fk-tag{
  display:inline-block;
  font-family:var(--display);font-weight:800;
  font-size:clamp(10px,1.05vw,12.5px);
  letter-spacing:.14em;text-transform:uppercase;
  padding:7px 14px;
  border:2px solid var(--rule);
  background:var(--lime);color:var(--ink);
  box-shadow:3px 3px 0 var(--rule);
}
.fk-stack{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}

/* ═══ THE HOMEPAGE ═══════════════════════════════════════════════════════════
   Everything below targets homepage-only classes, so it is inert on subpages.
   Selectors mirror the base file's exactly where they need to beat it —
   `.wall .tile` is (0,2,0) and a bare `.tile` would silently lose.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Halftone over every plate. Sits at z-index 0; `.wrap` is already z-index 2,
   so content stays above it. */
.plate::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(circle at center,currentColor 1.5px,transparent 1.6px);
  background-size:10px 10px;
  opacity:.075;
}

/* Per-plate ghost colour for misregistered headlines. Each is the plate's own
   accent, i.e. the loudest legal clash against that field. */
#hero  {--mis:var(--lime)}
#dist  {--mis:var(--blue)}
#cms   {--mis:var(--coral)}
#promo {--mis:var(--pop)}
#fund  {--mis:var(--gold)}
#price {--mis:var(--yellow)}
#cta   {--mis:var(--lime)}

/* ── HERO ────────────────────────────────────────────────────────────────────
   The turntable panel was the last soft-rounded, blurred-edge object above the
   fold — the exact thing every other distributor's hero looks like. Squared
   and given a lime second pass so the first screen states the language.
   Padding is untouched: the hero plate is height-critical.
   ────────────────────────────────────────────────────────────────────────── */
.deck{
  border-radius:0;
  border:2px solid var(--lime);
  box-shadow:var(--off) var(--off) 0 rgba(204,255,68,.30);
}

/* ── DISTRIBUTION ────────────────────────────────────────────────────────────
   The store wall becomes an actual wall of stickers: hard-ruled, square,
   each one knocked slightly off true, offset-printed. This is the section
   that most needs to stop looking like a logo grid in a SaaS feature list.
   Contrast: ink #141109 on paper #FFF7EA is 17.73, blue #1F49FF on paper
   is 5.71 — both clear AA.
   ────────────────────────────────────────────────────────────────────────── */
.wall .tile{
  border:2px solid var(--rule);
  border-radius:0;
  background:var(--paper);
  box-shadow:3px 3px 0 var(--rule);
  transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s;
}
/* five rotations cycling on a prime-ish stride so the wall never visibly
   repeats across a 7-column grid */
.wall .tile:nth-child(5n+1){transform:rotate(-1.4deg)}
.wall .tile:nth-child(5n+2){transform:rotate(.9deg)}
.wall .tile:nth-child(5n+3){transform:rotate(-.5deg)}
.wall .tile:nth-child(5n+4){transform:rotate(1.6deg)}
.wall .tile:nth-child(5n+5){transform:rotate(-1deg)}
.wall .tile:hover{
  transform:rotate(0) translate(-2px,-2px);
  background:var(--blue);
  box-shadow:6px 6px 0 var(--rule);
}
.wall .tile:hover b{color:var(--paper)}
.wall .tile.more{
  border-style:solid;background:var(--blue);box-shadow:3px 3px 0 var(--rule);
}
.wall .tile.more b{color:var(--paper)}
.wall .tile.more:hover{background:var(--p-hero)}

/* the delivery-line station markers become stamps, not chips */
.dl-track i{
  border-radius:0;
  border:2px solid var(--rule);
  font-family:var(--num);font-weight:700;
}
.dl-track i:hover{background:var(--blue);color:var(--paper);transform:rotate(-3deg) scale(1.1)}

/* the 200+ endcap gets ruled and offset, so it reads as a stamped block */
.dl-end{
  border:3px solid var(--rule);
  border-radius:0;
  box-shadow:var(--off) var(--off) 0 var(--blue);
  background:var(--paper);
  padding:10px 14px;
}

/* the three facts under the lede become hard-ruled tags */
.dist-meta span{
  border:2px solid var(--rule);
  padding:4px 10px;
  background:var(--paper);
}

/* ── EVERY OTHER PLATE ───────────────────────────────────────────────────────
   Square the corners and swap blur for offset on each plate's card component.
   Colour is left alone — the plate palette is Rahul's and already approved.
   ────────────────────────────────────────────────────────────────────────── */

/* CMS — the claim pins */
.pin-card{
  border:2px solid var(--coral);
  border-radius:0;
  box-shadow:4px 4px 0 var(--coral);
}

/* PROMOTIONS — already a sticker wall; make the stickers printed objects */
.stk div{
  border-radius:0;
  border-width:2px;
  box-shadow:5px 5px 0 rgba(20,17,9,.55);
}
.stk div:hover{box-shadow:8px 8px 0 rgba(20,17,9,.55)}

/* FUNDING — the two routes */
.route{
  border-radius:0;
  border:2px solid var(--gold-line);
  box-shadow:5px 5px 0 rgba(239,217,168,.22);
}

/* PRICING — the pick-cards */
.plan{
  border-radius:0;
  box-shadow:6px 6px 0 rgba(0,0,0,.45);
}
/* The base scopes this as `.plan .sticker` (0,2,0); mirrored here so source
   order decides rather than losing on specificity. */
.plan .sticker{
  border-radius:0;
  border:2px solid var(--yellow);
  box-shadow:3px 3px 0 rgba(0,0,0,.6);
}

/* the pull-out note that appears on several plates */
.limit{border-radius:0;border-left:4px solid currentColor}

@media (max-width:820px){
  :root{--off:5px}
  .tilt-l,.tilt-r,.tilt-lx,.tilt-rx{transform:none}
  /* a rotated tile at phone width either overflows or forces a horizontal
     scrollbar, and the printed look does not survive being that small */
  .wall .tile:nth-child(5n+1),.wall .tile:nth-child(5n+2),
  .wall .tile:nth-child(5n+3),.wall .tile:nth-child(5n+4),
  .wall .tile:nth-child(5n+5){transform:none}
}
@media (max-width:560px){
  :root{--off:4px}
}