/* Hallmark · shape: Index-First · genre: editorial · theme: Ink (by request) · job: hire · draw: cc81e3
 * hero: Index (intro above the index) · nav: edge-aligned · footer: none · imagery: none · signature: the post list is the hero, the newest title set large over an ink rule · ink: paper · copy: verbatim
 * axes: light/grotesk-sans/chromatic-teal · posture: restrained · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, the about section could belong to any developer; kept only facts from the old site and let the type carry it */
/* Hallmark · waive 22 · greys at zero chroma · the page is printed in plain black ink on white paper */
/* Hallmark · answered F15 · the 24px gap sits inside list rows between a date or label and its text, while section columns keep the wide gap */
@import url("./tokens.css");
@import url("./base.css");

.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); border-radius: 10px; }
.skip:focus-visible { top: var(--space-md); }


/* nav: edge-aligned, the mark at one edge, three destinations at the other */
.nav { border-bottom: var(--rule-hair) solid var(--color-rule); }
.nav__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); min-height: 72px; }
.nav__brand { display: inline-flex; align-items: center; gap: var(--space-sm); font-weight: 700; text-decoration: none; letter-spacing: -0.02em; }
.nav__brand img { width: 40px; height: 40px; }
.nav__links { display: flex; gap: var(--space-lg); }
.nav__links a { font-weight: 600; text-decoration: none; padding: var(--space-xs) 0; }
.nav__links a:active, .index__head h3 a:active, .index__more:active, .facts a:active, .contact a:active, .build a:active { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; }
.nav__links a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }



/* hero: the introduction on top, the blog index under it with each post opened */
.hero__text { display: grid; gap: var(--space-lg); justify-items: center; margin-bottom: var(--space-2xl); margin-top: 2rem; }
.hero__text h1 { font-size: var(--text-display-s); max-width: none; }
.hero__text .lead { color: var(--color-ink-2);}
.index__list { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.index__row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.index__head { display: grid; gap: var(--space-sm); }
.index__row time { font-size: var(--text-sm); color: var(--color-muted); }
.index__main { display: grid; gap: var(--space-md); }
.index__head h3 { max-width: none; }
.index__head h3 a { text-decoration: none; }
.index__head h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.index__excerpt { display: grid; gap: var(--space-md); color: var(--color-ink-2); }
.index__excerpt ul { margin: 0; padding-left: var(--space-lg); }
.index__more { justify-self: start; font-weight: 600; }
.index__more:hover { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }

/* about: one statement, a ruled list of facts */
.about { padding-block: var(--section-gap-s); }
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.about h2 { font-size: var(--text-section); max-width: 14ch; }
.facts { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.facts > div { display: grid; grid-template-columns: minmax(0, 8rem) minmax(0, 1fr); gap: var(--space-lg); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }
.facts dt { font-size: var(--text-sm); color: var(--color-muted); padding-top: var(--space-3xs); }
.facts dd { margin: 0; font-size: var(--text-lg); line-height: 1.4; }
.facts a { font-weight: 600; }
.facts a:hover, .links a:hover .links__handle, .article a:hover { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }

/* contact: an ink band, the address set large */
.contact { padding-block: var(--section-gap-s); background: var(--color-ink); color: var(--color-paper); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: end; }
.contact__lead { display: grid; gap: var(--space-xl); }
.contact h2 { font-size: var(--text-section); }
.contact__mail { font-size: clamp(1.5rem, 3.4vw, 3rem); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1.05; overflow-wrap: break-word; min-width: 0; text-decoration-thickness: 2px; text-underline-offset: 0.12em; }
.contact__mail:hover { text-decoration-color: var(--color-accent-soft); }
.contact :focus-visible { outline-color: var(--color-accent-soft); }
.links { margin: 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-paper); }
.links li { border-bottom: var(--rule-hair) solid var(--color-ink-2); }
.links a { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-xs) var(--space-md); padding-block: var(--space-md); font-weight: 600; text-decoration: none; }
.links__handle { font-weight: 400; color: var(--color-rule); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.16em; }


/* a post */
.container--text { max-width: 58rem; }
.article { padding-block: var(--space-3xl) var(--space-3xl); }
.article__head { display: grid; gap: var(--space-md); padding-bottom: var(--space-xl); margin-bottom: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-ink); }
.article__head h1 { font-size: var(--text-display-s); max-width: none; }
.article__date { font-size: var(--text-sm); color: var(--color-muted); }
.article__body { display: grid; gap: var(--space-lg); font-size: var(--text-lg); line-height: 1.6; color: var(--color-ink-2); }
.article__body p { max-width: none; }
.article__body h2 { max-width: none; margin-top: var(--space-xl); font-size: var(--text-section); }
.article__body ul { margin: 0; padding-left: var(--space-lg); max-width: none; }
.article__body li + li { margin-top: var(--space-xs); }
.article__body blockquote { margin: var(--space-md) 0; padding: var(--space-xs) 0 var(--space-xs) var(--space-lg); border-left: 2px solid var(--color-ink); color: var(--color-ink); font-size: var(--text-xl); line-height: 1.4; max-width: 50ch; }
.article__body img { border-radius: var(--radius-card); outline: var(--rule-hair) solid var(--color-rule); outline-offset: -1px; }
.article__body code { font-family: var(--font-outlier); font-size: 0.9em; }
.article a { font-weight: 600; color: var(--color-ink); }
.article__back { margin-top: var(--space-2xl); }

@media (max-width: 60rem) {
  .index__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
  .hero { min-height: 0; padding-block: var(--space-xl); }
  .about__grid, .contact__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); }
  .contact__grid { align-items: start; }
}
@media (max-width: 40rem) {
  .facts > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .nav__links { gap: var(--space-md); }
}

/* work: the record as ruled rows, highlights folded away */
.work { padding-block: var(--section-gap-s); }
.work h2, .projects h2, .skills h2 { font-size: var(--text-section); max-width: 18ch; }
.jobs { margin: var(--space-2xl) 0 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.job { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 4fr) minmax(0, 5fr); gap: var(--space-3xl); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.job__dates { font-size: var(--text-sm); color: var(--color-muted); padding-top: var(--space-2xs); }
.job__main h3 { font-size: var(--text-3xl); letter-spacing: var(--tracking-display); }
.job__role { margin-top: var(--space-xs); font-size: var(--text-md); color: var(--color-ink-2); }
.job__body { display: grid; gap: var(--space-md); align-content: start; font-size: var(--text-lg); line-height: 1.45; }
.job__body details { font-size: var(--text-md); line-height: 1.55; }
.job__body summary { display: inline-block; min-height: 44px; padding-block: var(--space-xs); font-weight: 600; text-decoration: underline; text-underline-offset: 0.16em; cursor: pointer; list-style: none; }
.job__body summary::-webkit-details-marker { display: none; }
.job__body summary:hover { text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
.job__body summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.job__body ul { margin: var(--space-xs) 0 0; padding-left: var(--space-lg); color: var(--color-ink-2); }
.job__body li + li { margin-top: var(--space-xs); }

/* figures: plain black on a well, units beside every number */
.figures { padding-block: var(--section-gap-s) 0; }
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: var(--space-xl) 0; background: var(--color-paper-2); border: var(--rule-hair) solid var(--color-rule); border-radius: var(--radius-card); }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: var(--space-sm); padding-inline: var(--space-xl); border-left: var(--rule-hair) solid var(--color-rule); }
.stats > div:first-child { border-left: 0; }
.stats dt { font-size: var(--text-sm); color: var(--color-ink-2); max-width: 22ch; }
.stats dd { margin: 0; font-variant-numeric: tabular-nums; font-size: var(--text-display-s); font-weight: 700; letter-spacing: var(--tracking-display); line-height: 1; }

/* projects: the name large, what it is beside it */
.projects { padding-block: var(--section-gap-s) 0; }
.builds { margin: var(--space-2xl) 0 0; padding: 0; list-style: none; border-top: var(--rule-hair) solid var(--color-ink); }
.build { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); padding-block: var(--space-xl); border-bottom: var(--rule-hair) solid var(--color-rule); }
.build h3 { font-size: var(--text-3xl); max-width: none; letter-spacing: var(--tracking-display); line-height: 1.02; }
.build h3 a { text-decoration: none; }
.build h3 a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
.build__body { display: grid; gap: var(--space-md); font-size: var(--text-lg); line-height: 1.45; }
.build__body a { font-weight: 600; }
.build__stack { font-size: var(--text-sm); color: var(--color-muted); }

/* skills: grouped in running lines */
.skills { padding-block: var(--section-gap-s) 0; }
.skills__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.skills__lead { display: grid; gap: var(--space-lg); }
.skills__cert { font-size: var(--text-lg); font-weight: 600; }
.stack { margin: 0; border-top: var(--rule-hair) solid var(--color-ink); }
.stack > div { display: grid; gap: var(--space-2xs); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }
.stack dt { font-size: var(--text-sm); color: var(--color-muted); }
.stack dd { margin: 0; font-size: var(--text-lg); line-height: 1.4; }

@media (max-width: 60rem) {
  .job { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-xl); }
  .stats > div:nth-child(odd) { border-left: 0; }
  .build, .skills__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .skills__grid { gap: var(--space-2xl); }
}
@media (max-width: 40rem) {
  .stats > div { padding-inline: var(--space-md); }
  .nav__links { gap: var(--space-sm); font-size: var(--text-sm); }
}