/* ---------- Pretendard (local variable font) ---------- */
@font-face {
    font-family: "Pretendard Variable";
    font-weight: 45 920;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/PretendardVariable.woff2") format("woff2-variations");
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
    color: #111;
    background: #fff;
    line-height: 1.5;
    font-size: 14px;
}

a {
    color: inherit;
    text-decoration: none;
}

img,
svg {
    display: block;
    max-width: 100%;
}

ul {
    list-style: none;
}

/* ---------- Layout ---------- */
.layout {
    display: flex;
    min-height: 100vh;
}

/* ---------- Sidebar (editorial category nav) ---------- */
.sidebar {
    width: 240px;
    flex-shrink: 0;
    padding: 46px 34px;
    border-right: 1px solid #ededed;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: #fff;
}

.sidebar-top {
    display: flex;
    flex-direction: column;
}

/* FLAMEFRAME wordmark — links home. The PNG is white-on-transparent, so it is
   used as a mask and painted with currentColor; that way one file works in
   both the light and dark themes, and hover just changes `color`. */
.logo {
    display: block;
    width: 168px;
    max-width: 100%;
    margin-bottom: 6px;
    color: #111;
    transition: color 0.2s ease;
}

/* Brand orange, sampled straight from the favicon. The light tint is the same
   hue mixed with white — it is what hover uses, and what the dark theme needs
   for the deep orange to stay legible on a near-black background. */
:root {
    --brand-orange: #dd3305;
    --brand-orange-light: #e4603c;
}

.logo:hover {
    color: var(--brand-orange-light);
}

.logo-mark {
    display: block;
    width: 100%;
    aspect-ratio: 424 / 45;
    background-color: currentColor;
    -webkit-mask: url("../images/flameframe-logo.png") no-repeat left center / contain;
    mask: url("../images/flameframe-logo.png") no-repeat left center / contain;
}

.profile-role {
    font-size: 12px;
    color: #9a9a9a;
    font-weight: 500;
    margin-bottom: 0;
}
/* studio mark + REC dot, sitting just above the tagline (as on flameframe.studio).
   The big margin-top is the empty gap under the logo (vh-based, no JS). */
.studio-mark {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: clamp(120px, 26vh, 320px) 0 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #111;
}

.rec-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    animation: rec-blink 2.6s ease-in-out infinite;
}

/* holds lit for most of the cycle, then one slow dip — a recording tally,
   not a flicker */
@keyframes rec-blink {
    0%, 35%   { opacity: 1; }
    55%       { opacity: 0.12; }
    75%, 100% { opacity: 1; }
}

/* respect users who ask for less motion */
@media (prefers-reduced-motion: reduce) {
    .rec-dot { animation: none; }
}

/* tagline sits under the studio mark, sized to stay on ONE line
   inside the 171px sidebar column — hence 10px. */
.tagline {
    font-size: 10px;
    line-height: 1.6;
    letter-spacing: 0.01em;
    white-space: nowrap;
    color: #555;
    margin: 0 0 18px;
}

.tagline-en { color: #9a9a9a; }

/* divider line above the menu */
.nav { position: relative; padding-top: 20px; }
.nav::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 1px; background: #e7e7e7;
}

.nav ul {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nav a {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 14px;
    font-weight: 500;
    color: #444;
    letter-spacing: -0.005em;
    padding: 7px 0;
    transition: color 0.15s ease, transform 0.18s ease;
}

/* the dot always occupies its slot, so fading it in on hover costs no reflow */
.nav a::before {
    content: "";
    width: 6px; height: 6px; border-radius: 50%;
    background: transparent;
    flex-shrink: 0;
    transition: background-color 0.15s ease;
}

/* hover: text darkens, the dot previews in the accent, whole row eases right */
.nav a:hover {
    color: #111;
    transform: translateX(3px);
}

.nav a:hover::before { background: var(--brand-orange-light); }

/* the current page is already 'here' — it should not drift on hover */
.nav a.active:hover { transform: none; }

/* current page marked in the brand orange, dot included */
.nav a.active { color: var(--brand-orange); font-weight: 700; }
.nav a.active::before { background: var(--brand-orange); }

.sidebar-bottom small {
    font-size: 11px;
    color: #999;
    letter-spacing: 0.02em;
}

/* ---------- Grid area ---------- */
.grid-area {
    flex: 1;
    padding: 60px 50px;
    min-width: 0;
}

/* ---------- Category filter pills (minimal, monochrome) ---------- */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 28px;
}

.filter-pill {
    font-family: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #999;
    background: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 999px;
    padding: 5px 12px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease,
                background-color 0.15s ease;
}

/* hover previews the key colour on the outline before you commit */
.filter-pill:hover {
    color: var(--brand-orange);
    border-color: var(--brand-orange-light);
}

/* the chosen filter carries the key colour as a solid fill */
.filter-pill.is-active {
    color: #fff;
    background: var(--brand-orange);
    border-color: var(--brand-orange);
    font-weight: 700;
}

.filter-pill.is-active:hover {
    color: #fff;
    border-color: var(--brand-orange);
}

/* ---------- Masonry (JS-distributed columns, left-to-right flow) ---------- */
.masonry {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 22px;
}

/* Fixed-width columns: only the NUMBER of columns changes with screen size,
   the card/image size stays constant. Width is set inline by js/script.js. */
.masonry-col {
    display: flex;
    flex-direction: column;
    gap: 32px;
    flex: 0 0 auto;
    min-width: 0;
}

/* Fallback before JS runs: simple multi-column so content is never a single wide row */
.masonry:not(.masonry--ready) {
    display: block;
    column-count: 5;
    column-gap: 22px;
}

.masonry:not(.masonry--ready) .card {
    break-inside: avoid;
    margin-bottom: 32px;
}

.card {
    width: 100%;
}

.card-thumb {
    display: block;
    width: 100%;
    background: #f5f5f5;
    overflow: hidden;
    margin-bottom: 12px;
    position: relative;
    transition: opacity 0.25s ease;
    border-radius: 6px;
}

.card-thumb:hover {
    opacity: 0.85;
}

.card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.card-thumb:hover img {
    transform: scale(1.03);
}

/* Placeholder (no image yet) */
.placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #ececec, #dcdcdc);
    color: #555;
    font-size: 11px;
    text-align: center;
    padding: 8px;
}

.placeholder::after {
    content: attr(data-label);
    font-weight: 500;
    letter-spacing: 0.02em;
}

.card-title-link {
    display: block;
    text-decoration: none;
}

/* colour the title with the key orange rather than fading it out — a dimmed
   title reads as "disabled", the accent reads as "clickable" */
.card-title-link:hover .card-title {
    color: var(--brand-orange);
}

.card-title {
    transition: color 0.18s ease;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.4;
    color: #111;
    margin-bottom: 8px;
    word-break: keep-all;
}

.card-desc {
    font-size: 11px;
    line-height: 1.55;
    color: #666;
    word-break: keep-all;
    margin-top: 6px;
    /* clamp to a few lines, ending with … like the reference */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-clamp: 4;
    overflow: hidden;
}

/* ---------- Mobile sidebar collapse ---------- */
@media (max-width: 900px) {
    .layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        height: auto;
        position: static;
        padding: 32px 24px;
        border-right: none;
        border-bottom: 1px solid #f0f0f0;
    }

    .profile-role {
        margin-bottom: 24px;
    }

    /* on mobile the sidebar is a top bar — no big gap, no divider. The narrow
       desktop column is gone here, so the tagline can go back to full size. */
    .studio-mark {
        margin: 0 0 6px;
    }

    .tagline {
        margin: 0 0 24px;
        font-size: 13px;
        letter-spacing: normal;
    }

    .nav { padding-top: 0; }
    .nav::before { display: none; }

    .nav ul {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px 20px;
    }

    .nav a { padding: 4px 0; }

    .sidebar-bottom {
        margin-top: 32px;
    }

    .grid-area {
        padding: 32px 24px;
    }
}

/* ---------- Project detail page ---------- */
.project {
    max-width: 900px;
    margin: 0 auto;
}

.project-back {
    display: inline-block;
    font-size: 12px;
    color: #999;
    letter-spacing: 0.04em;
    margin-bottom: 40px;
    transition: color 0.2s ease;
}

.project-back:hover {
    color: #111;
}

.project-head {
    margin-bottom: 32px;
}

.project-title {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
    margin-bottom: 18px;
    word-break: keep-all;
}

.project-credits {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
}

.project-credits li {
    font-size: 12.5px;
    color: #777;
    position: relative;
}

.project-credits li:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -10px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 11px;
    background: #ddd;
}

/* Small label shown above a video */
.project-video-label {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    letter-spacing: 0.02em;
    margin-bottom: 10px;
}

/* Hero video — responsive 16:9 */
.project-video {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    margin-bottom: 36px;
    overflow: hidden;
}

.project-video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.project-video video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* vertical (9:16) video — narrow, centered player */
.project-video--vertical {
    aspect-ratio: 9 / 16;
    width: min(100%, 400px);
    margin-left: auto;
    margin-right: auto;
}

/* YouTube facade — clean thumbnail + play button until clicked */
.js-yt-facade { cursor: pointer; }

.js-yt-facade img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.video-play-btn {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.55);
    transition: background 0.2s ease, transform 0.2s ease;
}

.video-play-btn::after {
    content: "";
    position: absolute;
    left: 55%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
}

.js-yt-facade:hover .video-play-btn {
    background: rgba(0, 0, 0, 0.75);
    transform: translate(-50%, -50%) scale(1.06);
}

/* Instagram embed — taller box to fit IG's header/footer chrome */
.project-video--vertical.project-video--instagram {
    aspect-ratio: 1 / 2.03;
}

/* two vertical videos side by side */
.project-video-row {
    display: flex;
    gap: 14px;
    justify-content: center;
    align-items: center; /* mixed-ratio videos center against taller ones */
    margin-bottom: 36px;
}

/* on wide screens the video row breaks out of the 900px text column
   and uses the empty side space, so the players render larger */
@media (min-width: 901px) {
    .project-video-row,
    .project-gallery--wide {
        width: min(1240px, calc(100vw - 400px));
        margin-left: 50%;
        transform: translateX(-50%);
    }

    /* project--wide: the whole page (text included) uses the wider column,
       so nothing needs to break out — everything shares one left edge */
    .project--wide {
        max-width: min(1240px, calc(100vw - 400px));
    }

    .project--wide .project-video-row,
    .project--wide .project-gallery--wide {
        width: 100%;
        margin-left: 0;
        transform: none;
    }

    /* rows of vertical players are capped at 400px each, so the column follows
       the row's real width — otherwise the copy stretches away from the media */
    .project--wide.project--vertical {
        max-width: min(
            min(1240px, calc(100vw - 400px)),
            calc(var(--vcols, 2) * 400px + (var(--vcols, 2) - 1) * 14px)
        );
    }
}

.project-video-row .project-video--vertical {
    flex: 0 0 auto;
    width: calc((100% - (var(--vcols, 2) - 1) * 14px) / var(--vcols, 2));
    max-width: 400px;
    margin: 0;
}

@media (max-width: 600px) {
    .project-video-row { flex-direction: column; align-items: center; }
    .project-video-row .project-video--vertical { width: min(100%, 400px); }
}

.project-video--empty {
    background: linear-gradient(135deg, #ececec, #dcdcdc);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px;
}

.project-video--empty span {
    font-size: 12.5px;
    color: #666;
    line-height: 1.6;
}

.project-video--empty code {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 11.5px;
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 5px;
    border-radius: 3px;
}

.project-body {
    margin-bottom: 48px;
}

/* intro body shown above the videos — sit close to them */
.project-body--lead {
    margin-bottom: 16px;
}

.project-body p {
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    word-break: keep-all;
    white-space: pre-line;
}

/* Stills gallery: large main image + clickable thumbnail strip */
.project-gallery {
    margin-bottom: 64px;
}

.project-gallery-main {
    width: 100%;
    background: #f5f5f5;
    margin-bottom: 12px;
    overflow: hidden;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-gallery-main img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.22s ease;
}

/* vertical (9:16) stills — same narrow width as .project-video--vertical,
   centered in the column */
.project-gallery--vertical .project-gallery-main {
    width: min(100%, 400px);
    margin-left: auto;
    margin-right: auto;
}

.project-gallery--vertical .project-gallery-thumbs {
    justify-content: center;
}

.project-gallery-thumbs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.project-gallery-thumb {
    height: 60px;
    padding: 0;
    border: 0;
    background: #f5f5f5;
    cursor: pointer;
    overflow: hidden;
    opacity: 0.5;
    transition: opacity 0.2s ease;
    flex: 0 0 auto;
}

.project-gallery-thumb img {
    height: 100%;
    width: auto;
    display: block;
}

.project-gallery-thumb:hover {
    opacity: 0.85;
}

.project-gallery-thumb.is-active {
    opacity: 1;
    outline: 2px solid #111;
    outline-offset: -2px;
}

/* Per-section photo grid (editorial layout: video + its own grid) */
.project-grid {
    column-count: 3;
    column-gap: 10px;
    margin: 12px 0 44px;
}

.project-grid-item {
    break-inside: avoid;
    margin: 0 0 10px;
    background: #f5f5f5;
    overflow: hidden;
}

.project-grid-item img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 900px) {
    .project-grid { column-count: 2; }
}

@media (max-width: 560px) {
    .project-grid { column-count: 1; }
}

/* Editorial sections: heading (above video) + caption (below video) + gallery */
.project-section {
    margin-bottom: 56px;
}

.project-section-heading {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.01em;
    margin: 0 0 18px;
    word-break: keep-all;
}

.project-section .project-video {
    margin-bottom: 16px;
}

.project-section .project-video-row:last-child {
    margin-bottom: 0;
}

.project-section-caption {
    font-size: 14px;
    color: #555;
    word-break: keep-all;
    margin: 0 0 24px;
}

.project-section-caption p {
    line-height: 1.85;
    margin: 0 0 1.4em;
}

.project-section-caption p:last-child {
    margin-bottom: 0;
}

.project-section .project-gallery {
    margin-bottom: 0;
    /* photos a bit narrower than the full-width video (height shrinks in proportion) */
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Prev / Next */
.project-nav {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    border-top: 1px solid #eee;
    padding-top: 28px;
}

.project-nav-link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 45%;
    transition: opacity 0.2s ease;
}

.project-nav-link:hover {
    opacity: 0.55;
}

.project-nav-link.next {
    text-align: right;
    margin-left: auto;
}

.project-nav-link .dir {
    font-size: 11px;
    color: #999;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.project-nav-link .t {
    font-size: 13px;
    font-weight: 600;
    color: #111;
    line-height: 1.4;
    word-break: keep-all;
}

@media (max-width: 900px) {
    .project-title {
        font-size: 22px;
    }
}

/* Full project grid shown again at the bottom of a detail page */
.more-works {
    margin-top: 72px;
    padding-top: 44px;
    border-top: 1px solid #eee;
}

/* ---------- Hero banner (featured projects slideshow) ---------- */
.hero { position: relative; width: 100%; height: 36vh; min-height: 280px; max-height: 390px; overflow: hidden; background: #111; margin-bottom: 40px; border-radius: 14px; }
.hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 0.9s ease; pointer-events: none; }
.hero-slide.is-active { opacity: 1; pointer-events: auto; }
.hero-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.hero-slide::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(270deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.22) 45%, rgba(0,0,0,0) 70%); }
.hero-text { position: absolute; right: 44px; top: 50%; transform: translateY(-50%); max-width: 360px; z-index: 2;
    color: #fff; text-decoration: none; display: flex; flex-direction: column; align-items: flex-end; text-align: right; }
.hero-pill { font-size: 7.5px; letter-spacing: 0.1em; color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.42); border-radius: 999px; padding: 2.5px 8px; margin-bottom: 11px; }
.hero-text h2 { font-size: clamp(15px, 1.5vw, 20px); font-weight: 700; letter-spacing: -0.01em;
    line-height: 1.45; margin-bottom: 9px; max-width: 100%;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-text p { font-size: 10.5px; line-height: 1.7; color: rgba(255,255,255,0.82); word-break: keep-all; max-width: 310px;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hero-dots { position: absolute; right: 44px; bottom: 24px; z-index: 3; display: flex; gap: 14px; }
.hero-dots button { background: none; border: none; cursor: pointer; font-size: 11px; letter-spacing: 0.04em; color: rgba(255,255,255,0.5); padding: 4px 2px; transition: color 0.2s ease; }
.hero-dots button.is-active { color: #fff; }
@media (max-width: 700px) {
    .hero { height: 52vh; }
    .hero-text { right: 22px; left: 22px; max-width: none; }
    .hero-text h2 { font-size: 17px; }
    .hero-dots { right: 22px; }
}

/* =========================================================================
   THEME TOGGLE + DARK MODE
   ========================================================================= */
/* stack the switch above the copyright */
.sidebar-bottom {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
}

/* Theme toggle — sits under the menu and borrows the nav's own language:
   same dot column, same muted text, orange on hover. The label is the mode you
   will switch TO, so the control reads as an action rather than a status. */
.theme-switch {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 18px;
    padding: 7px 0;
    border: none;
    background: none;
    font-family: inherit;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: #9a9a9a;
    cursor: pointer;
    transition: color 0.15s ease;
}

.theme-switch::after {
    content: "Dark";
}

.theme-switch[aria-checked="true"]::after {
    content: "Light";
}

.theme-switch:hover { color: var(--brand-orange); }

/* half-filled dot — the classic contrast mark, sized to the nav bullets */
.theme-switch-dot {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(90deg, currentColor 0 50%, transparent 50% 100%);
    box-shadow: inset 0 0 0 1px currentColor;
    transition: transform 0.3s ease;
}

.theme-switch[aria-checked="true"] .theme-switch-dot {
    transform: rotate(180deg);
}

/* ---- Dark theme ---- */
:root[data-theme="dark"] body { color: #ececec; background: #0f0f10; }

:root[data-theme="dark"] .sidebar { background: #0f0f10; border-right-color: #262626; }
:root[data-theme="dark"] .profile-role { color: #8a8a8a; }
:root[data-theme="dark"] .logo { color: #fff; }
:root[data-theme="dark"] .logo:hover { color: var(--brand-orange-light); }
:root[data-theme="dark"] .studio-mark { color: #ececec; }
:root[data-theme="dark"] .tagline { color: #b2b2b2; }
:root[data-theme="dark"] .tagline-en { color: #7d7d7d; }
:root[data-theme="dark"] .nav::before { background: #2a2a2a; }
:root[data-theme="dark"] .nav a { color: #b2b2b2; }
:root[data-theme="dark"] .nav a:hover { color: #fff; }
:root[data-theme="dark"] .theme-switch { color: #7d7d7d; }
:root[data-theme="dark"] .theme-switch:hover { color: var(--brand-orange-light); }
:root[data-theme="dark"] .nav a:hover::before { background: var(--brand-orange-light); }
/* the deep orange goes muddy on near-black, so the active item uses the tint */
:root[data-theme="dark"] .nav a.active { color: var(--brand-orange-light); }
:root[data-theme="dark"] .nav a.active::before { background: var(--brand-orange-light); }
:root[data-theme="dark"] .sidebar-bottom small { color: #6f6f6f; }


/* filter pills */
:root[data-theme="dark"] .filter-pill { color: #8a8a8a; border-color: #333; }
:root[data-theme="dark"] .filter-pill:hover { color: var(--brand-orange-light); border-color: var(--brand-orange-light); }
:root[data-theme="dark"] .filter-pill.is-active { color: #fff; background: var(--brand-orange); border-color: var(--brand-orange); }
:root[data-theme="dark"] .filter-pill.is-active:hover { color: #fff; border-color: var(--brand-orange); }

/* cards */
:root[data-theme="dark"] .card-thumb { background: #1b1b1d; }
:root[data-theme="dark"] .card-title { color: #ececec; }
:root[data-theme="dark"] .card-title-link:hover .card-title { color: var(--brand-orange-light); }
:root[data-theme="dark"] .card-desc { color: #9a9a9a; }
:root[data-theme="dark"] .placeholder { background: linear-gradient(135deg, #232326, #17171a); color: #888; }

/* mobile sidebar divider */
:root[data-theme="dark"] .sidebar { border-bottom-color: #262626; }

/* project detail */
:root[data-theme="dark"] .project-back { color: #8a8a8a; }
:root[data-theme="dark"] .project-back:hover { color: #fff; }
:root[data-theme="dark"] .project-credits li { color: #9a9a9a; }
:root[data-theme="dark"] .project-credits li:not(:last-child)::after { background: #3a3a3a; }
:root[data-theme="dark"] .project-body p { color: #cfcfcf; }
:root[data-theme="dark"] .project-section-heading { color: #ececec; }
:root[data-theme="dark"] .project-section-caption p { color: #b2b2b2; }
:root[data-theme="dark"] .project-video--empty { background: #1b1b1d; }
:root[data-theme="dark"] .project-video--empty span { color: #8a8a8a; }
:root[data-theme="dark"] .project-video--empty code { background: rgba(255,255,255,0.08); }
:root[data-theme="dark"] .project-gallery-main,
:root[data-theme="dark"] .project-gallery-thumb { background: #1b1b1d; }
:root[data-theme="dark"] .project-nav { border-top-color: #262626; }
:root[data-theme="dark"] .project-nav-link .dir { color: #8a8a8a; }
:root[data-theme="dark"] .project-nav-link .t { color: #ececec; }
:root[data-theme="dark"] .more-works { border-top-color: #262626; }

/* photo pages */
:root[data-theme="dark"] .photo-title { color: #ececec; }
:root[data-theme="dark"] .photo-back { color: #8a8a8a; }
:root[data-theme="dark"] .photo-back:hover { color: #fff; }
:root[data-theme="dark"] .photo-section-heading { color: #ececec; }
:root[data-theme="dark"] .photo-body { color: #b2b2b2; }
:root[data-theme="dark"] .photo-credits li { color: #8a8a8a; }