/*
  JEROEN ZWAAP / THE VISUAL ENVIRONMENT
  Revision 01 — a quieter, artwork-led design system.
  Shared across the homepage and the longer encounters.
  Main idea: keep the UI neutral; allow the material and individual works
  to establish their own colour atmosphere.

  Fonts intentionally remain reliable system stacks. To experiment later,
  change --font-literary, --font-reading, --font-annotation here.
*/
:root {
  color-scheme: light;
  --ground: #F3F1EC;
  --ground-soft: #EAE8E2;
  --ground-card: #FAF9F5;
  --ground-detail: #F7F6F2;
  --ink: #303431;
  --ink-soft: #616965;
  --ink-faint: #727A75;
  --stroke: #D1CEC6;
  --accent: #887B6E;                 /* warm mineral, not botanical */
  --accent-soft: #E2DCD4;
  --accent-interactive: #675C51;
  --night: #2C312F;                  /* charcoal rather than forest */
  --night-raised: #393E3A;
  --night-text: #F3F1EB;
  --night-subdued: #CACCC4;
  --font-literary: Georgia, 'Times New Roman', serif;
  --font-reading: 'Helvetica Neue', Arial, sans-serif;
  --font-annotation: 'Courier New', monospace;
  --work-accent: var(--accent);
  --work-surface: var(--ground-soft);
  --paper: var(--ground);
  --paper2: var(--ground-soft);
  --text: var(--ink);
  --muted: var(--ink-soft);
  --line: var(--stroke);
  --leaf: var(--accent);
  --leaf2: var(--accent-soft);
  --rust: #B28A72;
  --dark: var(--night);
  --dark2: var(--night-raised);
  --white: var(--ground-card);
  --serif: var(--font-literary);
  --sans: var(--font-reading);
  --mono: var(--font-annotation);
}

/* COMMON ELEMENTS */
body { background:var(--ground); color:var(--ink); }
::selection {background:#DFD7CA;color:var(--ink)}
:where(button,a):focus-visible {outline:2px solid var(--accent-interactive);outline-offset:4px}
.site-header,.sitebar {background:var(--ground);border-color:var(--stroke)}
.site-brand .brand-stop,.brand b {color:var(--accent)}
.top-nav a:hover,.barlinks a:hover {color:var(--accent-interactive)}

/* HOMEPAGE — QUIET THE INTERFACE, NOT THE IMAGES */
.hero-eyebrow,.hero-side-note,.hero-bottom,.hero-hint {color:var(--ink-faint)}
.eyebrow-dot {background:var(--accent);box-shadow:0 0 0 5px #887B6E20}
.hero h1 em,.entry-intro h2 em,.moment-head h2 em,.interval-inner h2 em,
.depth-inner h2 em {color:var(--accent)}
.hero-lead {color:var(--ink)}
.hero-secondary,.entry-intro p,.moment-head p,.interval-bottom p {color:var(--ink-soft)}
.primary-link {background:var(--ink);color:var(--ground-card)}
.primary-link:hover {background:#515852}
.hero-traces path {stroke:#9B988E;stroke-opacity:.27}
.hero-traces circle {fill:#928F87;opacity:.55}
.film-frame {background:#E5E3DC;border-color:#FAF9F5;box-shadow:0 25px 65px #2F342824}
.film-media {background:#73756C}
.film-frame figcaption {color:var(--ink-faint)}
.hero-bottom {border-color:var(--stroke)}

.entry-section {background:var(--ground-soft);border-color:#DEDBD4}
.section-top {border-color:#C9C5BD}
.kicker {color:#655E55}
.section-top-aside,.card-topline,.entry-whisper {color:var(--ink-faint)}
.entry-card {background:var(--ground-card);border-color:#CEC9C0}
.entry-card:hover {box-shadow:0 15px 26px #2E31291C}
.entry-card[aria-pressed=true] {border-color:var(--accent-interactive);box-shadow:0 0 0 2px #887B6E29,0 15px 26px #302A241A}
.card-arrow,.card-bottom span {color:var(--accent-interactive)}
.card-visual {background:#E8E6DF}
.card-visual-question {background:#E5E0D7}
.card-visual-question::before {border-color:#A2958490}
.card-visual-question::after {border-color:#A2958455}
.card-visual-question svg path {stroke:#8E8374}
.question-mark {color:#9B8C7C}
.media-index {background:#292F2BC4;color:#FAF8F2}

.discovery-section {background:var(--ground-detail);border-color:var(--stroke)}
.small-text-button {color:var(--accent-interactive)}
.small-text-button:hover {color:var(--ink)}
.pulse-small {background:var(--accent);box-shadow:0 0 0 4px #887B6E27}
.discovery-intro p {color:var(--ink-soft)}
.fragment-intro,.fragment-button .frag-top {color:var(--ink-faint)}
.fragment-intro {border-color:var(--stroke)}
.detail-primary-link {background:var(--accent-soft);border-color:#BAAB9A;color:#443B31}
.detail-primary-link:hover {background:#D6C9BA;color:#292722}

.interval-section {background:var(--ground-card)}
.interval-bottom svg path {stroke:#958B7C}
.interval-bottom svg circle {fill:#958B7C}
.moments-section,.footer {background:var(--ground)}
.moment-list,.moment-row {border-color:var(--stroke)}
.moment-row:hover {background:#EDEAE4}
.moment-no,.moment-desc,.moment-arr,.footer p,.footer-end {color:var(--ink-faint)}
.footer-link,.footer-end a {color:var(--accent-interactive)}
.footer-end {border-color:var(--stroke)}

/* Research is allowed to be denser, but not arbitrarily greener. */
.depth-section {background:var(--night);color:var(--night-text)}
.depth-section .kicker,.depth-tiny {color:#CBC4B9}
.depth-inner h2 em {color:#C2B19E}
.depth-text p {color:#DFDED8}
.depth-text p+p {color:#BEBEB6}
.depth-cta {background:var(--night-raised);border-color:#8D8679;color:var(--night-text)}
.depth-cta:hover {background:#505750}
.depth-orbit span {border-color:#DEDAD0}
.depth-orbit .orbit-centre {background:#DEDAD0}

.mobile-nav {background:var(--ground);border-color:var(--stroke);box-shadow:0 14px 18px #2E30291A}
.mobile-nav a {border-color:var(--stroke)}

/* PROJECT PAGES — THE CONTENT HAS ROOM TO ESTABLISH AN ATMOSPHERE. */
body[data-atmosphere="sensorium"] {--work-accent:#82988A;--work-surface:#E8EEE8}
body[data-atmosphere="unfixing"] {--work-accent:#96877F;--work-surface:#EDE6E1}
body[data-atmosphere="shinkan"] {--work-accent:#AE9279;--work-surface:#F0E9E1}
body[data-atmosphere="sound"] {--work-accent:#818A9A;--work-surface:#E8E9ED}
body[data-atmosphere="question"] {--work-accent:#898D80;--work-surface:#E9E9E2}

.crumbs,.intro,.aside-note,.essay-section p,.wide-image figcaption,
.film-panel figcaption,.page-footer {color:var(--ink-soft)}
.brand b,.essay-hero h1 em {color:var(--work-accent)}
.barlinks a,.content-link,.download-links a {color:var(--accent-interactive)}
.tiny {color:var(--work-accent)}
.hero-visual {background:var(--work-surface)}
.hero-visual--paper {background:var(--work-surface);color:var(--accent-interactive)}
.hero-visual--dark {background:var(--night);color:var(--night-text)}
.down-sign {color:var(--ink-soft)}
.divider {border-color:var(--stroke)}
.film-panel,.diagram .part,.muted-block {background:var(--work-surface)}
.diagram .part {border-color:var(--stroke)}
.diagram .merge {background:var(--accent-soft)}
.related-section {background:var(--night);color:var(--night-text)}
.related-section .tiny,.related-type,.related-relation {color:#C6C5BC}
.related-item {border-color:#777A70}
.related-item:hover {background:#3B413C}
.related-title {color:var(--night-text)}
.page-footer a {border-color:var(--stroke)}


/* THE DISCOVERY PANEL — SAME VISUAL LANGUAGE AS THE HOMEPAGE */
.fragment-button {background:#EEECE6;border-color:var(--stroke)}
.fragment-button:hover,.fragment-button[aria-pressed=true] {background:#E5DFD6;border-color:#998B7D}
.fragment-button[aria-pressed=true] {box-shadow:inset 0 0 0 1px #AC9D8C}
.frag-top {color:var(--ink-faint)}
.detail-placeholder {border-color:var(--stroke);color:var(--ink-faint)}
.detail-placeholder-mark {color:#AAA092}
.detail-card {background:var(--ground-card);border-color:var(--stroke)}
.detail-type,.detail-text p,.detail-relations h4 {color:var(--ink-soft)}
.detail-relations,.relation-link {border-color:var(--stroke)}
.relation-link {color:var(--accent-interactive)}
.relation-link:hover,.relation-link span {color:var(--accent)}
.detail-media {background:#DFDDD6}
.detail-media.no-photo {background:#E4E0D8}
.detail-media.no-photo svg path,.detail-media.no-photo svg circle {stroke:#998B79}
.detail-media .media-foot {background:#303431BD}
.detail-media.no-photo .media-foot {background:#F6F4EFCD;color:var(--ink-soft)}

/* The original videos and photographic images retain their own colour values.
   No colour filters are imposed by the new shared theme. */

/* Research boards update — photographic entrances, no visual redesign */
.card-visual-question.card-visual-photo {display:block;background:var(--ground-card)}
.card-visual-question.card-visual-photo::before,.card-visual-question.card-visual-photo::after{display:none}
.card-visual-question.card-visual-photo img{width:100%;height:100%;object-fit:cover;object-position:center center}
.card-visual-experiment img{object-position:50% 45%;filter:none}
.card-visual-work img{object-fit:cover;object-position:50% 45%;filter:none}
.research-board-cta{display:flex;justify-content:space-between;align-items:center;gap:32px;background:#EAE6DF;border:1px solid #D8D1C6;padding:24px 28px;margin:0 0 37px}
.research-board-cta[hidden]{display:none}
.research-board-cta strong{font:normal 27px/1.2 var(--font-literary)}
.research-board-cta p{max-width:470px;margin:7px 0 0;font:13px/1.7 var(--font-reading);color:var(--ink-soft)}
.research-board-cta a{flex:none;display:inline-flex;gap:17px;align-items:center;padding:13px 17px;background:var(--ink);color:var(--ground-card);text-decoration:none;font:11px/1.4 var(--font-reading)}
.research-board-cta a:hover{background:var(--accent-interactive)}
@media(max-width:660px){.research-board-cta{display:block;padding:21px;margin-bottom:27px}.research-board-cta a{margin-top:20px;justify-content:space-between;width:100%}.research-board-cta strong{font-size:24px}}

/* An optional second way deeper from a selected research fragment. */
.detail-secondary-link{display:inline-flex;align-items:center;gap:10px;font:12px/1.5 var(--mono,monospace);text-decoration:none;border-bottom:1px solid currentColor;margin:14px 0 18px 20px;padding:6px 0;color:inherit;}
.detail-secondary-link:hover{opacity:.65}

/* Research entry is a link to its dedicated overview, not an expanding fragment. */
.entry-card[href]{text-decoration:none;cursor:pointer}
.entry-card[href]:focus-visible{outline:2px solid #806b5b;outline-offset:5px}