/* Short project stories: shared portfolio type, colour and spacing. */
#mr-root .mr-project-backdrop { padding:24px; }
#mr-root .mr-project-dialog {
  --project-bg:#0e1410; --project-text:#eae6dc; --project-body:var(--mr-body-color, #eae6dc);
  --project-accent:var(--mr-section-accent,#cf8797);
  box-sizing:border-box; width:min(1200px,calc(100vw - 48px));
  max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px);
  background:var(--project-bg); border:0; border-radius:16px;
  font-family:Urbanist,-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  color:var(--project-body); text-align:left;
}
#mr-root .mr-project-dialog * { box-sizing:border-box; }
#mr-root .mr-project-scroll { flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
#mr-root .mr-project-close,#mr-root .mr-project-enlarge {
  display:grid; place-items:center; width:44px; height:44px; padding:0;
  border:0; border-radius:50%; background:rgba(14,20,16,.8); color:var(--project-text);
  font:inherit; cursor:pointer; backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  transition:background .2s ease;
}
#mr-root .mr-project-close { position:absolute; top:16px; right:16px; z-index:6; font-size:24px; }
#mr-root .mr-project-enlarge svg { width:18px; height:18px; }
#mr-root .mr-project-close:hover,#mr-root .mr-project-enlarge:hover { background:#232e26; }
#mr-root .mr-project-dialog button:focus-visible { outline:2px solid #e18b9b; outline-offset:4px; }
#mr-root .mr-project-cover { position:relative; height:clamp(360px,36vw,480px); background:var(--project-bg); }
#mr-root .mr-project-cover > img {
  display:block; width:100%; height:100%; object-fit:cover; object-position:center top;
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 24%,rgba(0,0,0,.88) 40%,rgba(0,0,0,.54) 60%,rgba(0,0,0,.15) 82%,transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0%,#000 24%,rgba(0,0,0,.88) 40%,rgba(0,0,0,.54) 60%,rgba(0,0,0,.15) 82%,transparent 100%);
}
#mr-root .mr-project-cover .mr-project-enlarge { position:absolute; top:16px; left:16px; }
#mr-root .mr-project-intro { position:relative; margin-top:-144px; padding:0 40px; text-align:center; }
#mr-root #mr-modal-title { margin:0 0 20px; color:var(--project-text); font-size:clamp(40px,3.5vw,52px); font-weight:700; line-height:1.05; letter-spacing:-2px; text-wrap:balance; }
#mr-root .mr-project-intro p { max-width:44ch; margin:0 auto; color:var(--project-body); font-size:17px; font-weight:400; line-height:1.55; text-wrap:pretty; }
#mr-root .mr-project-body { width:100%; max-width:1000px; margin:0 auto; padding:0 48px 80px; }
#mr-root .mr-project-facts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin:40px 0 0; }
#mr-root .mr-project-fact { display:flex; flex-direction:column; justify-content:space-between; gap:18px; min-height:116px; padding:20px; border:0; border-radius:12px; background:rgba(35,46,38,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); box-shadow:0 4px 30px rgba(0,0,0,.1); }
#mr-root .mr-project-fact strong { color:var(--project-text); font-size:24px; line-height:1.15; letter-spacing:-.5px; font-weight:700; }
#mr-root .mr-project-fact > span { color:#b1b8ab; font-size:13px; line-height:1.35; font-weight:500; }
#mr-root .mr-project-chapter { margin-top:80px; }
#mr-root .mr-project-story-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:48px; margin-top:80px; align-items:start; }
#mr-root .mr-project-story-grid > .mr-project-chapter { min-width:0; margin-top:0; }
#mr-root .mr-project-eyebrow { display:block; margin:0 0 12px; color:var(--project-accent); font-size:12px; font-weight:600; line-height:1.5; letter-spacing:1.8px; text-transform:uppercase; }
#mr-root .mr-project-chapter h3 { margin:0 0 24px; color:var(--project-text); font-size:40px; font-weight:700; line-height:1.12; letter-spacing:-1.2px; text-wrap:balance; }
#mr-root .mr-project-chapter p { max-width:65ch; margin:0; color:var(--project-body); font-size:16px; font-weight:400; line-height:1.65; text-wrap:pretty; }
#mr-root .mr-project-gallery { margin-top:36px; }
#mr-root .mr-project-screen { position:relative; overflow:hidden; border-radius:12px; background:var(--mr-card-surface,#171d18); }
#mr-root .mr-project-screen > img { display:block; width:100%; height:auto; }
#mr-root .mr-project-screen .mr-project-enlarge { position:absolute; bottom:12px; right:12px; }
#mr-root .mr-project-thumbs { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px; }
#mr-root .mr-project-result { background:none; border:0; padding:0; }
#mr-root .mr-project-image-dialog { border:0; padding:16px; width:min(1400px,calc(100vw - 32px)); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); background:var(--project-bg); color:var(--project-text); border-radius:12px; overscroll-behavior:contain; }
#mr-root .mr-project-image-dialog::backdrop { background:rgba(5,9,6,.92); }
#mr-root .mr-project-image-head { display:flex; justify-content:space-between; align-items:center; gap:24px; position:sticky; top:-16px; padding:8px 0; background:var(--project-bg); z-index:1; }
#mr-root .mr-project-image-head span { font-size:15px; font-weight:500; }
#mr-root .mr-project-image-head button { position:static; flex-shrink:0; }
#mr-root .mr-project-image-dialog img { display:block; width:100%; height:auto; margin-top:12px; }
@media(max-width:1023px) and (min-width:769px) {
  #mr-root .mr-project-body { padding-inline:32px; }
  #mr-root .mr-project-fact { padding:16px; }
  #mr-root .mr-project-fact strong { font-size:21px; }
}
@media(max-width:768px) {
  #mr-root .mr-project-backdrop { padding:0; }
  #mr-root .mr-project-dialog { width:100%; height:100vh; height:100dvh; max-height:100vh; max-height:100dvh; border-radius:0; }
  #mr-root .mr-project-cover { height:340px; }
  #mr-root .mr-project-intro { margin-top:-112px; padding:0 24px; }
  #mr-root #mr-modal-title { font-size:38px; line-height:1.07; letter-spacing:-1.5px; margin-bottom:18px; }
  #mr-root .mr-project-intro p { font-size:16px; line-height:1.55; }
  #mr-root .mr-project-body { padding:0 24px calc(64px + env(safe-area-inset-bottom)); }
  #mr-root .mr-project-facts { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:32px; }
  #mr-root .mr-project-fact { min-height:108px; padding:16px; border-radius:10px; }
  #mr-root .mr-project-fact strong { font-size:22px; }
  #mr-root .mr-project-fact > span { font-size:12px; }
  #mr-root .mr-project-chapter { margin-top:64px; }
  #mr-root .mr-project-story-grid { grid-template-columns:minmax(0,1fr); gap:64px; margin-top:64px; }
  #mr-root .mr-project-chapter h3 { font-size:38px; line-height:1.12; letter-spacing:-1px; margin-bottom:22px; }
  #mr-root .mr-project-chapter p { font-size:17px; line-height:1.55; }
  #mr-root .mr-project-eyebrow { letter-spacing:1.5px; }
  #mr-root .mr-project-gallery { margin-top:28px; }
  #mr-root .mr-project-close { top:calc(12px + env(safe-area-inset-top)); right:12px; }
  #mr-root .mr-project-cover .mr-project-enlarge { top:calc(12px + env(safe-area-inset-top)); left:12px; }
  #mr-root .mr-project-image-dialog { width:100%; max-width:100%; max-height:100dvh; padding:12px; border-radius:0; }
}
@media(max-width:380px) {
  #mr-root .mr-project-body { padding-inline:20px; }
  #mr-root #mr-modal-title { font-size:34px; }
  #mr-root .mr-project-chapter h3 { font-size:32px; }
  #mr-root .mr-project-fact { padding:14px; }
  #mr-root .mr-project-fact strong { font-size:20px; }
}
@media(prefers-reduced-motion:reduce) {
  #mr-root .mr-project-dialog,#mr-root .mr-project-backdrop { transition:none!important; }
}