/* Architect paper test skin.
   Loaded after each page's own CSS so copy and layout stay unchanged. */

:root {
  --wall: #f4f4ef;
  --wall-warm: #f4f4ef;
  --wall-cool: #e7e7df;
  --ink: #121212;
  --ink-soft: rgba(18, 18, 18, 0.64);
  --ink-faint: rgba(18, 18, 18, 0.36);
  --ink-rule: rgba(18, 18, 18, 0.18);
  --brass: #111111;
  --brass-deep: #050505;
  --brass-light: #f4f4ef;
  --crimson: #d92f24;
}

html,
body {
  background: #f4f4ef !important;
  color: var(--ink) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(217, 47, 36, 0.0) 0 calc(100% - 16px), rgba(217, 47, 36, 0.68) calc(100% - 16px) 100%),
    linear-gradient(180deg, rgba(18, 18, 18, 0.04), transparent 32%, rgba(18, 18, 18, 0.06));
}

.site,
.wall,
main,
.reveal-page,
.launch-page {
  background: transparent !important;
}

.site-header,
.booth-header {
  background: rgba(244, 244, 239, 0.92) !important;
  border-bottom: 1px solid var(--ink-rule) !important;
  box-shadow: 0 10px 26px rgba(18, 18, 18, 0.06);
}

.parallax-field {
  opacity: 0.30;
  filter: saturate(0.78) contrast(1.04);
}

.float-work .ascii-art-target,
.art-frame,
.hero-copy,
.goal-section,
.mint-panel,
.placard,
.modes-panel,
.mode-card,
.not-revealed {
  background:
    linear-gradient(90deg, rgba(18, 18, 18, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(18, 18, 18, 0.03) 1px, transparent 1px),
    rgba(255, 255, 255, 0.86) !important;
  background-size: 24px 24px !important;
  border-color: var(--ink-rule) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.76),
    0 20px 46px rgba(18, 18, 18, 0.12) !important;
}

.frame {
  box-shadow:
    0 48px 86px rgba(18, 18, 18, 0.22),
    0 16px 32px rgba(18, 18, 18, 0.12),
    inset 0 0 0 1px rgba(240, 215, 150, 0.26),
    inset 0 -2px 6px rgba(60, 40, 8, 0.34) !important;
}

.mat {
  background:
    linear-gradient(90deg, rgba(18, 18, 18, 0.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(18, 18, 18, 0.03) 1px, transparent 1px),
    #f6f3ea !important;
  background-size: 24px 24px !important;
}

.picture,
.art-frame img,
.mode-thumb {
  background: #ffffff !important;
}

.brass,
.button,
.connect-btn.is-connected,
#mintCta,
.ghost-btn:hover,
.mode-dl:hover {
  background: #111111 !important;
  color: #f7f7f0 !important;
  border-color: #111111 !important;
  box-shadow: 0 14px 34px rgba(18, 18, 18, 0.18) !important;
}

.connect-btn,
.ghost-btn,
.nav-arrow {
  background:
    linear-gradient(90deg, rgba(18, 18, 18, 0.035) 1px, transparent 1px),
    rgba(255, 255, 255, 0.74) !important;
  background-size: 24px 24px !important;
  border-color: var(--ink-rule) !important;
  color: var(--ink) !important;
}

.dot {
  background: #d92f24 !important;
  box-shadow: 0 0 0 3px rgba(217, 47, 36, 0.16) !important;
}

.goal-track,
.progress-track,
.mint-progress {
  background: rgba(18, 18, 18, 0.10) !important;
}

.fill,
.goal-track .fill,
.progress-fill,
.mint-progress-fill {
  background: #d92f24 !important;
}

.hero-title h1 em,
.editorial em,
.reveal-title em {
  text-decoration-color: rgba(217, 47, 36, 0.42) !important;
}