/* kpsgill-home-a.css — homepage composition A (29 October 2026). Linked from /index.html only.
   Builds on kpsgill-shell.css: the --k-* and --kc-* tokens and the .k-card / .k-cards / .k-fcard / .k-fcards /
   .k-pall / .k-vh classes. Headings Fraunces, body Public Sans, labels IBM Plex Mono.
   Small text uses #5E6470 or darker on cream (never #6F7068 below 14px).
   Order: lead + New and updated · reader routes (phones only) · always-here collections · Explore · search. */

.hpa{display:block;padding:clamp(18px,3vw,30px) 0 0;color:var(--k-ink,#0E1B31)}
.hpa-eb{margin:0 0 6px;font:600 11px/1.4 var(--k-mono,'IBM Plex Mono',ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--k-teal-deep,#175A4A)}
.hpa-h2{margin:0 0 14px;font:500 clamp(1.4rem,2.6vw,1.65rem)/1.2 var(--k-serif,Fraunces,Georgia,serif);letter-spacing:-.005em;color:var(--k-navy,#12233F)}
.hpa-sec{margin:36px 0 0}
.hpa-note{margin:0;font-size:14px;line-height:1.5;color:#5E6470}

/* 1 · the lead investigation and New and updated, side by side */
.hpa-top{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:28px 48px;align-items:start;padding:0 0 28px;border-bottom:1px solid var(--k-line,#E4E2DA)}
.hpa-lead{min-width:0}
.hpa-lead-h{margin:4px 0 12px;font:500 clamp(1.85rem,3.4vw,2.65rem)/1.1 var(--k-serif,Fraunces,Georgia,serif);letter-spacing:-.012em;color:var(--k-navy,#12233F);text-wrap:balance}
.hpa-lead-h a{color:inherit;text-decoration:none}
.hpa-lead-h a:hover{color:inherit;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.hpa-dek{margin:0 0 12px;max-width:62ch;font:400 17px/1.55 var(--k-sans,'Public Sans',system-ui,sans-serif);color:var(--k-ink,#0E1B31)}
.hpa-lead .hpa-note{max-width:62ch}
.hpa-new{min-width:0;scroll-margin-top:84px}

/* the generated block between the k-new markers (tools/kpsgill_registry.py) carries inline styles;
   these rules restyle it in place without touching its markup */
.hpa-new .k-newupd{max-width:none!important;margin:0!important;padding:0!important}
.hpa-new #k-newupd-h{margin:0 0 6px!important;font:500 1.5rem/1.2 var(--k-serif,Fraunces,Georgia,serif)!important;color:var(--k-navy,#12233F)}
.hpa-new .k-newupd>p{margin:0 0 12px!important;font-size:13px!important;line-height:1.5;color:#5E6470!important}
.hpa-new .k-newupd>ul>li{grid-template-columns:6.6rem minmax(0,1fr)!important;gap:2px 12px!important;padding:10px 0!important}
.hpa-new .k-newupd>ul>li>a{font-size:16px;line-height:1.35}
.hpa-new .k-newupd>ul>li>a:hover,.hpa-new .k-newupd>ul>li>a:focus-visible{text-decoration:underline!important;text-underline-offset:3px}
.hpa-new .k-newupd>ul>li>span:first-child{grid-row:span 2}
.hpa-new .k-newupd>ul>li>span:empty{display:none}
.hpa-new .k-newupd>ul>li>span:last-child{grid-column:2;color:#5E6470!important}
.hpa-more{margin:0;padding:2px 0 0;border-top:1px solid var(--k-line,#E4E2DA)}
.hpa-more .k-pall{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.hpa-next{margin:0;padding:10px 0 0;border-top:1px solid var(--k-line,#E4E2DA);font-size:14px;line-height:1.55;color:#3E4A5C;scroll-margin-top:84px}
.hpa-next-k{display:block;margin:0 0 2px;font:600 11px/1.4 var(--k-mono,'IBM Plex Mono',ui-monospace,monospace);letter-spacing:.08em;text-transform:uppercase;color:var(--k-gold-text,#90692E)}

/* 2 · composition B's four reader routes, on phones only, directly under New and updated */
.hpa-routes{display:none}
.hpa-routes .k-cards{grid-template-columns:minmax(0,1fr);gap:10px}
.hpa-routes .k-card{min-height:44px}
.hpa-routes .k-card:hover strong{text-decoration:underline}

/* 3 · always-here collections */
.hpa-perm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.hpa-perm .k-fcard{--kc-f:var(--kc-research,#5B4A8A);display:flex;flex-direction:column;min-width:0}
.hpa-perm .k-fcard h3{margin:0 0 6px;font:600 18px/1.25 var(--k-serif,Fraunces,Georgia,serif);color:var(--k-navy,#12233F)}
.hpa-perm .k-fcard>h3>a{color:var(--k-navy,#12233F)}
.hpa-perm .k-fcard>h3>a:hover{text-decoration:underline;text-underline-offset:3px}
.hpa-perm .k-fcard p{margin:0 0 10px;font-size:14px;line-height:1.5;color:#3E4A5C}
.hpa-perm .k-fcard ul{margin:0}
.hpa-perm .k-fcard li:last-child a{border-bottom:0}
.hpa-standing{margin:auto 0 0;border-top:1px solid var(--k-line,#E4E2DA)}
.hpa-standing summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;cursor:pointer;list-style:none;font:600 12px/1.2 var(--k-mono,'IBM Plex Mono',ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--k-teal-deep,#175A4A)}
.hpa-standing summary::-webkit-details-marker{display:none}
.hpa-standing summary::after{content:"+";font:400 18px/1 var(--k-sans,'Public Sans',system-ui,sans-serif)}
.hpa-standing[open] summary::after{content:"\2212"}
.hpa-standing summary:focus-visible{outline:2px solid var(--k-teal,#1F6F5C);outline-offset:2px}
.hpa-perm .hpa-langs{--kc-f:var(--kc-health,#1F6F5C);grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 28px;align-items:center}
.hpa-perm .hpa-langs p{margin:0}
.hpa-perm .hpa-langs ul{display:flex;flex-wrap:wrap;gap:8px}
.hpa-perm .hpa-langs li a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--k-line,#E4E2DA);border-radius:999px;background:#fff;font-size:16px;color:var(--k-navy,#12233F)}
.hpa-perm .hpa-langs li:last-child a{border-bottom:1px solid var(--k-line,#E4E2DA)}
.hpa-perm .hpa-langs li a:hover{border-color:var(--k-teal-deep,#175A4A);text-decoration:underline}

/* 4 · the twelve Explore gateways (each card's family colour arrives as --kc-f) */
.hpa-count{margin:0 0 8px;font:500 12px/1.4 var(--k-mono,'IBM Plex Mono',ui-monospace,monospace);letter-spacing:.04em;color:#5E6470}
.hpa-lede{margin:0 0 18px;max-width:64ch;font-size:16px;line-height:1.6;color:#2E384A}
.hpa-explore .k-fcards{grid-template-columns:repeat(3,minmax(0,1fr));margin:0;padding:0;list-style:none}
.hpa-explore .k-fcard{display:flex;flex-direction:column;min-width:0}
.hpa-explore .k-fcard h3{margin:0 0 8px;font:600 19px/1.25 var(--k-serif,Fraunces,Georgia,serif)}
.hpa-explore .k-fcard>h3>a:hover{text-decoration:underline;text-underline-offset:3px}
.hpa-explore .k-fcard ul{margin:0 0 10px}
.hpa-explore .k-fcard .k-pall{margin-top:auto;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.hpa-explore-foot{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin:20px 0 0}
.hpa-btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 24px;border-radius:6px;background:var(--k-navy,#12233F);color:#FBFAF7;font-weight:600;text-decoration:none}
.hpa-btn:hover{background:var(--k-teal-deep,#175A4A);color:#fff}
.hpa-explore-foot p{flex:1 1 320px;min-width:0;margin:0;font-size:15px;line-height:1.6;color:#2E384A}

/* 5 · search */
.hpa-sform{display:flex;gap:8px;margin:0 0 8px}
.hpa-sform input{flex:1 1 auto;min-width:0;min-height:48px;padding:0 14px;border:2px solid var(--k-navy,#12233F);border-radius:6px;background:#fff;color:var(--k-ink,#0E1B31);font:400 17px/1.2 var(--k-sans,'Public Sans',system-ui,sans-serif)}
.hpa-sform input::placeholder{color:#5E6470;opacity:1}
.hpa-sform input:focus-visible{outline:3px solid var(--k-teal,#1F6F5C);outline-offset:2px}
.hpa-sform button{flex:0 0 auto;min-height:48px;padding:0 20px;border:0;border-radius:6px;background:var(--k-navy,#12233F);color:#fff;font:600 16px/1 var(--k-sans,'Public Sans',system-ui,sans-serif);cursor:pointer}
.hpa-sform button:hover{background:var(--k-teal-deep,#175A4A)}
.hpa-sform button:focus-visible{outline:3px solid var(--k-gold,#B8863B);outline-offset:2px}

/* previous homepage modules (the dated archive) */
.hpa-prev{margin:36px 0 0;padding:16px 18px;border:1px solid var(--k-line,#E4E2DA);border-left:4px solid var(--k-gold,#B8863B);border-radius:6px;background:var(--k-paper,#FBFAF7)}
.hpa-prev .hpa-eb{color:var(--k-gold-text,#90692E)}
.hpa-prev p{margin:0;max-width:80ch;font-size:15px;line-height:1.6;color:#3E4A5C}

/* desktop: the lead stays in view beside the longer New-and-updated list (offset from the measured sticky header) */
@media (min-width:821px) and (min-height:700px){.hpa-lead{position:sticky;top:var(--k-sticky-top,108px)}}
@media (max-width:1000px){.hpa-explore .k-fcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.hpa-perm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:820px){.hpa-top{grid-template-columns:minmax(0,1fr);gap:26px}}
@media (max-width:640px){.hpa-routes{display:block;margin:28px 0 0}}
@media (max-width:560px){
  .hpa-perm-grid,.hpa-explore .k-fcards{grid-template-columns:minmax(0,1fr)}
  .hpa-perm .hpa-langs{grid-template-columns:minmax(0,1fr)}
  .hpa-new .k-newupd>ul>li{grid-template-columns:5.9rem minmax(0,1fr)!important}
  .hpa-perm .hpa-langs li a{padding:0 13px}
  .hpa-explore .k-fcard{padding:14px 16px}
  .hpa-sform button{padding:0 16px}
}