/* /kit/<slug>/ binder page articles. Loaded AFTER ls-articles.css, which
   gives these pages their whole look (tokens, hero, field cards = .sheet,
   numbered circles, steps and tips, the end card .buy, related cards). This
   file only adds what the kit articles have and the question lists don't:
   the "start tonight" line, quoted kit labels, filled-page figures, the free
   starter form card and the reading list. Same tokens, no new colors.
   Phone first; one breakpoint up at 760px, as in ls-articles.css. */

/* first screen: the titles are longer than the question lists', so the art
   is smaller and the title wider, which keeps the free-starter line in view */
.ka .a-art{width:min(36vw,140px);margin-bottom:6px}
.ka .a-hero h1{font-size:clamp(29px,7.4vw,48px);max-width:27ch}
.ka .lede{margin-top:12px}

/* the meta line stacks on phones, so a wrapped line never starts with a dot */
@media(max-width:759px){.ka .a-meta{flex-direction:column;gap:2px}.ka .a-meta span+span::before{display:none}}

/* first screen: the free starter, in one line under the meta */
.start-free{width:min(100%,600px);margin:18px auto 0;padding:12px 16px;font-size:16.5px;line-height:1.5;text-align:left;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--c3,#5f7e5a);border-radius:6px}
.start-free strong{color:var(--ink)}
.start-free a{color:var(--terra-d);font-weight:700;text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
.start-free a:hover{color:var(--rust-h)}

/* words printed on the kit page itself */
.kq{font-weight:700;color:var(--ink);background:linear-gradient(transparent 60%,#efdcc6 0);padding:0 1px}
.qt .kq{background:none;padding:0}
.qt .kq+.kq{margin-left:0}
.sheet-note{margin-bottom:4px}
.sheet.fields .qs li{padding:12px 0}

/* inline links to the /kit/ landing: same treatment as the workbook links */
.a-body a.kit-link{color:var(--terra-d);text-decoration:underline;text-decoration-color:currentColor;text-decoration-thickness:1.5px;text-underline-offset:3px}
.a-body a.kit-link:hover{color:var(--rust-h);text-decoration-thickness:2.5px}

/* a filled-in page, as a sheet of paper laid on the table with tape */
.page-fig{position:relative;width:min(88vw,560px);margin:36px auto 6px;padding:10px 10px 12px;background:#fff;box-shadow:0 18px 34px -20px #3d2a1a99,0 1px 3px #3d2a1a26;transform:rotate(-.9deg)}
.page-fig::before{content:"";position:absolute;top:-12px;left:50%;width:110px;height:26px;margin-left:-55px;background:#e8d9b9d0;box-shadow:0 1px 2px #3d2a1a1f;transform:rotate(-3deg)}
.page-fig .pf-link{display:block}
.page-fig img{width:100%;border:1px solid #eee6d8}
.page-fig figcaption{margin-top:9px;font-style:italic;font-size:15px;line-height:1.4;text-align:center;color:var(--muted)}
.page-fig:nth-of-type(even){transform:rotate(.8deg)}
.fig-pair{display:grid;gap:8px;margin-top:10px}
.fig-pair .page-fig{width:min(80vw,420px)}
.fig-pair .page-fig:last-child{transform:rotate(1.2deg)}

/* the free starter: the site's own starter form (build.py form_html) in a
   paper card like the question lists' .list-get */
.starter-get{margin:38px -6px 0;padding:20px 18px 16px;background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--c3,#5f7e5a);border-radius:6px;box-shadow:0 10px 26px -18px #5b3a2160;scroll-margin-top:16px}
.starter-get .eyebrow{color:#4f6b4b;margin-bottom:6px}
.starter-get h2{font-size:25px;line-height:1.2;letter-spacing:-.4px}
.sg-sub{margin-top:8px;font-size:16.5px;line-height:1.5}
.starter-get form{margin-top:14px}
.starter-get label{display:block;font-size:15px;font-weight:700;color:var(--ink);margin-bottom:6px}
.starter-get .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.starter-get .form-row{display:grid;gap:10px}
.starter-get input[type=email]{width:100%;min-height:52px;padding:12px 14px;font:18px var(--sans);color:var(--ink);background:#fff;border:1.5px solid #8a7f6e;border-radius:4px}
.starter-get input[type=email]:focus-visible{outline:3px solid var(--rust);outline-offset:2px;border-color:var(--ink)}
.starter-get button{width:100%;min-height:52px;padding:14px 20px;background:#4f6b4b;color:#fff;border:1px solid #4f6b4b;border-radius:4px;font-size:17px;font-weight:700;line-height:1.25;transition:background .18s}
.starter-get button:hover{background:#3f5a3c}
.starter-get button:focus-visible{outline:3px solid var(--rust);outline-offset:3px}

/* the end card's button goes to /kit/, not straight to checkout */
.buy-btn{gap:10px}

/* more articles from the binder: the cards show a filled page, not folk art */
.kit-sibs img{mix-blend-mode:normal;border:1px solid #e9e2d6;box-shadow:0 8px 16px -10px #3d2a1a80;background:#fff}
.buy-pages img{width:47%;max-width:260px}
.related.read-next{padding-top:6px}
.kit-sibs+.read-next{padding-top:0}
.read-list{margin-top:14px;padding:0;list-style:none;display:grid;gap:10px}
.read-list a{display:block;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-left:4px solid var(--gold);border-radius:6px;text-decoration:none;font:600 18px/1.3 var(--serif);color:var(--ink)}
.read-list a:hover{color:var(--rust);border-color:var(--gold)}
.related:has(+.read-next){padding-bottom:30px}

@media(min-width:760px){
  .ka .a-art{width:170px}
  .buy-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .start-free{text-align:center;border-left-width:1px;border-top:4px solid var(--c3,#5f7e5a)}
  .page-fig{margin-top:42px}
  .fig-pair{grid-template-columns:1fr 1fr;gap:26px;margin-inline:-28px}
  .fig-pair .page-fig{width:auto;margin-inline:0}
  .starter-get{margin-inline:-28px;padding:26px 32px 20px}
  .starter-get .form-row{grid-template-columns:1fr auto}
  .starter-get button{width:auto}
  .kit-sibs{grid-template-columns:repeat(auto-fill,minmax(420px,1fr))}
  .kit-sibs a{grid-template-columns:120px 1fr;grid-template-rows:auto 1fr;column-gap:20px}
  .kit-sibs img{grid-row:1/3;width:120px;margin-bottom:0}
  .read-list{grid-template-columns:repeat(3,1fr)}
}
@media(prefers-reduced-motion:reduce){.starter-get button{transition:none}}

/* Print: the article as written (ls-articles.css prints only the question
   cards of a question list). */
@media print{
  .steps-block,.prose,.page-fig{display:block!important}
  .a-body>p{display:block}
  .start-free,.starter-get,.related,.buy{display:none!important}
  .page-fig{transform:none;box-shadow:none;width:120mm;break-inside:avoid}
  .page-fig::before{display:none}
}
/* pin match (build.py PIN_MATCH_STATIC, 12.11.2026): one line to the smaller guide that holds this page */
.pm-static{width:min(100%,600px);margin:10px auto 0;padding:0 2px;font-size:15.5px;line-height:1.5;text-align:left;color:var(--muted,#5f675e)}
.pm-static strong{color:var(--ink)}
.pm-static a{color:var(--terra-d);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.pm-static a:hover{color:var(--rust-h)}
@media(max-width:620px){.pm-static{text-align:center}}
@media print{.pm-static{display:none!important}}