/* ============================================================
   MAINTENANCE PAGE
   Stands in for the site while WordPress is offline. Built on
   index.html's background and panel, without the header, footer
   or side nav. Everything else comes from /styles.css.
============================================================ */

/* ── One full screen, centered (owner, 21 October 2026). The site's
   280 start exists to clear the 140 header; this is the one page
   with no header, so it centers instead and keeps the 20 side
   margin. Every other page keeps the 280. ── */
.page-maintenance .panel {
  align-items: center;
}

.page-maintenance .panel-content {
  padding: var(--gap-60) var(--gap-20);
}

/* ── Picture left, notice right; stacked on a phone. A one-off gap
   of 120 between the two (owner, 21 October 2026): the logo fills its
   column, so the default 40 read as touching the words. The scale
   allows a one-off on any step (Website-Aesthetics, Spacing) ── */
.maintenance {
  display:               grid;
  grid-template-columns: 1fr;
  align-items:           center;
  gap:                   var(--gap-120);
}

@media (min-width: 768px) {
  .maintenance {
    grid-template-columns: 2fr 3fr;   /* narrow picture, wide notice, as on the live page */
  }
}

/* ── The logo, in the site's own cream and orange via .logo ── */
.maintenance-art {
  display:         flex;
  justify-content: center;
}

/* Sized by width, not screen height: 380 across at most, so it holds
   its size down to a 420 screen (380 plus the 20 gutters) and shrinks
   with the column below that. The site's bands do the rest: the
   columns stack at 767 with everything else on the site. */
.maintenance-logo {
  display:   block;
  width:     100%;
  max-width: 380px;
  height:    auto;
}

/* ── The block height is this page's title: the display 2 size (96px),
   not the class's 36, cream with the small-title glow (recipe 05), as
   every title at this size is (owner, 21 October 2026) ── */
.maintenance-block-height.text-block-36px {
  font-size:   clamp(48px, 8vw, 96px);
  line-height: 1;
  color:       var(--text-heading);
  text-shadow:
    0 0  1px rgba(245, 243, 239, 1),
    0 0  6px rgba(227, 121,  27, 0.8),
    0 0 20px rgba(227, 121,  27, 0.35);
}

.maintenance-notice {
  display:        flex;
  flex-direction: column;
  gap:            var(--gap-20);
  container-type: inline-size;   /* the bar sizes itself to this column */
}

/* ── The shade bar, in OCR-Bitcoin's ANSI blocks. No letter
   spacing, so the blocks touch. Its 34 blocks span the full
   column at any width ── */
.maintenance-bar {
  font-family:    var(--font-btc);
  font-size:      4.08cqi;
  line-height:    1;
  letter-spacing: 0;
  white-space:    nowrap;
  color:          var(--text-heading);
}

/* The handle keeps its own case inside the button */
.maintenance-notice .btn {
  text-transform: none;
}