/* Adam Kowaltzke — portfolio site
   Design tokens: bg #0b0b0c, ink #f2efe8, panel #131316/#1a1a1d.
   Fonts: Archivo 900 (display), IBM Plex Sans 300/400/500 (body), IBM Plex Mono 400/500 (labels/nav/tags). */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #0b0b0c;
  color: #f2efe8;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

a { color: inherit; }
a:hover { color: inherit; }

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

.page {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  overflow-x: clip;
  background: #0b0b0c;
  color: #f2efe8;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

/* ---------- Top bar ---------- */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 1.75rem clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgba(242, 239, 232, .14);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, .7);
}
.topbar a { text-decoration: none; }
.topbar .crumb-link { text-decoration: none; color: rgba(242, 239, 232, .45); transition: color .3s; }
.topbar .crumb-link:hover { color: #f2efe8; }

/* ---------- Sticky pill nav ---------- */
.navbar {
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 24px clamp(20px, 5vw, 72px);
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.nav {
  --navw: 120px;
  position: relative;
  display: flex;
  pointer-events: auto;
  background: rgba(11, 11, 12, .85);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(242, 239, 232, .25);
  padding: 4px;
  border-radius: 9999px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.nav-pill {
  position: absolute;
  top: 4px;
  left: 4px;
  width: var(--navw);
  height: 44px;
  border-radius: 9999px;
  background: #f2efe8;
  transition: transform .45s cubic-bezier(.7, 0, .2, 1), opacity .3s;
}
.nav a {
  position: relative;
  z-index: 1;
  width: var(--navw);
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: rgba(242, 239, 232, .7);
  transition: color .3s, letter-spacing .3s;
}
.nav a.is-active { color: #0b0b0c; }
.nav a:hover { letter-spacing: .2em; }

/* ---------- Scroll-fade chevron ---------- */
.chevron {
  position: fixed;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
  transition: opacity .6s ease;
  opacity: 1;
}
.chevron[hidden] { display: block; } /* toggled via opacity, never actually hidden */

/* ---------- Scroll reveal ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(80px);
  transition: opacity 1.1s ease, transform 1.2s cubic-bezier(.16, .8, .3, 1);
}
[data-reveal].is-revealed { opacity: 1; transform: none; }

/* ---------- Page header (Work / Thoughts / About H1 pattern) ---------- */
.page-header {
  padding: clamp(32px, 3.3vw, 48px) clamp(20px, 5vw, 72px) clamp(40px, 4.4vw, 64px);
  border-bottom: 1px solid rgba(242, 239, 232, .14);
}
.page-header h1 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 8.3vw, 120px);
  line-height: .92;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.page-header p {
  margin: 32px 0 0;
  max-width: 900px;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.35;
  font-weight: 300;
  color: rgba(242, 239, 232, .78);
  text-wrap: pretty;
}

/* ---------- Article header (long-form pieces) ---------- */
.article-header {
  padding: clamp(32px, 3.3vw, 48px) clamp(20px, 5vw, 72px) clamp(40px, 4.4vw, 64px);
  border-bottom: 1px solid rgba(242, 239, 232, .14);
}
.article-header .back-link {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, .55);
  text-decoration: none;
  transition: color .3s;
}
.article-header .back-link:hover { color: #f2efe8; }
.article-header h1 {
  margin: 40px 0 0;
  max-width: 1240px;
  overflow-wrap: break-word;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-size: clamp(48px, 8.3vw, 120px);
  line-height: .92;
  letter-spacing: -.045em;
  text-wrap: balance;
}
.article-header .lede {
  margin: 32px 0 0;
  max-width: 900px;
  font-size: clamp(20px, 2vw, 28px);
  line-height: 1.35;
  font-weight: 300;
  color: rgba(242, 239, 232, .78);
  text-wrap: pretty;
}
.article-header .meta {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, .55);
}

/* Case-study article header uses the meta/title row grid instead */
.article-header .row { margin-top: clamp(28px, 3.3vw, 48px); }
.article-header .row h1 { margin: 0; font-size: clamp(40px, 5.5vw, 80px); line-height: .96; letter-spacing: -.04em; }
.article-header .row .kicker { display: block; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.03em; color: rgba(242, 239, 232, .7); text-wrap: balance; margin: 24px 0 0; }
.article-header .row .dek { margin: 28px 0 0; font-size: clamp(20px, 2vw, 28px); line-height: 1.35; font-weight: 300; color: #f2efe8; text-wrap: pretty; }

/* ---------- Case-study summary tile ---------- */
.case-header { padding: clamp(32px, 3.3vw, 48px) clamp(20px, 5vw, 72px) clamp(48px, 5.5vw, 80px); border-bottom: 1px solid rgba(242, 239, 232, .14); }
.hero-fig { margin: 0; }
.hero-fig__box {
  position: relative;
  aspect-ratio: 35 / 18;
  min-height: 216px;
  overflow: hidden;
  cursor: zoom-in;
  background: repeating-linear-gradient(135deg, #1a1a1d 0 14px, #131316 14px 28px);
}
.hero-fig__box img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.hero-fig__box .color-bg { position: absolute; inset: 0; }
.hero-fig figcaption {
  margin-top: 14px;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(242, 239, 232, .6);
  text-wrap: pretty;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
}

.meta-row { display: grid; grid-template-columns: minmax(160px, 280px) minmax(0, 1fr); gap: 40px; margin-top: clamp(28px, 3.3vw, 48px); }
.row { display: grid; grid-template-columns: minmax(160px, 280px) minmax(0, 1fr); gap: 40px; }
.case-meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, .55);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.case-meta .date { color: rgba(242, 239, 232, .38); }
.case-meta .org { color: #f2efe8; }
.logo-box {
  display: inline-block;
  margin-top: 16px;
  align-self: flex-start;
  padding: 10px 14px;
  border: 1px solid rgba(242, 239, 232, .25);
  width: 100px;
  height: 100px;
}
.logo-box img { display: block; height: 100%; width: 100%; }

.case-copy { max-width: 900px; min-width: 0; }
.case-copy h1 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(40px, 5.5vw, 80px); line-height: .96; letter-spacing: -.04em; text-wrap: balance; }
.case-copy > p { margin: 28px 0 0; font-size: 18px; line-height: 1.55; color: rgba(242, 239, 232, .78); text-wrap: pretty; }

/* ---------- Tag chips ---------- */
.tags { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 8px 14px;
  border: 1px solid rgba(242, 239, 232, .2);
  border-radius: 9999px;
  color: rgba(242, 239, 232, .7);
}

/* ---------- Sections ---------- */
.sec {
  display: grid;
  grid-template-columns: minmax(160px, 280px) minmax(0, 1fr);
  gap: 40px;
  padding: clamp(48px, 5.5vw, 80px) clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgba(242, 239, 232, .14);
}
.sec-wide {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 40px;
  padding: clamp(56px, 6.6vw, 96px) clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgba(242, 239, 232, .14);
}
.sec-wide.has-border-top { border-top: 1px solid rgba(242, 239, 232, .14); margin-top: clamp(16px, 2.5vw, 32px); }

.lbl {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 14px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, .55);
  line-height: 1.6;
}
.lbl.lbl--sm { font-size: 12px; margin-bottom: 10px; }

.body { max-width: 900px; min-width: 0; font-size: 18px; line-height: 1.6; color: rgba(242, 239, 232, .78); }
.body p { margin: 0 0 22px; text-wrap: pretty; }
.body p:last-child { margin-bottom: 0; }
.body ul { margin: 0 0 22px; padding-left: 22px; }
.body li { margin: 0 0 10px; text-wrap: pretty; }
.body h3 { margin: 0 0 20px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(28px, 3vw, 44px); line-height: 1; letter-spacing: -.035em; color: #f2efe8; text-wrap: balance; }
.body h2 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(32px, 3.3vw, 48px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.body h4 { margin: 40px 0 14px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #f2efe8; }
.body h4:first-child { margin-top: 0; }
.body strong { color: #f2efe8; font-weight: 500; }
.body .lede { font-size: clamp(20px, 2vw, 28px); line-height: 1.35; font-weight: 300; color: #f2efe8; }

/* Facts grid */
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 40px; padding-top: 28px; border-top: 1px solid rgba(242, 239, 232, .14); }
.facts .fact-val { font-size: 16px; line-height: 1.5; color: #f2efe8; }

/* Figure */
.fig { margin: 36px 0 0; padding: 0; cursor: zoom-in; }
.fig .fig-box { aspect-ratio: 16 / 9; background: #131316; border: 1px solid rgba(242, 239, 232, .14); overflow: hidden; position: relative; }
.fig .fig-box img { width: 100%; height: 100%; object-fit: cover; }
.fig .fig-box img.is-top { object-position: center top; }
.fig figcaption { margin-top: 12px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: rgba(242, 239, 232, .45); }
.body .fig figcaption { font-family: 'IBM Plex Sans', system-ui, sans-serif; font-size: 14px; line-height: 1.5; letter-spacing: 0; text-transform: none; color: rgba(242, 239, 232, .6); margin-top: 14px; }

/* Quotes grid */
.quotes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 48px; margin-top: 8px; }
blockquote.quote { margin: 0; padding: 28px 0 28px 32px; border-left: 2px solid #f2efe8; }
blockquote.quote p { margin: 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 300; font-size: clamp(20px, 2vw, 28px); line-height: 1.35; color: #f2efe8; }
blockquote.quote footer { margin-top: 14px; font-family: 'IBM Plex Mono', monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 239, 232, .55); }
.quotes-2col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; margin: 0 0 28px; }
.quotes-2col blockquote.quote { padding: 24px 0 24px 28px; }
.quotes-2col blockquote.quote p { font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; }
.quotes-2col blockquote.quote footer { margin-top: 12px; }

/* Pull-quote / big statement band */
.statement { padding: clamp(80px, 11vw, 160px) clamp(20px, 5vw, 72px); text-align: center; border-bottom: 1px solid rgba(242, 239, 232, .14); }
.statement p { margin: 0 auto; max-width: 1180px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(34px, 5vw, 72px); line-height: 1.02; letter-spacing: -.035em; text-wrap: balance; }
.statement.statement--sm p { font-size: clamp(32px, 4.4vw, 64px); }

/* Numbered list (ordered) with 2-digit index */
.numbered { margin: 48px 0 0; padding: 0; list-style: none; }
.numbered.numbered--tight { margin-top: 40px; }
.numbered li { display: grid; grid-template-columns: clamp(40px, 4.4vw, 64px) minmax(0, 1fr); gap: 16px; padding: 24px 0; border-top: 1px solid rgba(242, 239, 232, .14); }
.numbered li:last-child { border-bottom: 1px solid rgba(242, 239, 232, .14); }
.numbered .num { font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: .14em; color: rgba(242, 239, 232, .55); padding-top: 4px; }
.numbered .num-body { font-size: 18px; line-height: 1.5; color: rgba(242, 239, 232, .82); }
.numbered .num-body.num-body--lg { font-size: 20px; line-height: 1.4; font-weight: 500; }

/* Plain bordered list (career highlights, notes) */
.rule-list { margin: 0; padding: 0; list-style: none; font-size: 18px; line-height: 1.55; color: rgba(242, 239, 232, .82); }
.rule-list li { padding: 20px 0; border-top: 1px solid rgba(242, 239, 232, .14); text-wrap: pretty; }
.rule-list li:last-child { border-bottom: 1px solid rgba(242, 239, 232, .14); }
.rule-list.rule-list--tight li { padding: 16px 0; }
.rule-list.rule-list--compact { margin: 0 0 22px; }
.rule-list.rule-list--compact li { padding: 14px 0; }
.rule-list.rule-list--compact li:last-child { border-bottom: 0; }

.numbered.numbered--compact li { padding: 16px 0; }
.numbered.numbered--compact li:last-child { border-bottom: 0; }
.numbered.numbered--sm li { padding: 20px 0; }
.numbered .num-body b, .rule-list b { font-weight: 500; color: #f2efe8; }

.inline-link { display: inline-block; font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: #f2efe8; text-decoration: none; padding-bottom: 10px; border-bottom: 1px solid rgba(242, 239, 232, .5); transition: border-color .3s; }
.inline-link:hover { border-color: #f2efe8; }

.text-underline-link { color: #f2efe8; font-weight: 600; text-decoration: underline; text-decoration-color: rgba(242, 239, 232, .4); text-underline-offset: 4px; text-decoration-thickness: 1px; transition: text-decoration-color .3s, color .3s; }
.text-underline-link:hover { text-decoration-color: #f2efe8; color: #fff; }

/* Stat / capability tile grid */
.stat-grid { margin-top: 48px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 24px; }
.stat-tile { padding: clamp(24px, 2.8vw, 40px) clamp(20px, 2.2vw, 32px); border: 1px solid rgba(242, 239, 232, .2); }
.stat-tile .stat-num { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(64px, 6.6vw, 96px); line-height: .9; letter-spacing: -.05em; }
.stat-tile .stat-label { margin-top: 20px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 239, 232, .55); }
.theme-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.theme-tile { padding: clamp(24px, 2.8vw, 40px) clamp(20px, 2.2vw, 32px); border: 1px solid rgba(242, 239, 232, .2); }
.theme-tile .theme-title { font-family: 'Archivo', sans-serif; font-weight: 900; font-size: 32px; line-height: 1; letter-spacing: -.03em; text-wrap: balance; }
.theme-tile p { margin: 20px 0 0; font-size: 17px; line-height: 1.6; color: rgba(242, 239, 232, .78); }

/* Redesign-vs-reinvention two-card layout */
.split-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.split-card { padding: clamp(24px, 2.8vw, 40px) clamp(20px, 2.2vw, 32px); border: 1px solid rgba(242, 239, 232, .2); }
.split-card .split-eyebrow { font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 239, 232, .55); }
.split-card .split-title { margin-top: 16px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(28px, 2.5vw, 36px); line-height: 1; letter-spacing: -.03em; }
.split-card p { margin: 24px 0 0; font-size: 17px; line-height: 1.6; color: rgba(242, 239, 232, .78); text-wrap: pretty; }
.split-card p.is-lead { color: #f2efe8; margin-top: 24px; }
.split-card p + p.is-body { margin-top: 18px; }

/* Link list (external reading) */
.link-list { margin: 0; padding: 0; list-style: none; display: grid; }
.link-list li { border-bottom: 1px solid rgba(242, 239, 232, .14); }
.link-list li:first-child { border-top: 1px solid rgba(242, 239, 232, .14); }
.link-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: baseline; padding: 20px 0; text-decoration: none; color: #f2efe8; transition: opacity .3s; }
.link-list a:hover { opacity: .7; }
.link-list .link-title-wrap { display: block; min-width: 0; }
.link-list .link-title { display: block; font-size: clamp(18px, 1.5vw, 22px); line-height: 1.35; font-weight: 500; text-wrap: pretty; }
.link-list .link-desc { display: block; margin-top: 8px; font-size: 16px; line-height: 1.5; color: rgba(242, 239, 232, .7); text-wrap: pretty; }
.link-list .link-src { display: block; margin-top: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: rgba(242, 239, 232, .55); }
.link-list .link-arrow { font-family: 'IBM Plex Mono', monospace; font-size: 18px; color: rgba(242, 239, 232, .7); }

/* ---------- CTA block ---------- */
.cta { padding: clamp(72px, 8.3vw, 120px) clamp(20px, 5vw, 72px); text-align: center; }
.cta.cta--photo { position: relative; min-height: clamp(440px, 44vw, 640px); display: flex; align-items: center; justify-content: center; overflow: hidden; border-top: 1px solid rgba(242, 239, 232, .14); padding: 0; }
.cta.cta--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.15) brightness(.55); transition: filter .7s ease; }
.cta.cta--photo:hover img { filter: grayscale(0) contrast(1.05) brightness(.7); }
.cta.cta--photo::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, rgba(11, 11, 12, .35), rgba(11, 11, 12, .85)); }
.cta.cta--photo .cta-inner { position: relative; padding: clamp(56px, 6vw, 80px) clamp(20px, 5vw, 72px); max-width: 1100px; box-sizing: border-box; width: 100%; }
.cta-kicker { font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 239, 232, .6); }
.cta h2 { margin: 24px auto 0; max-width: 1000px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(36px, 5vw, 72px); line-height: .98; letter-spacing: -.04em; text-wrap: balance; }
.cta.cta--photo h2 { max-width: none; font-size: clamp(38px, 5.8vw, 84px); }
.ctalinks { display: flex; justify-content: center; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); margin-top: clamp(36px, 4vw, 56px); font-family: 'IBM Plex Mono', monospace; font-size: clamp(14px, 1.1vw, 16px); letter-spacing: .08em; }
.ctalinks a { color: #f2efe8; text-decoration: none; padding-bottom: 10px; border-bottom: 1px solid #f2efe8; transition: opacity .3s; }
.ctalinks a:hover { opacity: .7; }
.ctalinks a.email { overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.footer {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: clamp(28px, 2.8vw, 40px) clamp(20px, 5vw, 72px) 48px;
  border-top: 1px solid rgba(242, 239, 232, .14);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(242, 239, 232, .38);
}
.footer a { text-decoration: none; color: rgba(242, 239, 232, .6); transition: color .3s; }
.footer a:hover { color: #f2efe8; }

/* ---------- Modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px, 4vw, 56px);
  cursor: zoom-out;
}
.modal[hidden] { display: none; }
.modal__close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(242, 239, 232, .4);
  background: rgba(11, 11, 12, .7);
  color: #f2efe8;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s, color .3s;
}
.modal__close:hover { background: #f2efe8; color: #0b0b0c; }
.modal__img { max-width: 100%; max-height: 100%; object-fit: contain; cursor: default; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }

/* ---------- Work tiles / rows (work.html, and home + about selected-work) ---------- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.7vw, 24px); }
.tile { grid-column: 1 / -1; position: relative; display: block; height: clamp(300px, 43vw, 620px); text-decoration: none; color: #f2efe8; overflow: hidden; background: #131316; outline: 1px solid transparent; outline-offset: -1px; transition: outline-color .4s; }
.tile:hover { outline-color: rgba(242, 239, 232, .5); }
.tile.tile--sm { grid-column: auto; height: clamp(280px, 36vw, 520px); }
.tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s cubic-bezier(.16, .8, .24, 1); }
.tile:hover img { transform: scale(1.04); }
.tile .tile-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 120px clamp(20px, 2.8vw, 40px) clamp(24px, 2.8vw, 40px); background: linear-gradient(to top, rgba(11, 11, 12, .94), rgba(11, 11, 12, .55) 55%, rgba(11, 11, 12, 0)); }
.tile.tile--sm .tile-copy { padding: 120px clamp(20px, 2.2vw, 32px) clamp(24px, 2.2vw, 32px); }
.tile .tile-kicker { display: block; font-family: 'IBM Plex Mono', monospace; font-size: clamp(11px, 1vw, 14px); letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 239, 232, .6); }
.tile .tile-title { display: block; margin-top: 12px; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(34px, 5.3vw, 76px); line-height: .95; letter-spacing: -.04em; text-wrap: balance; transition: transform .5s cubic-bezier(.16, .8, .24, 1); }
.tile.tile--sm .tile-title { font-size: clamp(48px, 7.8vw, 112px); line-height: .98; letter-spacing: -.035em; }
.tile:hover .tile-title { transform: translateX(12px); }
.tile .tile-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: #f2efe8; padding-bottom: 10px; border-bottom: 1px solid rgba(242, 239, 232, .35); transition: border-color .4s, opacity .4s; opacity: .6; }
.tile:hover .tile-link { border-color: #f2efe8; opacity: 1; }
.tile .tile-link .arrow { display: inline-block; transition: transform .4s cubic-bezier(.16, .8, .24, 1); }
.tile:hover .tile-link .arrow { transform: translateX(8px); }

.work-row {
  display: block;
  padding: clamp(48px, 5.5vw, 80px) clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgba(242, 239, 232, .14);
  text-decoration: none;
  color: #f2efe8;
  position: relative;
  overflow: hidden;
  background: transparent;
  transition: background .5s ease;
}
.work-row:hover { background: rgba(242, 239, 232, .04); }
.work-row .row-fig { position: relative; aspect-ratio: 35 / 18; min-height: 216px; overflow: hidden; background: repeating-linear-gradient(135deg, #1a1a1d 0 14px, #131316 14px 28px); }
.work-row .row-fig .color-bg { position: absolute; inset: 0; }
.work-row .row-fig img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform .8s cubic-bezier(.16, .8, .24, 1); }
.work-row:hover .row-fig img { transform: scale(1.04); }
.work-row .row-body { max-width: 900px; min-width: 0; }
.work-row .row-body h2 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(32px, 3.9vw, 56px); line-height: 1; letter-spacing: -.04em; text-wrap: balance; transition: transform .5s cubic-bezier(.16, .8, .24, 1); }
.work-row:hover .row-body h2 { transform: translateX(12px); }
.work-row .row-body > p { margin: 28px 0 0; font-size: 18px; line-height: 1.55; color: rgba(242, 239, 232, .78); text-wrap: pretty; }
.work-row .row-quote { margin: 24px 0 0; padding-left: 24px; border-left: 1px solid rgba(242, 239, 232, .3); font-size: 16px; line-height: 1.6; color: rgba(242, 239, 232, .62); text-wrap: pretty; }
.work-row .row-link { display: inline-flex; align-items: center; gap: 12px; margin-top: 40px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: #f2efe8; padding-bottom: 10px; border-bottom: 1px solid rgba(242, 239, 232, .35); transition: border-color .4s, opacity .4s; opacity: .6; }
.work-row:hover .row-link { border-color: #f2efe8; opacity: 1; }
.work-row .row-link .arrow { display: inline-block; transition: transform .4s cubic-bezier(.16, .8, .24, 1); }
.work-row:hover .row-link .arrow { transform: translateX(8px); }

/* Current-project banner row (work.html / thoughts.html) */
.banner-row {
  display: grid;
  grid-template-columns: minmax(160px, 280px) minmax(0, 1fr);
  gap: 40px;
  padding: clamp(40px, 4.4vw, 64px) clamp(20px, 5vw, 72px);
  border-bottom: 1px solid rgba(242, 239, 232, .14);
  text-decoration: none;
  color: inherit;
  transition: background .4s;
}
.banner-row:hover { background: rgba(242, 239, 232, .04); }
.banner-row .banner-meta { font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: rgba(242, 239, 232, .55); line-height: 1.6; display: flex; flex-direction: column; gap: 12px; }
.banner-row .banner-meta .date { color: rgba(242, 239, 232, .38); }
.banner-row .banner-copy { min-width: 0; }
.banner-row .banner-thumb { position: relative; width: min(495px, 100%); aspect-ratio: 495 / 260; overflow: hidden; background: #131316; }
.banner-row .banner-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-row h2 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(28px, 3.3vw, 48px); line-height: 1; letter-spacing: -.035em; text-wrap: balance; }
.banner-row .banner-copy > h2 { margin-top: 0; }
.banner-row .banner-dek { margin: 16px 0 0; font-family: 'IBM Plex Sans', system-ui, sans-serif; font-weight: 300; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.4; color: rgba(242, 239, 232, .7); text-wrap: pretty; }
.banner-row .banner-body { margin: 24px 0 0; font-size: 18px; line-height: 1.55; color: rgba(242, 239, 232, .78); text-wrap: pretty; }
.banner-row .banner-cta { display: inline-block; margin-top: 28px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: .08em; color: #f2efe8; padding-bottom: 10px; border-bottom: 1px solid #f2efe8; }
.banner-row .banner-copy-simple { max-width: 900px; }
.banner-row .banner-copy-simple .banner-body { margin-top: 24px; }

/* Section header with right-aligned sub-label (Selected work) */
.hdr { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: clamp(24px, 2.8vw, 40px); }
.hdr .lbl { margin: 0; }

/* Underline link (View my work / View all thoughts) */
.more-link { display: flex; justify-content: center; margin-top: clamp(36px, 4vw, 56px); }
.more-link a { font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: #f2efe8; text-decoration: none; padding-bottom: 10px; border-bottom: 1px solid rgba(242, 239, 232, .5); transition: border-color .3s; }
.more-link a:hover { border-color: #f2efe8; }

/* ---------- Home page ---------- */
.hero {
  padding: clamp(48px, 6vw, 88px) clamp(20px, 5vw, 72px) clamp(40px, 4vw, 56px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 3vw, 40px);
  align-items: end;
}
.hero h1 {
  margin: 0;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 100%;
  font-size: clamp(56px, 13.6vw, 196px);
  line-height: .9;
  letter-spacing: -.045em;
}
.hero .type-line { display: block; min-height: .9em; white-space: nowrap; }
.hero .cursor { display: inline-block; width: .09em; height: .82em; background: #f2efe8; vertical-align: -.06em; margin-left: .04em; opacity: 0; }
.hero .cursor.is-on { opacity: 1; }
.hero .headshot { position: relative; display: block; width: clamp(140px, 15vw, 220px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 1px solid rgba(242, 239, 232, .2); }
.hero .headshot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.hero .headshot .headshot-color { opacity: 0; transition: opacity .6s ease; }
.hero .headshot:hover .headshot-color { opacity: 1; }
.hero .headshot .headshot-highlight { pointer-events: none; -webkit-mask-image: radial-gradient(ellipse 13% 16% at 46.5% 15.5%, #000 70%, transparent 100%); mask-image: radial-gradient(ellipse 13% 16% at 46.5% 15.5%, #000 70%, transparent 100%); }

.tagline { padding: 0 clamp(20px, 5vw, 72px) clamp(8px, 1.5vw, 24px); display: flex; flex-direction: column; align-items: center; text-align: center; }
.tagline .role { font-family: 'IBM Plex Mono', monospace; font-size: clamp(13px, 1.1vw, 16px); letter-spacing: .12em; text-transform: uppercase; color: #f2efe8; text-wrap: balance; }
.tagline .skills { margin-top: 14px; font-size: clamp(16px, 1.4vw, 20px); font-weight: 300; color: rgba(242, 239, 232, .7); line-height: 1.4; text-wrap: balance; }

.lead-grid {
  padding: clamp(56px, 6.6vw, 96px) clamp(20px, 5vw, 72px);
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) minmax(0, 360px);
  gap: 40px;
  border-bottom: 1px solid rgba(242, 239, 232, .14);
}
.lead-grid .lead-copy p { margin: 0; font-size: clamp(22px, 2vw, 28px); line-height: 1.35; font-weight: 300; text-wrap: pretty; }
.lead-grid .lead-copy p.is-strong { margin-top: 24px; font-weight: 500; }
.lead-grid .lead-img { display: block; width: 100%; max-width: 360px; aspect-ratio: 3 / 4; }
.lead-grid .lead-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter .6s ease; filter: grayscale(1) contrast(1.05); }
.lead-grid .lead-img:hover img { filter: none; }
.lead-list { margin: clamp(36px, 4vw, 56px) 0 0; padding: 0; list-style: none; display: grid; gap: 0; font-size: 17px; line-height: 1.5; color: rgba(242, 239, 232, .82); }
.lead-list li { padding: 16px 0; border-top: 1px solid rgba(242, 239, 232, .14); }
.lead-list li:last-child { border-bottom: 1px solid rgba(242, 239, 232, .14); }

/* Article carousel (home "Thoughts") */
.carousel-section { padding: clamp(48px, 4.4vw, 64px) 0 clamp(56px, 5.5vw, 80px); border-bottom: 1px solid rgba(242, 239, 232, .14); }
.carousel-section .hdr { padding: 0 clamp(20px, 5vw, 72px); }
.carousel-nav { display: flex; gap: 12px; flex: none; }
.carousel-nav button {
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(242, 239, 232, .3);
  display: flex; align-items: center; justify-content: center; background: transparent;
  color: #f2efe8; font-family: 'Archivo', sans-serif; font-size: 22px; line-height: 1;
  cursor: pointer; transition: opacity .3s, border-color .3s;
}
.carousel-nav button:hover { border-color: #f2efe8; }
.carousel-nav button.is-hidden { opacity: 0; pointer-events: none; }
.carousel-track {
  display: flex; gap: 24px; overflow-x: auto; scroll-snap-type: x proximity;
  scroll-padding-left: clamp(20px, 5vw, 72px); scroll-behavior: smooth;
  padding: 0 clamp(20px, 5vw, 72px) 16px; scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-card {
  flex: 0 0 auto; width: min(495px, 82vw); aspect-ratio: 495 / 260; position: relative;
  overflow: hidden; scroll-snap-align: start; text-decoration: none; color: #f2efe8; background: #131316;
  transition: opacity .3s;
}
.carousel-card:hover { opacity: .9; }
.carousel-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.carousel-card .card-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 80px 24px 24px; background: linear-gradient(to top, rgba(11, 11, 12, .96), rgba(11, 11, 12, .6) 55%, rgba(11, 11, 12, 0)); }
.carousel-card .card-title { display: block; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; }
.carousel-card .card-dek { display: block; margin-top: 8px; font-size: 14px; line-height: 1.4; color: rgba(242, 239, 232, .7); }

/* Footer tag cloud (home) */
.tagcloud { padding: clamp(28px, 2.8vw, 40px) clamp(20px, 5vw, 72px) 48px; border-top: 1px solid rgba(242, 239, 232, .14); font-family: 'IBM Plex Mono', monospace; font-size: 12px; line-height: 1.9; letter-spacing: .02em; color: rgba(242, 239, 232, .38); text-wrap: pretty; }

/* ---------- About page ---------- */
.about-hero { position: relative; margin-top: -92px; padding: clamp(150px, 14vw, 200px) clamp(20px, 5vw, 72px) clamp(56px, 6.6vw, 96px); overflow: hidden; border-bottom: 1px solid rgba(242, 239, 232, .14); }
.about-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40%; display: block; z-index: 0; }
.about-hero::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to right, rgba(11, 11, 12, .6) 0%, rgba(11, 11, 12, .4) 45%, rgba(11, 11, 12, .3) 72%, rgba(11, 11, 12, 0) 100%); }
.about-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(11, 11, 12, .76), rgba(11, 11, 12, 0) 35%, rgba(11, 11, 12, 0) 70%, rgba(11, 11, 12, .62)); }
.about-hero .about-hero-copy { position: relative; z-index: 2; max-width: 900px; }
.about-hero h1 { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(48px, 8.3vw, 120px); line-height: .92; letter-spacing: -.045em; text-wrap: balance; }
.about-hero p { margin: 32px 0 0; font-size: clamp(20px, 2vw, 28px); line-height: 1.35; font-weight: 300; color: rgba(242, 239, 232, .99); text-wrap: pretty; }

.pull-quote { margin: 0; font-family: 'Archivo', sans-serif; font-weight: 900; font-size: clamp(28px, 2.8vw, 40px); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }

.clients-grid { display: grid; gap: 14px; font-size: 17px; line-height: 1.5; color: rgba(242, 239, 232, .82); text-wrap: pretty; }
.clients-grid p { margin: 0; }

.cv-btn { display: none; align-items: center; gap: 14px; margin-top: 56px; padding: 18px 32px; border: 1px solid #f2efe8; border-radius: 9999px; font-family: 'IBM Plex Mono', monospace; font-size: 14px; letter-spacing: .14em; text-transform: uppercase; color: #f2efe8; text-decoration: none; transition: background .3s, color .3s; }
.cv-btn:hover { background: #f2efe8; color: #0b0b0c; }

.photo-grid { margin-top: clamp(40px, 4.4vw, 64px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
.photo-grid figure { margin: 0; }
.photo-grid img { display: block; width: 100%; aspect-ratio: 10 / 7; object-fit: cover; transition: filter .6s ease; filter: grayscale(1) contrast(1.05); }
.photo-grid figure:hover img { filter: none; }
.photo-grid figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: rgba(242, 239, 232, .6); text-wrap: pretty; }

/* ---------- Article inline figures / images ---------- */
.article-img { display: block; width: 100%; height: auto; }
.article-img.is-framed { border: 1px solid rgba(242, 239, 232, .14); }
.article-fig { margin: clamp(40px, 4vw, 56px) 0 0; }
.article-fig figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: rgba(242, 239, 232, .6); text-wrap: pretty; }
.spectrum-img-wrap { margin-top: 56px; width: 100%; aspect-ratio: 16 / 7; }
.spectrum-img-wrap img { width: 100%; height: 100%; object-fit: contain; }

/* ---------- Breakpoints ---------- */
@media (max-width: 1100px) {
  .lead-grid { grid-template-columns: minmax(0, 1fr); }
  .lead-grid .lead-img { order: 2; }
}

@media (max-width: 900px) {
  .sec, .sec-wide, .row, .meta-row, .banner-row {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 24px !important;
  }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .quotes, .quotes-2col { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .nav { --navw: 96px; }
  .hero { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .ctalinks { flex-direction: column; gap: 24px !important; align-items: center; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .hdr { flex-direction: column; align-items: flex-start !important; gap: 8px; }
}

@media (max-width: 600px) {
  .tiles { grid-template-columns: minmax(0, 1fr); }
}