/* C4 — Violet Grid. Native Courier New and static decoration. */
:root {
  color-scheme: dark;
  font-family: "Courier New", Courier, "Liberation Mono", monospace;
  --page-gap: clamp(1rem, 4.4vw, 4.25rem);
  --light: #cfc0df;
  --dark: #25172e;
  --mid: #725c81;
  --mint: #d5e6b4;
  --text: #f0e6f5;
  --muted: #d5c7dd;
  --identity: #32203f;
  --content: #3c2b48;
  --footer: #51405b;
  background: #080b07;
  color: var(--text);
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0;
  min-block-size: 100vh;
  min-block-size: 100svh;
  display: grid;
  align-content: center;
  padding: var(--page-gap);
  background: #080b07 url("pixel-grid.svg") repeat;
  font-size: 1rem;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

a { color: var(--mint); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible, main:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 5px;
}
.skip-link {
  position: fixed;
  inset-block-start: .75rem;
  inset-inline-start: .75rem;
  z-index: 2;
  padding: .75rem 1rem;
  min-block-size: 44px;
  background: var(--identity);
  border: 2px solid var(--mint);
  transform: translateY(calc(-100% - 1.5rem));
}
.skip-link:focus { transform: none; }

.page-frame {
  inline-size: 100%;
  max-inline-size: 87.5rem;
  min-block-size: min(49.625rem, calc(100svh - 2 * var(--page-gap)));
  margin-inline: auto;
  padding: .625rem;
  display: grid;
  grid-template-columns: minmax(0, 28.8%) minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  gap: .5625rem;
  background: #6c537b;
  border: 4px solid;
  border-color: var(--light) var(--dark) var(--dark) var(--light);
  box-shadow: 0 0 0 2px var(--dark), inset 0 0 0 2px var(--mid);
}
.inset {
  border: 3px solid;
  border-color: var(--dark) var(--light) var(--light) var(--dark);
  box-shadow: inset 0 0 0 1px var(--mid);
}
.identity {
  padding: clamp(1.25rem, 2vw, 1.875rem) clamp(1rem, 1.8vw, 1.75rem);
  background: var(--identity);
  min-inline-size: 0;
}
.wordmark {
  margin: 0;
  color: var(--mint);
  font-size: clamp(2.875rem, 5.8vw, 5.5625rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: 0;
}
.wordmark span { display: block; }
.version {
  margin: 1.125rem 0 0;
  font-size: clamp(.875rem, 1.3vw, 1.25rem);
  color: #bfa8cd;
}
.globe {
  display: block;
  inline-size: clamp(6rem, 11.7vw, 11.25rem);
  block-size: auto;
  margin: clamp(2rem, 4.2vw, 4rem) auto 0;
  image-rendering: pixelated;
}
.main-panel {
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
  scroll-margin-block: 1rem;
}
.tagline {
  margin: 0;
  padding: clamp(1.125rem, 2.1vw, 2rem) clamp(1.125rem, 2.2vw, 2.125rem);
  background: var(--identity);
  color: #e0d5e7;
  font-size: clamp(1rem, 1.63vw, 1.5625rem);
  line-height: 1.45;
}
.playground {
  margin-block-start: .5625rem;
  padding: clamp(1.5rem, 2.2vw, 2.125rem);
  background: var(--content);
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.playground h2 {
  margin: 0 0 1.4375rem;
  padding-block-end: 1rem;
  border-block-end: 2px solid #88779a;
  color: #d8eab5;
  font-size: clamp(1.125rem, 2.02vw, 1.9375rem);
  line-height: 1.25;
}
.copy {
  margin: 0;
  max-inline-size: 60ch;
  font-size: clamp(1.125rem, 1.82vw, 1.75rem);
  line-height: 1.5;
}
.ownership {
  grid-column: 1 / -1;
  background: var(--footer);
  color: var(--muted);
  text-align: center;
  font-size: clamp(.875rem, 1.17vw, 1.125rem);
  line-height: 1.6;
  padding: .5rem .75rem;
}
.ownership p { margin: 0; }
.ownership a {
  display: inline-block;
  padding-block: .5rem;
  min-block-size: 44px;
}

@media (max-width: 56.25rem) {
  :root { --page-gap: clamp(1rem, 3.4vw, 1.75rem); }
  .page-frame { grid-template-columns: minmax(0, 1fr); min-block-size: auto; }
  .identity {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem 1rem;
    padding: 1.25rem;
    align-items: center;
  }
  .wordmark { font-size: clamp(2.25rem, 10.5vw, 4.75rem); flex: 1 0 6ch; max-inline-size: 100%; }
  .version { margin: 0; flex: 0 0 100%; order: 2; font-size: .9375rem; }
  .globe { flex: 0 0 auto; inline-size: clamp(56px, 15vw, 128px); margin: 0; }
  .tagline { padding: 1.125rem 1.25rem; font-size: 1.125rem; line-height: 1.6; }
  .playground { padding: 2rem 1.25rem; }
  .playground h2 { font-size: 1.25rem; }
  .copy { font-size: 1.125rem; line-height: 1.65; }
  .ownership { font-size: .875rem; padding: .75rem; }
}
@media (max-width: 23rem) {
  .page-frame { padding: .375rem; gap: .375rem; }
  .identity, .tagline { padding: 1rem; }
  .identity { column-gap: .5rem; }
  .wordmark { font-size: 2.125rem; }
  .globe { inline-size: 56px; }
  .tagline, .copy { font-size: 1.0625rem; }
  .playground { padding: 1.75rem 1rem; }
  .playground h2 { font-size: 1.125rem; }
}

/* Let long localized text and user text-spacing preferences expand the panels. */
.tagline, .copy, .ownership, .wordmark { overflow-wrap: anywhere; }
@media (forced-colors: active) {
  body { background: Canvas; }
  .page-frame, .inset { background: Canvas; border-color: CanvasText; box-shadow: none; }
  .wordmark, .version, .tagline, .playground h2, .copy, .ownership { color: CanvasText; }
  .playground h2 { border-color: CanvasText; }
  .globe { visibility: hidden; }
  a { color: LinkText; }
  a:focus-visible, main:focus-visible { outline-color: Highlight; }
  .skip-link { background: Canvas; border-color: CanvasText; }
}
@media print {
  :root { color-scheme: light; }
  body { display: block; min-block-size: 0; padding: 0; background: white; color: black; }
  .page-frame { display: block; max-inline-size: none; min-block-size: 0; background: white; border: 1px solid black; box-shadow: none; padding: 1rem; }
  .identity, .tagline, .playground, .ownership { background: white; border: 0; box-shadow: none; color: black; padding: .75rem 0; }
  .wordmark { color: black; font-size: 2.25rem; }
  .wordmark span { display: inline; }
  .version { color: black; }
  .globe, .skip-link { display: none; }
  .playground h2 { color: black; border-color: black; font-size: 1.25rem; }
  .copy, .tagline { font-size: 1rem; }
  .ownership { text-align: start; font-size: .75rem; }
  a { color: black; }
}