*{box-sizing:border-box}body{margin:0;color:#332d29;background:#eae1d5;font-family:Arial,sans-serif;min-height:100svh}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.architecture{position:fixed;inset:0;z-index:-1;background:linear-gradient(90deg,#e8dbca55,#f2eadfe8 24%,#f2eadfd9 76%,#e8dbca77),url('/upload/home-accordion/sketch.png') center/cover;opacity:.85}.architecture:after{content:'';position:absolute;left:-45px;bottom:-50px;width:270px;height:320px;background:url('/upload/home-accordion/interior.jpg') center/cover;transform:rotate(-8deg);opacity:.23;border:10px solid #fff}header{display:flex;align-items:center;justify-content:space-between;margin:0 4%;padding:28px 0;border-bottom:1px solid #79695733;gap:20px}.logo{font-weight:800;font-size:26px;color:#7c2330;letter-spacing:-1px}.logo span{color:#332d29}.logo small{display:block;font-size:8px;letter-spacing:1.35px;margin-top:7px}.header-note{font-size:12px;color:#766b60}.contact{font-size:13px;border-bottom:1px solid #7c2330;padding:10px 0;color:#7c2330}main{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:38px;margin:50px 4% 30px;align-items:start}.eyebrow{display:flex;justify-content:space-between;gap:14px;font-size:10px;letter-spacing:1.6px;color:#7c2330;margin-bottom:22px}.hint{color:#7e7469;letter-spacing:0}.accordion{display:flex;gap:10px;height:490px}.panel{position:relative;flex:1;min-width:0;background:#f8f4ed;box-shadow:0 13px 24px #4a302214;border:1px solid #fff9;overflow:hidden;transition:flex .75s cubic-bezier(.22,.8,.25,1),transform .6s;--tone:#7c2330}.panel.active{flex:4.7;transform:translateY(-5px)}.panel:nth-child(2){--tone:#a06f52}.panel:nth-child(3){--tone:#655c4e}.panel:nth-child(4){--tone:#925044}.panel:nth-child(5){--tone:#6c7565}.panel:nth-child(6){--tone:#4b5557}.panel:nth-child(7){--tone:#886c5e}.panel:after{content:'';position:absolute;right:0;top:0;bottom:0;width:5px;background:var(--tone);opacity:.6}.panel-toggle{background:none;border:0;color:var(--tone);position:absolute;inset:0;width:100%;text-align:left;z-index:2}.panel-toggle:focus-visible{outline:3px solid #7c2330;outline-offset:-4px}.number{position:absolute;left:17px;top:21px;font-size:12px;letter-spacing:2px}.vertical{position:absolute;left:50%;top:57%;writing-mode:vertical-rl;transform:translate(-50%,-50%) rotate(180deg);font-size:20px;white-space:nowrap;font-family:Georgia,serif;transition:opacity .25s}.panel.active .vertical{opacity:0}.ribbon{position:absolute;top:87px;left:-2px;right:-2px;height:95px;background:var(--tone);clip-path:polygon(0 34%,100% 0,100% 65%,0 100%);transition:height .7s;opacity:.96}.ribbon:after{content:'';position:absolute;inset:22px 0;background:#0002;clip-path:polygon(0 30%,100% 0,100% 40%,0 95%)}.panel.active .ribbon{height:145px}.panel-content{position:absolute;left:23px;right:24px;top:245px;opacity:0;transform:translateY(16px);transition:opacity .25s,transform .45s;pointer-events:none}.panel.active .panel-content{opacity:1;transform:none;transition-delay:.23s;pointer-events:auto}.panel-content h1,.panel-content h2{font:normal 34px/1.04 Georgia,serif;margin:0 0 17px;min-width:140px;letter-spacing:-1px}.panel-content p{font-size:12px;line-height:1.65;color:#7b7064;margin:0;min-width:140px}.go{display:inline-block;position:relative;z-index:3;margin-top:21px;padding:9px 0;border-bottom:1px solid var(--tone);font-size:12px;color:var(--tone)}.corner{position:absolute;bottom:20px;left:20px;font-size:18px;color:var(--tone)}.active .corner{opacity:0}.baseline{display:flex;justify-content:space-between;gap:20px;margin-top:25px;color:#7b7064;font-size:10px}.journal{border-left:1px solid #8b776333;padding-left:25px}.journal-heading{font:32px Georgia,serif;display:flex;justify-content:space-between}.journal-heading span{font:20px Arial;color:#7c2330}.journal>p{font-size:11px;color:#8c7c6b;margin-bottom:23px}.feed{height:430px;overflow:auto;scrollbar-width:none;scroll-behavior:smooth}.story{display:block;margin-bottom:22px}.story img{width:100%;height:113px;object-fit:cover;display:block}.story small{display:block;color:#917a65;font-size:9px;margin:9px 0 5px}.story strong{font:20px/1.12 Georgia,serif;display:block}.story:hover strong{color:#7c2330}.journal-controls{display:flex;align-items:center;justify-content:space-between;border-top:1px solid #8b776333;padding-top:12px}.journal-controls button{background:none;border:0;font-size:21px;color:#7c2330}.journal-controls span{font-size:9px;color:#8c7c6b}footer{margin:25px 4%;display:flex;justify-content:space-between;gap:16px;font-size:10px;color:#86796b}.prototype a{text-decoration:underline}@media(min-width:1600px){main{margin-top:8vh}.accordion{height:560px}.panel-content{top:290px}.panel-content h1,.panel-content h2{font-size:43px}.panel-content p{font-size:14px}.feed{height:500px}.story img{height:145px}}@media(max-width:1100px) and (min-width:761px){main{gap:22px;grid-template-columns:minmax(0,1fr) 180px}.accordion{gap:6px}.panel.active{flex:5.8}.panel-content{left:15px;right:15px}.panel-content h1,.panel-content h2{font-size:27px}.journal{padding-left:18px}.vertical{font-size:17px}}@media(max-width:760px){header{padding:21px 0}.logo{font-size:22px}.header-note{display:none}.contact{font-size:11px}main{display:block;margin-top:28px}.eyebrow{font-size:8px;letter-spacing:1px}.hint{display:none}.accordion{display:block;height:auto}.panel{height:62px;margin-bottom:9px;transition:height .6s ease,transform .6s}.panel.active{height:275px;transform:none}.panel-toggle .number{top:23px;left:18px}.vertical{writing-mode:horizontal-tb;left:53px;top:20px;transform:none;font-size:21px}.panel .ribbon{top:-20px;left:auto;width:60px;height:100px;opacity:.18;right:0}.panel.active .ribbon{top:20px;width:115px;height:115px;opacity:1}.panel.active .number{top:23px}.panel-content{top:62px;left:25px;right:100px}.panel-content h1,.panel-content h2{font-size:32px}.panel-content p{font-size:12px}.corner{left:auto;right:20px;bottom:19px}.baseline{font-size:9px}.journal{margin-top:35px;padding:22px 0 0;border-left:0;border-top:1px solid #8b776333}.journal-heading{font-size:27px}.journal>p{margin:8px 0 17px}.feed{display:flex;gap:10px;height:auto;overflow-x:auto;scroll-snap-type:x mandatory}.story{flex:0 0 calc((100% - 20px)/3);scroll-snap-align:start;margin-bottom:12px}.story img{height:100px}.story strong{font-size:14px}.story small{font-size:8px}.journal-controls{border:0;padding-top:0}.prototype{display:none}footer{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{transition:none!important;scroll-behavior:auto!important}}
.panel-content{z-index:3}.panel.active .panel-content{pointer-events:none}.panel.active .go{pointer-events:auto}

/* Second concept: full-height editorial rail and horizontal typography */
body{min-height:100svh}.architecture{opacity:1;background:#e9dfd0 url('/upload/home-accordion/background.jpg') center/cover}.architecture:after{display:none}header{height:110px;margin:0 320px 0 4%;padding:10px 0}.logo{display:block;width:190px;height:90px;overflow:hidden;flex-shrink:0}.logo img{width:220px;height:220px;object-fit:contain;transform:translate(-14px,-66px)}.header-note{font-size:10px;max-width:160px;line-height:1.5}main{display:block;margin:0 320px 0 4%;height:calc(100svh - 155px);min-height:440px}.stage{height:100%;display:flex;flex-direction:column;justify-content:center;padding:30px 0 45px}.eyebrow{margin-bottom:30px}.accordion{height:clamp(310px,49vh,540px);gap:8px}.panel{flex:1.15;background:#faf7f1f2;backdrop-filter:blur(5px)}.panel.active{flex:3.4}.vertical{writing-mode:horizontal-tb;transform:none;top:auto;bottom:62px;left:12px;right:10px;font:20px/1.12 Georgia,serif;white-space:normal;overflow-wrap:normal}.panel-content{top:auto;bottom:42px;left:20px;right:20px}.panel-content h2{font-size:30px}.panel-content p{font-size:12px}.panel .ribbon{top:76px;height:90px;background:linear-gradient(115deg,var(--tone) 3%,#c4ad8355 28%,var(--tone) 52%,#fff5 73%,var(--tone) 100%);background-size:210% 100%}.panel.active .ribbon{height:125px;animation:metal 1.5s ease-out both}.panel:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,#fff0 40%,#fff9 50%,#fff0 60%,transparent 70%);transform:translateX(-120%);pointer-events:none;z-index:4}.panel.active:before{animation:shine 1.3s ease-out both}@keyframes shine{to{transform:translateX(120%)}}@keyframes metal{from{background-position:100% 0}to{background-position:0 0}}.journal{position:fixed;top:0;right:0;bottom:0;width:282px;height:100svh;background:#f7f3ecef;border-left:1px solid #ac99814d;padding:34px 25px 20px;display:flex;flex-direction:column;backdrop-filter:blur(12px)}.journal-heading{font-size:38px}.journal>p{margin-bottom:24px}.feed{flex:1;min-height:0;height:auto;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#a08a73 transparent;padding-right:6px}.story img{height:155px}.story{margin-bottom:27px}.story strong{font-size:23px}.story small{font-size:10px}.journal-controls{flex-shrink:0;margin-top:12px}.baseline{margin-top:24px}footer{margin:0 320px 0 4%;height:40px;align-items:center;font-size:9px}.prototype{max-width:170px;text-align:right}
@media(min-width:1600px){header,main,footer{margin-right:370px}.journal{width:320px}.panel-content h2{font-size:38px}.vertical{font-size:24px}.panel-content p{font-size:14px}.story img{height:180px}}
@media(min-width:761px) and (max-width:1100px){header,main,footer{margin-right:235px;margin-left:25px}.journal{width:215px;padding:25px 17px}.header-note{display:none}.accordion{gap:5px}.vertical{font-size:16px;left:8px;right:6px}.panel.active{flex:4}.panel-content{left:12px;right:12px}.panel-content h2{font-size:25px}.panel-content p{font-size:11px}.panel-content h2,.panel-content p{min-width:0}.number{left:10px}.go{font-size:11px}.story img{height:120px}.eyebrow{font-size:8px;letter-spacing:.8px}}
@media(max-width:760px){body{height:100svh;min-height:600px;display:flex;flex-direction:column}.architecture{background-position:40% center}header{height:73px;flex:0 0 73px;margin:0 16px;padding:0}.logo{width:150px;height:70px}.logo img{width:180px;height:180px;transform:translate(-15px,-53px)}.header-note{display:none}.contact{font-size:10px}main{height:auto;min-height:0;flex:1;margin:0 16px;display:flex;flex-direction:column;gap:12px}.stage{height:auto;min-height:0;flex:1;padding:14px 0 0;display:flex;flex-direction:column;justify-content:flex-start}.eyebrow{margin-bottom:10px;font-size:8px;letter-spacing:.8px;flex-shrink:0}.accordion{height:auto;min-height:0;flex:1;display:flex;flex-direction:column;gap:5px}.panel{height:auto;min-height:37px;flex:1;margin:0;transition:flex .5s ease}.panel.active{height:auto;flex:3.3;min-height:112px;transform:none}.panel-toggle .number{top:14px;left:12px;font-size:9px}.vertical{left:37px;right:35px;top:10px;bottom:auto;font-size:18px;line-height:1.1}.panel .ribbon{top:-20px;left:auto;right:0;width:65px;height:80px;opacity:.16}.panel.active .ribbon{top:-10px;width:85px;height:115px;opacity:.85}.panel.active .number{top:15px}.panel-content{top:12px;bottom:auto;left:37px;right:72px}.panel-content h2{font-size:22px;line-height:1.1;margin:0 0 5px;min-width:0}.panel-content p{font-size:10px;line-height:1.35;min-width:0}.go{font-size:10px;margin-top:6px;padding:4px 0}.corner{font-size:13px;right:13px;left:auto;bottom:12px}.baseline{display:none}.journal{position:static;width:auto;height:155px;flex:0 0 155px;background:transparent;backdrop-filter:none;margin:0;padding:0;border:0;display:flex;flex-direction:column}.journal-heading{font-size:23px;line-height:26px;flex-shrink:0}.journal>p{display:none}.feed{display:flex;flex:1;gap:9px;min-height:0;padding:8px 0 0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.story{flex:0 0 calc((100% - 18px)/3);margin:0}.story img{height:65px;width:100%;object-fit:cover}.story strong{font:13px/1.05 Georgia,serif;margin-top:5px}.story small{display:none}.journal-controls{margin:0;padding:0;height:20px;flex:0 0 20px}.journal-controls button{font-size:17px}.journal-controls span{font-size:8px}footer{margin:0 16px;height:25px;flex:0 0 25px;font-size:8px}.prototype{display:none}}
@media(max-width:760px) and (min-height:800px){.panel.active{flex:3}.journal{height:185px;flex-basis:185px}.story img{height:90px}.panel-content p{font-size:12px}.go{font-size:11px}.panel-content h2{font-size:25px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}

.logo{width:205px}.logo img{transform:translate(-7px,-66px)}
@media(max-width:760px){main{align-items:stretch}.stage,.journal{width:100%}.logo{width:175px}.logo img{transform:translate(-5px,-53px)}.panel.active .ribbon{width:65px;opacity:.6}.panel-content{right:67px}}

/* Revision 3: desktop composition; mobile geometry preserved. */
.wordmark{display:none}
.panel{--metal:#921e34}.panel:nth-child(2){--metal:#aa6336}.panel:nth-child(3){--metal:#71612e}.panel:nth-child(4){--metal:#b34835}.panel:nth-child(5){--metal:#426448}.panel:nth-child(6){--metal:#315761}
.panel .ribbon{background-image:linear-gradient(115deg,var(--metal) 3%,var(--metal) 29%,#d7bb8d 46%,var(--metal) 62%,var(--metal) 100%);opacity:1}
.panel:after{opacity:.85}
@media(min-width:761px){
 .architecture:after{display:block;content:'';position:absolute;inset:0;width:auto;height:auto;transform:none;border:0;opacity:1;background:linear-gradient(90deg,rgba(242,233,216,.72) 0%,rgba(242,233,216,.65) 21%,rgba(242,233,216,.24) 32%,transparent 45%);pointer-events:none}
 header{position:relative;justify-content:center}.logo{width:auto;height:auto;overflow:visible;display:block}.logo img{display:none}.wordmark{display:block;font:normal clamp(30px,3vw,48px)/1.1 Georgia,'Times New Roman',serif;letter-spacing:-1.4px;color:#6e2030}.header-note{display:none}.contact{position:absolute;right:0}
 .stage{justify-content:flex-start;padding:24px 0 30px}.eyebrow{margin-bottom:22px}.accordion{height:auto;flex:1;min-height:300px;max-height:none}.baseline{flex-shrink:0}.panel .ribbon{top:20%;height:100px}.panel.active .ribbon{height:140px}
}
@media(max-width:760px){.panel .ribbon{opacity:.75}.panel.active .ribbon{opacity:1}}

/* Revision 4: compact desktop menu */
@media(min-width:761px){
 header .logo .wordmark{font:700 28px/1.2 Arial,sans-serif;letter-spacing:0;color:#a51e24;text-decoration:underline;text-underline-offset:3px}
 .architecture:after{background:linear-gradient(90deg,rgba(242,233,216,.43) 0%,rgba(242,233,216,.38) 21%,rgba(242,233,216,.12) 32%,transparent 45%)}
 .stage{width:84%;max-width:1180px;margin-left:auto;justify-content:center;padding:22px 0 34px}
 .accordion{flex:0 0 auto;height:clamp(390px,63vh,660px);min-height:0}
 .panel.active{flex:2.35}.panel{flex:1.15}
 .vertical{top:57px;bottom:auto;left:13px;right:10px;font-size:20px;line-height:1.15}
 .panel .ribbon{top:145px;height:90px}.panel.active .ribbon{height:115px}
 .panel-content{top:280px;bottom:auto;left:20px;right:20px}.panel-content h2{font-size:29px;min-width:0}.panel-content p{min-width:0}
 .closed-note{position:absolute;bottom:67px;left:15px;right:12px;font:11px/1.5 Arial,sans-serif;color:#867868;pointer-events:none;transition:opacity .2s}.active .closed-note{opacity:0}
 .panel .corner{left:15px;bottom:25px}
}
.closed-note{display:none}
@media(min-width:761px){.closed-note{display:block}}
@media(min-width:761px) and (max-width:1100px){.stage{width:95%}.vertical{font-size:16px;left:9px}.panel-content{left:12px;right:12px;top:265px}.panel-content h2{font-size:24px}.closed-note{font-size:10px;left:10px}.panel.active{flex:2.8}}
@media(min-width:1600px){.vertical{font-size:23px}.panel-content h2{font-size:35px}.closed-note{font-size:12px}}
@media(min-width:761px) and (max-height:760px){.accordion{height:clamp(360px,65vh,480px)}.panel .ribbon{top:120px;height:75px}.panel.active .ribbon{height:95px}.panel-content{top:225px}.panel-content h2{font-size:26px}.panel-content p{font-size:11px}.go{margin-top:12px}.closed-note{bottom:60px}}
/* Revision 5: warm tonal panels, finer architectural details */
@media(min-width:761px){
 .accordion{gap:9px}
 .panel{background:rgba(227,215,196,.88);border:1px solid rgba(121,98,68,.16);border-radius:8px;box-shadow:0 5px 16px rgba(74,50,28,.065);backdrop-filter:blur(10px);transition:flex .85s cubic-bezier(.22,.8,.25,1),transform .6s,background .6s,box-shadow .6s}
 .panel.active{background:rgba(236,225,206,.92);box-shadow:0 12px 28px rgba(74,50,28,.11);transform:translateY(-3px)}
 .panel:after{width:1px;opacity:.3}
 .panel .ribbon{top:145px;height:55px;opacity:.8;clip-path:polygon(0 35%,100% 0,100% 65%,0 100%)}
 .panel.active .ribbon{height:78px;opacity:.9}
 .ribbon:after{opacity:.35}
 .panel:before{background:linear-gradient(115deg,transparent 33%,#fff0 42%,#fff5 50%,#fff0 58%,transparent 67%)}
 .panel-content{top:250px}
 .vertical{color:#594b3d}.number{color:#8b7359}.closed-note{color:#776957}
}
@media(min-width:761px) and (max-width:1100px){.accordion{gap:6px}.panel-content{top:245px}}
@media(min-width:761px) and (max-height:760px){.panel .ribbon{top:120px;height:48px}.panel.active .ribbon{height:66px}.panel-content{top:205px}}
@media(min-width:761px){.panel{background:rgba(214,197,170,.91)}.panel.active{background:rgba(226,211,187,.94)}}
/* Revision 6: left-aligned composition and consistent mobile materials */
@media(min-width:761px){header{justify-content:flex-start}.stage{margin-left:0;margin-right:auto}.architecture:after{display:none}}
@media(max-width:760px){
 header .logo{display:none}header{justify-content:flex-end}
 .panel{background:rgba(214,197,170,.91);border:1px solid rgba(121,98,68,.16);border-radius:8px;box-shadow:0 5px 16px rgba(74,50,28,.065);backdrop-filter:blur(10px)}
 .panel.active{background:rgba(226,211,187,.94);box-shadow:0 12px 28px rgba(74,50,28,.11)}
 .panel:after{width:1px;opacity:.3}.panel .ribbon{opacity:.8}.panel.active .ribbon{opacity:.9}.ribbon:after{opacity:.35}
 .panel:before{background:linear-gradient(115deg,transparent 33%,#fff0 42%,#fff5 50%,#fff0 58%,transparent 67%)}
}
.architecture{background-image:url("/upload/home-accordion/background-clean.jpg")}
/* Final placement of company name */
@media(min-width:761px){header .logo{position:absolute;left:28%;top:65px;transform:none}}
@media(max-width:760px){header{justify-content:space-between}header .logo{display:block;width:auto;height:auto;overflow:visible}header .logo img{display:none}header .logo .wordmark{display:block;font:700 21px/1.2 Arial,sans-serif;color:#a51e24;letter-spacing:0;text-decoration:none}}
/* Company drawing: preserve approved panel palette and motion. */
.architecture{background:#f1e9dc url('/upload/home-accordion/company-drawing.png') center/cover no-repeat;background-blend-mode:multiply}
.architecture:after{display:none}
@media(min-width:761px){header .logo{position:absolute;left:28%;top:52px;transform:none;background:rgba(246,240,230,.94);padding:12px 22px;border-radius:4px}header .logo .wordmark{color:#a51e24;font:700 clamp(28px,2.4vw,38px)/1.15 Arial,sans-serif;letter-spacing:0;text-decoration:none}}
@media(max-width:760px){.architecture{background-position:center}header .logo{background:rgba(246,240,230,.94);padding:7px 9px;border-radius:4px}header .logo .wordmark{font-size:21px;color:#a51e24}}

/* Revision 7: иерархия, типографика, логотип, спокойный фон.
   Подключается последним и перекрывает style.css и revision.css. */
:root{--ink:#2f2823;--text:#54493f;--muted:#6c5f52;--wine:#7c2330;--wine-dark:#5f1a25;
 --serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',Arial,sans-serif}
body{font-family:var(--sans);color:var(--ink);-webkit-font-smoothing:antialiased}

/* Фон: облегчённый (212 КБ вместо 2,7 МБ) и приглушённый чертёж + светлая вуаль под текстом */
.architecture{background:linear-gradient(180deg,rgba(243,236,225,.9) 0,rgba(243,236,225,.62) 340px,rgba(243,236,225,.4) 100%),#f1e9dc url('/upload/home-accordion/company-drawing-soft.jpg') center/cover no-repeat;background-blend-mode:normal;opacity:1}
.architecture:after{display:none}

/* Шапка: настоящий логотип слева, без плашки; заметная кнопка */
header{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:24px;height:auto;padding:22px 0;border-bottom:1px solid rgba(121,105,87,.2)}
header .logo{position:static;display:block;width:auto;height:auto;overflow:visible;background:none;padding:0;border-radius:0;transform:none;flex-shrink:0}
header .logo img{display:block;width:auto;height:46px;transform:none;object-fit:contain}
header .logo .wordmark{display:none}
.header-note{display:block;max-width:none;margin-right:auto;padding-left:22px;border-left:1px solid rgba(121,105,87,.3);font:500 13px/1.4 var(--sans);color:var(--muted)}
.contact{position:static;display:inline-flex;align-items:center;padding:13px 22px;border:0;border-radius:6px;background:var(--wine);color:#fff;font:600 14px/1 var(--sans);box-shadow:0 6px 16px rgba(124,35,48,.18);transition:background .2s,transform .2s}
.contact:hover{background:var(--wine-dark);transform:translateY(-1px)}
.contact:focus-visible,.go:focus-visible,.story:focus-visible,.journal-heading:focus-visible{outline:2px solid var(--wine);outline-offset:3px}

/* Первый экран: H1 и лид */
.hero{max-width:880px;margin:0 0 24px}
.kicker{margin:0 0 14px;font:600 12px/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--wine)}
.hero h1{margin:0;max-width:15em;font:500 clamp(36px,3.7vw,58px)/1.04 var(--serif);letter-spacing:-.01em;color:var(--ink)}
.hero h1 em{font-style:italic;color:var(--wine)}
.lead{margin:16px 0 0;max-width:34em;font:400 17px/1.55 var(--sans);color:var(--text)}

/* Карточки: общие элементы */
.panel-heading{margin:0;font:inherit}
.panel-toggle{color:var(--ink)}
.closed-note{font-family:var(--sans)}

/* ---------- Десктоп и планшет ---------- */
@media(min-width:761px){
 header,main,footer{margin-left:4%;margin-right:310px}
 main{height:auto;min-height:0;margin-top:26px}
 .stage{display:block;width:100%;max-width:1180px;height:auto;margin:0;padding:0}
 .eyebrow{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 14px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
 .hint{font:400 13px/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted)}
 .accordion{flex:none;height:clamp(360px,46vh,500px);min-height:0;gap:10px}

 .number{top:22px;left:20px;font:600 12px/1 var(--sans);letter-spacing:.12em;color:var(--metal)}
 .vertical{writing-mode:horizontal-tb;transform:none;top:50px;bottom:auto;left:20px;right:16px;white-space:normal;font:600 23px/1.1 var(--serif);color:var(--ink);opacity:1;transition:font-size .45s ease}
 .panel.active .vertical{opacity:1;font-size:34px}

 /* Лента на одной высоте во всех карточках — ритм не ломается при раскрытии */
 .panel .ribbon,.panel.active .ribbon{top:124px;height:62px}

 .closed-note{top:206px;bottom:auto;left:20px;right:14px;font:400 14px/1.45 var(--sans);color:var(--text)}
 .panel-content{top:206px;bottom:auto;left:20px;right:24px}
 .panel-content p{margin:0;max-width:28em;font:400 16px/1.55 var(--sans);color:var(--text)}
 .go{margin-top:18px;padding:0 0 6px;border-bottom:1.5px solid var(--metal);font:600 14px/1.2 var(--sans);color:var(--metal)}
 .panel .corner{left:20px;bottom:18px;font:300 26px/1 var(--sans);color:var(--metal)}

 .baseline{margin-top:18px;font:500 13px/1.4 var(--sans);color:var(--muted)}

 .journal{width:270px;padding:30px 24px 18px}
 .journal-heading{font:600 38px/1 var(--serif);align-items:baseline}
 .journal-heading span{font:400 20px/1 var(--sans);color:var(--wine)}
 .journal>p{margin:8px 0 22px;font:400 13px/1.4 var(--sans);color:var(--muted)}
 .story{margin-bottom:26px}
 .story img{height:140px;border-radius:4px}
 .story small{margin:10px 0 6px;font:500 12px/1.3 var(--sans);color:var(--muted)}
 .story strong{font:600 22px/1.15 var(--serif)}
 .journal-controls span{font:400 12px/1 var(--sans);color:var(--muted)}

 footer{height:auto;margin-top:26px;margin-bottom:24px;font:400 13px/1.4 var(--sans);color:var(--muted)}
}
@media(min-width:1600px){
 header,main,footer{margin-right:360px}
 .journal{width:310px}
 .accordion{height:clamp(420px,52vh,580px)}
 .vertical{font-size:26px}.panel.active .vertical{font-size:40px}
 .panel .ribbon,.panel.active .ribbon{top:134px;height:68px}
 .closed-note,.panel-content{top:224px}
 .panel-content p{font-size:17px}
 .story img{height:170px}
}
@media(min-width:761px) and (max-width:1100px){
 header,main,footer{margin-left:24px;margin-right:236px}
 .journal{width:215px;padding:24px 16px}
 .header-note{display:none}
 .accordion{gap:6px}
 .number{left:12px}
 .panel.active{flex:2.2}.vertical{left:10px;right:6px;font-size:15px;hyphens:auto}.panel.active .vertical{font-size:26px}
 .closed-note{left:12px;right:8px;font-size:12px}
 .panel-content{left:14px;right:14px}.panel-content p{font-size:14px}
 .go{font-size:13px}.panel .corner{left:12px}
 .story img{height:110px}.story strong{font-size:19px}
}
@media(min-width:761px) and (max-height:760px){
 .accordion{height:clamp(360px,62vh,440px)}
 .panel .ribbon,.panel.active .ribbon{top:116px;height:54px}
 .closed-note,.panel-content{top:188px}
 .go{margin-top:12px}
}

/* ---------- Мобильный ---------- */
@media(max-width:760px){
 body{display:block;height:auto;min-height:100svh}
 .architecture{background:linear-gradient(180deg,rgba(243,236,225,.88),rgba(243,236,225,.66)),#f1e9dc url('/upload/home-accordion/company-drawing-soft.jpg') 35% center/cover no-repeat}
 header{justify-content:space-between;height:auto;flex:none;margin:0 16px;padding:14px 0;gap:12px}
 header .logo{display:block;background:none;padding:0}
 header .logo img{display:block;height:34px}
 .header-note{display:none}
 .contact{padding:11px 15px;font-size:13px}

 main{display:block;height:auto;margin:0 16px}
 .stage{display:block;height:auto;padding:0}
 .hero{margin:22px 0 22px}
 .kicker{font-size:11px;margin-bottom:10px}
 .hero h1{font-size:clamp(30px,8.6vw,38px);line-height:1.06}
 .lead{margin-top:12px;font-size:15px}
 .eyebrow{display:none}

 /* Аккордеон: обычные строки, раскрытие по высоте содержимого, страница скроллится */
 .accordion{display:flex;flex-direction:column;gap:8px;height:auto;flex:none}
 .panel,.panel.active{flex:none;height:auto;min-height:0;transform:none;display:grid;grid-template-rows:62px 0fr;transition:grid-template-rows .4s ease,background .4s,box-shadow .4s}
 .panel.active{grid-template-rows:62px 1fr}
 .panel:after{display:none}
 .panel .ribbon,.panel.active .ribbon{top:0;bottom:0;left:0;right:auto;width:4px;height:auto;clip-path:none;opacity:1;background:var(--metal);border-radius:8px 0 0 8px;animation:none}
 .ribbon:after{display:none}
 .panel-heading{grid-row:1}
 .panel-toggle .number,.panel.active .number{top:25px;left:18px;font:600 11px/1 var(--sans);letter-spacing:.1em;color:var(--metal)}
 .vertical{writing-mode:horizontal-tb;transform:none;top:18px;bottom:auto;left:48px;right:52px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 23px/1.1 var(--serif);color:var(--ink);opacity:1}
 .panel.active .vertical{opacity:1}
 .panel-content,.panel.active .panel-content{grid-row:2;position:static;min-height:0;overflow:hidden;padding:0 20px 0 48px;transform:none}
 .panel-content p{margin:0;font:400 15px/1.5 var(--sans);color:var(--text)}
 .go{margin:12px 0 18px;padding:0 0 5px;font:600 14px/1.2 var(--sans);color:var(--metal);border-bottom:1.5px solid var(--metal)}
 .panel .corner,.active .corner{top:16px;right:16px;bottom:auto;left:auto;opacity:1;font:300 28px/1 var(--sans);color:var(--metal);transition:transform .3s}
 .panel.active .corner{transform:rotate(45deg)}

 .journal{position:static;width:auto;height:auto;flex:none;margin:34px 0 0;padding:22px 0 0;border:0;border-top:1px solid rgba(139,119,99,.25);background:transparent;backdrop-filter:none}
 .journal-heading{font:600 32px/1 var(--serif);align-items:baseline}
 .journal-heading span{font:400 20px/1 var(--sans);color:var(--wine)}
 .journal>p{display:block;margin:6px 0 14px;font:400 13px/1.4 var(--sans);color:var(--muted)}
 .feed{display:flex;gap:12px;padding:0;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none}
 .story{flex:0 0 64%;margin:0;scroll-snap-align:start}
 .story img{height:140px;border-radius:4px}
 .story small{display:block;margin:10px 0 4px;font:500 12px/1.3 var(--sans);color:var(--muted)}
 .story strong{margin:0;font:600 20px/1.15 var(--serif)}
 .journal-controls{height:auto;flex:none;margin:12px 0 0;padding:0}
 .journal-controls button{font-size:22px;padding:6px}
 .journal-controls span{font:400 12px/1 var(--sans);color:var(--muted)}

 footer{height:auto;flex:none;flex-direction:column;gap:6px;margin:30px 16px 26px;font:400 12px/1.4 var(--sans);color:var(--muted)}
}

/* Revision 8: яркие вкладки-флажки (по референсу) вместо тонких полосок.
   Цветная кромка справа «загибается» во флажок с номером; переливы и тон карточек сохранены. */
.panel{--metal:#b0283c}
.panel:nth-child(2){--metal:#d2692a}
.panel:nth-child(3){--metal:#d3a12f}
.panel:nth-child(4){--metal:#8c9b34}
.panel:nth-child(5){--metal:#3f8766}
.panel:nth-child(6){--metal:#2f6a86}
.panel{--hi:color-mix(in srgb,var(--metal) 55%,#fff4dc);--dk:color-mix(in srgb,var(--metal) 62%,#1d0f08);--deep:color-mix(in srgb,var(--metal) 78%,#140a06)}

.ribbon{display:none!important}
.panel-toggle .number,.panel.active .number{display:none}

/* Цветная кромка справа */
.panel:after{content:'';display:block;position:absolute;top:0;bottom:0;right:0;left:auto;width:9px;opacity:1;z-index:1;
 background:linear-gradient(180deg,var(--hi) 0%,var(--metal) 22%,var(--dk) 100%)}

/* Флажок */
.flag{position:absolute;z-index:2;pointer-events:none;filter:drop-shadow(-3px 7px 7px rgba(62,36,16,.25));transition:transform .5s cubic-bezier(.22,.8,.25,1)}
.flag:before{content:'';position:absolute;inset:0;clip-path:polygon(0 30%,100% 0,100% 70%,0 100%);
 background:linear-gradient(112deg,var(--dk) 0%,var(--metal) 26%,var(--hi) 46%,var(--metal) 62%,var(--dk) 100%);background-size:240% 100%;background-position:30% 0}
.flag-in{position:absolute;inset:16px 9px 16px 13px;display:grid;place-items:center;clip-path:polygon(0 30%,100% 0,100% 70%,0 100%);
 background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,0) 45%),var(--deep)}
.flag-in b{font:600 26px/1 'Manrope',Arial,sans-serif;letter-spacing:.03em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.3)}
/* загиб ленты обратно в кромку */
.flag:after{content:'';position:absolute;right:0;bottom:-11px;width:9px;height:12px;background:var(--deep);clip-path:polygon(0 0,100% 0,100% 100%)}
.panel.active .flag:before{animation:flagshine 1.6s ease-out both}
@keyframes flagshine{from{background-position:100% 0}to{background-position:30% 0}}

.icon{position:absolute;z-index:2;color:var(--metal);pointer-events:none}
.icon svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Десктоп и планшет ---------- */
@media(min-width:761px){
 header .logo img{height:54px}
 .icon{top:20px;left:20px;width:26px;height:26px}
 .flag{top:60px;left:16px;right:0;height:116px}
 .panel:hover .flag,.panel.active .flag{transform:translateX(-4px)}
 .vertical{top:196px}
 .vertical:after{content:'';display:block;width:30px;height:2px;margin-top:10px;background:var(--metal);border-radius:2px}
 .closed-note,.panel-content{top:272px}
 .panel .corner{bottom:16px}
}
@media(min-width:1600px){
 .flag{top:66px;height:128px}.flag-in b{font-size:30px}
 .vertical{top:214px}.closed-note,.panel-content{top:298px}
}
@media(min-width:761px) and (max-width:1100px){
 .icon{left:12px;width:22px;height:22px}
 .flag{left:10px;height:96px;top:56px}.flag-in{inset:13px 9px 13px 10px}.flag-in b{font-size:20px}
 .vertical{top:170px}.closed-note,.panel-content{top:240px}
}
@media(min-width:761px) and (max-height:760px){
 .icon{top:16px}
 .flag{top:50px;height:96px}.flag-in{inset:13px 9px 13px 11px}.flag-in b{font-size:22px}
 .vertical{top:162px}.closed-note,.panel-content{top:232px}
}

/* ---------- Мобильный ---------- */
@media(max-width:760px){
 header .logo img{height:40px}
 .icon{display:none}
 .panel:after{width:7px}
 .flag{top:11px;left:12px;width:46px;height:40px;filter:drop-shadow(-1px 3px 3px rgba(62,36,16,.25))}
 .flag-in{inset:6px 5px 6px 6px}
 .flag-in b{font-size:13px}
 .flag:after{display:none}
 .vertical{left:72px;right:52px}
 .panel-content,.panel.active .panel-content{padding-left:72px}
 .panel .corner,.active .corner{right:20px}
}

/* читаемость: ссылки, иконки и «+» берут более глубокий оттенок цвета карточки */
.go{color:var(--dk);border-bottom-color:var(--metal)}
.icon,.panel .corner{color:var(--dk)}
.contact{margin-left:auto}
@media(min-width:761px){header{padding:14px 0}header .logo img{height:68px}}
@media(min-width:761px) and (max-width:1100px){.closed-note{display:none}.panel.active{flex:3}.vertical{font-size:15px}}
@media(max-width:760px){header .logo img{height:48px}}

.prototype{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}