/* The web Short (RLA-136): four slides in a horizontal carousel, one page per question under
   /short/<id>. Self-contained on purpose: the Sedona tokens and the chrome atoms are repeated here
   (as quiz.html repeats them inline) so a generated page loads nothing from index.html. Keep the
   tokens in step with index.html and quiz.html. deck.css supplies .badgechip. Sedona tokens only. */
:root{
  --paper:#F6F2EB; --card:#FEFEFE; --ink-deep:#35100B; --ink:#2B241C;
  --sub:#746B54; --muted:#B0A78F; --line:#DFD5BF; --line-soft:#E8E0CB;
  --track:#E2D9C4; --coral:#F1503C; --coral-deep:#C33A28; --coral-text:#B23A26;
  --coral-tint:#F8DCD3; --cta-text:#FFFCF7;
  --serif:'Zilla Slab',Rockwell,Georgia,serif;
  --grot:'Hanken Grotesk','Avenir Next',system-ui,sans-serif;
  --mono:'IBM Plex Mono','SFMono-Regular',Menlo,'Courier New',monospace;
}
*{box-sizing:border-box}
body{margin:0;background:#F6F2EB;color:#2B241C;font-family:var(--grot);
  font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:clip;
  min-height:100vh;display:flex;flex-direction:column}
img{max-width:100%;display:block}
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:600;color:var(--ink-deep);text-wrap:balance;line-height:1.15}
p{margin:0}
a{color:var(--coral);text-decoration:none}
.k{font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:2px;
   text-transform:uppercase;color:var(--coral-text)}
a:focus-visible,button:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.wrap{max-width:1080px;margin:0 auto;padding:0 28px;width:100%}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-family:var(--grot);font-weight:600;font-size:16px;line-height:1;
  padding:17px 28px;border-radius:20px;cursor:pointer;user-select:none;
  text-decoration:none;transition:transform .08s ease,box-shadow .08s ease;border:2px solid}
.btn--primary{background:var(--ink);border-color:var(--ink-deep);box-shadow:0 4px 0 #000;color:var(--cta-text)}
.btn--card{background:var(--card);border-color:var(--ink);box-shadow:0 4px 0 var(--ink);color:var(--ink-deep)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 transparent}
.btn--soon{cursor:default;opacity:.7;box-shadow:0 4px 0 #000}
.btn--soon:active{transform:none;box-shadow:0 4px 0 #000}
.btn--soon-nav{padding:13px 24px;font-size:15px}
.asbadge{display:inline-block;line-height:0}
.asbadge img{display:block;height:40px;width:auto}
.asbadge--short img{height:48px}
@media (prefers-reduced-motion:reduce){.btn{transition:none}}

/* chrome, as on quiz.html */
.f-nav{display:flex;align-items:center;justify-content:space-between;padding:24px 0}
.f-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.f-logo img{width:48px;height:48px}
.f-logo span{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--ink-deep)}
.wrap--foot{margin-top:auto}
.f-foot{display:flex;justify-content:space-between;gap:16px;padding:60px 0 40px;flex-wrap:wrap;
  font-family:var(--mono);font-weight:500;font-size:12px;color:var(--sub)}
.f-foot__legal{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.f-foot a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.f-foot a:hover{color:var(--coral-text)}

/* the page */
.s-main{width:100%;max-width:520px;margin:0 auto;padding:clamp(20px,8vh,110px) 20px 0}

/* The carousel: a scroll-snapping track, one slide per viewport width. The track is the card;
   every slide stretches to the tallest, so the frame never jumps between slides (RLA-137's rule). */
.s-carousel{position:relative}
.s-track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;gap:16px;padding:0 0 8px;
  scroll-behavior:smooth}
.s-track::-webkit-scrollbar{display:none}
@media (prefers-reduced-motion:reduce){.s-track{scroll-behavior:auto}}
.s-slide{flex:0 0 100%;scroll-snap-align:center;scroll-snap-stop:always;
  background:var(--card);border:2px solid var(--ink);box-shadow:0 6px 0 var(--ink);border-radius:28px;
  padding:32px 30px 26px;display:flex;flex-direction:column;gap:16px;align-items:flex-start;
  aspect-ratio:4/5;min-height:0;overflow:hidden}
/* Every slide is exactly 4:5; short.js sizes each slide's text (data-fit="min max", px) to fill it,
   so a two-line question and a 400-character answer both look designed for the card. */
[data-fit]{font-size:var(--fit,inherit)}
.s-q{line-height:1.16;letter-spacing:-.3px;text-wrap:pretty}
.s-a{font-family:var(--serif);font-weight:600;line-height:1.34;color:var(--ink-deep);text-wrap:pretty}
.s-why{line-height:1.5;color:var(--ink);text-wrap:pretty}
.s-slide .badgechip{align-self:flex-start}
/* the watermark pins to the slide's foot on slides 1 to 3 */
.s-wm{margin-top:auto;font-family:var(--mono);font-weight:600;font-size:12px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--sub)}
/* slide 4: the value prop, centred */
.s-slide--value{align-items:center;text-align:center;justify-content:flex-start;gap:12px}
/* icon + heading + sub sit centred in the space above the badge; the badge pins to the foot */
.s-icon{width:84px;height:84px;border-radius:20px;margin-top:auto;margin-bottom:4px}
.s-vh{font-size:clamp(32px,9.4vw,40px);line-height:1.06;max-width:11ch;text-wrap:balance}
.s-vsub{font-size:17px;line-height:1.5;color:var(--sub);max-width:30ch;text-wrap:balance}
.s-vcta{margin-top:auto;padding-top:12px;min-height:56px;display:flex;align-items:center;justify-content:center}
.s-vcta .asbadge img{height:56px}

/* slide 3 on espresso, slide 4 on coral (Ryan, 2026-09-25): light text, the same frame */
.s-slide--dark{background:var(--ink-deep);border-color:var(--ink-deep);box-shadow:0 6px 0 #1A0805}
.s-slide--dark .k{color:var(--coral)}
.s-slide--dark .s-why{color:var(--cta-text)}
.s-slide--dark .s-wm{color:var(--muted)}
.s-slide--dark .badgechip{background:rgba(255,252,247,.12)}
.s-slide--dark .badgechip span{color:var(--cta-text)}
.s-slide--coral{background:var(--coral);border-color:var(--coral-deep);box-shadow:0 6px 0 var(--coral-deep)}
.s-slide--coral .s-vh{color:var(--cta-text)}
.s-slide--coral .s-vsub{color:var(--cta-text);opacity:1}
/* Cream on coral is 3.45:1, so every word on this slide is WCAG "large text" (needs 3:1): the
   heading is 28px+ and the sub is 19px at 700 (14pt bold). Do not shrink or lighten either. */
.s-slide--coral .s-vsub{font-size:20px;font-weight:700;line-height:1.38;max-width:28ch}

/* dots and arrows under the track */
.s-nav{display:flex;align-items:center;justify-content:center;gap:18px;padding-top:18px}
.s-dots{display:flex;gap:8px}
.s-dots button{width:10px;height:10px;border-radius:50%;border:2px solid var(--ink);background:transparent;padding:0;cursor:pointer}
.s-dots button[aria-selected="true"]{background:var(--ink);border-color:var(--ink)}
.s-arrow{width:44px;height:44px;border-radius:50%;background:var(--card);border:2px solid var(--ink);
  box-shadow:0 3px 0 var(--ink);color:var(--ink-deep);padding:0;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center}
.s-arrow svg{display:block}
.s-arrow:active{transform:translateY(3px);box-shadow:0 0 0 transparent}
.s-arrow[disabled]{opacity:.35;cursor:default;transform:none;box-shadow:0 3px 0 var(--ink)}
.s-hint{text-align:center;font-family:var(--mono);font-weight:600;font-size:11px;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--sub);padding-top:12px;transition:opacity .3s ease}
.s-hint.off{opacity:0}
@media (prefers-reduced-motion:reduce){.s-hint{transition:none}}

/* below the carousel: Send this alone (the app badge is in the nav and on slide 4) */
.s-actions{display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:28px}
.s-actions .btn--card{padding:12px 22px;font-size:15px;border-radius:16px}
.s-link{width:100%;font-family:var(--mono);font-size:12px;color:var(--ink);background:var(--card);
  border:2px solid var(--line);border-radius:12px;padding:10px 12px;min-width:0}
[hidden]{display:none !important}