/* Twokriks house style. Ink and paper. Jakarta for every word people read, Plex Mono for labels and numbers.
   Delta only where something acts. No gradients, no shadows, no tilts. Shared by the site, the recorder and the admin. */

@font-face { font-family: 'Plus Jakarta Sans'; font-weight: 200 800; font-display: swap; src: url('/assets/fonts/jakarta-wght.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-display: swap; src: url('/assets/fonts/plex-mono-400.woff2') format('woff2'); }

:root {
  --ink: #141215; --paper: #F4F2EE; --danger: #C0362C;
  --delta-on-paper: #0B8A97; --delta-on-ink: #35C3CF;
  --mama-cream: #FBF8F3; --mama-green: #0F7B5A;
  --flick-ink: #121212; --flick-orange: #E26A4F;
  --creeks-indigo: #17204A; --creeks-cream: #F1E6CE; --creeks-wood: #A0653A;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --gutter: 20px; --max: 1180px;
  --enter: cubic-bezier(.05, .7, .1, 1); --leave: cubic-bezier(.3, 0, .8, .15);
  /* the ink surface is the default */
  --fg: var(--paper); --bg: var(--ink); --delta: var(--delta-on-ink); --tk-accent: var(--delta);
  --mute: rgba(244, 242, 238, .62); --dim: rgba(244, 242, 238, .30); --line: rgba(244, 242, 238, .16); --well: #1C1A1E; --field: #1C1A1E;
}
.paper, .on-paper { --fg: var(--ink); --bg: var(--paper); --delta: var(--delta-on-paper); --tk-accent: var(--delta);
  --mute: rgba(20, 18, 21, .62); --dim: rgba(20, 18, 21, .30); --line: rgba(20, 18, 21, .14); --well: #FFFFFF; --field: #FFFFFF; }
.ink { --fg: var(--paper); --bg: var(--ink); --delta: var(--delta-on-ink); --tk-accent: var(--delta);
  --mute: rgba(244, 242, 238, .62); --dim: rgba(244, 242, 238, .30); --line: rgba(244, 242, 238, .16); --well: #1C1A1E; --field: #1C1A1E; }

* { box-sizing: border-box; min-width: 0; }
html, body { max-width: 100%; overflow-x: clip; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.5 var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; }
img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p, ul, ol, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 800; letter-spacing: -.025em; text-wrap: balance; }
h1 { font-size: clamp(40px, 6.6vw, 88px); line-height: .98; }
h2 { font-size: clamp(30px, 4vw, 52px); line-height: 1.04; }
h3 { font-size: 22px; letter-spacing: -.015em; line-height: 1.2; }
h4 { font-size: 17px; letter-spacing: -.01em; line-height: 1.3; font-weight: 700; }
strong { font-weight: 700; }
.lead { font-size: clamp(18px, 1.7vw, 21px); line-height: 1.45; color: var(--mute); font-weight: 500; max-width: 42ch; }
.lead strong, .lead b { color: var(--fg); font-weight: 500; }
.prose { font-size: 17px; line-height: 1.6; max-width: 64ch; }
.prose p + p { margin-top: 1em; }
.prose h2, .prose h3 { margin: 1.6em 0 .5em; }
.prose a { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line); }
.prose a:hover { text-decoration-color: var(--delta); }
.mute { color: var(--mute); }
.label { font: 400 12.5px/1.4 var(--mono); letter-spacing: .02em; color: var(--mute); }
[hidden] { display: none !important; }
.mono { font-family: var(--mono); font-size: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
section, .surface { background: var(--bg); color: var(--fg); }
:focus-visible { outline: 2px solid var(--delta); outline-offset: 3px; border-radius: 4px; }

/* buttons: 46px, 20px sides, 6px radius, weight 500, 16px. Small nav button 38px. Ghost is a 1.5px inset ring. No icons inside. */
.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 20px; border-radius: 6px; border: 0; font: 500 16px/1 var(--sans);
  background: var(--fg); color: var(--bg); cursor: pointer; text-decoration: none; white-space: nowrap; transition: background 150ms var(--enter), color 150ms var(--enter); }
.btn:hover { background: var(--delta); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--delta); color: var(--delta); background: transparent; }
.btn.small { min-height: 38px; padding: 0 16px; font-size: 15px; }
.btn.wide { width: 100%; }
.btn.danger { background: var(--danger); color: #fff; }
.btn.danger:hover { background: #A52D24; color: #fff; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .4; cursor: default; pointer-events: none; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; }
.link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1.5px; text-decoration-color: var(--line); width: max-content; min-height: 44px; }
.link:hover { text-decoration-color: var(--delta); }
.link svg, .icon { width: 18px; height: 18px; flex: none; }
.link .ext { width: 13px; height: 13px; }
a.ext-link svg { width: 13px; height: 13px; margin-left: 4px; vertical-align: -1px; display: inline; }

/* pills: 4px radius */
.pill { display: inline-flex; align-items: center; min-height: 24px; padding: 0 8px; border-radius: 4px; font: 400 12.5px/1 var(--mono); letter-spacing: .02em; background: var(--fg); color: var(--bg); }
.pill.stop { background: var(--danger); color: #fff; }
.pill.clear { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 1.5px var(--fg); }
.pill.quiet { background: transparent; color: var(--mute); box-shadow: inset 0 0 0 1px var(--line); }

/* fields */
.field { display: grid; gap: 8px; }
.input, input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="password"], select, textarea {
  width: 100%; min-height: 46px; padding: 10px 14px; border-radius: 6px; border: 1.5px solid var(--line); background: var(--field); color: var(--fg); font: 400 16px/1.4 var(--sans); }
textarea { min-height: 120px; resize: vertical; }
select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--delta); outline-offset: 0; border-color: transparent; }
.error { color: var(--danger); font-size: 15px; font-weight: 500; }

/* surfaces for demos, clips and screenshots: 12px radius */
.tile { border-radius: 12px; overflow: hidden; background: var(--well); border: 1px solid var(--line); }
.verdict { border-top: 2px solid var(--fg); padding-top: 16px; display: grid; gap: 10px; }
.verdict.stop { border-top-color: var(--danger); }
.rule { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* lists and tables */
.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.rows > li, .row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.table { width: 100%; border-collapse: collapse; font-size: 15px; }
.table th { text-align: left; font: 400 12.5px/1.4 var(--mono); letter-spacing: .02em; color: var(--mute); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.scroll-x { overflow-x: auto; }
.bar { height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--fg); width: 0; }

/* motion: page load only, 280ms in, 50ms stagger. Nothing on scroll. Reduced motion is instant. */
.in { animation: enter 280ms var(--enter) both; }
.in:nth-child(2) { animation-delay: 50ms } .in:nth-child(3) { animation-delay: 100ms } .in:nth-child(4) { animation-delay: 150ms } .in:nth-child(5) { animation-delay: 200ms } .in:nth-child(6) { animation-delay: 250ms }
@keyframes enter { from { opacity: 0; transform: translateY(8px) } to { opacity: 1; transform: none } }
@media (prefers-reduced-motion: reduce) { .in { animation: none } *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important } }

/* every tap target at least 44px: links in running text get an invisible tall hit area */
.tap { position: relative; }
.tap::after { content: ''; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }