/* In-person meetings (skyllamaspro.com/meet-in-person/ and skyllamas.com/meet-in-person/; skyllamas-website
   docs/features/productions-meetings.md). The podcast studio tour's layout (Slawek, Oct 8: "the same style like on a
   podcast website ... with the llama from the productions logo"): the llama, two even cards, one month at a time,
   then the details. In the Productions colors and the 2026 glossy look (navy, gold, ivory; Outfit, Nunito Sans, DM Sans). */
.mp{--navy:#121c33;--navy-hi:#2a3c63;--navy-lo:#0c1426;--gold:#ba965a;--gold-ink:#86662f;--ivory:#f6f3ec;--line:#e4dccb;--muted:#535d72;
  --rim:linear-gradient(135deg,#ecdcb6,#ba965a 38%,#f6ead0 62%,#ba965a);--paper:linear-gradient(180deg,#fffefb,#fbf7ee);
  --shadow:0 1px 2px rgba(18,28,51,.06),0 10px 24px -14px rgba(18,28,51,.32);--shadow-up:0 2px 4px rgba(18,28,51,.08),0 22px 40px -18px rgba(18,28,51,.45);
  --panel:0 1px 0 rgba(255,255,255,.9) inset,0 30px 70px -34px rgba(18,28,51,.42),0 10px 24px -16px rgba(18,28,51,.2);
  --gloss:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.05) 48%,rgba(255,255,255,0) 52%);
  background:radial-gradient(1200px 420px at 50% 0,rgba(186,150,90,.18),transparent 70%),#efe9dd;
  color:var(--navy);font-family:'Nunito Sans',system-ui,sans-serif;font-size:17px;line-height:1.55;padding:clamp(40px,7vw,80px) 0 clamp(56px,8vw,96px)}
.mp *{box-sizing:border-box}
.mp [hidden]{display:none!important}
.mp p{margin:0}
.mp a{color:var(--navy);text-decoration-color:var(--gold);text-underline-offset:3px}
.mp img{max-width:100%;height:auto;display:block}
.mp .mp-wrap{max-width:1180px;margin:0 auto;padding-inline:16px}
.mp .mp-kicker{font:600 12px/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-ink)}

/* The llama from the Productions logo, drawn in navy, gliding gently. */
.mp .mp-intro{text-align:center;max-width:900px;margin:0 auto}
.mp .mp-llama{width:clamp(130px,15vw,180px);margin:0 auto 12px;animation:mp-glide 5s ease-in-out infinite}
@keyframes mp-glide{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-8px) rotate(-2deg)}}
.mp .mp-intro h1{font:800 clamp(38px,5.6vw,64px)/.98 Outfit,system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.02em;margin:12px 0 0;color:var(--navy)}
.mp .mp-intro h1 span{display:block;color:transparent;-webkit-text-stroke:1.5px var(--navy)}
.mp .mp-lede{font-size:clamp(17px,2vw,19px);color:var(--muted);max-width:60ch;margin:18px auto 0}

/* Two even cards (like the studio tour: "evenness … i like symmetry") */
.mp .mp-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:36px;margin-top:44px;align-items:stretch}
.mp .mp-card{border:1.5px solid transparent;border-radius:26px;background:var(--paper) padding-box,var(--rim) border-box;box-shadow:var(--panel);padding:28px}
.mp .mp-side{display:flex;flex-direction:column}
.mp .mp-photo{margin:0;border-radius:16px;overflow:hidden;background:var(--navy)}
.mp .mp-photo img{width:100%;aspect-ratio:16/9;object-fit:cover}
.mp h2{font:800 28px/1.1 Outfit,system-ui,sans-serif;text-transform:uppercase;letter-spacing:-.01em;margin:24px 0 0;color:var(--navy)}
.mp .mp-book h2{margin-top:0}
.mp .mp-list{list-style:none;margin:12px 0 24px;padding:0}
.mp .mp-list li{position:relative;padding:8px 0 8px 28px;border-bottom:1px solid var(--line);font-weight:600}
.mp .mp-list li::before{content:"";position:absolute;left:2px;top:15px;width:11px;height:11px;background:var(--gold);transform:rotate(45deg)}
.mp .mp-where{margin-top:auto;padding:16px 18px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.mp .mp-where p+p{margin-top:8px}
.mp .mp-note{font-size:14px;color:var(--muted);margin-top:4px}
.mp .mp-step{font:600 13px/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;margin:24px 0 10px;color:var(--navy)}

/* One month at a time (month.js) */
.mp .skl-cal{display:block;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.mp .cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px}
.mp .cal-title{margin:0;font:700 19px/1.2 Outfit,system-ui,sans-serif;text-transform:uppercase;letter-spacing:.04em;text-align:center;flex:1}
.mp .cal-arrow{width:44px;height:44px;flex:none;border:1px solid rgba(18,28,51,.16);border-radius:12px;background:#fff;color:var(--navy);cursor:pointer;
  font:400 30px/1 Outfit,system-ui,sans-serif;padding:0 0 4px;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(18,28,51,.06);transition:all .18s}
.mp .cal-arrow:hover:not(:disabled){border-color:var(--gold);transform:translateY(-1px);box-shadow:var(--shadow)}
.mp .cal-arrow:disabled{opacity:.3;cursor:default;background:transparent;box-shadow:none}
.mp .cal-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.mp .cal-wd{font:600 11px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--muted);padding:2px 0 4px}
.mp .mp-day{aspect-ratio:1/1;min-height:40px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid rgba(18,28,51,.14);border-radius:12px;
  background:#fff;color:var(--navy);cursor:pointer;box-shadow:0 1px 2px rgba(18,28,51,.06);transition:transform .15s,box-shadow .15s,border-color .15s}
.mp .mp-day b{font:700 18px/1 Outfit,system-ui,sans-serif}
.mp .mp-day:hover:not(:disabled){transform:translateY(-2px);border-color:var(--gold);box-shadow:var(--shadow)}
.mp .mp-day:disabled{background:rgba(255,255,255,.4);border-color:var(--line);color:#b7b0a2;box-shadow:none;cursor:default}
.mp .mp-day[aria-pressed=true]{background:var(--gloss),linear-gradient(180deg,var(--navy-hi),var(--navy) 60%,var(--navy-lo));color:var(--ivory);border-color:transparent;box-shadow:0 0 0 2px var(--gold),var(--shadow-up)}
.mp .cal-in-next{animation:cal-next .22s ease-out}
.mp .cal-in-prev{animation:cal-prev .22s ease-out}
@keyframes cal-next{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:none}}
@keyframes cal-prev{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
.mp .mp-times{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}
.mp .mp-time{padding:10px 6px;border:1px solid rgba(18,28,51,.2);border-radius:999px;background:#fff;color:var(--navy);font:700 14px/1 'Nunito Sans',system-ui,sans-serif;cursor:pointer;box-shadow:0 1px 2px rgba(18,28,51,.06);transition:all .15s}
.mp .mp-time:hover{border-color:var(--gold);transform:translateY(-1px)}
.mp .mp-time[aria-pressed=true]{background:var(--gloss),linear-gradient(180deg,var(--navy-hi),var(--navy));color:var(--ivory);border-color:transparent;box-shadow:0 0 0 2px var(--gold)}

/* Step 3: the details, a full-width card under the two */
.mp .mp-form{margin-top:36px}
.mp .mp-chosen{font:700 20px/1.3 Outfit,system-ui,sans-serif;color:var(--navy)}
.mp .mp-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
.mp .mp-fields .wide{grid-column:1/-1}
.mp label{display:grid;gap:6px;margin-bottom:12px}
.mp .mp-l{font:600 12px/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--navy)}
.mp .mp-l em{font-style:normal;text-transform:none;letter-spacing:0;color:var(--muted);font-weight:400}
.mp input,.mp select,.mp textarea{width:100%;font:16px/1.4 'Nunito Sans',system-ui,sans-serif;color:var(--navy);background:#fff;border:1px solid rgba(18,28,51,.18);border-radius:12px;padding:12px 14px;box-shadow:inset 0 1px 2px rgba(18,28,51,.05)}
.mp input:focus-visible,.mp select:focus-visible,.mp textarea:focus-visible{outline:2px solid var(--gold);outline-offset:1px;border-color:var(--navy)}
.mp .mp-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.mp .mp-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border:0;border-radius:999px;cursor:pointer;text-decoration:none;
  font:600 14px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--ivory);
  background:var(--gloss),linear-gradient(180deg,var(--navy-hi),var(--navy) 60%,var(--navy-lo));box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 12px 24px -12px rgba(18,28,51,.75);transition:transform .15s,box-shadow .15s}
.mp .mp-btn:hover{transform:translateY(-1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 0 2px var(--gold),0 12px 24px -12px rgba(18,28,51,.75)}
.mp .mp-btn:disabled{opacity:.6;cursor:wait;transform:none}
.mp .mp-btn-line{color:var(--navy);background:#fff;box-shadow:inset 0 0 0 1.5px var(--navy),var(--shadow)}
.mp .mp-btn-line:hover{box-shadow:inset 0 0 0 1.5px var(--navy),var(--shadow-up)}
.mp .mp-msg{min-height:1.5em;margin-top:12px;font-weight:700;color:#a3261b}
.mp .mp-msg[data-ok]{color:var(--muted);font-weight:400}
.mp .mp-done,.mp .mp-closed{margin-top:18px}
.mp .mp-done-when{font:700 22px/1.25 Outfit,system-ui,sans-serif;margin:6px 0 10px}
.mp .mp-done p+p,.mp .mp-closed p+p{margin-top:12px}

/* Phones: the time picker first, the details right under it, then what the meeting is about. */
@media (max-width:860px){.mp .mp-wrap{display:flex;flex-direction:column;gap:24px}.mp .mp-grid{display:contents}
  .mp .mp-intro{order:1}.mp .mp-book{order:2}.mp .mp-form{order:3;margin-top:0}.mp .mp-side{order:4}}
@media (max-width:600px){.mp .mp-card{padding:20px;border-radius:20px}.mp .mp-fields{grid-template-columns:minmax(0,1fr)}.mp .cal-grid{gap:4px}.mp .mp-day b{font-size:16px}}
@media (prefers-reduced-motion:reduce){.mp *{animation:none!important;transition:none!important}}