/* R4 + Display02: compact records and orange Open Lab controls/dividers. */
.primary-cases {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  min-width: 0;
}
.primary-cases > .primary-case-stage { min-width: 0; }
.primary-cases > .case--skytree { grid-column: 1; }
.primary-cases > .case--hiroshima { grid-column: 2; }
.primary-cases > .primary-case-stage--photo { grid-row: 1; }
.primary-cases > .primary-case-stage--context { grid-row: 2; margin-top: 0; }
.primary-cases > .primary-case-stage--research { grid-row: 3; }
.primary-cases .primary-case-stage--research > h4 {
  margin: 0;
  padding: 1rem var(--gutter);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
}

.node-cases {
  --node-label-size: 4rem;
  --node-phrase-size: clamp(1.2rem, 2.5vw, 3rem);
  --node-body-size: 1rem;
  --node-note-size: .875rem;
  grid-column: 1 / -1;
  min-width: 0;
}
.node-case {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(var(--gutter), .35fr) minmax(0, 1.25fr);
  grid-template-rows: auto auto;
  min-width: 0;
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--ink);
  font-size: var(--node-body-size);
  line-height: 1.5;
}
.node-case__media {
  grid-column: 1 / -1;
  grid-row: 1;
  position: relative;
  min-width: 0;
  min-height: 0;
  background: var(--ink);
}
.node-case__media > img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center;
}
#case-organic .node-case__media > img { object-position: 50% 35%; }
#case-dr-nano .node-case__media > img { object-position: 50% 70%; }
.node-case__heading,
.node-case__information {
  position: relative;
  align-self: stretch;
  align-content: start;
  min-width: 0;
  margin: var(--gutter);
  padding: var(--gutter);
  background: rgb(10 10 10 / 78%);
  color: #fff;
  overflow-wrap: anywhere;
}
.node-case__heading {
  grid-column: 1;
  grid-row: 1;
  display: grid;
  gap: calc(var(--gutter) / 3);
}
.node-case__label {
  font-size: var(--node-label-size);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.05em;
}
.node-case__heading > h3 {
  font-size: var(--node-phrase-size);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.045em;
}
.node-case__name { font-size: var(--node-note-size); }
.node-case__information {
  grid-column: 3;
  grid-row: 1;
  display: grid;
  align-self: end;
  padding-block: 1.5rem;
  gap: 0;
  font-size: var(--node-body-size);
  font-weight: 400;
  line-height: 1.5;
}
.node-case__information > div {
  display: grid;
  grid-template-columns: 6.5rem minmax(0, 1fr);
  column-gap: calc(var(--gutter) / 2);
  row-gap: 0;
  min-width: 0;
}
.node-case__information dt,
.node-case__information dd { min-width: 0; margin: 0; }
.node-case__information dt,
.node-case__information dd,
.node-case__information a { font-size: inherit; font-weight: inherit; line-height: inherit; }
.node-case__information a { text-decoration: underline; text-underline-offset: .2em; }
.node-case__body {
  grid-column: 1 / -1;
  grid-row: 2;
  min-width: 0;
  padding: var(--gutter);
}
.node-case__body > h4 {
  margin: 0 0 .7rem;
  font-size: var(--node-body-size);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}
.node-case__body > p { font-size: var(--node-body-size); }
html:lang(ja) .node-case__body > p {
  line-height: 1.85;
  letter-spacing: .015em;
  line-break: strict;
}

/* Scope every divider and the outlined media controls to the Open Lab. */
#open-lab { --light-line: var(--signal); }
#open-lab > .pim-set,
#open-lab > .pim-set .lab-context,
#open-lab > .pim-set .most-openlab__caption span:last-child {
  color: var(--signal);
}
#open-lab .most-openlab__toggle {
  background: var(--ink);
  color: var(--signal);
  border-left-color: var(--signal);
}
#open-lab .most-openlab__toggle svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}
#open-lab .most-openlab__toggle:focus-visible { outline-color: var(--signal); }

#open-lab > .independent-development {
  --independent-heading-size: 1.125rem;
  --independent-note-color: var(--signal);
  min-width: 0;
  padding-block: calc(var(--gutter) / 2);
  border-top: 1px solid var(--light-line);
  color: var(--signal);
  background: var(--ink);
}
.independent-development__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gutter);
  padding-inline: var(--gutter);
}
.independent-development__header > h3,
.independent-development__cases h4 {
  margin: 0;
  font-size: var(--independent-heading-size);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.025em;
}
.independent-development__cases > dd {
  font-size: .875rem;
  color: var(--independent-note-color);
}
.independent-development__intro {
  margin-block: calc(var(--gutter) / 3);
  padding-inline: var(--gutter);
  font-size: 1rem;
  line-height: 1.5;
}
html:lang(ja) .independent-development__intro {
  line-height: 1.85;
  letter-spacing: .015em;
  line-break: strict;
}
.independent-development__cases {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto;
  margin: 0;
}
.independent-development__cases > dt,
.independent-development__cases > dd {
  min-width: 0;
  margin: 0;
  padding-inline: var(--gutter);
  overflow-wrap: anywhere;
}
.independent-development__cases > dt { grid-row: 1; padding-bottom: .35rem; }
.independent-development__cases > dd { grid-row: 2; }
.independent-development__cases > :nth-child(1),
.independent-development__cases > :nth-child(2) { grid-column: 1; }
.independent-development__cases > :nth-child(3),
.independent-development__cases > :nth-child(4) { grid-column: 2; border-left: 1px solid var(--light-line); }
.independent-development__cases > :nth-child(5),
.independent-development__cases > :nth-child(6) { grid-column: 3; border-left: 1px solid var(--light-line); }

@media (max-width: 900px) {
  .node-case { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; }
  .node-case__heading { grid-column: 1; }
  .node-case__information {
    grid-column: 1;
    grid-row: 2;
    align-self: start;
    margin: 0;
    background: var(--ink);
  }
  .node-case__body { grid-row: 3; }
  .independent-development__cases { display: block; }
  .independent-development__cases > dt { padding-bottom: .35rem; }
  .independent-development__cases > dt:not(:first-child) {
    margin-top: calc(var(--gutter) / 2);
    padding-top: calc(var(--gutter) / 2);
    border-top: 1px solid var(--light-line);
  }
  .independent-development__cases > :nth-child(n) { border-left: 0; }
}
@media (max-width: 540px) {
  .node-cases { --node-label-size: 3rem; --node-phrase-size: 1.55rem; }
  .primary-cases { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .primary-cases > .primary-case-stage {
    grid-column: auto;
    grid-row: auto;
    border-right: 0;
    border-bottom: 0;
  }
  .primary-cases > .primary-case-stage--research { border-bottom: 1px solid var(--ink); }
}