/* ===== BASE: CSS variables + reset + header/sidebar/layout ===== */
:root{--red:#F22E4B;--red-d:#c41f3a;--header-h:68px;--sb-w:220px;--bg:#0d0d0d;--bg2:#141414;--bg3:#1c1c1c;--border:#252525;--text:#ddd;--text-dim:#888}
    *{box-sizing:border-box;margin:0;padding:0}
    html,body{background:var(--bg);color:var(--text);font-family:'Open Sans',sans-serif;font-size:16px;line-height:1.5;min-height:100vh}
    a{text-decoration:none;color:inherit}img{display:block;max-width:100%}button{cursor:pointer;font-family:inherit;border:none;background:none}
    .site-header{position:sticky;top:0;z-index:300;min-height:var(--header-h);height:auto;background:#111;border-bottom:1px solid #222;display:flex;align-items:center;overflow:visible}
    .header-inner{width:100%;padding:0 16px;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
    .logo-link{display:flex;align-items:center;gap:10px;text-decoration:none;flex-shrink:0;margin:0 20px 0 8px}
    .logo-mark{width:34px;height:34px;background:transparent;border-radius:0;display:flex;align-items:center;justify-content:center;flex-shrink:0}
    .logo-text-top{font-size:25px;font-weight:700;color:#fff;letter-spacing:-0.02em}
    .logo-text-top span{color:var(--red)}
    .page-body{display:flex;align-items:flex-start;min-height:calc(100vh - var(--header-h))}
    .sidebar{width:var(--sb-w);flex-shrink:0;background:var(--bg2);border-right:1px solid var(--border);min-height:calc(100vh - var(--header-h));position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));overflow-y:auto}
    .sidebar.right{border-right:none;border-left:1px solid var(--border)}
    .sidebar.closed,.sidebar.left.closed,.sidebar.right.closed{display:none!important}
    html.sb-left-closed #sidebar-left{display:none!important}
    html.sb-right-closed #sidebar-right{display:none!important}
    html.sb-right-closed #sidebar-right.mob-open{display:flex!important;transform:translateX(0)!important}
    .main-content{flex:1;min-width:0;display:flex;flex-direction:column}.intro{order:1}.site-desc{order:5}.gallery-heading{order:2}.gallery-grid{order:3}.pagination{order:4}
    .gallery-card{float:left;box-sizing:border-box;padding:0 1.5px 3px}
    .gallery-card-inner{position:relative;overflow:hidden;background:#161616}
    .gallery-card img{display:block;width:100%;height:auto}
    .gallery-grid{position:relative;width:100%;overflow-anchor:none}
    .gallery-grid::after{content:'';display:block;clear:both}
    /* Above-the-fold */
    .intro{padding:10px 14px;border-bottom:1px solid #1e1e1e;display:flex;align-items:center;gap:12px}
    .intro-title{font-size:20px;font-weight:700;color:#fff}
    #gallery-grid{overflow-anchor:none}
    .gallery-card{float:none;break-inside:avoid;-webkit-column-break-inside:avoid;width:100%;display:block;margin-bottom:3px;padding:0;box-sizing:border-box}
    .gallery-card-inner{position:relative;overflow:hidden;background:#161616}
    .gallery-card img{display:block;width:100%;height:auto;vertical-align:bottom}
    .gallery-card a{display:block}
    @media(min-width:1800px){#gallery-grid{column-count:6;column-gap:3px}}
    @media(min-width:1400px)and(max-width:1799px){#gallery-grid{column-count:5;column-gap:3px}}
    @media(min-width:1100px)and(max-width:1399px){#gallery-grid{column-count:4;column-gap:3px}}
    @media(min-width:550px)and(max-width:1099px){#gallery-grid{column-count:3;column-gap:3px}}
    @media(max-width:549px){#gallery-grid{column-count:2;column-gap:2px}}

    /* ── sb-toggle.active in dark mode ── */
    html.dark-mode .sb-toggle.active { color: #EF4444 !important; }


    /* ── Dark mode: muted red ── */
    html.dark-mode { --red: #CC3333 !important; --red-d: #AA2222 !important; --accent: #CC3333 !important; --accent-d: #AA2222 !important; --text: #ddd !important; --text-dim: #888 !important; --bg: #0d0d0d !important; --bg2: #141414 !important; --bg3: #1c1c1c !important; --border: #252525 !important; }