/*
  SHINKAN / THE RESEARCH BOARD · VISUAL SYSTEM V2
  A consistent editorial surface that belongs to Jeroen Zwaap's wider website.
  Board structure, research content, film and paths are untouched.
*/
:root{
  --bg:#F3F1EC;
  --paper:#FAF9F5;
  --ink:#303431;
  --faint:#727A75;
  --line:#D1CEC6;
  --olive:#887B6E;
  --olive-light:#ECE7DF;
  --shadow:0 8px 22px rgba(49,46,41,.09),0 1px 3px rgba(49,46,41,.05);
}
body{font-family:'Helvetica Neue',Arial,sans-serif;background:var(--bg)}
.header,.page{color:var(--ink)}
.logo{font-family:'Helvetica Neue',Arial,sans-serif;font-weight:700;letter-spacing:.11em}
.hero h1,.below h2,.node h3,.drawer-body h2{font-family:Georgia,'Times New Roman',serif}
.hero h1 em,.below h2 em{color:#887B6E}
.hero-copy p,.drawer-body p{color:#50564F}
.eyebrow,.kicker,.caption,.graph-stat,.node .note-id,.node-state,.node-foot,
.pulse,.field-count,.field-stamp,.reading-key .key-side span,.toolbar-side,
.journal-row .no,.drawer-links h3{font-family:'Courier New',monospace}

/* Compact, more accessible board within the page, not a full-screen app. */
.eco-toolbar,.guide-bar,.field,.mobile-ecology,.reading-key{
  width:min(100%,1270px);
  margin-left:auto;
  margin-right:auto;
}
.field{
  height:clamp(495px,61vh,635px);
  min-height:495px;
  border:1px solid #CFCAC1;
  background:#E9E6DF;
  border-radius:2px;
  box-shadow:none;
  cursor:grab;
  touch-action:none;
}
.field.dragging{cursor:grabbing}
.field::before{
  background:radial-gradient(#A398891A .7px,transparent 1px) 0 0 / 17px 17px,
    linear-gradient(145deg,#EEECE6,#E8E5DF);
  opacity:1;
}
.field::after{
  content:'DRAG NOTES TO ARRANGE  ·  DRAG SPACE TO PAN  ·  PINCH TO ZOOM';
  background:#F6F3EBDC;
  color:#746D64;
  padding:7px 11px;
  font-size:9px;
  letter-spacing:.035em;
  right:14px;
  bottom:10px;
}
.field-stamp,.field-count{color:#8E8981;letter-spacing:.09em}
.field-watermark{display:none}
.field-map{will-change:transform}
.wires path{stroke:#A29A8E;opacity:.31;stroke-width:1.65}
.wires path.related{stroke:#877B6C;opacity:.85;stroke-width:2.7}
.wires path.nonrelated{opacity:.08}
.wires text{fill:#76695F;stroke:#E9E6DF;font-size:11px}
.zooms{top:12px;right:12px;gap:4px}
.zooms button{background:#FAF9F5E9;border:1px solid #CCC5BA;color:#3F413C;border-radius:2px}
.zooms button:hover{background:#FFF}

/* Notes are digital research fragments rather than simulated physical notes. */
.node{
  --rotate:0deg!important;
  background:#FAF9F5;
  border:1px solid #CCC8C0;
  box-shadow:var(--shadow);
  border-radius:2px;
  color:var(--ink);
  transform:none;
  transition:box-shadow .18s,border-color .18s,opacity .18s,filter .18s;
  cursor:grab;
  touch-action:none;
}
.node::before,.node:hover::before{content:none!important;display:none!important}
.node:hover{transform:translateY(-2px);border-color:#AFA598;box-shadow:0 13px 30px #302C231C;z-index:5}
.node.active{transform:none;outline:2px solid #A99A8A;outline-offset:2px;border-color:#867767;z-index:6}
.node.is-dragging,.node.is-dragging:hover,.node.is-dragging.active{
  transform:none!important;
  cursor:grabbing;
  z-index:12;
  transition:none;
  border-color:#70665B;
  box-shadow:0 18px 36px #302C232E;
}
.node .node-head{padding:12px 14px 8px}
.node .node-state{font-size:9px;color:#8C857A;letter-spacing:.03em}
.node .note-id{font-size:10px;color:#716D65}
.node h3{font:normal 23px/1.12 Georgia,serif;letter-spacing:-.038em;color:#303431;margin:3px 14px 9px}
.node .node-desc{font:13px/1.54 Georgia,serif;color:#656B65;margin:0 14px 15px}
.node .node-foot{font-size:10px;color:#76766F;border-top:1px solid #E6E2DA;padding:9px 14px}
.node .node-foot strong{color:#887B6E}
.node .node-image{height:156px}
.node .node-sketch{height:142px}
.node .node-film{height:156px}
.node .hand{color:#625B54}
.node .scribble{color:#877D73}
.node pre{color:#55544F;background:#F0EDE7;border-color:#B9A99A}
.node .diagram{background:#F6F3EE;color:#64635E;border-color:#E0D9D0}
.node .diagram i{color:#958575}
.node.pending{background:#F7F5F0;border-color:#C8C0B4;box-shadow:none}
.node .pendingtext{color:#7A756E}
.node[data-kind='observation']{--tone:#92958D}
.node[data-kind='sensation']{--tone:#AA967F}
.node[data-kind='study']{--tone:#87959B}
.node[data-kind='question']{--tone:#AB8379}
.node[data-kind='design']{--tone:#918996}
.dot{width:6px;height:6px}

.modes{background:#EAE7E0;border:1px solid #CEC8BF;border-radius:2px}
.modes button{color:#666861;font-size:11px;padding:11px 17px}
.modes button[aria-pressed=true]{background:#303431;color:#FAF9F5}
.small-btn,.path-picker{border-radius:2px;color:#504F4A}
.small-btn{background:#F8F6F2;border:1px solid #D1CEC6;padding:11px 12px}
.small-btn:hover{background:#E8E3DC;border-color:#AFA89E}
.guide-bar{background:#303431}
.guide-buttons button{border-color:#908B82}
.reading-key{padding:15px 0 32px}
.reading-key .key-side{gap:10px 18px}
.reading-key .key-side span{color:#6C6D67}
.reading-key p{color:#7E7B74}

/* The details drawer remains the same content, with quieter visual weight. */
.drawer{background:#FAF9F5}
.drawer-top{background:#FAF9F5F2;border-color:#D1CEC6}
.drawer-body .lede{color:#675C51}
.drawer-body p{color:#52564F}
.drawer-note{background:#EDE8DF;color:#6A6053;border-color:#A49784}
.relation-row:hover{color:#675C51}
.drawer-figure img,.drawer-figure video{background:#EFEAE4}

@media(max-width:1090px){
  .field{height:clamp(470px,57vh,590px);min-height:470px}
  .field::after{font-size:8px}
}
@media(max-width:780px){
  .field{display:none}
  .eco-toolbar,.guide-bar,.reading-key{width:100%}
  .mobile-ecology{width:100%}
  .mnode{border-color:#CDC8BE}
  .mnode:before{border-color:#B7AC9D}
  .mnode:after{background:#9A8B7C;border-color:#F3F1EC}
  .mnode[data-selected=true]{background:#EAE5DE;border-color:#9B8B79}
  .mnode strong{font-size:25px;color:#303431}
  .mnode p{color:#616965}
}