/* ============================================================
   COMMUNITY DATA CENTERS ZINE
   Photocopied on marigold paper. Toner black. One red.
   ============================================================ */

:root {
  --paper:  #F2B335;   /* marigold copy paper */
  --toner:  #161412;   /* toner near-black */
  --cut:    #FBF1D6;   /* cream cutout */
  --stamp:  #C6321E;   /* rubber-stamp red */
  --rule:   3px solid var(--toner);
  --display: "Archivo Black", "Arial Black", sans-serif;
  --body: "Courier Prime", "Courier New", monospace;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--toner);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
}

/* toner speckle over the whole page */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
  opacity: .20;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Rubber-stamp red on marigold paper is only ~2.9:1 — too faint to read
   outdoors or in sun. So red never sits straight on the paper: links are
   toner black with a red rule under them, and everything stamped gets a
   cream label behind it (4.8:1). Red still means clickable. */
a { color: var(--toner); text-decoration: none; border-bottom: 3px solid var(--stamp); }
a:hover, a:focus { background: var(--stamp); color: var(--cut); border-bottom-color: var(--toner); }

.zine {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 18px 60px;
}

/* ————— MASTHEAD ————— */

.masthead {
  border-bottom: 8px solid var(--toner);
  padding: 26px 0 22px;
}

.issue {
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .16em;
  margin: 0 0 14px;
  padding: 6px 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
  text-align: center;
}

.title {
  font-family: var(--display);
  font-size: clamp(52px, 17vw, 132px);
  line-height: .86;
  letter-spacing: -.02em;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.kicker {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 10px;
  max-width: 34em;
}

.hosted {
  font-size: 13px;
  margin: 0 0 16px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.roll {
  border-top: var(--rule);
  border-bottom: var(--rule);
  padding: 10px 0;
  font-size: 13.5px;
  line-height: 1.9;
  margin-bottom: 22px;
}
.roll b { font-family: var(--display); font-weight: 400; letter-spacing: .01em; }
.roll .sep { color: var(--stamp); font-weight: 700; padding: 0 4px; }

/* ————— STAMPS ————— */

.stamp {
  display: inline-block;
  font-family: var(--display);
  color: var(--stamp);
  background: var(--cut);
  border: 3px solid var(--stamp);
  outline: 2px solid var(--stamp);
  outline-offset: 3px;
  text-transform: uppercase;
  letter-spacing: .08em;
  text-align: center;
  transform: rotate(-2.5deg);
  padding: 10px 16px;
  text-decoration: none;
}
.stamp:hover, .stamp:focus {
  background: var(--stamp);
  color: var(--cut);
  border-color: var(--stamp);
  transform: rotate(-2.5deg) scale(1.02);
}
.stamp-big { font-size: clamp(17px, 5vw, 26px); padding: 14px 22px; margin: 6px 0 4px; }
.stamp-arrow { font-size: .85em; }
.stamp-sub { display: block; font-size: 11px; letter-spacing: .1em; margin-top: 7px; line-height: 1.5; }
.stamp-time { font-size: 15px; padding: 8px 13px; transform: rotate(3deg); letter-spacing: .06em; }
.stamp-next { transform: rotate(1.5deg); }
.stamp-next:hover, .stamp-next:focus { transform: rotate(1.5deg) scale(1.02); }
.stamp-dead { cursor: default; border-style: dashed; }
.stamp-dead:hover { background: var(--cut); color: var(--stamp); border-color: var(--stamp); transform: rotate(1.5deg); }

/* ————— SPREADS ————— */

.spread { padding: 42px 0 10px; border-bottom: var(--rule); }
.spread:last-of-type { border-bottom: none; }

.head {
  font-family: var(--display);
  font-size: clamp(34px, 10vw, 62px);
  line-height: .9;
  margin: 0 0 14px;
  text-transform: uppercase;
}

.standfirst {
  font-size: 16px;
  max-width: 33em;
  margin: 0 0 26px;
  border-left: 6px solid var(--toner);
  padding-left: 12px;
}

/* ————— PASTE-UPS ————— */

.paste { position: relative; margin: 0 0 34px; }

.cutout {
  position: relative;
  background: var(--cut);
  padding: 12px 12px 14px;
  border: 2px solid var(--toner);
  clip-path: polygon(
    0% 2%, 8% 0.4%, 19% 1.8%, 31% 0%, 44% 1.6%, 57% 0.3%, 70% 1.9%, 83% 0.2%, 94% 1.7%, 100% 0.6%,
    99.2% 12%, 100% 27%, 98.8% 41%, 100% 56%, 99% 70%, 100% 84%, 99.3% 100%,
    88% 98.4%, 75% 100%, 62% 98.3%, 48% 99.8%, 35% 98.2%, 21% 99.9%, 9% 98.4%, 0% 99.6%,
    0.8% 85%, 0% 71%, 1.1% 57%, 0% 43%, 0.9% 28%, 0% 14%
  );
}
.tilt-l { transform: rotate(-1.6deg); }
.tilt-r { transform: rotate(1.4deg); }
.tilt-s { transform: rotate(-0.7deg); }

.cutout img {
  display: block;
  width: 100%;
  height: auto;
  border: 2px solid var(--toner);
  filter: grayscale(1) contrast(1.55) brightness(1.06);
}
/* Danny's photo is already zine collage — keep the yellow labels */
.cutout.keep-color img { filter: contrast(1.06) saturate(1.05); }


.caption {
  margin: 10px 2px 0;
  font-size: 14px;
  line-height: 1.5;
}
.caption .who {
  display: block;
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.caption .said { font-style: italic; }

.setups { display: grid; gap: 26px; }

/* ————— WEATHER REPORT ————— */

.weather { display: grid; gap: 0; border-top: var(--rule); }
.wx {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2px;
  padding: 12px 2px;
  border-bottom: 2px solid var(--toner);
}
.wx .wx-who { font-family: var(--display); font-size: 15px; text-transform: uppercase; letter-spacing: .03em; }
.wx .wx-where { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; }
.wx .wx-note { font-size: 16px; }

/* ————— CENTERFOLD ————— */

.spread-center { padding-top: 44px; }
.centerfold-head {
  font-family: var(--display);
  font-size: clamp(30px, 8vw, 52px);
  line-height: .92;
  margin: 0 0 6px;
  text-transform: uppercase;
}
.centerfold-sub { font-size: 15px; margin: 0 0 20px; max-width: 34em; }
.specs {
  background: var(--toner);
  color: var(--cut);
  padding: 16px 16px 18px;
  margin: 22px 0 10px;
  font-size: 13.5px;
  line-height: 1.75;
}
.specs h3 {
  font-family: var(--display);
  font-size: 13px;
  letter-spacing: .14em;
  margin: 0 0 8px;
  color: var(--paper);
  text-transform: uppercase;
}
.specs .rig { margin-bottom: 14px; }
.specs .rig:last-child { margin-bottom: 0; }
.specs .rig b { color: var(--paper); font-weight: 400; font-family: var(--display); letter-spacing: .04em; }

/* ————— QUOTE WALL ————— */

.quotes { display: grid; gap: 4px; }
.q {
  border-top: 2px solid var(--toner);
  padding: 20px 0 16px;
}
.q blockquote {
  margin: 0 0 8px;
  font-family: var(--display);
  font-size: clamp(21px, 5.4vw, 31px);
  line-height: 1.12;
  letter-spacing: -.01em;
}
.q.small blockquote { font-family: var(--body); font-weight: 700; font-size: clamp(17px, 4vw, 21px); line-height: 1.35; }
.q .attrib {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .08em;
}
.q .attrib .where { opacity: .75; }
.q .src { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--toner); }

.flag {
  display: inline-block;
  font-family: var(--display);
  color: var(--stamp);
  background: var(--cut);
  border: 2px solid var(--stamp);
  font-size: 10px;
  line-height: 1;
  padding: 2px 4px;
  margin-left: 5px;
  vertical-align: middle;
}

/* ————— LUCK ————— */

.spread-luck { border-bottom: none; }
.luck { display: grid; gap: 16px; }
.lk {
  background: var(--cut);
  border: 2px solid var(--toner);
  padding: 14px 15px 15px;
}
.lk:nth-child(odd) { transform: rotate(-.6deg); }
.lk:nth-child(even) { transform: rotate(.5deg); }
.lk .lk-who { font-family: var(--display); font-size: 14px; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 5px; }
.lk .lk-ask { font-size: 15.5px; }

/* ————— COLOPHON ————— */

.colophon {
  border-top: 8px solid var(--toner);
  margin-top: 36px;
  padding-top: 30px;
  text-align: center;
}
.reach { font-size: 14.5px; margin: 22px 0 6px; }
.fineprint { font-size: 12.5px; line-height: 1.6; max-width: 32em; margin: 18px auto 0; }
.crosslink { margin: 26px 0 0; }
.crosslink a { font-family: var(--display); font-size: 14px; letter-spacing: .08em; }

/* ————— DESKTOP ————— */

@media (min-width: 760px) {
  .zine { padding: 0 32px 80px; }
  .roll { font-size: 15px; }
  .setups { grid-template-columns: 1fr 1fr 1fr; gap: 22px; align-items: start; }
  .wx { grid-template-columns: 210px 150px 1fr; align-items: baseline; gap: 14px; }
  .quotes { grid-template-columns: 1fr 1fr; gap: 0 34px; }
  .luck { grid-template-columns: 1fr 1fr; }
  .specs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
  .specs .rig { margin-bottom: 0; }
}

/* ————— PRINT (if anyone runs it off for real) ————— */

@media print {
  @page { size: letter; margin: 0.5in; }
  body { background: var(--paper); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body::before { display: none; }
  .stamp, .crosslink { break-inside: avoid; }
  .spread, .q, .lk, .paste { break-inside: avoid; }
  a { border-bottom: none; }
}