/* === Сверхтех · витрина сказок ============================================ */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@600;800&family=Literata:ital,wght@0,400;0,600;1,400&display=swap');

:root{
  --ink:#0b1026; --ink-2:#131a3a; --paper:#f7f4ee;
  --frost:#8fd3ff; --aurora:#6ef2c0; --gold:#ffc861; --rose:#ff8fb1;
  --text:#e8ecff; --muted:#9aa4cc;
  --radius:18px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Literata',Georgia,serif; color:var(--text); background:var(--ink);
  background-image:
    radial-gradient(900px 500px at 12% -8%, rgba(110,242,192,.18), transparent 62%),
    radial-gradient(760px 520px at 88% 4%, rgba(143,211,255,.20), transparent 60%),
    radial-gradient(600px 400px at 50% 100%, rgba(255,143,177,.10), transparent 70%);
  background-attachment:fixed; min-height:100vh; line-height:1.65;
}
/* снежинки — чистый CSS, без картинок */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; opacity:.5;
  background-image:
    radial-gradient(2px 2px at 20% 30%, #fff, transparent),
    radial-gradient(1px 1px at 70% 12%, #fff, transparent),
    radial-gradient(2px 2px at 44% 78%, #cfe8ff, transparent),
    radial-gradient(1px 1px at 88% 62%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 10% 84%, #cfe8ff, transparent);
  background-size:520px 520px; animation:snow 34s linear infinite;
}
@keyframes snow{to{background-position:0 520px}}
@media (prefers-reduced-motion:reduce){body::before{animation:none}}

.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
header.top{padding:64px 0 40px;text-align:center;position:relative}
.brand{
  font-family:'Unbounded',system-ui,sans-serif;font-weight:800;
  font-size:clamp(2.4rem,6vw,4.2rem);letter-spacing:-.02em;line-height:1.05;
  background:linear-gradient(100deg,var(--frost),var(--aurora) 45%,var(--gold));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.tagline{color:var(--muted);margin-top:14px;font-size:1.08rem}
.tagline b{color:var(--gold);font-weight:600}

.grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));padding-bottom:70px}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,.03));
  border:1px solid rgba(143,211,255,.20); border-radius:var(--radius);
  overflow:hidden; text-decoration:none; color:inherit; display:flex; flex-direction:column;
  transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.card:hover{transform:translateY(-4px);border-color:rgba(110,242,192,.55);
  box-shadow:0 18px 40px -18px rgba(0,0,0,.75)}
.card .cover{aspect-ratio:16/9;background:#1a2145 center/cover no-repeat;display:block}
.card .cover.empty{
  background:
    radial-gradient(320px 160px at 30% 20%, rgba(110,242,192,.28), transparent 70%),
    radial-gradient(320px 180px at 75% 80%, rgba(255,200,97,.22), transparent 70%), #161d3f;
}
.card .body{padding:18px 20px 22px}
.card h2{font-family:'Unbounded',sans-serif;font-size:1.14rem;font-weight:600;line-height:1.3;margin-bottom:8px}
.meta{color:var(--muted);font-size:.86rem;margin-bottom:10px}
.meta .who{color:var(--gold)}
.snippet{color:#c6cdeb;font-size:.95rem}

.empty-state{text-align:center;padding:90px 20px;color:var(--muted)}
.empty-state b{color:var(--frost)}

/* --- страница сказки --- */
article.tale{
  max-width:760px;margin:0 auto 90px;background:var(--paper);color:#1b1a17;
  border-radius:26px;padding:clamp(28px,5vw,60px);
  box-shadow:0 40px 90px -40px rgba(0,0,0,.85);
}
article.tale h1{font-family:'Unbounded',sans-serif;font-size:clamp(1.7rem,4.2vw,2.6rem);
  line-height:1.15;margin-bottom:10px;color:#14183a}
article.tale .by{color:#7a7568;font-style:italic;margin-bottom:30px}
article.tale p{margin:0 0 1.15em;font-size:1.09rem}
article.tale img{width:100%;border-radius:14px;margin:26px 0;display:block}
article.tale h2,article.tale h3{font-family:'Unbounded',sans-serif;margin:1.4em 0 .5em;color:#14183a}
.back{display:inline-block;margin:34px 0 0;color:var(--frost);text-decoration:none}
.back:hover{text-decoration:underline}

/* --- вход --- */
.gate{min-height:100vh;display:grid;place-items:center;padding:24px}
.gate form{
  width:min(430px,100%);background:rgba(12,17,45,.86);backdrop-filter:blur(10px);
  border:1px solid rgba(143,211,255,.28);border-radius:24px;padding:38px 34px;
}
.gate h1{font-family:'Unbounded',sans-serif;font-size:1.7rem;margin-bottom:6px}
.gate .sub{color:var(--muted);margin-bottom:26px}
label{display:block;font-size:.9rem;color:var(--muted);margin:16px 0 7px}
input{
  width:100%;padding:14px 16px;font-size:1.05rem;font-family:inherit;
  background:rgba(255,255,255,.06);border:1px solid rgba(143,211,255,.3);
  border-radius:12px;color:var(--text);
}
input:focus{outline:2px solid var(--aurora);outline-offset:1px}
button{
  width:100%;margin-top:26px;padding:15px;font-size:1.06rem;font-family:'Unbounded',sans-serif;
  font-weight:600;border:0;border-radius:12px;cursor:pointer;color:#0b1026;
  background:linear-gradient(100deg,var(--frost),var(--aurora));
}
button:hover{filter:brightness(1.08)}
.err{background:rgba(255,143,177,.16);border:1px solid var(--rose);
  border-radius:12px;padding:12px 14px;margin-top:18px;font-size:.94rem}
footer{padding:40px 0 60px;text-align:center;color:var(--muted);font-size:.86rem}