/* Shared production typography. Paper Desk defines the type scale;
   My Property Desk defines the technical facts strip. Load after page CSS. */
:root {
  --type-family: "Segoe UI", Arial, sans-serif;
  --type-hero: clamp(3.1rem, 5.7vw, 5rem);
  --type-section: clamp(2rem, 4vw, 3.35rem);
  --type-step: clamp(2rem, 3.7vw, 3.4rem);
  --type-label: .95rem;
  --type-prose: 1.05rem;
  --type-card: .96rem;
  --type-caption: .94rem;
}
.concept-a, .mpd-study { font-family: var(--type-family); }
.concept-a :is(h1,h2,h3), .mpd-study :is(h1,h2,h3) { font-weight: 600; }

/* Equal page bounds and hero geometry on both case studies. */
.case-main, main.mpd-study { width: min(1180px, calc(100% - 40px)); max-width:1180px; margin:0 auto; padding:0; }
.case-main .case-hero, .mpd-study .hero {
  min-height:650px; padding:80px 0 65px; margin:0; max-width:none;
  display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);
  gap:65px; align-items:center;
}
.case-main .case-heading h1, .mpd-study .hero h1, .privacy-hero h1 {
  font-size:var(--type-hero); font-weight:600; line-height:.98; letter-spacing:-.065em;
}
.case-main .case-heading h1, .mpd-study .hero h1 { margin:0; }
.case-main .case-heading > p:not(.eyebrow), .mpd-study .hero .lead, .privacy-hero > p:not(.eyebrow):not(.privacy-updated) {
  font-size:1.15rem; line-height:1.65; font-weight:400; color:var(--muted);
}
.case-main .case-heading > p:not(.eyebrow), .mpd-study .hero .lead { margin:25px 0 0; }
.case-main .case-heading .button-row, .mpd-study .hero .button-row { margin-top:30px; }
.case-main .case-preview, .mpd-study .hero-media { width:100%; max-width:none; margin:0; }
.mpd-study .hero-media .expand { box-shadow:0 32px 70px rgba(20,32,54,.18); }

/* Section hierarchy. Keep smaller education/timeline titles in their own roles. */
.section-heading h2, .about-section h2, .ai-section h2,
.case-narrative h2, .architecture-section h2, .paper-walkthrough-intro h2,
.paper-tech-copy h2, .paper-backend-decisions h2, .paper-further-development h2,
.mpd-study h2, .mpd-study .centered h2, .mpd-study .closing h2, .privacy-copy h2 {
  font-size:var(--type-section); font-weight:600; line-height:1.08; letter-spacing:-.045em;
}
.paper-step-copy h3, .mpd-study .step .copy h2 {
  font-size:var(--type-step); font-weight:600; line-height:1.04; letter-spacing:-.045em;
  margin:13px 0 21px;
}
.mpd-study .closing h2 { white-space:normal; }
.concept-a main .eyebrow, .concept-a main :is(.section-heading, .about-section > div:first-child, .ai-section > div:first-child) .eyebrow, .mpd-study .copy > .eyebrow,
.mpd-study .centered > .eyebrow, .mpd-study .hero .eyebrow {
  font-size:var(--type-label); font-weight:700; line-height:1.45;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
}
.case-heading > .eyebrow, .mpd-study .hero .eyebrow { margin:0 0 15px; }
.paper-step-copy > span, .mpd-study .step .copy > .eyebrow {
  font-size:1rem; font-weight:900; line-height:1.45; letter-spacing:.1em;
}
.mpd-study .step .copy > .eyebrow { margin:0; }
.paper-decision-grid article > span, .mpd-study .decision-grid article > span,
.mpd-study .future-grid article > span { font-size:1rem; font-weight:900; line-height:1.45; }

/* Prose roles taken from the corresponding Paper Desk sections. */
.about-copy p, .ai-prose p, .privacy-copy p,
.case-narrative > div:last-child p, .mpd-study .prose p,
.paper-walkthrough-intro > p, .mpd-study .centered > p:not(.eyebrow) {
  font-size:var(--type-prose); line-height:1.7; font-weight:400; color:var(--muted);
}
.paper-step-copy > p, .mpd-study .step .copy > p:not(.eyebrow) {
  font-size:1.08rem; line-height:1.75; color:var(--muted);
}
.paper-tech-copy > p:not(.eyebrow), .architecture-section > div > p:not(.eyebrow),
.paper-further-development header > p:not(.eyebrow),
.mpd-study .technical .copy > p:not(.eyebrow), .mpd-study .further header > p:not(.eyebrow) {
  font-size:1.02rem; line-height:1.7; color:var(--muted);
}
.paper-decision-grid h3, .mpd-study .decision-grid h3, .mpd-study .future-grid h3 {
  font-size:1.25rem; font-weight:600; line-height:1.3; letter-spacing:normal; margin:20px 0 12px;
}
.paper-decision-grid p, .mpd-study .decision-grid p, .mpd-study .future-grid p {
  font-size:var(--type-card); font-weight:400; line-height:1.72; color:var(--muted);
}
.paper-decision-grid article, .mpd-study .decision-grid article, .mpd-study .future-grid article { padding:34px; }

/* Shared media labels, captions and expansion affordance. */
.paper-media-label, .mpd-study .media-label {
  font-size:.86rem; font-weight:850; line-height:1.45; letter-spacing:.1em; margin:0 0 15px;
}
.paper-media-card figcaption, .paper-diagram-card figcaption, .mpd-study .media figcaption {
  font-size:var(--type-caption); line-height:1.55; font-weight:400; color:#6b6266;
}
.paper-expand-hint, .mpd-study .hint {
  font-size:.78rem; font-weight:700; line-height:1.45; background:rgba(32,33,38,.88);
  border-radius:7px; padding:7px 10px; transform:translateY(4px); transition:opacity .18s ease, transform .18s ease;
}
.mpd-study .expand:hover .hint, .mpd-study .expand:focus-visible .hint { transform:none; }
.image-lightbox, .mpd-study .lightbox {
  width:min(1180px,calc(100vw - 64px)); max-width:none; height:min(820px,calc(100dvh - 64px));
  max-height:none; padding:58px 72px 34px; border:0; border-radius:16px;
  background:#f7f7f7; box-shadow:0 30px 90px rgba(0,0,0,.35);
}
.image-lightbox::backdrop, .mpd-study .lightbox::backdrop { background:rgba(20,21,25,.78); backdrop-filter:blur(5px); }
.image-lightbox figure, .mpd-study .lightbox figure { display:grid; height:100%; grid-template-rows:minmax(0,1fr) auto; gap:18px; }
.image-lightbox figcaption, .mpd-study .lightbox figcaption { font-size:.95rem; font-weight:400; line-height:1.55; color:var(--muted); }
.image-lightbox button, .mpd-study .lightbox button { font-family:Arial,sans-serif; font-weight:400; }
.mpd-study .lightbox .close { width:42px; height:42px; right:14px; top:14px; font-size:1.7rem; line-height:1; }
.mpd-study .lightbox :is(.previous,.next) { width:46px; height:54px; top:50%; translate:0 -50%; font-size:1.5rem; }
.mpd-study .lightbox .previous { left:12px; }
.mpd-study .lightbox .next { right:12px; }
.mpd-study .lightbox img { width:100%; height:100%; max-height:none; object-fit:contain; }
.concept-a .button { line-height:1.5; }

/* Intentional exception: both technical fact strips follow MPD. */
.page-paper .case-facts, .mpd-study .facts {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:0; padding:0; margin:0;
  border-block:1px solid var(--line);
}
.case-facts > div, .mpd-study .facts > div { padding:25px 12px; text-align:center; }
.case-facts small, .mpd-study .facts dt {
  display:block; font-size:14px; font-weight:750; line-height:1.45; color:var(--accent);
  text-transform:uppercase; letter-spacing:.08em;
}
.case-facts strong, .mpd-study .facts dd {
  display:block; font-size:15px; font-weight:600; line-height:1.5; margin:9px 0 0; color:var(--ink);
}
/* Use the existing Paper Desk connector, including its responsive dimensions. */
.mpd-study .walkthrough > .step { min-height:570px; padding:0; gap:72px; }
.mpd-study .step .copy { padding:25px 0; }

@media(max-width:980px) {
  .case-main .case-hero, .mpd-study .hero { grid-template-columns:1fr; gap:45px; min-height:0; }
  .mpd-study .walkthrough > .step { grid-template-columns:1fr; min-height:0; gap:30px; }
  .mpd-study .step.reverse .copy { order:0; }
}
@media(max-width:640px) {
  :root { --type-hero:clamp(3.2rem,17vw,5rem); --type-label:.88rem; --type-caption:.88rem; }
  .case-main .case-hero, .mpd-study .hero { padding:65px 0 48px; gap:44px; }
  .paper-step-copy > p, .mpd-study .step .copy > p:not(.eyebrow) { font-size:1rem; }
  .page-paper .case-facts, .mpd-study .facts { grid-template-columns:1fr; }
  .case-facts > div, .mpd-study .facts > div { padding:16px 12px; }
  .case-facts > div + div, .mpd-study .facts > div + div { border-top:1px solid var(--line); }
  .case-facts strong, .mpd-study .facts dd { font-size:14px; }
  .image-lightbox, .mpd-study .lightbox { width:calc(100vw - 20px); height:calc(100dvh - 20px); padding:58px 18px 76px; }
  .image-lightbox figcaption, .mpd-study .lightbox figcaption { font-size:.84rem; padding-inline:0; }
  .mpd-study .lightbox :is(.previous,.next) { top:auto; bottom:12px; translate:none; }
}
@media(prefers-reduced-motion:reduce) { .paper-expand-hint, .mpd-study .hint { transition:none; } }


/* One label-to-heading gap throughout both case studies, including numbered cards. */
.concept-a :is(main.case-main, main.mpd-study) :is(.eyebrow, .paper-step-copy > span, .paper-decision-grid article > span, .decision-grid article > span, .future-grid article > span):has(+ :is(h1,h2,h3)) {
  display:block;
  margin:0 0 15px;
}
.concept-a :is(main.case-main, main.mpd-study) :is(.eyebrow, .paper-step-copy > span, .paper-decision-grid article > span, .decision-grid article > span, .future-grid article > span) + :is(h1,h2,h3) {
  margin-top:0;
}
.concept-a main.mpd-study .step .copy > .eyebrow { margin:0 0 15px; }

.mpd-study .hero-image { overflow:hidden; border:1px solid #b6bac2; border-radius:11px; background:#fff; box-shadow:0 32px 70px rgba(20,32,54,.18); }
.mpd-study .hero-image img { display:block; width:100%; height:auto; }

/* Homepage section labels have no decorative trailing rule. */
.page-home .eyebrow::after { content:none; display:none; }