/* Crosslit website. Colours and type come from the brand's tokens.css. */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--cl-background);
  color: var(--cl-text);
  font: var(--cl-type-body);
  font-size: 1.0625rem;
  line-height: 1.6;
}

.wrap { width: 100%; max-width: 44rem; margin: 0 auto; padding: 0 1rem; }
.wrap.narrow { max-width: 36rem; }

h1, h2 { color: var(--cl-text); text-wrap: balance; }
h1 { font: var(--cl-type-display); font-size: clamp(2rem, 7vw, 3rem); line-height: 1.15; margin: 1.5rem 0 1rem; }
h2 { font: var(--cl-type-headline); margin: 2.5rem 0 0.75rem; }
p, li { max-width: 38rem; }

a { color: var(--cl-accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 3px solid var(--cl-accent); outline-offset: 3px; border-radius: 2px; }

img { max-width: 100%; height: auto; }

/* Home: logo and tagline */
.hero { padding: 3rem 0 0.5rem; }
/* The lockup includes 8 units of clear space; pull it left so the tiles line up with the text. */
.hero .logo { margin: 0 0 0 -1rem; line-height: 0; }
.hero .logo img { width: min(286px, 70vw); }
.tagline { font: var(--cl-type-headline); margin: 1rem 0 0; }

/* Small logo on the other pages */
.mark { margin: 2rem 0 0 -0.5rem; line-height: 0; }
.mark a { display: inline-block; }
.mark img { width: 143px; }

/* Getting the app */
.button {
  display: inline-block;
  min-height: 3rem;
  padding: 0.75rem 1.5rem;
  border-radius: 999px;
  background: var(--cl-accent);
  color: var(--cl-on-accent);
  font: var(--cl-type-label);
  font-size: 1rem;
  text-decoration: none;
}
.button:hover { text-decoration: underline; }
.soon {
  display: inline-block;
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--cl-text-secondary);
  border-radius: 999px;
  font: var(--cl-type-label);
  font-size: 1rem;
}

/* How a puzzle works: the brand's cross of lit tiles */
.example { margin: 1.5rem 0; }
.boards { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; align-items: flex-start; }
.board-wrap { width: min(10rem, 40vw); }
.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6%;
  padding: 6%;
  border-radius: 10%;
  background: var(--cl-stone);
  aspect-ratio: 1;
}
.tile { border-radius: 14%; background: var(--cl-unlit); position: relative; }
.tile.lit { background: var(--cl-lit); }
.tile.stone {
  background: repeating-linear-gradient(135deg, var(--cl-unlit) 0 3px, var(--cl-stone) 3px 9px);
}
.tile.lamp::after {
  content: "";
  position: absolute;
  inset: 32%;
  border-radius: 50%;
  background: var(--cl-lamp);
}
.board-label { font: var(--cl-type-label); color: var(--cl-text-secondary); margin: 0.5rem 0 0; }
.example figcaption { margin-top: 1rem; color: var(--cl-text-secondary); }

.rules { padding-left: 1.5rem; }
.rules li { margin: 0.5rem 0; }

/* Privacy policy */
.prose h2 { font: var(--cl-type-title); margin: 2rem 0 0.5rem; }
.prose ul { padding-left: 1.5rem; }
.meta { color: var(--cl-text-secondary); }

/* Footer */
.site-footer {
  margin-top: 4rem;
  padding: 1.5rem 0 2.5rem;
  border-top: 1px solid var(--cl-text-secondary);
  color: var(--cl-text-secondary);
  font: var(--cl-type-body);
  font-size: 0.9375rem;
}
.site-footer p { margin: 0.25rem 0; }