/* JOURNAL — mobile and tablet (below 1024 px). Owner: V3-JOURNAL-M (v3, 30 Sep).
   V3 "less phony, less info": ONE phone (the real journal list), then three very short points, each with a small mark
   (a drawn note sheet · the five faces taking turns · Mira with the lock, her only appearance here) (Notes · a face · only on your iPhone), and a link to /journal. About 40 words.
   A quiet section: a soft sky wash into white (Pro below is white). Phones: stacked and centred.
   Tablets (768+): the phone on the left, title + points on the right.
   §14/§15: no wrapper panels, art never boxed, depth as a whisper; section padding only from --section-y. */

#journal .v-mobile {
  position: relative; overflow: hidden;
  padding-top: var(--section-y); padding-bottom: var(--section-y);
  background: linear-gradient(180deg, var(--sky-0) 0%, var(--tint) 34%, #fff 78%);
}
#journal .v-mobile .wrap {
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

/* ---- the title ---- */
#journal .v-mobile .jm-head { text-align: center; }
/* RT-LOOP-M: the title uses the page's one .h2 scale (no local size), like every other section */
#journal .v-mobile .jm-sub {
  margin-top: 12px;
  font-size: clamp(17px, 4.6vw, 19px); line-height: 1.5; font-weight: 350; color: var(--body);
}

/* ---- the one phone, placed on the sky: soft light behind, a contact shadow under ---- */
#journal .v-mobile .jm-stage {
  container-type: inline-size;
  position: relative;
  max-width: 380px;
  margin: 26px auto 0;
}
#journal .v-mobile .jm-phone { --w: 74cqw; position: relative; z-index: 1; margin: 0 auto; }
#journal .v-mobile .jm-light {
  position: absolute; z-index: 0; pointer-events: none;
  left: -14cqw; right: -14cqw; top: 6cqw; bottom: 10cqw;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .95), rgba(255, 255, 255, 0));
}
#journal .v-mobile .jm-ground {
  position: absolute; z-index: 0; pointer-events: none; border-radius: 50%;
  left: 18cqw; right: 18cqw; bottom: -4cqw; height: 8cqw;
  background: radial-gradient(closest-side, rgba(15, 26, 43, .22), rgba(15, 26, 43, .06) 62%, rgba(15, 26, 43, 0));
}

/* ---- three short points: art stands beside each line, no boxes ---- */
#journal .v-mobile .jm-points {
  list-style: none; margin: 36px auto 0; padding: 0;
  max-width: 360px;
  display: grid; gap: 20px;
}
#journal .v-mobile .jm-pt { display: flex; align-items: center; gap: 16px; }
#journal .v-mobile .jm-art {
  position: relative; flex: none;
  width: 52px; height: 52px;
  display: grid; place-items: center;
}
#journal .v-mobile .jm-art img { width: 100%; filter: drop-shadow(0 4px 6px rgba(15, 26, 43, .14)); }
#journal .v-mobile .jm-pt p {
  margin: 0;
  font-size: 17px; line-height: 1.45; font-weight: 350; color: var(--body); text-wrap: pretty;
}
/* Notes: a little note sheet with a checklist, drawn like the app's line icons (Mira appears once, by the lock) */
#journal .v-mobile .jm-note svg { width: 50px; height: 50px; overflow: visible; filter: drop-shadow(0 4px 6px rgba(15, 26, 43, .12)); }
#journal .v-mobile .jm-note .jm-sheet { fill: #fff; stroke: var(--edge-strong, #C9D1DB); stroke-width: 1.2; }
#journal .v-mobile .jm-note .jm-box-on { fill: var(--accent); }
#journal .v-mobile .jm-note .jm-box-off { fill: #fff; stroke: var(--secondary); stroke-width: 1.4; }
#journal .v-mobile .jm-note .jm-tick { fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
#journal .v-mobile .jm-note .jm-line { fill: none; stroke: var(--ink); stroke-width: 2.2; stroke-linecap: round; }
#journal .v-mobile .jm-note .jm-line-soft { stroke: var(--line); }
#journal .v-mobile .jm-pt p > span { display: inline-block; }
#journal .v-mobile .jm-pt b { color: var(--ink); font-weight: 500; }
#journal .v-mobile .jm-pt .pro-mark { margin-left: 2px; }

/* the faces take turns, one at a time (js); without js or with reduced motion, Great stays */
#journal .v-mobile .jm-faces img {
  grid-area: 1 / 1;
  width: 44px;
  opacity: 0; transform: scale(.7) rotate(-8deg);
  transition: opacity .35s var(--ease), transform .5s var(--spring);
}
#journal .v-mobile .jm-faces img.is-on { opacity: 1; transform: none; }

/* ---- the link to the journal page ---- */
#journal .v-mobile .jm-more { margin-top: 28px; text-align: center; }
#journal .v-mobile .jm-more a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
  font-size: 16px; font-weight: 500; color: var(--accent-edge); text-decoration: none;
  touch-action: manipulation; border-radius: 10px;
  transition: transform .15s var(--ease);
}
#journal .v-mobile .jm-more a:active { transform: scale(.97); }
#journal .v-mobile .jm-more a span { display: inline-block; margin-left: 6px; transition: transform .2s var(--ease); }
@media (hover: hover) { #journal .v-mobile .jm-more a:hover span { transform: translateX(3px); } }

@media (max-width: 359.98px) {
  #journal .v-mobile .jm-phone { --w: 78cqw; }
  #journal .v-mobile .jm-pt { gap: 12px; }
  #journal .v-mobile .jm-art { width: 44px; height: 44px; }
  #journal .v-mobile .jm-faces img { width: 38px; }
  #journal .v-mobile .jm-note svg { width: 42px; height: 42px; }
  #journal .v-mobile .jm-pt p { font-size: 16px; }
}

/* ---- tablets: the phone on the left, title + points on the right ---- */
@media (min-width: 768px) {
  #journal .v-mobile .jm-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "stage ." "stage head" "stage points" "stage more" "stage .";
    grid-template-rows: 1fr auto auto auto 1fr;
    column-gap: clamp(32px, 5vw, 64px);
    max-width: 900px;
  }
  #journal .v-mobile .jm-head { grid-area: head; text-align: left; }
  #journal .v-mobile .jm-stage { grid-area: stage; margin: 0 auto 16px; width: 100%; max-width: 400px; }
  #journal .v-mobile .jm-phone { --w: 78cqw; }
  #journal .v-mobile .jm-points { grid-area: points; margin: 36px 0 0; max-width: 380px; gap: 22px; }
  #journal .v-mobile .jm-more { grid-area: more; text-align: left; margin-top: 24px; }
  #journal .v-mobile .jm-more a { margin-left: -8px; }
}

/* ---- RT-LOOP-M · ONE TYPE SCALE (founder 30 Sep; the hero is the reference): h2 30/1.1/-0.025em (28 under 360,
   40 on tablets) · lede 17/1.5/350 (19 on tablets) · labels 14/600 accent · in-section titles 22 · body 16–17 ---- */
#journal .v-mobile .jm-title { font-size: 30px; line-height: 1.1; letter-spacing: -0.025em; font-weight: 500; }
#journal .v-mobile .jm-sub { font-size: 17px; line-height: 1.5; font-weight: 350; }
@media (max-width: 359.98px) { #journal .v-mobile .jm-title { font-size: 28px; } }
@media (min-width: 768px) { #journal .v-mobile .jm-title { font-size: 40px; } #journal .v-mobile .jm-sub { font-size: 19px; } }
@media (max-width: 359.98px) { #journal .v-mobile .jm-pt p { font-size: 16px; } }

/* ---- RT-LOOP-M · cute pass: each mark stands on its own soft pastel spot (flat, round, never a box); the phone a touch
   smaller so the section stays near 1.5 screens ---- */
#journal .v-mobile .jm-phone { --w: 68cqw; }
#journal .v-mobile .jm-points { margin-top: 30px; gap: 16px; }
#journal .v-mobile .jm-art::before {
  content: ""; position: absolute; z-index: -1; inset: -6px; border-radius: 50%;
  background: var(--spot, var(--tint));
}
#journal .v-mobile .jm-art { isolation: isolate; }
#journal .v-mobile .jm-pt:nth-child(1) .jm-art { --spot: var(--pale-sun); }
#journal .v-mobile .jm-pt:nth-child(2) .jm-art { --spot: var(--pale-mint); }
#journal .v-mobile .jm-pt:nth-child(3) .jm-art { --spot: var(--tint); }
#journal .v-mobile .jm-more { margin-top: 20px; }
@media (max-width: 359.98px) { #journal .v-mobile .jm-phone { --w: 70cqw; } }
@media (min-width: 768px) { #journal .v-mobile .jm-phone { --w: 70cqw; } }