/* danishe.sbs — «Закат». Все цвета сняты с фотографии: небо #c9bfb0, горизонт #a8947d,
   загар #73462c, тень #2f221f. Фон — светлое небо, текст — тень, акцент — загар поглубже. */
:root{
  --paper:#f1ece5; --ink:#231d1a; --mut:#6e655b; --line:#d8cdbf; --acc:#8a4e2c;
  --sky-top:#b9b7af; --sky:#c9bfb0; --sky-low:#d6cabb;
  --pad:clamp(16px,4vw,48px);
  --serif:"Spectral",Georgia,"Times New Roman",serif;
  --sans:"Golos Text",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.65 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video{max-width:100%}
a{color:inherit}
a:focus-visible,.spoiler:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
[id]{scroll-margin-top:24px}
.wrap{max-width:1200px;margin:0 auto;padding-inline:var(--pad)}

/* ── верхняя строка ── */
.bar{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem 1rem;flex-wrap:wrap;max-width:1200px;margin:0 auto;padding:1.4rem var(--pad)}
.home .bar{position:absolute;top:0;left:0;right:0;z-index:2;max-width:none}
.logo{font:400 1.2rem/1 var(--serif);text-decoration:none}
.nav{display:flex;flex-wrap:wrap;gap:.4rem 1.5rem;font:500 .84rem/1.2 var(--sans)}
.nav a{text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{text-decoration:underline;text-decoration-color:var(--acc);text-underline-offset:5px}

/* ── главная: фото во всю ширину, текст — в небе справа ── */
.hero{position:relative}
.hero-photo{position:relative;background:var(--sky)}
.hero-photo img{display:block;width:100%;height:auto;aspect-ratio:2/1;max-height:82vh;object-fit:cover;object-position:30% 30%}
.hero-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40%;pointer-events:none;
  background:linear-gradient(to bottom,rgba(241,236,229,0),rgba(241,236,229,.5) 45%,rgba(241,236,229,.88) 75%,var(--paper))}
.intro{position:absolute;z-index:2;left:61%;right:var(--pad);top:47%;transform:translateY(-50%)}
.kicker{margin:0 0 1rem;font:500 .74rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase}
.hero h1{margin:0;font:300 clamp(2.6rem,5vw,5rem)/1 var(--serif);letter-spacing:-.02em}
.lede{margin:1.2rem 0 0;max-width:22em;font:400 clamp(1.05rem,1.45vw,1.3rem)/1.45 var(--serif)}

/* ── секции: подпись на широком левом поле, содержимое справа ── */
.sec{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);padding-block:clamp(2.5rem,6vw,4.5rem);border-top:1px solid var(--line)}
main>.sec:first-child{border-top:0;padding-top:clamp(1rem,3vw,2rem)}
.sec-tight{padding-block:0 clamp(1.5rem,3vw,2rem);border-top:0}
.label{margin:0;text-align:right;font:italic 400 1.45rem/1.25 var(--serif);color:var(--acc)}
.about p{margin:0 0 1rem;max-width:36em}
.about .big{font:400 clamp(1.25rem,2vw,1.5rem)/1.5 var(--serif)}
.stack{margin-top:1.6rem!important;font-size:.84rem;color:var(--mut)}

/* канал и рубрики */
.channel{margin-bottom:2rem}
.channel p{margin:0 0 .8rem;max-width:36em}
.channel-name{font:400 clamp(1.5rem,2.6vw,2rem)/1.2 var(--serif)}
.channel-meta{font-size:.86rem;color:var(--mut)}
.channel-meta a{color:var(--acc);text-underline-offset:4px}
.rubrics{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2rem;border-top:1px solid var(--line)}
.rubrics a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem 1rem;padding:.9rem 0;border-bottom:1px solid var(--line);text-decoration:none}
.r-name{font:400 1.3rem/1.25 var(--serif);transition:color .2s}
.r-count{font-size:.8rem;color:var(--mut);align-self:center;font-variant-numeric:tabular-nums}
.r-desc{grid-column:1/-1;font-size:.86rem;color:var(--mut)}
.rubrics a:hover .r-name{color:var(--acc)}

/* списки постов */
.entries{list-style:none;margin:0;padding:0}
.entries li+li{border-top:1px solid var(--line)}
.entry{display:flex;flex-direction:column;gap:.25rem;padding-block:1rem;text-decoration:none}
.entries li:first-child .entry{padding-top:.1rem}
.e-meta{font-size:.8rem;color:var(--mut)}
.e-title{font:400 clamp(1.2rem,1.9vw,1.45rem)/1.25 var(--serif);text-wrap:balance;transition:color .2s}
.e-ex{margin:.2rem 0 0;max-width:38em;font-size:.95rem;color:#4a423b}
.entry:hover .e-title{color:var(--acc)}
.entry.has-thumb{display:grid;grid-template-columns:minmax(0,1fr) 72px;column-gap:1.25rem;row-gap:.25rem;align-items:start}
.entry.has-thumb>:not(.e-thumb){grid-column:1}
.e-thumb{grid-column:2;grid-row:1/span 3;width:72px;height:72px;object-fit:cover;border-radius:2px;background:var(--line)}
.score{color:var(--acc);font-variant-numeric:tabular-nums}
.more{margin:1.2rem 0 0}
.more a{color:var(--acc);text-underline-offset:4px}
.month .label{font-size:1.25rem}

/* проекты */
.projects{list-style:none;margin:0;padding:0}
.projects li+li{border-top:1px solid var(--line)}
.projects a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.35rem 1.5rem;padding-block:1.3rem;text-decoration:none}
.projects li:first-child a{padding-top:.1rem}
.projects li:last-child a{padding-bottom:0}
.projects h3{margin:0;font:400 clamp(1.4rem,2.3vw,1.8rem)/1.15 var(--serif);transition:color .2s}
.arr{grid-column:2;grid-row:1;align-self:center;font-size:1.2rem;color:var(--acc);transition:transform .25s ease-out}
.projects p{grid-column:1/-1;margin:0;max-width:38em}
.projects .meta{grid-column:1/-1;font-size:.8rem;color:var(--mut)}
.projects a:hover h3{color:var(--acc)}
.projects a:hover .arr{transform:translateX(5px)}

/* связь */
.links{margin:0}
.links div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1rem;align-items:baseline;padding-block:.75rem;border-bottom:1px solid var(--line)}
.links div:first-child{padding-top:0}
.links dt{font:500 .72rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.links dd{margin:0;min-width:0}
.links a{font:400 1.3rem/1.3 var(--serif);text-decoration:underline;text-decoration-color:rgba(138,78,44,.4);text-decoration-thickness:1px;text-underline-offset:5px;overflow-wrap:anywhere}
.links a:hover{color:var(--acc);text-decoration-color:var(--acc)}

/* ── внутренние страницы: полоса неба вместо фото ── */
.band{background:linear-gradient(to bottom,var(--sky-top) 0%,var(--sky) 38%,var(--sky-low) 68%,var(--paper) 100%)}
.band-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(1.5rem,4vw,3.5rem);padding-block:clamp(1.5rem,5vw,3.5rem) clamp(2rem,5vw,3.5rem)}
.crumbs{margin:0;text-align:right;align-self:end;font:italic 400 1.1rem/1.4 var(--serif);color:var(--mut)}
.crumbs a{color:var(--acc);text-decoration:none}
.crumbs a:hover{text-decoration:underline;text-underline-offset:4px}
.band h1{margin:0;font:300 clamp(2rem,4.4vw,3.6rem)/1.08 var(--serif);letter-spacing:-.015em;text-wrap:balance}
.band-lede{margin:.9rem 0 0;max-width:34em;color:#4a423b}

.chips{display:flex;flex-wrap:wrap;gap:.3rem 1.3rem}
.chip{font:500 .9rem/1.2 var(--sans);color:var(--mut);text-decoration:none;padding:.35rem 0;border-bottom:1.5px solid transparent}
.chip b{font-weight:400;font-size:.76em;margin-left:.3em;font-variant-numeric:tabular-nums}
.chip:hover{color:var(--ink)}
.chip.is-on{color:var(--ink);border-bottom-color:var(--acc)}

/* пост */
.post{border-top:0;padding-top:0}
.post-side{display:flex;flex-direction:column;align-items:flex-end;gap:.35rem;text-align:right;font-size:.88rem;color:var(--mut)}
.post-side a{color:var(--acc);text-decoration:none}
.post-side a:hover{text-decoration:underline;text-underline-offset:4px}
.post-side time{font:italic 400 1.15rem/1.3 var(--serif);color:var(--ink)}
.post-main{min-width:0}
.post-lead{margin:0 0 1.5rem;max-width:34em;font:italic 400 clamp(1.2rem,2vw,1.4rem)/1.45 var(--serif)}
.post-body{max-width:38em;font-size:1.06rem;line-height:1.72;overflow-wrap:break-word}
.post-body p{margin:0 0 1.05em}
.post-body a{color:var(--acc);text-decoration-color:rgba(138,78,44,.45);text-underline-offset:3px}
.post-body strong{font-weight:600}
.quote{font-style:italic}
.spoiler{background:var(--ink);color:transparent;border-radius:2px;cursor:pointer;transition:color .2s,background .2s}
.spoiler:hover,.spoiler:focus{background:transparent;color:inherit}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;max-width:48rem;margin:0 0 1.8rem}
.gallery.one{display:block}
.m-photo{display:block;background:var(--line);cursor:zoom-in}
.m-photo img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:1}
.gallery.one .m-photo{display:inline-block;max-width:100%;background:none}
.gallery.one .m-photo img{width:auto;height:auto;max-width:100%;max-height:36rem;aspect-ratio:auto;object-fit:contain}

/* просмотр фото */
.lb{padding:0;margin:0;border:0;width:100vw;height:100vh;max-width:none;max-height:none;background:transparent;overflow:hidden}
.lb::backdrop{background:rgba(35,29,26,.94)}
.lb img{position:absolute;inset:0;margin:auto;max-width:94vw;max-height:86vh;object-fit:contain}
.lb button{position:absolute;padding:.4rem 1rem;border:0;background:none;color:var(--paper);font:300 2.6rem/1 var(--serif);cursor:pointer;opacity:.85}
.lb button:hover{opacity:1}
.lb-x{top:.4rem;right:.4rem}
.lb-prev,.lb-next{top:50%;transform:translateY(-50%)}
.lb-prev{left:.4rem}
.lb-next{right:.4rem}
.lb-n{position:absolute;left:0;right:0;bottom:1.1rem;text-align:center;font:500 .78rem/1 var(--sans);letter-spacing:.12em;color:var(--line)}
.lb.single .lb-prev,.lb.single .lb-next,.lb.single .lb-n{display:none}
.m-video{display:block;width:100%;background:#000;aspect-ratio:16/9}
.media-note{margin:1.8rem 0 0;max-width:38em;padding:.9rem 1.1rem;border:1px solid var(--line);font-size:.94rem;color:#4a423b}
.media-note a{color:var(--acc);text-underline-offset:3px}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem;padding-top:1.4rem;border-top:1px solid var(--line)}
.pn{display:flex;flex-direction:column;gap:.3rem;text-decoration:none;font:400 1.1rem/1.3 var(--serif)}
.pn span{font:500 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.pn.next{text-align:right}
.pn:hover{color:var(--acc)}

.r-aside{margin:.9rem 0 0;font-size:.9rem;color:var(--mut)}
.r-aside a{color:var(--acc);text-underline-offset:4px}
.side-topic small{display:block;font:500 .66rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.side-topic{margin-top:.2rem;font:400 1rem/1.3 var(--serif)}

/* ── аниме и кино ── */
.w-tools{display:flex;flex-direction:column;gap:.8rem}
.w-tools[hidden],.card[hidden],[data-group][hidden],.w-empty[hidden]{display:none}
.w-q{width:100%;max-width:34rem;padding:.7rem .9rem;border:1px solid var(--line);border-radius:2px;background:#faf7f3;color:var(--ink);font:400 1rem/1.3 var(--sans);-webkit-appearance:none;appearance:none}
.w-q::placeholder{color:#968b7f}
.w-q:focus{outline:2px solid var(--acc);outline-offset:0;border-color:transparent}
.w-row{display:flex;flex-wrap:wrap;align-items:center;gap:.3rem 1.8rem}
button.chip{background:none;border:0;border-bottom:1.5px solid transparent;border-radius:0;cursor:pointer}
button.chip.is-on{border-bottom-color:var(--acc)}
.w-sort-label{font-size:.8rem;color:var(--mut);margin-right:-.5rem}
.w-check{display:inline-flex;align-items:center;gap:.45rem;padding:.35rem 0;font:500 .9rem/1.2 var(--sans);color:var(--mut);cursor:pointer}
.w-check b{font-weight:400;font-size:.76em;font-variant-numeric:tabular-nums}
.w-check input{width:1rem;height:1rem;margin:0;accent-color:var(--acc)}
.label small{display:block;margin-top:.45rem;font:400 .8rem/1.4 var(--sans);color:var(--mut)}
.shelf{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(8.2rem,1fr));gap:1.7rem 1.1rem}
.card a{display:flex;flex-direction:column;gap:.2rem;text-decoration:none}
.c-poster{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;margin-bottom:.5rem;border-radius:2px;background:var(--line);
  transition:transform .25s ease-out,box-shadow .25s ease-out}
.no-poster{background:linear-gradient(to bottom,var(--sky-top),var(--sky) 55%,#a8947d)}
.c-name{font:400 1.02rem/1.25 var(--serif);overflow-wrap:break-word;transition:color .2s}
.c-meta{font-size:.76rem;line-height:1.4;color:var(--mut)}
.c-posts{font:500 .7rem/1.3 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--acc)}
.card a:hover .c-name{color:var(--acc)}
.card a:hover .c-poster{transform:translateY(-3px);box-shadow:0 12px 22px -14px rgba(35,29,26,.55)}
.w-empty{margin:0;padding:2rem 0 3rem;text-align:center;font:italic 400 1.2rem/1.4 var(--serif);color:var(--mut)}

/* страница тайтла, фильма, серии */
.topic{border-top:0;padding-top:0}
.topic-poster{display:flex;justify-content:flex-end;align-items:flex-start}
.topic-img{display:block;width:min(100%,15rem);height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:2px;box-shadow:0 20px 40px -26px rgba(35,29,26,.7)}
.t-caption{margin:0 0 .7rem;font:500 .72rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.titles{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.t-row{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:1rem;align-items:start;padding:.85rem 0;border-bottom:1px solid var(--line)}
.t-poster{display:block;width:44px;height:62px;object-fit:cover;border-radius:2px;background:var(--line)}
.t-name{display:block;font:400 1.15rem/1.3 var(--serif)}
.t-meta{display:block;margin-top:.15rem;font-size:.8rem;color:var(--mut)}
.t-meta a{color:var(--mut);text-underline-offset:3px}
.t-meta a:hover{color:var(--acc)}
.t-posts{display:flex;flex-direction:column;gap:.15rem;margin-top:.4rem;font-size:.92rem}
.t-posts a{color:var(--acc);text-underline-offset:3px}
.t-score{font:400 1.55rem/1 var(--serif);color:var(--acc);font-variant-numeric:tabular-nums}
.t-score.is-none{color:var(--line)}
.t-none{margin:0;color:var(--mut)}
.facts{margin:0;align-self:start}
.facts div{display:grid;grid-template-columns:9rem minmax(0,1fr);gap:1rem;align-items:baseline;padding-block:.75rem;border-bottom:1px solid var(--line)}
.facts div:first-child{padding-top:0}
.facts dt{font:500 .72rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.facts dd{margin:0;font:400 1.25rem/1.3 var(--serif)}

/* серия на странице поста */
.series{max-width:38em;margin-top:2.6rem;border:1px solid var(--line);border-radius:2px;background:#f6f1ea}
.series+.series{margin-top:1.2rem}
.series-head{display:flex;align-items:center;gap:1rem;padding:.95rem 1.2rem;border-bottom:1px solid var(--line);text-decoration:none}
.series-head>span:not(.arr){flex:1;min-width:0}
.series-poster{flex:none;display:block;width:40px;height:60px;object-fit:cover;border-radius:2px}
.series-kicker{display:block;font:500 .68rem/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.series-name{display:block;font:400 1.3rem/1.25 var(--serif);transition:color .2s}
.series-head .arr{grid-column:auto;grid-row:auto}
.series-head:hover .series-name{color:var(--acc)}
.series-head:hover .arr{transform:translateX(5px)}
.series-list{list-style:none;margin:0;padding:.3rem 1.2rem .6rem}
.series-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.1rem 1rem;align-items:baseline;padding:.6rem 0;border-bottom:1px dashed var(--line)}
.series-list li:last-child{border-bottom:0}
.s-name{font:400 1.02rem/1.35 var(--serif)}
.s-meta{font-size:.78rem;color:var(--mut);text-align:right}
.series-list li>a,.series-list li>.s-here{grid-column:1/-1;font-size:.9rem}
.series-list a{color:var(--acc);text-underline-offset:3px}
.s-here{font:500 .72rem/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.series-list .s-name .s-here{font-size:.72rem}
.series-list li.is-muted .s-name{color:var(--mut)}
.series-list li.is-current{position:relative}
.series-list li.is-current::before{content:"";position:absolute;left:-1.2rem;top:.55rem;bottom:.55rem;width:2px;background:var(--acc)}

/* ── подвал с палитрой ── */
.foot{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:1rem clamp(1.5rem,4vw,3.5rem);margin-top:clamp(2rem,5vw,3rem);padding-block:2rem 2.5rem;border-top:1px solid var(--line);font-size:.8rem;color:var(--mut)}
.foot-label{margin:0;text-align:right;font:italic 400 1rem/1.4 var(--serif)}
.swatches{display:flex;flex-wrap:wrap;gap:.8rem 1.6rem;list-style:none;margin:0;padding:0}
.swatches li{display:flex;align-items:center;gap:.55rem}
.swatches i{flex:none;width:22px;height:22px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(35,29,26,.14)}
.swatches span{display:flex;flex-direction:column;line-height:1.3}
.swatches b{font-weight:500;color:var(--ink)}
.swatches code{font:400 .72rem/1.3 var(--mono)}
.foot-copy{grid-column:2;margin:1rem 0 0}
.foot-copy a{text-underline-offset:3px}

/* ── телефон ── */
@media (max-width:899px){
  /* Меню остаётся на фотографии, но на узком экране оно переносится на вторую
     строку и попадало на тёмные волосы. Поэтому здесь: строчки теснее, кадр
     сдвинут ниже (голова уходит из-под меню) и сверху снимок затухает в фон —
     тем же приёмом, что и снизу. */
  .nav{gap:.3rem 1.1rem;font-size:.8rem}
  .hero-photo img{aspect-ratio:4/5;max-height:none;object-position:50% 45%}
  .hero-photo::before{content:"";position:absolute;left:0;right:0;top:0;height:22%;z-index:1;pointer-events:none;
    background:linear-gradient(to bottom,rgba(241,236,229,.92),rgba(241,236,229,.62) 45%,rgba(241,236,229,0))}
  .hero-photo::after{height:44%}
  .intro{position:relative;left:auto;right:auto;top:auto;transform:none;margin-top:-4.5rem;padding-inline:var(--pad)}
  .sec,.band-in,.foot{grid-template-columns:1fr}
  .sec-tight>span:empty{display:none}
  .label,.crumbs,.foot-label{text-align:left}
  .post-side{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:.3rem 1rem;text-align:left}
  .foot-copy{grid-column:1}
  .rubrics{grid-template-columns:1fr}
  .side-topic{margin-top:0}
  .side-topic small{display:inline;margin-right:.35em}
  .topic-poster{justify-content:flex-start}
  .topic-img{width:min(60%,12rem)}
}
@media (max-width:520px){
  .links div,.facts div{grid-template-columns:1fr;gap:.2rem}
  .post-nav{grid-template-columns:1fr}
  .pn.next{text-align:left}
  .shelf{grid-template-columns:repeat(auto-fill,minmax(6.6rem,1fr));gap:1.4rem .8rem}
  .c-name{font-size:.95rem}
  .series-head,.series-list{padding-inline:.9rem}
  .series-list li.is-current::before{left:-.9rem}
}
@media (prefers-reduced-motion:reduce){.arr,.e-title,.r-name,.projects h3,.spoiler,.c-poster,.c-name,.series-name{transition:none}}