/* ---------------------------------------------------------------------------
   Reset, page shell, header and the content column.
   --------------------------------------------------------------------------- */

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: 'JetBrains Mono', 'Geist Mono', 'SF Mono', Menlo, monospace;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.65;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  transition: background var(--slow), color var(--slow);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 1.5rem 1.25rem;
}

h1 { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.01em; }

.header-sub {
  font-size: 0.72rem;
  font-weight: 300;
  color: var(--ink-2);
  margin-top: 0.35rem;
  max-width: 46ch;
  line-height: 1.75;
}

.header-now {
  font-size: 0.72rem;
  color: var(--amber);
  margin-top: 0.5rem;
  font-variant-numeric: tabular-nums;
}

.header-controls { display: flex; gap: 0.5rem; flex-shrink: 0; }

button {
  font-family: inherit;
  font-size: 0.72rem;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.5rem 0.85rem;
  cursor: pointer;
  transition: border-color var(--mid), color var(--mid), background var(--mid);
}
button:hover { border-color: var(--amber); color: var(--amber); }
button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
button:disabled { opacity: 0.5; cursor: default; }
button:disabled:hover { border-color: var(--line); color: var(--ink); }

main {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 1.5rem 4rem;
}

/* The exported share image gets its own margins. On the page the header supplies
   the space above the first card, but the header is not part of the capture, so
   without this the top card sits flush against the edge of the image. */
main.exporting { padding-top: 2rem; padding-bottom: 2rem; }

/* Two rows: the countdown rings span the width, the two motifs sit beneath. */
.motifs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-top: 1.25rem;
}

@media (max-width: 860px) {
  .motifs { grid-template-columns: 1fr; }
}