/* Layout: header band, filter bar, then a wrapping card grid grouped by track. Single light look matching the pathway page. */
:root{--ground:var(--cream);--goldtext:var(--gold-text-2);--display:'Newsreader',Georgia,'Times New Roman',serif;--body:Arimo,'Helvetica Neue',Helvetica,Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.55}
a{color:var(--navy)} a:hover{color:var(--gold)}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(24px,env(safe-area-inset-left,0px));padding-right:max(24px,env(safe-area-inset-right,0px))}
.hero{background:var(--grid-navy),var(--navy);color:var(--ground)} .hero .wrap>*{animation:fade-up .7s var(--ease-out) both} .hero .wrap>:nth-child(2){animation-delay:.08s} .hero .wrap>:nth-child(3){animation-delay:.16s} .hero .wrap{padding-block:56px 48px;display:flex;flex-direction:column;gap:14px}
.eyebrow{margin:0;font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-300)}
h1{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(34px,5vw,50px);line-height:1.2;text-wrap:balance}
.hero p.lede{margin:0;color:var(--on-navy);max-width:640px;font-size:18px}
.filters{background:var(--ground);border-bottom:1px solid var(--line)}
@media (min-width:1000px){.filters{position:sticky;top:var(--hdr-h,0px);z-index:5;background:rgba(246,244,239,.95);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}
.filters .wrap{padding-block:16px;display:flex;flex-direction:column;gap:10px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .row .lab{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-width:80px}
.chip{font:inherit;font-size:14px;font-weight:600;min-height:40px;padding:8px 16px;border-radius:999px;border:1.5px solid var(--line);background:var(--card);color:var(--navy);cursor:pointer;transition:background-color var(--dur),border-color var(--dur),color var(--dur),transform var(--dur) var(--ease-out)} .chip:hover{border-color:var(--navy);transform:translateY(-1px)} .chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.chip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.count{font-size:14px;color:var(--muted)}
.sel{font:inherit;font-size:14px;font-weight:600;min-height:40px;padding:8px 38px 8px 16px;border-radius:999px;border:1.5px solid var(--line);color:var(--navy);cursor:pointer;-webkit-appearance:none;appearance:none;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%231f2a5c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E") no-repeat right 15px center;transition:border-color var(--dur)} .sel:hover{border-color:var(--navy)} .sel:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
main .wrap{padding-block:32px 72px;display:flex;flex-direction:column;gap:44px}
.track h2{margin:0 0 4px;font-family:var(--display);font-weight:600;font-size:28px;color:var(--navy)} .track .tn{margin:0 0 18px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:22px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-sm);transition:transform var(--dur) var(--ease-out),box-shadow var(--dur) var(--ease-out),border-color var(--dur);animation:fade-up .5s var(--ease-out) both}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:transparent}
.grid>.card:nth-child(2){animation-delay:40ms}.grid>.card:nth-child(3){animation-delay:80ms}.grid>.card:nth-child(4){animation-delay:120ms}.grid>.card:nth-child(5){animation-delay:160ms}.grid>.card:nth-child(6){animation-delay:200ms}.grid>.card:nth-child(7){animation-delay:240ms}.grid>.card:nth-child(n+8){animation-delay:280ms}
.card .pic{position:relative;overflow:hidden} .card img{display:block;width:100%;height:170px;object-fit:cover;background:var(--blue-100);transition:transform .5s var(--ease-out)} .card:hover img{transform:scale(1.04)}
.code{position:absolute;left:12px;top:12px;padding:3px 10px;border-radius:6px;background:var(--navy);color:#fff;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.card .body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1 1 auto}
.card h3{margin:0;font-family:var(--display);font-weight:600;font-size:18px;line-height:1.25;color:var(--navy);text-wrap:balance}
.card p{margin:0;font-size:14px;color:var(--muted);flex:1 1 auto}
.meta{display:flex;flex-wrap:wrap;gap:6px}
.tag{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--blue-50);color:var(--blue)}
.st{font-size:12px;font-weight:700;padding:3px 10px;border-radius:999px} .st.ok{background:var(--ok-bg);color:var(--ok)} .st.dev{background:var(--dev-bg);color:var(--goldtext)} .st.plan{background:var(--blue-50);color:var(--navy)}
.empty{padding:40px;text-align:center;color:var(--muted)}
footer{background:var(--navy-800);color:var(--on-navy-2);font-size:13px} footer .wrap{padding-block:36px;display:flex;flex-direction:column;gap:10px} footer b{color:var(--ground)}