/* stebo.app
   ----------------------------------------------------------------------
   A studio site for an indie lab shipping several small phone apps. The
   apps have deliberately unrelated palettes (Sugar Pop is candy-bright,
   while Luna Drift and Nodefall use different signal-dark palettes), so the
   studio chrome is gallery white and each
   app gets a tile in its own colours. The studio is the room; the apps are
   what hangs in it. Adding an app is one tile plus two colour values.

   No webfonts. A site whose entire argument is "these apps don't track
   you" has no business pulling fonts from a third party that logs the
   request, so type personality comes from weight, tracking and scale.

   Layout note: sections that also carry .wrap use padding-block, never the
   padding shorthand, so they cannot flatten the horizontal gutter.
   -------------------------------------------------------------------- */

:root {
  --ink: #14101b;
  --ink-soft: #4a4155;
  --muted: #8a8194;
  --rule: #e4e0e8;
  --paper: #ffffff;

  /* Sugar Pop, from the app's own icon gradient */
  --sp-deep: #281047;
  --sp-pink: #ff4f9a;

  /* Luna Drift, per its BRAND_SYSTEM.md colour names */
  --ld-navy: #0b1430;
  --ld-ivory: #ede7da;
  --ld-cyan: #4fd6e8;

  /* Nodefall, from its cyan signal rails */
  --nf-cyan: #3bd9ff;

  --measure: 34rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 clamp(1rem, 0.96rem + 0.2vw, 1.0625rem)/1.65
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-synthesis-weight: none;
}

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

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

.display {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  line-height: 1.08;
  margin: 0;
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 1.25rem;
}

p { margin: 0 0 1rem; max-width: var(--measure); }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
ul { padding-left: 1.1rem; margin: 0 0 1rem; max-width: var(--measure); }
li { margin: 0.3rem 0; }

:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 2px; }

/* --- homepage ---------------------------------------------------------
   These roles belong to index.html. Shared document styles below are kept
   separate so the app support and privacy pages retain their layouts.
   -------------------------------------------------------------------- */

.home { --muted: #6d6477; }
.home .wrap { max-width: 76rem; }

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding-block: clamp(2.5rem, 6vw, 5rem);
}

.wordmark {
  font-size: clamp(3.2rem, 1.5rem + 6vw, 6rem);
  letter-spacing: 0.18em;
  margin-right: -0.18em;
}

.hero-intro { max-width: 23rem; }
.positioning {
  font-size: clamp(1.1rem, 0.85rem + 0.6vw, 1.35rem);
  font-weight: 500;
  line-height: 1.45;
  margin: 0;
}
.browse-link {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 0.85rem;
  padding-block: 0.3rem;
  font-size: 0.85rem;
  color: var(--ink-soft);
  text-decoration: none;
}
.browse-link:hover { text-decoration: underline; }
.browse-link span { font-size: 1.15rem; }

/* --- app shelf --------------------------------------------------------- */

.shelf { padding-block: 0 clamp(3rem, 6vw, 5rem); scroll-margin-top: 1.5rem; }
.section-head {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 400;
  margin: 0 0 1.25rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid var(--rule);
}
.grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.app {
  display: flex;
  flex-direction: column;
  min-width: 0;
  text-decoration: none;
  background: var(--bg);
  color: var(--fg);
  transition: transform 0.18s ease;
}
.app:hover, .app:focus-visible { transform: translateY(-3px); }
.app:focus-visible { outline: 3px solid var(--ink); outline-offset: 5px; }

.app-preview {
  aspect-ratio: 2.1;
  overflow: hidden;
  background: var(--bg);
}
.app-preview img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center var(--shot-position, 50%);
}
.app-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.75rem;
  min-width: 0;
  padding: clamp(1.125rem, 2vw, 1.5rem);
}
.app-heading {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
}
.app-heading > div { min-width: 0; }
.app-icon {
  width: 2.75rem;
  height: 2.75rem;
  flex: none;
  border-radius: 22%;
  display: block;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28);
}
.app-cat {
  font-family: var(--mono);
  font-size: 0.65rem;
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 0.3rem;
}
.app-name {
  font-size: clamp(1.4rem, 1rem + 1vw, 1.8rem);
  letter-spacing: 0.04em;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.app-line {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  opacity: 0.9;
  max-width: 44ch;
}
.app-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  width: 100%;
  margin-top: auto;
  padding-top: 0.8rem;
  border-top: 1px solid rgba(255, 255, 255, 0.22);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 500;
}
.app-link span { font-size: 1.25rem; line-height: 1; }
.app:hover .app-link, .app:focus-visible .app-link { text-decoration: underline; text-underline-offset: 4px; }

.app-wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
}
.app-wide .app-body { padding: clamp(1.25rem, 2.5vw, 1.75rem); }
.app-wide .app-cat { margin-bottom: -0.55rem; }
.app-wide .app-name { font-size: clamp(1.8rem, 2.5vw, 2.5rem); }
.app-wide .app-link { margin-top: 0.5rem; }
.app-art {
  display: grid;
  place-items: center;
  padding: 1.5rem;
  background: radial-gradient(ellipse at center, rgba(231, 123, 63, 0.13), transparent 70%);
}
.app-art img {
  display: block;
  width: clamp(7rem, 12vw, 9rem);
  height: auto;
  border-radius: 22%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 20px 50px rgba(0, 0, 0, 0.25);
  transform: rotate(-6deg);
}

/* The original strike-through signature is a compact closing note. */
.principles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem 4rem;
  padding-block: 0 clamp(3rem, 6vw, 5rem);
}
.principles h2 {
  margin: 0;
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  letter-spacing: -0.025em;
  line-height: 1.2;
}
.verdict {
  margin: 1rem 0 0;
  font-size: 0.95rem;
  max-width: 42ch;
  line-height: 1.6;
  color: var(--ink-soft);
}
.manifest {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: flex-start;
  gap: 0.7rem 1.4rem;
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: none;
}
.manifest li {
  position: relative;
  margin: 0;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.manifest li::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  top: 52%;
  height: 2px;
  background: var(--sp-pink);
  transform: scaleX(0);
  transform-origin: left center;
  animation: strike 0.42s cubic-bezier(0.65, 0, 0.35, 1) forwards;
  animation-delay: calc(0.34s + var(--i) * 0.11s);
}
.manifest li:nth-child(even)::after { background: var(--ld-cyan); }
.manifest li:nth-child(3n)::after { background: var(--nf-cyan); }
@keyframes strike { to { transform: scaleX(1); } }

@media (max-width: 46rem) {
  .hero { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .hero-intro { max-width: 26rem; }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .app-wide { grid-template-columns: minmax(0, 1fr); }
  .app-art { grid-row: 1; padding-block: 1.5rem; }
  .app-art img { width: 6rem; }
  .principles { grid-template-columns: minmax(0, 1fr); }
}

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

.foot {
  padding-block: clamp(2.5rem, 7vh, 3.5rem) clamp(2.5rem, 6vh, 3.5rem);
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.foot p { margin: 0 0 0.4rem; }
.copyright { margin-top: 1.25rem; color: var(--muted); font-size: 0.82rem; }

/* --- support / privacy subpages ---------------------------------------- */

.banner { padding-block: clamp(2.5rem, 7vh, 4rem); background: var(--bg); color: var(--fg); }
.banner .wrap { display: flex; align-items: center; gap: clamp(1rem, 3vw, 1.5rem); }
.banner .display { font-size: clamp(1.7rem, 1.2rem + 2.4vw, 3rem); }
.banner-icon {
  width: clamp(3.5rem, 8vw, 5rem);
  height: clamp(3.5rem, 8vw, 5rem);
  border-radius: 22%;
  flex: none;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 6px 18px rgba(0, 0, 0, 0.3);
}
.banner .banner-line { margin: 0.85rem 0 0; opacity: 0.85; }

.doc { padding-block: clamp(2.5rem, 7vh, 3.5rem) 5rem; }
.doc h2 {
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: 0.01em;
  margin: 2.5rem 0 0.6rem;
}
.doc h2:first-of-type { margin-top: 0; }

.updated {
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 2.25rem;
}

.back {
  font-family: var(--mono);
  font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  display: inline-block; margin-bottom: 2.25rem;
}
.back:hover, .back:focus-visible { color: var(--ink); }

/* Screenshots. A scrolling rail rather than a grid, so a fourth shot costs
   nothing and narrow screens get a natural swipe instead of a reflow. */
.shots {
  display: flex;
  gap: 0.75rem;
  margin: 0 0 2.5rem;
  padding-bottom: 0.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.shots img {
  width: 15.5rem;
  height: auto;
  flex: none;
  border-radius: 14px;
  scroll-snap-align: start;
  box-shadow: 0 1px 2px rgba(20, 16, 27, 0.14), 0 10px 28px rgba(20, 16, 27, 0.12);
}
.showcase-intro {
  max-width: var(--measure);
  margin: 0 0 1.5rem;
  color: var(--ink-soft);
}
.shots .shot-card {
  width: 15.5rem;
  flex: none;
  margin: 0;
  scroll-snap-align: start;
}
.shots .shot-card img {
  display: block;
  width: 100%;
}
.shot-card figcaption {
  display: grid;
  gap: 0.2rem;
  padding: 0.85rem 0.15rem 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--muted);
}
.shot-card figcaption strong {
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 700;
}
@media (max-width: 40rem) {
  .shots img,
  .shots .shot-card { width: 11.5rem; }
}

/* Store badges. Apple and Google both require their own artwork used
   unmodified, so these are plain images at their natural aspect ratio with
   only the height constrained. Apple's badge carries its own padding, hence
   the slight size difference to keep the two optically equal. */
.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin: 0 0 2.25rem;
}
.badges a { display: inline-flex; text-decoration: none; }
.badges img { height: 3rem; width: auto; display: block; }
.badges img.badge-play { height: 3.4rem; margin: -0.2rem 0 -0.2rem -0.55rem; }

/* The App Store required a longer, unique title than Play. This reconciles
   the two names for anyone who arrives from either store. */
.aka {
  font-size: 0.9rem;
  color: var(--ink-soft);
  border-left: 2px solid var(--rule);
  padding-left: 0.9rem;
  margin: 0 0 2rem;
}
.aka strong { font-weight: 600; color: var(--ink); }

.contact-card {
  border: 1px solid var(--rule);
  padding: 1.25rem 1.4rem;
  max-width: var(--measure);
  margin: 0 0 1rem;
}
.contact-card p:last-child { margin-bottom: 0; }

@media (prefers-reduced-motion: reduce) {
  .manifest li::after { animation: none; transform: scaleX(1); }
  .app { transition: none; }
  .app:hover, .app:focus-visible { transform: none; }
}