/* ==========================================================================
   /stars, the write-up for the Stars phone app.

   Loaded after /assets/css/home.css, which supplies everything that matters:
   the paper, Literata, the OKLCH tokens derived from the one terracotta seed,
   the backlink, kicker, rule, prose, footer and the engraved marks. This file
   only adds what a project write-up has and the other paper pages do not: a
   lede, section heads, one prominent link out, phone screenshots and a short
   list. No colour is written here; every one is a home.css token.
   ========================================================================== */

/* A long page: start at the top, as /about/ and /writing/ do. */
.page-stars { align-content: start; padding-block: clamp(2rem, 6vh, 4.5rem); }
.page-stars .sheet { align-content: start; }

/* A page title under the front page's name, the same size /projects/ uses. */
.page-stars .name { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem); }

.page-stars .prose { max-width: 32rem; }

/* The opening two paragraphs, a step up from the body. */
.page-stars .lede {
  font-size: 1.08em;
  line-height: 1.58;
}

.page-stars .prose h2 {
  margin-block: 1.9em .45em;
  font-size: 1.2em;
  font-weight: 560;
  line-height: 1.2;
  letter-spacing: -0.008em;
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   The way out to the app. A plain hairline box on the darker paper, with the
   link set large. Hierarchy from size and weight, as everywhere else.
   -------------------------------------------------------------------------- */

.page-stars .open {
  margin-block: 1.5em 1.2em;
  padding: .85rem 1.1rem 1rem;
  background: var(--paper-2);
  border: 1px solid var(--rule);
  border-radius: 3px;
}

/* Two classes deep so it outranks home.css's resting-underline exception,
   `a:not(:is(:hover, :focus))`, and keeps the accent at rest. */
.page-stars .open-link {
  display: inline-block;
  min-height: 44px;
  font-size: clamp(1.4rem, 1.2rem + 1vw, 1.75rem);
  font-weight: 520;
  line-height: 1.6;
  letter-spacing: -0.01em;
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
  text-decoration-color: var(--accent);
}
.page-stars .open-link:is(:hover, :focus-visible) { color: var(--accent); }

.page-stars .open-note {
  margin-block: .2em 0;
  color: var(--ink-soft);
  font-size: .9em;
  line-height: 1.5;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Screenshots. Real captures of the live app at phone size, shown in pairs.
   Two columns at every width: on a 320px phone each one is still about
   135px wide, which is enough to see the difference the pair exists to show.
   -------------------------------------------------------------------------- */

.page-stars .shots {
  margin-block: 1.6em 1.9em;
}

.page-stars .pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, .4rem + 1.5vw, 1.4rem);
  max-width: 30rem;
}

.page-stars .shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 14px;
}

/* The label under each phone, in the small caps the kicker uses. */
.page-stars .shot figcaption {
  margin-block-start: .5rem;
  font-size: var(--fs-meta);
  font-variant-caps: all-small-caps;
  letter-spacing: .06em;
  color: var(--ink-soft);
}

.page-stars .shots > figcaption {
  margin-block-start: .7rem;
  max-width: 30rem;
  color: var(--ink-faint);
  font-size: .82em;
  line-height: 1.45;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   How it's built: a short list for the curious, a size down from the prose.
   -------------------------------------------------------------------------- */

.page-stars .built {
  margin: .4em 0 0;
  padding-inline-start: 1.15em;
  font-size: .94em;
  color: var(--ink-soft);
}
.page-stars .built li {
  margin-block-end: .4em;
  line-height: 1.55;
  text-wrap: pretty;
}
.page-stars .built li::marker { color: var(--ink-faint); }

/* The footer link wants the same 44px target the backlink has. */
.page-stars .foot a { display: inline-block; min-height: 44px; line-height: 44px; }
@media (max-width: 34rem) {
  .page-stars .foot .note { margin-block-start: 0; }
}

/* --------------------------------------------------------------------------
   Wide screens: home.css opens a rail beside the header and widens the sheet.
   The reading column stays at 32rem, and the rail holds this page's own mark
   at rest, drawn exactly as /projects/ draws its own.
   -------------------------------------------------------------------------- */

@media (min-width: 62rem) {
  .page-stars .rule, .page-stars .prose, .page-stars .foot { max-width: 32rem; }

  /* The sheet shrink-wraps to the 32rem column here, so the rail sits inside
     that column rather than beside it. Hang the mark off the column's right
     edge, level with the backlink, instead of leaving it floating mid-header. */
  .page-stars .hedbox {
    display: flex;
    justify-content: flex-end;
    height: auto;
  }

  .page-stars .rail-mark {
    display: block;
    margin-block-start: .35rem;
    width: 46px;
    height: 46px;
    color: var(--ink-faint);
    --sw: 3.5;
  }
}

@media (forced-colors: active) {
  .page-stars .open { border-color: CanvasText; }
}