/* Tharis website styles.
   The page sits on the app's own ground: the dark eggplant every screen
   is painted on (Palette.background), with a faint brick wall behind it,
   the app icon's bricks seen at night. The words are the start screen's
   cream, the accents the SMASH button's purple. Every picture is pixel
   art and is never smoothed. Every text tone clears 4.5:1 on the panel it
   sits on, the lightest panel the worst case: the ink 10.6:1, the cream
   9.3:1, the soft text 7.3:1, the links 6.6:1, and a tag's dark ink 4.8:1
   on the purple. */

:root {
  --bg: #2b2730;
  --mortar: #25222a;
  --panel: #332e39;
  --panel-edge: #45404d;
  --outline: #1e1b22;
  --ink: #ece6d6;
  --ink-soft: #c9c0ad;
  --cream: #e8d8a0;
  --purple: #ba68c8;
  --purple-dark: #9c4faa;
  --link: #d9a6e3;
  --green: #8cb86a;
  --page: 68rem;
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--ink);
  background-color: var(--bg);
  /* A brick wall: two rows of bricks 24 wide, the second row's joints
     half a brick along. Drawn edge to edge, so it stays crisp. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='24' shape-rendering='crispEdges'%3E%3Cpath fill='%2325222a' d='M0 0h48v2H0zM0 12h48v2H0zM22 2h2v10h-2zM46 14h2v10h-2z'/%3E%3C/svg%3E");
  -webkit-font-smoothing: antialiased;
}

img.pixel {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

a {
  color: var(--link);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--cream);
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--cream);
  outline-offset: 3px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0.5rem;
  padding: 0.5rem 1rem;
  background: var(--cream);
  color: var(--outline);
  font-weight: 700;
  z-index: 10;
}

.skip-link:focus {
  left: 0.5rem;
}

.container {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 16px;
}

/* Header */

.site-header {
  background: var(--outline);
  border-bottom: 2px solid var(--panel-edge);
}

.site-header .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem 1.5rem;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--cream);
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.08em;
  text-decoration: none;
}

.logo img {
  width: 32px;
  height: 32px;
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  padding: 0.5rem 0;
}

.site-nav a:hover {
  color: var(--cream);
  text-decoration: underline;
}

/* Hero */

.hero {
  padding: 2rem 0 1rem;
  text-align: center;
}

.hero-art {
  display: block;
  width: 100%;
  max-width: 1024px;
  height: auto;
  margin: 0 auto;
  border: 4px solid var(--outline);
}

.tagline {
  margin: 1.5rem 0 0.5rem;
  font-size: clamp(1.35rem, 4vw, 1.9rem);
  font-weight: 800;
  color: var(--cream);
  line-height: 1.25;
}

.hero-note {
  max-width: 40rem;
  margin: 0 auto;
  color: var(--ink-soft);
}

.badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin: 1.5rem 0 0.5rem;
}

.badge {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 11rem;
  padding: 0.55rem 1.1rem;
  background: var(--outline);
  border: 2px solid var(--panel-edge);
  color: var(--ink);
  text-decoration: none;
  line-height: 1.3;
}

.badge-store {
  font-weight: 800;
}

.badge-state {
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* Sections and panels */

.section {
  padding: 1rem 0;
}

.panel {
  background: var(--panel);
  border: 2px solid var(--panel-edge);
  box-shadow: 0 0 0 2px var(--outline);
  padding: 1.5rem;
}

@media (min-width: 40rem) {
  .panel {
    padding: 2rem 2.25rem;
  }
}

h1,
h2,
h3 {
  color: var(--cream);
  line-height: 1.25;
}

h2 {
  margin: 0 0 0.75rem;
  font-size: 1.6rem;
}

h3 {
  margin: 0 0 0.35rem;
  font-size: 1.15rem;
}

.lead,
.panel > p {
  max-width: 44rem;
}

.panel p:last-child {
  margin-bottom: 0;
}

/* Rooms */

.rooms {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: 1.25rem;
  margin-top: 1.25rem;
}

.room {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 2px solid var(--panel-edge);
}

.room img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 9 / 16;
  border-bottom: 2px solid var(--outline);
}

.room-text {
  padding: 1rem 1.1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}

.room-text .line {
  margin: 0;
  color: var(--cream);
  font-style: italic;
}

.room-text p {
  margin: 0;
  color: var(--ink-soft);
}

.tag {
  align-self: flex-start;
  margin-top: auto;
  padding: 0.1rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--outline);
}

.tag--free {
  background: var(--green);
}

.tag--paid {
  background: var(--purple);
}

/* Cards: the things inside the unlock */

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
  margin-top: 1.25rem;
}

.card {
  background: var(--bg);
  border: 2px solid var(--panel-edge);
  padding: 1rem 1.1rem;
}

.card p {
  margin: 0;
  color: var(--ink-soft);
}

.plain-list {
  margin: 0;
  padding-left: 1.25rem;
}

.plain-list li + li {
  margin-top: 0.35rem;
}

/* The shared blocks (platform's sync-site-blocks.sh fills them) */

[data-dreangine] ul {
  padding-left: 1.25rem;
}

/* Text pages: the Q&A and the privacy policy */

.text-page {
  padding: 2rem 0;
}

.text-page .panel {
  max-width: 50rem;
  margin: 0 auto;
}

.text-page h1 {
  margin-top: 0;
  font-size: 2rem;
}

.text-page h2 {
  margin-top: 2rem;
  font-size: 1.3rem;
}

.text-page h3 {
  margin-top: 1.25rem;
}

.updated {
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* Footer */

.site-footer {
  margin-top: 2rem;
  padding: 1.5rem 0 2rem;
  background: var(--outline);
  border-top: 2px solid var(--panel-edge);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.site-footer ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.5rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

.site-footer p {
  margin: 0;
}