/* ==========================================================================
   Case study sheets — hero, facts, scope, illustrative system, site record
   ========================================================================== */

.case-hero { padding-block: 26px clamp(70px, 8vw, 120px); }
.case-hero .hero-meta { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); }
.case-hero .hero-meta a:hover { color: var(--accent); }
.case-title { margin: clamp(50px, 6vw, 100px) 0 0 -6px; font-size: clamp(72px, 11vw, 200px); font-weight: 500; line-height: .86; letter-spacing: -.09em; }
.case-title em { color: var(--accent); font-family: var(--serif); font-weight: 400; letter-spacing: -.03em; }
.case-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 5vw, 90px); align-items: start; margin-top: clamp(44px, 5vw, 80px); }
.case-summary { max-width: 560px; margin: 0; font-size: clamp(19px, 1.7vw, 25px); line-height: 1.45; letter-spacing: -.02em; }
.case-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border-top: 1px solid var(--ink); }
.case-facts div { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); }
.case-facts dt { color: var(--muted); }
.case-facts dd { margin: 8px 0 0; font-size: 16px; font-weight: 600; letter-spacing: -.02em; }

.case-scope, .case-system, .case-photos { padding-block: clamp(80px, 8vw, 130px); }
.case-system { background: var(--paper-deep); transition: background-color .4s ease; }
.case-scope h2, .case-system h2, .case-photos h2 { margin: 26px 0 0; font-size: clamp(48px, 6vw, 104px); font-weight: 500; line-height: .95; letter-spacing: -.075em; }
.case-scope h2 em, .case-system h2 em, .case-photos h2 em { color: var(--accent); font-family: var(--serif); font-weight: 400; letter-spacing: -.02em; }
.case-scope-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0; margin: 56px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.case-scope-list li { padding: 22px 18px 22px 0; border-bottom: 1px solid var(--line); font-size: clamp(20px, 1.8vw, 28px); font-weight: 500; letter-spacing: -.04em; }
.case-scope-list li::before { content: ""; display: inline-block; width: .45em; height: .45em; margin-right: .5em; border: 2px solid var(--coral); border-radius: 50%; background: conic-gradient(var(--coral) 0 25%, transparent 0 50%, var(--coral) 0 75%, transparent 0); vertical-align: .05em; }

.case-figure { margin: 56px 0 0; padding: clamp(18px, 3vw, 40px); border: 1px solid var(--card-border); background: var(--paper); overflow-x: auto; }
.case-diagram { width: 100%; min-width: 640px; height: auto; color: var(--ink); }
.case-diagram text { fill: currentColor; stroke: none; font-family: var(--mono); font-size: 14px; text-anchor: middle; letter-spacing: .02em; }
.case-diagram text.device { text-anchor: start; font-family: var(--sans); font-size: 16px; }
.case-diagram text.bus { text-anchor: start; fill: var(--coral); font-size: 12px; }
.case-figure figcaption { display: flex; justify-content: space-between; gap: 16px; margin-top: 18px; color: var(--muted); }

.photo-slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.photo-slot {
  position: relative; display: grid; place-items: end start;
  aspect-ratio: 4 / 3; padding: 16px;
  border: 1px solid var(--line-strong);
  background:
    linear-gradient(to top right, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(to top left, transparent calc(50% - .5px), var(--line) calc(50% - .5px), var(--line) calc(50% + .5px), transparent calc(50% + .5px)),
    var(--paper-light);
  color: var(--muted);
}
.photo-slot.is-wide { grid-column: 1 / -1; aspect-ratio: 21 / 8; }

.case-next { padding-block: 40px 120px; }
.case-next-link { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-top: 26px; border-top: 1px solid var(--ink); }
.case-next-link .mono { color: var(--muted); }
.case-next-link strong { font-size: clamp(36px, 5vw, 84px); font-weight: 500; letter-spacing: -.07em; transition: color .3s ease; }
.case-next-link:hover strong { color: var(--accent); }

@media (max-width: 850px) {
  .case-intro { grid-template-columns: 1fr; }
  .photo-slots { grid-template-columns: 1fr; }
  .photo-slot.is-wide { aspect-ratio: 4 / 3; }
}
@media (max-width: 600px) {
  .case-hero .hero-meta span { display: none; }
  .case-title { font-size: clamp(56px, 15vw, 90px); }
  .case-facts { grid-template-columns: 1fr; }
  .case-next-link { flex-direction: column; }
}

/* Openly licensed context photographs, always credited */
.photo-note { max-width: 560px; margin: 22px 0 0; color: var(--ink-soft); font-size: 16px; line-height: 1.55; }
.case-photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 48px; }
.case-photo { margin: 0; }
.case-photo.is-wide { grid-column: 1 / -1; }
.case-photo img { width: 100%; height: auto; aspect-ratio: auto; border: 1px solid var(--card-border); filter: grayscale(.15) contrast(1.02); transition: filter .6s ease; }
.case-photo:hover img { filter: none; }
.case-photo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 18px; margin-top: 10px; color: var(--muted); }
.case-photo .credit { font-size: 13px; }
.case-photo .credit a { text-decoration: underline; text-underline-offset: 3px; }
.case-photo .credit a:hover { color: var(--accent); }
@media (max-width: 850px) { .case-photo-grid { grid-template-columns: 1fr; } }