/* Shared look for the site's own pages (Our story, Support us, Our supporters,
   admin). Load after hub.css, which brings the fonts, colours and background.
   These pages are part of the homepage, not games, so they may link hub/. */

:root {
  --blue: #4dabf7;
  --blue-d: #2b84cc;
  --yellow-d: #dba600;
  --red-d: #d14848;
  --pink: #f783ac;
}

.sub { max-width: 860px; margin: 0 auto; padding: 16px 16px 48px; }

/* Top bar: round home button, then the page title under a small "Eva's & Max's". */
.sub-top { display: flex; align-items: center; gap: 14px; margin: 4px 0 18px; }
.round {
  flex: none; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: #fff; border: 3px solid var(--line); box-shadow: 0 4px 0 var(--line-d);
  font-size: 24px; text-decoration: none; transition: transform 0.12s;
}
.round:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--line-d); }
.sub-title { margin: 0; line-height: 1.05; font-size: clamp(30px, 6vw, 44px); font-weight: 700; }
.sub-title small { display: block; font-size: 0.42em; color: var(--ink-soft); letter-spacing: 0.5px; }

/* Paper card with a coloured strip across the top. */
.card { position: relative; background: var(--paper); border-radius: 28px; box-shadow: var(--shadow); padding: 26px 24px 24px; margin: 0 0 22px; overflow: hidden; }
.card::before { content: ''; position: absolute; inset: 0 0 auto; height: 10px; background: repeating-linear-gradient(90deg, #ff6b6b 0 40px, #ffa94d 40px 80px, #ffd43b 80px 120px, #51cf66 120px 160px, #4dabf7 160px 200px, #9775fa 200px 240px, #f783ac 240px 280px); }
.card h2 { margin: 6px 0 10px; font-size: 26px; }
.card p, .card li { font-size: 19px; line-height: 1.55; font-weight: 600; }
.muted { color: var(--ink-soft); }

/* Chunky buttons (BRAND.md): solid darker bottom edge, a shine, press down. */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 0 28px; border: 0; border-radius: 22px;
  font: 700 21px/1 var(--font); color: #fff; text-decoration: none; cursor: pointer;
  background: var(--green); box-shadow: 0 6px 0 var(--green-d);
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.15); transition: transform 0.1s, box-shadow 0.1s;
}
.btn::after { content: ''; position: absolute; inset: 4px 8px 50%; border-radius: 16px 16px 10px 10px; background: rgba(255, 255, 255, 0.22); pointer-events: none; }
.btn:active { transform: translateY(5px); box-shadow: 0 1px 0 var(--green-d); }
.btn:disabled { opacity: 0.55; cursor: default; }
.btn.blue { background: var(--blue); box-shadow: 0 6px 0 var(--blue-d); }
.btn.blue:active { box-shadow: 0 1px 0 var(--blue-d); }
.btn.yellow { background: var(--yellow); color: var(--ink); text-shadow: none; box-shadow: 0 6px 0 var(--yellow-d); }
.btn.yellow:active { box-shadow: 0 1px 0 var(--yellow-d); }
.btn.red { background: var(--red); box-shadow: 0 6px 0 var(--red-d); }
.btn.red:active { box-shadow: 0 1px 0 var(--red-d); }
.btn.white { background: #fff; color: var(--ink); text-shadow: none; box-shadow: 0 6px 0 var(--line-d); border: 3px solid var(--line); }
.btn.white:active { box-shadow: 0 1px 0 var(--line-d); }
.btn.small { min-height: 44px; padding: 0 18px; font-size: 17px; border-radius: 16px; }

/* Form fields. */
.field { display: block; margin: 0 0 18px; }
.field > span { display: block; margin: 0 0 6px; font-size: 18px; }
.input, select.input {
  width: 100%; min-height: 54px; padding: 0 16px; border-radius: 16px;
  border: 3px solid var(--line); background: #fff; color: var(--ink);
  font: 600 19px var(--font);
}
.input:focus { outline: none; border-color: var(--blue); }

.page-foot { margin-top: 26px; text-align: center; color: var(--ink-soft); font-size: 16px; }
.page-foot a { margin: 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .btn, .round { transition: none; }
}