/* PayPerScreen shared theme: pastel risograph.
   Milk paper, aubergine ink, five pastel "inks" that overlap with multiply
   like a riso print. Type: Instrument Sans throughout (semibold headings,
   tabular figures). Loaded by every public page. */

@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans-ext.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";src:url(/fonts/instrument-sans-italic.woff2) format("woff2");font-weight:400 700;font-stretch:75% 100%;font-style:italic;font-display:swap}
/* Self-hosted (SIL OFL, see /fonts/OFL.txt): no request to Google Fonts. */

:root{
  --milk:#FBF8FF; --ink:#2B1A3F; --dim:#6B5A80; --rule:#E6DDF2; --wash:#F3EEFB;
  --line:#DCD2EA; --lilac:#E6DDFF; --peach:#FFE4D2; --mint:#DAF2E6; --butter:#FFF2C7; --sky:#DDEBFF;
  --berry:#B42A4A; --leaf:#1C7450; --amber:#8F5600; --link:#5A3DC8;
  --display:"Instrument Sans",system-ui,sans-serif;
  --body:"Instrument Sans",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;

  /* legacy names still used by page scripts and older markup */
  --paper:var(--milk); --ok:var(--leaf); --warn:var(--berry); --partial:var(--amber);
  --serif:var(--display); --sans:var(--body);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--milk);color:var(--ink);font:17px/1.6 var(--body);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--link);outline-offset:2px;border-radius:4px}
img,svg{max-width:100%}

/* ---------- type ---------- */
h1,h2,h3{font-family:var(--display);color:var(--ink);margin:0}
h1{font-weight:600;font-size:clamp(38px,6vw,64px);line-height:1.06;letter-spacing:-.03em}
h2{font-weight:600;font-size:clamp(28px,3.8vw,40px);line-height:1.12;letter-spacing:-.025em}
h3{font-weight:600;font-size:20px;line-height:1.25;letter-spacing:-.01em}
p{margin:0 0 14px}
.lead{font-size:20px;line-height:1.55;color:var(--ink);max-width:36em}
.muted{color:var(--dim)}
.small{font-size:15px}
code{font:.86em var(--mono);background:var(--wash);padding:2px 6px;border-radius:5px}
pre{font:14px/1.6 var(--mono);background:var(--ink);color:#F4EEFF;padding:18px 20px;border-radius:14px;
    overflow-x:auto;margin:0 0 20px}
pre code{background:none;padding:0;color:inherit;font:inherit}

/* ---------- layout ---------- */
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.prose{max-width:720px;margin:0 auto;padding:56px 20px 96px}
.prose h1{font-size:clamp(38px,6vw,60px);margin:0 0 14px}
.prose h2{font-size:clamp(26px,3.4vw,34px);margin:52px 0 14px}
.prose h3{margin:30px 0 8px}
.prose p,.prose ul,.prose ol{max-width:66ch}
.prose ul,.prose ol{padding-left:1.25em;margin:0 0 16px}
.prose li{margin-bottom:6px}
.prose > p:first-of-type{font-size:20px;line-height:1.55;color:var(--dim);margin-bottom:32px}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:8px;font:600 16px var(--body);padding:13px 22px;
     border-radius:999px;text-decoration:none;border:1px solid var(--line);cursor:pointer;
     transition:transform .12s ease,box-shadow .12s ease}
.btn-ink{background:var(--ink);color:var(--milk);border-color:var(--ink)}
.btn-ink:hover{background:#3D2858;border-color:#3D2858}
.btn-soft{background:#fff;color:var(--ink)}
.btn-soft:hover{background:var(--wash);border-color:#CFC3E0}
.btn:active{transform:translateY(1px)}

/* ---------- tables ---------- */
table{width:100%;border-collapse:collapse;font-size:15px;margin:8px 0 24px}
th{text-align:left;font:600 14px var(--body);color:var(--dim);padding:10px 10px 10px 0;border-bottom:1px solid #CFC3E0}
td{padding:12px 10px 12px 0;border-bottom:1px solid var(--rule);vertical-align:top}

/* ---------- notes ---------- */
.note{background:var(--wash);border-radius:16px;padding:16px 20px;margin:20px 0;color:var(--ink);font-size:15.5px}
.note b{display:block;margin-bottom:4px}

/* ---------- risograph grain (decorative, behind content) ---------- */
.grain{position:absolute;inset:0;pointer-events:none;opacity:.22;mix-blend-mode:multiply;
  background-image: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='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .1 0 0 0 0 .25 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);margin-top:40px}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;padding-top:26px;padding-bottom:40px}
.site-foot .mark{font:600 20px var(--display);margin-right:auto;display:flex;align-items:center;gap:10px}
.site-foot a{color:var(--ink);font-size:15px}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}