/*
  detail-dark.css
  Purpose: Gives the project and experience detail pages the same dark, mono-labelled look as the home page.
  Loaded after detail-base.css, project-detail.css / experience-detail.css and site-base.css, so it re-points
  their colour variables at the dark palette and restyles their components: flat panels, outlined chips and
  buttons, and the flat top bar shared with the home page.
*/
:root{
  --bg-soft:var(--bg);--panel:transparent;--panel-strong:transparent;
  --text:var(--ink);--muted:var(--dim);--accent:var(--cy);--accent-dark:var(--cy);--accent-soft:var(--cy);
  --accent-warm:var(--cy);--border:var(--edge);--radius:6px;
  --cream:var(--ink);--espresso-brown:var(--ink);--sand-cream:var(--cy);--olive-green:var(--cy);
}
body{min-height:100vh;color:var(--ink)}
.page-shell{width:min(1120px,calc(100% - 48px));padding-top:56px}

/* Headings and body copy: the home page's sans and ink colours. */
h1,h2,h3{font-family:var(--sans);font-weight:500;letter-spacing:-.04em;color:var(--ink)}
p,li{color:var(--dim)}
.project-detail__intro h1,.experience-detail__hero h1{font-size:clamp(2.6rem,6vw,5rem);line-height:1;letter-spacing:-.045em}
.section-heading h2,.detail-section .section-heading h2,.experience-detail__section .section-heading h2{font-size:clamp(2rem,4vw,3rem);line-height:1.06;color:var(--ink)}
.project-detail__role,.experience-detail__location{color:var(--cy);font:400 .85rem var(--mono);letter-spacing:.06em}
.experience-detail__organization{font:500 clamp(1.3rem,3vw,1.9rem) var(--sans);letter-spacing:-.03em;color:var(--ink)}
.project-detail__summary,.experience-detail__summary{color:var(--dim);font-size:1.12rem}

/* Small mono labels. */
.kicker,.tag{color:var(--cy);font:400 12px var(--mono);letter-spacing:.18em;text-transform:uppercase}
.project-status{font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:4px 12px;border-radius:999px;color:var(--ink);background:none;border:1px solid var(--edge)}
.project-status--completed{color:var(--ink);background:none}
.project-status--in-progress{color:var(--bg);background:var(--ink);border-color:var(--ink)}

/* Flat panels: a hairline box on the black page. */
.panel,.media-item{background:rgba(255,255,255,.02);border:1px solid var(--edge);border-radius:6px;color:var(--dim)}
.panel{padding:30px 32px}
.decision-card h3,.detail-section .panel h2,.experience-detail__dates h2,.media-item figcaption h3{color:var(--ink)}
.panel__body,.decision-card p,.media-item figcaption p,.detail-list,.experience-detail__list{color:var(--dim)}
.detail-list li::marker,.experience-detail__list li::marker{color:var(--cy)}
.project-detail__cover,.media-item img,.project-video,.video-embed{background:#07090e}
.project-detail__cover{border:1px solid var(--edge);border-radius:6px}
.project-detail__hero--text{grid-template-columns:minmax(0,820px);min-height:0;padding:56px 0 40px}

/* Tags and chips. */
.stack-list span,.project-card__tags span,.experience-detail__skills span{padding:5px 12px;border:1px solid var(--edge);border-radius:999px;background:none;color:var(--dim);font:400 11px var(--mono);letter-spacing:.1em;text-transform:uppercase}

/* Buttons: an outlined one and a filled one. */
.button{padding:13px 24px;border-radius:4px;border:1px solid var(--edge);background:none;color:var(--ink);font:400 12px var(--mono);letter-spacing:.16em;text-transform:uppercase;transition:background .25s,color .25s,border-color .25s}
.button:hover{border-color:var(--ink);transform:none}
.button--primary{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.button--primary:hover{background:var(--bg);color:var(--ink)}

/* Links back to the list. */
.back-link,.experience-detail__back{display:inline-block;margin-bottom:6px;color:var(--ink);font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid var(--edge);padding-bottom:3px;text-decoration:none;font-weight:400}
.back-link:hover,.experience-detail__back:hover{border-color:var(--ink);text-decoration:none}
.project-detail__footer,.experience-detail__footer{border:0;padding:20px 0 56px}
.project-detail__footer a,.experience-detail__footer a{display:inline-block;padding:10px 0;border-bottom:1px solid var(--edge);color:var(--ink);font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.project-detail__footer a:hover,.experience-detail__footer a:hover{border-color:var(--ink);text-decoration:none}

.project-detail__loading,.experience-detail__loading,.project-not-found,.experience-detail__not-found{color:var(--ink)}
.project-detail__loading p,.experience-detail__loading p{padding:80px 0;font:400 12px var(--mono);letter-spacing:.14em;text-transform:uppercase}

@media(max-width:760px){
  .page-shell{width:calc(100% - 32px);padding-top:56px}
  .panel{padding:24px 22px}
}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}