/* BASE
   The design system, and the frame every screen sits in:
   tokens, reset, the header, the page frame, headings, buttons.
   Everything here is used by every other file — load it first. */

/* ==========================================================================
   Museum of Western Art — design system
   Rules that hold everywhere:
     · Gold is wayfinding, never decoration. One gold element per region.
     · No border-radius except pills (20–30px). Images live in hairline mats,
       never in filled card boxes; captions sit on the page background.
     · The paintings are the brightest thing on every screen.
   ========================================================================== */
:root {
  --bg: #171310;
  --bg-viewer: #0d0b08;
  --panel: #1a1511;
  --raised: #1b1612;
  --raised2: #221c16;
  --raised3: #241d17;

  --hair: rgba(216,192,150,.13);
  --hair-soft: rgba(216,192,150,.08);
  --hair-mid: rgba(216,192,150,.16);
  --hair-strong: rgba(216,192,150,.20);
  --hair-dash: rgba(216,192,150,.25);
  --mat: rgba(216,192,150,.10);

  --display: #f4edde;
  --display2: #f0e8d9;
  --text: #ece3d2;
  --dim: #a3937b;
  --dim2: #9d8d75;
  --faint: #8a7b64;
  --off: #6e6152;
  --off2: #5d5244;

  --gold: #c2a061;
  --gold-hi: #e8d5a8;
  --gold-tint: rgba(194,160,97,.10);
  --gold-tint2: rgba(194,160,97,.16);
  --gold-line: rgba(194,160,97,.5);
  --gold-line2: rgba(194,160,97,.6);

  /* connection types — the only saturated colours in the system */
  --t-movement: #7f96ad;
  --t-influence: #c2a061;
  --t-place: #7fa389;
  --t-subject: #a884a3;
  --t-curator: #bf7e63;

  --ok: #7fa389;
  --warn: #bf7e63;

  --serif: Georgia, "Times New Roman", serif;
  --sans: Helvetica, Arial, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-hi); }
img { display: block; }
::selection { background: rgba(194,160,97,.3); }
[hidden] { display: none !important; }

/* eyebrow: small-caps label, gold or faint. Used everywhere. */
.eyebrow {
  font: 600 10px var(--sans); letter-spacing: .26em;
  text-transform: uppercase; color: var(--gold);
}

/* ---------- header ---------- */
#topbar {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 14px 28px 14px 48px;
  border-bottom: 1px solid var(--hair);
  position: sticky; top: 0; z-index: 50;
  background: rgba(23,19,16,.93);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.brand { display: flex; flex-direction: column; gap: 3px; flex-shrink: 0; }
.brand:hover .brand-name { color: #fff; }
/* The wordmark's top line is set in small caps, so it reads as a label rather
   than a second title. Transformed here, not stored uppercase — the tab title and
   the Settings field keep whatever case was typed. */
.brand-eyebrow {
  font: 600 9.5px var(--sans); letter-spacing: .34em; text-transform: uppercase;
  color: var(--gold); white-space: nowrap;
}
.brand-name {
  font: 400 21px/1.05 var(--serif); color: var(--display2);
  white-space: nowrap; transition: color .25s ease;
}
/* Two wordmarks, one shown: swapping textContent on resize would need a JS
   listener, and this is a media query's job. */
.brand-name.compact { display: none; }

/* Three lines. Phones only — the panel it opens is a media query. */
#navtoggle {
  display: none; background: none; border: 0; cursor: pointer;
  width: 32px; height: 32px; padding: 8px 5px; flex-direction: column;
  justify-content: space-between; flex-shrink: 0;
}
#navtoggle span {
  display: block; width: 100%; height: 1px; background: var(--dim2);
  transition: transform .25s ease, opacity .2s ease, background .25s ease;
}
#navtoggle:hover span { background: var(--text); }
#topbar.navopen #navtoggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
#topbar.navopen #navtoggle span:nth-child(2) { opacity: 0; }
#topbar.navopen #navtoggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.topright {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 8px 18px; flex-wrap: wrap; min-width: 0;
}
#mainnav { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; }
#mainnav a {
  font: 400 11px var(--sans); letter-spacing: .18em; text-transform: uppercase;
  color: var(--dim2); padding-bottom: 5px; border-bottom: 1px solid transparent;
  transition: color .25s ease;
}
#mainnav a:hover { color: var(--text); }
#mainnav a.active { font-weight: 600; color: var(--display2); border-bottom-color: var(--gold); }
.nav-div { width: 1px; height: 22px; background: rgba(216,192,150,.15); }
#userbox { display: flex; align-items: center; gap: 12px; }
#userbox .who { display: inline-flex; align-items: center; gap: 8px; }
#userbox .uname { font: 400 12.5px var(--sans); color: #cfc2ab; }
#userbox #logout, #userbox .signin {
  font: 400 11px var(--sans); letter-spacing: .06em; color: var(--off);
  text-transform: none; text-decoration: none; padding: 0;
}
#userbox #logout:hover, #userbox .signin:hover { color: var(--dim); }
.role-badge {
  font: 600 8.5px var(--sans); letter-spacing: .14em; text-transform: uppercase;
  border-radius: 20px; padding: 3px 8px 2px;
  color: var(--dim2); border: 1px solid var(--hair-mid);
}
.role-badge.owner { color: var(--gold); border-color: var(--gold-line); }

/* ---------- page frame ---------- */
.page { max-width: 1560px; margin: 0 auto; padding: 52px 48px 40px; }
.page.tight { padding-top: 36px; }
#foot {
  max-width: 1560px; margin: 36px auto 0;
  padding: 26px 48px 34px; border-top: 1px solid var(--mat);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.foot-mark {
  font: 600 9.5px var(--sans); letter-spacing: .3em; text-transform: uppercase;
  color: var(--off);
}
.foot-stats { font: 400 11.5px var(--sans); color: var(--off); }

/* ---------- headings ---------- */
h1, h2, h3 { font-weight: 400; margin: 0; }
.pagehead {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 40px;
}
.pagehead h1 { font: 400 42px/1.1 var(--serif); color: var(--display2); }
.pagehead .sub { margin: 10px 0 0; font: 400 13px var(--sans); color: var(--dim); }
.pagehead .headact { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sechead {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.sechead h2, .sec { font: 400 27px var(--serif); color: var(--display2); }
/* A heading that is also its own disclosure: the button carries the h2's type so
   the section still reads as a heading, and the caret says it opens. */
.dh { line-height: 1; }
.dh .disclosure { font: inherit; color: var(--display2); gap: 10px; padding: 0; }
.dh .disclosure:hover { color: var(--gold-hi); }
.dh .caret { font-size: 13px; color: var(--faint); }
.sechead .note { font: 400 12.5px var(--sans); color: var(--faint); }
.sechead .titlegroup { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.back { font: 400 12px var(--sans); letter-spacing: .08em; color: var(--faint); }
.back:hover { color: var(--gold); }

.errbox, .emptybox {
  border: 1px solid var(--hair); padding: 34px; text-align: center;
  color: var(--dim); margin-top: 30px; font: 400 14px/1.7 var(--sans);
}
.emptybox .big { font: 400 22px var(--serif); color: var(--text); margin-bottom: 8px; }

/* ---------- buttons ---------- */
/* One system: gold outline = the primary action of a region; hairline outline =
   quiet/secondary; underlined text = tertiary. No solid fills anywhere. */
.cta-btn, .btn-gold {
  display: inline-block; background: none; border: 1px solid var(--gold-line);
  color: var(--gold); font: 400 11.5px var(--sans); letter-spacing: .14em;
  text-transform: uppercase; padding: 11px 20px; cursor: pointer;
  text-align: center; transition: background .25s ease, color .25s ease;
}
.cta-btn:hover, .btn-gold:hover { background: var(--gold-tint); color: var(--gold-hi); }
.cta-btn:disabled, .btn-gold:disabled { opacity: .45; cursor: default; }
.cta-btn:disabled:hover, .btn-gold:disabled:hover { background: none; color: var(--gold); }
.toolbtn {
  background: none; border: 1px solid var(--hair-strong); color: var(--dim2);
  font: 400 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 16px; cursor: pointer; transition: border-color .25s ease, color .25s ease;
}
.toolbtn:hover { color: var(--text); border-color: var(--gold-line); }
.toolbtn.active { color: var(--gold); border-color: var(--gold-line); background: var(--gold-tint); }
.toolbtn:disabled { opacity: .4; cursor: default; }
.toolbtn:disabled:hover { color: var(--dim2); border-color: var(--hair-strong); }
.linkbtn {
  background: none; border: none; color: var(--dim2); cursor: pointer;
  font: 400 12px var(--sans); padding: 2px 0;
  border-bottom: 1px solid var(--hair-dash);
}
.linkbtn:hover { color: var(--gold-hi); }
/* A title that names a painting we hold, wherever prose mentions one. Gold, because
   almost everywhere it appears is the dark wall and gold is what says "you can go
   here". The placard is the exception and overrides this: it's paper, so it wants
   ink (see viewer.css). Italic either way — still a title, just somewhere you can go.

   Tag-agnostic on purpose. In a connection card or an aside row the note is already
   inside a link or a button, and the parser won't have a link in a link, so
   linkXrefs makes it a span that says it's a link — which rules out the anchor
   pseudo-classes. */
.pl-xref {
  color: var(--gold); cursor: pointer; text-decoration: none;
  border-bottom: 1px solid var(--gold-line);
  transition: color .2s ease, border-color .2s ease;
}
.pl-xref:hover, .pl-xref:focus-visible {
  color: var(--gold-hi); border-bottom-color: var(--gold-hi);
}
.pl-xref:focus-visible { outline: 2px solid var(--gold-line); outline-offset: 2px; }
.danger {
  background: none; border: 1px solid rgba(191,126,99,.5); color: var(--t-curator);
  font: 400 11.5px var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 8px 16px; cursor: pointer;
}
.danger:hover { background: rgba(191,126,99,.1); }
.danger:disabled { opacity: .4; cursor: default; }
.danger:disabled:hover { background: none; }
.ghost-btn {
  display: block; text-align: center; font: 400 11.5px var(--sans);
  letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
  border: 1px dashed var(--hair-dash); padding: 11px 0; cursor: pointer;
  background: none; width: 100%; transition: color .25s ease, border-color .25s ease;
}
.ghost-btn:hover { color: var(--gold); border-color: var(--gold-line); }
.tiny { font: 400 12px/1.6 var(--sans); color: var(--faint); text-transform: none; letter-spacing: 0; }