/* Law Right 011 — four genuinely different editorial scenes. */
:root{--lr-paper:#f4e6cd;--lr-ink:#261f25;--lr-coral:#ef6848;--lr-cyan:#28aebe;--lr-night:#07132f;--lr-night-ink:#edf3ff;--lr-plum:#35133f;--lr-gold:#e9b94e}
body[data-issue-id="011"]{background:linear-gradient(#f4f0e8,#faf8f3 32%,#edf2fb 67%,#f6edf5);overflow-x:hidden}
body:has(.hwr-mini-player){padding-bottom:130px}
.editorial[id^="article-"]{position:relative;isolation:isolate;border:0;box-shadow:0 28px 80px rgb(26 35 60/.12)}
.editorial[id^="article-"]>.source-block{position:relative;z-index:2;width:min(100%,72ch);margin-inline:auto}
.editorial[id^="article-"] h2,.editorial[id^="article-"] h3{text-wrap:balance}
.editorial[id^="article-"] p,.editorial[id^="article-"] li{max-width:72ch}
.editorial[id^="article-"] .source-list,.editorial[id^="article-"] .sources{font-size:.92rem;line-height:1.65}

/* Reset the inherited two-column editorial row gap; keep paragraph and media spacing. */
#article-1,#article-2,#article-3,#article-4{row-gap:0}

/* 01 — an intimate letter: parchment, breathing room, cut-outs outside the sheet. */
#article-1{display:grid;grid-template-columns:minmax(90px,.32fr) minmax(0,72ch) minmax(40px,.18fr);max-width:1080px;margin-block:clamp(4rem,10vw,9rem);padding:clamp(230px,25vw,300px) clamp(2rem,5vw,5rem) clamp(4rem,7vw,7rem);overflow:visible;background:linear-gradient(100deg,rgb(255 255 255/.35),transparent 19%),radial-gradient(circle at 78% 7%,#fff9eb 0 14%,transparent 36%),linear-gradient(145deg,var(--lr-paper),#e7ceb0);color:var(--lr-ink);border-radius:6px 34px 8px 28px;transform:rotate(-.25deg)}
#article-1>.source-block{grid-column:2;width:100%;transform:rotate(.25deg)}
#article-1:before,#article-1:after{content:"";position:absolute;z-index:3;top:26px;width:clamp(175px,23vw,260px);aspect-ratio:1;background-repeat:no-repeat;background-size:500% 300%;filter:none;pointer-events:none;animation:lr-listen 5.5s ease-in-out infinite}
#article-1:before,#article-1:after,#article-4>.article-persona,.article-inline-scene .inline-persona,.hwr-face{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 3%,#000 70%,rgba(0,0,0,.95) 77%,rgba(0,0,0,.6) 88%,rgba(0,0,0,.2) 95%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 3%,#000 70%,rgba(0,0,0,.95) 77%,rgba(0,0,0,.6) 88%,rgba(0,0,0,.2) 95%,transparent 100%)}
#article-1:before,#article-1:after,#article-4>.article-persona,.article-inline-scene .inline-persona,.hwr-face{background-color:transparent;border:0;box-shadow:none;filter:none}
#article-1:before{left:clamp(-76px,-5vw,-28px);background-image:url('/edition011-assets/halloween/anouk-expressions-inward-web-v2.webp');background-position:50% 50%}
#article-1:after{right:clamp(-76px,-5vw,-28px);background-image:url('/edition011-assets/halloween/milo-expressions-inward-web-v2.webp');background-position:0 50%;animation-delay:-2.6s}
#article-1>.source-block:first-child{text-align:center}
#article-1>.source-block:first-child h2{max-width:17ch;margin-inline:auto;font-size:clamp(2.45rem,5vw,4.9rem);line-height:1}
#article-1 h2:before{content:"IMAGES IA · PERSONNAGES FICTIFS";display:block;margin-bottom:1rem;color:#855744;font:700 .65rem/1.2 system-ui,sans-serif;letter-spacing:.14em}
html[lang="nl"] #article-1 h2:before{content:"AI-BEELDEN · FICTIEVE PERSONAGES"}
html[lang="en"] #article-1 h2:before{content:"AI IMAGES · FICTIONAL CHARACTERS"}
#article-1 h3{margin-top:2.5rem;padding:.2rem 0 .2rem 1.1rem;color:#3b2630;border:0;border-left:4px solid #a76d4c}
#article-1 a{color:#783a2c}

/* 02 — a working magazine: masthead, lead card and workshop ribbons. */
#article-2{display:grid;grid-template-columns:clamp(18px,5vw,70px) minmax(0,72ch) minmax(110px,.45fr);gap:0 clamp(1rem,3vw,3rem);max-width:1180px;margin-block:clamp(6rem,12vw,11rem);padding:clamp(3rem,7vw,6rem);overflow:hidden;background:linear-gradient(125deg,#fff 0 64%,#fff0e7 64%);color:#17253a;border-radius:48px 8px 48px 8px}
#article-2:before{content:"";position:absolute;z-index:0;inset:0 auto 0 0;width:13px;background:linear-gradient(var(--lr-coral) 0 46%,var(--lr-cyan) 46%)}
#article-2:after{content:"✦";position:absolute;z-index:0;right:3%;top:1%;color:var(--lr-coral);font-size:clamp(100px,14vw,190px);line-height:1;opacity:.14;transform:rotate(14deg)}
#article-2>.source-block{grid-column:2;width:100%;margin-inline:0}
#article-2>.source-block:first-child{grid-column:2/4}
#article-2>.source-block:first-child h2{max-width:14ch;margin:0;font-size:clamp(2.7rem,6.2vw,6rem);line-height:.9;letter-spacing:-.045em;color:#ed5438}
#article-2>.source-block:first-child h2:after{content:"";display:block;width:clamp(100px,19vw,220px);height:10px;margin-top:1.1rem;background:linear-gradient(90deg,var(--lr-coral),var(--lr-cyan));transform:skewX(-22deg)}
#article-2>.source-block[data-source-block="1"]{grid-column:2/4;justify-self:end;width:min(100%,48ch);margin:2rem 0 2.5rem;padding:1.3rem;background:#15294d;color:#fff;border-radius:3px 26px 3px 26px;box-shadow:14px 14px 0 rgb(40 174 190/.2)}
#article-2>.source-block[data-source-block="1"] p{color:#fff}
#article-2 h3{margin-top:2.5rem;padding:.72rem 1rem;color:#126f80;border:0;border-left:7px solid var(--lr-cyan);background:linear-gradient(90deg,rgb(40 174 190/.14),transparent 74%)}
#article-2 a{color:#ad3423}

/* 03 — immersive night: stable scientific column inside a field of light. */
#article-3{display:grid;grid-template-columns:minmax(30px,1fr) minmax(0,66ch) minmax(30px,1fr);max-width:1040px;margin-block:clamp(5rem,10vw,9rem);padding:clamp(6rem,11vw,9rem) clamp(2rem,5vw,5rem);overflow:hidden;background:radial-gradient(circle at 84% 14%,rgb(93 134 230/.38),transparent 22%),linear-gradient(155deg,var(--lr-night),#12285b 64%,#06102a);color:var(--lr-night-ink);box-shadow:0 38px 95px rgb(5 13 40/.36)}
#article-3:before{content:"";position:absolute;z-index:0;inset:0;background-image:linear-gradient(rgb(255 255 255/.045) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255/.045) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,#000,transparent 78%)}
#article-3:after{content:"DÉCOR GRAPHIQUE · PERCEPTION";position:absolute;right:28px;top:24px;color:#9bbcff;font:700 .64rem/1 system-ui,sans-serif;letter-spacing:.15em}
html[lang="nl"] #article-3:after{content:"GRAFISCH DECOR · PERCEPTIE"}
html[lang="en"] #article-3:after{content:"GRAPHIC SET · PERCEPTION"}
#article-3>.source-block{grid-column:2;width:100%}
#article-3>.source-block:first-child{grid-column:2/4;text-align:right}
#article-3>.source-block:first-child h2{max-width:15ch;margin-left:auto;font-size:clamp(2.55rem,5.2vw,5rem);line-height:1;color:#fff}
#article-3>.source-block[data-source-block="1"]{padding-left:1.4rem;border-left:1px solid #8fb4ff}
#article-3 h3{position:relative;margin-top:2.8rem;padding-left:1.6rem;color:#fff;border:0}
#article-3 h3:before{content:"";position:absolute;left:0;top:.72em;width:8px;height:8px;border-radius:50%;background:#8fb4ff;box-shadow:0 0 0 7px rgb(143 180 255/.12),0 0 22px #8fb4ff}
#article-3 p,#article-3 li{color:#e5edff}
#article-3 a{color:#ffd36d}

/* 04 — a theatre: central proscenium, curtains and a true two-film interval. */
#article-4{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 24px;max-width:1180px;margin-block:clamp(7rem,13vw,12rem);padding:clamp(5rem,9vw,8rem) clamp(2rem,8vw,7rem);overflow:hidden;background:radial-gradient(ellipse at 50% 0,rgb(156 64 154/.4),transparent 43%),linear-gradient(160deg,var(--lr-plum),#170e2b 72%);color:#f7eef8;border-radius:52px 52px 10px 10px;box-shadow:0 40px 100px rgb(37 11 48/.34)}
#article-4:before,#article-4:after{content:"";position:absolute;z-index:0;top:0;bottom:0;width:17%;border:1px solid rgb(233 185 78/.26);background:repeating-linear-gradient(96deg,rgb(233 185 78/.09) 0 12px,transparent 12px 27px)}
#article-4:before{left:0;border-radius:0 0 90% 0}
#article-4:after{right:0;transform:scaleX(-1);border-radius:0 0 90% 0}
#article-4>.source-block{grid-column:1/-1}
#article-4>.source-block[data-source-block="0"]{text-align:center}
#article-4>.source-block[data-source-block="0"] h2{max-width:18ch;margin-inline:auto;font-size:clamp(2.65rem,5.6vw,5.4rem);line-height:1;color:#fff6dc}
#article-4>.source-block[data-source-block="0"] h2:after{content:"";display:block;width:74px;height:2px;margin:1.5rem auto 0;background:var(--lr-gold);box-shadow:22px 7px 0 rgb(233 185 78/.42),-22px 7px 0 rgb(233 185 78/.42)}
#article-4 h3{margin-top:2.7rem;padding-bottom:.55rem;color:#fff6dc;border:0;border-bottom:1px solid rgb(233 185 78/.58)}
#article-4 p,#article-4 li{color:#f3e8f2}
#article-4 a{color:#ffd76f}
#article-4>.media{grid-column:auto;width:auto;margin:24px 0 32px;padding:18px;background:rgb(255 255 255/.075);border:1px solid rgb(233 185 78/.34);border-radius:22px;box-shadow:0 18px 40px rgb(0 0 0/.18)}
#article-4>.media .screen{overflow:hidden;border-radius:14px}
#article-4>.article-persona{position:absolute;z-index:1;top:clamp(110px,13vw,170px);width:clamp(145px,18vw,210px);aspect-ratio:1;background-repeat:no-repeat;background-size:500% 300%;filter:none;pointer-events:none}
#article-4>.article-persona--anouk{left:clamp(-54px,-3vw,-20px);background-image:url('/edition011-assets/halloween/anouk-expressions-inward-web-v2.webp');background-position:75% 50%}
#article-4>.article-persona--milo{right:clamp(-54px,-3vw,-20px);background-image:url('/edition011-assets/halloween/milo-expressions-inward-web-v2.webp');background-position:75% 100%}

/* Inline portraits punctuate the argument without becoming opaque cards. */
.editorial>.article-inline-scene{position:relative;z-index:3;grid-column:2;display:flex;align-items:flex-end;justify-content:center;gap:clamp(0px,2vw,18px);width:min(100%,390px);min-height:clamp(155px,20vw,230px);margin:clamp(1.4rem,4vw,3.5rem) 0;padding:10px 18px 24px;border:1px solid rgb(71 170 179/.38);border-width:0 0 1px;background:radial-gradient(ellipse at 50% 100%,rgb(71 170 179/.12),transparent 68%);justify-self:start}
.editorial>.article-inline-scene.inline-scene--right{justify-self:end}
.editorial>.article-inline-scene.inline-scene--duo{width:min(100%,690px);justify-self:center}
.article-inline-scene .inline-persona{display:block;width:clamp(140px,19vw,225px);aspect-ratio:1;background-color:transparent;background-repeat:no-repeat;background-size:500% 300%;background-position:var(--expression-x,0%) var(--expression-y,0%);filter:none;box-shadow:none;border:0}
.article-inline-scene .inline-persona--milo{background-image:url('/edition011-assets/halloween/milo-expressions-inward-web-v2.webp')}
.article-inline-scene .inline-persona--anouk{background-image:url('/edition011-assets/halloween/anouk-expressions-inward-web-v2.webp')}
.article-inline-scene small{position:absolute;right:0;bottom:2px;color:currentColor;font:700 .6rem/1.2 system-ui,sans-serif;letter-spacing:.1em;opacity:.72}
#article-1>.article-inline-scene{border-color:rgb(133 87 68/.38);background:radial-gradient(ellipse at 50% 100%,rgb(133 87 68/.13),transparent 68%)}
#article-2>.article-inline-scene{grid-column:2/4;border-color:rgb(40 174 190/.42);background:linear-gradient(90deg,rgb(239 104 72/.09),transparent 45%,rgb(40 174 190/.1))}
#article-3>.article-inline-scene{color:#dce8ff;border-color:rgb(143 180 255/.4);background:radial-gradient(ellipse at 50% 100%,rgb(143 180 255/.14),transparent 68%)}
#article-4>.article-inline-scene{grid-column:1/-1;color:#f7e9bc;border-color:rgb(233 185 78/.44);background:radial-gradient(ellipse at 50% 100%,rgb(233 185 78/.13),transparent 68%)}

/* Embedded films and talks become editorial pauses, not detached cards. */
.editorial>.media{position:relative;z-index:3;justify-self:center;width:min(100%,760px);margin:clamp(2rem,5vw,4.5rem) auto;padding:clamp(14px,2.5vw,24px);border:1px solid rgb(71 170 179/.34);border-radius:22px;background:rgb(255 255 255/.08);box-shadow:0 20px 50px rgb(15 14 35/.14)}
.editorial>.media .screen{overflow:hidden;border-radius:15px}
#article-1>.media{grid-column:2;border-color:rgb(133 87 68/.34);background:rgb(255 250 239/.4)}
#article-2>.media{grid-column:2/4;border-color:rgb(40 174 190/.38);background:linear-gradient(120deg,rgb(255 255 255/.82),rgb(255 240 231/.68))}
#article-3>.media{grid-column:2;border-color:rgb(143 180 255/.36);background:rgb(255 255 255/.055)}
#article-4>.media{grid-column:auto;width:auto;margin:24px 0 32px;border-color:rgb(233 185 78/.34);background:rgb(255 255 255/.075)}

.hwr-interlude[data-article="01"]{background:linear-gradient(145deg,#684536,#2e1e2c)}
.hwr-interlude[data-article="02"]{background:linear-gradient(135deg,#c94f36,#15294d 68%);transform:translateX(clamp(0px,2vw,24px))}
.hwr-interlude[data-article="03"]{background:radial-gradient(circle at 80% 20%,#2a4c97,#0b1639 56%);transform:translateX(clamp(-24px,-2vw,0px))}
.hwr-interlude[data-article="04"]{background:radial-gradient(circle at 20% 15%,#743d77,#24102f 64%);border-color:rgb(233 185 78/.45);transform:translateX(clamp(0px,2vw,24px))}
.hwr-interlude{position:relative;overflow:hidden}
.hwr-interlude>.hwr-cinematic{display:block;z-index:0;opacity:.34}
.hwr-interlude>.hwr-cinematic:after{background:linear-gradient(90deg,rgb(17 12 47/.88),rgb(17 12 47/.38) 48%,rgb(17 12 47/.82))}
.hwr-interlude>.hwr-cinematic iframe{opacity:0;transition:opacity .7s ease}
.hwr-interlude>.hwr-cinematic.hwr-playing iframe{opacity:1}
.hwr-pair,.hwr-interlude .hwr-pair{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.hwr-face,.hwr-stage:hover .hwr-face{border:0;border-radius:0;background-color:transparent;filter:none;box-shadow:none}
@keyframes lr-listen{0%,100%{transform:translateY(0) rotate(-.7deg)}50%{transform:translateY(-8px) rotate(.7deg)}}
.hwr-paused #article-1:before,.hwr-paused #article-1:after{animation-play-state:paused!important}

@media(max-width:760px){
 body:has(.hwr-mini-player){padding-bottom:96px}
 .editorial[id^="article-"]{display:block;margin-block:4rem;padding:3rem 1.35rem;border-radius:22px;transform:none}
 .editorial[id^="article-"]>.source-block{width:100%;transform:none}
 #article-1{padding-top:190px;overflow:hidden}
 #article-1:before,#article-1:after{top:28px;width:155px}
 #article-1:before{left:-20px}#article-1:after{right:-20px}
 #article-2>.source-block[data-source-block="1"]{width:100%;margin:1.5rem 0 2rem}
 #article-2>.source-block:first-child h2,#article-3>.source-block:first-child h2,#article-4>.source-block[data-source-block="0"] h2{font-size:clamp(2.1rem,11vw,3.8rem)}
 #article-3>.source-block:first-child{text-align:left}
 #article-3>.source-block:first-child h2{margin-left:0}
 #article-4{padding-top:190px}
 #article-4>.media{display:block;width:100%;margin:20px 0}
 #article-4>.article-persona{top:28px;width:125px;opacity:.72}
 #article-4>.article-persona--anouk{left:-35px}#article-4>.article-persona--milo{right:-35px}
 .editorial>.article-inline-scene,.editorial>.article-inline-scene.inline-scene--right,.editorial>.article-inline-scene.inline-scene--duo{display:flex;width:100%;min-height:155px;margin:1.6rem 0;transform:none;justify-self:stretch}
 .article-inline-scene .inline-persona{width:min(46vw,165px)}
 .editorial>.media,#article-1>.media,#article-2>.media,#article-3>.media,#article-4>.media{display:block;width:100%;margin:22px 0;transform:none}
 .hwr-interlude[data-article]{transform:none}
}
@media(prefers-reduced-motion:reduce){#article-1:before,#article-1:after{animation:none}.hwr-interlude[data-article]{transform:none}}

/* Keep the four art-directed desktop grids in a single reading column on mobile. */
@media(max-width:760px){#article-1,#article-2,#article-3,#article-4{display:block;grid-template-columns:none;transform:none}}

/* Portrait finish v3: intersect lateral feathering with a long shoulder fade.
   Applies to every portrait surface, without changing cinema or music controls. */
#article-1::before,#article-1::after,#article-4>.article-persona,.article-inline-scene .inline-persona,.hwr-face{
 -webkit-mask-image:linear-gradient(to right,transparent 0%,#000 17%,#000 83%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 4%,#000 55%,rgba(0,0,0,.92) 63%,rgba(0,0,0,.60) 72%,rgba(0,0,0,.15) 81%,transparent 89%,transparent 100%);
 mask-image:linear-gradient(to right,transparent 0%,#000 17%,#000 83%,transparent 100%),linear-gradient(to bottom,transparent 0%,#000 4%,#000 55%,rgba(0,0,0,.92) 63%,rgba(0,0,0,.60) 72%,rgba(0,0,0,.15) 81%,transparent 89%,transparent 100%);
 -webkit-mask-composite:source-in;mask-composite:intersect;
 -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
 -webkit-mask-size:100% 100%;mask-size:100% 100%;
 background-color:transparent!important;border:0!important;box-shadow:none!important;filter:none!important;
}
.article-inline-scene,.editorial>.article-inline-scene{background:none!important}