/* layout.css — navbar, hero, footer */
/* ---------- Navbar ---------- */
.site-nav{background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.brand-mark{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,var(--accent),var(--accent-2));display:grid;place-items:center;color:#fff}
.site-nav .nav-link{color:var(--muted);font-size:.9rem;padding:1rem .9rem;position:relative}
.site-nav .nav-link.active,.site-nav .nav-link:hover{color:var(--text)}
@media(min-width:992px){.site-nav .nav-link.active::after{content:"";position:absolute;inset-inline:.9rem;bottom:0;height:2px;background:var(--accent)}}
.icon-btn{width:38px;height:38px;border-radius:50%;border:0;background:transparent;color:var(--text);display:grid;place-items:center}
.icon-btn:hover{background:var(--surface-2)}
/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;background:radial-gradient(900px 400px at 15% 20%,rgba(108,124,255,.18),transparent),radial-gradient(700px 400px at 90% 60%,rgba(167,139,250,.14),transparent),var(--bg);border-bottom:1px solid var(--line)}
.hero h1{font-weight:800;line-height:1.35;font-size:clamp(1.9rem,4.5vw,3.2rem)}
.search-box{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.35rem .5rem .35rem 1rem;display:flex;align-items:center;max-width:560px}
.search-box input{background:transparent;border:0;color:var(--text);flex:1;padding:.7rem 1rem;min-width:0}
.search-box input:focus{outline:0}
.chip{display:inline-block;background:var(--surface-2);border:1px solid var(--line);color:var(--text);border-radius:8px;padding:.25rem .7rem;font-size:.75rem;cursor:pointer}
.chip:hover{border-color:var(--accent)}
.hero-art{position:relative;min-height:300px}
.hero-art .tile{position:absolute;border-radius:14px;border:1px solid rgba(255,255,255,.15);box-shadow:0 15px 40px rgba(0,0,0,.45)}
.hero-art .tile:nth-child(1){width:46%;height:46%;top:2%;inset-inline-start:2%;transform:rotate(-4deg)}
.hero-art .tile:nth-child(2){width:46%;height:52%;top:0;inset-inline-end:4%;transform:rotate(3deg)}
.hero-art .tile:nth-child(3){width:50%;height:48%;bottom:2%;inset-inline-start:10%;transform:rotate(2deg)}
.hero-art .tile:nth-child(4){width:40%;height:42%;bottom:6%;inset-inline-end:0;transform:rotate(-3deg)}
.hero-art .tag{position:absolute;bottom:0;inset-inline-end:8%;font-style:italic;font-weight:700;color:var(--accent-2);transform:rotate(-8deg);direction:ltr}

.hero-art .tile:nth-child(1){background:linear-gradient(135deg,#f59e0b,#7c3aed)}
.hero-art .tile:nth-child(2){background:linear-gradient(135deg,#0ea5e9,#312e81)}
.hero-art .tile:nth-child(3){background:linear-gradient(135deg,#ec4899,#1e1b4b)}
.hero-art .tile:nth-child(4){background:linear-gradient(135deg,#14b8a6,#1e293b)}
/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);background:var(--surface)}
footer h4{font-size:.9rem;font-weight:700}
footer li{margin-bottom:.4rem;font-size:.82rem;color:var(--muted)}
footer li a:hover{color:var(--text)}
.social a{width:34px;height:34px;display:inline-grid;place-items:center;border-radius:50%;color:var(--muted)}
.social a:hover{background:var(--surface-2);color:var(--text)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

#site-header,#site-footer{display:contents}