/* ============================================================
   DESIGN TOKENS
   ============================================================ */
:root {
  /* ---------------------------------------------------------
     PRIMITIVES — raw values; do not reference directly in rules
     --------------------------------------------------------- */
  /* Neutral scale */
  --gray-0:   #ffffff;
  --gray-50:  #f4f4f4;
  --gray-100: #ebebeb;
  --gray-200: #e8e8e8;
  --gray-400: #767676;   /* ~4.6:1 on white — meets WCAG AA for normal text */
  --gray-600: #6b6b6b;
  --gray-950: #111111;   /* ink */
  /* Warm hairline */
  --warm-200: #e8e4de;
  /* Brand — top strip gradient */
  --brand-sky:        #88ccf7;
  --brand-periwinkle: #a9b4f0;
  --brand-lilac:      #c6a2ea;
  --brand-magenta:    #f06ec8;
  --brand-red:        #fb3320;

  /* ---------------------------------------------------------
     SEMANTIC — role tokens; rules reference these
     --------------------------------------------------------- */
  --color-bg:            var(--gray-0);
  --color-surface:       var(--gray-50);
  --color-surface-hover: var(--gray-100);
  --color-text:          var(--gray-950);   /* ink: headings, labels, hero, links, brand */
  --color-text-muted:    var(--gray-600);   /* body copy */
  --color-text-subtle:   var(--gray-400);   /* faint / meta */
  --color-border:        var(--gray-200);
  --color-separator:     var(--warm-200);   /* title & nav slashes */
  --color-scrim:         rgba(17, 17, 17, 0.78);

  /* Decorative gradient (sticky top bar) */
  --gradient-bar: linear-gradient(
    90deg,
    var(--brand-sky) 0%,
    var(--brand-periwinkle) 24%,
    var(--brand-lilac) 48%,
    var(--brand-magenta) 72%,
    var(--brand-red) 100%
  );

  /* --- Font families --- */
  --font-primary: "Miranda Sans", "Helvetica Neue", Arial, sans-serif;
  --font-secondary: "Geist", system-ui, -apple-system, sans-serif;

  /* --- Type scale --- */
  --text-2xs: 0.6875rem;  /* 11px */
  --text-xs:  0.8125rem;  /* 13px */
  --text-sm:  0.875rem;   /* 14px — body base */
  --text-md:  1rem;       /* 16px */
  --text-lg:  1.125rem;   /* 18px */
  --text-xl:  1.5rem;     /* 24px */
  --text-2xl: 2rem;       /* 32px */
  --text-3xl: 3rem;       /* 48px */
  --text-4xl: 4rem;       /* 64px */

  /* --- Line height --- */
  --leading-none: 1;
  --leading-tight: 1.05;
  --leading-snug: 1.3;
  --leading-normal: 1.45;
  --leading-relaxed: 1.6;

  /* --- Font weight --- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Letter spacing --- */
  --tracking-tight: -0.02em;
  --tracking-normal: 0em;
  --tracking-wide: 0.12em;

  /* --- Spacing (4px base; token number = px / 4) --- */
  --space-0: 0;
  --space-1: 0.25rem;   /* 4px  */
  --space-2: 0.5rem;    /* 8px  */
  --space-3: 0.75rem;   /* 12px */
  --space-4: 1rem;      /* 16px */
  --space-5: 1.25rem;   /* 20px */
  --space-6: 1.5rem;    /* 24px */
  --space-8: 2rem;      /* 32px */
  --space-10: 2.5rem;   /* 40px */
  --space-12: 3rem;     /* 48px */
  --space-16: 4rem;     /* 64px */
  --space-20: 5rem;     /* 80px */
  --space-24: 6rem;     /* 96px */

  /* --- 12-column grid --- */
  --grid-columns: 12;
  --grid-gutter: 1.5rem;          /* 24px column gap */
  --container-max: 768px;
  --container-pad: var(--space-6);
  --measure: 65ch;                /* comfortable reading line length */

  /* --- Misc --- */
  --radius: 6px;
  --transition: 160ms ease;
}

/* ============================================================
   RESET / BASE
   ============================================================ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

a:hover { text-decoration: underline; text-underline-offset: 2px; }

img { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   GRADIENT BAR — sticky strip at the very top of the page.
   Retained for future use; the element is not currently rendered
   (see --gradient-bar token). Re-add <div class="gradient-bar">
   as the first body child to bring it back.
   ============================================================ */
.gradient-bar {
  position: sticky;
  top: 0;
  z-index: 1000;
  width: 100%;
  height: 4px;
  background: var(--gradient-bar);
}

/* ============================================================
   GRID — every section snaps to the same 12 columns
   ============================================================ */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-24) var(--container-pad) var(--space-12);

  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
}

/* Default: every direct child spans the full 12 columns (one per row). */
.container > * { grid-column: 1 / -1; }

/* Sections that lay children onto the grid inherit the same tracks. */
.meta,
.row,
.footer { grid-template-columns: subgrid; }

.meta,
.row,
.footer { display: grid; }

/* ============================================================
   SHARED
   ============================================================ */
.eyebrow,
.row__label {
  font-size: var(--text-2xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text);
  font-weight: var(--weight-medium);
  margin: 0;
}

.rule {
  border: 0;
  border-top: 1px solid var(--color-border);
  margin: var(--space-24) 0;
}

/* Scroll-triggered fade-in; JS adds .is-visible via IntersectionObserver.
   Starts hidden — the <noscript> rule in index.html covers the no-JS case. */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Above-the-fold intro sequence (menu → hero → about), fires once on load
   rather than on scroll. Stagger comes from --intro-delay set per element. */
.reveal-intro {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 350ms ease-out, transform 350ms ease-out;
  transition-delay: var(--intro-delay, 0ms);
}

.reveal-intro.is-visible {
  opacity: 1;
  transform: none;
}

.copy-btn {
  font-family: var(--font-secondary);
  font-size: var(--text-xs);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-2);
  min-height: 28px;
  cursor: pointer;
  transition: background var(--transition);
}

.copy-btn:hover { background: var(--color-surface-hover); }
.copy-btn.is-copied { color: var(--color-text-muted); }

/* ============================================================
   SITE HEADER — full-width sticky bar
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;                    /* stays above scrolling content */
  width: 100%;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: var(--space-4) var(--container-pad);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.site-header__brand {
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  letter-spacing: var(--tracking-tight);
}

.site-header__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
}

.site-header__nav a:not(.site-header__cta) {
  display: inline-flex;
  align-items: center;
  padding-block: var(--space-2);
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.site-header__sep {
  color: var(--color-separator);
  user-select: none;
}

.site-header__cta {
  margin-left: var(--space-3);
  padding: var(--space-2) var(--space-3);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  background: var(--color-surface);
  border-radius: 999px;
  transition: background var(--transition);
}

.site-header__cta:hover {
  color: var(--color-text);
  background: var(--color-surface-hover);
  text-decoration: none;   /* filled pill — no underline on hover */
}

/* Offset anchored sections so they clear the sticky header. */
:where(#about, #projects, #what-i-do, #get-in-touch) {
  scroll-margin-top: var(--space-24);
}

/* ============================================================
   HERO
   ============================================================ */
.hero { margin-bottom: 0; }   /* rule margins handle section spacing symmetrically */

.hero > :last-child { margin-bottom: 0; }   /* keep the gap to the first divider at 96px */

.hero .eyebrow { margin-bottom: var(--space-4); }

.hero__name {
  font-family: var(--font-primary);
  font-size: clamp(2.5rem, 8vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-6);
}

.hero__tagline {
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-3);
  max-width: 34ch;
}

.hero__note {
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  margin: 0;
}

/* ============================================================
   META ROW  (facts | social)
   ============================================================ */
.meta {
  align-items: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.meta__facts { grid-column: 1 / 7; }

.meta__social {
  grid-column: 7 / -1;
  justify-self: end;
  display: inline-flex;
  gap: var(--space-6);
}

.meta__social a { color: var(--color-text); }

/* ============================================================
   TWO-COLUMN ROWS  (label cols 1–2 | content cols 3–12)
   ============================================================ */
.row__label {
  grid-column: 1 / 3;
  padding-top: var(--space-1);
}

.row__content { grid-column: 3 / -1; }

.prose p {
  margin: 0 0 var(--space-6);
  color: var(--color-text-muted);
}

.prose p:last-child { margin-bottom: 0; }

.prose a,
.job__points a {
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.prose a:hover,
.job__points a:hover { color: var(--color-text-muted); }

/* Prose list (e.g. What I Do skills) — editorial hairline rows, unified color */
.prose ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-bottom: 1px solid var(--color-border);
}

.prose li {
  color: var(--color-text-muted);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}

/* ============================================================
   WORK HISTORY
   ============================================================ */
.work {
  display: grid;
  grid-template-columns: subgrid;   /* inherit cols 3–12 */
  row-gap: var(--space-12);         /* space above each project's divider */
}

.job {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: start;
}

.job__main { grid-column: 1 / 8; }   /* global cols 3–9 */
.job__aside {
  grid-column: 8 / -1;               /* global cols 10–12 */
  text-align: right;
}

/* --- Stacked variant: label above content, full-width --- */
.row--stacked { row-gap: var(--space-16); }

.row--stacked .row__label {
  grid-column: 1 / -1;               /* header above the content */
  padding-top: 0;
}

.row--stacked .row__content { grid-column: 1 / -1; }   /* content spans all 12 */

/* Each project stacks: text (capped measure) then a full-width image. */
.row--stacked .job {
  display: flex;
  flex-direction: column;
  align-items: stretch;              /* let the full-width image fill the row */
  gap: var(--space-8);
}

.row--stacked .job__aside { text-align: left; }

/* Hairline between projects (never above the first); ranked below section
   dividers by keeping tighter surrounding space than the .rule margins. */
.row--stacked .job + .job {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-12);
}

.row--stacked .lightbox-trigger { width: 100%; }

.row--stacked .lightbox-trigger img {
  aspect-ratio: 2 / 1;               /* capped height; click opens full image */
  max-height: 400px;
  object-fit: cover;
  object-position: top;
}

.job__title {
  font-family: var(--font-primary);
  font-size: var(--text-md);
  font-weight: var(--weight-regular);   /* role text, e.g. "Platform Redesign" */
  margin: 0 0 var(--space-4);
}

.job__company { font-weight: var(--weight-bold); }   /* company name, e.g. "URBAN RESEARCH" */

.job__sep {
  color: var(--color-separator);
  font-weight: var(--weight-regular);
  margin: 0 0.15em;
}

.job__points {
  margin: 0;
  padding-left: 1.1em;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  color: var(--color-text-muted);
}

.job__points li { padding-left: 0.2em; }

.job__date {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Image that replaces the first entry's date column */
.lightbox-trigger {
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  cursor: pointer;
  overflow: hidden;
  transition: opacity var(--transition);
}

.lightbox-trigger:hover { opacity: 0.85; }

.lightbox-trigger img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* ============================================================
   FOOTER — minimal copyright line
   ============================================================ */
.site-footer { padding-bottom: var(--space-8); }

.site-footer__copyright {
  font-size: var(--text-xs);
  color: var(--color-text-subtle);
}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
}

.lightbox[hidden] { display: none; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-scrim);
  opacity: 0;
  transition: opacity 200ms ease;
}

.lightbox.is-open .lightbox__backdrop { opacity: 1; }

.lightbox__content {
  position: relative;
  max-width: min(90vw, 1000px);
  max-height: 90vh;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 200ms ease, opacity 200ms ease;
}

.lightbox.is-open .lightbox__content {
  transform: scale(1);
  opacity: 1;
}

.lightbox__img {
  width: 100%;
  height: auto;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--radius);
}

.lightbox__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  line-height: var(--leading-none);
  color: #fff;
  background: var(--color-scrim);   /* sits over the image itself, legible on any photo */
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* ============================================================
   RESPONSIVE — collapse the grid to a single column
   ============================================================ */
@media (max-width: 640px) {
  .container {
    display: block;
    padding: var(--space-16) var(--space-4) var(--space-12);
  }

  /* Drop out of grid; stack everything vertically. */
  .row,
  .work,
  .job {
    display: flex;
    flex-direction: column;
  }

  .rule { margin: var(--space-16) 0; }

  .site-header__inner { padding-inline: var(--space-4); }
  .site-header__nav { gap: var(--space-2); font-size: var(--text-xs); }
  .site-header__cta { margin-left: var(--space-2); }

  .row { gap: var(--space-4); }

  .work { gap: var(--space-16); }
  .job { gap: var(--space-4); }
  .job__aside { text-align: left; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  .lightbox__backdrop,
  .lightbox__content {
    transition-duration: 0.01ms !important;
  }
}