/* HALLMARK v10 — APPRAISAL FOLIO
   A secured-lending docket: vellum, claret, brass and ink. */

html { background: #241916; }
body {
  color: var(--ink);
  background:
    radial-gradient(circle at 78% 8%, rgba(180,134,59,.10), transparent 24rem),
    linear-gradient(102deg, #efe5d3 0, var(--paper) 42%, #f8f2e8 100%);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.58;
}
body::before {
  opacity: .42;
  background-size: 7px 7px, 100% 100%;
  background-image:
    radial-gradient(circle, rgba(39,28,24,.12) .45px, transparent .55px),
    linear-gradient(90deg, rgba(255,255,255,.18), transparent 36%, rgba(116,31,50,.025));
  -webkit-mask-image: none;
  mask-image: none;
}

/* React Bits Waves, redrawn as a slow copperplate contour field. It lives
   behind every route and never participates in layout or pointer handling. */
.folio-atmosphere {
  --folio-x: 68vw;
  --folio-y: 28vh;
  position: fixed;
  inset: 0 0 0 228px;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  opacity: .82;
}
.folio-atmosphere::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(circle 240px at var(--folio-x) var(--folio-y), rgba(255,250,240,.62), rgba(180,134,59,.08) 42%, transparent 72%),
    linear-gradient(90deg, rgba(244,237,223,.9) 0, transparent 13%, transparent 88%, rgba(244,237,223,.72) 100%);
  mix-blend-mode: soft-light;
}
.folio-atmosphere::after {
  content: '';
  position: absolute;
  inset: 5.5% 4.5%;
  z-index: 2;
  border: 1px solid rgba(116,31,50,.12);
  clip-path: polygon(0 0,27% 0,27% 1px,72% 1px,72% 0,100% 0,100% 22%,calc(100% - 1px) 22%,calc(100% - 1px) 78%,100% 78%,100% 100%,73% 100%,73% calc(100% - 1px),27% calc(100% - 1px),27% 100%,0 100%,0 78%,1px 78%,1px 22%,0 22%);
}
.folio-atmosphere-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  opacity: .8;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 13%,#000 94%,transparent 100%);
  mask-image: linear-gradient(90deg,transparent 0,#000 13%,#000 94%,transparent 100%);
}
.folio-orbit {
  position: absolute;
  z-index: 3;
  border: 1px solid rgba(116,31,50,.19);
  border-radius: 50%;
  box-shadow: inset 0 0 0 8px rgba(244,237,223,.18);
  animation: folio-drift 18s ease-in-out infinite alternate;
}
.folio-orbit::before,.folio-orbit::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  background: rgba(116,31,50,.18);
  transform: translate(-50%,-50%);
}
.folio-orbit::before { width: calc(100% + 28px); height: 1px; }
.folio-orbit::after { width: 1px; height: calc(100% + 28px); }
.folio-orbit-a { top: 14%; right: 5.8%; width: clamp(150px,16vw,260px); aspect-ratio: 1; }
.folio-orbit-b { bottom: 11%; left: 5.5%; width: clamp(88px,9vw,148px); aspect-ratio: 1; animation-delay: -8s; animation-duration: 23s; }
.folio-register {
  position: absolute;
  right: 5%;
  bottom: 4.1%;
  z-index: 3;
  color: rgba(116,31,50,.43);
  font: 500 7px/1 var(--mono);
  letter-spacing: .18em;
  writing-mode: vertical-rl;
}
@keyframes folio-drift {
  from { transform: translate3d(-5px,7px,0) rotate(-3deg); }
  to { transform: translate3d(8px,-6px,0) rotate(4deg); }
}
main,.site-footer { position: relative; }
main { z-index: 4; }
.site-footer { z-index: 5; }
h1, h2, h3, h4 {
  color: var(--ink);
  font-family: var(--display);
  font-weight: 550;
  line-height: 1.02;
  letter-spacing: -.035em;
}
.label {
  color: var(--muted);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
}
.reg { font-family: var(--mono); }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; }
.skip-link { color: var(--paper); background: var(--violet); font-family: var(--sans); }

/* Desktop navigation is a bound-document spine, never a command bar. */
.site-header {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 40;
  display: flex;
  width: 228px;
  min-height: 100vh;
  padding: 28px 22px 22px;
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  color: var(--paper);
  background:
    linear-gradient(90deg, rgba(255,255,255,.04), transparent 15%, transparent 84%, rgba(0,0,0,.18)),
    var(--violet-2);
  border: 0;
  border-right: 1px solid #2f0b13;
  box-shadow: 7px 0 0 rgba(39,28,24,.08);
  backdrop-filter: none;
}
.site-header::after {
  content: 'RH 4663  /  APPRAISAL OFFICE';
  position: absolute;
  right: -2px;
  bottom: 188px;
  color: rgba(244,237,223,.34);
  font: 500 8px/1 var(--mono);
  letter-spacing: .11em;
  writing-mode: vertical-rl;
}
.brand { gap: 11px; align-items: center; }
.brand img { width: 44px; height: 44px; filter: drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
.brand-lockup { gap: 2px; }
.brand-word {
  color: var(--paper);
  font-family: var(--display);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: -.025em;
}
.brand-sub { color: #d5bdad; font-size: 10.5px; letter-spacing: .02em; }
.main-nav {
  display: grid;
  justify-content: stretch;
  gap: 0;
  margin-top: 22px;
  border-top: 1px solid rgba(244,237,223,.2);
}
.nav-link {
  display: flex;
  min-height: 51px;
  padding: 15px 4px;
  align-items: center;
  justify-content: space-between;
  color: #d8c3b8;
  border-bottom: 1px solid rgba(244,237,223,.16);
  font-size: 14px;
  font-weight: 550;
}
.nav-link::before {
  content: '0' counter(nav-item);
  color: rgba(244,237,223,.4);
  font: 500 8px/1 var(--mono);
  letter-spacing: .04em;
  counter-increment: nav-item;
  order: 2;
}
.main-nav { counter-reset: nav-item; }
.nav-link::after {
  right: auto;
  bottom: -1px;
  left: 0;
  width: 34px;
  height: 2px;
  background: #d2aa65;
  transform-origin: left;
}
.nav-link:hover, .nav-link.is-active { color: #fff8ec; }
.nav-link.is-active { padding-left: 12px; }
.header-actions {
  display: grid;
  gap: 9px;
  margin-top: auto;
}
.chain-chip {
  justify-content: flex-start;
  padding: 10px 11px;
  color: #d8c3b8;
  background: rgba(28,7,12,.24);
  border: 1px solid rgba(244,237,223,.22);
  border-radius: 2px;
  font-size: 10px;
}
.chain-chip b { color: var(--paper); }
.live-pulse {
  width: 7px; height: 7px; flex-basis: 7px;
  background: #d2aa65;
  border-radius: 50%;
  animation: none;
}
.connect-button, .menu-button {
  min-height: 46px;
  color: var(--violet-2);
  background: #ead7b7;
  border: 1px solid #ead7b7;
  border-radius: 2px;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 700;
}
.connect-button:hover { color: var(--paper); background: transparent; border-color: rgba(244,237,223,.55); transform: none; }
.connect-button[data-state='connected'] { color: var(--paper); background: transparent; border-color: rgba(244,237,223,.32); }
.connect-button[data-state='wrong'] { color: var(--paper); background: var(--warn); border-color: var(--warn); }

body { padding-left: 228px; }
.network-strip {
  position: relative;
  z-index: 20;
  grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.4fr);
  color: var(--ink);
  background: rgba(235,223,201,.96);
  border-top: 3px double var(--line);
  border-bottom: 1px solid var(--line);
}
.network-strip > div {
  min-height: 50px;
  padding: 10px clamp(12px, 2vw, 26px);
  border-right: 1px solid var(--line);
}
.network-strip span { font-size: 8.5px; letter-spacing: .13em; opacity: .72; }
.network-strip b { color: var(--ink); font-family: var(--mono); font-size: 10.5px; font-weight: 500; }
.network-strip .strip-note { background: var(--violet); }
.network-strip .strip-note span, .network-strip .strip-note b { color: var(--paper); }
.feed-status b i { border-color: var(--paper); background: #cbb591; }
.feed-status[data-feed='live'] b i { background: #d2aa65; }
.feed-status[data-feed='delayed'] b i { background: #e08a58; }
.feed-status b i.is-hit { animation: folio-hit .65s ease-out 1; }
@keyframes folio-hit { 50% { box-shadow: 0 0 0 6px rgba(210,170,101,0); transform: scale(1.35); } }
#stripBlock.is-received { animation: ink-received .65s ease-out 1; }
@keyframes ink-received { 45% { color: var(--paper); background: var(--violet); } }

main {
  width: min(100%, 1340px);
  padding: clamp(36px, 5vw, 78px) var(--gutter) clamp(84px, 9vw, 130px);
}
.view-head {
  position: relative;
  grid-template-columns: minmax(0, 1.18fr) minmax(350px, .82fr);
  min-height: clamp(470px, 47vw, 650px);
  gap: clamp(24px, 4vw, 68px);
  margin-bottom: clamp(32px, 5vw, 72px);
  border-top: 1px solid var(--ink);
  border-bottom: 4px double var(--line);
  animation: folio-open .72s var(--ease) both;
}
@keyframes folio-open {
  from { opacity: 0; clip-path: inset(0 0 18% 0); transform: translateY(14px); }
  to { opacity: 1; clip-path: inset(0); transform: none; }
}
.view-head-copy {
  justify-content: center;
  gap: 22px;
  padding: clamp(64px, 8vw, 112px) 0 clamp(54px, 7vw, 94px);
}
.view-head-copy::before {
  content: 'Docket H—4663  ·  secured lending desk';
  top: 18px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.view-head .kicker { gap: 12px; }
.view-head h1 {
  max-width: 10.4ch;
  color: var(--ink);
  font-size: clamp(62px, 7.6vw, 112px);
  font-weight: 480;
  line-height: .91;
  letter-spacing: -.058em;
}
.view-head .lede {
  max-width: 52ch;
  color: var(--muted);
  font-family: var(--sans);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.56;
}
.route-field {
  align-self: center;
  min-height: 390px;
  padding: clamp(26px, 3vw, 42px);
  color: var(--ink);
  background:
    linear-gradient(135deg, rgba(116,31,50,.035), transparent 42%),
    var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 50% 50% 4px 4px / 18% 18% 4px 4px;
  box-shadow: 0 14px 28px rgba(75,53,45,.09), inset 0 0 0 7px rgba(244,237,223,.7);
}
.route-field::before {
  content: 'HM';
  right: 50%;
  bottom: 50%;
  color: rgba(116,31,50,.045);
  -webkit-text-stroke: 0;
  font-family: var(--display);
  font-size: clamp(150px, 18vw, 270px);
  font-weight: 500;
  line-height: .8;
  transform: translate(50%, 58%);
}
.route-field::after {
  content: 'APPRAISED  /  ROBINHOOD CHAIN';
  right: 26px;
  bottom: 21px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: 7px;
  letter-spacing: .12em;
  writing-mode: horizontal-tb;
}
.route-field-head { color: var(--ink); font-size: 9px; letter-spacing: .13em; }
.route-field-head b { color: var(--violet); font-family: var(--mono); }
.route-track { padding-right: 0; }
.route-node { gap: 5px; animation: seal-set .55s var(--ease) both; }
@keyframes seal-set { from { opacity: 0; transform: translateY(9px) rotate(-2deg); } to { opacity: 1; transform: none; } }
.route-node i {
  width: clamp(42px, 4.5vw, 60px);
  height: clamp(42px, 4.5vw, 60px);
  border: 1px solid var(--violet);
  border-radius: 50%;
  background: rgba(244,237,223,.72);
  box-shadow: inset 0 0 0 5px var(--paper-2), inset 0 0 0 6px rgba(116,31,50,.22);
}
.route-node i::after { width: 7px; height: 7px; background: var(--violet); border-radius: 50%; transform: none; }
.route-node b { color: var(--ink); font-size: 10px; letter-spacing: .1em; }
.route-node small { color: var(--muted); font-family: var(--sans); font-size: 9px; }
.route-node.is-live i { background: var(--paper); }
.route-node.is-live i::after { background: #9b6a2c; }
.route-node.is-output i { border-color: var(--violet); background: var(--violet); }
.route-node.is-output i::after { background: #d2aa65; }
.route-node.is-output b { color: var(--violet); }
.route-link { height: 1px; background: var(--violet); }

.site-footer { margin-left: 0; }
@media (min-width: 981px) {
  /* Park the correspondence tab in the empty lower-spine bay. The dialog
     itself opens beside the binding so neither can cover document text. */
  .support-dock { left: 22px; bottom: 129px; }
  .support-panel { position: fixed; right: auto; bottom: 18px; left: 246px; }
}