/* ===========================================================
   «Ellie D» — катамаран Leopard 41
   Общий файл стилей для всех страниц.
   Тёмная тема, неоново-магентовые акценты (магента / фиолет / голубой).
   Без внешних шрифтов, CDN, библиотек и тяжёлых эффектов.
   =========================================================== */

:root{
  --bg:        #07070e;
  --panel:     #10112a;
  --panel-2:   #171938;
  --line:      #2c2f60;
  --text:      #f0f2ff;
  --muted:     #a9b0d8;
  --magenta:   #ff2fd0;
  --violet:    #a56bff;
  --cyan:      #35e6ff;
  --radius:    20px;
}

*{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; }

body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  background-color:var(--bg);
  background-image:
    radial-gradient(900px 520px at 10% -12%, rgba(255,47,208,.20), transparent 62%),
    radial-gradient(820px 500px at 102% -6%, rgba(53,230,255,.15), transparent 58%),
    radial-gradient(700px 600px at 50% 118%, rgba(165,107,255,.13), transparent 60%);
  background-repeat:no-repeat;
  background-attachment:fixed;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size:20px;
  line-height:1.65;
}

/* --- ссылка «к содержимому» для клавиатуры --- */
.skip{
  position:absolute; left:-9999px;
}
.skip:focus{
  left:12px; top:12px; z-index:60;
  background:var(--panel); color:var(--text);
  padding:10px 16px; border-radius:12px; border:2px solid var(--cyan);
}

a{ color:var(--cyan); }
a:focus-visible{ outline:3px solid var(--cyan); outline-offset:3px; border-radius:8px; }

.wrap{
  max-width:980px;
  margin:0 auto;
  padding:0 20px 72px;
}

/* ---------------------- Шапка ---------------------- */

.topbar{
  max-width:980px;
  margin:0 auto;
  padding:20px 20px 14px;
  display:flex;
  flex-wrap:wrap;
  gap:16px 20px;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex; align-items:center; gap:14px;
  text-decoration:none; color:var(--text);
}
.brand-mark{
  display:grid; place-items:center;
  width:56px; height:56px; flex:0 0 auto;
  border-radius:16px;
  font-weight:700; font-size:19px; letter-spacing:.5px; color:#fff;
  background:linear-gradient(140deg, var(--magenta), var(--violet) 58%, var(--cyan));
  box-shadow:0 0 22px rgba(255,47,208,.40);
}
.brand-text{
  font-weight:700; font-size:22px; line-height:1.2;
}
.brand-text small{
  display:block; font-weight:400; font-size:14px; color:var(--muted);
}

.nav{
  display:flex; flex-wrap:wrap; gap:10px;
}
.nav a{
  color:var(--text);
  text-decoration:none;
  font-size:17px;
  padding:10px 17px;
  border:1px solid var(--line);
  border-radius:999px;
  background:rgba(255,255,255,.035);
}
.nav a:hover{ border-color:var(--magenta); color:#fff; }
.nav a[aria-current="page"]{
  border-color:transparent;
  background:linear-gradient(140deg, var(--magenta), var(--violet));
  color:#fff;
  box-shadow:0 0 18px rgba(255,47,208,.38);
}

/* ---------------------- Общие блоки ---------------------- */

h1{
  font-size:clamp(2rem, 6vw, 3rem);
  line-height:1.15;
  margin:.2em 0 .35em;
}
h2{
  font-size:clamp(1.4rem, 3.6vw, 1.85rem);
  line-height:1.25;
  margin:2.2rem 0 .7rem;
  padding-bottom:.35rem;
  border-bottom:1px solid var(--line);
}
h3{ font-size:1.2rem; margin:1.4rem 0 .4rem; }

p{ margin:.6rem 0 1rem; }

.eyebrow{
  display:inline-block;
  margin:0 0 .4rem;
  font-size:15px;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:var(--cyan);
}

.lead{ font-size:1.22rem; color:var(--text); }
.muted{ color:var(--muted); }

.card{
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 24px;
  margin:18px 0;
}

/* --- «уточняется» — место под будущий текст --- */
.todo{
  display:inline-block;
  padding:2px 12px;
  border:1px dashed var(--violet);
  border-radius:999px;
  color:var(--violet);
  font-size:.92em;
  font-style:italic;
}
.slot{
  border:1px dashed var(--line);
  border-radius:14px;
  padding:14px 18px;
  color:var(--muted);
  font-style:italic;
}

/* --- метка «пример» --- */
.badge{
  display:inline-block;
  margin-left:8px;
  padding:2px 12px;
  border-radius:999px;
  font-size:14px;
  font-style:normal;
  letter-spacing:.04em;
  color:#fff;
  background:linear-gradient(140deg, var(--magenta), var(--violet));
}

/* ---------------------- Главная ---------------------- */

.hero{
  padding:18px 0 4px;
}
.hero .hello{
  font-size:1.18rem;
  max-width:46rem;
}

.facts{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  gap:16px;
  margin:26px 0 8px;
}
.fact{
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 20px;
}
.fact dt{
  font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan);
  margin:0 0 6px;
}
.fact dd{
  margin:0; font-size:1.05rem;
}

/* --- крупные ссылки на разделы --- */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:16px;
  margin:20px 0 8px;
}
.tile{
  display:block;
  text-decoration:none;
  color:var(--text);
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:22px 24px;
  transition:border-color .15s linear, transform .15s linear;
}
.tile:hover{
  border-color:var(--magenta);
  transform:translateY(-2px);
}
.tile strong{
  display:block;
  font-size:1.32rem;
  margin-bottom:6px;
  background:linear-gradient(100deg, var(--magenta), var(--cyan));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.tile span{ color:var(--muted); font-size:1rem; }

/* ---------------------- Дневник ---------------------- */

.entries{ list-style:none; margin:18px 0 0; padding:0; }
.entry{
  position:relative;
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-left:4px solid var(--magenta);
  border-radius:var(--radius);
  padding:20px 24px;
  margin-bottom:16px;
}
.entry .when{
  font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--cyan);
}
.entry h3{ margin:.35rem 0 .5rem; font-size:1.3rem; }
.entry p{ margin:.4rem 0; }

/* ---------------------- Галерея ---------------------- */

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
  margin:20px 0 0;
}
figure.shot{
  margin:0;
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
}
.shot .ph{
  display:grid; place-items:center;
  aspect-ratio:4 / 3;
  color:var(--muted);
  font-size:1rem;
  font-style:italic;
  text-align:center;
  padding:14px;
  background:
    linear-gradient(140deg, rgba(255,47,208,.16), rgba(53,230,255,.12)),
    #0b0c1c;
  border-bottom:1px solid var(--line);
}
.shot img{
  display:block; width:100%; height:auto;
}
.shot figcaption{
  padding:14px 18px 18px;
  font-size:1rem;
  color:var(--muted);
}

/* ---------------------- Контакты ---------------------- */

.contact-rows{ list-style:none; margin:18px 0 0; padding:0; }
.contact-rows li{
  background:linear-gradient(160deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:18px 22px;
  margin-bottom:14px;
}
.contact-rows .label{
  display:block;
  font-size:14px; letter-spacing:.08em; text-transform:uppercase; color:var(--cyan);
  margin-bottom:6px;
}

/* ---------------------- Подвал ---------------------- */

.foot{
  max-width:980px;
  margin:0 auto;
  padding:26px 20px 40px;
  border-top:1px solid var(--line);
  color:var(--muted);
  font-size:15px;
}
.foot p{ margin:.25rem 0; }

/* ---------------------- Телефон ---------------------- */

@media (max-width:640px){
  body{ font-size:19px; }
  .wrap{ padding:0 14px 56px; }
  .topbar{ padding:16px 14px 10px; gap:12px; }
  .brand-mark{ width:48px; height:48px; border-radius:14px; font-size:17px; }
  .brand-text{ font-size:20px; }
  .nav{ width:100%; gap:8px; }
  .nav a{ font-size:16px; padding:11px 15px; flex:1 1 auto; text-align:center; }
  .card, .tile, .entry, .fact, .contact-rows li{ padding:18px; }
  .foot{ padding:22px 14px 34px; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; }
}