/* The Union Trilogy — Motifs & texture utilities
   The kit of parts. Two non-negotiable feel rules:
   (1) nothing looks new — worn surfaces, subtle distress;
   (2) the red line is hand-drawn, never straight (use the HandDrawnLine component / SVG, never a div border). */
:root {
  /* Notebook page-frame: cream with faint rule-blue horizontal lines ~23px apart */
  --notebook-rules: repeating-linear-gradient(180deg, #EFE6D1 0px, #EFE6D1 23px, #BCCAD8 23px, #BCCAD8 24px); /* @kind other */
  /* Red base stripe gradient (echoes the cover spine) */
  --base-stripe-fill: linear-gradient(180deg, #D23A2C, #9C2118); /* @kind color */
  /* Fractal-noise distress tile (5% opacity, mix-blend overlay) */
  --distress-noise: url('data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22240%22 height=%22240%22%3E%3Cfilter id=%22n%22%3E%3CfeTurbulence type=%22fractalNoise%22 baseFrequency=%220.9%22 numOctaves=%222%22 stitchTiles=%22stitch%22/%3E%3C/filter%3E%3Crect width=%22100%25%22 height=%22100%25%22 filter=%22url(%23n)%22/%3E%3C/svg%3E'); /* @kind other */
  /* Soft vignette for dark fields */
  --vignette: radial-gradient(120% 80% at 50% -10%, rgba(80,70,60,0.28), rgba(0,0,0,0) 60%),
              radial-gradient(100% 60% at 50% 120%, rgba(0,0,0,0.5), rgba(0,0,0,0) 55%); /* @kind other */
}

/* ---- Fixed page furniture (place once per page, pointer-events:none) ---- */
.us-distress {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: var(--distress-noise);
  opacity: 0.05; mix-blend-mode: overlay;
}
.us-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: var(--vignette);
}
.us-base-stripe {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--base-stripe, 11px);
  z-index: 7; pointer-events: none;
  background: var(--base-stripe-fill);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.5);
}
/* Notebook strips frame the far left & right edges of the viewport */
.us-frame-strip {
  position: fixed; top: 0; bottom: 0; width: var(--frame-strip, 30px);
  z-index: 6; pointer-events: none;
  background-image: var(--notebook-rules);
}
.us-frame-strip--left  { left: 0;  box-shadow: inset -8px 0 14px -8px rgba(0,0,0,0.55), 2px 0 6px rgba(0,0,0,0.5); border-right: 1px solid rgba(0,0,0,0.25); }
.us-frame-strip--right { right: 0; box-shadow: inset 8px 0 14px -8px rgba(0,0,0,0.55), -2px 0 6px rgba(0,0,0,0.5); border-left: 1px solid rgba(0,0,0,0.25); }
/* The single signal-red margin rule sits just inside the left strip */
.us-margin-rule {
  position: fixed; top: 0; bottom: 0; left: var(--frame-strip, 30px); width: 2px;
  z-index: 6; pointer-events: none; background: var(--signal-red); opacity: 0.55;
}

/* ---- Surfaces ---- */
.us-paper { background: var(--map-cream); color: var(--text-on-paper); }
.us-card  { background: var(--surface-card); border: 1px solid rgba(0,0,0,0.4); }
.us-well  { background: var(--surface-well); border: 1px solid rgba(0,0,0,0.4); }

/* ---- Tape / kraft patches (lightly rotated, soft shadow) ---- */
.us-tape  { background: var(--masking-tan); box-shadow: var(--shadow-tape); transform: rotate(2deg); }
.us-torn  { background: var(--map-cream);   box-shadow: var(--shadow-tape); transform: rotate(-3deg); }

/* The hand-drawn-line roughen filter must exist once in the DOM. Drop this near the top of any page:
   <svg width="0" height="0" style="position:absolute"><defs>
     <filter id="handrough" x="-25%" y="-8%" width="150%" height="116%">
       <feTurbulence type="fractalNoise" baseFrequency="0.013 0.05" numOctaves="2" seed="7" result="n"/>
       <feDisplacementMap in="SourceGraphic" in2="n" scale="6"/>
     </filter>
   </defs></svg>
   ...then stroke any wandering <path> with filter="url(#handrough)". The HandDrawnLine component injects this for you. */