/* ============================================================
   apps.html - the write-up page

   The splash screen is locked to one viewport; this is the
   opposite. It is a document: it scrolls, the measure is held
   near 60 characters, and nothing competes with the reading.
   ============================================================ */

.doc main{ max-width:1080px; margin:0 auto; padding:0 clamp(20px,5vw,40px) }
.brand a{ color:inherit; text-decoration:none }

/* The animated mark sits above the app count, at the right end of the header,
   and the count keeps its place whether or not the mark runs. */
.headmark{ display:flex; flex-direction:column; align-items:flex-end; gap:4px; align-self:center }
.headmark__logo{ display:none }
.headmark__logo.is-live{
  display:block; cursor:pointer;          /* a click or tap writes it again */
  height:clamp(30px, 3.4vw, 40px);
  aspect-ratio:3.77;                      /* the scene's own proportions, padded */
  margin-right:-4px;
}

/* ─────────────── opening ─────────────── */
/* Full-bleed banner. The gingham is busy and dark in places, so a cream veil
   sits over it - enough texture to read as cloth, not so much that the type
   has to fight it. */
.lede{
  background-image:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--color-bg) 58%, transparent),
      color-mix(in srgb, var(--color-bg) 76%, transparent)),
    url('../assets/bannerbg.jpg');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-bottom:2px solid var(--color-divider);
}
.lede__inner{
  max-width:1080px; margin:0 auto;
  padding:clamp(48px,9vh,104px) clamp(20px,5vw,40px) clamp(36px,6vh,72px);
  position:relative;
}

/* Every platform the suite runs on, said ONCE, tucked into the corner of the
   blanket instead of repeated under all eleven apps. Icons are LaserChess's
   device set. */
.lede__platforms{
  display:flex; align-items:flex-end; gap:3px; flex-wrap:wrap;
  margin-top:clamp(20px,3vh,32px);
  opacity:0.72;
}
.lede__platforms img{
  height:28.5px; width:auto; display:block;
}
@media (min-width:760px){
  .lede__platforms{
    position:absolute;
    right:clamp(8px,2vw,16px);
    bottom:clamp(6px,1vh,12px);
    margin-top:0;
  }
}
.lede h1{
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(38px,6.5vw,68px); line-height:1.04; letter-spacing:-0.025em;
  margin:0; max-width:15ch;
  text-shadow:0 1px 0 color-mix(in srgb, var(--color-bg) 70%, transparent);
}
.lede p{
  margin:clamp(14px,2vh,20px) 0 0;
  max-width:58ch; font-size:clamp(16px,1.9vw,19px); line-height:1.6;
  color:var(--color-neutral-800);
}

/* ─────────────── one app ─────────────── */
.app{
  display:grid; align-items:center;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,5vw,72px);
  padding:clamp(36px,6vh,72px) 0;
  border-top:2px solid var(--color-divider);
}
/* alternate the side the picture sits on, so the eye has somewhere to go */
.app:nth-child(even) .app__shot{ order:2 }

.app__shot{ display:flex; justify-content:center }
.app__shot img{
  width:100%; height:auto; max-width:322px;   /* 30% down from 460 */
  box-shadow:var(--shadow-lg);
}
.app--tablet .app__shot img{ max-width:100% }

/* Phones only: crop off the top safe area. iOS reserves 59pt above the app -
   the clock, the signal bars, the island - which is furniture, not the app.
   At 3x on a 1320x2868 shot that is 177px, so the box is cut to 2691 and the
   image is anchored to its bottom, taking the crop off the top. */
.app:not(.app--tablet) .app__shot img{
  aspect-ratio:1320 / 2691;
  object-fit:cover;
  object-position:bottom;
}

.app__name{
  display:flex; align-items:center; gap:14px;
  margin:0 0 var(--space-3);
}
.app__name img{ width:52px; height:52px; border-radius:22.4%; flex:none }
.app__name h2{
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(24px,3vw,32px); line-height:1.1; letter-spacing:-0.02em;
  margin:0;
}
.app__kicker{
  font-size:12px; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--color-accent); margin:0 0 var(--space-2);
}
.app__paras{ display:flex; flex-direction:column; gap:var(--space-2) }

/* The platform line under the badges: half the size of the card's own text,
   because it is the fine print rather than a selling line. */
/* `.app__text p` also matches this line and is the more specific selector,
   so the type has to be named here or the size never lands. */
.app__text p.app__on{
  /* No 52ch measure here: at half the type size that is half the width, and it
     broke the line before the column ran out. The fine print uses the column. */
  margin:10px 0 0; max-width:none;
  font-size:clamp(7.5px,0.85vw,8.5px); line-height:1.5; letter-spacing:0.01em;
  color:var(--color-neutral-600);
}
.app__text p{
  margin:0; max-width:52ch;
  font-size:clamp(15px,1.7vw,17px); line-height:1.7;
  color:var(--color-neutral-800);
}
/* ─────────────── features ─────────────── */
.app__feats{ margin-top:clamp(18px,2.6vh,26px) }
.feats{
  list-style:none; margin:0; padding:0;
  display:flex; flex-direction:column; gap:6px;
  max-width:46ch;
}
.feats li{
  position:relative; padding-left:18px;
  font-size:clamp(14px,1.55vw,15.5px); line-height:1.5;
  color:var(--color-neutral-800);
}
.feats li::before{
  content:''; position:absolute; left:0; top:.62em;
  width:7px; height:2px; background:var(--color-accent);
}

/* ─────────────── get for ─────────────── */
.app__get{ margin-top:clamp(20px,3vh,30px) }
.app__get-label{
  margin:0 0 var(--space-2);
  font-size:12px; letter-spacing:0.09em; text-transform:uppercase;
  color:var(--color-neutral-600);
}
.gets{
  list-style:none; margin:0; padding:0;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.get{ display:flex }
.get svg{
  width:27px; height:27px; display:block;
  color:var(--color-neutral-800);
}

/* Official store artwork, the same three files index.html uses. Never
   hand-draw or recolour these. NOTE: 20px is Ali's call (19 Sep 2026) and is
   HALF Apple's stated 40px minimum for the badge — index.html still draws
   them at 52px, which is where the guideline is honoured. */
.store-badges{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
}
.store-badges a{
  display:inline-flex; line-height:0;
  transition:transform 0.12s ease, opacity 0.12s ease;
}
.store-badges a:hover{ transform:translateY(-2px); opacity:0.9 }
.store-badges img{ height:30px; width:auto; display:block }
.store-badges img.badge-amazon{ border-radius:8px }
/* Placeholders until the Amiga and Windows downloads exist: no lift on hover,
   since there is nothing to click yet. */
.store-badges a.badge-soon{ cursor:default }
.store-badges a.badge-soon:hover{ transform:none; opacity:1 }
@media (prefers-reduced-motion:reduce){
  .store-badges a{ transition:none }
  .store-badges a:hover{ transform:none }
}

/* ─────────────── closing ─────────────── */
.outro{
  border-top:2px solid var(--color-divider);
  padding:clamp(40px,7vh,88px) 0 clamp(48px,9vh,104px);
  max-width:52ch;
}
.outro h2{
  font-family:var(--font-heading); font-weight:700;
  font-size:clamp(26px,3.6vw,38px); letter-spacing:-0.02em; margin:0 0 var(--space-3);
}
.outro p{ margin:0 0 var(--space-6); color:var(--color-neutral-700); font-size:17px; line-height:1.6 }

@media (max-width:760px){
  .app{ grid-template-columns:1fr; gap:24px }
  .app:nth-child(even) .app__shot{ order:0 }
  .app__shot img{ max-width:231px }
}