/* ============================================================
   MARM TRADING — ARCHIVE · visual-system prototype (static)
   Translates journal/CONCEPT.md into the MARM visual language.
   Inherits ecosystem.css tokens. No functionality — look only.
   The unit is the INSCRIPTION on the SPINE, never a card.
   ============================================================ */
:root { --win: #8fae8a; --loss: #c98a72; }

.arch {
  min-height: 100vh; min-height: 100svh;
  background:
    radial-gradient(ellipse 60% 50% at 50% -6%, rgba(140, 115, 81, .07), transparent 60%),
    radial-gradient(ellipse 90% 60% at 50% 130%, rgba(116, 134, 152, .05), transparent 60%),
    var(--graphite);
}

/* slim, recessive top line — not a dashboard nav */
.arch__rule {
  display: flex; align-items: center; gap: 14px;
  max-width: 1180px; margin: 0 auto;
  padding: 22px clamp(24px, 5vw, 56px);
  font-size: 11px; text-transform: uppercase; letter-spacing: .28em; color: var(--stone-mute);
}
.arch__rule svg { width: 24px; height: 24px; color: var(--bronze); }
.arch__rule .sp { flex: 1; }
.arch__rule a { color: var(--bronze-lit); text-decoration: none; }

/* ---- monumental head ---- */
.arch__head { max-width: 1180px; margin: 0 auto; padding: clamp(96px, 17vh, 190px) clamp(24px, 5vw, 56px) clamp(40px, 7vh, 80px); }
.arch__kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .42em; color: var(--bronze-lit); margin-bottom: 26px; }
.arch__title { font-family: var(--font-d); font-weight: 500; color: var(--ivory); font-size: clamp(56px, 10vw, 132px); line-height: .96; letter-spacing: .005em; }
.arch__lead { max-width: 540px; margin-top: 30px; font-size: 16px; color: var(--marble); }
.arch__count { margin-top: 40px; font-size: 11px; text-transform: uppercase; letter-spacing: .26em; color: var(--stone-mute); }

/* ============================================================
   THE CHRONICLE — descend through your own time
   ============================================================ */
.chronicle { max-width: 1180px; margin: 0 auto; padding: 0 clamp(24px, 5vw, 56px) clamp(80px, 14vh, 160px); }

/* every row shares the same two columns; the spine is the stacked
   border-left of the right column → one continuous vertical line */
.veha, .inscr { display: grid; grid-template-columns: clamp(96px, 13vw, 168px) 1fr; }
.veha__main, .inscr__main {
  border-left: 1px solid var(--line);
  padding-left: clamp(22px, 3vw, 48px);
  position: relative;
}

/* — веха: a monumental engraved period threshold — */
.veha { margin-top: clamp(40px, 7vh, 90px); }
.veha:first-of-type { margin-top: 0; }
.veha__time { } /* empty rail cell keeps the spine aligned */
.veha__main { padding-top: clamp(20px, 4vh, 44px); padding-bottom: clamp(8px, 2vh, 18px); }
.veha__label {
  font-family: var(--font-d); font-weight: 500; line-height: 1;
  font-size: clamp(34px, 6vw, 78px);
  color: transparent; -webkit-text-stroke: 1px rgba(140, 115, 81, .5);
  letter-spacing: .02em;
}
.veha__sub { margin-top: 14px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .26em; color: var(--stone-mute); }
/* node where the веха meets the spine */
.veha__main::before {
  content: ""; position: absolute; left: -4px; top: clamp(20px, 4vh, 44px);
  width: 7px; height: 7px; background: var(--bronze); transform: rotate(45deg);
}

/* — inscription: a stratum, not a card — */
.inscr__time {
  text-align: right; padding-right: clamp(18px, 2.2vw, 30px); padding-top: clamp(40px, 6vh, 70px);
  font-family: var(--font-d); font-size: 15px; color: var(--stone-mute); white-space: nowrap;
  font-variant-numeric: lining-nums tabular-nums;
}
.inscr__main {
  display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: clamp(20px, 4vw, 64px);
  padding: clamp(40px, 6vh, 70px) 0 clamp(34px, 5vh, 60px);
  border-top: 1px solid var(--line-soft);
  transition: background .6s var(--ease);
}
.inscr:first-of-type .inscr__main { border-top: none; }
.inscr__main::before { /* node on the spine */
  content: ""; position: absolute; left: -3.5px; top: clamp(40px, 6vh, 70px);
  width: 6px; height: 6px; border: 1px solid var(--bronze-dim); background: var(--graphite); transform: rotate(45deg);
}
.inscr:hover .inscr__main { background: linear-gradient(90deg, rgba(232,226,214,.025), transparent 70%); }

.inscr__head { display: flex; align-items: baseline; gap: 18px; flex-wrap: wrap; }
.inscr__asset { font-family: var(--font-d); font-weight: 500; color: var(--ivory); font-size: clamp(34px, 4.6vw, 60px); line-height: 1; letter-spacing: .01em; }
.inscr__dir { font-size: 10.5px; text-transform: uppercase; letter-spacing: .24em; color: var(--stone-mute); }
.inscr__dir.long { color: var(--win); } .inscr__dir.short { color: var(--loss); }
.inscr { text-decoration: none; color: inherit; cursor: pointer; }
.inscr__relic { /* the screenshot, hinted as a relic's edge that catches light */
  width: 32px; height: 21px; border: 1px solid var(--bronze-dim); position: relative; opacity: .72;
  transition: opacity .45s var(--ease), border-color .45s var(--ease);
}
.inscr__relic::after { content: ""; position: absolute; inset: 4px;
  background: linear-gradient(118deg, transparent 38%, rgba(140, 115, 81, .55) 38% 45%, transparent 45%); }
.inscr:hover .inscr__relic { opacity: 1; border-color: var(--bronze); }
.inscr__thesis { margin-top: 16px; font-size: 14.5px; color: var(--marble); max-width: 62ch; line-height: 1.6; }
.inscr__marks { margin-top: 18px; display: flex; flex-wrap: wrap; gap: 18px; }
.inscr__marks span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .2em; color: var(--bronze-lit); }
.inscr__marks span::before { content: "— "; color: var(--bronze-dim); }

/* the outcome — a single carved figure, not a pill */
.inscr__out { text-align: right; white-space: nowrap; }
.inscr__r { font-family: var(--font-d); font-size: clamp(28px, 3.6vw, 46px); line-height: 1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; }
.inscr__r.win { color: var(--win); } .inscr__r.loss { color: var(--loss); }
.inscr__verdict { margin-top: 10px; font-size: 9.5px; text-transform: uppercase; letter-spacing: .22em; color: var(--stone-mute); }
.inscr__open { color: var(--bronze-lit); font-family: var(--font-d); font-size: clamp(20px, 2.4vw, 28px); font-style: italic; }
/* a sealed (reviewed) record bears the order's mark */
.inscr__seal { display: inline-block; margin-top: 12px; color: var(--bronze); }
.inscr__seal svg { width: 22px; height: 22px; }

/* reveal cascade — the ecosystem cadence, CSS-only */
.veha, .inscr { opacity: 0; transform: translateY(22px); animation: rise 1s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes rise { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .veha, .inscr { animation: none; opacity: 1; transform: none; } }

@media (max-width: 720px) {
  .veha, .inscr { grid-template-columns: 1fr; }
  .veha__time, .inscr__time { display: none; }
  .veha__main, .inscr__main { border-left: none; padding-left: 0; }
  .veha__main::before, .inscr__main::before { display: none; }
  .inscr__main { grid-template-columns: 1fr; gap: 18px; }
  .inscr__out { text-align: left; }
}

/* shared top-rule link behaviour */
.arch__rule a { transition: color .35s; }
.arch__rule a:hover, .arch__rule a.is-here { color: var(--ivory); }

/* ============================================================
   THRESHOLD — admission by ritual (порог), not a login
   ============================================================ */
.thr {
  position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: clamp(70px, 12vh, 130px) 24px;
  background: radial-gradient(ellipse 50% 46% at 50% 44%, rgba(140, 115, 81, .11), transparent 62%), var(--graphite);
}
.thr__back { position: absolute; top: 26px; left: clamp(20px, 4vw, 48px); font-size: 11px; text-transform: uppercase; letter-spacing: .26em; color: var(--bronze-lit); text-decoration: none; }
.thr__seal { width: clamp(94px, 13vw, 146px); color: var(--bronze); margin-bottom: 40px; filter: drop-shadow(0 0 26px rgba(140, 115, 81, .18)); }
.thr__seal .ring-o { transform-box: fill-box; transform-origin: center; animation: thr-spin 150s linear infinite; }
.thr__seal .ring-i { transform-box: fill-box; transform-origin: center; animation: thr-spin 220s linear infinite reverse; }
@keyframes thr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .thr__seal .ring-o, .thr__seal .ring-i { animation: none; } }
.thr__kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .44em; color: var(--bronze-lit); margin-bottom: 22px; }
.thr__title { font-family: var(--font-d); font-weight: 500; color: var(--ivory); font-size: clamp(46px, 8vw, 100px); line-height: 1; }
.thr__lead { max-width: 430px; margin: 26px auto 54px; font-size: 14.5px; color: var(--stone-mute); line-height: 1.7; }
.thr__fields { width: 100%; max-width: 348px; display: flex; flex-direction: column; gap: 30px; }
.thr__field { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; }
.thr__field span { font-size: 10px; text-transform: uppercase; letter-spacing: .24em; color: var(--stone-mute); }
.thr__field input { width: 100%; background: transparent; border: none; border-bottom: 1px solid var(--line); color: var(--ivory); font-family: var(--font-b); font-size: 16px; font-weight: 300; padding: 6px 0; outline: none; }
.thr__field input::placeholder { color: var(--bronze-dim); }
.thr__field input:focus { border-bottom-color: var(--bronze); }
.thr__enter { margin-top: 10px; }
.thr__alt { margin-top: 42px; font-size: 12.5px; color: var(--stone-mute); }
.thr__alt a { color: var(--bronze-lit); text-decoration: none; border-bottom: 1px solid var(--bronze-dim); padding-bottom: 2px; }
.thr__foot { position: absolute; bottom: 24px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 12px; font-size: 10px; text-transform: uppercase; letter-spacing: .26em; color: var(--stone-mute); }
/* on phones the taller footer flows below the form (top-aligned content) so it
   never overlaps the login fields */
@media (max-width: 640px) {
  .thr { justify-content: flex-start; }
  .thr__foot { position: static; margin-top: auto; padding-top: 28px; }
}

/* ============================================================
   PLATE — engraved readings (shared: Свод, dossier)
   ============================================================ */
.plate { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); border-top: 1px solid var(--line-soft); border-left: 1px solid var(--line-soft); }
.metric { border-right: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); padding: clamp(24px, 3vw, 40px) clamp(20px, 2.5vw, 32px); }
.metric__k { font-size: 10px; text-transform: uppercase; letter-spacing: .22em; color: var(--stone-mute); margin-bottom: 18px; }
.metric__v { font-family: var(--font-d); font-weight: 500; color: var(--ivory); font-size: clamp(32px, 3.8vw, 52px); line-height: 1; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .01em; white-space: nowrap; }
.metric__v.win { color: var(--win); } .metric__v.loss { color: var(--loss); }
.metric__sub { margin-top: 14px; font-size: 11px; color: var(--stone-mute); }

/* ============================================================
   DOSSIER — a single trade examined as an artifact
   ============================================================ */
.dos { max-width: 1100px; margin: 0 auto; padding: clamp(36px, 6vh, 80px) clamp(24px, 5vw, 56px) clamp(80px, 12vh, 150px); }
.dos__back { font-size: 11px; text-transform: uppercase; letter-spacing: .26em; color: var(--bronze-lit); text-decoration: none; }
.dos__head { margin: 32px 0 clamp(36px, 6vh, 64px); }
.dos__kicker { font-size: 11px; text-transform: uppercase; letter-spacing: .3em; color: var(--stone-mute); margin-bottom: 22px; }
.dos__kicker b { color: var(--bronze-lit); font-weight: 400; }
.dos__asset { font-family: var(--font-d); font-weight: 500; color: var(--ivory); font-size: clamp(56px, 9.5vw, 128px); line-height: .92; }
.dos__verdict-line { margin-top: 24px; display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.dos__r { font-family: var(--font-d); font-size: clamp(30px, 4vw, 50px); font-variant-numeric: lining-nums tabular-nums; line-height: 1; }
.dos__r.win { color: var(--win); } .dos__r.loss { color: var(--loss); }
.dos__tag { font-size: 10.5px; text-transform: uppercase; letter-spacing: .22em; color: var(--stone-mute); }
.dos__grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(30px, 5vw, 72px); align-items: start; }
@media (max-width: 820px) { .dos__grid { grid-template-columns: 1fr; } }

/* the relic — the screenshot as a framed artifact under glass */
.relic { border: 1px solid var(--line); aspect-ratio: 16 / 10; position: relative; overflow: hidden;
  background: linear-gradient(135deg, rgba(28, 31, 35, .65), rgba(16, 17, 19, .2)); }
.relic::before { content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, transparent 0 21px, rgba(232, 226, 214, .022) 21px 22px),
              radial-gradient(ellipse 55% 45% at 32% 38%, rgba(140, 115, 81, .12), transparent 70%); }
.relic .c { position: absolute; width: 14px; height: 14px; border: 1px solid var(--bronze-dim); }
.relic .c.tl { top: 12px; left: 12px; border-right: none; border-bottom: none; }
.relic .c.tr { top: 12px; right: 12px; border-left: none; border-bottom: none; }
.relic .c.bl { bottom: 12px; left: 12px; border-right: none; border-top: none; }
.relic .c.br { bottom: 12px; right: 12px; border-left: none; border-top: none; }
.relic__cap { position: absolute; left: 16px; bottom: 14px; font-size: 10px; text-transform: uppercase; letter-spacing: .22em; color: var(--stone-mute); }
.dos__reason-k, .dos__measure-k { font-size: 10px; text-transform: uppercase; letter-spacing: .26em; color: var(--bronze-lit); margin-bottom: 18px; }
.dos__reason { font-size: 16px; line-height: 1.85; color: var(--marble); }
.dos__marks { margin-top: 28px; display: flex; flex-wrap: wrap; gap: 14px; }
.dos__marks span { font-size: 10px; text-transform: uppercase; letter-spacing: .2em; color: var(--bronze-lit); border: 1px solid var(--line-soft); padding: 8px 13px; }
.dos__measure { margin-top: clamp(44px, 7vh, 80px); }

/* the seal of judgment — the founder's verdict, sealed to the record */
.verdict { margin-top: clamp(54px, 8vh, 96px); border-top: 1px solid var(--line); padding-top: clamp(36px, 5vh, 60px); position: relative; }
.verdict__seal { position: absolute; right: 0; top: clamp(32px, 5vh, 56px); color: var(--bronze); opacity: .92; }
.verdict__seal svg { width: clamp(52px, 7vw, 82px); height: auto; }
.verdict__k { font-size: 10px; text-transform: uppercase; letter-spacing: .3em; color: var(--bronze-lit); margin-bottom: 22px; }
.verdict__by { font-family: var(--font-d); font-style: italic; font-size: 21px; color: var(--bronze-lit); margin-bottom: 24px; }
.verdict__body { max-width: 58ch; font-size: 16px; line-height: 1.9; color: var(--ivory); }
.verdict__body p { margin-bottom: 18px; }
.verdict__date { margin-top: 28px; font-size: 10px; text-transform: uppercase; letter-spacing: .24em; color: var(--stone-mute); }

/* ============================================================
   СВОД — the assay: truth distilled from the record
   ============================================================ */
.svod { max-width: 1100px; margin: 0 auto; padding: clamp(36px, 6vh, 80px) clamp(24px, 5vw, 56px) clamp(80px, 12vh, 150px); }
.assay { margin-top: clamp(50px, 8vh, 96px); }
.assay__k { font-size: 11px; text-transform: uppercase; letter-spacing: .26em; color: var(--bronze-lit); margin-bottom: 14px; }
.assay__note { font-size: 13px; color: var(--stone-mute); max-width: 52ch; margin-bottom: 26px; }
.assay__row { display: grid; grid-template-columns: clamp(120px, 18vw, 220px) 1fr auto; align-items: center; gap: clamp(16px, 3vw, 44px); padding: 24px 0; border-top: 1px solid var(--line-soft); }
.assay__row:last-child { border-bottom: 1px solid var(--line-soft); }
.assay__name { font-family: var(--font-d); font-size: 21px; color: var(--ivory); }
.assay__bar { height: 1px; background: var(--line); position: relative; }
.assay__bar i { position: absolute; left: 0; top: 0; height: 1px; background: var(--bronze); }
.assay__bar .knob { position: absolute; top: 50%; width: 7px; height: 7px; background: var(--bronze); transform: translate(-50%, -50%) rotate(45deg); }
.assay__val { font-family: var(--font-d); font-size: 23px; color: var(--ivory); font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.assay__val small { font-size: 12px; color: var(--stone-mute); margin-left: 7px; }

/* ============================================================
   ОКОЁМ — the observatory: the path walked, and where it leads
   ============================================================ */
.oko { max-width: 1200px; margin: 0 auto; padding: clamp(36px, 6vh, 80px) clamp(24px, 5vw, 56px) clamp(80px, 12vh, 150px); }
.oko__frame { margin-top: clamp(36px, 5vh, 66px); border: 1px solid var(--line-soft);
  background: radial-gradient(ellipse 80% 70% at 28% 26%, rgba(116, 134, 152, .07), transparent 60%), rgba(16, 17, 19, .4);
  padding: clamp(18px, 3vw, 40px); }
.oko__svg { width: 100%; height: auto; display: block; overflow: visible; }
.oko__legend { display: flex; flex-wrap: wrap; gap: 14px 30px; margin-top: 24px; font-size: 11px; color: var(--stone-mute); }
.oko__legend span { display: flex; align-items: center; gap: 10px; }
.oko__legend i { width: 18px; flex: none; }
.oko__legend .l-real { border-top: 2px solid var(--ivory); }
.oko__legend .l-med { border-top: 1.5px solid var(--bronze-lit); }
.oko__legend .l-band { height: 9px; background: rgba(140, 115, 81, .2); }
.oko__legend .l-ruin { border-top: 1px dashed #8a3f30; }
.oko__readings { margin-top: clamp(40px, 6vh, 70px); }