/* MAANUKA — site layer. The page-level compositions, expressed as classes. Everything here
   resolves to the semantic token roles; no raw hexes except the one the design itself names
   (the nite link-hover ink, which has no token).

   Load order, and it matters:
     tokens/colors → typography → spacing → ai → semantic → theme
     components.css → ai-components.css        (the design-system component layer, verbatim)
     site.css                                  (this file, last)

   tokens/ai.css must load BEFORE tokens/theme.css. Both declare at the same specificity
   (:root vs [data-theme="nite"]), so ai.css last would beat the nite block and ship day's
   glass and day's verification hues onto the dark ground.

   Scope: the site is two pages — a hero-only landing and the contact page — plus a 404.
   Rules for the retired sections (services, approach, proof, case notes) were stripped on
   2026-08-27; they are recoverable from git history alongside the markup they styled. */

/* — page shell — */
html,body{margin:0}
body{background:var(--surface-page);color:var(--text-body);font-family:var(--font-body)}
.page{min-height:100vh;display:flex;flex-direction:column}
.page>main{flex:1}
a{color:var(--text-link);text-decoration:none}
a:hover{color:var(--accent-fill-active)}
[data-theme="nite"] a:hover{color:#FAD8CC}
.eyebrow{margin:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;padding:10px 16px;background:var(--accent-fill);color:var(--text-on-accent);font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase}
.skip-link:focus{left:0;color:var(--text-on-accent)}

/* — nav —
   The theme toggle sits OUTSIDE .nav-links on purpose: .nav-links is what collapses on
   narrow viewports, and the ground control has to stay reachable when it is closed. On
   desktop the 24px flex gap puts it exactly where the design has it. */
.nav{position:relative;z-index:20}
/* .nav a:not(.btn) is (0,2,1) and would win over a bare .nav-brand, dropping the wordmark to
   quiet ink; match its specificity to keep the brand at full strength. */
.nav a.nav-brand,.nav a.nav-brand:hover{color:var(--color-text)}
.nav-brand-text{display:flex;flex-direction:column}
.nav-brand-text .tagline{font-size:9px}
.nav-links{display:flex;align-items:center;gap:24px}
.nav-toggle{display:none;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid var(--border-hairline);border-radius:var(--radius-control);background:transparent;color:var(--text-quiet);cursor:pointer}
.nav-toggle:hover{background:var(--surface-hover)}

/* — footer — */
.site-footer{padding:32px 48px;border-top:1px solid var(--border-hairline);display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.site-footer-links{display:flex;align-items:center;gap:20px}
.footer-link,.footer-copy{font-family:var(--font-mono);font-size:10px;letter-spacing:.06em}
.footer-copy{color:var(--text-faint)}

/* — shared — */
.actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn-nav{font-size:13px}
.mono-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}

/* — photography band — the content wrapper is pinned to nite in both grounds because the
     scrim is dark; data-bare keeps the photo visible behind it. — */
.photo-band{border-radius:0}
.photo-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo-content-tight{position:relative;padding:92px 48px}

/* ————————————————— Landing (hero) ————————————————— */
.hero{padding:112px 48px 92px}
.hero-inner{max-width:760px;margin:0 auto;text-align:center;display:flex;flex-direction:column;gap:20px;align-items:center}
.hero-title{font-family:var(--font-heading);font-weight:600;font-size:58px;line-height:1.06;letter-spacing:-.018em;margin:0;text-wrap:balance}
.hero-sub{margin:0;font-size:17px;line-height:1.7;color:var(--text-muted);max-width:560px;text-wrap:pretty}
.hero-actions{display:flex;gap:12px;margin-top:10px;flex-wrap:wrap;justify-content:center}

/* ————————————————— Centred message block (404) ————————————————— */
.cta{padding:96px 48px}
.cta-inner{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:18px;align-items:center;text-align:center}
.cta-title{font-family:var(--font-heading);font-weight:600;font-size:34px;line-height:1.15;letter-spacing:-.01em;margin:0}
.cta-sub{margin:0;font-size:16px;line-height:1.7;color:var(--text-muted);max-width:520px;text-wrap:pretty}
.cta-inner .btn{margin-top:6px}

/* ————————————————— Get in touch ————————————————— */
.git-hero-inner{max-width:720px;margin:0 auto;display:flex;flex-direction:column;gap:14px}
.git-title{font-family:var(--font-heading);font-weight:600;font-size:48px;line-height:1.08;letter-spacing:-.016em;margin:0;text-wrap:balance}
.git-hero-sub{margin:0;font-size:16px;line-height:1.7;color:var(--text-quiet);max-width:520px;text-wrap:pretty}
.git-body{padding:80px 48px}
.git-grid{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:minmax(300px,1.35fr) minmax(240px,1fr);gap:64px;align-items:start}
.git-form{display:flex;flex-direction:column;gap:22px}
.field-group{display:flex;flex-direction:column;gap:12px}
.tag-row{display:flex;flex-wrap:wrap;gap:8px}

/* Topic tags. At rest they are exactly the DS accent chip the design shows; selection adds a
   filled state so a multi-select is actually readable as one. Not colour alone — the checkmark
   carries it too, and aria-pressed carries it to assistive tech. */
.tag-toggle{border:0;cursor:pointer;font-size:10px;gap:5px;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.tag-toggle:hover{background:var(--accent-fill-hover);color:var(--text-on-accent)}
.tag-toggle[aria-pressed="true"]{background:var(--accent-fill);color:var(--text-on-accent)}
.tag-toggle .tick{width:0;overflow:hidden;transition:width var(--dur) var(--ease)}
.tag-toggle[aria-pressed="true"] .tick{width:9px}

.form-actions{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.sent-note{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.form-error{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-critical)}
.field-error{display:block;margin-top:6px;font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-critical)}
/* The slot is always in the DOM so screen readers have a stable live region to announce into,
   but an empty block still costs its margin — which made the validated fields taller than the
   optional one before a single error existed. */
.field-error:empty{display:none}
.input[aria-invalid="true"]{border-color:var(--color-critical)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.git-aside{display:flex;flex-direction:column;gap:28px}
.aside-block{display:flex;flex-direction:column;gap:10px}
.aside-text{margin:0;font-size:15px;line-height:1.65;color:var(--text-muted);text-wrap:pretty}

/* ————————————————— Reflow —————————————————
   The designs are desktop-only. Nothing below redesigns anything: grids stack, the nav
   collapses, and the display type steps down so a 58px headline does not run off a 375px
   screen. Desktop values above are untouched. */
@media (max-width:900px){
  .git-grid{grid-template-columns:1fr;gap:44px}
}
@media (max-width:820px){
  .nav{flex-wrap:wrap;padding:16px 24px}
  .nav-toggle{display:inline-flex}
  .nav-links{display:none;order:3;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:16px;padding:14px 0 4px}
  .nav[data-open="true"] .nav-links{display:flex}
}
@media (max-width:700px){
  .hero{padding:72px 24px 64px}
  .hero-title{font-size:38px}
  .hero-sub{font-size:16px}
  .cta,.git-body{padding-left:24px;padding-right:24px}
  .cta{padding-top:64px;padding-bottom:64px}
  .git-body{padding-top:56px;padding-bottom:56px}
  .photo-content-tight{padding:64px 24px}
  .cta-title{font-size:28px}
  .git-title{font-size:34px}
  .site-footer{padding:24px}
}
/* Below ~520px the nav does not fit as brand + worded toggle + menu button, and wraps the
   button onto a second row. Dropping the words leaves two icon buttons and it fits again.
   .ground-label is created by site.js, so it never appears in the markup. */
@media (max-width:520px){
  [data-ground-toggle] .ground-label{display:none}
  [data-ground-toggle] button{padding:6px 9px}
}
@media (max-width:420px){
  .hero-title{font-size:32px}
  .git-title{font-size:29px}
  .hero-actions{flex-direction:column;align-self:stretch}
  .hero-actions .btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}