/* =========================================================================
   CounTree Concepts — foundations
   Tokens, reset, typography and layout primitives.
   Component styles live in components.css, breakpoints in responsive.css.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Tokens
   Built from the group's own assets: the deep green used across Hobbitinn
   and its companion gold, on a warm paper ground.

   The green is deepened and the gold muted so both read as considered
   rather than bright, and the alternating band tint is a warm stone rather
   than a second green — green then reads as an accent instead of covering
   the page.
   ---------------------------------------------------------------------- */

:root {
    /* colour */
    --primary:        #2C3A22;   /* brand green */
    --primary-dark:   #1D2716;   /* headers, hero scrim */
    --primary-deep:   #11180C;   /* footer */
    --primary-tint:   #E8E5DA;   /* washed green for alternating bands */
    --accent:         #9C7A38;   /* brand gold */
    --accent-dark:    #775B26;   /* gold on light, for text-sized use */

    --background:     #F3F1EA;   /* warm paper */
    --surface:        #FCFBF7;   /* raised panels, cards, form fields */
    --surface-sunk:   #E6E3D8;

    --text:           #1A1B16;
    --text-muted:     #696D61;
    --text-invert:    #F4F2EB;
    --text-invert-mu: rgba(244, 242, 235, 0.72);

    --border:         #DBD7CA;
    --border-strong:  #BFBAA9;
    --border-invert:  rgba(244, 242, 235, 0.22);

    --danger:         #8C2F22;
    --success:        #34572C;

    /* type */
    --font-display: "Lora", Georgia, "Times New Roman", serif;
    --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    --fs-display: clamp(2.75rem, 1.6rem + 4.6vw, 5.25rem);
    --fs-h1:      clamp(2.25rem, 1.5rem + 3vw, 3.75rem);
    --fs-h2:      clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
    --fs-h3:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
    --fs-lead:    clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
    --fs-body:    1.0625rem;
    --fs-small:   0.9375rem;
    --fs-micro:   0.8125rem;

    /* spacing */
    --space-xs:  0.5rem;
    --space-sm:  0.875rem;
    --space-md:  1.5rem;
    --space-lg:  2.5rem;
    --space-xl:  4rem;
    --space-2xl: 6rem;
    --space-3xl: 8.5rem;

    /* layout */
    --container:   1240px;
    --container-narrow: 760px;
    --gutter:      1.5rem;
    --radius:      3px;
    --radius-lg:   6px;

    --nav-height:  76px;

    /* motion */
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --dur:  240ms;
}

/* -------------------------------------------------------------------------
   2. Reset
   ---------------------------------------------------------------------- */

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--nav-height) + 1rem);
    overflow-x: clip;               /* safety net only; layouts do not overflow */
}

body {
    margin: 0;
    background-color: var(--background);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: 1.65;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }

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

img { height: auto; }

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

button { cursor: pointer; }

a {
    color: inherit;
    text-decoration: none;
}

hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 0;
}

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

/* -------------------------------------------------------------------------
   3. Typography
   ---------------------------------------------------------------------- */

.display {
    font-family: var(--font-display);
    font-size: var(--fs-display);
    font-weight: 500;
    line-height: 1.02;
    letter-spacing: -0.022em;
}

.h1 {
    font-family: var(--font-display);
    font-size: var(--fs-h1);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.018em;
}

.h2 {
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 500;
    line-height: 1.14;
    letter-spacing: -0.014em;
}

.h3 {
    font-family: var(--font-body);
    font-size: var(--fs-h3);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.008em;
}

.lead {
    font-size: var(--fs-lead);
    line-height: 1.58;
    color: var(--text-muted);
    max-width: 62ch;
}

.prose p + p { margin-top: 1.1em; }
.prose { max-width: 68ch; }

.muted     { color: var(--text-muted); }
.small     { font-size: var(--fs-small); }
.micro     { font-size: var(--fs-micro); }

/* Section label: a short gold rule plus a quiet label. It marks where one
   part of the page ends and the next begins, so it carries structure
   rather than decoration. */
.label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--fs-micro);
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--accent-dark);
    margin-bottom: var(--space-md);
}

.label::before {
    content: "";
    width: 34px;
    height: 1px;
    background-color: var(--accent);
    flex: none;
}

.on-dark .label { color: var(--accent); }
.on-dark .label::before { background-color: var(--accent); }

/* -------------------------------------------------------------------------
   4. Layout primitives
   ---------------------------------------------------------------------- */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.container-narrow {
    width: 100%;
    max-width: var(--container-narrow);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

.section {
    padding-block: var(--space-2xl);
}

.section-tight { padding-block: var(--space-xl); }
.section-tall  { padding-block: var(--space-3xl); }

.section-dark {
    background-color: var(--primary-dark);
    color: var(--text-invert);
}

.section-tint {
    background-color: var(--primary-tint);
}

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

.section-dark .lead,
.section-dark .muted { color: var(--text-invert-mu); }

.section-head {
    display: grid;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.section-head-split {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    align-items: end;
    column-gap: var(--space-xl);
}

.stack     { display: grid; gap: var(--space-md); }
.stack-lg  { display: grid; gap: var(--space-lg); }
.stack-sm  { display: grid; gap: var(--space-sm); }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-md); }

.rule {
    border-top: 1px solid var(--border);
    padding-top: var(--space-md);
}

.on-dark .rule,
.section-dark .rule { border-color: var(--border-invert); }

/* -------------------------------------------------------------------------
   5. Utilities
   ---------------------------------------------------------------------- */

.skip-link {
    position: absolute;
    left: var(--gutter);
    top: 0;
    transform: translateY(-120%);
    z-index: 200;
    background-color: var(--primary);
    color: var(--text-invert);
    padding: 0.75rem 1.25rem;
    font-size: var(--fs-small);
    font-weight: 600;
    border-radius: 0 0 var(--radius) var(--radius);
    transition: transform var(--dur) var(--ease);
}

.skip-link:focus { transform: translateY(0); }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.no-scroll {
    overflow: hidden;
    padding-right: var(--scrollbar-width, 0px);
}

/* -------------------------------------------------------------------------
   6. Reveal on entry
   One transform/opacity transition, applied to section heads and large
   images only. Disabled entirely under reduced-motion.
   ---------------------------------------------------------------------- */

.reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 620ms var(--ease), transform 620ms var(--ease);
    will-change: opacity, transform;
}

.reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    will-change: auto;
}

/* No JavaScript, no hidden content. */
.no-js .reveal { opacity: 1; transform: none; }

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

    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}