/* ==========================================================================
   Concrete Art — the portfolio as a visual system.
   Ivory #F4F1E8 · charcoal #202020 · ultramarine #2456D8 · mustard #D9B82E
   Neutral grotesque, restrained weights, consistent spacing, clear numerical
   labels; repetition and measured proportions. No decorative effects.
   ========================================================================== */

:root {
    --art-bg: #f4f1e8; --art-surface: #e9e5d9; --art-text: #202020; --art-heading: #202020; --art-muted: #6c6a64;
    --art-link: #202020; --art-link-hover: #2456d8; --art-accent: #2456d8; --art-accent-2: #d9b82e; --art-price: #202020;
    --art-font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; --art-size: 15px;
    --art-heading-font: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif; --art-heading-weight: 400; --art-heading-case: none;
    --art-meta-font: "IBM Plex Mono", "Courier New", monospace;
    --art-header-bg: #f4f1e8; --art-header-text: #202020; --art-header-hover: #2456d8; --art-header-rule: #202020; --art-header-rule-w: 1px;
    --art-title-font: "IBM Plex Sans", sans-serif; --art-title-size: 20px; --art-title-weight: 500; --art-title-case: none; --art-title-tracking: 0px; --art-logo-h: 48px;
    --art-nav-font: "IBM Plex Sans", sans-serif; --art-nav-size: 13px; --art-nav-weight: 400; --art-nav-case: none; --art-nav-tracking: 0px;
    --art-footer-bg: #f4f1e8; --art-footer-text: #6c6a64; --art-footer-link: #202020; --art-footer-hover: #2456d8;
    --art-footer-rule: #202020; --art-footer-rule-w: 1px; --art-footer-font: "IBM Plex Mono", monospace; --art-footer-size: 12px; --art-footer-case: none;
    --art-gallery-gap: 16px;
    --art-max: 1360px;
    --cc-unit: 8px;
}

body { line-height: 1.6; }
h1, h2, h3 { letter-spacing: -.02em; line-height: 1.1; }

.art-header__inner { padding-top: calc(var(--cc-unit) * 3); padding-bottom: calc(var(--cc-unit) * 3); }
.art-brand a::before { content: ""; display: inline-block; width: .7em; height: .7em; margin-right: .5em; background: var(--art-accent); vertical-align: -.02em; }
.art-menu .nav-link.active, .art-menu .current-menu-item > .nav-link { color: var(--art-accent); }

/* Intro composition: a 4 × 4 field of equal squares */
.cc-intro { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: calc(var(--cc-unit) * 6); align-items: end; padding-bottom: calc(var(--cc-unit) * 6); border-bottom: 1px solid var(--art-text); }
.cc-intro__comp { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cc-unit); aspect-ratio: 1; max-width: 440px; }
.cc-cell { background: var(--art-surface); }
.cc-cell--0, .cc-cell--5, .cc-cell--10, .cc-cell--15 { background: var(--art-text); }
.cc-cell--3, .cc-cell--6 { background: var(--art-accent); }
.cc-cell--12 { background: var(--art-accent-2); }
.cc-cell--9 { background: transparent; border: 1px solid var(--art-text); }
.cc-intro__title { margin: 0 0 calc(var(--cc-unit) * 4); font-size: clamp(48px, 7vw, 104px); font-weight: 300; letter-spacing: -.05em; }
.cc-figures { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: calc(var(--cc-unit) * 6); margin: 0; }
.cc-figures dt { font: 400 11px var(--art-meta-font); text-transform: uppercase; color: var(--art-muted); }
.cc-figures dd { margin: 0; font: 400 22px var(--art-meta-font); }
.cc-intro__hint { margin: calc(var(--cc-unit) * 3) 0 0; font-size: 13px; color: var(--art-muted); }
@media (max-width: 767.98px) { .cc-intro { grid-template-columns: 1fr; } .cc-figures { grid-template-columns: 1fr 1fr; } }

/* Visual index: equal squares, numbered */
.cc-series { padding: calc(var(--cc-unit) * 5) 0; border-bottom: 1px solid var(--art-surface); }
.cc-series__head { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: calc(var(--cc-unit) * 2); align-items: baseline; margin-bottom: calc(var(--cc-unit) * 2); }
.cc-series__num { font: 500 13px var(--art-meta-font); color: var(--art-accent); }
.cc-series__title { margin: 0; font-size: 20px; font-weight: 500; }
.cc-series__title a { color: var(--art-text); text-decoration: none; }
.cc-series__title a:hover { color: var(--art-accent); }
.cc-series__data { font: 400 12px var(--art-meta-font); color: var(--art-muted); }
.cc-squares { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: var(--cc-unit); margin: 0; padding: 0; list-style: none; }
.cc-square { position: relative; display: block; aspect-ratio: 1; overflow: hidden; background: var(--art-surface); }
.cc-square__img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s; }
.cc-square__inv { position: absolute; left: 0; bottom: 0; padding: 2px 4px; background: var(--art-bg); font: 400 10px var(--art-meta-font); color: var(--art-text); opacity: 0; transition: opacity .2s; }
.cc-square:hover .cc-square__img, .cc-square:focus-visible .cc-square__img { opacity: .8; }
.cc-square:hover .cc-square__inv, .cc-square:focus-visible .cc-square__inv { opacity: 1; }
.cc-square:hover { outline: 2px solid var(--art-accent); outline-offset: 2px; }
@media (hover: none) { .cc-square__inv { opacity: 1; } }

.art-home-section__head { border-top: 1px solid var(--art-text); padding-top: var(--cc-unit); }
.art-home-section__head .edith-section-title { font-size: 20px; font-weight: 500; }
.edith-card__title { font-size: 14px; font-weight: 500; }
.edith-card__price { font-family: var(--art-meta-font); color: var(--art-text); }
.art-news-list__num { color: var(--art-accent); }

/* Pages and record pages */
.edith-page__title, .edith-post__title { font-size: clamp(36px, 5vw, 72px); font-weight: 300; letter-spacing: -.04em; }
.art-project-meta { font-size: 12px; letter-spacing: 0; color: var(--art-text); }
.art-project-meta__num { color: var(--art-accent); font-weight: 500; }
.fran-artwork__caption { font-family: var(--art-meta-font); font-size: 11px; }
.art-record__media { background: transparent; border: 1px solid var(--art-surface); }
.art-record__inventory { color: var(--art-accent); }
.art-record__title { font-weight: 300; letter-spacing: -.03em; }
.art-record__table div { border-top-color: var(--art-surface); }
.art-record__table div:last-child { border-bottom-color: var(--art-surface); }

.art-footer__name { font-family: var(--art-heading-font); font-size: 16px; font-weight: 500; color: var(--art-text); }
.art-footer__label { color: var(--art-accent); opacity: 1; }