/* Weekly Padgett — supermarket-tabloid theme for blog.patpadgett.com */
@font-face{font-family:Bangers;src:url(/assets/fonts/Bangers-400.woff2) format('woff2');font-display:swap}
@font-face{font-family:Nunito;src:url(/assets/fonts/Nunito-900.woff2) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-var.woff2) format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Archivo;src:url(/assets/fonts/archivo-italic-400.woff2) format('woff2');font-style:italic;font-display:swap}
@font-face{font-family:Plex;src:url(/assets/fonts/IBMPlexMono-500.woff2) format('woff2');font-weight:500;font-display:swap}

*{box-sizing:border-box}
:root{--g:clamp(14px,2.2vw,28px);--red:#d00;--yel:#ff0;--ink:#000}
html{background:#ddd;-webkit-text-size-adjust:100%;scrollbar-color:#d00 #ff0}
body{margin:0;overflow-x:clip;font:400 18px/1.6 Archivo,system-ui,sans-serif;color:#000}
::selection{background:#ff0;color:#000}
a{color:inherit;text-underline-offset:4px;text-decoration-thickness:2px}
main:focus{outline:4px solid #d00;outline-offset:-4px}
a:focus-visible{outline:4px solid #d00;outline-offset:2px;box-shadow:0 0 0 7px #fff}
.masthead a:focus-visible{outline:4px solid #ff0;outline-offset:3px;box-shadow:0 0 0 8px #000}
img{display:block;max-width:100%;height:auto}
.skip{position:absolute;left:-999px;top:12px;background:#000;color:#ff0;padding:14px 18px;min-height:44px;display:inline-flex;align-items:center;z-index:99;font:900 14px/1 Nunito,sans-serif;text-transform:uppercase}
.skip:focus{left:12px}

.wrap{max-width:1280px;margin:0 auto;background:#fff url(/assets/grain.jpg) center/600px;border:3px solid #000;position:relative}
@media (min-width:1300px){.wrap{margin:24px auto}}

/* masthead */
.masthead{background:#d00;color:#fff;padding:22px var(--g) 16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 30px;align-items:center;border-bottom:3px solid #000}
.brand{margin:0;display:grid;justify-items:start;gap:10px;font:400 clamp(44px,7vw,92px)/.85 Bangers,cursive;letter-spacing:.02em;color:#fff;text-shadow:3px 3px 0 #000}
.brand a{text-decoration:none;color:inherit;display:inline-block;min-height:44px;line-height:44px}
.brand small{display:inline-block;margin-top:10px;font:900 clamp(12px,1vw,14px)/1.4 Nunito,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-shadow:none;background:#ff0;color:#000;padding:3px 10px;transform:rotate(-1deg);max-width:100%;white-space:normal}
.masthead.small .brand{font-size:clamp(30px,4vw,56px)}
nav.top{display:flex;flex-wrap:wrap;gap:8px}
nav.top{align-self:center;padding-right:3px}
nav.top a{min-height:44px;padding:0 16px;display:inline-flex;align-items:center;text-decoration:none;background:#ff0;color:#000;border:3px solid #000;font:900 13px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.1em;transform:rotate(-2deg);box-shadow:3px 3px 0 #000;transition:transform .18s ease-out,box-shadow .18s}
nav.top a:hover,nav.top a:focus-visible{transform:rotate(0) translate(1px,1px);box-shadow:1px 1px 0 #000}
nav.top a:nth-child(even){transform:rotate(1.5deg)}
nav.top a:hover,nav.top a[aria-current]{background:#fff}

/* hero */
.hero{padding:0 var(--g);position:relative;margin-top:44px}
@media (min-width:821px){.home>.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 36px;align-items:start;margin-top:36px}.home>.hero .pic{grid-column:1;grid-row:1/6;aspect-ratio:auto;height:100%;min-height:360px;max-height:min(560px,calc(100vh - 380px));width:100%;min-width:0}.home>.hero .pic img{position:absolute;inset:0;width:100%;height:100%;filter:contrast(1.3) saturate(1.3)}.home>.hero h1{margin-top:0;font-size:clamp(40px,5vw,80px);grid-column:2;grid-row:1}.home>.hero p,.home>.hero .k,.home>.hero .hero__act{grid-column:2}.home>.hero .burst{right:auto;left:-22px;top:-8px;width:150px;height:150px;padding:28px 24px}.home>.hero .k{display:inline-flex;width:auto}}
.hero .pic{position:relative;aspect-ratio:16/6;overflow:visible;border:5px solid #000;background:#000}
.hero .pic a{overflow:hidden}.hero .pic img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hero h1{font:400 clamp(40px,7vw,110px)/.85 Bangers,cursive;letter-spacing:.01em;text-transform:uppercase;color:#000;margin:22px 0 10px -.03em;text-wrap:balance;max-width:16ch}
.hero h1 a{text-decoration:none}
.hero h1 a:hover{color:#d00}
.hero p{margin:0;font:700 clamp(17px,1.35vw,20px)/1.4 Nunito,sans-serif;text-transform:none;max-width:52ch;text-wrap:pretty}
.hero .k{margin:14px 0 0}
.hero__act{margin:16px 0 0}
.coming__more summary::after{content:"+";margin-left:auto;font:400 26px/1 Bangers,cursive;color:#d00}
.coming__more[open] summary::after{content:"\2212"}
.hero .pic a{display:block;height:100%}
.burst{position:absolute;right:-18px;top:-26px;width:170px;height:170px;background:#ff0;clip-path:polygon(50% 0,61% 18%,80% 6%,80% 26%,100% 30%,86% 46%,100% 62%,80% 66%,80% 86%,61% 78%,50% 100%,39% 78%,20% 86%,20% 66%,0 62%,14% 46%,0 30%,20% 26%,20% 6%,39% 18%);display:grid;place-items:center;text-align:center;font:400 clamp(17px,1.5vw,22px)/.95 Bangers,cursive;color:#d00;transform:rotate(-10deg);z-index:3;padding:34px 30px;overflow-wrap:normal;animation:slap .7s cubic-bezier(.2,.8,.3,1) .2s both}
@keyframes slap{0%{transform:rotate(-30deg) scale(1.6);opacity:0}60%{opacity:1}100%{transform:rotate(-10deg) scale(1)}}

/* two columns */
.cols{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(260px,.9fr);gap:clamp(20px,3vw,40px);align-items:start;padding:28px var(--g) var(--g)}
.posts{display:grid;gap:clamp(18px,2.5vw,30px)}
.post{display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 18px;align-items:start;border:3px solid #000;padding:10px;background:#fff;min-width:0;position:relative;box-shadow:4px 4px 0 #000;transition:transform .2s ease-out,box-shadow .2s}
.post:has(h2 a:hover),.post:has(h2 a:focus-visible){transform:translate(-2px,-2px);box-shadow:7px 7px 0 #000}
.post>*{min-width:0}
.post:nth-child(odd){background:#ff0}
.post .th{aspect-ratio:1;overflow:hidden;grid-row:1/4;border:3px solid #000;background:#000}
.th--undeveloped{display:grid;place-items:center;text-align:center;padding:12px;background:#222 radial-gradient(circle,#444 1px,transparent 1.6px) 0 0/6px 6px!important;color:#ff0;font:400 18px/1 Bangers,cursive;text-transform:uppercase}
.th--undeveloped span{transform:rotate(-8deg);border:3px solid #ff0;padding:8px 6px}
.post--next{background:#fff!important}
.post--next::before,.post--next::after{content:"";position:absolute;top:-10px;width:70px;height:22px;background:rgba(236,222,170,.85);transform:rotate(-4deg);box-shadow:0 1px 2px rgba(0,0,0,.25)}
.post--next::before{left:10%}.post--next::after{right:30%;transform:rotate(5deg)}
.post--next:has(.stamp)::after{display:none}
.post--next .k{max-width:100%}
.post--next{padding-top:22px}
.post .th img{width:100%;height:100%;object-fit:cover;filter:contrast(1.3) saturate(1.3)}
.post h2{margin:0;font:400 clamp(24px,2.4vw,36px)/.9 Bangers,cursive;text-transform:uppercase;text-wrap:balance}
.post h2 a{text-decoration:none}
.post h2 a:hover{color:#d00}
.post p{margin:0;font:600 15px/1.45 Nunito,sans-serif;text-wrap:pretty}
.k{margin:0;font:700 12px/1.7 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.06em;background:#000;color:#fff;display:inline-flex;flex-wrap:wrap;column-gap:.6em;padding:3px 9px;max-width:100%;min-width:0}
.k span{white-space:nowrap}
.k span:not(:last-child)::after{content:"\00a0·"}
.k.hot{background:#d00}
.k a{color:#ff0;text-decoration:none}
.k a:hover{text-decoration:underline}

/* coming attractions: classifieds column */
.coming{border:3px solid #000;background:#fff;padding:16px 18px 10px;position:relative}
.coming h2{margin:0 0 4px;font:400 clamp(26px,2.4vw,34px)/.9 Bangers,cursive;text-transform:uppercase;background:#000;color:#ff0;display:inline-block;padding:4px 10px;transform:rotate(-1deg)}
.coming__more summary{cursor:pointer;min-height:44px;display:flex;align-items:center;font:900 13px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.08em;padding:0 4px}
.coming__more summary:hover{background:#ff0}
.coming__more summary:focus-visible{outline:4px solid #d00;outline-offset:2px;box-shadow:0 0 0 7px #fff}
.coming__more ol{margin-top:0}
.coming__sub{margin:0 0 10px;font:900 13px/1.4 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.06em}
.coming ol{margin:0;padding:0;list-style:none;columns:2;column-gap:28px;column-rule:2px dashed #000}
.coming li{display:grid;grid-template-columns:5.2ch 1fr;gap:10px;padding:8px 0;border-top:2px dashed #000;break-inside:avoid;font:400 15px/1.35 Archivo,sans-serif}
.coming li:first-child{border-top:0}
.coming time{font:500 12px/1.6 Plex,monospace;text-transform:uppercase;letter-spacing:.06em;color:#d00;white-space:nowrap}
.coming b{font-weight:600}
/* coupon */
.coupon{position:relative;border:3px dashed #000;background:#fff;padding:18px 20px 14px;text-align:center}
.coupon::before{content:"✂";position:absolute;left:-14px;top:-16px;font-size:26px;background:#fff;padding:0 4px;transform:rotate(90deg)}
.coupon__save{margin:0;font:900 12px/1 Nunito,sans-serif;letter-spacing:.2em;text-transform:uppercase;background:#000;color:#fff;display:inline-block;padding:5px 10px}
.coupon__big{margin:8px 0 6px;font:400 clamp(34px,3.4vw,50px)/.9 Bangers,cursive;text-transform:uppercase;color:#d00}
.coupon__body{margin:0 auto;font:400 16px/1.45 Archivo,sans-serif;max-width:44ch}
.rss-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;background:#d00;color:#fff;border:3px solid #000;text-decoration:none;font:900 13px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.1em;box-shadow:3px 3px 0 #000}
.rss-btn:hover{background:#ff0;color:#000}
.rss-btn--ghost{background:#fff;color:#000}
.coupon__act{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 0}
.rss-how{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;font:900 13px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.06em;margin-left:6px}
.box p+p{margin-top:10px}
.coupon__fine{margin:10px 0 0;font:500 12px/1.5 Plex,monospace;letter-spacing:.04em;text-transform:uppercase;color:#555}
/* rubber stamp */
.stamp{position:absolute;right:-14px;top:-26px;z-index:5;margin:0;padding:6px 12px;border:4px double #d00;color:#d00;font:400 clamp(22px,2vw,30px)/.9 Bangers,cursive;text-transform:uppercase;text-align:center;letter-spacing:.04em;transform:rotate(9deg);opacity:.85;pointer-events:none;animation:slap .6s cubic-bezier(.2,.8,.3,1) .5s both;--r:9deg}
.stamp{animation-name:stampin}
@keyframes stampin{0%{transform:rotate(-4deg) scale(1.5);opacity:0}70%{opacity:.85}100%{transform:rotate(9deg) scale(1)}}
.side{position:relative}

/* sidebar */
.side{display:grid;gap:22px}
.box{border:3px solid #000;background:#fff;padding:16px 18px}
.box h3,.box .boxh{margin:0 0 8px;font:400 clamp(26px,2.4vw,34px)/.9 Bangers,cursive;text-transform:uppercase;background:#d00;color:#fff;display:inline-block;padding:4px 10px;transform:rotate(-1deg)}
.box p{margin:0;font:600 15px/1.5 Nunito,sans-serif}
.box p:not(.cloud) a{display:inline-block;padding:4px 0;text-decoration-color:#d00}
.box ul{margin:0;padding:0;list-style:none}
.box li a{display:flex;align-items:center;min-height:44px;padding:6px 0;text-decoration:underline;text-decoration-color:#d00;font:900 14px/1.45 Nunito,sans-serif}
.cloud{display:flex;flex-wrap:wrap;gap:6px 8px}
.cloud a{font:400 1em Bangers,cursive;text-transform:uppercase;color:#000;background:#ff0;text-decoration:none;display:inline-flex;align-items:center;line-height:1;padding:6px 12px 4px;min-height:44px;min-width:44px;justify-content:center;margin:0 2px 4px 0}
.cloud a:hover{background:#000;color:#ff0}
.psychic{background:#000;color:#ff0;padding:16px 14px;text-wrap:balance;font:400 clamp(20px,2vw,28px)/1 Bangers,cursive;text-transform:uppercase;text-align:center;border:3px solid #000}
.psychic small{display:block;font:900 13px/1.4 Nunito,sans-serif;color:#fff;margin-top:8px;text-transform:none;letter-spacing:0}

/* pager */
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 var(--g) var(--g);font:900 13px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.1em}
.pager a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px;background:#ff0;border:3px solid #000;text-decoration:none}
.pager a:hover{background:#fff}

/* list pages */
.pagehead{padding:0 var(--g);margin-top:36px}
.pagehead h1{font:400 clamp(44px,7vw,100px)/.85 Bangers,cursive;text-transform:uppercase;margin:0 0 8px;text-wrap:balance}
.pagehead p{margin:0;font:900 clamp(15px,1.4vw,20px)/1.3 Nunito,sans-serif;text-transform:uppercase}
.grid{padding:24px var(--g) var(--g)}
.grid .posts{grid-template-columns:repeat(auto-fill,minmax(360px,1fr))}
@media (max-width:420px){.grid .posts{grid-template-columns:1fr}}
.tagdir{padding:24px var(--g) 30px;display:block}.tagdir__group{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 8px}
.tagdir a{min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 14px;border:3px solid #000;background:#ff0;text-decoration:none;font:400 22px/1 Bangers,cursive;text-transform:uppercase}
.tagdir a b{font:900 12px/1 Nunito,sans-serif;background:#000;color:#fff;padding:3px 6px}
.tagdir a:hover{background:#fff}
.themes{padding:24px var(--g) var(--g);display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px}
.theme{border:3px solid #000;background:#fff;padding:14px 18px}
.theme:nth-child(even){background:#ff0}
.theme h2 small{display:inline-block;font:900 12px/1 Nunito,sans-serif;letter-spacing:.08em;background:#000;color:#ff0;padding:4px 6px;margin-left:8px;vertical-align:middle;transform:none}
.theme h2{margin:0 0 8px;font:400 clamp(26px,2.4vw,34px)/.9 Bangers,cursive;text-transform:uppercase;background:#d00;color:#fff;display:inline-block;padding:4px 10px;transform:rotate(-1deg)}
.theme ol{margin:0;padding:0;list-style:none;counter-reset:n}
.theme li a{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:10px;padding:8px 0;text-decoration:none;border-top:2px dashed #000;counter-increment:n}
.theme li a::before{grid-row:1/3;align-self:start}
.theme li a b,.theme li a span{grid-column:2}
.theme li:first-child a{border-top:0}
.theme li a::before{content:counter(n);font:400 30px/1 Bangers,cursive;color:#d00}
.theme li a b{display:block;font:900 15px/1.3 Nunito,sans-serif;text-transform:uppercase}
.theme li a span{display:block;font:400 14px/1.4 Archivo,sans-serif}
.theme li a:hover b{color:#d00}
.theme--held{border-style:dashed;background:#fff!important}
.theme--held p{margin:0;font:400 15px/1.5 Archivo,sans-serif}

/* post page */
.sheet{padding:clamp(16px,3vw,32px) clamp(20px,4vw,48px) clamp(20px,4vw,48px);max-width:960px;margin:0 auto}
@media (min-width:821px){.sheet .lede{display:grid;grid-template-columns:240px minmax(0,1fr);gap:0 28px;align-items:start;max-width:682px}.sheet .lede h1{font-size:clamp(40px,4.4vw,60px)}.sheet .lede>.k,.sheet .lede>h1{grid-column:2}.sheet .lede>.dek{grid-column:1/-1;margin:20px 0 0;max-width:none}.sheet .lede>figure.hero{grid-column:1;grid-row:1/3;margin:0;align-self:start}.sheet .lede .hero .pic{aspect-ratio:4/3;max-height:none}.sheet .lede .hero .pic img{object-position:50% 25%}}
.sheet .lede{margin-bottom:24px}
@media (min-width:821px){.sheet>.lede,.sheet>.body,.sheet>.tail,.sheet>.pn,.sheet>h1,.sheet>.dek,.sheet>.k{margin-left:auto;margin-right:auto}.sheet>.body,.sheet>.tail,.sheet>.pn{max-width:682px}}
.sheet .hero{padding:0;margin:0 0 14px}
.sheet .hero .pic{aspect-ratio:2/1;max-height:30vh}
.sheet figure.hero{margin:0 0 20px}
@media (max-width:820px){.sheet .hero .pic{aspect-ratio:21/9;max-height:22vh;width:100%}.sheet figure.hero{width:100%}.sheet h1{font-size:clamp(34px,10vw,44px)!important}.sheet .dek{margin-bottom:14px;font-size:15px!important}}
.sheet--about{position:relative}
.filephoto{float:right;width:min(38%,300px);margin:6px 8px 18px 40px;padding:10px 10px 12px;background:#fff;border:3px solid #000;box-shadow:5px 5px 0 #000;transform:rotate(2deg)}
.filephoto img{border:2px solid #000;filter:contrast(1.1)}
.filephoto figcaption{margin:10px 0 0;font:400 14px/1.4 Archivo,sans-serif;text-wrap:pretty}
.filephoto figcaption b{display:block;width:max-content;margin:0 0 6px;font:900 11px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.1em;background:#d00;color:#fff;padding:4px 6px}
.sheet--about .body{max-width:none}
.sheet--about .body p{max-width:62ch}
.sheet--about .tail{max-width:62ch}
.sheet>.k{margin:28px 0 14px}
.sheet h1{font:400 clamp(40px,5.6vw,76px)/.85 Bangers,cursive;text-transform:uppercase;margin:0 0 14px;text-wrap:balance}
.sheet .dek{margin:0 0 20px;font:700 clamp(17px,1.35vw,20px)/1.4 Nunito,sans-serif;text-transform:none;max-width:56ch;text-wrap:pretty}
.body{font:400 19px/1.6 Archivo,sans-serif;max-width:62ch;text-wrap:pretty}
.body p{margin:0 0 1.3em;text-wrap:pretty}
.body h2{font:400 clamp(28px,3.2vw,44px)/.9 Bangers,cursive;text-transform:uppercase;margin:2em 0 .6em;background:#ff0;display:inline-block;padding:2px 10px}
.body h3{font:900 20px/1.2 Nunito,sans-serif;text-transform:uppercase;margin:1.8em 0 .5em}
.body>p:first-of-type{overflow:auto}.body>p:first-of-type::first-letter{font:900 3.4em/.78 Nunito,sans-serif;float:left;margin:.08em .14em 0 0;padding:0 .06em;color:#fff;background:#d00}
.body a{text-decoration-color:#d00}
.body a:hover{background:#ff0}
.body code{font:500 .9em Plex,monospace;overflow-wrap:anywhere;background:#eee;padding:1px 2px 1px 3px;margin-right:-2px;border-radius:0}
.body pre{font:500 15px/1.5 Plex,monospace;background:#000;color:#ff0;padding:14px 18px;overflow:auto;border:3px solid #000}
.body pre code{background:none;padding:0;color:inherit}
.body blockquote{margin:0 0 1.3em;padding:12px 18px;border-left:8px solid #d00;background:#ff0;font-weight:700}
.body ul,.body ol{padding-left:1.3em}
.body li{margin-bottom:.4em}
.body img{border:4px solid #000;margin:0 0 1.3em}
.body hr{border:0;border-top:3px solid #000;margin:2em 0}
.body table{border-collapse:collapse;font-size:16px;margin:0 0 1.3em}
.body th,.body td{border:2px solid #000;padding:6px 10px;text-align:left}
.body th{background:#ff0;font:900 13px/1.3 Nunito,sans-serif;text-transform:uppercase}
.refs{margin-top:3rem;padding-top:16px;border-top:3px solid #000}
.refs h2{font-size:clamp(22px,2vw,28px)}
.refs ol{font-size:15px;padding-left:1.6em}
.refs li{overflow-wrap:anywhere;margin-bottom:.5em}
.refs li small{color:#555;font:500 12px/1 Plex,monospace}
.refs a.backref{text-decoration:none;color:#d00;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-10px 0;vertical-align:middle;border:2px solid transparent}
.refs a.backref:hover{background:#ff0;border-color:#000}
.body a.cite{text-decoration:none;font:900 .7em/1 Nunito,sans-serif;vertical-align:super;color:#d00;padding:14px 8px;margin:-14px -4px}
.body a.cite:hover,.refs li:target{background:#ff0}
.expose{margin:0 0 1.3em;padding:12px 16px;background:#d00;color:#fff;border:4px solid #000;font:400 20px/1.1 Bangers,cursive;text-transform:uppercase}
.expose b{display:block;color:#ff0;font-weight:400}
mark.placeholder{background:#d00;color:#ff0;padding:0 4px;font-weight:700}
.tail{margin:3rem 0 0;padding-top:16px;border-top:3px solid #000;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;max-width:62ch;clear:both}
.tail .byline{font:400 30px/1 Bangers,cursive;color:#d00}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags a,.tags span{font:900 12px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.1em;background:#000;color:#fff;padding:6px 12px;text-decoration:none;min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center}
.tags span{background:transparent;color:#333;border:0;padding:6px 4px;font-weight:700;letter-spacing:.06em}
.tags a:hover{background:#d00}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:2rem 0 0}
.pn>a{text-decoration:none;min-height:44px;display:block;border:3px solid #000;padding:10px 14px;background:#fff}
.pn>a:hover{background:#ff0}
.pn>a b{display:block;font:500 12px/1.7 Plex,monospace;letter-spacing:.12em;text-transform:uppercase;color:#d00}
.pn>a span{display:block;font:400 26px/.9 Bangers,cursive;text-transform:uppercase}
.pn>a:last-child{text-align:right}
.pn .pn--next{background:#ff0;border:3px solid #000;padding:10px 14px;text-align:right}
.pn .pn--next b{display:block;font:500 12px/1.7 Plex,monospace;letter-spacing:.12em;text-transform:uppercase;color:#d00}
.pn .pn--next span{display:block;font:400 26px/.9 Bangers,cursive;text-transform:uppercase}
.pn .pn--next p{margin:10px 0 0;display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.more{padding:0 clamp(20px,4vw,48px) var(--g);max-width:960px;margin:0 auto}
.more>h2{font:400 clamp(26px,2.4vw,34px)/.9 Bangers,cursive;text-transform:uppercase;background:#d00;color:#fff;display:inline-block;padding:4px 10px;transform:rotate(-1deg);margin:0 0 14px}

footer{margin:0;background:#000;color:#fff;padding:22px var(--g) 26px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 40px;align-items:end;font:900 12px/1.6 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.1em;border-top:3px solid #000}
footer p{margin:0 0 6px}
footer nav{display:flex;flex-wrap:wrap;gap:0 18px}
footer nav a{min-height:44px;min-width:44px;justify-content:center;display:inline-flex;align-items:center;color:#ff0;padding:0 6px}
footer .fine{font:400 13px/1.5 Archivo,sans-serif;text-transform:none;letter-spacing:0;color:#ccc;max-width:62ch;margin-top:8px}
.foot__r{display:flex;align-items:end;gap:22px}
.foot__stamp{margin:0;border:3px double #ff0;color:#ff0;padding:6px 10px;font:400 22px/.95 Bangers,cursive;text-transform:uppercase;text-align:center;transform:rotate(-6deg);letter-spacing:.03em}
.foot__price{margin:0;font:400 64px/.8 Bangers,cursive;color:#fff;text-shadow:3px 3px 0 #d00}

@media (max-width:820px){
  .cols{grid-template-columns:1fr}.side .box:nth-of-type(3){display:none}
  .coming ol{columns:1}
  .filephoto{float:none;width:min(70%,260px);margin:0 auto 24px;transform:rotate(-1.5deg)}
  footer{grid-template-columns:1fr}.foot__r{justify-content:flex-start}
  .stamp{right:14px;top:auto;bottom:-16px;font-size:19px}
  .post--next{padding-bottom:44px}

  .hero h1{max-width:none}
  .post{grid-template-columns:100px 1fr}
  .pn{grid-template-columns:1fr}.pn a:last-child{text-align:left}
  .hero{margin-top:36px}.hero .pic{aspect-ratio:16/10}.hero h1{margin-top:14px;font-size:clamp(34px,9.5vw,44px)}.hero p{font-size:15px}.hero__act{margin-top:14px}
  .masthead{padding-top:12px;padding-bottom:10px}
  .brand small{font-size:12px;letter-spacing:.06em}
  .post{grid-template-columns:110px 1fr;gap:8px 14px}
  .post h2{font-size:22px;line-height:1.05}
  .more .post{grid-template-columns:80px 1fr}
  .burst{width:104px;height:104px;right:auto;left:-8px;top:6px;bottom:auto;font-size:13px;padding:17px}
  .body>p:first-of-type::first-letter{font-size:2.9em}
  .sheet .hero .pic{aspect-ratio:4/3}
}
/* reveal fallback (no scroll-driven animations): cards land on the stand as they scroll in */
@supports not (animation-timeline:view()){
.pre{opacity:0;transform:translateY(14px) rotate(-.6deg)}
.pre:focus-within{opacity:1;transform:none}
.pre.in{opacity:1;transform:none;transition:opacity .35s ease-out,transform .45s ease-out}
.post.pre.in:has(h2 a:hover){transform:translate(-2px,-2px)}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.pre{opacity:1;transform:none}}
@media print{.wrap{border:0;background:#fff}.masthead,nav,.burst,footer,.pn,.more{display:none}}

.sheet .body{position:relative;background:rgba(255,255,255,.55);outline:12px solid rgba(255,255,255,.55)}
.pagehead p{max-width:60ch}
.refs li a:not(.backref){display:inline-block;padding:10px 0}
.tagdir__alpha{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}.tagdir__alpha a{font:900 13px/1 Nunito,sans-serif;background:#000;color:#fff;padding:0;min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.tagdir__alpha a:hover{background:#d00}.tagdir h2.letter{font:400 34px/1 Bangers,cursive;margin:20px 0 8px;border-bottom:3px solid #000;width:100%}.tagdir__alpha{width:100%}
.sheet figure.hero figcaption{margin:8px 0 0;font:400 14px/1.4 Archivo,sans-serif;color:#222;text-wrap:pretty}.sheet figure.hero figcaption b{font:900 11px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.1em;background:#000;color:#fff;padding:3px 6px;margin-right:6px}
.pagehead p{text-transform:none;font-weight:700}
.starthere{display:none}@media (max-width:820px){.starthere{display:block;margin:0 0 18px;padding:12px 14px;border:3px solid #000;background:#fff}.starthere h2{font:400 26px/1 Bangers,cursive;text-transform:uppercase;margin:0 0 8px}.starthere ul{margin:0;padding:0;list-style:none}.starthere li a{display:block;min-height:44px;padding:10px 0;border-top:2px dotted #000;font:700 16px/1.3 Nunito,sans-serif;text-decoration:none;color:#000}.starthere li:first-child a{border-top:0}.starthere li a:hover{color:#d00}}
.sheet h1 small,.pagehead h1 small{display:block;font:700 18px/1.3 Nunito,sans-serif;text-transform:none;margin-top:6px}
.pic__cap{position:absolute;right:0;bottom:0;margin:0;font:700 11px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.08em;background:rgba(0,0,0,.8);color:#fff;padding:5px 8px}
@media (max-width:820px){.hero h1{margin-top:0}.hero .pic{margin-top:12px}.hero .pic{aspect-ratio:16/9}}
.whois{margin:14px var(--g) 0;font:700 15px/1.4 Nunito,sans-serif;max-width:60ch;position:relative;z-index:4}.whois a{color:#d00;display:inline-block;padding:4px 0;min-height:44px;line-height:36px}
@media (min-width:821px){.home>.hero{margin-top:40px}}
.tagdir__lbl{font:900 13px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.1em;align-self:center;margin-right:6px}
.sheet figure.hero figcaption b{display:block;width:max-content;margin:0 0 4px}

/* ============================================================
   PRESS RUN (overdrive, 2026-09-27)
   Two gestures. Navigation = the page turns: the picture you tapped
   shrinks in place into the story's photo slot, the headline flies
   with it as one piece of type and registers on landing, the masthead
   shortens, the white sheet rises from under. Story to story turns the
   whole leaf. Scroll = ink registering: boxes land on the stand as they
   arrive and their headlines snap the cyan/magenta plates true. Photos
   are screened at build time by halftone.py, one render per display
   size and density, so the rosette is real dots and not moire. Shared
   pieces are never crossfaded at two sizes (that reads as a misprint):
   one copy, scaled. Everything degrades to the plain page; reduced
   motion turns it all off.
   ============================================================ */
:root{--cyan:#00aeef;--mag:#e6007e}

/* --- 1. the page turns -------------------------------------- */
@view-transition{navigation:auto}
header.masthead{view-transition-name:mast}
.brand a{view-transition-name:brand}
.brand small{view-transition-name:ticker}
nav.top{view-transition-name:nav}
/* the picture is the shared piece; its frame (border, sticker, caption strip) is named so it leaves the
   root snapshot and only shows at the ends, drawn over the picture as on the page. in flight the border is
   the photo group's spread shadow. the frame's fill is clear so it never papers over the picture */
.hero .pic{background:transparent}
.home>.hero .pic{view-transition-name:frame}
.home>.hero .pic img{view-transition-name:photo}
.home>.hero h1{view-transition-name:headline}
.sheet .lede .pic{view-transition-name:frame}
.sheet .lede .pic img{view-transition-name:photo}
.sheet .lede h1{view-transition-name:headline}
.sheet .lede .k{view-transition-name:kick}
.sheet>.body{view-transition-name:sheet}
/* the phone shows the same crop on both pages, so the frame simply travels */
@media (max-width:820px){.sheet .lede .hero .pic{aspect-ratio:16/9;max-height:none}}

::view-transition{pointer-events:none;background:linear-gradient(to right,#ddd calc(100% - 3px),#000 0) left top/calc((100% - min(1280px,100%))/2 + 3px) 100% no-repeat,linear-gradient(to left,#ddd calc(100% - 3px),#000 0) right top/calc((100% - min(1280px,100%))/2 + 3px) 100% no-repeat,url(/assets/grain.jpg) center top/600px repeat #fff}
@media (min-width:1300px){::view-transition{background:linear-gradient(#ddd,#ddd) top/100% 24px no-repeat,linear-gradient(#000,#000) center 24px/min(1280px,100%) 3px no-repeat,linear-gradient(to right,#ddd calc(100% - 3px),#000 0) left top/calc((100% - 1280px)/2 + 3px) 100% no-repeat,linear-gradient(to left,#ddd calc(100% - 3px),#000 0) right top/calc((100% - 1280px)/2 + 3px) 100% no-repeat,url(/assets/grain.jpg) center 27px/600px repeat #fff}}
::view-transition-group(*){animation-duration:.42s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
::view-transition-group(brand){z-index:23}
::view-transition-group(nav){z-index:22}
::view-transition-group(ticker){z-index:21}
::view-transition-group(mast){z-index:20}
::view-transition-group(headline){z-index:14}
::view-transition-group(kick){z-index:14}
::view-transition-group(photo){z-index:12;box-shadow:0 0 0 5px #000;background:#000}
::view-transition-group(frame){z-index:13}
::view-transition-old(frame),::view-transition-new(frame){inline-size:100%;block-size:100%}
::view-transition-old(frame){animation:.07s ease-in both press-fade-out}
::view-transition-new(frame){animation:.16s ease-out .3s both press-fade-in}
::view-transition-group(sheet){z-index:5}
/* shared type and the red band: one copy, the incoming one, scaled from the old box to the new */
::view-transition-old(brand),::view-transition-old(nav),::view-transition-old(headline),::view-transition-old(mast){display:none}
::view-transition-new(brand),::view-transition-new(nav),::view-transition-new(headline),::view-transition-new(mast){animation:none;opacity:1}
/* both headlines break the same way, so fitting the incoming type to the box height keeps the glyph size continuous */
::view-transition-new(headline){inline-size:auto;block-size:100%}
::view-transition-new(mast){inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 0}
/* the wordmark's glyphs hang past its 44px line box, so it is anchored on its centre or it rides down */
::view-transition-new(brand){inset-block-start:50%;translate:0 -50%}
::view-transition-new(brand):only-child,::view-transition-new(nav):only-child,::view-transition-new(headline):only-child,::view-transition-new(mast):only-child{animation:.24s ease-out .12s both press-fade-in}
/* the picture: one copy, the one rendered at the larger size so the dots stay solid (the old one opening
   a story, the new one coming back), fitted to the shrinking or growing box; the other copy only takes
   over in the last hundred milliseconds, dot on dot */
::view-transition-image-pair(photo){overflow:clip}
::view-transition-old(photo),::view-transition-new(photo){inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 25%;mix-blend-mode:normal}
::view-transition-old(photo){animation:none;opacity:1}
::view-transition-new(photo){animation:.12s ease-out .3s both press-fade-in}
html:active-view-transition-type(back)::view-transition-old(photo){animation:.12s ease-in both press-fade-out}
html:active-view-transition-type(back)::view-transition-new(photo){animation:none;opacity:1}
::view-transition-new(photo):only-child{animation:.24s ease-out .12s both press-fade-in}
/* the sticker is part of the front page's frame snapshot: it goes with the frame in the first tenth of a second
   and slaps back on (its own slap keyframes) once the front page has landed. the price strip and the story's
   red kicker drop on the way out and print on the way in. */
::view-transition-old(ticker),::view-transition-old(kick){animation:.05s ease-in both press-fade-out}
::view-transition-new(ticker),::view-transition-new(kick){animation:.2s ease-out .16s both press-fade-in}
@keyframes press-fade-in{from{opacity:0}}
@keyframes press-fade-out{to{opacity:0}}
/* the rest of the old page is gone before the new page has any ink on it: no text over text */
::view-transition-old(root){animation:.06s ease-in both press-drop}
::view-transition-new(root){animation:.26s ease-out .14s both press-rise}
@keyframes press-drop{to{opacity:0;transform:translateY(6px)}}
@keyframes press-rise{from{opacity:0;transform:translateY(14px)}}
/* the white sheet rises from under the lede; going back it drops away first */
::view-transition-new(sheet){animation:.46s cubic-bezier(.2,.8,.2,1) .12s both press-sheet-in}
::view-transition-old(sheet){animation:.06s ease-in both press-sheet-out}
@keyframes press-sheet-in{from{transform:translateY(96px);opacity:0}45%{opacity:1}}
@keyframes press-sheet-out{to{transform:translateY(20px);opacity:0}}
/* story to story: the masthead holds and the leaf turns under it. the old leaf is fully gone before the new lands. */
html:active-view-transition-type(flip) :is(.brand a,nav.top,.brand small,.lede .pic,.lede .pic img,.lede h1,.lede .k,.sheet>.body){view-transition-name:none}
html:active-view-transition-type(flip)::view-transition-old(mast){display:block;animation:none;opacity:1}
html:active-view-transition-type(flip)::view-transition-new(mast){display:none}
html:active-view-transition-type(flip)::view-transition-old(root){animation:.24s cubic-bezier(.5,0,.75,0) both press-leaf-out;transform-origin:0 100%}
html:active-view-transition-type(flip)::view-transition-new(root){animation:.4s cubic-bezier(.2,.8,.2,1) .22s both press-leaf-in;transform-origin:100% 100%}
html:active-view-transition-type(flip):active-view-transition-type(back)::view-transition-old(root){animation-name:press-leaf-out-back;transform-origin:100% 100%}
html:active-view-transition-type(flip):active-view-transition-type(back)::view-transition-new(root){animation-name:press-leaf-in-back;transform-origin:0 100%}
@keyframes press-leaf-out{30%{opacity:1}to{transform:translateX(-44%) rotate(-2.4deg);opacity:0}}
@keyframes press-leaf-in{from{transform:translateX(44%) rotate(1.8deg);opacity:0}35%{opacity:1}}
@keyframes press-leaf-out-back{30%{opacity:1}to{transform:translateX(44%) rotate(2.4deg);opacity:0}}
@keyframes press-leaf-in-back{from{transform:translateX(-44%) rotate(-1.8deg);opacity:0}35%{opacity:1}}

/* --- 2. ink registering --------------------------------------- */
/* the lead headline prints off-register and snaps true. on a cold load, right away; after a page turn it
   flies in off-register and registers on landing, and the sticker slaps on once the page has settled */
.hero h1,.sheet .lede h1{animation:press-register .6s cubic-bezier(.2,.8,.2,1) .1s both}
html.turned :is(.hero h1,.sheet .lede h1){animation-delay:.42s}
html.turned .burst{animation-delay:.3s}
@keyframes press-register{from{text-shadow:-5px 0 0 var(--cyan),5px 0 0 var(--mag)}55%{text-shadow:-1px 0 0 var(--cyan),1px 0 0 var(--mag)}to{text-shadow:0 0 0 transparent,0 0 0 transparent}}
@supports (animation-timeline:view()){
  /* below the fold, every box lands on the stand as it scrolls in */
  .post,.box,.coming,.coupon,.theme,.psychic,.more>h2,.refs,.pn{animation:press-land linear backwards;animation-timeline:view();animation-range:entry 0% cover 35%}
  @keyframes press-land{from{opacity:0;transform:translateY(34px) rotate(-.7deg) scale(1.015)}45%{opacity:1}to{opacity:1;transform:none}}
  /* their headlines come in off-register and snap true */
  .post h2,.coming h2,.box .boxh,.theme h2,.more>h2{animation:press-register-scroll linear backwards;animation-timeline:view();animation-range:entry 0% cover 40%}
  @keyframes press-register-scroll{from{text-shadow:-6px 0 0 var(--cyan),6px 0 0 var(--mag)}65%{text-shadow:-1px 0 0 var(--cyan),1px 0 0 var(--mag)}to{text-shadow:0 0 0 transparent,0 0 0 transparent}}
  /* the photo plate is off by a hair too, then seats itself in its frame */
  .post .th{animation:press-plate-scroll linear backwards;animation-timeline:view();animation-range:entry 0% cover 40%}
  @keyframes press-plate-scroll{from{filter:drop-shadow(-5px 0 0 var(--cyan)) drop-shadow(5px 0 0 var(--mag))}65%{filter:drop-shadow(-1px 0 0 var(--cyan)) drop-shadow(1px 0 0 var(--mag))}to{filter:none}}
  .post .th img{animation:press-seat-scroll linear backwards;animation-timeline:view();animation-range:entry 0% cover 35%}
  @keyframes press-seat-scroll{from{transform:translate(-7%,0) scale(1.08)}}
}
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  .hero h1,.sheet .lede h1,.post,.box,.coming,.coupon,.theme,.psychic,.more>h2,.refs,.pn,.post h2,.coming h2,.box .boxh,.theme h2,.post .th,.post .th img{animation:none!important}
}

/* ============================================================================================
   THE CLIPPING (overdrive round two, 2026-09-27)
   Hover, focus or tab to a citation number and the reference is taped to the page beside it, so
   you never leave the sentence. Jumping to the references list draws a highlighter across the
   entry; the return arrow washes the paragraph you left. CSS anchor positioning, @starting-style,
   :target keyframes; no script. Browsers without anchor positioning keep the plain jump.
   ============================================================================================ */
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
.refs li,.cite{scroll-margin-top:22vh}
.refs li{padding:2px 6px;margin-left:-6px}
@keyframes hl-swipe{from{background-size:0 100%}}
.refs li:target,.body a.cite:target{background:linear-gradient(100deg,#ff0 0 93%,rgba(255,255,0,0) 97%) no-repeat 0 0/100% 100%;animation:hl-swipe .55s cubic-bezier(.2,.8,.2,1) both}
.body a.cite:target{animation-duration:.4s}
@keyframes cite-wash{0%{transform:scaleX(0);opacity:1}28%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.body p:has(.cite:target){position:relative;isolation:isolate}
.body p:has(.cite:target)::before{content:"";position:absolute;inset:-6px -10px;background:#ff0;z-index:-1;opacity:0;transform-origin:0 50%;animation:cite-wash 2.4s cubic-bezier(.2,.8,.2,1) both}
.body>p:first-of-type:has(.cite:target)::before{inset:0}
.clip{display:none}
@supports (anchor-name:--c) and (position-area:top) and (transition-behavior:allow-discrete){
  .clip{position:fixed;position-area:top;position-try-fallbacks:position-area(top span-right),position-area(top span-left),flip-block,position-area(bottom span-right),position-area(bottom span-left);position-visibility:anchors-visible;
    margin:0 0 2px 0;z-index:40;isolation:isolate;box-sizing:border-box;width:max-content;max-width:min(320px,calc(100vw - 32px));padding:14px 18px 13px;
    background:#fff url(/assets/grain.jpg) center/300px;border:2px solid #000;box-shadow:5px 6px 0 #000;
    font:700 15px/1.35 Nunito,sans-serif;color:#000;text-align:left;white-space:normal;
    opacity:0;transform:translateY(8px) rotate(-5deg) scale(.94);transform-origin:50% 100%;
    transition:opacity .18s ease,transform .36s cubic-bezier(.2,1.5,.35,1),display .36s allow-discrete}
  .body a.cite:hover+.clip,.body a.cite:focus-visible+.clip,.clip:hover,.clip:focus-within{display:block;opacity:1;transform:rotate(-2deg)}
  /* one clipping at a time: a keyboard-focused number yields while the pointer is on another */
  .body:has(a.cite:hover) a.cite:not(:hover):focus-visible+.clip:not(:hover,:focus-within){display:none;opacity:0}
  @starting-style{.body a.cite:hover+.clip,.body a.cite:focus-visible+.clip,.clip:hover,.clip:focus-within{opacity:0;transform:translateY(8px) rotate(-5deg) scale(.94)}}
  /* the tape */
  .clip::before{content:"";position:absolute;left:50%;top:-11px;width:68px;height:22px;transform:translateX(-50%) rotate(-3deg);background:rgba(255,232,110,.78);border:1px solid rgba(0,0,0,.18);mix-blend-mode:multiply;z-index:2}
  /* the bridge: keeps the hover alive while the pointer crosses the gap to the clipping */
  .clip::after{content:"";position:absolute;inset:-14px -8px;z-index:-1}
  .clip b{display:block;font:900 11px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.1em;color:#d00;margin-bottom:6px}
  .clip a{display:inline-block;padding:4px 0;color:#000;text-decoration:underline;text-decoration-color:#d00;text-decoration-thickness:2px;text-underline-offset:3px}
  .clip a:hover{background:#ff0}
  .clip small{display:block;margin-top:5px;color:#444;font:500 13px/1 Plex,monospace}
  .clip .backref{display:none}
}
@media print{.clip{display:none!important}}

/* ============================================================================================
   THE WHOLE PHOTO (2026-09-27)
   Click the story picture and it lifts out of its frame into a full-screen print on a light table,
   uncropped, with the photo desk's description under it. Native <dialog> (focus trap, Esc, backdrop);
   the lift is a same-document view transition; without script the link opens the JPEG itself.
   html.lit is on while the print is out or in flight; lit--open / lit--shut name the direction.
   ============================================================================================ */
.lede .pic .print-open{cursor:zoom-in}
.print{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:#fff;overflow:auto;overscroll-behavior:contain}
.print::backdrop{background:radial-gradient(ellipse 75% 60% at 50% 42%,rgba(255,248,225,.14),rgba(255,248,225,0) 72%) #1a1816}
.print[open]{display:grid}
.print__in{display:grid;grid-template-rows:auto minmax(0,1fr);gap:12px;box-sizing:border-box;min-height:100%;padding:14px clamp(14px,3vw,32px) 16px;cursor:zoom-out}
.print__bar{display:flex;justify-content:space-between;align-items:center;gap:12px 20px;flex-wrap:wrap;cursor:default}
.print__k{margin:0;font:900 11px/1.6 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.12em;color:#ff0}
.print__k b{display:inline-block;background:#fff;color:#000;padding:4px 7px;margin-right:8px;line-height:1}
.print__close{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;background:#ff0;color:#000;border:3px solid #000;font:900 13px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.1em;cursor:pointer}
.print__close small{font:500 11px/1 Plex,monospace;letter-spacing:.08em;color:#333;border:1px solid #333;padding:2px 4px;border-radius:3px}
.print__close:hover{background:#fff}
.print__close:focus-visible{outline:4px solid #ff0;outline-offset:4px}
.print__fig{margin:0;min-height:0;display:grid;grid-template-rows:auto auto;grid-template-columns:minmax(0,max-content);align-content:center;justify-content:center;justify-items:start;gap:34px;padding:15px 15px 0}
.print__frame{display:block;min-height:0;max-width:100%;line-height:0;border:5px solid #000;box-shadow:0 0 0 15px #ece7dc,0 30px 50px -8px rgba(0,0,0,1),0 10px 18px rgba(0,0,0,.75);background:#000}
.print__frame img{display:block;width:auto;height:auto;max-width:min(1200px,calc(100vw - 2*clamp(14px,3vw,32px) - 40px));max-height:calc(100dvh - 240px)}
.print figcaption{margin:0 0 0 -15px;max-width:min(100%,72ch);font:400 15px/1.5 Archivo,sans-serif;color:#efefef;text-wrap:pretty;cursor:default;display:grid;grid-template-columns:auto minmax(0,1fr);gap:0 12px;align-items:start}
.print figcaption b{display:inline-block;justify-self:start;font:900 11px/1 Nunito,sans-serif;text-transform:uppercase;letter-spacing:.1em;background:#ff0;color:#000;padding:5px 7px;margin-top:2px;white-space:nowrap}
@media (max-width:640px){.print__in{padding:10px 14px 14px}.print__frame{box-shadow:0 0 0 8px #ece7dc,0 18px 30px -10px rgba(0,0,0,.95),0 6px 10px rgba(0,0,0,.6)}.print__frame img{max-width:calc(100vw - 28px - 26px);max-height:calc(100dvh - 250px)}.print figcaption{font-size:14px;grid-template-columns:1fr;gap:6px;margin-left:-8px;max-width:calc(100% + 8px)}.print__fig{gap:22px;padding:8px 8px 0}.print__k{max-width:22ch}}
@media (max-height:520px){.print__k{display:none}.print__in{padding:8px 12px 10px;gap:8px}.print__fig{gap:10px}.print__frame img{max-height:calc(100dvh - 130px)}.print figcaption{font-size:13px}}
html:has(.print[open]){overflow:hidden}
/* the lift: only the photo travels; everything else on the page is one sheet that dims, so nothing
   prints across the picture in flight. The slot's picture is the source of the open, the print the
   source of the close. */
html.lit :is(header.masthead,.brand a,.brand small,nav.top,.lede .pic,.lede h1,.lede .k,.sheet>.body){view-transition-name:none}
html:has(.print[open]) .lede .pic img{visibility:hidden;view-transition-name:none}
.print[open] .print__frame img{view-transition-name:photo}
.print[open] .print__in{view-transition-name:print}
html.lit::view-transition-group(print){z-index:10}
html.lit::view-transition-group(photo){animation-name:-ua-view-transition-group-anim-photo,press-mat;animation-duration:.5s;animation-timing-function:cubic-bezier(.5,0,.15,1);animation-fill-mode:both}
@keyframes press-mat{from{box-shadow:0 0 0 5px #000,0 0 0 5px #ece7dc,0 0 0 0 rgba(0,0,0,0)}to{box-shadow:0 0 0 5px #000,0 0 0 20px #ece7dc,0 30px 50px -8px rgba(0,0,0,1)}}
@keyframes press-mat-off{from{box-shadow:0 0 0 5px #000,0 0 0 20px #ece7dc,0 30px 50px -8px rgba(0,0,0,1)}to{box-shadow:0 0 0 5px #000,0 0 0 5px #ece7dc,0 0 0 0 rgba(0,0,0,0)}}
html.lit::view-transition-old(photo),html.lit::view-transition-new(photo){animation:none;opacity:1;object-fit:cover;object-position:50% 25%;mix-blend-mode:normal}
html.lit--open::view-transition-old(photo){display:none}
html.lit--shut::view-transition-new(photo){display:none}
html.lit--open::view-transition-old(root){animation:.14s ease-out both press-fade-out}
html.lit--open::view-transition-new(root){animation:.14s ease-out both press-fade-in}
html.lit--open::view-transition-new(print){animation:.22s ease-out .3s both press-fade-in}
html.lit--shut::view-transition-group(photo){animation-name:-ua-view-transition-group-anim-photo,press-mat-off;animation-duration:.42s}
html.lit--shut::view-transition-old(print){animation:.1s ease-in both press-fade-out}
html.lit--shut::view-transition-old(root){animation:.16s ease-in .24s both press-fade-out}
html.lit--shut::view-transition-new(root){animation:.16s ease-out .24s both press-fade-in}
@media print{.print{display:none!important}}