/* jordanharrison.me — design tokens + shared components.
   Palette comes from Jordan's existing brand (the "jh" monogram and his stat cards):
   evergreen #164841 as the accent, slate-green #334949 for dark panels, on a warm off-white.
   Light only.

   Contrast (WCAG relative luminance, measured by tools/contrast.py):
     --ink       on --paper   14.3:1   body text
     --ink       on --paper-2 13.1:1   body text on cards
     --evergreen on --paper    9.9:1   headings, links, eyebrows
     --evergreen on --paper-2  9.1:1
     --mist      on --paper    5.3:1   secondary text only (captions, footer, labels)
     --mist      on --paper-2  4.9:1   (passes 4.5:1, but keep it to small labels, not body copy)
     --paper     on --slate    9.2:1   text on dark panels and stat cards
     --paper     on --evergreen 9.9:1  button label
     --sage      on --slate    5.2:1   labels on dark panels
   Fonts are self-hosted (fonts/) so the site makes no third-party requests:
   Space Grotesk for display and the big numbers, Inter for body. */

@font-face { font-family: "Space Grotesk"; src: url("/fonts/space-grotesk-latin.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/fonts/inter-latin.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --paper: #FAFAF7;       /* page base */
  --paper-2: #F0F1EC;     /* cards, quiet panels */
  --line: #DCDFD8;        /* hairlines */
  --ink: #1B2A28;         /* body text */
  --mist: #5C6B69;        /* secondary text only, see contrast note */
  --evergreen: #164841;   /* accent: headings, links, buttons */
  --slate: #334949;       /* dark panels, stat cards */
  --sage: #A9C4BE;        /* labels on dark panels */
  --focus: var(--evergreen);
  --display: "Space Grotesk", "Helvetica Neue", Arial, sans-serif;
  --body: "Inter", -apple-system, "Segoe UI", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* Nothing on the site may scroll sideways; the hero's offset panel pokes 14px past its column on purpose. */
html, body { overflow-x: clip; }
img { max-width: 100%; height: auto; display: block; }
/* Grids use minmax(0, 1fr), never bare 1fr: an <img> with a big intrinsic width would otherwise
   blow the column out past the viewport on phones. */

body {
  font-family: var(--body);
  color: var(--ink);
  background: var(--paper);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; color: var(--evergreen); }
h1 { font-size: clamp(2.4rem, 6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.4rem); margin-bottom: 18px; }
h3 { font-size: 1.25rem; margin-bottom: 8px; }
h4 { font-size: 1rem; margin-bottom: 6px; }
p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }
a { color: var(--evergreen); text-underline-offset: 3px; }
a:hover { color: var(--slate); }
ul { padding-left: 1.2em; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
.wrap--narrow { max-width: 760px; }

/* ---- a11y ---- */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--focus); color: var(--paper); padding: .6rem 1rem; z-index: 100; font-weight: 600; }
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* ---- header / nav ---- */
.site-header { border-bottom: 1px solid var(--line); background: var(--paper); }
.site-header .wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding-top: 12px; padding-bottom: 12px; }
.brand {
  display: inline-flex; align-items: center; gap: 12px; margin-right: auto;
  font-family: var(--display); font-weight: 600; font-size: 1.3rem; color: var(--ink); text-decoration: none; letter-spacing: -.01em;
}
/* The monogram is bare evergreen lettering (no tile), so it can sit bigger than a boxed mark would. */
.brand img { height: 56px; width: auto; }
.site-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.site-nav a { text-decoration: none; font-size: .95rem; color: var(--ink); font-weight: 500; }
.site-nav a:hover { color: var(--evergreen); }
.site-nav a[aria-current="page"] { color: var(--evergreen); font-weight: 600; border-bottom: 2px solid var(--evergreen); }

/* ---- buttons ---- */
.btn {
  display: inline-block; text-decoration: none; font-weight: 600; font-size: 1rem;
  padding: 13px 26px; border-radius: 10px; margin: 0 12px 12px 0;
  background: var(--evergreen); color: var(--paper); border: 2px solid var(--evergreen);
  transition: background .2s ease, transform .2s ease;
}
.btn:hover { color: var(--paper); background: var(--slate); border-color: var(--slate); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--evergreen); }
.btn--outline:hover { background: var(--paper-2); color: var(--evergreen); border-color: var(--evergreen); }
.section--dark .btn--outline { color: var(--paper); border-color: var(--sage); }
.section--dark .btn--outline:hover { background: rgba(255,255,255,.08); color: var(--paper); border-color: var(--paper); }
.section--dark .btn { background: var(--paper); color: var(--evergreen); border-color: var(--paper); }
.section--dark .btn:hover { background: var(--paper-2); color: var(--evergreen); border-color: var(--paper-2); }

/* ---- hero ---- */
.hero { padding: 64px 0 56px; }
.hero .wrap { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(0,.85fr); gap: 48px; align-items: center; }
.hero h1 { margin: 10px 0 18px; }
.hero .lede { font-size: clamp(1.1rem, 2vw, 1.3rem); max-width: 42ch; margin-bottom: 26px; }
.hero-art img { border-radius: 20px; border: 1px solid var(--line); }
.hero-art { position: relative; }
.hero-art::after {
  content: ""; position: absolute; inset: 14px -14px -14px 14px; z-index: -1;
  border-radius: 20px; background: var(--paper-2); border: 1px solid var(--line);
}
@media (max-width: 800px) {
  .hero { padding-top: 40px; }
  .hero .wrap { grid-template-columns: minmax(0,1fr); }
  .hero-art { max-width: 520px; }
}

.eyebrow { display: block; font-family: var(--display); font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--mist); margin-bottom: 10px; font-weight: 600; }
.section--dark .eyebrow { color: var(--sage); }

/* ---- sections ---- */
.section { padding: 72px 0; }
.section--panel { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.section--dark { background: var(--slate); color: var(--paper); }
.section--dark h2, .section--dark h3 { color: var(--paper); }
.section--dark a { color: var(--paper); }
.section--dark a:hover { color: var(--sage); }
.section-intro { max-width: 62ch; margin-bottom: 36px; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 36px; }
.section-head h2 { margin-bottom: 0; }
.section-head p { max-width: 52ch; color: var(--mist); }
.section--dark .section-head p { color: var(--sage); }

.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 900px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0,1fr); } }

.card { background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 26px; }
.card p { color: var(--mist); font-size: .98rem; }
.section--panel .card { background: var(--paper); }

/* ---- stat cards (the key wins) ---- */
.stat {
  border-radius: 16px; padding: 26px 24px; min-height: 190px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
}
.stat .num { font-family: var(--display); font-weight: 700; font-size: clamp(2.4rem, 4vw, 3rem); line-height: 1; letter-spacing: -.02em; color: var(--evergreen); }
.stat dl { font-size: .95rem; line-height: 1.5; }
.stat dt { display: inline; font-weight: 600; }
.stat dt::after { content: ": "; }
.stat dd { display: inline; }
.stat dd::after { content: ""; display: block; height: 4px; }
.stat small { display: block; color: var(--mist); font-size: .8rem; }
.stat--dark { background: var(--slate); border-color: var(--slate); color: var(--paper); }
.stat--dark .num { color: var(--paper); }
.stat--dark small { color: var(--sage); }

/* ---- services (the six pillars) ---- */
.service { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 16px; align-items: start; }
.service svg { width: 40px; height: 40px; color: var(--evergreen); }
.service h3 { font-size: 1.1rem; margin-bottom: 4px; }
.service p { font-size: .96rem; color: var(--mist); }
.section--dark .service svg { color: var(--sage); }
.section--dark .service p, .section--dark .card p { color: var(--sage); }

/* ---- about ---- */
.about-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1.3fr); gap: 48px; align-items: start; }
.about-grid img { border-radius: 20px; border: 1px solid var(--line); }
.about-grid .portrait { position: sticky; top: 24px; }
@media (max-width: 800px) { .about-grid { grid-template-columns: minmax(0,1fr); } .about-grid .portrait { position: static; max-width: 420px; } }
.pill-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.pill-list li { background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: .9rem; }
.skills h3 { margin-top: 26px; }
.skills h3:first-child { margin-top: 0; }
.skills h4 { color: var(--ink); margin-top: 14px; }
.skills p { color: var(--mist); font-size: .96rem; }

/* ---- experience timeline ---- */
.timeline { list-style: none; padding: 0; border-left: 2px solid var(--line); margin-left: 6px; }
.timeline li { position: relative; padding: 0 0 30px 28px; }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 12px; height: 12px; border-radius: 50%; background: var(--evergreen); }
.timeline .when { display: block; font-size: .85rem; color: var(--mist); font-family: var(--display); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 4px; }
.timeline h3 { margin-bottom: 2px; }
.timeline .org { color: var(--ink); font-weight: 500; margin-bottom: 10px; }
.timeline ul { color: var(--ink); font-size: .96rem; }
.timeline ul li { padding: 0 0 6px 0; }
.timeline ul li::before { display: none; }

/* ---- key wins strip on the Work page: the home page's eight cards, tighter ---- */
.wins { padding: 48px 0; }
.wins .section-head { margin-bottom: 24px; }
.wins .stat { min-height: 0; padding: 18px 18px 16px; gap: 8px; }
.wins .stat .num { font-size: clamp(1.9rem, 2.8vw, 2.3rem); }
.wins .stat dl { font-size: .88rem; line-height: 1.4; }
/* Compact enough to go two-up on phones; the case-study stats stay one-up because they carry more text. */
@media (max-width: 560px) { .wins .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } .wins .stat { padding: 14px; } .wins .stat .num { font-size: 1.7rem; } .wins .stat dl { font-size: .8rem; } }

/* ---- case studies ---- */
.case { padding: 64px 0; border-top: 1px solid var(--line); }
.case:first-of-type { border-top: 0; }
.case .meta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.case .meta span { background: var(--paper-2); border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; font-size: .85rem; color: var(--mist); }
.case-body { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 40px; align-items: start; margin-top: 24px; }
@media (max-width: 800px) { .case-body { grid-template-columns: minmax(0,1fr); } }
.case-body h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .1em; color: var(--mist); margin: 18px 0 6px; }
.case-body h3:first-child { margin-top: 0; }
.case-stats { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.case-stats .stat { min-height: 140px; padding: 20px; }
.case-stats .stat .num { font-size: clamp(1.9rem, 3vw, 2.4rem); }
.case-stats .stat p { font-size: .92rem; line-height: 1.4; }
/* An odd number of stats would leave a hole; let the last one span the row. */
.case-stats .stat:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* On phones the numbers are the proof, so they come before the narrative. */
@media (max-width: 800px) { .case-stats { order: -1; } }
.gallery { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-top: 28px; }
.gallery img { border-radius: 12px; border: 1px solid var(--line); aspect-ratio: 1 / 1; object-fit: cover; width: 100%; }
.gallery--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
@media (max-width: 700px) { .gallery, .gallery--3 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.credit { font-size: .85rem; color: var(--mist); margin-top: 12px; }

/* ---- visual design galleries ---- */
.design-group { margin-bottom: 40px; }
.design-group h3 { font-size: 1.05rem; margin-bottom: 12px; }
.design-group .gallery { margin-top: 0; }
.design-group figure { margin: 0; }
.design-group figcaption { font-size: .78rem; color: var(--mist); margin-top: 6px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }

/* ---- CTA band ---- */
.cta { text-align: center; padding: 72px 0; }
.cta h2 { max-width: 22ch; margin: 0 auto 14px; }
.cta p { max-width: 52ch; margin: 0 auto 26px; }

/* ---- footer ---- */
.site-footer { border-top: 1px solid var(--line); padding: 32px 0; font-size: .9rem; color: var(--mist); }
.site-footer .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer a { color: var(--mist); }
.site-footer a:hover { color: var(--evergreen); }

/* ---- 404 ---- */
.not-found { padding: 96px 0; text-align: center; }
.not-found .wrap { max-width: 560px; }
.not-found h1 { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 14px; }