/* ======================================================================
   Senior polish: more breathing room, calmer accents, quieter chrome.
   Appended last so it overrides earlier rules. Layout and animations unchanged.
   ====================================================================== */
:root {
  --radius: 20px;
  --shadow: 0 24px 70px rgba(0,0,0,.26);
  --measure: 62ch;
}

/* Rhythm: fewer, larger gaps between sections */
.section { padding: 148px 0; }
.section-tight { padding: 112px 0; }
.container { width: min(1120px, calc(100% - 64px)); }

/* Type: lighter, more confident, readable line lengths */
body { line-height: 1.72; }
h1 { font-size: clamp(2.8rem, 4.4vw, 4rem); letter-spacing: -.045em; line-height: 1.06; margin-bottom: 32px; max-width: none; }
h2 { font-size: clamp(2rem, 3.4vw, 3.1rem); letter-spacing: -.035em; line-height: 1.1; margin-bottom: 22px; }
h3 { font-size: 1.3rem; letter-spacing: -.02em; }
.eyebrow { font-size: .72rem; letter-spacing: .2em; font-weight: 700; margin-bottom: 22px; opacity: .9; }
.hero-text, .section-copy, .about-copy, .card p, .project-card p, .timeline li { max-width: var(--measure); }
.hero-text { font-size: 1.14rem; line-height: 1.75; }
.section-copy { font-size: 1.05rem; line-height: 1.8; }
.centered { margin-bottom: 76px; }
.centered .section-copy { margin-inline: auto; }

/* Hero: more air, calmer CTAs */
.hero { min-height: 820px; padding-top: 96px; padding-bottom: 120px; }
.hero-grid { gap: 80px; }
.availability { margin-bottom: 36px; }
.hero-actions { margin: 44px 0 36px; gap: 14px; }
.hero-meta { gap: 10px; }
.hero-meta span { background: transparent; }
.btn { min-height: 50px; padding: 0 24px; border-radius: 12px; font-weight: 650; }
.btn-primary { background: var(--primary); box-shadow: none; }
.btn-primary:hover { background: var(--primary-2); }
.btn:hover { transform: translateY(-1px); }

/* Trust strip: more vertical space per figure */
.trust-grid div { padding: 40px 28px; }
.trust-grid strong { font-size: 1.4rem; }

/* Engineering + about splits: wider gutters */
.engineering-grid { gap: 104px; }
.split { gap: 120px; }
.about-copy p { margin: 0 0 22px; }
.about-copy p:first-child { font-size: 1.36rem; line-height: 1.55; letter-spacing: -.01em; }

/* Cards: more padding, quieter hover, no orange wash */
.skill-grid { gap: 28px; }
.card, .project-card { padding: 40px 36px; box-shadow: none; background: var(--surface); }
.card:hover, .project-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.26); }
.card .icon { margin-bottom: 28px; background: transparent; border: 1px solid var(--line); }
.card h3 { margin-bottom: 12px; }
.tag-cloud { gap: 10px 12px; margin-top: 56px; }
.tag-cloud span, .project-tags span { padding: 6px 12px; font-size: .78rem; background: transparent; }

/* Experience: roomier entries */
.timeline { gap: 24px; }
.timeline-item { grid-template-columns: 200px 1fr; gap: 56px; padding: 44px 44px; border-radius: var(--radius); }
.timeline-item ul { margin-top: 20px; }
.timeline li { margin: 12px 0; line-height: 1.7; }

/* Certification */
.certification-card { padding: 64px; gap: 64px; background: var(--surface); }

/* Projects: two columns so each case study has room to read */
.projects-header { margin-bottom: 64px; }
.project-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 28px; }
.project-card { min-height: 0; }
.project-card h3 { margin: 10px 0 16px; font-size: 1.45rem; }
.project-tags { margin: 28px 0; gap: 8px; }
.project-number { font-size: 4rem; top: 14px; right: 26px; }
.project-link { min-height: 44px; padding: 0 18px; border-radius: 10px; background: var(--primary); font-weight: 650; }
.project-link.secondary { background: transparent; }

/* Featured: a thin accent instead of a glowing orange card */
.project-card--featured { background: var(--surface); border-color: var(--line); box-shadow: inset 3px 0 0 var(--primary); }
.project-card--featured:hover { border-color: rgba(255,255,255,.26); box-shadow: inset 3px 0 0 var(--primary); }
.project-featured-badge { background: transparent; color: var(--primary); border: 1px solid rgba(255,153,0,.4); padding: 4px 11px; margin-bottom: 18px; }

/* Contact */
.contact-section { padding-top: 120px; }
.contact-card { padding: 72px; gap: 72px; border-radius: 24px; }
footer { padding: 40px 0; }

/* Slower, subtler reveal reads more composed */
.reveal { transform: translateY(16px); transition: opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); }

@media (max-width: 1040px) {
  .hero-grid, .engineering-grid, .split, .contact-card { gap: 64px; }
  .hero { min-height: 0; }
}
@media (max-width: 720px) {
  .container { width: min(100% - 40px, 1120px); }
  .section { padding: 96px 0; }
  .section-tight { padding: 80px 0; }
  .hero { padding-top: 56px; padding-bottom: 80px; }
  .project-grid { grid-template-columns: 1fr; gap: 20px; }
  .card, .project-card { padding: 30px 24px; }
  .timeline-item { grid-template-columns: 1fr; padding: 30px 24px; gap: 10px; }
  .certification-card { padding: 40px 28px; gap: 32px; }
  .contact-card { padding: 40px 24px; }
}

/* ---- How I build: numbered principles ---- */
.principles { list-style: none; counter-reset: p; margin: 32px 0 0; padding: 0; display: grid; gap: 18px; max-width: var(--measure); }
.principles li { counter-increment: p; position: relative; padding-left: 44px; color: var(--muted); line-height: 1.65; }
.principles li::before { content: counter(p, decimal-leading-zero); position: absolute; left: 0; top: 1px; font: 700 .8rem "Space Grotesk", Inter, sans-serif; color: var(--primary); letter-spacing: .04em; }
.principles strong { color: var(--text); font-weight: 650; }

/* ---- Project cards ---- */
.project-card p { flex-grow: 0; }
.project-card > p:last-of-type { flex-grow: 1; }
.project-label { padding-right: 90px; }
.project-card code { font-size: .88em; padding: 1px 6px; border-radius: 6px; background: rgba(255,255,255,.06); }
body.light .project-card code { background: rgba(10,22,37,.06); }

/* ---- Certifications ---- */
.cert-list { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 20px; }
.cert-list li { display: grid; gap: 4px; padding-left: 18px; border-left: 2px solid var(--primary); }
.cert-list strong { font-size: 1.05rem; }
.cert-list span { color: var(--muted); font-size: .95rem; }
.badges { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.badge--sm { min-width: 112px; height: 112px; border-width: 5px; }
.badge--sm i { font-size: 1.8rem; }

/* ---- Experience: outcome-first bullets ---- */
.timeline li strong { color: var(--text); font-weight: 650; }

/* ---- Architecture diagrams ---- */
.diagram-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; }
.diagram-card { margin: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: transform .25s ease, border-color .25s ease; }
.diagram-card:hover { transform: translateY(-3px); border-color: rgba(255,255,255,.26); }
.diagram-thumb { position: relative; display: block; width: 100%; padding: 0; border: 0; border-bottom: 1px solid var(--line); background: #0b1220; cursor: zoom-in; }
.diagram-thumb img { width: 100%; height: auto; display: block; }
.diagram-zoom { position: absolute; right: 14px; top: 14px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: rgba(6,17,31,.8); border: 1px solid rgba(255,255,255,.18); color: #fff; font-size: .85rem; opacity: 0; transition: opacity .2s ease; }
.diagram-thumb:hover .diagram-zoom, .diagram-thumb:focus-visible .diagram-zoom { opacity: 1; }
.diagram-card figcaption { display: grid; gap: 6px; padding: 22px 24px 26px; }
.diagram-card figcaption strong { font-family: "Space Grotesk", Inter, sans-serif; font-size: 1.25rem; letter-spacing: -.02em; }
.diagram-card figcaption span { color: var(--muted); font-size: .95rem; line-height: 1.6; }
.diagram-card figcaption .diagram-cloud { color: var(--primary); font-size: .68rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.diagram-lightbox { width: min(1400px, 94vw); max-height: 92vh; padding: 0; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-solid); color: var(--text); overflow: auto; }
.diagram-lightbox::backdrop { background: rgba(2,6,12,.82); backdrop-filter: blur(4px); }
.diagram-lightbox img { width: 100%; height: auto; display: block; }
.lightbox-title { margin: 0; padding: 14px 20px; font-weight: 650; }
.lightbox-close { position: sticky; top: 12px; float: right; margin: 12px 12px -48px 0; z-index: 2; width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.2); background: rgba(6,17,31,.85); color: #fff; cursor: pointer; }
@media (max-width: 1040px) { .diagram-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 720px) { .diagram-grid { grid-template-columns: 1fr; gap: 20px; } .diagram-card figcaption { padding: 22px 22px 24px; } .diagram-zoom { opacity: 1; } }

/* ---- How I build: single column now the terminal mock is gone ---- */
.engineering-grid--solo { grid-template-columns: 1fr; }
.engineering-grid--solo .section-heading { max-width: none; }
.engineering-grid--solo .principles { max-width: none; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 32px; margin-top: 40px; }
.engineering-grid--solo .principles li { padding: 44px 0 0; border-top: 1px solid var(--line); }
.engineering-grid--solo .principles li::before { top: 16px; }
.engineering-grid--solo .principles strong { display: block; margin-bottom: 6px; font-size: 1.05rem; }
@media (max-width: 1040px) { .engineering-grid--solo .principles { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .engineering-grid--solo .principles { grid-template-columns: 1fr; gap: 24px; } }

/* ---- Photo: no caption, so no dark fade at the bottom ---- */
.portrait-shade { display: none; }