/* View Transitions — Native SPA-like page navigation */
@view-transition {
    navigation:auto;
}


:root {
    /* Ground and Ink Tokens — Strict Warm Earth Ground */
    --ground:#E8DFD0;
    --ground-alt:#DECFC0;
    --ground-sunken:#D5C5B3;
    --ink:#24201D;
    --ink-muted:#524741;
    --ink-faint:#6E6157;
    --ink-forest:#1E2B22;


    --clay:#873E28;
    --terracotta:#BD5338;
    --ochre:#C47D2B;
    --moss:#3B4D3C;
    --bark:#4A3B32;


    --border:#C9BCA8;
    --border-dark:#24201D;
    --border-light:rgba(36, 32, 29, 0.12);


    /* Geometry — Swiss International Rigor (Zero Radius) */
    --radius-none:0px;
    --radius:0px;


    /* Typography Stacks */
    --fake-f4f:'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fake-9e7:'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --fake-a43:'Space Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;


    /* Fluid Type Scale via clamp() */
    --step--1:clamp(0.75rem, 0.72rem + 0.15vw, 0.85rem);
    --fake-29f:clamp(0.9375rem, 0.89rem + 0.25vw, 1.0625rem);
    --fake-2c9:clamp(1.125rem, 1.05rem + 0.4vw, 1.35rem);
    --fake-496:clamp(1.375rem, 1.25rem + 0.65vw, 1.75rem);
    --fake-155:clamp(1.75rem, 1.55rem + 1.0vw, 2.35rem);
    --fake-140:clamp(2.2rem, 1.9rem + 1.6vw, 3.15rem);
    --fake-67e:clamp(2.75rem, 2.3rem + 2.4vw, 4.25rem);
    --step-hero:clamp(3.2rem, 2.6rem + 4.2vw, 6.5rem);


    --space-3xs:0.25rem;
    --space-2xs:0.5rem;
    --space-xs:0.75rem;
    --space-s:1rem;
    --space-m:1.5rem;
    --space-l:2rem;
    --space-xl:3rem;
    --space-2xl:4.5rem;
    --space-3xl:6.5rem;


    /* Container & Grid widths */
    --site-max:1360px;
    --site-narrow:860px;
    --site-gutter:clamp(0.75rem, 0.4rem + 1.5vw, 2.5rem);


    --ease-out-lux:cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-lux:cubic-bezier(0.7, 0, 0.84, 0);
    --ease-sharp:cubic-bezier(0.2, 0, 0, 1);
    --dur-fast:160ms;
    --dur-med:280ms;
    --dur-slow:480ms;


    /* Persistent view transition names */
    --header-h:72px;
}


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


html {
    font-size:100%;
    background-color:var(--ground);
    color:var(--ink);
    font-family:var(--fake-9e7);
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    text-size-adjust:100%;
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--header-h) + 1.5rem);
}


body {
    min-height:100vh;
    background-color:var(--ground);
    color:var(--ink);
    line-height:1.55;
    font-size:var(--fake-29f);
    font-weight:400;
    overflow-x:hidden;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}


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


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


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


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


ul, ol {
    list-style:none;
}


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


/* View Transition Keyframes and Bindings */
::view-transition-group(root) {
    animation-duration:320ms;
    animation-timing-function:var(--ease-out-lux);
}


::view-transition-old(root) {
    animation:200ms cubic-bezier(0.4, 0, 1, 1) both fade-out;
}


::view-transition-new(root) {
    animation:320ms cubic-bezier(0, 0, 0.2, 1) both fade-in;
}


@keyframes fade-out {
    from { opacity: 1; }
    to { opacity: 0; }
}


@keyframes fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}


.brand {
    view-transition-name:site-brand;
}


.site-header {
    view-transition-name:site-header;
}


/* Base Typography & Swiss International Discipline */
h1, h2, h3, h4, h5, h6 {
    font-family:var(--fake-f4f);
    color:var(--ink);
    font-weight:600;
    line-height:1.1;
    letter-spacing:-0.025em;
    text-wrap:balance;
}


h1 {
    font-size:var(--fake-67e);
    font-weight:700;
}


h2 {
    font-size:var(--fake-140);

    letter-spacing:-0.02em;
}


h3 {
    font-size:var(--fake-496);
    line-height:1.25;
}


h4 {
    font-size:var(--fake-2c9);
    line-height:1.3;
}


p {
    max-width:66ch;
    margin-bottom:var(--space-s);
    color:var(--ink);
}


p.lead {
    font-size:var(--fake-2c9);
    line-height:1.45;
    color:var(--ink);
    font-weight:400;
}


p:last-child {
    margin-bottom:0;
}


small, .text-small {
    font-size:var(--step--1);
    line-height:1.4;
}


.text-mono {
    font-family:var(--fake-a43);
    font-size:0.9em;
    letter-spacing:-0.01em;
}


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


.text-clay {
    color:var(--clay);
}


.text-ochre {
    color:var(--ochre);
}


.text-forest {
    color:var(--ink-forest);
}


/* Layout Primitives */
.wrap {
    width:100%;
    max-width:var(--site-max);
    margin-inline:auto;
    padding-inline:var(--site-gutter);
}


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


.grid-cols-2 {
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:var(--space-l);
}


.grid-cols-3 {
    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:var(--space-l);
}


.grid-cols-4 {
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:var(--space-m);
}


@media (max-width: 960px) {
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }
}


@media (max-width: 640px) {
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns:1fr;
    }
}


@media (max-width: 480px) {
    .btn {
        width:100%;
    }
}


/* Skip link */
.skip-link {
    position:absolute;
    top:var(--space-xs);
    left:var(--space-xs);
    z-index:9999;
    padding:0.65rem 1.25rem;
    background-color:var(--ink);

    color:var(--ground);
    font-family:var(--fake-a43);
    font-size:var(--step--1);
    font-weight:700;
    text-decoration:none;

    transform:translateY(-180%);
    transition:transform var(--dur-fast) var(--ease-out-lux);
    border:1px solid var(--ground);
}


.skip-link:focus-visible {
    transform:translateY(0);
    outline:2px solid var(--clay);
    outline-offset:3px;
}


/* Icons */
.icon {
    width:1.15em;
    height:1.15em;
    display:inline-block;
    vertical-align:-0.15em;
    fill:currentColor;
    flex-shrink:0;
}


.icon-s {
    width:0.9em;
    height:0.9em;
}


.icon-m {
    width:1.35em;
    height:1.35em;
}


.icon-l {
    width:1.75em;
    height:1.75em;
}


/* Visual Utilities */
.visually-hidden {
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    padding:0 !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0, 0, 0, 0) !important;
    white-space:nowrap !important;
    border:0 !important;
}


.rule-solid {
    border:0;
    border-top:1px solid var(--border-dark);
    margin-block:var(--space-l);
}


.rule-faint {
    border:0;
    border-top:1px solid var(--border);
    margin-block:var(--space-m);
}


/* Accessible reduced-motion adaptations */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration:0.01ms !important;
        animation-iteration-count:1 !important;
        transition-duration:0.01ms !important;
        scroll-behavior:auto !important;
    }
    ::view-transition-group(root),
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation:none !important;
    }
}