.vault-hero {
  position: relative;
  padding: calc(var(--header-height) + 96px) 0 64px;
  background:
    radial-gradient(circle at 82% 72%, rgba(255, 90, 0, 0.16), transparent 30%),
    var(--ink);
  border-bottom: 1px solid var(--line);
  overflow: hidden;
  isolation: isolate;
}
.vault-hero h1 {
  margin: 22px 0 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(38px, 8vw, 96px);
  font-weight: 400; line-height: 0.96; letter-spacing: -0.055em;
  color: var(--paper);
}
.vault-hero h1 em { color: var(--ember-bright); font-weight: 400; }
.vault-hero p.vault-lede { max-width: 620px; margin: 26px 0 0; color: var(--paper-dim); font-size: 17px; line-height: 1.65; }

/* gate */
.vault-gate { max-width: 560px; }
.vault-gate label { display: block; margin-bottom: 10px; font-size: 11px; font-weight: 750; letter-spacing: 0.16em; text-transform: uppercase; color: var(--paper-dim); }
.vault-gate-row { display: flex; flex-wrap: wrap; gap: 12px; }
.vault-gate input {
  flex: 1 1 260px; padding: 14px 16px; font-size: 16px;
  background: var(--ink-lift); border: 1px solid var(--line-strong); color: var(--paper);
}
.vault-gate button { padding: 14px 28px; font-size: 15px; background: var(--ember); color: #fff; border: 0; cursor: pointer; }
.vault-gate button:hover { background: var(--ember-bright); }
.vault-hint { margin-top: 16px; font-size: 14px; color: var(--steel); line-height: 1.6; }
.vault-error { margin-top: 12px; font-size: 14px; color: var(--ember-bright); display: none; }
.vault-error.show { display: block; }
.vault-buy { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); max-width: 560px; font-size: 14.5px; line-height: 1.65; color: var(--paper-dim); }
.vault-buy a { color: var(--paper); border-bottom: 1px solid rgba(255,90,0,.5); text-decoration: none; }
.vault-buy a:hover { color: var(--ember-bright); }

/* unlocked content */
#vault-content { display: none; }
#vault-content.open { display: block; }
.gd-mono { font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ember); }
.vault-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); border: 1px solid var(--line-strong); }
.vault-card { padding: 28px; border-right: 1px solid var(--line-strong); }
.vault-card:last-child { border-right: 0; }
.vault-card h3 { font-family: Georgia, serif; font-weight: 400; font-size: 21px; margin: 10px 0 10px; }
.vault-card h3 a { color: var(--paper); text-decoration: none; border-bottom: 1px solid rgba(255,90,0,.5); }
.vault-card h3 a:hover { color: var(--ember-bright); }
.vault-card p { font-size: 14px; line-height: 1.6; color: var(--paper-dim); margin: 0; }
.vault-soon { margin: 26px 0 0; padding: 0; list-style: none; max-width: 640px; font-size: 15px; line-height: 1.75; color: var(--paper-dim); }
.vault-soon li { padding-left: 22px; position: relative; margin-bottom: 6px; }
.vault-soon li::before { content: "+"; position: absolute; left: 0; color: var(--ember); font-family: Georgia, serif; }
.gd-prompt { border: 1px solid var(--line-strong); margin-bottom: -1px; }
.gd-prompt summary { cursor: pointer; padding: 20px 26px; list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-family: Georgia, serif; font-size: 18px; color: var(--paper); }
.gd-prompt summary::-webkit-details-marker { display: none; }
.gd-prompt summary:hover { color: var(--ember-bright); }
.gd-prompt-body { padding: 0 26px 22px; }
.gd-prompt-text { font-family: "SFMono-Regular", Consolas, monospace; font-size: 13.5px; line-height: 1.7; color: var(--paper-dim); background: var(--ink-lift); padding: 18px 20px; white-space: pre-wrap; }
.gd-copy { margin-top: 12px; font-size: 12.5px; background: none; border: 1px solid var(--line-strong); border-radius: 999px; padding: 6px 16px; cursor: pointer; color: var(--paper); }
.gd-copy:hover { border-color: var(--ember); color: var(--ember-bright); }
.vault-lock-note { margin-top: 44px; font-size: 13px; color: var(--steel); }
.vault-lock-note a { color: var(--steel); }