/* Landing page for the bare domain: the comic strip, centred. */
:root {
  --ink: #1F2A2E;
  --ground: #EEF3F2;
  --sky: #CFE3E0;
  --paper: #FFFFFF;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--ground);
  color: var(--ink);
  font-family: "Figtree", system-ui, sans-serif;
}

.defs { position: absolute; }

main {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

/* A newspaper strip: three panels in a row, ~700 x 190 px, scaled down
   on narrower screens. Text sizes follow the strip's width. */
.strip {
  width: min(700px, 100%);
  container-type: inline-size;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(4px, 1.2cqw, 8px);
  padding: clamp(4px, 1.2cqw, 8px);
  background: var(--ink);
  border-radius: 4px;
}

figure {
  margin: 0;
  position: relative;
  background: var(--sky);
  border: 2px solid var(--ink);
  border-radius: 3px;
  overflow: hidden;
}

figure svg { display: block; width: 100%; height: auto; }

.bubble {
  position: absolute;
  top: 0.55em;
  left: 0.55em;
  max-width: 66%;
  margin: 0;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  border-radius: 0.9em;
  padding: 0.35em 0.6em;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 500;
  font-size: clamp(5.5px, 1.6cqw, 11px);
  line-height: 1.25;
}

.bubble.right { left: auto; right: 0.55em; }

figcaption {
  position: absolute;
  bottom: 4px;
  right: 5px;
  font-size: clamp(6px, 1.2cqw, 9px);
  font-weight: 500;
  background: var(--paper);
  padding: 1px 5px;
  border-radius: 8px;
}