:root{
  --max-width: 1100px;
  --container-padding: 16px;
  --bg: #1f1b18;
  --card-bg: rgba(18,16,14,0.55);
  --card-bg-strong: rgba(18,16,14,0.75);
  --muted: #d7ccb9;
  --accent: #3a2e2a;
  --radius: 10px;
  --shadow: 0 6px 24px rgba(0,0,0,0.45);
  --text: #efe9e2;
  --ui-gap: 16px;
  --break-md: 768px;
  --break-lg: 1024px;
}

/* RESET / BASE */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
  font-size:16px;
  background-image: url('domik.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

/* контейнер для центровки (можно менять max-width) */
.container{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--container-padding);
}

/* HEADER */
.site-header{
  background: linear-gradient(180deg, rgba(12,10,9,0.38), rgba(12,10,9,0.28));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-bottom: 1px solid rgba(255,255,255,0.04);
  position: sticky;
  top: 0;
  z-index: 40;
}
.header-inner{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 0;
}
.brand{flex:1}
.site-title{
  margin:0;
  font-size:1.05rem;
  letter-spacing:0.2px;
  color:var(--text);
  font-family: 'Great Vibes', cursive;
  font-size: 3em;
  color: #333;
}
.site-subtitle{
  margin:4px 0 0 0;
  color:var(--muted);
  font-size:0.9rem;
}

/* NAV */
.nav-toggle{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  padding:8px 10px;
  border-radius:8px;
  font-size:0.95rem;
  cursor:pointer;
  color:var(--text);
}
.main-nav{
  position:fixed;
  top:64px;
  right:0;
  width:260px;
  transform:translateX(110%);
  transition:transform .22s ease, opacity .22s ease;
  background: rgba(12,10,9,0.75);
  box-shadow: var(--shadow);
  border-radius:8px;
  padding:12px;
  display:none;
}
.main-nav.open{
  transform:translateX(0);
  display:block;
}
.main-nav ul{list-style:none;margin:0;padding:0}
.main-nav a{
  display:block;
  padding:8px 10px;
  color:var(--text);
  text-decoration:none;
  border-radius:6px;
}
.main-nav a:hover{background:rgba(255,255,255,0.03)}

/* HERO / POEM */
.hero{
  margin: 24px auto;
  padding: 28px;
  max-width: 900px;
  border-radius: calc(var(--radius) + 2px);
  background: linear-gradient(180deg, rgba(8,6,5,0.45), rgba(8,6,5,0.35));
  box-shadow: var(--shadow);
  backdrop-filter: blur(3px);
}

.poem-title{
  margin:0 0 12px 0;
  font-size:1.6rem;
  color:var(--text);
  text-align:center;
  letter-spacing:0.6px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

/* Применяем Great Vibes к телу стихов, добавляем наклон и центрирование */
.poem-text{
  font-family: 'Great Vibes', cursive;
  font-style: italic;
  font-size:1.12rem;
  line-height:1.65;
  color:var(--text);
  text-shadow: 0 2px 18px rgba(0,0,0,0.65);
  -webkit-font-smoothing:antialiased;
  white-space:pre-wrap;
  text-align: center;
}

/* при очень маленьких экранах немного уменьшаем размер */
@media (max-width: 420px) {
  .hero{padding:18px;margin:14px}
  .poem-title{font-size:1.25rem}
  .poem-text{font-size:1rem}
}

/* Layout: content + sidebar (если нужен) */
.layout{
  display:grid;
  gap:var(--ui-gap);
  margin-top:var(--ui-gap);
}
.content{min-height:200px}
.sidebar{}

/* Карточки и формы */
.card{
  background: var(--card-bg);
  border-radius: var(--radius);
  padding:14px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,0.03);
}
.form{display:flex;flex-direction:column;gap:10px}
.form label{font-weight:600;font-size:0.95rem;color:var(--text)}
input[type="text"],input[type="email"],textarea{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(255,255,255,0.06);
  border-radius:8px;
  font-size:1rem;
  background: rgba(10,8,7,0.45);
  color:var(--text);
  backdrop-filter: blur(4px);
}
.btn{
  display:inline-block;
  padding:9px 12px;
  border-radius:8px;
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  cursor:pointer;
  color:var(--text);
}
.btn.primary{
  background:linear-gradient(180deg, rgba(58,46,42,0.95), rgba(58,46,42,0.85));
  color:var(--text);
  border-color:transparent;
}
.form-row{display:flex;gap:8px;flex-wrap:wrap}
.muted{color:var(--muted);font-size:0.95rem;margin:0}

.site-footer{
  margin-top:28px;
  padding:18px 0;
  text-align:center;
  color:var(--muted);
  font-size:0.95rem;
  background: linear-gradient(180deg, rgba(8,6,5,0.28), rgba(8,6,5,0.20));
  backdrop-filter: blur(4px);
  border-top: 1px solid rgba(255,255,255,0.03);
}

@media (min-width: 768px){
  .main-nav{position:static;transform:none;display:block;background:transparent;box-shadow:none;padding:0;width:auto}
  .nav-toggle{display:none}
  .header-inner{align-items:flex-end}
  .main-nav ul{display:flex;gap:14px}
  .main-nav a{padding:6px 8px}
  .layout{
    grid-template-columns: 1fr 320px;
    align-items:start;
  }
  .hero{display:block}
}

@media (min-width: 1024px){
  :root{--container-padding:24px;--ui-gap:20px}
  body{font-size:17px}
  .site-title{font-size:5.45rem}
  .poem-title{font-size:2rem}
  .poem-text{font-size:1.18rem}
}

a:focus,button:focus,input:focus,textarea:focus{
  outline: 3px solid rgba(255,229,200,0.09);
  outline-offset:2px;
}

.separator{
  height:1px;
  background:linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  margin:12px 0;
}
.block-quote{
  border-left:3px solid rgba(255,229,200,0.06);
  padding-left:12px;
  color:var(--muted);
  margin:10px 0;
}

.header-image {
  opacity: 0.9;
  background: rgba(255, 255, 255, 0.2);
  transition: transform 0.3s;
}
.header-image:hover {
  transform: scale(1.1);
}

.poem-title{
  margin:0 0 12px 0;
  font-family: 'Great Vibes', cursive;
  font-style: italic;
  font-size:3.2rem; /* название стихотворения при необходимости */
  color:var(--text);
  text-align:center;
  letter-spacing:0.6px;
  text-shadow: 0 2px 10px rgba(0,0,0,0.6);
}

/* Стили для липкого хедера  */ 
#sticky-header {
  position: sticky;
  top: 0;
  z-index: 9999;
 /* background: #ffffffcc;  полупрозрачный фон */
  backdrop-filter: blur(4px);
  transition: height 0.25s ease, padding 0.25s ease, box-shadow 0.25s ease;
  box-shadow: none; 
}  

/* Контейнер внутри хедера */
#sticky-header .header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px;
  transition: padding 0.25s ease;
}

/* Фото */
#sticky-header .header-photo {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 50%;
  flex-shrink: 0;
  transition: width 0.25s ease, height 0.25s ease, transform 0.25s ease;
}

/* Заголовок */
#sticky-header .header-title {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #222;
  white-space: nowrap;
  transition: font-size 0.25s ease, transform 0.25s ease;
}

/* Навигация (пример) */
#sticky-header .header-nav {
  margin-left: auto;
  display: flex;
  gap: 12px;
}
#sticky-header .header-nav a {
  color: #333;
  text-decoration: none;
  font-size: 15px;
  padding: 6px 8px;
}

/* Состояние "сжатый" при прокрутке */
#sticky-header.scrolled {
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
#sticky-header.scrolled .header-inner {
  padding: 8px 12px;
}
#sticky-header.scrolled .header-photo {
  width: 44px;
  height: 44px;
  transform: translateY(-1px);
}
#sticky-header.scrolled .header-title {
  font-size: 16px;
}