/*
 * MEV 2.0 — P25 Pantoufle foundational Case Study geography lab — 2026-09-09
 * DRAFT / WORKBENCH / QUERY-GATED ONLY.
 * Hard invariant: every editorial and visual construction stays inside 880px.
 * Real photography and image motion are deliberately absent.
 */
body.mev-p25-composition-lab{
  --p25-copy:880px;
  --p25-gutter:24px;
  --p25-gap:72px;
  --p25-red:#FD0600;
  --p25-grey:#EFF0E9;
  --p25-beige:#F9F9EF;
  --p25-black:#000;
  overflow-x:clip;
}

/* ================================================================
 * 0. CANONICAL MEV BODY GEOMETRY — SAME FOR H0..H7
 * ================================================================ */
body.mev-p25-composition-lab #post-330 .mev-p25-section,
body.mev-p25-composition-lab #post-330 .mev-p25-lab-resources{
  box-sizing:border-box;
  width:100%;
  padding:var(--p25-gap) var(--p25-gutter);
}
body.mev-p25-composition-lab #post-330 .mev-p25-section--grey{background:var(--p25-grey)!important}
body.mev-p25-composition-lab #post-330 .mev-p25-section--beige{background:var(--p25-beige)!important}
body.mev-p25-composition-lab #post-330 .mev-p25-separator{width:100%;height:1px;background:var(--p25-red)}
body.mev-p25-composition-lab #post-330 .mev-p25-inner,
body.mev-p25-composition-lab #post-330 .mev-p25-lab-resources__inner{
  box-sizing:border-box;
  width:min(var(--p25-copy),calc(100vw - 2 * var(--p25-gutter)));
  max-width:var(--p25-copy);
  margin-inline:auto;
}
body.mev-p25-composition-lab #post-330 .mev-p25-opening-lead{max-width:820px;font-size:1.18rem!important;line-height:1.52!important}
body.mev-p25-composition-lab #post-330 .mev-p25-h2{max-width:880px;font-size:clamp(2rem,4vw,3rem);line-height:1.02;letter-spacing:-.025em}
body.mev-p25-composition-lab #post-330 .mev-p25-prose,
body.mev-p25-composition-lab #post-330 .mev-p25-shazam,
body.mev-p25-composition-lab #post-330 .mev-p25-dayparts,
body.mev-p25-composition-lab #post-330 .mev-p25-dayparts-coda,
body.mev-p25-composition-lab #post-330 .mev-p25-takeaway,
body.mev-p25-composition-lab #post-330 .mev-p25-quote{width:100%;max-width:880px}
body.mev-p25-composition-lab #post-330 .mev-p25-prose p,
body.mev-p25-composition-lab #post-330 .mev-p25-takeaway p,
body.mev-p25-composition-lab #post-330 .mev-p25-daypart p,
body.mev-p25-composition-lab #post-330 .mev-p25-shazam p,
body.mev-p25-composition-lab #post-330 .mev-p25-quote p{font-size:1rem;line-height:1.64;text-wrap:pretty;overflow-wrap:normal;word-break:normal;hyphens:none}

/* No real images in the lab. */
body.mev-p25-composition-lab #post-330 .mev-p25-image{display:none!important}

/* ================================================================
 * 1. EDITORIAL GRAMMAR — EXISTING MEV LANGUAGE
 * ================================================================ */
body.mev-p25-composition-lab #post-330 .mev-p25-lab-keyline,
body.mev-p25-composition-lab #post-330 .mev-p25-lab-pivot{
  max-width:760px;
  margin:48px 0 46px!important;
  padding:0!important;
  border:0!important;
  background:none!important;
  font-family:'Karrik',sans-serif!important;
  font-size:1.72rem!important;
  font-weight:400!important;
  line-height:1.08!important;
  letter-spacing:-.018em!important;
  text-wrap:balance;
}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-memory{margin:12px 0 28px!important;font-size:.94rem!important;line-height:1.48!important}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-thesis{
  position:relative;
  width:100%!important;
  max-width:none!important;
  margin:40px 0 0!important;
  padding:14px 0!important;
  font-size:1.18rem!important;
  line-height:1.46!important;
  background:linear-gradient(to right,var(--p25-grey) 0%,#f5f6ef 8%,var(--p25-beige) 14%,var(--p25-beige) 86%,#f5f6ef 92%,var(--p25-grey) 100%);
}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-thesis::before,
body.mev-p25-composition-lab #post-330 .mev-p25-lab-thesis::after{
  content:'';position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(to right,rgba(253,6,0,0) 0%,rgba(253,6,0,.42) 8%,var(--p25-red) 14%,var(--p25-red) 86%,rgba(253,6,0,.42) 92%,rgba(253,6,0,0) 100%);
}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-thesis::before{top:0}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-thesis::after{bottom:0}
body.mev-p25-composition-lab #post-330 .mev-p25-shazam{margin:48px 0!important;padding:28px 0;border-top:1px solid #000;border-bottom:1px solid #000}
body.mev-p25-composition-lab #post-330 .mev-p25-shazam p{margin:0 0 .55em!important}
body.mev-p25-composition-lab #post-330 .mev-p25-shazam p:last-child{margin-bottom:0!important}
body.mev-p25-composition-lab #post-330 .mev-p25-dayparts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:34px;border-top:1px solid #000;border-bottom:1px solid #000}
body.mev-p25-composition-lab #post-330 .mev-p25-daypart{padding:28px 24px 30px}
body.mev-p25-composition-lab #post-330 .mev-p25-daypart:first-child{padding-left:0}
body.mev-p25-composition-lab #post-330 .mev-p25-daypart:last-child{padding-right:0}
body.mev-p25-composition-lab #post-330 .mev-p25-daypart h3{font-size:1.55rem;line-height:1.08}
body.mev-p25-composition-lab #post-330 .mev-p25-quote{margin:40px 0!important;padding:28px 0!important;border-top:1px solid #000!important;border-bottom:1px solid #000!important}
body.mev-p25-composition-lab #post-330 .mev-p25-quote p{font-family:'Karrik',sans-serif!important;font-size:1.72rem!important;line-height:1.14!important;letter-spacing:-.018em}
body.mev-p25-composition-lab #post-330 .mev-p25-coda{margin-top:48px!important;font-family:'Karrik',sans-serif!important;font-size:1.72rem!important;line-height:1.08!important;letter-spacing:-.018em}

/* ================================================================
 * 2. NEUTRAL VISUAL MATERIAL
 * ================================================================ */
body.mev-p25-composition-lab #post-330 .mev-p25-lab-frame{
  position:relative;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:0;
  border:1px solid rgba(0,0,0,.56);
  background:
    linear-gradient(45deg,transparent calc(50% - .5px),rgba(0,0,0,.16) 50%,transparent calc(50% + .5px)),
    linear-gradient(-45deg,transparent calc(50% - .5px),rgba(0,0,0,.16) 50%,transparent calc(50% + .5px));
  color:rgba(0,0,0,.62);
  font-family:'General Sans',sans-serif;
  font-size:.68rem;
  font-weight:600;
  line-height:1.2;
  letter-spacing:.075em;
  text-transform:uppercase;
}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-frame span{padding:8px;background:rgba(249,249,239,.82)}

/* ================================================================
 * 3. GALLERY SYSTEM — G1..G4, ALWAYS 880PX
 * ================================================================ */
body.mev-p25-composition-lab #post-330 .mev-p25-lab-gallery{width:100%;max-width:880px;margin:52px 0 8px}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-gallery__eyebrow{margin:0 0 14px!important;font-size:.68rem!important;font-weight:600!important;letter-spacing:.08em;text-transform:uppercase}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-gallery__frames{display:grid;gap:14px;width:100%}

/* G1 — equal triptych. */
body.mev-p25-g1 #post-330 .mev-p25-lab-gallery__frames{grid-template-columns:repeat(3,1fr)}
body.mev-p25-g1 #post-330 .mev-p25-lab-gallery__frame{aspect-ratio:3/4}

/* G2 — panorama then duo. */
body.mev-p25-g2 #post-330 .mev-p25-lab-gallery__frames{grid-template-columns:repeat(2,1fr)}
body.mev-p25-g2 #post-330 .mev-p25-lab-gallery__frame--1{grid-column:1/-1;aspect-ratio:16/7}
body.mev-p25-g2 #post-330 .mev-p25-lab-gallery__frame--2,
body.mev-p25-g2 #post-330 .mev-p25-lab-gallery__frame--3{aspect-ratio:4/5}

/* G3 — duo then panorama. */
body.mev-p25-g3 #post-330 .mev-p25-lab-gallery__frames{grid-template-columns:repeat(2,1fr)}
body.mev-p25-g3 #post-330 .mev-p25-lab-gallery__frame--1,
body.mev-p25-g3 #post-330 .mev-p25-lab-gallery__frame--2{aspect-ratio:4/5}
body.mev-p25-g3 #post-330 .mev-p25-lab-gallery__frame--3{grid-column:1/-1;aspect-ratio:16/7}

/* G4 — one dominant frame + two stacked fragments. */
body.mev-p25-g4 #post-330 .mev-p25-lab-gallery__frames{grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr}
body.mev-p25-g4 #post-330 .mev-p25-lab-gallery__frame--1{grid-column:1;grid-row:1/3;aspect-ratio:4/5}
body.mev-p25-g4 #post-330 .mev-p25-lab-gallery__frame--2,
body.mev-p25-g4 #post-330 .mev-p25-lab-gallery__frame--3{grid-column:2;aspect-ratio:1}

/* ================================================================
 * 4. HYPOTHESES H0..H7
 * ================================================================ */
/* H0 — control. Pure editorial body. No visual material at all. */
body.mev-p25-h0 #post-330 .mev-p25-lab-gallery,
body.mev-p25-h0 #post-330 .mev-p25-lab-frame{display:none!important}

/* H1 — gallery immediately after opening lead. */
body.mev-p25-h1 #post-330 .mev-p25-role-opening .mev-p25-lab-gallery{margin-top:40px;margin-bottom:54px}

/* H2 — central gallery after genesis, before music begins. */
body.mev-p25-h2 #post-330 .mev-p25-role-genesis .mev-p25-lab-gallery{margin-top:56px;margin-bottom:0;padding-top:36px;border-top:1px solid #000}

/* H3 — terminal gallery after coda. */
body.mev-p25-h3 #post-330 .mev-p25-role-return .mev-p25-lab-gallery{margin-top:64px;margin-bottom:0;padding-top:36px;border-top:1px solid #000}

/* H4 — two visual thresholds. One frame = one semantic change of territory. */
body.mev-p25-h4 #post-330 .mev-p25-lab-threshold{width:100%;max-width:880px;margin:58px 0 0;padding-top:28px;border-top:1px solid #000}
body.mev-p25-h4 #post-330 .mev-p25-lab-threshold .mev-p25-lab-frame{width:100%;aspect-ratio:16/6}

/* H5 — only genuine editorial hinges may share a field with an image. */
body.mev-p25-h5 #post-330 .mev-p25-lab-hinge-pair{
  display:grid;
  grid-template-columns:minmax(0,1.08fr) minmax(260px,.72fr);
  gap:34px;
  align-items:stretch;
  margin:52px 0 48px;
  padding:28px 0;
  border-top:1px solid #000;
  border-bottom:1px solid #000;
}
body.mev-p25-h5 #post-330 .mev-p25-lab-hinge-pair .mev-p25-lab-keyline,
body.mev-p25-h5 #post-330 .mev-p25-lab-hinge-pair .mev-p25-lab-pivot{margin:0!important;align-self:center}
body.mev-p25-h5 #post-330 .mev-p25-lab-hinge-pair .mev-p25-lab-frame{aspect-ratio:4/5}
body.mev-p25-h5 #post-330 .mev-p25-lab-hinge-pair--reverse{grid-template-columns:minmax(260px,.72fr) minmax(0,1.08fr)}
body.mev-p25-h5 #post-330 .mev-p25-lab-hinge-pair--reverse .mev-p25-lab-pivot{grid-column:2}
body.mev-p25-h5 #post-330 .mev-p25-lab-hinge-pair--reverse .mev-p25-lab-frame{grid-column:1;grid-row:1}

/* H6 — iconography exists only in the temporal/use section. */
body.mev-p25-h6 #post-330 .mev-p25-lab-temporal-sequence{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin:42px 0 48px;
  padding-top:30px;
  border-top:1px solid #000;
}
body.mev-p25-h6 #post-330 .mev-p25-lab-temporal-sequence__main{grid-column:1/-1;aspect-ratio:16/7}
body.mev-p25-h6 #post-330 .mev-p25-lab-temporal-sequence__small{aspect-ratio:4/5}

/* H7 — bookends. One visual entry, then silence, then terminal gallery. */
body.mev-p25-h7 #post-330 .mev-p25-lab-bookend{margin:42px 0 56px;padding-top:28px;border-top:1px solid #000}
body.mev-p25-h7 #post-330 .mev-p25-lab-bookend .mev-p25-lab-frame{width:100%;aspect-ratio:16/6}
body.mev-p25-h7 #post-330 .mev-p25-role-return .mev-p25-lab-gallery{margin-top:64px;margin-bottom:0;padding-top:36px;border-top:1px solid #000}

/* ================================================================
 * 5. FINAL EXTERNAL REFERENCES — REPLACES GENERIC CTA
 * ================================================================ */
body.mev-p25-composition-lab #post-330 .mev-p25-lab-resources{background:var(--p25-beige)!important}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-resources__inner{border-top:1px solid #000;border-bottom:1px solid #000}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-resource{
  display:grid;
  grid-template-columns:130px minmax(0,1fr) 28px;
  gap:20px;
  align-items:center;
  padding:24px 0;
  color:#000!important;
  text-decoration:none!important;
  border-bottom:1px solid rgba(0,0,0,.38);
}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-resource:last-child{border-bottom:0}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-resource__label{font-family:'General Sans',sans-serif;font-size:.74rem;font-weight:600;letter-spacing:.075em;text-transform:uppercase}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-resource__title{font-family:'Karrik',sans-serif;font-size:1.55rem;font-weight:400;line-height:1.08}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-resource__arrow{justify-self:end;font-family:'Karrik',sans-serif;font-size:1.4rem;line-height:1}
body.mev-p25-composition-lab #post-330 .mev-p25-lab-resource:hover .mev-p25-lab-resource__title,
body.mev-p25-composition-lab #post-330 .mev-p25-lab-resource:focus-visible .mev-p25-lab-resource__title{color:var(--p25-red)}

/* ================================================================
 * 6. LAB SWITCHER
 * ================================================================ */
.mev-p25-comp-switcher{
  position:fixed;
  z-index:100000;
  right:12px;
  bottom:12px;
  width:min(520px,calc(100vw - 24px));
  padding:10px 12px 12px;
  border:1px solid #000;
  background:rgba(249,249,239,.98);
  color:#000;
  font-family:'General Sans',sans-serif;
  font-size:10px;
  line-height:1.25;
}
.mev-p25-comp-switcher__note{display:block;margin-bottom:8px;font-size:9px;letter-spacing:.055em;text-transform:uppercase}
.mev-p25-comp-switcher__group+.mev-p25-comp-switcher__group{margin-top:8px;padding-top:8px;border-top:1px solid rgba(0,0,0,.25)}
.mev-p25-comp-switcher__group>strong{display:block;margin-bottom:5px;font-size:9px;text-transform:uppercase;letter-spacing:.05em}
.mev-p25-comp-switcher__links{display:flex;flex-wrap:wrap;gap:4px 10px}
.mev-p25-comp-switcher a{color:#000!important;text-decoration:none!important;border-bottom:1px solid transparent}
.mev-p25-comp-switcher a:hover,.mev-p25-comp-switcher a:focus-visible{border-bottom-color:#000}
.mev-p25-comp-switcher a[aria-current='page']{color:var(--p25-red)!important;border-bottom-color:var(--p25-red)}

/* ================================================================
 * 7. RESPONSIVE — SAME HIERARCHY, NO DESKTOP GEOMETRY FORCED
 * ================================================================ */
@media(max-width:900px){
  body.mev-p25-composition-lab{--p25-gutter:16px;--p25-gap:50px}
  body.mev-p25-composition-lab #post-330 .mev-p25-inner,
  body.mev-p25-composition-lab #post-330 .mev-p25-lab-resources__inner{width:100%;max-width:none}
  body.mev-p25-composition-lab #post-330 .mev-p25-h2{font-size:clamp(2rem,9.2vw,2.55rem);margin-bottom:24px}
  body.mev-p25-composition-lab #post-330 .mev-p25-opening-lead{font-size:1.08rem!important}
  body.mev-p25-composition-lab #post-330 .mev-p25-lab-keyline,
  body.mev-p25-composition-lab #post-330 .mev-p25-lab-pivot{font-size:1.5rem!important;margin:42px 0 40px!important}
  body.mev-p25-composition-lab #post-330 .mev-p25-lab-thesis{font-size:1rem!important;line-height:1.48!important;margin-top:32px!important;padding:12px 0!important}
  body.mev-p25-composition-lab #post-330 .mev-p25-quote p,
  body.mev-p25-composition-lab #post-330 .mev-p25-coda{font-size:1.5rem!important}

  body.mev-p25-composition-lab #post-330 .mev-p25-dayparts{grid-template-columns:1fr}
  body.mev-p25-composition-lab #post-330 .mev-p25-daypart{padding:24px 0!important;border-bottom:1px solid rgba(0,0,0,.38)}
  body.mev-p25-composition-lab #post-330 .mev-p25-daypart:last-child{border-bottom:0}
  body.mev-p25-composition-lab #post-330 .mev-p25-daypart+.mev-p25-daypart::before{display:none}

  body.mev-p25-composition-lab #post-330 .mev-p25-lab-gallery__frames,
  body.mev-p25-g1 #post-330 .mev-p25-lab-gallery__frames,
  body.mev-p25-g2 #post-330 .mev-p25-lab-gallery__frames,
  body.mev-p25-g3 #post-330 .mev-p25-lab-gallery__frames,
  body.mev-p25-g4 #post-330 .mev-p25-lab-gallery__frames{display:grid;grid-template-columns:1fr;grid-template-rows:auto}
  body.mev-p25-composition-lab #post-330 .mev-p25-lab-gallery__frame{grid-column:1!important;grid-row:auto!important;aspect-ratio:4/5!important}
  body.mev-p25-composition-lab #post-330 .mev-p25-lab-gallery__frame--1{aspect-ratio:4/5!important}

  body.mev-p25-h5 #post-330 .mev-p25-lab-hinge-pair,
  body.mev-p25-h5 #post-330 .mev-p25-lab-hinge-pair--reverse{display:grid;grid-template-columns:1fr;gap:24px}
  body.mev-p25-h5 #post-330 .mev-p25-lab-hinge-pair .mev-p25-lab-keyline,
  body.mev-p25-h5 #post-330 .mev-p25-lab-hinge-pair .mev-p25-lab-pivot,
  body.mev-p25-h5 #post-330 .mev-p25-lab-hinge-pair .mev-p25-lab-frame{grid-column:1!important;grid-row:auto!important}
  body.mev-p25-h5 #post-330 .mev-p25-lab-hinge-pair .mev-p25-lab-frame{aspect-ratio:4/5}

  body.mev-p25-h6 #post-330 .mev-p25-lab-temporal-sequence{grid-template-columns:1fr}
  body.mev-p25-h6 #post-330 .mev-p25-lab-temporal-sequence__main,
  body.mev-p25-h6 #post-330 .mev-p25-lab-temporal-sequence__small{grid-column:1;aspect-ratio:4/5}

  body.mev-p25-composition-lab #post-330 .mev-p25-lab-resource{grid-template-columns:1fr 26px;gap:6px 12px;padding:20px 0}
  body.mev-p25-composition-lab #post-330 .mev-p25-lab-resource__label{grid-column:1;font-size:.68rem}
  body.mev-p25-composition-lab #post-330 .mev-p25-lab-resource__title{grid-column:1;font-size:1.38rem}
  body.mev-p25-composition-lab #post-330 .mev-p25-lab-resource__arrow{grid-column:2;grid-row:1/3;align-self:center}

  .mev-p25-comp-switcher{right:6px;bottom:6px;width:calc(100vw - 12px);max-height:44vh;overflow:auto;padding:8px 9px}
}