/* 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,
   Luna Drift is deep navy), 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;

  --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; }

/* --- hero ------------------------------------------------------------- */

.hero { padding-block: clamp(3.5rem, 11vh, 7rem) clamp(3rem, 8vh, 5rem); }

.wordmark {
  font-size: clamp(3.2rem, 2rem + 8vw, 7rem);
  letter-spacing: 0.2em;
  margin: 0 0 1.5rem;
  /* The tracking eats the trailing space; pull it back so the mark sits
     flush with everything below it. */
  margin-right: -0.2em;
}

.positioning {
  font-size: clamp(1.15rem, 1rem + 1.1vw, 1.75rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -0.005em;
  max-width: 26ch;
  margin: 0;
}
.positioning em { font-style: normal; color: var(--muted); }

/* --- the manifest ------------------------------------------------------
   The signature. Every app here is defined as much by what it refuses as
   by what it does, so the page strikes the refusals out on arrival. The
   two accent colours are the two apps' own, signing the list jointly.
   -------------------------------------------------------------------- */

.manifest {
  list-style: none;
  padding: 0;
  margin: clamp(2.5rem, 7vh, 3.75rem) 0 0;
  max-width: none;
}

.manifest li {
  position: relative;
  display: inline-block;
  margin: 0 1.4rem 0.3rem 0;
  font-weight: 300;
  font-size: clamp(1.4rem, 1rem + 2.4vw, 2.75rem);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
}

.manifest li::after {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.05em;
  top: 52%;
  height: 3px;
  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); }

@keyframes strike { to { transform: scaleX(1); } }

.verdict {
  margin: clamp(2.25rem, 6vh, 3rem) 0 0;
  font-size: clamp(1.05rem, 1rem + 0.4vw, 1.25rem);
  max-width: 32rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

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

.shelf { padding-block: clamp(1rem, 3vh, 2rem) clamp(3rem, 8vh, 4.5rem); }

.section-head {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  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: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.app {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  min-height: 21rem;
  text-decoration: none;
  background: var(--bg);
  color: var(--fg);
  transition: transform 0.18s ease;
}
.app:hover, .app:focus-visible { transform: translateY(-3px); }

/* The Sugar Pop icon shares its card's gradient, so a hairline ring keeps
   the icon reading as an object rather than dissolving into the panel. */
.app-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 22%;
  display: block;
  margin-bottom: 0.35rem;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 6px 18px rgba(0, 0, 0, 0.28);
}

.app-cat {
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0;
}

.app-name { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.2rem); }

.app-line {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.55;
  opacity: 0.88;
  max-width: 28ch;
}

.app-link {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  border-bottom: 1px solid;
  align-self: start;
  padding-bottom: 2px;
}

/* --- 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);
}
@media (max-width: 40rem) { .shots img { 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; }
}