@import url("https://use.typekit.net/cha6esn.css");

/* ─── MERCHANT FONT-FACE ─────────────────────────────── */
/* Only the weights the portfolio layer uses: 200 (h2 em), 300 (H2/H3), 400 (H1).
   No ExtraLight cut exists — the Thin file doubles as weight 200. */
@font-face {
  font-family: 'Merchant';
  src: url('Merchant/Merchant-Thin copy.ttf') format('truetype');
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: 'Merchant';
  src: url('Merchant/Merchant-Light copy.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: 'Merchant';
  src: url('Merchant/Merchant-Regular copy.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

/* ─── RESET ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── TOKENS ─────────────────────────────────────────── */
:root {
  --bg:       #0C0C0C;
  --ink:      #FFFFFF;
  --ink-2:    #D4D0C8;
  --rule:     #252320;
  --gold:     oklch(0.70 0.148 83);
  --gold-dim: oklch(0.695 0.105 81);  /* #BE964B — filter/tag hover (7.1:1 on --bg, AAA) */
  --accent:   oklch(0.70 0.148 83);

  /* feedback colors — soft, warm-leaning, legible on --bg */
  --error:    #E5887A;                /* terracotta — error text/icons (7.6:1 on --bg, AAA) */
  --success:  #A8D4A0;                /* sage — success text/icons */

  --merchant: 'Merchant';
  --utile:    'utile', 'utile-display';

  --text-body: clamp(1rem, calc(0.875rem + 0.35vw), 1.125rem);   /* Body tier — 16px floor (mobile), fluid to 18px cap on desktop (~1180px+) */
  --text-body-2: 0.875rem;    /* Body Copy 2 — 14px */

  /* tracking scale — positive tracking for small/functional text.
     Display tiers use fixed negative tracking baked into each tier
     (H1/H2 -0.03em, H3 -0.02em, H4 -0.01em); H5 uses 0. */
  --track-body:    0.01em;    /* body copy — a tiny bit of tracking for reading comfort */
  --track-text:    0.02em;    /* small text: H6 labels, tags, Body 2 meta */
  --track-cta:     0.03em;    /* pill CTAs & filter buttons */
  --track-nav:     0.08em;    /* nav links */

  --radius:   16px;           /* Default radius step — cards, media frames, callouts.
                                 The other steps stay literal: 2px bar caps, 100px pills. */

  --max:      clamp(1100px, 90vw, 1400px);  /* fluid band — ramps from 1100 up to 1400 so the
                                                content column grows smoothly across breakpoints
                                                instead of snapping (was a hard 1100→1400 jump
                                                at a 1440 media query). --pad gutters unchanged. */
  --pad:      clamp(1.5rem, 5vw, 4rem);
  --content:  calc(var(--max) - 2 * var(--pad));  /* single content column = --max minus the two
                                                     --pad gutters. .container reaches it with padding
                                                     inside its max-width; the full-width footer caps
                                                     its inner at --content so it shares the same
                                                     left/right edge as the page body. */

  /* readable line-length measure — WCAG 1.4.8 (AAA): keep text ≤80 characters/line.
     rem-based so it holds the char count if the user changes base font size.
     --measure ≈ 80 chars at 16px body; --measure-wide ≈ 78 chars at 22px H5 subhead. */
  --measure:      33rem;   /* ~528px — body copy; measured worst-case 79 chars at 16px/400 (34rem tipped to 81) */
  --measure-wide: 42rem;   /* ~672px — hero/subhead lead (22px/200 packs more chars; ~78) */
}

/* ─── BASE ───────────────────────────────────────────── */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  font-family: var(--utile);
  background: var(--bg);
  color: var(--ink);
  font-size: 16px;      /* body copy floor — never smaller for legibility */
  font-weight: 400;     /* body-tier default — 400 regular. Thin 200 is reserved for
                           the H5 and Stat display tiers, which set it explicitly. */
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

/* ─── TYPE SYSTEM ─────────────────────────────────────────
   9 tiers, nothing else:
   H1  Merchant 400  8vw    lh 0.9   — primary page title / hero (Work page)
   H2  Merchant 300  6vw    lh 0.9   — page titles: About, Side Projects, case studies
   H3  Merchant 300  3vw    lh 1.25  — accent section titles AND all display numbers
   H4  Utile 600     2.25vw lh 1.5   — section labels ("Selected Work")
   H5  Utile 200     2vw    lh 1.5   — subheadlines
   H6  Utile 400     14px   lh 1.5   — eyebrows, meta, captions, AND interactive text:
                                        nav links, buttons, CTAs, filters, footer links
                                        (all 400; active/selected state → Body Bold 600)
   Body      Utile 400 16px→18px lh 1.75  — fluid var(--text-body)
   Body bold Utile 600 16px→18px lh 1.75  — fluid var(--text-body)
   Body 2    Utile 400 14px lh 1.75  — meta line under a title (var --text-body-2)
   Merchant = accent main titles only (H1–H3). Utile everywhere else.
   Tracking: 4-step positive scale (see :root tokens) — --track-body 0.01em,
   --track-text 0.02em, --track-cta 0.03em, --track-nav 0.08em.
   No other positive values; display tracking is per-tier (negative). */
h1, .text-h1 {
  font-family: var(--merchant);
  font-weight: 400;
  font-size: clamp(3.4rem, 8vw, 7rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
}
/* Titles follow their tier — an <em>/<i> in a heading never re-weights or italicizes it. */
h1 em, h2 em, h3 em, h4 em, h5 em, h6 em,
.text-h1 em, .text-h2 em, .text-h3 em, .text-h4 em, .text-h5 em, .text-h6 em {
  font-weight: inherit;
  font-style: normal;
}

h2, .text-h2 {
  font-family: var(--merchant);
  font-weight: 300;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ink);
}

h3, .text-h3 {
  font-family: var(--merchant);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
}

h4, .text-h4 {
  font-family: var(--utile);
  font-weight: 600;
  font-size: clamp(1.1rem, 2.25vw, 1.8rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--ink);
}

h5, .text-h5, .text-subhead {
  font-family: var(--utile);
  font-weight: 200;
  font-size: clamp(1rem, 2vw, 1.375rem);   /* H5 cap 22px (was 1.6rem/25.6px — too large at ≥1440px) */
  line-height: 1.5;
  letter-spacing: var(--track-body);       /* slight tracking helps the thin 200 weight breathe */
  color: var(--ink-2);
}

h6, .text-h6 {
  font-family: var(--utile);
  font-weight: 400;    /* 400 minimum at 14px — weight-200 strokes are too thin at label size */
  font-size: 0.875rem; /* 14px — legibility floor for labels */
  line-height: 1.5;    /* matches the case-study label lh — one H6 line-height */
  color: var(--ink-2);
}

p, .text-body {
  font-family: var(--utile);
  font-weight: 400;                    /* Utile Regular — body reading weight (kit has no 300; 200 read too thin) */
  font-size: var(--text-body); letter-spacing: var(--track-body);
  line-height: 1.75;
  color: var(--ink-2);
  max-width: var(--measure);           /* WCAG 1.4.8 — cap body line length ≤80 chars */
}

strong, b, .text-body-bold {
  font-family: var(--utile);
  font-weight: 600;
  font-size: var(--text-body); letter-spacing: var(--track-body);
  line-height: 1.75;
}

.text-link {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  color: inherit;
  transition: color 0.2s;
}
.text-link:hover { color: var(--ink); }

/* ─── WIDOWS & ORPHANS ────────────────────────────────────
   No single word or line may dangle at the start or end of a text
   block (a widow/orphan). Two mechanisms, both progressive
   enhancements that are safely ignored where unsupported:
   • Headings, titles, subheads, and short labels BALANCE their lines
     (text-wrap: balance) so a lone trailing word can't strand.
   • Flowing body copy uses text-wrap: pretty, which lets the browser
     avoid a very short orphan last line.
   Applied at the type tiers so every page inherits it — see
   DESIGN.md → Typography → Widows & orphans. */
h1, h2, h3, h4, h5, h6,
.text-h1, .text-h2, .text-h3, .text-h4, .text-h5, .text-h6,
.text-subhead, .project-name {
  text-wrap: balance;
}
p, .text-body, .project-desc {
  text-wrap: pretty;
}

/* ─── A11Y UTILITIES ─────────────────────────────────── */
/* Skip link — visually hidden until keyboard-focused, then drops in over the
   nav as an inverted pill (the CTA fill state). First focusable element on
   the page (WCAG 2.4.1 bypass blocks). */
.skip-link {
  position: fixed;
  top: -100%;
  left: 1rem;
  z-index: 300;               /* above the 200 nav */
  background: var(--ink);
  color: var(--bg);
  padding: 0.6rem 1.25rem;
  border-radius: 100px;
  font-family: var(--utile);
  font-size: 0.875rem;        /* H6 tier */
  font-weight: 400;
  letter-spacing: var(--track-cta);
  text-decoration: none;
  transition: none;           /* appear instantly on focus */
}
.skip-link:focus { top: 0.65rem; }

/* Screen-reader-only text (live regions, hidden labels) */
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ─── NAV ────────────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Full-bleed bar: logo/links sit at the --pad edge (64px on desktop), identical on
     every page. NOT aligned to the --content column on purpose — --content differs
     between case studies and the homepage, so aligning would jump the nav per page. */
  padding: 0 var(--pad);
  background: rgba(12,12,12,0.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.nav-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 28px;
  width: auto;
  display: block;
}

.nav-links {
  display: flex;
  gap: 1.5rem;
  list-style: none;
}

.nav-links a {
  font-family: var(--utile);
  font-size: 0.875rem; /* H6 tier — 14px */
  font-weight: 400;
  letter-spacing: var(--track-nav);
  text-transform: none;
  text-decoration: none;
  color: var(--ink-2);
  transition: color 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.nav-links a:hover { color: var(--ink); }

.nav-links a.active {
  color: var(--ink);
  font-weight: 600; /* Body Bold — active/selected weight (matches filter active) */
}

.nav-links a::before {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url('Right Parentheses.svg') center / contain no-repeat;
  flex-shrink: 0;
  opacity: 0;
}

.nav-links a::after {
  content: '';
  display: inline-block;
  width: 22px;
  height: 22px;
  background: url('Left Parentheses.svg') center / contain no-repeat;
  flex-shrink: 0;
  opacity: 0;
}

.nav-links a.active::before,
.nav-links a.active::after {
  opacity: 1;
}

/* on dark pages ink-2 is already legible; active gets full ink brightness */

/* ─── HAMBURGER TOGGLE ───────────────────────────────── */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  z-index: 210;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}

.nav-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.nav-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 640px) {
  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    position: fixed;
    top: 60px;
    left: 0; right: 0;
    bottom: 0;
    background: var(--bg);
    padding: 1.5rem var(--pad) 2rem;
    border-top: 1px solid var(--rule);
    overflow-y: auto;
  }

  .nav-links.is-open { display: flex; }

  /* When the menu is open, make the bar opaque too so no page content shows through */
  .nav:has(.nav-links.is-open) {
    background: var(--bg);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-links li { border-bottom: 1px solid var(--rule); }

  .nav-links a {
    padding: 1rem 0;
    font-size: 1rem;
    width: 100%;
  }

  /* Crescent parentheses are a desktop-only accent — hide on all links so
     the active and inactive links stay left-aligned (no reserved space) */
  .nav-links a::before,
  .nav-links a::after {
    display: none;
  }
}

/* ─── PAGE WRAPPER ───────────────────────────────────── */
.page {
  padding-top: 60px;
}

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

/* ─── FOOTER ─────────────────────────────────────────── */
.footer {
  padding: clamp(2.5rem, 5vw, 3.5rem) var(--pad) clamp(2rem, 4vw, 2.75rem);
  background: var(--ink);
}

.footer-inner {
  max-width: var(--content);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(2.5rem, 6vw, 5.5rem);
}

.footer-col h4 {
  font-size: var(--text-body);      /* bold body tier, not display H4 */
  line-height: 1.5;
  letter-spacing: var(--track-body);
  color: var(--bg);
  margin-bottom: 0.4rem;
}

.footer-col p,
.footer-col a {
  font-family: var(--utile);
  font-weight: 400;
  font-size: 0.875rem;  /* H6 tier */
  line-height: 1.75;
  color: var(--bg);
  opacity: 0.75;
  text-decoration: none;
  display: block;
}

.footer-col a:hover { opacity: 1; }

@media (max-width: 640px) {
  .footer-inner { gap: 2rem; }
}

/* ─── PROJECT CARDS ──────────────────────────────────────
   The full-width stacked project list, shared by the Work page and
   Side Projects (was duplicated inline on both pages). The whole card
   is a link; borderless at rest, lifts to the 16px default radius (var(--radius)) on hover. */
.project-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.project-card {
  display: grid;
  grid-template-columns: 2fr 3fr;
  align-items: stretch;
  text-decoration: none;
  color: inherit;
  transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), border-radius 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  position: relative;
  border-radius: 0px;
  overflow: hidden;
}

.project-card.reverse { grid-template-columns: 3fr 2fr; }
.project-card.reverse .project-card-visual { order: -1; }
.project-card + .project-card { margin-top: clamp(3rem, 6vw, 6rem); }

.project-card:hover {
  transform: translateY(-5px);
  border-radius: var(--radius);
}

.project-card-text {
  padding: clamp(5rem, 9vw, 9rem) var(--pad);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* H3 tier */
.project-name {
  font-family: var(--merchant);
  font-weight: 300;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.6rem;
  transition: opacity 0.2s;
}

.project-desc {
  font-size: var(--text-body); letter-spacing: var(--track-body);
  line-height: 1.75;
  color: var(--ink-2);
  max-width: var(--measure);   /* WCAG 1.4.8 — body measure token (was a raw 560px) */
  margin-top: 0.5rem;
}

.project-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem; /* H6 tier */
  font-weight: 400;
  letter-spacing: var(--track-cta);
  color: var(--ink-2);
  text-decoration: none;
  padding: 0.4rem 1.25rem;
  border: 1px solid var(--rule);
  border-radius: 100px;
  width: fit-content;
  margin-top: 2rem;
  transition: background 0.25s, border-color 0.25s, color 0.25s;
}

.project-card:hover .project-cta {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.project-cta-arrow {
  font-size: 0.875rem; /* H6 tier — matches .project-cta */
}

.project-card-visual {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: transparent;
  margin: 1.25rem;
  display: flex;
  align-items: center;
}

.project-card-visual img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: var(--radius);
  transition: transform 0.6s ease, filter 0.35s ease;
}

.project-card:hover .project-card-visual img {
  transform: scale(1.02);
  filter: brightness(1.08);
}

@media (max-width: 680px) {
  .project-card,
  .project-card.reverse {
    display: flex;
    flex-direction: column;
    min-height: unset;
  }

  /* Stacked layout: image always sits above the title + CTA, for every card
     (both default and .reverse), regardless of the desktop DOM order. */
  .project-card-visual,
  .project-card.reverse .project-card-visual { order: -1; }
  .project-card-text,
  .project-card.reverse .project-card-text { order: 0; }

  .project-card-visual {
    width: 100%;
    height: clamp(260px, 60vw, 420px);
    margin-bottom: 0;   /* pull the title up close to the image above it */
  }

  /* Tight top padding keeps the title near the image; keep the fuller bottom
     padding so cards still breathe before the next one. */
  .project-card-text {
    padding: clamp(0.75rem, 3vw, 1.25rem) var(--pad) clamp(2rem, 5vw, 3rem);
  }
}

@media (min-width: 681px) and (max-width: 760px) {
  .project-card-text {
    padding: 2rem var(--pad);
  }
  .project-card-visual {
    height: clamp(240px, 60vw, 420px);
  }
}

/* Scroll entrance — whole card (text + image) fades and slides up together */
@media (prefers-reduced-motion: no-preference) {
  .project-card {
    opacity: 0;
    transform: translateY(70px);
    transition: opacity 1.0s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .project-card.in-view {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── LOAD / SCROLL ENTRANCE ANIMATIONS ─────────────────── */
.pre-fade {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.pre-slide {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.pre-fade.is-visible  { opacity: 1; }
.pre-slide.is-visible { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  .pre-fade, .pre-slide { transition: none; opacity: 1; transform: none; }
}

/* ─── ICON-BUTTON TOOLTIPS ──────────────────────────────── */
/* Add data-tooltip="Label" to any icon-only button or link.
   Renders a small inverted pill centered below the control,
   shown on hover and keyboard focus. */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  transform: translateY(-4px);
  background: var(--bg);
  color: var(--ink-2);
  border: 1px solid var(--rule);
  font-family: var(--utile);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--track-text);
  white-space: nowrap;
  padding: 0.55em 1em;
  border-radius: 100px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* NN/g hover timing — reveal fades in over 0.1s; the base delay is the
     0.5s grace period the tooltip lingers after the cursor leaves. */
  transition-property: opacity, visibility, transform;
  transition-duration: 0.1s;
  transition-timing-function: ease;
  transition-delay: 0.5s;
  z-index: 10;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Mouse hover: dwell ~0.4s inside the 0.3–0.5s window before the tooltip reveals */
[data-tooltip]:hover::after {
  transition-delay: 0.4s;
}

/* Keyboard focus: reveal immediately, no dwell */
[data-tooltip]:focus-visible::after {
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  [data-tooltip]::after {
    transform: none;
    transition-property: opacity, visibility;
  }
  [data-tooltip]:hover::after,
  [data-tooltip]:focus-visible::after { transform: none; }
}