/* Charcoal reading surface and continuous originals. */
.case-page {
  --case-ink: #191919;
  --case-muted: #575757;
  --case-line: #deddd8;
  --case-rail-ink: #f3f3ef;
  --case-rail-muted: #c0c0bb;
  --case-rail-copy: rgb(243 243 239 / .64);
  --case-rail-line: #ffffff26;
  --case-rail-top: 94px;
  color: #f1f1ef;
  background: #1e1e1e;
  padding-top: 122px;
}

html:has(body.case-page) { scroll-padding-top: 0; }

.case-page #main {
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

.case-page .detail-header {
  transition: translate .28s var(--ease), opacity .22s ease;
}

.case-page .detail-header.is-away:not(:has(:focus-visible)) {
  translate: 0 calc(-100% - 22px);
  opacity: 0;
}

.case-page .detail-header.is-away:not(:has(:focus-visible)) .header-inner { pointer-events: none; }

@media (hover: hover) and (pointer: fine) {
  .case-page .detail-header.is-away:hover {
    translate: none;
    opacity: 1;
  }
  .case-page .detail-header.is-away:hover .header-inner { pointer-events: auto; }
}

.case-page .detail-header .header-inner {
  width: min(1540px, calc(100% - 64px));
  background: #eaeae8;
  border-color: #ffffff9c;
  box-shadow: 0 4px 22px #0002;
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .case-page .detail-header .header-inner {
    background: #ffffffe0;
    -webkit-backdrop-filter: blur(20px) saturate(1.2);
    backdrop-filter: blur(20px) saturate(1.2);
  }

  html.is-scrolled .case-page .detail-header .header-inner { background: #ffffffad; }
}

.case-page .detail-header .return-button {
  color: var(--ink);
}

.case-page .case-header-label { color: #656565; font-size: 12px; letter-spacing: .07em; }
.case-page .contact-peek { color: var(--case-ink); z-index: 2; }
.case-page .contact-peek::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 0;
  height: 22px;
}

.case-page .case-layout {
  width: min(1540px, calc(100% - 64px));
  display: grid;
  grid-template-columns: minmax(142px, .46fr) minmax(0, 2.85fr) minmax(254px, 1fr);
  align-items: start;
  gap: 24px;
  margin: 0 auto;
  padding-bottom: 104px;
}

.case-toc {
  position: sticky;
  top: var(--case-rail-top);
  min-width: 0;
  padding-top: 3px;
}

.case-toc ol { list-style: none; padding: 0; margin: 0; }
.case-toc > ol { position: relative; display: grid; gap: 4px; }
.case-page .case-toc a {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 10px 11px;
  color: #c7c7c4;
  font-size: 12px;
  line-height: 1.6;
  border-radius: 8px;
  transition: color .2s, background .2s;
}

.case-page .case-toc .toc-number,
.case-page .case-toc a.active .toc-number {
  flex: 0 0 17px;
  font: inherit;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: inherit;
  opacity: .75;
}

.case-page .case-toc a:hover { color: #fff; background: #343434; }
.case-page .case-toc a.active {
  color: #e3ffc1;
  background: #383838;
  font-weight: 600;
}

.case-board {
  min-width: 0;
  margin: 0;
  background: #fff;
  border-radius: 8px;
  overflow: clip;
  box-shadow: 0 12px 38px #0004;
}

.case-sheet {
  margin: 0;
  padding: 0;
  scroll-margin-top: calc(var(--case-rail-top) + 10px);
}

.artboard-zoom {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  line-height: 0;
  border: 0;
  background: #fff;
  cursor: zoom-in;
}

.artboard-zoom img { display: block; width: 100%; height: auto; max-width: 100%; }
.artboard-zoom:focus-visible { outline: 3px solid #739535; outline-offset: -3px; }

.case-page .case-insights {
  --case-insights-top: var(--case-rail-top);
  position: sticky;
  top: var(--case-insights-top);
  min-width: 0;
  max-height: calc(100dvh - var(--case-insights-top) - 18px);
  padding: 3px 10px 16px 12px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #ffffff54 transparent;
  color: var(--case-rail-ink);
}

@media (min-width: 1180px) {
  .case-page .case-insights { transition: top .28s var(--ease), max-height .28s var(--ease); }
  .case-page:has(.detail-header.is-away):not(:has(.detail-header :focus-visible)) .case-insights {
    --case-insights-top: 24px;
  }
  @media (hover: hover) and (pointer: fine) {
    .case-page:has(.detail-header.is-away:hover) .case-insights {
      --case-insights-top: var(--case-rail-top);
    }
  }
}

.case-page .case-insights:focus-visible { outline-offset: -2px; }
.case-page .case-eyebrow {
  color: var(--case-rail-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: .075em;
}

.case-page .case-brief-head h1 {
  color: var(--case-rail-ink);
  margin: 0 0 10px;
  font-size: clamp(25px, 2.15vw, 35px);
  font-weight: 650;
  letter-spacing: -.045em;
  line-height: 1.28;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.case-page .case-value {
  color: var(--case-rail-muted);
  margin: 0;
  font-size: 14px;
  line-height: 1.75;
}

.case-brief > summary { display: none; }
.case-page .brief-section {
  margin: 20px 0 0;
  padding-top: 17px;
  border-top: 1px solid var(--case-rail-line);
}

.case-page .brief-section h2,
.case-page .brief-section h3 {
  margin: 0 0 7px;
  color: var(--case-rail-ink);
  font-size: 14px;
  font-weight: 650;
  line-height: 1.6;
}

.case-page .brief-section p {
  margin: 0;
  color: var(--case-rail-copy);
  font-size: 13px;
  line-height: 1.75;
}

.case-page .contribution-list {
  display: grid;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 11px 0 0;
}

.case-page .contribution-list li {
  display: grid;
  grid-template-columns: 19px minmax(0, 1fr);
  align-items: baseline;
  gap: 8px;
  padding: 0;
}

.case-page .contribution-list li::before { content: none; }
.case-page .contribution-list h3 { margin-bottom: 3px; font-size: 13px; }
.brief-item-number {
  color: #a4a49c;
  font-size: 11px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}

.case-page .related-work {
  width: min(1230px, calc(100% - 96px));
  margin: 0 auto;
  padding-bottom: 104px;
  color: #f1f1ef;
}

.related-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}

.related-heading h2 { font-size: 32px; letter-spacing: -1px; font-weight: 550; line-height: 1.4; }
.related-heading .button { min-height: 44px; font-size: 12px; padding: 12px 16px; gap: 15px; }
.related-heading .button .icon { width: 17px; height: 17px; }
.case-page .related-heading .button {
  color: var(--case-ink);
  background: #fff;
  border-color: transparent;
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .case-page .related-heading .button:hover { background: var(--lime); }
}

.related-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.related-card { display: block; min-width: 0; }
.related-media {
  width: 100%;
  aspect-ratio: 16/9;
  position: relative;
  overflow: hidden;
  background: #fff;
  border-radius: 10px;
}

.related-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition: transform .5s cubic-bezier(.2,.85,.2,1);
}

.related-open {
  position: absolute;
  bottom: 12px;
  right: 12px;
  width: 31px;
  height: 31px;
  background: var(--lime);
  color: #263421;
  border-radius: 50%;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity .25s, transform .25s;
}

.related-open .icon { width: 16px; height: 16px; }
.related-card:hover .related-media > img, .related-card:focus-visible .related-media > img { transform: scale(1.045); }
.related-card:hover .related-open, .related-card:focus-visible .related-open { opacity: 1; transform: none; }
.related-context { margin-top: 15px; color: #b6b6b2; font-size: 11px; line-height: 1.8; }
.related-card h3 { margin-top: 3px; font-size: 15px; font-weight: 550; line-height: 1.7; }

.case-page .image-dialog {
  width: calc(100% - 32px);
  height: calc(100% - 32px);
  max-width: 2200px;
  max-height: none;
  padding: 0;
  border: 1px solid #fff;
  border-radius: 16px;
  background: #f8f7f4;
  color: var(--case-ink);
  overflow: hidden;
  box-shadow: 0 28px 110px #0005;
}

.case-page .image-dialog[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); }
.case-page:has(.image-dialog[open]) { overflow: hidden; }
.case-page .image-dialog::backdrop { background: #181818bb; backdrop-filter: blur(10px); }
.zoom-toolbar {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 15px 20px;
  border-bottom: 1px solid var(--case-line);
  background: #f8f7f4;
}

.zoom-caption {
  font-size: 13px;
  color: var(--case-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.zoom-actions { display: flex; flex: none; align-items: center; gap: 8px; }
.zoom-toolbar .button { min-height: 40px; padding: 11px 15px; font-size: 12px; gap: 10px; }
.zoom-close > span { font-size: 19px; line-height: 1; }
.case-page .zoom-image-area {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  background: #e9e8e4;
}
.zoom-image-area:focus-visible { outline-offset: -3px; }
.zoom-image-area img { display: block; width: 100%; max-width: none; height: auto; margin: 0 auto; }
.case-error { min-height: 65vh; padding: 100px 0; }
.case-page .case-error .case-eyebrow, .case-error > p:not(.case-eyebrow) { color: #c4c4c0; }
.case-error h1 { font-size: clamp(30px, 5vw, 50px); font-weight: 550; margin: 12px 0 22px; line-height: 1.4; }
.case-error > p:not(.case-eyebrow) { font-size: 16px; line-height: 1.9; margin-bottom: 30px; }

.related-card.is-revealed { animation: case-arrive .6s cubic-bezier(.2,.85,.2,1) both; }
@keyframes case-arrive {
  from { opacity: .76; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 1379px) and (min-width: 1180px) {
  .case-page .case-layout,
  .case-page .detail-header .header-inner { width: calc(100% - 48px); }
  .case-page .case-layout { gap: 19px; }
  .case-page .case-toc a { padding-inline: 9px; gap: 7px; }
}

@media (max-width: 1179px) {
  .case-page { padding-top: 111px; }
  .case-page .case-layout {
    width: min(960px, calc(100% - 56px));
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-bottom: 76px;
  }

  .case-page .detail-header .header-inner { width: calc(100% - 48px); }
  .case-page .case-toc {
    z-index: 35;
    padding: 6px;
    margin-bottom: 14px;
    border: 1px solid #444;
    border-radius: 12px;
    background: #282828f2;
    backdrop-filter: blur(14px);
    transition: top .28s var(--ease);
  }

  .case-page:has(.detail-header.is-away) .case-toc { top: 12px; }
  .case-page:has(.detail-header.is-away :focus-visible) .case-toc { top: var(--case-rail-top); }

  @media (hover: hover) and (pointer: fine) {
    .case-page:has(.detail-header.is-away:hover) .case-toc { top: var(--case-rail-top); }
  }

  .case-toc > ol { display: flex; overflow-x: auto; scrollbar-width: none; }
  .case-toc > ol::-webkit-scrollbar { display: none; }
  .case-toc li { flex: none; }
  .case-page .case-toc a { padding: 9px 12px; white-space: nowrap; }
  .case-page .case-toc .toc-number { display: none; }
  .case-sheet { scroll-margin-top: calc(var(--case-rail-top) + 67px); }
  .case-page .case-insights {
    grid-row: 2;
    position: static;
    max-height: none;
    padding: 12px 10px 0;
    margin-bottom: 12px;
    overflow: visible;
  }
  .case-board { grid-row: 3; }

  .case-brief > summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    margin-top: 16px;
    border-top: 1px solid var(--case-rail-line);
    color: var(--case-rail-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
  }

  .case-brief > summary::-webkit-details-marker { display: none; }
  .brief-toggle-icon { width: 10px; height: 10px; position: relative; flex: none; }
  .brief-toggle-icon::before, .brief-toggle-icon::after {
    content: '';
    position: absolute;
    width: 10px;
    height: 1px;
    left: 0;
    top: 4px;
    background: currentColor;
  }
  .brief-toggle-icon::after { rotate: 90deg; transition: rotate .2s; }
  .case-brief[open] .brief-toggle-icon::after { rotate: 0deg; }
  .case-page .case-brief-content { padding: 0 0 22px; }
  .case-page .brief-section:first-child { margin-top: 5px; }

  .case-page .related-work { width: min(960px, calc(100% - 56px)); padding-bottom: 76px; }
  .related-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
}

@media (max-width: 600px) {
  .case-page { padding-top: 95px; }
  .case-page .case-layout { width: calc(100% - 24px); padding-bottom: 54px; }
  .case-page .detail-header .header-inner { width: calc(100% - 24px); padding-inline: 11px; }
  .case-page .case-header-label { display: none; }
  .case-page .contact-peek { width: 195px; }
  .case-page .case-toc a { font-size: 11px; padding: 9px 10px; }
  .case-page .case-insights { padding: 8px 7px 0; }
  .case-page .related-work { width: calc(100% - 40px); padding-bottom: 56px; }
  .related-heading { gap: 12px; margin-bottom: 25px; }
  .related-heading h2 { font-size: 28px; }
  .related-heading .button { font-size: 11px; min-height: 41px; gap: 9px; padding: 11px 13px; }
  .related-grid { gap: 24px 13px; }
  .related-context { margin-top: 9px; }
  .related-card h3 { font-size: 14px; }
  .case-page .image-dialog { width: calc(100% - 12px); height: calc(100% - 16px); border-radius: 11px; }
  .zoom-toolbar { padding: 11px; gap: 12px; }
  .zoom-caption { font-size: 10px; }
  .zoom-toolbar .button { font-size: 10px; min-height: 36px; padding: 9px 10px; border-radius: 10px; gap: 7px; }
  .zoom-actions { gap: 5px; }
  .zoom-close > span { font-size: 16px; }
  .case-error { padding-block: 70px; }
}

@media (prefers-reduced-motion: reduce) {
  .related-card.is-revealed { animation: none; }
  .case-page .detail-header, .case-page .case-toc, .case-page .case-insights { transition: none; }
  .case-page .case-toc a, .related-media > img, .related-open, .brief-toggle-icon::after { transition: none; }
}