/* Plain_Liam brand tokens. Every Plain_Liam artboard links this file: <link rel="stylesheet" href="../brand/tokens.css"> */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@62..125,400..900&family=IBM+Plex+Mono:wght@400;500;700&display=swap');

:root{
  /* paper and ink: warm newsprint, never pure white or black */
  --paper:   oklch(0.955 0.012 85);
  --paper-2: oklch(0.915 0.016 85);   /* second sheet, receipts */
  --paper-3: oklch(0.86 0.02 85);     /* rules, folds */
  --ink:     oklch(0.20 0.012 60);
  --ink-2:   oklch(0.38 0.012 60);    /* secondary text, still 4.5:1 on paper */
  /* one accent: stamp red. Used for the underscore cursor, stamps and the single most important thing in a frame */
  --stamp:   oklch(0.60 0.20 29);
  --stamp-ink: oklch(0.42 0.16 29);   /* stamp red dark enough for small text */

  /* type */
  --f-display: 'Archivo', 'Helvetica Neue', Helvetica, sans-serif;   /* set at wdth 125 (expanded), wght 850-900 for headlines */
  --f-body:    'Archivo', 'Helvetica Neue', Helvetica, sans-serif;   /* wdth 100, wght 400-600 */
  --f-mono:    'IBM Plex Mono', ui-monospace, monospace;             /* numbers, receipts, labels, timestamps */

  /* rules */
  --rule: 2px solid var(--ink);
  --hair: 1px solid color-mix(in oklch, var(--ink) 22%, transparent);
  --grain-opacity: .07;
}

/* ---------- core components ---------- */
.pl-paper{background:var(--paper);color:var(--ink)}
.pl-display{font-family:var(--f-display);font-variation-settings:'wdth' 125;font-weight:900;letter-spacing:-0.02em;line-height:.9;text-transform:none}
.pl-body{font-family:var(--f-body);font-variation-settings:'wdth' 100;font-weight:450;line-height:1.35}
.pl-mono{font-family:var(--f-mono);font-weight:500;letter-spacing:.02em}
.pl-label{font-family:var(--f-mono);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.72em}

/* wordmark: Plain_Liam with a stamp-red underscore cursor. Markup: <span class="pl-word">Plain<span class="u"></span>Liam</span> */
.pl-word{font-family:var(--f-display);font-variation-settings:'wdth' 125;font-weight:900;letter-spacing:-0.035em;line-height:1;white-space:nowrap;display:inline-flex;align-items:baseline}
.pl-word .u{display:inline-block;width:.62em;height:.12em;background:var(--stamp);margin:0 .02em;transform:translateY(.02em)}
.pl-word.blink .u{animation:pl-blink 1.1s steps(1) infinite}
@keyframes pl-blink{50%{opacity:0}}
@media (prefers-reduced-motion: reduce){.pl-word.blink .u{animation:none}}

/* monogram: P_ in an ink square, for favicons, watermarks, badges. Markup: <div class="pl-mono-mark" style="width:Npx;height:Npx;font-size:N*0.58px"><span class="pl-word">P<span class="u"></span></span></div> */
.pl-mono-mark{display:grid;place-items:center;background:var(--ink);color:var(--paper);overflow:hidden}
.pl-mono-mark .pl-word{letter-spacing:-0.02em;transform:translateX(.04em)}
.pl-mono-mark .u{width:.5em;height:.13em;margin-left:.06em}

/* stamp: rotated bordered label in stamp red */
.pl-stamp{display:inline-flex;align-items:center;gap:.4em;border:.14em solid var(--stamp);color:var(--stamp);font-family:var(--f-mono);font-weight:700;text-transform:uppercase;letter-spacing:.12em;padding:.35em .6em;transform:rotate(-4deg);border-radius:.18em;mix-blend-mode:multiply}

/* receipt: second-sheet paper strip with a scalloped torn bottom edge and dashed rules. Place it on paper or ink, not on paper-2. */
.pl-receipt{position:relative;background:var(--paper-2);color:var(--ink);font-family:var(--f-mono);padding:1em 1.1em 1.2em;box-sizing:border-box}
.pl-receipt::after{content:'';position:absolute;left:0;right:0;bottom:-.5em;height:.5em;background:radial-gradient(circle at .5em 0, var(--paper-2) .5em, transparent .52em) 0 0/1em .5em repeat-x}
.pl-receipt .row{display:flex;justify-content:space-between;gap:1em;border-bottom:1px dashed color-mix(in oklch,var(--ink) 35%,transparent);padding:.3em 0}

/* ledger lines background */
.pl-ledger{background-image:repeating-linear-gradient(to bottom, transparent 0 calc(var(--ledger,40px) - 1px), color-mix(in oklch,var(--ink) 12%,transparent) calc(var(--ledger,40px) - 1px) var(--ledger,40px))}

/* risograph duotone photo: wrap an <img> in .pl-riso (ink halftone printed onto paper). Add .red for a stamp-red print instead of ink. */
.pl-riso{position:relative;overflow:hidden;background:var(--paper);isolation:isolate}
.pl-riso img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.25) brightness(1.05);mix-blend-mode:multiply}
.pl-riso::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(circle, transparent 38%, var(--paper) 62%) 0 0/5px 5px;opacity:.55}
.pl-riso.red::after{content:'';position:absolute;inset:0;z-index:2;background:var(--stamp);mix-blend-mode:screen;opacity:1;pointer-events:none}

/* paper grain overlay (put a <i class="pl-grain"></i> as last child of a positioned frame) */
.pl-grain{position:absolute;inset:0;pointer-events:none;opacity:var(--grain-opacity);mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}