/* LT UK, direction D, Gift Trix: the dial at its part heads the page; then a run of loops: the gift loop round the
   sideboard, the year it will hold as four held steps (planned screens built in the page), nothing to download, a step
   today, the free call. Every word about the app is in the future: it is planned. */

/* ---------- the string, slim on the inner pages (thread.js reads these; David, 23:47 UTC: never chunky) ---------- */
body { --thread-h: 18px; --thread-h-narrow: 14px; }

.pg-in { display: grid; gap: 14px; max-width: var(--wrap); }
.pg-in > h2 { max-width: 20ch; }

/* ---------- the small head: her seal, the string leaving from behind its edge ---------- */
.pg-head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 28px var(--right) 64px var(--left); }
.pg-top { display: flex; align-items: center; gap: 16px; }
.seal--head { width: 72px; }
.pg-top h1 { min-width: 0; font-size: clamp(30px, 8.6vw, 46px); max-width: 15ch; overflow-wrap: break-word; hyphens: auto; }
.pg-say { display: grid; gap: 14px; justify-items: start; }
.pg-say .lead { max-width: 52ch; }
@media (min-width: 760px) {
  .pg-head { padding-top: 48px; padding-bottom: 80px; }
  .seal--head { width: 104px; }
  .pg-top { gap: 28px; }
  .pg-top h1 { font-size: clamp(46px, 6vw, 90px); }
  .pg-say { padding-left: 132px; }
}

/* ---------- the free call block: the line that says where her form opens ---------- */
.call .call-where { font-size: 16px; max-width: 60ch; }

/* ---------- held steps: D's engine (site.js rides): the scroll picks a whole step; each change plays and dwells ---------- */
.ride { position: relative; }
.ride-probe { position: absolute; top: 0; left: 0; width: 1px; height: var(--step-len, 0px); visibility: hidden; pointer-events: none; }
.ride .ride-stage { position: relative; }
.ride.ride-on .ride-stage { position: sticky; top: 0; height: 100vh; height: 100svh; }
.ride.ride-on .ride-stops { position: relative; overflow-x: clip; overflow-y: visible; }
.ride.ride-on .ride-stop { position: absolute; inset: 0 0 auto 0; opacity: 0; visibility: hidden; transform: translateX(28px); transition: opacity 500ms var(--brake), transform 900ms var(--brake), visibility 0s linear 500ms; }
.ride.ride-on .ride-stop.is-on { position: relative; opacity: 1; visibility: visible; transform: none; transition: opacity 700ms var(--brake) 120ms, transform 1000ms var(--brake) 120ms, visibility 0s; }
.ride.ride-on .ride-stop.is-past { transform: translateX(-28px); }
.ride.ride-on .ride-stop > * { transition: opacity 600ms ease, transform 900ms var(--brake); }
.ride.ride-on .ride-stop:not(.is-on) > * { opacity: 0; transform: translateX(22px); }
.ride.ride-on .ride-stop.is-on > :nth-child(1) { transition-delay: 140ms; }
.ride.ride-on .ride-stop.is-on > :nth-child(2) { transition-delay: 260ms; }
@media (max-width: 1099px) {
  .ride.ride-on .ride-stop { transition: opacity 360ms var(--brake), transform 500ms var(--brake), visibility 0s linear 360ms; }
  .ride.ride-on .ride-stop.is-on { transition: opacity 450ms var(--brake) 60ms, transform 550ms var(--brake) 60ms, visibility 0s; }
  .ride.ride-on .ride-stop > * { transition: opacity 400ms ease, transform 550ms var(--brake); }
  .ride.ride-on .ride-stop.is-on > :nth-child(1) { transition-delay: 60ms; }
  .ride.ride-on .ride-stop.is-on > :nth-child(2) { transition-delay: 120ms; }
}
html.still .ride-stop, html.still .ride-stop > * { transition: none !important; }
/* wholly off screen (site.js sets .ride-away): every step laid out in the stage, top down, in the ride's own height, so
   nothing rests hidden; it clears the moment any of the ride is back on screen, where the held step shows again */
.ride.ride-on.ride-away .ride-stage { position: relative; height: auto; max-height: 100%; overflow: clip; }
.ride.ride-on.ride-away .ride-stops { display: grid; gap: 56px; }
.ride.ride-on.ride-away .ride-stop, .ride.ride-on.ride-away .ride-stop > * { position: relative; opacity: 1; visibility: visible; transform: none; transition: none; }

/* the stage's head: its name, and a knot for each step that fills as the step holds */
.gy-head { display: grid; gap: 10px; align-content: start; }
.gy-head h2 { max-width: 20ch; }
.knots { display: none; position: relative; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; max-width: 560px; margin-top: 6px; }
.knots::before { content: ""; position: absolute; left: 8px; right: 8px; top: 7px; height: 2px; border-radius: 1px; background: var(--rule-strong); }
.knots li { position: relative; display: grid; justify-items: start; gap: 6px; font: 700 13px/1.2 var(--f-body); color: var(--ink-2); transition: color 300ms var(--calm); }
.knot { width: 16px; height: 16px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--edge); transition: background-color 450ms var(--calm), transform 450ms var(--calm); }
.knots li.is-past .knot { background: color-mix(in srgb, var(--band) 55%, var(--paper)); }
.knots li.is-on { color: var(--ink); }
.knots li.is-on .knot { background: var(--band); box-shadow: inset 0 0 0 1.5px rgba(28, 26, 24, 0.5); transform: scale(1.25); }
.ride.ride-on .knots { display: grid; }
.rs-code { display: block; font: 700 14px/1.2 var(--f-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 4px; }
.ride-stop h3 { font-size: clamp(26px, 2.6vw, 40px); margin-bottom: 8px; }
.ride-stop p { max-width: 42ch; }

/* ---------- the head: the dial turned to Gift Trix, the name, plainly planned ---------- */
.gt-head { display: grid; gap: 20px; padding: 28px var(--right) 64px var(--left); }
.gt-head .dial-turn { --turn: -270deg; }
.gt-words { display: grid; gap: 12px; align-content: center; justify-items: start; }
.gt-words h1 { font-size: clamp(48px, 7vw, 104px); }
.gt-planned { padding: 10px 16px; border-radius: 14px; background: var(--raised); box-shadow: inset 0 0 0 1.5px var(--edge); font: 700 clamp(17px, 1.3vw, 20px)/1.45 var(--f-body); max-width: 38ch; }
.gt-lead { display: none; }
@media (min-width: 760px) {
  .gt-head { grid-template-columns: auto minmax(0, 1fr); column-gap: 56px; align-items: center; padding-top: 48px; padding-bottom: 80px; }
}
@media (min-width: 1100px) {
  .gt-head { grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.85fr); padding-top: 56px; }
  .gt-lead { display: block; align-self: center; border-radius: 20px; overflow: hidden; }
  .gt-lead img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
}

/* ---------- sections ---------- */
.gt-loop, .gt-none, .gt-today { padding: clamp(56px, 7vw, 96px) var(--right) clamp(64px, 8vw, 112px) var(--left); }
.gt-head, .gt-none { --pat: var(--pat-asanoha); }
.gt-none .plain { font-size: clamp(18px, 1.4vw, 21px); }
.gn-grid { display: grid; gap: 24px; margin-top: 6px; }
.gn-pic { max-width: 760px; border-radius: 18px; overflow: hidden; background: var(--rule); }
.gn-pic img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
@media (min-width: 1100px) { .gn-grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: 64px; align-items: center; } }

/* ---------- the gift loop: the string closes round the muddle as it comes into view ---------- */
.gl-grid { display: grid; gap: 48px; margin-top: 40px; }
.gl-frame { position: relative; border-radius: 18px; overflow: hidden; max-width: 1000px; background: var(--rule); }
.gl-frame img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.gl-words { display: grid; gap: 18px; align-content: center; }
.muddle { display: grid; gap: 8px; }
.muddle li { position: relative; padding-left: 30px; font: 700 clamp(19px, 1.6vw, 23px)/1.35 var(--f-body); }
.muddle li::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 14px; height: 14px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--edge); }
@media (min-width: 1100px) { .gl-grid { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); column-gap: 64px; } }

/* ---------- the year it will hold: four held steps, a planned screen in a phone frame for each ---------- */
.gt-year { padding: 0; }
.gt-ride .ride-stage { display: grid; gap: 22px; align-content: start; padding: clamp(56px, 7vw, 96px) var(--right) clamp(64px, 8vw, 104px) var(--left); }
.gt-ride .ride-stops { display: grid; gap: 56px; }
.gt-ride .ride-stop { display: grid; gap: 22px; justify-items: start; }
.gy-note { font-size: 16px; color: var(--ink-2); max-width: 60ch; }
.gt-ride.ride-on { --step-len: 70svh; height: calc(100svh + 4 * var(--step-len)); }
@supports not (height: 1svh) { .gt-ride.ride-on { --step-len: 70vh; height: calc(100vh + 4 * var(--step-len)); } }
.gt-ride.ride-on .ride-stage { grid-template-rows: auto 1fr; gap: 14px; padding-top: 22px; padding-bottom: 88px; }
.gt-ride.ride-on .ride-stops { display: block; }
.gt-ride.ride-on .ride-stop { gap: 14px; }
.gt-ride.ride-on .phone { --ph: clamp(300px, calc(100svh - 440px), 560px); }
@media (max-width: 759px) {
  .gt-ride.ride-on .gy-head h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .gt-ride.ride-on .ride-stop h3 { font-size: 25px; margin-bottom: 4px; }
  .gt-ride.ride-on .ride-stop p { font-size: 17px; line-height: 1.45; }
  .gt-ride.ride-on .rs-code { display: none; }
  .gt-ride.ride-on .phone { justify-self: center; }
}
@media (min-width: 760px) {
  .gt-ride .ride-stop { grid-template-columns: minmax(0, 1fr) auto; column-gap: 48px; align-items: center; }
  .gt-ride.ride-on .ride-stage { padding-top: 40px; }
  .gt-ride.ride-on .phone { --ph: clamp(320px, calc(100svh - 330px), 600px); }
}
@media (min-width: 1100px) {
  .gt-ride.ride-on { --step-len: 60vh; height: calc(100vh + 4 * var(--step-len)); }
  .gt-ride.ride-on .ride-stage { height: 100vh; padding-top: 44px; padding-bottom: 96px; }
  .gt-ride .ride-stop { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); column-gap: 72px; }
  .gt-ride .ride-stop .phone { justify-self: center; }
  .gt-ride.ride-on .phone { --ph: clamp(340px, calc(100vh - 320px), 640px); }
  .gt-ride .ride-stop p { font-size: 20px; }
}

/* the phone: a frame, and a planned screen built in the page (a picture: role img, its words hidden from readers) */
.phone { --ph: 520px; position: relative; flex: none; height: var(--ph); aspect-ratio: 9 / 18.5; border-radius: calc(var(--ph) * 0.075); background: #1c1a18; box-shadow: inset 0 0 0 1.5px #8a8277, 0 18px 44px rgba(28, 26, 24, 0.22); container-type: inline-size; }
.phone::before { content: ""; position: absolute; z-index: 2; left: 38%; right: 38%; top: 3.4%; height: 2.6%; border-radius: 999px; background: #1c1a18; }
.phone-screen { position: absolute; inset: 3.6cqw; display: flex; flex-direction: column; gap: 3.4cqw; padding: 16cqw 5.5cqw 6cqw; border-radius: calc(var(--ph) * 0.06); background: #fffaf4; color: #1c1a18; overflow: hidden; font: 400 6.2cqw/1.3 var(--f-body); text-align: left; }
.app-bar { display: flex; justify-content: space-between; align-items: center; }
.app-bar b { font: 400 1.3em/1 var(--f-head); letter-spacing: 0.02em; }
.chip-planned { padding: 0.25em 0.75em; border-radius: 999px; background: #1c1a18; color: #fffaf4; font: 700 0.78em/1.3 var(--f-body); letter-spacing: 0.04em; }
.app-title { margin-top: 0.3em; font: 700 1.4em/1.15 var(--f-body); }
.app-title--sm { margin-top: 0.4em; font-size: 1.1em; }
.app-sub { color: #55504a; font-size: 0.86em; }
.app-months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 0.3em; text-align: center; font-weight: 700; font-size: 0.86em; }
.app-months li { padding: 0.35em 0; border-radius: 0.5em; background: #f1e9df; }
.app-months .is-mark { background: var(--band); box-shadow: inset 0 0 0 1px rgba(28, 26, 24, 0.35); }
.app-rows { display: grid; gap: 0.5em; }
.app-rows li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.6em; align-items: center; padding: 0.55em 0.7em; border-radius: 0.8em; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(28, 26, 24, 0.16); }
.app-rows b { display: block; font-weight: 700; }
.app-rows small { display: block; color: #55504a; font-size: 0.86em; }
.app-dot { width: 0.9em; height: 0.9em; border-radius: 50%; background: var(--band); box-shadow: inset 0 0 0 1px rgba(28, 26, 24, 0.4); }
.app-dot--b { background: #d99a8c; }
.app-tag { padding: 0.15em 0.55em; border-radius: 999px; background: #f1e9df; font-size: 0.74em; font-weight: 700; white-space: nowrap; }
.tick { width: 1.25em; height: 1.25em; border-radius: 50%; box-shadow: inset 0 0 0 1.5px #8a8378; }
.tick.is-done { background: var(--band) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.5L12 5.5' fill='none' stroke='%231c1a18' stroke-width='2'/%3E%3C/svg%3E") center / 80% no-repeat; box-shadow: inset 0 0 0 1px rgba(28, 26, 24, 0.4); }
.app-tabs { display: flex; gap: 0.3em; padding: 0.25em; border-radius: 999px; background: #f1e9df; }
.app-tabs span { flex: 1; padding: 0.35em 0; border-radius: 999px; text-align: center; font-weight: 700; font-size: 0.86em; }
.app-tabs .is-on { background: #ffffff; box-shadow: 0 1px 3px rgba(28, 26, 24, 0.18); }
.app-panel { display: grid; gap: 0.45em; padding: 0.7em; border-radius: 0.8em; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(28, 26, 24, 0.16); }
.app-meter { display: block; height: 0.6em; border-radius: 999px; background: #f1e9df; overflow: hidden; }
.app-meter i { display: block; width: 60%; height: 100%; border-radius: 999px; background: var(--band); }
.app-card { padding: 0.9em; border-radius: 0.9em; background: #ffffff; box-shadow: inset 0 0 0 1px rgba(28, 26, 24, 0.16); font-style: italic; }
.app-btn { margin-top: auto; padding: 0.6em; border-radius: 999px; background: #1c1a18; color: #fffaf4; font-weight: 700; text-align: center; }

/* laid out (motion off, a short screen, no script): each step with its screen, one after another */
.gt-ride:not(.ride-on) .phone { --ph: min(520px, 118vw); }



/* ---------- the held year as one composed group (from 760 px): the stage's name and the step's words together on
   one side, the planned screen as tall as the screen allows on the other, its note under it; nothing left blank ---------- */
@media (min-width: 760px) {
  .gt-ride.ride-on:not(.ride-away) .ride-stage { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto auto minmax(0, 1fr) auto; column-gap: clamp(40px, 5vw, 104px); row-gap: 0; padding-top: 40px; padding-bottom: 96px; }
  .gt-ride.ride-on:not(.ride-away) .ride-stops, .gt-ride.ride-on:not(.ride-away) .ride-stop { display: contents; }
  .gt-ride.ride-on:not(.ride-away) .gy-head { grid-column: 1; grid-row: 2; padding-bottom: 36px; }
  .gt-ride.ride-on:not(.ride-away) .rs-words { grid-column: 1; grid-row: 3; align-self: start; }
  .gt-ride.ride-on:not(.ride-away) .phone { grid-column: 2; grid-row: 1 / span 4; align-self: center; justify-self: center; --ph: clamp(340px, calc(100svh - 210px), 720px); }
  .gt-ride.ride-on:not(.ride-away) .gy-note { grid-column: 2; grid-row: 5; justify-self: center; max-width: 34ch; padding-top: 12px; font-size: 15px; text-align: center; }
}
@media (min-width: 1100px) {
  .gt-ride.ride-on:not(.ride-away) .ride-stage { padding-top: 44px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .gt-ride.ride-on:not(.ride-away) .phone { --ph: clamp(380px, calc(100vh - 200px), 760px); }
  .gt-ride.ride-on:not(.ride-away) .rs-words { max-width: 46ch; }
}

/* ---------- a step today: the four parts round a small dial ring the string closes on, and a short list beside it ---------- */
.gt-step { gap: 40px; }
.gt-dial { --dial: 230px; --dial-font: 13.5px; padding: 22px 0 0; }
.gt-dial .dial-ring { view-transition-name: none; }
.gt-dial .dial-turn { --turn: -270deg; }
.gt-step-words { display: grid; gap: 14px; align-content: start; }
.gt-step-words > h2 { max-width: 20ch; }
.step-list { display: grid; margin-top: 8px; border-top: 1.5px solid var(--ink); }
.step-list a { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; align-items: center; min-height: 64px; padding: 12px 0; border-bottom: 1px solid var(--rule-strong); color: var(--ink); text-decoration: none; }
.step-list b { font: 400 clamp(24px, 2vw, 30px)/1.1 var(--f-head); letter-spacing: 0.01em; }
.step-list span:not(.arr) { grid-column: 1; font-size: 16px; color: var(--ink-2); }
.step-list .arr { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
.step-list a:hover b { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; }
.step-list a:hover .arr { transform: translateX(4px); }
@media (min-width: 760px) {
  .gt-step { grid-template-columns: auto minmax(0, 1fr); column-gap: 72px; align-items: center; }
  .gt-dial { --dial: 270px; --dial-font: 14.5px; }
}
@media (min-width: 1200px) {
  body { --wrap: 1600px; }
  .gt-dial { --dial: 340px; --dial-font: 16px; }
  .step-list { grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .gl-frame { max-width: none; }
  .gn-pic { max-width: none; }
}

/* ---------- the free call block at wide screens: its heading on one side, what to do on the other ---------- */
@media (min-width: 1200px) {
  .call .call-in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-content: center; }
  .call .call-in > * { grid-column: 2; }
  .call .call-in > h2 { grid-column: 1; grid-row: 1 / span 3; align-self: center; }
}

/* ---------- the step markers sit ON the string: a bead for each step, the string drawn through them (P11). The list
   starts on the content line, so the stage's line (data-thread-line) stays on the gutter, and each bead is pulled
   back onto the string itself; the stage paints over the string so the beads sit on top of it ---------- */
.gt-ride .ride-stage { z-index: 2; }
.ride.ride-on .knots { grid-auto-flow: row; grid-auto-columns: auto; gap: 8px; max-width: none; margin-top: 12px; }
.knots::before { display: none; }
.knots li { display: flex; align-items: center; gap: 12px; font-size: 14px; }
.knot { flex: none; width: 20px; height: 20px; margin-left: calc(-1 * (var(--g) + 10px)); background: var(--paper); box-shadow: inset 0 0 0 2px var(--ink-2), 0 0 0 2px var(--paper); }
.knots li.is-on .knot { box-shadow: inset 0 0 0 2px var(--ink), 0 0 0 2px var(--paper); }