/* Lyceum No. 23 «Sobornyi» — the home page: hero, the director's welcome, latest news, the numbers strip.
   Shared fonts, tokens, header and footer come from css/site.css; the header sits over the hero (body.has-hero). */

.home-page{padding-bottom:0}
.home-kicker{font-size:calc(13px * var(--fs-scale,1));font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue)}

/* ---------- Background: the building stays fixed behind the whole page, darkened ---------- */
.home-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--blue-ink)}
.home-bg-img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.home-bg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 70% 60% at 50% 52%,rgba(6,14,30,.35),rgba(6,14,30,0) 70%),linear-gradient(180deg,rgba(6,14,30,.55) 0%,rgba(6,14,30,.6) 55%,rgba(6,14,30,.78) 100%)}

/* ---------- Hero: one empty screen of photo with the name over it ----------
   The name is fixed to the screen; js/home.js shrinks it and slides it up into the header as you scroll,
   then the page (.home-sheet) rises over the photo. */
.home-hero{position:relative;height:100vh;height:100svh;min-height:560px;color:#fff}
.home-hero-content{position:fixed;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--header-h) + 24px) var(--edge) 48px;text-align:center;pointer-events:none}
.hero-title-art{pointer-events:auto;will-change:transform,opacity}

/* The page: a white sheet over the fixed photo, with a strip of photo showing down both sides.
   The footer continues the same sheet: same side strips, rounded bottom corners and a strip of photo below,
   so the whole page reads as one card lying on the photo. */
body.has-hero{--sheet-gap:clamp(8px,2.5vw,40px);--sheet-radius:20px}
.home-sheet{position:relative;z-index:2;margin-inline:var(--sheet-gap);border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;background:#fff}
/* Above the fixed photo (otherwise the photo covers the bottom bar), and clipped so the partners band stays inside. */
body.has-hero .footer,body.has-hero .footer-bottom{position:relative;z-index:2;margin-inline:var(--sheet-gap)}
body.has-hero .footer{overflow:hidden}
body.has-hero .footer-bottom{margin-bottom:var(--sheet-gap);border-radius:0 0 var(--sheet-radius) var(--sheet-radius)}
/* The header's mark on the home page: white over the photo, then, as the name flies up (js/home.js),
   filled from the bottom with the letters' colours (--brand-fill, 0–1), then the original logo (--brand-orig, 0–1).
   The two layers repeat the brand's own layout, so they sit exactly over the white mark. */
body.has-hero .brand{position:relative}
.brand-fill{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;gap:inherit;padding:inherit;pointer-events:none}
.brand-fill-rainbow{--rainbow:linear-gradient(90deg,#ff5a4e,#ff8a3d,#f3b33d,#7ccf4f,#3ddc97,#4fc3f7,#b38cff,#ff6fa8);clip-path:inset(calc((1 - var(--brand-fill,0)) * 100%) 0 0 0);opacity:calc(1 - var(--brand-orig,0))}
.brand-fill-mark{height:46px;aspect-ratio:320/184;background:var(--rainbow);-webkit-mask:url("../assets/images/logo-mark.png") center/contain no-repeat;mask:url("../assets/images/logo-mark.png") center/contain no-repeat}
.brand-fill-orig{opacity:var(--brand-orig,0)}
body.has-hero .site-header .brand .brand-fill .brand-mark{filter:none}
body.has-hero .site-header .brand .brand-fill-rainbow .brand-name{color:transparent;background:var(--rainbow);-webkit-background-clip:text;background-clip:text}
body.has-hero .site-header .brand .brand-fill-orig .brand-name{color:var(--blue-ink)}
@media (max-width:1080px){.brand-fill-mark{height:34px}}
/* The dark original logo needs a light header, so the glass turns white along with it and the links go dark. */
body.has-hero .site-header:not(.is-solid){background:rgba(255,255,255,calc(.12 + .82 * var(--brand-orig,0)));border-bottom-color:color-mix(in srgb,var(--line) calc(var(--brand-orig,0) * 100%),rgba(255,255,255,.22))}
body.has-hero .site-header:not(.is-solid) .nav-link{color:color-mix(in srgb,var(--ink) calc(var(--brand-orig,0) * 100%),#fff)}

.hero-title{font-weight:inherit;letter-spacing:normal}
.hero-title-art{display:flex;flex-direction:column;align-items:center;gap:.14em}
/* The name in mismatched letters (Yeralash / STEM toy blocks); js/home.js wraps each letter in .hl with
   --c (colour), --r (tilt), --y (lift) and --d (when it pops in). Without JS the lines stay plain white. */
.hero-line{display:flex;align-items:center;justify-content:center;font:700 1em/1 var(--font-head);letter-spacing:0;text-transform:uppercase;white-space:nowrap}
.hero-line-1{font-size:calc(clamp(38px,7vw,100px) * var(--fs-scale,1))}
.hero-line-2{font-size:calc(clamp(36px,10.6vw,144px) * var(--fs-scale,1))}
.hl{display:inline-block;margin:0 .015em;color:var(--c);text-shadow:0 .055em 0 rgba(4,10,24,.5);transform:translateY(var(--y)) rotate(var(--r));transition:transform .25s cubic-bezier(.3,1.6,.5,1);animation:hl-pop .55s cubic-bezier(.3,1.6,.5,1) var(--d) backwards}
.hl:hover{transform:translateY(calc(var(--y) - .14em)) rotate(calc(var(--r) * -1)) scale(1.08)}
/* A STEM block: the letter on a coloured tile. */
.hl-tile{margin:0 .04em;padding:.1em .13em .08em;border-radius:.14em;background:var(--c);color:var(--on-c,#fff);font-size:.8em;text-shadow:none;box-shadow:0 .07em 0 rgba(4,10,24,.45),inset 0 -.06em 0 rgba(0,0,0,.14)}
.hl-outline{color:rgba(4,10,24,.35);-webkit-text-stroke:.07em var(--c);paint-order:stroke fill}
.hl-thin{font-family:var(--font-sans);font-weight:300;font-size:1.06em}
.hl-space{width:.32em}
@keyframes hl-pop{from{opacity:0;transform:translateY(-.7em) rotate(0) scale(.3)}}


/* ---------- The director's welcome ---------- */
.home-director{padding:clamp(72px,9vw,128px) 0}
.home-director-inner{display:grid;grid-template-columns:minmax(220px,360px) minmax(0,1fr);gap:clamp(40px,7vw,104px);align-items:center}
/* A photo pinned into the sketchbook with a strip of tape. */
.director-photo{position:relative;padding:12px 12px 48px;background:#fff;box-shadow:0 2px 3px rgba(13,27,54,.08),0 22px 44px rgba(13,27,54,.16);transform:rotate(-2.5deg)}
.director-photo::before{content:"";position:absolute;top:-14px;left:50%;width:120px;height:30px;margin-left:-60px;background:rgba(243,179,61,.55);box-shadow:0 1px 2px rgba(60,40,5,.12);transform:rotate(3deg)}
.director-photo img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 20%;background:var(--bg-soft)}
.director-letter{position:relative;isolation:isolate;max-width:640px}
.director-letter::before{content:"“";position:absolute;top:-.42em;left:-.08em;z-index:-1;font:700 calc(clamp(160px,18vw,260px) * var(--fs-scale,1))/1 var(--font-head);color:#e8eefb}
.director-greeting{margin:14px 0 22px;font-size:calc(clamp(34px,4.4vw,60px) * var(--fs-scale,1));letter-spacing:-.035em}
.director-text{font-size:calc(clamp(18px,1.45vw,21px) * var(--fs-scale,1));line-height:1.65;color:var(--ink-2)}
.director-sign{display:grid;gap:4px;margin-top:32px;padding-top:22px;border-top:1px solid var(--line)}
.director-sign-name{font:500 calc(19px * var(--fs-scale,1))/1.3 var(--font-head)}
.director-sign-role{font-size:calc(15px * var(--fs-scale,1));color:var(--muted)}

/* ---------- Latest news ---------- */
.home-news{padding:clamp(64px,8vw,112px) 0;background:var(--bg-soft)}
.home-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:clamp(28px,3vw,40px)}
.home-section-title{font-size:var(--fs-h2);letter-spacing:-.035em}
.home-more{display:inline-flex;align-items:center;gap:10px;font:500 calc(16px * var(--fs-scale,1))/1 var(--font-head);color:var(--blue);white-space:nowrap}
.home-more::after{content:"→";transition:transform .2s ease}
.home-more:hover::after{transform:translateX(4px)}
.news-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.news-card{position:relative;display:flex;flex-direction:column;padding:clamp(20px,2vw,28px);border-radius:calc(var(--radius) * 2);background:#fff;box-shadow:0 1px 2px rgba(13,27,54,.06);transition:transform .2s ease,box-shadow .2s ease}
.news-card:hover{transform:translateY(-3px);box-shadow:0 18px 36px rgba(13,27,54,.12)}
.news-card:focus-within{outline:2px solid var(--blue);outline-offset:3px}
.news-card-art{display:grid;place-items:center;height:150px;margin-bottom:20px;border-radius:var(--radius);background:#e8eefb;overflow:hidden}
.news-card-art img{width:auto;height:128px;transform:rotate(-3deg);filter:drop-shadow(0 8px 12px rgba(13,27,54,.18))}
.news-card-art img.is-photo{width:100%;height:100%;object-fit:cover;transform:none;filter:none} /* a real photo fills the picture area */
.news-card-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-bottom:10px;font-size:calc(13px * var(--fs-scale,1));color:var(--muted)}
.news-card-tag{padding:2px 9px;border-radius:999px;background:var(--bg-soft);font-weight:500;color:var(--ink-2)}
.news-card-title{font-size:calc(clamp(19px,1.5vw,22px) * var(--fs-scale,1));line-height:1.25;letter-spacing:-.015em}
.news-card-link::after{content:"";position:absolute;inset:0;border-radius:inherit} /* the whole card is the link */
.news-card-link:focus-visible{outline:0}
.news-card-text{margin-top:10px;font-size:calc(15px * var(--fs-scale,1));line-height:1.55;color:var(--ink-2)}
.news-card-more{margin-top:auto;padding-top:18px;font:500 calc(15px * var(--fs-scale,1))/1 var(--font-head);color:var(--blue)}
.news-empty{color:var(--muted)}

/* ---------- The lyceum in numbers ---------- */
.home-stats{padding:clamp(56px,7vw,96px) 0;background:#132744;color:#fff}
.home-stats-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:32px 24px;text-align:center}
.home-stat{display:grid;gap:12px}
.home-stat-num{font:700 calc(clamp(48px,6.4vw,96px) * var(--fs-scale,1))/1 var(--font-head);letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.home-stat-label{font-size:calc(clamp(13px,1vw,15px) * var(--fs-scale,1));font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.88)}

/* ---------- STEM: white band between the numbers and the footer ---------- */
/* A full screen tall; the logo sits in the middle and the project photos will go around it. */
.home-stem{position:relative;display:grid;place-items:center;min-height:100vh;min-height:100svh;padding:calc(var(--header-h) + 24px) var(--pad) 48px;background:#fff;overflow:hidden}
.home-stem-img{position:relative;z-index:1;width:min(920px,100%);height:auto}

@media (max-width:900px){
  .home-director-inner{grid-template-columns:minmax(0,1fr);justify-items:center}
  .director-photo{width:min(300px,78%)}
  .director-letter{text-align:left}
  .news-row{grid-template-columns:minmax(0,1fr)}
  .news-card-art{height:120px}
  .news-card-art img{height:104px}
  .home-stats-list{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:44px}
}
@media (max-width:640px){
  .home-hero{min-height:520px}
  body.has-hero{--sheet-radius:14px}
}
@media (prefers-reduced-motion:reduce){
  .hl{animation:none;transition:none}
  .news-card,.news-card:hover{transition:none;transform:none}
}