/*
  detail-base.css
  Purpose: Base layout for the project and experience detail pages: the page shell, panels, buttons,
  tags, and the project detail sections. It is the part of the old shared stylesheet those pages still
  use; ocean-detail.css loads after it and re-points the colours at the ocean palette.
  Used by: projects/index.html and experience/index.html, before project-detail.css or experience-detail.css.
*/
:root{--olive-green:#7A8A4F;--sag-green:#8B6B3F;--cream:#E4CFAE;--sand-cream:#8B6B3F;--espresso-brown:#3E3026;--bg:var(--cream);--bg-soft:#E4CFAE;--panel:#E4CFAE;--panel-strong:#E4CFAE;--text:var(--espresso-brown);--muted:#705239;--accent:var(--olive-green);--accent-dark:#4F6530;--accent-soft:var(--sag-green);--accent-warm:var(--sand-cream);--border:#8B6B3F;--radius:24px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{margin:0;font-family:"Space Grotesk",system-ui,sans-serif;color:var(--text);background:linear-gradient(135deg,#3e3026 0%,#705239 45%,#7a8a4f 100%);min-height:100vh;position:relative}
.page-shell{width:min(1180px,100% - 32px);margin:0 auto;min-width:0;position:relative;z-index:2}
img,video,iframe{max-width:100%}
main,section,article,div{min-width:0}
.section-heading h2{max-width:880px;color:var(--cream);font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.08;overflow-wrap:anywhere}
.kicker{color:var(--olive-green);text-transform:uppercase;letter-spacing:.18em;font-size:.78rem;font-family:"IBM Plex Mono",monospace;font-weight:700}
.brand{display:flex;align-items:center;gap:10px;color:var(--espresso-brown);font-weight:800;text-decoration:none;flex:0 0 auto}
.cta-group{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.button{display:inline-flex;align-items:center;justify-content:center;padding:13px 20px;border-radius:999px;font-weight:800;text-decoration:none;transition:.22s}
.button--primary{color:var(--cream);background:var(--sand-cream);border:1px solid var(--espresso-brown)}
.button:hover{transform:translateY(-2px)}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:28px}
.panel__body{color:var(--muted);line-height:1.7}
.project-status{display:inline-flex;width:fit-content;align-items:center;padding:5px 9px;border:1px solid var(--accent-dark);border-radius:999px;font-family:"IBM Plex Mono",monospace;font-size:.7rem;font-weight:700;letter-spacing:.07em;line-height:1;text-transform:uppercase}
.project-status--completed{color:var(--espresso-brown);background:#d9bc8f}
.project-card__tags,.stack-list{display:flex;flex-wrap:wrap;gap:8px}
.project-card__tags{margin-top:18px}
.project-card__tags span,.stack-list span{padding:7px 10px;border-radius:999px;color:var(--espresso-brown);background:#d9bc8f;border:1px solid var(--sand-cream);font-size:.82rem}

.project-detail__hero{min-height:calc(100vh - 110px);padding:72px 0;display:grid;grid-template-columns:1fr .9fr;align-items:center;gap:48px}
.project-detail__intro h1{margin:14px 0 18px;color:var(--cream);font-size:clamp(2.8rem,6vw,5.8rem);line-height:.98;overflow-wrap:anywhere}
.project-detail__role{color:var(--cream);font-family:"IBM Plex Mono",monospace;font-size:.9rem}
.project-detail__summary{max-width:680px;margin:22px 0;color:var(--cream);font-size:1.15rem;line-height:1.75}
.back-link,.project-detail__footer a{color:var(--cream);font-weight:700;text-decoration:none}
.back-link:hover,.project-detail__footer a:hover{text-decoration:underline}
.project-detail__cover{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--espresso-brown);aspect-ratio:16/10}
.project-detail__cover img{width:100%;height:100%;object-fit:cover}
.detail-section{padding:64px 0}
.detail-section .section-heading{margin-bottom:28px}
.detail-section .section-heading h2{color:var(--cream)}
.detail-grid,.decision-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.decision-card h3,.detail-section .panel h2{margin:10px 0 14px;color:var(--espresso-brown)}
.decision-card p{color:var(--muted);line-height:1.7}
.detail-list{padding-left:24px;color:var(--muted);line-height:1.7}
.detail-list li+li{margin-top:10px}
.media-gallery{display:grid;gap:32px}
.media-item{overflow:hidden;border:1px solid var(--border);border-radius:var(--radius);background:var(--panel)}
.media-item img,.project-video{display:block;width:100%;max-height:720px;background:#1d1814;object-fit:contain}
.media-item figcaption{padding:22px}
.media-item figcaption h3{margin-bottom:8px;color:var(--espresso-brown)}
.media-item figcaption p{color:var(--muted);line-height:1.65}
.project-not-found{margin:100px 0;text-align:center}
.project-not-found h1{margin:12px 0}
.project-not-found .button{margin-top:24px}
.project-detail__footer{padding:40px 0 70px}

@media(max-width:900px){
  .page-shell{width:min(100% - 24px,1180px)}
  .project-detail__hero,.detail-grid,.decision-grid{grid-template-columns:1fr}
  .project-detail__hero{padding:56px 0;gap:30px}
}
@media(max-width:520px){
  .page-shell{width:min(100% - 20px,1180px)}
  .panel{padding:20px}
  .project-detail__summary,.experience-detail__summary{font-size:1rem;line-height:1.65}
  .button{width:100%}
  .project-detail__intro h1{font-size:2.6rem}
  .detail-section{padding:44px 0}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}