:root {
  --ink: #000;
  --paper: #cfcdc6;
  --paper-hi: #dcdad3;
  --grey: #8d8a83;
  --pink: #ff3ea5;
  --mast: "Archivo", "Arial Narrow", sans-serif;
  --type: "Courier Prime", "Courier New", monospace;
  --frame-h: min(100svh, calc(100vw / 2.39));
  --bar: calc((100svh - var(--frame-h)) / 2);
  --speckle: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='1' seed='9'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  16 0 0 0 -10.6'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  --speckle-paper: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='s'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='1' seed='2'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  22 0 0 0 -15.9'/></filter><rect width='100%' height='100%' filter='url(%23s)'/></svg>");
  --toner: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='500'><filter id='t'><feTurbulence type='fractalNoise' baseFrequency='.012 .3' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  .35 0 0 0 -.16'/></filter><rect width='100%' height='100%' filter='url(%23t)'/></svg>");
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--grey); color: var(--ink); font: 400 16px/1.6 var(--type); }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
cite { font-style: italic; }

/* ---------- the film ---------- */
.film { position: relative; height: 100svh; min-height: 520px; background: #000; overflow: hidden; color: #b9b6ae; }
#room { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.film-still { display: none; position: absolute; left: 0; right: 0; top: var(--bar); height: var(--frame-h); width: 100%; object-fit: cover; }
.no-film #room { display: none; }
.no-film .film-still { display: block; }
.bar { position: absolute; left: 0; right: 0; height: var(--bar); display: flex; align-items: center; padding: 0 clamp(20px, 4vw, 64px); }
.bar.top { top: 0; justify-content: space-between; gap: 24px; }
.bar.bottom { bottom: 0; justify-content: center; }
.slate { font: 900 clamp(15px, 1.3vw, 19px)/1 var(--mast); font-stretch: 62%; letter-spacing: .02em; color: #d8d5cc; }
.tag { font: 400 13px/1.3 var(--type); color: #7f7c75; }
.subtitle { max-width: 64ch; text-align: center; font: 400 clamp(15px, 1.25vw, 19px)/1.4 var(--type); color: #e9e4d6; min-height: 1.4em; }
.subtitle b { font-weight: 700; color: #fff; margin-right: .6em; }
.subtitle b:empty { display: none; }
.subtitle:not(.on) span { color: #77746d; }

/* ---------- the desk the zine pages sit on ---------- */
.desk { position: relative; padding: clamp(40px, 6vw, 96px) clamp(16px, 4vw, 64px) 80px;
  background-color: var(--grey); background-image: var(--speckle);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(28px, 4vw, 64px) clamp(16px, 2.4vw, 36px); align-items: start; }

.masthead { grid-column: 1 / -1; position: relative; }
.wordmark { position: relative; font: 900 clamp(84px, 21.5vw, 360px)/.78 var(--mast); font-stretch: 62%; letter-spacing: -.02em;
  color: var(--ink); filter: url(#toner) blur(.4px); margin-left: -.03em; }
.wordmark::before { content: attr(data-text); position: absolute; left: .045em; top: .03em; color: var(--pink); mix-blend-mode: multiply; z-index: -1; filter: none; opacity: .92; }
.issue { margin-top: 18px; max-width: 60ch; font-size: 15px; }

.sheet, .strip, .receipt, .flyer { position: relative; background-color: var(--paper); background-image: var(--speckle-paper), var(--toner);
  box-shadow: 0 1px 0 rgba(0,0,0,.25), 0 26px 30px -26px rgba(0,0,0,.7); }
.sheet { padding: clamp(26px, 3.2vw, 46px); }
.sheet h2, .strip h2, .flyer h2 { font: 900 clamp(34px, 4.4vw, 64px)/.9 var(--mast); font-stretch: 62%; letter-spacing: -.01em; margin-bottom: 20px; filter: url(#toner); }
.sheet p { max-width: 62ch; margin-bottom: 1em; }
.hand { font: 900 clamp(46px, 7vw, 108px)/.85 var(--mast); font-stretch: 62%; filter: url(#toner); margin-bottom: 14px; }

/* fastenings: each piece is held up differently */
.stapled::before, .stapled::after { content: ""; position: absolute; top: 14px; width: 26px; height: 4px; background: linear-gradient(#bdbdbd, #6d6d6d); border-radius: 1px; box-shadow: 0 1px 1px rgba(0,0,0,.5); }
.stapled::before { left: 22px; transform: rotate(-8deg); } .stapled::after { right: 26px; transform: rotate(5deg); }
.taped::before { content: ""; position: absolute; top: -13px; left: 50%; width: 110px; height: 28px; transform: translateX(-50%) rotate(-2.5deg); background: rgba(232,228,212,.62); box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.pinned::before { content: ""; position: absolute; top: 12px; left: 50%; width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #ff7ac4, var(--pink) 45%, #8a1858); box-shadow: 2px 3px 3px rgba(0,0,0,.45); }

.manifesto { grid-column: 1 / span 7; transform: rotate(-.7deg); }
.manifesto p:first-of-type::first-line { font-weight: 700; }

.contact { grid-column: 8 / span 5; transform: rotate(1.1deg); margin-top: 60px; background-color: #c4c2bb; }
.frames { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.frame { position: relative; background: #000; padding: 6px 6px 10px; }
.frame img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; filter: url(#xerox) contrast(1.1); }
.frame::after { content: ""; position: absolute; inset: 6px 6px 10px; pointer-events: none; mix-blend-mode: multiply;
  background-image: radial-gradient(rgba(0,0,0,.55) 30%, transparent 32%); background-size: 4px 4px; opacity: .55; }
.frame figcaption { color: #e6e3da; font-size: 12.5px; line-height: 1.35; padding: 8px 2px 0; }
.frame figcaption b { display: block; font: 900 20px/1 var(--mast); font-stretch: 62%; color: #fff; margin-bottom: 3px; }
.frame .num { position: absolute; top: 10px; left: 11px; font-size: 11px; color: var(--pink); z-index: 1; }

.how { grid-column: 2 / span 8; transform: rotate(.5deg); }
.how .lead { font-weight: 700; }
.loop { list-style: none; counter-reset: s; margin: 10px 0 30px; border-top: 2px solid var(--ink); }
.loop li { counter-increment: s; position: relative; padding: 9px 0 9px 54px; border-bottom: 1px dashed rgba(0,0,0,.45); }
.loop li::before { content: counter(s); position: absolute; left: 0; top: 8px; font: 900 30px/1 var(--mast); font-stretch: 62%; }
.how h3 { font: 900 26px/1 var(--mast); font-stretch: 62%; margin-bottom: 12px; }
.crew { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 26px; }
.crew dt { font-weight: 700; } .crew dd { font-size: 14.5px; line-height: 1.45; }

.rules { grid-column: 10 / span 3; transform: rotate(-1.6deg); padding: 34px 22px 26px; margin-top: 90px; background-color: var(--paper-hi); }
.rules ol { padding-left: 1.3em; } .rules li { margin-bottom: .7em; font-size: 14.5px; line-height: 1.45; }
.rules li::marker { font-weight: 700; }

.daylog { grid-column: 1 / -1; }
.daylog .note { max-width: 60ch; margin-bottom: 26px; }
.slips { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 22px 18px; }
.slip { position: relative; background: #e4e2db; background-image: var(--speckle-paper); padding: 16px 16px 18px; font-size: 14px; line-height: 1.5;
  box-shadow: 0 16px 20px -18px rgba(0,0,0,.8); }
.slip:nth-child(odd) { transform: rotate(-.8deg); } .slip:nth-child(3n) { transform: rotate(1.2deg) translateY(10px); }
.slip::before { content: ""; position: absolute; top: 8px; left: 14px; width: 22px; height: 4px; background: linear-gradient(#bdbdbd, #6d6d6d); transform: rotate(-6deg); }
.slip h3 { font: 900 22px/1 var(--mast); font-stretch: 62%; margin: 10px 0 8px; }
.slip .song { font-style: italic; margin-top: 6px; }
.slip .why { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(0,0,0,.4); font-size: 13px; }
.slip .stamp { position: absolute; right: 10px; top: 12px; padding: 4px 8px 2px; border: 3px solid currentColor; font: 900 21px/1 var(--mast); font-stretch: 70%;
  transform: rotate(-11deg); mix-blend-mode: multiply; filter: url(#toner); }
.slip.no .stamp { color: var(--pink); }
.slip.ok .stamp { color: var(--ink); }
.slip.no p.post { text-decoration: line-through; text-decoration-color: rgba(255,62,165,.7); text-decoration-thickness: 2px; }

.pair { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(260px, 380px) 1fr; gap: clamp(26px, 5vw, 80px); align-items: start; }
.receipt { padding: 26px 22px 34px; font-size: 13px; line-height: 1.5; background-color: #e8e6df; transform: rotate(1.3deg); }
.receipt h2 { font: 700 22px/1 var(--type); text-align: center; letter-spacing: .14em; margin-bottom: 8px; }
.r-meta, .r-foot { text-align: center; border-bottom: 1px dashed #555; padding-bottom: 12px; margin-bottom: 12px; }
.r-foot { border: 0; border-top: 1px dashed #555; padding-top: 12px; margin: 10px 0 0; }
#ledger { list-style: none; max-height: 560px; overflow: auto; }
#ledger li { display: grid; grid-template-columns: 1fr auto; gap: 1px 10px; padding: 6px 0; border-bottom: 1px dotted #888; }
#ledger .lt { grid-column: 1 / -1; color: #555; font-size: 11.5px; } #ledger .lw { font-weight: 700; } #ledger .ld { grid-column: 1 / -1; }
.receipt::after { content: ""; position: absolute; left: 0; right: 0; bottom: -9px; height: 9px;
  background: linear-gradient(-45deg, transparent 6px, #e8e6df 6px) 0 0/12px 9px repeat-x, linear-gradient(45deg, transparent 6px, #e8e6df 6px) 0 0/12px 9px repeat-x; }

#diaries { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 22px; }
.page { position: relative; background: #e6e5e0; padding: 22px 20px 22px 40px; font-size: 14.5px; line-height: 26px;
  background-image: repeating-linear-gradient(transparent 0 25px, rgba(0,0,0,.16) 25px 26px), linear-gradient(90deg, transparent 28px, rgba(255,62,165,.55) 28px 29px, transparent 29px);
  background-position: 0 12px, 0 0; box-shadow: 0 14px 18px -16px rgba(0,0,0,.8);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 92% 98.6%, 84% 100%, 73% 98.8%, 61% 100%, 50% 98.7%, 38% 100%, 26% 98.8%, 14% 100%, 5% 98.6%, 0 100%); }
.page:nth-child(even) { transform: rotate(.8deg); } .page:nth-child(odd) { transform: rotate(-.6deg); }
.page h3 { font: 900 20px/26px var(--mast); font-stretch: 62%; }
.page time { display: block; font-style: italic; color: #444; }
.page p { white-space: pre-line; }

/* membership: a flyer with tear-off tabs */
.flyer { grid-column: 3 / span 8; padding: clamp(26px, 3.4vw, 48px) clamp(24px, 3.4vw, 48px) 0; transform: rotate(-.4deg); background-color: var(--paper-hi); }
.flyer::before { content: ""; position: absolute; top: -12px; left: 18%; width: 96px; height: 26px; transform: rotate(3deg); background: rgba(232,228,212,.62); }
.flyer h2 { font-size: clamp(56px, 8vw, 118px); }
.flyer > p { max-width: 58ch; margin-bottom: 1em; }
.flyer .soon { font-weight: 700; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); margin: 26px calc(-1 * clamp(24px, 3.4vw, 48px)) 0; border-top: 2px dashed rgba(0,0,0,.55); }
.tab { appearance: none; border: 0; border-right: 2px dashed rgba(0,0,0,.55); background: transparent; color: var(--ink); font: 400 14px/1.4 var(--type);
  padding: 16px 12px 22px; text-align: left; cursor: pointer; display: flex; flex-direction: column; gap: 3px; min-height: 150px; transition: transform .25s ease, opacity .25s ease; }
.tab:last-child { border-right: 0; }
.tab { clip-path: polygon(0 0, 100% 0, 100% 94%, 92% 100%, 81% 95%, 70% 100%, 58% 96%, 46% 100%, 35% 95%, 23% 100%, 11% 96%, 0 100%); }
.tab span:last-child { font-style: italic; }
.tab b { font: 900 24px/1 var(--mast); font-stretch: 62%; margin-bottom: 4px; }
.tab:hover { background: rgba(255,62,165,.13); }
.tab.torn { transform: translateY(18px) rotate(4deg); opacity: .25; pointer-events: none; }
.tabmsg { font-size: 14px; padding: 14px 0 22px; min-height: 2.6em; }

.colophon { background: #000; color: #8d8a83; padding: 34px clamp(16px, 4vw, 64px); font-size: 13px; }

@media (max-width: 900px) {
  .manifesto, .contact, .how, .rules, .flyer { grid-column: 1 / -1; margin-top: 0; }
  .pair { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .film { height: auto; min-height: 0; aspect-ratio: auto; }
  .no-film .film { padding-top: 44px; padding-bottom: 64px; }
  .no-film .film-still { position: relative; top: 0; height: auto; aspect-ratio: 2.39; }
  .bar { height: 44px; } .bar.bottom { height: 64px; }
  .tag { display: none; }
  .tabs { grid-template-columns: 1fr; } .tab { border-right: 0; border-bottom: 2px dashed rgba(0,0,0,.55); min-height: 0; }
}
@media (prefers-reduced-motion: reduce) { .tab { transition: none; } }
.shot { --frame-h: min(900px, calc(100vw / 2.39)); --bar: calc((900px - var(--frame-h)) / 2); }
.shot .film { height: 900px; }