/*
 * 30 Second Genius — the app's palette A2 and fonts for the game pages (4d).
 * Made by scripts/make-games-theme.mjs from src/ui/theme.css: do not edit by hand.
 */
:root,
:host {
  --color-page: #F4F1EA;
  --color-card: #FFFFFF;
  --color-rule: #D9D2C3;
  --color-control: #857C6C;
  --color-primary: #BB3D3F;
  --color-text: #0A1B1C;
  --color-muted: #4B5557;
  --color-ok: #235915;
  --color-ok-bg: #E5F0E1;
  --color-highlight: #FFE27A;
  --color-deep: #762E30;
  --font-serif: ui-serif, 'New York', Georgia, serif;
  --font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* The Tailwind colors of the prebuilt game styles, pointed at the tokens. */
  --color-white: var(--color-card);
  --color-black: var(--color-text);
  --color-slate-50: var(--color-page);
  --color-slate-100: var(--color-page);
  --color-slate-200: var(--color-rule);
  --color-slate-300: var(--color-control);
  --color-slate-500: var(--color-muted);
  --color-slate-600: var(--color-muted);
  --color-slate-700: var(--color-text);
  --color-slate-800: var(--color-text);
  --color-slate-900: var(--color-text);
  --color-slate-950: var(--color-text);
  --color-emerald-700: var(--color-primary);
  --color-emerald-800: var(--color-deep);
  --color-emerald-600: var(--color-primary);
  --color-emerald-950: var(--color-text);
  --color-emerald-100: color-mix(in srgb, var(--color-primary) 12%, var(--color-card));
  --color-emerald-200: color-mix(in srgb, var(--color-primary) 25%, var(--color-card));
  --color-emerald-300: color-mix(in srgb, var(--color-primary) 35%, var(--color-card));
  --color-emerald-50: var(--color-ok-bg);
  --color-emerald-500: var(--color-ok);
  --color-indigo-100: color-mix(in srgb, var(--color-primary) 12%, var(--color-card));
  --color-indigo-200: color-mix(in srgb, var(--color-primary) 25%, var(--color-card));
  --color-indigo-600: var(--color-primary);
  --color-indigo-700: var(--color-primary);
  --color-indigo-800: var(--color-deep);
  --color-amber-100: var(--color-highlight);
  --color-amber-200: var(--color-highlight);
  --color-amber-400: var(--color-highlight);
  --color-sky-100: var(--color-page);
  --color-sky-500: var(--color-primary);
  --color-red-700: var(--color-primary);
}

/*
 * 30 Second Genius: the header and the footer, one stylesheet for every page that has them: the app
 * (src/style.css imports it), the 4 games, the 404 page and the Brands layout (_layout.html and the blog
 * templates). The markup is src/ui/chrome.ts. Plain CSS in px (the app's root is 18 px, the games' 16 px);
 * colors only from the tokens in theme.css (src/ui/theme.css).
 */

.tsg-wrap {
  max-width: 1152px;
  margin: 0 auto;
  padding: 0 16px;
}

.tsg-header {
  background: var(--color-card);
  border-bottom: 1px solid var(--color-rule);
}

.tsg-header .tsg-wrap {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0 8px;
  padding-top: 8px;
  padding-bottom: 8px;
}

.tsg-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  color: var(--color-text);
  text-decoration: none;
  font-family: var(--font-serif);
  font-size: 18px;
  font-weight: 700;
  white-space: nowrap;
}

.tsg-brand img {
  width: 40px;
  height: 40px;
}

/*
 * The menu: Puzzle · Games · Blog · Newsletter. Next to the name when there is room, otherwise in a row of its
 * own under it (a 320 px phone). Every link is 48 px tall; the page you are on (Blog on the blog) is in the ink color with a thicker line (not bold: that would change the width).
 */
.tsg-nav {
  margin-left: auto;
}

.tsg-nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tsg-nav a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  min-width: 48px;
  padding: 0 6px;
  font-size: 18px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.tsg-nav a:hover {
  color: var(--color-deep);
}

.tsg-nav a[aria-current='page'] {
  color: var(--color-text);
  text-decoration-thickness: 3px;
}

@media (max-width: 639px) {
  .tsg-header .tsg-wrap {
    flex-wrap: wrap;
  }

  .tsg-nav {
    flex: 1 0 100%;
  }

  .tsg-nav ul {
    justify-content: space-between;
  }
}

@media (min-width: 360px) {
  .tsg-brand {
    font-size: 22px;
  }
}

@media (min-width: 640px) {
  .tsg-brand {
    gap: 12px;
    font-size: 27px;
  }

  .tsg-brand img {
    width: 44px;
    height: 44px;
  }
}

.tsg-footer {
  margin-top: 32px;
  background: var(--color-text);
  color: var(--color-card);
  font-size: 18px;
}

.tsg-footer .tsg-wrap {
  padding-top: 32px;
  padding-bottom: 32px;
}

.tsg-footer :focus-visible {
  outline-color: var(--color-card);
}

.tsg-footer-brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.tsg-footer-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 12px;
  background: var(--color-card);
}

.tsg-footer-name {
  display: block;
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 700;
}

.tsg-footer-tagline {
  display: block;
}

/* P9: every link has its dot in front ("· Blog · Terms of Use · Privacy Policy"), so a line never ends
   with a dot; the row starts 22 px to the left and the nav clips everything left of it (8 px room for the
   focus ring), so the dot in front of the first link on each line is cut off and never starts a line. */
.tsg-footer-links {
  margin-top: 16px;
  margin-left: -8px;
  padding-left: 8px;
  overflow-x: clip;
}

.tsg-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-left: -22px;
}

.tsg-footer-pair {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

.tsg-footer-pair > span {
  flex-shrink: 0;
  width: 22px;
  text-align: center;
}

.tsg-footer-links a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 4px;
  color: var(--color-card);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* D24 (P5): 15 px small print, about 60 characters wide, calmer than the rest of the footer (same as src/style.css). */
.tsg-footer-legal {
  margin-top: 16px;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.45;
  color: color-mix(in srgb, var(--color-card) 74%, var(--color-text));
}

/* Disclaimer D right above A (D19.2): one block of small print. */
.tsg-footer-legal + .tsg-footer-legal {
  margin-top: 4px;
}

/*
 * The pages Brands renders into the layout (brands-layout.html → _layout.html): the blog at /blog/ with our
 * templates (brands/*.liquid, classes gz-…), the policies and the newsletter pages (.brands-page). The build puts
 * this file after theme.css and chrome.css into one stylesheet (src/brandsSite.ts, vite.config.ts); the app does
 * not load it. Colors only from the tokens in src/ui/theme.css (src/ui/theme.test.ts checks). The look of the
 * app: newspaper paper, serif headlines with the red rule, white cards, a crossword square for every number.
 * For 50+ readers: 19 px reading text, nothing under 15 px, everything you tap at least 48 px tall.
 */

/* ---------- The page frame (the app has the same through Tailwind) ---------- */

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
}
body.tsg-site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.tsg-site :is(h1, h2, h3, p, ul, ol, figure, dl, dd) {
  margin: 0;
}
.tsg-site img,
.tsg-site svg {
  display: block;
  max-width: 100%;
}
.tsg-site :focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
}
.tsg-site .tsg-footer :focus-visible {
  outline-color: var(--color-card);
}
.tsg-site-main {
  flex: 1 0 auto;
  width: 100%;
}

/* ---------- The blog ---------- */

.gz-blog {
  --gz-shadow: 0 1px 2px color-mix(in srgb, var(--color-text) 6%, transparent);
  max-width: 1152px;
  margin: 0 auto;
  padding: 24px 16px 8px;
}
.gz-blog a {
  color: inherit;
  text-decoration: none;
}
.gz-blog .gz-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gz-kicker {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted);
}
.gz-rule {
  display: block;
  width: 72px;
  height: 3px;
  margin: 12px 0 16px;
  border-radius: 9999px;
  background: var(--color-deep);
}
.gz-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  font-size: 16px;
  color: var(--color-muted);
}
.gz-meta > span + span::before {
  content: '·';
  margin-right: 8px;
}
.gz-more {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* The red button of the app: the one main thing to tap. */
.gz-blog a.gz-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 10px 20px;
  border: 2px solid var(--color-primary);
  border-radius: 14px;
  background: var(--color-primary);
  color: var(--color-card);
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}
.gz-blog a.gz-button:hover {
  background: var(--color-deep);
  border-color: var(--color-deep);
}

/* Masthead */
.gz-masthead {
  padding: 8px 0 24px;
  border-bottom: 1px solid var(--color-rule);
  margin-bottom: 24px;
}
.gz-title,
.gz-article__title,
.gz-lead__title,
.gz-card__title,
.gz-section__title,
.gz-play__title,
.gz-pager__title {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
}
.gz-title {
  max-width: 24ch;
  margin-top: 4px;
  font-size: clamp(30px, 6vw, 46px);
}
.gz-intro {
  max-width: 62ch;
  font-size: 19px;
  color: var(--color-muted);
}
.gz-intro:empty {
  display: none;
}
.gz-intro > * + * {
  margin-top: 12px;
}

/* The crossword strip: the first letters of a title, one to a square */
.gz-tiles {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  height: 100%;
  min-height: 96px;
  padding: 16px;
  background: color-mix(in srgb, var(--color-rule) 45%, var(--color-page));
}
.gz-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 1 52px;
  aspect-ratio: 1;
  border: 2px solid var(--color-text);
  background: var(--color-card);
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: clamp(20px, 5vw, 30px);
  font-weight: 700;
}
.gz-tile--mark {
  background: var(--color-highlight);
}

/* The front-page card: the newest article */
.gz-lead {
  display: grid;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  background: var(--color-card);
  box-shadow: var(--gz-shadow);
}
.gz-lead__media {
  display: block;
  min-height: 160px;
  background: var(--color-page);
}
.gz-lead__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 16px 8px;
}
.gz-lead__title {
  font-size: clamp(26px, 4.5vw, 36px);
}
.gz-lead__excerpt {
  display: block;
  font-size: 19px;
  line-height: 1.55;
}
.gz-lead:hover .gz-lead__title,
.gz-card__link:hover .gz-card__title {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 4px;
}
@media (min-width: 860px) {
  .gz-lead {
    grid-template-columns: 5fr 6fr;
  }
  .gz-lead__media {
    min-height: 320px;
  }
  .gz-lead__body {
    justify-content: center;
    padding: 24px 28px;
  }
}

/* The app as a puzzle card */
.gz-play {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 16px;
  margin: 24px 0;
  padding: 20px 16px;
  border: 2px solid var(--color-text);
  border-radius: 12px;
  background: var(--color-card);
}
.gz-play__clock {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border: 3px solid var(--color-primary);
  border-radius: 50%;
  background: var(--color-highlight);
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 700;
  line-height: 1;
}
.gz-play__clock small {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 700;
}
.gz-play__title {
  font-size: 24px;
}
.gz-play__text p {
  margin-top: 4px;
}
.gz-play .gz-button {
  grid-column: 1 / -1;
}
@media (min-width: 720px) {
  .gz-play {
    grid-template-columns: auto 1fr auto;
    padding: 20px 24px;
  }
  .gz-play .gz-button {
    grid-column: auto;
  }
}

/* Sections, cards, the list of earlier articles */
.gz-section {
  margin-top: 40px;
}
.gz-section__title {
  font-size: 28px;
}
.gz-section__title::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 8px;
  border-radius: 9999px;
  background: var(--color-deep);
}
.gz-section__note {
  margin-top: 12px;
  color: var(--color-muted);
}
.gz-grid {
  display: grid;
  gap: 16px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}
@media (min-width: 640px) {
  .gz-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 960px) {
  .gz-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.gz-card {
  display: flex;
}
.gz-card__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  background: var(--color-card);
  box-shadow: var(--gz-shadow);
}
.gz-card__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.gz-card__media .gz-tiles {
  padding: 12px;
}
.gz-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  border-top: 1px solid var(--color-rule);
}
.gz-card__title {
  font-size: 22px;
}
.gz-card__excerpt {
  display: block;
  font-size: 17px;
}
.gz-card .gz-meta {
  margin-top: auto;
  padding-top: 4px;
}

.gz-index {
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--color-rule);
}
.gz-index a {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  gap: 0 12px;
  min-height: 56px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--color-rule);
}
.gz-index__no {
  min-width: 2.2em;
  font-family: var(--font-serif);
  font-weight: 700;
  color: var(--color-deep);
  text-align: right;
}
.gz-index__title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 700;
}
.gz-index__date {
  grid-column: 2;
  font-size: 16px;
  color: var(--color-muted);
}
.gz-index a:hover .gz-index__title {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 4px;
}
@media (min-width: 640px) {
  .gz-index a {
    grid-template-columns: auto 1fr auto;
  }
  .gz-index__date {
    grid-column: auto;
  }
}

/* An article */
.gz-article {
  max-width: 760px;
  margin: 0 auto;
}
.gz-back a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  font-weight: 700;
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 4px;
}
.gz-article__title {
  margin-top: 4px;
  font-size: clamp(30px, 6vw, 44px);
}
.gz-article__dek {
  font-size: 21px;
  line-height: 1.45;
  color: var(--color-muted);
}
.gz-article__head .gz-meta {
  margin-top: 12px;
}
.gz-article__media {
  margin: 24px 0 0;
  overflow: hidden;
  border: 1px solid var(--color-rule);
  border-radius: 12px;
}
.gz-article__media figcaption {
  padding: 8px 12px;
  background: var(--color-card);
  font-size: 15px;
  color: var(--color-muted);
}
.gz-article__media figcaption a,
.gz-prose a,
.gz-article__note a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gz-prose {
  margin-top: 28px;
  font-size: 19px;
  line-height: 1.65;
}
.gz-prose > * + * {
  margin-top: 1.1em;
}
.gz-prose :is(h2, h3, h4) {
  margin-top: 1.8em;
  font-family: var(--font-serif);
  line-height: 1.25;
}
.gz-prose h2 {
  font-size: 28px;
}
.gz-prose h3 {
  font-size: 23px;
}
.gz-prose :is(ul, ol) {
  padding-left: 1.4em;
}
.gz-prose ul {
  list-style: disc;
}
.gz-prose ol {
  list-style: decimal;
}
.gz-prose li + li {
  margin-top: 0.4em;
}
.gz-prose img {
  height: auto;
  border-radius: 12px;
}
.gz-prose blockquote {
  margin-left: 0;
  padding: 4px 0 4px 16px;
  border-left: 4px solid var(--color-deep);
  color: var(--color-muted);
}
.gz-prose :is(table) {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
.gz-article__note {
  margin-top: 32px;
  font-size: 16px;
  color: var(--color-muted);
}
.gz-article__note:empty {
  display: none;
}

/* Newer / older */
.gz-pager {
  display: grid;
  gap: 12px;
  max-width: 760px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .gz-pager {
    grid-template-columns: 1fr 1fr;
  }
  .gz-pager__link--older {
    grid-column: 2;
    text-align: right;
  }
  .gz-pager__link:only-child.gz-pager__link--older {
    grid-column: 2;
  }
}
.gz-pager__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 48px;
  padding: 14px 16px;
  border: 1px solid var(--color-rule);
  border-radius: 12px;
  background: var(--color-card);
}
.gz-pager__title {
  font-size: 20px;
}
.gz-pager__link:hover .gz-pager__title {
  text-decoration: underline;
  text-decoration-color: var(--color-primary);
  text-underline-offset: 4px;
}

/* The newsletter sign-up Brands puts under every blog page (N-Form) */
.gz-newsletter {
  max-width: 1152px;
  margin: 24px auto 0;
  padding: 0 16px;
  scroll-margin-top: 16px;
}
.gz-newsletter > * {
  scroll-margin-top: 16px;
}
.gz-newsletter iframe {
  max-width: 100%;
}

/* ---------- Policies and newsletter pages Brands renders into the layout (.brands-page) ---------- */

.tsg-site-main .brands-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 8px;
  font-size: 18px;
  line-height: 1.6;
}
.tsg-site-main .brands-page :is(h1, h2, h3) {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.25;
}
.tsg-site-main .brands-page h1 {
  font-size: clamp(30px, 6vw, 42px);
}
.tsg-site-main .brands-page h1::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  margin: 12px 0 16px;
  border-radius: 9999px;
  background: var(--color-deep);
}
.tsg-site-main .brands-page h2 {
  margin: 1.8em 0 0.4em;
  font-size: 26px;
}
.tsg-site-main .brands-page h3 {
  margin: 1.5em 0 0.4em;
  font-size: 21px;
}
.tsg-site-main .brands-page :is(p, ul, ol) {
  margin: 0.8em 0;
}
.tsg-site-main .brands-page ul {
  padding-left: 1.4em;
  list-style: disc;
}
.tsg-site-main .brands-page ol {
  padding-left: 1.4em;
  list-style: decimal;
}
.tsg-site-main .brands-page li {
  margin: 0.3em 0;
}
.tsg-site-main .brands-page a {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.tsg-site-main .brands-page :is(textarea, input) {
  background: var(--color-card);
}
.tsg-site-main .brands-page iframe {
  max-width: 100%;
}