/* Hallmark · shape: career ledger · genre: atmospheric · theme: Terminal with Furrow book structure (by request) · job: hire · v2.0.0 */
/* Hallmark · pre-emit critique: a ruled, filterable career record replaces the prose experience list; company tenure is explicit to avoid inventing promotion dates. */
/* Hallmark · answered 58: the word count includes native disclosures; expanded responsibilities preserve the supplied career history. */
/* Hallmark · answered F4: the filled segmented item communicates filter selection, not a second primary action. */
@import url('./layout.css');
.career-subtitle { margin-top: var(--space-sm); font-size: 12px; color: var(--color-muted); }
.career-book .section-title { align-items: flex-start; margin-bottom: 32px; }
.career-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: var(--space-md); margin-bottom: var(--space-lg); }
.career-filters { display: flex; flex-wrap: wrap; gap: var(--space-2xs); padding: var(--space-2xs); background: var(--color-paper-2); border: 1px solid var(--color-rule); }
.career-filters[hidden] { display: none; }
.career-filters button { min-height: 40px; padding: var(--space-xs) var(--space-md); background: var(--color-paper-2); border: 1px solid var(--color-paper-2); font-size: 12px; color: var(--color-ink-2); }
.career-filters button:hover { background: var(--color-paper-3); border-color: var(--color-rule-2); }
.career-filters button[aria-pressed="true"] { color: var(--color-accent-ink); background: var(--color-accent); border-color: var(--color-accent); }
.career-count { font-size: 11px; color: var(--color-muted); }
.career-table-scroll { overflow-x: auto; scrollbar-color: var(--color-rule-2) var(--color-paper-2); }
.career-table { width: 100%; min-width: 840px; border-collapse: collapse; table-layout: fixed; text-align: left; border-top: 1px solid var(--color-ink-2); }
.col-period { width: 18%; } .col-company { width: 17%; } .col-role { width: 37%; } .col-focus { width: 28%; }
.career-table th { padding: var(--space-md) var(--space-md); font-size: 11px; font-weight: 400; color: var(--color-muted); background: var(--color-paper-2); border-bottom: 1px solid var(--color-rule-2); }
.career-table td { padding: var(--space-lg) var(--space-md); vertical-align: top; border-bottom: 1px solid var(--color-rule); font-size: 12px; line-height: 1.8; }
.career-table tr:hover { background: var(--color-paper-2); }
.career-period { color: var(--color-muted); font-size: 11px; }
.career-company { color: var(--color-ink-2); }
.career-table details { margin: 0; padding: 0; border: 0; }
.career-table summary { font-size: 12px; line-height: 1.8; padding-right: var(--space-xs); }
.career-table details[open] summary { color: var(--color-accent); }
.career-focus { color: var(--color-muted); }
.career-current { display: block; width: fit-content; padding: var(--space-2xs) var(--space-xs); margin-top: var(--space-sm); color: var(--color-accent); background: var(--color-accent-wash); font-size: 10px; }
.career-detail { padding: var(--space-md) 0 var(--space-2xs); color: var(--color-ink-2); font-size: 12px; }
.career-detail p + p { margin-top: var(--space-sm); }
.career-table-note { display: flex; justify-content: space-between; gap: var(--space-lg); margin-top: var(--space-md); font-size: 10px; color: var(--color-muted); }
.career-table-note p { max-width: 64ch; text-align: right; }
@media (max-width: 640px) {
 .career-filters { width: 100%; }
 .career-filters button { flex: 1; padding: var(--space-xs); font-size: 10px; min-height: 44px; }
 .career-table-note { flex-direction: column; gap: var(--space-xs); }
 .career-table-note p { text-align: left; }
 .career-count { margin-left: auto; }
}
@media print {
 .career-filters, .career-count { display: none; }
 .career-table-scroll { overflow: visible; }
 .career-table { min-width: 0; }
 .career-table td, .career-table summary { font-size: 9px; }
 .career-table tr[hidden] { display: table-row !important; }
}
/* Original character-grid rabbit, inspired by the Terminal theme's glyph treatment. */
.terminal-rabbit { position: relative; width: 100%; max-width: 520px; aspect-ratio: 1 / 1.06; margin: 0; justify-self: end; align-self: center; }
.rabbit-fallback { margin: 0; color: var(--color-accent); font-family: var(--font-body); font-size: clamp(3px, .51vw, 6px); line-height: 1.08; white-space: pre; user-select: none; }
.rabbit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.terminal-rabbit[data-ready] .rabbit-canvas { opacity: 1; }
.terminal-rabbit[data-ready] .rabbit-fallback { visibility: hidden; }
@media (max-width: 640px) {
 .terminal-rabbit { max-width: 380px; justify-self: center; }
 .rabbit-fallback { font-size: clamp(3px, 1.02vw, 4.8px); }
}
@media (prefers-reduced-motion: reduce) {
 .rabbit-canvas { transition: none; }
}
/* Portrait uses the source photo; the character treatment is drawn directly on canvas. */
.terminal-portrait { position: relative; width: 100%; max-width: 440px; aspect-ratio: 680 / 800; margin: 0; justify-self: end; align-self: center; }
.portrait-fallback { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; filter: grayscale(1); }
.portrait-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.terminal-portrait[data-ready] .portrait-canvas { opacity: 1; }
.terminal-portrait[data-ready] .portrait-fallback { visibility: hidden; }
@media (max-width: 640px) { .terminal-portrait { max-width: 360px; justify-self: center; } }
@media print { .portrait-canvas { display: none; } .terminal-portrait[data-ready] .portrait-fallback { visibility: visible; } }
.hero .button, .hero .text-link { white-space: nowrap; }
.hero .actions { flex-wrap: wrap; }
@media (max-width: 640px) {
 :root { --gutter: 20px; }
 .hero h1 { font-size: clamp(40px, 12vw, 60px); }
}
.resume-actions { margin-top: 32px; }
.button-secondary { display: inline-flex; align-items: center; gap: var(--space-md); min-height: 48px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-rule-2); background: var(--color-paper-2); color: var(--color-ink); font-size: 12px; text-decoration: none; white-space: nowrap; }
.button-secondary:hover { color: var(--color-accent); background: var(--color-paper-3); border-color: var(--color-accent); }
.download-format { font-size: 10px; color: var(--color-muted); }
.site-footer { display: block; padding-top: 48px; }
.terminal-wordmark { position: relative; width: 100%; aspect-ratio: 7 / 1; margin: 0 0 48px; }
.wordmark-fallback { display: block; color: var(--color-accent); font-size: clamp(28px, 8vw, 104px); font-weight: 700; line-height: 1.3; white-space: nowrap; }
.wordmark-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; }
.terminal-wordmark[data-ready] .wordmark-canvas { opacity: 1; }
.terminal-wordmark[data-ready] .wordmark-fallback { visibility: hidden; }
.footer-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-lg); }
@media (max-width: 640px) {
 .site-footer { padding-top: 32px; }
 .terminal-wordmark { margin-bottom: 32px; min-height: 64px; }
 .footer-meta { flex-direction: column; gap: var(--space-sm); }
}
@media print {
 .wordmark-canvas { display: none; }
 .terminal-wordmark[data-ready] .wordmark-fallback { visibility: visible; }
}
.career-filters button { min-height: 44px; white-space: nowrap; }
/* Hide the source photo before the first paint, while the glyph renderer loads. */
html.js .terminal-portrait .portrait-fallback { visibility: hidden; }
html.js .terminal-portrait[data-failed] .portrait-fallback { visibility: visible; }
@media print { html.js .terminal-portrait .portrait-fallback { visibility: visible; } }

/* Compact Linux terminal output for career progression. */
.career-journey { padding: 14px 18px; margin-bottom: 24px; border-left: 2px solid var(--color-rule-2); background: var(--color-paper-2); font-family: var(--font-body); font-size: 11px; line-height: 1.9; }
.journey-prompt { margin-bottom: 8px; color: var(--color-ink-2); overflow-wrap: anywhere; }
.journey-prompt > span:first-child { color: var(--color-accent); }
.journey-directory { color: var(--color-muted); }
.journey-track { list-style: none; margin: 0; padding: 0; }
.journey-step { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.journey-branch { flex-shrink: 0; color: var(--color-muted); white-space: pre; }
.journey-step a { color: var(--color-ink-2); text-decoration: none; padding: 2px 0; }
.journey-step a:hover { color: var(--color-accent); text-decoration: underline; text-underline-offset: 4px; }
.journey-step a:focus-visible { outline: 1px solid var(--color-accent); outline-offset: 3px; }
.journey-current a, .journey-badge { color: var(--color-accent); }
.journey-badge { font-size: 10px; white-space: nowrap; }
.career-role details { scroll-margin-top: 32px; }
@media (max-width: 480px) {
 .career-journey { padding: 12px; font-size: 10px; }
 .journey-step { gap: 7px; flex-wrap: wrap; }
 .journey-badge { font-size: 9px; }
}
@media print { .career-journey { break-inside: avoid; } }

.journey-error { color: #f28b82; overflow-wrap: anywhere; }
.journey-sudo { margin: 6px 0 2px; }
.journey-sudo strong { color: var(--color-accent); font-weight: 500; }