/* =========================================================================
   THE PROBLEM and LOCK AND UNLOCK (the approved F2Problem and F4Lock boards)
   ========================================================================= */

/* =========================================================================
   THE PROBLEM: one Screen Time card on stage for four beats
     1  the bars fill: "Nearly four hours on your phone." / "Then you stand
        for salah."
     2  "The scroll follows you into salah." Feed cards pile onto the five
        prayers.
     3  "Blocking clears five windows." Padlocks lock the five windows.
     4  "It does not touch the habit." Every other hour turns accent.
   The card is its own light surface, so its colours are fixed at every
   point of the sky; the headlines take the engine's ink and accent.
   The base rules are the static page (no JS, reduced motion, and the
   static mode): the first headline, the card at beat 4, then the other
   two statements. .runway--problem.is-live (site.js
   initProblem) pins it where site.js PROBLEM_QUERY holds, and there the
   statements take turns in one spot over the card.
   Everything on a wide screen is laid out in --s, 1px at the 1440x900
   design and less where the screen is narrower (or, pinned, shorter).
   ========================================================================= */
.runway--problem {
  --s: min(1px, calc((100vw - 96px) / 1200));
  --pb-ink: #4E2C16;
  --pb-muted: #7A5F4C;
  --pb-bar: #CFA57C;   /* site.js PB_BAR */
  --pb-hot: #AD5B0C;   /* site.js PB_HOT */
  --pb-base: #E6D2B8;
}
/* the runway only has length while the pinned sequence runs */
html.gsap .runway.runway--problem { height: auto; }

.problem-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(56 * var(--s));
  padding: calc(72px + 68 * var(--s)) 24px calc(96 * var(--s));
  text-align: center;
}
/* static: the first statement over the card, the other two under it */
.pb-heads { display: contents; }
.pb-say1 { order: 1; }
.pb-card { order: 2; }
.pb-say2 { order: 3; }
.pb-say3 { order: 4; margin-top: calc(-32 * var(--s)); }
.pb-steps { order: 5; }

/* Enhanced stories keep one message above the card. All messages share
   a grid cell, so their tallest wrapping reserves a stable headline slot. */
.runway--problem.is-live .pb-heads {
  display: grid;
  order: 1;
  align-items: start;
  justify-items: center;
  width: min(100%, calc(1200 * var(--s)));
}
.runway--problem.is-live .pb-say { display: contents; }
.runway--problem.is-live .pb-line { grid-area: 1 / 1; max-width: 100%; }

/* two-beat headlines: the statement in ink, its payoff in the accent */
.pb-say {
  margin: 0;
  max-width: calc(1200 * var(--s));
  font-family: var(--display);
  font-weight: 400;
  font-size: calc(60 * var(--s));
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--ink);
}
.pb-line { display: block; }
.pb-accent { color: var(--accent); }

/* ---- the card ---- */
.pb-card {
  position: relative;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: calc(1200 * var(--s));
  height: calc(440 * var(--s));
  margin: 0;
  border-radius: calc(32 * var(--s));
  background: #FFF9EF;
  box-shadow: 0 calc(40 * var(--s)) calc(80 * var(--s)) calc(-40 * var(--s)) rgba(110, 50, 15, 0.5);
  color: var(--pb-ink);
  text-align: left;
}
.pb-card__head {
  position: absolute;
  left: calc(56 * var(--s));
  right: calc(56 * var(--s));
  /* the figure's 1.08 line box, so its glyphs sit where the board's 1.0 box has them */
  top: calc(45.6 * var(--s));
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(20 * var(--s));
}
.pb-total {
  display: flex;
  align-items: baseline;
  gap: calc(20 * var(--s));
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
}
.pb-total__say {
  font-size: calc(34 * var(--s));
  line-height: 1.12;
  white-space: nowrap;
}
.pb-src {
  position: absolute;
  right: 0;
  /* the board's source sits at 78 in the card, a little above the figure's baseline */
  top: calc(32.4 * var(--s));
  margin: 0;
  font-family: var(--sans);
  font-size: max(12px, calc(14 * var(--s)));
  font-weight: 600;
  line-height: 1.2;
  color: var(--pb-muted);
  white-space: nowrap;
}
.pb-card .vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* The figure: its glyphs are generated content from data-d, so the text a
   crawler reads is only the hidden "3h 46m" and its sentence. Titan One has
   no tabular figures, so each digit owns a fixed cell and the number never
   changes width while site.js rolls it like an odometer. */
.pb-card .num {
  font-size: calc(60 * var(--s));
  line-height: 1.08;
  letter-spacing: 0;
  white-space: nowrap;
}
.pb-card .od {
  position: relative;
  display: inline-block;
  width: 0.74em;
  text-align: center;
}
.pb-card .od::before,
.pb-card .u::before,
.pb-card .od__cell::before { content: attr(data-d); }
.pb-card .od--h { text-align: right; }
/* Align minute ink to the inner edges while keeping the full reel windows. */
.pb-card .u + .od { text-align: right; }
.pb-card .od + .od { text-align: left; }
.pb-card .u { margin-left: 0.01em; }
.pb-card .u[data-d="h"] { margin-right: 0.12em; }
/* the reels (site.js) sit over the static digits, which stay in the flow,
   hidden, so the baseline and the width never move; the window is cut to
   the figures' own height (Titan One digits sit between 0.215em and 0.947em
   of the 1.08em line) and softened at the edges */
.pb-card .num.is-reel .od::before { visibility: hidden; }
.pb-card .od__win {
  position: absolute;
  top: 0.13em;
  bottom: 0.05em;
  left: 0;
  right: 0;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(transparent 0, #000 10%, #000 92%, transparent 100%);
  mask-image: linear-gradient(transparent 0, #000 10%, #000 92%, transparent 100%);
}
.pb-card .od__reel { position: relative; top: -0.05em; display: block; will-change: transform; }
.pb-card .od__cell { display: block; height: 0.92em; line-height: 0.92; }

/* ---- the day: 18 waking hours left to right, the prayers marked ---- */
.pb-chart {
  position: absolute;
  left: calc(56 * var(--s));
  top: calc(150 * var(--s));
  width: calc(1088 * var(--s));
  height: calc(244 * var(--s));
}
.pb-base {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(242 * var(--s));
  height: max(1px, calc(2 * var(--s)));
  background: var(--pb-base);
}
/* every mark sits on its hour's column (--i of 18) */
.pb-bar,
.pb-stk,
.pb-win,
.pb-feed { --x: calc((var(--i) + 0.5) / 18 * 100%); position: absolute; }
.pb-bar {
  z-index: 2;
  left: calc(var(--x) - 14 * var(--s));
  bottom: calc(2 * var(--s));
  width: calc(28 * var(--s));
  height: calc(var(--f, 1) * var(--h) * 170 * var(--s));
  border-radius: calc(8 * var(--s)) calc(8 * var(--s)) calc(3 * var(--s)) calc(3 * var(--s));
  background: var(--pb-hot);
}
.pb-stk {
  z-index: 6;
  left: calc(var(--x) - 24 * var(--s));
  top: 0;
  width: calc(48 * var(--s));
  height: calc(48 * var(--s));
  max-width: none;
  object-fit: contain;
}
/* a locked prayer window */
.pb-win {
  z-index: 5;
  left: calc(var(--x) - 26 * var(--s));
  top: calc(58 * var(--s));
  width: calc(52 * var(--s));
  height: calc(192 * var(--s));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #E3A23B;
  border-radius: calc(16 * var(--s));
  background: #FFF4DF;
  box-shadow: 0 0 0 calc(6 * var(--s)) rgba(227, 162, 59, 0.16);
}
.pb-win img {
  display: block;
  width: calc(34 * var(--s));
  height: auto;
  max-width: none;
}

/* ---- the feed that piles onto each prayer (beat 2): a post and a reel on
   a wide screen, a notification pill on a phone. Hidden in the finished
   card; site.js brings each one in and clears it again. ---- */
.pb-feed { z-index: 4; left: var(--x); top: 0; width: 0; height: 0; }
.pb-feed > i { position: absolute; box-sizing: border-box; visibility: hidden; opacity: 0; }
.pb-post {
  left: calc(-64.25 * var(--s));
  top: calc(67 * var(--s));
  width: calc(112.5 * var(--s));
  height: calc(90 * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(5.25 * var(--s));
  padding: calc(7.5 * var(--s));
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: calc(12 * var(--s));
  background: #FFFBF5;
  box-shadow: 0 calc(18 * var(--s)) calc(34 * var(--s)) calc(-12 * var(--s)) rgba(90, 40, 10, 0.5);
  rotate: var(--r1);
}
.pb-post__row { display: flex; align-items: center; gap: calc(5.25 * var(--s)); flex: 0 0 auto; }
.pb-post__av { width: calc(13.5 * var(--s)); height: calc(13.5 * var(--s)); border-radius: 50%; background: linear-gradient(135deg, #F0B27A, #C8733A); }
.pb-post__name { width: calc(46.5 * var(--s)); height: calc(5.25 * var(--s)); border-radius: 3px; background: #E3CDB2; }
.pb-post__media { flex: 1 1 auto; border-radius: calc(7.5 * var(--s)); background: linear-gradient(135deg, #F7CC96 0%, #E3A066 55%, #C9743F 100%); }
.pb-post__foot { gap: calc(6 * var(--s)); }
.pb-ic { width: calc(12 * var(--s)); height: calc(12 * var(--s)); background: center / contain no-repeat; }
.pb-ic--heart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 19.5s-7-4.3-7-9.6A3.9 3.9 0 0 1 12 7.6a3.9 3.9 0 0 1 7 2.3c0 5.3-7 9.6-7 9.6z' fill='none' stroke='%238A5A36' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pb-ic--chat { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 11.5a7 6.2 0 1 1 3.2 5.2L4.8 18l1-3.1A6 6 0 0 1 5 11.5z' fill='none' stroke='%238A5A36' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.pb-post__line { width: calc(30 * var(--s)); height: calc(4.5 * var(--s)); border-radius: calc(2.25 * var(--s)); background: #EAD9C4; }
.pb-reel {
  left: calc(-3 * var(--s));
  top: calc(91 * var(--s));
  width: calc(66 * var(--s));
  height: calc(102 * var(--s));
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.8);
  border-radius: calc(12 * var(--s));
  background: linear-gradient(165deg, #A0653B 0%, #5E361E 68%, #3E2415 100%);
  box-shadow: 0 calc(18 * var(--s)) calc(34 * var(--s)) calc(-12 * var(--s)) rgba(90, 40, 10, 0.5);
  rotate: var(--r2);
}
.pb-reel__play {
  position: absolute;
  left: calc(50% - 10.5 * var(--s));
  top: calc(30 * var(--s));
  width: calc(21 * var(--s));
  height: calc(21 * var(--s));
  background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 5.5v13l11-6.5z' fill='%23FFF3E2' stroke='%23FFF3E2' stroke-width='1.5' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.pb-reel__cap {
  position: absolute;
  left: calc(7.5 * var(--s));
  bottom: calc(9 * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(4.5 * var(--s));
}
.pb-reel__who { display: flex; align-items: center; gap: calc(3.75 * var(--s)); }
.pb-reel__dot { width: calc(9 * var(--s)); height: calc(9 * var(--s)); border-radius: 50%; background: #F0B27A; }
.pb-reel__name { width: calc(25.5 * var(--s)); height: calc(3.75 * var(--s)); border-radius: calc(2.25 * var(--s)); background: rgba(255, 243, 226, 0.75); }
.pb-reel__line { width: calc(39 * var(--s)); height: calc(3.75 * var(--s)); border-radius: calc(2.25 * var(--s)); background: rgba(255, 243, 226, 0.5); }
.pb-pill { display: none; }

/* ---- the step control: four bars under the pinned card that show the
   beat and jump to it (site.js unhides it while the runway pins) ---- */
.pb-steps { display: flex; justify-content: center; gap: 4px; }
.pb-steps[hidden] { display: none; }
.pb-step {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.pb-step::before {
  content: "";
  display: block;
  width: 40px;
  height: 6px;
  border-radius: 3px;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
  transition: background-color 0.25s ease;
}
.pb-step[aria-current="step"]::before { background: var(--ink); }
.pb-step:hover::before { background: color-mix(in srgb, var(--ink) 60%, transparent); }
.pb-step[aria-current="step"]:hover::before { background: var(--ink); }
.pb-step:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 10px; }

/* ---- the phone board: the day runs top to bottom ---- */
@media (max-width: 700px) {
  .problem-stage { gap: 32px; padding: 96px 24px 80px; }
  .runway--problem.is-live .pb-heads { width: 100%; }
  .pb-say3 { margin-top: -16px; }
  .pb-say {
    max-width: 100%;
    font-size: min(36px, 9.2vw);
    letter-spacing: -0.02em;
  }
  .pb-card {
    width: 100%;
    max-width: 420px;
    height: 494px;
    border-radius: 24px;
    box-shadow: 0 30px 60px -30px rgba(110, 50, 15, 0.5);
  }
  /* the figure, the sentence under it, the source at the right */
  .pb-card__head { left: 20px; right: 20px; top: 20.6px; display: block; }
  .pb-total { flex-direction: column; align-items: flex-start; gap: 6.5px; }
  .pb-card .num { font-size: 36px; }
  .pb-total__say { font-size: 22px; }
  .pb-src { top: 15.4px; font-size: 13px; }
  /* the chart's rows share its height: --r is one hour's row (20px on the
     board), so a shorter pinned card packs them tighter */
  .pb-chart {
    left: 0;
    right: 0;
    top: 112px;
    bottom: 22px;
    width: auto;
    height: auto;
    container-type: size;
    --r: calc(100cqh / 18);
  }
  .pb-bar,
  .pb-stk,
  .pb-win,
  .pb-feed { --y: calc((var(--i) + 0.5) * var(--r)); }
  .pb-base { left: 70px; top: 0; bottom: 0; right: auto; width: 2px; height: auto; }
  .pb-bar {
    --bh: min(11px, calc(var(--r) * 0.55));
    left: 72px;
    top: calc(var(--y) - var(--bh) / 2);
    bottom: auto;
    width: calc(var(--f, 1) * var(--h) * (100cqw - 92px));
    height: var(--bh);
    border-radius: 3px 6px 6px 3px;
  }
  .pb-stk {
    --sz: min(36px, calc(var(--r) * 1.8));
    left: calc(38px - var(--sz) / 2);
    top: calc(var(--y) - var(--sz) / 2);
    width: var(--sz);
    height: var(--sz);
  }
  .pb-win {
    --wh: min(28px, calc(var(--r) * 1.4));
    left: 64px;
    right: 20px;
    top: calc(var(--y) - var(--wh) / 2);
    width: auto;
    height: var(--wh);
    border-radius: 12px;
    box-shadow: 0 0 0 4px rgba(227, 162, 59, 0.16);
  }
  .pb-win img { width: auto; height: calc(var(--wh) * 0.75); }
  .pb-feed { left: 0; top: var(--y); }
  .pb-post,
  .pb-reel { display: none; }
  /* the notification: sized in em of one row, 16px on the board */
  .pb-pill {
    display: flex;
    align-items: center;
    gap: 0.4125em;
    left: var(--px, 102.7px);
    top: -1.155em;
    width: 8.6625em;
    height: 2.31em;
    padding: 0 0.5775em 0 0.4125em;
    font-size: min(16px, calc(var(--r) * 0.8));
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 1.155em;
    background: #FFFBF5;
    box-shadow: 0 18px 34px -12px rgba(90, 40, 10, 0.5);
    rotate: var(--r3);
  }
  .pb-pill__av { flex: 0 0 auto; width: 1.485em; height: 1.485em; border-radius: 50%; background: linear-gradient(135deg, #E9A56A, #B8612A); }
  .pb-pill__txt { display: flex; flex-direction: column; gap: 0.29em; }
  .pb-pill__l1 { width: 4.29em; height: 0.33em; border-radius: 0.165em; background: #D9BFA0; }
  .pb-pill__l2 { width: 2.97em; height: 0.29em; border-radius: 0.165em; background: #EAD9C4; }
}

/* ---- pinned (site.js PROBLEM_QUERY): one frame for the whole runway ----
   Wide screens: the statements take turns in one spot at the top, the card
   under them, the steps under the card, all centred under the nav. */
@media (min-width: 701px) and (min-height: 621px) {
  html.gsap .runway.runway--problem.is-live { height: 400vh; }
  .runway--problem.is-live {
    --s: min(1px, calc((100vw - 96px) / 1200), calc((100svh - 84px) / 760));
  }
  .runway--problem.is-live .problem-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    box-sizing: border-box;
    overflow: hidden;
    justify-content: center;
    gap: 0;
    padding: calc(72px + 12 * var(--s)) 0 0;
  }
  .runway--problem.is-live .pb-heads {
    display: grid;
    align-items: start;
    justify-items: center;
    width: calc(1200 * var(--s));
    min-height: calc(1.04 * 60 * var(--s));
  }
  .runway--problem.is-live .pb-say { grid-area: 1 / 1; margin: 0; }
  .runway--problem.is-live .pb-card { margin-top: calc(56 * var(--s)); }
  .runway--problem.is-live .pb-steps { margin-top: calc(43 * var(--s)); }
}
/* Tall phones: the same frame, the day top to bottom. The card takes what
   the statements leave, so its rows pack tighter on a shorter phone. */
@media (max-width: 700px) and (min-height: 540px) {
  html.gsap .runway.runway--problem.is-live { height: calc(100vh + 2400px); height: calc(100svh + 2400px); }
  .runway--problem.is-live .problem-stage {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    box-sizing: border-box;
    overflow: hidden;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    padding: calc(60px + clamp(12px, 4.3svh, 36px)) 24px clamp(12px, 2.4svh, 20px);
  }
  .runway--problem.is-live .pb-heads { display: grid; align-items: start; justify-items: center; }
  .runway--problem.is-live .pb-say {
    grid-area: 1 / 1;
    margin: 0;
    font-size: min(36px, 9.2vw, max(26px, 4.27svh));
  }
  .runway--problem.is-live .pb-card {
    align-self: center;
    flex: 0 1 494px;
    height: auto;
    min-height: 300px;
    margin-top: clamp(16px, 3.8svh, 32px);
  }
  .runway--problem.is-live .pb-steps { flex: 0 0 auto; margin-top: clamp(4px, 1.9svh, 16px); }
}
/* short pinned phones keep every pixel for the card */
@media (max-width: 700px) and (min-height: 540px) and (max-height: 699px) {
  .runway--problem.is-live .pb-steps { display: none; }
}

/* =========================================================================
   LOCK AND UNLOCK: three steps, left to right
   "Time for salah." / "Apps can wait.", then the lock screen phone with its
   padlock ("Your apps lock."), the Isha sticker ("You pray."), and the
   Proof camera ("Scan to unlock." / "Or use Honor Mode."). Phones read
   the three beats in a natural scrolling story with full native artwork.
   site.js links each layout's artwork and captions to scrolling.
   Wide screens scale the native artwork in --s while type stays readable.
   ========================================================================= */
.lock-panel {
  --F: clamp(32px, min(6.67vh, 4.17vw), 60px);
  --F: clamp(32px, min(6.67svh, 4.17vw), 60px);
  --label-font: clamp(20px, 2.36vw, 34px);
  --caption-h: calc(1.12 * var(--label-font) + 52.8px);
  /* Static captions reserve two body lines. The 655.73-unit art budget
     includes the phone, scaled padding and both gaps below the intro. */
  --s: min(1px, calc((100vw - 64px) / 1200), calc((100svh - 72px - 2.08 * var(--F) - var(--caption-h)) / 655.73));
  box-sizing: border-box;
  min-height: 100vh;
  min-height: 100svh;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: calc(72px + 24 * var(--s)) 24px calc(66 * var(--s));
  text-align: center;
}
.lk-head {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--F);
  line-height: 1.04;
  letter-spacing: 0;
  text-wrap: balance;
  color: var(--ink);
}
.lk-line { display: block; }
.lk-accent { color: inherit; }
html.gsap .lock-panel {
  --caption-h: max(calc(2.24 * var(--label-font)), calc(1.12 * var(--label-font) + 30.4px));
  /* The first two-line heading and the Honor caption share one row. */
  --s: min(1px, calc((100vw - 64px) / 1200), calc((100svh - 72px - var(--caption-h)) / 599.73));
}
html.gsap .lk-head,
html.gsap .lk-copy--detail {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.lk-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: min(1200px, 100%);
  margin: calc(56 * var(--s)) 0 0;
  padding: 0;
  list-style: none;
}
html.gsap .lk-steps { margin-top: 0; }
.lk-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
}
.lk-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-height: var(--caption-h);
  /* The padlock reaches above its phone, so leave its caption clear. */
  margin: 0 0 calc(48 * var(--s));
}
.lk-art {
  order: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  /* the phones' height, so the prayer sits level with their middle */
  height: calc(461.73 * var(--s));
}
.lk-shot {
  position: relative;
  box-sizing: border-box;
  width: calc(220 * var(--s));
  border: calc(7 * var(--s)) solid #281D15;
  border-radius: calc(28.6 * var(--s));
  background: #281D15;
  overflow: hidden;
  box-shadow: 0 30px 60px -28px rgba(30, 10, 3, 0.6);
}
.lk-shot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: calc(22 * var(--s));
}
.lk-pad {
  position: absolute;
  left: calc(174 * var(--s));
  top: calc(-40 * var(--s));
  width: calc(84 * var(--s));
  height: auto;
  max-width: none;
  rotate: 12deg;
  filter: drop-shadow(0 12px 12px rgba(80, 35, 5, 0.32));
}
.lk-step--pray .lk-art { width: calc(128 * var(--s)); }
.lk-pray {
  position: relative;
  z-index: 1;
  display: block;
  width: calc(128 * var(--s));
  height: calc(128 * var(--s));
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 14px 16px rgba(80, 35, 5, 0.25));
}
.lk-label {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: var(--label-font);
  line-height: 1.12;
  color: var(--ink);
}
.lk-context { display: none; }
html.gsap .lk-context { display: block; }
.lk-copy {
  display: block;
  max-width: 320px;
  margin: 8px 0 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
}

/* The story stays in reading order as each beat scrolls into view. */
@media (max-width: 700px) {
  .lock-panel {
    --phone-w: 220px;
    min-height: 0;
    justify-content: flex-start;
    padding: 84px 24px 96px;
  }
  .lk-head { font-size: min(36px, 9.2vw); letter-spacing: -0.02em; }
  .lk-steps {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 72px;
    width: 100%;
    max-width: 380px;
    margin-top: 32px;
  }
  .lk-step { min-width: 0; text-align: center; }
  .lk-caption { min-height: 0; margin-bottom: 32px; }
  .lk-label { font-size: 24px; line-height: 1.15; }
  html.gsap .lk-label { font-size: min(30px, 7.8vw); line-height: 1.04; letter-spacing: -0.02em; }
  .lk-art { width: var(--phone-w); height: auto; }
  .lk-shot {
    width: var(--phone-w);
    border-width: 6px;
    border-radius: calc(var(--phone-w) * 0.13);
    box-shadow: 0 22px 36px -24px rgba(30, 10, 3, 0.45);
  }
  .lk-shot img { border-radius: calc(var(--phone-w) * 0.1); }
  .lk-pad {
    left: calc(100% - 48px);
    top: -12px;
    width: 44px;
    filter: drop-shadow(0 6px 6px rgba(80, 35, 5, 0.25));
  }
  .lk-step--pray .lk-art { width: 128px; height: 128px; }
  .lk-pray { width: 128px; height: 128px; filter: none; }
}
@media (max-width: 700px) and (max-height: 720px) {
  .lock-panel { --phone-w: 200px; padding-top: 78px; }
  .lk-steps { row-gap: 56px; }
  .lk-pad { width: 40px; }
  .lk-step--pray .lk-art, .lk-pray { width: 112px; height: 112px; }
}

/* The enhanced chapter holds its frame while scrolling tells the story.
   These queries mirror LOCK_QUERY in site.js. The ordinary three steps
   stay in document flow when the chapter is not live. */
@media (min-width: 701px) and (min-height: 621px) {
  .runway--lock.is-live { height: 300vh; height: 300svh; }
  .runway--lock.is-live > .lock-panel {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    justify-content: center;
    justify-content: safe center;
  }
}
@media (max-width: 700px) and (min-height: 640px) {
  .runway--lock.is-live { height: calc(100vh + 1800px); height: calc(100svh + 1800px); }
  .runway--lock.is-live > .lock-panel {
    --label-font: min(30px, 7.8vw);
    --caption-h: max(calc(2.08 * var(--label-font)), calc(1.04 * var(--label-font) + 30.4px));
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    justify-content: center;
    justify-content: safe center;
    padding: 84px 24px 24px;
  }
  .runway--lock.is-live .lk-steps { gap: 0; margin: 0; }
  .runway--lock.is-live .lk-step { grid-area: 1 / 1; width: 100%; }
  .runway--lock.is-live .lk-caption { min-height: var(--caption-h); }
  /* The Proof screen has the slightly taller native ratio. Reserve its
     full height for every beat so the small prayer art stays centered. */
  .runway--lock.is-live .lk-art {
    width: var(--phone-w);
    height: calc((var(--phone-w) - 12px) * 1391 / 640 + 12px);
  }
}
@media (max-width: 700px) and (min-height: 640px) and (max-height: 720px) {
  .runway--lock.is-live > .lock-panel { padding-top: 78px; }
}