/* Duluk marketing site.
   Tokens from docs/DESIGN.md and docs/design/ACCENTS.md. System type, flat surfaces,
   one chromatic colour on screen, no shadows and no gradients. */

:root {
  --ground: #F2F2F2;
  --bg: #FFFFFF;
  --fg: #0A0A0A;
  --muted: #6B6B6B;
  --line: #E6E6E6;
  --card: #F5F5F5;
  --accent: #7C8C6A;          /* Miswak */
  --on-accent: #0A0A0A;       /* white is 3.6:1 on Miswak, so labels are ink in both modes */
  --ok: #1F8A4C;

  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", system-ui, "Segoe UI", Helvetica, Arial, sans-serif;

  --gutter: 20px;
  --max: 1120px;
  --gap: 12px;
  --pad: clamp(22px, 3vw, 40px);
  --rhythm: clamp(72px, 9vw, 132px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0A0A0A;
    --bg: #000000;
    --fg: #F5F5F5;
    --muted: #8E8E93;
    --line: #2C2C2E;
    --card: #1C1C1E;
    --accent: #A7BB8A;
    --on-accent: #0A0A0A;
    --ok: #30B466;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.page { background: var(--bg); overflow: hidden; }

@media (min-width: 900px) {
  .page { margin: 24px; }
}

a { color: inherit; }
img { max-width: 100%; }

/* ---------- type ---------- */

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; }

h1 { font-size: clamp(2.1rem, 3.9vw, 3.1rem); }
h2 { font-size: clamp(1.7rem, 2.9vw, 2.35rem); }
h3 { font-size: 17px; letter-spacing: -0.01em; line-height: 1.3; }

p { margin: 0; }

.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.wrap { max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); }

section { padding-block: var(--rhythm); }

.sec-head { display: grid; gap: 12px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 30ch; }
.sec-head p:not(.eyebrow) { color: var(--muted); }
.sec-head-center { max-width: 34ch; margin-inline: auto; text-align: center; }

/* ---------- buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0 28px;
  border-radius: 28px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: opacity 0.18s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-accent { background: var(--accent); color: var(--on-accent); }
.btn-quiet { background: var(--bg); color: var(--fg); }
.btn-sm { min-height: 44px; padding: 0 20px; font-size: 14px; border-radius: 22px; }
.btn:hover { opacity: 0.85; }
.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

/* ---------- 1. hero ---------- */

.hero {
  /* the drawing is the whole screen; the copy rides on top of it and the scene composes below */
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  overflow: hidden;
  padding-block: 0;          /* the nav starts at the top of the panel; the rest of the height is drawing */
  padding-inline: var(--gutter);
}

@media (min-width: 900px) {
  .hero { min-height: calc(100vh - 48px); }
}

.hero-canvas { position: absolute; inset: 0; pointer-events: none; }
.hero-canvas canvas { display: block; width: 100%; height: 100%; }

.hero-inner { position: relative; max-width: var(--max); margin-inline: auto; }

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: 0;
}
.nav-links { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); }
.nav-links a { font-size: 15px; font-weight: 500; text-decoration: none; }
.nav-links a:not(.btn):hover { color: var(--accent); }

@media (max-width: 559px) { .nav-links .btn-sm { display: none; } }

/* phone: the hero is exactly nav + copy + a square-ish band, no dead gap under the copy */
@media (max-width: 759px) {
  .hero { min-height: 0; padding-bottom: 95vw; }
}

.mark { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; display: flex; align-items: center; gap: 9px; }

.appicon { display: block; width: 28px; height: 28px; border-radius: 22.37%; }   /* Apple's mask ratio */
.appicon-lg { width: 48px; height: 48px; }

.hero-copy {
  display: grid;
  justify-items: center;
  gap: clamp(8px, 1vh, 12px);
  text-align: center;
  padding-top: clamp(24px, 4vh, 52px);
}
.hero-copy h1 { max-width: 18ch; }
/* dark, wide: the copy is placed inside The Decline's dome, so it is capped and offset from JS */
.hero.dome .hero-copy { max-width: 560px; margin-inline: auto; }
.hero.dome .hero-copy h1 { max-width: none; }

.hero-copy .lede { color: var(--muted); font-size: clamp(1rem, 1.3vw, 1.1rem); max-width: 64ch; }
.hero-copy .btn { margin-top: clamp(4px, 1vh, 10px); }

/* ---------- 2. three screens ---------- */

.screens .sec-head { margin-bottom: clamp(28px, 4vw, 48px); }

.devices {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: var(--max);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 4vw, 56px);
  padding-inline: var(--gutter);
}

.device { text-align: center; display: grid; gap: 10px; justify-items: center; }
.device img { display: block; width: min(100%, 300px); height: auto; margin-bottom: 14px; }
.device p { color: var(--muted); font-size: 15px; max-width: 34ch; }

@media (max-width: 759px) {
  .devices {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78vw;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    gap: 16px;
    scrollbar-width: none;
  }
  .devices::-webkit-scrollbar { display: none; }
  .device { scroll-snap-align: center; }
  .device img { width: 100%; }
}

/* ---------- 3. claim ---------- */

.claim { text-align: center; }
.claim h2 { font-size: clamp(1.7rem, 3.2vw, 2.7rem); }

.dots {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 8px;
  width: min(100%, 300px);
  margin: clamp(32px, 4vw, 48px) auto 0;
}
.dot { aspect-ratio: 1 / 1; border-radius: 50%; background: var(--ok); }
.dot.ring { background: none; box-shadow: inset 0 0 0 1px var(--line); }

.claim-foot {
  color: var(--muted);
  font-size: 16px;
  max-width: 54ch;
  margin: 28px auto 0;
}

.claim-sig {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 18px;
}

/* ---------- the river ---------- */

.journey .sec-head { margin-bottom: clamp(24px, 4vw, 44px); }

.river { position: relative; }
.river canvas { display: block; width: 100%; }

.station {
  position: absolute;
  display: grid;
  gap: 4px;
  max-width: 44vw;
}
.station strong { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.station span { color: var(--muted); font-size: 14px; line-height: 1.4; }

@media (min-width: 760px) {
  .station { max-width: 30ch; text-align: center; }
  .station strong { font-size: 17px; }
  .station span { font-size: 15px; line-height: 1.5; }
}

/* ---------- 5. banner ---------- */

.banner {
  position: relative;
  overflow: visible;          /* the bottom tear hangs 40px below */
  min-height: 260px;
  background: var(--accent);
  color: #F0ECE0;
  text-align: center;
  display: grid;
  align-content: center;
  padding-block: clamp(40px, 6vw, 72px);
  z-index: 3;                 /* its bottom tear hangs over the next section */
}

@media (min-width: 860px) {
  .banner { min-height: 320px; }
}

@media (prefers-color-scheme: dark) {
  .banner { color: #0A0A0A; }
}
.range { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }

.banner span {
  position: relative;
  z-index: 1;
  display: block;
  font-size: clamp(3.5rem, 15vw, 11rem);
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
}

/* ---------- 6. free: the quilt ---------- */

.quilt { position: relative; margin-top: clamp(28px, 4vw, 48px); }
.quilt canvas { display: block; width: 100%; }

.patch { position: absolute; display: grid; gap: 2px; }
.patch strong { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; }
.patch span { color: var(--muted); font-size: 12px; line-height: 1.3; }

@media (min-width: 760px) {
  .patch span { font-size: 13px; line-height: 1.35; }
}

.free-foot { color: var(--muted); font-size: 15px; max-width: 62ch; margin-top: clamp(24px, 3vw, 36px); }

/* ---------- the wall of cards ---------- */

.wall { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.wall::-webkit-scrollbar { display: none; }
.wall-track { position: relative; width: max-content; min-width: 100%; padding-inline: var(--gutter); }
.wall-track canvas { position: absolute; inset: 0; pointer-events: none; }

.card-row {
  list-style: none;
  margin: 0;
  padding: 70px 0 8px;
  display: flex;
  gap: clamp(16px, 2.2vw, 28px);
  justify-content: center;
}
.card-row li { flex: 0 0 auto; opacity: 0; transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1); }
.card-row li.up { opacity: 1; }
.card-row img {
  display: block;
  width: 150px;
  height: auto;
  aspect-ratio: 360 / 640;
  border: 1px solid var(--line);
}

@media (max-width: 759px) {
  .card-row { justify-content: flex-start; scroll-snap-type: x mandatory; }
  .card-row li { scroll-snap-align: center; }
  .card-row img { width: 62vw; }
}

/* ---------- 7. faq, written by hand ---------- */

.faq-page { max-width: 560px; margin-inline: auto; }

.qa { position: relative; }
.qa canvas { display: block; width: 100%; }

/* the real question and answer stay in the DOM for search and screen readers */
.qa h3, .qa p {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- footer ---------- */

footer {
  position: relative;
  background: #18201A;                 /* the sky canvas paints over this */
  color: #F0ECE0;
  padding: clamp(40px, 6vw, 72px) var(--gutter);
  display: grid;
  gap: 40px;
  min-height: 520px;
  overflow: hidden;
}

.sky { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
footer > *:not(.sky):not(.tear) { position: relative; z-index: 1; }
.foot-brand, .foot-cols { text-shadow: 0 0 3px rgba(20, 28, 21, 0.95); }

@media (min-width: 860px) {
  footer { min-height: 420px; }
}

.foot-mark { display: flex; align-items: center; gap: 14px; font-size: clamp(2rem, 4vw, 3rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1; }
.foot-brand p:not(.foot-mark) { margin-top: 14px; max-width: 42ch; font-size: 15px; opacity: 0.85; }
.foot-by { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600; }

.foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.foot-cols div { display: grid; gap: 10px; align-content: start; }
.foot-cols h2 {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-bottom: 2px;
}
.foot-cols a { font-size: 15px; text-decoration: none; color: #F0ECE0; opacity: 0.8; }
.foot-cols a:hover { opacity: 1; text-decoration: underline; }
.foot-brand p:not(.foot-mark) { color: #F0ECE0; }

/* phone and tablet: the words keep to the top of the sky so the moon and the lower stars stay clear,
   but they start well under the torn edge and have room between them */
@media (max-width: 859px) {
  footer { align-content: start; gap: 44px; padding-top: 88px; padding-bottom: clamp(280px, 76vw, 360px); }
  .foot-brand p:not(.foot-mark) { margin-top: 20px; font-size: 16px; line-height: 1.5; }
  .foot-brand p.foot-by { margin-top: 24px; font-size: 13px; }
  .foot-cols { gap: 32px 20px; }
  .foot-cols div { gap: 4px; }
  .foot-cols h2 { margin-bottom: 8px; }
  .foot-cols a { font-size: 16px; padding-block: 8px; }     /* a finger-sized row */
}
@media (max-width: 359px) {
  .foot-cols { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 600px) and (max-width: 859px) {
  .foot-cols { grid-template-columns: repeat(3, max-content); gap: 32px 64px; }
}


@media (min-width: 860px) {
  footer { grid-template-columns: minmax(0, 60%) auto; align-items: start; gap: 64px; justify-content: start; }
  .foot-cols { grid-template-columns: repeat(3, minmax(120px, auto)); gap: 40px; }
}

/* ---------- torn paper edges ---------- */

.tear {
  position: absolute;
  left: 0;
  width: 100%;
  height: 40px;
  bottom: -40px;              /* the coloured section tears down over the next one */
  pointer-events: none;
  z-index: 2;
}
.tear-top { top: 0; bottom: auto; }            /* the sheet above tears down INTO the coloured block */
.tear-hair { bottom: 0; }

.banner, footer, .hero { position: relative; }

/* ---------- one reveal ---------- */

[data-reveal] {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ---------- legal pages ---------- */

.legal { max-width: 640px; margin-inline: auto; padding: clamp(40px, 6vw, 96px) var(--gutter) var(--rhythm); }
.legal .eyebrow { margin-bottom: 12px; }
.legal h1 { margin-bottom: 8px; }
.legal .lede { color: var(--muted); max-width: 44ch; }
.legal h2 { font-size: 1.25rem; margin-top: clamp(36px, 5vw, 56px); margin-bottom: 10px; }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: 12px; }
.legal ul { margin: 0; padding-left: 1.2em; }
.legal li + li { margin-top: 6px; }
.legal a { color: var(--accent); text-underline-offset: 3px; }
.legal .updated { font-size: 13px; color: var(--muted); margin-top: 10px; }
.subnav { padding-inline: var(--gutter); max-width: var(--max); margin-inline: auto; }