/*
 * THE SITE'S OWN FRAME — the same top menu, black closing band and black footer on every page of
 * gprint.ai (2026-09-26: "the top menu has to be equal for all pages, top menu and footer"). The
 * markup is put into each page by the Worker (src/chrome.js); these rules carry their own colours
 * and type, so a page's own styles cannot make one page's frame differ from another's.
 */
.site-top, .site-close, .site-foot {
  --site-ground: #f3f3f1; --site-deep: #111214; --site-ink: #131417; --site-muted: #6a6d76;
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
.site-wrap { width: min(74rem, 100% - 2.5rem); margin-inline: auto; }
@media (max-width: 560px) { .site-wrap { width: calc(100% - 2rem); } }

.site-button { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.4rem; padding: 0 1rem; border: 0; border-radius: 999px; background: var(--site-deep); color: #fff; font: inherit; font-weight: 700; font-size: 0.9rem; line-height: 1; text-decoration: none; cursor: pointer; white-space: nowrap; }
.site-button:hover { background: #24262b; }
.site-button.light { height: 2.9rem; padding: 0 1.35rem; font-size: 0.98rem; background: #fff; color: var(--site-ink); }
.site-button.light:hover { background: var(--site-ground); }

/* ---------- top menu ---------- */
.site-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: rgba(243, 243, 241, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.site-top .site-wrap { display: flex; align-items: center; gap: 1.5rem; height: 4.25rem; }
.site-top .site-logo img { height: 24px; width: auto; display: block; }
.site-top nav { margin-left: auto; display: flex; gap: 1.6rem; align-items: center; }
.site-top nav a:not(.site-button) { color: var(--site-muted); text-decoration: none; font-size: 0.92rem; font-weight: 600; }
.site-top nav a:not(.site-button):hover, .site-top nav a[aria-current="page"] { color: var(--site-ink); }
@media (max-width: 640px) { .site-top nav a:not(.site-button) { display: none; } }

/* ---------- the black closing band ---------- */
.site-close { background: var(--site-deep); color: #fff; border-radius: 28px 28px 0 0; }
.site-close .site-wrap { padding-block: clamp(4rem, 9vw, 7rem) 2rem; display: grid; justify-items: center; text-align: center; gap: 1.25rem; }
.site-close h2 { margin: 0; font-size: clamp(2rem, 5vw, 3.8rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; max-width: 16ch; text-wrap: balance; }
.site-close p { margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 1.0625rem; }

/* ---------- footer ---------- */
.site-foot { background: var(--site-deep); color: rgba(255, 255, 255, 0.55); padding-block: 2.5rem 3rem; font-size: 0.86rem; }
.site-foot .site-wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 2rem; }
.site-foot .site-logo img { height: 20px; width: auto; display: block; }
.site-foot a { color: #fff; }
.site-foot .right { margin-left: auto; max-width: 34rem; }

/* The language menu (2026-09-29): a closed <details> in the header; the list drops below it. */
.site-lang { position: relative; }
.site-lang summary { list-style: none; cursor: pointer; color: var(--site-muted); font-size: 0.92rem; font-weight: 600; display: inline-flex; align-items: center; gap: 0.3rem; }
.site-lang summary::-webkit-details-marker { display: none; }
.site-lang summary::after { content: "▾"; font-size: 0.75em; }
.site-lang[open] summary, .site-lang summary:hover { color: var(--site-ink); }
.site-lang > div { position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 40; min-width: 10rem; display: grid; padding: 0.4rem; border-radius: 14px; background: var(--site-surface, #fff); border: 1px solid var(--site-rule, #e1e1de); box-shadow: 0 20px 50px -20px rgba(19, 20, 23, 0.35); }
.site-top nav .site-lang > div a { display: block; padding: 0.45rem 0.7rem; border-radius: 9px; color: var(--site-ink); }
.site-top nav .site-lang > div a:hover, .site-top nav .site-lang > div a[aria-current] { background: var(--site-ground); }