/* C42 Marla Stories reader (Gino LOCKED Oct 29 2026, 4:16 PM). Replaces only the inside of the article reader (MU.parts['x-article']) and adds the media viewer.
   Colours live on the screen scope (light + dark through html[data-theme]); type is in rem so it follows the text size, with --c42-ts
   (set by c42-reader.js from the root font size) only for the three sizes that scale at a slower rate. ?story=off turns the whole layer off. */
.u-app[data-u=x-article],.u-app[data-u=x-article-new],.c42v{--c42-ts:1;--pad:24px;--fd:"Marla Fraunces C28","Fraunces",Georgia,serif;--fb:"Marla Instrument C28","Instrument Sans",system-ui,-apple-system,sans-serif;
 --coral:#D93350;--c42-paper:#FDFBF7;--c42-ink:#1B1814;--c42-ink2:#6B645A;--c42-ink3:#736C61;--c42-hair:#E9E3D7;--c42-tint:#F6F1E7;--c42-blue:#1F5FA8;--c42-kick:#C42A45;--c42-undo:#FFFFFF}
html[data-theme=dark] .u-app[data-u=x-article],html[data-theme=dark] .u-app[data-u=x-article-new]{--c42-paper:#161412;--c42-ink:#EAE5DB;--c42-ink2:#A9A39A;--c42-ink3:#8A847B;--c42-hair:#2A2724;--c42-tint:#1F1C19;--c42-blue:#7DB1F0;--c42-kick:#FF7B8E;--c42-undo:#B8233E}
.u-app[data-u=x-article],.u-app[data-u=x-article-new]{background:var(--c42-paper);color:var(--c42-ink)}
.u-app[data-u=x-article] .u-vp,.u-app[data-u=x-article-new] .u-vp{background:var(--c42-paper)}
.u-app[data-u=x-article] .u-nav,.u-app[data-u=x-article] .bk-row,.u-app[data-u=x-article] .bk-strip{background:var(--c42-paper)}
.u-app[data-u=x-article] .u-nav{border-top-color:var(--c42-hair)}
/* ---- top bar: back, the Marla Stories mark, a 2 pt reading line ---- */
.u-app[data-u=x-article] .u-bar.ar-top{min-height:calc(52px + env(safe-area-inset-top,0px));height:calc(52px + env(safe-area-inset-top,0px));padding:env(safe-area-inset-top,0px) 0 0;justify-content:center;background:var(--c42-paper);border-bottom:1px solid var(--c42-hair)}
.u-app[data-u=x-article] .u-bar.ar-top .u-ib{position:absolute;left:4px;bottom:4px;width:44px;height:44px;color:var(--c42-ink)}
.c42-mark{display:flex;align-items:center;gap:9px;font:600 16.5px/1 var(--fb);letter-spacing:-.005em;color:var(--c42-ink)}
.c42-mark img{width:26px;height:26px;border-radius:7px;display:block}
.c42-prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--coral);transform:scaleX(0);transform-origin:0 50%;will-change:transform;pointer-events:none}
/* ---- the page ---- */
.u-artvp{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important;overflow-anchor:none}
.c42{font-family:var(--fb);color:var(--c42-ink);-webkit-font-smoothing:antialiased;padding-bottom:1rem}
.c42 img,.c42 video{display:block}
.c42 button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.c42-col{padding:0 var(--pad);max-width:680px;margin:0 auto}
.c42-cover{margin:0 auto;max-width:680px;position:relative}
.c42-cover img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--c42-tint)}
.c42-cap{font:400 .875rem/1.4 var(--fb);color:var(--c42-ink);margin-top:.625rem}
.c42-cap .cr{display:block;font-size:.75rem;line-height:1.35;color:var(--c42-ink3);margin-top:.25rem}
.c42-cover .c42-cap{padding:0 var(--pad)}
.c42-head{padding-top:1.75rem}
.c42-kick{display:block;font:700 .75rem/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;color:var(--c42-ink);text-decoration:none;min-height:0}
.c42-kick.nb{color:var(--c42-kick)}
.c42 h1{font-family:var(--fd);font-weight:820;font-variation-settings:"opsz" 110,"SOFT" 0;font-size:calc(2.125rem / var(--c42-ts) * (1 + (var(--c42-ts) - 1) * .5));line-height:1.05;letter-spacing:-.012em;margin:.8rem 0 0;text-wrap:balance;overflow-wrap:break-word;color:var(--c42-ink)}
.c42-dek{font:400 calc(1.125rem / var(--c42-ts) * (1 + (var(--c42-ts) - 1) * .8))/1.45 var(--fb);color:var(--c42-ink2);margin-top:1rem}
.c42-corr{margin-top:1.5rem;border:1px solid color-mix(in srgb,var(--c42-ink) 32%,transparent);border-radius:10px;padding:.9rem 1rem 1rem}
.c42-corr b{display:block;font:700 .9375rem/1.2 var(--fb)}
.c42-corr p{font:400 .9375rem/1.45 var(--fb);margin-top:.35rem}
.c42-by{margin-top:1.5rem;padding-top:1.1rem;border-top:1px solid var(--c42-ink);display:flex;gap:.9rem;align-items:center}
.c42-by .av{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none;background:var(--c42-tint)}
.c42-by .av.u-face{width:52px!important;height:52px!important}
.c42-by .t{min-width:0}
.c42-by .n{font:600 1.0625rem/1.2 var(--fb);display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.45rem;color:var(--c42-ink)}.c42-by .n span{font-weight:400;color:var(--c42-ink2);font-size:.9375rem}
.c42-by .o{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;margin-top:.3rem;font:600 .875rem/1.2 var(--fb);color:var(--c42-ink)}
.c42-by .o .v{color:var(--c42-blue);display:inline-flex;align-items:center;gap:.25rem}
.c42-by .o .v svg{width:15px;height:15px;fill:currentColor;flex:none}
.c42-by .d{font:400 .8125rem/1.35 var(--fb);color:var(--c42-ink2);margin-top:.3rem}.c42-by .d b{color:var(--c42-ink);font-weight:600}
/* ---- body rhythm ---- */
.c42-body{padding-top:2rem;font-family:var(--fd);font-weight:380;font-size:1.125rem;line-height:1.56;letter-spacing:-.003em;font-variation-settings:"opsz" 18,"SOFT" 0;hyphens:manual;text-wrap:pretty;overflow-wrap:break-word;color:var(--c42-ink)}
.c42-body p{margin:0}.c42-body>p+p,.c42-body>.c42-wrapf+p,.c42-body>p+.c42-wrapf{margin-top:1.15rem}
.c42-body .dl{font:700 .72em/1 var(--fb);letter-spacing:.12em;margin-right:.2em}
.c42-body::after{content:"";display:block;clear:both}
.c42-body a{color:inherit}
/* ---- media ---- */
.c42-fig{margin:2.25rem 0;position:relative}
.c42-fig.full,.c42-fig.vid,.c42-fig.gal{margin-left:calc(var(--pad) * -1);margin-right:calc(var(--pad) * -1)}
.c42-fig.full .c42-cap,.c42-fig.vid .c42-cap,.c42-fig.gal .c42-cap{padding:0 var(--pad)}
.c42-fig .tap{display:block;width:100%;position:relative;text-align:left}
.c42-fig.full .tap img{width:100%;height:auto;background:var(--c42-tint)}
.c42-wrapf{display:flow-root;margin:1.15rem 0 0}.c42-wrapf p{margin:0!important;hyphens:auto;-webkit-hyphens:auto}
.c42-fig.inset{float:right;width:calc((100% - 1.25rem) * .375);margin:.4rem 0 .6rem 1.25rem}
.c42-fig.inset .tap img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:3px;background:var(--c42-tint)}
.c42-fig.inset .c42-cap{font-size:.78125rem;line-height:1.42;margin-top:.55rem}
.c42-fig.inset .c42-cap .cr{font-size:.6875rem}
.c42[data-big] .c42-fig.inset,.c42c[data-big] .c42-fig.inset{float:none;width:100%;margin:2rem 0}.c42[data-big] .c42-fig.inset .tap img,.c42c[data-big] .c42-fig.inset .tap img{aspect-ratio:4/3;object-position:50% 30%}
.c42[data-big] .c42-wrapf,.c42c[data-big] .c42-wrapf{display:block}
/* hit slop: every small control gets a 44 pt target without changing how it looks */
.c42 .slop,.c42v .slop{position:relative}.c42 .slop::before,.c42v .slop::before{content:"";position:absolute;left:50%;top:50%;width:max(100%,44px);height:max(100%,44px);transform:translate(-50%,-50%)}
/* video */
.c42-vf{position:relative;aspect-ratio:10/11;overflow:hidden;background:#201d19;contain:paint}
.c42-vf video{width:100%;height:100%;object-fit:cover;background:#201d19}
.c42-vf .dur{position:absolute;left:10px;bottom:10px;font:600 12px/1 var(--fb);font-variant-numeric:tabular-nums;color:#fff;background:rgba(18,16,14,.72);box-shadow:0 0 0 1px rgba(255,255,255,.28),0 1px 6px rgba(0,0,0,.32);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);height:28px;padding:0 10px 0 8px;border-radius:13px;letter-spacing:.02em;display:flex;align-items:center;gap:6px;pointer-events:none}
.c42-vf .dur svg{width:15px;height:15px}
.c42-vf .pg{position:absolute;left:0;bottom:0;height:2px;background:rgba(255,255,255,.72);width:100%;transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.c42 .c42-vpp{position:absolute;right:10px;bottom:10px;width:28px;height:28px;border-radius:50%;background:rgba(18,16,14,.78);box-shadow:0 0 0 1.5px rgba(255,255,255,.6),0 1px 6px rgba(0,0,0,.38);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;display:grid;place-items:center;z-index:2}
.c42 .c42-vpp svg{width:14px;height:14px}
/* gallery mosaic */
.c42-mos{display:grid;grid-template-columns:1.5fr 1fr;grid-template-rows:1fr 1fr;gap:3px;height:21.5rem}
.c42-mos.two{grid-template-columns:1fr 1fr;grid-template-rows:1fr}
.c42-mos button{position:relative;overflow:hidden;padding:0;background:var(--c42-tint)}
.c42-mos:not(.two) button:first-child{grid-row:1/3}
.c42-mos img{width:100%;height:100%;object-fit:cover}
/* pull quote */
.c42-pq{margin:2.75rem 0;padding:1.5rem 0 1.4rem;border-top:1px solid color-mix(in srgb,var(--c42-ink) 22%,transparent);border-bottom:1px solid color-mix(in srgb,var(--c42-ink) 22%,transparent)}
.c42-pq q{display:block;quotes:none;font-family:var(--fd);font-weight:480;font-variation-settings:"opsz" 60,"SOFT" 0;font-size:calc(1.6875rem / var(--c42-ts) * (1 + (var(--c42-ts) - 1) * .6));line-height:1.22;letter-spacing:-.012em;text-wrap:balance;color:var(--c42-ink)}
.c42-pq cite{display:block;font:500 .84375rem/1.3 var(--fb);color:var(--c42-ink3);margin-top:1rem;font-style:normal}
.c42-pq cite::before{content:"\2014\00a0"}
/* link card in a body */
.c42-link{display:block;margin:2rem 0;border:1px solid var(--c42-hair);border-radius:12px;padding:.9rem 1rem;font:400 .9375rem/1.4 var(--fb);text-decoration:none;color:var(--c42-ink)}
.c42-link small{display:block;color:var(--c42-ink3);font-size:.8125rem}.c42-link b{display:block;font:600 1rem/1.3 var(--fb)}
/* end */
.c42-end{margin-top:3rem;padding:1.25rem 0 0;border-top:1px solid var(--c42-hair);font:400 .8125rem/1.5 var(--fb);color:var(--c42-ink3)}
.c42-end b{color:var(--c42-ink2);font-weight:600}
.c42-who{display:flex;gap:12px;align-items:center;padding:1.1rem 0 1.5rem}
.c42-who>span{flex:1;min-width:0;display:flex;flex-direction:column}
.c42-who b{font:600 .9375rem/1.25rem var(--fb);color:var(--c42-ink)}
.c42-who small{font:400 .8125rem/1.25rem var(--fb);color:var(--c42-ink2)}
html[data-theme=dark] .c42-cover::after,html[data-theme=dark] .c42-fig .tap::after,html[data-theme=dark] .c42-mos button::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.07);pointer-events:none}
/* the five actions: seated at the right end of the Back row (ar-bar.ar-seated) or floating; icons only, 44 pt targets */
.u-app[data-u=x-article] .ar-bar{background:var(--c42-paper);color:var(--c42-ink)}
.u-app[data-u=x-article] .ar-bar .u-ib{min-width:44px;min-height:44px;width:44px;height:44px;color:var(--c42-ink)}
.u-app[data-u=x-article] .ar-bar.ar-seated{background:none;gap:0;right:6px}
.u-app[data-u=x-article] .ar-bar .u-ib svg{width:23px;height:23px;stroke-width:1.7}
.u-app[data-u=x-article] .ar-bar .u-ib.on{color:var(--coral)}
.u-app[data-u=x-article] .ar-bar .u-ib.on svg path{fill:currentColor}
.u-app[data-u=x-article] .ar-bar .u-ib.pop svg{animation:c42pop .28s cubic-bezier(.2,.8,.2,1)}
@keyframes c42pop{40%{transform:scale(1.18)}}
/* ---- the viewer: a layer above the reader, always warm near-black ---- */
.c42v{position:fixed;inset:0;z-index:700;background:#0D0C0B;color:#fff;display:flex;flex-direction:column;font-family:var(--fb);opacity:0;touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none}
.c42v.on{opacity:1}
.c42v button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.c42v-top{height:calc(56px + env(safe-area-inset-top,0px));flex:none;display:flex;align-items:center;justify-content:space-between;padding:env(safe-area-inset-top,0px) 4px 0 8px}
.c42v-x,.c42v-more{width:44px;height:44px;display:grid;place-items:center}
.c42v-x i,.c42v-more i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:rgba(255,255,255,.12)}

.c42v svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.c42v-count{font:600 .875rem/1 var(--fb);color:rgba(255,255,255,.6);letter-spacing:.02em}
.c42v-stage{flex:1;min-height:0;position:relative;overflow:hidden}
.c42v-track{display:flex;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch;touch-action:pan-x;overscroll-behavior-x:contain}
.c42v-track::-webkit-scrollbar{display:none}
.c42v-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;padding-bottom:.5rem;overflow:hidden}
.c42v-m{position:relative;width:100%;display:flex;justify-content:center}
.c42v-m img{width:100%;height:auto;max-height:calc(100dvh - 300px);object-fit:contain}
.c42v-slide.v video{width:100%;height:auto;aspect-ratio:10/11;max-height:calc(100dvh - 300px);object-fit:contain;background:#201d19}
.c42v-c{width:100%;padding:1.35rem var(--pad) 0}
.c42v-cap{font:400 1rem/1.42 var(--fd);font-variation-settings:"opsz" 17;letter-spacing:-.003em;color:rgba(255,255,255,.9)}
.c42v-cr{font:400 .75rem/1.4 var(--fb);color:rgba(255,255,255,.55);margin-top:.45rem}
.c42v-plate{flex:none;padding:.4rem var(--pad) calc(1rem + env(safe-area-inset-bottom,0px))}
.c42v-dots{display:flex;gap:6px;justify-content:center;padding:.2rem 0 .1rem;min-height:6px}.c42v-dots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.25)}.c42v-dots i.on{background:#fff}
.c42v-back{display:block;width:100%;height:46px;border-radius:23px;background:rgba(255,255,255,.13);color:#fff;font:600 .9375rem/1 var(--fb);margin-top:.5rem}
.c42v-ctl{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:6px;color:#fff;background:rgba(18,16,14,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:999px;padding:0 6px}
.c42v-ctl button{width:44px;height:44px;display:grid;place-items:center;border-radius:50%}
.c42v-ctl .trk{flex:1;height:2px;border-radius:2px;background:rgba(255,255,255,.3);position:relative;overflow:hidden}.c42v-ctl .trk i{position:absolute;inset:0;background:#fff;border-radius:2px;transform:scaleX(0);transform-origin:0 50%}
.c42v-ctl svg{width:19px;height:19px}
.c42v :focus-visible{outline:2px solid #fff;outline-offset:2px}
.c42v-rep{position:absolute;right:12px;top:calc(52px + env(safe-area-inset-top,0px));min-width:220px;border-radius:14px;background:#24211e;box-shadow:0 10px 40px rgba(0,0,0,.5);padding:6px;z-index:5;display:none}
.c42v-rep.on{display:block}
.c42v-rep button{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:0 12px;border-radius:9px;text-align:left;font:500 .9375rem/1.2 var(--fb);color:#fff}
.c42v-rep button:active{background:rgba(255,255,255,.1)}
.c42v-rep small{display:block;font:400 .8125rem/1.35 var(--fb);color:rgba(255,255,255,.62);padding:6px 12px 8px}
.c42v-rep .why{white-space:normal}
@media (prefers-reduced-motion:reduce){.u-app[data-u=x-article] .ar-bar .u-ib.pop svg{animation:none}}
.u-app[data-u=x-article] .ar-bar svg,.c42-vpp svg,.c42-vf .dur svg,.c42-who svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}
.c42-vpp svg{stroke-width:2.2}.c42-vf .dur svg{stroke-width:2}
.c42-by .o .v svg{stroke:none}
.c42-fig.inset .tap{display:block;width:100%;padding:0;border:0;background:none;position:relative}
.c42 .c42-vpp.slop,.c42v .slop.abs{position:absolute}
.c42-fig.inset .tap img{height:auto}

/* C43: edge swipe inside the open viewer closes it (22 pt strip, below the top bar; above the video bar when there is one) */
.c42v-edge{position:absolute;left:0;top:calc(56px + env(safe-area-inset-top,0px));bottom:0;width:22px;z-index:6;touch-action:none}
.c42v:has(.c42v-ctl) .c42v-edge{bottom:72px}
.c42-dek{text-wrap:pretty}