/* ============================================================
   FACTUR — Public Site
   Design tokens + global styles
   ============================================================ */

:root {
  --bg:          #080808;
  --bg2:         #0E0E0C;
  --bg3:         #141412;
  --ink:         #E0DBD3;
  --ink-mid-base:#6A6860;
  --ink-dim-base:#2E2E2C;
  /* derived: brighten secondary/ghost text toward --ink by --contrast */
  --contrast:    35%;
  --ink-mid:     color-mix(in srgb, var(--ink-mid-base), var(--ink) var(--contrast));
  --ink-dim:     color-mix(in srgb, var(--ink-dim-base), var(--ink) calc(var(--contrast) * 0.7));
  --hairline:    rgba(224,219,211, calc(0.07 * var(--hl-mult, 1)));
  --hairline2:   rgba(224,219,211, calc(0.13 * var(--hl-mult, 1)));
  --accent:      rgba(255,120,70,0.9);
  --accent-solid:#FF7846;
  --accent-bg:   rgba(255,107,60,0.12);
  --accent-glow: rgba(255,120,70,0.25);
  --live:        #4a9a6a;

  --nav-w: 48px;
  --pad: 1.5rem;

  /* tweakable knobs */
  --font-display: 'Syne';
  --font-mono: 'JetBrains Mono';
  --hl-mult: 1;        /* hairline intensity multiplier */
  --type-scale: 1.2;   /* global rem scale */
  --cell-min: 280px;   /* gallery column min width */

  --text-wordmark: clamp(5rem, 14vw, 13rem);
  --text-title:    clamp(1.4rem, 3vw, 2.4rem);
  --text-display:  1.35rem;
  --text-body:     0.72rem;
  --text-label:    0.6rem;
  --text-code:     0.68rem;
  --text-tiny:     0.56rem;

  /* syntax */
  --syn-key:   #c084fc;
  --syn-str:   #86efac;
  --syn-num:   #67e8f9;
  --syn-com:   #4B5563;
  --syn-fn:    #93c5fd;
  --syn-var:   #fde68a;
  --syn-punc:  #9CA3AF;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  cursor: crosshair;
}
html[data-cursor="default"] * { cursor: default; }
html[data-cursor="default"] button,
html[data-cursor="default"] a,
html[data-cursor="default"] input { cursor: pointer; }
html[data-cursor="default"] input[type="text"],
html[data-cursor="default"] input[type="email"] { cursor: text; }

/* neutralize native button chrome (Safari renders white boxes otherwise) */
button {
  font-family: inherit;
  font-size: inherit;
  background: none;
  border: none;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}

html, body {
  height: 100%;
}
html { font-size: calc(16px * var(--type-scale, 1)); }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-mono), monospace;
  font-weight: 300;
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;
  transition: background 0.45s ease, color 0.45s ease;
}

::selection { background: var(--accent-bg); color: var(--ink); }

.syne { font-family: var(--font-display), sans-serif; }

/* ---- scrollbars (orange thumb site-wide) ---- */
html { scrollbar-color: var(--accent-solid) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--accent-solid); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }

/* ============================================================
   APP SHELL
   ============================================================ */

#app {
  display: flex;
  height: 100vh;
  width: 100vw;
}

/* ---- LEFT NAV STRIP ---- */
#nav {
  width: var(--nav-w);
  flex: 0 0 var(--nav-w);
  height: 100%;
  border-right: 1px solid rgba(255,255,255,0.08);
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 30;
  transition: background 0.45s ease, border-color 0.45s ease;
}

.nav-icons {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  flex: 1 1 auto;
  justify-content: center;
}

.nav-slot {
  height: 52px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border-left: 2px solid transparent;
  color: #B9B4AC;
  transition: color 0.3s ease;
}
.nav-slot .ic {
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
}
.nav-slot svg { width: 18px; height: 18px; display: block; }
.nav-slot:hover { color: #fff; }
.nav-slot.active { color: var(--accent-solid); border-left-color: var(--accent-solid); }

.nav-slot .tip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  white-space: nowrap;
  font-size: var(--text-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  background: var(--bg3);
  border: 1px solid var(--hairline2);
  padding: 0.3rem 0.5rem;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s ease;
  z-index: 40;
}
.nav-slot:hover .tip { opacity: 1; }

.nav-wordmark {
  flex: 0 0 auto;
  margin-top: 1.3rem;
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  color: rgba(224,219,211,0.32);
  pointer-events: none;
  white-space: nowrap;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  transition: color 0.45s ease;
}

/* ---- MAIN COLUMN ---- */
#main {
  flex: 1 1 auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* page routing */
.page { display: none; flex-direction: column; height: 100%; min-height: 0; }
.page.active { display: flex; }

/* ============================================================
   HEADER STRIP (shared)
   ============================================================ */
.header {
  height: 3rem;
  flex: 0 0 3rem;
  border-bottom: 1px solid var(--hairline2);
  display: flex;
  align-items: stretch;
}
.header > * { display: flex; align-items: center; }
.hdr-label {
  padding: 0 var(--pad);
  border-right: 1px solid var(--hairline2);
  font-size: var(--text-label);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mid);
  white-space: nowrap;
}
/* detail back-breadcrumb */
.detail-breadcrumb { display: flex; align-items: center; gap: 0.5rem; }
.bc-back {
  appearance: none; background: transparent; border: none;
  font-family: var(--font-mono), monospace;
  font-size: var(--text-label); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mid); display: inline-flex; align-items: center; gap: 0.4rem;
  transition: color 0.2s;
}
.bc-back:hover { color: var(--accent-solid); }
.bc-arrow { font-size: 1.2rem; line-height: 1; transform: translateY(-2px); }
.bc-sep { color: var(--ink-dim); }
.hdr-center {
  flex: 1 1 auto;
  padding: 0 var(--pad);
  font-size: 0.65rem;
  color: var(--ink-mid);
  font-weight: 300;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.hdr-center.title {
  font-family: var(--font-display), sans-serif;
  font-weight: 700;
  color: var(--ink);
  font-size: 1.05rem;
  letter-spacing: -0.02em;
  justify-content: center;
}

/* artist-statement link in gallery header */
.statement-link {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0;
  font-family: var(--font-mono), monospace;
  font-size: 0.65rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  border-bottom: 1px solid var(--hairline2);
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
  flex: 0 0 auto;
}
.statement-link:hover { color: var(--accent); border-bottom-color: var(--accent); }
.statement-quote {
  font-size: 0.65rem;
  font-weight: 300;
  font-style: italic;
  color: var(--ink-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* stat cells */
.stat-cells { display: flex; }
.stat-cell {
  padding: 0 1.15rem;
  border-left: 1px solid var(--hairline2);
  display: flex;
  flex-direction: row;
  align-items: baseline;
  gap: 0.6rem;
  justify-content: center;
}
.stat-cell .lbl {
  font-size: var(--text-tiny);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
  line-height: 1.3;
  white-space: nowrap;
}
.stat-cell .val {
  font-family: var(--font-mono), monospace;
  font-weight: 400;
  font-size: var(--text-tiny);
  letter-spacing: 0.14em;
  line-height: 1.3;
  color: var(--ink);
}
.stat-cell .val.accent { color: var(--accent); }

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */
.micro {
  font-size: var(--text-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mid);
}

.kv {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px dotted var(--hairline2);
  font-size: 0.64rem;
}
.kv .k { color: var(--ink-mid); letter-spacing: 0.08em; text-transform: uppercase; }
.kv .v { color: var(--ink); text-align: right; }
.kv .v.accent { color: var(--accent); }

.live-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--live);
  display: inline-block;
  animation: pulse 2s ease-in-out infinite;
}
.accent-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent-solid);
  display: inline-block;
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:0.25;} }

.blink::after {
  content: '_';
  animation: blink 1.1s step-end infinite;
}
@keyframes blink { 0%,50%{opacity:1;} 50.01%,100%{opacity:0;} }

.entry-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--hairline2);
  background: transparent;
  color: var(--ink-mid);
  font-family: var(--font-mono), monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 1rem 2.4rem;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.entry-btn .arrow { opacity: 0; transform: translateX(-6px); transition: all 0.2s; }
.entry-btn:hover { color: var(--ink); background: var(--hairline); border-color: var(--ink-dim); }
.entry-btn:hover .arrow { opacity: 1; transform: translateX(0); }

/* staggered page-load fade */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page.active .fu {
  opacity: 0;
  animation: fadeUp 0.8s cubic-bezier(0.16,1,0.3,1) both;
}
.page.active .fu:nth-child(2) { animation-delay: 0.05s; }
.page.active .fu:nth-child(3) { animation-delay: 0.10s; }
.page.active .fu:nth-child(4) { animation-delay: 0.15s; }
.page.active .fu:nth-child(5) { animation-delay: 0.20s; }
.page.active .fu:nth-child(6) { animation-delay: 0.25s; }
.page.active .fu:nth-child(7) { animation-delay: 0.30s; }
.page.active .fu:nth-child(8) { animation-delay: 0.35s; }

/* utility scroll region */
.scroll { overflow-y: auto; min-height: 0; }