/* Вожатый ТО — «Отрядный уголок».
   Страница — тетрадный лист в клетку. Цвета стенгазеты: синяя ручка, красная пометка, зелёная гуашь, жёлтый стикер.
   Тёмный лист ватмана (--sheet) — только для созвездия, окна анкеты и подвала. */
:root{
  --paper:#F6F8FB; --grid:rgba(70,120,200,.12); --card:#FFFFFF;
  --ink:#1D2433; --mute:#5A6474; --line:#D8DEE8;
  --pen:#2548B8; --pen-soft:#E6ECFB;
  --red:#D93A2B; --red-soft:#FDE9E6;
  --green:#2E8B57; --green-soft:#E3F3EA;
  --sun:#FFD54A; --sun-soft:#FFF5CC; --sun-ink:#7A5A00;
  --sheet:#21306B; --sheet-2:#2B3C80; --sheet-ink:#C9D3F2; --star:#FFF3C4;
  --tape:rgba(255,238,178,.72);
  --wrap:1120px; --gut:20px;
  --f-hand:"Caveat",cursive;
  --f-text:"Golos Text",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --ease:cubic-bezier(.2,.7,.2,1);
  --shadow:0 1px 1px rgba(29,36,51,.06),0 8px 22px -12px rgba(29,36,51,.28);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;color:var(--ink);font:400 17px/1.6 var(--f-text);text-rendering:optimizeLegibility;
  background-color:var(--paper);background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:3px solid var(--pen);outline-offset:3px;border-radius:4px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--sun);color:var(--ink);padding:10px 16px;border-radius:6px;font-weight:600}
.skip:focus{left:8px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Заголовки: от руки маркером */
h1,h2{font-family:var(--f-hand);font-weight:700;line-height:1.02;letter-spacing:0;margin:0;color:var(--ink)}
h1{font-size:clamp(46px,7vw,84px)}
h2{font-size:clamp(34px,4.4vw,50px)}
h3{font:600 19px/1.3 var(--f-text);margin:0}
p{margin:0 0 1em}
.lead{font-size:clamp(17px,1.8vw,19.5px);color:var(--mute);max-width:60ch}
.scrib{display:block;width:min(300px,70%);height:18px;margin-top:6px;overflow:visible}
.scrib path{fill:none;stroke:var(--red);stroke-width:5;stroke-linecap:round}
@media (prefers-reduced-motion:no-preference){
  .scrib path{stroke-dasharray:320;stroke-dashoffset:320;animation:draw 1s var(--ease) .25s forwards}
}
@keyframes draw{to{stroke-dashoffset:0}}

/* Скотч и стикеры */
.taped{position:relative}
.taped::before,.taped::after{content:"";position:absolute;width:86px;height:26px;background:var(--tape);box-shadow:0 1px 2px rgba(0,0,0,.08);z-index:2;pointer-events:none}
.taped::before{top:-11px;left:18px;transform:rotate(-6deg)}
.taped::after{top:-10px;right:18px;transform:rotate(5deg)}

/* Шапка: полоска бумаги, активный раздел обведён красной ручкой */
.top{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:2px solid var(--ink)}
.top__in{display:flex;align-items:center;gap:20px;height:66px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;white-space:nowrap}
.brand svg{width:34px;height:34px;flex:none;transform:rotate(-6deg)}
.brand span{font:700 28px/1 var(--f-hand)}
.brand small{display:block;font:400 12px/1.2 var(--f-text);color:var(--mute);margin-top:2px}
.nav{margin-left:auto;display:flex;gap:2px}
.nav a{position:relative;padding:8px 11px;text-decoration:none;font-size:15px;font-weight:500;color:var(--ink)}
.nav a:hover{color:var(--pen)}
.nav a[aria-current=page]{color:var(--red)}
.nav a[aria-current=page]::after{content:"";position:absolute;inset:-2px -4px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44' preserveAspectRatio='none'%3E%3Cpath d='M20 6C60 0 112 6 116 20c4 16-52 22-86 20C8 39 1 30 5 20 9 10 38 5 70 5' fill='none' stroke='%23D93A2B' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center/100% 100% no-repeat;pointer-events:none}
.burger{display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;align-items:center;justify-content:center}
.burger svg{width:26px;height:26px}
@media (max-width:1140px){
  .burger{display:flex}
  .nav{position:fixed;inset:66px 0 auto 0;flex-direction:column;background:var(--card);padding:8px var(--gut) 20px;gap:0;border-bottom:2px solid var(--ink);
       transform:translateY(-8px);opacity:0;visibility:hidden;transition:opacity .2s,transform .25s var(--ease),visibility 0s .25s}
  .nav.is-open{transform:none;opacity:1;visibility:visible;transition:opacity .2s,transform .25s var(--ease)}
  .nav a{padding:13px 12px;font-size:17px;align-self:flex-start}
}

/* Разделы */
.sec{padding:clamp(48px,7vw,88px) 0}
.sec--mist{background:rgba(255,255,255,.55);border-top:2px dashed var(--line);border-bottom:2px dashed var(--line)}
.sec__head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px;margin-bottom:28px}
.sec__head p{margin:8px 0 0;color:var(--mute);max-width:60ch}
.more{font-weight:600;color:var(--pen);text-decoration:underline;text-decoration-style:wavy;text-decoration-thickness:1.5px;text-underline-offset:5px;white-space:nowrap}
.more:hover{color:var(--red)}

/* Кнопки-стикеры */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:6px;font-weight:600;text-decoration:none;transition:transform .15s var(--ease),box-shadow .15s}
.btn svg{width:18px;height:18px}
.btn--fire{background:var(--sun);color:var(--ink);box-shadow:2px 3px 0 var(--ink);transform:rotate(-1.2deg)}
.btn--fire:hover{transform:rotate(0) translateY(-1px);box-shadow:3px 4px 0 var(--ink)}
.btn--fire:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--ink)}
.btn--ghost,.btn--line{background:var(--card);color:var(--ink);border:2px solid var(--ink);transform:rotate(.8deg)}
.btn--ghost:hover,.btn--line:hover{transform:rotate(0);color:var(--pen);border-color:var(--pen)}

/* Шапка внутренних страниц: заголовок от руки на листе */
.phead{padding:44px 0 8px;position:relative}
.phead h1{font-size:clamp(46px,6.4vw,76px);max-width:16ch}
.phead .lead{margin-top:16px}
.phead .lead a{color:var(--pen);font-weight:600}

/* Главная */
.hero{position:relative;overflow:hidden}
.hero__in{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:36px;align-items:center;padding-top:40px;padding-bottom:56px}
.hero h1{max-width:10ch}
.hero .lead{margin:22px 0 30px}
.hero__btns{display:flex;flex-wrap:wrap;gap:14px}
.hero__note{position:absolute;right:-10px;bottom:-26px;z-index:3;background:var(--sun);padding:10px 14px 12px;font:700 22px/1.05 var(--f-hand);transform:rotate(4deg);box-shadow:var(--shadow);max-width:180px}

/* Созвездие на листе ватмана */
.sky{position:relative;margin:0;background:radial-gradient(90% 70% at 30% 20%,var(--sheet-2),var(--sheet) 70%);border-radius:4px;padding:10px 10px 4px;transform:rotate(1.2deg);box-shadow:0 2px 2px rgba(0,0,0,.08),0 24px 40px -22px rgba(20,30,80,.6)}
.sky svg{width:100%;height:auto;display:block;overflow:visible}
.sky__land{fill:rgba(255,255,255,.04);stroke:rgba(201,211,242,.55);stroke-width:2.2;stroke-dasharray:1 7;stroke-linecap:round;stroke-linejoin:round}
.sky__line{stroke:rgba(255,213,74,.8);stroke-width:2.2;fill:none;stroke-linejoin:round;stroke-linecap:round}
.sky__star{fill:var(--star)}
.sky__star.is-big{fill:var(--sun)}
.sky__hit{fill:transparent;cursor:pointer}
.sky__city{cursor:pointer}
.sky__city text{font:700 30px var(--f-hand);fill:#fff}
.sky__city .cnt{font:500 16px var(--f-text);fill:var(--sheet-ink)}
.sky__city:hover text:first-child,.sky__city:focus text:first-child{fill:var(--sun)}
.sky__cap{font-size:14px;color:var(--sheet-ink);margin:4px 6px 8px}
.sky__tip{position:absolute;z-index:5;pointer-events:none;background:var(--card);color:var(--ink);border-radius:4px;padding:10px 14px;font-size:14px;line-height:1.35;
  box-shadow:var(--shadow);transform:translate(-50%,calc(-100% - 14px)) rotate(-1deg);opacity:0;transition:opacity .15s;white-space:nowrap}
.sky__tip.is-on{opacity:1;pointer-events:auto}
.sky__tip b{display:block;font:700 22px/1.1 var(--f-hand)}
.sky__tip a{color:var(--pen);font-weight:600}
@media (prefers-reduced-motion:no-preference){
  .sky__star.tw{animation:tw 4.5s ease-in-out infinite}
  .sky__star.tw2{animation:tw 6s ease-in-out 1.5s infinite}
  .sky__line{stroke-dasharray:var(--len);stroke-dashoffset:var(--len);animation:draw 1.8s var(--ease) .5s forwards}
  @keyframes tw{50%{opacity:.4}}
}
@media (max-width:860px){
  .hero__in{grid-template-columns:1fr;padding-top:24px;gap:40px}
  .sky{transform:rotate(.6deg);margin:0 -6px}
  .hero__note{right:6px;bottom:-22px;font-size:19px}
}

/* Направления на главной: стикер + листки */
.dirs{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:22px}
.dir{grid-column:span 4;display:flex;flex-direction:column;gap:10px;padding:26px 24px 22px;background:var(--card);box-shadow:var(--shadow);text-decoration:none;transition:transform .2s var(--ease)}
.dir:nth-child(2){transform:rotate(-.8deg)}
.dir:nth-child(3){transform:rotate(.6deg)}
.dir:nth-child(4){transform:rotate(-.4deg)}
.dir:hover{transform:rotate(0) translateY(-3px)}
.dir h3{font:700 30px/1.05 var(--f-hand);color:var(--pen)}
.dir p{margin:0;color:var(--mute);font-size:16px}
.dir__ic{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--ink);color:var(--ink)}
.dir__ic svg{width:24px;height:24px}
.dir--main{grid-column:span 12;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:28px;align-items:center;background:var(--sun);padding:34px;transform:rotate(-.5deg)}
.dir--main h3{font-size:clamp(40px,4.6vw,56px);color:var(--ink)}
.dir--main p{color:#3E3A20;font-size:17px}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.fact{background:rgba(255,255,255,.6);border:2px dashed rgba(29,36,51,.35);border-radius:4px;padding:14px 14px 12px}
.fact b{display:block;font:700 40px/1 var(--f-hand);color:var(--red)}
.fact svg{width:32px;height:32px;stroke:var(--red)}
.fact span{font-size:14px;color:#3E3A20}
@media (max-width:860px){.dir,.dir--main{grid-column:span 12}.dir--main{grid-template-columns:1fr;padding:26px}}
@media (max-width:640px){
  .facts{grid-template-columns:1fr;gap:8px}
  .fact{display:flex;align-items:center;gap:14px;padding:10px 12px}
  .fact b{font-size:34px;min-width:52px}
  .fact span{font-size:15px}
}

/* Ситуации (копилка): обведённые фразы */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 16px;border-radius:999px;border:2px solid var(--ink);background:var(--card);font-size:15.5px;font-weight:500;text-decoration:none;transition:background-color .15s,color .15s,transform .15s}
.chip:nth-child(odd){transform:rotate(-1deg)}
.chip:nth-child(even){transform:rotate(.8deg)}
.chip:hover{color:var(--pen);border-color:var(--pen)}
.chip[aria-pressed=true],.chip.is-on{background:var(--pen);border-color:var(--pen);color:#fff}
.chip .n{font-size:13px;color:var(--mute);font-weight:400}
.chip.is-on .n,.chip[aria-pressed=true] .n{color:#D6DFFA}

.pick{margin-top:26px;background:var(--sun);padding:26px 28px;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:center;box-shadow:var(--shadow);transform:rotate(-.6deg)}
.pick[hidden]{display:none}
.pick h3{font:700 clamp(28px,3vw,38px)/1.05 var(--f-hand)}
.pick .why{font-size:15px;color:#5B4A00;margin:0 0 6px}
.pick .btn--fire{background:var(--card)}
@media (max-width:700px){.pick{grid-template-columns:1fr;padding:22px}}

.kit{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.kit__it{display:flex;gap:14px;align-items:center;padding:14px;background:var(--card);box-shadow:var(--shadow);border-left:4px solid var(--line);scroll-margin-top:90px;transition:border-color .2s,background-color .2s}
.kit__it:target,.kit__it.is-hl{border-left-color:var(--red);background:var(--sun-soft)}
.kit__it h3{font:600 16px/1.3 var(--f-text)}
.kit__it .st{font-size:13.5px;color:var(--mute);margin-top:4px}
.kit__it a{color:var(--pen);font-weight:600}
.kit__it .dir__ic{width:42px;height:42px;flex:none}
.kit__it .dir__ic svg{width:22px;height:22px}

.books{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:24px}
.book{display:flex;flex-direction:column;gap:10px}
.book img{width:100%;aspect-ratio:3/4;object-fit:cover;background:var(--card);box-shadow:var(--shadow);border:6px solid var(--card)}
.book:nth-child(odd) img{transform:rotate(-1.5deg)}
.book:nth-child(even) img{transform:rotate(1.2deg)}
.book h3{font:600 17px/1.35 var(--f-text);margin-top:6px}
.book p{margin:0;color:var(--mute);font-size:15px}
@media (max-width:640px){.books{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}.book h3{font-size:15px}.book p{font-size:13.5px}}

.phones{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.phone{padding:18px;background:var(--card);box-shadow:var(--shadow)}
.phone h3{font:600 16px/1.3 var(--f-text);margin-bottom:8px}
.phone dl{margin:0;display:grid;gap:6px}
.phone dt{font-size:13.5px;color:var(--mute)}
.phone dd{margin:0 0 4px}
.phone a{font:600 19px/1.3 var(--f-text);text-decoration:none;color:var(--pen);font-variant-numeric:tabular-nums}
.phone--hot{background:var(--sun-soft);transform:rotate(-.6deg)}

/* Вожатые: поиск и фильтры */
.tools{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;margin-bottom:18px}
.search{position:relative}
.search input{width:100%;min-height:50px;padding:12px 16px 12px 46px;border-radius:6px;border:2px solid var(--ink);font:inherit;background:var(--card)}
.search input:focus{outline:none;border-color:var(--pen);box-shadow:0 0 0 3px var(--pen-soft)}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:20px;height:20px;color:var(--mute)}
.sel{min-height:50px;padding:0 40px 0 16px;border-radius:6px;border:2px solid var(--ink);font:inherit;background:var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231D2433' stroke-width='2'/%3E%3C/svg%3E") right 16px center no-repeat;-webkit-appearance:none;appearance:none}
.count{font-size:15px;color:var(--mute);margin:16px 0}
.hint{font:700 22px/1.1 var(--f-hand);color:var(--red);margin:-8px 0 16px}
@media (hover:hover) and (pointer:fine){.hint{display:none}}
@media (max-width:640px){
  .tools{grid-template-columns:1fr 1fr;gap:8px}.tools .search{grid-column:1/-1}
  .tools .sel{width:100%;font-size:15px;padding-left:12px;padding-right:30px;background-position:right 10px center}
  #cities{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 calc(var(--gut) * -1);padding:6px var(--gut)}
  #cities::-webkit-scrollbar{display:none}
  #cities .chip{flex:none}
}

/* Карточки вожатых — полароиды. Лицевая сторона: фото и подпись от руки; оборот: тетрадный лист с опытом. */
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr));gap:28px 22px;padding-top:6px}
.vc{perspective:1100px;transition:transform .25s var(--ease)}
.vc:nth-child(3n+1){transform:rotate(-1.4deg)}
.vc:nth-child(3n+2){transform:rotate(.9deg)}
.vc:nth-child(5n+3){transform:rotate(-.5deg)}
.vc:nth-child(4n){transform:rotate(1.6deg)}
.vc:hover,.vc.is-flip,.vc:focus-within{transform:rotate(0);z-index:2}
.vc__in{position:relative;aspect-ratio:3/4.4;transform-style:preserve-3d;transition:transform .6s var(--ease)}
.vc.is-flip .vc__in{transform:rotateY(180deg)}
.vc__f,.vc__b{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:var(--shadow)}
.vc__f{display:flex;flex-direction:column;width:100%;text-align:left;background:var(--card);padding:9px 9px 0;transition:box-shadow .25s}
.vc__f:hover{box-shadow:0 2px 2px rgba(29,36,51,.08),0 22px 34px -16px rgba(29,36,51,.45)}
.vc__ph{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--sheet)}
.vc__ph img{width:100%;height:100%;object-fit:cover;object-position:50% 28%}
.vc__cap{padding:6px 4px 10px}
.vc__cap b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:700 23px/1 var(--f-hand);color:var(--pen);min-height:2em}
.vc__cap span{display:block;font-size:13px;color:var(--mute);margin-top:2px}
.vc__exp{position:absolute;top:-8px;left:-10px;z-index:2;width:64px;height:64px;border-radius:50%;background:var(--sun);color:var(--ink);display:grid;place-content:center;text-align:center;
  font:700 15px/1 var(--f-text);transform:rotate(-12deg);box-shadow:0 2px 4px rgba(0,0,0,.18)}
.vc__exp small{display:block;font:700 17px/1 var(--f-hand)}
.vc__exp--new{background:var(--green);color:#fff;font:700 18px/1 var(--f-hand);width:70px;height:70px}
.vc__turn{position:absolute;top:16px;right:16px;z-index:1;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);display:grid;place-items:center}
.vc__turn svg{width:16px;height:16px}
.vc__ini{position:absolute;inset:0;display:grid;place-items:center}
.vc__ini svg{position:absolute;inset:0;width:100%;height:100%;opacity:.4}
.vc__ini span{position:relative;font:700 72px var(--f-hand);color:#fff}
.vc__b{transform:rotateY(180deg);display:flex;flex-direction:column;padding:16px 16px 14px 34px;font-size:14px;line-height:1.4;
  background:var(--card) repeating-linear-gradient(transparent 0 23px,rgba(70,120,200,.18) 23px 24px);background-position:0 14px}
.vc__b::before{content:"";position:absolute;top:0;bottom:0;left:24px;width:2px;background:rgba(217,58,43,.45)}
.vc__b h3{font:700 25px/1 var(--f-hand);color:var(--pen);margin:0 0 4px}
.vc__b .stars{margin:0 0 10px}
.vc__b dl{margin:0;display:grid;gap:6px;align-content:start;overflow:hidden;flex:1;min-height:0}
.vc__b dt{font-size:12px;color:var(--red);font-weight:600}
.vc__b dd{margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.vc__b dd.pl{white-space:pre-line}
.vc__act{display:flex;gap:8px;margin-top:10px}
.vc__act .btn{min-height:40px;padding:8px 12px;font-size:14px;flex:1;box-shadow:2px 2px 0 var(--ink)}
.vc__act .back{flex:none;width:40px;border:2px solid var(--ink);border-radius:50%;display:grid;place-items:center;background:var(--card)}
.vc__act .back svg{width:18px;height:18px}
@media (max-width:520px){
  .people{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px}
  .vc__f{padding:6px 6px 0}
  .vc__cap{padding:4px 2px 7px}
  .vc__cap b{font-size:19px}
  .vc__cap span{font-size:11.5px}
  .vc__exp{width:50px;height:50px;font-size:12.5px;top:-8px;left:-8px}
  .vc__exp small{font-size:14px}
  .vc__exp--new{width:56px;height:56px;font-size:15px}
  .vc__turn{top:11px;right:11px;width:26px;height:26px}
  .vc__ini span{font-size:52px}
  .vc__b{padding:12px 10px 10px 24px;font-size:12.5px}
  .vc__b::before{left:16px}
  .vc__b h3{font-size:20px}
  .vc__b dt{font-size:11px}
  .vc__b dd{-webkit-line-clamp:2}
  .vc__act{margin-top:8px;gap:6px}
  .vc__act .btn{min-height:36px;padding:6px 8px;font-size:13px}
  .vc__act .back{width:36px}
}
@media (prefers-reduced-motion:reduce){
  .vc,.vc__in{transition:none}
  .vc.is-flip .vc__in{transform:none}
  .vc__b{transform:none;opacity:0;visibility:hidden}
  .vc.is-flip .vc__b{opacity:1;visibility:visible}
  .vc.is-flip .vc__f{visibility:hidden}
}

.stars{display:inline-flex;gap:2px;vertical-align:-2px;margin-left:2px}
.stars i{width:11px;height:11px;background:var(--sun);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.vc__b .stars i{background:var(--red)}
.stars i.o,.vc__b .stars i.o{background:var(--line)}
.empty{padding:40px 20px;text-align:center;color:var(--mute);border:2px dashed var(--line);background:var(--card)}

/* Аватары (команда) */
.ava{position:relative;width:72px;height:72px;border-radius:50%;overflow:hidden;flex:none;background:var(--line)}
.ava img{width:100%;height:100%;object-fit:cover}
.ava--ini{display:grid;place-items:center;font:700 30px var(--f-hand);color:#fff}
.ava--ini svg{position:absolute;inset:0;width:100%;height:100%;opacity:.3}
.ava--ini span,.mate .ava--ini span{position:relative;color:#fff;font-size:inherit}

/* Окно анкеты */
dialog{border:0;padding:0;max-width:min(780px,calc(100vw - 24px));width:100%;border-radius:4px;background:var(--card);color:var(--ink);box-shadow:0 30px 80px rgba(10,16,40,.45);overflow:visible}
dialog::backdrop{background:rgba(20,26,50,.72)}
.card{display:grid;grid-template-columns:270px minmax(0,1fr);position:relative}
.card__ph{background:var(--sheet);min-height:100%;display:grid;place-items:center;position:static;overflow:hidden;margin:12px 0 12px 12px}
.card__ph img{width:100%;height:100%;object-fit:cover}
.card__ph img.contain{object-fit:contain;padding:12px}
.card__ph .vc__ini{position:relative;inset:auto;width:100%;height:100%;min-height:300px}
.card__body{padding:28px 26px 24px;position:relative;max-height:calc(100dvh - 60px);overflow:auto}
.card__body h2{font-size:40px;color:var(--pen);padding-right:40px}
.card__body dl{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:8px 16px;margin:16px 0 0;font-size:15.5px}
.card__body dt{color:var(--red);font-weight:500}
.card__body dd{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.card__body a{color:var(--pen);font-weight:600}
.x{position:absolute;top:12px;right:12px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--card);border:2px solid var(--ink);z-index:3}
.x svg{width:18px;height:18px}
.card__nav{display:flex;align-items:center;gap:10px;margin-top:20px;padding-top:16px;border-top:2px dashed var(--line)}
.card__nav button{width:46px;height:46px;border-radius:50%;border:2px solid var(--ink);display:grid;place-items:center;background:var(--card)}
.card__nav button:hover{color:var(--pen);border-color:var(--pen)}
.card__nav svg{width:20px;height:20px}
.card__nav span{font:700 22px var(--f-hand);color:var(--mute);flex:1;text-align:center}
.card.is-in{animation:cardin .28s var(--ease)}
@keyframes cardin{from{opacity:.4;transform:translateX(var(--dx,0))}}
@media (prefers-reduced-motion:reduce){.card.is-in{animation:none}}
@media (max-width:640px){
  dialog{max-height:calc(100dvh - 24px);overflow:auto}
  .card{grid-template-columns:1fr}
  .card__ph{aspect-ratio:4/3;min-height:0;position:relative;margin:10px 10px 0}
  .card__ph img{position:absolute;inset:0;object-position:50% 30%}
  .card__ph .vc__ini{min-height:0}
  .card__body{max-height:none;overflow:visible;padding:20px 20px 22px}
  .card__body h2{font-size:34px}
  .card__body dl{grid-template-columns:1fr;gap:2px}
  .card__body dt{margin-top:8px}
}

/* Карта лагерей (по нажатию) */
.mapbox{position:relative;overflow:hidden;background:radial-gradient(90% 70% at 30% 20%,var(--sheet-2),var(--sheet) 70%);min-height:360px;display:grid;place-items:center;text-align:center;color:#fff;box-shadow:var(--shadow)}
.mapbox h3{font:700 36px/1 var(--f-hand)}
.mapbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.mapbox p{color:var(--sheet-ink);margin:10px auto 18px;max-width:40ch;padding:0 16px}

/* Новости: листки с фото */
.news{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px;align-items:start}
.post{background:var(--card);box-shadow:var(--shadow);display:flex;flex-direction:column;padding:8px 8px 0}
.post:nth-child(3n+2){transform:rotate(.5deg)}
.post:nth-child(3n){transform:rotate(-.4deg)}
.post__ph{display:grid;gap:3px;grid-template-columns:repeat(2,1fr)}
.post__ph button{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--line)}
.post__ph button:only-child{grid-column:span 2;aspect-ratio:16/10}
.post__ph img{width:100%;height:100%;object-fit:cover}
.post__ph .more-n{position:absolute;inset:0;display:grid;place-items:center;background:rgba(33,48,107,.6);color:#fff;font:700 34px var(--f-hand)}
.post__b{padding:14px 10px 16px}
.post time{font:700 20px/1 var(--f-hand);color:var(--red)}
.post__t{margin:8px 0 10px;font-size:16px;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.post__t.clip{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.post__a{display:flex;gap:16px;flex-wrap:wrap;font-size:15px}
.post__a a,.post__a button{color:var(--pen);font-weight:600;text-decoration:none}
.sk{background:linear-gradient(90deg,#EEF1F6,#E2E7EF,#EEF1F6);background-size:200% 100%;height:320px}
@media (prefers-reduced-motion:no-preference){.sk{animation:sk 1.2s linear infinite}@keyframes sk{to{background-position:-200% 0}}}

/* Галерея: альбомы как пачки фотографий */
.albums{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:34px 26px}
.alb{text-align:left;display:flex;flex-direction:column;gap:12px}
.alb__c{position:relative;display:grid;grid-template-columns:2fr 1fr;grid-template-rows:1fr 1fr;gap:4px;aspect-ratio:4/3;background:var(--card);padding:8px;box-shadow:var(--shadow);transition:transform .2s var(--ease)}
.alb__c::before{content:"";position:absolute;inset:0;background:var(--card);box-shadow:var(--shadow);transform:rotate(-3deg);z-index:-1}
.alb:nth-child(odd) .alb__c{transform:rotate(1deg)}
.alb:hover .alb__c{transform:rotate(-.5deg) translateY(-3px)}
.alb__c img{width:100%;height:100%;object-fit:cover}
.alb__c img:first-child{grid-row:span 2}
.alb__c img:only-child{grid-column:span 2}
.alb__c .n{position:absolute;right:-8px;bottom:-10px;background:var(--sun);color:var(--ink);font:700 20px/1 var(--f-hand);padding:6px 10px;transform:rotate(-4deg);box-shadow:0 2px 4px rgba(0,0,0,.15)}
.alb h3{font:700 26px/1.05 var(--f-hand);color:var(--pen)}
.alb:hover h3{color:var(--red)}
.albums,.news,.people{isolation:isolate}

.lb{max-width:100vw;max-height:100dvh;width:100vw;height:100dvh;border-radius:0;background:rgba(14,18,36,.96);color:#fff}
.lb[open]{display:grid;grid-template-rows:auto minmax(0,1fr) auto}
.lb__top{display:flex;align-items:center;gap:12px;padding:12px 16px}
.lb__top p{margin:0;font-size:15px;color:var(--sheet-ink);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb__top .x{position:static;background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.4)}
.lb__st{position:relative;display:grid;place-items:center;overflow:hidden;touch-action:pan-y}
.lb__st img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;object-fit:contain}
.lb__nav{position:absolute;z-index:2;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff}
.lb__nav svg{width:22px;height:22px}
.lb__nav--p{left:12px}.lb__nav--n{right:12px}
.lb__txt{padding:12px 16px 18px;max-width:760px;margin:0 auto;font-size:15px;color:var(--sheet-ink);max-height:24vh;overflow:auto;white-space:pre-line}
@media (max-width:640px){.lb__nav{display:none}}

/* Школа вожатых: талон-стикер */
.split{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:44px;align-items:start}
@media (max-width:860px){.split{grid-template-columns:1fr;gap:32px}}
.ticket{background:var(--card);box-shadow:var(--shadow);transform:rotate(1deg)}
.ticket__h{background:var(--sun);padding:22px 24px 18px}
.ticket__h b{font:700 64px/.95 var(--f-hand);display:block;color:var(--red)}
.ticket__h span{font-weight:600}
.ticket__b{padding:22px 24px;display:grid;gap:14px}
.ticket__b dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 18px;font-size:16px}
.ticket__b dt{color:var(--mute)}
.ticket__b dd{margin:0;font-weight:500}
.todo{color:var(--sun-ink);background:var(--sun-soft);border-radius:4px;padding:1px 6px;font-weight:500}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;gap:16px}
.steps li{counter-increment:s;display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.steps li::before{content:counter(s);width:44px;height:44px;border-radius:50%;border:2px solid var(--red);color:var(--red);display:grid;place-items:center;font:700 26px/1 var(--f-hand);transform:rotate(-8deg)}
.steps b{display:block}
.steps span{color:var(--mute);font-size:16px}
.ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.ticks li{padding-left:30px;position:relative}
.ticks li::before{content:"";position:absolute;left:3px;top:.4em;width:16px;height:16px;background:var(--red);clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* О центре, проекты */
.prose{max-width:70ch}
.prose h2{margin:0 0 16px}
.prose p,.prose li{color:#2E3748}
.docs{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.doc{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;padding:14px 16px;background:var(--card);box-shadow:var(--shadow);text-decoration:none}
a.doc:hover b{color:var(--pen)}
.doc svg{width:40px;height:40px;color:var(--red)}
.doc b{display:block;font-weight:600;line-height:1.35}
.doc span{font-size:14px;color:var(--mute)}
.team{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.mate{display:flex;gap:14px;align-items:center;padding:14px;background:var(--card);box-shadow:var(--shadow)}
.mate:nth-child(odd){transform:rotate(-.6deg)}
.mate b{display:block;font:700 24px/1.05 var(--f-hand);color:var(--pen)}
.mate span{font-size:14.5px;color:var(--mute)}
.proj{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:34px;align-items:center;padding:34px 0;border-top:2px dashed var(--line)}
.proj:first-child{border-top:0;padding-top:0}
.proj img{aspect-ratio:4/3;object-fit:cover;width:100%;border:8px solid var(--card);box-shadow:var(--shadow);transform:rotate(-1.5deg)}
.proj:nth-child(even) img{transform:rotate(1.2deg)}
.proj h2{margin-bottom:12px}
.proj p{color:#2E3748}
@media (max-width:760px){.proj{grid-template-columns:1fr;gap:18px}}

/* Подвал: тёмный лист ватмана */
.foot{background:var(--sheet);color:var(--sheet-ink);padding:48px 0 28px;font-size:15.5px;margin-top:20px}
.foot__g{display:grid;grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr));gap:28px}
.foot h2{font:700 30px/1.05 var(--f-hand);color:#fff;margin-bottom:12px}
.foot a{color:#fff;text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.foot .big{font:600 22px/1.2 var(--f-text);color:var(--sun)}
.soc{display:flex;gap:10px;margin-top:14px}
.soc a{width:44px;height:44px;border-radius:50%;border:2px solid rgba(255,255,255,.5);display:grid;place-items:center}
.soc svg{width:22px;height:22px}
.foot__b{border-top:2px dashed rgba(201,211,242,.3);margin-top:32px;padding-top:18px;font-size:14px;display:flex;flex-wrap:wrap;gap:8px 24px;justify-content:space-between}
@media (max-width:760px){.foot__g{grid-template-columns:1fr}}
.vc__f{overflow:visible}
.sky svg{overflow:hidden}
.sky__cap{padding-right:190px}
:root{--grid:rgba(70,120,200,.15)}
@media (max-width:860px){.sky__cap{padding-right:0;margin-bottom:34px}}