/* Long-form artwork and picture-book pages. Loaded after site.css. */
.case-page {
  --case-text: #d2d7cb;
  --case-caption: #adb3a5;
  --case-rule: #434b3e;
}

.home-page #current {
  --case-text: #414c3a;
  --case-caption: #56624f;
  --case-rule: #a9b09f;
}

.case-page main,
.case-page section,
.case-page article,
.case-page figure,
.case-page .case-copy,
.case-split > *,
.case-pair > *,
.case-tests > *,
.book-pair > *,
.book-story > *,
.version-list > * {
  min-width: 0;
}

.case-page .page-heading {
  max-width: 1160px;
  padding-bottom: 35px;
}

.case-page .page-heading h1 {
  font-size: clamp(38px, 6.4vw, 90px);
  overflow-wrap: anywhere;
}

.case-intro {
  max-width: 900px;
  margin: 0 0 clamp(35px, 5vw, 75px);
}

.case-intro p {
  max-width: 820px;
  color: var(--case-text, inherit);
  font-size: clamp(14px, 1.25vw, 17px);
  line-height: 2.15;
  margin: 0 0 1.3em;
}

.case-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
  padding: 16px 0;
  margin: 30px 0 0;
  border-block: 1px solid var(--case-rule, var(--line));
  list-style: none;
}

.case-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-size: 12px;
  line-height: 1.7;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.case-nav a:hover,
.case-link:hover {
  color: var(--accent);
}

.case-work {
  padding: clamp(55px, 7vw, 110px) 0;
  border-bottom: 1px solid var(--case-rule, var(--line));
  scroll-margin-top: 0;
}

.case-work-head {
  max-width: 1100px;
  margin-bottom: clamp(28px, 4vw, 55px);
}

.case-work-head .eyebrow,
.case-work-head .tag,
.case-work-head .case-number {
  color: var(--accent);
  font-size: 11px;
  letter-spacing: .14em;
}

.case-work-head h2 {
  font: 400 clamp(31px, 4.2vw, 64px)/1.2 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', sans-serif;
  letter-spacing: -.035em;
  margin: 18px 0 25px;
  overflow-wrap: anywhere;
}

.case-work-head > p {
  max-width: 820px;
  font-size: 14px;
  color: var(--case-caption, var(--muted));
}

.case-meta,
.case-work-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  font-size: 11px;
  color: var(--case-caption, var(--muted));
  line-height: 1.9;
}

.case-work-head dl {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 24px;
  max-width: 760px;
  font-size: 11px;
  color: var(--case-caption, var(--muted));
}

.case-work-head dt,
.case-work-head dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.case-split {
  display: grid;
  grid-template-columns: minmax(0, 1.13fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(30px, 5vw, 75px);
  margin: 35px 0 45px;
}

.case-split.reverse {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.13fr);
}

.case-split.reverse > figure {
  order: 2;
}

.case-split.reverse > .case-copy {
  order: 1;
}

.case-copy {
  max-width: 800px;
  color: var(--case-text, inherit);
  overflow-wrap: anywhere;
}

.case-copy p,
.case-copy li {
  font-size: 14px;
  line-height: 2.15;
}

.case-copy p {
  margin: 0 0 1.5em;
}

.case-copy h3,
.case-copy h4 {
  color: var(--ink);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.7;
  margin: 1.8em 0 .9em;
}

.case-copy > :first-child {
  margin-top: 0;
}

.case-copy ul,
.case-copy ol {
  padding-left: 1.4em;
  margin: 1.2em 0 1.8em;
}

.case-copy li + li {
  margin-top: .5em;
}

.case-figure {
  margin: 0;
}

.case-figure > a {
  display: block;
  padding: clamp(12px, 1.5vw, 24px);
  background: #e5e5dc;
}

.case-figure img,
.case-figure .image-link img,
.case-pair img,
.book-pair img,
.book-story img,
.story-sequence img,
.version-item img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: none;
  object-fit: contain;
}

.case-figure .image-link {
  margin-bottom: 0;
}

.case-figure figcaption,
.case-pair figcaption,
.book-story figcaption,
.story-sequence figcaption,
.version-item figcaption {
  font-size: 11px;
  line-height: 1.9;
  color: var(--case-caption, inherit);
  margin-top: 14px;
  overflow-wrap: anywhere;
}

.case-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: clamp(22px, 3vw, 45px);
  margin: 45px 0;
}

.case-pair figure {
  margin: 0;
}

.case-research {
  --ink: #242b21;
  --case-text: #414c3a;
  --case-caption: #56624f;
  --case-rule: #b4bba9;
  --accent: #a4391c;
  background: var(--paper);
  color: var(--ink);
  margin-inline: calc(-1 * var(--pad));
  padding: clamp(55px, 7vw, 100px) var(--pad);
  border: 0;
}

.case-research > h2,
.case-research .section-head h2 {
  font: 400 clamp(30px, 3.7vw, 52px)/1.55 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  letter-spacing: -.04em;
  max-width: 1000px;
  margin: 0 0 35px;
}

.case-research a:focus-visible,
.case-research button:focus-visible,
.case-research summary:focus-visible {
  outline-color: #242b21;
}

.case-research .eyebrow {
  color: var(--case-caption);
}

.case-tests {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 50px 45px;
  margin: 45px 0 15px;
}

.case-test {
  min-width: 0;
  padding-top: 22px;
  border-top: 1px solid var(--case-rule, var(--line));
}

.case-test h3 {
  font-size: clamp(20px, 2vw, 27px);
  line-height: 1.6;
  font-weight: 400;
  margin: 15px 0 20px;
}

.case-test p {
  max-width: 650px;
  font-size: 13px;
  line-height: 2.1;
  color: var(--case-text, inherit);
}

.case-test figure {
  margin: 24px 0 0;
}

.book-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(26px, 3.7vw, 55px);
  margin: 40px 0 50px;
  color: inherit;
}

.book-pair > * {
  padding-top: 22px;
  border-top: 1px solid var(--case-rule, #a9b09f);
  color: inherit;
}

.book-pair > a {
  text-decoration: none;
}

.book-pair figure {
  margin: 0 0 25px;
}

.book-pair h3 {
  font: 400 clamp(25px, 3vw, 41px)/1.6 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  letter-spacing: -.025em;
  margin: 20px 0 18px;
  overflow-wrap: anywhere;
}

.book-pair p {
  font-size: 13px;
  line-height: 2.05;
  max-width: 630px;
  color: inherit;
}

.book-pair .case-source {
  opacity: .8;
}

.book-story {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4.5vw, 65px);
  margin: 40px 0 60px;
}

.book-story figure {
  margin: 0;
}

.story-sequence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 40px 30px;
  margin: 45px 0 60px;
}

.story-sequence figure {
  margin: 0;
  min-width: 0;
}

.quote-line {
  max-width: 1000px;
  margin: 45px 0;
  padding: 10px 0 10px clamp(20px, 3vw, 45px);
  border-left: 2px solid var(--accent);
  font: 400 clamp(23px, 3.1vw, 42px)/1.8 'Yu Mincho', 'Hiragino Mincho ProN', serif;
  letter-spacing: -.035em;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.quote-line p {
  margin: 0;
  font: inherit;
  color: inherit;
}

.quote-line cite,
.quote-line footer {
  display: block;
  max-width: none;
  margin: 18px 0 0;
  padding: 0;
  border: 0;
  font: normal 11px/1.9 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
  letter-spacing: .02em;
  color: var(--case-caption, var(--muted));
}

.version-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
  margin: 40px 0 55px;
}

.version-item {
  padding-top: 18px;
  border-top: 1px solid var(--case-rule, var(--line));
}

.version-item h3 {
  font-weight: 400;
  font-size: 23px;
  line-height: 1.5;
  margin: 15px 0;
}

.version-item figure {
  margin: 22px 0 0;
}

.version-item p {
  font-size: 12px;
  line-height: 2;
  color: var(--case-text, inherit);
}

.case-source {
  max-width: 1000px;
  font-size: 11px;
  line-height: 1.95;
  color: var(--case-caption, var(--muted));
  overflow-wrap: anywhere;
  margin: 30px 0;
}

.case-link {
  display: inline-block;
  max-width: 100%;
  padding-block: 9px;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 6px;
  font-size: 12px;
  line-height: 1.9;
  overflow-wrap: anywhere;
}

@media (max-width: 1050px) {
  .case-split,
  .case-split.reverse,
  .book-story {
    gap: 30px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .case-tests {
    gap: 40px 30px;
  }

  .version-list {
    gap: 22px;
  }
}

@media (max-width: 760px) {
  .case-page .page-heading {
    padding-bottom: 25px;
  }

  .case-page .page-heading h1 {
    font-size: clamp(34px, 8.6vw, 53px);
    line-height: 1.35;
  }

  .case-intro {
    margin-bottom: 30px;
  }

  .case-intro p,
  .case-copy p,
  .case-copy li {
    font-size: 13px;
    line-height: 2.1;
  }

  .case-nav {
    gap: 2px 24px;
    padding-block: 12px;
  }

  .case-nav a {
    font-size: 11px;
  }

  .case-work {
    padding-block: 50px;
    scroll-margin-top: 0;
  }

  .case-work-head h2 {
    font-size: clamp(29px, 7.8vw, 43px);
    line-height: 1.3;
    margin-block: 14px 20px;
  }

  .case-work-head > p {
    font-size: 12px;
  }

  .case-work-head dl {
    gap: 6px 16px;
    font-size: 10px;
  }

  .case-split,
  .case-split.reverse,
  .case-pair,
  .case-tests,
  .book-pair,
  .book-story,
  .version-list {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-split,
  .case-split.reverse,
  .book-story {
    gap: 28px;
    margin-block: 28px 35px;
  }

  .case-split.reverse > figure,
  .case-split.reverse > .case-copy {
    order: initial;
  }

  .case-pair,
  .case-tests,
  .book-pair,
  .version-list {
    gap: 35px;
    margin-block: 30px 35px;
  }

  .case-copy h3,
  .case-copy h4 {
    font-size: 17px;
  }

  .case-figure figcaption,
  .case-pair figcaption,
  .book-story figcaption,
  .story-sequence figcaption,
  .version-item figcaption {
    font-size: 10px;
    margin-top: 12px;
  }

  .case-research {
    padding-block: 50px;
  }

  .case-research > h2,
  .case-research .section-head h2 {
    font-size: 29px;
    line-height: 1.65;
    margin-bottom: 25px;
  }

  .case-test h3 {
    font-size: 23px;
  }

  .book-pair h3 {
    font-size: 29px;
  }

  .story-sequence {
    gap: 28px 18px;
    margin-block: 30px 40px;
  }

  .quote-line {
    font-size: 25px;
    line-height: 1.85;
    margin-block: 32px;
    padding-left: 20px;
  }

  .version-item h3 {
    font-size: 24px;
  }
}

@media (max-width: 420px) {
  .story-sequence {
    grid-template-columns: minmax(0, 1fr);
  }

  .case-meta,
  .case-work-meta {
    gap: 5px 16px;
  }

  .case-nav {
    column-gap: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .case-page *,
  .case-page *::before,
  .case-page *::after,
  .book-pair *,
  .book-pair *::before,
  .book-pair *::after {
    animation: none !important;
    transition: none !important;
  }
}

.turn-sequence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:35px 0}.turn-sequence>*{min-width:0}.turn-sequence img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:760px){.turn-sequence{gap:8px}.turn-sequence .case-figure>a{padding:4px}.turn-sequence figcaption{font-size:9px}}

.source-gallery-section{padding:60px 0;border-top:1px solid var(--line);min-width:0}
.source-gallery-section>h2{font:400 clamp(27px,3.5vw,48px)/1.5 'Yu Mincho','Hiragino Mincho ProN',serif;letter-spacing:-.035em;overflow-wrap:anywhere;margin:0 0 25px}
.source-gallery-section>p{font-size:13px;line-height:2.1;max-width:850px;color:var(--muted)}
.source-gallery-section>.case-figure{max-width:780px;margin-top:30px}
.portfolio-card>.case-figure{margin-top:25px}
@media(max-width:760px){.source-gallery-section{padding:40px 0}.source-gallery-section>h2{font-size:29px}}