:root {
  --ink: #16160E;
  --chalk: #FFFFFC;
  --milk: #F3F3F2;
  --gray: #565656;
  --accent: #D64000;
  --line: rgba(89, 88, 87, 0.09);
  --serif: "Instrument Serif", Georgia, serif;
  --sans: "Satoshi", system-ui, sans-serif;

  /* type scale, vw on desktop, px on phones */
  --h1: 5.6vw;   --h1-lh: 6.2vw;
  --h2: 4.2vw;   --h2-lh: 4.6vw;
  --p: 1.4vw;    --p-lh: 1.8vw;
  --sup: 0.84vw;
  --gap: 2vw;
  --col: 45vw;
  --r: 2.8vw;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: hidden; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  font-family: var(--sans);
  color: var(--ink);
  background: linear-gradient(180deg, var(--chalk), 32%, var(--milk));
  background-color: var(--milk);
  -webkit-font-smoothing: antialiased;
  padding: 3.2vw calc((100vw - 2 * var(--col) - var(--gap)) / 2) 2vw;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
[hidden] { display: none !important; }
img { display: block; max-width: 100%; user-select: none; -webkit-user-drag: none; }
::selection { background: rgba(214, 64, 0, 0.16); }

h1, h2, .card__overlay, .card__title, .stat__num, .award__name {
  font-family: var(--serif); font-weight: 400; color: var(--ink);
}
h1 { font-size: var(--h1); line-height: var(--h1-lh); letter-spacing: -0.01em; }
h1 > span { display: block; }
h2 { font-size: var(--h2); line-height: var(--h2-lh); letter-spacing: -0.005em; }
em { font-family: var(--serif); font-style: italic; }
p, h5, input, .tags, dd, dt, .jobs li, .socials, .back, .colophon {
  font-size: var(--p); line-height: var(--p-lh); font-weight: 400; color: var(--gray);
}
h5 { font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); margin-bottom: 0.14vw; }
sup { font-size: var(--sup); line-height: 1; font-weight: 500; letter-spacing: 0.02em; margin-left: 0.18em; vertical-align: 0.9em; }
.star { color: var(--ink); opacity: 0.55; margin-inline: 0.2em; }
.spaced { letter-spacing: 0.08vw; text-transform: uppercase; }

/* ---------- identity (header + footer) */
.identity {
  display: grid; grid-template-columns: var(--col) var(--col); column-gap: var(--gap);
}
.bio, .contact { display: flex; flex-direction: column; gap: 0.3vw; margin-left: 0.55vw; }
.contact-cta { display: flex; justify-content: space-between; align-items: flex-start; }
footer.identity { margin-top: 3vw; }

.link {
  position: relative; display: inline-flex; align-items: center; gap: 0.32vw; width: fit-content;
  padding: 1px 9px 3px; margin: -2px -10px -4px; border: 1px solid transparent;
  color: var(--accent);
}
.link__text { font-size: var(--p); line-height: var(--p-lh); color: var(--accent); }
.link .icon { width: 1.1vw; height: 1.1vw; flex: none; margin-top: 0.1vw; }
.sq {
  position: absolute; width: 0.56vw; height: 0.56vw; min-width: 5px; min-height: 5px;
  border: 1px solid var(--accent); background: var(--chalk); opacity: 0;
}
footer .sq { background: var(--milk); }
.sq.tl { top: -0.28vw; left: -0.28vw; transform: translate(-1px, -1px); }
.sq.tr { top: -0.28vw; right: -0.28vw; transform: translate(1px, -1px); }
.sq.br { bottom: -0.28vw; right: -0.28vw; transform: translate(1px, 1px); }
.sq.bl { bottom: -0.28vw; left: -0.28vw; transform: translate(-1px, 1px); }
.link:hover, .link:focus-visible { border-color: var(--accent); outline: none; }
.link:hover .sq, .link:focus-visible .sq { opacity: 1; }

.cv { position: relative; display: block; width: 7.2vw; aspect-ratio: 1; margin-right: 0.55vw; flex: none; }
.cv__inner { position: absolute; inset: 0; display: grid; place-items: center; }
.cv__ring { position: absolute; inset: 0; width: 100%; height: 100%; will-change: transform; }
.cv__ring text { font-family: var(--sans); font-size: 13.4px; font-weight: 500; fill: var(--accent); }
.cv__label { font-size: var(--p); font-weight: 700; color: var(--ink); letter-spacing: 0.04em; }

/* ---------- hero */
.hero {
  display: grid; grid-template-columns: var(--col) var(--col); column-gap: var(--gap);
  min-height: min(calc(100svh - 12vw), 40vw); align-content: end;
  padding-top: 6vw; margin-bottom: 4vw;
}
.status { display: flex; justify-content: space-between; align-items: center; margin: 0 0.55vw 0.83vw; }
.status__item { display: flex; align-items: center; gap: 0.35vw; }
.globe { width: 3.3vw; height: 1.65vw; color: var(--gray); }
.weather__icon { display: inline-flex; width: 1.1vw; height: 1.1vw; color: var(--gray); }
.weather__icon svg { width: 100%; height: 100%; }
.clock { font-variant-numeric: tabular-nums; }
.now { display: flex; justify-content: flex-end; align-items: center; margin: 0 0.55vw 0.83vw; }
.now strong { font-weight: 500; color: var(--ink); }
.dot {
  display: inline-block; width: 0.55vw; height: 0.55vw; min-width: 7px; min-height: 7px; border-radius: 50%;
  background: var(--accent); margin-right: 0.35vw; vertical-align: 0.12em;
  animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(214, 64, 0, 0.45); } 70%, 100% { box-shadow: 0 0 0 0.7vw rgba(214, 64, 0, 0); } }
.hero__title { grid-column: 1 / 3; margin-left: 0.55vw; }
.hero__title > span { will-change: transform; }

/* ---------- cases */
.cases { display: flex; flex-direction: column; gap: var(--gap); margin-bottom: 6vw; }
.row { display: grid; gap: var(--gap); }
.row--big { grid-template-columns: 1fr 1fr; }
.row--smol { grid-template-columns: repeat(3, 1fr); }

.card { display: flex; flex-direction: column; gap: 1.1vw; color: inherit; }
.card__content {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r); background: var(--chalk);
  box-shadow: 0 0 0 1px var(--line);
  transform: translateZ(0);
}
@supports (corner-shape: squircle) {
  .card__content, .shot, .pill, .pill button { corner-shape: squircle; border-radius: calc(var(--r) * 1.7); }
}
.card--big .card__content { height: 33.75vw; }
.card--smol .card__content { height: 21.9vw; }
.card__content img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.001); transition: transform 1.1s cubic-bezier(.2, .8, .2, 1); }
.card:hover .card__content img { transform: scale(1.035); }

.tags { position: absolute; z-index: 2; top: 0; left: 0; display: flex; flex-wrap: wrap; gap: 0.42vw; margin: 1.4vw 1.62vw; opacity: 0; }
.tags > span {
  color: var(--ink); background: rgba(240, 240, 238, 0.8);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  padding: 0.32vw 0.84vw 0.44vw; border-radius: 1.1vw; white-space: nowrap;
}
.card__overlay {
  position: absolute; z-index: 1; inset: 0; display: flex; justify-content: center; align-items: flex-end;
  opacity: 0; pointer-events: none;
  background: linear-gradient(180deg,
    transparent 30%,
    color-mix(in srgb, var(--tint) 18%, transparent) 46%,
    color-mix(in srgb, var(--tint) 55%, transparent) 62%,
    color-mix(in srgb, var(--tint) 88%, transparent) 78%,
    var(--tint) 100%);
}
/* sized off the card itself, so the label always fits on one line */
.card__content { container-type: inline-size; }
.card__overlay span {
  display: block; margin-bottom: 4.5cqi; color: var(--chalk);
  font-size: 10cqi; line-height: 1.05; white-space: nowrap;
  text-shadow: 0 0.4cqi 3cqi color-mix(in srgb, var(--tint) 60%, transparent);
}
.card--dark .card__overlay span { text-shadow: none; }
.card--dark .card__overlay span { color: var(--ink); }

.card__title { font-size: 2.3vw; line-height: 2.6vw; margin-left: 0.55vw; max-width: 90%; }
.card--smol .card__title { font-size: 1.9vw; line-height: 2.2vw; }

/* awards card */
.card--text .card__content { display: flex; flex-direction: column; justify-content: space-between; padding: 2.6vw 3vw; background: var(--chalk); }
.awards__kicker { text-transform: uppercase; letter-spacing: 0.08em; font-weight: 500; }
.awards__list { list-style: none; display: flex; flex-direction: column; gap: 1.4vw; }
.awards__list li { display: flex; flex-direction: column; }
.award__name { font-size: 4.6vw; line-height: 4.8vw; }
.award__by { color: var(--accent); }

/* ---------- experience */
.experience { margin-bottom: 7vw; }
.experience h2 { margin: 0 0 3vw 0.55vw; max-width: 70vw; }
.jobs { list-style: none; border-top: 1px solid var(--line); }
.jobs li {
  display: grid; grid-template-columns: 1.3fr 1.4fr 1.2fr 0.6fr; gap: var(--gap); align-items: baseline;
  padding: 1.25vw 0.55vw; border-bottom: 1px solid var(--line);
  transition: background-color .4s, padding .5s cubic-bezier(.2, .8, .2, 1);
}
.jobs li:hover { background: rgba(214, 64, 0, 0.04); padding-left: 1.2vw; }
.job__co { font-family: var(--serif); font-size: 2.4vw; line-height: 2.6vw; color: var(--ink); }
.job__yrs { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); }

/* ---------- reach out */
.reach {
  display: flex; flex-direction: column; align-items: center; gap: 1.76vw;
  padding: 6vw 2vw 5vw; border-radius: var(--r);
  background: linear-gradient(180deg, rgba(89, 88, 87, 0.05), 64%, rgba(89, 88, 87, 0));
  box-shadow: inset 0 1px 0 0 var(--line);
  text-align: center;
}
.pill {
  position: relative; display: flex; align-items: center; width: 42vw; height: 5.6vw;
  border-radius: 2.8vw; background: var(--chalk); box-shadow: 0 0 0 1px var(--line), 0 1vw 2vw -1.4vw rgba(22, 22, 14, 0.12);
}
.pill input {
  flex: 1; height: 100%; padding: 0 1vw 0.12vw 2.4vw; border: 0; background: transparent; color: var(--ink);
  font-family: var(--sans); border-radius: inherit;
}
.pill input::placeholder { color: var(--gray); opacity: 1; }
.pill input:focus { outline: none; }
.pill button {
  display: grid; place-items: center; height: 81%; aspect-ratio: 1; margin-right: 0.56vw; border: 0; cursor: pointer;
  border-radius: 2.2vw; background: var(--milk); color: var(--ink);
  box-shadow: inset 0 -1px 0 rgba(89, 88, 87, 0.18);
  transition: background .3s, color .3s;
}
.pill button:hover { background: var(--accent); color: var(--chalk); }
.pill button svg { width: 1.67vw; height: 1.67vw; }
.pill__done { position: absolute; inset: 0; display: grid; place-items: center; opacity: 0; pointer-events: none; }
.socials { display: flex; gap: 2vw; }
.socials a { color: var(--ink); border-bottom: 1px solid transparent; transition: border-color .3s, color .3s; }
.socials a:hover { color: var(--accent); border-color: var(--accent); }

.colophon { margin: 3vw 0.55vw 0; font-size: 1vw; }

/* ---------- 404 */
.lost { min-height: 32vw; }
.lost__home { grid-column: 1 / 3; margin-top: 2vw; }

/* ---------- case page */
.case { padding-top: 6vw; }
.back { display: inline-block; margin: 0 0 3vw 0.55vw; color: var(--ink); }
.back:hover { color: var(--accent); }
.case__kicker { margin-left: 0.55vw; color: var(--accent); }
.case__head h1 { margin: 0.6vw 0 3vw 0.55vw; max-width: 80vw; }
.case__meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin: 0 0.55vw 3vw; padding-top: 1.2vw; border-top: 1px solid var(--line); }
.case__meta dt { font-size: 1vw; text-transform: uppercase; letter-spacing: 0.08em; }
.case__meta dd { color: var(--ink); }
.shot { overflow: hidden; border-radius: var(--r); box-shadow: 0 0 0 1px var(--line); background: var(--chalk); margin-bottom: var(--gap); }
.shot img { width: 100%; height: auto; }
.shots { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.case__intro { font-family: var(--serif); font-size: 3.2vw; line-height: 3.6vw; color: var(--ink); margin: 5vw 0.55vw 6vw; max-width: 78vw; }
.story { display: grid; grid-template-columns: var(--col) var(--col); column-gap: var(--gap); margin: 5vw 0 6vw; }
.story h2 { margin-left: 0.55vw; }
.story p { color: var(--ink); font-size: 1.6vw; line-height: 2.3vw; max-width: 38vw; }
.stats { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); margin: 0 0 7vw; }
.stats li { display: flex; flex-direction: column; gap: 0.4vw; padding: 1.4vw 0.55vw 0; border-top: 1px solid var(--line); font-size: var(--p); color: var(--gray); }
.stat__num { font-size: 7vw; line-height: 7vw; color: var(--tint, var(--accent)); }
.stat__num em { color: inherit; }
.case__nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); margin-bottom: 6vw; }
.case__nav a { display: flex; flex-direction: column; padding: 2vw 2.4vw; border-radius: var(--r); background: var(--chalk); box-shadow: 0 0 0 1px var(--line); transition: transform .5s cubic-bezier(.2, .8, .2, 1); }
.case__nav a:last-child { text-align: right; }
.case__nav a:hover { transform: translateY(-0.4vw); }
.case__nav span { font-size: var(--p); color: var(--gray); }
.case__nav em { font-size: var(--h2); line-height: var(--h2-lh); color: var(--ink); }

/* ---------- toast */
.toast {
  position: fixed; left: 50%; bottom: 2vw; z-index: 50; transform: translate(-50%, 1rem);
  padding: 0.7rem 1.2rem; border-radius: 999px; background: var(--ink); color: var(--chalk);
  font-size: 15px; opacity: 0; pointer-events: none; transition: opacity .3s, transform .4s cubic-bezier(.2, .8, .2, 1);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- motion prefs */
html.js [data-reveal] { opacity: 0; transform: translateY(2.4vw); }
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal] { opacity: 1; transform: none; }
  .dot { animation: none; }
}

/* ---------- phones and small tablets */
@media (max-width: 820px) {
  :root {
    --h1: 44px; --h1-lh: 46px;
    --h2: 34px; --h2-lh: 37px;
    --p: 16px;  --p-lh: 22px;
    --sup: 10px;
    --gap: 16px;
    --col: calc(100vw - 32px);
    --r: 22px;
  }
  body { padding: 20px 16px 16px; }
  .identity, .hero, .story { grid-template-columns: 1fr; row-gap: 18px; }
  .bio, .contact { gap: 4px; margin-left: 0; }
  .link .icon { width: 14px; height: 14px; }
  .cv { width: 86px; }
  .hero { min-height: auto; padding-top: 72px; margin-bottom: 40px; row-gap: 0; }
  .status { flex-wrap: wrap; gap: 8px 18px; justify-content: flex-start; margin: 0 0 12px; }
  .globe { width: 32px; height: 16px; }
  .weather__icon { width: 16px; height: 16px; }
  .now { order: -1; justify-content: flex-start; margin: 0 0 28px; }
  .hero__title { grid-column: 1; margin-left: 0; }
  .row--big, .row--smol, .shots, .case__nav { grid-template-columns: 1fr; }
  .card { gap: 12px; }
  .card--big .card__content, .card--smol .card__content { height: auto; aspect-ratio: 3 / 2; }
  .card--text .card__content { aspect-ratio: auto; padding: 24px; gap: 28px; }
  .card__title, .card--smol .card__title { font-size: 26px; line-height: 29px; margin-left: 2px; }
  .card__overlay { display: none; }
  .tags { opacity: 1; gap: 6px; margin: 14px; }
  .tags > span { font-size: 13px; line-height: 16px; padding: 5px 10px 6px; border-radius: 12px; }
  .tags > span:nth-child(n+4) { display: none; }
  .award__name { font-size: 40px; line-height: 42px; }
  .awards__list { gap: 18px; }
  .experience h2 { margin: 0 0 24px; }
  .jobs li { grid-template-columns: 1fr auto; gap: 2px 12px; padding: 14px 2px; }
  .jobs li:hover { padding-left: 2px; }
  .job__co { font-size: 26px; line-height: 30px; }
  .job__dom { display: none; }
  .job__yrs { grid-row: 1; grid-column: 2; }
  .reach { padding: 48px 16px 40px; gap: 22px; }
  .pill { width: 100%; height: 60px; border-radius: 30px; }
  .pill input { padding-left: 20px; font-size: 16px; }
  .pill button { margin-right: 6px; border-radius: 24px; }
  .pill button svg { width: 20px; height: 20px; }
  .socials { flex-wrap: wrap; justify-content: center; gap: 12px 22px; }
  footer.identity { margin-top: 40px; }
  .colophon { font-size: 13px; margin: 28px 0 0; }
  .case { padding-top: 48px; }
  .back { margin: 0 0 24px; }
  .case__kicker, .case__head h1, .case__meta, .story h2 { margin-left: 0; }
  .case__head h1 { margin-bottom: 24px; }
  .case__meta { grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 14px; margin-right: 0; }
  .case__meta dt { font-size: 12px; }
  .case__intro { font-size: 28px; line-height: 32px; margin: 36px 0 48px; }
  .story { margin: 40px 0 44px; }
  .story p { font-size: 17px; line-height: 26px; max-width: none; }
  .stats { grid-template-columns: 1fr; margin-bottom: 48px; }
  .stats li { padding: 14px 0 0; }
  .stat__num { font-size: 64px; line-height: 64px; }
  .case__nav a { padding: 20px 22px; }
  .toast { bottom: 20px; }
  html.js [data-reveal] { transform: translateY(24px); }
}