/* ===== Terial Street — shared styles ===== */
:root{
  --black:#07070a;
  --adamant:#0d0f13;
  --graphite:#17191e;
  --metal:#24262c;
  --silver:#c7c9cf;
  --scarlet:#d81e3a;
  --ruby:#991b32;
  --scarlet-soft:#ef4961;

  --panel:var(--graphite);
  --panel-line:var(--metal);
  --text:#f3f2ee;
  --text-secondary:var(--silver);
  --danger-line:#4a4a52;

  /* ---------- Responsive design system ----------
     Six ranges, matching the brief exactly:
       <768        mobile
       768–1023    tablet
       1024–1279   small laptop
       1280–1599   laptop/desktop
       1600–1919   wide desktop
       1920+       Full HD and larger
     --container-max is redefined per range below (not one fixed value);
     --container-pad is the side padding, also per range. Both are real
     CSS custom properties so .container only ever references them once —
     no page has its own copy of these numbers. */
  --container-max:1280px;
  --container-pad:20px;

  /* Fluid typography scale. Every clamp() has a real, deliberate upper
     bound (checked visually at 2560px so nothing balloons) — see the
     v1.8.6 changelog for the exact rationale on each one. rem-based so
     it still respects the user's own browser font-size setting. */
  --font-body: clamp(1rem, 0.95rem + 0.2vw, 1.125rem);
  --font-small: clamp(0.85rem, 0.82rem + 0.12vw, 0.95rem);
  --font-nav: clamp(0.8125rem, 0.79rem + 0.1vw, 0.9375rem);
  --font-breadcrumb: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);
  --font-h1: clamp(2.25rem, 1.6rem + 2.6vw, 4.25rem);
  --font-page-title: clamp(1.75rem, 1.5rem + 1.2vw, 2.75rem);
  --font-h2: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem);
  --font-h3: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  --font-lead: clamp(0.9375rem, 0.88rem + 0.25vw, 1.125rem);
  --font-meta: clamp(0.75rem, 0.73rem + 0.08vw, 0.8125rem);
  --font-card-title: clamp(0.875rem, 0.83rem + 0.18vw, 1rem);
  --font-btn: clamp(0.75rem, 0.72rem + 0.1vw, 0.8125rem);

  /* Article reading column: a real measure in `ch` (character-relative,
     not a raw px/vw guess) — see build note in v1.8.6 changelog for the
     visual check that landed on this exact number at --font-body's
     rendered size. */
  --article-measure:74ch;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background:var(--black);
  color:var(--text);
  font-family:-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  font-weight:400;
  font-size:var(--font-body);
  line-height:1.55;
  overflow-x:hidden;
}
h1,h2,h3,.brand,.nav a,.btn,.lang-switch{
  font-family:'Arial Narrow',Arial,sans-serif;
  letter-spacing:.02em;
}
a{color:inherit; text-decoration:none;}
ul{list-style:none;}
img{max-width:100%; display:block;}
button{font-family:inherit; cursor:pointer; background:none; border:none; color:inherit;}
:focus-visible{outline:2px solid var(--scarlet); outline-offset:2px;}

.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.container{max-width:var(--container-max); margin:0 auto; padding:0 var(--container-pad); width:100%;}

/* Container/padding per range — this is the ONE place these numbers
   live; nothing else in this file hardcodes a container width. Ranges
   below 768px keep the ORIGINAL mobile padding (20px, then 480px's
   own override further down) exactly as before — only 768px and up
   are new. */
@media (min-width:768px){
  :root{ --container-max:720px; --container-pad:28px; }
}
@media (min-width:1024px){
  :root{ --container-max:1080px; --container-pad:32px; }
}
@media (min-width:1280px){
  :root{ --container-max:1280px; --container-pad:40px; }
}
@media (min-width:1600px){
  :root{ --container-max:1480px; --container-pad:48px; }
}
@media (min-width:1920px){
  :root{ --container-max:1640px; --container-pad:56px; }
}

/* ---------- HEADER ---------- */
header{
  position:sticky; top:0; z-index:100;
  background:rgba(8,9,11,.92);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--panel-line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:76px;}
.brand{font-size:clamp(1.125rem, 1.05rem + 0.3vw, 1.375rem); font-weight:600; letter-spacing:.12em; color:var(--text);}
.brand span{color:var(--scarlet);}
nav.main-nav{display:flex; align-items:center; gap:clamp(20px, 1.4vw, 34px); flex-wrap:wrap;}
nav.main-nav a{
  font-size:var(--font-nav); font-weight:500; letter-spacing:.1em; color:var(--text-secondary);
  text-transform:uppercase; position:relative; padding-bottom:6px; transition:color .2s ease;
}
nav.main-nav a:hover, nav.main-nav a.active{color:var(--text);}
nav.main-nav a.active::after{content:''; position:absolute; left:0; bottom:0; width:100%; height:2px; background:var(--scarlet);}
.nav-dropdown{position:relative;}
.nav-dropdown-trigger{
  display:flex; align-items:center; gap:6px;
  font-family:'Arial Narrow',Arial,sans-serif; font-size:13px; font-weight:500; letter-spacing:.1em;
  color:var(--text-secondary); text-transform:uppercase; padding-bottom:6px; transition:color .2s ease;
  min-height:44px;
}
.nav-dropdown-trigger:hover,
.nav-dropdown-trigger:focus-visible{color:var(--text);}
.nav-dropdown-trigger svg{width:9px; height:9px; transition:transform .2s ease;}
.nav-dropdown-menu{
  position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%);
  background:var(--adamant); border:1px solid var(--panel-line);
  min-width:200px; padding:8px; display:none; z-index:60;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{display:block;}
.nav-dropdown:hover > .nav-dropdown-trigger svg,
.nav-dropdown:focus-within > .nav-dropdown-trigger svg{transform:rotate(180deg);}
.nav-dropdown-menu a{
  display:block; padding:10px 12px; font-size:12.5px; letter-spacing:.06em;
  color:var(--text-secondary); text-transform:uppercase; min-height:auto;
}
.nav-dropdown-menu a:hover{background:var(--panel); color:var(--text);}

.mobile-nav-sub-toggle{
  display:flex; align-items:center; justify-content:space-between; width:100%;
  font-size:22px; font-weight:500; letter-spacing:.06em; color:var(--text); padding:6px 0;
}
.mobile-nav-sub-toggle svg{width:14px; height:14px; transition:transform .2s ease;}
.mobile-nav-sub-toggle.open svg{transform:rotate(180deg);}
.mobile-nav-sub{list-style:none; padding-left:18px; margin-top:10px; display:none; flex-direction:column; gap:16px;}
.mobile-nav-sub.show{display:flex;}
.mobile-nav-sub a{font-size:16px !important; color:var(--text-secondary) !important;}

.demo-tag{
  display:inline-block; font-size:10px; letter-spacing:.06em; text-transform:uppercase;
  color:var(--scarlet-soft); border:1px solid var(--ruby); padding:2px 8px; margin-left:8px;
  vertical-align:middle;
}

.header-right{display:flex; align-items:center; gap:22px;}
.lang-switch{
  position:relative; font-size:13px; font-weight:600; letter-spacing:.1em;
  color:var(--text);
  padding:0; border:1px solid var(--panel-line);
}
.lang-switch-btn{
  display:flex; align-items:center; gap:6px; width:100%; height:100%;
  padding:8px 10px; min-height:44px; cursor:pointer; color:inherit; font:inherit;
}
.lang-switch svg{width:10px; height:10px; transition:transform .2s ease;}
.lang-switch.open svg{transform:rotate(180deg);}
.lang-menu{
  position:absolute; top:calc(100% + 8px); right:0; background:var(--graphite);
  border:1px solid var(--panel-line); min-width:100px; display:none; z-index:50;
}
.lang-menu.show{display:block;}
.lang-menu button{display:block; width:100%; text-align:left; padding:12px 14px; font-size:13px; letter-spacing:.08em; color:var(--text-secondary); min-height:44px;}
.lang-menu button:hover{background:var(--panel); color:var(--text);}
.lang-menu button.active{color:var(--scarlet);}
.burger{width:44px; height:44px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:6px;}
.burger span{display:block; width:24px; height:2px; background:var(--text);}

.mobile-nav{position:fixed; inset:0; background:rgba(8,9,10,.98); z-index:200; display:none; flex-direction:column; padding:26px 30px; overflow-y:auto;}
.mobile-nav.show{display:flex;}
.mobile-nav-top{display:flex; justify-content:space-between; align-items:center; margin-bottom:50px;}
.mobile-nav .close-btn{width:44px; height:44px; position:relative;}
.mobile-nav .close-btn span{position:absolute; top:50%; left:10px; width:24px; height:2px; background:var(--text);}
.mobile-nav .close-btn span:first-child{transform:rotate(45deg);}
.mobile-nav .close-btn span:last-child{transform:rotate(-45deg);}
.mobile-nav ul{display:flex; flex-direction:column; gap:22px;}
.mobile-nav ul a{font-size:22px; font-weight:500; letter-spacing:.06em; color:var(--text); display:block; padding:6px 0;}
.mobile-nav-langs{display:flex; gap:14px; margin-top:44px; flex-wrap:wrap;}
.mobile-nav-langs button{font-size:13px; font-weight:600; letter-spacing:.08em; color:var(--text-secondary); padding:10px 16px; border:1px solid var(--panel-line); min-height:44px;}
.mobile-nav-langs button.active{color:var(--scarlet); border-color:var(--scarlet);}

/* ---------- HERO ---------- */
.hero{display:grid; grid-template-columns:1fr 1fr; align-items:center; min-height:88vh; gap:20px;}
.hero-text{padding:60px 0;}
.hero-title{font-size:var(--font-h1); font-weight:700; line-height:1.02; margin-bottom:18px;}
.hero-tagline{color:var(--scarlet); font-size:var(--font-lead); font-weight:500; letter-spacing:.03em; margin-bottom:22px;}
.hero-body{color:var(--text-secondary); font-size:var(--font-body); max-width:460px; margin-bottom:34px;}
.hero-buttons{display:flex; gap:16px; margin-bottom:36px; flex-wrap:wrap;}
.btn{font-size:13px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; padding:16px 26px; border:1px solid transparent; transition:opacity .2s ease; display:inline-flex; align-items:center; min-height:44px;}
.btn-primary{background:var(--scarlet); color:#ffffff;}
.btn-outline{border-color:var(--panel-line); color:var(--text);}
.btn:hover{opacity:.85;}
.social-row{display:flex; gap:16px; flex-wrap:wrap;}
.social-row a,.footer-social a{width:44px; height:44px; border:1px solid var(--panel-line); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); transition:all .2s ease;}
.social-row a:hover,.footer-social a:hover{color:var(--scarlet); border-color:var(--scarlet);}
.social-row svg,.footer-social svg{width:17px; height:17px;}
.social-disabled{opacity:.35; cursor:default;}
.social-disabled:hover{color:var(--text-secondary) !important; border-color:var(--panel-line) !important;}

.hero-visual{position:relative; height:88vh; min-height:560px; overflow:hidden; background:#000;}
.hero-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 30%; filter:saturate(0.9) contrast(1.05);}
.hero-visual::after{content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,9,11,.55) 0%, rgba(8,9,11,.05) 38%, rgba(8,9,11,0) 60%),
             linear-gradient(0deg, rgba(8,9,11,.35) 0%, rgba(8,9,11,0) 30%);
  pointer-events:none;}

/* ---------- SECTION GENERIC ---------- */
section{padding:70px 0;}
.section-head{display:flex; align-items:baseline; justify-content:space-between; margin-bottom:30px; border-bottom:1px solid var(--panel-line); padding-bottom:18px; gap:16px;}
.section-title{font-size:15px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;}
.section-link{font-size:13px; color:var(--text-secondary); display:flex; align-items:center; gap:6px; min-height:44px;}
.section-link svg{width:12px; height:12px;}
.section-link:hover{color:var(--scarlet);}

/* ---------- RELEASES ---------- */
.releases-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px;}
.release-card{display:block; color:inherit;}
.release-cover{position:relative; aspect-ratio:1/1; width:100%; overflow:hidden; background:var(--graphite);}
.release-cover img{width:100%; height:100%; object-fit:cover;}
.play-btn{position:absolute; right:12px; bottom:12px; width:40px; height:40px; border-radius:50%; background:rgba(8,9,11,.65); border:1px solid rgba(255,255,255,.3); display:flex; align-items:center; justify-content:center; z-index:2;}
.play-btn svg{width:12px; height:12px; fill:var(--text); margin-left:2px;}
.release-name{margin-top:14px; font-size:14px; font-weight:500;}
.release-date{margin-top:4px; font-size:12px; color:var(--text-secondary);}

/* ---------- CONTENT CARD (generic — used by playlists.php; reusable
   anywhere a "card with an embed + a link row" pattern is needed,
   deliberately not named after playlists specifically) ---------- */
.content-card{
  margin-bottom:32px; background:var(--graphite); border:1px solid var(--panel-line);
  border-radius:12px; padding:20px; overflow:hidden;
}
.content-card-title{margin:0 0 8px; font-size:var(--font-h3); font-weight:600;}
.content-card-desc{margin:0 0 16px; font-size:var(--font-small); color:var(--text-secondary);}

.embed-16x9{position:relative; aspect-ratio:16/9; overflow:hidden; border-radius:8px; margin-bottom:16px; background:var(--black);}
.embed-16x9 iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
.youtube-consent{display:flex; align-items:center; justify-content:center; padding:20px;}
.youtube-consent-inner{max-width:520px; text-align:center; color:var(--text-secondary); font-size:var(--font-small);}
.youtube-consent-inner strong{display:block; color:var(--text); font-size:var(--font-h3); margin-bottom:8px;}
.youtube-consent-inner p{margin:0 0 14px;}
.youtube-consent-inner .btn{margin:0 8px 8px 0;}
.youtube-consent-inner a{display:inline-block; min-height:44px; padding:11px 0; color:var(--scarlet-soft); text-decoration:underline;}

/* Fully-clickable card link — the whole thumbnail+title+description
   area is ONE <a>, not a fake div+onclick and not several separate
   links. The iframe above is a deliberately separate interactive
   element and is never nested inside this. */
.content-card-link{
  display:flex; gap:16px; align-items:flex-start; text-decoration:none; color:inherit;
  margin:0 -8px; padding:12px 8px; border-radius:8px;
  border:1px solid transparent;
  transition:background-color .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.content-card-link:hover, .content-card-link:focus-visible{
  background:rgba(216,30,58,.06);
  border-color:var(--panel-line);
  box-shadow:0 4px 18px rgba(0,0,0,.25);
}
.content-card-link:focus-visible{outline:2px solid var(--scarlet); outline-offset:2px;}
.content-card-link-thumb{
  width:120px; max-width:33%; height:auto; border-radius:6px; flex-shrink:0;
  transition:transform .2s ease;
}
.youtube-placeholder-thumb{
  aspect-ratio:16/9; display:flex; align-items:center; justify-content:center;
  background:var(--black); color:var(--text-secondary); border:1px solid var(--panel-line);
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
}
.content-card-link:hover .content-card-link-thumb,
.content-card-link:focus-visible .content-card-link-thumb{transform:scale(1.03);}
.content-card-link-body{min-width:0;}
.content-card-link-cta{margin-top:4px; color:var(--scarlet-soft);}

@media (min-width:1024px){
  .cards-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
  .cards-grid .content-card{margin-bottom:0;}
}
@media (min-width:1600px){
  .cards-grid{grid-template-columns:repeat(3,1fr);}
}

.soon-block{margin-top:36px; padding-top:30px; border-top:1px solid var(--panel-line);}
.soon-card{display:flex; gap:20px; align-items:center; background:var(--graphite); border:1px solid var(--panel-line); padding:18px; max-width:520px;}
.soon-cover{position:relative; width:96px; height:96px; flex-shrink:0; background:var(--panel); display:flex; align-items:center; justify-content:center;}
.soon-badge{position:absolute; top:-9px; left:-9px; background:var(--scarlet); color:#ffffff; font-size:10px; font-weight:700; letter-spacing:.08em; padding:3px 8px;}
.soon-links{display:flex; gap:10px; margin-top:10px;}
.soon-links a{font-size:12px; color:var(--scarlet); border-bottom:1px solid var(--scarlet); min-height:auto;}

/* placeholder tiles */
.needs-tile{
  aspect-ratio:1/1; width:100%; background:var(--graphite); border:1px dashed var(--danger-line);
  display:flex; align-items:center; justify-content:center; text-align:center; padding:12px;
  font-size:11px; letter-spacing:.06em; color:var(--text-secondary); text-transform:uppercase;
}
.pending{opacity:.55; cursor:default; pointer-events:none;}

/* ---------- VIDEO ---------- */
.video-block{display:grid; grid-template-columns:1.6fr 1fr; gap:24px;}
.video-main-thumb,.video-thumb{position:relative; aspect-ratio:16/9; width:100%; background:var(--graphite); display:flex; align-items:center; justify-content:center; overflow:hidden;}
.video-main-thumb img,.video-thumb img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;}
.video-main-thumb .play-btn,.video-thumb .play-btn{position:absolute; width:56px; height:56px;}
.video-thumb .play-btn{width:38px; height:38px;}
.video-title{margin-top:14px; font-size:15px; font-weight:500;}
.video-date{margin-top:4px; font-size:12px; color:var(--text-secondary);}
.video-links{display:flex; gap:14px; margin-top:6px;}
.video-links a{font-size:12px; color:var(--scarlet); border-bottom:1px solid var(--scarlet);}
.video-side-list{display:flex; flex-direction:column; gap:20px;}
.video-side-item{display:flex; gap:14px; align-items:flex-start;}
.video-side-item .video-thumb{width:120px; flex-shrink:0;}
.video-side-info .video-title{font-size:13.5px; margin-top:0;}

/* ---------- ARTICLES (teaser list) ---------- */
.articles-list{display:flex; flex-direction:column;}
.article-row{display:flex; gap:22px; align-items:center; padding:22px 0; border-bottom:1px solid var(--panel-line); color:inherit;}
.article-row:first-child{padding-top:0;}
.article-thumb{width:88px; height:88px; flex-shrink:0; overflow:hidden; background:var(--graphite);}
.article-thumb img{width:100%; height:100%; object-fit:cover;}
.article-title{font-size:16px; font-weight:600; margin-bottom:6px;}
.article-excerpt{font-size:13.5px; color:var(--text-secondary); max-width:560px;}

.mobile-compact-row{display:none; align-items:center; justify-content:space-between; padding:20px 0; border-bottom:1px solid var(--panel-line); color:inherit;}
.mobile-compact-row .section-title{margin:0;}
.mobile-compact-row svg{width:14px; height:14px; color:var(--text-secondary);}

/* ---------- COMMUNICATION MENU ---------- */
.comm-menu{display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--panel-line); border:1px solid var(--panel-line);}
.comm-item{background:var(--graphite); padding:26px 22px; display:flex; align-items:center; justify-content:space-between; transition:background .2s ease; min-height:44px;}
.comm-item:hover{background:var(--panel);}
.comm-item span{font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;}
.comm-item svg{width:14px; height:14px; color:var(--scarlet);}
.comm-desc{font-size:12.5px; color:var(--text-secondary); margin-top:8px; max-width:220px;}

/* ---------- FOOTER ---------- */
footer{border-top:1px solid var(--panel-line); padding:44px 0 34px;}
.footer-inner{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:26px;}
.footer-brand .brand{font-size:16px; margin-bottom:8px;}
.footer-brand p{font-size:12px; color:var(--text-secondary); line-height:1.6;}
.footer-links{display:flex; gap:28px; flex-wrap:wrap;}
.footer-links a{font-size:13px; color:var(--text-secondary); min-height:44px; display:flex; align-items:center;}
.footer-links a:hover{color:var(--text);}
.footer-social{display:flex; gap:12px;}

/* ---------- GENERIC PAGE HEADER (inner pages) ---------- */
.page-hero{padding:60px 0 20px; border-bottom:1px solid var(--panel-line);}

/* About-page hero: text + atmospheric photo. Mobile-first: image on
   top at a fixed, modest height (never lets a tall source dominate
   the screen), then title/lead below. Desktop switches to a real
   two-column split. width/height attributes on the <img> (plus this
   aspect-ratio on desktop) prevent layout shift while the image
   itself loads. */
.about-hero{display:flex; flex-direction:column; gap:24px; padding:28px 0 8px;}
.about-hero-image{order:-1; width:100%; height:260px; overflow:hidden; border-radius:12px; background:var(--graphite);}
.about-hero-image img{width:100%; height:100%; object-fit:cover; display:block;}
.about-hero-text .page-title{margin-bottom:12px;}
@media (min-width:480px){
  .about-hero-image{height:300px;}
}
@media (min-width:1024px){
  .about-hero{flex-direction:row; align-items:center; gap:48px; padding:48px 0 24px;}
  .about-hero-image{order:0; flex:0 0 55%; height:auto; aspect-ratio:3/2;}
  .about-hero-text{flex:0 0 40%;}
}
@media (min-width:1600px){
  .about-hero{gap:64px;}
}
.breadcrumbs{font-size:var(--font-breadcrumb); color:var(--text-secondary); margin-bottom:18px; display:flex; gap:8px; flex-wrap:wrap;}
.breadcrumbs a{color:var(--text-secondary);}
.breadcrumbs a:hover{color:var(--scarlet);}
.page-title{font-size:var(--font-page-title); font-weight:700; margin-bottom:14px;}
.page-lead{color:var(--text-secondary); font-size:var(--font-lead); max-width:640px;}

/* ---------- ARTICLE PAGE ---------- */
.article-hero-cover{width:100%; aspect-ratio:16/7; overflow:hidden; background:var(--graphite);}
.article-hero-cover img{width:100%; height:100%; object-fit:cover;}

/* Article covers: natural aspect ratio, never cropped, never upscaled —
   see templates/material/article.php's docblock for why this is
   separate from .article-hero-cover (which stays as-is for
   songs/video). Handles all 4 real cases together, not just the
   common one:
     - horizontal (wide) source: fills the container width, height
       follows naturally.
     - square source: same — fills the container width.
     - vertical (tall/portrait) source: would otherwise create an
       excessively tall first screen — height is capped per breakpoint
       via max-height, and object-fit:contain (NOT cover) is used only
       within that cap, so the whole image still shows, just centered
       with letterboxing rather than cropped.
     - small original (smaller than the container): max-width:100% —
       not width:100% — means it is shown at its real size instead of
       being stretched up to fill the container. */
.article-hero-cover-natural{
  width:100%; max-height:70vh; overflow:hidden; background:var(--graphite);
  display:flex; align-items:center; justify-content:center;
}
.article-hero-cover-natural img{
  max-width:100%; width:auto; height:auto; max-height:70vh;
  display:block; margin:0 auto; object-fit:contain;
}
@media (min-width:1024px){
  .article-hero-cover-natural{max-height:64vh;}
  .article-hero-cover-natural img{max-height:64vh;}
}
@media (min-width:1600px){
  .article-hero-cover-natural{max-height:58vh;}
  .article-hero-cover-natural img{max-height:58vh;}
}
@media (min-width:768px) and (max-width:1023px){
  .article-hero-cover-natural{max-height:46vh;}
  .article-hero-cover-natural img{max-height:46vh;}
}
@media (max-width:767px){
  .article-hero-cover-natural{max-height:38vh;}
  .article-hero-cover-natural img{max-height:38vh;}
}
.article-meta{display:flex; gap:22px; flex-wrap:wrap; font-size:12.5px; color:var(--text-secondary); margin:20px 0 6px;}
.article-meta span{display:flex; align-items:center; gap:6px;}
.article-layout{display:grid; grid-template-columns:220px 1fr; gap:50px; align-items:flex-start;}
.article-toc{position:sticky; top:100px; border-left:1px solid var(--panel-line); padding-left:18px;}
.article-toc-title{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--text-secondary); margin-bottom:14px;}
.article-toc a{display:block; font-size:13px; color:var(--text-secondary); padding:6px 0;}
.article-toc a:hover{color:var(--scarlet);}
.article-body{font-size:var(--font-body); color:#e4e3df; max-width:var(--article-measure);}

/* List page card styling (Thoughts/"Роздуми"). The atmospheric library
   background that used to sit behind this list was removed at the
   site owner's request — these cards are independent of that and were
   kept: solid dark cards so text never touches a photo directly. */
.thought-card{
  background:var(--graphite); border:1px solid var(--panel-line);
  border-radius:12px; padding:22px; margin-bottom:20px;
  transition:border-color .18s ease, box-shadow .18s ease;
}
.thought-card:hover, .thought-card:focus-within{
  border-color:var(--scarlet); box-shadow:0 4px 18px rgba(0,0,0,.3);
}
.thought-card-thumb{width:100%; aspect-ratio:16/9; overflow:hidden; border-radius:8px; background:var(--black);}
.thought-card-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
.thought-card-title{font-size:var(--font-h3); font-weight:600; margin:12px 0 8px;}
.thought-card-desc{color:var(--text-secondary); font-size:var(--font-small);}
.thought-card-meta{color:var(--text-secondary); font-size:var(--font-meta); margin-top:8px;}
@media (min-width:1024px){
  .thoughts-list-surface{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
  .thoughts-list-surface .thought-card{margin-bottom:0;}
}
@media (min-width:1600px){
  .thoughts-list-surface{grid-template-columns:repeat(3,1fr);}
}
.article-body h2{font-size:22px; margin:34px 0 14px; font-family:'Oswald',sans-serif; font-weight:600;}
.article-body p{margin-bottom:18px;}
.article-body blockquote{border-left:2px solid var(--scarlet); padding-left:18px; color:var(--scarlet-soft); font-style:italic; margin:24px 0;}

.author-box{display:flex; gap:18px; align-items:center; margin-top:50px; padding:24px; background:var(--graphite); border:1px solid var(--panel-line); max-width:680px;}
.author-avatar{width:56px; height:56px; border-radius:50%; background:linear-gradient(160deg,var(--metal),var(--panel)); flex-shrink:0;}
.author-name{font-size:14px; font-weight:600;}
.author-role{font-size:12px; color:var(--text-secondary); margin-top:2px;}

.share-row{display:flex; align-items:center; gap:12px; margin-top:30px; max-width:680px;}
.share-label{font-size:12px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.08em;}
.share-btn{width:40px; height:40px; border:1px solid var(--panel-line); display:flex; align-items:center; justify-content:center; color:var(--text-secondary); min-height:44px; min-width:44px;}
.share-btn:hover{color:var(--scarlet); border-color:var(--scarlet);}
.share-btn svg{width:16px; height:16px;}

.article-nav-pair{display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:60px; border-top:1px solid var(--panel-line); padding-top:30px;}
.article-nav-link{color:inherit;}
.article-nav-link .dir{font-size:11px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; display:block;}
.article-nav-link.next{text-align:right;}
.article-nav-link .art-name{font-size:16px; font-weight:600;}

.related-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:20px;}

/* discussion block */
.discussion{margin-top:60px; border-top:1px solid var(--panel-line); padding-top:34px;}
.discussion-count{color:var(--text-secondary); font-size:13px; margin-bottom:24px;}
.comment{display:flex; gap:14px; margin-bottom:24px;}
.comment-avatar{width:38px; height:38px; border-radius:50%; background:linear-gradient(160deg,var(--metal),var(--panel)); flex-shrink:0;}
.comment-name{font-size:13.5px; font-weight:600;}
.comment-time{font-size:11.5px; color:var(--text-secondary); margin-left:8px; font-weight:400;}
.comment-text{font-size:14px; color:#d8d7d3; margin-top:4px;}
.comment-form{display:flex; gap:12px; margin-top:20px;}
.comment-form textarea{flex:1; background:var(--graphite); border:1px solid var(--panel-line); color:var(--text); padding:14px; font-family:inherit; font-size:14px; resize:vertical; min-height:70px;}
.comment-form button{background:var(--scarlet); color:#ffffff; padding:0 22px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; align-self:flex-start; min-height:44px;}
.demo-note{font-size:11.5px; color:var(--text-secondary); margin-top:10px; font-style:italic;}

/* ---------- LEGAL / SITEMAP / CONTACTS PAGES ---------- */
.legal-content{max-width:720px; font-size:15px; color:#dedcd7;}
.legal-content p{margin-bottom:18px;}
.legal-content h2{font-size:19px; font-weight:600; margin:36px 0 14px; font-family:'Arial Narrow',Arial,sans-serif; color:var(--text);}
.legal-content h2:first-child{margin-top:0;}
.legal-content ul{margin:0 0 18px 20px; list-style:disc;}
.legal-content li{margin-bottom:8px;}
.legal-content a{color:var(--scarlet-soft); text-decoration:underline;}
.legal-updated{color:var(--text-secondary); font-size:12.5px; margin-bottom:36px;}
.legal-notice{background:var(--graphite); border:1px solid var(--panel-line); padding:24px 26px; margin-bottom:30px;}

.sitemap-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:36px;}
.sitemap-group-title{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--scarlet); margin-bottom:16px;}
.sitemap-group ul{display:flex; flex-direction:column; gap:12px;}
.sitemap-group a{font-size:14.5px; color:var(--text-secondary); min-height:44px; display:flex; align-items:center;}
.sitemap-group a:hover{color:var(--text);}

.contacts-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:760px;}
.contact-card{background:var(--graphite); border:1px solid var(--panel-line); padding:26px; display:flex; align-items:center; gap:16px;}
.contact-card svg{width:22px; height:22px; color:var(--scarlet); flex-shrink:0;}
.contact-card-label{font-size:11px; color:var(--text-secondary); text-transform:uppercase; letter-spacing:.08em;}
.contact-card-value{font-size:15px; font-weight:500; margin-top:4px; word-break:break-word;}

/* ---------- ZHYVYI DIALOG (forum) ---------- */
.dialog-toolbar{display:flex; gap:16px; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-bottom:26px;}
.dialog-search{flex:1; min-width:200px; display:flex; align-items:center; gap:10px; border:1px solid var(--panel-line); padding:0 14px; height:46px; background:var(--graphite);}
.dialog-search input{background:none; border:none; color:var(--text); font-size:14px; width:100%; height:100%;}
.dialog-search svg{width:16px; height:16px; color:var(--text-secondary); flex-shrink:0;}
.dialog-sort{display:flex; gap:8px;}
.dialog-sort button{font-size:12px; letter-spacing:.06em; text-transform:uppercase; padding:10px 14px; border:1px solid var(--panel-line); color:var(--text-secondary); min-height:44px;}
.dialog-sort button.active{color:var(--scarlet); border-color:var(--scarlet);}
.dialog-tags{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:30px;}
.tag{font-size:11.5px; padding:6px 12px; border:1px solid var(--panel-line); color:var(--text-secondary); text-transform:uppercase; letter-spacing:.05em;}
.tag.tag-music{border-color:#3a5a7a; color:#8fb4d9;}
.tag.tag-life{border-color:#7a5a3a; color:#d9b48f;}
.tag.tag-relationships{border-color:#7a3a5a; color:#d98fb4;}
.tag.tag-society{border-color:#4a7a3a; color:#a9d98f;}
.tag.tag-philosophy{border-color:#5a3a7a; color:#b48fd9;}
.tag.tag-songideas{border-color:var(--scarlet); color:var(--scarlet-soft);}

.topic-list{display:flex; flex-direction:column;}
.topic-row{display:block; padding:22px 0; border-bottom:1px solid var(--panel-line); color:inherit;}
.topic-row.featured{background:rgba(216,30,58,.06); border-left:2px solid var(--scarlet); padding-left:18px;}
.topic-top{display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.topic-name{font-size:16px; font-weight:600; margin-bottom:8px;}
.topic-tags{display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap;}
.topic-snippet{font-size:13.5px; color:var(--text-secondary); max-width:600px;}
.topic-meta{display:flex; gap:16px; font-size:12px; color:var(--text-secondary); margin-top:10px; flex-wrap:wrap;}
.topic-meta b{color:var(--text); font-weight:600;}
.topic-featured-badge{font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--scarlet); border:1px solid var(--scarlet); padding:4px 9px; height:fit-content;}

.ask-btn{background:var(--scarlet); color:#ffffff; padding:14px 24px; font-size:13px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; min-height:44px;}

/* topic detail page */
.topic-question{background:var(--graphite); border:1px solid var(--panel-line); padding:28px; margin-bottom:10px;}
.topic-question .topic-name{font-size:22px;}
.reactions-row{display:flex; gap:10px; margin-top:16px;}
.reaction{font-size:13px; border:1px solid var(--panel-line); padding:8px 14px; color:var(--text-secondary); min-height:44px;}
.propose-btn{margin-top:20px; border:1px solid var(--scarlet); color:var(--scarlet); padding:12px 18px; font-size:12.5px; letter-spacing:.06em; text-transform:uppercase; min-height:44px;}
.answers-list{margin-top:30px;}
.answer{display:flex; gap:14px; padding:20px 0; border-bottom:1px solid var(--panel-line);}
.answer-avatar{width:40px; height:40px; border-radius:50%; background:linear-gradient(160deg,var(--metal),var(--panel)); flex-shrink:0;}

/* ---------- FLUDYLKA (chat) ---------- */
.chat-shell{border:1px solid var(--panel-line); background:var(--graphite); display:flex; flex-direction:column; height:70vh; max-height:640px;}
.chat-header{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--panel-line);}
.chat-presence{display:flex; align-items:center; gap:8px; font-size:12.5px; color:var(--text-secondary);}
.presence-dot{width:8px; height:8px; border-radius:50%; background:#6bbf7a; box-shadow:0 0 0 3px rgba(107,191,122,.15);}
.chat-messages{flex:1; overflow-y:auto; padding:20px; display:flex; flex-direction:column; gap:18px;}
.chat-msg{display:flex; gap:12px; max-width:80%;}
.chat-msg.own{align-self:flex-end; flex-direction:row-reverse; max-width:80%;}
.chat-avatar{width:34px; height:34px; border-radius:50%; background:linear-gradient(160deg,var(--metal),var(--panel)); flex-shrink:0;}
.chat-bubble{background:var(--panel); border:1px solid var(--panel-line); padding:10px 14px; font-size:13.5px;}
.chat-msg.own .chat-bubble{background:var(--scarlet); color:#ffffff; border-color:var(--scarlet);}
.chat-msg-name{font-size:11.5px; color:var(--text-secondary); margin-bottom:4px; font-weight:600;}
.chat-msg.own .chat-msg-name{text-align:right; color:rgba(255,255,255,.75);}
.chat-msg-time{font-size:10.5px; color:var(--text-secondary); margin-top:4px;}
.chat-input-row{display:flex; gap:12px; padding:16px; border-top:1px solid var(--panel-line);}
.chat-input-row input{flex:1; background:var(--panel); border:1px solid var(--panel-line); color:var(--text); padding:0 16px; height:46px; font-size:14px;}
.chat-input-row button{background:var(--scarlet); color:#ffffff; padding:0 22px; font-size:13px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; min-height:46px;}

/* ---------- RESPONSIVE ---------- */
/* Mobile: <768px — unchanged from before, this is the original
   experience the brief explicitly said must not get worse. */
@media (max-width:767px){
  .container{padding:0 20px;}
  nav.main-nav{display:none;}
  .burger{display:flex;}

  .hero{grid-template-columns:1fr; min-height:auto;}
  .hero-visual{order:1; height:56vh; min-height:380px;}
  .hero-text{order:2; padding:36px 0 42px;}

  .releases-grid{display:flex; overflow-x:auto; gap:16px; padding-bottom:10px; scroll-snap-type:x mandatory;}
  .release-card{min-width:150px; scroll-snap-align:start;}

  .video-block{display:block;}
  .video-side-list{display:none;}

  .articles-list{display:none;}
  .mobile-compact-row{display:flex;}

  .comm-menu{grid-template-columns:1fr;}

  .footer-inner{flex-direction:column; align-items:flex-start;}
  .footer-links{flex-direction:column; gap:12px;}

  .article-layout{grid-template-columns:1fr;}
  .article-toc{display:none;}
  .article-nav-pair{grid-template-columns:1fr;}
  .related-grid{grid-template-columns:1fr;}
  .sitemap-grid{grid-template-columns:1fr; gap:28px;}
  .contacts-grid{grid-template-columns:1fr;}
  .dialog-toolbar{flex-direction:column; align-items:stretch;}
  .directions-grid{grid-template-columns:1fr;}
}

/* Tablet: 768–1023px — its own explicit range now (previously just
   lumped in with mobile under the same max-width:960px query). Nav
   still collapses to the hamburger here — at these widths the full
   label set genuinely doesn't fit at a readable size, a real
   constraint, not a leftover threshold. Two-column grids become
   comfortable starting here where the old single build never allowed
   them room to breathe. */
@media (min-width:768px) and (max-width:1023px){
  nav.main-nav{display:none;}
  .burger{display:flex;}

  .hero{grid-template-columns:1fr; min-height:auto;}
  .hero-visual{order:1; height:52vh; min-height:400px;}
  .hero-text{order:2; padding:44px 0 48px;}

  .releases-grid{grid-template-columns:repeat(2,1fr); gap:20px;}
  .video-block{grid-template-columns:1fr;}
  .video-side-list{display:flex; flex-direction:row; flex-wrap:wrap; gap:20px;}
  .video-side-item{width:calc(50% - 10px);}

  .comm-menu{grid-template-columns:repeat(2,1fr);}
  .directions-grid{grid-template-columns:repeat(2,1fr);}
  .sitemap-grid{grid-template-columns:repeat(2,1fr);}
  .contacts-grid{grid-template-columns:repeat(2,1fr);}
  .related-grid{grid-template-columns:repeat(2,1fr);}
}

/* Small laptop: 1024–1279px */
@media (min-width:1024px){
  .burger{display:none;}
  .mobile-nav{display:none !important;}
  nav.main-nav{display:flex;}

  .releases-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .video-side-list{display:flex; flex-direction:column;}
  .articles-list{display:flex;}
  .mobile-compact-row{display:none;}
}

/* Laptop/desktop: 1280–1599px — releases grid goes to the full 4
   columns the design was originally built for, now that the
   container is actually wide enough for them to look intentional
   rather than cramped. */
@media (min-width:1280px){
  .releases-grid{grid-template-columns:repeat(4,1fr); gap:24px;}
  .article-row{gap:28px; padding:26px 0;}
  .article-thumb{width:108px; height:108px;}
}

/* Wide desktop: 1600–1919px */
@media (min-width:1600px){
  .releases-grid{gap:28px;}
  .article-thumb{width:124px; height:124px;}
}

/* Full HD and larger: 1920px+ — container/typography already scale via
   the custom properties at the top of this file; the only thing that
   needs its own rule here is capping how large card art gets, so
   images don't balloon past a comfortable reading/scanning size just
   because the viewport did. */
@media (min-width:1920px){
  .article-thumb{width:136px; height:136px;}
}

.directions-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:26px;}
.direction-card{
  background:var(--graphite); border:1px solid var(--panel-line); padding:28px;
  display:flex; flex-direction:column; gap:14px; height:100%;
}
.direction-card h3{font-size:16px; font-weight:600;}
.direction-card p{font-size:13.5px; color:var(--text-secondary); flex:1; margin:0;}
.direction-link{
  font-size:12.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--scarlet-soft); display:inline-flex; align-items:center; gap:8px; min-height:44px;
}
.direction-link:hover{color:var(--scarlet);}
.direction-link svg{width:12px; height:12px;}

.principle-block{
  margin-top:60px; padding:44px 32px; background:var(--adamant);
  border:1px solid var(--panel-line); text-align:center;
}
.principle-block h2{font-size:22px; font-weight:600; margin-bottom:18px;}
.principle-block p{font-size:17px; color:var(--text-secondary); line-height:1.7; margin-bottom:30px;}
.principle-buttons{display:flex; gap:16px; justify-content:center; flex-wrap:wrap;}

@media (max-width:480px){
  .header-inner{height:64px;}
}