/* Aroub Soubh — her seven dots ARE the menu (client, 2026-09-21; rebuilt after the full design committee rejected the first build).
   Rules from her and from the committee: every dot is a CRISP FLAT CIRCLE (like the small background dots): no filter, no gradient, no shadow, no thread between them;
   ONE type system (the page's own Fraunces with its SOFT/WONK axes; El Messiri and Readex Pro for Arabic); white paper; colour lives only in dots, the full stop, badges and underlines.
   The entrance engine flies each .dwrap out of her pupil (data-fly); the physics only moves the inner .dot6, so the two never fight. */
.inside{display:block;padding:0;position:relative}
.dotfield{position:absolute;inset:calc(var(--hb) + 6px) 0 128px 0}
.dwrap{position:absolute;left:var(--dx);top:var(--dy);width:var(--dd);height:var(--dd);margin:calc(var(--dd) / -2) 0 0 calc(var(--dd) / -2);z-index:2}
.dot6{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:12%;border-radius:50%;background:var(--c);color:var(--tc,#fff);text-decoration:none;will-change:transform;touch-action:pan-y;-webkit-user-select:none;user-select:none;
  animation:drift var(--dur,9s) cubic-bezier(.37,0,.63,1) var(--dl,0s) infinite alternate}
.dwrap:nth-child(1){--dur:7s;--dl:-1s}.dwrap:nth-child(2){--dur:8.2s;--dl:-3s}.dwrap:nth-child(3){--dur:9.4s;--dl:-5s}.dwrap:nth-child(4){--dur:10.6s;--dl:-2s}.dwrap:nth-child(5){--dur:11.8s;--dl:-6s}.dwrap:nth-child(6){--dur:8.8s;--dl:-4s}.dwrap:nth-child(7){--dur:10s;--dl:-7s}
@keyframes drift{from{translate:0 -8px}to{translate:0 8px}}
.dot6 b{display:block;font-family:var(--display);font-weight:560;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;font-size:clamp(21px,1.7vw,25px);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}
html[dir=rtl] .dot6 b{font-family:var(--ar-display);font-weight:600;font-variation-settings:normal;letter-spacing:0;font-size:clamp(25px,2.2vw,30px);line-height:1.25}
.dot6:focus-visible{outline:3px solid var(--ink);outline-offset:4px;box-shadow:0 0 0 2px #fff}
.dhint{position:absolute;left:0;right:0;bottom:16px;margin:0;text-align:center;font:500 18px var(--text);color:var(--muted);z-index:3;pointer-events:none;opacity:var(--words,1);transition:opacity .4s}
html[dir=rtl] .dhint{font-family:var(--ar-text);font-size:18px}
.dhint.gone{opacity:0}
/* her accounts, drawn as dots on a 7x7 lattice (X, Instagram twice, Facebook, YouTube) */
.socials{position:absolute;inset-inline-start:clamp(20px,3.4vw,48px);bottom:6px;display:flex;gap:clamp(14px,2vw,28px);z-index:3;opacity:var(--words,1);transition:opacity .4s}
.socials a{display:grid;justify-items:center;gap:2px;min-width:56px;color:var(--ink);text-decoration:none}
.socials svg{width:44px;height:44px;fill:currentColor;transition:color .18s,transform .3s cubic-bezier(.16,1,.3,1)}
.socials span{font:500 16px/1.2 var(--text);letter-spacing:0;max-width:11ch;text-align:center}
.socials a:hover svg,.socials a:focus-visible svg{color:var(--h);transform:scale(1.12)}
.socials a:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:8px}
@media (max-width:900px),(max-aspect-ratio:5/4){
  .dwrap{left:var(--px);top:var(--py);width:var(--pd);height:var(--pd);margin:calc(var(--pd) / -2) 0 0 calc(var(--pd) / -2)}
  .dotfield{inset:calc(var(--hb) + 2px) 0 96px 0}
  .dot6 b{font-size:19px}html[dir=rtl] .dot6 b{font-size:24px}
  .dhint{bottom:82px;font-size:17px}
  .socials{inset-inline:0;justify-content:center;bottom:4px;gap:6px}
  .socials a{min-width:60px}.socials span{font-size:16px;max-width:9ch}
}

/* ---- header on chapter pages: seven small dots instead of seven names ---- */
.dotrow{display:inline-flex;align-items:center;gap:6px;margin-inline-end:auto}
.dotrow a{position:relative;display:block;width:14px;height:14px;border-radius:50%;background:var(--c);margin:0 6px}
.dotrow a::after{content:"";position:absolute;inset:-15px}
.dotrow a[aria-current]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.dotrow a:hover{transform:scale(1.35)}
.dotrow a{transition:transform .25s cubic-bezier(.16,1,.3,1)}
@media (max-width:1100px){.dotrow{display:none}}

/* ---- an opened dot: white paper, ink title, and the dot you touched becomes its full stop ---- */
.pbloom{position:fixed;inset:0;z-index:60;pointer-events:none}
.pbloom .paper{position:absolute;inset:0;background:#fff;clip-path:circle(0 at 50% 50%)}
.pbloom .dx{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.pbloom .dy{position:absolute;left:0;top:0;width:0;height:0;will-change:transform}
.pbloom .dd{position:absolute;border-radius:50%;background:var(--c);will-change:transform}
.popen{position:fixed;inset:0;z-index:65;display:none;overflow:auto;overscroll-behavior:contain;color:var(--ink);scrollbar-color:var(--muted) var(--rule)}
.popen.on{display:block}
.pbar{position:sticky;top:0;z-index:3;height:var(--hb);display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 clamp(20px,4vw,56px);background:#fff;border-bottom:1px solid var(--rule)}
.pbar .pmark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-height:44px}
.pbar .pmark .eye{width:32px;height:32px;border-radius:50%;flex:none;overflow:hidden;background:#fff}
.pbar .pmark .eye img{width:100%;height:100%;object-fit:cover;clip-path:circle(48.6%)}
.pbar .pmark .nm{display:flex;align-items:center;gap:8px;min-width:0}
.pbar .pmark .wm{font-family:var(--text);font-weight:600;font-size:15px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap}
.pbar .pmark .sg{height:30px;width:auto;flex:none}
html[dir=rtl] .pbar .pmark .sg{height:22px}
.pnav{display:flex;align-items:center;gap:4px}
.pnav button{position:relative;width:14px;height:14px;border-radius:50%;border:0;padding:0;background:var(--c);margin:0 15px;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
.pnav button::after{content:"";position:absolute;inset:-15px}
.pnav button[aria-current]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.pclose{font:600 17px var(--text);min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--ink);background:#fff;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:10px}
html[dir=rtl] .pclose{font-family:var(--ar-text);font-size:18px}
.pclose::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--c);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.pclose:hover::before{transform:scale(1.7)}
.popen .panel{display:grid !important;grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:clamp(40px,7vw,120px);align-content:start;max-width:1500px;margin:0 auto;padding:clamp(40px,10vh,110px) clamp(24px,6vw,110px) 80px}
.popen .pl h2{font-family:var(--display);font-weight:560;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;font-size:clamp(56px,7.4vw,124px);line-height:.98;letter-spacing:-.02em;text-wrap:balance;color:var(--ink);margin:0}
html[dir=rtl] .popen .pl h2{font-family:var(--ar-display);font-weight:600;font-variation-settings:normal;font-size:clamp(64px,8vw,132px);line-height:1.2;letter-spacing:0}
.popen .pl h2 em{font-style:italic;font-weight:540;color:inherit}
html[dir=rtl] .popen .pl h2 em{font-style:normal}
.stop{display:inline-block;width:.18em;height:.18em;margin-inline-start:.06em;border-radius:50%;background:var(--c);vertical-align:baseline}
html[dir=rtl] .stop{width:.2em;height:.2em;margin-inline-start:.1em}
.popen .pp{font:400 22px/1.5 var(--text);max-width:20em;margin:clamp(20px,3vh,34px) 0 0;color:var(--muted)}
html[dir=rtl] .popen .pp{font-family:var(--ar-text);line-height:1.85}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}.w>span{display:inline-block}
.popen .pr{padding-top:clamp(8px,2vh,24px);min-width:0}
.popen .pr h3{font:600 17px var(--text);margin:44px 0 12px;letter-spacing:.02em;color:var(--muted)}
.popen .pr h3:first-child{margin-top:0}
html[dir=rtl] .popen .pr h3{font-family:var(--ar-text);font-size:18px;letter-spacing:0}
.led{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink);position:relative}
.led::before{content:"";position:absolute;top:0;bottom:0;inset-inline-start:3px;width:0;border-inline-start:2px dotted var(--rule);z-index:0}
html[dir=rtl] .led::before{inset-inline-start:auto;inset-inline-end:3px}
.led li{display:flex;align-items:baseline;gap:14px;padding:15px 0;border-bottom:1px solid var(--rule);font:400 19px/1.45 var(--text);position:relative}
.led .lb{width:8px;height:8px;border-radius:50%;flex:none;background:var(--lc);margin-inline-end:8px;position:relative;z-index:1;box-shadow:0 0 0 4px #fff}
html[dir=rtl] .led .lb{margin-inline-end:0;margin-inline-start:8px}
html[dir=rtl] .led li{font-family:var(--ar-text);line-height:1.7}
.led b{min-width:58px;flex:none;font-family:var(--display);font-weight:560;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;font-size:22px;line-height:1.2}
html[dir=rtl] .led b{font-family:var(--ar-display);font-weight:600;font-variation-settings:normal}
/* the interview: a dot is the play button */
.vid{position:relative;aspect-ratio:16/9;background:var(--ink);overflow:hidden}
.vid img,.vid iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.play{position:absolute;left:50%;top:50%;width:88px;height:88px;margin:-44px 0 0 -44px;border-radius:50%;border:0;background:var(--c);cursor:pointer;display:grid;place-items:center;transition:transform .4s cubic-bezier(.16,1,.3,1)}
.play i{width:0;height:0;border-style:solid;border-width:13px 0 13px 22px;border-color:transparent transparent transparent #fff;margin-inline-start:6px}
.play:hover,.play:focus-visible{transform:scale(1.12)}
.play:focus-visible{outline:3px solid #fff;outline-offset:4px}
.vcap{font:500 17px/1.5 var(--text);color:var(--muted);margin:12px 0 0}
html[dir=rtl] .vcap{font-family:var(--ar-text)}
/* awards: one drawn badge each */
.awards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 28px}
.award{margin:0;display:grid;justify-items:start;gap:10px}
.award svg{width:min(160px,100%);height:auto}
.award figcaption{display:grid;gap:2px}
.award b{font-family:var(--display);font-weight:560;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;font-size:28px;line-height:1}
html[dir=rtl] .award b{font-family:var(--ar-display);font-weight:600;font-variation-settings:normal}
.award .an{font:600 17px/1.3 var(--text)}.award .aw{font:400 16px/1.4 var(--text);color:var(--muted)}
html[dir=rtl] .award .an,html[dir=rtl] .award .aw{font-family:var(--ar-text)}
/* round photographs: her dots, carrying her work */
.pdots{display:flex;flex-wrap:wrap;gap:clamp(28px,4vh,48px) clamp(24px,3vw,44px);align-items:flex-start}
.pdot{display:grid;justify-items:start;gap:8px;width:clamp(150px,15vw,220px);color:var(--ink);text-decoration:none}
.pdot:nth-child(2){margin-top:clamp(18px,4vh,44px)}.pdot:nth-child(4){margin-top:clamp(10px,2vh,28px)}
.pdot .pd{display:block;width:100%;aspect-ratio:1;border-radius:50%;overflow:hidden;background:var(--rule);outline:1.5px solid var(--rule);outline-offset:-1.5px;box-shadow:0 8px 24px -12px rgba(0,0,0,.25);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.pdot .pd img{width:100%;height:100%;object-fit:cover}
.pdot .pd.flat{background:var(--c)}
.pdot b{font-family:var(--display);font-weight:560;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;font-size:24px;line-height:1.1;letter-spacing:-.01em}
html[dir=rtl] .pdot b{font-family:var(--ar-display);font-weight:600;font-variation-settings:normal;letter-spacing:0;font-size:26px}
.pdesc{font:400 17px/1.4 var(--text);color:var(--muted)}
html[dir=rtl] .pdesc{font-family:var(--ar-text)}
a.pdot:hover .pd,a.pdot:focus-visible .pd{transform:scale(1.06)}
a.pdot:focus-visible{outline:3px solid var(--ink);outline-offset:6px;border-radius:12px}
.pdots.two .pdot{width:clamp(170px,17vw,250px)}
/* the business panels */
.biz{display:grid;gap:28px}
.bz{position:relative;display:grid;gap:8px;padding:30px 0 22px;border-top:1.5px solid var(--ink);color:var(--ink);text-decoration:none;justify-items:start}
.bz .bd{width:64px;height:64px;border-radius:50%;background:var(--sun)}.bz.b2 .bd{background:var(--pink)}.bz.b3 .bd{background:var(--coral,#FD5C53)}
.bz b{font-family:var(--display);font-weight:560;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72;font-size:clamp(30px,3vw,42px);line-height:1.05;letter-spacing:-.015em;margin-top:8px}
html[dir=rtl] .bz b{font-family:var(--ar-display);font-weight:600;font-variation-settings:normal;letter-spacing:0}
.bz>span{font:400 19px/1.5 var(--text);color:var(--muted);max-width:26em}
html[dir=rtl] .bz>span{font-family:var(--ar-text);line-height:1.8}
.bz .bi{display:inline-flex;align-items:center;gap:8px;margin-top:6px;color:var(--ink);font:600 17px var(--text)}
.bz .bi svg{width:34px;height:34px;fill:currentColor}
a.bz:hover .bd{transform:scale(1.12)}.bz .bd{transition:transform .4s cubic-bezier(.16,1,.3,1)}
.dl{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px;width:min(320px,100%)}
.dl li{height:16px;border-bottom:2px dotted var(--ink)}
/* The Pen: her articles, readable in place */
.tapnote{font:500 17px/1.4 var(--text);color:var(--muted);margin:0 0 14px}
html[dir=rtl] .tapnote{font-family:var(--ar-text)}
.arts{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.art{border-bottom:1px solid var(--rule)}
.ah{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 22px;width:100%;text-align:start;padding:20px 0;background:none;border:0;cursor:pointer;color:var(--ink);align-items:baseline}
.ad{grid-row:1/3;font:600 16px/1.4 var(--text);color:var(--muted);min-width:96px;position:relative;padding-inline-start:20px}
.ad::before{content:"";position:absolute;inset-inline-start:0;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--c);transition:transform .3s cubic-bezier(.16,1,.3,1)}
.ah:hover .ad::before{transform:scale(1.6)}
.at{font-family:var(--ar-display);font-weight:600;font-size:clamp(26px,2.3vw,32px);line-height:1.35;margin:0}
.ax{font:400 18px/1.75 var(--ar-text);color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ab{display:grid;grid-template-rows:0fr;transition:grid-template-rows .56s cubic-bezier(.16,1,.3,1)}
.ab>.abi{overflow:hidden;min-height:0}
.art.open .ab{grid-template-rows:1fr}
.art.open .ax{display:none}
.abi{max-width:36em;margin-inline:auto}
.abi p{font:400 20px/2 var(--ar-text);color:var(--ink);margin:0 0 1.1em}
.abi p:first-child{font-size:22px}
.asrc{display:inline-block;margin:6px 0 34px;font:600 17px var(--text);color:var(--ink);text-underline-offset:5px;text-decoration-color:var(--c);text-decoration-thickness:2px}
.art.inert{display:flex;gap:22px;padding:20px 0;color:var(--muted);font:500 17px/1.5 var(--text)}
html[dir=rtl] .art.inert{font-family:var(--ar-text)}
.at2{font-weight:500}
.pnext{display:flex;align-items:center;justify-content:space-between;gap:20px;max-width:1500px;margin:0 auto;padding:36px clamp(24px,6vw,110px) 120px;border-top:1px solid var(--rule)}
.pnext button{font:560 clamp(32px,4vw,56px)/1 var(--display);font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;letter-spacing:-.02em;background:none;border:0;color:var(--ink);cursor:pointer;display:inline-flex;align-items:center;gap:18px;padding:12px 0}
html[dir=rtl] .pnext button{font-family:var(--ar-display);font-weight:600;font-variation-settings:normal;letter-spacing:0}
.pnext button i{width:.28em;height:.28em;border-radius:50%;background:var(--c);transition:transform .4s cubic-bezier(.16,1,.3,1)}
.pnext button:hover i{transform:scale(1.5)}
.pnext small{font:500 17px var(--text);color:var(--muted)}
@media (max-width:800px){
  .popen .panel{grid-template-columns:1fr;row-gap:36px;padding:34px 22px 56px}
  .popen .pl h2{font-size:clamp(56px,16vw,76px)}html[dir=rtl] .popen .pl h2{font-size:clamp(60px,17vw,84px)}
  .popen .pp{font-size:20px}
  .awards{gap:28px 16px}.award svg{width:min(128px,100%)}
  .pdot{width:calc(50% - 14px)}.pdots.two .pdot{width:calc(50% - 14px)}
  .pdots{gap:28px}
  .ah{grid-template-columns:1fr}.ad{grid-row:auto}
  .abi p{font-size:20px}.abi p:first-child{font-size:21px}
  .pbar .pmark .wm{font-size:13px;letter-spacing:.1em}.pbar .pmark .eye{width:26px;height:26px}.pbar .pmark .sg{height:22px}
  .pnext{padding:28px 22px 96px}
}
html.pfreeze,html.pfreeze body{overflow:hidden}
@media (prefers-reduced-motion:reduce){.dot6{animation:none}.ab{transition:none}}
/* no JavaScript: each panel opens by its own link */
.panels .panel{display:none}
.panels .panel:target{display:grid;position:fixed;inset:0;z-index:65;overflow:auto;background:#fff;color:var(--ink);grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:4vw;align-content:start;padding:calc(var(--hb) + 4vh) 5vw 80px}
html.js .panels .panel:target{display:none}

.popen h2:focus,.popen h2:focus-visible{outline:none}
.hdr .nav{margin-inline-start:auto}
.awards{align-items:start}.award svg{display:block}

.popen .pl h2 em{padding-inline-end:.12em}
.popen .panel[data-id=entrepreneur] .pl h2{font-size:clamp(48px,5.2vw,96px)}
.socials svg{width:40px;height:40px}
@media (max-width:900px),(max-aspect-ratio:5/4){.socials span{display:none}.socials a{min-width:52px;min-height:52px}.socials{gap:14px}}
@media (max-width:800px){.pnav{display:none}.popen .pl h2 em{padding-inline-end:.1em}}

.art:not(.open) .ab{visibility:hidden;transition:visibility 0s .56s}
.socials span{max-width:none;white-space:nowrap}
.dotrow a{box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
.pnav button[aria-current]{box-shadow:0 0 0 3px #fff,0 0 0 5px var(--ink)}
.pdot{gap:4px}
.popen .pl h2{padding-right:.05em}
@media (max-width:900px),(max-aspect-ratio:5/4){html[dir=rtl] .hdr .mark .wm{font-family:var(--text);font-size:16px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}.hdr{gap:12px}.hdr .langs,.hdr .menu,.hdr [data-mopen]{flex-shrink:0}}
/* committee round 2 */
.socials{inset-inline-start:auto;left:clamp(20px,3.4vw,48px);right:auto;direction:ltr;z-index:6}
.w{padding-inline:.12em;margin-inline:-.12em}
@media (max-width:900px),(max-aspect-ratio:5/4){
  .dotfield{inset:calc(var(--hb) + 2px) 0 150px 0}
  .dwrap{width:calc(var(--pd) * .9);height:calc(var(--pd) * .9);margin:calc(var(--pd) * -.45) 0 0 calc(var(--pd) * -.45)}
  .socials{left:0;right:0;flex-wrap:wrap;justify-content:center;gap:2px 10px;bottom:-146px}
  .socials span{display:block;font-size:16px;line-height:1.1;text-align:center}
  .socials a{min-width:0;flex:0 0 30%}
  .dhint{bottom:auto;top:calc(100% - 18px)}
  .dhint{display:none}
}
@media (max-width:900px),(max-aspect-ratio:5/4){.socials a{background:#fff;border-radius:12px}}
.apics{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:8px}
.apic{margin:0;background:#fff;outline:1px solid var(--rule);outline-offset:-1px}
.apic img{display:block;width:100%;height:auto}
.apic figcaption{padding:14px 16px;font:500 16px var(--text);color:var(--muted)}
html[dir=rtl] .apic figcaption{font-family:var(--ar-text)}
@media (max-width:700px){.apics{grid-template-columns:1fr}}

/* a dotted frame traces two corners of a featured photo/video — her own dotting technique made structural */
.vid,.apic{position:relative;isolation:isolate}
.vid::after,.apic::after{content:"";position:absolute;top:10px;inset-inline-start:10px;width:34px;height:34px;background-image:radial-gradient(circle,var(--c) 1.8px,transparent 1.9px);background-size:9px 9px;-webkit-mask:linear-gradient(135deg,#000 42%,transparent 43%);mask:linear-gradient(135deg,#000 42%,transparent 43%);pointer-events:none;z-index:1;filter:drop-shadow(0 0 0 #fff)}
.vid::before,.apic::before{content:"";position:absolute;bottom:10px;inset-inline-end:10px;width:34px;height:34px;background-image:radial-gradient(circle,var(--c) 1.8px,transparent 1.9px);background-size:9px 9px;-webkit-mask:linear-gradient(-45deg,#000 42%,transparent 43%);mask:linear-gradient(-45deg,#000 42%,transparent 43%);pointer-events:none;z-index:1}
.apic img{position:relative;z-index:0}
/* the same dotting field, now inside an opened screen — a handful of her colours sit in the wide margins, never under the reading column */
.popen{
  background-color:#fff;
  background-image:
    radial-gradient(circle 6px, #E9314F 98%, transparent 100%),
    radial-gradient(circle 4px, #FEDF52 98%, transparent 100%),
    radial-gradient(circle 5px, #0B4EAA 98%, transparent 100%),
    radial-gradient(circle 3px, #FA8EC1 98%, transparent 100%),
    radial-gradient(circle 6px, #147C73 98%, transparent 100%),
    radial-gradient(circle 4px, #FD5C53 98%, transparent 100%),
    radial-gradient(circle 3px, #00A3EF 98%, transparent 100%);
  background-repeat:no-repeat;
  background-position:
    3% 18%, 96% 12%, 2.5% 46%, 97% 58%, 4% 78%, 95.5% 86%, 3.5% 96%;
}
@media (max-width:1300px){.popen{background-image:none}}
/* Monte Carlo Doualiya masthead — loud and clear at the top of The Pen: the real platform logo, since every article is written under it */
.mcd{display:flex;align-items:center;gap:16px;text-decoration:none;color:var(--ink);padding:16px 20px;border:1.5px solid var(--ink);border-radius:14px;margin-bottom:clamp(24px,3vh,40px)}
.mcd .mcdlogo{width:52px;height:52px;flex:none;border-radius:12px;overflow:hidden}
.mcd .mcdlogo svg{width:100%;height:100%;display:block}
.mcd .mcdtext{display:flex;flex-direction:column;gap:2px;min-width:0}
.mcd .mcdtext b{font-family:var(--display);font-weight:560;font-size:22px;font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 72}
html[dir=rtl] .mcd .mcdtext b{font-family:var(--ar-display);font-weight:600;font-variation-settings:normal;font-size:24px}
.mcd .mcdtext span{font:400 16px var(--text);color:var(--muted)}
html[dir=rtl] .mcd .mcdtext span{font-family:var(--ar-text)}
.mcd .mcdgo{width:22px;height:22px;flex:none;margin-inline-start:auto;border-inline-end:2.5px solid var(--ink);border-top:2.5px solid var(--ink);transform:rotate(45deg);transition:transform .3s cubic-bezier(.16,1,.3,1)}
html[dir=rtl] .mcd .mcdgo{transform:rotate(-135deg)}
.mcd:hover .mcdgo{transform:rotate(45deg) translate(3px,-3px)}
html[dir=rtl] .mcd:hover .mcdgo{transform:rotate(-135deg) translate(3px,3px)}