/* ============================================================================
   xdsgn.dev — small, plain, honest indie studio page
   Type: Open Runde (self-hosted, github.com/lauridskern/open-runde) — headings + body
   Zero JavaScript. No images. One calm column.
   ========================================================================== */

@font-face { font-family:"Open Runde"; font-weight:400; font-display:swap; src:url("/fonts/openrunde-400.woff2") format("woff2"); }
@font-face { font-family:"Open Runde"; font-weight:500; font-display:swap; src:url("/fonts/openrunde-500.woff2") format("woff2"); }
@font-face { font-family:"Open Runde"; font-weight:600; font-display:swap; src:url("/fonts/openrunde-600.woff2") format("woff2"); }
@font-face { font-family:"Open Runde"; font-weight:700; font-display:swap; src:url("/fonts/openrunde-700.woff2") format("woff2"); }

/* ── Reset ─────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; }
* { margin:0; }
html { -webkit-text-size-adjust:100%; }
img, svg { display:block; max-width:100%; }
a { color:inherit; }
ul { list-style:none; padding:0; }

/* ── Tokens ────────────────────────────────────────────────────────────── */
:root {
  --bg:#fbfbf9; --ink:#16161c; --muted:#6a6a73; --line:#ebe9e3;
  --accent:#155eef; --accent-ink:#0e44b8;
  --measure:34rem; --pad:clamp(1.4rem,6vw,2.5rem);
  --display:"Open Runde", system-ui, sans-serif;
  --body:"Open Runde", system-ui, sans-serif;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
body {
  font-family:var(--body); color:var(--ink); background:var(--bg);
  line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  min-height:100svh; display:flex; flex-direction:column;
}
h1, h2 { font-family:var(--display); font-weight:600; line-height:1.1; letter-spacing:-0.02em; }
a { text-decoration:none; }
::selection { background:#dfe7ff; color:var(--accent-ink); }
:focus-visible { outline:2.5px solid var(--accent); outline-offset:3px; border-radius:4px; }

/* ── Page ──────────────────────────────────────────────────────────────── */
.page {
  flex:1; width:100%; max-width:var(--measure); margin-inline:auto;
  padding:clamp(3.5rem,12vw,6rem) var(--pad) clamp(2rem,6vw,3rem);
  display:flex; flex-direction:column; gap:clamp(2.2rem,6vw,3.2rem);
}

.brand { font-family:var(--display); font-weight:700; font-size:clamp(1.9rem,6vw,2.4rem); letter-spacing:-0.04em; }
.brand .dot { color:var(--accent); }
.lede { font-size:clamp(1.1rem,2.4vw,1.3rem); color:var(--ink); max-width:30rem; margin-top:1rem; }

.label {
  font-size:0.82rem; font-weight:600; text-transform:uppercase; letter-spacing:0.08em;
  color:var(--muted); margin-bottom:1rem; font-family:var(--body);
}

/* apps — plain list, no cards, no images */
.apps { display:flex; flex-direction:column; gap:1.4rem; }
.app-name { font-family:var(--display); font-weight:600; font-size:1.15rem; }
.app-plat { color:var(--muted); font-size:0.9rem; margin-left:0.5rem; }
.app-soon { display:inline-block; margin-top:0.7rem; font-size:0.66rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase; color:#5b5b61; background:#edece8; padding:0.25em 0.7em; border-radius:999px; }
.app-desc { display:block; color:var(--muted); margin-top:0.15rem; }

.mail { color:var(--accent); font-weight:500; }
.mail:hover { color:var(--accent-ink); text-decoration:underline; text-underline-offset:3px; }

/* ── Footer ────────────────────────────────────────────────────────────── */
.site-footer {
  width:100%; max-width:var(--measure); margin-inline:auto;
  padding:1.6rem var(--pad) 2.4rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:0.5rem 1.2rem; justify-content:space-between;
  font-size:0.85rem; color:var(--muted);
}
.site-footer a { color:var(--ink); }
.site-footer a:hover { color:var(--accent); }
.site-footer nav { display:flex; gap:1.1rem; }
.site-footer [aria-current="page"] { color:var(--accent); }

/* ── Legal pages — same calm system ────────────────────────────────────── */
.wrap { width:100%; max-width:var(--measure); margin-inline:auto; padding-inline:var(--pad); }
.legal { padding:clamp(3rem,9vw,5rem) 0 clamp(2.5rem,7vw,4rem); }
.wordmark { font-family:var(--display); font-weight:700; font-size:1.5rem; letter-spacing:-0.04em; color:var(--ink); display:inline-block; margin-bottom:clamp(1.6rem,5vw,2.6rem); }
.legal h1 { font-family:var(--display); font-weight:600; font-size:clamp(1.9rem,5vw,2.6rem); letter-spacing:-0.02em; margin-bottom:0.4rem; }
.legal-meta { font-size:0.85rem; color:var(--muted); margin-bottom:2.2rem; }
.legal h2 { font-family:var(--display); font-weight:600; font-size:1.3rem; letter-spacing:-0.01em; margin-top:2.2rem; margin-bottom:0.5rem; }
.legal h3 { font-size:0.95rem; font-weight:600; color:var(--ink); margin-top:1.4rem; margin-bottom:0.3rem; }
.legal > p { margin-bottom:1rem; }
.legal p { color:var(--muted); }
.legal strong { color:var(--ink); font-weight:600; }
.legal a { color:var(--accent); text-decoration:underline; text-underline-offset:3px; }
.legal ul { margin:0 0 1rem; padding-left:1.2rem; }
.legal ul li { color:var(--muted); margin-bottom:0.35rem; list-style:disc; }
.legal ul li::marker { color:var(--accent); }

/* No load animation — content is always visible. Keep it simple. */