/* WellCat — страница-заглушка
   Палитра и типографика взяты из макета «WellCat · Hecho a mano». */

:root{
  --plum:#6a2c5a; --plum-deep:#41203b; --lavender:#b078c6; --lilac-mist:#efe6f2;
  --canvas:#faf6f3; --panel:#ffffff; --sand-deep:#c9ad8c;
  --ink:#2e2530; --muted:#7c6f7c; --line:#e9ddea;
  --shadow:rgba(65,32,59,.20);

  --font-display:'Iowan Old Style','Palatino Linotype',Palatino,'Book Antiqua',Georgia,serif;
  --font-sans:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
}

@media (prefers-color-scheme:dark){
  :root{
    --plum:#cd93da; --plum-deep:#1e1724; --lavender:#cc9ed8; --lilac-mist:#342b3d;
    --canvas:#241d29; --panel:#2f2636; --sand-deep:#a98d6c;
    --ink:#f2e9f0; --muted:#b0a0b0; --line:#43374b;
    --shadow:rgba(0,0,0,.45);
  }
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--canvas);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

img{display:block;max-width:100%}

/* ---------- каркас ---------- */

.page{
  position:relative;
  min-height:100svh;
  display:grid;
  place-items:center;
  align-content:center;
  padding:3rem 1.25rem;
  /* Только по горизонтали: повёрнутые карточки россыпи не должны давать
     боковую прокрутку, но по вертикали страница обязана свободно расти. */
  overflow-x:clip;
}

/* ---------- россыпь фотографий (десктоп) ---------- */

.scatter{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.shot{
  position:absolute;
  background:var(--panel);
  padding:.5rem .5rem 1.4rem;          /* нижнее поле пошире — «полароид» */
  border-radius:4px;
  box-shadow:0 18px 34px -18px var(--shadow);
  border:1px solid var(--line);
}

.shot img{border-radius:2px;width:100%;height:auto}

/* позиции подобраны так, чтобы обходить карточку с текстом по центру */
.shot--1{left:2%;   top:7%;   width:clamp(130px,13vw,196px); transform:rotate(-6deg)}
.shot--2{left:16%;  top:47%;  width:clamp(120px,12vw,180px); transform:rotate(4deg)}
.shot--3{left:3%;   top:69%;  width:clamp(115px,11.5vw,172px);transform:rotate(-3deg)}
.shot--4{left:25%;  top:4%;   width:clamp(105px,10.5vw,158px);transform:rotate(7deg)}
.shot--5{left:78%;  top:5%;   width:clamp(122px,12.5vw,184px);transform:rotate(5deg)}
.shot--6{left:85%;  top:41%;  width:clamp(118px,12vw,176px); transform:rotate(-5deg)}
.shot--7{left:73%;  top:69%;  width:clamp(112px,11vw,166px); transform:rotate(6deg)}
.shot--8{left:59%;  top:83%;  width:clamp(100px,10vw,150px); transform:rotate(-8deg)}
.shot--9{left:31%;  top:81%;  width:clamp(108px,10.5vw,160px);transform:rotate(5deg)}

/* ---------- карточка с текстом ---------- */

.card{
  position:relative;
  z-index:2;
  width:min(640px,100%);
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:22px;
  padding:3rem 2.5rem 2.25rem;
  text-align:center;
  box-shadow:0 30px 60px -30px var(--shadow);
}

.eyebrow{
  margin:0 0 1rem;
  font-size:.72rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  font-weight:700;
  color:var(--plum);
}

.brand{
  margin:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  font-family:var(--font-display);
  font-style:italic;
  font-weight:600;
  font-size:clamp(2.4rem,7vw,3.4rem);
  line-height:1.05;
  letter-spacing:-.01em;
  color:var(--plum);
}

.brand svg{
  width:.82em;
  height:.82em;
  fill:currentColor;
  flex:none;
  font-style:normal;
}

/* мотив шва — тот же, что в макете */
.stitch{
  height:6px;
  border:0;
  margin:1.6rem auto;
  width:min(240px,70%);
  background:repeating-linear-gradient(90deg,var(--sand-deep) 0 12px,transparent 12px 22px);
  opacity:.9;
}

/* ---------- переключатель языков ---------- */

.langs{
  display:none;                        /* показывается только при работающем JS */
  justify-content:center;
  gap:.4rem;
  margin-bottom:1.4rem;
}

.js .langs{display:flex}

.langs button{
  font:inherit;
  font-size:.76rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  background:transparent;
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:.32rem .82rem;
  cursor:pointer;
  transition:color .2s,border-color .2s,background .2s;
}

.langs button:hover{color:var(--plum);border-color:var(--plum)}

.langs button[aria-selected="true"]{
  color:var(--panel);
  background:var(--plum);
  border-color:var(--plum);
}

/* в тёмной теме --plum светлый, поэтому текст на нём должен быть тёмным */
@media (prefers-color-scheme:dark){
  .langs button[aria-selected="true"]{color:var(--plum-deep)}
}

.msg p{
  margin:0 0 1rem;
  font-size:1.06rem;
  color:var(--ink);
  text-wrap:pretty;
}

.msg p:last-child{margin-bottom:0}

/* при живом JS видна только выбранная фраза */
.js .msg p{display:none}
.js .msg p.is-active{display:block}

/* без JS показываем все три, подписывая языком */
.msg p::before{
  content:attr(data-label) " · ";
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.14em;
  color:var(--plum);
  vertical-align:.12em;
}

.js .msg p::before{content:none}

.sign{
  margin:1.8rem 0 0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:1.1rem;
  color:var(--muted);
}

.foot{
  margin:2.4rem 0 0;
  font-size:.8rem;
  color:var(--muted);
}

/* ---------- мозаика для узких экранов ---------- */

/* Кладка в две колонки: пропорции у фотографий разные, и ломать их нельзя —
   вертикальный жилет в квадрат не помещается. columns + break-inside даёт
   masonry без единой строчки JS. */
.strip{
  columns:2;
  column-gap:.75rem;
  width:min(560px,100%);
  margin-top:2rem;
  position:relative;
  z-index:2;
}

.strip figure{
  break-inside:avoid;
  margin:0 0 .75rem;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:12px;
  padding:.4rem .4rem .9rem;
  box-shadow:0 12px 24px -16px var(--shadow);
}

.strip img{
  width:100%;
  height:auto;
  border-radius:8px;
}

@media (max-width:380px){
  .strip{columns:1;width:min(320px,100%)}
}

@media (min-width:1024px){
  .strip{display:none}
}

@media (max-width:1023px){
  .scatter{display:none}
  .page{padding:2rem 1.25rem;align-content:center}
  .card{padding:2.4rem 1.6rem 2rem;border-radius:18px}
}

/* ---------- доступность ---------- */

:focus-visible{
  outline:2.5px solid var(--plum);
  outline-offset:3px;
  border-radius:4px;
}

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