/* ============================================================
   front-page.css — the site chrome around the poster
   Loaded ONLY by docs/index.html, after shared/styles/public-styles.css
   and after branding.css. Nothing here belongs in the poster's own
   stylesheet; this is the seam between the two.

   STATUS: LIVE ON THE branding BRANCH — not merged, not published.
   ============================================================ */

/* ---------- the seam ----------
   branding.css makes the WHOLE body Georgia, because it was written as a
   standalone sheet. On the real page the header and footer keep the site's
   own face; only the poster is set in the flyer's serif. */
body {
  font-family: var(--font-body, system-ui, -apple-system, sans-serif);
}
.poster {
  font-family: Georgia, "Times New Roman", serif;
  /* public-styles.css sets body line-height 1.5. The proof page never had it,
     and it silently added 9px to the phone banner. */
  line-height: normal;
}

/* ---------- defuse the old services grid ----------
   public-styles.css still carries a `.card` from the previous homepage:
   black background, white text, rounded corners, a drop shadow, and a
   `height: 3px` on `.card::after`. branding.css was written standalone and
   never restates those, so they bled straight through - the five categories
   sat on a dark panel and the black title chips disappeared into it. */
.poster .card {
  background: none;
  color: var(--ink);
  border-radius: 0;
  box-shadow: none;
}

/* top + bottom + height all set is over-constrained: the height wins and
   bottom is dropped, which would cut the dividers to 3px at the top edge.
   Desktop only - below 1020 the divider is a 1.5px rule across the bottom
   and that height is intentional. */
@media (min-width: 1020px) {
  .poster .card::after {
    height: auto;
    /* same leak, horizontal: the old rule sets left: 24px. With left, right
       AND width all specified the browser drops right, so every divider
       landed 24px inside its card. The poster pins it with right: 0. */
    left: auto;
  }
}

/* The sheet has a -16px halo blurred 28px. Under a header it needs air, or
   the shadow paints up behind the beige bar. */
.mode-paper .stage {
  margin: 40px auto 0;
}

/* ...and that halo needs 1032px of viewport to clear both edges; below that it
   would push a horizontal scrollbar. Nothing on this page should ever scroll
   sideways. (branding.css already does this below 1020.) */
html {
  overflow-x: hidden;
}

/* ---------- Member / Guest buttons ----------
   Brandon: "transfer the Member and Guest buttons to the right of 'We're
   about the details.', vertically on top of each other with some padding in
   between."

   They travel in a flex row WITH the script, so no magic pixel offset can
   drift when the promise or the lede re-wraps at a different width. The row is
   exactly the script's box; the buttons are absolute against it and sit one
   column-gap past its right edge — dead centre on the lettering.

   The absolute `top` is a percentage for a reason: it resolves against the
   row's height, which IS the script's height, so it tracks the cut-out at every
   width. The script's ink runs to row 76 of 114, so its optical centre is
   35.5% down the box; -45.2px is half the 90.4px button pair. */
.scriptrow {
  position: relative;
  display: flex;
  align-items: flex-start;
  margin-top: 56.6px;          /* was .script's margin-top */
}
.scriptrow .script {
  margin: 0 0 0 24.1px;        /* the flyer's 24.1 indent, minus the top/bottom */
}

.mast-actions {
  position: absolute;
  left: calc(100% + 28px);     /* the masthead's column gap: the art column */
  top: calc(35.5% - 45.2px);
  z-index: 6;
  width: 176px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mast-actions .btn-primary {
  width: 100%;
  font-size: 14px;
  line-height: 1.3;
  padding: 10px 6px;
  white-space: nowrap;
}

/* Tablet still has the mug standing beside the masthead, so the buttons keep
   the desktop placement — one column-gap off the script, 26px here. */
@media (min-width: 640px) and (max-width: 1019px) {
  .scriptrow { margin-top: 20px; }
  .scriptrow .script { margin: 0; }
  .mast-actions {
    left: calc(100% + 26px);
    top: calc(35.5% - 40.9px);  /* half the 81.8px pair */
    width: 150px;
    gap: 12px;
  }
  .mast-actions .btn-primary {
    font-size: 13px;
    padding: 9px 4px;
  }
}

/* Phone: no second column to pin into, so the buttons return to the flow —
   directly under the mug (which closes the masthead), above the five cards.
   `display: contents` lifts the masthead's parts into the one-column grid so
   `order` can put the buttons after the mug without moving them in the DOM.
   639.98, not 639: media queries evaluate against the fractional layout width,
   so an exact 639px leaves a dead zone where neither this block nor the
   tablet one matches. */
@media (max-width: 639.98px) {
  .mode-paper .stage {
    margin: 0;
  }
  .masthead-left,
  .scriptrow {
    display: contents;
  }
  .scriptrow .script {
    margin: 20px 0 0;          /* branding.css's phone margin, restored */
  }
  .mast-actions {
    position: static;
    order: 10;
    width: 100%;
    margin-top: 18px;
    gap: 12px;
  }
  .mast-actions .btn-primary {
    font-size: 15px;
    padding: 12px 10px;
  }
}