/* Lullrise — lullrise.com
   Hand-written. No build step, no framework, no third-party requests.

   Colour is borrowed from the Pieceable design system (warm neutrals, one
   terracotta accent) but used sparingly: this is the company's page, not the
   game's. Every text colour below was checked against its background and
   clears WCAG AA; the ratios are noted where it is not obvious. */

/* ── Typeface ──────────────────────────────────────────────────────────────
   Source Serif 4, SIL Open Font License 1.1 (see fonts/LICENSE-source-serif.txt).
   Self-hosted. One file: the Latin subset of the variable font, with the
   optical-size axis pinned at 20 and the weight axis narrowed to 400–650.
   Apple's system fonts are deliberately absent from the fallback stack —
   they are licensed for app UI, not for a public website. */

@font-face {
  font-family: "Source Serif 4";
  src: url("/fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 400 650;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ── Tokens ───────────────────────────────────────────────────────────── */

:root {
  --surface:        #f7f2e8;
  --ink:            #241f1b;  /* 14.6:1 on surface */
  --ink-muted:      #5a5048;  /*  7.0:1 on surface */
  --accent-text:    #9c4a22;  /*  5.5:1 on surface — links, focus */
  --accent-graphic: #d18557;  /* decorative only; the settled Pieceable brand */
  --rule:           #e3d9c7;

  --measure: 34rem;
  --font: "Source Serif 4", Georgia, "Times New Roman", Times, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface:        #1f1c1a;
    --ink:            #f2ebde;  /* 14.3:1 on surface */
    --ink-muted:      #b0a599;  /*  7.0:1 on surface */
    --accent-text:    #e0996e;  /*  7.2:1 on surface */
    --accent-graphic: #d18557;  /*  5.8:1 on surface */
    --rule:           #3a322b;
  }
}

/* ── Reset, kept to what this page actually uses ───────────────────────── */

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

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

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;

  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100svh;

  /* Vertical spacing is capped against the viewport's *height*, not only its
     width. Sized on width alone the page came to a fixed 823px, which pushed
     the legal line below the fold on any ordinary laptop. */
  padding: clamp(1.25rem, min(6vw, 5vh), 4rem) clamp(1.5rem, 6vw, 3rem);
}

p { margin: 0; }

/* ── Layout ────────────────────────────────────────────────────────────────
   The page is short on purpose: an Apple reviewer should see the company
   name, what it does, how to reach it, and the legal entity without
   scrolling. The footer is pushed to the bottom rather than padded there. */

.page {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.75rem, min(7vw, 6vh), 4rem);
  padding-block: clamp(0.75rem, min(5vw, 3vh), 3rem);
}

/* ── Masthead ──────────────────────────────────────────────────────────── */

.mark {
  display: block;
  width: clamp(3rem, 8vw, 3.75rem);
  height: auto;
  margin-bottom: 1.375rem;
}

.mark-sun     { fill: var(--accent-graphic); }
.mark-horizon { stroke: var(--ink-muted); stroke-width: 1.6; stroke-linecap: round; fill: none; }

.wordmark {
  margin: 0;
  font-size: clamp(2.75rem, 9vw, 4rem);
  font-weight: 600;
  line-height: 1.05;
  letter-spacing: -0.015em;
}

.lede {
  margin-top: 1.125rem;
  max-width: 30rem;
  font-size: clamp(1.1875rem, 2.6vw, 1.4375rem);
  line-height: 1.5;
  color: var(--ink);
  text-wrap: pretty;
}

.contact {
  margin-top: 1.75rem;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 0.75rem;
}

.contact-label {
  font-size: 0.8125rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

/* ── Pieceable ─────────────────────────────────────────────────────────── */

.product {
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.75rem, 5vw, 2.5rem);
}

/* The one section-label style, shared by the home page and content pages. */
.product h2,
.doc h2 {
  margin: 0 0 0.625rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.product p {
  max-width: 32rem;
  text-wrap: pretty;
}

/* ── Content pages — /support, and the privacy policy when it exists ────── */

.page--doc {
  justify-content: flex-start;
  gap: clamp(1.75rem, min(5vw, 4vh), 2.75rem);
}

/* The mark and the company name, back to the home page. */
.crumb {
  display: inline-flex;
  align-items: baseline;
  gap: 0.5rem;
  color: var(--ink-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

.crumb:hover { color: var(--accent-text); text-decoration: underline; }

.crumb-mark {
  width: 1.75rem;
  height: auto;
  transform: translateY(0.15em);
}

.doc h1 {
  margin: 1.125rem 0 0;
  font-size: clamp(2rem, 6vw, 2.75rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
}

.address {
  margin-top: 0.875rem;
  font-size: clamp(1.125rem, 2.4vw, 1.3125rem);
}

.doc-lede {
  margin-top: 0.875rem;
  max-width: 30rem;
  color: var(--ink-muted);
  text-wrap: pretty;
}

.doc section {
  border-top: 1px solid var(--rule);
  padding-top: clamp(1.5rem, 4vw, 2rem);
}

.doc p { max-width: 32rem; text-wrap: pretty; }

.doc ul {
  margin: 0.75rem 0 0;
  padding-left: 1.2rem;
  max-width: 32rem;
}

.doc li { margin-top: 0.35rem; }
.doc li::marker { color: var(--accent-graphic); }

/* ── Links ─────────────────────────────────────────────────────────────── */

a {
  color: var(--accent-text);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  border-radius: 2px;
}

a:hover { text-decoration-thickness: 2px; }

a:focus-visible {
  outline: 2px solid var(--accent-text);
  outline-offset: 3px;
  text-decoration: none;
}

/* ── Footer ────────────────────────────────────────────────────────────── */

/* Legal line and site links share one row where they fit, and wrap to two
   where they do not. Stacking them unconditionally cost the home page a line
   it could not spare on a short laptop screen. */
.site-foot {
  flex: 0 0 auto;
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rule);

  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.25rem 1.5rem;
}

.foot-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

.legal {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--ink-muted);
  text-wrap: pretty;
}

/* ── Privacy policy ────────────────────────────────────────────────────────
   One page, three languages. The headings here are a real hierarchy, not the
   small uppercase section label `.doc h2` carries elsewhere, so these are
   written as `.doc.policy` to win on specificity rather than on source order
   — the same selector at equal weight would flip meaning if either block
   moved. */

.lang-nav {
  margin-top: 1.25rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  font-size: 0.9375rem;
}

.doc.policy h2 {
  margin: 0 0 0.75rem;
  font-size: clamp(1.375rem, 3.4vw, 1.625rem);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--ink);
}

.doc.policy h3 {
  margin: 1.75rem 0 0.5rem;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--ink);
}

.doc.policy .version {
  margin-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink-muted);
}

.doc.policy p + p { margin-top: 0.75rem; }
.doc.policy ul + p { margin-top: 0.75rem; }

/* Source Serif 4 declares a Latin-only unicode-range, so CJK falls through to
   the generic serif. Name the faces rather than leaving the choice to the
   platform's default, which on some systems is a sans. */
.doc.policy [lang="zh-Hans"] {
  font-family: "Source Serif 4", Georgia, "Songti SC", "Noto Serif CJK SC",
               "Source Han Serif SC", serif;
  line-height: 1.85;
}

.doc.policy [lang="zh-Hans"] h2,
.doc.policy [lang="zh-Hans"] h3 { letter-spacing: 0.01em; }

/* ── 404 ───────────────────────────────────────────────────────────────── */

.notfound { justify-content: center; text-align: left; }

.notfound h1 {
  margin: 0;
  font-size: clamp(1.75rem, 5vw, 2.25rem);
  font-weight: 600;
  line-height: 1.2;
}

.notfound p { margin-top: 1rem; color: var(--ink-muted); }

/* ── Motion ────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}