/* ==========================================================================
   KCCU — Kirinyaga County Cooperative Union
   DESIGN SYSTEM · "ESTATE & EXCHANGE"
   Tokens, base/reset, typography, container, section shells, ornaments,
   micro-type utilities, buttons and the scroll-reveal animation layer.

   Ported verbatim from mockups/style.css — do not restyle.
   Enqueue order: fonts → design-system → components/header-footer → overrides
   ========================================================================== */

/* ── TOKENS ─────────────────────────────────────────────────────────────── */
:root {
    /* Core palette */
    --ink:          #120b07;   /* near-black espresso — page base (dark) */
    --espresso:     #1d130b;
    --espresso-2:   #2a1b10;
    --cream:        #f2ead9;   /* primary light */
    --cream-dim:    #cdc0a8;   /* muted light text on dark */
    --paper:        #f7f1e3;   /* light section bg */
    --paper-2:      #ece3cd;
    --leaf:         #23482f;
    --leaf-deep:    #142a1b;
    --moss:         #47734f;
    --gold:         #d9a441;
    --amber:        #e8c065;
    --gold-deep:    #a87a20;
    --cherry:       #c04a32;
    --up:           #6cc389;
    --down:         #e07856;

    --line-d:       rgba(242, 234, 217, .13);  /* hairline on dark */
    --line-l:       rgba(29, 19, 11, .14);     /* hairline on light */
    --ink-muted:    #6f6250;

    /* Type */
    --f-display: 'Fraunces', Georgia, serif;
    --f-body: 'Inter', -apple-system, sans-serif;
    --f-mono: 'IBM Plex Mono', ui-monospace, monospace;

    /* Shape */
    --r-sm: 6px;
    --r-md: 14px;
    --r-lg: 22px;

    --container: 1360px;
    --gutter: clamp(1.2rem, 4vw, 3rem);
    --sec-pad: clamp(4.5rem, 9vw, 8.5rem);
}

/* ── BASE ───────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: var(--f-body);
    background: var(--ink);
    color: var(--cream);
    font-size: 16px;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 480;
    line-height: 1.04;
    letter-spacing: -.015em;
    margin: 0 0 .5em;
}
h1 { font-size: clamp(3rem, 7.6vw, 7rem); }
h2 { font-size: clamp(2.2rem, 4.6vw, 4rem); }
h3 { font-size: clamp(1.4rem, 2.2vw, 1.9rem); }
h4 { font-size: 1.15rem; }
p { margin: 0 0 1em; }
em { font-style: italic; }
::selection { background: var(--gold); color: var(--ink); }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: var(--espresso-2); border-radius: 10px; border: 2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover { background: var(--gold-deep); }

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

/* Light sections */
.sec-light { background: var(--paper); color: var(--ink); }
.sec-light h1, .sec-light h2, .sec-light h3, .sec-light h4 { color: var(--ink); }
.sec-light .k-lead, .sec-light p { color: #4c4232; }
.sec-dark { background: var(--ink); color: var(--cream); }
.sec-leaf { background: var(--leaf-deep); color: var(--cream); }

/* film grain */
.grain { position: relative; }
.grain::after {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45; z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.grain > * { position: relative; z-index: 2; }

/* topo contour ornament (very low opacity, dark sections) */
.contours::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .55;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 900 600'%3E%3Cg fill='none' stroke='%23d9a441' stroke-opacity='.09' stroke-width='1'%3E%3Cpath d='M130 90 C 260 40 430 60 500 140 C 560 210 470 300 340 300 C 210 300 60 260 60 180 C 60 120 80 108 130 90 Z'/%3E%3Cpath d='M160 110 C 270 70 400 85 460 150 C 510 205 435 272 335 272 C 235 272 95 240 95 180 C 95 135 115 126 160 110 Z'/%3E%3Cpath d='M195 132 C 280 100 370 112 418 160 C 458 200 405 245 330 245 C 255 245 132 222 132 178 C 132 148 155 145 195 132 Z'/%3E%3Cpath d='M680 420 C 780 380 880 400 900 460 L 900 600 L 560 600 C 560 520 600 452 680 420 Z'/%3E%3Cpath d='M700 450 C 780 418 860 435 878 480 L 878 570 L 610 570 C 610 512 640 474 700 450 Z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
}

/* ── MICRO-TYPE UTILITIES ───────────────────────────────────────────────── */
.k-mono {
    font-family: var(--f-mono); font-size: .72rem; font-weight: 500;
    letter-spacing: .22em; text-transform: uppercase;
}
.k-eyebrow {
    display: flex; align-items: center; gap: 1rem;
    font-family: var(--f-mono); font-size: .72rem; font-weight: 500;
    letter-spacing: .26em; text-transform: uppercase; color: var(--gold);
    margin-bottom: 1.6rem;
}
.k-eyebrow::before { content: ""; width: 44px; height: 1px; background: var(--gold); }
.k-eyebrow .idx { color: var(--cream-dim); }
.sec-light .k-eyebrow .idx { color: var(--ink-muted); }

.k-head { max-width: 880px; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.k-head h2 em { color: var(--gold); }
.k-head .k-lead { font-size: clamp(1rem, 1.4vw, 1.15rem); max-width: 620px; color: var(--cream-dim); }
.sec-light .k-head .k-lead { color: #5b5140; }
.k-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.k-head.center .k-eyebrow { justify-content: center; }
.k-head.center .k-eyebrow::after { content: ""; width: 44px; height: 1px; background: var(--gold); }
.k-head.center .k-lead { margin-left: auto; margin-right: auto; }

.outline-txt {
    color: transparent; -webkit-text-stroke: 1.5px var(--cream);
}
.sec-light .outline-txt { -webkit-text-stroke-color: var(--ink); }

.k-sec { padding: var(--sec-pad) 0; position: relative; overflow: hidden; }
.k-sec-sm { padding: calc(var(--sec-pad) * .6) 0; position: relative; overflow: hidden; }

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; gap: .9rem;
    font-family: var(--f-mono); font-size: .74rem; font-weight: 600;
    letter-spacing: .18em; text-transform: uppercase;
    padding: 0; background: none; border: none; cursor: pointer;
    color: inherit; transition: color .3s ease;
}
.btn .arr {
    width: 44px; height: 44px; border-radius: 50%; flex: 0 0 44px;
    display: grid; place-items: center; font-size: .8rem;
    border: 1px solid var(--line-d); transition: all .35s ease;
}
.sec-light .btn .arr, .btn.on-light .arr { border-color: var(--line-l); }
.btn:hover .arr { background: var(--gold); border-color: var(--gold); color: var(--ink); transform: rotate(-45deg); }
.btn.solid .arr { background: var(--gold); border-color: var(--gold); color: var(--ink); }
.btn.solid:hover .arr { background: var(--amber); transform: rotate(-45deg); }
.btn:hover { color: var(--gold); }
.sec-light .btn:hover { color: var(--gold-deep); }

.btn-fill {
    display: inline-flex; align-items: center; gap: .7rem;
    font-family: var(--f-mono); font-size: .74rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    background: var(--gold); color: var(--ink);
    padding: 1.05rem 1.9rem; border-radius: 100px; border: 1px solid var(--gold);
    cursor: pointer; transition: all .3s ease;
    white-space: nowrap;
}
.btn-fill:hover { background: var(--amber); border-color: var(--amber); transform: translateY(-2px); }
.btn-ghost {
    display: inline-flex; align-items: center; gap: .7rem;
    font-family: var(--f-mono); font-size: .74rem; font-weight: 600;
    letter-spacing: .16em; text-transform: uppercase;
    background: transparent; color: var(--cream);
    padding: 1.05rem 1.9rem; border-radius: 100px; border: 1px solid var(--line-d);
    cursor: pointer; transition: all .3s ease;
    white-space: nowrap;
}
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); }
.sec-light .btn-ghost { color: var(--ink); border-color: var(--line-l); }
.sec-light .btn-ghost:hover { border-color: var(--gold-deep); color: var(--gold-deep); }

/* ── ANIMATIONS ─────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .85s ease, transform .85s ease; }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; } .reveal-d2 { transition-delay: .2s; } .reveal-d3 { transition-delay: .3s; }
.reveal-blur { opacity: 0; filter: blur(10px); transform: translateY(20px); transition: all 1s ease; }
.reveal-blur.visible { opacity: 1; filter: none; transform: none; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal, .reveal-blur { opacity: 1; transform: none; filter: none; }
}