/* The Paper (v04) */

:root {
  --desk: #22201d;
  --paper: #efe8d8;
  --ink: #1c1a17;
  --ink-2: #4d473f;
  --red: #cf1f1a;
  --accent: #9e1d16;
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --mast: "Fraunces", Georgia, serif;
  --tab: "Anton", Impact, "Arial Narrow Bold", sans-serif;
  --slab: "Alfa Slab One", Rockwell, Georgia, serif;
  --type: "Special Elite", "Courier New", monospace;
  --marker: "Permanent Marker", "Marker Felt", cursive;
  --noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 .2'/></feComponentTransfer></filter><rect width='240' height='240' filter='url(%23n)'/></svg>");
  --fibre: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='.006 .2' numOctaves='2' seed='7' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/><feComponentTransfer><feFuncA type='table' tableValues='0 0 .12'/></feComponentTransfer></filter><rect width='420' height='420' filter='url(%23f)'/></svg>");
  --grunge: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='120'><filter id='g'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.6 2.1'/></filter><rect width='300' height='120' filter='url(%23g)'/></svg>");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--desk);
  color: var(--ink);
  font-family: var(--serif);
  overflow-x: hidden;
}
img, canvas, svg { display: block; max-width: 100%; }
.clip { overflow-x: clip; width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid #f0bf2a; outline-offset: 3px; }
h1, h2, h3, p, ul, figure, blockquote { margin: 0; }

/* ---------- the sheet ---------- */

.sheet {
  container: sheet / inline-size;
  position: relative;
  background-color: var(--paper);
  background-image: var(--noise), var(--fibre), radial-gradient(130% 90% at 50% 35%, rgba(255, 255, 255, .35), rgba(0, 0, 0, .07));
  color: var(--ink);
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, .7), 0 6px 16px rgba(0, 0, 0, .35);
}
.leaf { position: relative; padding: clamp(14px, 3.4cqi, 46px); }

.t-broadsheet { --paper: #eee7d6; --accent: #9e1d16; }
.t-tabloid { --paper: #f4f1ea; --accent: var(--red); }
.t-extra { --paper: #ebe0c1; --accent: var(--red); }
.t-supplement { --paper: #f7f4ee; --accent: #b0451c; }

/* the fold across the middle of a broadsheet */
.fold::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  height: 46px; margin-top: -23px;
  pointer-events: none;
  z-index: 6;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, .07) 46%, rgba(255, 255, 255, .5) 50%, rgba(0, 0, 0, .11) 52%, rgba(0, 0, 0, 0));
}

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

.mast {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 2cqi;
  padding-bottom: 1.2cqi;
  border-bottom: 4px double var(--ink);
}
.mast-name {
  font-family: var(--mast);
  font-weight: 900;
  font-size: clamp(40px, 12.4cqi, 150px);
  line-height: .84;
  letter-spacing: -.035em;
  text-align: center;
  white-space: nowrap;
}
.mast-the {
  font-size: .3em;
  font-style: italic;
  font-weight: 600;
  letter-spacing: 0;
  vertical-align: 1.05em;
  margin-right: .14em;
}
.ear {
  min-width: 0;
  font-size: clamp(10.5px, 1.3cqi, 15px);
  line-height: 1.25;
  border: 1px solid currentColor;
  padding: .5em .7em;
  max-width: 13em;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}
.ear-l { justify-self: start; }
.ear-r { justify-self: end; text-align: right; }
.ear-n { font-family: var(--mast); font-weight: 900; font-size: 1.6em; letter-spacing: 0; }

@container sheet (max-width: 560px) {
  .mast { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "l r" "m m"; row-gap: 2.4cqi; }
  .ear-l { grid-area: l; }
  .ear-r { grid-area: r; }
  .mast-name { grid-area: m; font-size: clamp(40px, 16cqi, 150px); }
}

.strap {
  text-align: center;
  font-style: italic;
  font-size: clamp(12.5px, 1.5cqi, 17px);
  margin: .7em 0 .4em;
}
.dateline {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .3em 1.4em;
  border-bottom: 1px solid var(--ink);
  padding: .5em 0;
  font-size: clamp(10.5px, 1.2cqi, 13.5px);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-weight: 600;
}
.dateline > * { min-width: 0; }
.mini .dateline { border-top: 0; }

.tagrow { display: flex; margin-top: 1.6cqi; }
.tag-extra {
  display: inline-block;
  transform: rotate(-3.5deg);
  border: 3px solid var(--red);
  color: var(--red);
  font-family: var(--tab);
  text-transform: uppercase;
  font-size: clamp(18px, 4.4cqi, 54px);
  line-height: 1;
  letter-spacing: .05em;
  padding: .12em .45em .08em;
  -webkit-mask-image: var(--grunge);
  mask-image: var(--grunge);
  -webkit-mask-size: 300px 120px;
  mask-size: 300px 120px;
}
.tag-sup {
  display: block;
  width: 100%;
  background: var(--accent);
  color: #fff;
  text-align: center;
  font-family: var(--serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .45em;
  font-size: clamp(11px, 1.4cqi, 15px);
  padding: .7em .5em .7em 1em;
}

/* the red top */
.t-tabloid .mast {
  background: var(--red);
  color: #fff;
  border-bottom: 0;
  padding: 1.6cqi 2.2cqi;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .12) inset;
}
.t-tabloid .mast-name { font-style: italic; }
.t-tabloid .dateline { border-top: 0; }

/* the supplement masthead sits small and centred */
.t-supplement .mast { border-bottom: 1px solid var(--ink); }
.t-supplement .mast-name { font-size: clamp(34px, 8.6cqi, 104px); font-weight: 600; font-style: italic; }
@container sheet (max-width: 560px) {
  .t-supplement .mast-name { font-size: clamp(36px, 13cqi, 104px); }
}

/* ---------- front page ---------- */

.front {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "kick" "head" "deck" "plate" "by" "body" "side";
  column-gap: 3cqi;
  align-items: start;
  position: relative;
  margin-top: 2.2cqi;
}
.front > * { min-width: 0; }
.kicker { grid-area: kick; }
.headline { grid-area: head; }
.deck { grid-area: deck; }
.plate { grid-area: plate; }
.byline { grid-area: by; }
.body { grid-area: body; }
.side { grid-area: side; }

@container sheet (min-width: 760px) {
  .t-broadsheet .front { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); grid-template-areas: "kick kick" "head head" "deck deck" "plate side" "by side" "body side"; }
  .t-tabloid .front { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "kick kick" "head head" "plate deck" "plate by" "plate body" "side side"; }
  .t-extra .front { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); grid-template-areas: "kick kick" "head head" "side plate" "deck deck" "by by" "body body"; }
  .t-supplement .front { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); grid-template-areas: "plate plate" "kick kick" "head head" "deck deck" "by by" "body side"; }
}
@container sheet (min-width: 600px) {
  .mini.t-broadsheet .front,
  .mini.t-tabloid .front { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "kick kick" "head head" "plate deck" "plate body"; }
  .mini.t-extra .front { grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); grid-template-areas: "kick kick" "head head" "side plate" "deck deck"; }
  .mini.t-supplement .front { grid-template-columns: minmax(0, 1fr); grid-template-areas: "plate" "kick" "head" "deck" "body"; }
}

.kicker {
  font-family: var(--serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: clamp(11px, 1.35cqi, 15px);
  color: var(--accent);
  margin-bottom: .5em;
}
.t-tabloid .kicker {
  justify-self: start;
  background: #121110;
  color: #fff;
  font-family: var(--tab);
  font-weight: 400;
  letter-spacing: .06em;
  font-size: clamp(14px, 2.2cqi, 26px);
  padding: .18em .5em .1em;
}
.t-supplement .kicker { text-align: center; margin-top: 2cqi; }

.headline {
  margin: 0 0 .22em;
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(33px, 8.2cqi, 112px);
  line-height: .95;
  letter-spacing: -.022em;
  overflow-wrap: break-word;
  text-wrap: balance;
  text-shadow: 0 0 1px rgba(0, 0, 0, .25);
}
.t-tabloid .headline {
  font-family: var(--tab);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(46px, 14.2cqi, 196px);
  line-height: .86;
  letter-spacing: .005em;
}
.t-extra .headline {
  font-family: var(--slab);
  font-weight: 400;
  font-size: clamp(31px, 7.6cqi, 104px);
  line-height: 1;
  letter-spacing: -.012em;
}
.t-supplement .headline {
  font-family: var(--mast);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(38px, 9cqi, 124px);
  line-height: .95;
  letter-spacing: -.03em;
  text-align: center;
}
.mini .headline { font-size: clamp(30px, 7.6cqi, 84px); }
.mini.t-tabloid .headline { font-size: clamp(42px, 12cqi, 120px); }
.mini.t-extra .headline { font-size: clamp(28px, 6.6cqi, 72px); }
.mini.t-supplement .headline { font-size: clamp(34px, 8cqi, 90px); }

/* the mirrored headline for Reflecting on Art */
.headline.is-mirror .hl-back { display: block; transform: scaleX(-1); }
.hl-glass {
  display: inline-block;
  position: relative;
  margin-top: .32em;
  font-size: max(16px, .4em);
  padding: .45em 1em .5em;
  border: 3px solid var(--ink);
  border-radius: 999px;
  background: linear-gradient(112deg, #c9d0d5 0%, #f6f8f9 34%, #aeb7be 52%, #e9edf0 70%, #c3cbd1 100%);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--ink);
  letter-spacing: 0;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}
.hl-glass:hover { transform: perspective(500px) rotateY(-14deg); }

.deck {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(17px, 2.25cqi, 30px);
  line-height: 1.22;
  margin: 0 0 1em;
  max-width: 40em;
}
.t-tabloid .deck { font-style: normal; font-weight: 700; }
.t-supplement .deck { text-align: center; margin-left: auto; margin-right: auto; }
.mini .deck { font-size: clamp(15px, 2cqi, 22px); }

.byline {
  font-size: clamp(12px, 1.3cqi, 14px);
  text-transform: uppercase;
  letter-spacing: .14em;
  padding: .6em 0;
  margin-bottom: 1em;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.t-supplement .byline { text-align: center; border: 0; }

/* ---------- plates ---------- */

.plate { container: plate / inline-size; position: relative; margin: 0 0 1.4cqi; }
.plate-box {
  position: relative;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(0, 0, 0, .03);
}
.plate-box > img,
.plate-box > canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.plate-box > img {
  object-fit: cover;
  filter: grayscale(1) contrast(1.1);
  mix-blend-mode: multiply;
  transition: opacity .6s ease, filter .6s ease;
}
.plate-box > canvas { mix-blend-mode: multiply; pointer-events: none; }
.is-printed .plate-box > canvas { animation: print 1.5s cubic-bezier(.5, 0, .3, 1) both; }
@keyframes print { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
.is-printed .plate-box > img { opacity: 0; }
.plate-photo.is-printed.show-photo .plate-box > img { opacity: 1; filter: none; mix-blend-mode: normal; }
@media (hover: hover) {
  .page-front .plate-photo.is-printed .plate-box:hover > img,
  .page-inside .plate-photo.is-printed .plate-box:hover > img { opacity: 1; filter: none; mix-blend-mode: normal; }
}
.page-front .plate-photo, .page-inside .plate-photo { cursor: zoom-in; }

.plate-glyph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--mast);
  font-weight: 900;
  font-size: 52cqi;
  line-height: 1;
  color: rgba(0, 0, 0, .8);
}
.plate-mirror .plate-glyph { font-size: 30cqi; transform: scaleX(-1); }
.is-printed .plate-glyph { opacity: 0; }

.plate figcaption {
  font-size: clamp(12px, 2.4cqi, 14.5px);
  font-style: italic;
  line-height: 1.35;
  margin-top: .55em;
  color: var(--ink-2);
}

/* the starburst on the red top */
.burst {
  position: absolute;
  z-index: 3;
  right: 2.5cqi;
  top: 3cqi;
  width: clamp(92px, 22cqi, 210px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  transform: rotate(10deg);
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, .25));
}
.plate-stickers .burst { right: auto; top: auto; left: 2cqi; bottom: 4cqi; transform: rotate(-8deg); }
.burst svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.burst span {
  position: relative;
  max-width: 66%;
  font-family: var(--tab);
  text-transform: uppercase;
  text-align: center;
  color: var(--red);
  font-size: clamp(13px, 3.4cqi, 30px);
  line-height: .98;
}

/* stickers on the lamp post (Free Art) */
.stickers { position: absolute; inset: 0; z-index: 2; }
.sticker {
  position: absolute;
  width: 29%;
  aspect-ratio: 3 / 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3% 4%;
  margin: 0;
  background: #fbfaf5;
  color: #141414;
  border: 2px solid #141414;
  border-radius: 3px;
  font-family: var(--marker);
  font-size: clamp(11px, 3.8cqi, 34px);
  line-height: 1.02;
  text-align: center;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .3);
  transform: rotate(var(--r, 0deg));
  transform-origin: 10% 10%;
  transition: transform .45s cubic-bezier(.2, .9, .3, 1.3), box-shadow .3s;
  -webkit-tap-highlight-color: transparent;
}
button.sticker { cursor: pointer; }
.sticker.s0 { left: 23%; top: 6%; --r: -7deg; }
.sticker.s1 { left: 54%; top: 21%; --r: 5deg; }
.sticker.s2 { left: 26%; top: 47%; --r: 3deg; }
.sticker.s3 { left: 56%; top: 62%; --r: -4deg; }
.sticker.s4 { left: 6%; top: 70%; --r: 8deg; }
.sticker.s5 { left: 72%; top: 4%; --r: -10deg; }
@media (hover: hover) {
  button.sticker:hover { transform: rotate(var(--r, 0deg)) rotateX(18deg) rotateY(-16deg); box-shadow: 6px 8px 0 rgba(0, 0, 0, .25); }
}
.sticker.is-peeled { transform: rotate(calc(var(--r, 0deg) + 24deg)) translate(10%, -14%) scale(1.06); box-shadow: 10px 14px 10px rgba(0, 0, 0, .3); }

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

.body {
  font-size: clamp(15.5px, .8rem + .36cqi, 18.5px);
  line-height: 1.52;
  columns: 2 15rem;
  column-gap: 2.6cqi;
  column-rule: 1px solid rgba(0, 0, 0, .22);
}
.mini .body { columns: auto; font-size: clamp(14.5px, .78rem + .3cqi, 17px); }
@container sheet (min-width: 560px) {
  .body, .inside-body { text-align: justify; hyphens: auto; }
}
.body p + p, .sec p + p { margin-top: .7em; }
.runin {
  font-family: var(--serif);
  font-weight: 800;
  font-size: .82em;
  text-transform: uppercase;
  letter-spacing: .12em;
  margin: 0 0 .5em;
  break-after: avoid;
}
.dropcap::first-letter {
  float: left;
  font-family: var(--mast);
  font-weight: 900;
  font-size: 4.3em;
  line-height: .78;
  margin: .06em .09em 0 0;
  color: var(--accent);
}
@supports (initial-letter: 3) {
  .dropcap::first-letter { float: none; font-size: inherit; line-height: inherit; margin: 0 .1em 0 0; initial-letter: 3; }
}
.t-tabloid .dropcap::first-letter { font-family: var(--tab); font-weight: 400; }
.t-extra .dropcap::first-letter { font-family: var(--slab); font-weight: 400; }
.mini .dropcap::first-letter { color: var(--ink); }

.pull {
  break-inside: avoid;
  margin: 1em 0;
  padding: .55em 0 .6em;
  border-top: 4px solid var(--ink);
  border-bottom: 1px solid var(--ink);
  font-family: var(--mast);
  font-style: italic;
  font-weight: 600;
  font-size: 1.42em;
  line-height: 1.14;
  text-align: left;
  hyphens: manual;
  color: var(--accent);
}
.pull p::before { content: "\201C"; }
.pull p::after { content: "\201D"; }
.t-tabloid .pull { font-family: var(--tab); font-style: normal; font-weight: 400; text-transform: uppercase; color: var(--ink); }

.jump { margin-top: 1em; font-style: italic; font-size: .92em; text-align: right; }
.jump a { text-decoration: none; border-bottom: 2px dotted currentColor; padding: .5em 0 .1em; }

/* side column: the index, and the stop press on a late extra */
.side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2cqi; margin-top: 1.4cqi; }
.index { border: 1px solid var(--ink); padding: .8em 1em .5em; font-size: clamp(14px, 1.3cqi, 15.5px); background: rgba(255, 255, 255, .22); }
.index-h {
  font: 800 .78em/1 var(--serif);
  text-transform: uppercase;
  letter-spacing: .2em;
  padding-bottom: .7em;
  border-bottom: 2px solid var(--ink);
  margin-bottom: .2em;
}
.index a {
  display: flex;
  align-items: baseline;
  gap: .5em;
  min-height: 44px;
  padding: .7em 0 .4em;
  text-decoration: none;
  line-height: 1.2;
}
.index a + a { border-top: 1px solid rgba(0, 0, 0, .12); }
.ix-t { min-width: 0; font-weight: 600; }
.lead { flex: 1 1 1em; min-width: 1em; border-bottom: 2px dotted rgba(0, 0, 0, .45); transform: translateY(-.25em); }
.ix-p { white-space: nowrap; font-style: italic; color: var(--ink-2); }
.index a:hover .ix-t, .index a:focus-visible .ix-t { color: var(--accent); }

.stop { border: 2px solid var(--ink); padding: .9em 1em 1em; background: rgba(255, 255, 255, .28); font-family: var(--type); font-size: clamp(15px, 1.7cqi, 19px); line-height: 1.4; }
.stop-h { font-family: var(--slab); text-transform: uppercase; letter-spacing: .05em; color: var(--red); margin-bottom: .5em; font-size: 1.05em; }
.stop-t::after {
  content: "";
  display: inline-block;
  width: .55em;
  height: 1.05em;
  margin-left: .2em;
  vertical-align: -.16em;
  background: currentColor;
  animation: blink 1.05s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }
.mini .side { margin-top: 0; }

/* ---------- skyline teasers ---------- */

.skyline {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4cqi;
  margin-bottom: 2cqi;
}
.sky {
  display: flex;
  flex-direction: column;
  gap: .25em;
  min-width: 0;
  min-height: 52px;
  padding: .6em .8em;
  border: 1px solid var(--ink);
  text-decoration: none;
  font-size: clamp(11.5px, 1.3cqi, 14.5px);
  line-height: 1.2;
  transition: background .2s, color .2s;
}
.sky-k { text-transform: uppercase; letter-spacing: .12em; font-size: .82em; color: var(--accent); font-weight: 700; }
.sky-t { font-weight: 700; overflow-wrap: break-word; }
@container sheet (max-width: 560px) {
  .sky-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
}
.sky-home { text-align: center; align-items: center; }
.sky-next { text-align: right; align-items: flex-end; }
.sky:hover, .sky:focus-visible { background: var(--ink); color: var(--paper); }
.sky:hover .sky-k, .sky:focus-visible .sky-k { color: inherit; }
.t-tabloid .sky { border-color: var(--red); }

/* ---------- inside page ---------- */

.folio {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .5em;
  font-size: clamp(11px, 1.3cqi, 14px);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
}
.folio > * { min-width: 0; }
.folio-m { font-family: var(--mast); font-weight: 900; text-transform: none; letter-spacing: -.01em; font-size: 1.5em; line-height: .8; }
.contd { margin-top: 1.6cqi; font-style: italic; font-size: clamp(13px, 1.4cqi, 16px); color: var(--ink-2); }
.inside-head {
  font-family: var(--serif);
  font-weight: 800;
  font-size: clamp(32px, 6.4cqi, 86px);
  line-height: .95;
  letter-spacing: -.02em;
  margin: .1em 0 .3em;
  overflow-wrap: break-word;
  text-wrap: balance;
}
.t-tabloid .inside-head { font-family: var(--tab); font-weight: 400; text-transform: uppercase; letter-spacing: 0; }
.t-extra .inside-head { font-family: var(--slab); font-weight: 400; }
.t-supplement .inside-head { font-family: var(--mast); font-style: italic; font-weight: 500; }

.inside-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3cqi 3.4cqi; margin-top: 1.6cqi; align-items: start; }
.inside-grid > * { min-width: 0; }
@container sheet (min-width: 760px) {
  .inside-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
}
.inside-body {
  font-size: clamp(15.5px, .8rem + .36cqi, 18.5px);
  line-height: 1.52;
  columns: 2 15rem;
  column-gap: 2.6cqi;
  column-rule: 1px solid rgba(0, 0, 0, .22);
}
.sec + .sec { margin-top: 1.2em; }
.subhead {
  font-family: var(--serif);
  font-weight: 800;
  font-size: 1.32em;
  line-height: 1.08;
  margin: 0 0 .35em;
  break-after: avoid;
  text-align: left;
}
.t-tabloid .subhead { font-family: var(--tab); font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }
.t-extra .subhead { font-family: var(--slab); font-weight: 400; font-size: 1.2em; }
.t-supplement .subhead { font-family: var(--mast); font-style: italic; font-weight: 600; color: var(--accent); }

.inside-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.4cqi; }
.facts { border-top: 5px solid var(--ink); padding-top: .7em; font-size: clamp(14.5px, 1.4cqi, 16px); }
.facts-h, .listings-h { font: 800 .8em/1 var(--serif); text-transform: uppercase; letter-spacing: .2em; margin-bottom: .6em; }
.facts ul, .wordlist ul { list-style: none; padding: 0; }
.facts li { padding: .55em 0; border-bottom: 2px dotted rgba(0, 0, 0, .35); }
.wordlist { border: 2px solid var(--ink); padding: .9em 1em; }
.wordlist li { font-family: var(--marker); font-size: clamp(20px, 2.4cqi, 28px); line-height: 1.25; padding: .2em 0; }
.side-quote {
  font-family: var(--mast);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(22px, 2.6cqi, 34px);
  line-height: 1.15;
  color: var(--accent);
  border-top: 4px solid var(--ink);
  padding-top: .5em;
}

/* posters for Movies I've Missed */
.listings { margin-top: 4cqi; border-top: 4px double var(--ink); padding-top: 1.6cqi; }
.listings-h { font-size: clamp(13px, 1.4cqi, 16px); }
.listing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(150px, 44%), 1fr)); gap: 2.2cqi; }
.listing { min-width: 0; }
.listing-img { background: #fff; padding: 4%; box-shadow: 0 1px 0 rgba(0, 0, 0, .2); }
.listing-img img { width: 100%; height: auto; mix-blend-mode: multiply; filter: saturate(.86) contrast(1.04); }
.listing figcaption { display: grid; gap: .1em; margin-top: .55em; font-size: 14px; line-height: 1.3; }
.listing-p { font-family: var(--tab); font-size: 1.4em; color: var(--accent); }

/* ---------- back page ---------- */

.cl-head {
  font-family: var(--tab);
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(46px, 12cqi, 150px);
  letter-spacing: .03em;
  line-height: .9;
  text-align: center;
  margin: .25em 0 .3em;
}
.cl-grid {
  columns: 3 14rem;
  column-gap: 1.8cqi;
  column-rule: 1px solid rgba(0, 0, 0, .3);
}
.ad {
  break-inside: avoid;
  display: grid;
  gap: .2em;
  margin: 0 0 1.8cqi;
  padding: .75em .85em;
  border: 1px solid var(--ink);
  font-size: 14.5px;
  line-height: 1.32;
  text-decoration: none;
  background: rgba(255, 255, 255, .18);
}
.ad-xt { font-family: var(--serif); font-weight: 800; font-size: 1.12em; text-transform: uppercase; letter-spacing: .02em; }
.ad-xp { font-family: var(--tab); font-size: 1.3em; }
.ad-xn { font-style: italic; color: var(--ink-2); }
a.ad-x { min-height: 44px; transition: background .2s, color .2s; }
a.ad-x:hover, a.ad-x:focus-visible { background: var(--ink); color: var(--paper); }
a.ad-x:hover .ad-xn, a.ad-x:focus-visible .ad-xn { color: inherit; }
.ad-poster { border-style: double; border-width: 3px; }

.ad-main {
  column-span: all;
  position: relative;
  margin-bottom: 3cqi;
  padding: clamp(16px, 3cqi, 38px);
  border: 6px double var(--ink);
  background: rgba(255, 255, 255, .3);
  gap: .5em;
  grid-template-columns: minmax(0, 1fr);
  overflow: hidden;
}
@container sheet (min-width: 720px) {
  .ad-main { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); grid-template-areas: "k k" "t p" "e p" "d b"; column-gap: 3cqi; align-items: end; }
  .ad-k { grid-area: k; }
  .ad-t { grid-area: t; }
  .ad-e { grid-area: e; }
  .ad-d { grid-area: d; }
  .ad-p { grid-area: p; text-align: right; }
  .ad-b { grid-area: b; justify-content: flex-end; }
}
.ad-k { font-weight: 800; text-transform: uppercase; letter-spacing: .3em; font-size: 13px; color: var(--accent); }
.ad-t { font-family: var(--tab); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 6.6cqi, 80px); line-height: .92; letter-spacing: .01em; overflow-wrap: break-word; }
.ad-e { font-family: var(--mast); font-style: italic; font-weight: 600; font-size: clamp(18px, 2.4cqi, 26px); }
.ad-d { font-size: 15px; line-height: 1.45; }
.ad-d .dot { color: var(--accent); padding: 0 .15em; }
.ad-p { font-family: var(--mast); font-weight: 900; font-size: clamp(52px, 10cqi, 128px); line-height: .9; letter-spacing: -.03em; }
.ad-b { display: flex; flex-wrap: wrap; align-items: center; gap: .6em 1.2em; margin-top: .4em; }
.ad-b .basket-count { font-size: 13px; text-transform: uppercase; letter-spacing: .14em; font-weight: 700; }

.coupon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: .55em 1.5em .5em;
  background: var(--paper);
  color: var(--ink);
  border: 3px dotted var(--ink);
  box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--ink);
  margin: 5px;
  font-family: var(--tab);
  text-transform: uppercase;
  font-size: 19px;
  letter-spacing: .06em;
  cursor: pointer;
  transition: background .2s, color .2s, transform .1s;
  -webkit-tap-highlight-color: transparent;
}
.coupon:hover, .coupon:focus-visible { background: var(--ink); color: var(--paper); }
.coupon:active { transform: translateY(2px); }
.coupon.is-in { background: var(--accent); color: #fff; border-style: solid; border-color: #fff; }
.coupon-s { min-height: 44px; font-size: 16px; padding: .4em 1.1em .35em; justify-self: start; margin-top: .4em; }

.coupon.is-in { transform: rotate(-2.5deg) translateY(-3px); box-shadow: 0 0 0 4px var(--paper), 0 0 0 5px var(--ink), 7px 9px 0 rgba(0, 0, 0, .22); animation: cutout .5s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes cutout { 0% { transform: none; } 45% { transform: rotate(-5deg) translateY(-8px) scale(1.04); } 100% { transform: rotate(-2.5deg) translateY(-3px); } }
.ad-main.is-in { border-color: var(--accent); }

.issue-nav {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.6cqi;
  margin-top: 3cqi;
  padding-top: 1.6cqi;
  border-top: 4px double var(--ink);
}
.issue-nav a {
  display: flex;
  flex-direction: column;
  gap: .25em;
  min-width: 0;
  min-height: 64px;
  padding: .8em 1em;
  border: 1px solid var(--ink);
  text-decoration: none;
  transition: background .2s, color .2s;
}
.in-k { font-size: 12px; text-transform: uppercase; letter-spacing: .16em; font-weight: 700; color: var(--accent); }
.in-t { font-family: var(--serif); font-weight: 800; font-size: clamp(16px, 1.9cqi, 22px); line-height: 1.12; overflow-wrap: break-word; }
.in-home { text-align: center; align-items: center; }
.in-next { text-align: right; align-items: flex-end; }
.issue-nav a:hover, .issue-nav a:focus-visible { background: var(--ink); color: var(--paper); }
.issue-nav a:hover .in-k, .issue-nav a:focus-visible .in-k { color: inherit; }
@container sheet (max-width: 560px) {
  .issue-nav { grid-template-columns: minmax(0, 1fr); }
  .in-home, .in-next { text-align: left; align-items: flex-start; }
  .skyline .sky { padding: .55em .5em; }
}

/* ---------- the issue page ---------- */

.issue-page { background: radial-gradient(120% 70% at 50% 0%, #3a3d40 0%, #232527 55%, #1a1b1d 100%) #1a1b1d; }
.issue-page.desk-tabloid { background: radial-gradient(120% 70% at 50% 0%, #4a2623 0%, #281514 55%, #1c0f0e 100%) #1c0f0e; }
.issue-page.desk-extra { background: radial-gradient(120% 70% at 50% 0%, #2b3040 0%, #171a24 55%, #0f1117 100%) #0f1117; }
.issue-page.desk-supplement { background: radial-gradient(120% 70% at 50% 0%, #57524b 0%, #3a3631 55%, #2b2824 100%) #2b2824; }

.paper-stack {
  width: min(1180px, calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(16px, 3vw, 40px) 0 clamp(60px, 9vw, 120px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(30px, 6vw, 80px);
}
.paper-stack > .sheet { min-width: 0; }

.pg { transform-origin: 50% 0; }
.page-inside.pg, .page-back.pg {
  transform: translateY(46px) scale(.985);
  transition: transform 1s cubic-bezier(.16, .8, .24, 1);
}
.page-inside.pg.is-in, .page-back.pg.is-in { opacity: 1; transform: none; }
.page-front.unfold { animation: unfold 1.15s cubic-bezier(.16, .8, .24, 1) both; }
@keyframes unfold {
  0% { opacity: 0; transform: translateY(-26px) scale(.97); }
  100% { opacity: 1; transform: none; }
}

/* ---------- the archive ---------- */

.archive { background: radial-gradient(100% 60% at 50% 0%, #403b35 0%, #26231f 50%, #1d1b18 100%) #1d1b18; }
.arch-top {
  position: relative;
  z-index: 30;
  background-color: #efe8d8;
  background-image: var(--noise), var(--fibre);
  color: var(--ink);
  padding: clamp(18px, 4vw, 46px) 16px clamp(10px, 1.6vw, 18px);
  text-align: center;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}
.arch-mast {
  font-family: var(--mast);
  font-weight: 900;
  font-size: clamp(62px, 16.5vw, 250px);
  line-height: .82;
  letter-spacing: -.045em;
  white-space: nowrap;
}
.arch-mast .mast-the { font-size: .26em; vertical-align: 1.35em; }
.arch-line { font-style: italic; font-size: clamp(14px, 1.6vw, 20px); margin: .6em 0 .9em; }
.arch-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .35em 1.4em;
  max-width: 1180px;
  margin: 0 auto;
  padding: .6em 0 .1em;
  border-top: 4px double var(--ink);
  font-size: clamp(11px, 1.05vw, 13.5px);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 600;
}
.arch-strip > * { min-width: 0; }

.pile {
  width: min(880px, calc(100% - 32px));
  margin: clamp(34px, 6vw, 84px) auto 0;
  padding-bottom: 10px;
}
.issue {
  --shift: calc(var(--dir) * clamp(0px, 10vw - 36px, 110px));
  display: block;
  position: relative;
  color: inherit;
  text-decoration: none;
  transform: translateX(var(--shift)) rotate(var(--tilt));
  transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .5s ease;
  -webkit-tap-highlight-color: transparent;
}
.issue + .issue { margin-top: clamp(-70px, -6vw, -18px); }
.issue:not(.is-in) { transform: translateX(var(--shift)) translateY(46px) rotate(var(--tilt)) scale(.97); }
.issue:hover, .issue:focus-visible, .issue.is-near, .issue:active {
  z-index: 20;
  transform: translateX(var(--shift)) translateY(-8px) rotate(0deg);
}
.issue:focus-visible { outline-offset: 6px; }
.issue .sheet { transition: box-shadow .4s; }
.issue:hover .sheet, .issue:focus-visible .sheet { box-shadow: 0 50px 80px -24px rgba(0, 0, 0, .8), 0 8px 18px rgba(0, 0, 0, .4); }
.issue-tab {
  position: absolute;
  z-index: 8;
  top: -15px;
  right: 22px;
  padding: .32em .8em .3em;
  background: #f0bf2a;
  color: #1a1712;
  font-family: var(--tab);
  font-size: 15px;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, .25);
}
.issue:nth-child(even) .issue-tab { right: auto; left: 22px; }

/* the next issue on the press */
.press { padding: clamp(60px, 10vw, 140px) 16px clamp(70px, 10vw, 150px); display: grid; justify-items: center; overflow: hidden; }
.press-frame { position: relative; width: min(760px, 100%); padding: 0 clamp(26px, 7vw, 70px); }
.gear { position: absolute; top: calc(clamp(64px, 12vw, 116px) / 2); width: clamp(64px, 11vw, 112px); height: auto; fill: #3c3833; z-index: 3; }
.gear .gear-hub { fill: #59534b; }
.gear circle:last-child { fill: #1b1916; }
.gear-a { left: 0; transform: translate(-30%, -50%); animation: spin 6s linear infinite; }
.gear-b { right: 0; transform: translate(30%, -50%); animation: spin-b 4.4s linear infinite; }
@keyframes spin { from { transform: translate(-30%, -50%) rotate(0deg); } to { transform: translate(-30%, -50%) rotate(360deg); } }
@keyframes spin-b { from { transform: translate(30%, -50%) rotate(0deg); } to { transform: translate(30%, -50%) rotate(-360deg); } }
.rollers { position: relative; z-index: 2; height: clamp(64px, 12vw, 116px); }
.roller {
  position: absolute;
  left: 0; right: 0;
  height: 52%;
  border-radius: 999px;
  overflow: hidden;
  background: linear-gradient(to bottom, #151412 0%, #7d776d 30%, #d9d2c4 47%, #8a8478 62%, #121110 100%);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .5);
}
.roller-a { top: 0; }
.roller-b { bottom: 0; }
.roll-tex {
  position: absolute;
  left: 0; right: 0; top: -40px; bottom: -40px;
  background-image: radial-gradient(rgba(0, 0, 0, .4) 1.1px, transparent 1.7px);
  background-size: 9px 9px;
  mix-blend-mode: multiply;
  animation: roll-down .7s linear infinite;
}
.roller-b .roll-tex { animation-name: roll-up; }
@keyframes roll-down { from { transform: translateY(0); } to { transform: translateY(18px); } }
@keyframes roll-up { from { transform: translateY(0); } to { transform: translateY(-18px); } }
.press-sheet {
  position: relative;
  z-index: 1;
  width: 88%;
  margin: -14px auto 0;
  aspect-ratio: 4 / 3;
  background-color: #efe8d8;
  background-image: var(--noise), var(--fibre);
  box-shadow: 0 30px 50px -20px rgba(0, 0, 0, .7);
  overflow: hidden;
  container: presssheet / inline-size;
}
.press-ink { position: absolute; inset: 0; padding: 7cqi 6cqi 5cqi; display: flex; flex-direction: column; gap: 3cqi; }
.ps-mast { font-family: var(--mast); font-weight: 900; font-size: 13cqi; line-height: .82; letter-spacing: -.04em; text-align: center; white-space: nowrap; }
.ps-mast .mast-the { font-size: .3em; vertical-align: 1.1em; }
.ps-line {
  display: flex;
  justify-content: space-between;
  border-top: 3px double var(--ink);
  border-bottom: 1px solid var(--ink);
  padding: .5em 0;
  font-size: max(11px, 2.4cqi);
  text-transform: uppercase;
  letter-spacing: .14em;
  font-weight: 700;
}
.ps-head {
  height: 15cqi;
  background-image: radial-gradient(rgba(28, 26, 23, .22) 30%, transparent 34%);
  background-size: 6px 6px;
  border-radius: 2px;
}
.ps-cols { flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3cqi; }
.ps-cols span {
  background-image: radial-gradient(rgba(28, 26, 23, .16) 28%, transparent 32%);
  background-size: 5px 5px;
}
.press-wipe {
  position: absolute;
  inset: 0;
  background-color: #efe8d8;
  background-image: var(--noise);
  transform-origin: 50% 100%;
  transform: scaleY(1);
}
.press.is-printing .press-wipe { transform: scaleY(0); transition: transform 5.5s cubic-bezier(.45, .05, .4, 1) .3s; }
.press-no {
  margin-top: clamp(18px, 3vw, 30px);
  font-family: var(--tab);
  font-size: clamp(28px, 5vw, 56px);
  color: #f0bf2a;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* ---------- reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .issue:not(.is-in) { transform: translateX(var(--shift)) rotate(var(--tilt)); }
  .page-inside.pg, .page-back.pg { opacity: 1; transform: none; }
  .press-wipe { transform: scaleY(0); }
}