/* cutouts.css - Painterly Cutout Cohesion System (proof-of-concept, v3.13)
 *
 * ROLE-BASED COLOR POLICY (see design.md "Painterly Cutout Cohesion System"):
 *   - Focal/hero cutouts keep color (.cutout--color); bulk decorative go print.
 *   - The PencilInHand is the primary narrative hand (pencil-holding, drawing/
 *     inking gesture). Always full-color, never printed.
 *
 * PRINCIPLE: assets are stored as RAW clean cutouts (rembg). All cohesion is
 * applied at runtime via these classes - never bake dithered PNGs.
 *
 * TECHNIQUES (ranked, CSS/2D first per AGENTS.md; WebGL HalftonePass deferred):
 *   1. mask-image torn-paper edges      (.cutout--torn)
 *   2. SVG feTurbulence ink-bleed        (.cutout--bleed -> url(#ink-bleed))
 *   3. programmatic halftone/duotone     (.cutout--print, lightweight, runtime)
 *   4. WebGL HalftonePass                (skipped - CSS halftone is enough)
 */

/* Scoped to [data-theme="sun"] so these tokens NEVER leak into Moon (an
   unscoped :root overrides --border/--ink globally and corrupts Moon's borders). */
[data-theme="sun"]{
  --paper:#F0E4D2; --bone:#F4ECDB; --ink:#241F1A; --ink-soft:#4A4138;
  --zinc:#3A7080; --zinc-dim:#6E8A8E; --border:#7C6E5C; --border-dim:#C7B79F;
  --pigment:#B5443B; --sage:#8A8C6A; --slate:#5B7480; --amber:#C6912E;
  --clay:#A2664A; --brown:#8A6A4E; --olive:#6E6E48;
  --serif:'Fraunces',Georgia,serif; --sans:'Newsreader',Georgia,serif;
  --mono:'Departure Mono','JetBrains Mono',ui-monospace,monospace;
  --kicker:'Archivo','Arial Narrow',sans-serif;
}

/* ---- base ---- */
.cutout{ display:block; width:100%; height:auto; }

/* ---- 3. programmatic halftone / duotone (lightweight, runtime) ----
   forces the cutout into a printed, high-contrast risograph state.
   The .halftone dot layer (overlaid by the page) supplies the print texture;
   this filter pushes contrast hard so the difference is unmistakable. */
.cutout--print{
  position:relative;
  filter: grayscale(1) contrast(1.85) brightness(.92) sepia(.18) saturate(1.1);
  mix-blend-mode: multiply;
}
/* visible risograph dot-matrix over the printed cutout */
.cutout--print::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background-image: radial-gradient(rgba(36,31,26,.55) 22%, transparent 23%);
  background-size: 4px 4px; mix-blend-mode: multiply; opacity:.5;
}
.cutout--print.cutout--tinted{
  /* duotone toward the active tint */
  filter: grayscale(1) contrast(1.7) brightness(.95) sepia(1) saturate(3) hue-rotate(-12deg);
}

/* ---- 2. SVG ink-bleed (rough, stamped edges) ---- harder displacement */
.cutout--bleed{ filter: url(#ink-bleed); }
/* Combined: print + ink-bleed - SVG displacement applied first, then CSS halftone */
.cutout--print.cutout--bleed{ filter: url(#ink-bleed) grayscale(1) contrast(1.85) brightness(.92) sepia(.18) saturate(1.1); }
/* Combined: tinted + ink-bleed */
.cutout--tinted.cutout--bleed{ filter: url(#ink-bleed) grayscale(1) contrast(1.7) brightness(.95) sepia(1) saturate(3) hue-rotate(-12deg); }

/* ---- 1. torn-paper edge ----
   Real jagged tear: displace the cutout's own alpha with feTurbulence so the
   clean rembg boundary becomes a ragged, chewed edge (unmistakable vs COLOR). */
.cutout--torn{ filter: url(#torn-edge); }
/* Combined: print + torn - SVG displacement first, then CSS halftone */
.cutout--print.cutout--torn{ filter: url(#torn-edge) grayscale(1) contrast(1.85) brightness(.92) sepia(.18) saturate(1.1); }
/* Combined: color + torn - just the SVG tear, keep original color */
.cutout--color.cutout--torn{ filter: url(#torn-edge); }

/* Location-specific selectors - chain SVG torn-edge with existing drop-shadow
   from sun-drawer.css. These beat the drop-shadow selectors via higher specificity
   so the torn edge AND the original shadow both apply (CSS filter chains left-to-right).
   (sun-drawer.css selectors like .cover .cthumb img have specificity 0-2-1;
   these add .cutout--torn to reach 0-3-1 / 0-2-2 / 0-4-2.) */
.cover .cthumb img.cutout--torn{ filter: url(#torn-edge) drop-shadow(0 4px 8px rgba(0,0,0,.3)); }
.cover .cthumb img.cutout--torn.portrait{ filter: url(#torn-edge); } /* portrait uses box-shadow, not drop-shadow */
.hero .hcut.cutout--torn{ filter: url(#torn-edge) drop-shadow(0 8px 14px rgba(36,31,26,.25)); }
.hero .hcut.portrait.cutout--torn{ filter: url(#torn-edge) drop-shadow(0 10px 18px rgba(36,31,26,.3)); }

/* ---- die-cut sticker tag (shared with dossier) ---- */
.sticker{ display:inline-block; font-family:var(--mono); font-size:9.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--ink);
  background:var(--bone); border:1px solid var(--ink); padding:4px 8px;
  transition: transform .18s ease, filter .18s ease; }
.sticker:hover{ transform: translateY(-2px); filter: drop-shadow(4px 4px 0 var(--ink)); }

/* composition helpers for the proof page */
.cgrain{ position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.4; mix-blend-mode:soft-light }
.cgrain svg{ width:100%; height:100% }