/* llamay.com -- the pixel skin, for every page that is not the home page.
   ---------------------------------------------------------------------------
   The home page (home.css) is white paper, 2px ink lines, hard 4px shadows
   and the conch's amber. Docs, blog, pricing and download are built on
   site.css; compare, glossary, contact and the legal pages on landing.css,
   which is dark. This file is loaded after either one and dresses both in
   the home page's clothes, so moving between pages feels like one site.

   It changes look, never layout: colours, borders, corners, shadows, type
   weight. scripts/site/assets.py links it on every page except the home page,
   which already is this. No inline styles; every motion sits inside
   prefers-reduced-motion: no-preference. */

/* ---- one palette, light only -------------------------------------------- */
:root, [data-theme="light"], [data-theme="dark"] {
  color-scheme: light;
  --px-paper: #fbfaf6;
  --px-ink: #14110d;
  --px-ink-2: #4a443b;
  --px-ink-3: #6b6458;
  --px-amber: #ec9a3a;
  --px-deep: #b45309;
  --px-tint: #f5f1e8;
  --px-hard: 4px 4px 0 #14110d;
  --px-hard-sm: 3px 3px 0 #14110d;

  /* site.css */
  --bg: #fbfaf6;
  --bg-elev: #ffffff;
  --surface: #ffffff;
  --surface-2: #f5f1e8;
  --line: rgba(20, 17, 13, .16);
  --line-strong: #14110d;
  --text: #14110d;
  --text-2: #4a443b;
  --prose: #24201a;
  --text-3: #6b6458;
  --accent: #b45309;
  --accent-ink: #14110d;
  --ok: #1f7a55;
  --warn: #c2363b;
  --glow: none;
  --shadow: 4px 4px 0 #14110d;
  --shadow-sm: 3px 3px 0 #14110d;
  --r-sm: 0; --r: 0; --r-lg: 0;
}

/* landing.css pages: the dark ground becomes paper and the bone type ink. */
:root:has(link[href^="/assets/landing.css"]) {
  --ink: #fbfaf6;
  --ink-2: #ffffff;
  --ink-3: #f5f1e8;
  --bone: #14110d;
  --bone-2: #4a443b;
  --bone-3: #6b6458;
  --line: rgba(20, 17, 13, .2);
  --line-2: rgba(20, 17, 13, .1);
  --amber: #ec9a3a;
  --amber-deep: #b45309;
  --amber-ink: #14110d;
  --light: #ffffff;
  --shadow: 20 17 13;
  --lift: 4px 4px 0 #14110d;
  --display: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* The theme switch has one setting left. */
#theme, .icon-btn#theme { display: none !important; }
[data-theme="dark"] .brand img { filter: none; }

/* ---- the paper ---------------------------------------------------------- */
html, body { background-color: var(--px-paper); }
body {
  color: var(--px-ink);
  background-image: radial-gradient(#e2dccf 1px, transparent 1.2px);
  background-size: 16px 16px;
  background-attachment: fixed;
}
::selection { background: var(--px-amber); color: var(--px-ink); }

h1, h2, h3, .post h1, .doc h1, .hero h1 {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
  letter-spacing: -.035em;
  color: var(--px-ink);
}
h1 em, h2 em { font-style: normal; }

/* A pixel bar under the page's title: four squares of amber, one of ink. */
main h1::after, .post__hero h1::after, .hero h1::after, .doc > h1:first-child::after {
  content: "";
  display: block;
  width: 60px; height: 8px;
  margin-top: 18px;
  background: linear-gradient(90deg, var(--px-amber) 0 12px, transparent 12px 16px,
    var(--px-amber) 16px 28px, transparent 28px 32px, var(--px-amber) 32px 44px,
    transparent 44px 48px, var(--px-ink) 48px 60px);
}
.px-center h1::after, .head--center h1::after, [class*="center"] > h1::after { margin-inline: auto; }

a { text-underline-offset: 3px; }
.doc a:not(.btn), .post a:not(.btn), .legal a:not(.btn) { color: var(--px-deep); text-decoration-thickness: 2px; }

code:not(pre code) {
  background: var(--px-tint);
  border: 1px solid rgba(20, 17, 13, .18);
  border-radius: 0;
  color: var(--px-ink);
}

/* ---- the nav ------------------------------------------------------------ */
.nav {
  background: rgba(251, 250, 246, .92) !important;
  border-bottom: 2px solid var(--px-ink) !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: saturate(1.2) blur(10px);
  backdrop-filter: saturate(1.2) blur(10px);
}
.nav a, .nav__links a { color: var(--px-ink); }
.nav__links a:hover, .nav__links a[aria-current] { color: var(--px-deep); }
.nav__links a { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 13px; font-weight: 600; }

/* ---- buttons: ink outline, a hard shadow, and they press in ------------- */
.btn, .nav__cta, .pick__btn, .cform button[type="submit"] {
  border-radius: 0 !important;
  border: 2px solid var(--px-ink) !important;
  box-shadow: var(--px-hard-sm) !important;
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-weight: 700;
  color: var(--px-ink) !important;
  background: #ffffff;
}
.btn--primary, .btn--go, .nav__cta, .pick__btn, .cform button[type="submit"] { background: var(--px-amber) !important; }
.btn:hover, .nav__cta:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--px-ink) !important; }
.btn:active, .nav__cta:active { transform: translate(3px, 3px); box-shadow: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .btn, .nav__cta { transition: transform .12s cubic-bezier(.2, .7, .2, 1), box-shadow .12s cubic-bezier(.2, .7, .2, 1); }
}

/* ---- surfaces: cards, panels, tables, notes ----------------------------- */
.card, .panel, .pcard, .product, .addon, .note, .tile, .spec, .fact, .vout, .versus,
.plate, .faqgroup, .cform, .post__toc, .toc, .rel, .pick, .step, .file, .moat, .geo__stage {
  border: 2px solid var(--px-ink) !important;
  border-radius: 0 !important;
  box-shadow: var(--px-hard) !important;
  background-color: #ffffff;
}
.card:hover, .tile:hover, .panel:hover, .rel:hover { box-shadow: 6px 6px 0 var(--px-ink) !important; }
@media (prefers-reduced-motion: no-preference) {
  .card, .tile, .panel, .rel { transition: transform .15s cubic-bezier(.2, .7, .2, 1), box-shadow .15s cubic-bezier(.2, .7, .2, 1); }
  .card:hover, .tile:hover, .panel:hover, .rel:hover { transform: translate(-2px, -2px); }
}
.pcard--pick { background: #fff1dc; box-shadow: 6px 6px 0 var(--px-amber), 6px 6px 0 2px var(--px-ink) !important; }
.note--ok { background: #dcf5ea; }
.note--warn, .warn { background: #fde4e4; }

table, .tbl, .ptable, .post__table table, .legal__tbl {
  border-collapse: collapse;
  border: 2px solid var(--px-ink) !important;
  background: #ffffff;
}
th { background: var(--px-tint); font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 12px; letter-spacing: .04em; text-transform: uppercase; }
th, td { border-color: rgba(20, 17, 13, .16) !important; }
.tablewrap { border-radius: 0; box-shadow: var(--px-hard); border: 0; }

/* Code and terminals stay dark: a terminal is a terminal. Square it off. */
pre, .term, .demo__win, .cast, .cmd {
  border-radius: 0 !important;
  border: 2px solid var(--px-ink) !important;
  box-shadow: var(--px-hard) !important;
}

/* Labels and chips in mono, like the home page's tags. */
.eyebrow, .doc-kicker, .card__cat, .rel__cat, .badge, .chip, .panel__tag, .demo__tag, .toc__label, .post__toc-label, .caps, .stat-label, .fgrid__label {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace !important;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 0 !important;
}
.badge, .chip {
  border: 2px solid var(--px-ink) !important;
  background: #ffffff;
  color: var(--px-ink);
}
.eyebrow::before, .doc-kicker::before {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  margin-right: 8px;
  vertical-align: 1px;
  background: var(--px-amber);
}

/* ---- docs: the sidebar reads as a stack of keys ------------------------- */
.docnav { border-right: 2px solid var(--px-ink) !important; background: transparent; }
.docnav a[aria-current], .docnav a.is-on { background: var(--px-amber) !important; color: var(--px-ink) !important; border-radius: 0 !important; box-shadow: var(--px-hard-sm); }
.docnav a { border-radius: 0 !important; }

/* ---- blog: a post sits on a white page, like a printed sheet ------------ */
.post { background: #ffffff; border: 2px solid var(--px-ink); box-shadow: 8px 8px 0 var(--px-ink); padding: clamp(20px, 4vw, 56px); }
.post__hero { border-bottom: 2px solid var(--px-ink); }
.bloghome__head { border-bottom: 2px solid var(--px-ink); }
.cards .card__meta { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-size: 12px; }
blockquote { border-left: 6px solid var(--px-amber) !important; background: var(--px-tint); padding: 12px 18px; margin-left: 0; }
hr { border: 0; height: 2px; background: repeating-linear-gradient(90deg, var(--px-ink) 0 6px, transparent 6px 10px); }

/* ---- the footer --------------------------------------------------------- */
footer, .foot { border-top: 2px solid var(--px-ink) !important; background: var(--px-tint) !important; color: var(--px-ink); }
footer a, .foot a { color: var(--px-ink-2); }
footer a:hover, .foot a:hover { color: var(--px-deep); }

/* ---- the landing.css pages' few hard-coded darks ------------------------ */
:root:has(link[href^="/assets/landing.css"]) .card__art,
:root:has(link[href^="/assets/landing.css"]) .geo__stage { background: var(--px-tint); }
:root:has(link[href^="/assets/landing.css"]) .btn--go:hover { background: #f4b063 !important; }

@media print {
  body { background: #fff; }
  .post { box-shadow: none; border: 0; padding: 0; }
}