/* ==========================================================================
   THEME — CREAM
   Paper-white ground with the 35mm grain kept intact. Load AFTER styles.css
   and works.css; it only overrides colour, never layout.

   The core sheets use --color-black for surfaces and --color-white for ink,
   so flipping those two carries most of the site on its own. Everything
   below is the handful of places that hardcode a value.
   ========================================================================== */

:root {
    /* paper + ink */
    --color-black: #eae6dd;
    /* warm cream ground */
    --color-white: #17150f;
    /* soft black ink, not pure #000 */
    --color-gray: #6f6a5e;
    --color-light-gray: #f4f1ea;
    --color-muted: #4a463c;      /* body copy on paper */
    --color-well: #ded9ce;

    /* hairlines read as ink at low opacity now */
    --works-line: rgba(23, 21, 15, 0.18);
    --works-line-soft: rgba(23, 21, 15, 0.09);
}

html,
body {
    background-color: var(--color-black);
}

body {
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Grain — the whole point is to keep it.
   On black it used `screen` (lightens). On paper it has to `multiply`
   (darkens) or it just washes out. Same texture, inverted behaviour.
   -------------------------------------------------------------------------- */
.grain-overlay {
    mix-blend-mode: multiply;
    opacity: 0.42;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
    background-color: var(--color-black);
    border-bottom: none;
}

/* The wordmark is label tape: `color` paints the tape itself and the
   letters are knocked out of it, so black tape reads with cream letters. */
.logo-label {
    color: #000;
}

/* --------------------------------------------------------------------------
   Cursors are white SVGs; on paper they'd vanish. Fall back to system
   cursors rather than shipping a second set of assets.
   -------------------------------------------------------------------------- */
body,
.work-card-link,
.flow-item,
.nav-item a,
.client-logo,
a {
    cursor: auto;
}

a,
button,
.work-card-link,
.flow-item,
.works-filter,
.nav-item a {
    cursor: pointer;
}

/* --------------------------------------------------------------------------
   Media wells — the placeholder behind an image while it loads
   -------------------------------------------------------------------------- */
.work-card-media,
.flow-media,
.about-portrait {
    background-color: #ded9ce;
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
.lightbox {
    background-color: rgba(234, 230, 221, 0.97);
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
    color: var(--color-white);
}

.lightbox-video {
    background: #ded9ce;
}

/* --------------------------------------------------------------------------
   Footer + section rules
   -------------------------------------------------------------------------- */
.footer {
    background-color: transparent;
    border-top: none;
}

.footer-name {
    color: var(--color-white);
}

.footer-copyright {
    color: var(--color-gray);
}

.work-next-link,
.work-sign {
    color: var(--color-white);
}

.work-sign .sign-year {
    color: var(--color-gray);
}

/* --------------------------------------------------------------------------
   Archive
   -------------------------------------------------------------------------- */
.works-filter {
    color: var(--color-gray);
}

.works-filter:hover,
.works-filter.active {
    color: var(--color-white);
}

.works-filter.active::after {
    background-color: var(--color-white);
}

.works-count {
    color: var(--color-gray);
}

.work-card-no {
    color: var(--color-gray);
}

.work-card-title {
    color: var(--color-white);
}

/* --------------------------------------------------------------------------
   Detail
   -------------------------------------------------------------------------- */
.work-stamp,
.work-stamp .stamp-mark {
    color: var(--color-gray);
}

.work-close {
    color: #000;
}

.work-title {
    color: var(--color-white);
}

.credit-key {
    color: var(--color-gray);
}

.credit-val {
    color: var(--color-white);
}

.work-statement p {
    color: var(--color-gray);
}

.work-statement p:first-child {
    color: var(--color-white);
}

.flow-caption {
    color: var(--color-gray);
}

/* --------------------------------------------------------------------------
   About
   -------------------------------------------------------------------------- */
.about-eyebrow,
.meta-key,
.careers-head,
.co-total,
.co-when,
.role-when,
.co-role {
    color: var(--color-gray);
}

.about-name,
.meta-val,
.co-name,
.role-title {
    color: var(--color-white);
}

.co-roles::before {
    background-color: rgba(23, 21, 15, 0.18);
}

.role::before {
    background-color: #8a8478;
    border-color: var(--color-black);
}

.meta-val a {
    color: var(--color-white);
    border-bottom-color: rgba(23, 21, 15, 0.3);
}

.meta-val a:hover {
    border-bottom-color: var(--color-white);
}