/* ==========================================================
   «Старт плюс» — оформление каркаса сайта (шапка, подвал, главная).
   Все классы начинаются с sp-, чтобы не пересекаться со стилями
   добавленных страниц.
   ========================================================== */

/* ---- Шрифты (лежат в проекте, интернет не нужен) ---- */
@font-face{font-family:"Unbounded";font-weight:200 900;font-display:swap;
  src:url("../fonts/unbounded-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Unbounded";font-weight:200 900;font-display:swap;
  src:url("../fonts/unbounded-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Onest";font-weight:100 900;font-display:swap;
  src:url("../fonts/onest-cyrillic-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:"Onest";font-weight:100 900;font-display:swap;
  src:url("../fonts/onest-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- Цвета (взяты с эмблемы: закат, силуэт антенны, золото) ---- */
:root{
  --sp-chalk:#FCF4EC;   /* фон страницы */
  --sp-ink:#2B1B1C;     /* текст, тёмные блоки */
  --sp-star:#F2B84B;    /* золото: акцент, активное меню */
  --sp-coral:#F0714C;   /* закатный оранжевый: кнопки */
  --sp-teal:#1F7A72;    /* бирюзовый: вторичный акцент */
  --sp-peach:#F9DCC8;   /* светлые блоки */
  --sp-pad:clamp(1rem,4vw,2.5rem);
  --sp-display:"Unbounded","Arial Black",system-ui,sans-serif;
  --sp-text:"Onest",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}

/* ---- Основа ---- */
.sp-body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--sp-chalk);color:var(--sp-ink)}
.sp-main{flex:1 0 auto}

/* Страница, добавленная импортёром, лежит в обёртке .sp-page.
   :where() даёт нулевую специфичность: стили самой страницы всегда сильнее. */
sp-page{display:block}
:where(.sp-page){background:#fff;color:#000;min-height:60vh}

/* ---- Шапка ---- */
.sp-header{position:relative;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.8rem var(--sp-pad);background:var(--sp-chalk);border-bottom:2px solid var(--sp-ink);
  font-family:var(--sp-text)}
.sp-logo{display:inline-flex;align-items:center;gap:.65rem;color:var(--sp-ink);text-decoration:none;
  font:700 1.05rem/1 var(--sp-display);letter-spacing:-.01em}
.sp-logo-mark{width:40px;height:40px;flex:none;border-radius:50%;border:2px solid var(--sp-star);background:var(--sp-ink)}
.sp-nav{display:flex;flex-wrap:wrap;gap:.25rem}
.sp-nav a{padding:.5rem .85rem;border-radius:6px;color:var(--sp-ink);text-decoration:none;font-weight:500}
.sp-nav a:hover{background:var(--sp-peach)}
.sp-nav a.is-active{background:var(--sp-star);font-weight:600}

.sp-nav-toggle{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.sp-nav-button{display:none;width:44px;height:44px;border-radius:6px;cursor:pointer;align-items:center;justify-content:center}
.sp-nav-button span,.sp-nav-button span::before,.sp-nav-button span::after{display:block;width:22px;height:2px;background:var(--sp-ink);content:"";position:relative}
.sp-nav-button span::before{top:-7px;position:absolute}
.sp-nav-button span::after{top:7px;position:absolute}
.sp-nav-toggle:focus-visible + .sp-nav-button{outline:3px solid var(--sp-teal);outline-offset:2px}

@media (max-width:760px){
  .sp-nav-button{display:flex}
  .sp-nav{display:none;position:absolute;z-index:20;top:100%;left:0;right:0;flex-direction:column;
    padding:.5rem var(--sp-pad) 1rem;background:var(--sp-chalk);border-bottom:2px solid var(--sp-ink)}
  .sp-nav-toggle:checked ~ .sp-nav{display:flex}
  .sp-nav a{padding:.75rem .85rem}
}

/* ---- Хлебные крошки ---- */
.sp-crumbs{padding:.55rem var(--sp-pad);background:var(--sp-peach);font:400 .875rem/1.4 var(--sp-text);color:var(--sp-ink)}
.sp-crumbs a{color:var(--sp-ink)}
.sp-crumbs span{font-weight:600}

/* ---- Подвал ---- */
.sp-footer{display:flex;flex-wrap:wrap;align-items:baseline;gap:1rem 2rem;padding:2rem var(--sp-pad);
  background:var(--sp-ink);color:var(--sp-chalk);font:400 .95rem/1.5 var(--sp-text)}
.sp-footer-brand{display:flex;align-items:center;gap:.9rem;margin-right:auto}
.sp-footer-main{display:flex;flex-direction:column;gap:.15rem}
.sp-footer-main strong{font:700 1rem/1.2 var(--sp-display)}
.sp-footer-main span{opacity:.75}
.sp-footer-nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.sp-footer-nav a{color:var(--sp-chalk);text-underline-offset:3px}
.sp-footer-nav a:hover{color:var(--sp-star)}
.sp-footer-copy{flex-basis:100%;margin:0;padding-top:1rem;border-top:1px solid rgba(252,244,236,.25);opacity:.7;font-size:.85rem}

/* ---- Главная ---- */
.sp-home{font-family:var(--sp-text);font-size:1.0625rem;line-height:1.6}
.sp-hero{display:grid;gap:2.5rem;align-items:center;padding:clamp(2.5rem,7vw,5rem) var(--sp-pad);
  color:var(--sp-chalk);
  background:radial-gradient(60% 90% at 78% 50%,rgba(240,113,76,.30),rgba(240,113,76,0) 70%),
             linear-gradient(180deg,#34211F,#241415)}
@media (min-width:900px){.sp-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}}
.sp-hero h1{margin:0 0 1.25rem;font:700 clamp(1.9rem,4.2vw,3.35rem)/1.12 var(--sp-display);letter-spacing:-.025em;hyphens:auto;overflow-wrap:break-word}
.sp-hero p{margin:0 0 2rem;max-width:44ch;font-size:1.2rem;opacity:.9}
.sp-button{display:inline-block;padding:.9rem 1.5rem;border-radius:6px;background:var(--sp-coral);color:var(--sp-ink);
  font:700 1rem/1 var(--sp-text);text-decoration:none;transition:background .15s}
.sp-button:hover{background:var(--sp-star)}
.sp-home :focus-visible{outline:3px solid var(--sp-star);outline-offset:3px}

/* Эмблема в центре, вокруг расходятся кольца «сигнала», на кольцах кубики-спутники */
.sp-signal{position:relative;width:min(100%,420px);aspect-ratio:1;justify-self:center}
.sp-signal img{position:absolute;left:50%;top:50%;width:52%;height:auto;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;border:3px solid var(--sp-star);z-index:2;
  box-shadow:0 0 0 7px rgba(242,184,75,.18),0 24px 50px -16px rgba(0,0,0,.7)}
.sp-ring{position:absolute;left:50%;top:50%;width:var(--d);height:var(--d);margin:calc(var(--d) / -2) 0 0 calc(var(--d) / -2);
  border-radius:50%;border:1.5px solid rgba(242,184,75,var(--o))}
.sp-sat{position:absolute;left:var(--x);top:var(--y);width:5.5%;aspect-ratio:1;margin:-2.75% 0 0 -2.75%;border-radius:3px;z-index:1}
.sp-sat-star{background:var(--sp-star)}
.sp-sat-coral{background:var(--sp-coral)}
.sp-sat-teal{background:var(--sp-teal)}
@media (prefers-reduced-motion:no-preference){
  .sp-ring,.sp-sat{animation:sp-ping .8s cubic-bezier(.2,.7,.3,1) both;animation-delay:calc(var(--i) * 180ms)}
  @keyframes sp-ping{from{transform:scale(.55);opacity:0}to{transform:none;opacity:1}}
}

/* Страницы сайта */
.sp-pages{padding:clamp(2.5rem,6vw,4rem) var(--sp-pad) clamp(3rem,8vw,5.5rem);scroll-margin-top:1rem}
.sp-pages h2{margin:0 0 1.5rem;font:700 clamp(1.4rem,2.6vw,1.9rem)/1.2 var(--sp-display);letter-spacing:-.02em}
.sp-grid{display:grid;gap:16px;grid-template-columns:1fr;grid-auto-rows:1fr}
@media (min-width:640px){.sp-grid{grid-template-columns:repeat(var(--cols-md,2),minmax(0,1fr))}}
@media (min-width:1000px){.sp-grid{grid-template-columns:repeat(var(--cols,3),minmax(0,1fr))}}
.sp-tile{display:flex;flex-direction:column;border-radius:8px;overflow:hidden;text-decoration:none;color:var(--sp-ink);
  transition:transform .15s,box-shadow .15s}
.sp-tile:hover,.sp-tile:focus-visible{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--sp-ink)}
.sp-tile-media{display:block;aspect-ratio:16/9;background:var(--sp-ink);overflow:hidden}
.sp-tile-media img{display:block;width:100%;height:100%;object-fit:cover}
.sp-tile-body{display:flex;flex-direction:column;flex:1;gap:.55rem;padding:1.15rem 1.35rem 1.25rem}
.sp-tile h3{margin:0;font:600 1.15rem/1.25 var(--sp-display);letter-spacing:-.01em;overflow-wrap:break-word;hyphens:auto}
.sp-tile p{margin:0;font-size:.95rem;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sp-tile small{margin-top:auto;padding-top:.4rem;font-size:.85rem;opacity:.75}
.sp-tile-star{background:var(--sp-star)}
.sp-tile-teal{background:var(--sp-teal);color:#fff}
.sp-tile-peach{background:var(--sp-peach)}
.sp-tile-ink{background:var(--sp-ink);color:#fff}
.sp-tile-teal:hover,.sp-tile-ink:hover{box-shadow:6px 6px 0 var(--sp-star)}
@media (prefers-reduced-motion:reduce){.sp-tile{transition:none}.sp-tile:hover{transform:none}}

.sp-empty{max-width:60ch;padding:1.5rem;border:2px dashed var(--sp-ink);border-radius:8px;background:var(--sp-peach)}

/* Обычная текстовая страница (Markdown) */
.sp-prose{max-width:70ch;margin:0 auto;padding:clamp(2rem,5vw,3.5rem) var(--sp-pad);font:400 1.0625rem/1.7 var(--sp-text)}
.sp-prose h1{font:700 clamp(1.8rem,3.6vw,2.6rem)/1.15 var(--sp-display);letter-spacing:-.02em;margin:0 0 1.25rem}
.sp-prose h2{font:600 1.4rem/1.25 var(--sp-display);margin:2.2rem 0 .8rem}
.sp-prose a{color:var(--sp-teal)}
.sp-prose blockquote{margin:1.5rem 0;padding:.5rem 1.25rem;border-left:4px solid var(--sp-star);background:var(--sp-peach)}