/* ============================================================
   SHERWOOD PORTFOLIO — editorial.css
   Shared case-study / editorial component system.
   Consumes tokens.css. No hard-wired values.
   ============================================================ */


/* ---- Content column ---------------------------------------- */
.case-shell { max-width: 960px; margin: 0 auto; }

/* Narrow reading measure for prose blocks, centered in the shell. */
.reading { max-width: 720px; margin-left: auto; margin-right: auto; }


/* ---- Masthead --------------------------------------------- */
.case-masthead { max-width: 720px; margin: var(--space-16) auto var(--space-12); }
.case-masthead .back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  text-decoration: none;
  margin-bottom: var(--space-8);
}
.case-masthead .back:hover { color: var(--color-accent); }
.case-masthead h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.4rem + 4vw, 5rem);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tightest);
  line-height: 1.02;
  max-width: 20ch;
  margin-bottom: var(--space-8);
}
.case-masthead .meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-6);
}
.case-masthead .meta-grid .cell .k {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  display: block;
  margin-bottom: var(--space-1);
}
.case-masthead .meta-grid .cell .v { font-size: var(--text-sm); color: var(--color-text); }
@media (max-width: 720px) {
  .case-masthead .meta-grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
}


/* ---- Lede ------------------------------------------------- */
.lede {
  font-family: var(--font-body);
  font-size: var(--text-xl);
  line-height: 1.45;
  color: var(--color-text);
  max-width: 720px;
  margin: 0 auto var(--space-16);
}


/* ---- Editorial sections (centered column, text left-aligned) */
.ed-section { max-width: 720px; margin: var(--space-24) auto; }
.ed-section--tight-top { margin-top: var(--space-12); }
.ed-section h2 {
  font-size: var(--text-2xl);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
}
.ed-section p { font-size: var(--text-md); line-height: 1.65; max-width: 72ch; margin-bottom: var(--space-5); }
.ed-section p:last-child { margin-bottom: 0; }
.ed-section em, .lede em { font-family: var(--family-serif); font-style: italic; font-weight: var(--weight-medium); }

/* Closing thesis block */
.ed-close { max-width: 720px; margin: var(--space-20) auto var(--space-12); padding-top: var(--space-10); border-top: var(--rule) solid var(--color-border-strong); }
.ed-close p { font-size: var(--text-lg); line-height: 1.5; color: var(--color-text); max-width: 56ch; }

/* Lists inside editorial sections */
.ed-section ul, .ed-section ol { margin: 0 0 var(--space-5); padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-3); max-width: 72ch; }
.ed-section ul:last-child, .ed-section ol:last-child { margin-bottom: 0; }
.ed-section li { position: relative; padding-left: var(--space-6); font-size: var(--text-md); line-height: 1.6; }
.ed-section ul li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 5px; height: 5px; background: var(--color-accent); border-radius: var(--radius-full); }
.ed-section ol { counter-reset: item; }
.ed-section ol li { counter-increment: item; }
.ed-section ol li::before { content: counter(item, decimal-leading-zero); position: absolute; left: 0; top: 0.1em; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-text-tertiary); }
.ed-section li strong { font-weight: var(--weight-semibold); }

/* Metrics row */
.metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); max-width: 720px; margin: var(--space-12) auto; }
.metrics .metric { display: flex; flex-direction: column; gap: var(--space-2); }
.metrics .metric .num { font-family: var(--font-display); font-weight: var(--weight-regular); font-size: clamp(2rem, 1.4rem + 2.4vw, 2.75rem); line-height: 1; letter-spacing: var(--tracking-tightest); color: var(--color-accent); font-feature-settings: "lnum","tnum"; }
.metrics .metric .label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-tertiary); }
.metrics .metric p { font-size: var(--text-sm); line-height: 1.55; color: var(--color-text-secondary); }
@media (max-width: 640px) { .metrics { grid-template-columns: 1fr; gap: var(--space-6); } }

/* Inline user / pull quote within flow */
.user-quote { margin: var(--space-6) auto; max-width: 720px; padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 2px solid var(--color-border-strong); font-family: var(--family-serif); font-style: italic; font-weight: var(--weight-medium); font-size: var(--text-lg); line-height: 1.4; color: var(--color-text); }
.quote-cite { display: block; margin: var(--space-2) auto 0; max-width: 720px; font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--color-text-tertiary); font-style: normal; }

/* Timeline / career arc */
.timeline { max-width: 720px; margin: var(--space-8) auto var(--space-12); list-style: none; padding: 0; display: flex; flex-direction: column; }
.timeline li { display: grid; grid-template-columns: 130px 1fr; gap: var(--space-4); padding: var(--space-3) 0; border-top: var(--hairline) solid var(--color-border); }
.timeline li:first-child { border-top: none; }
.timeline .yr { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); color: var(--color-text-tertiary); }
.timeline .what { font-size: var(--text-sm); color: var(--color-text); }
@media (max-width: 600px) { .timeline li { grid-template-columns: 1fr; gap: 2px; } }

/* Crossfade slideshow (framed) */
.slideshow { display: grid; margin: var(--space-12) 0; background: var(--color-figure-frame); border: var(--hairline) solid var(--color-border); border-radius: var(--radius-figure); padding: clamp(var(--space-4), 2.5vw, var(--space-10)); }
.slideshow img { grid-area: 1 / 1; width: 100%; height: auto; display: block; border-radius: var(--radius-figure-inner); opacity: 0; transition: opacity 1.5s ease-in-out; }
.slideshow img.active { opacity: 1; }


/* ---- Inline code ------------------------------------------ */
code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--color-bg-alt);
  border: var(--hairline) solid var(--color-border);
  padding: 1px 5px;
  border-radius: var(--radius-chip);
  color: var(--color-text);
}


/* ---- Cinema figures (editorial framed) -------------------- */
.cinema { margin: var(--space-12) 0; }
.cinema .screen {
  position: relative;
  overflow: hidden;
  width: 100%;
  background: var(--color-figure-frame);
  border: var(--hairline) solid var(--color-border);
  border-radius: var(--radius-figure);
  padding: clamp(var(--space-4), 2.5vw, var(--space-10));
  display: grid;
  place-items: center;
}
.cinema .screen img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: var(--radius-figure-inner);
}
.cinema .screen--panoramic { aspect-ratio: 21 / 9; }
.cinema .screen--wide      { aspect-ratio: 16 / 9; }
.cinema .screen--standard  { aspect-ratio: 4 / 3; }
.cinema .screen--native    { width: fit-content; max-width: 100%; margin-inline: auto; }
.cinema .screen--native img { width: 480px; max-width: 100%; height: auto; }

/* Temporary missing-visual marker (disposable; replaced by real assets). */
.cinema .screen .placeholder {
  width: 100%;
  height: 100%;
  min-height: 0;
  background: repeating-linear-gradient(-45deg, #F0EFEA 0, #F0EFEA 8px, #F6F5F1 8px, #F6F5F1 16px);
  border-radius: var(--radius-figure-inner);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-6);
  text-align: center;
}
.cinema .screen .placeholder .ph-type  { color: var(--color-text-tertiary); font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; }
.cinema .screen .placeholder .ph-title { color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: var(--weight-semibold); max-width: 38ch; line-height: 1.4; }
.cinema .screen .placeholder .ph-source{ color: var(--color-accent); background: var(--color-accent-bg); border: var(--hairline) solid var(--color-border); font-family: var(--font-mono); font-size: 10px; padding: 3px 10px; border-radius: var(--radius-chip); }
.cinema .screen .placeholder .ph-note  { color: var(--color-text-tertiary); font-size: var(--text-xs); max-width: 44ch; line-height: 1.5; }


/* ---- Before/after pair ------------------------------------ */
.before-after-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin-top: var(--space-10); }
.before-after-pair .ba-item { display: flex; flex-direction: column; gap: var(--space-2); }
.before-after-pair .ba-item .screen { aspect-ratio: 4/3; }
.before-after-pair .ba-label { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-tertiary); margin-bottom: var(--space-1); display: block; }
@media (max-width: 600px) { .before-after-pair { grid-template-columns: 1fr; } }


/* ---- Gallery grid ----------------------------------------- */
.screen-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); margin-top: var(--space-10); }
.screen-gallery .gallery-item { display: flex; flex-direction: column; gap: var(--space-2); }
.screen-gallery .gallery-item .screen { aspect-ratio: 4/3; }
.screen-gallery .gallery-label { font-family: var(--font-body); font-size: var(--text-xs); color: var(--color-text-tertiary); }
@media (max-width: 720px) { .screen-gallery { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .screen-gallery { grid-template-columns: 1fr; } }


/* ---- Terminal / spec block (always-dark component) -------- */
.term {
  background: var(--color-terminal-bg);
  color: var(--color-terminal-fg);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: 1.6;
  padding: var(--space-6);
  border-radius: var(--radius-figure);
  overflow-x: auto;
  margin: var(--space-8) 0;
}
.term pre { margin: 0; white-space: pre; }
.term .label { display: block; font-size: 10px; letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-terminal-dim); margin-bottom: var(--space-4); }
.term .ok  { color: var(--color-terminal-ok); }
.term .bad { color: var(--color-terminal-bad); }
.term .dim { color: var(--color-terminal-dim); }


/* ---- Technical note (progressive disclosure) -------------- */
details.tnote {
  margin: var(--space-8) 0;
  background: var(--color-bg-alt);
  border: var(--hairline) solid var(--color-border);
  border-left: 2px solid var(--color-accent);
  border-radius: var(--radius-card);
  overflow: hidden;
}
details.tnote > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--color-text-secondary);
  user-select: none;
}
details.tnote > summary::-webkit-details-marker { display: none; }
details.tnote > summary .info { color: var(--color-accent); flex-shrink: 0; }
details.tnote > summary .chev { margin-left: auto; flex-shrink: 0; transition: transform var(--duration-default) var(--ease-out); color: var(--color-text-tertiary); }
details.tnote[open] > summary { color: var(--color-accent); }
details.tnote[open] > summary .chev { transform: rotate(180deg); }
details.tnote > summary:hover { color: var(--color-accent); }
.tnote-body { padding: var(--space-2) var(--space-4) var(--space-5); }
.tnote-body p { font-size: var(--text-base); line-height: var(--leading-body); color: var(--color-text-secondary); margin: 0; }


/* ---- Pull quote (light, centered) ------------------------- */
.pull-quote { max-width: 720px; margin: var(--space-20) auto; text-align: center; }
.pull-quote blockquote {
  margin: 0;
  font-family: var(--family-serif);
  font-style: italic;
  font-weight: var(--weight-medium);
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--color-text);
}


/* ---- Next case -------------------------------------------- */
.next-case { display: grid; grid-template-columns: 1fr auto; align-items: end; padding: var(--space-8) 0; margin-top: var(--space-4); border-top: var(--hairline) solid var(--color-border); }
.next-case .lbl { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-text-tertiary); margin-bottom: var(--space-3); display: block; }
.next-case h3 { font-size: var(--text-2xl); font-weight: var(--weight-regular); letter-spacing: var(--tracking-tight); }
.next-case h3 a { color: var(--color-text-tertiary); text-decoration: none; }
.next-case h3 a:hover { color: var(--color-text); }


/* ---- Lightbox --------------------------------------------- */
.lightbox-overlay { display: none; position: fixed; inset: 0; background: var(--color-overlay); z-index: 1000; place-items: center; cursor: zoom-out; }
.lightbox-overlay.is-open { display: grid; }
.lightbox-overlay img { max-width: 92vw; max-height: 92vh; object-fit: contain; cursor: default; display: block; }
img[data-lightbox] { cursor: zoom-in; }