/* Broader portfolio: reuse the site's slate, cyan, typography and button system. */
[hidden] { display: none !important; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link { position:fixed; top:8px; left:8px; z-index:200; transform:translateY(-160%); background:var(--text); color:var(--bg); padding:12px 20px; border-radius:6px; }
.skip-link:focus { transform:none; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline:2px solid var(--accent); outline-offset:5px; }
section { scroll-margin-top:6rem; }
.nav-inner { max-width:1160px; justify-content:space-between; }
nav .nav-brand { font-size:1.3rem; letter-spacing:-.06em; color:var(--text); padding:0; min-width:44px; background:none; border:0; }
.nav-brand span { color:var(--accent); }
nav .nav-brand::after { display:none; }
#hero { max-width:1160px; padding:4rem 2rem 2rem; text-align:left; min-height:0; }
#hero { display:block; animation:none; }
#hero > * { max-width:none; }
.hero-layout { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(220px,.75fr); gap:4rem; align-items:center; }
#hero h1 { font-size:clamp(2.7rem,5.4vw,4.9rem); line-height:1.08; letter-spacing:-.055em; margin:.9rem 0 1rem; color:var(--text); background:none; -webkit-text-fill-color:var(--text); }
#hero .subtitle { font-size:clamp(1rem,1.5vw,1.2rem); line-height:1.6; color:var(--accent); margin:0 0 1rem; }
.hero-statement { font-size:clamp(1.1rem,1.8vw,1.35rem); line-height:1.7; max-width:52ch; color:var(--text); }
#hero .hero-links { justify-content:flex-start; gap:.75rem 1.2rem; margin-top:1.6rem; flex-wrap:wrap; }
#hero .cta-btn, #hero .outline-btn { font-size:.83rem; padding:.85rem 1.1rem; box-shadow:none; }
.text-link { color:var(--text); font-size:.85rem; text-underline-offset:5px; }
.hero-credential { color:var(--muted); font-size:.75rem; margin-top:1.1rem; }
.hero-portrait { margin:0; }
.hero-portrait img { display:block; width:100%; height:310px; object-fit:cover; object-position:center 35%; border-radius:6px 6px 60px 6px; }
.hero-portrait figcaption { margin-top:.8rem; color:var(--muted); font-size:.68rem; }
.proof-strip { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.5rem; margin-top:3rem; padding:1.5rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
.proof-strip strong { font-size:clamp(1.5rem,2.6vw,2rem); letter-spacing:-.04em; display:block; color:var(--text); }
.proof-strip span { display:block; color:var(--muted); font-size:.72rem; line-height:1.55; }
.proof-caption { font-size:.75rem; color:var(--muted); margin-top:.85rem; }
#portfolio, #builds { max-width:1160px; padding:3rem 2rem; }
.eyebrow { color:var(--accent); font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.16em; margin-bottom:.55rem; }
#portfolio .section-title, #builds .section-title { margin-bottom:.7rem; }
.work-filters { display:flex; flex-wrap:wrap; gap:.5rem; margin:1.5rem 0 .75rem; }
.work-filters button { background:transparent; color:var(--muted); border:1px solid var(--border); border-radius:6px; min-height:44px; padding:.65rem 1rem; font:inherit; font-size:.78rem; cursor:pointer; transition:background-color 160ms,color 160ms; }
.work-filters button[aria-pressed="true"] { background:var(--accent); border-color:var(--accent); color:#0b1724; font-weight:700; }
.work-filters button:hover { border-color:var(--accent); color:var(--text); }
.work-filters button[aria-pressed="true"]:hover { color:#0b1724; }
.filter-status { color:var(--muted); font-size:.75rem; margin-bottom:1.2rem; min-height:1.4em; }
.project-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1.5rem; align-items:stretch; }
.project-card { min-width:0; display:flex; flex-direction:column; overflow:hidden; border:1px solid var(--border); border-radius:12px; background:rgba(22,34,52,.8); }
.project-image-link { display:block; overflow:hidden; background:var(--bg2); border-bottom:1px solid var(--border); }
.project-image { width:100%; height:auto; aspect-ratio:1.6; object-fit:contain; object-position:top; display:block; }
.project-image-link .project-image { transition:transform 220ms ease; }
.project-image-link:hover .project-image { transform:scale(1.015); }
.project-body { padding:1.55rem; display:flex; flex-direction:column; align-items:flex-start; gap:.8rem; flex:1; }
.project-meta { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; color:var(--muted); font-size:.64rem; }
.maturity { display:inline-block; padding:.28rem .5rem; border:1px solid rgba(56,189,248,.3); color:#a8dcf2; font-size:.62rem; text-transform:uppercase; font-weight:700; letter-spacing:.06em; border-radius:4px; line-height:1.5; }
.project-card h3 { font-size:1.24rem; line-height:1.35; letter-spacing:-.025em; }
.project-card h3 a { color:var(--text); text-decoration:none; }
.project-card h3 a:hover { color:var(--accent); }
.project-body p { font-size:.84rem; color:var(--muted); line-height:1.7; }
.project-body .project-hook { color:var(--text); font-size:.9rem; }
.project-body .project-proof { color:#a7dbcd; padding:.7rem 0; border-block:1px solid var(--border); width:100%; font-size:.8rem; }
.project-body .project-role { font-size:.72rem; }
.project-role strong { display:block; color:var(--text); font-size:.66rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.25rem; }
.project-read { margin-top:auto; padding-top:.7rem; color:var(--accent); text-decoration:none; font-size:.8rem; font-weight:600; min-height:44px; display:inline-flex; gap:.65rem; align-items:center; }
.earlier-builds { margin-top:2rem; border-block:1px solid var(--border); padding:1.1rem 0; }
.earlier-builds summary { cursor:pointer; padding:.3rem 0; color:var(--text); font-size:.9rem; }
.earlier-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2rem; padding:1.5rem 0; }
.earlier-grid p { color:var(--muted); font-size:.82rem; margin:.7rem 0; }
.earlier-grid a, .exp-details a { color:var(--accent); text-underline-offset:3px; }
#about, #experience, #how-i-work, #skills, #education, #certifications, #contact { padding-top:3rem; padding-bottom:3rem; }
.section-title::after { box-shadow:none; }
.cta-btn { box-shadow:none; }
/* Content remains available without JavaScript or during interrupted loading. */
.reveal-item, .about-photo-card, .summary-card, .exp-card, .role-chip, .skill-pill, .cert-card, .contact-card, .edu-card, .how-card { opacity:1; transform:none; filter:none; }
.case-navigation { max-width:1100px; margin:auto; padding:1.2rem 2rem; display:flex; justify-content:space-between; gap:1rem; border-bottom:1px solid var(--border); }
.case-navigation a { color:var(--text); text-decoration:none; font-size:.85rem; min-height:44px; display:flex; align-items:center; }
.case-page main { max-width:1100px; margin:auto; padding:0 2rem; }
.case-hero { padding:3.5rem 0 2rem; }
.case-hero h1 { font-size:clamp(2rem,5vw,3.5rem); line-height:1.15; letter-spacing:-.045em; max-width:24ch; margin:.8rem 0 1.2rem; }
.case-deck { color:var(--muted); font-size:1.15rem; max-width:60ch; }
.project-links { display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.5rem; }
.case-cover { margin:0 0 2rem; }
.case-cover:empty { display:none; }
.case-cover img { border:1px solid var(--border); border-radius:8px; }
.case-narrative { max-width:850px; }
.case-page .case-section { max-width:none; margin:0; padding:1.6rem 0; border-bottom:1px solid var(--border); display:grid; grid-template-columns:210px minmax(0,1fr); gap:1.5rem; }
.case-section h2 { font-size:.94rem; line-height:1.5; }
.case-section h2 span { color:var(--accent); margin-right:.6rem; font-size:.7rem; }
.case-section p { font-size:.95rem; line-height:1.8; color:#b7c4d5; }
.case-page .case-section::before { display:none; }
.content-flow { display:flex; flex-wrap:wrap; grid-column:1/-1; gap:.5rem; padding:0; list-style:none; }
.content-flow li { padding:.55rem .8rem; background:var(--bg2); border:1px solid var(--border); border-radius:4px; font-size:.75rem; }
.content-flow li:not(:last-child)::after { content:' →'; color:var(--accent); margin-left:.5rem; }
.case-bottom { padding:3rem 0; text-align:left; background:none; }
.case-bottom p { margin-bottom:1rem; }
@media(max-width:768px) {
  .nav-inner { padding:.5rem 1rem; gap:0; }
  nav .nav-brand { width:auto; margin-right:auto; }
  .nav-links { flex-basis:100%; }
  #hero { padding:2.4rem 1.25rem 1.5rem; }
  .hero-layout { grid-template-columns:1fr; gap:1.5rem; }
  .hero-portrait { display:none; }
  #hero h1 { font-size:3rem; }
  #hero .hero-links { gap:.75rem; }
  .proof-strip { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:2rem; gap:1rem; }
  #portfolio, #builds { padding:2rem 1.25rem; }
  .work-filters { gap:.45rem; }
  .work-filters button { padding:.55rem .7rem; font-size:.74rem; }
  .project-grid { grid-template-columns:1fr; }
  .project-body { padding:1.2rem; }
  .earlier-grid { grid-template-columns:1fr; gap:1.5rem; }
  .case-navigation { padding:.8rem 1.25rem; }
  .case-page main { padding:0 1.25rem; }
  .case-hero { padding:2rem 0 1.5rem; }
  .case-page .case-section { grid-template-columns:1fr; gap:.65rem; }
  .case-deck { font-size:1rem; }
}
@media(prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } *, *::before, *::after { animation:none !important; transition:none !important; } }