/* ---------- make-case: one made-up brand, carried all the way (Miqyas) ---------- */
[data-part="make-case"] { overflow: clip; --mq-gravel: #E4E1D8; --mq-ink: #1D221F; --mq-silt: #7C5A35; --mq-line: #FF4D1A; }
[data-part="make-case"] .mc-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 96px); align-items: end; }
[data-part="make-case"] .mc-h { max-width: 11em; }
[data-part="make-case"] .mc-lede { color: var(--ink-2); max-width: 28em; }

/* the case, in one line: the lockup and the idea */
[data-part="make-case"] .mc-case { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px clamp(32px, 5vw, 96px); align-items: center; margin-top: clamp(56px, 6vw, 96px); padding: clamp(28px, 3.4vw, 52px); background: var(--mq-gravel); color: var(--mq-ink); }
[data-part="make-case"] .mc-lock { width: min(100%, 520px); height: auto; }
[data-part="make-case"] .mc-idea { font-size: clamp(18px, 1.45vw, 21px); line-height: 1.5; max-width: 26em; }
html[lang="ar"] [data-part="make-case"] .mc-idea { line-height: 1.8; }

/* the pair: the Reel in a phone, the site in a browser */
[data-part="make-case"] .mc-pair { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; margin-top: clamp(40px, 4vw, 64px); }
[data-part="make-case"] figure { margin: 0; min-width: 0; }
[data-part="make-case"] figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin-top: 16px; font-size: 16px; color: var(--ink-2); }
[data-part="make-case"] .mc-phone { position: relative; width: 100%; max-width: 300px; border-radius: 38px; background: var(--date); padding: 12px 10px; box-shadow: 0 0 0 1px rgba(42, 30, 23, .25); }
[data-part="make-case"] .mc-screen { position: relative; width: 100%; aspect-ratio: 9 / 16; border-radius: 28px; overflow: hidden; background: var(--mq-gravel); }
[data-part="make-case"] .mc-cv { position: absolute; inset: 0; width: 100%; height: 100%; }
[data-part="make-case"] .mc-notch { position: absolute; top: 20px; left: 50%; width: 64px; height: 18px; margin-left: -32px; border-radius: 12px; background: var(--date); }
[data-part="make-case"] .mc-ctl { display: flex; gap: 8px; flex-wrap: wrap; }
[data-part="make-case"] .mc-ctl[hidden] { display: none; }
[data-part="make-case"] .mc-b { min-height: 38px; padding: 2px 14px 0; border: 0; border-radius: 99px; background: rgba(42, 30, 23, .08); color: var(--ink); font-size: 14.5px; cursor: pointer; transition: background-color .2s; }
[data-part="make-case"] .mc-b:hover { background: rgba(42, 30, 23, .14); }
[data-part="make-case"] .mc-b[aria-pressed="true"].mc-scene { background: var(--date); color: var(--sand); }

[data-part="make-case"] .mc-browser { border-radius: 14px; overflow: hidden; background: var(--date); box-shadow: 0 0 0 1px rgba(42, 30, 23, .25); }
[data-part="make-case"] .mc-bar { height: 34px; display: flex; align-items: center; gap: 7px; padding: 0 14px; color: var(--sand); font-size: 13px; }
[data-part="make-case"] .mc-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(234, 220, 195, .22); }
[data-part="make-case"] .mc-url { margin-inline-start: 10px; padding: 3px 12px 2px; border-radius: 99px; background: rgba(234, 220, 195, .1); font-family: var(--f-en); direction: ltr; }
[data-part="make-case"] .mc-stage { position: relative; width: 100%; aspect-ratio: 1280 / 800; overflow: hidden; background: var(--mq-gravel); }
[data-part="make-case"] .mc-frame { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; transform-origin: 0 0; background: var(--mq-gravel); }
/* Touch screens (Ali, 6 Nov): the embedded site doesn't scroll, and a swipe over it would go nowhere, so touches pass
   through to the page. It's a still picture there; the water drag is for a mouse, and its caption goes with it. */
@media (hover: none) {
  [data-part="make-case"] .mc-frame { pointer-events: none; }
  [data-part="make-case"] .mc-drag { display: none; }
}
[data-part="make-case"] .mc-open { font-weight: 600; color: var(--ink); white-space: nowrap; }
[data-part="make-case"] .mc-open::after { content: ' ↗'; }

/* the move they share */
[data-part="make-case"] .mc-move { margin-top: clamp(48px, 5vw, 80px); font-size: clamp(22px, 2vw, 30px); line-height: 1.35; font-weight: 700; letter-spacing: -.015em; max-width: 26em; }
html[lang="ar"] [data-part="make-case"] .mc-move { letter-spacing: 0; }
html[lang="ar"] [data-part="make-case"] .mc-move { line-height: 1.8; }

@media (max-width: 900px) {
  [data-part="make-case"] .mc-head, [data-part="make-case"] .mc-case { grid-template-columns: 1fr; }
  [data-part="make-case"] .mc-pair { grid-template-columns: 1fr; justify-items: stretch; }
  [data-part="make-case"] .mc-motion { justify-self: center; width: min(78vw, 300px); }
  [data-part="make-case"] .mc-stage { aspect-ratio: 390 / 640; }
}