/* nuku.nz. Values mirror launch/03-brand/tokens.ts (palette.dark, glass, ambient, type, space); change them there first.
   Brief: launch/05-web-and-legal/design-brief.md. No third-party requests: fonts are served from this site. */

@font-face { font-family: 'Barlow Condensed'; font-weight: 700; font-display: swap; src: url('fonts/BarlowCondensed_700Bold.ttf') format('truetype'); }
@font-face { font-family: 'Barlow'; font-weight: 400; font-display: swap; src: url('fonts/Barlow_400Regular.ttf') format('truetype'); }
@font-face { font-family: 'Barlow'; font-weight: 500; font-display: swap; src: url('fonts/Barlow_500Medium.ttf') format('truetype'); }

:root {
  color-scheme: dark;
  --base: #08080A;
  --text: #F3F1EC;
  --text-secondary: #B8B8C0;
  --on-fill: #141416;
  --glass: rgba(255, 255, 255, 0.07);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-top: rgba(255, 255, 255, 0.20);
  --line: rgba(255, 255, 255, 0.10);
  --logo: #FF6A3D; /* wordmark only, never UI */
  --glow-blue: #6EA8FF;
  --glow-violet: #A78BFA;
  --glow-teal: #4FD1C5;
  --radius-card: 24px;
  --radius-pill: 999px;
  --space-xs: 4px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-xxl: 32px; --space-huge: 48px; --space-giant: 96px;
  --condensed: 'Barlow Condensed', 'Arial Narrow', sans-serif;
  --body: 'Barlow', system-ui, sans-serif;
  --measure: 68ch;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--base);
  color: var(--text);
  font: 400 1.0625rem/1.6 var(--body);
  display: flex;
  flex-direction: column;
}

/* Ambient glow (tokens: blue top right, violet mid left, teal bottom right, 16%). */
.ambient { position: fixed; inset: -10%; z-index: -1; pointer-events: none; opacity: 0.16; }
.ambient span { position: absolute; border-radius: 50%; filter: blur(60px); }
.ambient .blue { width: 70vmax; height: 70vmax; right: -25vmax; top: -30vmax; background: radial-gradient(closest-side, var(--glow-blue), transparent); animation: drift 38s ease-in-out infinite alternate; }
.ambient .violet { width: 55vmax; height: 55vmax; left: -28vmax; top: 25vh; background: radial-gradient(closest-side, var(--glow-violet), transparent); animation: drift 46s ease-in-out infinite alternate-reverse; }
.ambient .teal { width: 62vmax; height: 62vmax; right: -30vmax; bottom: -30vmax; background: radial-gradient(closest-side, var(--glow-teal), transparent); animation: drift 52s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate3d(4vmax, 3vmax, 0); } }
@media (prefers-reduced-motion: reduce) { .ambient span { animation: none; } }

a { color: var(--text); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 4px; }
.skip { position: absolute; left: -999px; top: 0; padding: var(--space-sm) var(--space-lg); background: var(--text); color: var(--on-fill); }
.skip:focus { left: var(--space-lg); top: var(--space-lg); }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--space-xl); }

/* Header */
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-lg); padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.wordmark img { display: block; height: 32px; width: auto; }
.looks { margin-top: var(--space-huge); }
.looks > p { color: var(--text-secondary, #B8B8C0); max-width: 52ch; }
.look-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg, 16px); margin-top: var(--space-lg, 16px); }
.look-row img { width: 100%; height: auto; border-radius: 28px; display: block; }
@media (max-width: 720px) { .look-row { grid-template-columns: repeat(2, 1fr); } }
.wordmark { font: 700 2rem/1 var(--condensed); color: var(--logo); text-decoration: none; letter-spacing: 0.01em; }
.site-nav { display: flex; gap: var(--space-xs); flex-wrap: wrap; }
.site-nav a { font: 500 0.9375rem/1 var(--body); color: var(--text-secondary); text-decoration: none; padding: 14px var(--space-md); border-radius: var(--radius-pill); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--text); background: var(--glass); }

main { flex: 1; }

/* Glass */
.glass {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-top-color: var(--glass-top);
  border-radius: var(--radius-card);
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

/* Home */
.hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); align-items: center; gap: var(--space-huge); padding: var(--space-huge) 0 var(--space-giant); }
.hero h1 { font: 700 clamp(4.5rem, 13vw, 10.5rem)/0.86 var(--condensed); text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 var(--space-xxl); }
.hero .line { font: 500 1.25rem/1.4 var(--body); color: var(--text); margin: calc(-1 * var(--space-lg)) 0 var(--space-xl); }
.hero .ask { margin: var(--space-xl) 0 0; color: var(--text-secondary); }
.hero .lede { font-size: 1.25rem; color: var(--text-secondary); max-width: 30ch; margin: 0 0 var(--space-xxl); }
.hero .lede strong { color: var(--text); font-weight: 500; }
.pill { display: inline-flex; align-items: center; gap: var(--space-sm); font: 700 1.125rem/1 var(--condensed); text-transform: uppercase; letter-spacing: 0.08em; padding: 16px 22px; border-radius: var(--radius-pill); }
.phone { justify-self: center; width: min(100%, 320px); aspect-ratio: 660 / 1434; padding: 10px; border-radius: 52px; transform: rotate(3deg); }
.phone img { display: block; width: 100%; height: 100%; border-radius: 42px; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); padding-bottom: var(--space-giant); }
.facts div { padding: var(--space-xl); }
.facts h2 { font: 700 1.5rem/1.1 var(--condensed); text-transform: uppercase; letter-spacing: 0.02em; margin: 0 0 var(--space-sm); }
.facts p { margin: 0; color: var(--text-secondary); }

/* Reading pages */
.page { max-width: calc(var(--measure) + 2 * var(--space-xxl)); margin: 0 auto; padding: var(--space-huge) 0 var(--space-giant); }
.page h1 { font: 700 clamp(3.5rem, 9vw, 6rem)/0.9 var(--condensed); text-transform: uppercase; margin: 0 0 var(--space-xl); }
.page .meta { color: var(--text-secondary); margin: 0 0 var(--space-xxl); }
.page section.intro { margin-bottom: var(--space-xxl); }
.page section.intro p { font-size: 1.1875rem; }
.page section.glass { padding: var(--space-xxl); margin-bottom: var(--space-xxl); }
.page section.plain { padding: var(--space-xxl) 0 0; margin-top: var(--space-xxl); border-top: 1px solid var(--line); }
.page a { overflow-wrap: anywhere; }
.page h3[id] { scroll-margin-top: var(--space-xxl); }
.page h2 { font: 700 1.5rem/1.15 var(--condensed); text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 var(--space-md); }
.page h3 { font: 500 1.125rem/1.4 var(--body); margin: var(--space-xl) 0 var(--space-sm); }
.page section > :first-child { margin-top: 0; }
.page p, .page li { color: var(--text-secondary); max-width: var(--measure); }
.page p:last-child, .page ul:last-child { margin-bottom: 0; }
.page strong { color: var(--text); font-weight: 500; }
.page ul { padding-left: 1.2em; }
.page li + li { margin-top: var(--space-sm); }

/* Footer */
.site-footer { border-top: 1px solid var(--line); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-lg) var(--space-xxl); justify-content: space-between; padding-top: var(--space-xl); padding-bottom: var(--space-xxl); color: var(--text-secondary); font-size: 0.9375rem; }
.site-footer a { color: var(--text-secondary); }
.site-footer a:hover { color: var(--text); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; padding-top: var(--space-xl); gap: var(--space-huge); }
  .phone { transform: none; width: min(78%, 300px); }
  .facts { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .wrap { padding: 0 var(--space-lg); }
  .site-header .wrap { flex-direction: column; align-items: flex-start; }
  .page section { padding: var(--space-xl); }
}