.page-head{padding:clamp(40px, 6vw, 72px) 0 var(--space-6);position:relative;overflow:hidden}.page-head:before{content:"";z-index:-1;pointer-events:none;background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);opacity:.6;background-size:44px 44px;position:absolute;inset:0;-webkit-mask-image:radial-gradient(60% 80% at 70% 30%,#000 10%,#0000 70%);mask-image:radial-gradient(60% 80% at 70% 30%,#000 10%,#0000 70%)}.page-head h1{letter-spacing:-.035em;font-size:clamp(2.4rem,1.6rem + 3.6vw,4.2rem);font-weight:800;line-height:1.05}.page-head h1 span{color:var(--accent)}.page-head p{color:var(--muted);font-size:var(--fs-lg);max-width:46ch;margin:var(--space-4) 0 0}.chip{border:1px solid var(--line);background:var(--surface);color:var(--muted);font-size:var(--fs-xs);transition:all .2s var(--ease);border-radius:999px;padding:6px 13px;font-weight:500}.chip:hover{border-color:var(--line-strong);color:var(--ink)}.chip[aria-pressed=true]{border-color:var(--teal);background:var(--teal-soft);color:var(--teal)}.sec-title{justify-content:space-between;align-items:end;gap:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap;display:flex}.sec-title h2{font-size:clamp(1.5rem,1.2rem + 1.1vw,2.1rem)}.sec-title p{color:var(--muted);font-size:var(--fs-sm);margin:4px 0 0}.bridge{gap:var(--space-3);padding-bottom:var(--section);grid-template-columns:1fr 1fr;display:grid}.bridge a{justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-5);border-radius:var(--radius-md);transition:transform .3s var(--ease);text-decoration:none;display:flex}.bridge a:hover{transform:translateY(-2px)}.bridge .b1{background:var(--inverse-bg);color:var(--inverse-ink)}.bridge .b2{background:var(--teal-soft)}.bridge strong{font-size:1.1rem;font-weight:600;display:block}.bridge .sub{font-size:var(--fs-xs);opacity:.75}.bridge svg{flex:none;width:22px;height:22px}@media (max-width:860px){.bridge{grid-template-columns:1fr}}.articles{padding-bottom:var(--section)}.articles-bar{justify-content:space-between;align-items:center;gap:var(--space-4);margin-bottom:var(--space-5);flex-wrap:wrap;display:flex}.result-count{font-size:var(--fs-sm);color:var(--muted)}.grid{gap:var(--space-4);grid-template-columns:repeat(3,1fr);display:grid}.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);transition:transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);animation:fade-in .45s var(--ease) both;animation-delay:calc(var(--i,0) * 50ms);flex-direction:column;text-decoration:none;display:flex;overflow:hidden}@keyframes fade-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}.card:hover{box-shadow:var(--shadow);border-color:var(--line-strong);transform:translateY(-4px)}.card-art{place-items:center;height:150px;display:grid;position:relative;overflow:hidden}.card-art svg{width:64%;height:80%;color:var(--ink);transition:transform .6s var(--ease)}.card:hover .card-art svg{transform:scale(1.05)rotate(-1.5deg)}.tone-teal{background:var(--teal-soft)}.tone-accent{background:var(--accent-soft)}.tone-sand{background:var(--surface-2)}.card-body{padding:var(--space-5);gap:var(--space-3);flex-direction:column;flex:1;display:flex}.card-meta{gap:var(--space-2);font-size:var(--fs-xs);color:var(--muted);align-items:center;display:flex}.card-meta .kind{color:var(--accent-ink);font-weight:600}.card-meta .sep{opacity:.5;background:currentColor;border-radius:50%;width:3px;height:3px}.card h3{letter-spacing:-.015em;font-size:1.2rem;font-weight:600;line-height:1.3}.card p{color:var(--muted);font-size:var(--fs-sm);margin:0;line-height:1.6}.card-foot{padding-top:var(--space-3);font-size:var(--fs-xs);color:var(--muted);justify-content:space-between;align-items:center;margin-top:auto;display:flex}.level{align-items:center;gap:3px;display:inline-flex}.level i{background:var(--line-strong);border-radius:2px;width:6px;height:12px}.level i.on{background:var(--teal)}.card-foot .go{border:1px solid var(--line);width:32px;height:32px;color:var(--ink);transition:all .3s var(--ease);border-radius:50%;place-items:center;display:grid}.card-foot .go svg{width:15px;height:15px}.card:hover .go{background:var(--ink);color:var(--surface);border-color:var(--ink)}.card.wide{flex-direction:row;grid-column:span 2}.card.wide .card-art{flex:0 0 44%;height:auto}.card.wide h3{font-size:1.55rem}.path{gap:var(--space-3);counter-reset:p;grid-template-columns:repeat(3,1fr);display:grid}.path a{padding:var(--space-5);border-radius:var(--radius-md);background:var(--surface);border:1px solid var(--line);transition:transform .3s var(--ease), box-shadow .3s var(--ease);gap:6px;padding-top:64px;text-decoration:none;display:grid;position:relative}.path a:hover{box-shadow:var(--shadow);transform:translateY(-3px)}.path a:before{counter-increment:p;content:counter(p);top:var(--space-5);right:var(--space-5);background:var(--accent);width:32px;height:32px;color:var(--on-accent);font-weight:700;font-size:var(--fs-sm);border-radius:50%;place-items:center;display:grid;position:absolute}.path a:not(:last-child):after{content:"";top:calc(var(--space-5) + 16px);right:calc(var(--space-5) + 44px);left:var(--space-5);border-top:2px dashed var(--line-strong);position:absolute}.path span{font-size:var(--fs-xs);color:var(--accent-ink);font-weight:600}.path strong{font-size:1.1rem;font-weight:600;line-height:1.35}.path small{font-size:var(--fs-xs);color:var(--muted)}.start{padding:var(--space-6) 0 var(--space-7)}.topics{gap:var(--space-2);flex-wrap:wrap;display:flex}.all{padding-bottom:var(--space-7)}@media (max-width:960px){.grid{grid-template-columns:1fr 1fr}}@media (max-width:720px){.grid,.path{grid-template-columns:1fr}.card.wide{flex-direction:column;grid-column:auto}.card.wide .card-art{flex:none;height:150px}.path a:not(:last-child):after{display:none}}
