/* ==========================================================================
   Holograph — a light, precise interface.
   Ice white #eef3f7 · glass #ffffff at 55% · deep navy #0b1a2c · cyan signal #0891b2
   Geist (light) for titles and text, Geist Mono for readouts. A fine grid,
   translucent panels set at a slight angle that turn toward you, a thin scan
   line, timecodes. All motion stops for reduced motion.
   ========================================================================== */

:root {
    --hg-cyan: #0891b2;
    --hg-glow: #67e8f9;
    --hg-navy: #0b1a2c;
    --hg-line: rgba(11, 26, 44, .1);
    --hg-glass: rgba(255, 255, 255, .55);
    --hg-wrap: min(1360px, 100% - 2 * var(--art-gutter));
    --art-lightbox-bg: rgba(238, 243, 247, .97);
    --art-lightbox-text: #0b1a2c;
    --vf-screen-bg: rgba(11, 26, 44, .97);
}

body { line-height: 1.6; background-image: linear-gradient(180deg, #f5f8fb, var(--art-bg) 520px); background-repeat: no-repeat; }
h1, h2, h3, h4 { letter-spacing: -.03em; line-height: 1.04; }
::selection { background: var(--hg-glow); color: var(--hg-navy); }
.hg-mono { font-family: var(--art-meta-font); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.btn, .wp-block-button__link { border-radius: 999px; }
.wp-block-button__link, .btn-primary { background: var(--hg-navy); border-color: var(--hg-navy); color: #eef3f7; }
.wp-block-button__link:hover, .btn-primary:hover { background: var(--hg-cyan); border-color: var(--hg-cyan); }
.form-control, .form-select { background: var(--hg-glass); border: 1px solid var(--hg-line); border-radius: 10px; }
.form-control:focus { border-color: var(--hg-cyan); box-shadow: 0 0 0 3px rgba(8, 145, 178, .15); }

/* ---------- Header: a floating glass bar ---------- */

.art-brand { white-space: nowrap; letter-spacing: -.01em; }
.art-header { background: rgba(238, 243, 247, .72) !important; backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-bottom: 1px solid var(--hg-line); }
.art-header__inner { max-width: none; padding-top: 14px; padding-bottom: 14px; }
.art-menu { gap: .2rem 1.5rem; }
.art-menu .nav-link.active, .art-menu .current-menu-item > .nav-link { color: var(--hg-cyan); }
.art-menu .nav-link.active::after, .art-menu .current-menu-item > .nav-link::after { content: ""; display: block; height: 1px; margin-top: 3px; background: var(--hg-cyan); box-shadow: 0 0 8px var(--hg-glow); }
.vs-side-foot { flex-direction: row; align-items: center; margin: 0 0 0 1.4rem; }
@media (max-width: 991.98px) { .vs-side-foot { margin: 1rem 0 .5rem; } }

/* ---------- Opening ---------- */

.hg-open { position: relative; overflow: hidden; padding: clamp(72px, 10vw, 140px) var(--art-gutter) clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--hg-line); }
.hg-open__grid { position: absolute; inset: 0; pointer-events: none;
    background:
        linear-gradient(var(--hg-line) 1px, transparent 1px) 0 0 / 48px 48px,
        linear-gradient(90deg, var(--hg-line) 1px, transparent 1px) 0 0 / 48px 48px;
    -webkit-mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse at 50% 40%, #000 20%, transparent 75%); }
.hg-open__inner { position: relative; max-width: var(--hg-wrap); margin: 0 auto; }
.hg-open__status { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 1.6rem; color: var(--hg-cyan); }
.hg-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hg-cyan); box-shadow: 0 0 0 4px rgba(8, 145, 178, .15); }
.hg-open__title { margin: 0; max-width: 11ch; font: var(--art-heading-weight) clamp(60px, 10.5vw, 176px)/.9 var(--art-heading-font); letter-spacing: -.06em; color: var(--hg-navy); }
.hg-open__sub { max-width: 44ch; margin: 1.6rem 0 0; font-size: clamp(16px, 1.4vw, 19px); color: var(--art-text); }
.hg-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: linear-gradient(transparent, var(--hg-cyan) 30%, var(--hg-cyan) 70%, transparent); box-shadow: 0 0 18px 2px var(--hg-glow); opacity: .55; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
    .hg-scan { animation: hg-scan 9s cubic-bezier(.45, 0, .55, 1) infinite; }
    .hg-dot { animation: hg-pulse 2.4s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) { .hg-scan { left: 68%; } }
@keyframes hg-scan { 0% { left: 4%; } 50% { left: 96%; } 100% { left: 4%; } }
@keyframes hg-pulse { 50% { box-shadow: 0 0 0 7px rgba(8, 145, 178, 0); } }

/* Playback: a strip of works with frame ticks under it. */
.hg-playback { position: relative; max-width: var(--hg-wrap); margin: clamp(48px, 6vw, 80px) auto 0; padding: 14px; border: 1px solid rgba(255, 255, 255, .8); border-radius: 18px; background: var(--hg-glass); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 30px 60px -40px rgba(11, 26, 44, .45); }
.hg-playback__head { display: flex; justify-content: space-between; margin: 0 4px 10px; color: var(--art-muted); }
.hg-playback__strip { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scrollbar-width: none; }
.hg-playback__strip li { flex: 0 0 auto; }
.hg-playback__strip a { display: block; border-radius: 8px; overflow: hidden; outline: 1px solid transparent; transition: outline-color .2s, transform .3s; }
.hg-playback__strip a:hover, .hg-playback__strip a:focus-visible { outline-color: var(--hg-cyan); transform: translateY(-3px); }
.hg-playback__img { display: block; width: 96px; height: 96px !important; object-fit: cover; }
.hg-playback__ticks { height: 10px; margin: 10px 4px 0; background: repeating-linear-gradient(90deg, rgba(11, 26, 44, .25) 0 1px, transparent 1px 12px); -webkit-mask-image: linear-gradient(90deg, #000 70%, transparent); mask-image: linear-gradient(90deg, #000 70%, transparent); }

/* ---------- Panels ---------- */

.hg-body { width: var(--hg-wrap); margin: 0 auto 140px; }
.hg-body .art-home-content { margin-top: 56px; }
.hg-section { margin-top: clamp(72px, 10vw, 140px); }
.hg-head, .hg-body .art-home-section__head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: 2rem; padding-bottom: .9rem; border-bottom: 1px solid var(--hg-line); }
.hg-head__title, .hg-body .art-home-section__head .edith-section-title { margin: 0; font: var(--art-heading-weight) clamp(36px, 4.6vw, 68px)/1 var(--art-heading-font); letter-spacing: -.05em; color: var(--hg-navy); }
.hg-head .hg-mono, .hg-body .edith-more { color: var(--art-muted); text-decoration: none; font-family: var(--art-meta-font); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.hg-head__more:hover, .hg-body .edith-more:hover { color: var(--hg-cyan); }

.hg-panels { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 36px); margin: 0; padding: 0; list-style: none; perspective: 1400px; }
.hg-panel:nth-child(3n + 1) { --tilt: 13deg; }
.hg-panel:nth-child(3n + 2) { --tilt: 0deg; }
.hg-panel:nth-child(3n) { --tilt: -13deg; }
.hg-panel__glass { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 12px 12px 18px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 20px; background: linear-gradient(160deg, rgba(255, 255, 255, .75), rgba(255, 255, 255, .35)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 40px 60px -45px rgba(11, 26, 44, .55); color: var(--hg-navy); text-decoration: none; transform: rotateY(var(--tilt, 0deg)); transform-origin: center; transition: transform .7s cubic-bezier(.2, .7, .2, 1), box-shadow .5s ease; }
.hg-panel__glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, transparent 40%, rgba(255, 255, 255, .55) 50%, transparent 60%); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.hg-panel__glass:hover, .hg-panel__glass:focus-visible { transform: rotateY(0) translateZ(30px); box-shadow: 0 1px 0 rgba(255, 255, 255, .9) inset, 0 50px 80px -40px rgba(8, 145, 178, .45); }
.hg-panel__glass:hover::after { opacity: 1; }
.hg-panel__media { display: block; border-radius: 12px; overflow: hidden; background: var(--art-surface); }
.hg-panel__img { display: block; width: 100%; aspect-ratio: 4 / 3 !important; object-fit: cover; }
.hg-panel__meta { display: flex; justify-content: space-between; gap: .6rem; padding: 0 4px; color: var(--art-muted); }
.hg-panel__meta span:first-child { color: var(--hg-cyan); }
.hg-panel__title { padding: 0 4px; font: var(--art-heading-weight) clamp(22px, 2vw, 30px)/1.05 var(--art-heading-font); letter-spacing: -.035em; }
@media (prefers-reduced-motion: reduce) { .hg-panel__glass { transition: none; } }
@media (max-width: 991.98px) { .hg-panels { grid-template-columns: repeat(2, 1fr); } .hg-panel { --tilt: 0deg !important; } }
@media (max-width: 575.98px) { .hg-panels { grid-template-columns: 1fr; } }

/* Films with timecodes */
.hg-films { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 400px), 1fr)); gap: 28px; margin: 0; padding: 0; list-style: none; }
.hg-film .vf-film { border-radius: 16px; overflow: hidden; box-shadow: 0 30px 50px -40px rgba(11, 26, 44, .6); }
.hg-film__code { display: flex; justify-content: space-between; gap: 1rem; margin: 12px 2px 4px; color: var(--art-muted); }
.hg-film__code span:first-child { color: var(--hg-cyan); }
.hg-film__title { margin: 0 2px; font-size: 16px; color: var(--hg-navy); }
.vf-film__play { background: rgba(255, 255, 255, .85); color: var(--hg-navy); backdrop-filter: blur(6px); }

/* Journal as a log, shop */
.art-news-list__item { border-top: 1px solid var(--hg-line); padding: .9rem 0; }
.art-news-list__num { font-family: var(--art-meta-font); font-size: 11px; color: var(--hg-cyan); }
.art-news-list__date { font-family: var(--art-meta-font); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--art-muted); }
.art-news-list__title { font-size: 18px; color: var(--hg-navy); text-decoration: none; }
.art-news-list__title:hover { color: var(--hg-cyan); }
.edith-card { padding: 10px; border: 1px solid rgba(255, 255, 255, .9); border-radius: 18px; background: var(--hg-glass); }
.edith-card__media { border-radius: 12px; overflow: hidden; background: var(--art-surface); }
.edith-news-card__media--empty { background: var(--art-surface); }

/* ---------- Inner pages ---------- */

.edith-page__title, .edith-post__title { font: var(--art-heading-weight) clamp(46px, 7vw, 116px)/.92 var(--art-heading-font); letter-spacing: -.06em; color: var(--hg-navy); }
.edith-kicker, .art-project-meta { font-family: var(--art-meta-font); text-transform: uppercase; letter-spacing: .08em; }
.edith-content .wp-block-image img, .fran-gallery .fran-artwork img { border-radius: 10px; box-shadow: none; }
.edith-content blockquote { padding: 1.2rem 1.4rem; border: 1px solid rgba(255, 255, 255, .9); border-left: 2px solid var(--hg-cyan); border-radius: 0 14px 14px 0; background: var(--hg-glass); }
.vf-work__media { border-radius: 14px; overflow: hidden; }

/* ---------- Footer ---------- */

.art-footer__name { font: 300 clamp(30px, 4vw, 54px)/1 var(--art-heading-font); letter-spacing: -.05em; color: #eef3f7; }