/* Тонкая типографика: лёгкая антиква для заголовков, тонкий гротеск для текста. Красный только тонкой линией и мелкой меткой. */
:root { --classic: 'Cormorant', 'Times New Roman', serif; --street: 'Cormorant', 'Times New Roman', serif; --hand: 'Cormorant', 'Times New Roman', serif; --sans: 'Manrope', system-ui, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; }
body { font-weight: 300; letter-spacing: .005em; }
h1, h2, h3, h4, h5 { font-weight: 300 !important; letter-spacing: .005em; }
.mono { font-weight: 300; letter-spacing: .12em; }
p, li { font-weight: 300; }
.mark { font-weight: 400; letter-spacing: .14em; }
.imgfill { font-weight: 500 !important; }

/* крупные заголовки: тонкая антиква крупнее обычной, чтобы держать масштаб */
.strip h1 { font-weight: 400 !important; letter-spacing: .03em; font-size: clamp(2.6rem, 9vw, 9rem); }
.role h2, .ft h2, .why h2, .paths h2, .proc h2, .sec h2, .ab-sec h2, .wall h2, .access h2 { font-size: clamp(3rem, 7.4vw, 7.6rem); letter-spacing: .01em; }
.fx-hero h1 { font-size: clamp(5.6rem, 26vw, 28rem); }
.ab-hero h1 { font-size: clamp(3.4rem, 9vw, 9.6rem); font-weight: 300 !important; }
.manifest p, .thesis p { font-weight: 300; font-size: clamp(2.2rem, 5.6vw, 5.8rem); }

/* красные жирные надписи заменены тонкими */
.note, .note.a, .note.b { font-family: var(--hand); font-style: italic; font-weight: 400; color: var(--paper); opacity: .85; font-size: clamp(1.5rem, 2.4vw, 2.3rem); }
.word { font-family: var(--street); font-style: italic; font-weight: 300; color: var(--paper); letter-spacing: .08em; text-transform: uppercase; font-size: clamp(2rem, 6vw, 6rem); }
.scrollhint { font-family: var(--hand); font-style: italic; font-weight: 400; font-size: 1.5rem; }
.cword { font-family: var(--street); font-style: italic; font-weight: 300; color: transparent; -webkit-text-stroke: 1px rgba(236,236,232,.55); mix-blend-mode: normal; letter-spacing: .02em; }
.stamp { font-family: var(--street); font-style: italic; font-weight: 300; color: var(--paper); border: 1px solid rgba(236,236,232,.55); letter-spacing: .3em; text-transform: uppercase; font-size: clamp(1rem, 1.6vw, 1.4rem); padding: 10px 22px; transform: none; }
.vow h3 { font-family: var(--street); font-weight: 300 !important; color: var(--paper); transform: none; font-size: clamp(2.6rem, 5.4vw, 5.4rem); }
.card .no, .why-card .no, .chap .yr { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--spray); transform: none; font-weight: 400; }
.why-card:hover .no { color: var(--paper); }
.go, .path .go, .gcard .go { font-family: var(--hand); font-style: italic; font-weight: 400; font-size: 1.6rem; color: inherit; opacity: .8; }
.fill-in { font-family: var(--hand); font-style: italic; font-weight: 400; color: var(--paper); font-size: 1.15em; transform: none; border-bottom: 1px solid var(--spray); }
.fx-hero .lede, .ft .lede, .room .lede { font-family: var(--hand); font-style: italic; font-weight: 300; font-size: clamp(2rem, 3.2vw, 3.2rem); color: var(--paper); transform: none; line-height: 1.1; }
.fx-hero .lede b { color: var(--paper); font-weight: 300; border-bottom: 1px solid var(--spray); }
.ft .lede { color: var(--paper); }
.law-vis .note { font-family: var(--hand); font-style: italic; font-weight: 400; color: var(--asphalt); transform: none; }
.fpanel .rd, .viewer .rd { font-family: var(--hand); font-style: italic; font-weight: 300; color: var(--paper); transform: none; font-size: clamp(1.5rem, 2.1vw, 2rem); line-height: 1.25; border-left: 1px solid var(--spray); padding-left: 16px; }
.portrait .cap { font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; font-weight: 400; transform: none; padding: 8px 12px; left: -4%; }
.gold-vis .sh { font-family: var(--street); font-style: italic; font-weight: 300; color: var(--gold); text-shadow: none; transform: none; font-size: clamp(2.4rem, 5vw, 5rem); }
.mq-item em { font-family: var(--street); font-style: italic; font-weight: 300; color: inherit; opacity: .9; }
.mq.b .mq-item em { color: var(--asphalt); }
.placard h4, .fpanel h3, .card h3, .room3 h3, .tool h4, .vert h3, .rule h3, .chap h3, .limits h4, .step h3, .path h3, .gcard h3 { font-weight: 300 !important; }
.placard .no { font-weight: 400; }
.tabs, .tab { font-weight: 300; }

/* процесс допуска: горизонтальные панели с картинами */
.proc { position: relative; z-index: 2; }
.proc-head { padding: clamp(80px, 14vh, 170px) var(--gutter) 0; }
.proc-head h2 { max-width: 12em; margin-bottom: 14px; text-transform: uppercase; line-height: .95; font-family: var(--classic); }
.proc-head p { max-width: 34em; opacity: .8; }
.proc-pin { height: 100vh; display: flex; align-items: center; overflow: hidden; }
.proc-track { display: flex; gap: clamp(18px, 3vw, 44px); padding: 0 var(--gutter); will-change: transform; }
.step-p { flex: none; width: min(58vw, 760px); height: 66vh; position: relative; overflow: hidden; background: #111; color: var(--paper); display: flex; align-items: flex-end; padding: clamp(22px, 3vw, 44px); }
.step-p .bg { position: absolute; inset: -6% 0; z-index: 0; }
.step-p .bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(1) contrast(1.35) brightness(.7); transition: filter 1s, transform 1.6s var(--ease); transform: scale(1.06); }
.step-p:hover .bg img { filter: none; transform: scale(1); }
.step-p::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(4,2,2,.92), rgba(4,2,2,.1) 62%); }
.step-p .tx { position: relative; z-index: 2; max-width: 30em; }
.step-p .n { font-family: var(--mono); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--spray); margin-bottom: 10px; display: block; }
.step-p h3 { font-family: var(--classic); font-weight: 300 !important; font-size: clamp(2.4rem, 4.8vw, 4.8rem); line-height: .95; text-transform: uppercase; margin-bottom: 14px; }
.step-p p { opacity: .88; max-width: 28em; }
.step-p.last { background: var(--paper); color: var(--asphalt); width: min(38vw, 480px); align-items: center; }
.step-p.last::before { display: none; }
@media (max-width: 860px) { .proc-pin { height: auto; display: block; padding: 40px 0 60px; } .proc-track { flex-direction: column; } .step-p, .step-p.last { width: 100%; height: 50vh; } }

/* заголовок на светлой панели: тёмная заливка и контур */
.r-arb h2.imgfill { background-image: linear-gradient(rgba(0,0,0,.18), rgba(0,0,0,.18)), var(--bg); -webkit-text-stroke: 1.4px rgba(18,18,18,.75); }