/* Gallery chrome only. It borrows the brand's type and hairlines but is
   deliberately quieter than the blocks it frames — the specimens are the
   subject, the page around them is apparatus. */
.gx {
  margin: 0;
  background: var(--cork);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
.gx-masthead { padding: clamp(40px, 7vw, 96px) var(--gutter) var(--sp-8); border-bottom: 1px solid var(--line); }
.gx-kicker { margin: 0 0 var(--sp-4); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--navy); }
.gx-h1 { margin: 0 0 var(--sp-4); font-family: var(--font-display); font-weight: 400; font-size: clamp(2.4rem, 6vw, 4rem); letter-spacing: -0.02em; line-height: 1.02; }
.gx-lede { margin: 0 0 var(--sp-5); max-width: 60ch; font-size: 1.0625rem; }
.gx-warn { max-width: 70ch; margin: 0; padding: var(--sp-4) var(--sp-5); border: 1px solid var(--accent); background: var(--slip); font-size: 0.9375rem; }
.gx-facts { display: grid; gap: var(--sp-5); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin: var(--sp-7) 0 0; }
.gx-facts dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }
.gx-facts dd { margin: var(--sp-2) 0 0; font-size: 0.875rem; word-break: break-word; }

.gx-group { padding: var(--sp-8) var(--gutter); border-bottom: 1px solid var(--line); }
.gx-h2 { margin: 0 0 var(--sp-6); font-family: var(--font-headline); font-weight: 600; font-size: 0.9375rem; letter-spacing: 0.14em; text-transform: uppercase; }
.gx-rules { max-width: 78ch; margin: 0; padding-left: 1.2em; display: grid; gap: var(--sp-3); font-size: 0.9375rem; }
.gx-examples { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.gx-examples a { font-family: var(--font-display); font-size: 1.125rem; }
.gx-examples span { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--stone); }

.gx-block { padding: var(--sp-7) 0; border-top: 1px solid var(--line-soft); }
.gx-block:first-of-type { border-top: 0; }
.gx-h3 { margin: 0 0 var(--sp-3); font-size: 1rem; }
.gx-h3 code { font-family: var(--font-mono); font-size: 0.9375rem; letter-spacing: 0.02em; }
.gx-desc { margin: 0 0 var(--sp-4); max-width: 78ch; font-size: 0.9375rem; color: var(--stone); }
.gx-contract { display: grid; grid-template-columns: max-content 1fr; gap: var(--sp-2) var(--sp-5); margin: 0 0 var(--sp-6); font-size: 0.8125rem; }
.gx-contract dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--stone); padding-top: 3px; }
.gx-contract dd { margin: 0; }
.gx-contract code, .gx-block code { font-family: var(--font-mono); font-size: 0.8125rem; }

.gx-lanes { display: grid; gap: var(--sp-5); }
/* minmax(0, 1fr), not 1fr: the email specimen is a 600px table, and its
   min-content width would otherwise blow the track out and squeeze the two web
   lanes into a gutter. */
@media (min-width: 1100px) { .gx-lanes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gx-lane__label { margin: 0 0 var(--sp-3); font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--stone); }
.gx-lane__label b { color: var(--accent); font-weight: 500; }
.gx-stage { border: 1px solid var(--line); overflow: hidden; min-width: 0; }
.gx-none { margin: 0; padding: var(--sp-5); border: 1px dashed var(--line); font-size: 0.875rem; color: var(--stone); }

.gx-src { margin-top: var(--sp-5); border-top: 1px solid var(--line-soft); }
.gx-src summary { padding: var(--sp-3) 0; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--navy); }
.gx-src pre { margin: 0 0 var(--sp-4); padding: var(--sp-4); background: var(--ink); color: var(--bone); overflow-x: auto; font-size: 12px; line-height: 1.55; }

.gx-foot { padding: var(--sp-7) var(--gutter) var(--sp-9); font-size: 0.8125rem; color: var(--stone); }