/* One grave's landing page (/rip/:id). Builds on legal.css for tokens, type and layout. */
.btn { display: inline-block; border: 0; border-radius: 999px; padding: 12px 20px; font: 800 15px/1.2 "Nunito", system-ui, sans-serif; background: var(--pumpkin); color: #2a1406; text-decoration: none; cursor: pointer; transition: transform .15s }
.btn:hover:not(:disabled) { transform: translateY(-2px) }
.btn:disabled { opacity: .55; cursor: default }
.btn.ghosty { background: transparent; color: var(--fg); box-shadow: inset 0 0 0 2px var(--line) }
.btn[aria-pressed="true"] { background: var(--glow) }

.grave { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 32px; align-items: start; margin-top: 28px }
.stone { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 34px 16px 26px; border-radius: 110px 110px 12px 12px; background: linear-gradient(#c4bfd3, #8f89a6); color: #2c2840; box-shadow: 0 18px 40px rgba(0, 0, 0, .45), inset 0 -10px 0 rgba(0, 0, 0, .12) }
.stone .rip { font: 900 15px "Cinzel", Georgia, serif; letter-spacing: .2em }
.stone h1 { font-size: clamp(22px, 4vw, 28px); margin: 0; overflow-wrap: anywhere }
.stone .yrs { font: 700 15px "Cinzel", Georgia, serif }
.stone .gone { font: 500 12px "JetBrains Mono", ui-monospace, monospace; letter-spacing: .1em; opacity: .75 }
.plaque .eyebrow { margin-top: 0 }
.epitaph { font: 700 clamp(20px, 3.4vw, 26px)/1.35 "Cinzel", Georgia, serif; margin: 0 0 18px; text-wrap: balance }
dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 18px }
dt { color: var(--muted); font-weight: 700 }
dd { margin: 0 }
.mono { font-family: "JetBrains Mono", ui-monospace, monospace }
.story { white-space: pre-line; background: var(--panel); border-radius: 14px; padding: 14px 18px; box-shadow: inset 0 0 0 1px var(--line) }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px }
.hint { color: var(--muted); min-height: 1.6em; margin: 10px 0 0 }

.faq { margin-top: 44px }
.faq h3 { font-size: 18px; margin: 22px 0 4px }
.faq p { margin: 0; color: var(--fg) }
.cta { margin-top: 48px; background: var(--panel); border-radius: 18px; padding: 6px 22px 22px; box-shadow: inset 0 0 0 1px var(--line) }
.related { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px }
.related li { margin: 0 }
.related a { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--panel); color: var(--fg); text-decoration: none; box-shadow: inset 0 0 0 1px var(--line) }
.related a:hover { box-shadow: inset 0 0 0 1px var(--glow) }
.related span { color: var(--muted); font-size: 14px }

@media (max-width: 600px) {
  .grave { grid-template-columns: 1fr; gap: 24px }
  .stone { max-width: 240px; width: 100%; margin: 0 auto }
}