/* Layout B — studio case kit. Tokens come from each case's --s1/--s2/--page. */

html:has(body.layout-studio),
body.layout-studio{
  --page:#f7f4ee;
  background:var(--page);
  text-transform:none;
}

body.layout-studio .child-chrome{
  background:color-mix(in srgb, var(--page) 92%, transparent);
  border-bottom-color:rgba(11,11,11,.10);
}

/* Wayfinder sits outside <main>. Ivory on cream reads as a second footer band. */
body.layout-studio .wayfinder{
  background:transparent;
}

/* Cards, statrow, numbered heads, and odd-section bands already mark chapters.
   Page-level hairlines are leftover HRs. Keep list/component rules (ship, flag-line, stats). */
body.layout-studio .standfirst,
body.layout-studio .close,
body.layout-studio .case-study .provenance,
body.layout-studio .provenance,
body.layout-studio .wayfinder{
  border-top:none;
}

body.layout-studio .case-study{
  --page:#f7f4ee;
  --surface:#fff;
  background:
    radial-gradient(900px 420px at 88% -10%, color-mix(in srgb, var(--s1) 16%, transparent), transparent 60%),
    radial-gradient(700px 380px at 8% 8%, color-mix(in srgb, var(--s2) 10%, transparent), transparent 55%),
    var(--page);
}

body.layout-studio .hero{
  padding-top:clamp(3rem,7vw,5.5rem);
}

body.layout-studio .case-study h1{
  font-size:clamp(2.5rem,7.2vw,4.8rem);
  max-width:18ch;
}

body.layout-studio .eyebrow{
  color:var(--s1);
}

body.layout-studio .glance.glance-split{
  background:transparent;
  border:0;
  padding:0;
}

body.layout-studio .glance.glance-split dl{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
  row-gap:12px;
  column-gap:12px;
  margin:0;
}

body.layout-studio .glance-card{
  background:var(--surface);
  border:1px solid var(--ring);
  border-radius:18px;
  padding:1.2rem 1.25rem 1.35rem;
  box-shadow:0 10px 28px color-mix(in srgb, var(--ink) 6%, transparent);
}

body.layout-studio .glance-card dt{
  margin:0 0 .65rem;
  padding:0;
  font-family:"JetBrains Mono",ui-monospace,monospace;
  font-size:.7rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--s1);
}

body.layout-studio .glance-card dd{
  margin:0;
  font-size:.94rem;
  line-height:1.5;
}

body.layout-studio .statrow{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin:1.5rem 0 0;
  background:var(--surface);
  border:1px solid var(--ring);
  border-radius:16px;
  overflow:hidden;
}

body.layout-studio .statrow[data-count="3"]{
  grid-template-columns:repeat(3,minmax(0,1fr));
}

body.layout-studio .stat{
  padding:1.15rem 1.1rem 1.25rem;
  border-right:1px solid var(--ring);
}

body.layout-studio .stat:last-child{
  border-right:0;
}

body.layout-studio .stat b{
  display:block;
  font-family:"Fraunces",Georgia,serif;
  font-size:clamp(1.6rem,3vw,2.2rem);
  letter-spacing:-.03em;
  line-height:1;
}

body.layout-studio .stat span{
  display:block;
  margin-top:.45rem;
  font-size:.78rem;
  color:var(--mut);
  line-height:1.35;
}

body.layout-studio .sec-head{
  gap:1rem;
}

body.layout-studio .sec-num{
  color:var(--s1);
  letter-spacing:.14em;
}

body.layout-studio .case-jump-read > section:nth-of-type(odd){
  background:color-mix(in srgb, var(--surface) 65%, transparent);
  border-radius:22px;
  margin-block:8px;
}

body.layout-studio .case-jump-rail:not([hidden]){
  background:color-mix(in srgb, var(--surface) 88%, transparent);
  border-radius:18px;
  box-shadow:0 12px 30px color-mix(in srgb, var(--ink) 8%, transparent);
}

body.layout-studio .case-jump-list a[aria-current="true"]{
  background:color-mix(in srgb, var(--s1f) 80%, var(--surface));
  border-color:color-mix(in srgb, var(--s1) 28%, var(--surface));
}

@media (max-width:900px){
  body.layout-studio .glance.glance-split dl,
  body.layout-studio .statrow,
  body.layout-studio .statrow[data-count="3"]{
    grid-template-columns:1fr;
  }
  body.layout-studio .stat{
    border-right:0;
    border-bottom:1px solid var(--ring);
  }
  body.layout-studio .stat:last-child{
    border-bottom:0;
  }
}