/* One illustrated story: inline without JavaScript, a native dialog with it. */
.prp { color:#153e31; background:#fbfcf8; font:16px/1.65 Arial,Helvetica,sans-serif; text-align:start; }
.prp-fallback { width:min(1120px,calc(100% - 48px)); margin:0 auto 64px; border:1px solid #d3ded0; border-radius:24px; overflow:hidden; scroll-margin-top:24px; }
.prp-fallback[hidden],.prp [hidden] { display:none!important; }
dialog.prp { width:min(1120px,calc(100% - 48px)); max-width:none; max-height:calc(100vh - 48px); max-height:calc(100dvh - 48px); margin:auto; padding:0; border:1px solid #d3ded0; border-radius:28px; box-shadow:0 28px 100px #0b271d40; overflow:hidden; }
dialog.prp:not([open]) { display:none; }
.prp::backdrop { background:rgb(10 29 22 / 64%); backdrop-filter:blur(5px); }
html.prp-open { overflow:hidden; }
.prp .prp-shell { display:flex; flex-direction:column; max-height:inherit; }
.prp .prp-header { display:flex; align-items:center; justify-content:space-between; flex-shrink:0; gap:24px; padding:26px 32px 22px; border-bottom:1px solid #dce5dc; }
.prp .prp-eyebrow,.prp .prp-kicker { margin:0 0 8px; color:#52665b; font-size:12px; font-weight:700; }
.prp h2 { color:#153e31; font-size:30px; line-height:1.25; font-weight:500; letter-spacing:-.035em; margin:0; }
.prp .prp-close { display:flex; align-items:center; justify-content:center; gap:10px; min-height:44px; flex-shrink:0; border:1px solid #dce5dc; border-radius:24px; padding:10px 14px; color:#153e31; background:#fff; font:600 13px/1.4 Arial,Helvetica,sans-serif; cursor:pointer; }
.prp-fallback .prp-close { display:none; }
.prp .prp-close svg { width:18px; height:18px; }
.prp .prp-close:hover { background:#edf4e9; border-color:#799473; }
.prp :focus-visible { outline:3px solid #638a4d; outline-offset:3px; }
.prp .prp-body { min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:28px 32px 32px; }
.prp .prp-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:32px; align-items:start; }
.prp .prp-map { margin:0; position:sticky; top:0; background:#edf4e9; border:1px solid #dce5dc; border-radius:20px; overflow:hidden; }
.prp .prp-map img { display:block; width:100%; height:auto; max-width:100%; }
.prp .prp-map figcaption { padding:16px 20px; font-size:13px; color:#52665b; }
.prp h3 { margin:0 0 12px; font-size:27px; line-height:1.25; font-weight:500; letter-spacing:-.035em; color:#153e31; }
.prp .prp-intro { margin:0 0 22px; font-size:14px; color:#52665b; }
.prp .prp-moments { list-style:none; padding:0; margin:0; display:grid; gap:12px; counter-reset:none; }
.prp .prp-moments li { display:grid; grid-template-columns:24px 76px minmax(0,1fr); gap:12px; align-items:center; padding:14px; border:1px solid #dce5dc; border-radius:18px; background:#fff; margin:0; }
.prp .prp-number { width:24px; height:24px; display:grid; place-items:center; border-radius:50%; color:#fff; background:#315d43; font-size:12px; font-weight:700; }
.prp .prp-moments img { width:76px; height:auto; border-radius:10px; background:#edf4e9; }
.prp .prp-moments p { margin:0; color:#52665b; font-size:12px; line-height:1.65; }
.prp .prp-moment-heading { display:flex; align-items:baseline; justify-content:space-between; gap:8px; flex-wrap:wrap; margin-bottom:4px!important; }
.prp .prp-moment-heading strong { font-size:14px; font-weight:600; color:#153e31; }
.prp .prp-moment-heading bdi { font-size:12px; font-variant-numeric:tabular-nums; }
.prp .prp-note { margin:24px 0 0; padding:16px 20px; border:1px solid #dce5dc; border-radius:16px; color:#52665b; background:#edf4e9; font-size:12px; }
html[lang^="ar"] .prp,html[lang^="ar"] .prp button { font-family:Tahoma,Arial,sans-serif; }
html[lang^="ar"] .prp :is(h2,h3) { letter-spacing:0; line-height:1.5; }
@media(max-width:767px) {
  dialog.prp { width:calc(100% - 20px); max-height:calc(100vh - 20px); max-height:calc(100dvh - 20px); border-radius:20px; }
  .prp-fallback { width:calc(100% - 24px); }
  .prp .prp-header { padding:18px 16px 16px; gap:12px; align-items:start; }
  .prp h2 { font-size:22px; }
  .prp .prp-eyebrow { font-size:10px; }
  .prp .prp-close { padding:9px 10px; gap:6px; font-size:12px; }
  .prp .prp-body { padding:20px 16px 24px; }
  .prp .prp-layout { grid-template-columns:minmax(0,1fr); gap:24px; }
  .prp .prp-map { position:static; border-radius:14px; }
  .prp .prp-map figcaption { padding:12px 14px; }
  .prp h3 { font-size:25px; }
  .prp .prp-moments li { grid-template-columns:22px 58px minmax(0,1fr); gap:8px; padding:12px 10px; }
  .prp .prp-number { width:22px; height:22px; }
  .prp .prp-moments img { width:58px; }
}
