/* ChicagoGuru — Bradley Green
   Design concept: the engineering blueprint / drawing set.
   30 years of enterprise infrastructure work, told the way an
   architect's office would tell it — measured lines, discipline
   codes (A / S / M / E series sheets), a title block, a scale. */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,500;8..60,600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
    --ink: #0B1E33;
    --ink-2: #12293F;
    --ink-3: #1B3651;
    --line: #8FC4E3;
    --line-dim: rgba(143, 196, 227, 0.35);
    --brass: #B8863C;
    --brass-light: #D9AE6C;
    --paper: #EEF0EA;
    --panel: #F8F8F4;
    --text: #101820;
    --slate: #55636C;
    --rule: #CCD0C6;
    --white: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Source Serif 4', Georgia, serif;
    line-height: 1.65;
    color: var(--text);
    background: var(--paper);
}

h1, h2, h3, h4, .display {
    font-family: 'Space Grotesk', sans-serif;
    letter-spacing: -0.01em;
}

.mono {
    font-family: 'IBM Plex Mono', monospace;
}

@media (prefers-reduced-motion: reduce) {
    * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

.container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 28px;
}

a { color: inherit; }

/* ---------- Blueprint grid backdrop ---------- */
.grid-bg {
    background-image:
        linear-gradient(var(--line-dim) 1px, transparent 1px),
        linear-gradient(90deg, var(--line-dim) 1px, transparent 1px);
    background-size: 42px 42px;
    background-position: -1px -1px;
}

/* ---------- Navigation ---------- */
.navbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: rgba(11, 30, 51, 0.92);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(143, 196, 227, 0.18);
    z-index: 1000;
    padding: 0;
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 68px;
}

.nav-brand {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.nav-brand a {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--white);
    text-decoration: none;
    letter-spacing: 0.02em;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 30px;
}

.nav-links a {
    color: rgba(255,255,255,0.78);
    text-decoration: none;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.nav-links a:hover { color: var(--line); }

.mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
}

.mobile-menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--white);
    transition: 0.25s;
}

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 26px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: all 0.2s ease;
    border: 1px solid transparent;
    cursor: pointer;
}

.btn-primary {
    background: var(--brass);
    color: var(--ink);
    border-color: var(--brass);
}

.btn-primary:hover {
    background: var(--brass-light);
    border-color: var(--brass-light);
}

.btn-secondary {
    background: transparent;
    color: var(--line);
    border-color: var(--line-dim);
}

.btn-secondary:hover {
    border-color: var(--line);
    background: rgba(143, 196, 227, 0.08);
}

.btn-outline-dark {
    background: transparent;
    color: var(--ink);
    border-color: var(--ink);
}

.btn-outline-dark:hover {
    background: var(--ink);
    color: var(--white);
}

.btn-block { width: 100%; }

/* ---------- Hero ---------- */
.hero {
    background: var(--ink);
    color: var(--white);
    padding: 150px 0 0;
    position: relative;
    overflow: hidden;
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 680px;
}

.hero-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
}

.hero-photo {
    flex-shrink: 0;
    width: 280px;
    height: 280px;
    position: relative;
}

.hero-photo img {
    display: block;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 232px;
    height: 232px;
    border-radius: 50%;
    border: 2px solid var(--brass-light);
    box-shadow: 0 0 0 6px rgba(143, 196, 227, 0.12);
}

.hero-photo-ring {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.hero-photo img { z-index: 1; }

.ring-dashed {
    stroke: var(--line);
    stroke-width: 1;
    stroke-dasharray: 2 7;
    opacity: 0.55;
}

.ring-solid {
    stroke: var(--brass-light);
    stroke-width: 1;
    opacity: 0.45;
}

.tick.major { stroke: var(--brass-light); stroke-width: 2; }
.tick.minor { stroke: var(--line); stroke-width: 1.5; opacity: 0.6; }
.tick.hair { stroke: var(--line); stroke-width: 1; opacity: 0.32; }

.ring-corners .corner {
    fill: none;
    stroke: var(--brass-light);
    stroke-width: 2;
    opacity: 0.85;
}

.ring-dot { fill: var(--brass-light); }

.ring-rotating {
    transform-origin: 160px 160px;
    animation: ring-spin 90s linear infinite;
}

@keyframes ring-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--line);
    margin-bottom: 28px;
}

.eyebrow::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--brass);
}

.hero h1 {
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 700;
    line-height: 1.02;
    margin-bottom: 18px;
}

.hero-role {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1rem;
    letter-spacing: 0.03em;
    color: var(--brass-light);
    margin-bottom: 26px;
}

.hero-subtitle {
    font-family: 'Source Serif 4', serif;
    font-size: 1.35rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.82);
    max-width: 600px;
    margin-bottom: 44px;
}

.hero-ctas {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 34px;
}

.hero-contact {
    display: flex;
    align-items: center;
    gap: 18px;
    flex-wrap: wrap;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.6);
    padding-bottom: 56px;
}

.hero-contact a { text-decoration: none; }
.hero-contact a:hover { color: var(--line); }
.hero-contact span { opacity: 0.4; }

/* ----- Career timeline (signature element) -----
   Each column IS its milestone: the left border is the hashmark and the
   label sits inside the same box, so they can never drift apart. Columns
   have a min-width for readability, then grow in proportion to real years
   until the next milestone — "somewhat to scale" without breaking layout. */
.ruler-wrap {
    position: relative;
    padding: 0 0 16px;
}

.ruler-track {
    display: flex;
    align-items: stretch;
    border-top: 1px solid var(--rule);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: thin;
}

.t-item {
    flex: 0 0 auto;
    border-left: 1px solid var(--rule);
    padding: 12px 14px 0 12px;
}

.t-item.major {
    border-left-width: 2px;
    border-left-color: var(--brass);
}

.t-item .t-year {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--brass);
    margin-bottom: 3px;
}

.t-item .t-role {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    line-height: 1.4;
    color: var(--slate);
}

.t-item .t-company {
    display: block;
    color: var(--ink);
    font-weight: 600;
}

/* thin divider ruler reused between sections */
.divider-ruler {
    height: 22px;
    background: var(--paper);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--rule);
    border-bottom: 1px solid var(--rule);
}

.divider-ruler::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 50%;
    height: 1px;
    background: var(--rule);
}

.divider-ruler .ticks {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
}

.divider-ruler .ticks span {
    flex: 1;
    border-right: 1px solid var(--rule);
    height: 10px;
}

/* ---------- Sections ---------- */
.section { padding: 108px 0; }

.section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 32px;
    margin-bottom: 56px;
    border-bottom: 1px solid var(--rule);
    padding-bottom: 24px;
}

.section-code {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    color: var(--brass);
    text-transform: uppercase;
    display: block;
    margin-bottom: 10px;
}

.section-head h2 {
    font-size: clamp(2rem, 3.4vw, 2.6rem);
    font-weight: 700;
    color: var(--ink);
}

.section-note {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    color: var(--slate);
    max-width: 260px;
    text-align: right;
    line-height: 1.6;
}

/* ---------- About ---------- */
.about { background: var(--paper); }

.about-timeline {
    margin-top: 56px;
    padding-top: 40px;
    border-top: 1px solid var(--rule);
}

.about-timeline h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 22px;
}

.about-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 64px;
    align-items: start;
}

.about-text p {
    font-size: 1.15rem;
    color: var(--text);
    margin-bottom: 22px;
}

.about-text strong { color: var(--ink); }

.about-highlights {
    margin-top: 36px;
    border-top: 1px solid var(--rule);
    padding-top: 28px;
}

.about-highlights h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
    margin-bottom: 18px;
}

.about-highlights ul { list-style: none; }

.about-highlights li {
    display: flex;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--rule);
    font-size: 1.02rem;
}

.about-highlights li:last-child { border-bottom: none; }

.about-highlights li .k {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    color: var(--brass);
    padding-top: 3px;
    flex-shrink: 0;
    width: 30px;
}

/* Dimension stat callouts */
.spec-stack { display: flex; flex-direction: column; gap: 0; }

.spec {
    border: 1px solid var(--rule);
    border-top: none;
    background: var(--panel);
    padding: 26px 28px;
    position: relative;
}

.spec:first-child { border-top: 1px solid var(--rule); }

.spec::before {
    content: '';
    position: absolute;
    left: 0; top: 12px; bottom: 12px;
    width: 3px;
    background: var(--brass);
}

.spec-value {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1;
}

.spec-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.76rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--slate);
    margin-top: 8px;
}

/* ---------- Expertise (spec panels) ---------- */
.expertise { background: var(--ink); color: var(--white); }

.expertise .section-head { border-bottom-color: rgba(143,196,227,0.25); }
.expertise .section-head h2 { color: var(--white); }
.expertise .section-note { color: rgba(255,255,255,0.55); }
.expertise .section-code { color: var(--brass-light); }

.expertise-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    background: rgba(143, 196, 227, 0.2);
    border: 1px solid rgba(143, 196, 227, 0.2);
    margin-bottom: 64px;
}

.panel {
    background: var(--ink);
    padding: 34px 28px;
    position: relative;
    flex: 1 1 255px;
}

.panel h3 {
    font-size: 1.18rem;
    margin-bottom: 12px;
    padding-top: 18px;
    border-top: 1px solid rgba(143,196,227,0.2);
    color: var(--white);
    font-weight: 600;
}

.panel p {
    font-family: 'Source Serif 4', serif;
    color: rgba(255,255,255,0.7);
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 18px;
}

.panel-cert {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    color: var(--line);
    letter-spacing: 0.03em;
}

.panel-cert::before { content: '— '; }

/* Certifications strip */
.cert-strip {
    border: 1px solid rgba(143,196,227,0.22);
    padding: 30px 32px;
}

.cert-strip-head {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brass-light);
    margin-bottom: 20px;
}

.cert-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cert-item {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.76rem;
    color: rgba(255,255,255,0.82);
    border: 1px solid rgba(143,196,227,0.3);
    padding: 8px 14px;
}

/* ---------- Experience (drawing sheets) ---------- */
.experience { background: var(--paper); }

.sheet-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 52px;
}

.sheet {
    background: var(--panel);
    border: 1px solid var(--rule);
    position: relative;
    padding: 30px 30px 0;
    width: 48%;
    margin-bottom: 28px;
}

.sheet::before,
.sheet::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-color: var(--brass);
    border-style: solid;
}

.sheet::before {
    top: -1px; left: -1px;
    border-width: 2px 0 0 2px;
}

.sheet::after {
    bottom: -1px; right: -1px;
    border-width: 0 2px 2px 0;
}

.sheet-role {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    color: var(--slate);
    letter-spacing: 0.03em;
    margin-bottom: 6px;
}

.sheet h3 {
    font-size: 1.32rem;
    color: var(--ink);
    margin-bottom: 14px;
    font-weight: 600;
}

.sheet-metric {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.88rem;
    color: var(--brass);
    font-weight: 600;
    margin-bottom: 14px;
}

.sheet p.sheet-desc {
    color: var(--text);
    font-size: 0.98rem;
    line-height: 1.6;
    margin-bottom: 24px;
}

.sheet-titleblock {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    border-top: 1px solid var(--rule);
    margin: 0 -30px;
}

.sheet-titleblock div {
    padding: 12px 16px;
    border-right: 1px solid var(--rule);
}

.sheet-titleblock div:last-child { border-right: none; }

.tb-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--slate);
    display: block;
    margin-bottom: 3px;
}

.tb-value {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    color: var(--ink);
    font-weight: 600;
}

.experience-cta {
    text-align: center;
    padding: 44px;
    background: var(--ink);
    color: var(--white);
}

.experience-cta p {
    margin-bottom: 20px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.75);
}

/* ---------- Contact ---------- */
.contact { background: var(--ink); color: var(--white); }

.contact .section-head { border-bottom-color: rgba(143,196,227,0.25); }
.contact .section-head h2 { color: var(--white); }
.contact .section-note { color: rgba(255,255,255,0.55); }
.contact .section-code { color: var(--brass-light); }

.contact-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 60px;
}

.contact-info h3 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--brass-light);
    margin-bottom: 26px;
}

.contact-item { margin-bottom: 22px; }

.contact-label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.45);
    margin-bottom: 5px;
}

.contact-item a, .contact-item span {
    font-family: 'Space Grotesk', sans-serif;
    color: white;
    font-size: 1.12rem;
    text-decoration: none;
}

.contact-item a:hover { color: var(--line); }

.availability {
    margin-top: 36px;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,0.15);
}

.availability h4 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.6);
    margin-bottom: 14px;
}

.availability ul { list-style: none; }

.availability li {
    padding: 7px 0;
    color: rgba(255,255,255,0.82);
    font-size: 0.96rem;
    position: relative;
    padding-left: 20px;
    font-family: 'Source Serif 4', serif;
}

.availability li::before {
    content: "";
    position: absolute;
    left: 0; top: 14px;
    width: 10px; height: 1px;
    background: var(--brass-light);
}

/* Contact Form */
.contact-form {
    background: var(--paper);
    padding: 36px;
    color: var(--text);
    border: 1px solid rgba(143,196,227,0.25);
}

.contact-form h3 {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 24px;
}

.calendly-intro {
    font-family: 'Source Serif 4', serif;
    font-size: 1rem;
    color: var(--slate);
    margin-bottom: 20px;
    line-height: 1.5;
}

.form-group { margin-bottom: 20px; }

.form-group label {
    display: block;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px;
    color: var(--slate);
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 13px 14px;
    border: 1px solid var(--rule);
    background: var(--white);
    border-radius: 0;
    font-size: 1rem;
    font-family: 'Source Serif 4', serif;
    color: var(--text);
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--brass);
}

.form-note {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    color: var(--slate);
    margin-top: 12px;
    text-align: center;
}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid var(--brass);
    outline-offset: 2px;
}

/* ---------- Footer ---------- */
.footer {
    background: #081522;
    color: rgba(255,255,255,0.6);
    padding: 34px 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.78rem;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.footer-brand .brand-name { color: white; font-weight: 600; }

.footer-links { display: flex; gap: 22px; }

.footer-links a { text-decoration: none; color: rgba(255,255,255,0.65); }
.footer-links a:hover { color: var(--line); }

.footer-copy { text-align: right; opacity: 0.7; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
    .about-grid, .contact-grid { grid-template-columns: 1fr; }
    .section { padding: 76px 0; }
    .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
    .section-note { text-align: left; max-width: none; }
    .nav-links { display: none; }
    .mobile-menu-btn { display: flex; }
    .sheet { width: 100%; min-width: 0; }

    .hero-top { flex-direction: column-reverse; align-items: center; gap: 28px; }
    .hero-content { max-width: 100%; }
    .hero-photo { width: 200px; height: 200px; align-self: center; }
    .hero-photo img { width: 166px; height: 166px; }

    /* Timeline: proportional-scale widths get unreadably narrow on small
       screens, so below this breakpoint every milestone gets an equal fixed
       width and the row scrolls horizontally instead. Swipeable, and each
       column snaps into place. */
    .ruler-track { scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; }
    .t-item {
        width: 158px !important;
        flex: 0 0 158px !important;
        scroll-snap-align: start;
        padding: 10px 12px 0 10px;
    }
    .t-item .t-role { font-size: 0.68rem; }
}

@media (max-width: 640px) {
    .container { padding: 0 20px; }
    .navbar .container { height: 60px; }
    .nav-brand a { font-size: 1.02rem; }
    .cert-strip { padding: 22px 20px; }
    .sheet-titleblock { font-size: 0.9em; }
}


.nav-links.active {
    display: flex;
    position: absolute;
    top: 68px; left: 0; right: 0;
    background: var(--ink);
    flex-direction: column;
    padding: 20px 28px 28px;
    gap: 18px;
    border-bottom: 1px solid rgba(143,196,227,0.2);
}

@media (max-width: 600px) {
    .hero { padding-top: 120px; }
    .hero-subtitle { font-size: 1.1rem; }
    .footer-content { flex-direction: column; text-align: center; }
    .footer-copy { text-align: center; }
}

@media print {
    .navbar, .hero-ctas, .contact, .footer, .divider-ruler { display: none; }
}