/* L10 – Magazine light (no radius) */

body.l10{ background: var(--bg); color: var(--text); }
.l10-portal{ padding-bottom: 30px; }

/* header */
.l10-topline{ background:#111; color:#fff; font-size:12px; }
.l10-topline-inner{ display:flex; align-items:center; gap:12px; padding:8px 0; }
.l10-toplink{ color:#fff; text-decoration:none; opacity:.85; }
.l10-toplink:hover{ opacity:1; }
.l10-topspacer{ flex:1; }
.l10-search{ opacity:.85; }

.l10-navbar{ background:#fff; border-bottom:1px solid var(--border); }
.l10-navbar-inner{ display:flex; align-items:center; justify-content:space-between; padding:14px 0; }
.l10-brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit; }
.l10-brand-mark{
    width:34px; height:34px;
    display:flex; align-items:center; justify-content:center;
    border:1px solid var(--border);
    background:#fff;
    font-weight:900;
}
.l10-brand-text{ font-weight:900; letter-spacing:.2px; }

.l10-nav a{ color: rgba(0,0,0,.75); text-decoration:none; margin-left:14px; font-weight:600; }
.l10-nav a:hover{ color:#000; }

.l10-nav-toggle{ display:none; width:40px; height:40px; padding:0; border:1px solid var(--border); background:#fff; }
.l10-nav-toggle svg line{ stroke: rgba(0,0,0,.65); stroke-width:2; }
.l10-topnav-mobile{ display:none; background:#fff; border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:10px 0; }
.l10-topnav-mobile a{ display:block; padding:10px 16px; text-decoration:none; color:#111; border-top:1px solid var(--border); }
.l10-topnav-mobile a:first-child{ border-top:none; }
.l10-topnav-mobile[data-open="true"]{ display:block; }

/* badges */
.l10-badge{
    display:inline-flex;
    font-size:11px;
    padding:4px 8px;
    border:1px solid var(--border);
    background:#fff;
    color:#333;
    text-transform: lowercase;
}
.l10-badge-green{ border-color: rgba(22,163,74,.25); color: rgba(22,163,74,.9); }
.l10-badge-blue{ border-color: rgba(59,130,246,.25); color: rgba(59,130,246,.9); }

/* featured */
.l10-featured{ margin-top: 18px; }
.l10-featured-grid{
    display:grid;
    grid-template-columns: 280px minmax(0, 1fr) 280px;
    gap: 14px;
}

.l10-card{
    display:block;
    text-decoration:none;
    color:inherit;
    background: var(--card);
    border:1px solid var(--border);
    box-shadow: var(--shadow-soft);
    overflow:hidden;
}
.l10-card-media{ height: 150px; background-size:cover; background-position:center; }
.l10-card-body{ padding: 12px; }
.l10-card-title{ margin-top: 8px; font-weight:800; line-height:1.15; }
.l10-card-meta{ margin-top: 8px; font-size:12px; color: var(--muted); }

.l10-card-sm .l10-card-media{ height: 120px; }
.l10-card-tall .l10-card-media{ height: 320px; }

.l10-hero{
    display:block;
    text-decoration:none;
    color:inherit;
    background: var(--card);
    border:1px solid var(--border);
    box-shadow: var(--shadow);
    overflow:hidden;
}
.l10-hero-media{ height: 320px; background-size:cover; background-position:center; }
.l10-hero-body{ padding: 14px; }
.l10-hero-title{ margin-top: 10px; font-size: 28px; font-weight:900; line-height:1.1; }
.l10-hero-meta{ margin-top: 10px; font-size:12px; color: var(--muted); }

/* main grid */
.l10-main{ margin-top: 18px; }
.l10-main-grid{ display:grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }

.l10-section-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom: 10px; }
.l10-section-title{ font-weight:900; letter-spacing:.2px; }
.l10-section-link{ text-decoration:none; color: rgba(0,0,0,.6); font-weight:700; }
.l10-section-link:hover{ color:#000; }

.l10-latest-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.l10-postcard{
    display:block; text-decoration:none; color:inherit;
    background: var(--card); border:1px solid var(--border); box-shadow: var(--shadow-soft);
    overflow:hidden;
}
.l10-postcard-media{ height: 160px; background-size:cover; background-position:center; }
.l10-postcard-body{ padding: 12px; }
.l10-postcard-title{ margin-top: 8px; font-weight:900; line-height:1.1; }
.l10-postcard-excerpt{ margin-top: 8px; font-size:13px; }
.l10-postcard-meta{ margin-top: 10px; font-size:12px; color: var(--muted); }

/* sidebar */
.l10-side{ display:flex; flex-direction:column; gap: 14px; }
.l10-side-block{ background: var(--card); border:1px solid var(--border); box-shadow: var(--shadow-soft); padding: 12px; }
.l10-side-title{ font-weight:900; margin-bottom: 10px; }

.l10-popular{ display:flex; flex-direction:column; gap: 10px; }
.l10-pop{
    display:grid; grid-template-columns: 56px 1fr; gap: 10px;
    text-decoration:none; color:inherit;
    padding: 8px; border:1px solid var(--border); background:#fff;
}
.l10-pop-thumb{ height: 44px; background-size:cover; background-position:center; }
.l10-pop-title{ font-weight:800; line-height:1.15; }
.l10-pop-meta{ margin-top: 6px; font-size:12px; color: var(--muted); }

.l10-newsletter{ display:flex; flex-direction:column; gap: 10px; }
.l10-check{ font-size:12px; color: var(--muted); display:flex; gap:8px; align-items:center; }
.l10-input{ padding:10px 12px; border:1px solid var(--border); background:#fff; }
.l10-btn{ padding:10px 12px; border:1px solid var(--border); background: rgba(59,130,246,.10); font-weight:800; cursor:pointer; }

.l10-social{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.l10-social-btn{ text-decoration:none; text-align:center; padding:10px; border:1px solid var(--border); background:#fff; color:#111; font-weight:800; }

/* picks row */
.l10-picks{ margin-top: 18px; }
.l10-picks-row{
    display:flex; gap: 12px; overflow-x:auto; padding-bottom: 8px;
}
.l10-pick{
    min-width: 240px;
    text-decoration:none; color:inherit;
    background: var(--card); border:1px solid var(--border); box-shadow: var(--shadow-soft);
    overflow:hidden;
}
.l10-pick-media{ height: 140px; background-size:cover; background-position:center; }
.l10-pick-title{ padding: 10px 12px; font-weight:900; line-height:1.15; }

/* post page */
.l10-post-grid{ margin-top: 18px; display:grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 14px; }
.l10-article{ background: var(--card); border:1px solid var(--border); box-shadow: var(--shadow); padding: 16px; }
.l10-article-title{ margin:0; font-size: 34px; font-weight: 900; line-height:1.05; }
.l10-article-meta{ margin-top: 10px; color: var(--muted); font-size: 13px; display:flex; gap:6px; flex-wrap:wrap; }
.l10-dot{ opacity:.7; }
.l10-cover{ margin-top: 14px; height: 360px; background-size:cover; background-position:center; border:1px solid var(--border); }
.l10-body{ margin-top: 14px; }
.l10-tags a{ color:#111; }

/* headings on pages */
.l10-pagehead{ margin: 18px 0 14px; }
.l10-h1{ margin:0 0 10px; font-size: 34px; font-weight: 900; }
.l10-h2{ margin:18px 0 10px; font-size: 18px; font-weight: 900; }

/* list page */
.l10-list{ display:flex; flex-direction:column; gap: 12px; }
.l10-row{
    display:grid; grid-template-columns: 240px 1fr; gap: 12px;
    text-decoration:none; color:inherit;
    background: var(--card); border:1px solid var(--border); box-shadow: var(--shadow-soft);
}
.l10-row-thumb{ height: 150px; background-size:cover; background-position:center; }
.l10-row-body{ padding: 12px; }
.l10-row-title{ margin-top: 6px; font-weight: 900; font-size: 20px; line-height:1.1; }
.l10-row-excerpt{ margin-top: 8px; }
.l10-row-meta{ margin-top: 10px; color: var(--muted); font-size: 12px; }

/* pagination */
.l10-pagination{
    display:flex; justify-content:space-between; align-items:center;
    margin-top: 16px; padding: 12px;
    background: var(--card); border:1px solid var(--border);
}
.l10-pagebtn{ padding:10px 12px; border:1px solid var(--border); background:#fff; text-decoration:none; color:#111; font-weight:800; }
.l10-pagebtn.is-disabled{ opacity:.4; pointer-events:none; }
.l10-pagenum{ color: var(--muted); font-size: 13px; }

/* responsive */
@media (max-width: 980px){
    .l10-featured-grid{ grid-template-columns: 1fr; }
    .l10-main-grid{ grid-template-columns: 1fr; }
    .l10-latest-grid{ grid-template-columns: 1fr; }
    .l10-post-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 820px){
    .topnav-desktop{ display:none; }
    .l10-nav-toggle{ display:flex; align-items:center; justify-content:center; }
}