/* The group owns the surface; case cards are inset children of that surface. */
.cases-section .case-group {
  padding: 32px;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 6px;
}
.cases-section .case-group + .case-group {margin-top: 80px;}
.cases-section .category-intro {
  background: transparent;
  padding: 12px 8px 32px;
  margin: 0;
  gap: 40px;
  grid-template-columns: minmax(375px, 1.05fr) minmax(0, 1.35fr);
  color: var(--cream);
}
.cases-section .case-grid {gap: 24px;}
.cases-section .case-card {
  background: #fbfaf4;
  color: var(--navy);
  padding: 32px;
  border-color: transparent;
  border-radius: 3px;
}
.cases-section .case-wide {padding: 36px;}
.category-heading {display: flex;align-items: center;gap: 24px;min-width: 0;}
.category-art {
  display: block;
  flex: 0 0 104px;
  width: 104px;
  height: 104px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--cream);
}
.category-art img {display: block;width: 100%;height: 100%;object-fit: contain;mix-blend-mode: darken;}
.cases-section .category-heading h3::before {display: none;}
.cases-section .category-heading h3 {font-size: 36px;}

/* Alternative 02: a quiet outer surface with an internal divider. */
[data-case-layout="ice"] .case-group {
  background: #e3e8ef;
  border-color: #c1cbd9;
}
[data-case-layout="ice"] .category-intro {
  color: var(--navy);
  border-bottom: 1px solid #b7c2d3;
  padding-bottom: 28px;
  margin-bottom: 28px;
}
[data-case-layout="ice"] .category-intro h3::before {background: var(--blue);}
[data-case-layout="ice"] .case-card {background: #fffefa;border-color: #cbd2de;}

/* Alternative 03: category rail and a vertical collection of case cards. */
[data-case-layout="sidebar"] .case-group {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 2fr);
  gap: 36px;
  background: #ebece7;
  border-color: #c6c9cb;
}
[data-case-layout="sidebar"] .category-intro {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: start;
  gap: 26px;
  padding: 8px 28px 12px 0;
  border-right: 1px solid #bec4cc;
  border-radius: 0;
  color: var(--navy);
}
[data-case-layout="sidebar"] .category-intro h3 {font-size: 34px;}
[data-case-layout="sidebar"] .category-intro h3::before {background: var(--blue);}
[data-case-layout="sidebar"] .category-intro p {font-size: 16px;}
[data-case-layout="sidebar"] .category-heading {flex-direction: column;align-items: flex-start;gap: 22px;}
[data-case-layout="sidebar"] .case-grid {grid-template-columns: minmax(0, 1fr);}
[data-case-layout="sidebar"] .case-card {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 24px;
  background: #fffefa;
  border-color: #cbd0d5;
  padding: 28px;
}
[data-case-layout="sidebar"] .card-symbol {width: 56px;height: 56px;margin: 0;}
[data-case-layout="sidebar"] .card-symbol .icon {width: 28px;height: 28px;}
[data-case-layout="sidebar"] .case-card h4 {max-width: none;font-size: 24px;}
[data-case-layout="sidebar"] .case-card .text-link {align-self:start;margin-top:auto;}

@media(max-width:1000px) {
  .cases-section .case-group {padding: 24px;}
  .cases-section .category-intro {grid-template-columns: 1fr;gap: 20px;}
  .cases-section .case-card {padding: 26px;}
  [data-case-layout="sidebar"] .case-group {grid-template-columns: 210px minmax(0, 1fr);gap: 24px;}
  [data-case-layout="sidebar"] .case-card {grid-template-columns: minmax(0, 1fr);}
}
@media(max-width:680px) {
  .cases-section .case-group {padding: 12px;margin-inline: -8px;border-radius: 5px;}
  .cases-section .case-group + .case-group {margin-top: 56px;}
  .cases-section .category-intro {padding: 18px 12px 28px;gap: 20px;}
  .cases-section .category-intro h3 {font-size: 32px;}
  .category-heading {gap: 16px;}
  .category-art {width: 72px;height: 72px;flex-basis: 72px;}
  .cases-section .category-heading h3 {font-size: 30px;}
  [data-case-layout="sidebar"] .category-heading {flex-direction: row;align-items: center;gap: 16px;}
  .cases-section .case-grid {gap: 16px;}
  .cases-section .case-card {padding: 26px 20px;}
  .cases-section .case-wide {display: flex;}
  [data-case-layout="ice"] .category-intro {margin-bottom: 20px;}
  [data-case-layout="sidebar"] .case-group {grid-template-columns: minmax(0, 1fr);gap: 0;}
  [data-case-layout="sidebar"] .category-intro {border-right: 0;border-bottom: 1px solid #bec4cc;margin-bottom: 20px;}
  [data-case-layout="sidebar"] .case-card {display: flex;gap: 0;}
  [data-case-layout="sidebar"] .card-symbol {margin-bottom: 26px;}
  [data-case-layout="sidebar"] .case-card h4 {font-size: 22px;}
}
@media(max-width:380px) {
  .category-heading,
  [data-case-layout="sidebar"] .category-heading {flex-direction: column;align-items: flex-start;gap: 20px;}
  .category-art {width: 80px;height: 80px;flex-basis: 80px;}
  .cases-section .category-heading h3 {font-size: 32px;}
}

/* Author-provided illustrations replace the previous generic symbols. */
.category-art img,
.card-symbol img {display:block;width:100%;height:100%;object-fit:contain;}
[data-case-layout="sidebar"] .category-art {
  width:100%;
  height:auto;
  aspect-ratio:3 / 2;
  flex-basis:auto;
  background:#07152e;
  border-radius:3px;
}
[data-case-layout="sidebar"] .category-art img {mix-blend-mode:normal;}
[data-case-layout="sidebar"] .card-symbol {
  width:128px;
  height:86px;
  border:0;
  background:#07152e;
  border-radius:3px;
  overflow:hidden;
}
[data-case-layout="sidebar"] .case-card {grid-template-columns:128px minmax(0, 1fr);}
@media(max-width:1000px) {
  [data-case-layout="sidebar"] .card-symbol {width:104px;height:70px;}
}
@media(max-width:680px) {
  [data-case-layout="sidebar"] .category-art {width:118px;height:79px;flex-basis:118px;}
  [data-case-layout="sidebar"] .card-symbol {width:112px;height:75px;}
}

/* Light presentation surfaces retain the navy linework in the supplied artwork. */
[data-case-layout="sidebar"] .category-art,
[data-case-layout="sidebar"] .card-symbol {
  background:#fffefa;
  border:1px solid #d3d7da;
}

/* Artwork integrates directly with the existing section and card surfaces. */
[data-case-layout="sidebar"] .category-art,
[data-case-layout="sidebar"] .card-symbol {
  display:block;
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
}
[data-case-layout="sidebar"] .category-art {
  width:min(100%, 164px);
  height:auto;
  aspect-ratio:3 / 2;
  flex:0 0 auto;
}
[data-case-layout="sidebar"] .category-art img,
[data-case-layout="sidebar"] .card-symbol img {
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
}
[data-case-layout="sidebar"] .case-card {
  grid-template-columns:88px minmax(0, 1fr);
  align-items:start;
}
[data-case-layout="sidebar"] .card-symbol {
  width:80px;
  height:80px;
  margin:2px 0 0;
}
@media(max-width:1000px) {
  [data-case-layout="sidebar"] .card-symbol {width:76px;height:76px;}
}
@media(max-width:680px) {
  [data-case-layout="sidebar"] .category-art {width:104px;height:69px;flex-basis:104px;}
  [data-case-layout="sidebar"] .card-symbol {width:72px;height:72px;margin:0 0 22px;}
}

/* The case symbol shares the title baseline, below the metadata line. */
@media(min-width:681px) {
  [data-case-layout="sidebar"] .card-symbol {margin-top:42px;}
}

/* Center category names within their lateral column. */
[data-case-layout="sidebar"] .category-heading {align-items:center;}
[data-case-layout="sidebar"] .category-heading h3 {width:100%;text-align:center;}
@media(max-width:680px) {
  [data-case-layout="sidebar"] .category-heading h3 {width:auto;flex:1;text-align:center;}
}

/* Shared left edge for the category illustration, name and description. */
[data-case-layout="sidebar"] .category-heading {align-items:flex-start;}
[data-case-layout="sidebar"] .category-art {align-self:flex-start;}
[data-case-layout="sidebar"] .category-heading h3 {width:auto;text-align:left;}
@media(max-width:680px) {
  [data-case-layout="sidebar"] .category-heading h3 {width:auto;flex:0 1 auto;text-align:left;}
}

/* Additional organization studies for the case area. */
.experiment-page .category-art,
.experiment-page .card-symbol {
  background:transparent;
  border:0;
  box-shadow:none;
  border-radius:0;
}
.experiment-page .card-symbol img,
.experiment-page .category-art img {object-fit:contain;}

/* A category opening band above its inner case collection. */
[data-case-layout="band"] .case-group {
  padding:0;
  background:#fffefa;
  border-color:#cbd0d5;
  overflow:hidden;
}
[data-case-layout="band"] .category-intro {
  grid-template-columns:minmax(320px, .9fr) minmax(0, 1.4fr);
  margin:0 0 28px;
  padding:30px 34px;
  background:#e3e8ef;
  color:var(--navy);
  border:0;
}
[data-case-layout="band"] .category-heading {align-items:center;}
[data-case-layout="band"] .category-art {width:130px;height:86px;flex-basis:130px;}
[data-case-layout="band"] .category-intro h3 {font-size:34px;}
[data-case-layout="band"] .case-grid {padding:0 28px 28px;}
[data-case-layout="band"] .case-card {background:var(--cream);}

/* Category as an editorial index, followed by a single reading sequence. */
[data-case-layout="sequence"] .case-group {
  padding:0;
  background:transparent;
  border:0;
  border-radius:0;
}
[data-case-layout="sequence"] .category-intro {
  grid-template-columns:minmax(280px, .75fr) minmax(0, 1.6fr);
  margin:0;
  padding:26px 0 30px;
  color:var(--navy);
  border-top:2px solid var(--navy);
}
[data-case-layout="sequence"] .category-heading {align-items:center;}
[data-case-layout="sequence"] .category-art {width:116px;height:78px;flex-basis:116px;}
[data-case-layout="sequence"] .category-intro h3 {font-size:34px;}
[data-case-layout="sequence"] .case-grid {grid-template-columns:1fr;gap:0;}
[data-case-layout="sequence"] .case-card,
[data-case-layout="sequence"] .case-wide {
  display:grid;
  grid-template-columns:88px minmax(0, 1fr);
  gap:24px;
  padding:30px 0;
  background:transparent;
  border:0;
  border-top:1px solid var(--line);
  border-radius:0;
}
[data-case-layout="sequence"] .card-symbol {width:80px;height:80px;margin:40px 0 0;}
[data-case-layout="sequence"] .case-card h4 {max-width:none;}
@media(max-width:680px) {
  [data-case-layout="band"] .category-intro,
  [data-case-layout="sequence"] .category-intro {grid-template-columns:1fr;padding:24px;gap:20px;}
  [data-case-layout="band"] .case-grid {padding:0 16px 16px;}
  [data-case-layout="sequence"] .category-intro {padding-inline:0;}
  [data-case-layout="sequence"] .case-card,
  [data-case-layout="sequence"] .case-wide {display:flex;padding:28px 0;}
  [data-case-layout="sequence"] .card-symbol {width:72px;height:72px;margin:0 0 20px;}
}

/* Slightly stronger category descriptions improve the lateral hierarchy. */
[data-case-layout="sidebar"] .category-intro p {font-weight:500;}

/* Stronger visual emphasis for category descriptions without altering copy. */
[data-case-layout="sidebar"] .category-intro p {
  font-size:17px;
  font-weight:600;
  line-height:1.75;
  color:#202b49;
}
@media(max-width:680px) {
  [data-case-layout="sidebar"] .category-intro p {font-size:16px;}
}

/* Strong section break for the product case collection. */
body:not(.proposal-page) .cases-section {
  background:var(--navy);
  border-top-color:var(--navy);
}
body:not(.proposal-page) .cases-section .section-intro {color:var(--cream);}
body:not(.proposal-page) .cases-section .section-rule {background:var(--yellow);}
body:not(.proposal-page) .cases-section .section-intro p {color:var(--cream);}

/* Category artwork spans the same usable width as its description. */
[data-case-layout="sidebar"] .category-art {
  width:100%;
  height:auto;
  aspect-ratio:auto;
}
[data-case-layout="sidebar"] .category-art img {
  width:100%;
  height:auto;
  object-fit:contain;
}
@media(max-width:680px) {
  [data-case-layout="sidebar"] .category-heading {flex-direction:column;align-items:flex-start;}
  [data-case-layout="sidebar"] .category-art {width:100%;height:auto;flex-basis:auto;}
}

/* On desktop, category artwork aligns with the first case title marker. */
@media(min-width:1001px) {
  [data-case-layout="sidebar"] .category-heading {padding-top:76px;}
}

/* Categories stay text-led; only individual cases carry illustrations. */
[data-case-layout="sidebar"] .category-heading {padding-top:0;}

/* Category title aligns with the first case heading on desktop. */
@media(min-width:1001px) {
  [data-case-layout="sidebar"] .category-heading {padding-top:64px;}
}