.detail-main { background: var(--bg); }
.detail-back { display: inline-flex; align-items: center; gap: 10px; color: var(--lime); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 44px; }
.detail-back:hover { text-decoration: underline; }
.detail-hero { padding-top: 70px; padding-bottom: 95px; }
.detail-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 7%; align-items: center; }
.detail-kicker { color: var(--lime); font: 500 11px var(--mono); text-transform: uppercase; letter-spacing: .12em; }
.detail-hero h1 { font: 600 clamp(58px, 6.6vw, 100px)/.98 var(--display); letter-spacing: -.075em; margin: 25px 0; }
.detail-hero h1 em { color: var(--lime); font-style: normal; font-weight: 400; }
.detail-lede { color: #bec8d0; font-size: 19px; line-height: 1.65; max-width: 660px; }
.detail-hero .tags { margin-top: 27px; }
.detail-hero .button { margin-top: 34px; }
.detail-visual { min-width: 0; }
.detail-visual .feature-art { margin: 0; min-height: 420px; }
.detail-visual .card-art { height: 450px; border: 1px solid #536273; border-radius: 19px; }
.detail-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 65px; border-top: 1px solid var(--line); padding-top: 23px; }
.detail-stats div { display: flex; flex-direction: column; gap: 9px; }
.detail-stats span { color: var(--lime); font: 10px var(--mono); letter-spacing: .12em; }
.detail-stats strong { font: 600 16px var(--display); }
.detail-content { padding: 95px 0; border-top: 1px solid var(--line); background: #151d27; }
.detail-content-grid { display: grid; grid-template-columns: .65fr 1.35fr; gap: 10%; }
.detail-content h2, .detail-media h2 { font: 600 clamp(39px, 4vw, 58px)/1.08 var(--display); letter-spacing: -.06em; margin: 16px 0 0; }
.detail-prose p { color: #c1cad0; font-size: 17px; line-height: 1.75; margin: 0 0 18px; }
.detail-prose h3 { color: var(--text); font: 600 21px var(--display); margin: 32px 0 14px; }
.contribution-list { list-style: none; padding: 0; margin: 0; }
.contribution-list li { color: #c1cad0; padding: 13px 0 13px 29px; border-bottom: 1px solid #394551; position: relative; font-size: 15px; line-height: 1.6; }
.contribution-list li::before { content: '↗'; position: absolute; left: 0; top: 13px; color: var(--lime); }
.detail-media { padding: 95px 0; background: #111820; border-top: 1px solid var(--line); }
.detail-media-header { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 31px; }
.detail-media-header p { color: var(--muted); max-width: 290px; margin: 0; line-height: 1.55; }
.detail-media .video-grid { gap: 19px; }
.detail-media .video-card { border-color: #485663; }
.detail-figure { margin: 0; border: 1px solid #485663; border-radius: 19px; overflow: hidden; background: var(--panel); }
.detail-figure .card-art { height: 440px; }
.detail-figure figcaption { padding: 16px 20px; color: #aeb9c2; font: 11px var(--mono); }
.detail-next { border-top: 1px solid var(--line); padding: 43px 0; background: var(--bg); }
.detail-next .wrap { display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.detail-next p { color: #b8c1c8; margin: 0; }
.detail-next a { color: var(--lime); font: 500 12px var(--mono); white-space: nowrap; }
.detail-next a:hover { text-decoration: underline; }
@media (max-width: 1000px) { .detail-hero-grid { grid-template-columns: 1fr; gap: 44px; } .detail-visual { max-width: 640px; } .detail-content-grid { grid-template-columns: 1fr; gap: 30px; } }
@media (max-width: 650px) { .detail-hero { padding-top: 47px; padding-bottom: 70px; } .detail-back { margin-bottom: 28px; } .detail-hero h1 { font-size: clamp(54px, 12vw, 75px); } .detail-lede { font-size: 16px; } .detail-stats { gap: 8px; margin-top: 43px; } .detail-stats strong { font-size: 12px; } .detail-stats span { font-size: 9px; } .detail-visual .feature-art { margin: 0; min-height: 310px; } .detail-visual .card-art, .detail-figure .card-art { height: 320px; } .detail-content, .detail-media { padding: 70px 0; } .detail-media-header { display: block; } .detail-media-header p { margin-top: 14px; } .detail-next .wrap { display: block; } .detail-next a { display: inline-block; margin-top: 12px; } }
.detail-cover { display: block; width: 100%; aspect-ratio: 1.15; object-fit: cover; object-position: center 65%; border: 1px solid #536273; border-radius: 19px; }
.single-video { aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid #485663; border-radius: 19px; background: #0f1620; }
.single-video iframe { display: block; width: 100%; height: 100%; border: 0; }
.media-source { display: inline-block; margin-top: 17px; color: var(--lime); font: 500 11px var(--mono); }
.media-source:hover { text-decoration: underline; }
.detail-repository { border-top: 1px solid var(--line); padding: 52px 0; background: var(--bg); }
.detail-repository .wrap { display: flex; align-items: center; justify-content: space-between; gap: 40px; }
.detail-repository h2 { font: 600 clamp(32px, 3.4vw, 48px)/1.1 var(--display); letter-spacing: -.05em; margin: 13px 0 8px; }
.detail-repository p { color: #b7c1c9; margin: 0; line-height: 1.5; }
.github-button { white-space: nowrap; flex: none; }
.github-button img { width: 20px; height: 20px; filter: invert(1); }
.resume-main { padding: 68px 0 94px; }
.resume-main .detail-back { margin-bottom: 35px; }
.resume-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 34px; }
.resume-heading h1 { font: 600 clamp(54px, 6vw, 86px)/1.03 var(--display); letter-spacing: -.07em; margin: 20px 0 0; }
.resume-heading h1 em { font-style: normal; font-weight: 400; color: var(--lime); }
.resume-heading p { max-width: 300px; line-height: 1.6; color: var(--muted); margin: 0 0 7px; }
.resume-fallback { display: flex; justify-content: space-between; gap: 20px; padding: 16px 3px 0; color: #aeb9c2; font: 11px var(--mono); }
.resume-fallback a { color: var(--lime); }
.resume-fallback a:hover { text-decoration: underline; }
@media (max-width: 700px) { .detail-repository .wrap, .resume-heading { display: block; } .detail-repository .button { margin-top: 24px; } .github-button { white-space: normal; } .resume-heading p { margin-top: 18px; } .resume-frame { height: 72vh; min-height: 480px; border-radius: 13px; } .resume-pages { width: calc(100% - 24px); margin: 12px auto; } .resume-fallback { flex-wrap: wrap; } }

/* Shared in-page document viewer */
.nasa-detail-cover { object-position: 55% center; }
.detail-document { padding: 95px 0; border-top: 1px solid var(--line); background:#151d27; }
.detail-document h2 { font:600 clamp(39px,4vw,58px)/1.08 var(--display); letter-spacing:-.06em; margin:16px 0 0; }
.document-toolbar { display:flex; justify-content:space-between; align-items:center; gap:15px; margin:0 0 12px; color:#acb8c2; font:11px var(--mono); text-transform:uppercase; letter-spacing:.06em; }
.document-toolbar div { display:flex; align-items:center; gap:11px; }
.document-toolbar button { display:grid; place-items:center; width:32px; height:32px; padding:0; border:1px solid #66747e; border-radius:50%; background:#222d39; color:var(--lime); cursor:pointer; font:19px/1 var(--sans); }
.document-toolbar button:disabled { opacity:.4; cursor:default; }
.document-toolbar button:focus-visible { outline:2px solid var(--lime); outline-offset:3px; }
.pdf-zoom-value { min-width:39px; text-align:center; }
.pdf-viewer { height:min(88vh,1050px); min-height:650px; border:1px solid #586572; border-radius:20px; overflow:auto; background:#30343b; }
.pdf-pages { width:min(900px,calc(100% - 48px)); margin:24px auto; }
.pdf-pages canvas { display:block; width:100%; height:auto; margin:0 auto 18px; background:white; box-shadow:0 12px 35px #0005; }
.pdf-status { color:#dce4eb; text-align:center; padding:25px; font:13px var(--mono); }
.document-fallback { display:flex; justify-content:space-between; gap:20px; padding:16px 3px 0; color:#aeb9c2; font:11px var(--mono); }
.document-fallback a { color:var(--lime); }
.document-fallback a:hover { text-decoration:underline; }
:root[data-theme="light"] .document-toolbar { color:#59636c; }
:root[data-theme="light"] .document-toolbar button { background:#fffdf7; border-color:#989b91; }
:root[data-theme="light"] .pdf-viewer { background:#d7d4cc; border-color:#aaa69d; }
@media (max-width:700px) { .detail-document { padding:70px 0; } .pdf-viewer { height:72vh; min-height:480px; border-radius:13px; } .pdf-pages { width:calc(100% - 24px); margin:12px auto; } .document-fallback { flex-wrap:wrap; } }

/* Project evidence and consistent case-study navigation */
.detail-recognition { display:inline-flex; align-items:center; gap:9px; margin:0 0 4px; color:var(--lime); font:500 12px/1.4 var(--mono); letter-spacing:.03em; }
.detail-recognition::before { content:''; width:7px; height:7px; flex:none; border-radius:50%; background:var(--lime); }
.valid-detail-visual { overflow:hidden; border:1px solid #536273; border-radius:19px; background:#10151d; }
.valid-detail-visual .detail-cover { width:100%; aspect-ratio:16/9; border:0; border-radius:0; object-fit:contain; object-position:center; }
.valid-detail-visual > span { display:block; padding:11px 17px; border-top:1px solid #536273; color:#c4ced5; font:11px var(--mono); }
.detail-next .project-navigation { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); align-items:center; }
.project-navigation > :nth-child(2) { justify-self:center; }
.project-navigation > :nth-child(3) { justify-self:end; text-align:right; }
.project-navigation a, .project-nav-unavailable { display:block; color:var(--lime); font:500 12px/1.4 var(--mono); white-space:normal; }
.project-navigation a small { display:block; margin-top:4px; color:var(--muted); font:11px/1.35 var(--mono); }
.project-navigation .project-nav-unavailable { color:var(--muted); opacity:.65; }
.project-navigation a:focus-visible { outline:2px solid var(--lime); outline-offset:5px; border-radius:2px; }
:root[data-theme="light"] .valid-detail-visual { background:#e5e6e3; border-color:#b9b4a9; }
:root[data-theme="light"] .valid-detail-visual > span { color:#4f5962; border-color:#b9b4a9; }
@media (max-width:650px) {
  .detail-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 14px; }
  .detail-stats > div:first-child { grid-column:1/-1; }
  .detail-next .project-navigation { display:grid; grid-template-columns:1fr 1fr; gap:25px 12px; }
  .project-navigation > :nth-child(2) { grid-column:1/-1; grid-row:2; justify-self:center; }
  .project-navigation > :nth-child(3) { grid-column:2; grid-row:1; }
  .project-navigation a { margin:0; }
}