/* =========================
   Dermalion Labs — Shared CSS
   Folders expected:
   /styles/style.css
   /styles/home.css
   /fonts/*.ttf (local Google Fonts)
   /images/*.jpg (≤350px width suggested)
   ========================= */

/* 1) Reset & base */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "InterDL", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1f1f22;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(226, 205, 212, 0.55), transparent 60%),
    radial-gradient(900px 700px at 110% 20%, rgba(214, 233, 230, 0.55), transparent 55%),
    linear-gradient(180deg, #fff, #faf7f8 30%, #f8fbfa 70%, #fff);
  overflow-x: hidden;
  line-height: 1.6;
}

/* 2) Local fonts (place .ttf files into /fonts) */
@font-face {
  font-family: "PrataDL";
  src: url("../fonts/Prata-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterDL";
  src: url("../fonts/Inter-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "InterDL";
  src: url("../fonts/Inter-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* 3) Theming */
:root{
  --dl-ink: #1f1f22;
  --dl-ink-2: #3e4346;
  --dl-muted: #6c7377;
  --dl-rose: #e6c8d2;
  --dl-mint: #cdebe2;
  --dl-sage: #dfeee9;
  --dl-line: #e9ecef;
  --dl-white: #ffffff;
  --dl-accent: #2c6d5e;
  --dl-accent-2: #b35676;
  --dl-shadow: 0 10px 25px rgba(31,31,34,.08), 0 4px 10px rgba(31,31,34,.06);
  --header-h: 72px;
}

/* 4) Typography */
.eyebrow{
  letter-spacing:.12em;
  text-transform: uppercase;
  font-size:.78rem;
  color: var(--dl-muted);
  margin: 0 0 .5rem 0;
}
h1,h2,h3{ line-height:1.2; color:var(--dl-ink); margin:0 0 .75rem 0; }
h1{ font-family:"PrataDL", serif; font-size: clamp(1.85rem, 3vw + 1rem, 3rem); }
p{ margin:0 0 1rem 0; color:var(--dl-ink-2); }

/* 5) Media */
img{ max-width:350px; height:auto; display:block; border-radius: 16px; }

/* 6) Layout */
.container{
  width:min(1120px, 92%);
  margin-inline:auto;
}
main{ padding-top: calc(var(--header-h) + 20px); }

/* 7) Header (fixed) */
.site-header{
  position:fixed; inset:0 0 auto 0; height:var(--header-h);
  background: rgba(255,255,255,.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dl-line);
  z-index: 1000;
}
.header-inner{
  height:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.brand{
  display:flex; align-items:center; gap:10px; text-decoration:none; color:inherit;
}
.brand-mark{
  display:inline-grid; place-items:center;
  width:38px; height:38px; border-radius:10px;
  background: linear-gradient(135deg, var(--dl-mint), var(--dl-rose));
  box-shadow: var(--dl-shadow);
  font-weight:600; font-family:"InterDL",sans-serif;
}
.brand-text{ font-weight:600; letter-spacing:.02em; }

/* 8) Nav + burger */
.site-nav{ display:flex; align-items:center; gap:10px; }
.nav-list{
  display:flex; gap:18px; list-style:none; padding:0; margin:0;
}
.nav-link{
  text-decoration:none; color:var(--dl-ink-2);
  padding:8px 10px; border-radius:10px; transition: transform .2s ease, background-color .2s ease;
}
.nav-link:hover{ background:#f3f5f6; transform: translateY(-1px); }
.nav-toggle{
  display:none; position:relative; width:42px; height:42px; border:0; background:transparent; border-radius:10px;
}
.nav-toggle .bar{
  position:absolute; left:10px; right:10px; height:2px; background:var(--dl-ink);
  transition: transform .25s ease, opacity .2s ease, top .25s ease;
}
.nav-toggle .bar:nth-child(1){ top:13px; }
.nav-toggle .bar:nth-child(2){ top:20px; }
.nav-toggle .bar:nth-child(3){ top:27px; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(1){ top:20px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] .bar:nth-child(3){ top:20px; transform: rotate(-45deg); }

/* Mobile menu panel */
@media (max-width: 820px){
  .nav-toggle{ display:block; }
  .nav-list{
    position: absolute; top: calc(var(--header-h) + 8px); right: 4%;
    background: #ffffff; border:1px solid var(--dl-line); border-radius:14px; box-shadow: var(--dl-shadow);
    padding:10px; gap:8px; flex-direction:column; min-width: 180px;
    transform-origin: top right; transform: scale(.98); opacity:0; pointer-events:none;
    transition: transform .2s ease, opacity .2s ease;
  }
  .nav-list.is-open{ transform: scale(1); opacity:1; pointer-events:auto; }
}

/* 9) Footer */
.site-footer{
  margin-top: 60px; padding: 40px 0 80px;
  border-top:1px solid var(--dl-line);
  background: linear-gradient(180deg, #fff, #f8fbfa);
  position: relative;
}
.footer-inner{ display:grid; gap:14px; align-items:start; }
.footer-title{ font-family:"PrataDL", serif; margin:0; }
.footer-note{ margin:.25rem 0 1rem; color:var(--dl-muted); }
.footer-nav{ list-style:none; display:flex; flex-wrap:wrap; gap:14px; padding:0; margin:0; }
.footer-nav a{ text-decoration:none; color:var(--dl-ink-2); }
.footer-nav a:hover{ color:var(--dl-accent); }
.footer-copy{ color:var(--dl-muted); font-size:.9rem; }

/* Back to top */
.backtotop{
  position: absolute; right: 16px; bottom: 16px;
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--dl-line); background:#fff; box-shadow: var(--dl-shadow);
  cursor:pointer;
}
.backtotop:hover{ transform: translateY(-2px); }

/* 10) Reveal on scroll */
[data-reveal]{ opacity:0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
[data-reveal].reveal-in{ opacity:1; transform: translateY(0); }

/* 11) A11y */
.visually-hidden{ position:absolute !important; width:1px; height:1px; margin:-1px; border:0; padding:0; clip:rect(0 0 0 0); overflow:hidden; }

/* 12) Motion preferences */
@media (prefers-reduced-motion: reduce){
  * { animation: none !important; transition: none !important; }
}
/* ——— Анти-оверфлоу по оси X ——— */
html, body{
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;        /* базовый фолбэк */
}
@supports (overflow-x: clip){
  html, body{ overflow-x: clip; } /* более строгая обрезка, если поддерживается */
}

/* Контейнер: используем vw, чтобы исключить проценты от возможной ширины > 100% */
.container{
  width: min(1120px, 92vw);
  margin-inline: auto;
}

/* Изображения: строго не шире контейнера и не больше 350px */
img{
  max-width: min(350px, 100%);
  height: auto;
  display: block;
  border-radius: 16px;
}

/* Мобильное меню: гарантируем, что панель не шире вьюпорта */
@media (max-width: 820px){
  .nav-list{
    right: 12px;           /* было 4% — могло вылезать при редких кейсах */
    left: auto;
    max-width: calc(100vw - 24px);
    overflow: hidden;
  }
}
/* animate-on-scroll behaves like [data-reveal] */
.animate-on-scroll{ opacity:0; transform: translateY(18px); transition: opacity .5s ease, transform .5s ease; }
.animate-on-scroll.reveal-in{ opacity:1; transform: translateY(0); }
/* ===== Footer (format as requested) ===== */
.footer{
  margin-top: 60px;
  padding: 40px 0;
  border-top: 1px solid var(--dl-line);
  background: linear-gradient(180deg, #fff, #f8fbfa);
}
.footer-container{
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 16px;
  align-items: start;
}
.footer-brand{
  font-family: "PrataDL", serif;
  margin: 0 0 .25rem;
}
.footer a{ color: var(--dl-ink-2); text-decoration: none; }
.footer a:hover{ color: var(--dl-accent); text-decoration: underline; }

.footer-links{
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
}
.footer-top{
  display: flex;
  justify-content: flex-end;
}
.back-to-top{
  height: 42px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid var(--dl-line);
  background: #fff;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--dl-shadow);
  transition: transform .15s ease;
}
.back-to-top:hover{ transform: translateY(-2px); }

@media (max-width: 820px){
  .footer-container{ grid-template-columns: 1fr; }
  .footer-top{ justify-content: flex-start; }
}