/* ===========================================================================
   Traclie — base element styling
   =========================================================================== */

body {
    font-family: var(--font-body);
    font-size: var(--fs-base);
    line-height: var(--lh-body);
    color: var(--fg-000);
    background-color: var(--bg-000);
    background-image:
        var(--grain),
        radial-gradient(1200px 700px at 78% -8%, rgba(143, 188, 166, 0.05), transparent 60%),
        radial-gradient(900px 600px at -6% 6%, rgba(196, 122, 110, 0.045), transparent 55%);
    background-attachment: fixed;
}

h1, h2, h3, h4 { font-family: var(--font-display); color: var(--fg-000); letter-spacing: -0.01em; }
h1 { font-size: var(--fs-xl); font-weight: 600; }
h2 { font-size: var(--fs-lg); font-weight: 600; }
h3 { font-size: var(--fs-md); font-weight: 600; }
h4 { font-size: var(--fs-base); font-weight: 600; letter-spacing: 0; }

p { max-width: 72ch; }
a { color: var(--accent); transition: color var(--t-fast) var(--ease); }
a:hover { color: color-mix(in srgb, var(--accent) 70%, var(--fg-000)); }

strong, b { font-weight: 600; color: var(--fg-000); }
small { font-size: var(--fs-sm); color: var(--fg-300); }
hr { border: none; border-top: 1px solid var(--bg-300); margin: var(--sp-5) 0; }

/* odds, prices, codes always tabular mono */
.mono, .odds, code, kbd, samp {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

::selection { background: var(--accent); color: var(--accent-ink); }

/* scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--bg-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--bg-300); border-radius: var(--r-pill); border: 2px solid transparent; background-clip: padding-box; }

/* layout primitives */
.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: clamp(var(--sp-4), 4vw, var(--sp-6)); }
.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }
.visually-hidden {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
    position: absolute; left: var(--sp-3); top: -120%; z-index: 200;
    background: var(--accent); color: var(--accent-ink); padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-sm); font-weight: 600;
}
.skip-link:focus { top: var(--sp-3); }

/* app shell grid */
.shell {
    display: grid;
    grid-template-columns: var(--rail-w) minmax(0, 1fr) var(--slip-w);
    gap: var(--sp-5);
    max-width: 1480px;
    margin-inline: auto;
    padding: var(--sp-5) clamp(var(--sp-3), 3vw, var(--sp-6));
    align-items: start;
}
.shell__main { min-width: 0; }

@media (max-width: 1180px) {
    .shell { grid-template-columns: minmax(0, 1fr); }
}