/* Texas Toy Lab: the Landing template (gift, party and search pages) and the markets hub.
   The 10/10 plan, roadmap step 8 + the markets half of step 10 (2026-09-29, "Paper, Ink & Plastic").
   Loaded after the stamped kit on: stocking-stuffers-texas, toys-in-austin, halloween-treats, party-pack,
   custom-3d-printed-toys, kids-market-austin, markets. Tokens only: no new colours here.
   Order of a landing page: tape > H1 > Joseph's hook > real toys > trust row > good to know > Dad's Desk > one next step. */

/* ---------- page frame ---------- */
.lp{padding:0 0 var(--s-7)}
.lp-section{padding:var(--s-7) 0 0}
.lp-section > .wrap > .lp-h2{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h2);line-height:1.1;margin:0 0 var(--s-2)}
.lp-section .lp-sub{max-width:var(--measure);margin:0 0 var(--s-5)}

/* ---------- hero: tape, H1, hook (optionally with a picture beside it) ---------- */
.lp-hero{padding-top:var(--s-6)}
.lp-hero .tape{margin-bottom:var(--s-4)}
.lp-hero .h1{margin:0 0 var(--s-3)}
.lp-hero .lede{margin:0}
.lp-hero .hand{margin-top:var(--s-3)}
.lp-hero .btn-row{margin-top:var(--s-5)}
.lp-hero--split{display:grid;gap:var(--s-6);align-items:center}
@media (min-width:900px){.lp-hero--split{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}}
.lp-hero__art{max-width:460px;justify-self:center;width:100%}

/* Joseph speaks: a small head beside the hook, so the voice is his without saying his age */
.lp-voice{display:flex;gap:var(--s-3);align-items:flex-start;margin-top:var(--s-2)}
.lp-voice img{flex:none;width:56px;height:56px;border-radius:50%;background:var(--card);border:3px solid var(--ink);object-fit:cover;object-position:50% 4%}
.lp-voice .lede{max-width:36em}

/* ---------- a lead toy (the one the page is about), then the shop's own shelves ---------- */
.lp-lead{display:grid;gap:var(--s-5);align-items:stretch}
@media (min-width:760px){.lp-lead{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.lp-lead .toy-card__well{aspect-ratio:4/3}
.lp-lead .toy-card__body p{font-weight:600;margin-top:var(--s-2)}
.lp-lead .toy-card__foot .btn{flex:none}
.lp-leadnote{display:flex;flex-direction:column;justify-content:center;gap:var(--s-3)}

/* TTLShop.shelves draws the storefront (assets/shop.js + shop.css). On a landing page it sits in a card, no awning fuss. */
.lp-shelf{margin-top:var(--s-8)}

/* ---------- small picture cards (party ideas, custom steps) ---------- */
.lp-picks{display:grid;gap:var(--s-4);grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:900px){.lp-picks--4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lp-pick{margin:0}
.lp-pick .toy-card__well{aspect-ratio:1/1}
.lp-pick .toy-card__body{padding:10px 12px 12px}
.lp-pick .toy-card__name{font-size:1.1rem}
.lp-pick .toy-card__foot{padding-top:6px}
.lp-pick a.toy-card__name{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:3px;text-underline-offset:3px}
.lp-pick b.toy-card__name{display:flex;align-items:center;min-height:44px}

/* the custom-toy story: a sentence, its design, the printer */
.lp-steps{display:grid;gap:var(--s-5);grid-template-columns:1fr;counter-reset:step;list-style:none;margin:0;padding:0}
@media (min-width:860px){.lp-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lp-step{position:relative;display:flex;flex-direction:column;gap:var(--s-3)}
.lp-step__n{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--sun);border:3px solid var(--ink);
  font-family:var(--f-display);font-size:1.25rem;box-shadow:var(--sh-1)}
.lp-step h3{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h3);line-height:1.15}
.lp-step p{font-weight:600}
.lp-say,.lp-step .lp-say{background:var(--card);border:3px solid var(--ink);border-radius:var(--r-card) var(--r-card) var(--r-card) 6px;box-shadow:var(--sh-2);
  padding:var(--s-5);font-family:var(--f-hand);font-weight:700;font-size:1.6rem;line-height:1.15;min-height:170px;display:flex;align-items:center}
.lp-step .toy-card__well{aspect-ratio:1/1}
.lp-step .polaroid{margin-top:var(--s-2)}

/* ---------- good to know: the calm facts strip under the toys ---------- */
.lp-good{display:grid;gap:var(--s-3);grid-template-columns:1fr;list-style:none;margin:0;padding:0}
@media (min-width:760px){.lp-good{grid-template-columns:repeat(3,minmax(0,1fr))}}
.lp-good li{display:flex;gap:var(--s-3);align-items:flex-start;background:var(--card);border:2px solid rgba(43,35,68,.25);border-radius:var(--r-card);padding:var(--s-4);font-weight:700}
.lp-good svg{flex:none;width:28px;height:28px}
.lp-good b{display:block;font-family:var(--f-display);font-weight:400;font-size:1.1rem;line-height:1.2}

/* ---------- Dad's Desk sits last, then one next step ---------- */
.lp-dad .dad-desk dl + p,.lp-dad .dad-desk p + p{margin-top:var(--s-3)}
.lp-dad .dad-desk a{font-weight:800}
@media (max-width:560px){.lp-dad .dad-desk dl{grid-template-columns:1fr;gap:2px}.lp-dad .dad-desk dd{margin-bottom:var(--s-2)}}
.lp-next{display:flex;flex-direction:column;align-items:center;gap:var(--s-3);text-align:center;padding-top:var(--s-7)}
.lp-next .hand{font-size:1.6rem}
.lp-trust{margin-top:var(--s-4)}

/* ---------- forms (party quote, the Lab List) ---------- */
.lp-form{display:grid;gap:var(--s-4)}
.lp-form label{display:grid;gap:6px;font-size:15px;font-weight:800}
.lp-form :is(input,select){width:100%;min-height:48px;padding:10px 14px;font-size:1.05rem;font-weight:800;background:var(--card);
  border:3px solid var(--ink);border-radius:var(--r-tag)}
.lp-form .small{color:var(--muted)}
.lp-form .lp-err{color:var(--error);font-size:.9rem;font-weight:900}
.lp-form .lp-err:empty{display:none}
@media (min-width:640px){.lp-form--2{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-form--2 .lp-wide{grid-column:1 / -1}}
.lp-formcard{background:var(--card);border:3px solid var(--ink);border-radius:var(--r-panel);box-shadow:var(--sh-3);padding:var(--s-5)}
@media (min-width:768px){.lp-formcard{padding:var(--s-6)}}
.lp-sent{display:grid;gap:var(--s-2);justify-items:start}
.lp-sent[hidden]{display:none}

/* party: the happy side (picture cards) beside the form on wide screens */
.lp-party{display:grid;gap:var(--s-6)}
@media (min-width:900px){.lp-party{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);align-items:start}.lp-party__pics{order:2}}

/* ---------- tickets (markets hub, Kids Market recap) ---------- */
.lp-ticket .ticket__stub{min-width:104px}
.lp-ticket .ticket__stub b{font-size:2.6rem}
.lp-ticket .ticket__body h3{font-family:var(--f-display);font-weight:400;font-size:var(--fs-h3);line-height:1.15}
.lp-ticket .ticket__body p{font-weight:700;color:var(--muted);font-size:1rem}
.lp-ticket--next .ticket__body h3{font-size:clamp(1.5rem,1.2rem + 1.2vw,2.1rem)}
.lp-ticket--next .ticket__stub b{font-size:3rem}
.lp-status{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;min-height:28px;padding:2px 12px;font-size:14px;font-weight:900;
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap;background:var(--tint-mint);border:2px solid var(--ink);border-radius:var(--r-pill)}
.lp-when{display:inline-block;font-family:var(--f-hand);font-weight:700;font-size:1.35rem;color:var(--teal-ink);line-height:1}
.lp-when:empty{display:none}
.lp-chips{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:var(--s-2)}
.lp-chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;font-size:15px;font-weight:800;color:var(--ink);text-decoration:none;
  background:var(--card);border:2px solid var(--ink);border-radius:var(--r-pill);box-shadow:var(--sh-1);cursor:pointer;font-family:var(--f-body)}
.lp-chip svg{width:20px;height:20px;flex:none}
@media (hover:hover) and (pointer:fine){.lp-chip:hover{background:var(--tint-butter)}}
.lp-chip:active{transform:translate(1px,1px);box-shadow:none}

.lp-tickets{display:grid;gap:var(--s-5);grid-template-columns:1fr;align-items:stretch}
@media (min-width:760px){.lp-tickets{grid-template-columns:repeat(2,minmax(0,1fr))}.lp-tickets > .lp-ticket--next{grid-column:1 / -1}}
.lp-tickets > .ticket{height:100%}
.lp-ticket--blank{background:transparent;border-style:dashed;box-shadow:none}
.lp-ticket--blank .ticket__stub{background:var(--paper)}
.lp-ticket--blank .ticket__stub svg{width:40px;height:40px}
.lp-ticket--past .ticket__stub{background:var(--sand)}
.lp-seal{position:absolute;top:-22px;right:-10px;width:72px;height:auto;transform:rotate(-8deg);filter:drop-shadow(1px 3px 3px rgba(43,35,68,.3));pointer-events:none}
.lp-ticket--next{overflow:visible}
.lp-ticket--next .ticket__stub{border-radius:calc(var(--r-card) - 3px) 0 0 calc(var(--r-card) - 3px)}

/* the SMS reminder: a small taped note, not a header paragraph */
.lp-note{position:relative;max-width:560px;margin:var(--s-6) auto 0;background:var(--tint-butter);border:2px solid rgba(43,35,68,.25);border-radius:var(--r-tag);
  padding:var(--s-5) var(--s-5) var(--s-4);font-weight:700;box-shadow:var(--sh-paper);transform:rotate(-.6deg)}
.lp-note::before{content:"";position:absolute;top:-12px;left:50%;width:90px;height:24px;margin-left:-45px;transform:rotate(-3deg);background:rgba(43,35,68,.12)}
.lp-note a{font-weight:900}
.lp-note svg{width:22px;height:22px;vertical-align:-5px;margin-right:4px}

/* been there: small past stubs */
.lp-been{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin-top:var(--s-6)}
.lp-been > b{font-family:var(--f-display);font-weight:400;font-size:1.2rem}
.lp-stub{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 14px;background:var(--sand);border:2px dashed var(--ink);border-radius:var(--r-tag);
  font-size:15px;font-weight:800;color:var(--ink);text-decoration:none}
.lp-stub .mono{font-size:13px}

/* photo pairs: real stall photos only, always in a polaroid */
.lp-photo{max-width:520px;margin:0 auto}
.lp-photo--desk{display:none}
@media (min-width:900px){.lp-photo--desk{display:block}.lp-photo--phone{display:none}}
.lp-photo--phone{margin-top:var(--s-7);max-width:420px}

/* closing band before the footer */
.lp-close{margin-top:var(--s-8);background:var(--sand);border-top:3px solid var(--ink);border-bottom:3px solid var(--ink);padding:var(--s-7) 0}
.lp-close .wrap{display:grid;gap:var(--s-6);align-items:center}
@media (min-width:760px){.lp-close .wrap{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}}
.lp-close .polaroid{max-width:380px;justify-self:center;width:100%}
.lp-close .hand{font-size:clamp(1.8rem,1.5rem + 1vw,2.4rem);color:var(--ink)}
.lp-close .btn-row{margin-top:var(--s-4)}

/* the markets map card keeps its own parchment; only its spacing is the page's */
.lp-map{margin-top:var(--s-7)}

@media (prefers-reduced-motion:reduce){.lp-note{transform:none}}
@media print{.lp-close,.lp-shelf{display:none}}

/* a short list in the lead note (names only; prices stay on the tags) */
.lp-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-2)}
.lp-list li{position:relative;padding-left:26px;font-weight:600}
.lp-list li::before{content:"";position:absolute;left:4px;top:.55em;width:10px;height:10px;border-radius:50%;background:var(--sun);border:2px solid var(--ink)}
.lp-list b{font-weight:900}

/* Halloween: the October accent stays inside the palette (night ink with a sun label) */
.tape--october{background:var(--night);color:var(--sun)}
.lp--october .lp-list li::before{background:var(--night)}

/* questions parents ask: tap to open, 44px+ rows */
.lp-faq{display:grid;gap:var(--s-3)}
.lp-faq details{background:var(--card);border:3px solid var(--ink);border-radius:var(--r-card);box-shadow:var(--sh-2)}
.lp-faq summary{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);min-height:56px;padding:var(--s-3) var(--s-5);
  font-family:var(--f-display);font-weight:400;font-size:1.15rem;line-height:1.2;cursor:pointer;list-style:none}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{content:"+";flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--sun);border:2px solid var(--ink);font-size:1.3rem;line-height:1}
.lp-faq details[open] summary::after{content:"\2013"}
.lp-faq details p{padding:0 var(--s-5) var(--s-4);font-weight:600}
.lp-tickets--one{grid-template-columns:1fr}
.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.lp .go{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--coral);text-decoration-thickness:3px;text-underline-offset:3px}
.lp-status svg{width:16px;height:16px;flex:none}
@media (max-width:560px){
  .lp-ticket .ticket__stub,.lp-ticket--next .ticket__stub{min-width:76px;padding:var(--s-3) var(--s-2)}
  .lp-ticket .ticket__stub b,.lp-ticket--next .ticket__stub b{font-size:2.2rem}
  .lp-ticket .ticket__body{padding:var(--s-4)}
  .lp-chip{padding:0 12px;font-size:14px}
}