/* Read It To Me — The Listening Journal: editorial magazine theme (light, distinctive) */
:root{
  --paper:#ffffff; --paper2:#ffffff; --ink:#181410; --ink2:#4c453b; --ink3:#8a8073;
  --line:#e2e1de; --line2:#eeedea;
  --amber:#c9760a; --amber2:#e0850a; --amberwash:#f6ead2;
  --navy:#14172a;
  --peach:#f3c9a0; --peach2:#eab27a; --peach-ink:#33281b; --graphite:#2e2c29; --graphite2:#514d47; --chipbg:#f5f5f3;
  --serif:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,system-ui,sans-serif;
  --w:1120px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(560px 560px at 2% 4%, rgba(243,201,160,.34), transparent 70%),
    radial-gradient(520px 520px at 98% 18%, rgba(150,196,178,.24), transparent 70%),
    radial-gradient(480px 480px at 4% 68%, rgba(196,178,224,.22), transparent 70%),
    radial-gradient(540px 540px at 96% 96%, rgba(201,118,10,.14), transparent 70%);
  background-repeat:no-repeat;}
a{color:inherit;text-decoration:none}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px;border-radius:5px}
.wrap{max-width:var(--w);margin:0 auto;padding:0 26px}
img,svg{max-width:100%}

/* masthead */
.mast{border-bottom:2px solid var(--ink);background:var(--paper)}
.mast .wrap{display:flex;align-items:center;justify-content:space-between;height:78px;gap:16px}
.mast .brand{display:flex;align-items:baseline;gap:12px}
.mast .name{font-family:var(--serif);font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--ink)}
.mast .jrnl{font-family:var(--serif);font-style:italic;font-weight:500;font-size:19px;color:var(--amber)}
.mast nav{display:flex;align-items:center;gap:24px}
.mast nav a{font-size:14px;font-weight:500;color:var(--ink2)}
.mast nav a:hover{color:var(--amber)}
.mast .add{background:transparent;color:var(--graphite);border:1.5px solid var(--graphite);padding:8px 14px;border-radius:9px;font-weight:600;font-size:13.5px}
.mast .add:hover{background:var(--chipbg)}
@media(max-width:680px){ .mast nav .hidem{display:none} .mast .jrnl{display:none} }

/* strap line under masthead */
.strap{border-bottom:1px solid var(--line);background:var(--paper2)}
.strap .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}

/* featured hero */
.feature{padding:56px 0 40px;border-bottom:1px solid var(--line)}
.feature .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
@media(max-width:820px){ .feature .wrap{grid-template-columns:1fr;gap:26px} }
.cat{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--graphite2);background:var(--chipbg);border:1px solid var(--line);padding:4px 10px;border-radius:999px}
.feature h1{font-family:var(--serif);font-weight:800;font-size:clamp(34px,5.2vw,56px);line-height:1.03;letter-spacing:-.025em;margin:16px 0 14px}
.feature h1 a:hover{color:var(--amber)}
.feature p{color:var(--ink2);font-size:18px;max-width:46ch;margin-bottom:18px}
.byline{font-size:13.5px;color:var(--ink3)}
.feature .art-img{border:1px solid var(--line);border-radius:18px;background:var(--paper2);display:block;box-shadow:0 18px 40px -24px rgba(60,40,10,.35);width:100%;aspect-ratio:16/10;object-fit:cover}

/* section label */
.seclabel{display:flex;align-items:center;gap:14px;margin:46px 0 22px}
.seclabel h2{font-family:var(--serif);font-weight:600;font-size:15px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);white-space:nowrap}
.seclabel .rule{height:1px;background:var(--line);flex:1}

/* post grid */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;padding-bottom:64px}
@media(max-width:820px){ .grid{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .grid{grid-template-columns:1fr} }
.card{display:flex;flex-direction:column}
.card .thumb{border:1px solid var(--line);border-radius:14px;background:var(--paper2);margin-bottom:14px;display:block;aspect-ratio:16/10;overflow:hidden}
.card .thumb svg{width:100%;height:100%;display:block}
.card .thumb img{width:100%;height:100%;display:block;object-fit:cover}
.card h3{font-family:var(--serif);font-weight:600;font-size:22px;line-height:1.16;letter-spacing:-.01em;margin:8px 0 8px}
.card h3 a:hover{color:var(--amber)}
.card p{color:var(--ink2);font-size:15px;margin-bottom:10px}
.card .meta{font-size:12.5px;color:var(--ink3);margin-top:auto}

/* article page */
.art{max-width:720px;margin:0 auto;padding:52px 26px 10px}
.art .cat{margin-bottom:16px}
.art h1{font-family:var(--serif);font-weight:800;font-size:clamp(32px,5vw,50px);line-height:1.05;letter-spacing:-.02em;margin:10px 0 14px}
.art .byline{color:var(--ink3);font-size:13.5px;margin-bottom:30px}
.art .hero-img{width:100%;height:auto;aspect-ratio:1080/607;object-fit:cover;display:block;border:1px solid var(--line);border-radius:18px;background:var(--paper2);margin-bottom:34px;box-shadow:0 18px 40px -26px rgba(60,40,10,.3)}
.art .lead{font-family:var(--serif);font-size:22px;line-height:1.5;color:var(--ink);border-left:3px solid var(--amber);padding-left:20px;margin:0 0 26px}
.art p{font-size:18px;line-height:1.7;color:var(--ink2);margin:0 0 20px}
.art h2{font-family:var(--serif);font-weight:700;font-size:28px;letter-spacing:-.01em;margin:40px 0 12px;color:var(--ink)}
.art h3{font-size:19px;font-weight:600;margin:26px 0 6px;color:var(--ink)}
.art strong{color:var(--ink)}
.art a{color:var(--amber);text-decoration:underline;text-underline-offset:2px}
.art ul{font-size:17px;line-height:1.65;color:var(--ink2);margin:0 0 20px;padding-left:22px}
.art li{margin-bottom:7px}
.art .cta{display:inline-flex;align-items:center;gap:9px;background:transparent;border:1.5px solid var(--graphite);color:var(--graphite);font-weight:600;padding:13px 22px;border-radius:12px;margin:10px 0;text-decoration:none}
.art .cta:hover{background:var(--chipbg)}
.art .src{color:var(--ink3);font-size:13px;line-height:1.55}
.art .src a{color:var(--ink3)}

/* closing */
.endcta{margin:56px 0 0;border-top:1px solid var(--line);background:var(--paper2)}
.endcta .wrap{max-width:720px;text-align:center;padding:52px 26px}
.endcta h2{font-family:var(--serif);font-weight:800;font-size:30px;letter-spacing:-.02em;margin-bottom:10px}
.endcta p{color:var(--ink2);font-size:17px;margin-bottom:22px}
.endcta .cta{display:inline-flex;align-items:center;gap:9px;background:transparent;border:1.5px solid var(--graphite);color:var(--graphite);font-weight:700;padding:14px 24px;border-radius:12px}
.endcta .cta:hover{background:var(--chipbg)}

/* footer */
.foot{border-top:2px solid var(--ink);padding:30px 0 46px;margin-top:0}
.foot .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.foot .name{font-family:var(--serif);font-weight:800;font-size:18px}
.foot-links{display:flex;gap:20px;font-size:14px;flex-wrap:wrap}
.foot-links a{color:var(--ink2)} .foot-links a:hover{color:var(--amber)}
.foot .copy{color:var(--ink3);font-size:13px}

/* ================= ЕДИНАЯ НАВИГАЦИЯ, светлая тема (2026-07-15) ================= */
header{border-bottom:2px solid var(--ink);background:var(--paper);position:sticky;top:0;z-index:50}
header .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px;
  max-width:none;padding-left:max(24px,calc((100vw - 1560px)/2));padding-right:max(24px,calc((100vw - 1560px)/2))}
header nav{margin-left:auto}
.mark{display:inline-flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:800;letter-spacing:-.01em;white-space:nowrap;flex:none}
.mark .logo{height:26px;width:auto;display:block}
.mark .word{font-size:18px;color:var(--ink);font-weight:700}

nav{display:flex;align-items:center;gap:2px}
.nav-item{position:relative}
.nav-link,.nav-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 11px;border-radius:7px;
  color:var(--ink2);font-size:14px;font-weight:500;background:none;border:0;cursor:pointer;
  font-family:var(--sans);white-space:nowrap}
.nav-link:hover,.nav-btn:hover{color:var(--ink);background:var(--chipbg)}
.nav-btn svg{width:11px;height:11px;opacity:.55;transition:transform .15s}
.nav-item:hover .nav-btn svg,.nav-item:focus-within .nav-btn svg{transform:rotate(180deg)}
.dd{position:absolute;top:calc(100% + 6px);left:0;min-width:250px;padding:8px;border-radius:10px;
  background:#fff;border:1px solid var(--line);box-shadow:0 14px 38px rgba(24,20,16,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:60}
.nav-item:hover .dd,.nav-item:focus-within .dd{opacity:1;visibility:visible;transform:none}
.dd a{display:block;padding:9px 11px;border-radius:7px;color:var(--ink);font-size:14px;font-weight:600}
.dd a:hover{background:var(--chipbg)}
.dd a span{display:block;color:var(--ink3);font-size:12px;font-weight:400;margin-top:2px}

.btn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:14px;background:transparent;
  color:var(--graphite);border:1.5px solid var(--graphite);padding:9px 15px;border-radius:9px;transition:transform .1s ease, background .15s}
.btn:hover{background:var(--chipbg);transform:translateY(-1px)}
.btn svg{width:15px;height:15px}
.btn img{width:16px;height:16px;display:block}
.btn svg path,.btn svg circle{stroke:var(--graphite)}

/* подвал — карта сайта, светлая */
footer{border-top:2px solid var(--ink);background:var(--paper);margin-top:60px;padding:44px 0 30px}
.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:30px;align-items:start}
.foot-brand p{color:var(--ink3);font-size:13px;margin:12px 0 0;max-width:230px;line-height:1.5}
.foot-col h4{color:var(--ink);font-size:12px;letter-spacing:.08em;text-transform:uppercase;margin:0 0 12px;font-weight:700}
.foot-col a{display:block;color:var(--ink2);font-size:14px;margin-bottom:9px}
.foot-col a:hover{color:var(--amber);text-decoration:underline}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:32px;padding-top:18px;border-top:1px solid var(--line)}
.foot-bottom .copy{color:var(--ink3);font-size:12.5px}
@media(max-width:900px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:24px}
  .dd{display:none}
  nav .nav-link,nav .nav-item{display:none}
}

/* ---- фоновый декор: 4 больших фигуры на всю статью (образец — bear.app) ---- */
/* Одна круглая, одна — клякса с "рукавом" (splash), две — облакоподобные бугристые формы. Крупные, яркие, текст поверх них — это нормально. */
html{overflow-x:clip}
body{position:relative;overflow-x:clip}
body>*{position:relative;z-index:1}
/* 🔴 шапка обязана остаться ВЫШЕ контента: правило body>* выше по файлу имеет ту же специфичность,
   что и header{z-index:50}, и перебивало его — выпадающее меню уходило под картинки статей. */
header{z-index:50}
/* статья — свой слой поверх main::before/after, иначе текст красится ПОД фигурой */
.art{position:relative;z-index:1}
/* индекс журнала: его блоки лежат прямо в main, без .art — без своего слоя текст и карточки
   красились ПОД фигурами (поймано Serghei 20.07) */
main>section,main>.wrap{position:relative;z-index:1}
body::before,body::after,main::before,main::after{
  content:"";position:absolute;display:block;pointer-events:none;z-index:0}
/* Четыре разные формы, ни одна не повторяет другую: 10 · 9 · 12 · 7 вершин, разный разброс радиусов.
   Круга больше нет — жёлтая стала растёкшейся лужей и увеличена втрое. Формы те же, что на главной. */
/* 1. ЛУЖА — жёлтая, ×3, уходит за левый край */
body::before{width:505px;height:490px;top:40px;left:-180px;transform:scale(3);
  clip-path:path('M408.0 229.4C399.2 261.5 380.9 303.6 358.1 322.6C335.3 341.7 305.6 322.4 271.0 343.8C236.5 365.2 187.4 449.3 150.9 451.1C114.4 452.8 68.9 386.0 52.0 354.3C35.1 322.5 39.0 289.6 49.7 260.4C60.4 231.1 92.0 219.9 116.1 178.6C140.3 137.3 170.3 17.5 194.7 12.7C219.0 7.9 226.1 130.3 262.1 149.9C298.0 169.4 386.1 116.6 410.4 129.9C434.7 143.1 416.7 197.3 408.0 229.4Z');
  background:#e3bd63;opacity:.85}
/* 2. SPLASH — сиреневая, с длинным рукавом */
main::before{width:430px;height:389px;top:26%;right:-260px;
  clip-path:path('M305.8 202.2C311.4 232.3 349.2 302.9 343.1 323.7C337.0 344.5 307.0 320.9 269.3 327.1C231.7 333.4 139.3 377.3 117.2 361.1C95.0 344.9 133.5 264.6 136.5 230.0C139.5 195.3 127.6 172.6 135.2 153.2C142.8 133.9 165.0 121.0 182.0 113.9C199.1 106.8 216.1 105.5 237.4 110.4C258.7 115.4 298.4 128.1 309.8 143.4C321.2 158.7 300.3 172.2 305.8 202.2Z');
  background:#b89bd6;opacity:.85;transform:scale(3.8) rotate(-12deg)}
/* 3. ОБЛАКО — синее, много мелких выступов */
main::after{width:468px;height:354px;top:58%;left:-300px;
  clip-path:path('M428.8 169.1C428.5 199.4 406.6 229.1 386.2 255.5C365.9 281.9 346.3 314.9 306.5 327.5C266.7 340.0 185.9 342.5 147.5 331.0C109.1 319.5 99.6 283.2 76.1 258.7C52.6 234.2 6.7 215.0 6.6 184.2C6.5 153.4 44.4 96.4 75.5 74.0C106.6 51.5 153.4 58.5 193.0 49.5C232.7 40.5 280.8 15.8 313.4 19.9C345.9 23.9 369.2 48.9 388.4 73.8C407.7 98.6 429.2 138.8 428.8 169.1Z');
  background:#7fabc4;opacity:.82;transform:scale(3.4) rotate(8deg)}
/* 4. ОБЛАКО 2 — зелёное, 7 вершин, крупные рваные лопасти */
body::after{width:432px;height:367px;top:70%;right:-270px;
  clip-path:path('M345.3 199.7C358.2 226.1 368.5 279.1 341.4 287.9C314.2 296.6 226.5 264.8 182.3 252.2C138.0 239.7 88.7 235.2 75.9 212.5C63.0 189.9 88.7 150.1 105.0 116.3C121.3 82.4 147.2 7.5 173.6 9.7C200.0 11.8 235.0 97.7 263.6 129.4C292.3 161.1 332.3 173.3 345.3 199.7Z');
  background:#8fae7f;opacity:.8;transform:scale(3.3) rotate(-6deg)}
main{position:relative}
/* Индекс журнала короче статьи, и на нём сиреневая с зелёной налезали друг на друга (Serghei 20.07).
   Четыре фигуры такого размера в такую высоту не помещаются — на индексе оставляем три. */
body.idx::after{display:none}
@media(max-width:860px){body::after,main::before,main::after{opacity:.55;transform:scale(1.2)}
  body::before{opacity:.55;transform:scale(1.4);left:-120px}}

/* ---- переключатель языков ---- */
.lang-item{position:relative;margin-left:10px;padding-left:12px}
.lang-item::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:1px;height:20px;background:var(--line)}
.lang-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 12px;border-radius:8px;border:0;
  background:none;color:var(--ink2,#5c5646);font-size:14px;font-weight:500;font-family:var(--sans);cursor:pointer;white-space:nowrap}
.lang-btn:hover{background:rgba(23,21,15,.05)}
.lang-btn svg{width:14px;height:14px;opacity:.65}
.lang-dd{position:absolute;top:calc(100% + 6px);right:0;min-width:172px;padding:7px;border-radius:12px;
  background:#fff;border:1px solid var(--line);box-shadow:0 14px 40px rgba(23,21,15,.16);
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:60;display:grid;grid-template-columns:1fr 1fr;gap:2px}
.lang-item:hover .lang-dd,.lang-item:focus-within .lang-dd{opacity:1;visibility:visible;transform:none}
.lang-dd a{display:block;padding:8px 10px;border-radius:8px;font-size:13.5px;font-weight:500}
.lang-dd a:hover{background:var(--chipbg)}
.lang-dd a[aria-current]{background:var(--chipbg);font-weight:700}
@media(max-width:640px){ .lang-item{display:none} }

.nav-ic{width:15px;height:15px;flex:none;opacity:.7;color:var(--amber,#c1631d)}
.nav-link:hover .nav-ic,.nav-btn:hover .nav-ic{opacity:1}