.catalog-shell { min-height: 100vh; display: flex; flex-direction: column; }.catalog-shell main { flex: 1; }.catalog-hero { max-width: 780px; padding: 86px 0 74px; }.catalog-hero h1 { margin: 16px 0 20px; font-size: clamp(3.1rem, 8vw, 7.5rem); line-height: .88; letter-spacing: -.09em; }.catalog-hero > p:last-child { max-width: 510px; margin: 0; color: var(--muted); font-size: 1.08rem; line-height: 1.6; }.catalog-section { padding-top: 18px; border-top: 1px solid var(--ink); }.catalog-heading { display:flex; justify-content:space-between; align-items:baseline; padding-bottom: 21px; }.catalog-heading strong { font: .7rem "DM Mono", monospace; color:var(--muted); text-transform:uppercase; letter-spacing:.08em; }.catalog-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); border-top:1px solid var(--line); border-left:1px solid var(--line); }.course-card { min-height: 280px; position:relative; display:flex; flex-direction:column; justify-content:space-between; padding:25px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); color:var(--ink); text-decoration:none; overflow:hidden; transition: background .25s, color .25s; }.course-card::after { content:""; position:absolute; width:112px; height:112px; right:-40px; bottom:-40px; border:1px solid currentColor; border-radius:50%; opacity:.25; transition:transform .3s; }.course-card:hover { background:var(--inverse); color:var(--inverse-ink); }.course-card:hover::after { transform:scale(2); }.course-card-top, .course-card-bottom { position:relative; z-index:1; }.course-card-index { font: .65rem "DM Mono", monospace; color:var(--muted); }.course-card:hover .course-card-index { color:color-mix(in srgb, var(--inverse-ink) 60%, transparent); }.course-card h2 { max-width:570px; margin:14px 0 0; font-size:clamp(1.45rem, 2.4vw, 2.35rem); line-height:.99; letter-spacing:-.065em; }.course-card-bottom { display:flex; align-items:end; justify-content:space-between; gap:16px; }.course-card-detail { max-width:75%; color:var(--muted); font-size:.79rem; line-height:1.45; }.course-card:hover .course-card-detail { color:color-mix(in srgb, var(--inverse-ink) 72%, transparent); }.course-card-arrow { width:33px; height:33px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; font-size:1.1rem; }.catalog-empty { padding:45px 0; color:var(--muted); text-align:center; }.catalog-shell .site-footer { margin-top:72px; }
@media (max-width: 700px) { .catalog-hero { padding:55px 0 50px; }.catalog-grid { grid-template-columns:1fr; }.course-card { min-height:230px; }.catalog-shell .site-footer { margin-top:48px; } }

.course-card-image { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.16; filter:grayscale(1) contrast(1.15) brightness(1.08); transition:opacity .25s, filter .25s, transform .35s; }.course-card::before { content:""; position:absolute; inset:0; background:linear-gradient(125deg, var(--surface) 15%, color-mix(in srgb, var(--surface) 66%, transparent)); z-index:0; }.course-card::after { z-index:1; }.course-card-top, .course-card-bottom { z-index:2; }.course-card:hover::before { background:color-mix(in srgb, var(--inverse) 70%, transparent); }.course-card:hover .course-card-image { opacity:.29; filter:grayscale(1) contrast(1.2) brightness(.8); transform:scale(1.04); }:root[data-theme="dark"] .course-card-image { opacity:.18; filter:grayscale(1) contrast(1.2) brightness(.45); }:root[data-theme="dark"] .course-card::before { background:linear-gradient(125deg, var(--surface) 12%, color-mix(in srgb, var(--surface) 63%, transparent)); }:root[data-theme="dark"] .course-card:hover::before { background:color-mix(in srgb, var(--inverse) 72%, transparent); }