/* ==========================================================
   Design system. Loaded last on every page so it wins over the
   older page styles. Two typefaces, eight sizes, three weights.
   ========================================================== */
:root {
  --serif: 'Newsreader', Georgia, 'Times New Roman', serif;
  --sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* type scale */
  --fs-display: clamp(52px, 6.2vw, 88px);   /* home name, project titles */
  --fs-h1: clamp(30px, 3.4vw, 40px);        /* About intro heading */
  --fs-h2: clamp(26px, 2.6vw, 32px);        /* section headings */
  --fs-h3: 24px;                            /* tile titles, footer name */
  --fs-lead: clamp(20px, 2vw, 24px);        /* taglines */
  --fs-sub: 18px;                           /* subheads (DM Sans 600) */
  --fs-body: 16px;                          /* all reading text */
  --fs-small: 14px;                         /* nav, buttons, secondary lines */
  --fs-label: 12px;                         /* caps labels */
  --fs-rail: 11px;                          /* section rail only */

  /* weights: 400 read, 500 UI + labels, 600 subheads + bold */
  --w-regular: 400; --w-medium: 500; --w-semibold: 600;

  /* colour */
  --ink: #26262b; --mute: #6b6b73; --soft: #8b8b96; --accent: #c9545c; --line: #eee9e9;

  /* radius + spacing */
  --radius: 4px;
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px;
}

/* ---------- Label: the only all-caps style ---------- */
.tile-date, .tile-award, .eyebrow, .free-time .eyebrow, .exp-date, .section-label, body.pj .section-label,
.meta-label, body.pj .meta-label, .pj-back, .staff-hint, .intro-ind .lab, .sig-tip, body.pj .sig-tip {
  font-family: var(--sans) !important;
  font-size: var(--fs-label) !important;
  font-weight: var(--w-medium) !important;
  line-height: 1.4 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}
.pj-rail a { font: var(--w-medium) var(--fs-rail)/17px var(--sans) !important; letter-spacing: .12em !important; text-transform: uppercase; }
.tile-award { opacity: .8; }

/* ---------- Small: nav, buttons, secondary lines (never caps) ---------- */
.nav-links, .pj-links { font-size: var(--fs-small) !important; }
.nav-links > a, .pj-links > a { text-transform: none; }
.connect-btn, .pj-connect, .prototype-button, .blue-prototype-button, .red-prototype-button, .pbtn {
  font-family: var(--sans) !important; font-size: var(--fs-small) !important; font-weight: var(--w-medium) !important;
  letter-spacing: .01em !important; text-transform: none !important;
}
.hero-now, .exp-role, .footer-note, .footer-local, .sig { font-size: var(--fs-small) !important; }
.vtag { font: var(--w-medium) var(--fs-small)/1 var(--sans) !important; }

/* ---------- Home ---------- */
.hero h1 { font-size: var(--fs-display) !important; line-height: 1 !important; letter-spacing: -.01em !important; }
.hero-statement { font-size: var(--fs-lead) !important; line-height: 1.35 !important; max-width: 640px !important; margin-top: var(--s5) !important; }
.hero-now { margin-top: var(--s4) !important; color: var(--mute); }
.tile-title, .tile--small .tile-title { font-size: var(--fs-h3) !important; line-height: 1.2 !important; }
.tile-head { margin-top: var(--s4) !important; }
.tile-award { margin-top: 6px !important; }
.tile-desc { font-size: var(--fs-body) !important; line-height: 1.55 !important; margin-top: 6px !important; }
.work-col { gap: var(--s7) !important; }
.tile-media, .tile-media::after { border-radius: var(--radius) !important; }

/* ---------- Footer (all pages) ---------- */
.footer-name, body.pj .footer-name { font-size: var(--fs-h3) !important; }
.footer-brand img, body.pj .footer-brand img { width: 30px !important; }
.footer-brand, body.pj .footer-brand { gap: 12px !important; }
.footer-email, body.pj .footer-email { font-size: var(--fs-sub) !important; }
.footer-note, .footer-local, .sig, body.pj .footer-note, body.pj .footer-local, body.pj .sig { font-size: var(--fs-small) !important; }

/* ---------- About ---------- */
.about-copy h1 { font-size: var(--fs-h1) !important; line-height: 1.15 !important; }
.about-copy p:not(.eyebrow) { font-size: var(--fs-body) !important; line-height: 1.65 !important; }
.experience h2 { font-size: var(--fs-h2) !important; line-height: 1.2 !important; }
.exp-company { font-size: var(--fs-body) !important; font-weight: var(--w-medium) !important; }

/* ---------- Project pages ---------- */
body.pj .project-page-title { font-size: var(--fs-display) !important; line-height: 1 !important; }
body.pj .project-tagline { font-size: var(--fs-lead) !important; line-height: 1.35 !important; }
body.pj .meta-value { font-size: var(--fs-body) !important; }
body.pj .project-page > section h2, body.pj .project-page h2 { font-family: var(--serif) !important; font-weight: var(--w-regular) !important; font-size: var(--fs-h2) !important; line-height: 1.2 !important; }
body.pj .project-page h3 { font-family: var(--sans) !important; font-size: var(--fs-sub) !important; font-weight: var(--w-semibold) !important; line-height: 1.4 !important; }
body.pj .project-page h4 { font-family: var(--sans) !important; font-size: var(--fs-body) !important; font-weight: var(--w-semibold) !important; }
body.pj .project-page > section p, body.pj .project-page > section li { font-size: var(--fs-body) !important; line-height: 1.65 !important; color: var(--ink); }
body.pj .project-page strong, body.pj .project-page b { font-weight: var(--w-semibold) !important; }
body.pj .project-hero-image, body.pj .arycs-hero { border-radius: var(--radius) !important; }

/* ---------- Arycs page extras ---------- */
body.pj .take b { font: var(--w-medium) var(--fs-label)/1.4 var(--sans) !important; letter-spacing: .12em !important; padding-top: 4px; }
body.pj .reach { font-size: var(--fs-small) !important; font-weight: var(--w-medium) !important; }
body.pj .project-page > section p.thanks, body.pj .thanks { font-family: var(--serif) !important; font-size: var(--fs-lead) !important; line-height: 1.5 !important; }

/* smaller name needs less air above it */
.hero-copy { padding-top: clamp(80px, 12vw, 170px) !important; }

/* nav logo: scaled to sit with the 14px nav links (was 56px) */
.nav-logo, .pj-logo { width: 36px !important; height: 36px !important; object-fit: contain; }

/* lowercase voice for the name and nav (HTML stays properly capitalised for titles, search and screen readers) */
.hero h1, .nav-links > a, .pj-links > a, .footer-brand, .footer-name, .sig { text-transform: lowercase; }