/* Compact, consistent visual system for MaxUland.com. */
:root {
  --max: 1180px;
  --radius: 12px;
  --display: "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --body: Verdana, Geneva, Tahoma, system-ui, sans-serif;
  --section-space: clamp(3rem, 5vw, 4.75rem);
  --card-space: clamp(1rem, 2vw, 1.45rem);
}

body { font-family: var(--body); font-size: 15px; line-height: 1.6; }
.brand, h1, h2, h3, .button, .eyebrow, .mini-label, .work-status, .resume-job-time, .resume-job-type { font-family: var(--display); }
.shell, .nav-shell { width: min(calc(100% - 2rem), var(--max)); }
.nav-shell { min-height: 64px; }
.nav-links { gap: .8rem; }
.nav-links a { font-size: .82rem; }

.page-hero, .resume-intro, .ai-hero { padding: clamp(3.25rem, 6vw, 5.25rem) 0 clamp(2.25rem, 4vw, 3.5rem); }
.hero { min-height: 0; padding: clamp(3.75rem, 7vw, 6.25rem) 0; }
h1 { max-width: 22ch; margin-bottom: 1rem; font-size: clamp(2.35rem, 5vw, 4.25rem); line-height: 1.01; letter-spacing: -.045em; text-wrap: balance; }
.page-hero h1, .resume-intro h1 { font-size: clamp(2.2rem, 4.7vw, 3.85rem); }
h2 { max-width: 25ch; font-size: clamp(1.7rem, 3.2vw, 2.7rem); line-height: 1.08; letter-spacing: -.03em; text-wrap: balance; }
h3 { font-size: clamp(1.05rem, 1.8vw, 1.25rem); }
.hero-lede, .page-lede, .resume-lede { max-width: 68ch; font-size: clamp(1rem, 1.5vw, 1.13rem); }
.content-section, .resume-section { padding: var(--section-space) 0; }
.section-heading-row, .resume-section-heading, .ai-section-heading { margin-bottom: 1.75rem; align-items: start; }
.section-note, .resume-section-note, .ai-section-heading > p { max-width: 58ch; }

.button { min-height: 42px; border-radius: 6px; padding: .68rem .95rem; font-size: .82rem; letter-spacing: .01em; }
.operator-panel, .work-card, .resume-panel, .systems-list article, .info-card, .note-panel, .timeline-card, .ai-stage-card, .ai-proof-grid article, .resume-snapshot, .resume-skill-card, .contact-form, .contact-aside { border-radius: var(--radius); box-shadow: 0 14px 35px rgba(0,0,0,.27); }
.work-grid, .systems-list, .info-grid { gap: 1rem; }
.work-card, .info-card, .systems-list article { min-height: 0; }
.work-body, .info-card, .systems-list article, .note-panel { padding: var(--card-space); }
.section-grid { grid-template-columns: minmax(150px,.3fr) minmax(0,1fr); gap: clamp(1.5rem,4vw,3rem); }

.work-card { isolation: isolate; }
.work-preview { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--border); background: #0e1112; }
.work-preview img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; filter: saturate(.9) contrast(.98); transition: transform .25s ease, filter .25s ease; }
.work-card:hover .work-preview img, .work-card:focus-within .work-preview img { transform: scale(1.018); filter: saturate(1) contrast(1); }
.work-preview::after { content: ""; position: absolute; inset: auto 0 0; height: 34%; background: linear-gradient(transparent, rgba(11,13,14,.72)); pointer-events: none; }
.work-preview-badge { position: absolute; left: .75rem; bottom: .65rem; z-index: 1; padding: .3rem .45rem; border: 1px solid rgba(230,225,213,.22); border-radius: 4px; background: rgba(11,13,14,.82); color: var(--text); font: .68rem var(--display); letter-spacing: .08em; text-transform: uppercase; }
.work-preview-fallback { display: grid; place-items: center; background: linear-gradient(160deg, #14181a, #0e1112); }
.work-preview-fallback::before { content: "Preview unavailable"; color: var(--muted); font: .75rem var(--display); letter-spacing: .08em; text-transform: uppercase; }

.check-list { margin-top: 1rem; }
.check-list li { padding-block: .7rem; }
#github-archive .section-copy { max-width: none; }
#github-archive .check-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
#github-archive .check-list li { border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1rem 1rem 2.35rem; background: rgba(18,22,23,.62); }
#github-archive .check-list li::before { left: .9rem; top: 1rem; }

.ai-hero-grid { gap: clamp(1.5rem,4vw,3rem); }
.ai-stage-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: .75rem; }
.ai-stage-card { min-width: 0; padding: 1rem; }
.ai-stage-card > span { margin-bottom: .6rem; }
.ai-stage-card h3 { font-size: .98rem; }
.ai-stage-card p { font-size: .86rem; }
.ai-proof-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: .9rem; }
.ai-arc-visual { margin-bottom: 1.5rem; }

.contact-layout { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(280px,.9fr); gap: 1rem; align-items: start; }
.contact-form, .contact-aside { padding: clamp(1.1rem,2.4vw,1.6rem); border: 1px solid var(--border); background: linear-gradient(180deg,rgba(24,29,31,.94),rgba(18,22,23,.94)); }
.contact-form { display: grid; gap: .9rem; }
.contact-form-row { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .8rem; }
.contact-form label { display: grid; gap: .38rem; color: var(--muted); font-size: .82rem; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; border: 1px solid var(--border); border-radius: 6px; background: #0e1112; color: var(--text); padding: .78rem; font: inherit; }
.contact-form textarea { min-height: 165px; resize: vertical; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--amber); outline-offset: 2px; }
.contact-form .button { width: max-content; }
.contact-note { color: var(--muted); font-size: .8rem; }
.contact-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.contact-success { margin: 0 0 1rem; padding: .85rem 1rem; border: 1px solid rgba(143,174,104,.45); border-radius: 8px; background: rgba(143,174,104,.1); color: var(--text); }
.background-page .info-grid, .proof-page .info-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }

@media (max-width: 760px) {
  body { font-size: 14px; }
  .section-grid, .contact-layout, .contact-form-row { grid-template-columns: 1fr; }
  .contact-form .button { width: 100%; }
}