/* gh-vitrine.css — the Full Proof vitrine and the Posit / Full Proof comparison (staged 2026-09-27; v2 2026-09-28:
   the front face is the REAL certificate front - the Turing plate rendered from the sealed certificate - and the back face is
   the sealed Full Proof's document card: fingerprint, ledger event, witnesses, Bitcoin anchor block).
   Scoped: every rule sits under .gh-vpair or .gh-vitrine, so it layers on gh-design.css + gh-site.css (+ gh-polish.css) without
   touching them. Palette = the site flag colours: blue #002B7F, yellow #FCD116, red #CE1126.
   Modes:
     no JS              -> both faces laid out flat (front, then back below it); halo still, no motion, no controls.
     JS (.is-live)      -> 3D case; Front / Back / Turn buttons; turning runs two revolutions then rests on the front.
     reduced motion     -> JS starts on the front, hides Turn, flips instantly; nothing animates (also enforced by gh-design.css). */

.gh .gh-vpair { margin: var(--space-5) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--border-soft); min-width: 0; }
.gh .gh-vpair:first-of-type { border-top: 0; padding-top: 0; }
.gh .gh-vpair__title { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.35rem, 1.1rem + .9vw, 1.7rem); line-height: 1.2;
  color: var(--structure); margin: 0 0 var(--space-3); padding: 0; border: 0; text-wrap: balance; }
.gh .gh-vpair__title .code { font-family: var(--font-mono); font-size: .72em; font-weight: 600; color: var(--seal-text); letter-spacing: .02em; display: block; margin-bottom: .2rem; }
.gh .gh-vpair__stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: center; }
@media (max-width: 52rem) { .gh .gh-vpair__stage { grid-template-columns: minmax(0, 1fr); } }
.gh .gh-vpair__aside { font-family: var(--font-body); max-width: 60ch; min-width: 0; }
.gh .gh-vpair__aside p { margin: 0 0 var(--space-3); }
.gh .gh-vpair__free { display: inline-block; font-family: var(--font-ui); font-weight: 700; font-size: 15px; letter-spacing: .06em; text-transform: uppercase;
  background: #FCD116; color: #002B7F; padding: .15rem .55rem; border-radius: 999px; margin-right: .4rem; }
.gh .gh-vpair__digests { font-family: var(--font-ui); font-size: .95rem; display: grid; gap: .5rem; margin: 0 0 var(--space-3); }
.gh .gh-vpair__digests dt { color: var(--fg-muted); font-size: 15px; }
.gh .gh-vpair__digests dd { margin: 0; font-family: var(--font-mono); font-size: 13px; overflow-wrap: anywhere; word-break: break-all; }
.gh .gh-vpair__links { font-family: var(--font-ui); display: flex; flex-wrap: wrap; gap: .5rem 1.2rem; margin: 0; padding: 0; list-style: none; }
.gh .gh-vpair__cta { display: inline-block; font-family: var(--font-ui); font-weight: 600; padding: .6rem 1.1rem; border-radius: var(--radius);
  background: #FCD116; color: #002B7F; text-decoration: none; margin: 0 0 var(--space-3); }
.gh .gh-vpair__cta:hover { background: #FFFFFF; }

/* ---- the vitrine ---------------------------------------------------------- */
.gh .gh-vitrine { margin: 0; min-width: 0; }
.gh .gh-vitrine__case { position: relative; isolation: isolate; margin: 0 auto; width: min(100%, 360px); padding: 28px 18px 30px;
  border-radius: 26px; border: 1px solid rgba(255,255,255,.35);
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(255,255,255,.04)), radial-gradient(circle at 50% 42%, #0B1640 0%, #071540 70%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.45), inset 0 -18px 36px rgba(0,0,0,.22), 0 26px 50px rgba(0,0,0,.35); overflow: hidden; }
/* the tricolour halo (blue, yellow, red) */
.gh .gh-vitrine__halo { position: absolute; left: 50%; top: 50%; width: 270px; height: 270px; margin: -135px 0 0 -135px; z-index: -1; border-radius: 50%;
  background: conic-gradient(from 0deg, #002B7F, #FCD116, #CE1126, #002B7F); filter: blur(34px); opacity: .5; pointer-events: none; }
/* the sheen across the glass (a light passing) */
.gh .gh-vitrine__case::after { content: ""; position: absolute; inset: -40%; z-index: 2; pointer-events: none;
  background: linear-gradient(115deg, transparent 44%, rgba(255,255,255,.22) 50%, transparent 56%); transform: translateX(-70%); }
.gh .gh-vitrine__faces { display: grid; gap: 18px; justify-items: center; }
.gh .gh-vitrine__face { position: relative; width: min(100%, 300px); border-radius: 12px; padding: 14px 16px 16px; text-align: left;
  font-family: var(--font-ui); font-size: 15px; line-height: 1.4; box-shadow: 0 0 0 1px rgba(0,0,0,.06), 0 10px 28px rgba(0,0,0,.38); }
.gh .gh-vitrine__face--front { background: linear-gradient(180deg, #FFFDF6, #F4EFE0); color: #1E2126; }
/* the real certificate front (816 x 1056 plate): the image IS the face */
.gh .gh-vitrine__face--plate { padding: 0; overflow: hidden; background: #F6F5F1; line-height: 0; aspect-ratio: 816 / 1056; }
.gh .gh-vitrine__face--plate img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gh .gh-vitrine__face--back { background: linear-gradient(180deg, #0F1D4D, #0B1640); color: #FFFFFF; box-shadow: 0 0 0 1px rgba(143,164,224,.45), 0 10px 28px rgba(0,0,0,.38); }
.gh .gh-vitrine__stripe { height: 4px; border-radius: 2px; margin-bottom: 10px; background: linear-gradient(90deg, #002B7F 0 33.3%, #FCD116 33.3% 66.6%, #CE1126 66.6%); }
.gh .gh-vitrine__face--front .gh-vitrine__stripe { box-shadow: 0 0 0 1px rgba(0,43,127,.15); }
.gh .gh-vitrine__side { font-size: 12.8px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0 0 2px; color: #4A4F57; }
.gh .gh-vitrine__face--back .gh-vitrine__side { color: #C9D0E3; }
.gh .gh-vitrine__name { font-family: var(--font-display); font-weight: 700; font-size: 21px; line-height: 1.12; margin: 0 0 4px; color: #002B7F; }
.gh .gh-vitrine__face--back .gh-vitrine__name { color: #FFFFFF; }
.gh .gh-vitrine__sub { margin: 0 0 8px; color: #4A4F57; }
.gh .gh-vitrine__face--back .gh-vitrine__sub { color: #C9D0E3; }
.gh .gh-vitrine__rows { margin: 0; display: grid; }
.gh .gh-vitrine__rows div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid rgba(0,0,0,.1); padding: 3px 0; }
.gh .gh-vitrine__face--back .gh-vitrine__rows div { border-top-color: rgba(255,255,255,.16); }
.gh .gh-vitrine__rows dt { margin: 0; flex: none; }
.gh .gh-vitrine__rows dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.gh .gh-vitrine__fplabel { margin: 8px 0 1px; font-size: 12.8px; color: #4A4F57; }
.gh .gh-vitrine__face--back .gh-vitrine__fplabel { color: #C9D0E3; }
.gh .gh-vitrine__fp { margin: 0; font-family: var(--font-mono); font-size: 12px; line-height: 1.35; word-break: break-all; padding-right: 62px; }
.gh .gh-vitrine__seal { position: absolute; right: 12px; bottom: 12px; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #E23346, #CE1126 55%, #8A0B19); color: #FFFFFF; box-shadow: 0 3px 8px rgba(0,0,0,.35);
  font-family: var(--font-ui); font-weight: 700; font-size: 9.5px; line-height: 1.05; text-align: center; letter-spacing: .04em; }
.gh .gh-vitrine__face--back .gh-vitrine__seal { background: radial-gradient(circle at 35% 30%, #FFE680, #FCD116 55%, #B89400); color: #002B7F; }
.gh .gh-vitrine__plinth { display: none; }
.gh .gh-vitrine figcaption { font-family: var(--font-ui); font-size: 15px; color: var(--fg-muted); text-align: center; margin: .7rem auto 0; max-width: 40ch; }
.gh .gh-vitrine__controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: .8rem 0 0; }
.gh .gh-vitrine__controls[hidden] { display: none; }
.gh .gh-vitrine__controls button { font-family: var(--font-ui); font-size: 15px; padding: .45rem .85rem; min-height: 44px; border-radius: var(--radius);
  border: 1px solid #C9D6FF; background: transparent; color: #FFFFFF; cursor: pointer; }
.gh .gh-vitrine__controls button[aria-pressed="true"] { background: #FCD116; color: #002B7F; border-color: #FCD116; font-weight: 600; }
.gh .gh-vitrine__controls button[hidden] { display: none; }

/* ---- live mode (JS present): the certificate turns inside the case ---------- */
/* faces keep the plate's proportions (816:1056 -> 300 x 388) */
.gh .gh-vitrine.is-live .gh-vitrine__case { height: 452px; perspective: 1100px; }
.gh .gh-vitrine.is-live .gh-vitrine__faces { display: block; position: absolute; left: 50%; top: 50%; width: 300px; height: 388px; margin: -202px 0 0 -150px;
  transform-style: preserve-3d; transition: transform .9s cubic-bezier(.3,.7,.2,1); }
.gh .gh-vitrine.is-live .gh-vitrine__face { position: absolute; inset: 0; width: auto; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.gh .gh-vitrine.is-live .gh-vitrine__face--back { transform: rotateY(180deg); }
.gh .gh-vitrine.is-live .gh-vitrine__plinth { display: block; position: absolute; left: 50%; bottom: 8px; width: 210px; height: 18px; margin-left: -105px; border-radius: 50%;
  background: radial-gradient(rgba(0,0,0,.5), transparent 70%); }
.gh .gh-vitrine.is-live[data-view="front"] .gh-vitrine__faces { transform: rotateY(0deg); }
.gh .gh-vitrine.is-live[data-view="back"] .gh-vitrine__faces { transform: rotateY(180deg); }
.gh .gh-vitrine.is-live[data-view="turn"] .gh-vitrine__faces { transition: none; animation: ghv-turn 12s linear 2 forwards; }
.gh .gh-vitrine.is-live[data-view="turn"] .gh-vitrine__halo { animation: ghv-spin 12s linear 2; }
.gh .gh-vitrine.is-live[data-view="turn"] .gh-vitrine__case::after { animation: ghv-sheen 6s ease-in-out 4; }
.gh .gh-vitrine.is-live[data-view="turn"]:hover .gh-vitrine__faces,
.gh .gh-vitrine.is-live[data-view="turn"]:focus-within .gh-vitrine__faces,
.gh .gh-vitrine.is-live[data-view="turn"]:hover .gh-vitrine__halo { animation-play-state: paused; }
@keyframes ghv-turn { to { transform: rotateY(360deg); } }
@keyframes ghv-spin { to { transform: rotate(360deg); } }
@keyframes ghv-sheen { 0%, 20% { transform: translateX(-70%); } 60%, 100% { transform: translateX(70%); } }
@media (max-width: 380px) { .gh .gh-vitrine.is-live .gh-vitrine__faces { transform-origin: 50% 50%; scale: .94; } }
@media (prefers-reduced-motion: reduce) {
  .gh .gh-vitrine .gh-vitrine__faces, .gh .gh-vitrine .gh-vitrine__halo, .gh .gh-vitrine .gh-vitrine__case::after { animation: none !important; transition: none !important; }
}
@media print { .gh .gh-vitrine__controls { display: none; } }

/* ---- itemised summaries ----------------------------------------------------- */
.gh .gh-vpair__summaries { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); margin: var(--space-5) 0 var(--space-4); }
@media (max-width: 52rem) { .gh .gh-vpair__summaries { grid-template-columns: minmax(0, 1fr); } }
.gh .gh-vpair__summary { background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%); border: 1px solid var(--border-soft); border-radius: var(--radius); padding: var(--space-3) var(--space-4) var(--space-2); min-width: 0; }
.gh .gh-vpair__summary h4 { font-family: var(--font-ui); font-weight: 600; font-size: 1.02rem; color: var(--fg); margin: 0 0 .15rem; }
.gh .gh-vpair__summary .gh-vpair__src { font-family: var(--font-ui); font-size: 15px; color: var(--fg-muted); margin: 0 0 .6rem; overflow-wrap: anywhere; }
.gh .gh-vpair__summary ol { margin: 0; padding-left: 1.35rem; font-family: var(--font-body); }
.gh .gh-vpair__summary li { margin: 0 0 .45rem; }
.gh .gh-vpair__summary .where { font-family: var(--font-ui); font-size: 15px; color: var(--fg-muted); }
.gh .gh-vpair__rule { font-family: var(--font-ui); font-size: 15px; color: var(--fg-muted); margin: .4rem 0 .8rem; }

/* ---- comparison table --------------------------------------------------------- */
.gh .gh-vpair__compare { table-layout: fixed; width: 100%; }
.gh .gh-vpair__compare caption { caption-side: top; text-align: left; font-family: var(--font-ui); font-weight: 600; color: var(--fg); padding: 0 0 .5rem; }
.gh .gh-vpair__compare th:first-child { width: 38%; }
.gh .gh-vpair__compare th, .gh .gh-vpair__compare td { overflow-wrap: break-word; }
.gh .gh-vpair .nw { white-space: nowrap; }
.gh .gh-vpair__compare tbody th { background: transparent; color: var(--fg); font-weight: 400; font-size: max(var(--ui-min), .95rem); letter-spacing: 0; border-bottom: 1px solid var(--border-soft); }
.gh .gh-vpair__compare .yes::before { content: "\2713\00a0"; color: #FCD116; font-weight: 700; }
.gh .gh-vpair__compare .part::before { content: "\25D0\00a0"; color: #C9D6FF; }
.gh .gh-vpair__compare .no { color: var(--fg-muted); }
.gh .gh-vpair__compare .no::before { content: "\2014\00a0"; }
.gh .gh-vpair__compare .corr { display: block; font-size: 15px; color: var(--fg-muted); }
@media (max-width: 30rem) {
  .gh .gh-vpair__compare th, .gh .gh-vpair__compare td { padding: .45rem .4rem; font-size: 15px; }
  .gh .gh-vpair__compare th:first-child { width: 34%; }
}