/* Frozen Ink & Rust. Palette and type roles: docs/DESIGN.md. */
:root {
  font-size: 16px; color-scheme: light;
  --bg: #FAFAF7; --text: #393632; --title: #191715; --sub: #9B462E;
  --font-sans: 'JetBrains Mono', ui-monospace, monospace;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}
:root[data-theme='dark'] {
  color-scheme: dark; --bg: #1E1C1A; --text: #D4CEC7; --title: #F0C674; --sub: #E6A184;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.8 var(--font-mono); }
body, .nav, .foot, .mobile-menu { background: var(--bg); color: var(--text); }
.nav { position: static; border: 0; box-shadow: none; }
.nav .container, .foot .container { max-width: 688px; width: 100%; padding-inline: 24px; }
.nav-inner { height: auto; min-height: 0; padding-block: 32px; flex-wrap: wrap; gap: 20px; }
.brand, .nav-links a, .nav-cta, .menu-toggle, .mobile-menu a, .theme-select { font: inherit; }
.brand { font-weight: 600; color: var(--title); }
.nav-links { gap: 16px; margin-left: auto; }
.nav-links a, .mobile-menu a, .foot-links a { color: var(--text); }
.nav-actions { gap: 16px; flex-wrap: wrap; }
.nav-cta { padding: 0; background: none; color: var(--sub); border: 0; border-radius: 0; text-decoration: underline; }
.nav-cta:hover { background: none; color: var(--title); }
.theme-select, .menu-toggle { color: var(--text); background: var(--bg); border: 1px solid currentColor; padding: .15em .3em; }
main.mock-page { min-height: 0; padding: 36px 24px 80px; }
.reading, .home .reading { max-width: 640px; margin: auto; overflow-wrap: anywhere; }
.reading h1, .reading h2, .reading h3, .home h1 {
  font: 600 1rem/1.8 var(--font-mono); letter-spacing: normal; margin: 3em 0 1.5em;
}
.reading h1, .home h1 { margin-top: 0; color: var(--title); }
.reading h2, .reading h3 { color: var(--sub); }
.reading p, .reading li, .home p, .reading .mono, .reading .lede, .reading .desc {
  font: 400 1rem/1.8 var(--font-mono); color: var(--text); max-width: none; letter-spacing: normal;
}
.reading p { margin: 1.5em 0; }
.reading ul, .reading ol { padding-left: 1.5em; }
.reading li { margin: .6em 0; }
.reading a, .reading a:visited { color: var(--sub); text-decoration: underline; text-underline-offset: .2em; }
.reading img { max-width: 100%; height: auto; }
.reading svg { width: 1em; height: 1em; vertical-align: middle; }
.reading b, .reading strong { font-weight: 600; }
.reading table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: 1rem; margin: 2em 0; border: 1px solid currentColor; }
.reading th, .reading td { padding: .65em .5em; font-size: 1rem; color: var(--text); text-align: left; vertical-align: top; overflow-wrap: anywhere; border-bottom: 1px solid color-mix(in srgb, currentColor 25%, transparent); }
.reading th { font-weight: 600; }
.reading pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; }
.portrait-about { float: right; width: 110px; margin: 0 0 24px 24px; }
.reading .desc { display: block; }
.foot { border: 0; padding: 0 0 40px; }
.foot-inner { align-items: flex-start; flex-direction: column; gap: 24px; }
.foot-links { flex-wrap: wrap; gap: 16px; }
.foot-links a, .legal-name { font: inherit; color: var(--text); }
@media (max-width: 640px) {
  .nav-inner { padding-block: 24px; gap: 16px; }
  main.mock-page { padding-top: 24px; }
  .reading th, .reading td { padding: .5em .3em; }
}

.client-tab img { display: none; }

.nav-links { display: flex !important; margin-left: 0; flex-wrap: wrap; }
.nav-inner { justify-content: space-between; }

/* Frozen article line rhythm: 2 line advances = one blank text line. */
.article-post { --article-line: 1.8rem; }
.reading .article-header { margin: 0 0 var(--article-line); padding: 0; }
.reading .article-header h1 { margin: 0; }
.reading .article-dates { margin-top: var(--article-line); }
.reading .article-dates p { margin: 0; line-height: var(--article-line); }
.reading .article-post > p { margin: var(--article-line) 0; }
.reading .article-post > .article-header + p { margin-top: 0; }
.reading .article-post h2, .reading .article-post h3 { margin: var(--article-line) 0 0; }
.reading .article-post h2 + p, .reading .article-post h3 + p { margin-top: 0; }

/* The outer perimeter stays heavy; inner row separators remain lighter. */
.reading table { border: 2px solid currentColor; }

.contact-buttons { display: flex; flex-wrap: wrap; gap: .6em; margin: 0 0 var(--article-line, 1.8rem); }
.reading .contact-button { display: inline-block; font: inherit; color: var(--sub); border: 1px solid currentColor; padding: .35em .65em; text-decoration: none; }
.reading .contact-button:hover, .reading .contact-button:focus-visible { text-decoration: underline; text-underline-offset: .2em; }

/* Card identity belongs together above the contact buttons. */
.reading .card-brand { margin: 0 0 var(--article-line, 1.8rem); }
.reading .article-post > .article-header:has(+ .card-brand) { margin-bottom: 0; }

/* Shared structural rules; independent of retired v2 CSS. */
.container { margin-inline: auto; }
.nav-inner, .nav-links, .nav-actions, .foot-inner, .foot-links { display: flex; }
.nav-inner, .nav-actions { align-items: center; }
.nav-links a, .foot-links a { text-decoration: none; }
.nav-links a:hover, .foot-links a:hover { text-decoration: underline; }
a { color: var(--sub); }