/* Loova Tuleviku Kool — direction A "Killud". Tokens first; spacing scale s1–s6; type ratio ~1.25.
   One family: Bricolage Grotesque (display at opsz 96, body at its text optical size). */
:root{
  --yellow:#fdf295; --ink:#1d2a66; --ink-2:#3b4680; --pink:#f4a3c0; --lav:#c9c7e5; --lav-2:#eeedf8; --blue:#3d8bca; --paper:#fffdf4;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2.5rem; --s5:4rem; --s6:6.5rem;
  --font:"Bricolage Grotesque",system-ui,sans-serif;
}
:root:lang(ru){--font:"Onest",system-ui,sans-serif}  /* Bricolage has no Cyrillic */
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
html.menu-open{overflow:hidden}
body{font:400 1.125rem/1.6 var(--font);font-optical-sizing:auto;color:var(--ink);background:var(--paper)}
a{color:inherit;text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
img,video{display:block;max-width:100%;height:auto}
.wrap{max-width:84rem;margin:0 auto;padding:0 clamp(1rem,4vw,3rem)}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;z-index:20;background:#fff;padding:.5rem 1rem}
.preview{background:var(--ink);color:var(--yellow);font-size:.85rem;text-align:center;padding:.35rem 1rem}
/* header + nav */
.top{background:var(--yellow);position:relative;z-index:10}
.bar{display:flex;align-items:center;gap:var(--s3);padding-block:var(--s2)}
.brand{display:flex;align-items:center;gap:.75rem;text-decoration:none;font-weight:500;font-size:1.05rem;line-height:1.05;letter-spacing:.02em;text-transform:uppercase;flex:none;margin-right:auto}
.brand img{width:4rem;height:4rem}
.desk>ul{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.15rem 1.1rem;list-style:none;padding:0;font-weight:700;font-size:.95rem}
.desk a{text-decoration:none;display:block;padding:.45rem 0;border-bottom:2px solid transparent}
.desk>ul>li>a:hover,.desk>ul>li>a[aria-current]{border-color:var(--ink)}
.dd{position:relative}
.dd>ul{position:absolute;left:-1rem;top:100%;min-width:17rem;list-style:none;padding:.6rem 1rem .8rem;background:#fff;box-shadow:0 .75rem 2rem rgba(29,42,102,.18);border-radius:.25rem;font-weight:400;display:none}
.dd:hover>ul,.dd:focus-within>ul{display:block}
.dd>ul a{padding:.45rem 0;border:0}
.dd>ul a:hover{text-decoration:underline}
.btn.reg{min-height:2.75rem;padding:.5rem 1.1rem;font-size:.95rem;flex:none}
.menu{display:none}
.util{display:flex;justify-content:flex-end;padding-top:.5rem}
.util+.bar{padding-top:0}
.langs.m{display:none}
.langs{display:flex;list-style:none;padding:0;margin:0;font-weight:700;font-size:.85rem;flex:none}
.langs a{display:block;padding:.3rem .4rem;text-decoration:none;border-radius:.3rem;line-height:1}
.langs a:hover{text-decoration:underline}
.langs a[aria-current]{background:var(--ink);color:var(--yellow)}
/* buttons */
.btn{display:inline-flex;align-items:center;min-height:3.25rem;padding:.8rem 1.4rem;border-radius:999px;font-weight:700;text-decoration:none;background:var(--ink);color:var(--yellow);line-height:1.2}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
.btn:hover{text-decoration:underline}
/* home hero */
.hero{background:var(--yellow);padding-top:clamp(2rem,6vw,5rem)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--s4);align-items:end}
h1{font-weight:800;font-size:clamp(2.3rem,6vw,4.75rem);line-height:.98;letter-spacing:-.03em;overflow-wrap:break-word;hyphens:auto}
.hero h1{font-size:clamp(3rem,7.4vw,6rem);line-height:.92}
.lead{font-size:clamp(1.15rem,1.6vw,1.35rem);line-height:1.5;max-width:34ch;color:var(--ink-2)}
.cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s3)}
.shardstage{position:relative;margin-top:clamp(3rem,7vw,6rem)}
.pano{width:100%;clip-path:polygon(0 16%,31% 0,64% 10%,100% 3%,100% 100%,0 100%)}
.shard{position:absolute;pointer-events:none;z-index:1}
.shard.b{right:9%;top:-4.2rem;width:clamp(5rem,12vw,11rem);aspect-ratio:1.3;background:var(--lav);clip-path:polygon(0 70%,100% 0,78% 100%)}
.shard.c{left:64%;top:-1.2rem;width:clamp(2.5rem,4.5vw,4rem);aspect-ratio:1;background:var(--blue);clip-path:polygon(0 0,100% 40%,30% 100%)}
/* d/e/f: loose triangles cut from the logo's own facets (pink, green, purple) */
.shard.d{left:13%;top:clamp(-6rem,-5.5vw,-2.5rem);width:clamp(4rem,8vw,7.5rem);aspect-ratio:31/36;background:var(--pink);clip-path:polygon(16% 0,100% 100%,0 76%)}
.shard.e{left:31%;top:clamp(-6.5rem,-6vw,-3rem);width:clamp(2.25rem,4vw,3.75rem);aspect-ratio:25/22;background:#5dc29c;clip-path:polygon(0 100%,100% 36%,76% 0)}
.shard.f{left:41%;top:clamp(-3.5rem,-3vw,-1.5rem);width:clamp(3.5rem,7vw,6.5rem);aspect-ratio:32/21.5;background:#ae98cc;clip-path:polygon(0 0,37.5% 100%,100% 16%)}
/* home sections */
section.intro{padding-block:var(--s6) var(--s5)}
h2{font-weight:800;font-size:clamp(1.75rem,3.4vw,2.75rem);line-height:1.05;letter-spacing:-.025em}
.intro-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2rem,6vw,6rem)}
.big{font-size:clamp(1.25rem,2vw,1.5rem);line-height:1.45}
.facts{display:grid;gap:var(--s3);align-content:start}
.facts div{display:grid;grid-template-columns:7.5rem minmax(0,1fr);gap:var(--s2);padding-top:var(--s2);border-top:2px solid var(--ink)}
.facts dt{font-weight:800;line-height:1.4}
.facts dd{line-height:1.5}
.promos{padding-block:var(--s4)}
.promos ul,.life ul{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.promos a{display:block;text-decoration:none}
.promos img{aspect-ratio:1;object-fit:cover;width:100%;margin-bottom:.7rem;clip-path:polygon(0 4%,100% 0,96% 100%,3% 97%)}
.promos li:nth-child(2) img{clip-path:polygon(4% 0,100% 5%,100% 96%,0 100%)}
.promos li:nth-child(3) img{clip-path:polygon(0 0,96% 3%,100% 100%,4% 95%)}
.promos li:nth-child(4) img{clip-path:polygon(2% 5%,100% 0,97% 97%,0 100%)}
.promos strong{display:block;font-weight:800;font-size:1.5rem;line-height:1.1;letter-spacing:-.02em}
.promos span{display:block;color:var(--ink-2);margin-top:.2rem;line-height:1.35}
.promos a:hover strong{text-decoration:underline}
.life{padding-block:var(--s5) 0}
.life h2{margin-bottom:var(--s3)}
.life ul{grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s2)}
.life a{display:block;text-decoration:none;font-size:.95rem;line-height:1.3}
.life img{aspect-ratio:4/5;object-fit:cover;width:100%;margin-bottom:.5rem;clip-path:polygon(0 3%,100% 0,100% 97%,0 100%)}
.life li:nth-child(even) img{clip-path:polygon(0 0,100% 4%,100% 100%,0 96%)}
.life a:hover span{text-decoration:underline}
.home-news{padding-block:var(--s5) var(--s6)}
.door{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(2rem,6vw,6rem);align-items:center}
.door>img{clip-path:polygon(12% 0,100% 6%,88% 100%,0 92%)}
.more{margin-top:var(--s3)}
/* news rows */
.news{list-style:none;padding:0;margin-top:var(--s3)}
.prose .news{padding-left:0}
.news li{display:grid;grid-template-columns:5.5rem minmax(0,1fr);gap:var(--s2);align-items:center;padding-block:.8rem;border-top:1px solid var(--lav)}
.prose .news li+li{margin-top:0}
.news .thumb{width:5.5rem;height:4.25rem;object-fit:cover;clip-path:polygon(6% 0,100% 8%,94% 100%,0 90%);background:var(--lav-2)}
.news .thumb.none{display:block;background:var(--lav)}
.news time{display:block;font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:.95rem}
.news a{font-weight:500;font-size:1.2rem;line-height:1.3;text-decoration:none}
.news a:hover{text-decoration:underline}
/* inner pages */
.band{background:var(--yellow);padding:clamp(2rem,5vw,3.5rem) 0 clamp(3.5rem,7vw,5.5rem);clip-path:polygon(0 0,100% 0,100% 82%,66% 100%,28% 90%,0 98%)}
.band.short{padding-bottom:clamp(2.5rem,5vw,3.5rem)}
.crumbs{font-size:.95rem;margin-bottom:var(--s2);color:var(--ink-2)}
.crumbs span{margin:0 .35rem}
.band h1{max-width:22ch}
.band-sub{margin-top:var(--s2);font-weight:700}
.lead-wrap{margin-top:calc(-1 * var(--s3))}
.feat{max-width:62rem}
.feat img{width:100%;max-height:36rem;object-fit:cover;clip-path:polygon(0 4%,100% 0,100% 100%,0 96%)}
.page-grid{display:grid;grid-template-columns:minmax(0,46rem) minmax(0,17rem);justify-content:space-between;gap:var(--s5);padding-block:var(--s4) var(--s6)}
.page-grid.solo{grid-template-columns:minmax(0,46rem)}
.page-grid.wide{grid-template-columns:minmax(0,60rem) minmax(0,17rem)}
.page-grid.wide.solo{grid-template-columns:minmax(0,1fr)}
.side{align-self:start;position:sticky;top:var(--s3);max-height:calc(100vh - 2.2rem);overflow:auto;scrollbar-width:thin;padding:.4rem;margin:-.4rem}  /* padding = room for the poster hover tilt (else scrollbars flash on hover); max-height +.8rem keeps the content area */
.side>h2,.toc>h2{font-size:1.2rem;padding-top:var(--s2);border-top:2px solid var(--ink);margin-bottom:var(--s1)}
.side ul,.toc ol{list-style:none;padding:0}
.side li a,.toc a{display:block;padding:.6rem 0;text-decoration:none;border-bottom:1px solid var(--lav);line-height:1.3}
.side a:hover{text-decoration:underline}
.side a[aria-current]{font-weight:700}
.side a[aria-current]::before{content:"";display:inline-block;width:.6rem;height:.6rem;margin-right:.45rem;background:var(--pink);clip-path:polygon(0 100%,50% 0,100% 100%)}
.side p{margin-top:var(--s2)}
.posters{list-style:none;padding:0;display:grid;gap:var(--s3)}
.posters a{display:block;transition:transform .15s ease-out}
.posters a:hover{transform:rotate(-1deg)}
.posters img{width:100%;box-shadow:0 .4rem 1.2rem rgba(29,42,102,.12)}
.toc{margin-bottom:var(--s4)}
.toc a{font-size:.95rem;padding:.4rem 0}
.toc-m{display:none}
/* prose */
.prose{overflow-wrap:break-word}
.prose>*+*{margin-top:var(--s2)}
.prose>:first-child{margin-top:0}
.prose h2{font-size:clamp(1.5rem,2.6vw,2rem);margin-top:var(--s5);scroll-margin-top:1rem}
.prose h3{font-weight:800;font-size:1.35rem;line-height:1.2;margin-top:var(--s4);scroll-margin-top:1rem}
.prose h4{font-weight:800;font-size:1.1rem;line-height:1.3;margin-top:var(--s3)}
.prose h2+*,.prose h3+*,.prose h4+*{margin-top:var(--s1)}
.prose>:first-child{margin-top:0}
.prose ul,.prose ol{padding-left:1.4rem}
.prose li+li{margin-top:.3rem}
.prose .cl{padding-left:3.2rem;text-indent:-3.2rem;margin-top:.45rem}
.prose .cl.d2{padding-left:4.4rem;margin-left:1.2rem}
.prose .cl.d3{padding-left:5rem;margin-left:2.4rem}
.prose blockquote{padding-left:var(--s3);font-size:1.25rem;font-style:italic;border-left:1px solid var(--ink)}
.prose hr{border:0;height:2px;background:var(--lav);margin-block:var(--s4)}
.prose figcaption{font-size:.95rem;color:var(--ink-2);margin-top:.4rem}
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(12rem,45%),1fr));gap:.6rem}
.gallery a{display:block}
.gallery img{aspect-ratio:4/3;object-fit:cover;width:100%}
.tbl{overflow-x:auto}
.tbl table{border-collapse:collapse;width:100%;font-size:1rem}
.tbl td,.tbl th{padding:.55rem .7rem;border-bottom:1px solid var(--lav);vertical-align:top;text-align:left}
.tbl th{font-weight:700;border-bottom:2px solid var(--ink)}
iframe{max-width:100%;border:0}
iframe.yt{width:100%;height:auto;aspect-ratio:16/9}
iframe[src*="docs.google.com"]{width:100%;background:#fff}
.index{list-style:none;padding:0 !important}
.index li{padding-block:var(--s2);border-top:2px solid var(--ink)}
.prose .index li+li{margin-top:0}
.index a{font-weight:800;font-size:1.35rem;line-height:1.2;text-decoration:none}
.index a:hover{text-decoration:underline}
.index p{margin-top:.3rem;color:var(--ink-2);font-size:1rem}
/* people */
.people{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s5) clamp(1.5rem,3vw,3rem);margin-top:var(--s5)}
.page-grid.wide.solo .prose>figure:first-child img{width:100%}
.person .portrait{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 25%;clip-path:polygon(0 3%,100% 0,97% 100%,3% 97%);margin-bottom:.8rem}
.person .portrait.none{display:flex;align-items:center;justify-content:center;background:var(--lav);color:var(--ink);font-weight:800;font-size:clamp(3.5rem,7vw,6rem);letter-spacing:-.04em;font-variation-settings:"opsz" 96}
.person h3{margin-top:0 !important;font-size:1.4rem}
.person .role{margin-top:.15rem !important;color:var(--ink-2)}
.person .mail{font-size:1rem;margin-top:.1rem !important;overflow-wrap:anywhere}
.person .bio{font-size:.97rem;line-height:1.45;margin-top:.8rem !important;padding-top:.8rem;border-top:1px solid var(--lav)}
.person .bio>p+p{margin-top:.5rem}
/* register strip + footer */
.regstrip{background:var(--yellow);padding-block:var(--s4);clip-path:polygon(0 8%,40% 0,100% 6%,100% 100%,0 100%)}
.regstrip .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3)}
.regstrip p{font-size:1.2rem;max-width:40ch}
.foot{background:var(--ink);color:#fff;padding-block:var(--s5) var(--s3)}
.foot a{color:#fff}
.foot ul{list-style:none;padding:0}
.foot li a{display:inline-flex;align-items:center;min-height:2.75rem}
.foot-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3)}
.foot-name{font-weight:800;font-size:1.3rem;line-height:1.2;color:var(--yellow)}
.foot-small{margin-top:var(--s4);font-size:.9rem;color:var(--lav)}
/* responsive */
@media (max-width:1180px){
  .desk{display:none}
  .menu{display:block}
  .util{display:none}
  .util+.bar{padding-top:var(--s2)}
  .langs.m{display:flex}
  .menu>summary{display:inline-flex;align-items:center;min-height:2.75rem;padding:0 1.1rem;border-radius:999px;box-shadow:inset 0 0 0 2px var(--ink);font-weight:700;cursor:pointer;list-style:none}
  .menu>summary::-webkit-details-marker{display:none}
  .menu .m-open,.menu[open] .m-closed{display:none}
  .menu[open] .m-open{display:inline}
  .menu>nav{position:absolute;left:0;right:0;top:100%;background:var(--yellow);padding:var(--s1) clamp(1rem,4vw,3rem) var(--s4);max-height:calc(100vh - 6rem);overflow:auto;box-shadow:0 1rem 1.5rem rgba(29,42,102,.15)}
  .menu ul{list-style:none;padding:0}
  .menu>nav>ul>li{border-top:1px solid rgba(29,42,102,.25)}
  .menu a:not(.btn),.menu details>summary{display:flex;align-items:center;min-height:3rem;text-decoration:none;font-weight:800;font-size:1.2rem;line-height:1.2;cursor:pointer}
  .menu details>summary{list-style:none;justify-content:space-between}
  .menu details>summary::-webkit-details-marker{display:none}
  .menu details>summary::after{content:"+";font-weight:500}
  .menu details[open]>summary::after{content:"–"}
  .menu details ul{padding:0 0 var(--s2) var(--s2)}
  .menu details ul a:not(.btn){font-weight:400;font-size:1.05rem;min-height:2.75rem}
  .menu details .sec-top a{font-weight:700 !important}
  .menu-reg{padding-top:var(--s3)}
}
@media (max-width:900px){
  .hero-grid,.intro-grid,.door,.page-grid,.page-grid.solo,.page-grid.wide{grid-template-columns:minmax(0,1fr)}
  .pano{clip-path:polygon(0 9%,45% 0,100% 7%,100% 100%,0 100%)}
  .promos ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .life ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .people{grid-template-columns:repeat(2,minmax(0,1fr))}
  .side{position:static;max-height:none}
  .posters{grid-template-columns:repeat(auto-fill,minmax(min(14rem,100%),1fr))}
  .toc{display:none}
  .toc-m{display:block;border:2px solid var(--ink);padding:.2rem 1rem;margin-bottom:var(--s3)}
  .toc-m summary{font-weight:800;min-height:2.75rem;display:flex;align-items:center;cursor:pointer}
  .toc-m ol{padding:0 0 var(--s2) 1.2rem}
  .toc-m a{display:block;padding:.35rem 0}
  .foot-grid{grid-template-columns:1fr 1fr}
  .door>img{max-width:min(22rem,100%)}
  section.intro{padding-top:var(--s5)}
}
@media (max-width:560px){
  .btn.reg{display:none}
  .news li{grid-template-columns:4.5rem minmax(0,1fr)}
  .news .thumb{width:4.5rem;height:3.6rem}
  .facts div{grid-template-columns:1fr;gap:.2rem}
  .foot-grid{grid-template-columns:1fr}
  .brand span{font-size:.92rem}
  .bar{gap:var(--s1)}
  .promos strong{font-size:1.25rem;hyphens:auto;overflow-wrap:anywhere}
  .band{clip-path:polygon(0 0,100% 0,100% 90%,60% 100%,0 94%)}
  .life ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .people{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
  .prose .cl{padding-left:2.4rem;text-indent:-2.4rem}
  .prose .cl.d2,.prose .cl.d3{margin-left:.8rem}
  .shardstage{margin-top:4rem}
  .shard.d{left:30%;width:3.5rem;top:-3.4rem}
  .shard.e{left:47%;width:2rem;top:-3.6rem}
  .shard.f{display:none}
  .shard.b{top:-2.2rem}
}
@media (max-width:400px){
  .menu>summary{padding:0 .8rem}
  .langs a{padding:.3rem .3rem}
  .bar{gap:.4rem}
  .brand{gap:.5rem}
}
@media (max-width:350px){
  .brand span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}