/* Janka page: janka/ (23 Oct 2026). Same shapes as plexyz.css, scoped to main.pg-janka.
   Builds on product.css (main.pg-prod). Only what those rules do not already cover. */

main.pg-janka .phero .hshot{max-width:1184px}
main.pg-janka .phero .hshot .shot{background:var(--t-bg)}
main.pg-janka .phero .btns{flex-wrap:wrap}
main.pg-janka .hcap{margin:12px auto 0;max-width:none;text-align:center;font-size:14px;color:var(--muted)}

/* the questions the product answers, as a short dotted list inside a white card */
main.pg-janka .jk-list{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
main.pg-janka .jk-list li{position:relative;padding-left:20px;color:var(--ink)}
main.pg-janka .jk-list li::before{content:"";position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--t,var(--ink))}
main.pg-janka .duo .wcard h2.h32{color:var(--t-ink,var(--ink))}

/* white cards side by side: three across, one on a phone */
main.pg-janka .jk-g{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
main.pg-janka .jk-g .wcard{padding:28px}
main.pg-janka .jk-g .wcard h3{color:var(--t-ink,var(--ink))}
main.pg-janka .jk-g .wcard p{margin-top:8px;color:var(--muted)}
@media (max-width:900px){main.pg-janka .jk-g{grid-template-columns:minmax(0,1fr)}}
@media (max-width:760px){main.pg-janka .jk-g .wcard{padding:22px}}

/* two product screens side by side, each with a caption; columns in the screens' own proportions
   (1100x727 and 1366x674), so both sit at one height */
main.pg-janka .jk-shots{display:grid;grid-template-columns:minmax(0,1.51fr) minmax(0,2.03fr);gap:16px}
main.pg-janka .jk-shots figure{margin:0;display:flex;flex-direction:column;gap:10px}
main.pg-janka .jk-shots .shot{background:var(--t-bg);flex:1;display:flex;align-items:flex-start}
main.pg-janka .jk-shots figcaption{font-size:14px;line-height:1.45;color:var(--muted)}
main.pg-janka .jk-shots figcaption b{color:var(--ink);font-weight:600}
@media (max-width:900px){main.pg-janka .jk-shots{grid-template-columns:minmax(0,1fr)}}

/* where Janka came from: plain rows, the year in the product colour */
main.pg-janka .jk-years{list-style:none;margin:0;padding:0;background:#fff;border-radius:20px;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-janka .jk-years li{display:grid;grid-template-columns:120px minmax(0,1fr);gap:16px;padding:18px 28px;border-top:1px solid var(--line);font-size:16px;line-height:1.5;color:var(--muted)}
main.pg-janka .jk-years li:first-child{border-top:0}
main.pg-janka .jk-years>li>b{font:600 16px/1.5 var(--mono);color:var(--t-ink,var(--ink))}
main.pg-janka .jk-years li span b{font:600 16px/1.5 var(--sans);color:var(--ink)}
main.pg-janka .jk-years a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (max-width:760px){main.pg-janka .jk-years li{grid-template-columns:minmax(0,1fr);gap:2px;padding:14px 20px}}

/* the AntaraX band on dark: the Kain A, then the words (same shape as PLExyz's and Tinara's) */
main.pg-janka .jk-ax .tray.ink{padding:40px 48px}
main.pg-janka .jk-ax .axline{background:transparent;border:0;padding:0;gap:40px;color:#fff}
main.pg-janka .jk-ax .ax-mark{flex:0 0 160px;max-width:160px;margin:0}
main.pg-janka .jk-ax .axa-pc{filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
main.pg-janka .jk-ax .ax-mark:focus-visible{box-shadow:0 0 0 3px #0E1116,0 0 0 5px #FB9800}
main.pg-janka .jk-ax .axl-copy{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:14px}
main.pg-janka .jk-ax .axl-copy p{margin:0;max-width:62ch;color:rgba(255,255,255,.76);font:400 16px/1.55 var(--sans)}
main.pg-janka .jk-ax .axl-copy p.lead{color:#fff;font:500 20px/1.4 var(--sans);letter-spacing:-.01em}
main.pg-janka .jk-ax .axl-copy p a{color:#fff;text-decoration:underline;text-underline-offset:3px}
main.pg-janka .jk-ax .axl-copy .btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
@media (max-width:900px){main.pg-janka .jk-ax .axline{flex-direction:column;align-items:flex-start;gap:24px}main.pg-janka .jk-ax .tray.ink{padding:24px}main.pg-janka .jk-ax .ax-mark{flex:none;width:140px}}