/* ==========================================================================
   TABtooch — foundation: reset, design tokens, typography, base elements.
   Art direction "Broadsheet Turf": warm paper, ink type, WA red-earth accent.
   Mobile-first. Everything downstream builds on the tokens declared here.
   ========================================================================== */

/* --------------------------------------------------------------- fonts --- */

@font-face {
    font-family: "Fraunces";
    src: url("../fonts/fraunces-var-latin.woff2") format("woff2");
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Public Sans";
    src: url("../fonts/publicsans-var-latin.woff2") format("woff2");
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plex Mono";
    src: url("../fonts/ibmplexmono-500-latin.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Plex Mono";
    src: url("../fonts/ibmplexmono-600-latin.woff2") format("woff2");
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------- tokens -- */

:root {
    /* Surfaces — deep aubergine, so the odds carry the page. */
    --bg: #140e1c;
    --surface: #1e1528;
    --bg-sunk: #100b17;
    --surface-2: #2a1d38;
    /* Opaque, so text contrast over it stays predictable rather than composited. */
    --surface-stripe: #241932;

    /* Foreground. */
    --fg: #f4eefa;
    --fg-2: #d3c6e0;
    --fg-soft: #a596b5;
    --fg-faint: #7d6e8d;

    /* Rules — the spine of the whole layout. */
    --line: #332443;
    --line-strong: #4a3560;

    /* Accents. Purple carries the brand and every primary action; green marks
       the tote and firming prices; gold is the high-emphasis call to action. */
    /* Light enough to clear 4.5:1 as text on the page. */
    --brand: #b98ae0;
    --brand-hover: #d6b6f2;
    /* Dark enough to carry white text when used as a fill. */
    --brand-fill: #7e46ab;
    --brand-fill-hover: #6a3a91;
    --brand-deep: #512d6d;
    --brand-tint: #2b1c3d;
    --tote: #3fbf6e;
    --tote-tint: #17301f;
    --gold: #e5a83c;
    --gold-tint: #35270f;
    --danger: #e4564f;

    /* Deep bands: utility bar, docket, footer — darker still than the page. */
    --deep: #0c0812;
    --deep-2: #180f22;
    --deep-line: #2c1f3c;
    --deep-fg: #efe8f6;
    --deep-fg-soft: #a091b0;

    /* Text that sits on a filled brand or gold surface. */
    --on-brand: #ffffff;
    --on-gold: #221407;

    /* Type. */
    --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
    --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: "Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

    --t-xs: 0.75rem;
    --t-sm: 0.8125rem;
    --t-base: 1rem;
    --t-md: clamp(1.0625rem, 1.02rem + 0.22vw, 1.1875rem);
    --t-lg: clamp(1.3rem, 1.19rem + 0.55vw, 1.65rem);
    --t-xl: clamp(1.7rem, 1.44rem + 1.3vw, 2.5rem);
    --t-2xl: clamp(2.15rem, 1.62rem + 2.65vw, 3.6rem);
    --t-display: clamp(2.7rem, 1.75rem + 4.75vw, 5.4rem);

    --lh-tight: 1.02;
    --lh-snug: 1.18;
    --lh-body: 1.62;

    /* Spacing — 8px rhythm. */
    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 0.75rem;
    --s-4: 1rem;
    --s-5: 1.5rem;
    --s-6: 2rem;
    --s-7: 3rem;
    --s-8: 4.5rem;
    --s-9: 6.5rem;

    --radius: 3px;      /* deliberately tight — this is print, not glass */
    --radius-lg: 6px;
    --radius-pill: 999px;

    --shadow-1: 0 1px 0 rgba(0, 0, 0, 0.3);
    --shadow-2: 0 4px 18px -6px rgba(0, 0, 0, 0.65);
    --shadow-3: 0 -12px 44px -18px rgba(0, 0, 0, 0.85);

    --ease: cubic-bezier(0.22, 0.68, 0.3, 1);
    --speed: 220ms;
    --speed-slow: 420ms;

    --shell: 1200px;
    --gutter: clamp(1rem, 4vw, 2.5rem);
    --margin-col: 0rem;       /* widened on desktop to hold section numbers */
    --docket-h: 3.5rem;

    /* Signature paper grain, generated rather than downloaded. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

@media (min-width: 1080px) {
    :root {
        --margin-col: 5.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root {
        --speed: 1ms;
        --speed-slow: 1ms;
    }
}

/* ---------------------------------------------------------------- reset -- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

* {
    margin: 0;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    min-height: 100vh;
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--font-body);
    font-size: var(--t-base);
    line-height: var(--lh-body);
    font-synthesis-weight: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    padding-bottom: calc(var(--docket-h) + 8px);
}

/* The grain sits behind everything and never intercepts a pointer.
   On a dark ground it lifts rather than muddies, so it screens instead of
   multiplying. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    background-image: var(--grain);
    opacity: 0.06;
    mix-blend-mode: screen;
    pointer-events: none;
}

body > * {
    position: relative;
    z-index: 1;
}

img,
svg,
picture,
video {
    display: block;
    max-width: 100%;
}

img {
    height: auto;
}

input,
button,
textarea,
select {
    font: inherit;
    color: inherit;
}

button {
    background: none;
    border: 0;
    cursor: pointer;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

table {
    border-collapse: collapse;
    width: 100%;
}

[hidden] {
    display: none !important;
}

/* ------------------------------------------------------------ typography - */

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    font-weight: 600;
    font-optical-sizing: auto;
    line-height: var(--lh-snug);
    letter-spacing: -0.015em;
    text-wrap: balance;
}

h1 {
    font-size: var(--t-2xl);
    line-height: var(--lh-tight);
}

h2 {
    font-size: var(--t-xl);
}

h3 {
    font-size: var(--t-lg);
}

h4 {
    font-size: var(--t-md);
}

p {
    text-wrap: pretty;
}

strong,
b {
    font-weight: 600;
}

small {
    font-size: var(--t-sm);
}

em {
    font-style: italic;
}

/* Ink-pen underline: the link treatment repeats across the whole site. */
a {
    color: var(--brand);
    text-decoration-color: color-mix(in srgb, var(--brand) 35%, transparent);
    text-underline-offset: 0.18em;
    text-decoration-thickness: 1px;
    transition: color var(--speed) var(--ease),
                text-decoration-color var(--speed) var(--ease);
}

a:hover {
    color: var(--brand-hover);
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
}

:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 3px;
    border-radius: 2px;
}

.mono {
    font-family: var(--font-mono);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
}

/* Small-caps label used above headings, on tags and in the utility bar. */
.label {
    font-family: var(--font-mono);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-soft);
}

.icon {
    width: 1em;
    height: 1em;
    flex: none;
    vertical-align: -0.125em;
}

/* ------------------------------------------------------------- utilities - */

.shell {
    width: min(100% - (var(--gutter) * 2), var(--shell));
    margin-inline: auto;
}

.skip-link {
    position: absolute;
    top: -100%;
    left: var(--s-4);
    z-index: 200;
    padding: var(--s-3) var(--s-5);
    background: var(--brand-fill);
    color: var(--on-brand);
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 var(--radius) var(--radius);
}

.skip-link:focus {
    top: 0;
    color: #fff;
}