/* Page CSS: only what sits inside a visual or a block the kit lacks. Tokens come from assets/system.css. */

/* owner placeholders stay visible until the owner fills them */
mark.owner { background: #fff1c2; color: #5a3b00; padding: 0 4px; border-radius: 4px; font-size: .92em; }
.ground-inverse mark.owner { background: #5a3b00; color: #fff1c2; }

/* hero: two real screenshots stacked in the picture column, at their own 16:9 */
.hero__stack { display: grid; grid-template-rows: 1fr 1fr; gap: var(--s-3); background: none !important; }
.hero__stack > img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-lg); min-height: 0; }
.hero__stack .ly-float { z-index: 2; }
@media (max-width: 639px) {
  .hero__stack > img + img { display: none; }
}

/* story cards: the screenshot is the link to play */
.story { display: grid; gap: var(--s-3); align-content: start; }
.story__media { display: block; overflow: clip; border-radius: var(--r-lg); aspect-ratio: 16 / 9; background: var(--surface); }
.story__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms var(--ease, ease); }
.story__media:hover img { transform: scale(1.03); }
.story h3 { font: 500 var(--t-card)/1.3 var(--font-text); margin-top: var(--s-2); }
.story > .link { justify-self: start; font-weight: 500; }
.play-note { margin-top: var(--s-6); max-width: 70ch; }

.request { font-family: var(--font-display); font-size: var(--t-h3); line-height: 1.3; letter-spacing: var(--display-tracking);
           padding-left: var(--s-5); border-left: 3px solid var(--action); max-width: 30ch; }
.story-text p { max-width: 60ch; }
.shot-pair { display: grid; gap: var(--s-4); }
.shot-pair img { width: 100%; aspect-ratio: 20 / 9; object-fit: cover; border-radius: var(--r-lg); display: block; }

.shot { aspect-ratio: 16 / 9; display: block; overflow: clip; border-radius: var(--r-lg); }
.shot .frame__img { width: 100%; height: 100%; object-fit: cover; }
.mk-side { align-content: start; }

/* showcase on the dark band */
.showcase { row-gap: var(--s-7); }
.showcase .tile__media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.showcase .tile__price { color: var(--muted); font-size: var(--t-small); white-space: normal; text-align: right; }
.clip-play { position: absolute; right: var(--s-4); bottom: var(--s-4); width: 48px; height: 48px; border-radius: 999px; border: 0;
             background: rgba(255,255,255,.92); color: #1f2b4d; display: grid; place-items: center; cursor: pointer; }
.clip-play svg { width: 18px; height: 18px; }
.clip-play.is-playing svg path { d: path("M4.5 3.5h2.5v9H4.5zM9 3.5h2.5v9H9z"); }
.clip-play:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; }

/* steps */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-5); }
.steps > li { display: grid; grid-template-columns: 32px 1fr; gap: var(--s-4); align-items: start; }
.steps h3 { font: 500 var(--t-card)/1.3 var(--font-text); margin-bottom: var(--s-1); }
.dates { display: grid; gap: var(--s-4); align-content: start; }
.dates h3 { font: 500 var(--t-card)/1.3 var(--font-text); }

/* prices */
.plans { align-items: stretch; }
.plans .card--plan { display: flex; flex-direction: column; }
.plans .card--plan .plan__pay { margin-top: auto; }
.plans .card--plan h3 { font: 500 var(--t-card)/1.3 var(--font-text); }
.extras { list-style: none; padding: 0; margin: var(--s-7) 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.extras li { display: grid; gap: var(--s-1); align-content: start; }
.extras .rows__name { font-weight: 500; }
@media (max-width: 1023px) { .extras { grid-template-columns: 1fr; gap: var(--s-4); } }

/* order form */
.order-form { background: var(--g-alt, var(--surface)); padding: var(--s-7); border-radius: var(--r-lg); }
@media (max-width: 639px) { .order-form { padding: var(--s-5) var(--s-4); } }
.order-tips h3 { font: 500 var(--t-card)/1.3 var(--font-text); margin-bottom: var(--s-4); }
.field .opt { font-weight: 400; color: var(--muted); }
.field input[type="file"] { height: auto; padding: var(--s-3); }
.field textarea::placeholder { color: var(--muted); }
.field.check label { display: grid; grid-template-columns: 24px 1fr; gap: var(--s-3); align-items: start; font-weight: 400; font-size: var(--t-body); line-height: 1.5; }
.field.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--ink); }
.field__err { color: #b3261e; font-weight: 500; min-height: 0; }
.field__err:empty { display: none; }
.field [aria-invalid="true"] { border-color: #b3261e; box-shadow: inset 0 0 0 1px #b3261e; }
.form__summary { color: #b3261e; font-weight: 500; }
.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.order-done { background: var(--g-alt, var(--surface)); padding: var(--s-7); border-radius: var(--r-lg); display: grid; gap: var(--s-4); align-content: start; }
.order-done h3 { font: 400 var(--t-h3)/1.2 var(--font-display); }

/* close: the ending screenshot keeps its 16:9 */
.close--photo .close__media img { object-fit: cover; object-position: 50% 40%; }

/* skip link: hidden until focused */
.skip { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip:focus { width: auto; height: auto; clip-path: none; z-index: 20; background: var(--bg); padding: 8px 12px; border-radius: 8px; outline: 3px solid var(--action); }

/* hero stack: both screenshots visible (layout.css makes a hero image a cover layer) */
.hero__media.hero__stack { overflow: visible; }
.hero__media.hero__stack > img { position: static; inset: auto; width: 100%; height: 100%; }

.stories-head { margin-bottom: 0; }
.story .t-small { margin-top: calc(-1 * var(--s-2)); }

/* showcase: one big capture beside a 2x2 */
.tile--big { align-content: stretch; grid-template-rows: 1fr auto; }
.tile--big .tile__media { aspect-ratio: auto; height: 100%; min-height: 240px; }
.showcase__small { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-6) var(--s-5); }
.showcase__small .tile__head { flex-direction: column; gap: 2px; align-items: flex-start; }
.showcase__small .tile__price { text-align: left; }
@media (max-width: 639px) { .showcase__small { grid-template-columns: minmax(0, 1fr); } .tile--big .tile__media { aspect-ratio: 16 / 9; height: auto; min-height: 0; } }
.dates .rows > li > p { color: var(--muted); font-size: var(--t-small); }
.close--photo .close__media img { object-position: 50% 82%; }

/* phone and tablet: long stacked sections take two screens; prices and the form grow to fit
   (judged deviation from the one-or-two-screens rule: three stacked price cards and a 12-field form
   cannot fit two phone screens without cutting what parents need) */
@media (max-width: 639px) {
  #stories, #trick-or-treat, #metal-knight, #beyond, #how, #faq { --hm: 2; }
  #prices, #order { height: auto !important; min-height: calc(var(--hm, 1) * 100lvh); }
}
@media (min-width: 640px) and (max-width: 1023px) {
  #stories, #prices, #order { --h: 2; }
}
.mk-list-h { font: 500 var(--t-card)/1.3 var(--font-text); }
.mk-list { gap: var(--s-2); }
.mk-head { max-width: 900px; }
/* stacked hero on tablet and phone: the screenshot whole at 16:9, never cropped through the title */
@media (max-width: 1023px) {
  .hero--split .hero__media.hero__stack { flex: 0 0 auto; height: auto; min-height: 0; grid-template-rows: auto; grid-template-columns: 1fr; }
  .hero__media.hero__stack > img { aspect-ratio: 16 / 9; height: auto; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .hero--split .hero__media.hero__stack { grid-template-columns: 1fr 1fr; }
}

/* 2026-11-10: the daughter's own words on the story cards (smaller than the big pull quote) + "How it grew" */
.request--card { font-size: var(--t-body, 1rem); line-height: 1.5; max-width: none; margin: var(--s-2) 0; }
.story details { margin: var(--s-2) 0 var(--s-3); }
.story summary { cursor: pointer; font-weight: 500; color: var(--action); }
.story details p { margin-top: var(--s-2); color: var(--muted); }
/* these two sections grew past one phone screen; let them size to their content */
@media (max-width: 639px) { #stories, #trick-or-treat { height: auto !important; min-height: 100svh; } }
@media (min-width: 640px) { #stories { height: auto !important; } }