/* ==========================================================================
   Yosh — a dark, monospace index.
   Near-black #050505 · light grey #E4E4E1 · dim grey #8C8C88
   One monospace face throughout, underlined links, small captions; works
   float in a staggered arrangement; projects open to a lead image and rows.
   ========================================================================== */

:root {
    --art-bg: #050505; --art-surface: #111111; --art-text: #e4e4e1; --art-heading: #f2f2ef; --art-muted: #8c8c88;
    --art-link: #e4e4e1; --art-link-hover: #ffffff; --art-accent: #ffffff; --art-accent-2: #3a3a38; --art-price: #e4e4e1;
    --art-font: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; --art-size: 14px;
    --art-heading-font: "IBM Plex Mono", ui-monospace, monospace; --art-heading-weight: 400; --art-heading-case: none;
    --art-meta-font: "IBM Plex Mono", ui-monospace, monospace;
    --art-header-bg: #050505; --art-header-text: #cfcfcb; --art-header-hover: #ffffff; --art-header-rule: #050505; --art-header-rule-w: 0px;
    --art-title-font: "IBM Plex Mono", ui-monospace, monospace; --art-title-size: 14px; --art-title-weight: 400; --art-title-case: none; --art-title-tracking: 0px; --art-logo-h: 28px;
    --art-nav-font: "IBM Plex Mono", ui-monospace, monospace; --art-nav-size: 13px; --art-nav-weight: 400; --art-nav-case: none; --art-nav-tracking: 0px;
    --art-footer-bg: #050505; --art-footer-text: #8c8c88; --art-footer-link: #cfcfcb; --art-footer-hover: #ffffff;
    --art-footer-rule: #1c1c1b; --art-footer-rule-w: 1px; --art-footer-font: "IBM Plex Mono", ui-monospace, monospace; --art-footer-size: 12px; --art-footer-case: none;
    --art-gallery-gap: 28px;
    --art-max: 1280px;
    --art-text-col: 980px;
    --art-lightbox-bg: rgba(0, 0, 0, .97);
    --art-lightbox-text: #e4e4e1;
    --yo-col: min(1100px, 100% - 2 * var(--art-gutter));
}

body { line-height: 1.55; letter-spacing: .01em; }
h1, h2, h3, h4 { line-height: 1.3; letter-spacing: 0; }
h1 { font-size: 15px; }
h2 { font-size: 15px; }
h3, h4 { font-size: 14px; }
a { text-underline-offset: 3px; text-decoration-thickness: 1px; }
::selection { background: #e4e4e1; color: #050505; }
hr, .wp-block-separator { border-color: #262624; opacity: 1; }
.form-control, .form-select { background-color: transparent; color: var(--art-text); border-color: #3a3a38; border-radius: 0; }

/* ---------- Header: one quiet row ---------- */

.yo-header { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--art-header-bg) 92%, transparent); }
.admin-bar .yo-header { top: 32px; }
.yo-header__inner { max-width: none; padding: 10px var(--art-gutter); gap: 8px 28px; }
.yo-brand { display: flex; align-items: center; gap: 22px; }
.yo-brand .art-brand { margin: 0; font-size: var(--art-nav-size); }
.yo-brand .art-brand a { color: var(--art-header-text); text-decoration: underline; }
.yo-brand .art-brand a:hover { color: var(--art-header-hover); }
.yo-info { display: inline-flex; color: var(--art-header-text); }
.yo-info svg { width: 17px; height: 17px; }
.yo-info:hover { color: var(--art-header-hover); }
.yo-nav { justify-content: space-between; gap: 8px 40px; }
.yo-nav .art-menu { gap: 8px 44px; margin: 0 auto; }
.yo-nav .art-menu a { text-decoration: underline; padding: 0; }
.yo-nav .art-menu .current-menu-item > a, .yo-nav .art-menu .current_page_item > a { color: var(--art-header-hover); text-decoration-thickness: 2px; }
.yo-social { display: flex; gap: 12px; margin: 0; }
.yo-social a { color: var(--art-header-text); }
.yo-social a:hover { color: var(--art-header-hover); }
.yo-social svg { width: 18px; height: 18px; }
.yo-header .art-toggler { border: 0; color: var(--art-header-text); font: inherit; text-decoration: underline; }
@media (max-width: 991.98px) {
    .yo-nav { padding: 14px 0 6px; }
    .yo-nav .art-menu { margin: 0; gap: 10px; }
    .yo-social { margin-top: 14px; }
}

/* ---------- Section headings: small, centred ---------- */

.yo-heading { text-align: center; margin: clamp(36px, 6vw, 72px) auto clamp(40px, 6vw, 80px); padding: 0 var(--art-gutter); }
.yo-heading__title { margin: 0; font-size: 15px; letter-spacing: .02em; }
.yo-heading__sub { margin: .3em 0 0; color: var(--art-text); }

/* ---------- Home: the staggered index ---------- */

.yo-home .art-home-content { width: var(--yo-col); margin: 0 auto 60px; }
.yo-scatter {
    list-style: none; margin: 0 auto 120px; padding: 0; width: var(--yo-col);
    display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start;
    column-gap: clamp(18px, 3vw, 40px); row-gap: clamp(48px, 7vw, 96px);
}
.yo-scatter__item { flex: 0 0 auto; width: calc(var(--yo-w) - 2vw); margin-top: var(--yo-dy); }
.yo-scatter__link { display: block; color: var(--art-text); text-decoration: none; }
.yo-scatter__img { display: block; width: 100%; height: auto; background: #111; transition: opacity .35s ease; }
.yo-scatter__link:hover .yo-scatter__img { opacity: .78; }
.yo-caption { display: block; margin-top: 8px; font-size: 12px; line-height: 1.45; color: var(--art-text); }
.yo-scatter__link:hover .yo-caption { text-decoration: underline; }
.yo-empty { text-align: center; color: var(--art-muted); }
@media (max-width: 767.98px) {
    .yo-scatter__item { width: calc(50% - 12px); margin-top: calc(var(--yo-dy) / 3); }
    .yo-scatter__item:nth-child(5n + 1) { width: 86%; }
}

/* ---------- Album: lead image, text, rows ---------- */

.yo-album { width: var(--yo-col); margin: clamp(28px, 4vw, 48px) auto 140px; }
.yo-album__year { margin: 0; color: var(--art-text); }
.yo-album__title { margin: .7em 0 clamp(28px, 4vw, 48px); font-size: 14px; font-weight: 500; }
.yo-album__lead { margin: 0 0 32px; }
.yo-lead, .yo-lead img { display: block; width: 100%; height: auto; }
.yo-album__text { max-width: 760px; margin: 0 0 clamp(40px, 5vw, 64px); }
.yo-album__text p { margin: 0 0 1em; }
.yo-rows { display: grid; gap: var(--art-gallery-gap); margin-bottom: var(--art-gallery-gap); align-items: center; }
.yo-rows--3 { grid-template-columns: repeat(3, 1fr); }
.yo-rows--2 { grid-template-columns: repeat(2, 1fr); }
.yo-rows--1 { grid-template-columns: 1fr; }
.yo-rows .art-figure, .yo-rows .art-figure__img { display: block; width: 100%; height: auto; }
@media (max-width: 767.98px) { .yo-rows--3, .yo-rows--2 { grid-template-columns: 1fr 1fr; } }

/* Previous / next album: arrows fixed at the foot of the window. */
.yo-arrows { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 40; display: flex; gap: 120px; pointer-events: none; }
.yo-arrows a { pointer-events: auto; font-size: 24px; line-height: 1; color: #fff; text-decoration: none; text-shadow: 0 0 6px rgba(0, 0, 0, .9); }
.yo-arrows a:hover { opacity: .7; }
.yo-arrows__next:only-child { margin-left: auto; }

/* ---------- Pages: lead image, monospace text ---------- */

.yo-page { width: var(--yo-col); margin: 0 auto 120px; }
.yo-page__lead { margin: 0 0 28px; }
.yo-page__body { font-size: 15px; line-height: 1.6; }
.yo-page__body > * { max-width: none; }
.yo-page__body h2, .yo-page__body h3 { margin-top: 2em; }

/* ---------- Shared parts in this palette ---------- */

.art-footer { font-size: var(--art-footer-size); }
.art-footer__inner { max-width: none; padding-left: var(--art-gutter); padding-right: var(--art-gutter); }
.edith-news-card__media--empty { background: #111; }
.wp-block-button__link, .btn { border-radius: 0; }