/* ==========================================================================
   Fonts: self-hosted. Inter/Sora/JetBrains Mono/Caveat from fonz.be,
   Inter ExtraBold/Black from the previous kristofvc.be, Fraunces as used
   on loeswesselink.nl, Kalam/Nunito from the Weekly Buds web build.
   ========================================================================== */

@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-extrabold.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "Inter"; src: url("/assets/fonts/inter-black.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/assets/fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/assets/fonts/caveat-latin.woff2") format("woff2"); font-weight: 500 600; font-display: swap; }
@font-face { font-family: "Sora"; src: url("/assets/fonts/sora-latin.woff2") format("woff2"); font-weight: 600 800; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-latin.woff2") format("woff2"); font-weight: 400 600; font-display: swap; }
@font-face { font-family: "Kalam"; src: url("/assets/fonts/kalam-bold-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Nunito"; src: url("/assets/fonts/nunito-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

/* ==========================================================================
   Parent tokens
   ========================================================================== */

:root {
  color-scheme: light;
  --cream: #fdfbf8;
  --paper: #f8f6f2;
  --ink: #1c2130;
  --muted: #5f6577;
  --periwinkle: #7b87d4;
  --periwinkle-deep: #4f5cb0;
  --lavender: #efedf9;
  --rule: rgba(28, 33, 48, 0.13);

  --max: 1320px;
  /* Outer edge for the work screenshots on very wide screens: they bleed to
     the window edge up to this width and are cut at it beyond. */
  --frame: 1600px;
  --gutter: clamp(20px, 4vw, 56px);

  /* Shared 50/50 split for the About band and the Contact section, so their columns line up. */
  --split-cols: minmax(0, 1fr) minmax(0, 1fr);
  --split-gap: clamp(32px, 5vw, 96px);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 400 1rem/1.55 var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
h2, h3 { font-weight: inherit; }

:focus-visible { outline: 3px solid var(--periwinkle-deep); outline-offset: 3px; border-radius: 2px; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -100px;
  z-index: 10;
  padding: 10px 16px;
  background: var(--ink);
  color: #fff;
  text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }

.band { position: relative; overflow: hidden; }

/* Shared bits ----------------------------------------------------------- */

.num { font: 500 0.8125rem/1 var(--font-mono); letter-spacing: 0.02em; color: var(--muted); }

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(18px, 2.2vw, 30px);
  font: 400 0.8125rem/1.4 var(--font-mono);
  color: var(--muted);
}

.hand { font-family: var(--font-hand); font-weight: 500; }

.hand-arrow {
  display: block;
  width: 3em;
  height: auto;
  margin: 0.25em 0 0 2.6em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.brand-row { display: flex; align-items: center; gap: clamp(16px, 2.8vw, 40px); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  min-height: 44px;
  padding: 0.7em 1.35em;
  border: 1.5px solid transparent;
  border-radius: 4px;
  font: 500 1rem/1.2 var(--font-sans);
  text-decoration: none;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn .arrow { transition: transform 0.2s; }
.btn:hover .arrow { transform: translateX(3px); }
.btn--sm { padding: 0.55em 1.1em; font-size: 0.9375rem; }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: #333a4f; }
.btn--outline { border-color: var(--ink); color: var(--ink); }
.btn--outline:hover { background: var(--ink); color: #fff; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn .arrow, .nav a { transition: none; }
}

/* ==========================================================================
   Header + hero
   ========================================================================== */

.site-header { position: absolute; inset: 0 0 auto; z-index: 3; padding-block: clamp(12px, 1.1vw, 18px); }
.site-header__inner { display: flex; align-items: center; gap: clamp(24px, 3.6vw, 56px); }

.wordmark {
  font: 700 clamp(1.9rem, 3.1vw, 2.75rem)/1 var(--font-sans);
  letter-spacing: -0.055em;
  color: var(--ink);
  text-decoration: none;
}
.wordmark__vc { font-weight: 900; }
.wordmark--sm { font-size: 1.5rem; }

.nav { display: flex; gap: clamp(18px, 2.6vw, 40px); font-size: 0.9375rem; font-weight: 500; }
.nav a {
  padding-block: 6px;
  text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size 0.2s;
}
.nav a:hover { background-size: 100% 1.5px; }

.hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(600px, 46vw, 900px);
  overflow: hidden;
  background: var(--cream);
}
.hero__inner { position: relative; z-index: 2; padding-block: clamp(110px, 10vw, 150px) clamp(40px, 4vw, 64px); }

.prompt { margin-bottom: clamp(12px, 1.4vw, 20px); font: 400 clamp(0.875rem, 1.1vw, 1rem)/1 var(--font-mono); color: var(--muted); }

.hero__intro {
  margin-bottom: clamp(10px, 1.2vw, 18px);
  font-size: clamp(1.0625rem, 1.6vw, 1.5rem);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.hero__title {
  margin-left: -0.05em;
  font: 900 min(9.4vw, 152px)/0.86 var(--font-sans);
  letter-spacing: -0.065em;
}
.hero__title span { display: block; }
.hero__accent { color: var(--periwinkle); padding-bottom: 0.06em; }

.hero__lede {
  max-width: 16em;
  margin-top: clamp(20px, 2.4vw, 36px);
  font-size: clamp(1.125rem, 2.05vw, 1.875rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
}

.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px clamp(24px, 4.5vw, 64px); margin-top: clamp(20px, 2.6vw, 36px); }
.hero .btn--ink { gap: 1.6em; padding: 0.85em 1.6em; font-size: clamp(1rem, 1.3vw, 1.125rem); }

.link-underline {
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}
.link-underline:hover { color: var(--periwinkle-deep); }

.hero__media { position: absolute; inset: 0 0 0 auto; z-index: 1; width: 63%; }
/* The photo is wider (3:2) than the box, so it overflows sideways. It stays
   anchored left: its cream strip is only 38px wide at the narrowest point, so
   any left crop would cut into the photo. The overflow is taken from the
   right, where the terminal is not. */
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 0% 0%; }

/* Narrow desktops: a slightly narrower photo keeps its lower-left point clear
   of the hero buttons. */
@media (min-width: 861px) and (max-width: 1000px) {
  .hero__media { width: 60%; }
}

/* Very wide screens: a faded crop of the desk photo (scripts/hero-left-glow.py)
   fills the empty margin left of the text and stops 24px before it. */
@media (min-width: 1680px) {
  .hero::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: calc((100% - var(--max)) / 2 - 24px);
    background: url("/assets/img/hero-left-glow-700.jpg") right center / cover no-repeat;
    background-image: image-set(url("/assets/img/hero-left-glow-700.webp") type("image/webp"), url("/assets/img/hero-left-glow-700.jpg") type("image/jpeg"));
    pointer-events: none;
  }
}

/* Focus strip below the hero ------------------------------------------------ */

.focus { background: var(--cream); }

.focus__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: center;
  column-gap: clamp(24px, 3vw, 48px);
  padding-block: clamp(18px, 1.8vw, 26px);
  padding-inline: clamp(0px, 5vw, 72px);
  border-bottom: 1px solid var(--rule);
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  color: #2b3560;
}
.focus__list li { display: flex; align-items: center; gap: clamp(16px, 3vw, 48px); }
.focus__list li::after { content: ""; flex: 1; max-width: 170px; height: 2px; border-radius: 1px; background: var(--line); }
.focus__list li:nth-child(1) { --line: #a9b0cb; }
.focus__list li:nth-child(2) { --line: #4f9cf0; }
.focus__list li:nth-child(3) { --line: #9a4ff0; }
.focus__list li:nth-child(4) { --line: #f0a060; }

/* ==========================================================================
   01 Weekly Buds
   ========================================================================== */

.wb {
  --wb-ink: #1e2a36;
  --wb-muted: #696875;
  --wb-green: #287a51;
  color: var(--wb-ink);
  background: #fdfcf8 url("/assets/img/bg-weeklybuds-2172.jpg") center / cover no-repeat;
  background-image: image-set(url("/assets/img/bg-weeklybuds-2172.webp") type("image/webp"), url("/assets/img/bg-weeklybuds-2172.jpg") type("image/jpeg"));
}

.wb__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.55fr) minmax(0, 0.85fr) minmax(0, 0.42fr);
  column-gap: clamp(16px, 2vw, 32px);
  align-items: center;
  min-height: clamp(380px, 25.5vw, 480px);
  padding-top: clamp(32px, 3.4vw, 56px);
}

.wb__copy { padding-left: 4vw; padding-bottom: clamp(32px, 3vw, 48px); }
.wb__title { display: flex; align-items: center; gap: 0.16em; white-space: nowrap; font: 700 clamp(2rem, 3.8vw, 3.6rem)/1.05 "Kalam", var(--font-hand); color: #1f4b4c; }
.wb__title picture { flex: none; display: block; }
.wb__sprout { display: block; width: auto; height: 0.8em; transform: translateY(-0.1em); }
.wb__tagline { margin-top: clamp(8px, 1vw, 14px); font: 400 clamp(1.0625rem, 1.6vw, 1.4rem)/1.3 "Nunito", var(--font-sans); }
.wb__desc { max-width: 28em; margin-top: clamp(10px, 1.2vw, 18px); font: 400 clamp(0.95rem, 1.25vw, 1.125rem)/1.4 "Nunito", var(--font-sans); color: var(--wb-muted); }
.wb .btn { margin-top: clamp(18px, 2vw, 28px); }
.btn--wb { background: var(--wb-green); color: #fff; border-radius: 3px; }
.btn--wb:hover { background: #1f6242; }
.wb .tags { margin-top: clamp(16px, 2vw, 28px); color: var(--wb-muted); }

.wb__note { justify-self: center; max-width: 9em; font-size: clamp(1.3rem, 2.1vw, 2rem); line-height: 1.15; transform: rotate(-9deg); }
.wb__note .hand-arrow { transform: rotate(10deg); }
.wb__note2 { align-self: start; justify-self: start; margin-top: clamp(24px, 3vw, 48px); font-size: clamp(1.15rem, 1.6vw, 1.6rem); line-height: 1.2; white-space: nowrap; transform: rotate(-8deg); }

/* CSS-only crop of the original image to the phone itself: source px
   188–738 × 20–770, clipped on the phone's own outline (51px corner radius
   in the 1024px source), so the annotations and cream ground stay out. */
.wb__shot {
  position: relative;
  display: block;
  align-self: end;
  justify-self: center;
  width: 100%;
  max-width: 400px;
  aspect-ratio: 550 / 750;
  overflow: hidden;
  border-radius: 9.27% 9.27% 0 0 / 6.8% 6.8% 0 0;
  box-shadow: 0 24px 48px -28px rgba(30, 42, 54, 0.35);
}
.wb__shot img { position: absolute; top: 0; left: -34.18%; width: 186.18%; max-width: none; transform: translateY(-1.302%); }

/* ==========================================================================
   02 momcorp
   ========================================================================== */

.mc { container-type: inline-size; background: #091a23; color: #fff; }

.mc__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 42%);
  min-height: clamp(340px, 21vw, 440px);
  padding-inline-end: max(0px, (100cqi - var(--frame)) / 2);
}

.mc__copy {
  padding-block: clamp(36px, 3.6vw, 56px);
  padding-inline: max(var(--gutter), calc((100cqi - var(--max)) / 2)) clamp(20px, 3vw, 48px);
}
.mc .num { color: #8c9aa6; }
.mc__title { display: flex; align-items: center; gap: 0.3em; font: 800 clamp(2rem, 3.7vw, 3.4rem)/1 var(--font-sans); letter-spacing: -0.045em; }
.mc__title picture { flex: none; display: block; }
.mc__logo { display: block; width: 1.15em; height: 1.15em; border-radius: 50%; }
.mc__tagline { margin-top: clamp(12px, 1.4vw, 20px); font-size: clamp(1.0625rem, 1.6vw, 1.4rem); line-height: 1.3; }
.mc__desc { max-width: 30em; margin-top: clamp(8px, 1vw, 14px); font-size: clamp(0.95rem, 1.25vw, 1.125rem); line-height: 1.45; color: #d5dde3; }
.tags--dark { color: #9aabb7; }
.mc .tags { margin-top: clamp(20px, 2.4vw, 36px); }

.mc__tree {
  margin: 0;
  padding: clamp(28px, 3vw, 48px) clamp(18px, 2vw, 32px);
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  font: 400 clamp(0.8rem, 1vw, 0.95rem)/1.75 var(--font-mono);
  color: #dbe3e8;
  white-space: pre;
}

/* Real dashboard screenshot, anchored top-left and bleeding off the right and
   bottom edges (CSS crop only); the left edge fades into the section navy. */
.mc__shot { position: relative; margin: 0; min-height: 260px; overflow: hidden; background: #11151f; }
.mc__shot img { position: absolute; top: 0; left: 0; width: 140%; max-width: none; }
.mc__shot::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: clamp(16px, 2vw, 32px);
  background: linear-gradient(90deg, #091a23, rgba(9, 26, 35, 0));
  pointer-events: none;
}

/* Beyond the frame width the work screenshots are cut at the frame edge;
   fade them out over the last 160px instead of cutting hard. */
@media (min-width: 1601px) {
  .mc__shot::before { content: ""; position: absolute; inset: 0 0 0 auto; z-index: 1; width: 160px; background: linear-gradient(270deg, #091a23, rgba(9, 26, 35, 0)); pointer-events: none; }

  /* Fonz and Loes overhang the content edge by --gutter + 6vw and are clipped
     (--frame - --max) / 2 past it, so they turn transparent from --cut onwards. */
  .fz__frame, .lw__frame {
    --cut: calc(var(--gutter) + 6vw - (var(--frame) - var(--max)) / 2);
    -webkit-mask-image: linear-gradient(to left, transparent var(--cut), #000 calc(var(--cut) + 160px));
    mask-image: linear-gradient(to left, transparent var(--cut), #000 calc(var(--cut) + 160px));
  }
}

/* ==========================================================================
   03 Fonz (tokens from fonz.be)
   ========================================================================== */

.fz {
  color: #fff;
  background: #0b1020 url("/assets/img/bg-fonz-2172.jpg") center / cover no-repeat;
  background-image: image-set(url("/assets/img/bg-fonz-2172.webp") type("image/webp"), url("/assets/img/bg-fonz-2172.jpg") type("image/jpeg"));
}
.fz :focus-visible { outline-color: #3ccbff; }

.fz__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  column-gap: clamp(24px, 3vw, 56px);
  align-items: center;
  min-height: clamp(440px, 28vw, 560px);
  clip-path: inset(-100vh calc((var(--max) - var(--frame)) / 2) -100vh -100vw);
}

.fz__copy { padding-block: clamp(36px, 3.6vw, 60px); }
.fz .num { color: #aab3cc; }
.fz__logo { width: auto; height: clamp(30px, 3vw, 44px); }

.fz__eyebrow {
  margin-top: clamp(14px, 1.6vw, 22px);
  font: 600 clamp(0.6875rem, 0.85vw, 0.8125rem)/1.3 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #3ccbff;
}

.fz__headline {
  max-width: 11em;
  margin-top: clamp(10px, 1.2vw, 16px);
  font: 700 clamp(2rem, 3.7vw, 3.6rem)/1.06 "Sora", var(--font-sans);
  letter-spacing: -0.02em;
}
.fz__grad {
  white-space: nowrap;
  background: linear-gradient(90deg, #3ccbff, #7a3ff2 55%, #ff2d8f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.fz__desc { max-width: 33em; margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(0.95rem, 1.2vw, 1.1rem); line-height: 1.5; color: #c8cfe2; }
.fz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: clamp(18px, 2vw, 28px); }
.fz__actions .tags { flex: 1 1 15em; column-gap: 18px; }
.fz .tags { color: #aab3cc; }

.btn--pink { background: #e0187a; color: #fff; border-radius: 999px; font-weight: 600; box-shadow: 0 10px 24px -10px rgba(255, 45, 143, 0.7); }
.btn--pink:hover { background: #c9136c; }

/* Runs from the top padding to 40px past the section line (so the tilted
   bottom stays on it) and shows as much of the screenshot as that height
   allows, never past the image's bottom (81.9cqi = its height at this width). */
.fz__shot {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 calc(-1 * var(--gutter) - 6vw) -40px 0;
  padding-top: clamp(36px, 3.6vw, 60px);
  container-type: inline-size;
  transform: rotate(-2deg);
  transform-origin: left bottom;
}
.fz__frame {
  position: relative;
  height: min(100%, 81.9cqi);
  overflow: hidden;
  border-radius: clamp(10px, 1vw, 16px);
  box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.fz__frame img { position: absolute; top: 0; left: 0; width: 100%; }

/* ==========================================================================
   04 Loes Wesselink (tokens from loeswesselink.nl)
   ========================================================================== */

.lw {
  --lw-ink: #314a63;
  --lw-soft: #55647a;
  --lw-deep: #7e56ac;
  color: var(--lw-ink);
  background: #fbf8f4 url("/assets/img/bg-loes-2172.jpg") center / cover no-repeat;
  background-image: image-set(url("/assets/img/bg-loes-2172.webp") type("image/webp"), url("/assets/img/bg-loes-2172.jpg") type("image/jpeg"));
}

.lw__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 0.3fr) minmax(0, 1.05fr);
  column-gap: clamp(16px, 2.4vw, 40px);
  align-items: center;
  min-height: clamp(400px, 27vw, 520px);
  clip-path: inset(-100vh calc((var(--max) - var(--frame)) / 2) -100vh -100vw);
}

.lw__copy { padding-block: clamp(36px, 3.4vw, 56px); }
.lw .num { color: var(--lw-soft); }
.lw__lockup { display: flex; align-items: center; gap: 0.7rem; }
.lw__mark { flex: none; width: clamp(34px, 3vw, 44px); height: auto; }
.lw__name { display: flex; flex-direction: column; font: 500 clamp(1.25rem, 1.9vw, 1.75rem)/1.05 "Fraunces", Georgia, serif; }
.lw__tagline { margin-top: 0.35rem; font: 600 clamp(0.575rem, 0.7vw, 0.68rem)/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--lw-deep); }

.lw__headline { margin-top: clamp(18px, 2.2vw, 32px); font: 500 clamp(2.6rem, 4.8vw, 4.6rem)/0.98 "Fraunces", Georgia, serif; letter-spacing: -0.02em; }
.lw__desc { max-width: 34em; margin-top: clamp(14px, 1.6vw, 22px); font-size: clamp(0.95rem, 1.25vw, 1.125rem); line-height: 1.45; color: var(--lw-soft); }
.lw__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 36px; margin-top: clamp(16px, 1.8vw, 26px); }
.lw .tags { color: var(--lw-soft); }

.btn--loes { background: var(--lw-deep); color: #fff; border-radius: 3px; }
.btn--loes:hover { background: #6a4596; }

.lw__note { justify-self: start; margin-bottom: 18%; font-size: clamp(1.3rem, 2.1vw, 2rem); line-height: 1.12; transform: rotate(-14deg); }
.lw__note .hand-arrow { transform: rotate(18deg); }

/* Runs from the top padding down to the section line and shows as much of
   the screenshot as that height allows, but never past the image's bottom
   (84.4cqi = the image's height at the column's width). */
.lw__shot {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  margin: 0 calc(-1 * var(--gutter) - 6vw) 0 0;
  padding-top: clamp(36px, 3.4vw, 56px);
  container-type: inline-size;
}
.lw__frame {
  position: relative;
  height: min(100%, 84.4cqi);
  overflow: hidden;
  border-radius: clamp(10px, 1vw, 14px) clamp(10px, 1vw, 14px) 0 0;
  box-shadow: 0 30px 60px -30px rgba(49, 74, 99, 0.35), 0 0 0 1px rgba(49, 74, 99, 0.08);
}
.lw__frame img { position: absolute; top: 0; left: 0; width: 100%; }

/* ==========================================================================
   05 About
   ========================================================================== */

.ac { background: var(--paper); border-top: 1px solid var(--rule); }

.ac__about { display: grid; grid-template-columns: var(--split-cols); }

.ac__intro { display: flex; gap: clamp(16px, 2.6vw, 36px); padding-block: clamp(28px, 3vw, 44px); padding-inline-end: calc(var(--split-gap) / 2); }
.ac .num { padding-top: 0.3em; }

.ac h2 { font: 700 clamp(1.125rem, 1.5vw, 1.375rem)/1.2 var(--font-sans); letter-spacing: -0.01em; }
.ac__body { max-width: 26em; margin-top: 6px; font-size: clamp(0.875rem, 1vw, 0.95rem); line-height: 1.45; color: var(--muted); }
.ac .btn { margin-top: clamp(14px, 1.6vw, 22px); }

.ac__quote {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: clamp(12px, 1.6vw, 24px);
  position: relative;
  padding-block: clamp(24px, 2.6vw, 40px);
  padding-inline: calc(var(--split-gap) / 2) 0;
  background: var(--lavender);
}
.ac__quote::after { content: ""; position: absolute; inset: 0 auto 0 100%; width: 50vw; background: var(--lavender); }
.ac__mark { align-self: start; font: 900 clamp(3rem, 5vw, 4.5rem)/0.8 var(--font-sans); color: var(--periwinkle); }
.ac__quote blockquote p { font: italic 400 clamp(1rem, 1.4vw, 1.25rem)/1.3 var(--font-sans); }
.ac__interests { font: 400 clamp(0.72rem, 0.85vw, 0.8rem)/1.7 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #6f7488; }

/* ==========================================================================
   06 Contact
   ========================================================================== */

.cf { background: var(--cream); border-top: 1px solid var(--rule); }

.cf__inner {
  display: grid;
  grid-template-columns: var(--split-cols);
  gap: var(--split-gap);
  align-items: start;
  padding-block: clamp(48px, 6vw, 96px);
}

.cf__intro { display: flex; gap: clamp(16px, 2.6vw, 36px); }
.cf .num { padding-top: clamp(10px, 1.3vw, 18px); }
.cf__title { font: 800 clamp(1.75rem, 3vw, 2.6rem)/1.08 var(--font-sans); letter-spacing: -0.035em; }
.cf__body { max-width: 24em; margin-top: clamp(10px, 1.2vw, 16px); font-size: clamp(1rem, 1.2vw, 1.125rem); line-height: 1.5; color: var(--muted); }
.cf .socials { margin-top: clamp(18px, 2vw, 28px); margin-left: -8px; }

.socials { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 22px); }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--ink); text-decoration: none; }
.socials a:hover { color: var(--periwinkle-deep); }
.socials svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.socials svg path[fill] { stroke: none; }
.socials__in { font: 800 30px/1 var(--font-sans); letter-spacing: -0.04em; }

/* Contact form (posts to Discord, see contact.js). Hidden until the script runs. */
.contact-form { display: grid; gap: 14px; }
.contact-form[hidden] { display: none; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(11em, 1fr)); align-items: start; gap: 12px; }
.form-field { display: grid; align-content: start; gap: 4px; min-width: 0; }
.form-field label { font-size: 0.8125rem; font-weight: 600; color: var(--ink); }
.form-field input,
.form-field textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid rgba(28, 33, 48, 0.22);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.9375rem;
  resize: vertical;
}
.form-field input:focus-visible,
.form-field textarea:focus-visible { border-color: var(--periwinkle-deep); outline: 3px solid var(--periwinkle-deep); outline-offset: 1px; }
.form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: 0.875rem; font-weight: 600; }
.form-note--success { color: #1f7a4d; font-size: 1rem; }
.form-note--error { color: #b3261e; }
.contact-form .btn { justify-self: start; margin-top: 0; }
.contact-form .btn:disabled { opacity: 0.6; cursor: progress; }
.form-error { font-size: 0.8125rem; color: #b3261e; }
.form-field [aria-invalid="true"] { border-color: #b3261e; }

/* Footer ------------------------------------------------------------------ */

.site-footer { background: var(--paper); border-top: 1px solid var(--rule); }
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px clamp(20px, 3vw, 40px);
  padding-block: 18px 22px;
  font-size: 0.875rem;
  color: var(--muted);
}
.site-footer__id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-right: auto; }
.site-footer__id .wordmark { color: var(--ink); }
.site-footer__rule { width: 28px; height: 1.5px; background: currentColor; }
.site-footer__top {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 44px;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
}
.site-footer__top:hover { text-decoration: underline; text-underline-offset: 0.3em; }

/* ==========================================================================
   Narrow screens: stack everything, drop overlaps and crops.
   ========================================================================== */

@media (max-width: 860px) {
  .site-header { position: static; }
  .site-header__inner { flex-wrap: wrap; justify-content: space-between; row-gap: 8px; }

  .hero { display: block; min-height: 0; }
  .hero__inner { padding-block: 24px 40px; }
  .hero__title { font-size: clamp(4rem, 21vw, 7.5rem); }
  .hero__lede { font-size: 1.25rem; }
  .hero__intro { font-size: 1.125rem; }
  .br-wide { display: none; }

  .focus__list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 14px; padding-inline: 0; }
  .hero__media { position: relative; inset: auto; width: 100%; }
  .hero__media img { height: auto; aspect-ratio: 1536 / 1024; }

  .wb { background-size: auto 340px; background-position: right bottom; }
  .wb__inner { grid-template-columns: minmax(0, 1fr); row-gap: 28px; min-height: 0; padding-top: 48px; }
  .wb__copy { padding: 0; }
  .wb__title { font-size: 2.5rem; }
  .wb__note { justify-self: start; transform: rotate(-4deg); max-width: none; }
  .wb__note2, .hand-arrow { display: none; }
  .wb__shot { max-width: 360px; }

  .mc__inner { grid-template-columns: minmax(0, 1fr); }
  .mc__title { font-size: 2.25rem; }
  .mc__copy { padding-inline: var(--gutter); }
  .mc__tree { padding-inline: var(--gutter); border-left: 0; border-top: 1px solid rgba(255, 255, 255, 0.22); }
  .mc__shot { min-height: 0; aspect-ratio: 4 / 3; }
  .mc__shot img { width: 190%; }

  .fz__inner, .lw__inner { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .fz__shot, .lw__shot { margin: 0 0 48px; transform: none; }
  .fz__frame, .lw__frame { aspect-ratio: auto; border-radius: 12px; }
  .fz__frame img, .lw__frame img { position: static; }

  .lw { background-size: auto 360px; background-position: left bottom; }
  .lw__note { margin: 0 0 28px; transform: rotate(-4deg); }
  .fz__shot, .lw__shot { display: block; padding-top: 0; }
  .fz__frame, .lw__frame { height: auto; }

  .ac__about { grid-template-columns: minmax(0, 1fr); }
  .ac__quote { margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); }
  .ac__quote::after { display: none; }

  .cf__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-block: 48px; }
  /* Line the form up with the heading, which sits next to the "06" (two mono digits + gap). */
  .cf .contact-form, .cf .form-note--success { margin-left: calc(2 * 0.6 * 0.8125rem + clamp(16px, 2.6vw, 36px)); }
}