/* case-study.css
   Loads AFTER styles.css on case-study pages. Reuses the existing
   tokens (--ink, --ink-soft, --teal, --teal-deep, --rule, --foam,
   --serif, --sans, --max) instead of redefining them, so every
   case study stays visually identical to the rest of the site. */

:root{
  --rail-w:280px;
  --measure:64ch;
}

body.cs-body{
  background:#F8F7F3;
}

/* ───────────────────────── Left rail ───────────────────────── */
/* A fixed foam panel, matching the same glass-card treatment used
   for .project / .about-section elsewhere on the site. */

.rail{
  position:fixed;
  top:0; left:0; bottom:0;
  width:var(--rail-w);
  padding:36px 30px 28px;
  background:rgba(255,255,255,0.6);
  border-right:1px solid rgba(255,255,255,0.7);
  backdrop-filter:blur(6px);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  z-index:10;
}

.rail-top a.rail-logo{
  display:inline-block;
  font-family:var(--serif);
  font-size:1.1rem;
  font-weight:500;
  color:var(--ink);
  text-decoration:none;
  margin-bottom:40px;
}
.rail-top a.rail-logo:hover{ color:var(--teal-deep); }

.rail-project-tag{
  font-size:0.72rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--teal-deep);
  font-weight:600;
  margin-bottom:8px;
}
.rail-project-title{
  font-family:var(--serif);
  font-size:1.05rem;
  line-height:1.35;
  color:var(--ink);
  margin-bottom:36px;
}

/* Scrollspy nav — a quiet vertical rule with a teal marker that
   slides to the section currently in view, echoing the wave-divider
   as the site's one recurring "line" motif. */
.rail-nav{
  position:relative;
  padding-left:18px;
}
.rail-nav::before{
  content:'';
  position:absolute;
  left:0; top:4px; bottom:4px;
  width:1px;
  background:var(--rule);
}
.rail-marker{
  position:absolute;
  left:-1px;
  top:4px;
  width:2px;
  height:20px;
  background:var(--teal-deep);
  border-radius:2px;
  transition:transform 0.35s cubic-bezier(0.65,0,0.35,1), height 0.35s cubic-bezier(0.65,0,0.35,1);
}
.rail-nav ol{
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:20px;
}
.rail-nav li{ position:relative; }
.rail-nav a{
  display:block;
  text-decoration:none;
  font-size:0.9rem;
  color:var(--ink-soft);
  transition:color 0.2s;
}
.rail-nav a:hover{ color:var(--ink); }
.rail-nav li.active a{ color:var(--teal-deep); font-weight:500; }

.rail-bottom{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding-top:22px;
  border-top:1px solid var(--rule);
}
.rail-bottom a{
  font-size:0.85rem;
  color:var(--ink-soft);
  text-decoration:none;
  transition:color 0.2s;
}
.rail-bottom a:hover{ color:var(--teal-deep); }

/* ───────────────────────── Main content ───────────────────────── */

.cs-main{
  margin-left:var(--rail-w);
  max-width:820px;
  padding:72px 56px 40px;
}

.cs-hero{
  margin-bottom:56px;
  padding-bottom:40px;
  border-bottom:1px solid var(--rule);
}
.cs-hero-meta{
  display:flex;
  gap:22px;
  flex-wrap:wrap;
  font-size:0.85rem;
  color:var(--teal-deep);
  font-weight:600;
  margin-bottom:18px;
}
.cs-hero h1{
  font-family:var(--serif);
  font-weight:500;
  font-size:clamp(2rem, 4vw, 2.6rem);
  line-height:1.15;
  color:var(--ink);
  margin-bottom:18px;
  max-width:20ch;
}
.cs-hero .cs-summary{
  font-size:1.05rem;
  color:var(--ink-soft);
  max-width:var(--measure);
}

.cs-section{
  margin-bottom:56px;
  scroll-margin-top:40px;
}
.cs-section h2{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.55rem;
  color:var(--teal-deep);
  margin-bottom:18px;
}
.cs-section h3{
  font-family:var(--serif);
  font-weight:500;
  font-size:1.1rem;
  color:var(--ink);
  margin:26px 0 10px;
}
.cs-section p{
  max-width:var(--measure);
  color:var(--ink-soft);
  margin-bottom:16px;
}
.cs-section p strong{ color:var(--ink); font-weight:600; }
.cs-section ul{
  max-width:var(--measure);
  color:var(--ink-soft);
  margin:0 0 16px 20px;
}
.cs-section li{ margin-bottom:8px; }

/* Media frame — matches .project-media treatment */
.cs-media{
  width:100%;
  border:1px solid var(--rule);
  border-radius:4px;
  margin:26px 0;
  overflow:hidden;
  background:linear-gradient(135deg,#D7ECE9,#B7DAD3);
}
.cs-media img{
  width:100%;
  display:block;
  cursor:zoom-in;
  transition:opacity 0.2s;
}
.cs-media img:hover{ opacity:0.9; }

/* Lightbox — click any screenshot to view it full-size over a dark overlay. */
.lightbox-overlay{
  position:fixed;
  inset:0;
  background:rgba(10,22,24,0.9);
  display:none;
  align-items:center;
  justify-content:center;
  padding:48px;
  z-index:100;
  cursor:zoom-out;
}
.lightbox-overlay.active{ display:flex; }
.lightbox-img{
  max-width:100%;
  max-height:100%;
  border-radius:4px;
  box-shadow:0 24px 64px rgba(0,0,0,0.45);
  cursor:default;
}
.lightbox-close{
  position:fixed;
  top:26px;
  right:30px;
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,0.14);
  color:#fff;
  font-size:1.5rem;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s;
}
.lightbox-close:hover{ background:rgba(255,255,255,0.26); }

@media (max-width:760px){
  .lightbox-overlay{ padding:22px; }
  .lightbox-close{ top:14px; right:16px; }
}
.cs-media-caption{
  font-size:0.82rem;
  color:var(--ink-soft);
  padding-top:8px;
}

/* Before / after pairing */
.cs-compare{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
  margin:26px 0;
}
.cs-compare-item .cs-compare-label{
  font-size:0.76rem;
  letter-spacing:0.06em;
  text-transform:uppercase;
  color:var(--teal-deep);
  font-weight:600;
  margin-bottom:10px;
}

/* Text-only compare item — for a descriptive paragraph paired with
   a photo, vertically centered so it reads as a natural counterpart
   to the image rather than a small caption floating at the top. */
.cs-compare-item--text{
  display:flex;
  align-items:center;
}
.cs-compare-item--text .cs-compare-copy{
  font-family:var(--sans);
  font-size:1rem;
  line-height:1.6;
  color:var(--ink-soft);
  max-width:none;
  margin-bottom:0;
}

/* Metric strip, matching .metric-row on the homepage */
.cs-metrics{
  display:flex;
  gap:36px;
  flex-wrap:wrap;
  padding:24px 0;
  margin:26px 0;
  border-top:1px solid var(--rule);
  border-bottom:1px solid var(--rule);
}
.cs-metric .num{
  font-family:var(--serif);
  font-size:1.6rem;
  color:var(--teal-deep);
  display:block;
}
.cs-metric .label{
  font-size:0.78rem;
  color:var(--ink-soft);
  text-transform:uppercase;
  letter-spacing:0.06em;
  max-width:22ch;
}

/* Pull quote */
.cs-quote{
  border-left:2px solid var(--teal-deep);
  padding:4px 0 4px 22px;
  margin:30px 0;
  max-width:var(--measure);
}
.cs-quote p{
  font-family:var(--serif);
  font-style:italic;
  font-size:1.12rem;
  color:var(--ink);
  margin-bottom:8px;
}
.cs-quote cite{
  font-family:var(--sans);
  font-style:normal;
  font-size:0.85rem;
  color:var(--ink-soft);
}

/* Callout — foam card, same border/radius treatment as skills-panel */
.cs-callout{
  border:1px solid var(--rule);
  border-radius:4px;
  padding:26px 28px;
  margin:30px 0;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
  background:rgba(255,255,255,0.5);
}
.cs-callout-item .k{
  font-size:0.7rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--teal-deep);
  font-weight:600;
  margin-bottom:8px;
}
.cs-callout-item .v{
  font-size:0.9rem;
  color:var(--ink);
}

/* Next project footer */
.cs-next{
  border-top:1px solid var(--rule);
  padding-top:36px;
  margin-top:20px;
}
.cs-next-label{
  font-size:0.72rem;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--teal-deep);
  font-weight:600;
  margin-bottom:12px;
}
.cs-next a.cs-next-link{
  display:inline-flex;
  align-items:baseline;
  gap:10px;
  text-decoration:none;
  font-family:var(--serif);
  font-size:1.5rem;
  font-weight:500;
  color:var(--ink);
  border-bottom:1px solid transparent;
  transition:border-color 0.2s, color 0.2s;
}
.cs-next a.cs-next-link:hover{
  color:var(--teal-deep);
  border-color:var(--teal-deep);
}

/* ───────────────────────── Responsive ───────────────────────── */

@media (max-width:980px){
  :root{ --rail-w:240px; }
  .cs-main{ padding:56px 36px 40px; }
  .cs-callout{ grid-template-columns:1fr 1fr; }
}

@media (max-width:760px){
  .rail{
    position:sticky;
    top:0;
    width:100%;
    height:auto;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    padding:16px 20px;
    border-right:none;
    border-bottom:1px solid rgba(255,255,255,0.7);
  }
  .rail-top{ display:flex; align-items:center; gap:16px; }
  .rail-top a.rail-logo{ margin-bottom:0; }
  .rail-project-tag, .rail-project-title{ display:none; }
  .rail-nav{ display:none; }
  .rail-bottom{ border-top:none; padding-top:0; flex-direction:row; gap:18px; }
  .cs-main{ margin-left:0; padding:36px 24px; }
  .cs-compare{ grid-template-columns:1fr; }
  .cs-callout{ grid-template-columns:1fr; }
  .cs-metrics{ gap:22px; }
}