/* ---- Version 3 only: broadsheet front page ------------------------------
   Editorial format borrowed from the Gogh "Gazette" variant — masthead,
   dateline rules, drop-capped lead, boxed sidebar, classifieds. Rebuilt
   entirely in hand-written CSS on The OG 1870's own tokens and content. */

body.gz { background: #F7F2E7; }
.gz-paper { width: min(100% - 2rem, 1180px); margin-inline: auto; }

/* Masthead */
.gz-masthead { padding-block: var(--s4) 0; text-align: center; }
.gz-masthead .gz-ears {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: var(--s2); font-family: var(--font-label);
  letter-spacing: 0.14em; text-transform: uppercase;
  font-size: 0.85rem; color: var(--text-muted);
}
.gz-masthead h1 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2.6rem, 11vw, 7.5rem); line-height: 0.92;
  text-transform: uppercase; letter-spacing: 0.01em;
  margin: var(--s2) 0 var(--s1); color: var(--espresso);
}
.gz-masthead .gz-sub {
  font-family: var(--font-display); font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.35rem); color: var(--red); margin: 0;
}
.gz-dateline {
  margin-top: var(--s3);
  border-top: 3px double var(--espresso); border-bottom: 3px double var(--espresso);
  padding-block: 0.55rem;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.4rem var(--s3);
  font-family: var(--font-label); font-size: 0.85rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--espresso);
}
.gz-dateline a { color: var(--red); text-decoration: none; }
.gz-dateline a:hover { text-decoration: underline; }

/* Front page: lead + sidebar */
.gz-front { display: grid; gap: var(--s4); padding-block: var(--s4); }
@media (min-width: 900px) { .gz-front { grid-template-columns: 7fr 4fr; } }

.gz-kicker {
  font-family: var(--font-label); font-size: 0.9rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--red); margin: 0 0 0.6rem;
}
.gz-lead h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(2rem, 5.2vw, 3.6rem); line-height: 1.02;
  text-transform: uppercase; color: var(--espresso);
  margin: 0 0 0.7rem; text-wrap: balance;
}
.gz-standfirst {
  font-style: italic; font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--text-muted); max-width: 40ch; margin: 0 0 var(--s2);
}
.gz-byline {
  font-family: var(--font-label); font-size: 0.82rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text-muted);
  border-block: 1px solid var(--rule); padding-block: 0.4rem; margin: 0 0 var(--s3);
}
.gz-cols { column-width: 290px; column-gap: var(--s4); }
.gz-cols p { margin: 0 0 var(--s2); max-width: none; }
.gz-cols > p:first-child::first-letter {
  float: left; font-family: var(--font-display); font-weight: 900;
  font-size: 4.1rem; line-height: 0.82; padding: 0.1rem 0.55rem 0 0; color: var(--red);
}
figure.gz-press { margin: 0 0 var(--s3); }
figure.gz-press img { width: 100%; border: 1px solid var(--espresso); }
figure.gz-press figcaption {
  font-family: var(--font-label); font-size: 0.82rem; letter-spacing: 0.08em;
  color: var(--text-muted); padding-top: 0.45rem; text-transform: uppercase;
}

/* Boxed sidebar items */
.gz-box { border-top: 6px solid var(--espresso); padding-top: 0.7rem; margin-bottom: var(--s4); }
.gz-box h3 {
  font-family: var(--font-label); font-weight: 400; font-size: 1.05rem;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--espresso);
  margin: 0 0 0.7rem;
}
.gz-box dl { margin: 0; }
.gz-box dt {
  font-family: var(--font-label); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--red); font-size: 0.95rem; margin-top: 0.6rem;
}
.gz-box dd { margin: 0; font-weight: 700; }
.gz-box dd small { display: block; font-weight: 400; font-size: 0.82rem; color: var(--text-muted); }
.gz-box p { font-size: 0.95rem; }
.gz-box .gz-big { font-family: var(--font-display); font-weight: 900; font-size: 2rem; color: var(--red); line-height: 1.1; }

/* Arrivals list (thumbnail + text rows) */
.gz-arrival {
  display: grid; grid-template-columns: 96px 1fr; gap: var(--s2);
  align-items: start; text-decoration: none; color: var(--text);
  padding-block: 0.8rem; border-bottom: 1px solid var(--rule);
}
.gz-arrival:last-child { border-bottom: 0; }
.gz-arrival img { width: 96px; height: 96px; object-fit: cover; border: 1px solid var(--espresso); }
.gz-arrival h4 {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--red); margin: 0 0 0.2rem;
}
.gz-arrival p { margin: 0; font-size: 0.92rem; color: var(--text-muted); }
.gz-arrival:hover h4 { text-decoration: underline; }

/* Section rules */
.gz-rule {
  border-top: 3px double var(--espresso); padding-top: 0.7rem; margin-top: var(--s5);
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s2);
}
.gz-rule h2 {
  font-family: var(--font-display); font-weight: 900;
  font-size: clamp(1.4rem, 3vw, 2.2rem); text-transform: uppercase;
  color: var(--espresso); margin: 0;
}
.gz-rule .gz-note {
  font-family: var(--font-label); font-size: 0.82rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted);
}

/* Picture spread */
.gz-spread { display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); margin-block: var(--s3); }
/* Lock to 3 across on desktop so the six photographs fill two even rows */
@media (min-width: 900px) { .gz-spread { grid-template-columns: repeat(3, 1fr); } }
.gz-spread figure { margin: 0; }
.gz-spread img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border: 1px solid var(--espresso); }
.gz-spread figcaption {
  font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted); padding-top: 0.4rem;
}

/* Classifieds = the building's history, set as dated notices */
.gz-classifieds { columns: 2 260px; column-gap: var(--s4); margin-block: var(--s3); }
.gz-notice { break-inside: avoid; margin: 0 0 var(--s2); padding-bottom: var(--s2); border-bottom: 1px solid var(--rule); }
.gz-notice .gz-year {
  font-family: var(--font-label); font-size: 1.25rem; letter-spacing: 0.12em;
  color: var(--red); display: block; line-height: 1.1;
}
.gz-notice p { margin: 0.2rem 0 0; font-size: 0.95rem; max-width: none; }

/* Coupon-style call to action */
.gz-coupon {
  border: 3px dashed var(--espresso); padding: var(--s3);
  text-align: center; margin-block: var(--s4);
  background: #FFFDF8;
}
.gz-coupon h3 {
  font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(1.4rem, 3vw, 2rem); color: var(--espresso); margin: 0 0 0.4rem;
}
.gz-coupon p { margin: 0 auto var(--s2); max-width: 46ch; }
.gz-coupon .gz-fine {
  font-family: var(--font-label); font-size: 0.8rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); margin: var(--s2) auto 0;
}

.gz-colophon {
  border-top: 3px double var(--espresso); margin-top: var(--s5); padding-block: var(--s3) var(--s4);
  font-family: var(--font-label); font-size: 0.85rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--text-muted); text-align: center;
}
.gz-colophon p { max-width: none; margin-inline: auto; }

/* colophon link — was an inline style attribute, which CSP blocks */
.gz-colophon a { color: var(--red); }