/* vireostudio.app — the public pages (home, privacy, terms). Static, no build step, no scripts, no third-party requests.
   Same Linen tokens as the Studio (public/style.css). */
@font-face { font-family: "Fraunces"; font-style: normal; font-weight: 300 700; font-display: swap; src: url(/fonts/fraunces-latin-300-700.woff2) format("woff2"); }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/fonts/instrument-sans-latin-400-700.woff2) format("woff2"); }

:root {
  --bg: #f9f6f0; --surface: #f2ede4; --panel: #ffffff; --ink: #16211c; --ink-2: #47544e; --muted: #5f6b65;
  --line: #e6e1d5; --btn: #0a4d38; --btn-hover: #073b2a; --accent-ink: #faf8f4; --accent: #0a4d38;
  --gold: #b8891e; --gold-soft: #fbf5e6; --gold-border: #e5cf97; --gold-text: #80600f;
  --font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", sans-serif;
  --font-display: "Fraunces", Georgia, serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --bg: #111614; --surface: #161c19; --panel: #1b231f; --ink: #f4f1ea; --ink-2: #b4beb9; --muted: #8a968f;
  --line: #28332e; --btn: #146b4f; --btn-hover: #198260; --accent-ink: #f9f6f0; --accent: #65e4b8;
  --gold: #d9ae4a; --gold-soft: rgba(217, 174, 74, .14); --gold-border: rgba(217, 174, 74, .38); --gold-text: #e8c468;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --bg: #111614; --surface: #161c19; --panel: #1b231f; --ink: #f4f1ea; --ink-2: #b4beb9; --muted: #8a968f;
  --line: #28332e; --btn: #146b4f; --btn-hover: #198260; --accent-ink: #f9f6f0; --accent: #65e4b8;
  --gold: #d9ae4a; --gold-soft: rgba(217, 174, 74, .14); --gold-border: rgba(217, 174, 74, .38); --gold-text: #e8c468;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink); font: 16px/1.6 var(--font); overflow-x: hidden; }
body > main { flex: 1 0 auto; width: 100%; } /* the footer at the bottom of the window on short pages */
a { color: var(--accent); text-underline-offset: 3px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; letter-spacing: -.01em; line-height: 1.2; overflow-wrap: anywhere; }
h1 { font-size: clamp(32px, 6vw, 52px); margin: 0 0 16px; }
h2 { font-size: clamp(22px, 3.4vw, 28px); margin: 40px 0 10px; }
h3 { font-size: 19px; margin: 24px 0 6px; }
p, li { color: var(--ink-2); }
ul { padding-left: 22px; }
li { margin: 4px 0; }

.wrap { max-width: 920px; margin: 0 auto; padding: 0 16px; }
.doc { max-width: 760px; padding-top: 40px; }
header.top { border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; font-weight: 600; font-size: 17px; }
.mark { position: relative; width: 34px; height: 34px; border-radius: 11px; flex: none; background: var(--btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 22L2 5h4.8l5.2 10.5L17.2 5H22L12 22z' fill='%23FAF8F4'/%3E%3C/svg%3E") center/18px no-repeat; }
.mark::after { content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px var(--bg); }
nav.links { display: flex; gap: 4px; flex-wrap: wrap; }
nav.links a { color: var(--ink-2); text-decoration: none; font-size: 14px; padding: 6px 10px; border-radius: 10px; }
nav.links a:hover { background: var(--surface); color: var(--ink); }

.hero { padding: 64px 0 24px; }
.lede { font-size: 19px; max-width: 640px; }
.note { display: inline-block; font-size: 13px; color: var(--gold-text); background: var(--gold-soft); border: 1px solid var(--gold-border); border-radius: 99px; padding: 4px 12px; margin-bottom: 18px; }
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 32px 0; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px; }
.card h3 { margin-top: 0; }
.card p { margin: 0; }
.langs { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.langs li { margin: 0; padding: 4px 12px; border-radius: 99px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); font-size: 14px; }
.meta { font-size: 14px; color: var(--muted); }
.draft { border-left: 3px solid var(--gold); background: var(--gold-soft); padding: 10px 14px; border-radius: 0 12px 12px 0; color: var(--ink-2); font-size: 15px; }

footer.foot { flex: none; border-top: 1px solid var(--line); margin-top: 64px; padding: 24px 0 40px; font-size: 14px; color: var(--muted); }
footer.foot .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; }
footer.foot a { color: var(--ink-2); }
footer.foot nav { display: flex; gap: 16px; flex-wrap: wrap; }