/* Подключение пользовательских шрифтов */
@font-face {
font-family: 'GranaPadano';
src: url('media/GranaPadano.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: 'Arciform';
src: url('media/arciformsans.otf') format('opentype');
font-weight: normal;
font-style: normal;
}

:root{
--bg-dark: #2A1A12;
--panel-border: #82634B;
--text-dark: #5C4033;
--text-soft: #6E4D3B;
--accent: #82634B;
--accent-hover: #6E4D3B;
--light-text: #EAE0C7;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
background: var(--bg-dark);
color: var(--light-text);
font-family: 'Arciform', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 18px;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
}
img,svg{display:block; max-width:100%;}
a{color:inherit;}

.wrap{max-width:1180px; margin:0 auto; padding:0 32px;}

h1,h2,h3 {
font-family: 'GranaPadano', sans-serif;
font-weight: bold;
letter-spacing: 0.02em;
color: var(--text-dark);
}

.eyebrow{
font-style: italic;
font-size: 14px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--text-soft);
display: flex; align-items: center; gap: 10px;
}
.eyebrow::before{
content:"";
width:22px; height:1px;
background: var(--accent);
display:inline-block;
}

.btn{
display:inline-flex; align-items:center; gap:10px;
font-weight:bold; font-size:14px;
letter-spacing:0.08em; text-transform:uppercase;
padding:13px 24px;
text-decoration:none;
border:1.5px solid var(--accent);
border-radius:4px;
transition:transform .18s ease, box-shadow .18s ease;
}
.btn-gold{ background: var(--accent); color: #FFF; border-color: var(--accent); }
.btn-gold:hover{ transform:translateY(-2px); box-shadow:0 6px 0 -2px rgba(0,0,0,0.35); background: var(--accent-hover); }
.btn-outline{ background:transparent; color: var(--text-dark); border-color: var(--accent); }
.btn-outline:hover{ transform:translateY(-2px); box-shadow:0 6px 0 -2px rgba(0,0,0,0.2); }

header{
position:sticky; top:0; z-index:60;
background-color: #E2D3BE;
background-image: url('media/webbg.jpg');
background-repeat: repeat;
background-size: auto;
border-bottom: 1.5px solid var(--panel-border);
box-shadow: 0 4px 15px rgba(0,0,0,0.3);
}

nav.header-nav{
display:flex; align-items:center; justify-content:space-between;
height:84px;
padding: 0 10%;
}
.brand{ display:flex; align-items:center; gap:14px; text-decoration:none; }
.brand .seal{ width:44px; height:44px; }
.brand .word{
font-family: 'GranaPadano', sans-serif;
font-weight:bold; font-size:20px;
letter-spacing:0.06em; color: var(--text-dark);
}

.header-controls {
display: flex;
align-items: center;
gap: 20px;
}

.audio-btn {
background: transparent;
border: 1.5px solid var(--accent);
color: var(--text-dark);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 16px;
transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.audio-btn:hover {
background: var(--accent);
color: #FFF;
transform: translateY(-2px);
}
.audio-btn.playing {
background: var(--accent);
color: #FFF;
}

.navlinks{ display:flex; gap:38px; list-style:none; }
.navlinks a{
text-decoration:none; font-size:13px;
letter-spacing:0.08em; text-transform:uppercase; color: var(--text-dark);
position:relative; padding-bottom:6px; opacity: 0.9;
font-weight: bold;
}
.navlinks a::after{
content:""; position:absolute; left:0; bottom:0; width:0; height:2px;
background: var(--accent); transition:width .2s ease;
}
.navlinks a:hover{ opacity: 1; }
.navlinks a:hover::after{ width:100%; }
#navtoggle{ display:none; }
.hamburger{ display:none; cursor:pointer; }

.et{
position:relative;
overflow:hidden;
min-height:92vh;
display:flex; align-items:center;
}

.et-bg{
position:absolute;
top:-40px;
left:-40px;
right:-40px;
bottom:-40px;
background-image:url("media/ET_BG.png");
background-size:cover;
background-position:center;
will-change:transform;
z-index:1;
}

.et .et-container {
position: relative;
z-index: 2;
width: 100%;
padding: 40px 0 40px 10%;
display: flex;
justify-content: flex-start;
}

.et-panel{
position:relative;
background-color: #E2D3BE;
background-image: url('media/webbg.jpg');
background-size: cover;
background-position: center;
border: 1.5px solid var(--panel-border);
width: 100%;
max-width: 520px;
margin-left: 0;
padding: 40px 36px;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.6);
}

.et-panel input[type="radio"]{ display:none; }
.header-controls input[type="radio"]{ display:none; }

/* Language switch: lives in the header, but controls content inside .et-panel,
   so sibling combinators can't reach it — use :has() to bridge the two trees. */
.lang-block{ display:none; }
html:has(#lang-en:checked) .lang-content .lang-en-text{ display:block; }
html:has(#lang-ru:checked) .lang-content .lang-ru-text{ display:block; }

.lang-tabs{
display:flex;
flex-direction:row;
gap:6px;
}

.lang-tabs label{
background-color: transparent;
border: 1.5px solid var(--accent);
color: var(--text-dark);
font-weight: bold;
font-size:12px;
letter-spacing:0.08em;
padding:8px 14px;
cursor:pointer;
border-radius:20px;
transition:background .15s ease, color .15s ease;
}

#lang-en:checked ~ .lang-tabs label[for="lang-en"],
#lang-ru:checked ~ .lang-tabs label[for="lang-ru"]{
background-color: var(--accent);
color: #FFF;
}

.about-tabs{
position:absolute;
top:40px;
left:-54px;
display:flex;
flex-direction:column;
gap:8px;
z-index:3;
}

.about-tabs label{
display:flex;
flex-direction:column;
align-items:center;
gap:4px;
width:46px;
background-color: var(--accent);
border: 1.5px solid var(--panel-border);
color: #FFF;
font-weight: bold;
font-size:10px;
letter-spacing:0.06em;
padding:12px 6px;
cursor:pointer;
border-radius:8px;
transition:background .15s ease, color .15s ease;
}

.about-tabs label .tab-icon{
flex-shrink:0;
}

#about-info:checked ~ .about-tabs label[for="about-info"],
#about-news:checked ~ .about-tabs label[for="about-news"]{
background-color: #E2D3BE;
background-image: url('media/webbg.jpg');
background-size: cover;
color: var(--text-dark);
}

.about-content {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.about-block{ display:none; }
#about-info:checked ~ .lang-content .about-info-text{ display:block; }
#about-news:checked ~ .lang-content .about-news-text{ display:block; }

.et-panel h1{
font-size: clamp(22px, 2.5vw, 31px);
line-height: 1.2;
margin: 10px 0 14px;
color: var(--text-dark);
}

.et-panel p{
color: var(--text-soft); 
font-size:15px; 
line-height:1.5;
margin-bottom:14px;
text-align: left;
}

.feature-list {
list-style: none;
margin: 16px 0 20px 0;
padding: 0;
}
.feature-list li {
font-size: 14.5px;
color: var(--text-soft);
line-height: 1.45;
margin-bottom: 12px;
position: relative;
padding-left: 24px;
}
.feature-list li::before {
content: "✦";
position: absolute;
left: 0;
top: 0;
color: var(--accent);
font-size: 14px;
}
.feature-list b {
color: var(--text-dark);
}

.cta-text {
font-size: 14px;
color: var(--text-dark);
background: rgba(130, 99, 75, 0.1);
padding: 10px 14px;
border-radius: 6px;
border-left: 3px solid var(--accent);
margin-bottom: 18px;
}

.news-feed-wrap{ position:relative; }

.news-feed{
display:flex;
flex-direction:column;
gap:14px;
margin-bottom:14px;
max-height:650px;
overflow-y:auto;
padding-right:10px;
scrollbar-width:thin; /* Firefox */
scrollbar-color: rgba(130, 99, 75, 0.45) transparent; /* Firefox */
}

.news-feed-fader{
position:absolute;
left:0; right:10px; bottom:0;
display:flex;
justify-content:center;
padding:32px 4px 4px;
background: linear-gradient(to bottom, rgba(226,211,190,0), rgba(226,211,190,0.95) 45%);
font-size:13px;
color: var(--text-dark);
opacity:0;
transform:translateY(4px);
pointer-events:none;
transition:opacity .25s ease, transform .25s ease;
}
.news-feed-wrap.at-bottom .news-feed-fader{
opacity:1;
transform:translateY(0);
pointer-events:auto;
}
.news-feed-fader a{
color: var(--accent);
font-weight:bold;
text-decoration:none;
margin-left:4px;
}
.news-feed-fader a:hover{ text-decoration:underline; }

.news-feed-noscript{
color: var(--text-soft);
font-size:14.5px;
line-height:1.5;
margin-bottom:14px;
}
.news-feed-noscript a{ color: var(--accent); font-weight:bold; text-decoration:none; }
.news-feed-noscript a:hover{ text-decoration:underline; }

/* macOS-style overlay scrollbar (WebKit/Blink): thin, pill-shaped,
   near-invisible at rest, fades in on hover to match the trackpad feel. */
.news-feed::-webkit-scrollbar{
width:7px;
}
.news-feed::-webkit-scrollbar-track{
background:transparent;
margin:4px 0;
}
.news-feed::-webkit-scrollbar-thumb{
background-color: rgba(130, 99, 75, 0.25);
border-radius:10px;
transition: background-color .25s ease;
}
.news-feed:hover::-webkit-scrollbar-thumb{
background-color: rgba(130, 99, 75, 0.55);
}
.news-feed::-webkit-scrollbar-thumb:hover{
background-color: rgba(110, 77, 59, 0.8);
}

.error-page{
min-height:92vh;
display:flex;
align-items:center;
justify-content:center;
padding:40px 20px;
}

.error-panel{
background-color: #E2D3BE;
background-image: url('media/webbg.jpg');
background-size: cover;
background-position: center;
border: 1.5px solid var(--panel-border);
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.6);
max-width: 480px;
width: 100%;
padding: 40px 36px;
text-align: center;
}

.error-panel h1{
font-size: clamp(24px, 3vw, 34px);
margin: 10px 0 14px;
color: var(--text-dark);
}

.error-panel p{
color: var(--text-soft);
font-size: 15px;
line-height: 1.5;
margin-bottom: 22px;
}

.news-feed .post{
padding-bottom:14px;
border-bottom:1px solid rgba(130, 99, 75, 0.25);
}
.news-feed .post:last-child{ border-bottom:none; padding-bottom:0; }

.news-feed .post-image{
display:block;
width:100%;
max-height:280px;
object-fit:cover;
border-radius:6px;
margin-bottom:10px;
}

.news-feed .post-content{
color: var(--text-soft);
font-size:14.5px;
line-height:1.5;
word-wrap:break-word;
}

.news-feed .post-footer{
display:flex;
justify-content:space-between;
margin-top:8px;
font-size:12px;
color: var(--text-soft);
}
.news-feed .post-footer a{ color: var(--accent); text-decoration:none; }
.news-feed .post-footer a:hover{ text-decoration:underline; }

.et-actions{ display:flex; gap:14px; flex-wrap:wrap; margin-bottom:18px; }

.et-status{
display:flex; gap:20px; flex-wrap:wrap;
font-size:13px; color: var(--text-soft);
border-top:1px solid var(--panel-border); padding-top:14px;
}
.et-status b{ color: var(--text-dark); font-weight:bold; transition: color 0.3s ease; }

/* Цвета статусов */
.status-online { color: #2b7a36 !important; }
.status-offline { color: #b82525 !important; }

footer{
background: var(--bg-dark); 
color: var(--light-text); 
padding:50px 0 30px;
border-top: 1px solid var(--panel-border);
}
.foot-top{
display:flex; justify-content:space-between; align-items:flex-start;
flex-wrap:wrap; gap:30px; padding-bottom:34px; border-bottom:1px solid rgba(130, 99, 75, 0.3);
}
.foot-brand{ display:flex; align-items:center; gap:12px; }
.foot-brand .word{ 
font-family: 'GranaPadano', sans-serif;
font-weight:bold; font-size:19px; color: var(--light-text); 
}
.foot-cols{ display:flex; gap:60px; flex-wrap:wrap; }

.foot-col h4{
font-family: 'GranaPadano', sans-serif;
font-size:12px; letter-spacing:0.1em;
text-transform:uppercase; color: var(--light-text); margin-bottom:14px;
}
.foot-col a{ 
display:block; font-size:14.5px; color: var(--light-text); 
text-decoration:none; margin-bottom:10px; opacity: 0.8; transition: 0.2s;
}
.foot-col a:hover{ opacity: 1; color: var(--accent); }

.foot-bottom{
display:flex; justify-content:space-between; padding-top:22px;
font-size:14px; flex-wrap:wrap; gap:10px; opacity: 0.6;
}

@media (max-width:768px){
nav.header-nav { padding: 0 20px; }
.et .et-container { padding: 30px 20px 30px 50px; }
.et-panel { max-width: 100%; }
}

@media (max-width:580px){
nav.header-nav { padding: 0 15px; }
.navlinks{ display:none; }
.hamburger{ display:block; }
#navtoggle:checked ~ .navlinks{
  display:flex; position:absolute; top:84px; left:0; right:0;
  background-color: #E2D3BE;
  background-image: url('media/webbg.jpg');
  background-repeat: repeat;
  background-size: auto;
  border-bottom:1.5px solid var(--panel-border); padding:22px 32px; gap:20px; z-index:60;
}
.et{ min-height:auto; }
.et .et-container { padding: 20px 15px; }
.et-panel{ padding:28px 20px; border-radius: 8px; }
.about-tabs{
  position:static;
  flex-direction:row;
  width:auto;
  gap:8px;
  margin-bottom:16px;
}
.about-tabs label{
  flex-direction:row;
  width:auto;
  border-radius:4px;
  padding:6px 12px;
}
}