/* 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 {
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}

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

/* ── 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;
  }
}