/* Hallmark · macrostructure: Stat-Led · theme: warm-paper/oxide
 * Page styles. Every value references a token from tokens.css.
 */

@import url("tokens.css");

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

html, body { overflow-x: clip; }

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

body {
  margin: 0;
  background: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.wrap {
  width: 100%;
  max-width: 74rem;
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.tnum { font-variant-numeric: tabular-nums; }

.rule {
  border: 0;
  border-top: var(--rule-hair) solid var(--color-rule);
  margin: 0;
}

/* ============ masthead nav (Ft-adjacent, editorial nameplate) ============ */

.masthead {
  border-bottom: var(--rule-mid) solid var(--color-ink);
  padding-top: var(--space-lg);
}

.masthead__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm);
}

.masthead__name {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-tight);
  margin: 0;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
  min-width: 0;
}

.masthead__name a { text-decoration: none; }

.masthead__role {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-2);
  text-transform: uppercase;
  letter-spacing: 0.09em;
}

.masthead__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-2xs) 0 var(--space-sm);
  border-top: var(--rule-hair) solid var(--color-rule);
}

.masthead__nav a {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--color-ink-2);
  white-space: nowrap;
  padding-bottom: 2px;
  border-bottom: var(--rule-hair) solid transparent;
  transition: border-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}

.masthead__nav a:hover {
  color: var(--color-accent-ink);
  border-bottom-color: var(--color-accent);
}

/* ============ stat hero ============ */

.hero {
  display: grid;
  gap: var(--space-md);
  padding: var(--space-2xl) 0 var(--space-xl);
  border-bottom: var(--rule-hair) solid var(--color-rule-hard);
}

.hero__figure {
  font-family: var(--font-display);
  font-size: var(--text-display);
  line-height: 0.92;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--color-ink);
  overflow-wrap: anywhere;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 0.06em;
}

.hero__unit {
  font-size: 0.34em;
  letter-spacing: 0;
  color: var(--color-accent-ink);
  font-style: italic;
}

.hero__qualifier {
  max-width: var(--measure);
  font-size: var(--text-lg);
  margin: 0;
  color: var(--color-ink-2);
}

.hero__qualifier strong {
  color: var(--color-ink);
  font-weight: 600;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
}

.chip {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  text-decoration: none;
  color: var(--color-accent-ink);
  border: var(--rule-hair) solid var(--color-accent);
  border-radius: var(--radius-pill);
  padding: var(--space-2xs) var(--space-md);
  white-space: nowrap;
  transition: background-color var(--dur-short) var(--ease-out),
              color var(--dur-short) var(--ease-out);
}

.chip:hover {
  background: var(--color-accent);
  color: var(--color-paper);
}

.chip:focus-visible,
.masthead__nav a:focus-visible,
.link-plain:focus-visible,
.entry a:focus-visible {
  outline: 2px solid var(--color-focus);
  outline-offset: 3px;
}

.chip--quiet {
  border-color: var(--color-rule-hard);
  color: var(--color-ink-2);
}
.chip--quiet:hover { background: var(--color-ink); border-color: var(--color-ink); color: var(--color-paper); }

/* ============ supporting stats ============ */

.stats {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  border-bottom: var(--rule-hair) solid var(--color-rule-hard);
}

@media (min-width: 48rem) {
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.stat {
  padding: var(--space-lg) var(--space-md) var(--space-lg) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

.stats .stat:last-child { border-bottom: 0; }

@media (min-width: 48rem) {
  .stat {
    border-bottom: 0;
    border-left: var(--rule-hair) solid var(--color-rule);
    padding-inline: var(--space-md);
  }
  .stats .stat:first-child { border-left: 0; padding-left: 0; }
}

.stat__fig {
  font-family: var(--font-display);
  font-size: var(--text-4xl);
  line-height: var(--leading-tight);
  letter-spacing: -0.025em;
  display: block;
  overflow-wrap: anywhere;
}

.stat__label {
  display: block;
  margin-top: var(--space-2xs);
  font-size: var(--text-sm);
  color: var(--color-ink-2);
  max-width: 34ch;
}

/* ============ section furniture ============ */

.section { padding: var(--space-2xl) 0; }
.section--tight { padding: var(--space-xl) 0; }

.section__head {
  max-width: var(--measure);
  margin-bottom: var(--space-lg);
}

.section__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-sm);
  overflow-wrap: anywhere;
  min-width: 0;
}

.section__note {
  margin: 0;
  color: var(--color-ink-2);
  max-width: var(--measure);
}

/* ============ positioning ============ */

.positioning {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 60rem) {
  .positioning { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xl); }
}

.positioning__lede {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin: 0;
  max-width: 30ch;
}

.positioning__body p { margin: 0 0 var(--space-sm); }
.positioning__body p:last-child { margin-bottom: 0; }
.positioning__body { color: var(--color-ink-2); }

/* ============ disciplines: typographic list, not a card grid ============ */

.disciplines {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
  border-top: var(--rule-hair) solid var(--color-rule-hard);
}

@media (min-width: 56rem) {
  .disciplines { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-xl); }
}

.discipline {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--space-sm);
  padding: var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
  align-items: start;
}

.discipline__n {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  padding-top: 0.35em;
  letter-spacing: 0.04em;
}

.discipline__name {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-3xs);
}

.discipline__what {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

/* ============ work entries ============ */

.entries { border-top: var(--rule-hair) solid var(--color-rule-hard); }

.entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
  padding: var(--space-md) 0;
  border-bottom: var(--rule-hair) solid var(--color-rule);
}

@media (min-width: 52rem) {
  .entry { grid-template-columns: 11rem minmax(0, 1fr) 13rem; gap: var(--space-md); align-items: baseline; }
}

.entry__client {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-ink-3);
}

.entry__what { margin: 0; }
.entry__what a { text-decoration: none; border-bottom: var(--rule-hair) solid var(--color-rule-hard); }
.entry__what a:hover { border-bottom-color: var(--color-accent); color: var(--color-accent-ink); }

.entry__result {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent-ink);
  margin: 0;
}

/* ============ frameworks ============ */

.frameworks {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 56rem) {
  .frameworks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.framework {
  border-top: var(--rule-mid) solid var(--color-ink);
  padding-top: var(--space-sm);
}

.framework__name {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-2xs);
}

.framework__claim {
  margin: 0 0 var(--space-sm);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.framework__parts {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-sm);
  color: var(--color-ink-2);
}

.framework__parts li {
  padding: var(--space-3xs) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}

/* ============ contact ============ */

.contact {
  padding: var(--space-2xl) 0;
  border-top: var(--rule-heavy) solid var(--color-ink);
}

.contact__lead {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-md);
  max-width: 26ch;
}

.contact__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.link-plain {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  text-decoration: none;
  border-bottom: var(--rule-hair) solid var(--color-rule-hard);
  padding-bottom: 2px;
  white-space: nowrap;
}
.link-plain:hover { border-bottom-color: var(--color-accent); color: var(--color-accent-ink); }

/* ============ colophon ============ */

.colophon {
  border-top: var(--rule-hair) solid var(--color-rule-hard);
  padding: var(--space-md) 0 var(--space-xl);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  line-height: 1.8;
}

.colophon p { margin: 0 0 var(--space-2xs); }
.colophon a { color: var(--color-ink-2); }

/* ============ hero counter ============ */

@media (prefers-reduced-motion: no-preference) {
  .hero__figure .count { display: inline-block; }
}

/* ============ long-form documents: résumé, about ============ */

.doc main { padding-top: var(--space-lg); }

.doc__h2 {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-ink-3);
  margin: var(--space-xl) 0 var(--space-md);
  padding-bottom: var(--space-2xs);
  border-bottom: var(--rule-hair) solid var(--color-rule-hard);
}

.doc__h2:first-child { margin-top: 0; }

.doc__lede {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-md);
  max-width: 34ch;
}

.doc__body {
  margin: 0 0 var(--space-md);
  max-width: var(--measure);
  color: var(--color-ink-2);
}

.role {
  padding: var(--space-md) 0;
  border-top: var(--rule-hair) solid var(--color-rule);
}

.role:first-of-type { border-top: 0; }

.role__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-md);
  margin-bottom: var(--space-2xs);
}

.role__title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
}

.role__client { color: var(--color-ink-2); font-style: italic; }

.role__when {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-ink-3);
  margin: 0;
  white-space: nowrap;
}

.role__list {
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: var(--measure);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.role__list li {
  position: relative;
  padding-left: var(--space-md);
  margin-bottom: var(--space-2xs);
  line-height: var(--leading-body);
}

.role__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.5rem;
  height: var(--rule-hair);
  background: var(--color-rule-hard);
}

.role__list--plain li::before { display: none; }
.role__list--plain li { padding-left: 0; }

.caps { margin: 0; max-width: var(--measure); font-size: var(--text-sm); }

.caps dt {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-accent-ink);
  margin-top: var(--space-sm);
}

.caps dt:first-child { margin-top: 0; }

.caps dd {
  margin: var(--space-3xs) 0 0;
  color: var(--color-ink-2);
}

/* resume ledger numbers align */
.role__list b { color: var(--color-ink); font-weight: 600; }

/* ============ print ============ */

@media print {
  :root {
    --color-paper: #fff;
    --color-ink: #111;
    --color-ink-2: #333;
    --color-ink-3: #555;
  }
  .masthead__nav, .colophon, .hero__actions { display: none; }
  body { font-size: 10.5pt; line-height: 1.45; }
  .wrap { max-width: none; padding-inline: 0; }
  .doc__h2 { margin-top: 14pt; }
  .role { break-inside: avoid; padding: 7pt 0; }
  .doc__lede { font-size: 13pt; }
  a { text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}