/* STORY-1 story card (Gino LOCKED Oct 30 2026 6:28 PM MST; true mirror approved 6:33 PM, approved exception to the feed-post lock, story cards only). DECISIONS.md "STORY-1 layout LOCK".
   Media = the vertical post's 1:1 box. One bottom block in one place for every card: Read pill, 2-line serif title, 2-line subtext, 24 px bottom margin; a 10 px inset hairline frame.
   Behind it (article.js cardBody sets data-s1 on .ar-card): fill = photo narrower than square, cover; mirror = photo at least square, whole on top with its true reflection below (no reflection when exactly square); none = the poster's colour.
   Every rule hangs off .feed-card.ar-art inside html[data-c41] so ?c41=off keeps the old card, and it reaches the composer preview (.ar-prev.feed-card.ar-art, outside .feed-stream).
   Three ids on purpose: this file must win over C41's story rules and C43's universal font rule whatever the load order. */

/* CLOSEOUT-1 (Gino, Nov 1): the card title is Figtree now, like everything else (C43 has no exceptions); the Fraunces files and the serif are gone. --s1-serif is kept as the variable name so the locked layout rules below do not change. */
html[data-c41]{--s1-serif:"Figtree",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;--s1-ink:#0C0C0C}

/* ================= the box and the bottom block ================= */
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .feed-story{padding:0!important;margin:0!important;display:block!important;background:none!important;aspect-ratio:auto!important;min-height:0!important}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .ar-card{position:relative!important;display:flex!important;flex-direction:column;justify-content:flex-end;align-items:stretch;align-content:normal!important;row-gap:0;column-gap:0;width:100%;height:auto!important;aspect-ratio:1/1!important;margin:0!important;padding:0 24px 24px!important;border:0!important;border-radius:0!important;background:var(--s1-ink)!important;color:#fff!important;text-decoration:none;overflow:hidden;box-sizing:border-box;isolation:isolate}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art :is(.ar-kick,.ar-rule,.ar-time,.c41-sh){display:none!important}
/* the pill: 32 tall, 44 tall with its hit area; the whole card is the one link */
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .c41-read{position:relative!important;z-index:4;flex:none;align-self:flex-start!important;justify-self:auto!important;display:inline-flex!important;align-items:center;justify-content:center;gap:0;height:32px;margin:0!important;padding:0 20px!important;border:0!important;border-radius:999px;background:#fff;color:#15120F!important;font:600 .875rem/1 var(--c41-fb)!important;letter-spacing:0!important;white-space:nowrap;text-shadow:none!important;box-shadow:0 1px 4px rgba(0,0,0,.18)}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .c41-read:after{content:"";position:absolute;inset:-6px -8px}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .c41-read svg{display:none}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .ar-hed{position:relative!important;z-index:4;flex:none;margin:10px 0 0!important;padding:0!important;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2!important;white-space:normal!important;overflow:hidden!important;text-overflow:ellipsis;overflow-wrap:break-word;font:700 1.5625rem/1.8125rem var(--s1-serif)!important;letter-spacing:-.012em!important;color:#fff!important;text-indent:0!important;text-shadow:none!important}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .ar-deck{position:relative!important;z-index:4;flex:none;margin:4px 0 0!important;padding:0!important;display:-webkit-box!important;-webkit-box-orient:vertical;-webkit-line-clamp:2!important;overflow:hidden!important;font:400 .875rem/1.1875rem var(--c41-fb)!important;color:rgba(255,255,255,.8)!important;text-shadow:none!important}
/* hairline frame: over the picture and the scrim, clear of the text, never in the way of a tap */
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .s1-frame{position:absolute;inset:10px;z-index:5;box-sizing:border-box;border:.5px solid rgba(255,255,255,.35);border-radius:10px;pointer-events:none}
/* text protection, the same on every card, measured up from the media bottom because the text block is, in rem so it grows with the words. */
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .s1-scrim{position:absolute;left:0;right:0;bottom:0;height:13.5rem;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(12,12,12,.86) 0,rgba(12,12,12,.84) 1.625rem,rgba(12,12,12,.8) 3.875rem,rgba(12,12,12,.76) 4.75rem,rgba(12,12,12,.7) 6.5rem,rgba(12,12,12,.59) 7.75rem,rgba(12,12,12,.47) 8.25rem,rgba(12,12,12,.31) 9rem,rgba(12,12,12,.16) 9.875rem,rgba(12,12,12,.07) 10.875rem,rgba(12,12,12,.02) 12.125rem,rgba(12,12,12,0) 13.5rem)}

/* ================= the picture ================= */
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .ar-cov{position:absolute!important;left:0!important;right:0!important;top:0!important;bottom:auto!important;width:100%!important;height:100%!important;max-height:none!important;aspect-ratio:auto!important;margin:0!important;padding:0!important;border-radius:0!important;display:block;z-index:1;overflow:hidden;background:none!important}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .ar-cov img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% var(--s1-fy,50%);border-radius:0!important}
/* mirror: --s1-r is width / height (unitless, at most 3), and the media is square, so 100% / r is the photo height PH at any card width */
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .ar-card[data-s1=mirror] .ar-cov{height:calc(100% / var(--s1-r))!important}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .s1-mir{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .s1-mir>span{position:absolute;left:0;right:0;top:calc(100% / var(--s1-r));height:calc(100% / var(--s1-r))}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .s1-mir img{display:block;width:100%;height:100%;object-fit:cover;transform:scaleY(-1)}
/* make.py's blur ramp, expressed for browsers. m1 = blurred 1.5; m2 = blurred 6, faded in over the first 45 % of PH (the mask sits on the wrapper so the flip does not turn it over).
   A CSS blur fades to transparent at its own edges where PIL clamps, so: m0, an unblurred flip, sits underneath and shows through m1's soft edges (the seam row is then exactly the photo's last row, nothing dark gets in), and it starts 1 px under the photo so a fractional PH, where photo and flip snap to different pixel rows, cannot open a gap;
   m2 is 22 px oversized left and right (its fade is about 18 px) and object-fit:fill keeps the whole photo inside it. */
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .s1-mir>.s1-m0{top:calc(100% / var(--s1-r) - 1px);height:calc(100% / var(--s1-r) + 1px)}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .s1-m1 img{filter:blur(1.5px)}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .s1-mir>.s1-m2{left:-22px;right:-22px;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 45%);mask-image:linear-gradient(to bottom,transparent 0,#000 45%)}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .s1-m2 img{filter:blur(6px);object-fit:fill}
/* darkening over the leftover only: alpha = .08 + .92 * t^1.3 with t = position / (75 % of the leftover); #0C0C0C below it covers the rest when the flip is shorter than the leftover */
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .s1-dark{position:absolute;left:0;right:0;top:calc(100% / var(--s1-r));bottom:0;background:linear-gradient(to bottom,rgba(12,12,12,.08) 0,rgba(12,12,12,.1261) 7.5%,rgba(12,12,12,.1935) 15%,rgba(12,12,12,.2723) 22.5%,rgba(12,12,12,.3596) 30%,rgba(12,12,12,.4536) 37.5%,rgba(12,12,12,.5536) 45%,rgba(12,12,12,.6586) 52.5%,rgba(12,12,12,.7683) 60%,rgba(12,12,12,.8822) 67.5%,#0C0C0C 75%)}

/* ================= no photo: the poster's colour (--s1-c1..3 set by article.js, default Marla) ================= */
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .s1-bg{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(115% 80% at 88% 0,var(--s1-c1,#D93350) 0,transparent 68%),radial-gradient(90% 62% at 0 34%,var(--s1-c2,#D93350) 0,transparent 74%),var(--s1-c3,#9E2340)}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .s1-grain{position:absolute;inset:0;z-index:3;pointer-events:none;background:url(/assets/story/s1/grain.png) 0 0/64px 64px;opacity:.1;mix-blend-mode:overlay}
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art .s1-q{position:absolute;inset:10px;z-index:3;overflow:hidden;border-radius:10px;padding-left:2px;pointer-events:none;color:#fff;opacity:.09;font:700 15rem/1 var(--s1-serif)!important;font-variation-settings:"opsz" 72,"SOFT" 0,"WONK" 0!important}

/* ================= composer preview: the same card at the feed card's width, no bottom gap under the media ================= */
html[data-c41]:not(#c41):not(#s1a):not(#s1b) body[data-mk-side=updated] .feed-card.ar-art.ar-prev{margin:0 12px!important;padding-bottom:0!important;overflow:hidden}

/* ================= composer: one row of swatches, only while the story has no cover ================= */
.s1-sw{display:flex;margin:.5rem 0 0 calc(var(--pad) - 9px)}
.s1-sw[hidden]{display:none}
.s1-sw button{flex:none;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:50%;background:none;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.s1-sw i{display:block;width:26px;height:26px;border-radius:50%;background:linear-gradient(145deg,var(--a),var(--b) 60%,var(--c))}
.s1-sw [aria-checked=true] i{box-shadow:0 0 0 2px var(--c42-paper),0 0 0 3.5px var(--c42-ink)}
.s1-sw button:focus-visible{outline:2px solid var(--c42-ink);outline-offset:-2px}