/* ============================================================
   FOLIO LITE relay pages — THE GRAIN design language, ported
   verbatim from alxrod/blog frontend/styles/grain.css (tokens,
   type scale, texture, buttons, hairline rows). Tailwind/Next
   plumbing stripped; form styles are the only addition (the
   blog has no forms): 3px radius, green focus ring.
   Fonts: the blog's real woff2 files, served from ./grain-fonts.
   ============================================================ */

/* ---- fonts (real woff2 from The Grain) ---- */
@font-face { font-family:"Droid Serif"; font-style:normal; font-weight:400; font-display:swap;
  src:url("grain-fonts/DroidSerif-normal-400.woff2") format("woff2"); }
@font-face { font-family:"Droid Serif"; font-style:normal; font-weight:700; font-display:swap;
  src:url("grain-fonts/DroidSerif-normal-700.woff2") format("woff2"); }
@font-face { font-family:"Droid Serif"; font-style:italic; font-weight:400; font-display:swap;
  src:url("grain-fonts/DroidSerif-italic-400.woff2") format("woff2"); }
@font-face { font-family:"Open Sans"; font-style:normal; font-weight:400; font-display:swap;
  src:url("grain-fonts/OpenSans-normal-400.woff2") format("woff2"); }
@font-face { font-family:"Open Sans"; font-style:normal; font-weight:700; font-display:swap;
  src:url("grain-fonts/OpenSans-normal-700.woff2") format("woff2"); }
@font-face { font-family:"Open Sans"; font-style:italic; font-weight:400; font-display:swap;
  src:url("grain-fonts/OpenSans-italic-400.woff2") format("woff2"); }

:root {
  --font-serif:"Droid Serif", Georgia, "Times New Roman", serif;
  --font-sans:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono:"SF Mono", ui-monospace, Menlo, Consolas, monospace;

  /* neutral ink ladder — verbatim from The Grain */
  --ink:#181818; --fg:#444; --fg-title:#555; --fg-muted:#777;
  --fg-soft:#999; --fg-faint:#aaa; --fg-ghost:#bbb;
  --link:#333; --link-hover:#000;

  --bg:#fff; --bg-page:#f5f5f5;
  --panel-dark:#2b2f2b;
  --border:#ddd; --border-light:#efefef; --border-hair:#e9e9e9;

  --grain:#1c6d3a;
  --accent:#1c6d3a;
  --accent-hover:#125f2f;
  --accent-deep:#0c4d21;
  --mint:#ceecd7;

  --radius:3px; --radius-sm:2px;
  --container:960px; --gutter:20px;
}

*, *::before, *::after { box-sizing:border-box; }

html, body { margin:0; padding:0; min-height:100%; }

body {
  background-color:#fcfcfa;        /* slightly lighter, barely-warm off-white */
  font-family:var(--font-sans);
  font-size:14px; line-height:21px; color:var(--fg);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  position:relative;
}
/* subtle brand grain: tiled noise PNG, very faint so the page stays light */
body::before {
  content:""; position:fixed; inset:0; z-index:0;
  background-image:url("noise-texture.png"); background-repeat:repeat;
  opacity:.18; mix-blend-mode:multiply; pointer-events:none;
}
body > * { position:relative; z-index:1; }

a { color:var(--link); text-decoration:none; }
a:hover { color:var(--link-hover); }
a:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:var(--radius-sm); }

.shell { width:560px; max-width:100%; margin:0 auto; padding:56px var(--gutter) 0; }
.shell.wide { width:720px; }

/* ---------- masthead (site-title + tagline, as the blog header) ---------- */
.masthead { text-align:center; padding-bottom:18px; border-bottom:1px solid var(--border-light); margin-bottom:34px; }
.eyebrow { font-family:var(--font-sans); text-transform:uppercase; font-weight:700; font-size:11px;
  letter-spacing:.04em; color:var(--fg-muted); margin:0 0 18px; }
.wordmark { font-family:var(--font-serif); font-size:36px; color:var(--fg-title); margin:0;
  font-weight:normal; line-height:1; }
.wordmark a, .wordmark a:hover { color:var(--fg-title); text-decoration:none; }
.tagline { font-family:var(--font-sans); text-transform:uppercase; letter-spacing:.04em; font-size:11px;
  color:var(--fg-ghost); margin:9px 0 0; font-weight:700; }

/* ---------- panels: flat white frames on hairlines (figure.diagram idiom) -- */
.card { background:var(--bg); border:1px solid var(--border-hair); border-radius:var(--radius); padding:26px; }
.card + .card { margin-top:18px; }
.card h2 { font-family:var(--font-serif); font-size:24px; line-height:1.16; letter-spacing:-.012em;
  color:var(--ink); margin:0 0 8px; font-weight:400; }
.card p { font-size:14px; line-height:1.66; margin:8px 0 0; }

.divider { display:flex; align-items:center; gap:12px; color:var(--fg-ghost); font-family:var(--font-sans);
  font-size:10px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:22px 0; }
.divider::before, .divider::after { content:""; flex:1; border-top:1px solid var(--border-light); }

/* ---------- buttons: The Grain's outlined pill (.dl-btn), verbatim ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-sans);
  font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--accent);
  background:none; border:1px solid var(--accent); border-radius:9999px; padding:8px 20px; text-decoration:none;
  transition:background .14s ease, color .14s ease; cursor:pointer; }
.btn:hover { background:var(--accent); color:#fff; }
.btn:active { background:var(--accent-hover); border-color:var(--accent-hover); color:#fff; }
.btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--mint); }
.btn.block { display:flex; width:100%; }
.btn.big { padding:11px 24px; }
.btn.quiet { color:var(--fg-soft); border-color:var(--border); }
.btn.quiet:hover { background:var(--fg-muted); border-color:var(--fg-muted); color:#fff; }
.btn .mark { width:17px; height:17px; display:inline-block; }

/* ---------- forms (the blog has no forms; radius + ring per the system) ---- */
label { display:block; font-family:var(--font-sans); font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--fg-muted); margin:0 0 7px; }
input[type="text"] {
  width:100%; font-family:var(--font-sans); font-size:15px; color:var(--ink); background:var(--bg);
  border:1px solid var(--border); border-radius:var(--radius); padding:9px 12px; margin:0 0 16px;
}
input[type="text"]:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--mint); }
input.code-input { font-family:var(--font-mono); font-size:22px; letter-spacing:.35em; text-transform:uppercase;
  text-align:center; }

/* ---------- badges: The Grain's neutral outlined pill (.stat / .badge) ------ */
.badge { font-family:var(--font-sans); font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  font-weight:700; color:var(--fg-soft); border:1px solid var(--border); border-radius:9999px;
  padding:2px 9px; vertical-align:middle; }
.badge.warn { color:var(--accent); border-color:var(--accent); }

/* inline code — green mono on a faint mint tint (prose code, verbatim) */
code { font-family:var(--font-mono); font-size:.92em; color:var(--accent);
  background:rgba(28,109,58,.07); padding:1px 5px; border-radius:3px; word-break:break-all; }

/* ---------- device code: dark panel, grain hairline + radius ---------------- */
.code-segments { display:flex; justify-content:center; gap:6px; margin:20px 0 24px; flex-wrap:wrap; }
.code-segments span { font-family:var(--font-mono); font-size:27px; font-weight:600; color:var(--mint);
  background:var(--panel-dark); border:1px solid #2a2f2a; border-radius:var(--radius);
  min-width:42px; padding:10px 0; text-align:center; }

/* ---------- computers: typographic rows on hairlines (.index idiom) --------- */
.computer { display:flex; align-items:center; gap:14px; padding:22px 6px 22px 0;
  border-top:1px solid var(--border-light); }
.computer:first-of-type { border-top:0; }
.computer .name { font-family:var(--font-serif); font-size:21px; line-height:1.16; letter-spacing:-.012em;
  color:var(--ink); font-weight:400; }
.computer .meta { font-size:12.5px; color:var(--fg-muted); margin-top:3px; }
.computer .meta .id { color:var(--fg-faint); font-family:var(--font-mono); font-size:11px; }
.computer .spacer { flex:1; }

.dot { width:10px; height:10px; border-radius:50%; flex:none; background:var(--fg-ghost); }
.dot.online { background:var(--accent); box-shadow:0 0 0 3px var(--mint); }

.status { font-family:var(--font-sans); text-transform:uppercase; font-size:10px; letter-spacing:.06em;
  font-weight:700; }
.status.online { color:var(--accent); }
.status.offline { color:var(--fg-faint); }

.cred { display:flex; align-items:center; gap:14px; padding:14px 6px 14px 0; font-size:12.5px;
  color:var(--fg-muted); border-top:1px solid var(--border-light); }
.cred:first-of-type { border-top:0; }
.cred .label { color:var(--ink); font-weight:700; font-family:var(--font-sans); }
.cred .spacer { flex:1; }
.cred form { margin:0; }

/* ---------- states ------------------------------------------------------------ */
.success-mark { width:56px; height:56px; border-radius:9999px; background:var(--mint); color:var(--accent-deep);
  font-size:28px; line-height:56px; text-align:center; margin:0 auto 16px; }

.center { text-align:center; }
.muted { color:var(--fg-muted); }
.small { font-size:12.5px; line-height:1.62; }

/* accent text links (latest-link idiom) */
.card a:not(.btn) { color:var(--accent); }
.card a:not(.btn):hover { color:var(--accent-hover); }

/* ---------- footer colophon ----------------------------------------------------- */
.footer { border-top:1px solid var(--border-light); margin-top:44px; padding:22px 0 44px;
  font-family:var(--font-serif); font-style:italic; font-size:12.5px; color:var(--fg-soft);
  text-align:center; line-height:1.6; }
.footer a { color:var(--fg-muted); }
.footer a:hover { color:var(--accent); }

/* ---------- responsive ------------------------------------------------------------ */
@media (max-width:620px) {
  .shell { padding:36px 14px 0; }
  .card { padding:18px; }
  .wordmark { font-size:30px; }
  .code-segments span { font-size:21px; min-width:34px; }
  .computer { flex-wrap:wrap; }
}