@import "_tokens.css";
@import "sections/_shared.css";
@import "_header-footer.css";
@import "_projects.css";

/* Self-hosted brand fonts (drop woff2 into assets/fonts/; graceful fallback until then) */
@font-face { font-family: "Konfus"; src: url("../fonts/Konfus-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Arial Nova"; src: local("Arial Nova"), url("../fonts/arial-nova.woff2") format("woff2"); font-weight: 300; font-display: swap; }
@font-face { font-family: "Arial Nova"; src: local("Arial Nova"), url("../fonts/arial-nova-regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Arial Nova"; src: local("Arial Nova Bold"), local("Arial Nova"), url("../fonts/arial-nova-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; }
body { margin: 0; font-family: var(--font-body); font-weight: 300; font-size: var(--text-body-lg); line-height: var(--lh-body); color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; color: var(--c-heading); margin: 0 0 0.3em; }
h1 { font-size: var(--text-h1); line-height: var(--lh-hero); }
h2 { font-size: var(--text-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--text-h3); line-height: var(--lh-quote); }
h4, h5, h6 { font-family: var(--font-body); color: var(--c-heading); margin: 0 0 0.4em; line-height: var(--lh-snug); }
h4 { font-size: var(--text-h4); font-weight: 300; }
h5 { font-size: var(--text-h5); font-weight: 700; }
h6 { font-size: var(--text-h6); font-weight: 400; }
.eyebrow { font-family: var(--font-body); font-size: var(--text-h7); line-height: var(--lh-snug); text-transform: uppercase; letter-spacing: 0.08em; display: inline-block; }
p { margin: 0 0 1em; }
.body-sm { font-size: var(--text-body-sm); }
a { color: var(--c-link); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
/* 12-column grid primitive. Compose with .container: <div class="container grid">.
   Sections place children with grid-column spans in their own _section-*.css. */
.grid { display: grid; grid-template-columns: repeat(var(--grid-columns, 12), 1fr); gap: var(--grid-gap); }
/* Phosphor icons inherit colour (currentColor) + size (1em). Nudge inline icons onto the text baseline. */
.ph { vertical-align: -0.15em; line-height: 1; }
/* Page-load logo intro overlay (plays once per session; markup + logic in header.php). */
.intro { position: fixed; inset: 0; width: 100vw; z-index: 9999; display: grid; place-items: center; background: var(--color-water); transition: opacity .6s ease, visibility .6s ease; }
.intro.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
.intro__video { width: min(55vw, 520px); height: auto; display: block; }
@media (prefers-reduced-motion: reduce) { .intro { display: none; } }
.ttw-main { padding-block: var(--section-y); }
.site-footer { padding-block: var(--gutter); }
.btn { display: inline-block; padding: 0.9em 1.8em; border-radius: var(--radius); background: var(--color-clay); color: var(--color-white); font-family: var(--font-body); font-weight: 400; font-size: var(--text-body-sm); text-decoration: none; transition: opacity 0.2s; }
.btn:hover { opacity: 0.9; text-decoration: none; }
.section--water { background: var(--color-water); color: var(--c-inverse); }
.section--land { background: var(--color-land); color: var(--c-inverse); }
.section--clay { background: var(--color-clay); color: var(--c-inverse); }
.section--skyline { background: var(--color-skyline); color: var(--color-steel); }
.section--water h1, .section--water h2, .section--water h3, .section--land h1, .section--land h2, .section--land h3, .section--clay h1, .section--clay h2, .section--clay h3 { color: var(--c-inverse); }