[html]
<div class="ncnw-wrap ncnw-light" id="ncnwWrap">

  <!-- ─────────── ШАПКА: аватар, номер выпуска, подпись ─────────── -->
  <div class="ncnw-top">
    <div class="ncnw-ava"><img src="https://upforme.ru/uploads/001c/7f/88/2/895437.gif" alt=""></div>
    <div class="ncnw-titles">
      <div class="ncnw-issue"><i></i>news #1</div>
      <div class="ncnw-by">на связи вафелька</div>
    </div>
    <div class="ncnw-date">выпуск<b>18.09</b></div>
  </div>

  <!-- ─────────── ЛИД: вступительный текст ─────────── -->
  <div class="ncnw-lede">
    Мы скучали. Скучали по мистическим сюжетам и загадочным событиям. Скучали по атмосфере учебных заведений с "секретом" и по тихим небольшим городам, в которых уже не поймешь, кампус ли его "спутник" или весь город живет по большей части за счет кампуса? По туманам, ложащимся рано утром в горные долины. По первоцветам, по запаху талого снега. И <b>по тебе</b>. Предшествующая цепочка событий вдохновила нас на собственный сюжет, собственный форум и собственный маленький мир. Для его создания нам не хватает совсем немного. <b>Тебя.</b>
  </div>

  <div class="ncnw-star">★</div>

  <!-- ─────────── ВАЖНОСТИ: копируй <li> для новых пунктов ─────────── -->
  <div class="ncnw-shead"><span>важности</span></div>
  <ol class="ncnw-list">
    <li>Есть опыт администрирования и хочешь присоединиться к сотворению <b>тихой гавани</b> для игроков, куда будем приходить отдыхать душой от сложностей, преследующих нас ИРЛ? Скорее оставляй заявку <a href="https://missingams.rusff.me/viewtopic.php?id=5">здесь</a></li>
    <li>Тебе <b>просто спросить</b>? Подождать в приятной компании? Приглядеть глазком  и не пропустить дату открытия? Пойдем <a href=https://missingams.rusff.me/viewtopic.php?id=9#p16>знакомиться!</a></li>
  </ol>

</div>

<style>
.ncnw-wrap{
    /* база — фолбэк для браузеров без color-mix */
    --ncnw-paper:#f4efeb;
        --ncnw-bg: #dadada;
    --ncnw-panel:#fbf8f6;
    --ncnw-panel2:#f0e9e5;
    --ncnw-line:rgba(60,44,40,.14);
    --ncnw-txt:#5a504c;
    --ncnw-txt-hi:#241e1c;
    --ncnw-dim:#9a908b;
    --ncnw-acc:#b5938c;
    --ncnw-acc-lt:#9d756d;
    --ncnw-acc-hi:#7d564e;

    position:relative;
    font-family:var(--font3, Verdana, sans-serif);
    font-size:11.5px;
    line-height:1.72;
    color:var(--ncnw-txt);
    background:var(--ncnw-bg);
    padding:26px 28px 28px;
    border-radius:12px;
    overflow:hidden;
}
@supports (background: color-mix(in srgb, red 50%, blue)){
  .ncnw-wrap{
    --ncnw-tint:rgb(var(--bgcolor, 244 239 235));
    --ncnw-theme:rgb(var(--acc2, 157 117 109));

    --ncnw-bg:color-mix(in srgb, var(--ncnw-tint) 22%, var(--ncnw-paper));
    --ncnw-panel:color-mix(in srgb, var(--ncnw-tint) 10%, #fdfbfa);
    --ncnw-panel2:color-mix(in srgb, var(--ncnw-tint) 26%, #f2ebe7);
    --ncnw-line:color-mix(in srgb, var(--ncnw-theme) 28%, transparent);

    --ncnw-acc:color-mix(in srgb, var(--ncnw-theme) 55%, #d6bdb7);
    --ncnw-acc-lt:color-mix(in srgb, var(--ncnw-theme) 80%, #8a645c);
    --ncnw-acc-hi:color-mix(in srgb, var(--ncnw-theme) 60%, #5f403a);
  }
}

/* зерно поверх всего блока */
.ncnw-wrap::after{
    content:"";
    position:absolute; inset:-20px;
    pointer-events:none;
    background-image:radial-gradient(rgba(90,66,60,.13) .6px, transparent .6px);
    background-size:3px 3px;
    opacity:.45;
    mix-blend-mode:multiply;
    animation:ncnwGrain .8s steps(5) infinite;
}
@keyframes ncnwGrain{
    0%{ transform:translate(0,0) }      20%{ transform:translate(-2px,1px) }
    40%{ transform:translate(2px,-2px) } 60%{ transform:translate(-1px,-1px) }
    80%{ transform:translate(1px,2px) }  100%{ transform:translate(0,0) }
}

.ncnw-wrap a{ color:var(--ncnw-acc-hi); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .25s ease, color .25s ease; }
.ncnw-wrap a:hover{ color:var(--ncnw-txt-hi); border-bottom-color:var(--ncnw-acc-lt); }
.ncnw-wrap b{ color:var(--ncnw-txt-hi); font-weight:400; }

/* ─── шапка ─── */
.ncnw-top{
    display:flex;
    align-items:center;
    gap:16px;
    padding-bottom:18px;
    border-bottom:1px solid var(--ncnw-line);
}
.ncnw-ava{
    flex:0 0 auto;
    width:58px; height:58px;
    border-radius:50%;
    overflow:hidden;
    box-shadow:0 0 0 1px var(--ncnw-line), 0 0 0 4px var(--ncnw-panel), 0 6px 14px rgba(60,44,40,.14);
}
.ncnw-ava img{
    width:100%; height:100%;
    object-fit:cover;
    display:block;
    filter:grayscale(.45) contrast(1.05) brightness(1.02);
    transition:filter .5s ease, transform .5s ease;
}
.ncnw-ava:hover img{ filter:none; transform:scale(1.06); }

.ncnw-titles{ flex:1 1 auto; min-width:0; }
.ncnw-issue{
    display:flex; align-items:center; gap:10px;
    font-family:var(--font4, Georgia, serif);
    font-size:22px;
    line-height:1.1;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--ncnw-txt-hi);
}
.ncnw-issue i{
    width:7px; height:7px;
    border-radius:50%;
    background:var(--ncnw-acc-lt);
    box-shadow:0 0 8px 2px rgba(157,117,109,.35);
    animation:ncnwPulse 1.8s ease-in-out infinite;
}
@keyframes ncnwPulse{ 0%,100%{ opacity:.4; transform:scale(.8) } 50%{ opacity:1; transform:scale(1.15) } }
.ncnw-by{
    margin-top:6px;
    font-size:8px;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:var(--ncnw-dim);
}
.ncnw-date{
    flex:0 0 auto;
    text-align:right;
    font-family:var(--font4, Georgia, serif);
    font-size:7.5px;
    letter-spacing:.3em;
    text-transform:uppercase;
    color:var(--ncnw-dim);
}
.ncnw-date b{
    display:block;
    margin-top:4px;
    font-size:14px;
    letter-spacing:.06em;
    color:var(--ncnw-acc-hi);
}

/* ─── лид ─── */
.ncnw-lede{
    margin-top:18px;
    padding-left:16px;
    border-left:2px solid var(--ncnw-acc);
    color:#544a46;
    text-align:justify;
}
.ncnw-lede::first-line{ color:var(--ncnw-txt-hi); }

.ncnw-star{
    margin:20px 0 4px;
    text-align:center;
    font-size:15px;
    color:var(--ncnw-acc-lt);
    opacity:.85;
    animation:ncnwPulse 3.6s ease-in-out infinite;
}

/* ─── заголовок секции ─── */
.ncnw-shead{
    display:flex; align-items:center; gap:12px;
    margin:22px 0 14px;
}
.ncnw-shead span{
    font-family:var(--font4, Georgia, serif);
    font-size:9px;
    letter-spacing:.34em;
    text-transform:uppercase;
    color:var(--ncnw-txt-hi);
    white-space:nowrap;
}
.ncnw-shead::before{
    content:""; width:18px; height:1px; background:var(--ncnw-acc-lt);
}
.ncnw-shead::after{
    content:""; flex:1 1 auto; height:1px;
    background:linear-gradient(90deg, var(--ncnw-acc-lt), transparent);
    opacity:.55;
}

/* ─── список важностей ─── */
.ncnw-list{
    list-style:none;
    margin:0; padding:0;
    counter-reset:ncnw;
}
.ncnw-list li{
    counter-increment:ncnw;
    position:relative;
    padding:11px 0 11px 44px;
    border-top:1px solid var(--ncnw-line);
    transition:background .3s ease, padding-left .3s ease;
}
.ncnw-list li:last-child{ border-bottom:1px solid var(--ncnw-line); }
.ncnw-list li::before{
    content:"0" counter(ncnw);
    position:absolute; left:6px; top:10px;
    font-family:var(--font4, Georgia, serif);
    font-size:13px;
    color:rgba(60,44,40,.22);
    transition:color .3s ease;
}
.ncnw-list li:hover{ background:rgba(157,117,109,.07); padding-left:50px; }
.ncnw-list li:hover::before{ color:var(--ncnw-acc-lt); }

@media (max-width:600px){
    .ncnw-wrap{ padding:20px 16px 22px; }
    .ncnw-top{ flex-wrap:wrap; gap:12px; }
    .ncnw-issue{ font-size:18px; }
    .ncnw-date{ text-align:left; }
}
@media (prefers-reduced-motion:reduce){
    .ncnw-wrap::after, .ncnw-issue i, .ncnw-star{ animation:none; }
}
</style>
[/html]