/* The Company scroll (company.js): an old newspaper down the left of the
 * home, on aged paper in the reading face, its masthead the wordmark. It
 * keeps clear of Wuzhay — she stands right of the middle — with air on every
 * side; the roll is the cylinder that rides its reveal edge as it unrolls.
 */
.gazette {
  position: absolute;
  left: clamp(24px, 6.5vw, 132px);            /* the brand's left edge */
  top: clamp(40px, 7vh, 96px);                /* the brand is gone while the scroll is up: it may start high */
  bottom: clamp(16px, 3.5vh, 40px);
  width: min(46vw, 640px);                    /* the fallback: company.js sets it to reach almost to her, padded as on the left */
  z-index: 3;
  visibility: hidden;
  pointer-events: none;
  transform: rotate(-0.8deg);
  transform-origin: 50% 0;
  --ink: #1c1712;
  --paper: #e7dcc2;
  --paper-deep: #cdbf9f;
  --rule: rgba(28, 23, 18, 0.55);
  font-family: "Newsreader", Georgia, serif;
  color: var(--ink);
}
.gazette.shown { visibility: visible; pointer-events: auto; }
.gazette-paper {
  position: relative;
  max-height: 100%;
  overflow: auto;
  box-sizing: border-box;
  padding: clamp(14px, 1.8vw, 26px) clamp(18px, 2.2vw, 32px) clamp(16px, 2vw, 30px);
  background:
    radial-gradient(ellipse at 50% 40%, rgba(255, 250, 235, 0.35), rgba(120, 95, 60, 0.18) 100%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, 0.018) 0 2px, transparent 2px 5px),
    var(--paper);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.25);
  clip-path: inset(0 0 100% 0);
  font-size: clamp(13px, min(1.35vw, 2.1vh), 20px);   /* by the height too: the whole paper must show */
  line-height: 1.4;
  scrollbar-width: thin;
}
.gazette-roll {
  position: absolute;
  left: -8px;
  right: -8px;
  top: -14px;
  height: 28px;
  border-radius: 14px;
  background: linear-gradient(180deg, #f3ead6 0%, #d9ccae 30%, #8c7c5c 62%, #4a4030 100%);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(255, 255, 255, 0.35) inset;
  opacity: 0;
  pointer-events: none;
}

/* the masthead: dateline, the name, a strap, a double rule */
.masthead { text-align: center; }
.masthead-line {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  font-size: 0.72em;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.35em 0;
}
/* the name as the lockup: the mark at the left of the wordmark, 1.6x its
   type size, a 0.55em gap, centred (the cream mark inked for the paper) */
.masthead-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  margin: 0.22em 0 0.05em;
  font-family: "Anton", "Archivo Black", sans-serif;
  font-weight: 400;
  font-size: clamp(26px, min(3.2vw, 5.4vh), 48px);
  letter-spacing: 0.06em;
  line-height: 1;
  color: var(--ink);
}
.masthead-mark {
  height: 1.05em;                              /* about the name's height (the user's call), not the lockup's 1.6x */
  width: auto;
  display: block;
  filter: brightness(0) opacity(0.88);
}
.masthead-strap {
  font-style: italic;
  font-size: 0.98em;
  padding-bottom: 0.45em;
  border-bottom: 3px double var(--rule);
}

/* the story: a headline, then two columns with a rule between */
.gazette-body { margin-top: 0.9em; }
.gazette-body .headline {
  margin: 0 0 0.45em;
  font-weight: 400;
  font-size: 1.5em;
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
}
.gazette-body .columns {
  column-count: 2;
  column-gap: 1.5em;
  column-rule: 1px solid var(--rule);
  text-align: justify;
  hyphens: auto;
}
.gazette-body p { margin: 0 0 0.7em; }
.gazette-body p:first-child::first-letter {
  float: left;
  font-size: 2.9em;
  line-height: 0.82;
  padding: 0.06em 0.12em 0 0;
}
.gazette-body .lede { font-style: italic; }
.gazette-body h4 {
  margin: 0.4em 0 0.3em;
  font-weight: 400;
  font-size: 0.78em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  break-after: avoid;
}
.gazette-body h4::before, .gazette-body h4::after { content: " — "; }
.gazette-body .notice {
  text-align: center;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 0.3em 0;
  break-inside: avoid;
}

/* the notices box: where to find us, set like a classified — inside a
   ruled box across the bottom, the address as a notice to callers, the
   wire for correspondence */
.classified {
  margin-top: 0.9em;
  border: 1px solid var(--ink);
  outline: 1px solid var(--ink);
  outline-offset: 2px;
  padding: 0.55em 0.9em 0.7em;
  font-size: 0.95em;
}
.classified-head {
  text-align: center;
  font-size: 0.74em;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 0.3em;
  margin-bottom: 0.5em;
}
.classified p { margin: 0 0 0.35em; }
.classified p:last-child { margin-bottom: 0; }
.classified .small-caps { font-variant: small-caps; letter-spacing: 0.06em; }
.classified a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.14em;
}
.classified a:hover { background: rgba(28, 23, 18, 0.1); }

@media (max-width: 900px) {
  .gazette { width: min(56vw, 420px); }
  .gazette-body .columns { column-count: 1; }
}
@media (max-width: 600px) {
  .gazette { width: 74vw; left: 13vw; top: 80px; }
}