/* =======================
   Pouchlab — Global Styles
   ======================= */

/* Local fonts (TTF from Google Fonts placed in /fonts) */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/Manrope.ttf") format("truetype");
  font-display: swap;
  font-weight: 200 800;
  font-style: normal;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/Fraunces.ttf") format("truetype");
  font-display: swap;
  font-weight: 100 900;
  font-style: normal;
}

/* Design tokens (namespaced) */
:root{
  --pl-oatmilk:#F7F4EF;
  --pl-powder:#DDECF6;
  --pl-celadon:#E6F3EC;
  --pl-peach:#FBE6D7;
  --pl-champagne:#EED9A3;
  --pl-ink:#2E2A25;
  --pl-warmgray:#B7B1A9;

  --pl-radius:20px;
  --pl-wrap:1200px;

  --pl-d1:220ms;
  --pl-d2:300ms;
  --pl-ease:cubic-bezier(0.22,1,0.36,1);
}

/* Reset/Base */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body.pl-body{
  font-family: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color:var(--pl-ink);
  background:var(--pl-oatmilk);
  line-height:1.6;
  text-rendering:optimizeLegibility;
}
img{display:block;height:auto;max-width:350px} /* ≤350px по требованию */
a{color:inherit;text-decoration:none}
a:hover{opacity:.9}
.pl-visually-hidden{
  position:absolute!important;clip:rect(0 0 0 0)!important;clip-path:inset(50%)!important;
  height:1px!important;width:1px!important;overflow:hidden!important;white-space:nowrap!important;
}

.pl-wrap{max-width:var(--pl-wrap);margin:0 auto;padding:0 16px}

/* Header (fixed) */
.pl-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background:color-mix(in oklab, var(--pl-oatmilk) 90%, white 10%);
  backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid color-mix(in oklab, var(--pl-champagne) 60%, transparent 40%);
}
.pl-header .pl-wrap{display:flex;align-items:center;justify-content:space-between;min-height:64px}
.pl-logo{display:flex;gap:10px;align-items:center;font-weight:700;letter-spacing:.2px}
.pl-logo .pl-mark{
  width:18px;height:18px;border-radius:6px;
  background: radial-gradient(circle at 30% 30%, var(--pl-champagne), transparent 60%),
              linear-gradient(135deg, var(--pl-peach), var(--pl-powder));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);
}
.pl-nav{display:flex;align-items:center;gap:16px}
.pl-burger{
  display:none;appearance:none;background:none;border:0;padding:8px;border-radius:10px;cursor:pointer;
}
.pl-burger__bar{display:block;width:22px;height:2px;background:var(--pl-ink);margin:4px 0;border-radius:2px}

/* Menu */
.pl-menu{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.pl-menu a{padding:10px 12px;border-radius:14px}
.pl-menu a[aria-current="page"]{background:var(--pl-celadon)}

/* Decorative stitch under header */
.pl-stitch{
  display:block;height:10px;
  background:
    repeating-linear-gradient(90deg, transparent 0 10px, color-mix(in oklab, var(--pl-champagne), white) 10px 14px),
    linear-gradient(var(--pl-champagne), var(--pl-champagne));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding-top:4px; /* creates top gap to reveal dashed look */
}

/* Main spacing (offset header height) */
.pl-main{padding-top:80px}

/* Buttons */
.pl-btn{
  display:inline-block;padding:12px 18px;border-radius:999px;border:1.5px dashed var(--pl-champagne);
  background:linear-gradient(180deg, #fff, color-mix(in oklab, var(--pl-oatmilk), white));
  transition:transform var(--pl-d1) var(--pl-ease), box-shadow var(--pl-d1) var(--pl-ease);
  font-weight:600;
}
.pl-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.08)}
.pl-btn:active{transform:translateY(0) scale(.98)}
.pl-btn--ghost{background:transparent}

/* Footer */
.pl-footer{margin-top:48px;border-top:1px solid color-mix(in oklab, var(--pl-champagne), transparent 40%);padding:24px 0}
.pl-footer__grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px}
.pl-contact{list-style:none;margin:0;padding:0}
.pl-plain{text-decoration:underline;text-underline-offset:3px}

/* Responsive header/menu */
@media (max-width: 920px){
  .pl-burger{display:block}
  .pl-menu{
    position:fixed;inset:64px 0 auto 0;background:var(--pl-oatmilk);
    border-bottom:1px solid color-mix(in oklab, var(--pl-champagne), transparent 40%);
    display:none;flex-direction:column;padding:12px 16px;gap:8px;
  }
  .pl-menu.is-open{display:flex}
}
@media (max-width: 880px){
  .pl-footer__grid{grid-template-columns:1fr}
}
/* === Chips (глобально для всех страниц) === */
.pl-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:8px; /* можно убрать, если локально не нужно */
}

.pl-chip{
  appearance:none;
  border:1.5px dashed var(--pl-champagne);
  background:linear-gradient(#fff, color-mix(in oklab, var(--pl-oatmilk), white) 84%);
  padding:10px 14px;
  border-radius:999px;
  cursor:pointer;
  font-weight:600;
  line-height:1;
  transition:
    transform var(--pl-d1) var(--pl-ease),
    box-shadow var(--pl-d1) var(--pl-ease),
    background var(--pl-d1) var(--pl-ease),
    border-color var(--pl-d1) var(--pl-ease);
}

/* hover/active */
.pl-chip:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.pl-chip:active{
  transform:translateY(0) scale(.98);
}

/* выбранное состояние */
.pl-chip.is-active,
.pl-chip[aria-pressed="true"]{
  background:var(--pl-powder);        /* мягкий голубой из палитры */
  border-style:solid;                 /* вместо dashed — аккуратнее в активе */
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}

/* доступность */
.pl-chip:focus-visible{
  outline:2px solid color-mix(in oklab, var(--pl-champagne), var(--pl-powder) 40%);
  outline-offset:2px;
}
.pl-chip[disabled]{
  opacity:.5;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}