/* Long-form guide pages (/guides/*.html). Tailwind handles the page shell;
   this styles the article body, which is plain HTML written by hand. */

.guide { color: #d1d5db; font-weight: 300; font-size: 17px; line-height: 1.75; }
.guide > * + * { margin-top: 1.25em; }
.guide h2 { font-family: 'Playfair Display', serif; font-weight: 400; color: #fff; font-size: 1.75rem; line-height: 1.25; margin-top: 2.6em; scroll-margin-top: 110px; }
.guide h3 { font-family: 'Playfair Display', serif; font-weight: 400; color: #fff; font-size: 1.25rem; line-height: 1.35; margin-top: 2em; scroll-margin-top: 110px; }
.guide strong, .guide b { color: #fff; font-weight: 500; }
.guide a { color: #C8A96B; text-decoration: underline; text-underline-offset: 3px; }
.guide a:hover { color: #D4AF37; }
.guide ul, .guide ol { padding-left: 1.3em; }
.guide ul { list-style: disc; }
.guide ol { list-style: decimal; }
.guide li + li { margin-top: .5em; }
.guide li::marker { color: #C8A96B; }
.guide blockquote { border-left: 2px solid #C8A96B; padding: .2em 0 .2em 1.2em; color: #e5e7eb; font-style: italic; }
.guide blockquote footer { font-style: normal; font-size: 13px; color: #9ca3af; margin-top: .6em; letter-spacing: .04em; }
.guide .note { border: 1px solid rgba(200,169,107,.3); background: #070b14; padding: 1.1em 1.3em; font-size: 15.5px; }
.guide .note-title { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #C8A96B; margin-bottom: .5em; font-style: normal; }
.guide .best-for { display: inline-block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #03070C; background: #C8A96B; padding: .25em .6em; margin-right: .4em; }
.guide .table-wrap { overflow-x: auto; border: 1px solid rgba(255,255,255,.1); }
.guide table { width: 100%; border-collapse: collapse; font-size: 14.5px; line-height: 1.5; min-width: 640px; }
.guide th, .guide td { text-align: left; vertical-align: top; padding: .75em .9em; border-bottom: 1px solid rgba(255,255,255,.07); }
.guide th { font-family: 'JetBrains Mono', monospace; font-weight: 400; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #9ca3af; background: #070b14; }
.guide td:first-child { color: #fff; font-weight: 400; }
.guide tr.ours td { background: rgba(200,169,107,.07); }
.guide .cta-box { border: 1px solid rgba(200,169,107,.35); background: #070b14; padding: 1.5em; }
.guide .cta-box p { margin: 0 0 1em; }
.guide .cta-btn { display: inline-block; background: #C8A96B; color: #03070C !important; text-decoration: none !important; font-weight: 700; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; padding: 1em 1.6em; }
.guide .cta-btn:hover { background: #D4AF37; }
.guide details { border: 1px solid rgba(255,255,255,.1); background: #070b14; padding: 1em 1.2em; }
.guide details + details { margin-top: .75em; }
.guide details summary { cursor: pointer; color: #fff; list-style: none; }
.guide details summary::-webkit-details-marker { display: none; }
.guide details summary h3 { display: inline; margin: 0; font-size: 1.05rem; }
.guide details[open] summary { margin-bottom: .6em; }
.guide details p { font-size: 15.5px; }
@media (max-width: 640px) { .guide { font-size: 16px; } .guide h2 { font-size: 1.5rem; } }
/* Phones: say the table scrolls sideways */
.guide .table-hint { display: none; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #C8A96B; margin-bottom: -.6em; }
@media (max-width: 767px) {
  .guide .table-hint { display: block; }
}
.guide .cons { border-left: 2px solid rgba(248,113,113,.45); padding: .2em 0 .2em 1.1em; }
.guide .cons-title { display: block; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: #fca5a5; margin-bottom: .4em; }
.guide .cons ul { list-style: none; padding-left: 0; font-size: 15.5px; }
.guide .cons li { position: relative; padding-left: 1.1em; }
.guide .cons li::before { content: "−"; position: absolute; left: 0; color: #fca5a5; }
.guide .cons .why { display: block; color: #9ca3af; font-size: 14.5px; margin-top: .2em; }
.guide td.con { color: #fca5a5; font-size: 13.5px; }
.guide .table-wrap.wide table { min-width: 900px; }
.guide .table-hint.always { display: block; }
.guide figure { margin: 2em 0 0; }
.guide figure a { display: block; text-decoration: none; }
.guide figure img { display: block; width: 100%; height: auto; border: 1px solid rgba(255,255,255,.08); }
.guide figcaption { margin-top: .7em; font-size: 14px; line-height: 1.55; color: #9ca3af; }
.guide .best-for.not-rec { background: #fca5a5; }

/* ── Stick-figure stories (scripts/stories/kit.mjs) ──────────────────────
   Inline SVG scenes. /guides/story.js adds .ready to each story and .play to
   each scene as it scrolls into view; without it (or with reduced motion)
   every scene shows its finished picture. */
.guide figure.story { margin: 2.2em 0 0; padding: 16px 16px 14px; background: #0a1120; border: 1px solid rgba(255,255,255,.08); border-radius: 14px; }
.story .strip { display: grid; grid-template-columns: repeat(var(--n, 1), minmax(0, 1fr)); gap: 18px; }
@media (max-width: 700px) { .story .strip { grid-template-columns: minmax(0, 1fr); } }
.story .scene { min-width: 0; }
.story svg { display: block; width: 100%; height: auto; overflow: visible; }
.guide .story .scene p { margin: .55em 0 0; font-size: 14.5px; line-height: 1.5; color: #cbd5e1; }
.guide .story .scene p b { display: block; font-family: 'JetBrains Mono', monospace; font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: #C8A96B; margin-bottom: .2em; }
.guide .story figcaption { margin-top: 1em; padding-top: .85em; border-top: 1px solid rgba(255,255,255,.07); }
.story .ts { font-family: Inter, system-ui, sans-serif; }
.story .tp { font-family: 'Playfair Display', Georgia, serif; }
.story .tm { font-family: 'JetBrains Mono', monospace; letter-spacing: .12em; }
.story-replay { display: inline-block; margin-top: .7em; font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: #C8A96B; background: transparent; border: 1px solid rgba(200,169,107,.35); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.story-replay::before { content: "\21BB\00a0\00a0"; }
.story-replay:hover { background: rgba(200,169,107,.12); }
.story-replay[hidden] { display: none; }

.story .a-pop, .story .a-stamp, .story .a-growx, .story .a-growy, .story .a-blink, .story .a-pulse { transform-box: fill-box; }
.story .a-pop, .story .a-stamp, .story .a-blink, .story .a-pulse { transform-origin: center; }
.story .a-growx { transform-origin: 0 50%; }
.story .a-growy { transform-origin: 50% 100%; }
.story.ready .scene:not(.play) .an { opacity: 0; }
.story.ready .scene:not(.play) .a-draw { opacity: 1; stroke-dasharray: 1 1; stroke-dashoffset: 1; }
.scene.play .an, .scene.play .af { animation-duration: var(--t, .6s); animation-delay: var(--d, 0s); animation-fill-mode: both; animation-timing-function: cubic-bezier(.2, .8, .2, 1); }
.scene.play .a-fade { animation-name: s-fade; }
.scene.play .a-up { animation-name: s-up; }
.scene.play .a-down { animation-name: s-down; }
.scene.play .a-left { animation-name: s-left; }
.scene.play .a-right { animation-name: s-right; }
.scene.play .a-pop { animation-name: s-pop; }
.scene.play .a-stamp { animation-name: s-stamp; }
.scene.play .a-growx { animation-name: s-growx; }
.scene.play .a-growy { animation-name: s-growy; }
.scene.play .a-draw { animation-name: s-draw; stroke-dasharray: 1 1; }
.scene.play .a-walk { animation-name: s-walk; animation-timing-function: cubic-bezier(.3, .15, .55, 1); }
.scene.play .a-stepA { animation: s-stepA .34s ease-in-out var(--d, 0s) var(--n, 4); }
.scene.play .a-stepB { animation: s-stepB .34s ease-in-out var(--d, 0s) var(--n, 4); }
.scene.play .a-swingA { animation: s-swingA .34s ease-in-out var(--d, 0s) var(--n, 4); }
.scene.play .a-swingB { animation: s-swingB .34s ease-in-out var(--d, 0s) var(--n, 4); }
.scene.play .a-wave { animation: s-wave .5s ease-in-out var(--d, 0s) var(--n, 3); }
.scene.play .a-shake { animation: s-shake .45s ease-in-out var(--d, 0s) var(--n, 2); }
.scene.play .a-nod { animation: s-nod .5s ease-in-out var(--d, 0s) var(--n, 2); }
.scene.play .a-bob { animation: s-bob 2.8s ease-in-out var(--d, 0s) infinite; }
.scene.play .a-float { animation: s-float 3.2s ease-in-out var(--d, 0s) infinite; }
.scene.play .a-blink { animation: s-blink 5s linear var(--d, 1s) infinite; }
.scene.play .a-pulse { animation: s-pulse 1.8s ease-in-out var(--d, 0s) var(--n, infinite); }
.scene.play .a-spin { animation: s-spin 1.6s linear var(--d, 0s) var(--n, 3); }
@keyframes s-fade { from { opacity: 0; } }
@keyframes s-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes s-down { from { opacity: 0; transform: translateY(-34px); } }
@keyframes s-left { from { opacity: 0; transform: translateX(-46px); } }
@keyframes s-right { from { opacity: 0; transform: translateX(46px); } }
@keyframes s-pop { 0% { opacity: 0; transform: scale(.3); } 65% { opacity: 1; transform: scale(1.08); } 100% { transform: none; } }
@keyframes s-stamp { 0% { opacity: 0; transform: scale(2.4); } 60% { opacity: 1; transform: scale(.94); } 100% { transform: none; } }
@keyframes s-growx { from { transform: scaleX(0); } }
@keyframes s-growy { from { transform: scaleY(0); } }
@keyframes s-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes s-walk { 0% { opacity: 0; transform: translateX(var(--x, -200px)); } 12% { opacity: 1; } 100% { transform: none; } }
@keyframes s-stepA { 0%, 100% { transform: none; } 25% { transform: rotate(22deg); } 75% { transform: rotate(-22deg); } }
@keyframes s-stepB { 0%, 100% { transform: none; } 25% { transform: rotate(-22deg); } 75% { transform: rotate(22deg); } }
@keyframes s-swingA { 0%, 100% { transform: none; } 25% { transform: rotate(-18deg); } 75% { transform: rotate(18deg); } }
@keyframes s-swingB { 0%, 100% { transform: none; } 25% { transform: rotate(18deg); } 75% { transform: rotate(-18deg); } }
@keyframes s-wave { 0%, 100% { transform: none; } 50% { transform: rotate(-28deg); } }
@keyframes s-shake { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes s-nod { 0%, 100% { transform: none; } 50% { transform: translateY(4px); } }
@keyframes s-bob { 0%, 100% { transform: none; } 50% { transform: translateY(-3px); } }
@keyframes s-float { 0%, 100% { transform: none; } 50% { transform: translateY(-7px); } }
@keyframes s-blink { 0%, 95%, 100% { transform: none; } 97% { transform: scaleY(.1); } }
@keyframes s-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.14); } }
@keyframes s-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .story .an, .story .af { animation: none !important; opacity: 1 !important; stroke-dashoffset: 0 !important; }
}