@font-face { font-family: "Gloock"; src: url("../fonts/gloock-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Schibsted Grotesk"; src: url("../fonts/schibsted-grotesk-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
:root {
    --vs-paper: #f3eee3; --vs-card: #fbf8f1; --vs-ink: #10302e; --vs-ink-soft: #3e5a57; --vs-rule: #d8d0be;
    --vs-seal: #c8432b; --vs-brass: #b98a3e; --vs-sage: #dce6e2; --vs-fern: #2f7a54; --vs-slate: #69727a;
    --vs-display: "Gloock", "Iowan Old Style", Georgia, serif;
    --vs-text: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
    --vs-ease: cubic-bezier(.2, .7, .2, 1); --vs-quick: 120ms; --vs-state: 240ms; --vs-enter: 480ms;
    --vs-radius: 14px; --vs-width: 72rem; --vs-gutter: clamp(1rem, 4vw, 2.5rem);
    --ui-color-background: var(--vs-paper); --ui-color-surface: var(--vs-card); --ui-color-text: var(--vs-ink);
    --ui-color-muted: var(--vs-ink-soft); --ui-color-border: var(--vs-rule); --ui-color-accent: var(--vs-ink);
    --ui-color-accent-text: var(--vs-card); --ui-color-error: var(--vs-seal); --ui-font-body: var(--vs-text);
    --ui-font-heading: var(--vs-display); --ui-radius-control: 999px; --ui-radius-surface: var(--vs-radius);
    color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
body { display: flex; flex-direction: column; min-height: 100vh; overflow-x: clip; margin: 0; background: var(--vs-paper); color: var(--vs-ink); font: 400 1.0625rem/1.6 var(--vs-text); -webkit-font-smoothing: antialiased; }
h1, h2 { font-family: var(--vs-display); font-weight: 400; letter-spacing: -.01em; line-height: 1.08; margin: 0 0 .5em; }
h1 { font-size: clamp(2.6rem, 6vw, 5.2rem); }
h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
h3 { font-size: 1.15rem; margin: 0 0 .4em; }
p { margin: 0 0 1em; }
body > main, body > .workspace { flex: 1; }
a { color: var(--vs-ink); text-underline-offset: .2em; }
img { max-width: 100%; height: auto; display: block; }
:focus-visible { outline: 3px solid var(--vs-brass); outline-offset: 3px; border-radius: 4px; }
.eyebrow { display: inline-flex; align-items: center; gap: .5em; margin-bottom: 1rem; color: var(--vs-ink-soft); font-size: .75rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow .vs-icon { color: var(--vs-seal); width: 1.4em; height: 1.4em; }
.vs-icon { width: 1.25em; height: 1.25em; flex: none; vertical-align: -.25em; }
.action, .ui-button, .account-submit { display: inline-flex; align-items: center; justify-content: center; gap: .55em; padding: .8rem 1.35rem; border: 1.5px solid var(--vs-ink); border-radius: 999px; font: 600 1rem/1.2 var(--vs-text); text-decoration: none; cursor: pointer; transition: transform var(--vs-quick) var(--vs-ease), background var(--vs-quick) var(--vs-ease), color var(--vs-quick) var(--vs-ease); }
.action-primary, .ui-button, .account-submit { background: var(--vs-ink); color: var(--vs-card); }
.action-primary:hover, .ui-button:hover, .account-submit:hover { background: #1c4744; transform: translateY(-1px); }
.action-quiet { background: transparent; color: var(--vs-ink); }
.action-quiet:hover { background: var(--vs-card); }
.action-seal { background: var(--vs-seal); border-color: var(--vs-seal); color: var(--vs-card); }
.action-seal:hover { background: #ad3622; transform: translateY(-1px); }
.action-small { padding: .45rem .9rem; font-size: .9rem; }
.action:disabled { opacity: .45; cursor: default; transform: none; }
.action .vs-icon { transition: transform var(--vs-quick) var(--vs-ease); }
.action:hover .vs-icon { transform: translateX(2px); }
.brand-mark { display: inline-flex; align-items: center; gap: .65rem; font: 400 1.6rem/1 var(--vs-display); color: var(--vs-ink); text-decoration: none; }
.brand-mark img { width: 2.5rem; height: 2.5rem; transition: transform var(--vs-state) var(--vs-ease); }
.brand-mark:hover img { transform: rotate(-12deg); }
.stamp { display: inline-flex; align-items: center; gap: .4em; padding: .3em .7em; border: 1.5px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px; border-radius: 6px; font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap; transform: rotate(-3deg); }
.stamp-fern { color: #276a48; }
.stamp-brass { color: #7a5820; }
.stamp-seal { color: #b4391f; }
.stamp-ink { color: var(--vs-ink); }
.stamp-slate { color: #5d666e; }
.content { max-width: var(--vs-width); margin: 0 auto; padding: clamp(3rem, 7vw, 5.5rem) var(--vs-gutter); }
.page-head { max-width: 46rem; margin-bottom: 3rem; }
.page-head p:last-child { color: var(--vs-ink-soft); font-size: 1.15rem; }
input, select { font: inherit; color: var(--vs-ink); background: var(--vs-card); border: 1.5px solid var(--vs-rule); border-radius: 10px; padding: .7rem .85rem; transition: border-color var(--vs-quick) var(--vs-ease); }
input:hover, select:hover { border-color: var(--vs-ink-soft); }
input[type="checkbox"] { accent-color: var(--vs-ink); width: 1.1rem; height: 1.1rem; padding: 0; }