/*
  Design system for the self-driven MBA "evidence page", per the
  Claude Design handoff. Deliberately separate from style.css: this
  page has its own strict two-hue palette, its own type scale, and
  explicitly no accent color, no radius, no shadows. Do not blend
  these tokens into the rest of the site.
*/
.page.nav-shell{padding-bottom:0;}

.mba{
  --mba-bg:#f2ebe4;
  --mba-mat:#fbf8f4;
  --mba-ink:#2b2320;
  --mba-body:#4a403a;
  --mba-sub:#6b615a;
  --mba-caption:#8a7d72;
  --mba-quiet:#9a8b7e;
  --mba-rule-top:#ddd2c6;
  --mba-rule:#e5dbd0;
  --mba-mat-border:#e2d8cd;
  --mba-link:#c9b9a8;
  --mba-asset-w:240px;
  --mba-font: -apple-system, "Avenir Next", "Segoe UI", "Helvetica Neue", sans-serif;

  background:var(--mba-bg);
  color:var(--mba-ink);
  font-family:var(--mba-font);
  padding:clamp(48px, 9vw, 112px) clamp(22px, 6vw, 80px) clamp(72px, 11vw, 140px);
}
.mba *{box-sizing:border-box;}
.mba a{
  color:var(--mba-ink);
  text-decoration:none;
  border-bottom:1px solid var(--mba-link);
}
.mba a:hover{
  color:var(--mba-caption);
  border-bottom-color:var(--mba-caption);
}

.mba-inner{max-width:1000px;margin:0 auto;}

/* header block */
.mba-header{max-width:620px;}
.mba-lead{
  font-size:clamp(20px, 2.4vw, 23px);
  line-height:1.55;
  margin:22px 0 0;
  text-wrap:pretty;
}
/* second half of the intro, stepped down so the opening is not a wall of large type */
.mba-lead-cont{
  font-size:17px;
  line-height:1.7;
  margin:18px 0 0;
  color:var(--mba-body);
  text-wrap:pretty;
}

/* 2022 artifacts — matted, kept visually distinct from the unframed videos below */
.mba-mat{
  background:var(--mba-mat);
  border:1px solid var(--mba-mat-border);
  padding:14px;
  aspect-ratio:4 / 3;
  /* a touch wider than the image's own radius so the frame follows it */
  border-radius:calc(var(--img-radius) + 3px);
}
.mba-mat img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
}
.mba-entry--stacked-media{grid-template-columns:116px minmax(0, 1fr);}
.mba-entry--stacked-media .mba-entry-media{
  grid-column:2;
  margin-top:1.75rem;
  justify-self:stretch;
}
/* the artifact pair sits above the timeline, across the full measure, so the
   two exhibits can be side by side as large as the page margins allow */
.mba-artifacts{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  gap:clamp(18px, 3vw, 28px);
  margin:clamp(40px, 6vw, 64px) 0 0;
}
.mba-artifact-figure{
  flex:1 1 300px;
  min-width:0;
  margin:0;
}
.mba-artifact-figure figcaption{
  margin:10px 0 0;
  font-size:13px;
  line-height:1.55;
  color:var(--mba-caption);
}

/* timeline */
.mba-timeline{
  margin:clamp(56px, 9vw, 104px) 0 0;
  border-top:1px solid var(--mba-rule-top);
}
.mba-entry{
  display:grid;
  /* the asset column is a fixed width, not auto: an auto track is sized by each
     entry's own captions, which made the assets shift left and right down the page */
  grid-template-columns:116px minmax(0, 1fr) var(--mba-asset-w);
  gap:4px clamp(20px, 4vw, 44px);
  align-items:start;
  border-bottom:1px solid var(--mba-rule);
  padding:clamp(26px, 4vw, 40px) 0;
}
.mba-entry-date{
  font-size:13px;
  line-height:1.5;
  color:var(--mba-quiet);
  padding-top:6px;
}
/* quiet marker in the date gutter, for a turning point in the story */
.mba-marker{
  display:block;
  margin-top:10px;
  padding-top:9px;
  border-top:1px solid var(--mba-rule);
  font-size:11.5px;
  line-height:1.45;
  color:var(--mba-quiet);
}

.mba-entry-text{min-width:0;max-width:52ch;}
.mba-entry-text h3{
  font-family:var(--mba-font);
  font-size:clamp(19px, 2.2vw, 22px);
  line-height:1.3;
  margin:0 0 10px;
  font-weight:500;
  letter-spacing:-0.005em;
}
.mba-entry-text p{
  font-size:17px;
  line-height:1.72;
  margin:0;
  color:var(--mba-body);
  max-width:50ch;
  text-wrap:pretty;
}
.mba-postmortem{
  margin:14px 0 0;
  font-size:14px;
  color:var(--mba-caption);
}

/* pull quote, lifted from the 2024 declaration itself */
.mba-quote{
  margin:20px 0 0;
  padding:0 0 0 18px;
  border-left:1px solid var(--mba-rule-top);
  max-width:50ch;
}
.mba-quote p{
  margin:0;
  font-size:16px;
  line-height:1.6;
  font-style:italic;
  color:var(--mba-sub);
  text-wrap:pretty;
}
.mba-quote cite{
  display:block;
  margin-top:8px;
  font-size:13px;
  font-style:normal;
  color:var(--mba-quiet);
}
/* assets sit in the third column, to the right of the text, stacked vertically
   and filling the column so every asset shares one left and right edge */
.mba-entry-media{
  display:flex;
  flex-direction:column;
  gap:22px;
  align-items:stretch;
  justify-self:stretch;
}
.mba-entry-media > figure{width:100%;}
.mba-entry-media figure{margin:0;}
.mba-entry-media iframe{
  display:block;
  width:100%;
  border:0;
}
.mba-entry-media .portrait{width:100%;aspect-ratio:9 / 16;}
/* still photographs, sized to sit alongside the portrait video embeds */
.mba-photo-figure{margin:0;width:240px;}
.mba-entry-media .photo{
  display:block;
  width:100%;
  height:auto;
  background:var(--mba-mat);
  border:1px solid var(--mba-mat-border);
}
.mba-entry-media .landscape{width:300px;aspect-ratio:16 / 9;}
.mba-landscape-figure{
  width:100%;
  max-width:680px;
}
.mba-landscape-figure .landscape{width:100%;}
.mba-entry-media figcaption{
  margin:8px 0 0;
  font-size:12px;
  line-height:1.45;
  color:var(--mba-quiet);
  letter-spacing:0.02em;
}

/* postscript */
.mba-postscript{
  display:flex;
  flex-wrap:wrap;
  gap:4px clamp(20px, 4vw, 52px);
  align-items:flex-start;
  padding:clamp(40px, 6vw, 72px) 0 0;
}
.mba-postscript-date{
  flex:0 0 116px;
  font-size:13px;
  line-height:1.5;
  color:var(--mba-quiet);
  padding-top:8px;
}
.mba-postscript-text{flex:1 1 380px;min-width:0;max-width:54ch;}
.mba-postscript-text p:first-child{
  font-size:clamp(20px, 2.4vw, 23px);
  line-height:1.55;
  margin:0 0 20px;
  text-wrap:pretty;
}
.mba-postscript-text p:last-child{
  font-size:17px;
  line-height:1.72;
  margin:0;
  color:var(--mba-body);
  text-wrap:pretty;
}

/* Below ~900px there isn't room for a readable text measure beside the assets,
   so the assets drop under the text the way the landscape videos already do. */
@media (max-width:900px){
  .mba-entry{grid-template-columns:116px minmax(0, 1fr);}
  .mba-entry .mba-entry-media{
    grid-column:2;
    margin-top:1.75rem;
  }
}

@media (max-width:720px){
  .mba-entry{grid-template-columns:1fr;}
  .mba-entry > *{grid-column:1;}
  /* must match the specificity of the 900px rule above, or the media stays in
     column 2 and grid creates an implicit second column */
  .mba-entry .mba-entry-media{grid-column:1;}
  /* give the assets real presence once they are full width */
  .mba-entry-media{align-items:stretch;justify-self:stretch;}
  /* one shared width so stacked assets line up on both edges here too */
  .mba-entry-media .portrait,
  .mba-entry-media .photo{width:min(280px, 78vw);max-width:none;}
  .mba-entry-media .landscape{width:100%;}
  .mba-landscape-figure{max-width:none;}
  /* the artifact pair stacks rather than squeezing two per row */
  .mba-artifact-figure{flex:1 1 100%;}
}

/* click-to-enlarge (see self-driven-mba.js) */
.mba-zoomable{cursor:zoom-in;}
.mba-zoomable:focus-visible{
  outline:2px solid var(--mba-caption);
  outline-offset:3px;
}
body.mba-lightbox-open{overflow:hidden;}

.mba-lightbox{
  position:fixed;
  inset:0;
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(24px, 5vw, 64px);
  background:rgba(43, 35, 32, 0.82);
}
.mba-lightbox[hidden]{display:none;}
.mba-lightbox-figure{
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  max-width:100%;
  max-height:100%;
}
.mba-lightbox-figure img{
  display:block;
  max-width:100%;
  max-height:calc(100vh - clamp(110px, 16vw, 190px));
  width:auto;
  height:auto;
  background:var(--mba-mat);
  border:1px solid var(--mba-mat-border);
  padding:clamp(8px, 1.5vw, 18px);
  object-fit:contain;
  border-radius:calc(var(--img-radius) + 3px);
}
.mba-lightbox-figure figcaption{
  margin:0;
  max-width:60ch;
  text-align:center;
  font-size:13px;
  line-height:1.55;
  color:var(--mba-mat);
}
.mba-lightbox-figure figcaption a{
  color:var(--mba-mat);
  border-bottom-color:rgba(251, 248, 244, 0.5);
}
.mba-lightbox-close{
  position:absolute;
  top:clamp(12px, 2.5vw, 24px);
  right:clamp(12px, 2.5vw, 24px);
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  line-height:1;
  color:var(--mba-mat);
  background:transparent;
  border:1px solid rgba(251, 248, 244, 0.35);
  cursor:pointer;
  font-family:inherit;
}
.mba-lightbox-close:hover{border-color:var(--mba-mat);}
.mba-lightbox-close:focus-visible{
  outline:2px solid var(--mba-mat);
  outline-offset:2px;
}