/*
=========================
base.css
Site-wide foundation: website-only tokens, base element styles, page layout helpers
(.wrap, .section, .stack, .grid-3, .split), typography and the section backgrounds.

Every page loads the stylesheets in this order (later files may override earlier ones):
variables.css → base.css → header-footer.css → components.css → sections.css

Use the tokens from variables.css (shared with the semantic app, do not edit it here)
and never colour literals, so the website and the app stay one brand.
=========================
*/

/*
=========================
Website-only tokens
All shared tokens (colours, fonts, text sizes, radius, shadows) live in variables.css.
=========================
*/

:root {
    /* the website keeps a full cream page in light mode */
    --site-bg: var(--brand-cream);

    /* large headings: the shared text scale stops at 32px */
    --display-xl: 52px;
    --display-lg: 40px;
    --display-md: 28px;

    --site-header-h: 84px;
    --site-max-w: 1200px;

    /* dark bands: governance, contact, stats, featured price, footer */
    --band-bg: var(--c-header);
    --band-bg-alt: color-mix(in srgb, var(--c-header) 90%, var(--brand-moss));
    --band-fg: var(--c-header-fg);
    --band-muted: color-mix(in srgb, var(--c-header-fg) 78%, var(--c-header));
    --band-line: var(--c-header-border);
    --band-accent: var(--brand-ochre);
    --footer-bg: color-mix(in srgb, black 22%, var(--c-header));

    /* scrims that keep text readable over photos */
    --scrim-strong: color-mix(in srgb, var(--brand-forest) 94%, transparent);
    --scrim-mid: color-mix(in srgb, var(--brand-forest) 82%, transparent);
    --scrim-soft: color-mix(in srgb, var(--brand-forest) 30%, transparent);
    --scrim-faint: color-mix(in srgb, var(--brand-forest) 10%, transparent);

    --feature-icon-fg: var(--brand-ochre);
}

@media (max-width: 640px) {
    :root {
        --display-xl: 36px;
        --display-lg: 28px;
        --display-md: 22px;
        --site-header-h: 72px;
    }
}

/*
=========================
Base
=========================
*/

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-display);
    line-height: var(--leading);
    background: var(--site-bg);
    color: var(--c-text);
}

h1, h2, h3, h4 {
    margin: 0;
    font-weight: 700;
    line-height: 1.15;
}

p {
    margin: 0;
}

img {
    max-width: 100%;
}

/* layout classes set display, so make the hidden attribute always win */
[hidden] {
    display: none !important;
}

a {
    color: var(--c-accent);
}

a:hover {
    color: var(--c-accent-hover);
}

mark {
    background: transparent;
    color: var(--c-accent);
    font-weight: 700;
}

:focus-visible {
    outline: 3px solid var(--c-accent);
    outline-offset: 3px;
    border-radius: var(--r-xs);
}

/* on photos and dark backgrounds the focus ring turns ochre */
.hero :focus-visible,
.band-dark :focus-visible,
.photo-band :focus-visible,
.site-footer :focus-visible,
.site-header.is-transparent :focus-visible {
    outline-color: var(--band-accent);
}

/*
=========================
Page layout
=========================
*/

/* the homepage hero sits under the fixed header; other pages start below it */
body:not([data-page="home"]) main {
    padding-top: var(--site-header-h);
}

/* anchors land below the fixed header */
[id] {
    scroll-margin-top: var(--site-header-h);
}

.wrap {
    max-width: var(--site-max-w);
    margin: 0 auto;
    padding: 0 40px;
}

.section {
    padding: 112px 0;
}

.section > .wrap {
    display: flex;
    flex-direction: column;
    gap: 48px;
}

.section--roomy > .wrap {
    gap: 88px;
}

.bg-surface {
    background-color: var(--c-surface);
}

.align-start {
    align-self: flex-start;
}

.section-head {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 780px;
}

.section-head--row {
    max-width: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.stack {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.stack--tight {
    gap: 10px;
}

.grid-3 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.split {
    display: flex;
    align-items: center;
    gap: 64px;
}

.split > * {
    flex: 1 1 0;
    min-width: 0;
}

.split--reverse {
    flex-direction: row-reverse;
}

.split--top {
    align-items: flex-start;
}

.split--stretch {
    align-items: stretch;
}

/*
=========================
Typography
=========================
*/

.eyebrow {
    font-size: var(--text-sm);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--c-accent);
}

.h1 {
    font-size: var(--display-xl);
    line-height: 1.1;
    letter-spacing: -.01em;
}

.h2 {
    font-size: var(--display-lg);
}

.h3 {
    font-size: var(--display-md);
    line-height: 1.2;
}

.lead {
    font-size: var(--text-lg);
    line-height: 1.65;
}

.muted {
    color: var(--c-text-muted);
}

.small {
    font-size: var(--text-md);
    line-height: 1.6;
}

/*
=========================
Backgrounds
The diagonal wedges carried over from the original site.
=========================
*/

.wedges {
    --tint: var(--pattern-tint);
    background-image:
        linear-gradient(145deg, var(--tint) 25%, transparent 25%),
        linear-gradient(225deg, var(--tint) 25%, transparent 25%),
        linear-gradient(55deg, var(--tint) 25%, transparent 25%),
        linear-gradient(315deg, var(--tint) 25%, transparent 25%);
    background-position: 10px 0, 10px 0, 0 0, 0 0;
}

.band-dark {
    background-color: var(--band-bg);
    color: var(--band-fg);
}

.band-dark--alt {
    background-color: var(--band-bg-alt);
}

.band-dark.wedges {
    --tint: color-mix(in srgb, var(--band-fg) 6%, transparent);
}

.band-dark .eyebrow,
.hero .eyebrow {
    color: var(--band-accent);
}

.band-dark .muted {
    color: var(--band-muted);
}

/*
=========================
Responsive
=========================
*/

@media (max-width: 980px) {

    .split,
    .split--reverse {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
    }
}

@media (max-width: 640px) {

    .wrap {
        padding: 0 20px;
    }

    .section {
        padding: 72px 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    * {
        transition: none !important;
    }
}