/* Horus Trader — public product tour (/tour), 2026-07-31.
   Extends the "Sentinel" language of landing.css (which MUST load first): the
   same tokens, Marcellus/Archivo pairing and gold-inlay-on-stone treatment,
   arranged as a temple gallery — a sticky inscribed index down the side and
   each product screen mounted on its own stone plate. No new tokens, no new
   fonts; everything here inherits from body.lp. */

/* ---------- reading progress ---------- */
.tr .tr-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;background:transparent;pointer-events:none}
.tr .tr-progress i{display:block;height:100%;width:0;background:var(--gold-metal);transition:width .1s linear}

.tr .nav-links a.on{color:var(--gold)}
.tr .nav-links a.on::after{content:"";display:block;height:1px;background:var(--gold-metal);margin-top:5px}

/* ---------- hero ---------- */
.tr .tr-hero{padding:66px 0 54px;max-width:820px}
.tr .tr-hero .kicker{font-family:var(--mono);font-size:11px;letter-spacing:.3em;color:var(--gold);text-transform:uppercase;display:flex;align-items:center;gap:16px}
.tr .tr-hero .kicker::before{content:"";width:44px;height:1px;background:var(--line-gold)}
.tr .tr-hero h1{font-family:var(--big);font-weight:900;font-size:clamp(42px,5.4vw,76px);line-height:.98;letter-spacing:-.5px;text-transform:uppercase;margin:22px 0}
.tr .tr-hero h1 .g{background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.tr .tr-hero .sub{font-size:18px;color:var(--ink-dim);max-width:60ch;margin:0 0 30px}
.tr .tr-hero .sub strong{color:var(--ink)}

/* three inscribed facts, divided by gold rules */
.tr .tr-facts{display:flex;gap:0;margin:0 0 34px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.tr .tr-facts div{padding:16px 30px 16px 0;margin-right:30px;border-right:1px solid var(--line)}
.tr .tr-facts div:last-child{border-right:0;margin-right:0}
.tr .tr-facts b{display:block;font-family:var(--big);font-weight:900;font-size:26px;line-height:1;color:var(--gold)}
.tr .tr-facts span{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--faint)}

/* ---------- gallery shell: sticky index + plates ---------- */
.tr .tr-shell{display:grid;grid-template-columns:216px minmax(0,1fr);gap:64px;align-items:start;padding-bottom:40px}
/* grid children default to min-width:auto, which lets the rail's horizontal
   scroller size its track to content and burst the page sideways on phones */
.tr .tr-rail,.tr .tr-body{min-width:0}

.tr .tr-rail{position:sticky;top:34px}
.tr .tr-rail-h{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--faint);margin:0 0 16px;padding-bottom:12px;border-bottom:1px solid var(--line-gold)}
.tr .tr-rail ol{list-style:none;margin:0;padding:0;counter-reset:r}
.tr .tr-rail li{counter-increment:r;margin-bottom:3px}
.tr .tr-rail ol a{display:flex;gap:12px;align-items:baseline;padding:9px 10px 9px 0;font-size:13.5px;color:var(--ink-dim);border-left:2px solid transparent;padding-left:12px;transition:all .2s}
.tr .tr-rail ol a i{font-style:normal;font-family:var(--disp);font-size:11px;color:var(--faint);min-width:16px}
.tr .tr-rail ol a i::before{content:counter(r,upper-roman)}
.tr .tr-rail ol a:hover{color:var(--ink)}
.tr .tr-rail ol a.on{color:var(--gold);border-left-color:var(--gold)}
.tr .tr-rail ol a.on i{color:var(--gold)}
.tr .tr-rail-top{display:inline-block;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.tr .tr-rail-top:hover{color:var(--gold)}

/* ---------- chapter ---------- */
.tr .tr-body{counter-reset:c}
.tr section.tr-ch{counter-increment:c;padding:0 0 76px;scroll-margin-top:26px}
.tr .tr-ch-head{display:flex;gap:24px;align-items:flex-start;padding-bottom:22px;margin-bottom:38px;border-bottom:1px solid var(--line-gold);position:relative}
.tr .tr-ch-head::after{content:"";position:absolute;left:0;bottom:-1px;width:96px;height:3px;background:var(--gold-metal)}
.tr .tr-num{font-family:var(--disp);font-size:46px;line-height:.86;background:var(--gold-metal);-webkit-background-clip:text;background-clip:text;color:transparent;flex:none;opacity:.92;letter-spacing:.02em;min-width:1.4em}
.tr .tr-num::before{content:counter(c,upper-roman)}
.tr .tr-ch-head h2{font-family:var(--disp);font-size:clamp(26px,3.1vw,40px);letter-spacing:.02em;text-wrap:balance}
.tr .tr-ch-head p{margin:8px 0 0;color:var(--ink-dim);font-size:16.5px}

/* ---------- figure ---------- */
.tr .tr-fig{margin:0 0 58px}
.tr .tr-fig figcaption h3{font-family:var(--disp);font-size:21px;letter-spacing:.02em;margin:0 0 9px;text-wrap:balance}
.tr .tr-fig figcaption p{margin:0;color:var(--ink-dim);font-size:15.2px;line-height:1.72;max-width:66ch}
.tr .tr-fig figcaption p b{color:var(--ink)}
.tr .tr-fig figcaption p em{font-style:italic;color:var(--ink)}
.tr .tr-new{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;border:1px solid var(--gold);color:var(--gold);padding:3px 8px;margin-left:8px;vertical-align:3px;white-space:nowrap}

/* the stone plate a screen is mounted on */
.tr .tr-plate{border:1px solid var(--line-gold);background:var(--panel);padding:9px;box-shadow:12px 12px 0 -5px var(--line-gold);transition:box-shadow .3s,transform .3s}
.tr .tr-plate:hover{box-shadow:16px 16px 0 -5px var(--line-gold);transform:translate(-2px,-2px)}
.tr .tr-zoom{display:block;width:100%;padding:0;border:0;background:transparent;cursor:zoom-in;position:relative;line-height:0}
.tr .tr-zoom img{display:block;width:100%;height:auto;border:1px solid var(--line)}
.tr .tr-zoom-hint{position:absolute;right:12px;bottom:12px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;background:rgba(18,21,28,.86);color:#e7eaf1;padding:6px 11px;opacity:0;transition:opacity .22s;line-height:1.4}
.tr .tr-zoom:hover .tr-zoom-hint,.tr .tr-zoom:focus-visible .tr-zoom-hint{opacity:1}
.tr .tr-zoom:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* wide plates: caption above, plate full width */
.tr .tr-fig.wide figcaption{margin-bottom:20px}

/* inset plates (narrow element captures): plate beside its caption, alternating
   sides so a long chapter does not read as one monotonous column */
.tr .tr-fig.inset{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:44px;align-items:center}
.tr .tr-fig.inset figcaption{order:1}
.tr .tr-fig.inset .tr-plate{order:2}
.tr .tr-fig.inset:nth-of-type(even) figcaption{order:2}
.tr .tr-fig.inset:nth-of-type(even) .tr-plate{order:1;box-shadow:-12px 12px 0 -5px var(--line-gold)}
.tr .tr-fig.inset:nth-of-type(even) .tr-plate:hover{box-shadow:-16px 16px 0 -5px var(--line-gold);transform:translate(2px,-2px)}

/* ---------- reveal ---------- */
.tr .reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.tr .reveal.in{opacity:1;transform:none}

/* ---------- lightbox ---------- */
.tr .tr-box{position:fixed;inset:0;z-index:90;background:rgba(9,11,15,.94);display:grid;place-items:center;padding:40px 28px}
.tr .tr-box[hidden]{display:none}
.tr .tr-box figure{margin:0;max-width:1500px;width:100%}
.tr .tr-box img{display:block;width:100%;height:auto;max-height:82vh;object-fit:contain;border:1px solid var(--line-gold)}
.tr .tr-box figcaption{margin-top:14px;text-align:center;font-family:var(--disp);font-size:15px;letter-spacing:.08em;color:#e8b454}
.tr .tr-box-close{position:absolute;top:20px;right:24px;width:46px;height:46px;border:1px solid rgba(232,180,84,.5);background:rgba(18,21,28,.9);color:#e7eaf1;font-size:17px;cursor:pointer;display:grid;place-items:center}
.tr .tr-box-close:hover{background:#e8b454;color:#12151c}
.tr .tr-box-close:focus-visible{outline:2px solid #e8b454;outline-offset:2px}

/* Footer nav + the Facebook chip live in landing.css — shared by both pages. */

/* ---------- responsive ---------- */
@media (max-width:1080px){
  .tr .tr-shell{grid-template-columns:1fr;gap:0}
  /* the index becomes a horizontal scroller pinned under the header */
  .tr .tr-rail{position:sticky;top:0;z-index:40;background:var(--bg);margin:0 -32px 34px;padding:12px 32px 0;border-bottom:1px solid var(--line)}
  .tr .tr-rail-h,.tr .tr-rail-top{display:none}
  .tr .tr-rail ol{display:flex;gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .tr .tr-rail ol::-webkit-scrollbar{display:none}
  .tr .tr-rail li{margin:0;flex:none}
  .tr .tr-rail ol a{border-left:0;border-bottom:2px solid transparent;padding:8px 14px 12px;white-space:nowrap}
  .tr .tr-rail ol a.on{border-bottom-color:var(--gold)}
  .tr .tr-rail ol a span{max-width:22ch;overflow:hidden;text-overflow:ellipsis}
}
@media (max-width:860px){
  .tr .tr-fig.inset{grid-template-columns:1fr;gap:20px}
  .tr .tr-fig.inset figcaption,.tr .tr-fig.inset .tr-plate,
  .tr .tr-fig.inset:nth-of-type(even) figcaption,.tr .tr-fig.inset:nth-of-type(even) .tr-plate{order:0}
  .tr .tr-fig.inset .tr-plate,.tr .tr-fig.inset:nth-of-type(even) .tr-plate{box-shadow:10px 10px 0 -5px var(--line-gold)}
  .tr .tr-fig.inset .tr-plate:hover,.tr .tr-fig.inset:nth-of-type(even) .tr-plate:hover{transform:none;box-shadow:10px 10px 0 -5px var(--line-gold)}
}
@media (max-width:640px){
  .tr .tr-hero{padding:40px 0 34px}
  .tr .tr-rail{margin:0 -20px 26px;padding:10px 20px 0}
  .tr .tr-ch-head{gap:14px}
  .tr .tr-num{font-size:38px}
  .tr .tr-facts{flex-wrap:wrap}
  .tr .tr-facts div{padding:12px 18px 12px 0;margin-right:18px}
  .tr .tr-fig{margin-bottom:42px}
  .tr .tr-plate{padding:6px;box-shadow:8px 8px 0 -4px var(--line-gold)}
  .tr .tr-box{padding:20px 12px}
  .tr .tr-zoom-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .tr .reveal{opacity:1;transform:none;transition:none}
  .tr .tr-plate,.tr .tr-plate:hover{transition:none;transform:none}
}