@import url('/assets/fonts/fonts.css');

:root{
  --bg:#fffaf7; --ink:#3a2f42; --muted:#78697f; --line:#f0e2e7;
  --coral:#f3b0a4; --blush:#f2b8c6; --lilac:#c3aeea; --sage:#a9cbb4; --butter:#f3dc9a;
  --cream:#fdf2ea; --btn:#8f74d6; --btn-dark:#7c60c9; --plum:#3a2f42;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Georgia,"Times New Roman",serif;
  font-size:19px;line-height:1.62}
.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
h1,h2,h3,.brand,nav a,.eyebrow,.btn,.card-cta,.card-number,.hero-facts strong,.cta,.count{
  font-family:'Fredoka',ui-rounded,'Trebuchet MS',sans-serif}
a{color:inherit}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:#fff;padding:10px 14px;border:1px solid var(--line);z-index:9}
header.site{border-bottom:1px solid var(--line);background:linear-gradient(180deg,#fff5f7,#fffaf7)}
header.site .wrap{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;
  padding-top:16px;padding-bottom:16px}
.brand{font-family:'Caveat','Segoe Script',cursive;font-size:33px;font-weight:600;text-decoration:none;
  line-height:1;letter-spacing:.01em}
.brand span{color:var(--btn)}
nav a{margin-left:20px;font-size:16px;font-weight:500;text-decoration:none;color:var(--muted)}
nav a:hover,nav a[aria-current]{color:var(--btn)}

/* первый экран */
.hero{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(320px,.92fr);
  grid-template-areas:"title art" "lede art" "badges art" "actions art";gap:0 56px;
  padding:70px 0 78px;align-items:start}
.hero h1{grid-area:title;font-size:clamp(38px,5.2vw,64px);line-height:1.04;font-weight:600;
  letter-spacing:-.02em;margin:0;max-width:22ch}
.hero-art{grid-area:art;align-self:center;margin:0;padding:14px;background:#fff;border:1px solid var(--line);
  border-radius:26px;box-shadow:0 24px 60px rgba(90,70,110,.16);transform:rotate(-1.2deg)}
.hero-art img{width:100%;height:auto;display:block;border-radius:16px}
.hero-lede{grid-area:lede;font-size:20px;color:var(--muted);margin:26px 0 0;max-width:46ch}
.hero-badges{grid-area:badges}
.hero-actions{grid-area:actions;margin:28px 0 0}
.wrap.page-top{padding-top:76px}
.disclaimer{font-size:16px;color:var(--muted);border-left:4px solid var(--butter);
  padding:8px 0 8px 16px;margin:0 0 34px}

/* плашки количества и бесплатности */
.badges{display:flex;gap:14px;flex-wrap:wrap;list-style:none;margin:0 0 26px;padding:0}
.badges li{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:999px;
  background:#fff;border:1px solid var(--line);color:var(--ink);font-size:18px;font-weight:600;
  box-shadow:0 6px 18px rgba(90,70,110,.06)}
.badges li.free{background:#eef7ea;border-color:#cfe6c8;color:#3f6b39}
.hero .badges{margin:30px 0 0}

/* кнопки */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:52px;
  border-radius:999px;padding:13px 26px;background:var(--btn);color:#fff;text-decoration:none;
  font-size:17px;font-weight:600;box-shadow:0 10px 26px rgba(143,116,214,.28);
  transition:transform .18s ease,background .18s ease}
.btn:hover{background:var(--btn-dark);transform:translateY(-2px)}

/* коллекции */
.collections{padding:8px 0 30px}
.section-head{max-width:62ch;margin:0 0 30px}
.section-head h2{font-size:clamp(28px,3.6vw,40px);margin:0 0 12px;font-weight:600}
.section-head p{color:var(--muted);margin:0;font-size:18px}
.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:12.5px;font-weight:700;
  color:var(--btn);margin:0 0 12px}
.collection-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}
.collection-card{overflow:hidden;background:#fff;border:1px solid var(--line);border-radius:24px;
  box-shadow:0 18px 46px rgba(90,70,110,.10);display:flex;flex-direction:column}
.mini-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);gap:6px;
  padding:6px;aspect-ratio:2.15/1;background:var(--cream)}
.mini-grid img{display:block;width:100%;height:100%;min-width:0;min-height:0;object-fit:contain;
  background:#f8ede7;border-radius:8px}
.collection-copy{padding:24px;display:flex;flex-direction:column;flex:1}
.collection-copy h2{font-size:26px;font-weight:600;margin:0 0 10px}
.collection-copy p{color:var(--muted);font-size:17px;margin:0 0 20px}
.collection-copy .btn{margin-top:auto;align-self:flex-start}

/* карточки шрифтов */
.grid-head{margin:0 0 26px}
.grid-head h1{font-size:clamp(34px,4.8vw,58px);line-height:1.06;font-weight:600;letter-spacing:-.02em;margin:0 0 16px}
.lead{font-size:20px;color:var(--muted);max-width:62ch;margin:0 0 24px}
.font-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;margin:0 0 50px;padding:0;
  list-style:none}
.font-card{background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:0 12px 32px rgba(90,70,110,.08);display:flex;flex-direction:column}
.card-preview{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--cream)}
.card-preview img{width:100%;height:100%;object-fit:cover;display:block}
.card-number{position:absolute;left:12px;top:12px;padding:6px 10px;border-radius:8px;
  background:rgba(58,47,66,.76);color:#fff;font-size:12px;font-weight:600;letter-spacing:.08em;
  backdrop-filter:blur(6px)}
.card-link{display:flex;flex-direction:column;flex:1;text-decoration:none;color:inherit}
.card-copy{padding:18px 18px 20px;display:flex;flex-direction:column;flex:1}
.card-copy h3{font-size:22px;font-weight:600;line-height:1.2;margin:0 0 6px}
.card-cat{font-size:14px;color:var(--muted)}
.card-cta{margin-top:18px;display:flex;align-items:center;justify-content:space-between;min-height:50px;
  padding:0 18px;border-radius:999px;background:var(--btn);color:#fff;font-size:16px;font-weight:600;
  text-decoration:none}
.card-cta:hover{background:var(--btn-dark)}

/* другие подборки внизу страницы */
.more{padding:6px 0 40px}
.more .collection-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

/* баннер студии: отдельно текст, отдельно картинка */
.studio-banner{position:relative;display:grid;grid-template-columns:1.3fr .7fr;align-items:stretch;
  margin:56px 0 46px;border-radius:30px;overflow:hidden;background:var(--plum);color:#fff;
  box-shadow:0 30px 80px rgba(90,70,110,.30)}
.studio-copy{padding:48px 46px;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.studio-copy h2{font-size:clamp(24px,2.8vw,34px);font-weight:600;color:#fff;margin:0 0 12px;line-height:1.14}
.studio-copy p{color:#e6dbec;font-size:17.5px;margin:0 0 22px}
.studio-art-wrap{position:relative;overflow:hidden;min-height:300px}
.studio-art{position:absolute;right:0;top:0;width:175%;height:100%;object-fit:cover;
  object-position:right center;display:block}
.studio-button{background:var(--blush);color:#43263c;box-shadow:0 10px 26px rgba(242,184,198,.35)}
.studio-button:hover{background:#eda9b9;color:#43263c}

@media (max-width:900px){
  header.site .wrap{flex-direction:column;align-items:flex-start;gap:10px;padding-top:12px;padding-bottom:12px}
  nav{display:flex;flex-wrap:wrap;gap:8px 18px}
  nav a{margin-left:0}
  .hero{grid-template-columns:1fr;grid-template-areas:"title" "art" "lede" "badges" "actions";gap:0;
    padding:28px 0 44px}
  .hero-art{max-width:560px;justify-self:center;margin-top:24px;transform:none}
  .hero-lede{max-width:none}
  .hero h1{max-width:none}
  .collection-grid,.more .collection-grid,.font-grid{grid-template-columns:1fr}
  .font-grid{gap:18px}
  .wrap.page-top{padding-top:30px}
  .more{padding:6px 0 6px}
  .studio-banner{grid-template-columns:1fr;margin:18px 0 32px}
  .studio-art-wrap{order:-1;min-height:280px}
  .studio-art{width:195%}
  .studio-copy{padding:30px 26px 34px}
  body{font-size:18px}
  .wrap{padding:0 18px}
}