:root{
    --ink:#0a1c2e;
    --paper:#f7f3ea;
    --accent:#c39b4e;
    --accent2:#7f5a1f;
    --muted:#6c7886;
}


 h1,h2{
    margin:.25rem 0;
    font-weight:800
}
 p{
    margin:.5rem 0;
    line-height:1.6
}
 a{
    color:var(--ink);
    text-decoration:none
}
 .kicker{
    font-size:.8rem;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--accent2);
    font-weight:700
}
 .muted{
    color:var(--muted)
}
 .tiny{
    font-size:.85rem
}

 .btn.ghost{
    background:transparent
}

 .card{
    background:#fff;
    border-radius:1rem;
    box-shadow:0 8px 28px rgba(10,28,46,.08);
    overflow:hidden
}
 .grid{
    display:grid;
    gap:14px
}
 .grid-2{
    grid-template-columns:2fr 1fr
}
 @media (max-width:1000px){
    .grid-2{
        grid-template-columns:1fr
    }
}
 .vgrid{
    display:grid;
    gap:16px;
    grid-template-columns:repeat(12,minmax(0,1fr))
}
 .vgrid > article{
    grid-column:span 6
}
 .vgrid > article.feature{
    grid-column:span 12
}
 @media (max-width:900px){
    .vgrid>article{
        grid-column:span 12
    }
}
 .thumb{
    position:relative;
    aspect-ratio:16/9;
    background:#000
}
 .thumb iframe,.thumb img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    border:0;
    object-fit:cover
}
 .meta{
    display:flex;
    justify-content:space-between;
    gap:.75rem;
    align-items:center
}
 .filters{
    display:flex;
    flex-wrap:wrap;
    gap:.5rem
}
 .filters .btn[aria-pressed="true"]{
    background:var(--ink);
    color:#fff
}
 .pill{
    display:inline-block;
    padding:.15rem .55rem;
    border:1px solid #cbb588;
    border-radius:999px;
    background:linear-gradient(180deg,#f4ead7,#e9dbbf);
    font-size:.75rem
}
 .notice{
    padding:1rem;
    border-radius:.7rem;
    background:#fff5d7;
    border:1px solid #e8c572
}
 .input{
    width:100%;
    padding:.7rem .85rem;
    border:1px solid #cfc6b6;
    border-radius:.6rem;
    background:#fff
}
 .row{
    display:flex;
    gap:.65rem;
    flex-wrap:wrap
}
 .divider{
    height:1px;
    background:linear-gradient(90deg,transparent,#cbb588,transparent);
    border:0;
    margin:1.25rem 0
}
.hero {
    margin-bottom: 4vh;

}