/* "Why free? Here's the honest answer.": our story (src/site/views/story.ts).
   home: its own frame on the home page; page: /why-free; card: the /start value panel.
   A: editorial numbered lines with a huge pull-quote. G: arcade dialogue cards. */

.sy{--sy-ink:inherit;--sy-acc:currentColor;--sy-rule:currentColor;display:grid;gap:clamp(26px,3.6vw,48px);text-align:left}
.sy-list a,.sy-sign a{color:inherit;font-weight:700;text-decoration-thickness:1.5px;text-underline-offset:3px}
.sy-h{margin:0;font-weight:780;font-size:clamp(2.5rem,6.2vw,5.8rem);line-height:.92;letter-spacing:-.055em;text-wrap:balance;max-width:15ch}
.sy-q{display:block;color:var(--sy-acc)}
.sy-list{list-style:none;margin:0;padding:0;display:grid;column-gap:clamp(28px,4vw,64px)}
.sy-li,.sy-pull{display:grid;grid-template-columns:3rem 1fr;gap:12px;padding:18px 0;margin:0}
.sy-li{box-shadow:inset 0 1.5px 0 var(--sy-rule)}
.sy-li p{margin:0;max-width:56ch;font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.45}
.sy-n{font:400 .75rem/1 var(--mono);letter-spacing:.08em;padding-top:.5em;opacity:.8}
.sy-pull blockquote{margin:0;position:relative}
.sy-pull blockquote::before{content:"\201C";position:absolute;left:-.06em;top:-.42em;font-weight:800;font-size:clamp(6rem,11vw,10rem);line-height:1;color:var(--sy-acc);opacity:.35;pointer-events:none}
.sy-pull p{position:relative;margin:0;padding-top:clamp(28px,3.4vw,52px);font-weight:760;font-size:clamp(1.6rem,3vw,2.8rem);line-height:1.06;letter-spacing:-.04em;text-wrap:pretty;color:var(--sy-acc)}
.sy-end{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px 28px}
.sy-sign{margin:0;font-family:var(--brush);font-size:clamp(1.55rem,2.8vw,2.4rem);line-height:1.1}
.sy-cta{display:flex;flex-wrap:wrap;gap:10px}
@media (min-width:1000px){
  .sy-home .sy-list,.sy-page .sy-list{grid-template-columns:1fr 1.05fr;grid-auto-flow:dense}
  .sy-home .sy-pull,.sy-page .sy-pull{grid-column:2;grid-row:1/span 4;align-self:center;padding:0 0 0 clamp(8px,2vw,32px)}
  .sy-home .sy-pull,.sy-page .sy-pull{grid-template-columns:1fr}
  .sy-home .sy-pull .sy-n,.sy-page .sy-pull .sy-n{display:none}
}
.sy .rv{transition-delay:calc(var(--d,0) * 80ms)}

/* ---- the home frame ---- */
.f-story{display:flex;flex-direction:column}
.f-story .sy{flex:1;align-content:center;margin-top:28px}
[data-variant="a"] .f-story{background:var(--cobalt);color:#fff}
[data-variant="a"] .f-story .sy{--sy-acc:var(--yellow);--sy-rule:rgba(255,255,255,.4)}
[data-variant="a"] .f-story .chrome .mono{color:rgba(255,255,255,.75)}
[data-variant="a"] .f-story .btn-ink{background:var(--yellow);color:#171204}
[data-variant="a"] .f-story .btn-line{color:#fff;box-shadow:inset 0 0 0 1.5px #fff}
[data-variant="g"] .f-story{background:var(--pink)}
[data-variant="g"] .f-story .bb-ink{box-shadow:5px 5px 0 var(--lemon)}

/* ---- /why-free (A sits on the orange frame) ---- */
[data-variant="a"] .f-why .sy{--sy-acc:#fff;--sy-rule:rgba(26,11,4,.45);position:relative;z-index:1;flex:1;align-content:center;margin-top:24px}
[data-variant="a"] .f-why .sy-pull p{text-shadow:0 1px 0 rgba(120,30,0,.25)}

/* ---- G: dialogue cards ---- */
[data-variant="g"] .sy-home,[data-variant="g"] .sy-page{--sy-acc:var(--ink)}
[data-variant="g"] .sy-h{font-family:var(--disp);letter-spacing:-.02em;line-height:.98}
[data-variant="g"] .sy-q{display:inline-block;background:var(--lemon);border:var(--bw) solid var(--ink);border-radius:16px;padding:.02em .22em .08em;box-shadow:var(--sh) var(--sh) 0 var(--ink);transform:rotate(-2deg);margin-bottom:.12em}
[data-variant="g"] .sy-home .sy-list,[data-variant="g"] .sy-page .sy-list{row-gap:16px}
[data-variant="g"] .sy-home .sy-li,[data-variant="g"] .sy-page .sy-li{position:relative;box-shadow:5px 5px 0 var(--ink);background:var(--paper);border:var(--bw) solid var(--ink);border-radius:18px 18px 18px 4px;padding:18px 20px 18px 64px;grid-template-columns:1fr}
[data-variant="g"] .sy-home .sy-n,[data-variant="g"] .sy-page .sy-n{position:absolute;left:14px;top:14px;width:36px;height:36px;padding:0;border:var(--bw) solid var(--ink);border-radius:50%;background:var(--lemon);display:grid;place-items:center;font-weight:700;opacity:1}
[data-variant="g"] .sy-home .sy-pull,[data-variant="g"] .sy-page .sy-pull{background:var(--lemon);border:var(--bw) solid var(--ink);border-radius:22px;box-shadow:8px 8px 0 var(--ink);padding:22px 24px 26px;grid-template-columns:1fr;transform:rotate(-1deg)}
[data-variant="g"] .sy-pull p{font-family:var(--disp);font-weight:700;letter-spacing:-.015em;line-height:1.12;font-size:clamp(1.45rem,2.5vw,2.3rem)}
@media (min-width:1000px){[data-variant="g"] .sy-home .sy-li,[data-variant="g"] .sy-page .sy-li{align-self:start}}
[data-variant="g"] .sy-pull blockquote::before{opacity:.18}
[data-variant="g"] .sy-sign{background:var(--paper);border:var(--bw) solid var(--ink);border-radius:999px;padding:.12em .7em .2em;box-shadow:4px 4px 0 var(--ink)}
[data-variant="g"] .f-wwhy .sy{margin-top:18px}
@media (min-width:1000px){[data-variant="g"] .sy-home .sy-pull,[data-variant="g"] .sy-page .sy-pull{padding:34px 34px 40px}}

/* ---- /start: the card between "what's free" and "what you pay" ---- */
.sy-card{gap:14px;border-radius:18px;padding:22px 20px 20px;--sy-rule:rgba(255,255,255,.18)}
.sy-card .sy-h{font-size:clamp(1.45rem,2.2vw,1.75rem);line-height:1.02;letter-spacing:-.04em;max-width:none}
.sy-card .sy-li,.sy-card .sy-pull{grid-template-columns:1.9rem 1fr;gap:8px;padding:11px 0}
.sy-card .sy-li p{font-size:.9375rem;line-height:1.45}
.sy-card .sy-n{font-size:.6875rem;padding-top:.45em}
.sy-card .sy-pull{margin:6px 0;padding:16px 16px 18px;border-radius:14px}
.sy-card .sy-pull blockquote::before{font-size:5rem;top:-.38em;left:-.04em}
.sy-card .sy-pull p{padding-top:18px;font-size:clamp(1.15rem,1.7vw,1.3rem);line-height:1.18;letter-spacing:-.02em}
.sy-card .sy-sign{font-size:1.45rem}
[data-variant="a"] .sy-card{background:#121110;color:#F2F0EB;box-shadow:0 24px 44px -24px rgba(0,0,0,.6);--sy-acc:#FF8A4C}
[data-variant="a"] .sy-card .sy-pull{background:#F25C1F;color:#1A0B04;--sy-acc:#1A0B04}
[data-variant="a"] .sy-card .sy-pull blockquote::before{color:#fff;opacity:.5}
[data-variant="g"] .sy-card{background:var(--lemon);color:var(--ink);border:3px solid var(--ink);box-shadow:6px 6px 0 var(--ink);--sy-acc:var(--ink);--sy-rule:rgba(21,19,18,.3)}
[data-variant="g"] .sy-card .sy-h{font-family:var(--disp);letter-spacing:-.01em}
[data-variant="g"] .sy-card .sy-q{display:inline;background:none;border:0;box-shadow:none;padding:0;transform:none;color:var(--tomato-d)}
[data-variant="g"] .sy-card .sy-pull{background:var(--pink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(-1deg)}
[data-variant="g"] .sy-card .sy-sign{background:none;border:0;box-shadow:none;padding:0}
@media (max-width:420px){.sy-card{padding:18px 16px}}
@media (prefers-reduced-motion:no-preference){
  .sy-card .sy-li,.sy-card .sy-pull{animation:sy-in .6s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--d,0) * 90ms + 200ms)}
  [data-variant="g"] .sy-card .sy-pull{animation-name:sy-in-g}
}
@keyframes sy-in{from{opacity:0;transform:translateY(12px)}}
@keyframes sy-in-g{from{opacity:0;transform:translateY(12px) rotate(-3deg)}to{transform:rotate(-1deg)}}

/* /start desktop: teaser near the top of the side panel, jumps to the story card */
.sy-tease{display:grid;grid-template-columns:1fr auto;gap:2px 14px;align-items:center;padding:16px 18px;border-radius:14px;background:#151515;color:#fff;text-decoration:none;transition:transform .2s}
.sy-tease:hover,.sy-tease:focus-visible{transform:translateY(-2px)}
.sy-tq{font-weight:800;font-size:1.25rem;letter-spacing:-.02em;color:var(--sy-tease,#ffd23f)}
.sy-tt{grid-column:1;font-size:.92rem;opacity:.85}
.sy-tease i{grid-column:2;grid-row:1/3;font-style:normal;font-size:1.4rem;width:2.4rem;height:2.4rem;display:grid;place-items:center;border-radius:50%;background:rgba(255,255,255,.12)}
[data-variant="g"] .sy-tease{border:3px solid #151515;background:#ffe45c;color:#151515;box-shadow:4px 4px 0 #151515;border-radius:12px}
[data-variant="g"] .sy-tq{color:#151515}
[data-variant="g"] .sy-tease i{background:#151515;color:#ffe45c}
#sy-side{scroll-margin-top:12px}
@media (prefers-reduced-motion:reduce){.sy-tease{transition:none}}