/* Backstamp site: the Pin Wall theme, light and dark.
   Every colour, size and radius below is a value from
   mobile/src/design/backstamp-tokens.json (themes.pinwall), under the token's own name.
   Fonts: Bricolage Grotesque (display) and Hanken Grotesk (ui), the Pin Wall faces,
   open licence (OFL), copied into assets/fonts with their licence text. Nothing is
   loaded from anywhere else. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("assets/fonts/bricolage-grotesque-36pt-extrabold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-grotesk-regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("assets/fonts/hanken-grotesk-bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Pin Wall, light (color.light) */
:root {
  color-scheme: light dark;

  --background: #e9e4d8;
  --surface: #f7f3ea;
  --surface-raised: #fbf8f2;
  --border: #141a2a1a;
  --text-primary: #141a2a;
  --text-secondary: #4a5163;
  --text-tertiary: #555c70;
  --accent: #6e500f;
  --highlight: #ffffffb3;
  --spotlight: #fff8e8b3;
  --shadow-soft: #141a2a1f;
  --felt: url("assets/felt/felt-noise-light.png");

  /* radius (themes.pinwall.radius) */
  --radius-card: 16px;
  --radius-photo: 10px;
  --radius-panel: 20px;
  --radius-sheet: 28px;
  --radius-chip: 18px;

  /* space (shared.space) and layout (themes.pinwall.layout) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --margin: 16px;
  --min-touch: 44px;

  --display: "Bricolage Grotesque", sans-serif;
  --ui: "Hanken Grotesk", sans-serif;
}

/* Pin Wall, dark (color.dark) */
@media (prefers-color-scheme: dark) {
  :root {
    --background: #141a2a;
    --surface: #1e2538;
    --surface-raised: #232b44;
    --border: #ffffff12;
    --text-primary: #f3eee3;
    --text-secondary: #aeb4c6;
    --text-tertiary: #8c93a8;
    --accent: #e7b54a;
    --highlight: #ffffff12;
    --spotlight: #ffe2aa1a;
    --shadow-soft: #0000004d;
    --felt: url("assets/felt/felt-noise-dark.png");
  }
}

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

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

/* The ground: the felt tiled at 180, the warm spotlight over it (materials.felt, materials.spotlight). */
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: var(--text-primary);
  background:
    radial-gradient(90% 50% at 50% 14%, var(--spotlight), #00000000 70%) no-repeat top center / 100% 880px,
    var(--felt) 0 0 / 180px 180px,
    var(--background);
  /* role: body */
  font-family: var(--ui);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.4;
  overflow-wrap: break-word;
}

main {
  flex: 1 0 auto;
}

.wrap {
  width: min(100% - 2 * var(--margin), 1100px);
  margin-inline: auto;
}

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

p {
  margin: 0;
}

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

/* role: display-l, display-m */
h1,
h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  font-optical-sizing: none;
  letter-spacing: -0.03em;
  color: var(--text-primary);
}
h1 {
  font-size: 48px; /* the sign-in wordmark */
  line-height: 1;
}
h2 {
  font-size: 40px;
  line-height: 1;
}
h2.medium {
  font-size: 28px;
  line-height: 1.05;
}

.secondary {
  color: var(--text-secondary);
}

/* ---- Header band: the sign-in screen's start step ---- */

.band {
  padding-top: var(--space-10);
  padding-bottom: var(--space-8);
}
.band .wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}
.band .icon {
  width: 72px;
  height: 72px;
  margin-bottom: var(--space-3);
}
.band .lead {
  color: var(--text-secondary);
}
.band .note {
  margin-top: var(--space-3);
  max-width: 100%;
  padding: var(--space-3) var(--space-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: inset 0 1px 0 var(--highlight);
  color: var(--text-secondary);
  font-size: 15px;
  line-height: 1.4;
}

@media (min-width: 800px) {
  .band {
    padding-top: var(--space-12);
    padding-bottom: var(--space-6);
  }
  .band .wrap {
    display: grid;
    grid-template-columns: 96px auto;
    grid-template-areas:
      "icon name"
      "icon lead"
      "icon note";
    justify-content: start;
    column-gap: var(--space-6);
    row-gap: var(--space-2);
    align-items: center;
  }
  .band .icon {
    grid-area: icon;
    width: 96px;
    height: 96px;
    margin: 0;
    align-self: center;
  }
  .band h1 { grid-area: name; }
  .band .lead { grid-area: lead; }
  .band .note { grid-area: note; justify-self: start; margin-top: var(--space-2); }
}

/* ---- The three welcome pages ---- */

.page {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: var(--space-6);
  padding-block: var(--space-8);
}
.page figure {
  margin: 0;
  width: 100%;
  max-width: 460px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sheet);
  background: var(--surface);
  box-shadow: 0 10px 22px var(--shadow-soft), 0 0 0 1px var(--border);
}
.page figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page .words {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: 30em;
}
.page .words p {
  color: var(--text-secondary);
}

@media (min-width: 800px) {
  .page {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
    padding-block: var(--space-12);
  }
  .page figure {
    max-width: none;
  }
  .page.flip figure {
    order: 2;
  }
}

/* ---- The invite words ---- */

.invite {
  margin-block: var(--space-8) var(--space-12);
  padding: var(--space-8) var(--space-6);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-panel);
  box-shadow: 0 10px 22px var(--shadow-soft), inset 0 1px 0 var(--highlight);
}
.invite .words {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  max-width: 30em;
}
.invite p {
  color: var(--text-secondary);
}

/* ---- Footer ---- */

.foot {
  flex-shrink: 0;
  border-top: 1px solid var(--border);
  padding-block: var(--space-6) var(--space-10);
}
.foot .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  column-gap: var(--space-8);
  row-gap: var(--space-2);
}
.foot nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-6);
}
/* role: button, as a tertiary one: the accent colour, bold 16 */
.foot nav a,
.foot .contact a {
  display: inline-flex;
  align-items: center;
  min-height: var(--min-touch);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
}
.foot .contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-2);
  color: var(--text-tertiary);
  font-size: 15px;
}
.foot a[aria-current="page"] {
  color: var(--text-primary);
}

/* ---- rules.html ---- */

.bar {
  padding-top: var(--space-4);
}
.back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--min-touch);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.2;
  text-decoration: none;
}
.back:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}
.back .chevron {
  width: 10px;
  height: 10px;
  border-left: 2.5px solid currentColor;
  border-bottom: 2.5px solid currentColor;
  border-radius: 1px;
  transform: rotate(45deg);
  margin-right: 2px;
}
.back img {
  width: 32px;
  height: 32px;
}

.rules-head {
  padding-top: var(--space-8);
  padding-bottom: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.rules-head p {
  max-width: 30em;
  color: var(--text-secondary);
}

.rules {
  list-style: none;
  margin: 0 0 var(--space-12);
  padding: 0;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 22px var(--shadow-soft), inset 0 1px 0 var(--highlight);
  overflow: hidden;
}
.rules li {
  padding: var(--space-4) var(--space-4);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.rules li + li {
  border-top: 1px solid var(--border);
}
/* role: title (Hanken bold), at the body's 17 so it reads on a wide screen */
.rules h2 {
  font-family: var(--ui);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0;
}
.rules p {
  color: var(--text-secondary);
}

@media (min-width: 800px) {
  .rules li {
    padding: var(--space-6) var(--space-8);
  }
}

/* ---- privacy.html: a long page to read ---- */

.prose {
  max-width: 36em;
  margin-bottom: var(--space-12);
}
.prose .intro,
.prose section {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.prose section {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: 1px solid var(--border);
}
/* role: title (Hanken bold), the same as .rules h2 */
.prose h3 {
  margin: var(--space-3) 0 0;
  font-family: var(--ui);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--text-primary);
}
.prose p,
.prose li {
  color: var(--text-secondary);
}
.prose strong {
  color: var(--text-primary);
}
.prose ul,
.prose ol {
  margin: 0;
  padding-left: 1.4em;
}
.prose li + li {
  margin-top: var(--space-2);
}