/* Hallmark · redesign: full · copy: verbatim · shape: Portfolio Folio · genre: editorial · theme: Specimen (dealt 1/3) · job: hire · draw: 2bbd25
 * hero: Poster · nav: edge-aligned masthead · footer: letter close · imagery: none · signature: oversized serif statement and a typographic project folio
 * axes: light/high-contrast-serif/cool · posture: restrained · contrast: render checked · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S4 R5 V4 · weakest: S, keep the actual public projects and their candid experimental status central. */
/* hero-review: subagent, ship, no findings. Finish-review: subagent, 1 finding resolved: email underline reduced to 1px. */
/* waive: 77: four existing sections retained; no invented material added to meet a marketing-page section count. */
@import url("./tokens.css");
@import url("./base.css");

:root {
  --container: 1360px;
  --gutter: 64px;
  --text-display: clamp(4rem, 8.5vw, 7.5rem);
  --text-section: clamp(2.25rem, 4vw, 3.5rem);
  --color-clear: transparent;
}
html { scroll-behavior: smooth; }
body { font-size: 17px; }
h1, h2, h3, .about-lede { font-variation-settings: "opsz" var(--display-optical); }
a { text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); text-decoration-thickness: 2px; }
a:active { opacity: .7; }
a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; }
.skip-link { position: absolute; inset: 12px auto auto 16px; z-index: var(--z-modal); padding: var(--space-sm) var(--space-lg); background: var(--color-ink); color: var(--color-paper); transform: translateY(-180%); }
.skip-link:focus-visible { transform: translateY(0); }
.site-header { min-height: 104px; display: flex; justify-content: space-between; align-items: center; }
.wordmark { font-size: 25px; font-weight: 500; letter-spacing: -.06em; }
.wordmark span { color: var(--color-accent); }
nav { display: flex; gap: 32px; font-size: 15px; }
nav a { display: inline-flex; align-items: center; min-height: 48px; white-space: nowrap; }
.hero { min-height: calc(100svh - 104px); display: flex; flex-direction: column; justify-content: center; padding-top: var(--space-2xl); padding-bottom: var(--space-2xl); }
.hero h1 { max-width: none; line-height: 1.06; letter-spacing: -.025em; }
.hero-bottom { display: flex; justify-content: space-between; align-items: end; gap: var(--space-2xl); margin-top: var(--space-2xl); }
.hero-description { max-width: 40ch; color: var(--color-ink-2); font-size: 20px; }
.primary-link { display: inline-flex; align-items: center; gap: var(--space-lg); min-height: 48px; margin-top: var(--space-lg); padding: 0 var(--space-lg); border: 1px solid var(--color-ink); background: var(--color-ink); color: var(--color-paper); font-size: 15px; }
.primary-link:hover { text-decoration: none; background: var(--color-accent); border-color: var(--color-accent); }
.hero-byline { flex-shrink: 0; padding-left: var(--space-lg); border-left: 1px solid var(--color-rule); font-size: 15px; }
.hero-byline p:first-child { margin-bottom: var(--space-sm); }
.hero-byline p:last-child { color: var(--color-muted); font-size: 14px; }
.work { padding-block: var(--section-gap-s) var(--section-gap); }
.section-heading { padding-top: var(--space-lg); margin-bottom: var(--space-2xl); border-top: 3px double var(--color-rule-2); }
.section-heading h2 { max-width: none; }
.project-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-2xl); row-gap: var(--space-2xl); }
.project { display: flex; flex-direction: column; align-items: start; border-top: 1px solid var(--color-rule); padding-top: 32px; min-height: 280px; }
.project-title { width: 100%; }
.project-title h3 { max-width: none; font-size: clamp(2rem, 3vw, 2.75rem); line-height: 1.2; }
.project-body { margin-top: var(--space-lg); }
.project-body > p { color: var(--color-ink-2); max-width: 43ch; font-size: 17px; }
.tags { display: flex; flex-wrap: wrap; gap: var(--space-md); list-style: none; padding: 0; margin: var(--space-lg) 0; color: var(--color-muted); font-size: 14px; }
.project-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: auto; font-size: 14px; color: var(--color-accent); text-decoration: underline; text-underline-offset: .22em; }
.project-link span, .text-link span { margin-left: var(--space-sm); }
.about { padding-block: var(--section-gap-s); background: var(--color-ink); color: var(--color-paper); }
.about-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: var(--space-2xl); }
.about h2 { font-size: 48px; color: var(--color-paper); }
.about-lede { font-family: var(--font-display); font-size: clamp(2.5rem, 4.2vw, 4rem); line-height: 1.1; letter-spacing: -.02em; }
.about p + p { margin-top: 32px; max-width: 56ch; font-size: 17px; }
.contact { padding-top: var(--section-gap); padding-bottom: var(--space-xl); }
.contact-top h2 { max-width: none; }
.contact-links { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; padding-block: var(--space-xl) var(--space-3xl); }
.contact-links a:first-child { font-family: var(--font-display); font-size: clamp(1.75rem, 4.4vw, 4rem); line-height: 1.25; }
.text-link { color: var(--color-accent); white-space: nowrap; font-size: 16px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-lg); padding-top: var(--space-lg); border-top: 1px solid var(--color-rule); }
.footer-bottom p, .footer-bottom > a:last-child { color: var(--color-muted); font-size: 13px; }
@media (max-width: 960px) {
  :root { --gutter: 32px; }
  .hero { min-height: auto; padding-block: var(--space-2xl) var(--space-3xl); }
  .hero-bottom { gap: 32px; }
  .project-grid { column-gap: 32px; }
  .about-inner { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .contact-links { align-items: start; flex-direction: column; }
  .footer-bottom { flex-wrap: wrap; }
}
@media (max-width: 600px) {
  :root { --gutter: 24px; --text-display: clamp(2.5rem, 11.8vw, 4.5rem); }
  .site-header { min-height: 88px; }
  .wordmark { font-size: 22px; }
  nav { gap: var(--space-md); font-size: 13px; }
  .hero { padding-block: var(--space-xl) var(--space-2xl); }
  .hero h1 { line-height: 1.04; }
  .hero-bottom { flex-direction: column; align-items: start; margin-top: var(--space-xl); gap: var(--space-xl); }
  .hero-description { font-size: 18px; }
  .hero-byline { border-left: 0; border-top: 1px solid var(--color-rule); padding-left: 0; padding-top: var(--space-lg); width: 100%; display: flex; justify-content: space-between; gap: var(--space-md); font-size: 14px; }
  .hero-byline p:last-child { font-size: 12px; text-align: right; }
  .work { padding-block: var(--space-xl) var(--space-2xl); }
  .section-heading { margin-bottom: var(--space-xl); }
  .project-grid { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-xl); }
  .project { min-height: 0; padding-top: var(--space-lg); }
  .project-title h3 { font-size: clamp(1.75rem, 7.2vw, 2.25rem); }
  .project-body > p { font-size: 16px; }
  .tags { margin-block: var(--space-md); font-size: 13px; }
  .about { padding-block: var(--space-2xl); }
  .about h2 { font-size: 40px; }
  .about p + p { font-size: 16px; }
  .contact { padding-top: var(--space-2xl); }
  .contact-links { padding-block: 32px var(--space-2xl); gap: var(--space-lg); }
  .footer-bottom p { order: 3; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }