/* ============================================================
   dsgn.nz — local static copy
   Design tokens extracted from computed styles on the live
   Squarespace site (2026-08-19). See README.md for details.

   The real site uses two Adobe Fonts (Typekit) families —
   "Calder Dark" (headings/nav, a rounded geometric display face —
   soft terminals, not sharp/blocky) and "Proxima Nova" (body).
   Neither is embedded/shipped here — no font files were copied.
   Both stacks name the real font FIRST (picked up automatically
   if installed locally, e.g. via Adobe Fonts desktop sync — Dave
   already has Proxima Nova installed). The heading stack then
   falls to Varela Round — an open-license (SIL OFL) Google Font,
   self-hosted below, chosen by Dave as the closest open match to
   Calder Dark's rounded geometric character (Chivo and Futura
   were both tried first and rejected). Body text falls straight
   to plain system fonts. This is preview-only — the new design
   isn't meant to use any of these fonts going forward.
   ============================================================ */

@font-face {
  font-family: 'Varela Round';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/VarelaRound-Regular.woff2') format('woff2');
}

:root {
  --bg: #fbfaf9;
  --text: #333333;
  --muted: #6e6e6e;
  --accent: #c02126;

  --font-heading: 'Calder Dark', 'calder-dark', 'Varela Round', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Proxima Nova', 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --container-max: 1500px;
  --container-pad: 64px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

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

@media (max-width: 900px) {
  :root { --container-pad: 24px; }
}

/* ---------- header / nav ---------- */

header.site-header {
  padding: 40px 0 0;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px 32px;
}

.site-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 20px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text);
}

nav.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

nav.site-nav a {
  font-size: 14px;
  letter-spacing: 0.34px;
  text-transform: uppercase;
  color: var(--muted);
}

nav.site-nav a.current {
  color: var(--accent);
}

.nav-toggle-input { display: none; }
.nav-toggle-label { display: none; }

@media (max-width: 700px) {
  .site-header .container { position: relative; }

  .nav-toggle-label {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 28px;
    height: 22px;
    cursor: pointer;
    z-index: 20;
  }
  .nav-toggle-label span {
    display: block;
    height: 2px;
    background: var(--text);
  }

  nav.site-nav {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg);
    flex-direction: column;
    gap: 28px;
    padding: 100px var(--container-pad) 40px;
    z-index: 10;
    overflow-y: auto;
  }
  nav.site-nav a { font-size: 20px; }

  .nav-toggle-input:checked ~ .container nav.site-nav {
    display: flex;
  }
}

/* ---------- home hero ---------- */

main { padding: 88px 0 120px; }

h1.hero {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 72px;
  line-height: 1.3;
  letter-spacing: -1.44px;
  text-transform: uppercase;
  margin: 0 0 56px;
}

.intro-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-bottom: 96px;
}

.intro-columns p { margin: 0 0 20px; }
.intro-columns p:last-child { margin-bottom: 0; }

@media (max-width: 800px) {
  .intro-columns { grid-template-columns: 1fr; }
  h1.hero { font-size: 56px; }
}

@media (max-width: 480px) {
  h1.hero { font-size: 48px; }
}

/* ---------- home project grid ---------- */

.project-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px 34px;
}

.project-tile {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #fff;
}

.project-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.project-tile:hover img { transform: scale(1.03); }
.project-tile:hover { text-decoration: none; }

@media (max-width: 800px) {
  .project-grid { grid-template-columns: 1fr; }
}

/* ---------- case study pages ---------- */

.case-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  letter-spacing: -0.6px;
  text-transform: uppercase;
  margin: 0 0 8px;
}

.case-tagline {
  font-size: 22px;
  color: var(--muted);
  margin: 0 0 48px;
  max-width: 700px;
}

.case-hero {
  margin: 0 0 48px;
}

.case-hero img {
  width: 100%;
  height: auto;
  display: block;
}

.case-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #e5e2df;
}

.case-meta p { margin: 0; }

.case-intro {
  max-width: 800px;
  margin: 0 0 64px;
}

.case-intro p { margin: 0 0 20px; }

.case-block {
  margin: 0 0 72px;
}

.case-block img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 16px;
}

.case-block .caption {
  color: var(--muted);
  font-size: 15px;
  max-width: 700px;
  margin: 0;
}

@media (max-width: 800px) {
  .case-meta { grid-template-columns: 1fr; }
  .case-title { font-size: 40px; }
}

@media (max-width: 480px) {
  .case-title { font-size: 52px; }
  .case-tagline { font-size: 26px; }
}

/* ---------- more / gallery page ---------- */

.gallery-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 48px;
  margin: 0 0 48px;
  text-transform: lowercase;
}

.gallery-grid {
  columns: 3 260px;
  column-gap: 20px;
}

.gallery-grid img {
  width: 100%;
  height: auto;
  display: block;
  margin: 0 0 20px;
  break-inside: avoid;
}

@media (max-width: 800px) {
  .gallery-grid { columns: 2 180px; }
}

@media (max-width: 480px) {
  .gallery-grid { columns: 1; }
}

/* ---------- footer ---------- */

footer.site-footer {
  padding: 40px 0 60px;
  font-size: 14px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

footer.site-footer a { color: var(--accent); }