/* ─── reset ───────────────────────────────────────────────────────── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* ─── tokens ──────────────────────────────────────────────────────── */
:root {
  --bg:           #faf6f1;   /* warm cream paper */
  --paper:        #fffefb;
  --ink:          #2c2825;   /* deep walnut */
  --ink-soft:     #6a5e54;
  --ink-faint:    #8a7f74;
  --ink-ghost:    #b5aa9e;
  --rule:         #ece6dc;
  --rule-strong:  #d8cfc1;
  --brass:        #a07a2c;
  --terracotta:   #c45a2d;

  --font-display: 'Newsreader', 'Source Serif Pro', Georgia, serif;
  --font-body:    'Newsreader', 'Source Serif Pro', Georgia, serif;
  --font-mono:    'IBM Plex Mono', 'Menlo', monospace;
  --font-playfair:'Playfair Display', Georgia, serif;
  --font-karla:   'Karla', system-ui, sans-serif;

  --col-pad:      max(28px, 5vw);
  --page-max:     920px;    /* outer bound for the masthead breakout */
  --content-max:  720px;    /* reading column for sections + colophon */

  --ease:         cubic-bezier(.2, .7, .3, 1);
}

html { font-size: 17px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* paper noise */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-size: 512px;
  pointer-events: none;
  z-index: 100;
  opacity: 0.55;
  mix-blend-mode: multiply;
}

::selection { background: rgba(196, 90, 45, 0.18); color: var(--ink); }

a { color: inherit; text-decoration: none; transition: color 0.15s var(--ease); }

.page {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  /* Page itself is centered. The asymmetry is internal: masthead breaks
     out to fill the page width while sections stay anchored to the left
     in a narrower reading column, leaving empty space on the right. */
  margin: 0 auto;
  padding: 96px var(--col-pad) 120px;
}

.dot-sep { color: var(--ink-ghost); margin: 0 0.55em; }

/* ─── stagger reveal ──────────────────────────────────────────────── */
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
[data-stagger] {
  opacity: 0;
  animation: rise 0.7s var(--ease) forwards;
}
[data-stagger="0"] { animation-delay: 0.05s; }
[data-stagger="1"] { animation-delay: 0.18s; }
[data-stagger="2"] { animation-delay: 0.30s; }
[data-stagger="3"] { animation-delay: 0.42s; }
[data-stagger="4"] { animation-delay: 0.54s; }

@media (prefers-reduced-motion: reduce) {
  [data-stagger] { animation: none; opacity: 1; }
}

/* ─── masthead ────────────────────────────────────────────────────── */
/* The name is the breakout element: it gets the full page width to itself.
   The other masthead pieces stay tied to the narrower content column so
   they don't compete with the name's scale. */
.masthead {
  margin-bottom: 56px;
  max-width: 100%;
}

.masthead__meta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  max-width: var(--content-max);
}

.masthead__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  font-size: clamp(2.6rem, 7vw, 4.8rem);
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--ink);
  font-variation-settings: 'opsz' 72;
}

.masthead__home {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  letter-spacing: -0.015em;
  color: var(--ink);
  display: inline-block;
}
.masthead__home:hover { color: var(--terracotta); }

.masthead__rule {
  height: 1px;
  background: var(--ink);
  width: 72px;
  margin: 32px 0 24px;
}

.masthead__bio {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.2rem;
  line-height: 1.45;
  color: var(--ink-soft);
  font-variation-settings: 'opsz' 14;
  max-width: 32ch;
  margin-top: 24px;
}

.masthead--mini { margin-bottom: 64px; }
.masthead--mini .masthead__rule { margin: 16px 0 14px; }

.crumbs {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.crumbs a { color: var(--ink-soft); }
.crumbs a:hover { color: var(--terracotta); }

/* ─── section primitive ──────────────────────────────────────────── */
/* Sections live in a narrower reading column. Anchored to the same left
   edge as the masthead, but capped well short of the masthead's reach so
   the breakout asymmetry stays legible. */
.section {
  margin-bottom: 64px;
  max-width: var(--content-max);
}

.section__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 28px;
}

.section__rule {
  width: 28px;
  height: 1px;
  background: var(--rule-strong);
  flex-shrink: 0;
}

.section__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

/* ─── tools (sister sites) ───────────────────────────────────────── */
.tools { list-style: none; }

.tool {
  --tool-accent: var(--terracotta);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.tool:first-child { border-top: 1px solid var(--rule); }

.tool__link {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  grid-template-areas: "icon text arrow";
  align-items: center;
  gap: 0 22px;
  padding: 18px 4px;
  padding-right: 16px;
  position: relative;
  transition: padding 0.28s var(--ease), background-color 0.28s var(--ease);
}

.tool__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--tool-accent);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.28s var(--ease);
}

/* Hover state, also driven by .is-waving (added by JS for the after-load
   "stadium wave" sweep). Keep the two selectors in lockstep so adding a
   new hover effect automatically participates in the wave. */
.tool__link:hover,
.tool__link.is-waving {
  padding-left: 16px;
}
.tool__link:hover::before,
.tool__link.is-waving::before {
  opacity: 0.06;
}

.tool__card {
  grid-area: icon;
  width: 56px;
  height: 56px;
  border-radius: 16px;            /* squircle-ish */
  background: var(--paper);
  border: 1px solid var(--rule);
  display: grid;
  place-items: center;
  align-self: center;
  transition: border-color 0.28s var(--ease), transform 0.28s var(--ease);
}

.tool__icon {
  width: 36px;
  height: 36px;
  display: block;
}

.tool__link:hover .tool__card,
.tool__link.is-waving .tool__card {
  border-color: var(--tool-accent);
}

.tool__text {
  grid-area: text;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.tool__name {
  font-size: clamp(1.7rem, 3.8vw, 2.3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  position: relative;
}

.tool__name--playfair { font-family: var(--font-playfair); }
.tool__name--karla    { font-family: var(--font-karla); font-weight: 800; letter-spacing: -0.035em; }
.tool__name--mono     { font-family: var(--font-mono); font-weight: 600; letter-spacing: -0.04em; font-size: clamp(1.5rem, 3.4vw, 2rem); }

.tool__desc {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ink-soft);
  font-variation-settings: 'opsz' 14;
}

.tool__arrow {
  grid-area: arrow;
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--ink-faint);
  align-self: center;
  transition: transform 0.28s var(--ease), color 0.28s var(--ease);
}

.tool__link:hover .tool__arrow,
.tool__link.is-waving .tool__arrow {
  transform: translate(4px, -4px);
  color: var(--tool-accent);
}

/* ─── repos (Code section, deeper-cut GitHub work) ───────────────── */
/* Quieter than .tool: typographic-only, no card or icon. Two-line stack
   per row (mono name + italic description) with the same border rules
   and accent-tinted hover so the section reads as a peer of Tools while
   stepping back visually. The stadium-wave on load is intentionally NOT
   wired up here — the wave is exclusive to Tools (the marquee row). */
.repos { list-style: none; }

.repo {
  --repo-accent: var(--terracotta);
  border-bottom: 1px solid var(--rule);
  position: relative;
}
.repo:first-child { border-top: 1px solid var(--rule); }

.repo__link {
  display: grid;
  grid-template-columns: 1fr auto auto;
  grid-template-areas:
    "name date arrow"
    "desc desc arrow";
  align-items: center;
  gap: 4px 22px;
  padding: 14px 16px 14px 4px;
  position: relative;
  transition: background-color 0.28s var(--ease);
}

.repo__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--repo-accent);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.28s var(--ease);
}

.repo__link:hover::before { opacity: 0.06; }

.repo__name {
  grid-area: name;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--ink);
  align-self: end;
}

.repo__desc {
  grid-area: desc;
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.96rem;
  color: var(--ink-soft);
  font-variation-settings: 'opsz' 14;
  line-height: 1.45;
  align-self: start;
}

.repo__date {
  grid-area: date;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  align-self: end;
  padding-bottom: 0.2em;
  white-space: nowrap;
}

.repo__arrow {
  grid-area: arrow;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--ink-faint);
  align-self: center;
  transition: transform 0.28s var(--ease), color 0.28s var(--ease);
}

.repo__link:hover .repo__arrow {
  transform: translate(4px, -4px);
  color: var(--repo-accent);
}

/* ─── words ──────────────────────────────────────────────────────── */
.words { list-style: none; }
.words--full .word { padding: 18px 0; border-bottom: 1px solid var(--rule); }
.words--full .word:first-child { border-top: 1px solid var(--rule); }

.word {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: baseline;
  gap: 16px 24px;
  padding: 12px 0;
}

.word__date {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  white-space: nowrap;
}

.word__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.2rem;
  color: var(--ink);
  line-height: 1.3;
  border-bottom: 1px solid transparent;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.word__title:hover {
  color: var(--terracotta);
  border-bottom-color: var(--terracotta);
}

.word__excerpt {
  grid-column: 2;
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 0.95rem;
  margin-top: 6px;
  font-variation-settings: 'opsz' 14;
}

.words__empty {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1rem;
}

.words__all {
  display: inline-block;
  margin-top: 24px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.words__all:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }

/* ─── about row ──────────────────────────────────────────────────── */
.about {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  font-family: var(--font-display);
  font-size: 1.1rem;
}
.about a {
  color: var(--ink);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.about a:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }

/* ─── colophon ───────────────────────────────────────────────────── */
.colophon {
  margin-top: 96px;
  padding-top: 32px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.10em;
  color: var(--ink-faint);
  text-align: left;
  line-height: 1.9;
  max-width: var(--content-max);
}
.colophon a { color: var(--ink-soft); border-bottom: 1px solid var(--rule); }
.colophon a:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }

/* ─── post body ──────────────────────────────────────────────────── */
.post { margin: 24px 0 56px; }

.post__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4.5vw, 2.7rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-top: 28px;
  font-variation-settings: 'opsz' 36;
}

.post__lede {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.15rem;
  margin-top: 16px;
  font-variation-settings: 'opsz' 14;
}

.post__body { margin-top: 36px; font-size: 1.06rem; line-height: 1.7; color: var(--ink); }

.post__body > * + * { margin-top: 1.05em; }
.post__body h2 { font-family: var(--font-display); font-weight: 500; font-size: 1.5rem; margin-top: 2em; letter-spacing: -0.015em; }
.post__body h3 { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; margin-top: 1.6em; }
.post__body p code, .post__body li code {
  font-family: var(--font-mono);
  font-size: 0.86em;
  background: var(--paper);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid var(--rule);
}
.post__body pre {
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.86em;
  line-height: 1.6;
}
.post__body pre code { background: none; border: none; padding: 0; }
.post__body blockquote {
  border-left: 2px solid var(--terracotta);
  padding: 4px 0 4px 20px;
  font-style: italic;
  color: var(--ink-soft);
}
.post__body a { color: var(--terracotta); border-bottom: 1px solid currentColor; }
.post__body a:hover { background: rgba(196, 90, 45, 0.07); }
.post__body ul, .post__body ol { padding-left: 1.4em; }
.post__body img { max-width: 100%; height: auto; }
.post__body hr { border: none; height: 1px; background: var(--rule); margin: 2.5em 0; }

.back-link {
  display: inline-block;
  margin-top: 48px;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-strong);
  padding-bottom: 2px;
}
.back-link:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }

/* ─── resume ─────────────────────────────────────────────────────── */
.page--resume .page { max-width: 760px; padding-top: 56px; }

.resume__nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 48px;
}
.resume__nav a { color: var(--ink-soft); }
.resume__nav a:hover { color: var(--terracotta); }
.resume__print {
  font: inherit;
  background: transparent;
  border: 1px solid var(--rule-strong);
  border-radius: 2px;
  padding: 8px 14px;
  color: var(--ink-soft);
  cursor: pointer;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.7rem;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.resume__print:hover { color: var(--terracotta); border-color: var(--terracotta); }

.resume__head { margin-bottom: 36px; }
.resume__name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.6rem;
  letter-spacing: -0.025em;
  line-height: 1.05;
  font-variation-settings: 'opsz' 36;
}
.resume__role {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.15rem;
  margin-top: 4px;
  font-variation-settings: 'opsz' 14;
}
.resume__contacts {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.resume__contacts a { color: var(--ink-soft); border-bottom: 1px solid transparent; }
.resume__contacts a:hover { color: var(--terracotta); border-bottom-color: var(--terracotta); }

.resume__section { margin-top: 28px; }
.resume__label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 1px solid var(--rule);
  padding-bottom: 8px;
  margin-bottom: 14px;
}
.resume__summary {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.55;
}

.resume__entry { margin-bottom: 14px; }
.resume__entry-line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  font-family: var(--font-display);
  font-size: 1.02rem;
  margin-bottom: 4px;
  gap: 0 0.45em;
}
.resume__entry-sep { color: var(--ink-ghost); }
.resume__entry-company { color: var(--ink-soft); white-space: nowrap; }
.resume__entry-role { font-weight: 600; }
.resume__entry-company { color: var(--ink-soft); }
.resume__entry-when {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-left: auto;
}
.resume__entry-desc {
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.5;
  max-width: 64ch;
}

.resume__work-list { list-style: none; }
.resume__work {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 16px;
  align-items: baseline;
  padding: 6px 0;
}
.resume__work-name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 0.98rem;
}
.resume__work-desc {
  font-family: var(--font-display);
  color: var(--ink-soft);
  font-size: 0.95rem;
  line-height: 1.45;
}

.resume__skills { display: flex; flex-direction: column; gap: 6px; }
.resume__skills-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 16px;
  align-items: baseline;
}
.resume__skills-group {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.resume__skills-items {
  font-family: var(--font-display);
  color: var(--ink);
  font-size: 0.95rem;
  line-height: 1.45;
}

/* ─── responsive ─────────────────────────────────────────────────── */
@media (max-width: 540px) {
  .page { padding-top: 56px; padding-bottom: 80px; }
  .masthead { margin-bottom: 56px; }
  .masthead__name { font-size: clamp(2.4rem, 11vw, 3.4rem); }
  .word { grid-template-columns: 1fr; gap: 4px; }
  .word__date { font-size: 0.72rem; }
  .word__excerpt { grid-column: 1; }
  .resume__entry-when { margin-left: 0; }
  .resume__work, .resume__skills-row { grid-template-columns: 1fr; gap: 4px; }
}