/* Kurio's website: the Kurio family system, shared with Pinda (DESIGN.md).
   Warm paper with film grain, one terracotta (primary action, focus, kept), serif names over sans controls,
   1px warm lines, no shadows in the flow, tabular figures. One look, light only.
   The older Darkroom names (--wall, --ink-2, --safelight...) stay as aliases so every page reads the same tokens. */

:root {
  --paper: #f2ece3;
  --raised: #faf6f0;
  --card: #ffffff;
  --chip: #ebe2d5;
  --line: #e3d9cb;
  --line-2: #d3c5b2;
  --line-3: #b9a891;
  --placeholder: #776c61;
  --ink-p: #211c17;
  --muted: #6a5f55;
  --accent: #a9532d;
  --accent-hover: #93461f;
  --accent-ink: #fffaf5;
  --label-c: #8a4221;
  --error: #b3261e;
  --tile: #1d1c1a;
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --mono: "Cascadia Mono", Consolas, ui-monospace, "SF Mono", monospace;
  --gutter: clamp(16px, 4.4vw, 64px);
  /* the Darkroom names, kept as aliases */
  --wall: var(--paper); --panel: var(--card); --seam: var(--line); --seam-2: var(--line-2); --seam-3: var(--line-3);
  --ink: var(--ink-p); --ink-2: var(--muted); --ink-3: var(--muted);
  --safelight: var(--accent); --safelight-bright: var(--accent-hover); --bad: var(--error);
  --display: var(--serif); --text: var(--sans);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); }
body {
  margin: 0;
  background: transparent;
  color: var(--ink-p);
  font: 400 16px/1.5 var(--sans);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
/* film grain on the paper, never on the photos (it sits behind everything) */
body::before {
  content: ""; position: fixed; inset: -50%; z-index: -1; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
::selection { background: var(--accent); color: var(--accent-ink); }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-2); }
a:hover { text-decoration-color: var(--muted); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 8px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 700; margin: 0; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
kbd {
  font: 400 12px/1 var(--mono); color: var(--muted);
  border: 1px solid var(--line-2); border-radius: 6px; padding: 3px 5px; background: var(--card);
}
html { scrollbar-color: var(--line-2) var(--paper); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--paper); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 5px; border: 2px solid var(--paper); }

/* ---- the family lockup: the dark tile mark and the serif name ---- */
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink-p); }
.brand .mark { width: 34px; height: 34px; border-radius: 9px; }
.brand .name { font: 700 22px/1 var(--serif); letter-spacing: -.01em; }
/* the plain-text wordmark, for pages served without the mark */
.wordmark { font: 700 22px/1 var(--serif); letter-spacing: -0.01em; text-decoration: none; color: var(--ink-p); }
.wordmark b { color: var(--accent); font-weight: 700; }

/* ---- controls, Pinda's shapes ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px; border-radius: 9px;
  background: var(--card); color: var(--ink-p); border: 1px solid var(--line);
  font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer;
  transition: border-color .15s, background-color .15s;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.btn:hover { background: var(--chip); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { background: transparent; }
.btn.ghost:hover { background: var(--chip); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: default; }
.btn svg { width: 18px; height: 18px; flex: none; }
.link-btn { background: none; border: 0; padding: 0; color: var(--muted); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.link-btn:hover { color: var(--ink-p); }

.field { display: grid; gap: 6px; }
.field label { font: 400 13px/1.3 var(--sans); color: var(--muted); }
.input {
  width: 100%; min-height: 44px; padding: 10px 12px; border-radius: 8px;
  background: var(--card); color: var(--ink-p); border: 1px solid var(--line-2);
  font: 400 16px/1.3 var(--sans); /* 16px: phones don't zoom the page */
  caret-color: var(--accent);
}
.input::placeholder { color: var(--placeholder); }
.input:hover { border-color: var(--line-3); }
.input:focus { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--line-2); }
.hint { font-size: 13px; color: var(--muted); }

.label {
  font: 600 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--label-c);
}
.notice { font-size: 14px; color: var(--muted); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--card); }
.notice.bad { border-color: var(--error); color: var(--ink-p); }
.notice.ok { border-color: var(--line-3); }
[hidden] { display: none !important; }

/* ---- outbox (local only) ---- */
.outbox { max-width: 760px; margin: 0 auto; padding: 40px var(--gutter); display: grid; gap: 20px; }
.outbox article { border-top: 1px solid var(--line); padding-top: 16px; }
.outbox pre { white-space: pre-wrap; font: 400 14px/1.5 var(--mono); color: var(--muted); }
.meta { font-size: 13px; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}