/* ============================================================
   Case-study modal — shared across cad-viewport*.html files
   ============================================================ */

#case-study-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  align-items: flex-start;
  justify-content: center;
  background: rgba(13, 14, 16, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  padding: 5vh 24px;
  overflow-y: auto;
}
#case-study-modal.open { display: flex; }

@keyframes cs-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes cs-rise-in {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#case-study-modal.open { animation: cs-fade-in 220ms ease-out; }
#case-study-modal.open .cs-panel { animation: cs-rise-in 320ms cubic-bezier(.2,.9,.2,1); }

.cs-panel {
  width: 100%;
  max-width: 1200px;
  background: #131418;
  border: 1px solid #2a2d36;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  color: #c9ccd4;
  font-family: 'Geist', sans-serif;
  box-shadow:
    0 0 0 1px rgba(255,91,31,0.12),
    0 60px 120px -20px rgba(0,0,0,0.7);
}

/* Top bar */
.cs-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 24px;
  border-bottom: 1px solid #22252d;
  background: #0f1014;
  font-size: 11px;
  letter-spacing: 0.04em;
  position: sticky; top: 0; z-index: 2;
}
.cs-topbar .cs-kicker {
  display: flex; align-items: center; gap: 10px;
  color: #8a8d96;
  font-variant-numeric: tabular-nums;
}
.cs-topbar .cs-kicker .cs-tag {
  color: #ff5b1f;
  letter-spacing: 0.22em;
  font-size: 9.5px;
}
.cs-topbar .cs-kicker .cs-dot { color: #2a2d36; }
.cs-topbar .cs-kicker .cs-file { color: #dee0e6; }

.cs-topbar .cs-controls { display: flex; align-items: center; gap: 4px; }
.cs-topbar .cs-controls button {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border: 1px solid transparent;
  background: transparent;
  color: #8a8d96;
  cursor: pointer;
  font-size: 13px;
  transition: color 180ms ease, border-color 180ms ease, background 180ms ease;
}
.cs-topbar .cs-controls button:hover { color: #f1f2f5; border-color: #2a2d36; background: #181a20; }
.cs-topbar .cs-controls .cs-close { color: #c9ccd4; }
.cs-topbar .cs-controls .cs-close:hover { color: #ff7a45; border-color: #ff5b1f; }

/* Body — scrolls internally */
.cs-body {
  display: grid;
  grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  gap: 48px;
  padding: 48px;
  overflow-y: auto;
  flex: 1;
}

@media (max-width: 900px) {
  .cs-body { grid-template-columns: 1fr; gap: 32px; padding: 32px 24px; }
}

/* Left column */
.cs-hero .cs-hero-kicker {
  font-size: 10px; letter-spacing: 0.22em; color: #ff5b1f;
}
.cs-hero .cs-hero-headline {
  font-size: 44px;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: #f1f2f5;
  font-weight: 600;
  margin-top: 14px;
  max-width: 22ch;
}
.cs-hero .cs-hero-sub {
  font-size: 16px;
  line-height: 1.6;
  color: #a3a6b0;
  margin-top: 16px;
  max-width: 50ch;
  font-weight: 300;
}

.cs-sections { margin-top: 56px; display: flex; flex-direction: column; gap: 36px; }
.cs-section .cs-section-head {
  font-size: 10px;
  letter-spacing: 0.22em;
  color: #6e717a;
  margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px;
}
.cs-section .cs-section-head::before {
  content: ''; width: 18px; height: 1px; background: #ff5b1f;
}
.cs-section .cs-section-body {
  font-size: 14.5px;
  line-height: 1.75;
  color: #dee0e6;
  max-width: 62ch;
  font-weight: 300;
}
.cs-section .cs-section-body p + p { margin-top: 14px; }

.cs-gallery { margin-top: 56px; }
.cs-gallery-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  margin-top: 16px;
}
.cs-gallery-tile {
  border: 1px solid #22252d;
  background: #1d2027;
  aspect-ratio: 4 / 3;
  position: relative;
  overflow: hidden;
}
.cs-gallery-tile img,
.cs-gallery-tile video {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.cs-gallery-tile img { filter: contrast(1.05) brightness(0.9); }
.cs-gallery-cap {
  font-size: 10.5px; color: #8a8d96; margin-top: 8px;
  letter-spacing: 0.02em;
}

/* Right column */
.cs-meta {
  position: sticky; top: 60px; align-self: start;
  display: flex; flex-direction: column; gap: 24px;
}
.cs-meta-block {
  border: 1px solid #22252d;
  background: #0f1014;
}
.cs-meta-head {
  padding: 9px 14px;
  font-size: 10px; letter-spacing: 0.22em;
  color: #6e717a;
  border-bottom: 1px solid #22252d;
  background: #131418;
}
.cs-meta-body { padding: 10px 0; }
.cs-meta-row {
  display: flex;
  padding: 5px 14px;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.cs-meta-row .k { color: #8a8d96; width: 96px; flex-shrink: 0; }
.cs-meta-row .v { color: #dee0e6; }
.cs-meta-row.accent .v { color: #ff7a45; }

.cs-tags {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 14px;
}
.cs-tags .cs-tag-chip {
  border: 1px solid #2c2f38;
  background: #1d2027;
  color: #c9ccd4;
  padding: 3px 9px;
  font-size: 10.5px;
  letter-spacing: 0.02em;
}

.cs-links { display: flex; flex-direction: column; padding: 4px 0; }
.cs-links a {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 14px;
  font-size: 12px;
  color: #dee0e6;
  border-top: 1px solid #181a20;
  transition: color 180ms ease, background 180ms ease;
}
.cs-links a:first-child { border-top: 0; }
.cs-links a:hover { color: #ff7a45; background: #131418; }
.cs-links a .arrow { color: #6e717a; transition: color 180ms ease, transform 180ms ease; }
.cs-links a:hover .arrow { color: #ff5b1f; transform: translateX(2px); }

/* Footer */
.cs-footer {
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 16px;
  padding: 18px 24px;
  border-top: 1px solid #22252d;
  background: #0f1014;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.cs-footer button {
  background: transparent; border: 0; color: #8a8d96;
  font-family: inherit; font-size: inherit;
  cursor: pointer;
  transition: color 180ms ease;
  display: inline-flex; align-items: center; gap: 8px;
}
.cs-footer button:hover { color: #f1f2f5; }
.cs-footer .cs-nav-prev { justify-self: start; }
.cs-footer .cs-nav-next { justify-self: end; }
.cs-footer .cs-nav-back {
  border: 1px solid #2a2d36;
  padding: 8px 18px;
  color: #c9ccd4;
}
.cs-footer .cs-nav-back:hover { color: #ff7a45; border-color: #ff5b1f; }
.cs-footer .cs-nav-prev span.lbl, .cs-footer .cs-nav-next span.lbl {
  color: #6e717a; font-size: 9.5px; letter-spacing: 0.18em;
}
.cs-footer .cs-nav-prev .title, .cs-footer .cs-nav-next .title {
  color: #c9ccd4;
}

/* When modal open, lock background scroll on body */
body.cs-locked { overflow: hidden; }

/* When showing About content, hide the prev/next nav and stretch the back button */
#case-study-modal.cs-about .cs-prev,
#case-study-modal.cs-about .cs-next,
#case-study-modal.cs-about .cs-nav-prev,
#case-study-modal.cs-about .cs-nav-next { display: none; }
#case-study-modal.cs-about .cs-footer { grid-template-columns: 1fr; justify-items: center; }

/* Clickable viewport tab (about.txt etc.) */
.tab.tab-link { transition: color 180ms ease, background 180ms ease; }
.tab.tab-link:hover { color: #f1f2f5; background: #131418; }

/* Scrollbar inside cs-body */
.cs-body::-webkit-scrollbar { width: 10px; }
.cs-body::-webkit-scrollbar-track { background: #131418; }
.cs-body::-webkit-scrollbar-thumb { background: #2a2d36; }

/* ============================================================
   Coursework + Experience — list-format rows
   ============================================================ */

.course-list { border-top: 1px solid #22252d; }
.course-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  align-items: center;
  gap: 32px;
  padding: 14px 6px;
  border-bottom: 1px solid #22252d;
  transition: background 180ms ease;
}
.course-list.collapsed .course-row.extra { display: none; }
.course-toggle {
  margin-top: 16px;
  background: transparent;
  border: 1px solid #2a2d36;
  color: #c9ccd4;
  font-family: 'Geist', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.08em;
  padding: 8px 14px;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.course-toggle:hover { color: #ff7a45; border-color: #ff5b1f; background: rgba(255,91,31,0.06); }
.course-row:hover { background: rgba(255,255,255,0.018); }
.course-row .cc {
  font-family: 'Geist', sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  color: #8a8d96;
  font-size: 11.5px;
}
.course-row .cn {
  color: #f1f2f5;
  font-size: 14.5px;
  letter-spacing: -0.005em;
}
.course-row .ct {
  color: #6e717a;
  font-size: 11px;
  text-align: left;
}
.course-row .cg {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #c9ccd4;
  font-size: 13px;
  letter-spacing: 0.04em;
}
.course-row .cg.acc { color: #ff7a45; }

@media (max-width: 720px) {
  .course-row { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; }
}

.exp-list-wrap { border-top: 1px solid #22252d; }
.exp-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) auto;
  gap: 36px;
  padding: 24px 6px;
  border-bottom: 1px solid #22252d;
  align-items: start;
  transition: background 180ms ease;
}
.exp-row:hover { background: rgba(255,255,255,0.012); }
.exp-date {
  padding-top: 4px;
  font-family: 'Geist', sans-serif;
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  color: #8a8d96;
  letter-spacing: 0.04em;
  display: flex; flex-direction: column; gap: 1px;
}
.exp-date .exp-loc { color: #6e717a; font-size: 10px; margin-top: 6px; }
.exp-body { min-width: 0; }
.exp-head {
  display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap;
}
.exp-title {
  color: #f1f2f5;
  font-size: 20px;
  letter-spacing: -0.012em;
  font-weight: 500;
}
.exp-team {
  margin-top: 4px;
  color: #a3a6b0;
  font-size: 12px;
  letter-spacing: 0.01em;
}
.exp-bullets {
  margin-top: 12px;
  display: flex; flex-direction: column; gap: 4px;
  font-size: 13px;
  color: #c9ccd4;
  line-height: 1.65;
  max-width: 70ch;
}
.exp-bullets li {
  position: relative; padding-left: 14px;
}
.exp-bullets li::before {
  content: '·';
  position: absolute; left: 0; top: -2px;
  color: #ff5b1f;
  font-weight: 700;
  font-size: 16px;
}
.exp-chip { white-space: nowrap; align-self: start; padding-top: 4px; }

@media (max-width: 900px) {
  .exp-row { grid-template-columns: 1fr; gap: 12px; }
  .exp-chip { padding-top: 0; }
}

.cs-gallery-tile { position: relative; }
.vp-play {
  position: absolute; inset: auto auto 12px 12px;
  border: 0; padding: 0; cursor: pointer; background: transparent;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  z-index: 2;
}
.vp-play svg { display: block; }
.vp-play:hover svg circle { fill: rgba(13,14,16,0.85); }

/* ============================================================
   Plain-page overrides — modal follows plain.html data-tone (light + dark)
   Cad-viewport.html has no data-tone attribute, so it keeps the original look.
   ============================================================ */
html[data-tone] #case-study-modal {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
}
html[data-tone] .cs-panel {
  background: var(--bg);
  border-color: var(--rule);
  color: var(--text);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--accent) 14%, transparent),
    0 60px 120px -20px rgba(0,0,0,0.45);
}

html[data-tone] .cs-topbar {
  background: var(--bg-2);
  border-bottom-color: var(--rule);
}
html[data-tone] .cs-topbar .cs-kicker { color: var(--text-mute); }
html[data-tone] .cs-topbar .cs-kicker .cs-tag { color: var(--accent); }
html[data-tone] .cs-topbar .cs-kicker .cs-dot { color: var(--rule); }
html[data-tone] .cs-topbar .cs-kicker .cs-file { color: var(--text); }
html[data-tone] .cs-topbar .cs-controls button { color: var(--text-mute); }
html[data-tone] .cs-topbar .cs-controls button:hover {
  color: var(--text); border-color: var(--rule); background: var(--bg);
}
html[data-tone] .cs-topbar .cs-controls .cs-close { color: var(--text); }
html[data-tone] .cs-topbar .cs-controls .cs-close:hover { color: var(--accent); border-color: var(--accent); }

html[data-tone] .cs-hero .cs-hero-kicker { color: var(--accent); }
html[data-tone] .cs-hero .cs-hero-headline { color: var(--text); }
html[data-tone] .cs-hero .cs-hero-sub { color: var(--text-mute); }

html[data-tone] .cs-section .cs-section-head { color: var(--text-mute); }
html[data-tone] .cs-section .cs-section-head::before { background: var(--accent); }
html[data-tone] .cs-section .cs-section-body { color: var(--text); }



html[data-tone] .cs-gallery-tile {
  background: var(--bg-2);
  border-color: var(--rule);
}
html[data-tone] .cs-gallery-cap { color: var(--text-mute); }

html[data-tone] .cs-meta-block {
  background: var(--bg-2);
  border-color: var(--rule);
}
html[data-tone] .cs-meta-head {
  background: var(--bg);
  color: var(--text-mute);
  border-bottom-color: var(--rule);
}
html[data-tone] .cs-meta-row .k { color: var(--text-mute); }
html[data-tone] .cs-meta-row .v { color: var(--text); }
html[data-tone] .cs-meta-row.accent .v { color: var(--accent); }

html[data-tone] .cs-tags .cs-tag-chip {
  background: var(--chip-bg);
  border-color: var(--chip-bd);
  color: var(--text);
}

html[data-tone] .cs-links a {
  color: var(--text);
  border-top-color: var(--rule);
}
html[data-tone] .cs-links a:hover { color: var(--accent); background: var(--bg-2); }
html[data-tone] .cs-links a .arrow { color: var(--text-mute); }
html[data-tone] .cs-links a:hover .arrow { color: var(--accent); }

html[data-tone] .cs-footer {
  background: var(--bg-2);
  border-top-color: var(--rule);
}
html[data-tone] .cs-footer button { color: var(--text-mute); }
html[data-tone] .cs-footer button:hover { color: var(--text); }
html[data-tone] .cs-footer .cs-nav-back {
  color: var(--text);
  border-color: var(--rule);
}
html[data-tone] .cs-footer .cs-nav-back:hover { color: var(--accent); border-color: var(--accent); }
html[data-tone] #case-study-modal.cs-about .cs-footer { display: none; }
html[data-tone] .cs-footer .cs-nav-prev span.lbl,
html[data-tone] .cs-footer .cs-nav-next span.lbl { color: var(--text-mute); }
html[data-tone] .cs-footer .cs-nav-prev .title,
html[data-tone] .cs-footer .cs-nav-next .title { color: var(--text); }