:root {
  --paper: #f1ead8;
  --paper-dark: #e6dcc3;
  --ink: #1c1a16;
  --ink-soft: #3d3a33;
  --rule: #1c1a16;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { background: #cfc6b0; }

body {
  margin: 0;
  color: var(--ink);
  background: #cfc6b0;
  font-family: "Old Standard TT", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

/* ---------- newsprint sheet ---------- */
.paper {
  max-width: 1180px;
  margin: 24px auto;
  padding: 20px 28px 32px;
  background-color: var(--paper);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .09 0 0 0 0 .07 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 0%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(ellipse at 100% 100%, rgba(120,95,40,.12), transparent 55%);
  box-shadow: 0 2px 0 rgba(0,0,0,.08), 0 12px 40px rgba(0,0,0,.25);
}

/* slight ink bleed on all type */
.paper h1, .paper h2, .ad, .box { text-shadow: 0 0 .6px rgba(28,26,22,.55); }

/* ---------- masthead ---------- */
.masthead { text-align: center; border-bottom: 4px double var(--rule); padding-bottom: 10px; margin-bottom: 16px; }

.mast-rule {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  font: 500 12px/1 "Oswald", sans-serif; letter-spacing: .14em; text-transform: uppercase;
  border-top: 2px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 6px 2px;
}
.mast-rule a { text-decoration: none; }

.masthead h1 {
  font-family: "Pirata One", "Old English Text MT", serif;
  font-weight: 400;
  font-size: clamp(60px, 12vw, 136px);
  letter-spacing: .01em;
  line-height: .9;
  margin: 10px 0 4px;
}

.mast-sub {
  font: 700 13px/1.2 "Oswald", sans-serif; letter-spacing: .22em; text-transform: uppercase;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
  padding: 5px 0; margin: 6px 0 10px;
}

.zipbar {
  display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center;
  font: 500 13px "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em;
}
.zipbar input {
  width: 86px; padding: 5px 8px; font: 700 16px "Special Elite", monospace; letter-spacing: .12em;
  background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 0;
}
.zipbar button {
  padding: 6px 12px; font: 700 13px "Oswald", sans-serif; letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink); border-radius: 0; cursor: pointer;
}
.zipbar button:hover { background: transparent; color: var(--ink); }
.zip-note { font-family: "Old Standard TT", serif; text-transform: none; letter-spacing: 0; font-style: italic; }

.sample-banner {
  margin: 0 0 16px; padding: 8px 12px; text-align: center;
  border: 2px dashed var(--ink); font: 400 14px "Special Elite", monospace;
}

.loading { text-align: center; font: italic 18px "Old Standard TT", serif; padding: 60px 0; }

/* ---------- layout ---------- */
.feature-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  align-items: start;
  margin-bottom: 14px;
}
.feature-row > .ad { margin: 0; }

.columns {
  column-width: 230px;
  column-gap: 14px;
  column-rule: 1px solid rgba(28,26,22,.35);
}
.columns > * { break-inside: avoid; margin: 0 0 14px; }

.strip { margin-top: 4px; }

/* ---------- ad boxes (shared) ---------- */
.ad {
  position: relative;
  display: block;
  border: 2px solid var(--ink);
  padding: 12px 12px 10px;
  text-align: center;
  background: var(--paper);
  overflow: hidden;
}

.ad-flag {
  display: inline-block;
  font: 700 12px/1 "Oswald", sans-serif; letter-spacing: .14em; text-transform: uppercase;
  background: var(--ink); color: var(--paper);
  padding: 5px 9px; margin-bottom: 8px;
}

.ad-kicker {
  font: italic 400 15px/1.25 "Playfair Display", serif;
  margin: 0 0 6px;
}
.ad-kicker::before { content: "\201C"; }
.ad-kicker::after { content: "\201D"; }

.ad-title {
  margin: 2px 0 6px;
  line-height: .92;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.ad-credits {
  font: 500 11px/1.35 "Oswald", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 8px;
}
.ad-credits b { font-weight: 700; }

.ad-blurb { font: 14px/1.4 "Old Standard TT", serif; margin: 0 0 10px; text-align: justify; hyphens: auto; }

.ad-meta {
  display: flex; justify-content: center; align-items: center; gap: 10px; flex-wrap: wrap;
  font: 500 12px "Oswald", sans-serif; letter-spacing: .08em; text-transform: uppercase;
  border-top: 1px solid var(--ink); padding-top: 7px; margin-top: 4px;
}
.rating {
  border: 2px solid currentColor; padding: 1px 5px; font-weight: 700; letter-spacing: .04em;
}
.stars { letter-spacing: .05em; }

.ad-cta {
  display: inline-block; margin-top: 8px;
  font: 700 12px "Oswald", sans-serif; letter-spacing: .12em; text-transform: uppercase;
  text-decoration: none; border-bottom: 2px solid currentColor;
}
.ad-cta:hover { background: var(--ink); color: var(--paper); }

/* sizes */
.size-l .ad-title { font-size: clamp(46px, 6vw, 74px); }
.size-m .ad-title { font-size: 40px; }
.size-s .ad-title { font-size: 28px; }
.size-l .ad-kicker { font-size: 19px; }
.size-l { padding: 18px 18px 14px; }
.ad.long.size-l .ad-title { font-size: clamp(38px, 4.6vw, 54px); }
.ad.long.size-m .ad-title { font-size: 31px; }
.ad.long.size-s .ad-title { font-size: 23px; }

/* ---------- style variants ---------- */
/* v1: heavy sans block */
.v1 { border-width: 5px; }
.v1 .ad-title { font-family: "Anton", sans-serif; font-weight: 400; text-transform: uppercase; letter-spacing: .01em; }

/* v2: reverse (white on black) */
.v2 { background: var(--ink); color: var(--paper); }
.v2 .ad-title { font-family: "Abril Fatface", serif; font-weight: 400; }
.v2 .ad-flag { background: var(--paper); color: var(--ink); }
.v2 .ad-meta { border-top-color: var(--paper); }
.v2 .ad-cta:hover { background: var(--paper); color: var(--ink); }

/* v3: double rule slab */
.v3 { border: 7px double var(--ink); }
.v3 .ad-title { font-family: "Alfa Slab One", serif; font-weight: 400; text-transform: uppercase; }
.v3 .ad-title::before, .v3 .ad-title::after { content: "\2726"; font-size: .35em; vertical-align: middle; margin: 0 .3em; }

/* v4: elegant prestige picture */
.v4 { border: 1px solid var(--ink); outline: 1px solid var(--ink); outline-offset: -6px; padding: 18px 16px 14px; }
.v4 .ad-title { font-family: "Playfair Display", serif; font-weight: 900; font-style: italic; }
.v4 .ad-flag { background: transparent; color: var(--ink); border-top: 1px solid; border-bottom: 1px solid; }

/* v5: typewriter / indie */
.v5 { border: 2px dashed var(--ink); }
.v5 .ad-title { font-family: "Special Elite", monospace; font-weight: 400; text-transform: lowercase; letter-spacing: -.02em; }

/* v6: condensed with starburst */
.v6 { border-width: 3px; padding-top: 18px; }
.v6 .ad-title { font-family: "Bebas Neue", sans-serif; font-weight: 400; line-height: .85; letter-spacing: .01em; }
.v6 .ad-flag {
  position: absolute; top: 4px; right: 4px; margin: 0;
  width: 84px; height: 84px; padding: 0 12px;
  display: grid; place-items: center; text-align: center; line-height: 1.05; font-size: 11px;
  clip-path: polygon(50% 0%,61% 12%,75% 5%,79% 21%,95% 22%,89% 37%,100% 50%,89% 63%,95% 78%,79% 79%,75% 95%,61% 88%,50% 100%,39% 88%,25% 95%,21% 79%,5% 78%,11% 63%,0% 50%,11% 37%,5% 22%,21% 21%,25% 5%,39% 12%);
  transform: rotate(12deg);
}
.v6 .ad-kicker { margin-right: 70px; text-align: left; }
.v6.size-l .ad-kicker { margin-right: 80px; }

/* v7: western woodtype */
.v7 { border: 4px solid var(--ink); box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 5px var(--ink); padding: 16px; }
.v7 .ad-title { font-family: "Rye", serif; font-weight: 400; text-transform: uppercase; line-height: 1; }

/* ---------- utility boxes (directory, midnite, coming soon) ---------- */
.box { border: 2px solid var(--ink); padding: 0 0 8px; background: var(--paper); }
.box-head {
  background: var(--ink); color: var(--paper); text-align: center;
  font: 400 22px/1 "Anton", sans-serif; letter-spacing: .06em; text-transform: uppercase;
  padding: 8px 6px 7px;
}
.box-sub {
  text-align: center; font: 500 11px "Oswald", sans-serif; letter-spacing: .14em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); padding: 5px; margin-bottom: 4px;
}
.box ol, .box ul { list-style: none; margin: 0; padding: 0 10px; }
.box li { padding: 5px 0; border-bottom: 1px dotted rgba(28,26,22,.5); font: 13px/1.3 "Old Standard TT", serif; }
.box li:last-child { border-bottom: 0; }
.box li .t { font: 700 14px/1.2 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.box li .d { display: block; font-size: 12px; font-style: italic; }
.box li a { text-decoration: none; }
.box li a:hover .t { text-decoration: underline; }

.box.dir li { display: flex; justify-content: space-between; gap: 8px; }
.box.dir li .r { font: 500 12px "Oswald", sans-serif; white-space: nowrap; }

.box.midnite { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.box.midnite .box-head {
  font-family: "Rye", serif; font-size: 24px; background: transparent;
  border-bottom: 3px double var(--paper);
}
.box.midnite .box-sub { border-bottom-color: var(--paper); }
.box.midnite li { border-bottom-color: rgba(241,234,216,.45); }

.box.soon .box-head { font-family: "Abril Fatface", serif; font-size: 26px; text-transform: none; letter-spacing: 0; }

/* bargain strip */
.bargain {
  border-top: 4px double var(--ink); border-bottom: 4px double var(--ink);
  padding: 8px 6px; text-align: center;
}
.bargain-head {
  font: 400 26px/1 "Alfa Slab One", serif; text-transform: uppercase;
}
.bargain-head .price {
  display: inline-block; background: var(--ink); color: var(--paper); padding: 2px 10px; margin: 0 8px;
  transform: rotate(-3deg);
}
.bargain-list { margin: 8px 0 0; font: 700 14px/1.6 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.bargain-list span + span::before { content: " \2605 "; font-weight: 400; }
.bargain-note { font: italic 12px "Old Standard TT", serif; margin-top: 4px; }

/* ---------- footer ---------- */
.colophon {
  margin-top: 44px; padding-top: 14px; border-top: 2px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.colophon .tmdb { margin: 0; font: italic 12px/1.4 "Old Standard TT", serif; max-width: 640px; }
.colophon .home {
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
  font: 500 12px "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .12em;
}
.mascot { height: 36px; width: auto; max-width: 80px; object-fit: contain; flex: none; }

/* ---------- responsive ---------- */
@media (max-width: 600px) {
  .paper { margin: 0; padding: 14px 16px 24px; }
  .feature-row { grid-template-columns: 1fr; }
  .mast-rule { justify-content: center; }
  .mast-rule span:last-child { display: none; }
  .mast-sub { letter-spacing: .12em; font-size: 11px; }
  .size-l .ad-title { font-size: 48px; }
  .bargain-head { font-size: 20px; }
}

/* ---------- posters ---------- */
.poster { position: relative; margin: 0; line-height: 0; border: 2px solid currentColor; background: var(--paper-dark); }
.poster img { width: 100%; height: auto; display: block; aspect-ratio: 2 / 3; object-fit: cover; }
.poster-newsprint img { filter: grayscale(1) sepia(.18) contrast(1.35) brightness(1.04); }
.poster-newsprint::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(28,26,22,.42) 0.9px, transparent 1.3px);
  background-size: 3px 3px;
  mix-blend-mode: multiply;
}

/* big ads: poster beside the copy */
.size-l.has-poster { display: grid; grid-template-columns: minmax(130px, 38%) 1fr; gap: 16px; align-items: start; }
.size-l.has-poster .ad-body { min-width: 0; }
.size-l.has-poster .ad-title { font-size: clamp(38px, 4.4vw, 60px); }
.ad.long.size-l.has-poster .ad-title { font-size: clamp(30px, 3.4vw, 44px); }

/* medium ads: small poster on top */
.size-m .poster { width: 58%; margin: 0 auto 10px; }

/* starburst flag shouldn't sit on top of the poster */
.v6.has-poster .ad-flag { position: static; transform: rotate(-4deg); margin: 0 auto 8px; }
.v6.has-poster .ad-kicker { margin-right: 0; text-align: center; }

@media (max-width: 600px) {
  .size-l.has-poster { grid-template-columns: 1fr; }
  .size-l.has-poster .poster { width: 62%; margin: 0 auto; }
}

/* ---------- Time Machine ---------- */
.timemachine { margin-top: 10px; padding-top: 8px; border-top: 1px dashed rgba(28,26,22,.5); }
.timebar {
  display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap;
  font: 500 13px "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em;
}
.tm-label { font: 400 18px/1 "Rye", serif; letter-spacing: .04em; }
.timebar input[type="date"] {
  padding: 4px 6px; font: 700 14px "Special Elite", monospace;
  background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 0;
}
.timebar button, .timebar a {
  padding: 5px 10px; font: 700 12px "Oswald", sans-serif; letter-spacing: .12em; text-transform: uppercase;
  background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 0; cursor: pointer; text-decoration: none;
}
.timebar button[type="submit"], .timebar a { background: var(--ink); color: var(--paper); }
.timebar button:hover, .timebar a:hover { background: var(--ink); color: var(--paper); }
.timebar button[type="submit"]:hover, .timebar a:hover { background: transparent; color: var(--ink); }
.tm-presets { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; margin-top: 7px; }
.tm-presets a {
  font: italic 13px "Old Standard TT", serif; text-decoration: none; border-bottom: 1px solid rgba(28,26,22,.4);
}
.tm-presets a:hover, .tm-presets a[aria-current] { border-bottom: 2px solid var(--ink); font-weight: 700; }
.sample-banner a { font-weight: 700; }
.timebar .tm-share { background: var(--ink); color: var(--paper); }
.timebar .tm-share:hover { background: transparent; color: var(--ink); }
.tm-share-note { font: italic 13px "Old Standard TT", serif; text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; }
.tm-share-note:empty { display: none; }

/* ---------- Fake Features ---------- */
.ad.fake { transform: rotate(-.6deg); }
.ad.fake.tilt-r { transform: rotate(.7deg); }
.ad.fake .ad-flag { font-size: 11px; }
.ad.fake .ad-meta i { text-transform: none; font-family: "Playfair Display", serif; letter-spacing: 0; font-size: 13px; }
.v6.fake .ad-flag { position: static; transform: rotate(-4deg); width: auto; height: auto; padding: 5px 9px; clip-path: none; margin: 0 auto 8px; }
.v6.fake .ad-kicker { margin-right: 0; text-align: center; }

/* ---------- Fake business ads ---------- */
.ad.brand .brand-label {
  font: 500 9px/1 "Oswald", sans-serif; letter-spacing: .3em; text-transform: uppercase;
  border-bottom: 1px solid currentColor; padding-bottom: 5px; margin: -4px -2px 8px; opacity: .8;
}
.ad.brand .brand-cat { font: italic 13px/1.2 "Playfair Display", serif; margin: 0 0 4px; }
.ad.brand .brand-desc { font: 13px/1.38 "Old Standard TT", serif; margin: 4px 0 8px; }
.ad.brand .ad-meta { font-size: 11px; gap: 4px 10px; }
.ad.brand .brand-phone { font: 700 15px "Special Elite", monospace; letter-spacing: .02em; text-transform: none; }
.ad.brand .brand-seen { font: italic 11px/1.3 "Old Standard TT", serif; margin: 6px 0 0; }
.ad.brand .brand-seen i { font-style: normal; }
/* the whole ad is clickable */
.ad.brand .brand-link::after { content: ""; position: absolute; inset: 0; }
.ad.brand:hover { outline: 2px solid var(--ink); outline-offset: 2px; }
.v6.brand .ad-title { font-size: 34px; }

@media (max-width: 600px) {
  .tm-label { width: 100%; text-align: center; }
}

/* ---------- Week Before / Week After ---------- */
.timebar a.tm-page { background: transparent; color: var(--ink); }
.timebar a.tm-page:hover { background: var(--ink); color: var(--paper); }

/* ---------- Birthday Week ---------- */
.bdaybar {
  display: flex; align-items: center; justify-content: center; gap: 6px 10px; flex-wrap: wrap;
  margin: 10px auto 0; padding: 7px 10px; max-width: 760px; border: 2px dashed var(--ink);
}
.bday-label { font: 400 18px/1 "Rye", serif; letter-spacing: .04em; }
.bday-help { font: italic 13px "Old Standard TT", serif; }
.bdaybar input[type="date"] {
  padding: 4px 6px; font: 700 14px "Special Elite", monospace;
  background: transparent; color: var(--ink); border: 2px solid var(--ink); border-radius: 0;
}
.bdaybar button {
  padding: 5px 10px; font: 700 12px "Oswald", sans-serif; letter-spacing: .12em; text-transform: uppercase;
  background: var(--ink); color: var(--paper); border: 2px solid var(--ink); border-radius: 0; cursor: pointer;
}
.bdaybar button:hover { background: transparent; color: var(--ink); }
.bday-note { font: italic 13px "Old Standard TT", serif; }
.bday-note:empty { display: none; }

/* ---------- See also ---------- */
.ad-see {
  display: block; margin-top: 8px; font: italic 13px/1.3 "Old Standard TT", serif; text-decoration: none;
  border-top: 1px dotted currentColor; padding-top: 6px;
}
.ad-see:hover { text-decoration: underline; }
.see-mini { text-decoration: none; font-size: 14px; margin-left: 3px; }
.see-mini:hover { text-decoration: underline; }

/* ---------- ticket price ---------- */
.box-price {
  text-align: center; font: 500 12px "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em;
  border-bottom: 1px solid var(--ink); padding: 4px 6px 5px; margin: -4px 0 4px;
}
.box-price b { font: 400 18px/1 "Alfa Slab One", serif; letter-spacing: 0; margin-left: 4px; }

/* ---------- Kiddie Matinee ---------- */
.box.kiddie { border-style: dashed; border-width: 3px; }
.box.kiddie .box-head { font: 400 26px/1.1 "Pirata One", "Rye", serif; text-transform: none; letter-spacing: .02em; background: transparent; color: var(--ink); border-bottom: 3px double var(--ink); }

/* ---------- Drive-In ---------- */
.box.drivein { border-width: 4px; }
.box.drivein .box-head { font: 400 34px/1.1 "Bebas Neue", "Oswald", sans-serif; letter-spacing: .18em; }
.box.drivein li { text-align: center; }
.box.drivein .plus { display: block; font: italic 12px "Old Standard TT", serif; margin: 1px 0; }
.box.drivein .c { font-size: 12px; }
.box-foot { text-align: center; font: italic 11px "Old Standard TT", serif; padding: 4px 8px 0; border-top: 1px solid var(--ink); margin-top: 4px; }

/* ---------- Opened This Week ---------- */
.box.anniv .box-head { font-family: "Playfair Display", serif; font-weight: 900; font-size: 22px; text-transform: none; letter-spacing: 0; }
.anniv-yr { display: flex; align-items: baseline; justify-content: space-between; padding: 6px 10px 0; border-top: 1px solid var(--ink); margin-top: 4px; }
.anniv-yr:first-of-type { border-top: 0; margin-top: 0; }
.anniv-yr b { font: 400 26px/1 "Alfa Slab One", serif; }
.anniv-yr span { font: italic 12px "Old Standard TT", serif; }
.anniv-link { display: block; text-align: right; padding: 2px 10px 4px; font: 500 11px "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .1em; text-decoration: none; }
.anniv-link:hover { text-decoration: underline; }

/* ---------- More in Today's Paper ---------- */
.xl-index { margin-top: 36px; border-top: 4px double var(--ink); padding-top: 10px; }
.xl-index h2 { margin: 0; text-align: center; font: 400 34px/1.1 "Abril Fatface", serif; }
.xl-index .xl-sub { text-align: center; font: italic 14px "Old Standard TT", serif; margin: 2px 0 12px; }
.xl-index .xl-cols { columns: 3 260px; column-gap: 26px; column-rule: 1px solid var(--ink); }
.xl-ix { display: block; break-inside: avoid; padding: 6px 0 7px; border-bottom: 1px dotted rgba(28,26,22,.5); text-decoration: none; }
.xl-ix .ln { display: flex; align-items: baseline; gap: 6px; }
.xl-ix b { font: 700 14px/1.2 "Oswald", sans-serif; text-transform: uppercase; letter-spacing: .03em; }
.xl-ix .dots { flex: 1; border-bottom: 2px dotted var(--ink); transform: translateY(-3px); min-width: 12px; }
.xl-ix .pg { font: 700 13px "Special Elite", monospace; white-space: nowrap; }
.xl-ix .d { display: block; font: 13px/1.3 "Old Standard TT", serif; margin-top: 2px; }
.xl-ix:hover b { text-decoration: underline; }

@media (max-width: 600px) {
  .bday-label, .bday-help { width: 100%; text-align: center; }
}