:root {
  --bg: #e6dbc7;
  --surface: #ddd0b9;
  --ink: #062b8a;
  --muted: #3a5aa8;
  --accent: #062b8a;
  --accent-ink: #e6dbc7;
  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.7vw, 1.625rem);
  --step-head: clamp(2rem, 1.3rem + 3.2vw, 4rem);
  --m: clamp(20px, 2vw, 28px);
  --g: max(var(--m), calc(50vw - 720px));
  --ease: cubic-bezier(.16, 1, .3, 1);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; touch-action: manipulation; }
.skip { position: absolute; left: var(--g); top: -100px; z-index: 9; }
.skip:focus { top: 16px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 var(--step-body)/1.5 "Erode", Georgia, serif;
  font-kerning: normal;
}
a { color: inherit; text-underline-offset: .18em; text-decoration-thickness: 1px; transition: opacity .2s; }
a:hover { opacity: .7; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
::selection { background: var(--ink); color: var(--bg); }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { font-weight: 500; letter-spacing: -.025em; line-height: .95; margin: 0; text-wrap: balance; }
p { margin: 0; }
.wrap { padding-inline: var(--g); }
.btn {
  display: inline-flex; align-items: center; min-height: 48px; padding: 0 24px;
  background: var(--ink); color: var(--accent-ink); text-decoration: none;
  font-size: 19px; font-weight: 600; transition: transform .2s var(--ease), opacity .2s;
}
.btn:hover { opacity: 1; transform: translateY(-2px); }
.btn:active { transform: translateY(1px); }

/* The signature: what got replaced, struck through in the ink */
.struck { position: relative; white-space: nowrap; color: var(--muted); }
.struck::after {
  content: ""; position: absolute; left: -.08em; right: -.08em; top: 55%;
  height: max(2px, .08em); background: var(--ink);
  transform: rotate(-1.2deg) scaleX(0); transform-origin: left center;
  transition: transform .6s var(--ease) var(--d, 0s);
}
.struck.on::after, html:not(.js) .struck::after { transform: rotate(-1.2deg) scaleX(1); }

/* Hero: one word, cropped */
.hero { position: relative; overflow: hidden; }
.bar { display: flex; justify-content: space-between; align-items: baseline; padding: 28px var(--g) 0; }
.bar b { font-weight: 600; }
.bar nav { display: flex; gap: 24px; }
.hero-copy { padding: 56px var(--g) 0; max-width: calc(34ch + 2 * var(--g)); }
.hero-copy p { font-size: var(--step-lead); line-height: 1.3; margin-bottom: 28px; }
.word {
  margin: 48px 0 0 -.02em; padding-bottom: .04em;
  font-size: 26vw; font-weight: 600; line-height: .85;
  letter-spacing: -.04em; white-space: nowrap;
}
.word span { display: inline-block; }
.js .word span { transform: translateY(105%); animation: rise 1s var(--ease) .15s forwards; }
.js .hero-copy { opacity: 0; animation: fade .7s var(--ease) .6s forwards; }
@keyframes rise { to { transform: none; } }
@keyframes fade { to { opacity: 1; } }

/* Intro: lead line over four columns */
.intro { padding-block: 72px 56px; }
.lead { font-size: var(--step-lead); line-height: 1.2; max-width: 52ch; }
.top { display: flex; justify-content: space-between; align-items: start; gap: 40px; }
.top img { width: clamp(200px, 20vw, 300px); }
.cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 48px; font-size: var(--step-body); line-height: 1.45; }
.cols b { color: var(--ink); font-weight: 600; }

/* Work: names as one paragraph */
.work { padding-block: 72px; background: var(--surface); }
.names { list-style: none; margin: 0; padding: 0; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.1; letter-spacing: -.025em; }
.names li { display: inline; }
.names li:not(:first-child):not(:last-child)::after { content: ","; }
.names .lead-in { color: var(--ink); }
.names a { text-decoration: none; color: var(--muted); }
.names a:hover, .names a:focus-visible { color: var(--ink); opacity: 1; }
.frame { display: inline-block; width: 1.2em; height: .8em; overflow: hidden; vertical-align: -.02em; margin-left: .15em; }
.frame img { width: 100%; height: 100%; object-fit: cover; transform-origin: left center; transition: transform .4s var(--ease); }
.names a:hover .frame img { transform: scale(1.15); }
.count { margin-top: 32px; font-size: var(--step-small); }

/* Projects in detail: tile beside the record */
.detail { display: grid; grid-template-columns: 5fr 7fr; gap: 48px; padding-block: 96px; }
.detail figure { margin: 0; position: sticky; top: 24px; align-self: start; overflow: hidden; }
.detail figure img { aspect-ratio: 1; object-fit: cover; width: 100%; }
.detail figcaption { font-size: var(--step-small); color: var(--muted); margin-top: 12px; }
.detail h2 { font-size: var(--step-head); margin-bottom: 40px; }
.entry { padding-bottom: 36px; }
.entry h3 { font-size: var(--step-lead); line-height: 1.05; margin-bottom: 14px; }
.entry p { max-width: 58ch; }
.entry .stack { margin-top: 12px; font-size: var(--step-small); color: var(--muted); }

/* Picture band */
.band { margin: 0; height: 48svh; overflow: hidden; background: var(--surface); }
.band img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.js .band img { transform: scale(1.08); transition: transform 2.4s var(--ease); }
.js .band.on img { transform: scale(1); }

/* Live check: headline you can type */
.check { padding-block: 96px 80px; background: var(--ink); color: var(--bg); }
.check ::selection { background: var(--bg); color: var(--ink); }
.check :focus-visible { outline-color: var(--bg); }
.check h2 { font-size: var(--step-lead); line-height: 1.3; letter-spacing: 0; max-width: 40ch; margin-bottom: 40px; font-weight: 400; }
.domain {
  display: block; width: 100%; background: none; border: 0; padding: 0; margin: 0; color: var(--bg);
  font: 500 clamp(36px, 4.4vw, 64px)/1 "Erode", Georgia, serif; letter-spacing: -.035em; caret-color: var(--bg);
}
.domain:focus { outline: none; }
.domain:focus-visible { outline: 3px solid var(--bg); outline-offset: 8px; }
.results { margin-top: 32px; max-width: 640px; font-size: var(--step-body); }
.row { display: grid; grid-template-columns: 12ch 1fr; gap: 16px; padding: 14px 16px; background: #0b358f; margin-bottom: 4px; }
.row b { font-weight: 600; }
.row .val { overflow-wrap: anywhere; opacity: .85; }
.row.bad b::after { content: " — missing"; font-weight: 400; }
.row.ok b::after { content: " — set"; font-weight: 400; }
.examples { display: flex; flex-wrap: wrap; gap: 8px 24px; margin-top: 32px; font-size: var(--step-small); }
.examples button { all: unset; cursor: pointer; text-decoration: underline; text-underline-offset: .18em; }
.examples button:hover { opacity: .7; }
.examples button:focus-visible { outline: 3px solid var(--bg); outline-offset: 3px; }
.check .note { margin-top: 24px; font-size: var(--step-small); opacity: .8; max-width: 60ch; }

/* About: side facts, wide paragraph */
.about { padding-block: 96px; }
.about .r { display: grid; grid-template-columns: minmax(200px, 30%) 1fr; }
.about .r + .r { margin-top: 72px; }
.facts { display: grid; gap: 20px; font-size: var(--step-small); align-content: start; }
.facts span, .lbl { display: block; color: var(--muted); }
.about .para { font-size: var(--step-lead); line-height: 1.35; max-width: 56ch; }
.aside { margin: 0; width: min(240px, 80%); }
.lbl { margin-bottom: 20px; }
.lists { display: grid; grid-template-columns: repeat(2, minmax(0, 300px)); gap: 64px; }
.lists ul { list-style: none; margin: 0; padding: 0; font-size: var(--step-small); display: grid; gap: 10px; }
.lists li { display: flex; justify-content: space-between; gap: 16px; }
.lists li span { color: var(--muted); text-align: right; }

/* Contact: one field */
.contact { padding-block: 96px; display: grid; place-items: center; }
.contact form { width: min(520px, 100%); }
.prompt { font-size: var(--step-lead); font-weight: 500; line-height: 1.25; margin-bottom: 28px; }
.prompt span { display: block; color: var(--muted); }
.field { position: relative; }
.field input {
  width: 100%; height: 64px; padding: 0 64px 0 20px; border: 0; background: #f4eee3; color: var(--ink);
  font: 400 var(--step-body) "Erode", Georgia, serif;
}
.field input::placeholder { color: var(--muted); }
.field input:focus { outline: 2px solid var(--ink); outline-offset: -2px; }
.field button {
  position: absolute; right: 10px; top: 10px; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--ink); color: var(--accent-ink); font-size: 20px; cursor: pointer; transition: transform .2s var(--ease);
}
.field button:hover { transform: translateX(3px); }
.contact .after { font-size: var(--step-small); color: var(--muted); margin-top: 16px; }
.contact dl { margin: 48px 0 0; display: grid; gap: 14px; font-size: var(--step-small); }
.contact dl div { display: grid; grid-template-columns: 10ch 1fr; }
.contact dt { color: var(--muted); }
.contact dd { margin: 0; }

/* Footer: name first */
footer { background: var(--ink); color: var(--bg); overflow: hidden; padding-bottom: 40px; }
footer ::selection { background: var(--bg); color: var(--ink); }
footer :focus-visible { outline-color: var(--bg); }
.fname { font-size: 26.5vw; font-weight: 600; line-height: .8; letter-spacing: -.04em; white-space: nowrap; margin: 0 0 0 -.04em; padding-top: 72px; }
.frow { display: grid; grid-template-columns: 5fr 1fr 6fr; margin-top: 48px; }
.places { display: grid; gap: 8px; font-size: var(--step-lead); line-height: 1.15; }
.small { grid-column: 3; font-size: var(--step-small); display: grid; gap: 10px; align-content: start; opacity: .9; }
.legal { display: flex; justify-content: space-between; gap: 16px; margin-top: 56px; font-size: var(--step-small); }

/* Section entrances */
.js .in > * { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .in.on > * { opacity: 1; transform: none; }
.js .in.on > *:nth-child(2) { transition-delay: .08s; }
.js .in.on > *:nth-child(3) { transition-delay: .16s; }
.js .in.on > *:nth-child(4) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .js .word span, .js .hero-copy { animation: none; transform: none; opacity: 1; }
  .js .in > *, .js .band img { transform: none; opacity: 1; transition: opacity .3s; }
  .struck::after { transition: none; }
}

/* Phone */
@media (max-width: 760px) {
  .bar nav { gap: 16px; }
  .bar nav a:not(:last-child) { display: none; }
  .hero { height: 100svh; min-height: 620px; }
  .hero-copy { padding-top: 64px; max-width: 58%; }
  .hero-copy p { font-size: var(--step-body); }
  .word { position: absolute; margin: 0; padding: 0; line-height: .8; writing-mode: vertical-rl; left: auto; right: -12vw; top: 76px; bottom: -4vh; font-size: 62vw; text-align: center; }
  .top { flex-direction: column; }
  .cols { grid-template-columns: 1fr; gap: 24px; }
  .names { font-size: 9vw; }
  .names li:nth-child(n+5) .frame { display: none; }
  .names a { color: var(--ink); line-height: 1.25; }
  .detail { grid-template-columns: 1fr; gap: 40px; padding-block: 72px; }
  .detail figure { position: static; }
  .band { height: 36svh; }
  .check { padding-block: 72px; }
  .domain { font-size: 11vw; }
  .examples { gap: 8px; }
  .examples button { background: #0b358f; padding: 0 16px; min-height: 44px; display: inline-flex; align-items: center; text-decoration: none; }
  .about .r { grid-template-columns: 1fr; gap: 40px; }
  .about .r:first-child .para { order: -1; }
  .about .r:first-child:has(h2) .para { order: 0; }
  .facts { grid-template-columns: 1fr 1fr; }
  .lists { grid-template-columns: 1fr; gap: 40px; }
  .contact { padding-block: 72px; }
  .contact dl div { grid-template-columns: 1fr; }
  .frow { grid-template-columns: 1fr; gap: 48px; }
  .small { grid-column: auto; grid-template-columns: 1fr 1fr; }
}

/* Homelab teaser */
.lab { padding-block: 72px; background: var(--surface); display: grid; grid-template-columns: minmax(200px, 30%) 1fr; gap: 24px; }
.lab h2 { font-size: var(--step-head); }
.lab p { font-size: var(--step-lead); line-height: 1.35; max-width: 52ch; margin-bottom: 20px; }
.lab .svc { font-size: var(--step-body); margin-bottom: 28px; }
@media (max-width: 760px) { .lab { grid-template-columns: 1fr; } }