/* pulmonaut.app — shared styles (rev9) */

:root {
  --ink:        #000;
  --silver:     #c8d2de;
  --silver-dim: #6f7d8e;
  --mist:       #8fa3ba;
  --line:       rgba(140, 160, 185, 0.16);
  --pad:        clamp(20px, 4.5vw, 56px);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ink);
  color: var(--silver);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
               "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.6;
}

a { color: var(--silver); text-decoration: none; }
a:hover { color: #fff; }
a:focus-visible { outline: 1px solid var(--mist); outline-offset: 4px; }

::selection { background: #22374f; color: #fff; }

/* ---------- header (all pages) ---------- */
.top {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(var(--pad) * 0.6) var(--pad);
}
.top .home { display: block; line-height: 0; }
.top .home img {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: block;
}
.top nav a {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--silver-dim);
}
.top nav a:hover { color: var(--silver); }

/* ---------- hero (index) ---------- */
main.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 3rem;
  overflow: hidden;
  padding: var(--pad);
}
#vapor {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: min(34svh, 340px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
          mask-image: linear-gradient(to bottom, black 0%, black 45%, transparent 100%);
}
.hero-h1 { margin: 0; line-height: 0; }
.hero .wordmark {
  width: clamp(260px, 62vw, 720px);
  height: auto;
  fill: var(--silver);
  display: block;
}
@media (max-aspect-ratio: 1 / 1) {
  .hero-h1 { margin: 0; line-height: 0; }
.hero .wordmark { width: min(86vw, 720px); }
}

/* Official App Store badge (Apple asset — don't restyle or recolour it) */
.store { display: inline-block; line-height: 0; opacity: 0.92; transition: opacity 0.2s ease; }
.store:hover { opacity: 1; }
.store img { height: 54px; width: auto; display: block; }

/* ---------- artwork marquee (index, between hero and footer) ---------- */
.marquee {
  position: relative;
  padding: calc(var(--pad) * 1.3) 0 calc(var(--pad) * 1.1);
}
.marquee-head {
  width: min(640px, 100%);
  margin: 0 auto;
  padding: 0 var(--pad);
  text-align: center;
}
.marquee-head h2 {
  margin: 0 0 0.6rem;
}
.marquee-head p {
  font-size: 1rem;
  font-weight: 300;
  color: var(--silver-dim);
  max-width: 46ch;
  margin: 0 auto;
}
.marquee-strip {
  position: relative;
  height: clamp(200px, 24vw, 240px);
  margin-top: calc(var(--pad) * 0.9);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 14%, black 86%, transparent 100%);
}
.marquee-track {
  position: absolute;
  top: 50%; left: 50%;
  width: 3520px;
  height: 200px;
  transform: translate(-50%, -50%);
}
.marquee-item {
  position: absolute;
  top: 0; left: 0;
  width: 88px;
  height: 88px;
  border-radius: 10px;
  object-fit: cover;
  offset-path: path('M 0,132 C 110,132 110,68 220,68 C 330,68 330,132 440,132 C 550,132 550,68 660,68 C 770,68 770,132 880,132 C 990,132 990,68 1100,68 C 1210,68 1210,132 1320,132 C 1430,132 1430,68 1540,68 C 1650,68 1650,132 1760,132 C 1870,132 1870,68 1980,68 C 2090,68 2090,132 2200,132 C 2310,132 2310,68 2420,68 C 2530,68 2530,132 2640,132 C 2750,132 2750,68 2860,68 C 2970,68 2970,132 3080,132 C 3190,132 3190,68 3300,68 C 3410,68 3410,132 3520,132');
  offset-rotate: 0deg;
  offset-distance: 0%;
  animation: marquee-run 48s linear infinite;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  will-change: offset-distance;
}
@keyframes marquee-run {
  from { offset-distance: 0%; }
  to   { offset-distance: 100%; }
}
@media (max-width: 560px) {
  .marquee-item { width: 68px; height: 68px; border-radius: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-item { animation-play-state: paused; }
}

/* ---------- footer (index) ---------- */
footer.deep {
  position: relative;
  min-height: 100svh;
  background: linear-gradient(180deg, #000 0%, #030a18 40%, #0a1630 100%);
  display: grid;
  align-content: center;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding: var(--pad);
}
#water {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  height: min(36svh, 389px);
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, black 0%, transparent 100%);
          mask-image: linear-gradient(to top, black 0%, transparent 100%);
}
.foot-inner {
  position: relative;
  z-index: 2;
  width: min(920px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 3.5rem;
}
.foot-title {
  font-size: clamp(2.3rem, 6.5vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #eef3f9;
  margin: 0;
}
.foot-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.foot-cols h3 {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 500;
  color: var(--silver);
  margin: 0 0 1rem;
}
.foot-cols ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.foot-cols a { font-size: 1rem; font-weight: 300; }
.foot-base {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.foot-base .wordmark-s { width: 128px; height: auto; fill: var(--silver-dim); display: block; }
.foot-base small { color: var(--silver-dim); font-size: 0.78rem; font-weight: 300; }
@media (max-width: 560px) {
  .foot-title {
  font-size: clamp(2.3rem, 6.5vw, 4.2rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: #eef3f9;
  margin: 0;
}
.foot-cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- subpages (about, faq) ---------- */
main.page {
  position: relative;
  min-height: 100svh;
  padding: calc(var(--pad) + 84px) var(--pad) calc(var(--pad) * 2);
}
.page .inner { width: min(640px, 100%); margin: 0 auto; }
.page h1 {
  font-size: clamp(1.7rem, 4.5vw, 2.4rem);
  font-weight: 300;
  letter-spacing: 0.01em;
  color: #fff;
  margin: 0 0 1.6rem;
}
.page p { color: var(--silver); margin: 0 0 1.1rem; max-width: 62ch; }
.quiet { color: var(--silver-dim); }

/* FAQ accordions — native details/summary, no JS */
.page details {
  border-top: 1px solid var(--line);
  padding: 1.05rem 0;
}
.page details:last-of-type { border-bottom: 1px solid var(--line); }
.page summary {
  cursor: pointer;
  font-weight: 400;
  color: var(--silver);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}
.page summary::-webkit-details-marker { display: none; }
.page summary::after { content: "+"; color: var(--silver-dim); font-weight: 300; }
.page details[open] summary::after { content: "\2212"; }
.page details p { margin: 0.8rem 0 0.2rem; }

footer.slim {
  border-top: 1px solid var(--line);
  padding: 1.4rem var(--pad);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
footer.slim small, footer.slim a { color: var(--silver-dim); font-size: 0.82rem; font-weight: 300; }
footer.slim a:hover { color: var(--silver); }
footer.slim .legal { display: flex; gap: 1.4rem; }

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