/* SIGNAL 2002, PRINT A, the rack. SILVER's live palette only (silver.py LIVE): royal blue wells, dot grid, white type, orange marker. */
.pf{--hole:#1a3a9e;--lcd:#ffffff;--lcd-ghost:rgba(255,255,255,.12);--lcd-dim:#9fb6ff;--amber:#ff8a1e;--sel:#0b1f6e;--ink:#081a5e}
.pf .dh{background:linear-gradient(180deg,#2448b8 0,#173193 100%)}
.pf .dh::after{background:radial-gradient(circle,rgba(0,8,50,.45) 0 .7px,transparent 1px) 0 0/3px 3px}
.pf .dh::before{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,40,.6);border-radius:inherit;z-index:2}
.pf .seg__lit{text-shadow:0 0 4px rgba(200,220,255,.6)}
.pf .dk:disabled{cursor:default;background-image:none}
.pf .tbc{color:var(--amber)}
.pf .pf__title .seg--title{font-family:"DSEG14",var(--dot);position:absolute;font-size:34px;left:16px;top:8px}
.pf .pf__title .seg--title .seg__lit{left:0;right:auto;white-space:pre}
.pf__title .lcd__sub{position:absolute;left:16px;right:16px;bottom:7px;display:flex;gap:24px;font:400 9px var(--px);color:var(--lcd-dim)}
.pf__title .lcd__sub span:last-child{margin-left:auto}

/* the reader strip and counter */
.pf__strip{padding:12px 18px;display:flex;flex-direction:column;justify-content:center;gap:6px}
.pf__sname{font:400 22px var(--px);color:#fff;letter-spacing:2px;position:relative;z-index:1}
.pf__swhat{font-size:22px;line-height:1;color:var(--lcd-dim);position:relative;z-index:1}
.pf__count{display:flex;align-items:center;justify-content:center;gap:12px}
.pf__count .seg{font-size:34px}

/* the page well: one leaf at a time; a turn is a stepped wipe, four frames */
.pf__page{display:grid;place-items:center}
.pf__leaf{position:absolute;inset:14px;display:grid;place-items:center;z-index:1}
.pf__leaf.is-in-r{animation:pfwipe-r .28s steps(4,end) both}
.pf__leaf.is-in-l{animation:pfwipe-l .28s steps(4,end) both}
@keyframes pfwipe-r{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(0 0 0 0)}}
@keyframes pfwipe-l{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}

/* a cover: the still, its masthead lettered over the paper */
.pf__cover{position:relative;display:block;height:100%;aspect-ratio:3/4;overflow:hidden;box-shadow:0 0 0 1px rgba(0,8,50,.6)}
.pf__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pf__blank{position:absolute;inset:0;background:#173193}
.pf__blank::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(255,255,255,.18) 0 .8px,transparent 1.2px) 0 0/6px 6px}
.pf__mast{position:absolute;left:6%;right:6%;top:4%;font:400 9cqw var(--px);line-height:.9;letter-spacing:.02em}
.pf__line{position:absolute;left:6%;top:calc(4% + 11cqw);font:400 6cqw var(--dot);line-height:1}
.pf__corner{position:absolute;right:6%;top:calc(4% + 11cqw);font:400 6cqw var(--dot);line-height:1}
.pf__tbc{position:absolute;left:6%;right:6%;bottom:6%;font:400 6cqw var(--dot);color:var(--amber)}
.pf__cover{container-type:inline-size}
.pf__cover--dark .pf__mast,.pf__cover--dark .pf__line,.pf__cover--dark .pf__corner{color:#05070d}
.pf__cover--light .pf__mast,.pf__cover--light .pf__line,.pf__cover--light .pf__corner{color:var(--ink)}
.pf__blank ~ .pf__mast,.pf__blank ~ .pf__line{color:#fff}

/* contents and picture pages, in the well's own palette */
.pf__sheet{width:100%;height:100%;position:relative}
.pf__contents{padding:22px 26px;display:flex;flex-direction:column;gap:10px}
.pf__kick{font:400 10px var(--px);color:var(--lcd-dim);letter-spacing:1px}
.pf__contents h3{font:400 30px var(--dot);color:#fff;line-height:1;font-weight:400}
.pf__contents ol{list-style:none;margin-top:10px;border-top:1px solid #3b55a8}
.pf__contents li{display:flex;justify-content:space-between;gap:20px;padding:10px 0;border-bottom:1px solid #3b55a8;font-size:24px;line-height:1.05;color:#fff}
.pf__contents li em{font-style:normal;color:var(--lcd-dim);white-space:nowrap}
.pf__contents li em.tbc{color:var(--amber)}
.pf__pic{display:flex;flex-direction:column;gap:10px}
.pf__pic img{width:100%;flex:1;min-height:0;object-fit:cover;box-shadow:0 0 0 1px rgba(0,8,50,.6)}
.pf__pic figcaption{font-size:21px;line-height:1.05;color:#fff;max-width:60ch}

/* the rack */
.pf__slot{position:absolute;border:0;padding:0;background:transparent;cursor:pointer;border-radius:6px;overflow:hidden}
.pf__slot .pf__cover{width:100%;height:auto}
.pf__slot.is-out .pf__cover{visibility:hidden}
.pf__slot.is-out::after{content:"IN THE READER";position:absolute;left:0;right:0;top:38%;text-align:center;font:400 9px var(--px);color:#5d79d6}
.pf__slot:focus-visible{outline:2px dotted var(--amber);outline-offset:3px}
.pf__slot:hover:not(.is-out) .pf__cover{transform:translateY(-6px)}
.pf__lip{position:absolute;pointer-events:none;z-index:2}
.pf__fly{position:absolute;z-index:3;pointer-events:none}
.pf__fly .pf__cover{width:100%;height:100%}

/* what is in the reader, beside the rack */
.pf__info{padding:14px 18px}
.pf__iname{font:400 15px var(--px);color:#fff;letter-spacing:1px;position:relative;z-index:1;display:flex;justify-content:space-between;align-items:baseline}
.pf__info dl{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;column-gap:20px;position:relative;z-index:1}
.pf__info dl div{display:flex;justify-content:space-between;gap:10px;padding:4px 0;border-bottom:1px solid #3b55a8;font-size:20px;line-height:1}
.pf__info dt{font:400 9px var(--px);color:var(--lcd-dim);align-self:center}
.pf__info dd{color:#fff;text-align:right}
.pf__info dd.tbc{color:var(--amber)}

/* phone */
.pf.is-phone .pf__title .seg--title{font-size:22px;left:12px;top:6px}
.pf.is-phone .pf__title .lcd__sub{font-size:8px;left:12px;right:12px;bottom:5px;gap:10px}
.pf.is-phone .pf__title .lcd__sub span:nth-child(2){display:none}
.pf.is-phone .pf__leaf{inset:10px}
.pf.is-phone .pf__contents{padding:14px 14px;gap:6px}
.pf.is-phone .pf__contents h3{font-size:24px}
.pf.is-phone .pf__contents li{font-size:20px;flex-direction:column;gap:4px}
.pf.is-phone .pf__pic img{flex:none;aspect-ratio:4/3;height:auto}
.pf.is-phone .pf__pic figcaption{font-size:19px}
.pf.is-phone .pf__count .seg{font-size:26px}
.pf.is-phone .pf__count{gap:6px}
.pf.is-phone .pf__slot.is-out::after{font-size:7px;top:30%}
/* contents rows that open their page: a thumbnail of the picture, the line, its page */
.pf__contents li button{all:unset;cursor:pointer;display:grid;grid-template-columns:150px 1fr auto;grid-template-rows:auto auto;column-gap:18px;row-gap:6px;width:100%;align-items:start}
.pf__contents li:has(button){display:block}
.pf__contents li button img{grid-row:1/3;width:150px;aspect-ratio:4/3;object-fit:cover;box-shadow:0 0 0 1px rgba(0,8,50,.6)}
.pf__contents li button em{grid-column:2;grid-row:2}
.pf__contents li button b{grid-column:3;grid-row:1;color:var(--lcd-dim);font-weight:400}
.pf__contents li button:hover span,.pf__contents li button:focus-visible span{color:var(--lcd-dim)}
.pf__contents li button:focus-visible{outline:2px dotted var(--amber);outline-offset:4px}
.pf.is-phone .pf__contents li button{grid-template-columns:96px 1fr;column-gap:10px}
.pf.is-phone .pf__contents li button img{width:96px}
.pf.is-phone .pf__contents li button b{display:none}
.pf.is-phone .pf__contents li button span{font-size:18px}
.pf__cover.is-plate{box-shadow:none}
.pf__feedh{margin-top:18px}
.pf__feed{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
.pf__feed li{display:flex;flex-direction:column;gap:6px;font-size:19px;line-height:1.05;color:#fff}
.pf__feed img{width:100%;aspect-ratio:4/3;object-fit:cover;box-shadow:0 0 0 1px rgba(0,8,50,.6)}
.pf__feed em{font-style:normal;color:var(--lcd-dim)}
.pf.is-phone .pf__feed{gap:8px}
.pf.is-phone .pf__feed li{font-size:15px}
.pf.is-phone .pf__feedh{margin-top:8px;font-size:8px}
.pf.is-phone .pf__feed img{aspect-ratio:16/9}
.pf.is-phone .pf__feed li{font-size:14px;line-height:1}
.pf.is-phone .pf__contents h3{font-size:22px}
.pf.is-phone .pf__contents ol{margin-top:4px}
.pf.is-phone .pf__contents li{padding:6px 0}

/* ---- PAPER (Louis, 6 Oct: "more like magazine style, less tech futuristic"). The wells are rendered paper stock; this is the
   ink laid on it. Paper white from the render, near-black ink, royal blue ink for rules and marks only, orange only for to confirm.
   Type: Georgia and Arial, the period's own system faces (nothing loaded), Courier New for the photocopied zine. */
.pf{--pink:#1b1b1b;--prule:#1a3a9e;--pser:Georgia,"Times New Roman",serif;--psans:Arial,Helvetica,sans-serif}
.pf .dh.pp{background:transparent;color:var(--pink)}
.pf .dh.pp::after,.pf .dh.pp::before{display:none}
.pf .pp .tbc{color:var(--amber)}
.pr__sc{font:700 10px var(--psans);letter-spacing:.12em;text-transform:uppercase;color:var(--prule)}
/* reader strip: the masthead line printed on the paper */
.pf__strip.pp{display:flex;flex-direction:row;align-items:baseline;justify-content:space-between;padding:0 22px;border:0}
.pr__sname{font:700 34px/1 var(--pser);letter-spacing:-.01em;color:var(--pink)}
.pr__swhat{font:400 15px var(--pser);color:#4a4a4a}
.pf__strip.pp{align-items:center}
/* folio well */
.pf__count.pp{display:flex;align-items:center;justify-content:center}
.pr__fol{font:400 22px var(--pser);color:var(--pink)}
.pr__of{font-style:italic;color:#555}
/* the sheet */
.pf__page.pp .pf__leaf{inset:0}
.pr__sheet{position:relative;width:100%;height:100%;padding:18px 24px 30px;display:flex;flex-direction:column;color:var(--pink);font-family:var(--pser)}
.pr__sheet--cover{display:grid;place-items:center;padding:16px}
.pr__sheet--cover .pf__cover{box-shadow:2px 3px 0 rgba(0,0,0,.18),0 0 0 1px rgba(0,0,0,.25)}
.pr__head{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--prule);padding-bottom:5px}
.pr__mast{font:700 13px var(--psans);letter-spacing:.14em;text-transform:uppercase}
.pr__meta{font:italic 400 13px var(--pser);color:#444}
.pr__hl{font:700 46px/1 var(--pser);letter-spacing:-.02em;margin:14px 0 10px}
.pr__toc{list-style:none;border-top:1px solid var(--pink)}
.pr__toc li{display:flex;justify-content:space-between;gap:16px;padding:8px 0;border-bottom:1px solid #bbb;font:400 18px/1.2 var(--pser)}
.pr__toc li button{all:unset;cursor:pointer;display:grid;grid-template-columns:150px 1fr auto;gap:16px;width:100%;align-items:start}
.pr__toc li button:focus-visible{outline:2px dotted var(--prule);outline-offset:3px}
.pr__toc li button:hover .pr__line{text-decoration:underline;text-decoration-color:var(--prule)}
.pr__txt{display:flex;flex-direction:column;gap:6px}
.pr__line{font:700 22px/1.15 var(--pser)}
.pr__cr{font:700 10px var(--psans);letter-spacing:.12em;text-transform:uppercase;color:#333}
.pr__pn{font:700 30px/1 var(--pser);color:var(--prule)}
.pr__sec{margin-top:16px;padding-top:6px;border-top:2px solid var(--prule);font:700 10px var(--psans);letter-spacing:.12em;text-transform:uppercase}
.pr__feed{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
.pr__feed li{display:flex;flex-direction:column;gap:6px}
.pr__fh{font:700 16px/1.18 var(--pser)}
.pr__cap{margin-top:8px;font:400 15px/1.35 var(--pser);max-width:60ch}
.pr__folio{position:absolute;left:24px;right:24px;bottom:9px;display:flex;justify-content:space-between;font:400 11px var(--psans);letter-spacing:.08em;color:#555;border-top:1px solid #bbb;padding-top:4px}
/* pictures: glossy, clean / photocopied, grey toner and a second pass a hair off register */
.pr__pic{position:relative;display:block;overflow:hidden;aspect-ratio:4/3}
.pr__pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pr__pic--full{flex:1;min-height:0;aspect-ratio:auto}
.pr__pic.is-gloss{box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.pr__pic.is-copy img{filter:grayscale(1) contrast(1.9) brightness(1.08)}
.pr__pic.is-copy .pr__reg{transform:translate(2px,1px);mix-blend-mode:multiply;opacity:.35}
.pr__sheet.is-copy{font-family:"Courier New",Courier,monospace}
.pr__sheet.is-copy .pr__hl,.pr__sheet.is-copy .pr__line{font-family:"Courier New",Courier,monospace;color:#2a2a2a;text-shadow:1px 0 0 rgba(0,0,0,.25)}
.pr__sheet.is-copy .pr__cap{font-family:"Courier New",Courier,monospace;color:#2a2a2a}
/* the facts well, printed */
.pf__info.pp{padding:12px 20px}
.pr__ihead{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid var(--prule);padding-bottom:5px}
.pr__iname{font:700 24px/1 var(--pser);color:var(--pink)}
.pr__spec{display:grid;grid-template-columns:1fr 1fr;column-gap:24px;margin-top:6px}
.pr__spec div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:5px 0;border-bottom:1px solid #bbb}
.pr__spec dd{font:400 16px var(--pser);text-align:right;color:var(--pink)}
/* phone */
.pf.is-phone .pr__sheet{padding:12px 14px 24px}
.pf.is-phone .pr__hl{font-size:28px;margin:8px 0 6px}
.pf.is-phone .pr__toc li button{grid-template-columns:90px 1fr auto;gap:10px}
.pf.is-phone .pr__line{font-size:16px}
.pf.is-phone .pr__pn{font-size:22px}
.pf.is-phone .pr__feed{gap:10px}
.pf.is-phone .pr__fh{font-size:12px}
.pf.is-phone .pr__sec{margin-top:8px}
.pf.is-phone .pr__cap{font-size:13px}
.pf.is-phone .pr__folio{left:14px;right:14px;bottom:6px}
.pf.is-phone .pr__fol{font-size:20px}
.pf.is-phone .pr__meta{font-size:11px}
.pf .pf__info .pr__spec dt{font:700 10px var(--psans);letter-spacing:.12em;text-transform:uppercase;color:var(--prule);align-self:baseline}
.pf .pf__info .pr__spec div{border-bottom:1px solid #bbb;font-size:inherit}
.pf .pf__info .pr__spec dd{font:400 17px var(--pser);color:var(--pink)}
.pf .pf__info .pr__spec dd .tbc{font:700 11px var(--psans);letter-spacing:.1em;text-transform:uppercase}