/* AUTEUR SHOT — Effects, borders, motion, texture
   Hard rules from the brand system:
   - NO rounded corners. Everything is rectangular (radius 0).
   - NO drop shadows, glow, or 3D. Depth comes from rules & negative space.
   - Borders are hairlines; the signature frame is a double-rule editorial box.
   - Corner marks ("edition sheet" L-brackets) frame editorial pieces.
   - Motion is minimal: fades & simple reveals, honest easing, never bounces.
   - Grain: a subtle scanner/paper texture unifies all imagery.
*/
:root {
  /* Corners — always square */
  --radius: 0px;

  /* Borders */
  --bw-hair: 1px;
  --bw-rule: 2px;
  --bw-frame: 2px;         /* editorial double-frame stroke */
  --frame-gap: 5px;        /* gap between the two frame lines */
  --border-hair: 1px solid var(--rule);
  --border-ink: 2px solid var(--rule-strong);

  /* Corner marks */
  --corner-len: 22px;
  --corner-weight: 1.5px;
  --corner-inset: 18px;

  /* Emphasis marks */
  --red-tick: 3px;         /* red vertical rule beside guiding blocks */
  --red-square: 10px;      /* red square bullet used with display titles */

  /* Depth is flat — no shadows. This token exists so components can be explicit. */
  --shadow-none: none;
  --elev-hairline: inset 0 0 0 1px var(--rule);

  /* Motion */
  --ease: cubic-bezier(.2,.6,.2,1); /* @kind other */
  --dur-fast: 120ms; /* @kind other */
  --dur: 200ms; /* @kind other */
  --dur-slow: 420ms; /* @kind other */

  /* Grain texture — fractal noise, applied over imagery to unify origin */
  --as-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E"); /* @kind other */
}

/* Utility: grain overlay for image containers (put on a ::after or overlay div) */
.as-grain-overlay { position: relative; }
.as-grain-overlay::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--as-grain); background-size: 160px 160px;
  mix-blend-mode: multiply; opacity: .22;
}

/* Utility: the signature double-frame editorial box */
.as-frame { position: relative; border: var(--bw-frame) solid var(--rule-strong); }
.as-frame::before {
  content: ""; position: absolute; inset: var(--frame-gap);
  border: 1px solid var(--rule-strong); pointer-events: none;
}