/* ==========================================================================
   serendipityr.cn — single responsive stylesheet
   Rebuilt 2026-07: replaces style.css + style_wap.css and the remote
   Metronic bundle (only the handful of rules the site used were kept).
   Layout keeps the original proportions: on desktop each section's bottom
   edge sits at a fixed fraction of the viewport height (35% / 60% / 75% /
   80% / 95%), exactly like the old absolutely-positioned boxes.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
  --font-sans: Poppins, "Helvetica Neue", Helvetica, Arial,
               "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  --font-display: "MV Boli", var(--font-sans);
  --font-subtitle: "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;

  --c-text: #ffffff;
  --c-accent: #04b8ff;              /* footer cyan (was rgb(4,184,255)) */
  --c-btn-hover-text: #212121;      /* Metronic .btn-outline-white hover text */
  --c-bg-fallback: #757786;         /* average colour of bg image, shown while it loads */

  --btn-radius: 2rem;               /* Metronic .btn-pill */
  --dur: 0.3s;                      /* Metronic button transition duration */
}

/* ---------- Font ---------- */
@font-face {
  font-family: "MV Boli";
  src: local("MV Boli"),
       url("../fonts/mvboli-latin.woff") format("woff"),
       url("../fonts/MVBoil.ttf") format("truetype");
  font-display: swap;
}

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--c-text);
  background-color: var(--c-bg-fallback);
}

/* Full-viewport background layer.
   A fixed pseudo-element instead of `background-attachment: fixed`,
   which is broken on iOS Safari (the old mobile page suffered from it). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--c-bg-fallback) url("../img/bg-2560.webp") no-repeat center / cover;
}

/* ---------- Page scaffold (desktop-first, mirrors the old % anchors) ---------- */
.page {
  display: grid;
  height: 100vh;                    /* fallback */
  height: 100svh;
  min-height: 40rem;                /* very short windows scroll instead of overlapping */
  overflow-x: clip;
}

/* Section bottoms at: title 35%, buttons 60%, quote 75%, source 80%, footer 95%.
   minmax(min-content, …) lets a row grow instead of overlapping its neighbours
   when the viewport is unusually small. */
.page--index {
  grid-template-rows:
    35% minmax(min-content, 25%) minmax(min-content, 15%)
    minmax(min-content, 5%) minmax(min-content, 15%);
}
/* hint 45%, buttons 60%, footer 95% */
.page--jump {
  grid-template-rows: 45% minmax(min-content, 15%) minmax(min-content, 35%);
}
/* title 35%, subtitle 47%, buttons 60%, footer 95% */
.page--404 {
  grid-template-rows:
    35% minmax(min-content, 12%) minmax(min-content, 13%) minmax(min-content, 35%);
}

.page--centered {
  grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
}

.center-content {
  grid-row: 2;
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  width: 100%;
}

.page--centered > .footer { grid-row: 3; }

@media (min-width: 769px) {
  .page--centered > .footer { padding-bottom: 5vh; }
}

.center-content > * { margin: 0; }

.center-content .actions { padding-bottom: 0; }

.page > * {
  align-self: end;
  justify-self: center;
  margin: 0;
  max-width: 100%;
}

/* ---------- Typography ---------- */
.site-title {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
}

.jump-hint {
  font-family: var(--font-display);
  font-size: 3.5rem;
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
}

.sub-title {
  font-family: var(--font-subtitle);
  font-size: 2.3rem;
  font-weight: 300;
  color: var(--c-text);
  text-align: center;
}

.quote,
.quote-from {
  font-size: 1.125rem;              /* was inline "font-size: large" */
  font-weight: 700;
  color: var(--c-text);
  text-align: center;
}

.quote-from {
  transform: translateX(7.5rem);    /* the old 15rem left-margin offset */
}

.footer {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-accent);
  text-align: center;
  white-space: nowrap;
}

/* Line-break helper: only the phone layout breaks the main title in two. */
.br-mobile { display: none; }

/* ---------- Buttons (formerly Metronic btn btn-pill btn-outline-white ...) ---------- */
.actions {
  display: grid;
  justify-items: center;
  gap: 1.5rem;
  padding-bottom: 1.75rem;          /* replaces the old .form-group bottom margin */
}

.btn-row {
  display: flex;
  flex-wrap: wrap;                  /* mid-size screens wrap instead of overflowing */
  justify-content: center;
  gap: 1.5rem 2.6875rem;            /* the old 8×  ≈ 43px horizontal gap */
}

.btn {
  display: inline-block;
  /* py-3 px-30: exactly 7.5rem at ≥1920px, scales down on smaller screens
     so the three-button row never collides or clips like the old fixed layout */
  padding: 0.75rem clamp(2rem, 6.25vw, 7.5rem);
  border: 1px solid var(--c-text);
  border-radius: var(--btn-radius);
  font-family: inherit;
  font-size: 1.25rem;               /* font-size-h5 */
  font-weight: 700;                 /* font-weight-boldest */
  line-height: 1.5;
  color: var(--c-text);
  background-color: transparent;
  opacity: 0.9;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: color var(--dur) ease-in-out, background-color var(--dur) ease-in-out;
  backdrop-filter: blur(3px);
}

.btn:hover,
.btn:active {
  color: var(--c-btn-hover-text);
  background-color: var(--c-text);
  text-decoration: none;
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(222, 222, 222, 0.5);
}

/* jump / 404 buttons used font-weight-bolder instead of -boldest */
.btn--secondary { font-weight: 600; }

/* ---------- Phone layout (replaces the *_wap pages) ---------- */
@media (max-width: 768px) {
  .page,
  .page--index,
  .page--jump,
  .page--404 {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
    min-height: 100vh;
    min-height: 100svh;
  }

  /* In the desktop grid, align-self:end means "bottom of the row".
     In this flex column it would mean "right edge" — reset it so every
     block (title, footer, …) is truly horizontally centered. */
  .page > * { align-self: center; }

  .page--centered {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr);
    height: 100vh;
    height: 100svh;
  }

  .center-content {
    gap: 15px;
    padding: 20px 0;
  }

  .br-mobile { display: inline; }

  .site-title {
    padding: 10vh 0 15px;
    font-size: min(3.5rem, 14.5vw);  /* full size on ≥390px phones, scales down below */
    line-height: 1.2;
  }

  .jump-hint {
    font-size: 2rem;
    padding: 16vh 20px 15px;
  }

  .center-content .site-title,
  .center-content .jump-hint,
  .center-content .sub-title {
    padding-top: 0;
    padding-bottom: 0;
  }

  .sub-title { padding: 0 20px 15px; }

  .actions {
    width: 100%;
    max-width: 26rem;
    justify-items: stretch;          /* rows span the container, like the old wap page */
    padding: 2vh 16px 15px;
    gap: 15px;
  }

  .btn-row {
    flex-direction: column;
    align-items: stretch;
    align-self: stretch;
    gap: 15px;
  }

  .btn {
    width: 100%;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    white-space: normal;            /* long labels wrap instead of overflowing */
  }

  .quote {
    margin-top: 2vh;
    padding: 0 20px;
    font-size: 1rem;                /* was inline "font-size: medium" */
  }

  .quote-from {
    transform: none;                /* centered on phones, like the old wap page */
    padding: 0 20px;
    font-size: 1rem;
  }

  .footer {
    margin-top: auto;               /* pinned to the bottom of the page */
    padding: 3vh 16px calc(4vh + env(safe-area-inset-bottom));
    white-space: normal;
  }

  .page--centered > .footer { align-self: end; }
}

/* Slightly smaller phones: keep the big title on two tidy lines */
@media (max-width: 360px) {
  .site-title { font-size: 3rem; }
}

/* ---------- Small-screen background ---------- */
@media (max-width: 768px) {
  body::before { background-image: url("../img/bg-1280.webp"); }
}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}