/* ============================================================
   Case page layout — artefact-led plates (variant C)
   Loaded after _case.css. Generated pages use these classes.
   ============================================================ */

/* nav centre label replaces the variant switcher on real pages */
.nav .here{font-family:var(--mono);font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--ink)}

/* ---- the skim layer: proof near the top, not at 83% down ---- */
.short{background:var(--surface-sunken);border-radius:16px;padding:clamp(30px,3.6vw,56px);margin-top:var(--s7)}
.short .mono{margin-bottom:20px}
.short .sv{font-size:clamp(19px,1.8vw,23px);line-height:1.5;color:var(--ink);max-width:54ch}
.short .out{display:flex;flex-wrap:wrap;gap:var(--s5) var(--s7);margin-top:var(--s5);
            padding-top:var(--s5);border-top:1px solid var(--line-strong)}
.short .out b{display:block;font-family:var(--mono);font-weight:400;font-size:23px;letter-spacing:-.01em}
.short .out span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
                 color:var(--ink-muted);margin-top:8px}
.short--accent{background:var(--accent);color:var(--on-accent);padding:clamp(34px,4vw,64px)}
.short--accent .mono{color:var(--on-accent);margin-bottom:clamp(30px,3vw,46px);text-transform:none}
.short--accent .sv{font-family:var(--serif);font-size:clamp(31px,3.8vw,54px);line-height:1.05;
                   letter-spacing:-.03em;color:var(--on-accent);max-width:31ch}
.short--accent .out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;
                    margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid rgba(11,11,11,.28)}
.short--accent .out>div{min-width:0;width:100%;text-align:left}
.short--accent .out>div:last-child{justify-self:start;width:100%;text-align:left}
.short--accent .out span{color:var(--on-accent);text-transform:uppercase;letter-spacing:.1em}

/* ---- acts ---- */
.act{padding-block:var(--s8) var(--s6)}
.act .inner{display:grid;grid-template-columns:auto 1fr;gap:var(--s5);align-items:baseline}
.act .num{font-family:var(--mono);font-size:12px;letter-spacing:.11em;color:var(--ink-muted)}
.act .chapter-index{display:grid;gap:8px;min-width:120px;letter-spacing:0}
.act .chapter-index b{font-size:14px;font-weight:400;line-height:1.35;color:var(--ink-secondary)}
.act .chapter-index small{font-size:var(--meta-size);line-height:1.45;color:var(--ink-secondary)}
.act h2{max-width:17ch}
.act .note{font-size:18px;line-height:1.7;color:var(--ink-secondary);max-width:58ch;margin-top:var(--s4)}

/* ---- plates ---- */
.plate{padding-block:var(--s7)}
.pcap{display:grid;grid-template-columns:82px minmax(0,1.05fr) minmax(0,1fr);gap:var(--s5);
      align-items:baseline;margin-bottom:var(--s5)}
.pcap .pn{font-family:var(--mono);font-size:var(--meta-size);letter-spacing:.08em;color:var(--ink-secondary)}
.pcap h3{max-width:20ch}
.pcap p{font-size:16px;line-height:1.68;color:var(--ink-secondary);margin:0;max-width:52ch}
.pcap p strong{color:var(--ink);font-weight:500}

.plate .shot{--shot-radius:var(--media-radius)}
.plate .duo{display:grid;grid-template-columns:1fr 1fr;gap:var(--s4)}
.plate .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.plate .screen-stack{display:grid;grid-template-columns:1fr;gap:var(--s6)}
.plate .screen-sequence{display:grid;grid-template-columns:1fr;gap:var(--s4)}

/* IDE exports already include their own rounded device frame. */
.plate .screen-stack .shot{border:0;border-radius:0;overflow:visible}
.plate .screen-stack .shot img{border-radius:0}

/* ---- quote / stat row ---- */
.say{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s5);padding-block:var(--s7)}
.say blockquote{display:flex;flex-direction:column;font-family:var(--serif);font-style:italic;font-size:clamp(19px,1.6vw,23px);line-height:1.34;
                letter-spacing:-.015em;border-left:1px solid var(--line-strong);padding-left:20px}
.say cite{display:block;font-family:var(--mono);font-style:normal;font-size:10px;letter-spacing:.11em;
          text-transform:uppercase;color:var(--ink-muted);margin-top:auto;padding-top:16px}
/* numbers are not speech: the stats variant drops the italic serif */
.say.stats blockquote{font-family:var(--mono);font-style:normal;font-size:clamp(26px,2.4vw,34px);
                      letter-spacing:-.02em;line-height:1.1;border-left:0;padding-left:0}
.say.stats cite{margin-top:14px;padding-top:0;max-width:22ch;line-height:1.5}

/* ---- verdict ---- */
.verdict{background:var(--surface-ink);color:var(--ink-inverse);border-radius:18px;
         padding:clamp(40px,5vw,84px);margin-block:var(--s8)}
.verdict h2{font-family:var(--serif);font-weight:400;color:var(--ink-inverse);max-width:18ch}
.verdict p{font-size:18px;line-height:1.7;color:#C7C7C7;max-width:58ch;margin-top:var(--s4)}
.verdict .out{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-top:var(--s6);
              padding-top:var(--s5);border-top:1px solid #2A2A2A}
.verdict .out>div{min-width:0;width:100%;text-align:left}
.verdict .out>div:last-child{justify-self:start;width:100%;text-align:left}
.verdict .out b{display:block;font-family:var(--mono);font-weight:400;font-size:24px;color:var(--ink-inverse)}
.verdict .out span{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
                   color:#9A9A98;margin-top:8px}

@media(max-width:1000px){
  .pcap{grid-template-columns:1fr;gap:var(--s3)}
  .plate .trio,.plate .duo{grid-template-columns:1fr}
  .say{grid-template-columns:1fr 1fr;gap:var(--s4)}
  .act .inner{grid-template-columns:1fr;gap:var(--s3)}
  .short--accent .out{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
  .verdict .out{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4) var(--s3)}
}
@media(max-width:700px){
  .short{margin-top:var(--s5)}
  .act{padding-block:var(--s6) var(--s4)}
  .plate{padding-block:var(--s4)}
  .pcap{margin-bottom:var(--s4)}
  .say{padding-block:var(--s5)}
  .verdict{margin-block:var(--s5)}
}
@media(max-width:640px){
  .say{grid-template-columns:1fr}
  .nav .here{display:none}
  .plate .screen-sequence{gap:var(--s3)}
}