:root {
  --paper: #faf6ee; --card: #ffffff; --line: #e4dccb; --ink: #1b2330; --ink-2: #4a5160; --ink-3: #6b7180;
  --mark: #1f3a5f; --mark-soft: #e3eaf3; --on-mark: #ffffff; --tomato: #e8452c; --tomato-ink: #c2381f;
  --cream: #f3ead7; --code: #f3eee3; --on-tomato: #ffffff;
  --serif: Georgia, "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --paper: #111823; --card: #172131; --line: #2a3547; --ink: #eef1f5; --ink-2: #b8c0cc; --ink-3: #939cab;
          --mark: #9fc0ea; --mark-soft: #1d2d45; --on-mark: #0f1a2a; --tomato: #ff7a5c; --tomato-ink: #ff7a5c;
          --on-tomato: #111823;
          --code: #0d131c; color-scheme: dark; }
}
* { box-sizing: border-box; }
html { scroll-padding-top: 84px; }        /* a #link lands below the sticky header */
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.65 var(--sans); }
a { color: var(--mark); }
img, video { max-width: 100%; height: auto; }

/* ── the header stays put ── */
.site-head { position: sticky; top: 0; z-index: 20; background: var(--paper);
             border-bottom: 1px solid var(--line); }
.top { display: flex; justify-content: space-between; align-items: center; gap: 16px;
       max-width: 1080px; margin: 0 auto; padding: 12px 20px; }
.logo { display: inline-flex; align-items: center; gap: 9px; font: 600 19px var(--serif); color: var(--ink);
        text-decoration: none; letter-spacing: .01em; flex: none; }
.logo img { border-radius: 6px; }
.top nav { display: flex; gap: 18px; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.top nav::-webkit-scrollbar { display: none; }
.top nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; white-space: nowrap; }
.top nav a:hover { color: var(--mark); }

main { max-width: 1080px; margin: 0 auto; padding: 0 20px 40px; }
main.narrow { max-width: 760px; }
section { padding: 36px 0; border-top: 1px solid var(--line); }
section.hero { border-top: 0; }
h1 { font: 600 clamp(32px, 5.4vw, 52px)/1.1 var(--serif); margin: 0 0 16px; letter-spacing: -.01em; }
h2 { font: 600 26px/1.25 var(--serif); margin: 0 0 12px; }
h3 { font: 600 20px/1.3 var(--serif); margin: 0 0 10px; }
.lede { font-size: 20px; color: var(--ink-2); max-width: 36em; margin: 0 0 16px; }
.section-lede { color: var(--ink-2); max-width: 40em; margin: 0 0 22px; }
.small { font-size: 14.5px; color: var(--ink-3); }
.kicker { font: 600 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--tomato-ink); margin: 0 0 8px; }
.kicker a { color: inherit; }
.actions { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0 12px; }
.btn { display: inline-block; background: var(--mark); color: var(--on-mark); text-decoration: none; border-radius: 9px;
       padding: 12px 20px; font: 600 16px var(--sans); border: 1px solid var(--mark); cursor: pointer; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost { background: transparent; color: var(--mark); }
.btn.coffee { background: var(--tomato-ink); border-color: var(--tomato-ink); color: var(--on-tomato); }

/* ── the splash: headline, then the video, in the first screen ── */
.hero { text-align: center; padding-top: 30px; }
.h-title { font-size: clamp(30px, 5vw, 50px); margin: 0 auto 10px; max-width: 18em; }
.h-lede { margin: 0 auto 22px; max-width: 34em; font-size: 19px; }
.h-video { max-width: 800px; margin: 0 auto; text-align: left; }
.h-actions { justify-content: center; margin: 20px 0 10px; }
.h-text { max-width: 40em; margin: 0 auto; }
.h-text p { color: var(--ink-2); margin: 0 0 6px; }
.small-hero { text-align: left; padding-top: 34px; }
.video { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--card);
         box-shadow: 0 18px 40px -24px rgba(20, 20, 40, .45); }
.video video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 800; }
/* asked for less motion: a still and a link, not a looping video */
.video .still { display: none; position: relative; text-decoration: none; color: #fff; }
.video .still img { display: block; width: 100%; height: auto; }
.video .still span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); white-space: nowrap;
                     background: rgba(17, 24, 35, .86); padding: 10px 18px; border-radius: 999px; font: 600 16px var(--sans); }
@media (prefers-reduced-motion: reduce) { .video video { display: none; } .video .still { display: block; } }
@media (max-width: 860px) {
  .hero { padding-top: 20px; }
  .h-lede { font-size: 17px; margin-bottom: 16px; }
  .lede { font-size: 18px; }
}

.joke p, .bring p, .support p { max-width: 40em; }

/* ── how it works: each stage with its screenshot ── */
.stages { list-style: none; padding: 0; margin: 0; display: grid; gap: 34px; counter-reset: stage; }
.stages > li { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 28px; align-items: center;
             counter-increment: stage; }
.stage-text { position: relative; padding-left: 44px; }
.stage-text::before { content: counter(stage); position: absolute; left: 0; top: 2px; width: 30px; height: 30px;
                      border-radius: 50%; background: var(--tomato-ink); color: var(--on-tomato); display: grid; place-items: center;
                      font: 600 15px var(--sans); }
.stage-text b { display: block; font: 600 22px var(--serif); margin-bottom: 4px; }
.stage-text p { margin: 0; color: var(--ink-2); }
.shot { margin: 0; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); background: var(--card);
        box-shadow: 0 14px 34px -24px rgba(20, 20, 40, .5); }
.shot img { display: block; width: 100%; height: auto; }
@media (max-width: 760px) { .stages > li { grid-template-columns: minmax(0, 1fr); gap: 14px; } }
.also { margin: 44px 0 16px; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card { margin: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
        display: flex; flex-direction: column; }
.card img { display: block; width: 100%; height: 230px; object-fit: cover; object-position: top center;
            border-bottom: 1px solid var(--line); background: #fff; }
.card figcaption { padding: 14px 16px 16px; color: var(--ink-2); font-size: 15.5px; }
.card figcaption b { color: var(--ink); }
@media (max-width: 860px) { .cards { grid-template-columns: minmax(0, 1fr); } .card img { height: auto; max-height: 360px; } }

.bring dl, .parts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0 0 14px; max-width: 44em; }
.bring dt, .parts dt { font-weight: 600; }
.parts dt { font-family: var(--mono); font-size: 15px; font-weight: 500; }
.bring dd, .parts dd { margin: 0; color: var(--ink-2); }
@media (max-width: 560px) { .bring dl, .parts { grid-template-columns: minmax(0, 1fr); gap: 2px; } .bring dd, .parts dd { margin-bottom: 8px; } }

.support .small { display: inline-block; margin: 8px 0 0 10px; }

/* ── guides ── */
.guide-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.guide-card { display: flex; flex-direction: column; gap: 6px; padding: 18px 20px; border: 1px solid var(--line);
              border-radius: 12px; background: var(--card); text-decoration: none; color: var(--ink); }
.guide-card:hover { border-color: var(--mark); }
.guide-card b { font: 600 20px var(--serif); }
.guide-card span { color: var(--ink-2); font-size: 15.5px; }
.guide-card i { font-style: normal; color: var(--tomato-ink); font-weight: 600; font-size: 15px; margin-top: auto; }
@media (max-width: 560px) { .guide-cards { grid-template-columns: minmax(0, 1fr); } }
.steps-list, .plain { padding-left: 22px; margin: 0; }
.steps-list li, .plain li { margin: 0 0 10px; color: var(--ink-2); }
.steps-list b, .plain b { color: var(--ink); }
.excerpt { background: var(--code); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px;
           font: 13.5px/1.6 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 16px; color: var(--ink); }
code { font: .9em var(--mono); background: var(--code); padding: 1px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.files { list-style: none; padding: 0; margin: 0 0 14px; }
.files li { padding: 8px 0; border-bottom: 1px dashed var(--line); display: flex; flex-wrap: wrap; gap: 4px 12px; }
.files span { color: var(--ink-3); font-size: 15px; }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.swatches span { color: #fff; font: 600 13px var(--sans); padding: 6px 12px; border-radius: 999px; }

/* ── contact ── */
.contact { display: grid; gap: 6px; max-width: 34em; }
.contact label { font-weight: 600; font-size: 15px; margin-top: 8px; }
.contact .req { font-weight: 400; color: var(--ink-3); }
.contact input, .contact textarea { font: 16px var(--sans); color: var(--ink); background: var(--card);
                                    border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; width: 100%; }
.contact input:focus, .contact textarea:focus { outline: 2px solid var(--mark); outline-offset: 1px; }
.contact .btn { justify-self: start; margin-top: 12px; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

.site-foot { max-width: 1080px; margin: 0 auto; padding: 18px 20px 40px; color: var(--ink-3); font-size: 14px;
             border-top: 1px solid var(--line); }
.site-foot p { margin: 4px 0; }
.site-foot a { color: var(--ink-2); }
@media (max-width: 480px) {
  .top { padding: 10px 16px; gap: 12px; }
  .logo span { display: none; }            /* the icon alone, so the links fit */
  .top nav { gap: 13px; }
  .top nav a { font-size: 14.5px; }
  main { padding: 0 16px 32px; }
}

/* ── icons (site/pages.py draws them; each sits beside words that say the same) ── */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1.2em; height: 1.2em; vertical-align: -0.24em; flex: none; color: var(--mark); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 10px 0 0; }
.chips li { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 10px; min-width: 0;
            border: 1px solid var(--line); border-radius: 999px; background: var(--card);
            font-size: 14.5px; line-height: 1.35; color: var(--ink-2); }
.h-text .chips { justify-content: center; }
.stage-text .chips { margin-top: 10px; }
.card figcaption .i { color: var(--tomato-ink); margin-right: 4px; }
.bring dt { display: flex; align-items: center; gap: 9px; }
.bring dt .i, .guide-card > .i { color: var(--tomato-ink); }
.guide-card > .i { width: 30px; height: 30px; margin-bottom: 2px; }
.guide-card i .i { color: inherit; vertical-align: -0.28em; }
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { display: flex; gap: 10px; align-items: baseline; margin: 0 0 10px; color: var(--ink-2); }
.ticks li .i { position: relative; top: 0.22em; }
.ticks b { color: var(--ink); }
.ticks.no .i { color: var(--tomato-ink); }
h2 .i { color: var(--tomato-ink); margin-right: 8px; }
.chips + p { margin-top: 18px; }