:root {
    --paper: #030303;
    --paper-strong: transparent;
    --paper-soft: transparent;
    --ink: #ffffff;
    --ink-muted: rgba(255, 255, 255, 0.72);
    --ink-faint: rgba(255, 255, 255, 0.22);
    --ai: #ffffff;
    --shu: #ffffff;
    --matsuba: #ffffff;
    --wash: #030303;
    --bnw-blue-panel: rgba(12, 36, 64, 0.24);
    --bnw-blue-panel-soft: rgba(8, 48, 66, 0.18);
    --bnw-blue-card: rgba(16, 45, 78, 0.20);
}

body.bnw-portfolio {
    color: #ffffff;
    background: #030303;
}

body.bnw-portfolio #ink-canvas {
    background: #030303;
}

body.bnw-portfolio .new-page {
    color: #ffffff;
    mix-blend-mode: difference;
}

body.bnw-portfolio .new-header {
    border-bottom-color: rgba(255, 255, 255, 0.2);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.bnw-portfolio .new-mark,
body.bnw-portfolio .new-action,
body.bnw-portfolio .project-card,
body.bnw-portfolio .hero-profile img,
body.bnw-portfolio .hero-profile p,
body.bnw-portfolio .ink-reset {
    border-color: rgba(255, 255, 255, 0.72);
}

body.bnw-portfolio .new-nav a:hover,
body.bnw-portfolio .new-nav a:focus-visible {
    background: transparent;
    text-decoration: underline;
    text-underline-offset: 5px;
}

body.bnw-portfolio .new-action.primary {
    color: #030303;
    border-color: #ffffff;
    background: #ffffff;
}

body.bnw-portfolio .new-action.secondary,
body.bnw-portfolio .hero-profile p,
body.bnw-portfolio .project-card,
body.bnw-portfolio .ink-reset {
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

body.bnw-portfolio .new-action.secondary:hover,
body.bnw-portfolio .new-action.secondary:focus-visible {
    color: #030303;
    border-color: #ffffff;
    background: #ffffff;
}

body.bnw-portfolio .vertical-note,
body.bnw-portfolio .hero-profile p {
    color: rgba(255, 255, 255, 0.74);
}

body.bnw-portfolio .eyebrow,
body.bnw-portfolio .section-heading p,
body.bnw-portfolio .hero-domain,
body.bnw-portfolio .entry-meta,
body.bnw-portfolio .ink-entry time,
body.bnw-portfolio .project-card time,
body.bnw-portfolio .entry-link {
    color: #ffffff;
}

body.bnw-portfolio .hero-summary,
body.bnw-portfolio .entry-body p,
body.bnw-portfolio .entry-body pre,
body.bnw-portfolio .project-card p,
body.bnw-portfolio .tech-line {
    color: rgba(255, 255, 255, 0.78);
}

body.bnw-portfolio .section-band,
body.bnw-portfolio .section-band.quiet-band,
body.bnw-portfolio .connect-band,
body.bnw-portfolio .new-footer {
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}

body.bnw-portfolio .section-band {
    background: linear-gradient(180deg, var(--bnw-blue-panel), rgba(12, 36, 64, 0.14));
}

body.bnw-portfolio .section-band.quiet-band {
    background: linear-gradient(180deg, var(--bnw-blue-panel-soft), rgba(8, 48, 66, 0.12));
}

body.bnw-portfolio .projects-band {
    background: linear-gradient(180deg, rgba(10, 34, 64, 0.22), rgba(8, 26, 48, 0.13));
}

body.bnw-portfolio .connect-band,
body.bnw-portfolio .new-footer {
    background: rgba(5, 16, 30, 0.24);
}

body.bnw-portfolio .project-card {
    background: var(--bnw-blue-card);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
}

body.bnw-portfolio .section-band,
body.bnw-portfolio .ink-entry,
body.bnw-portfolio .project-card,
body.bnw-portfolio .connect-list a {
    border-color: rgba(255, 255, 255, 0.22);
}

body.bnw-portfolio .connect-band,
body.bnw-portfolio .connect-band h2,
body.bnw-portfolio .connect-list a,
body.bnw-portfolio .new-footer,
body.bnw-portfolio .new-footer a {
    color: #ffffff;
}

body.bnw-portfolio .connect-list span {
    color: rgba(255, 255, 255, 0.58);
}

body.bnw-portfolio .connect-list a:hover strong,
body.bnw-portfolio .connect-list a:focus-visible strong,
body.bnw-portfolio .entry-link:hover,
body.bnw-portfolio .entry-link:focus-visible {
    color: #ffffff;
    text-decoration-thickness: 2px;
}

body.bnw-portfolio .ink-reset:hover,
body.bnw-portfolio .ink-reset:focus-visible {
    color: #030303;
    background: #ffffff;
}

body.bnw-portfolio::selection {
    color: #030303;
    background: #ffffff;
}
