/* ===========================================================================
   VAULT  —  product: the Dead Man's Deal page above and around the board
   =========================================================================== */

/* ============================================================== BUY BAR ==
   Off the BOTTOM of the screen until the hero has gone past, then it stays.
   The one piece of chrome on this site that exists purely to sell.

   It is anchored to the bottom rather than the top on purpose: the header is
   already sticky, and two bars competing for the same edge is either a
   collision or a rule about which one hides, and both are worse than putting
   the purchase where a thumb already is.
   ========================================================================= */

.buybar {
  position: fixed; inset: auto 0 0; z-index: 90;
  transform: translateY(130%);
  background: rgba(10, 11, 13, .9);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid var(--line);
  box-shadow: 0 -20px 50px -20px rgba(0, 0, 0, .9);
  transition: transform .4s var(--ease);
}
.buybar.up { transform: none; }
.buybar .shell { display: flex; align-items: center; gap: var(--s3); height: var(--bar-h); }
.buybar img { width: 26px; height: 26px; flex: none; }
.buybar-txt { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; min-width: 0; }
.buybar-txt strong { font-size: .95rem; color: var(--tx); }
.buybar-txt span {
  font-size: .78rem; color: var(--tx-3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 620px) {
  .buybar-hide { display: none; }
  .buybar-txt span { display: none; }
}
/* =================================================================== HERO == */

.phero { padding-top: clamp(var(--s6), 7vw, 110px); }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s7); align-items: center; }
.duo.wide-left  { grid-template-columns: 1.12fr .88fr; }
.duo.wide-right { grid-template-columns: .88fr 1.12fr; }
@media (max-width: 1080px) { .duo { gap: var(--s6); } }
@media (max-width: 900px) {
  .duo, .duo.wide-left, .duo.wide-right { grid-template-columns: 1fr; gap: var(--s6); }
  /* On one column the picture goes UNDER the words on every band, whichever
     side it holds at full width. Source order alone would put the art first
     on the reversed ones, which is a picture with no caption. */
  .duo.wide-right > .art { order: 2; }
}

/* The h1 is the logo. It keeps the heading semantics and none of the heading
   type styles, because the type is in the image. */
.wordmark { width: min(460px, 100%); margin: var(--s4) 0 var(--s4); font-size: 0; line-height: 0; }
.phero .lead { margin-bottom: var(--s5); }
.phero .cta { margin-bottom: var(--s5); }

.art { position: relative; display: grid; place-items: center; }
.art img {
  width: 100%;
  /* Tinted into the page's gold, so a full-colour render reads as art
     direction rather than a sticker; and masked at the edges so it sits ON
     the page instead of inside an invisible box. */
  filter: sepia(.38) saturate(1.2) hue-rotate(-10deg) contrast(1.05) brightness(.95)
          drop-shadow(0 30px 70px rgba(0, 0, 0, .85));
  -webkit-mask-image: radial-gradient(ellipse at 50% 46%, #000 58%, transparent 86%);
          mask-image: radial-gradient(ellipse at 50% 46%, #000 58%, transparent 86%);
}

/* Three facts under the buy, on one line. Not a table — a table implies rows
   somebody has to compare. */
.specrow { display: flex; flex-wrap: wrap; gap: var(--s5); }
.specrow dt {
  font-size: .72rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--tx-4);
}
.specrow dd { margin-top: 5px; font-size: .95rem; font-weight: 600; color: var(--tx); }

/* ================================================================ LADDER ==
   Three beats of a rule, numbered by CSS so the markup carries only the
   words. The rail down the left is what makes it a sequence rather than a
   list of three unrelated statements.
   ========================================================================= */

.ladder { counter-reset: rung; margin-top: var(--s5); display: grid; gap: var(--s4); }
.ladder li {
  counter-increment: rung;
  position: relative; padding-left: var(--s6);
}
.ladder li::before {
  content: counter(rung, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--line-2);
  background: var(--surf);
  font-family: var(--mono); font-size: .74rem; color: var(--gold);
}
.ladder li:not(:last-child)::after {
  content: ''; position: absolute; left: 17px; top: 40px; bottom: calc(var(--s4) * -1 + 4px);
  width: 1px; background: linear-gradient(var(--line-2), transparent);
}
.ladder h3 { margin-bottom: 4px; }
.ladder p { font-size: .95rem; color: var(--tx-3); }

/* ============================================================ SPEC PANELS == */

/* minmax(0,1fr), NOT 1fr. A bare `1fr` is `minmax(auto,1fr)`, and that `auto`
   floor is the track's min-content - so one stubborn child can hold the column
   wider than the grid itself and push the page sideways. Zero as the floor
   means the column can never exceed its share, whatever is inside it. */
.specgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s3); }
@media (max-width: 880px) { .specgrid { grid-template-columns: minmax(0, 1fr); } }
.spec { padding: var(--s5); }
.spec .eyebrow { margin-bottom: var(--s4); }
.spec code {
  font-family: var(--mono); font-size: .86em; color: var(--gold-lit);
  background: rgba(255, 255, 255, .05); padding: 2px 6px; border-radius: 5px;
}

.deftable { display: grid; gap: 0; }
.deftable > div {
  display: grid; grid-template-columns: 130px 1fr; gap: var(--s3);
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.deftable > div:last-child { border-bottom: 0; padding-bottom: 0; }
.deftable dt { font-size: .82rem; font-weight: 600; color: var(--tx-4); }
.deftable dd { font-size: .94rem; color: var(--tx); }
@media (max-width: 460px) { .deftable > div { grid-template-columns: 1fr; gap: 2px; } }

.fineprint { margin: var(--s5) auto 0; max-width: 52ch; font-size: .84rem; color: var(--tx-4); }

/* ========================================================= THE CONFIG ==
   Twenty-four table names and one real extract. This section replaced a
   sentence claiming the config was open, which every escrowed script on the
   forum can claim because it is how escrow is meant to be used. Printing the
   surface does the job the claim was trying to do.
   ========================================================================= */

.cfgrid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px;
  background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r3);
  overflow: hidden;
}
@media (max-width: 940px) { .cfgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .cfgrid { grid-template-columns: 1fr; } }

.cfg {
  padding: var(--s3) var(--s4);
  background: var(--bg);
  transition: background .2s var(--ease);
}
.cfg:hover { background: var(--surf); }
.cfg b {
  display: block;
  font-family: var(--mono); font-size: .82rem; font-weight: 500;
  color: var(--gold-lit); letter-spacing: -.01em;
}
.cfg span { display: block; margin-top: 5px; font-size: .86rem; color: var(--tx-3); }
.cfg span code.inline { font-size: .95em; padding: 1px 4px; }