/* ==========================================================================
   Libre Zine — a printed-zine reader for Ghost
   Values ported from the design mockup; keep them in step with it.
   ========================================================================== */

@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/anton-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/pt-serif-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'PT Serif';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/pt-serif-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'PT Serif';font-style:italic;font-weight:400;font-display:swap;src:url('../fonts/pt-serif-latin-400-italic.woff2') format('woff2')}
@font-face{font-family:'Nothing You Could Do';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/nothing-you-could-do-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Neuton';font-style:normal;font-weight:700;font-display:swap;src:url('../fonts/neuton-latin-700-normal.woff2') format('woff2')}

@property --i { syntax: "<number>"; inherits: true; initial-value: 0; }

html, body { margin: 0; padding: 0; background: #ffffff; }
/* only the paginated reader locks the viewport */
body.is-zine { overflow: hidden; }
* { box-sizing: border-box; }
a { color: #1a1ae0; text-decoration: none; }
a:hover { color: #ff17c6; }
::selection { background: #d6d400; color: #14120f; }

/* --------------------------------------------------------------------------
   Stage
   -------------------------------------------------------------------------- */

.zine{
  --cy:#00d8d3; --mg:#e55dda; --yl:#dedd00; --gr:#00d94f;
  --ink:#191712; --paper:#e9e6df; --bl:#004fb4; --gn:#00bb00; --rd:#c75100;
  --tilt:.8; --bar:82px; --fr:1.4724; --pw:50%;
  /* fixed, so anything a content script appends to the body cannot shove the
     sheets down the page */
  position:fixed; inset:0; width:100%; height:100vh; height:100dvh;
  overflow:hidden; touch-action:pan-y;
  background:#ffffff; color:var(--ink);
  font-family:'PT Serif',Georgia,serif;
}

/* palettes (theme setting) */
.zine[data-palette="riso"]{ --cy:#f26d3d; --mg:#e0245e; --yl:#e8b400; --gr:#7a9a2e;
  --rd:#c03a10; --gn:#8a7a00; --bl:#7a2a3a; }
.zine[data-palette="photocopy"]{ --cy:#4a4a4a; --mg:#111111; --yl:#9a9a9a; --gr:#2b2b2b;
  --rd:#2b2b2b; --gn:#3d3d3d; --bl:#1c1c1c; }

/* texture toggles (theme settings) */
.zine[data-paper="off"]{ --tPaper:0 }
.zine[data-inkbleed="off"]{ --tInk:normal; --tInkF:none }
.zine[data-crease="off"]{ --tCrease:0 }
.zine[data-grunge="off"]{ --tShade:0 }





.zine__barshade{
  position:absolute; left:0; right:0; bottom:0; height:var(--bar,82px);
  z-index:66; pointer-events:none;
  opacity:var(--tShade,.672); mix-blend-mode:multiply; background:#000000;
}

.zine__stage{ position:absolute; left:0; right:0; top:0; bottom:0 }

.zine__frame{
  position:absolute; left:50%; bottom:var(--bar,82px); transform:translateX(-50%);
  /* Viewport units rather than percentages, so the same expression can drive the
     width; and the width is rounded to a whole pixel. Left on a fraction, the
     frame puts the join between the paper and the blackout halfway across a
     pixel, which prints as a pale hairline no amount of overlap can fix. */
  --sheet-h:min(calc(100dvh - var(--bar,82px)), calc(100vw / var(--fr,1.4724)));
  height:var(--sheet-h);
  width:round(down, calc(var(--sheet-h) * var(--fr,1.4724)), 2px);
  background:#ffffff;
}

.zine__track{
  position:absolute; inset:0;
  will-change:transform; backface-visibility:hidden;
  transition:transform .56s cubic-bezier(.25,.6,.28,1);
  transform:translateX(var(--trackX,0%));
}
/* first paint: no slide, and nothing shown until the pages have been laid out */
.zine:not(.is-ready) .zine__track{ transition:none; opacity:0 }

/* One sheet of paper for the whole surface. It sits inside the track, so its
   grain travels with the pages; it overhangs the book by a screenful each side
   so the margins are printed on the same moving sheet rather than a fixed one,
   which made the join visible whenever a page turned. The tile stays exactly
   one screen wide, so the grain keeps its phase with the spreads. */
.zine__paperstrip{
  position:absolute; top:0; left:-100%; width:var(--sheetW,750%);
  /* down past the frame so the strip under the controls is the same sheet, not
     a patch with its own grain */
  height:calc(100% + var(--bar,82px));
  z-index:0; pointer-events:none; opacity:var(--tPaper,.55);
  background:url('../img/paper.jpg') 0 0/var(--sheetTile,13.3333%) 100% repeat-x;
}

.zine__crease{
  position:absolute; top:0; left:0; width:var(--bookW,550%); height:98%;
  z-index:4; pointer-events:none;
  background:url('../img/fold-crease.jpg') var(--creaseX,0px) 0/var(--creaseW,18.1818%) 100% repeat-x;
  mix-blend-mode:multiply; opacity:var(--tCrease,.55);
}

/* Wear is printed a page at a time rather than a book at a time, so the sheet
   can be turned over from one spread to the next. Each page carries half the
   image — the framing the single book-wide layer used to give — and both leaves
   of every second spread are flipped together, keeping the grain continuous
   across the fold while no two consecutive spreads wear alike. */
.zine__wear{
  position:absolute; top:0; height:100%;
  width:var(--pw,50%); left:calc(var(--s,0) * var(--pw,50%));
  z-index:5; pointer-events:none;
  /* Clipped rather than balanced. Inverted, this plate averages 69 at the sheet
     edges and 239 across the middle; contrast(2.6) drives the first to 0 and the
     second to 255. So the edge prints as pure black and the middle as pure white
     — the same ink as the blackout beside it, at the same opacity, which makes
     the two match by construction instead of by tuning. */
  opacity:var(--tShade,.672); mix-blend-mode:multiply;
  /* the invert and the clipping contrast are baked into the file: doing them
     live meant 29 filtered layers re-rasterising on every page turn */
  background:url('../img/grunge.jpg') no-repeat;
  background-size:var(--wearW,200%) 100%;
  background-position:var(--wearX,0%) 0;
}
.zine__wear--flipped{ transform:scaleY(-1) }

.zine__edge{
  position:absolute; top:0; width:100%; height:100%; z-index:5; pointer-events:none;
  opacity:var(--tShade,.672); mix-blend-mode:multiply; background:#000000;
}
.zine__edge--start{ left:-100% }
.zine__edge--end{ left:var(--bookW,550%) }

/* --------------------------------------------------------------------------
   A page
   -------------------------------------------------------------------------- */

.pg{
  position:absolute; top:0; height:100%;
  width:var(--pw,50%); left:calc(var(--s,0) * var(--pw,50%));
  container-type:size;
  overflow-y:auto;
  mix-blend-mode:var(--tInk,multiply);
  filter:var(--tInkF,blur(.6px) contrast(.96));
  padding:clamp(22px,5.6cqh,72px);
  display:flex; flex-direction:column; justify-content:safe center;
  gap:var(--gap,clamp(10px,2.2cqh,30px));
  background:none;
}
.pg--tight{ --gap:clamp(8px,1.7cqh,22px) }
.pg--article{ --gap:12px }
.pg--grid{
  display:grid; grid-template-columns:1fr 1fr; align-content:safe center;
  gap:clamp(10px,2cqh,28px) 16px;
}

/* --------------------------------------------------------------------------
   Ink shorthands
   -------------------------------------------------------------------------- */

.z-kicker{
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:#8a8478;
}
.z-kicker--wide{ letter-spacing:.18em }
.z-kicker--narrow{ letter-spacing:.14em }
.z-hand{
  font-family:'Nothing You Could Do',cursive; color:#000080;
  font-size:clamp(18px,2.2cqh,24px);
}
.z-h2{
  margin:0; font-family:Anton,Impact,sans-serif;
  font-size:clamp(30px,7.4cqh,72px); line-height:.9; text-transform:uppercase;
}

/* the CMYK plates sit a hair out of register, and further out on hover */
.z-shift{
  display:inline-block; mix-blend-mode:multiply;
  transition:transform .18s ease;
}
.z-shift--1{ color:var(--mg); transform:translate(calc(-1 * var(--dx,0px)), calc(-1 * var(--dx,0px))) }
.z-shift--2{ color:var(--cy); transform:translate(var(--dx,0px), calc(-1 * var(--dx,0px))) }
.z-shift--3{ color:var(--yl); transform:translate(calc(-1 * var(--dx,0px)), var(--dx,0px)) }

/* --------------------------------------------------------------------------
   Cover
   -------------------------------------------------------------------------- */

.z-masthead{
  position:relative; align-self:center; margin:0 0 .1em;
  font-family:Anton,Impact,sans-serif; font-size:clamp(40px,min(11.4cqh,23cqw),132px);
  line-height:.951; text-transform:uppercase; transform:rotate(-5.9deg);
  max-width:100%;
}
.z-masthead span{ display:block; filter:blur(.012em) }
.z-masthead span:nth-child(1){ color:var(--cy) }
.z-masthead span:nth-child(2){ color:var(--yl) }
.z-masthead span:nth-child(3){ color:var(--mg) }
.z-masthead__hand{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%) rotate(5.9deg);
  font-family:'Nothing You Could Do',cursive; font-size:.48em; line-height:1;
  color:#000080; opacity:.834; text-transform:none; white-space:nowrap;
}
.z-issueline{
  display:flex; flex-wrap:wrap; justify-content:center; gap:8px 20px;
  font-family:'IBM Plex Mono',monospace; font-size:clamp(11px,1.7cqh,15px);
  letter-spacing:.14em; text-transform:uppercase; color:#6b665c;
  margin-top:clamp(14px,3vw,40px);
}
.z-dek{
  max-width:40ch; align-self:center; text-align:center; margin:0;
  font-size:clamp(15px,2.7cqh,22px); line-height:1.5; color:#3a352c;
  text-wrap:pretty;
}

.z-portrait{
  position:relative; align-self:center; margin:0;
  width:min(100%, calc(47cqh * var(--ratio,1)));
  aspect-ratio:var(--ratio,1);
}
.z-portrait img{ object-position:50% 35% }

.z-coverlink{ display:block; color:var(--ink); cursor:pointer; transition:transform .18s ease }
.z-coverlink:hover{ --dx:10px; color:var(--ink) }
.z-coverlink:active{ --dx:0px; transform:translateY(3px) scale(.99) }
.z-coverhead{
  margin:0; font-family:Anton,Impact,sans-serif;
  font-size:clamp(24px,5.6cqh,54px); line-height:1.02; text-transform:uppercase;
}
.z-lede{ margin:0; font-size:clamp(15px,2.7cqh,22px); line-height:1.5; text-align:justify }
.z-continues{
  margin:0; text-align:center;
  font-family:'Nothing You Could Do',cursive; font-size:clamp(17px,3.4cqh,28px);
  color:#000080; transform:rotate(calc(var(--tilt,1) * -1.2deg));
}

/* --------------------------------------------------------------------------
   Table of contents
   -------------------------------------------------------------------------- */

.z-toc{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(4px,1.2cqh,12px) clamp(16px,3cqh,28px);
  margin-top:clamp(2px,.9cqh,8px);
}
.z-toc__item{
  display:flex; flex-direction:column; gap:5px; padding:6px 0;
  color:var(--ink); cursor:pointer;
  transform:rotate(calc(var(--tilt,1) * var(--rot,0) * 1deg));
}
.z-toc__item:hover{ --dx:4px; --i1:var(--cy); --i2:var(--yl); color:var(--ink) }
.z-toc__item:nth-child(4n+2):hover{ --i1:var(--mg); --i2:var(--yl) }
.z-toc__item:nth-child(4n+3):hover{ --i1:var(--cy); --i2:var(--mg) }
.z-toc__num{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em; color:#8a8478 }
.z-toc__title{
  font-family:Anton,Impact,sans-serif; font-size:clamp(15px,2.5cqh,30px);
  line-height:.98; text-transform:uppercase; color:transparent;
  position:relative; display:block; width:100%;
}
.z-toc__title > span:first-child{ visibility:hidden }
.z-toc__plate{
  position:absolute; left:0; top:0; width:100%; mix-blend-mode:multiply;
  transition:transform .2s ease, color .2s ease;
}
.z-toc__plate--1{ color:var(--i1,var(--ink)); transform:translate(var(--dx,0px), calc(-1 * var(--dx,0px))) }
.z-toc__plate--2{ color:var(--i2,var(--ink)); transform:translate(calc(-1 * var(--dx,0px)), var(--dx,0px)) }

/* --------------------------------------------------------------------------
   In this issue
   -------------------------------------------------------------------------- */

.z-issuehead{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; grid-column:1/-1 }
.z-issuehead--cont{ gap:8px 0 }
.z-issuehead__ghost{
  margin:0; font-family:Anton,Impact,sans-serif; font-size:clamp(30px,7.4cqh,72px);
  line-height:.9; text-transform:uppercase;
  visibility:hidden; width:0; overflow:hidden; white-space:nowrap;
}

.z-card{
  display:flex; flex-direction:column; gap:7px; min-width:0;
  color:var(--ink); cursor:pointer;
  transform:rotate(calc(var(--tilt,1) * var(--rot,0) * 1deg));
  transition:transform .25s ease;
}
.z-card:hover{ transform:rotate(0deg) translateY(-4px); --dx:5px; color:var(--ink) }
.z-card:active{ transform:rotate(0deg) translateY(-1px); --dx:2px }
.z-card__shot{ position:relative; width:100%; aspect-ratio:16/10; overflow:hidden }
.z-card__body{ display:flex; flex-direction:column; gap:4px }
.z-card__title{
  margin:0; font-family:Anton,Impact,sans-serif; font-size:clamp(17px,2.65cqh,28px);
  line-height:1.02; min-height:2.04em; text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   Article
   -------------------------------------------------------------------------- */

.z-arthead{
  margin:0; font-family:Anton,Impact,sans-serif;
  font-size:clamp(32px,6cqh,74px); line-height:.78; text-transform:uppercase;
}
.z-arthead--small{ font-size:clamp(26px,4.6cqh,54px) }
.z-byline{
  margin:0; font-family:'Nothing You Could Do',cursive;
  font-size:clamp(18px,2.2cqh,24px); color:#000080;
  transform:rotate(calc(var(--tilt,1) * -1.4deg));
}
.z-fig{ margin:8px 0 0; transform:rotate(calc(var(--tilt,1) * .8deg)) }
.z-fig > img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover }
.z-fig .z-cover{
  display:block; margin-inline:auto;
  width:min(100%, calc(40cqh * var(--ratio,1.6)));
  aspect-ratio:var(--ratio,1.6);
}
.z-fig figcaption,
.z-flow figcaption{
  margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:#8a8478; text-align:left;
}

/* body copy, whether hand-written in a template or flowed from Ghost content */
.z-copy,
.z-flow > p,
.z-flow > ul,
.z-flow > ol{
  margin:0; font-size:clamp(16px,2.35cqh,23px); line-height:1.5; text-align:justify;
}
.z-flow > ul, .z-flow > ol{ padding-left:1.3em; text-align:left }
.z-flow > ul > li, .z-flow > ol > li{ margin:0 0 .35em }
.z-flow > h1, .z-flow > h2, .z-flow > h3, .z-flow > h4{
  margin:0; font-family:Anton,Impact,sans-serif; text-transform:uppercase;
  line-height:.94; font-size:clamp(19px,2.8cqh,30px);
}
.z-flow > h3, .z-flow > h4{ font-size:clamp(16px,2.2cqh,23px) }
.z-flow > figure{ margin:0 }
.z-flow img,
.z-flow video,
.z-flow iframe{
  display:block; margin-inline:auto; max-width:100%; max-height:34cqh;
}
/* A chart gets a container of its own: Chart.js measures the canvas's parent,
   and it cannot size against the flex column that holds the whole flow. The box
   also reserves the chart's shape before its script runs, so the sheet is
   fitted around it rather than overrun once it draws. */
.z-flow .z-chart{
  display:block; width:100%; aspect-ratio:2 / 1;
  max-height:46cqh; margin-inline:auto;
}
.z-flow .z-chart canvas{ display:block; width:100% !important; height:100% !important }
.art__copy .z-chart{ display:block; width:100%; aspect-ratio:2 / 1 }
.art__copy .z-chart canvas{ display:block; width:100% !important; height:100% !important }
.z-flow .halftone{
  display:block;
  margin-inline:auto;
  width:min(100%, calc(34cqh * var(--ratio,1.5)));
  aspect-ratio:var(--ratio,1.5);
}
.z-flow .halftone img{ width:100%; height:100%; object-fit:cover; max-height:none }
.z-flow a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--mg); text-underline-offset:2px }
.z-flow a:hover{ color:var(--mg) }
.z-flow strong{ font-weight:700 }
.z-flow hr{ border:0; border-top:2px solid var(--ink); width:38%; margin:2px 0 }
.z-flow pre{
  margin:0; padding:10px 12px; background:#191712; color:#e9e6df;
  font-family:'IBM Plex Mono',monospace; font-size:clamp(11px,1.45cqh,15px);
  line-height:1.5; overflow-x:auto; white-space:pre-wrap; word-break:break-word;
}
.z-flow code{ font-family:'IBM Plex Mono',monospace; font-size:.9em }
.z-flow > p > code{ background:var(--yl); padding:1px 4px }

.z-drop{
  float:left; font-family:Anton,Impact,sans-serif;
  font-size:clamp(48px,7.5cqh,78px); line-height:.72; padding:6px 10px 0 0; color:var(--mg);
}

.z-pull,
.z-flow blockquote{
  margin:6px 0; padding:0; border:0;
  font-family:Anton,Impact,sans-serif; font-size:clamp(20px,3cqh,32px);
  line-height:.96; text-transform:uppercase; text-align:left;
  transform:rotate(calc(var(--tilt,1) * -1deg));
}
.z-flow blockquote.q-mid{ font-size:clamp(16px,2.2cqh,23px); line-height:1.05 }
.z-flow blockquote.q-long{
  font-family:'PT Serif',Georgia,serif; font-size:clamp(14px,1.8cqh,18px);
  line-height:1.6; text-transform:none; transform:none; text-align:left;
  border-left:4px solid var(--mg); padding-left:12px; color:#3a352c;
}
.z-flow blockquote p{ margin:0; font-size:inherit; line-height:inherit; text-align:left }
.z-pull--right{ transform:rotate(calc(var(--tilt,1) * .8deg)) }

.z-tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:4px }
.z-tag{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em;
  padding:5px 10px; background:var(--yl); color:#191712;
}
.z-tag:nth-child(3n+2){ background:var(--cy); color:#191712 }
.z-tag:nth-child(3n+3){ background:var(--mg); color:#fff }

/* keep-reading button, closing a teaser */
.z-more{
  align-self:center; margin-top:2px;
  font-family:Anton,Impact,sans-serif; font-size:clamp(15px,1.9cqh,22px);
  text-transform:uppercase; padding:11px 18px;
  background:var(--mg); color:#fff; cursor:pointer;
}
.z-more:hover{ box-shadow:6px -6px 0 var(--cy), -6px 6px 0 var(--yl); color:#fff }

/* --------------------------------------------------------------------------
   Support
   -------------------------------------------------------------------------- */

.z-swash{ position:relative; align-self:flex-start; transform:rotate(calc(var(--tilt,1) * -1.2deg)) }
.z-swash__paint{ position:absolute; left:-5%; right:-7%; top:2%; bottom:-10%; background:var(--yl) }
.z-swash__paint::after{
  content:''; position:absolute; inset:0;
  background:url('../img/brush-swash.jpg') center/100% 100% no-repeat;
  mix-blend-mode:screen;
}
.z-swash h2{
  position:relative; margin:0; font-family:Anton,Impact,sans-serif;
  font-size:clamp(30px,7.4cqh,72px); line-height:.9; text-transform:uppercase;
  color:var(--mg); mix-blend-mode:multiply;
}
.z-support p{ margin:0; font-size:clamp(16px,2.35cqh,23px); line-height:1.5; max-width:40ch }
.z-support p + p{ text-align:justify }
.z-support__shout{ font-family:Neuton,Georgia,serif; font-weight:700; font-size:1.2em; color:var(--ink) }
.z-goal{
  font-family:'Nothing You Could Do',cursive; font-size:clamp(18px,2.2cqh,24px);
  color:#000080; transform:rotate(calc(var(--tilt,1) * -1.6deg));
}
.z-bar{ display:flex; gap:clamp(12px,2.4cqh,24px); height:90px; font-family:'Nothing You Could Do',cursive; font-size:21px }
.z-bar__seg{ position:relative; display:flex; align-items:center; justify-content:center }
.z-bar__seg::before{
  content:''; position:absolute; inset:0;
  background:url('../img/ink-bar-straight.jpg') center/100% 100% no-repeat;
  mix-blend-mode:screen;
}
.z-bar__seg span{ position:relative }
.z-bar__seg--done{ flex:0 0 var(--pct,22%); background:var(--cy); color:#191712 }
.z-bar__seg--todo{ flex:1; background:#111; color:#f2efe8 }
.z-cta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:6px }
.z-btn{
  font-family:Anton,Impact,sans-serif; font-size:clamp(15px,1.9cqh,22px);
  text-transform:uppercase; padding:13px 22px; cursor:pointer;
}
.z-btn--fill{ background:var(--mg); color:#fff }
.z-btn--fill:hover{ box-shadow:6px -6px 0 var(--cy), -6px 6px 0 var(--yl); color:#fff }
.z-btn--line{ border:2px solid var(--ink); color:var(--ink) }
.z-btn--line:hover{ background:var(--yl); color:var(--ink) }
.z-smallprint{
  margin:8px 0 0; font-family:'IBM Plex Mono',monospace; font-size:11px;
  line-height:1.7; letter-spacing:.08em; text-transform:uppercase; color:#8a8478;
}

/* --------------------------------------------------------------------------
   Ink treatments for real photographs
   The mockup ships pre-duotoned art; live content gets the same look in CSS.
   -------------------------------------------------------------------------- */

/* Two plates, printed out of register on white paper.
   Each plate is the picture screened over one ink, so its shadows carry colour
   and its highlights drop out to paper. The second plate is offset a few pixels
   and multiplied onto the first: where both land you get the overprint
   (cyan+yellow=green, magenta+yellow=red, cyan+magenta=blue), and along the
   fringes where only one plate falls you see that ink on its own. */
.duo{
  position:relative; isolation:isolate; overflow:hidden;
  background:#ffffff;
}
.duo__ink{ position:absolute; inset:0; isolation:isolate }
.duo__ink--a{ background:var(--inkA,var(--cy)) }
.duo__ink--b{
  background:var(--inkB,var(--yl));
  mix-blend-mode:multiply;
  transform:translate(var(--reg,3px), calc(-1 * var(--reg,3px)));
  transition:transform .25s ease;
}
.duo__ink img{
  display:block; width:100%; height:100%; object-fit:cover;
  /* exposure is metered per picture by the reader; keep this contrast in step
     with DUO_CONTRAST in zine.js */
  filter:grayscale(1) brightness(var(--expose,2.4)) contrast(1.5);
  mix-blend-mode:screen;
}
/* reaching for a piece pulls the plates further out of register */
.z-card:hover .duo,
.z-coverlink:hover .duo{ --reg:8px }

/* the ink pair each picture prints in is rotated by the reader, in reading order */

.halftone{ position:relative; isolation:isolate; overflow:hidden }
.halftone img{ filter:contrast(1.1) saturate(.86) }
/* The supplied halftone plate, laid over the picture. It ships at the size where
   its own screen falls at ~2.6px, so it needs no scaling and carries its real
   ruling and ink spread rather than a synthesised grid. The plate averages
   mid-grey, so it is exposed up first: the highlights clip to paper and only the
   dots print, which is what a screen does. */
.halftone::after{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:url('../img/halftone.jpg') 0 0 repeat;
  filter:brightness(1.55);
  mix-blend-mode:multiply;
  opacity:.55;
}

/* --------------------------------------------------------------------------
   Ghost editor cards, dressed for the paper
   -------------------------------------------------------------------------- */

.z-flow .kg-card{ margin:0 }
.z-flow .kg-image-card img,
.z-flow .kg-gallery-image img{ width:100%; height:auto }
.z-flow .kg-video-container{
  position:relative;
  width:min(100%, calc(34cqh * var(--ratio,1.7778)));
  aspect-ratio:var(--ratio,1.7778);
}
.z-flow .kg-video-container video{
  position:absolute; inset:0;
  width:100%; height:100%; max-height:none; object-fit:contain;
}
.z-flow .kg-audio-card audio{ width:100%; height:auto }
.z-flow .kg-gallery-row{ display:flex; gap:6px }
.z-flow .kg-bookmark-card a,
.z-flow .kg-bookmark-container{
  display:block; border:2px solid var(--ink); padding:10px 12px; color:var(--ink);
  text-decoration:none;
}
.z-flow .kg-bookmark-title{ font-family:Anton,Impact,sans-serif; text-transform:uppercase }
.z-flow .kg-bookmark-description{ font-size:.92em }
.z-flow .kg-bookmark-thumbnail, .z-flow .kg-bookmark-icon{ display:none }
.z-flow .kg-button-card a{
  display:inline-block; font-family:Anton,Impact,sans-serif; text-transform:uppercase;
  padding:11px 18px; background:var(--mg); color:#fff; text-decoration:none;
}
.z-flow .kg-callout-card{ border-left:6px solid var(--cy); padding:6px 0 6px 12px; background:none }
.z-flow .kg-callout-text{ font-size:clamp(14px,1.6cqh,17px); line-height:1.6 }
.z-flow .kg-toggle-card{ border-top:2px solid var(--ink); padding-top:6px }
/* subscription forms belong on the support page, not mid-article */
.z-flow .kg-signup-card, .z-flow .kg-nft-card, .z-flow .kg-file-card{ display:none }

/* --------------------------------------------------------------------------
   The bar along the bottom
   -------------------------------------------------------------------------- */

.zine__bar{
  position:absolute; left:0; right:0; bottom:0; z-index:70;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:8px clamp(16px,2.2vw,28px);
  padding:12px clamp(14px,4vw,44px) calc(12px + env(safe-area-inset-bottom));
}
.zine__nav{ display:flex; align-items:center; gap:10px }
.zine__btn{
  font-family:Anton,Impact,sans-serif; font-size:15px; letter-spacing:.06em;
  text-transform:uppercase; min-height:44px; padding:9px 16px;
  border:2px solid #e9e6df; background:transparent; color:#e9e6df; cursor:pointer;
}
.zine__btn:hover{ background:#e9e6df; color:#14120f }
a.zine__btn{ display:inline-flex; align-items:center; text-decoration:none }
.zine__btn--toc:hover{ background:var(--cy); border-color:var(--cy); color:#14120f }
.zine__btn--go{ background:#e9e6df; color:#14120f }
.zine__btn--go:hover{ background:var(--mg); border-color:var(--mg); color:#fff }
.zine__btn[disabled]{ opacity:.38; cursor:default }
.zine__btn[disabled]:hover{ background:transparent; color:#e9e6df }
.zine__btn--go[disabled]:hover{ background:#e9e6df; color:#14120f }
.zine__status{ display:flex; align-items:center; gap:12px; flex-wrap:wrap }
.zine__label{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#a29c91;
}
.zine__dots{ display:flex; gap:6px; flex-wrap:wrap; max-width:60vw; justify-content:flex-end }
.zine__dot{
  width:20px; height:32px; padding:0; border:0; background:transparent; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.zine__dot span{ width:10px; height:10px; border:1.5px solid #e9e6df; background:transparent }
.zine__dot[aria-current="true"] span{ background:#e9e6df }

/* a way home that does not disturb the paper */
.zine__home{
  position:absolute; top:0; left:0; z-index:71;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:#8a8478; padding:14px 18px;
}
.zine__home:hover{ color:var(--mg) }

/* screen-reader only */
.u-sr{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

@media (prefers-reduced-motion: reduce){
  .zine__track{ transition:none }
  .z-card, .z-shift, .z-toc__plate, .duo__plate{ transition:none }
}

/* --------------------------------------------------------------------------
   Flowed copy — the reader appends article content into these slots
   -------------------------------------------------------------------------- */

.z-flow{
  display:flex; flex-direction:column;
  gap:var(--gap,clamp(10px,2.2cqh,30px));
  min-width:0;
}
/* a block taller than the sheet it landed on, reined in rather than clipped */
.z-flow .is-oversize{ max-height:100%; overflow:hidden }
.z-flow .is-oversize img,
.z-flow .is-oversize video{ max-height:74cqh; width:auto; max-width:100% }

/* --------------------------------------------------------------------------
   Hand-set rotations — a printer who never quite squares the paste-up
   -------------------------------------------------------------------------- */

.z-toc__item:nth-child(8n+1){ --rot:-1.5 }
.z-toc__item:nth-child(8n+2){ --rot:1.8 }
.z-toc__item:nth-child(8n+3){ --rot:1.2 }
.z-toc__item:nth-child(8n+4){ --rot:-2.2 }
.z-toc__item:nth-child(8n+5){ --rot:2 }
.z-toc__item:nth-child(8n+6){ --rot:-1 }
.z-toc__item:nth-child(8n+7){ --rot:1.4 }
.z-toc__item:nth-child(8n+8){ --rot:-1.7 }

.pg--grid .z-card:nth-of-type(4n+1){ --rot:-1.4 }
.pg--grid .z-card:nth-of-type(4n+2){ --rot:1.6 }
.pg--grid .z-card:nth-of-type(4n+3){ --rot:-1 }
.pg--grid .z-card:nth-of-type(4n+4){ --rot:1.1 }
.pg--grid--cont .z-card:nth-of-type(4n+1){ --rot:1.3 }
.pg--grid--cont .z-card:nth-of-type(4n+2){ --rot:-1.9 }
.pg--grid--cont .z-card:nth-of-type(4n+3){ --rot:1.5 }
.pg--grid--cont .z-card:nth-of-type(4n+4){ --rot:-1.3 }

/* the dot screen sits on the picture, never on its caption */
.z-fig .halftone{ display:block }
.z-flow .halftone{ display:block }

/* Ghost card widths — on a zine page everything is column width, but the
   wide/full settings still earn a little more room. */
.z-flow .kg-width-wide{ width:100%; margin-inline:0 }
.z-flow .kg-width-full{ width:100%; margin-inline:0 }
.z-flow .kg-width-full img,
.z-flow .kg-width-wide img{ width:100% }

/* long URLs in body copy must wrap rather than run off the sheet */
.z-flow, .z-flow p, .z-flow li, .z-flow a{ overflow-wrap:anywhere }


/* ==========================================================================
   The article page — a single column that scrolls, rather than a book that
   turns. Values ported from the article mockup.
   ========================================================================== */

.art{
  --cy:#00d8d3; --mg:#e55dda; --yl:#dedd00;
  --ink:#191712;
  position:relative; min-height:100vh;
  background:#ffffff; color:var(--ink);
  font-family:'PT Serif',Georgia,serif;
}
.art[data-palette="riso"]{ --cy:#f26d3d; --mg:#e0245e; --yl:#e8b400 }
.art[data-palette="photocopy"]{ --cy:#4a4a4a; --mg:#111111; --yl:#9a9a9a }
.art[data-paper="off"]{ --tPaper:0 }
.art[data-inkbleed="off"]{ --tInk:normal; --tInkF:none }

/* the run of sheets the piece is printed on */
.art__paper{ position:absolute; inset:0; pointer-events:none; z-index:0; opacity:var(--tPaper,.55) }
.art__sheet{
  position:absolute; inset:0;
  background:url('../img/paper.jpg') 0 0/100vw 100vh repeat-y;
}
.art__sheet--offset{
  background-position:0 50vh;
  -webkit-mask-image:repeating-linear-gradient(180deg,#000 0,#000 calc(50vh - 160px),transparent 50vh,#000 calc(50vh + 160px),#000 100vh);
  mask-image:repeating-linear-gradient(180deg,#000 0,#000 calc(50vh - 160px),transparent 50vh,#000 calc(50vh + 160px),#000 100vh);
}

/* Blending is applied to the type, not to the column. Multiplying the whole
   column presses the photographs into the sheet and leaves them washed out and
   see-through; not blending at all leaves the type sitting flat on top, with no
   paper grain coming through the letters. So the ink blends and the pictures
   do not. Each blended element forms its own group, so the coloured plates
   inside a headline still overprint one another before the whole word multiplies
   onto the paper. */
/* No filter and no z-index here on purpose. Either one would make this an
   isolated group, and the type inside would then multiply against nothing
   instead of against the sheet below it — which is exactly how the blending
   came to look broken. The ink treatment is carried by the type itself. */
.art__ink{ position:relative }

.art__head,
.art__rulewrap,
.art__rule--spaced,
.art__body > :not(figure):not(.art__related),
.art__copy > :not(figure),
.art__copy figcaption,
.art__fig figcaption,
.art__rel-title,
.art__rel .z-kicker{
  mix-blend-mode:var(--tInk,multiply);
  filter:var(--tInkF,blur(.4px) contrast(.97));
}
/* pictures stay opaque: they carry the halftone screen, not the paper grain */
.art__copy figure,
.art__fig,
.art__rel-shot{ mix-blend-mode:normal; filter:none }

/* ------------------------------------------------------------------ masthead */

.art__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap;
  max-width:720px; margin:0 auto;
  padding:clamp(18px,3vw,32px) clamp(20px,4vw,32px) 0;
}
.art__logo{
  position:relative; font-family:Anton,Impact,sans-serif; font-size:26px;
  line-height:1; text-transform:uppercase; color:var(--ink);
}
.art__logo-plate{ position:absolute; mix-blend-mode:multiply }
.art__logo-plate--cy{ left:1.5px; top:-1.5px; color:var(--cy) }
.art__logo-plate--mg{ left:-1.5px; top:1.5px; color:var(--mg) }
.art__logo-face{ position:relative; color:var(--yl); mix-blend-mode:multiply }
.art__back{
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:#6b665c;
}
.art__back:hover{ color:#ff17c6 }

.art__rulewrap{ max-width:720px; margin:14px auto 0; padding:0 clamp(20px,4vw,32px); height:14px }
.art__rule{ height:5px; background:var(--ink); position:relative }
.art__rule::after{
  content:''; position:absolute; inset:0;
  background:url('../img/ink-bar-straight.jpg') center/100% 100% no-repeat;
  mix-blend-mode:screen;
}
.art__rule--spaced{ margin-top:clamp(18px,3vw,32px) }

/* --------------------------------------------------------------------- copy */

.art__body{
  max-width:720px; margin:0 auto;
  padding:clamp(26px,4.5vw,48px) clamp(20px,4vw,32px) clamp(60px,8vw,100px);
  display:flex; flex-direction:column; gap:clamp(18px,2.6vw,26px);
}
.art__title{
  margin:0; font-family:Anton,Impact,sans-serif;
  font-size:clamp(42px,8vw,84px); line-height:.78;
  text-transform:uppercase; text-wrap:balance;
}
.art__byline{
  margin:0; font-family:'Nothing You Could Do',cursive;
  font-size:clamp(18px,2.4vw,23px); line-height:1.4; color:#000080;
  transform:rotate(-1.2deg);
}
.art__fig{ margin:6px 0 0 }
.art__fig .halftone{ display:block }
.art__fig img{ display:block; width:100%; aspect-ratio:16/9; object-fit:cover }
.art__fig figcaption,
.art__copy figcaption{
  margin-top:8px; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:#8a8478;
}

.art__copy{ display:flex; flex-direction:column; gap:clamp(18px,2.6vw,26px) }
.art__copy > p,
.art__copy > ul,
.art__copy > ol{
  margin:0; font-size:clamp(17px,2vw,19px); line-height:1.75;
}
.art__copy > ul, .art__copy > ol{ padding-left:1.3em }
.art__copy > h2, .art__copy > h3, .art__copy > h4{
  margin:clamp(10px,1.6vw,18px) 0 0;
  font-family:Anton,Impact,sans-serif; text-transform:uppercase; line-height:1;
  font-size:clamp(26px,3.6vw,38px);
}
.art__copy > h3{ font-size:clamp(21px,2.8vw,28px) }
.art__copy > h4{ font-size:clamp(18px,2.2vw,22px) }
.art__copy > figure{ margin:clamp(10px,2vw,20px) 0 }
/* every picture in the copy takes the screen, at full column width */
.art__copy .halftone{ display:block; width:100% }
.art__copy .halftone img{ display:block; width:100%; height:auto }
.art__copy img,
.art__copy video,
.art__copy iframe,
.art__copy canvas{ display:block; margin-inline:auto; max-width:100%; height:auto }
.art__copy a{ color:var(--ink); text-decoration:underline; text-decoration-color:var(--mg); text-underline-offset:2px }
.art__copy a:hover{ color:var(--mg) }
.art__copy hr{ border:0; border-top:2px solid var(--ink); width:38%; margin:0 }
.art__copy pre{
  margin:0; padding:14px 16px; background:#191712; color:#e9e6df;
  font-family:'IBM Plex Mono',monospace; font-size:15px; line-height:1.6;
  overflow-x:auto; white-space:pre-wrap; word-break:break-word;
}
.art__copy code{ font-family:'IBM Plex Mono',monospace; font-size:.9em }
.art__copy > p > code{ background:var(--yl); padding:1px 4px }

/* the opening letter, set in the display face */
.art__copy > p:first-of-type::first-letter{
  float:left; font-family:Anton,Impact,sans-serif;
  font-size:clamp(52px,8vw,76px); line-height:.75;
  padding:5px 12px 0 0; color:var(--mg);
}

/* Quotations are graded by length. A few words are a pull quote and get the
   display face; a paragraph is a block quotation and gets read, not shouted. */
.art__copy blockquote{ margin:clamp(14px,2.4vw,26px) 0; padding:0; border:0 }
.art__copy blockquote p{ margin:0; font-size:inherit; line-height:inherit }

.art__copy blockquote.q-pull{
  align-self:center; max-width:20ch; text-align:center;
  font-family:Anton,Impact,sans-serif; font-size:clamp(26px,4.4vw,42px);
  line-height:1; text-transform:uppercase; transform:rotate(-1deg);
}
.art__copy blockquote.q-pull:nth-of-type(even){ transform:rotate(.8deg) }

.art__copy blockquote.q-mid{
  align-self:center; max-width:34ch; text-align:center;
  font-family:Anton,Impact,sans-serif; font-size:clamp(20px,2.6vw,28px);
  line-height:1.06; text-transform:uppercase; transform:rotate(-.5deg);
}

/* long passages: set to be read, ranged left against a rule */
.art__copy blockquote.q-long{
  align-self:stretch; max-width:none; text-align:left;
  font-family:'PT Serif',Georgia,serif; font-size:clamp(16px,1.9vw,18px);
  line-height:1.7; text-transform:none; transform:none;
  border-left:5px solid var(--mg); padding-left:clamp(14px,2.2vw,22px);
  color:#3a352c;
}

.art__tags{ display:flex; flex-wrap:wrap; gap:8px; margin-top:6px }

/* ---------------------------------------------------------------- the ask */

.art__ask{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px;
}
.art__ask p{ margin:0; font-size:clamp(15px,1.8vw,17px); line-height:1.6; max-width:38ch }
.art__ask-buttons{ display:flex; flex-wrap:wrap; gap:10px }
.art__ask .z-btn{ font-size:17px; padding:12px 20px }
.art .z-support__shout{ font-size:1.3em }
.art .z-smallprint{ margin:0 }

/* ----------------------------------------------------------- related stories */

.art__related-head{
  margin:clamp(24px,4vw,44px) 0 0; font-family:Anton,Impact,sans-serif;
  font-size:clamp(26px,3.6vw,38px); line-height:1; text-transform:uppercase;
}
.art__related-word{ color:var(--mg); mix-blend-mode:multiply }
.art__related{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:clamp(14px,2.4vw,24px);
}
.art__rel{ display:flex; flex-direction:column; gap:10px; color:var(--ink); transition:transform .18s ease }
.art__rel:hover{ transform:translateY(-3px); color:var(--ink) }
.art__rel-shot{ display:block; width:100%; aspect-ratio:3/2 }
.art__rel-title{
  font-family:Anton,Impact,sans-serif; font-size:clamp(17px,1.9vw,21px);
  line-height:1.05; text-transform:uppercase;
}

/* --------------------------------------------------------------------------
   Collection listings — tags, authors, the archive. Each row is a flow child
   in its own right, so a long list breaks across sheets rather than
   overflowing one.
   -------------------------------------------------------------------------- */

.z-row{
  /* these are rows, not links in running copy: the flowed-content underline
     would draw a rule under every name and count */
  text-decoration:none;
  display:flex; align-items:baseline; gap:10px;
  color:var(--ink); padding:2px 0;
  border-bottom:1px solid rgba(25,23,18,.18);
}
.z-row:hover{ color:var(--ink) }
.z-row:hover .z-row__name,
.z-row:hover .z-row__title{ color:var(--mg) }
.z-row__name{
  font-family:Anton,Impact,sans-serif; text-transform:uppercase;
  font-size:clamp(16px,2.4cqh,26px); line-height:1.05;
}
.z-row__meta{
  margin-left:auto; white-space:nowrap;
  font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:#8a8478;
}
.z-row__date{
  flex:0 0 auto; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:#8a8478;
}
.z-row__title{
  font-family:Anton,Impact,sans-serif; text-transform:uppercase;
  font-size:clamp(14px,1.9cqh,20px); line-height:1.05; min-width:0;
}

/* the same rows on the scrolling article-style page */
.z-flow a.z-row, .art__copy a.z-row{ text-decoration:none }
.art__copy .z-row{ padding:6px 0 }
.art__copy .z-row__name{ font-size:clamp(19px,2.4vw,26px) }
.art__copy .z-row__title{ font-size:clamp(16px,1.9vw,20px) }