/* Lyceum No. 23 «Sobornyi» — shared layer for every page.
   Fonts, tokens and base type, the page head, then the site header, mobile menu and footer (markup in js/footer.js).
   Page-specific styles live in their own files (css/documents.css, ...). */

@font-face{font-family:"e-Ukraine";src:url("../assets/fonts/e-Ukraine-Light.otf") format("opentype");font-weight:300;font-display:swap}
@font-face{font-family:"e-Ukraine";src:url("../assets/fonts/e-Ukraine-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"e-Ukraine";src:url("../assets/fonts/e-Ukraine-Medium.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"e-Ukraine";src:url("../assets/fonts/e-Ukraine-Bold.otf") format("opentype");font-weight:700;font-display:swap}
@font-face{font-family:"e-Ukraine Head";src:url("../assets/fonts/e-UkraineHead-Regular.otf") format("opentype");font-weight:400;font-display:swap}
@font-face{font-family:"e-Ukraine Head";src:url("../assets/fonts/e-UkraineHead-Medium.otf") format("opentype");font-weight:500;font-display:swap}
@font-face{font-family:"e-Ukraine Head";src:url("../assets/fonts/e-UkraineHead-Bold.otf") format("opentype");font-weight:700;font-display:swap}

:root{
  --font-sans:"e-Ukraine","Segoe UI",Arial,sans-serif;
  --font-head:"e-Ukraine Head","e-Ukraine","Segoe UI",Arial,sans-serif;

  --bg:#ffffff;
  --bg-soft:#f2f4f8;
  --ink:#0d1b36;
  --ink-2:#2c3950;
  --muted:#5b6579;
  --line:#dde2ea;
  --blue:#1f4aa8;
  --blue-deep:#102a5c;
  --blue-ink:#0b1f45;
  --gold:#f3b33d;
  --band:#1b3254;
  --smalt:#003087;
  --on-dark:#ffffff;
  --on-dark-muted:#cfdcf3;

  --max:1240px;
  --pad:clamp(20px,4vw,48px);
  --side:max(var(--pad),calc((100% - var(--max)) / 2));
  --edge:clamp(20px,3vw,48px); /* header and footer run to the screen edges; only page content keeps --max */
  --header-h:84px;
  --radius:6px;

  --fs-display:calc(clamp(52px,6.8vw,108px) * var(--fs-scale,1));
  --fs-h2:calc(clamp(30px,3.6vw,52px) * var(--fs-scale,1));
  --fs-h3:calc(clamp(20px,1.6vw,24px) * var(--fs-scale,1));
  --fs-lead:calc(clamp(18px,1.4vw,21px) * var(--fs-scale,1));
  --fs-body:calc(17px * var(--fs-scale,1));
  --fs-small:calc(14px * var(--fs-scale,1));
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 16px)}
body{min-height:100vh;display:flex;flex-direction:column;font-family:var(--font-sans);font-size:var(--fs-body);line-height:1.6;color:var(--ink);background:var(--bg);overflow-x:hidden;overflow-x:clip}
.site-shell{flex:1;display:flex;flex-direction:column}
main{flex:1}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:500;line-height:1.1;letter-spacing:-.02em}
ul,ol{list-style:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.container{width:min(var(--max),100% - 2 * var(--pad));margin-inline:auto}

/* ---------- Page head ---------- */
.page{padding-bottom:clamp(96px,11vw,150px)}
.page-head{padding:clamp(48px,7vw,96px) 0 clamp(32px,4vw,48px);border-bottom:1px solid var(--line);margin-bottom:clamp(40px,5vw,64px)}
.page-title{font-size:calc(clamp(44px,6.4vw,96px) * var(--fs-scale,1));line-height:.98;letter-spacing:-.045em}
.page-lead{max-width:38em;margin-top:24px;font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2)}
/* A Fima sticker beside the title (documents: "Фіма перевірив", schedule: "Я роблю ДЗ"); above it on phones. */
.page-head:has(> .page-head-fima){display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(20px,4vw,64px);align-items:end}
.page-head:has(> .page-head-fima)>:not(.page-head-fima){grid-column:1}
.page-head-fima{grid-column:2;grid-row:1 / span 2;width:clamp(96px,15vw,210px);transform:rotate(3deg);filter:drop-shadow(0 10px 16px rgba(13,27,54,.16))}
@media (max-width:600px){.page-head:has(> .page-head-fima){grid-template-columns:minmax(0,1fr)}.page-head-fima{grid-column:1;grid-row:auto;order:-1;justify-self:end;width:96px;margin-bottom:-8px}}

/* ---------- Site header: menu bookmark on the left, lyceum mark in the centre, News and Contacts on the right ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:900;background:rgba(255,255,255,.94);border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.site-nav{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;column-gap:clamp(24px,3vw,56px);height:var(--header-h);padding-inline:var(--edge)}
.nav-side{display:flex;align-items:center;gap:clamp(4px,1.4vw,24px);min-width:0}
.nav-side-right{grid-column:3;justify-content:flex-end}
.nav-link{position:relative;display:inline-flex;align-items:center;padding:12px 12px;font:500 calc(17px * var(--fs-scale,1))/1 var(--font-head);color:var(--ink);white-space:nowrap;transition:color .2s ease}
.nav-link::after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;border-radius:2px;background:var(--blue);transform:scaleX(0);transition:transform .25s ease}
.nav-link:hover,.nav-link[aria-current="page"]{color:var(--blue)}
.nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1)}
.brand{grid-column:2;display:flex;flex-direction:column;align-items:center;gap:5px;padding:4px 6px}
.brand-mark{width:auto;height:46px}
.brand-name{font:700 calc(11px * var(--fs-scale,1))/1 var(--font-head);letter-spacing:.2em;text-transform:uppercase;color:var(--blue-ink);padding-left:.2em}
.nav-link:focus-visible,.brand:focus-visible{outline-offset:2px;border-radius:var(--radius)}
/* Over a full-width photo (body.has-hero, the home page) the header starts as frosted glass with white marks
   and turns solid once the photo scrolls away; js/site.js adds .is-solid. */
.site-header{transition:background-color .25s ease,border-color .25s ease}
.brand-mark,.brand-name{transition:filter .25s ease,color .25s ease}
/* The header is fixed on every page, out of the flow. The home page's photo starts at the very top and fills the screen exactly;
   every other page gets the header's height back as padding, so its content starts just below it. */
body:not(.has-hero) .site-shell{padding-top:var(--header-h)}
body.has-hero .site-header:not(.is-solid){background:rgba(255,255,255,.12);border-bottom-color:rgba(255,255,255,.22)}
body.has-hero .site-header:not(.is-solid) .brand-mark{filter:brightness(0) invert(1)}
body.has-hero .site-header:not(.is-solid) .brand-name,body.has-hero .site-header:not(.is-solid) .nav-link{color:#fff}
body.has-hero .site-header:not(.is-solid) .nav-link::after{background:#fff}

/* Inner pages on a photo (body.has-sheet): the building stays fixed behind a white sheet with a strip of photo
   down both sides; the footer continues the sheet. The same look as the home page (see css/home.css). */
body.has-sheet{--sheet-gap:clamp(8px,2.5vw,40px);--sheet-radius:20px}
.sheet-bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--blue-ink)}
.sheet-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%}
.sheet-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%)}
.page-sheet{position:relative;z-index:2;margin:var(--sheet-gap) var(--sheet-gap) 0;border-radius:var(--sheet-radius) var(--sheet-radius) 0 0;background:#fff}
body.has-sheet .footer,body.has-sheet .footer-bottom{position:relative;z-index:2;margin-inline:var(--sheet-gap)}
body.has-sheet .footer{overflow:hidden}
body.has-sheet .footer-bottom{margin-bottom:var(--sheet-gap);border-radius:0 0 var(--sheet-radius) var(--sheet-radius)}

/* Menu button: a worn red paper bookmark, sketchbook style, hanging at an angle from the top edge on the left. */
:root{--bookmark:#d63a2f;--bookmark-hover:#bf2d23;--bookmark-w:62px;--bookmark-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .27 0 0 0 0 .2 0 0 0 .17 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");--bookmark-fibers:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .2 -.05'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E")}
.menu-toggle{position:absolute;top:0;left:var(--edge);z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:var(--bookmark-w);height:80px;margin-top:-4px;padding:4px 0 16px;border:0;background:transparent;cursor:pointer;filter:drop-shadow(0 2px 1px rgba(60,25,5,.25)) drop-shadow(0 10px 12px rgba(27,45,91,.28));transform:rotate(-3deg);transform-origin:50% 0;transition:height .3s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}
.menu-toggle::before{content:"";position:absolute;inset:0;z-index:-1;clip-path:polygon(0 0,100% 0,99% 96%,100% 100%,53% calc(100% - 13px),3% 99%,0 95%);background:
  linear-gradient(180deg,rgba(60,25,5,.32) 0,rgba(60,25,5,0) 18px),
  linear-gradient(180deg,transparent 17px,rgba(255,255,255,.45) 17px,rgba(255,255,255,.45) 18px,transparent 18px),
  radial-gradient(ellipse 14px 9px at 22% 72%,rgba(255,236,214,.35),transparent 70%),
  radial-gradient(ellipse 10px 16px at 80% 40%,rgba(255,236,214,.28),transparent 70%),
  radial-gradient(ellipse 18px 6px at 60% 88%,rgba(90,35,5,.22),transparent 70%),
  linear-gradient(100deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 40%,rgba(60,25,5,.12) 100%),
  var(--bookmark-fibers),var(--bookmark-grain),var(--bookmark);transition:background-color .2s ease}
.menu-toggle span{height:3px;background:#fff8f0;box-shadow:0 1px 0 rgba(90,35,5,.25)}
.menu-toggle span:nth-child(1){width:24px;transform:rotate(-2deg)}
.menu-toggle span:nth-child(2){width:19px;transform:translateX(-2px) rotate(1.5deg)}
.menu-toggle span:nth-child(3){width:23px;transform:rotate(-1deg)}
.menu-toggle:hover,body.menu-open .menu-toggle{height:90px;transform:rotate(-.5deg)}
.menu-toggle:hover::before{background-color:var(--bookmark-hover)}
.menu-toggle:focus-visible{outline:2px solid var(--bookmark);outline-offset:4px}

/* ---------- Side menu: slides in from the left, under the bookmark ---------- */
.side-menu{position:fixed;inset:0 auto 0 0;z-index:1000;width:min(340px,calc(100vw - 40px));display:flex;flex-direction:column;gap:24px;padding:24px 20px;overflow-y:auto;background:#fff;box-shadow:22px 0 50px rgba(13,27,54,.16);transform:translateX(-105%);transition:transform .24s ease}
.side-menu-backdrop{position:fixed;inset:0;z-index:999;border:0;background:rgba(13,27,54,.32);opacity:0;pointer-events:none;transition:opacity .22s ease}
body.menu-open{overflow:hidden}
body.menu-open .side-menu{transform:none}
body.menu-open .side-menu-backdrop{opacity:1;pointer-events:auto}
.side-menu-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.side-menu-label{margin-bottom:6px;font-size:calc(12px * var(--fs-scale,1));font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.side-menu-title{font:500 calc(20px * var(--fs-scale,1))/1.2 var(--font-head);color:var(--ink)}
.side-menu-close{flex:0 0 auto;width:44px;height:44px;border:1px solid var(--line);border-radius:999px;background:#fff;font-size:calc(24px * var(--fs-scale,1));line-height:1;cursor:pointer}
.side-menu-links{display:grid}
.side-menu-link{display:flex;align-items:center;min-height:52px;border-bottom:1px solid var(--line);font:500 calc(18px * var(--fs-scale,1))/1.2 var(--font-head);color:var(--ink)}
.side-menu-link:hover,.side-menu-link[aria-current="page"]{color:var(--blue)}
/* Fima waits at the bottom of the menu. */
.side-menu-fima{width:min(190px,62%);margin:auto auto 0;filter:drop-shadow(0 8px 14px rgba(13,27,54,.16))}

@media (max-width:1240px){.nav-link{padding:12px 8px;font-size:calc(16px * var(--fs-scale,1))}.nav-link::after{left:8px;right:8px}}
@media (max-width:1080px){
  :root{--header-h:68px}
  :root{--bookmark-w:54px}
  .site-nav{grid-template-columns:minmax(0,1fr)}
  .nav-side{display:none}
  .menu-toggle{height:70px;padding-bottom:14px}
  .menu-toggle:hover,body.menu-open .menu-toggle{height:78px}
  .brand{grid-column:1;justify-self:center;gap:3px}
  .brand-mark{height:34px}
  .brand-name{font-size:calc(9px * var(--fs-scale,1))}
}

/* ---------- Footer (markup in js/footer.js) ----------
   Three zones: contacts in one row, a lighter band of emblems and education resources, a darker bottom bar.
   Accents are a light tint of the site blue, no gold. */
.footer{--footer-bg:#132744;--footer-band:#1b3254;--footer-line:rgba(238,242,249,.16);--footer-muted:#c9d4e3;--footer-accent:#9db8f2;position:relative;padding:56px var(--edge) 0;background:var(--footer-bg);color:#f8f7f2}
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:36px clamp(40px,8vw,120px);padding-bottom:48px}
/* Left: contacts stacked (phone, e-mail, socials). Right: a short site navigation. */
.footer-contacts{display:grid;justify-items:start;gap:8px}
.ft{margin-bottom:8px;font:700 calc(22px * var(--fs-scale,1))/1.3 var(--font-head);letter-spacing:0;color:#fff}
.fi{font-size:calc(16px * var(--fs-scale,1));line-height:1.6;color:var(--footer-muted)}
.fi a{color:#f8f7f2;overflow-wrap:anywhere}
.fi a:hover{color:#fff;text-decoration:underline;text-decoration-color:var(--footer-accent);text-underline-offset:5px}
.footer-contacts .fi:first-of-type a{font-size:calc(clamp(22px,2vw,28px) * var(--fs-scale,1));line-height:1.4;letter-spacing:-.02em}
.social-links{display:flex;flex-wrap:wrap;gap:12px;margin-top:12px}
.footer-nav{justify-self:end}
.footer-nav-list{display:grid;grid-template-rows:repeat(4,auto);grid-auto-flow:column;gap:10px clamp(32px,4vw,64px)}
/* Middle: who made the site. */
.footer-credit{display:flex;align-items:center;gap:14px;align-self:center;justify-self:center;white-space:nowrap;font-size:calc(17px * var(--fs-scale,1));color:var(--footer-muted)}
.footer-credit .dev-logo{--h:26px}
.footer-nav-list a{font-size:calc(16px * var(--fs-scale,1));line-height:1.5;color:#e6ecf4;transition:color .2s}
.footer-nav-list a:hover,.footer-nav-list a[aria-current="page"]{color:#fff;text-decoration:underline;text-decoration-color:var(--footer-accent);text-underline-offset:5px}
.social-link{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:10px 16px;border:1px solid var(--footer-line);border-radius:8px;font-size:calc(15px * var(--fs-scale,1));font-weight:500;color:#e6ecf4;transition:border-color .2s,background .2s}
.social-icon{flex:0 0 20px;width:20px;height:20px}
.social-link:hover{border-color:var(--footer-accent);background:rgba(255,255,255,.04)}
/* Emblems and education resources: one centred row on a lighter band that runs edge to edge. */
.footer-affiliations{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:30px;padding:30px 0;background:var(--footer-band);box-shadow:0 0 0 100vmax var(--footer-band);clip-path:inset(0 -100vmax)}
.footer-emblems,.footer-partners-list{display:flex;flex-wrap:wrap;align-items:center;gap:30px}
.emblem-tile{display:flex;align-items:center;justify-content:center;flex:0 0 56px;width:56px;height:56px}
.emblem-tile-gerb{flex-basis:38px;width:38px}
.emblem-tile-gerb img{width:auto;height:54px}
.emblem-tile-dnipro{flex-basis:68px;width:68px;height:68px}
.emblem-tile-dnipro img{width:100%;height:100%}
.emblem-tile-lyceum{flex-basis:78px;width:78px;filter:brightness(0) invert(1)}
.emblem-tile-lyceum img{width:100%;height:auto}
.partner-tile{display:flex;align-items:center;justify-content:center;height:56px}
.partner-tile img{width:auto;height:100%;filter:brightness(0) invert(1)}
/* ВШО keeps its coloured mark; the #vsho-white-text filter (js/footer.js) turns only its black lettering white. */
.partner-tile-wide{padding:7px 0}
.partner-tile-wide img{filter:url(#vsho-white-text)}
/* UNICEF comes as white lettering on blue; #white-cutout (js/footer.js) keeps the white and drops the blue. */
.partner-tile-unicef{padding:9px 0}
.partner-tile-unicef img{filter:url(#white-cutout)}
/* Ministry of Education: yellow and white on blue; #blue-cutout (js/footer.js) keeps its colours and drops the blue. */
.partner-tile-mon{padding:8px 0}
.partner-tile-mon img{filter:url(#blue-cutout)}
/* Нові знання (nz.ua): their gradient mark in colour, with the "nz.ua" wordmark as live text, the way nz.ua shows it. */
.partner-tile-nz{gap:10px;padding:10px 0;font:500 calc(19px * var(--fs-scale,1))/1 var(--font-sans);letter-spacing:-.01em;color:#fff}
.partner-tile-nz img{filter:none}
.footer-affiliations>*>*{opacity:.82;transition:opacity .2s ease}
.footer-affiliations>*>*:hover{opacity:1}
.footer a:focus-visible,.footer-bottom a:focus-visible{outline:2px solid var(--footer-accent);outline-offset:5px}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:16px 40px;padding:20px var(--edge);background:#0e1e36;font-size:calc(14px * var(--fs-scale,1));line-height:1.6;color:#b7c4d5}
.footer-legal{max-width:64em}
/* On wide screens the bottom bar is a single line: the text shrinks with the window rather than wrapping.
   The sums are the side strips of the sheet (home page) and the bar's own padding, plus the gap between the notices. */
@media (min-width:1400px){
  .footer-bottom{gap:0 20px;font-size:calc(min(15px,calc((100vw - 2 * var(--sheet-gap,0px) - 2 * var(--edge) - 40px) / 110)) * var(--fs-scale,1))}
  .footer-legal{max-width:none;white-space:nowrap}
}
}
/* Developer credit: Studios13 logo shown one-colour white (its blue "13" has too little contrast on navy). */
.dev-credit{display:inline-flex;flex:0 0 auto;align-items:center;gap:10px}
.dev-credit-logo{display:inline-flex;align-items:center;transition:opacity .2s ease}
.dev-credit-logo:hover{opacity:.85}
.dev-logo{--h:15px;position:relative;display:block;width:calc(var(--h) * 5.085);height:var(--h);overflow:hidden}
.dev-logo img{position:absolute;width:auto;max-width:none;height:calc(var(--h) * 2.187);left:calc(var(--h) * -.751);top:calc(var(--h) * -.574);filter:brightness(0) invert(1)}


@media (max-width:1000px){.footer{padding-top:40px}}
@media (max-width:900px){
  .footer-grid{grid-template-columns:minmax(0,1fr) auto}
  .footer-credit{grid-column:1/-1;grid-row:2;justify-self:start}
}
@media (max-width:600px){
  .footer{padding:40px 20px 0}
  .footer-grid{grid-template-columns:minmax(0,1fr);padding-bottom:30px}
  .footer-nav{justify-self:start}
  .footer-credit{grid-row:auto}
  .ft{font-size:calc(20px * var(--fs-scale,1))}
  .footer-contacts .fi:first-of-type a{font-size:calc(24px * var(--fs-scale,1))}
  .footer-affiliations,.footer-emblems,.footer-partners-list{gap:14px}
  .footer-affiliations{padding:24px 0}
  .emblem-tile{flex-basis:42px;width:42px;height:42px}
  .emblem-tile-gerb{flex-basis:28px;width:28px}
  .emblem-tile-gerb img{height:40px}
  .emblem-tile-dnipro{flex-basis:50px;width:50px;height:50px}
  .emblem-tile-lyceum{flex-basis:56px;width:56px}
  .footer-partners-list{justify-content:center}
  .partner-tile{height:40px}
  .partner-tile-wide{padding:5px 0}
  .partner-tile-nz{gap:7px;padding:7px 0;font-size:calc(14px * var(--fs-scale,1))}
  .footer-bottom{flex-direction:column;align-items:flex-start;gap:12px;padding:18px 20px}
}

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