/* ---- fonts ---- */
/* All three are variable fonts, latin subset only, self hosted.
   Fraunces defaults to wght 900, so every rule using it sets a weight. */
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/fraunces-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'Inter Tight';
  src: url('/assets/fonts/inter-tight-latin-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-latin-var.woff2') format('woff2');
  font-weight: 400 800;
  font-display: swap;
}

/* ---- tokens ---- */
:root {
  --bg: #fbfaf8;
  --ink: #17161a;
  --ink-soft: #3d3a44;
  --ink-mute: #6a6672;
  --rule: #e6e2dc;
  --accent: #6f0697;
  --live: #1a7f4b;
  --dark: #0d0d10;
  --dark-ink: #ecebe8;
  --dark-mute: #a5a2ab;

  --serif: 'Fraunces', Georgia, serif;
  --sans: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --measure: 62ch;
  --gutter: 24px;
  --max: 940px;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

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

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }

/* ---- section rhythm ---- */
/* These were inline `style="padding: ..."` on every page, which a media query
   cannot override, so the desktop air carried straight onto a phone. Kept as
   classes so the mobile breakpoint below can tighten them. */
.sec { padding: 0 0 56px; }
.sec--lead { padding-top: 72px; }
.sec--tight { padding-bottom: 40px; }

/* ---- type ---- */
h1, h2, h3 {
  font-family: var(--serif);
  font-weight: 300;
  font-optical-sizing: auto;
  letter-spacing: -.02em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(38px, 6vw, 64px); line-height: 1.03; }
h2 { font-size: clamp(26px, 3.6vw, 36px); line-height: 1.12; }
/* h2 and h3 are both Fraunces, so at similar sizes they read as the same
   level. h3 is held down in size and pushed up in weight to separate them. */
h3 { font-size: 19px; line-height: 1.3; font-weight: 500; letter-spacing: -.01em; }
p { margin: 0 0 1em; max-width: var(--measure); }
.lede { font-size: clamp(17px, 2.2vw, 20px); color: var(--ink-soft); margin-bottom: 2em; }
.label {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 14px;
}
a { color: var(--accent); text-decoration: none; border-bottom: 1px solid currentColor; }
a:hover { color: var(--ink); }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---- chrome ---- */
/* The header is also a .wrap, so it must not use the `padding` shorthand:
   `padding: 26px 0` would reset the horizontal half and wipe out the
   --gutter that .wrap sets, because both rules have the same specificity
   and this one comes later. Above 988px it only showed as the header
   sitting 24px wider than the body content it is meant to line up with,
   but on a phone it pinned the logo to x=0 and pushed the nav flush
   against the right screen edge, with no gutter left at all.
   padding-block only ever touches the vertical axis, so the gutter holds. */
.site-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding-block: 26px;
  border-bottom: 1px solid var(--rule);
}
/* The mark is trimmed to the artwork itself (406x287, about 1.4:1), so this
   height is the height of the Z rather than the height of a mostly empty
   square canvas. 30px gives roughly 42px wide, compact enough that the nav
   stays on one line at every width. */
.site-head img { height: 30px; width: auto; }
.site-logo { border-bottom: 0; }
.site-nav { display: flex; gap: 26px; }
.site-nav a { font-size: 14px; color: var(--ink); border-bottom: 0; }
.site-nav a:hover { color: var(--accent); }

/* ---- work index rows ---- */
.work-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--rule);
}
.work-row:first-of-type { border-top: 1px solid var(--ink); }
.work-num { font-family: var(--mono); font-weight: 400; font-size: 10px; color: var(--accent); }
.work-name { font-family: var(--serif); font-weight: 400; font-size: 19px; }
.work-what { font-size: 13.5px; color: var(--ink-mute); }

/* ---- status ---- */
.status {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.status-live { color: var(--live); }
.status-dev, .status-delivered { color: var(--ink-soft); font-weight: 500; }

/* ---- case study ---- */
.case-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 14px;
  margin: 56px 0 32px;
}
.block { margin: 0 0 40px; }
/* Two serif headings back to back need a beat between them. */
h2 + .block { margin-top: 24px; }
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 28px;
  border-top: 1px solid var(--rule);
}
.seg > div { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.seg h4 { font-family: var(--serif); font-weight: 400; font-size: 16px; margin: 0 0 4px; }
.seg p { font-size: 13px; color: var(--ink-mute); margin: 0; max-width: none; }
.eng { list-style: none; padding: 0; margin: 0; }
.eng li {
  font-size: 14.5px;
  color: var(--ink-soft);
  padding: 10px 0 10px 22px;
  border-top: 1px solid var(--rule);
  position: relative;
}
/* Bullet, not an em dash: the site copy rule bans em dashes and that
   includes generated content. */
.eng li::before { content: "\2022"; position: absolute; left: 0; color: var(--accent); }
.pull {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(22px, 3.2vw, 30px);
  line-height: 1.3;
  border-left: 2px solid var(--accent);
  padding-left: 24px;
  max-width: 32ch;
}
figure { margin: 0 0 12px; }
figcaption { font-size: 12.5px; color: var(--ink-mute); margin-top: 8px; }

/* ---- dark contact band ---- */
.contact { background: var(--dark); color: var(--dark-ink); margin-top: 80px; padding: 64px 0; }
.contact h2 { color: var(--dark-ink); }
.contact p { color: var(--dark-mute); }
.contact a { color: var(--dark-ink); border-bottom-color: #4a4a55; }
.contact a:hover { color: #fff; }
.contact a:focus-visible { outline-color: var(--dark-ink); }
.contact-actions { display: flex; gap: 28px; flex-wrap: wrap; margin-top: 22px; }

/* ---- footer ---- */
.site-foot { background: var(--dark); color: var(--dark-mute); padding: 0 0 40px; font-size: 12.5px; }
.site-foot .wrap { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---- responsive ---- */
@media (max-width: 768px) {
  .seg { grid-template-columns: 1fr; }
  .seg > div { padding: 16px 0; }
  .seg p { font-size: 14px; line-height: 1.55; }
  .eng li { font-size: 15px; }
  .pull { padding-left: 18px; }

  /* The mark is only about 38px wide, so logo and nav fit on one line again
     and the header does not need to wrap. */
  .site-head { padding-block: 20px; gap: 12px; }
  .site-head img { height: 27px; }
  .site-nav { gap: 18px; }
  .site-nav a { font-size: 13px; }

  /* Name and description ran together on one line, so the project name was
     lost inside its own sentence. Break the description onto its own line. */
  .work-row { flex-direction: column; align-items: flex-start; gap: 0; padding: 24px 0; }
  .work-what { display: block; margin-top: 7px; font-size: 15px; line-height: 1.5; }
  .work-row .status { margin-top: 8px; }
  .work-row > span:last-child { margin-top: 12px; }

  .case-top { flex-direction: column; align-items: flex-start; gap: 6px; margin-top: 36px; }
  .sec { padding-bottom: 44px; }
  .sec--lead { padding-top: 44px; }
  .sec--tight { padding-bottom: 34px; }
  .contact { padding: 48px 0; margin-top: 56px; }
}