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

:root { --ink:#fff; --gold:#ffc526; --violet:#8b48ff; --void:#100029; --panel:#160033; --muted:rgba(255,255,255,.62); --rule:rgba(255,255,255,.17); }
* { box-sizing:border-box; }
html { background:var(--void); }
body { min-width:320px; margin:0; color:var(--ink); font-family:"e-Ukraine",Arial,sans-serif; font-synthesis:none; }
button,a { font:inherit; }
a { color:inherit; }
.links-page { position:relative; min-height:100vh; overflow:hidden; background:var(--void); }

/* Established hero composition. */
.hero { position:relative; min-height:460px; overflow:hidden; isolation:isolate; background:#5510d0 url("/assets/images/BACKGROUND Site.webp") center top / cover no-repeat; }
.hero::before,.hero::after { position:absolute; inset:0; pointer-events:none; content:""; }
.hero::before { z-index:0; background:url("/assets/images/CHARACTER.webp") no-repeat calc(100% + 120px) bottom / auto 620px; }
.hero::after { z-index:1; background:linear-gradient(90deg,rgba(22,0,60,.22),transparent 52%),linear-gradient(0deg,rgba(20,0,55,.32),transparent 30%); }
.hero__frame { position:absolute; z-index:2; inset:16px; border:1px solid rgba(255,255,255,.23); clip-path:polygon(0 0,92% 0,100% 10%,100% 100%,8% 100%,0 90%); pointer-events:none; }
.hero__content { position:relative; z-index:3; display:flex; min-height:460px; padding:38px 38% 42px 7.5%; flex-direction:column; align-items:flex-start; justify-content:center; }
.hero__eyebrow,.hero__callout { margin:0; color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.hero__eyebrow { position:absolute; z-index:3; top:40px; left:40px; }
.hero__eyebrow::before { color:white; content:"// "; }
.project-logo { display:block; width:min(590px,49vw); max-height:330px; margin:16px 0 0; object-fit:contain; }
[lang="uk"] .project-logo { width:min(390px,29vw); max-height:52vh; }
.project-description { max-width:460px; margin:25px 0 0; font-family:"e-Ukraine Head",Arial,sans-serif; font-size:clamp(19px,1.48vw,28px); font-weight:700; line-height:1.2; }
.hero__callout { margin-top:20px; color:rgba(255,255,255,.82); }

/* Redesigned post-hero interface. */
.content-panel { position:relative; overflow:hidden; background:linear-gradient(145deg,rgba(52,10,112,.44),transparent 35%),var(--panel) url("/assets/images/BACKGROUND Site.webp") center bottom / cover no-repeat; }
.content-panel::before,.content-panel::after { position:absolute; inset:0; pointer-events:none; content:""; }
.content-panel::before { background:rgba(7,0,23,.48); }
.content-panel::after { background-image:linear-gradient(90deg,transparent 49%,rgba(255,255,255,.035) 50%,transparent 51%); background-size:48px 48px; opacity:.34; }
.content-panel__inner { position:relative; z-index:1; width:min(100%,680px); margin:0 auto; padding:38px 32px 30px; }
.link-section { margin:0 0 34px; }
.section-heading { display:grid; min-height:40px; grid-template-columns:14px auto 1fr; align-items:center; gap:12px; }
.section-marker { width:7px; height:7px; background:var(--gold); transform:rotate(45deg); }
h2 { margin:0; font-family:"e-Ukraine Head",Arial,sans-serif; font-size:clamp(18px,1.45vw,25px); font-weight:700; letter-spacing:.025em; line-height:1; white-space:nowrap; }
.section-rule { height:1px; margin-left:8px; background:linear-gradient(90deg,var(--gold),var(--rule) 30%,transparent); }
.section-rule::after { display:block; width:7px; height:7px; margin-top:-3px; background:var(--gold); content:""; transform:rotate(45deg); }
.vertical-links,.comic-links { display:grid; gap:10px; margin:18px 0 0; }
.vertical-links { width:100%; }
.link-item { position:relative; display:flex; min-height:60px; padding:10px 17px; align-items:center; gap:16px; overflow:hidden; border:1px solid rgba(255,255,255,.23); border-left:3px solid var(--gold); border-radius:0; background:linear-gradient(105deg,rgba(83,34,169,.94),rgba(35,8,83,.94)); box-shadow:0 9px 18px rgba(0,0,0,.19),inset 0 1px 0 rgba(255,255,255,.12); clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%); color:white; font-size:clamp(16px,1.15vw,20px); font-weight:700; text-decoration:none; transition:transform .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease; }
.link-item::after { position:absolute; top:0; right:0; width:34px; height:34px; border-top:1px solid rgba(255,197,38,.75); content:""; }
.link-item img { position:relative; z-index:1; width:32px; height:32px; object-fit:contain; }
.link-item:hover { transform:translateX(5px); border-color:rgba(255,197,38,.86); color:var(--gold); box-shadow:0 12px 23px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.16); }
.link-item:focus-visible,.language-button:focus-visible,.contact-link:focus-visible { outline:3px solid var(--gold); outline-offset:4px; }
.comic-links { grid-template-columns:repeat(2,minmax(0,1fr)); }
.comic-links .link-item { min-height:56px; justify-content:center; padding-inline:12px; font-size:clamp(14px,1vw,18px); }
.contact-section { display:grid; margin:2px 0 24px; padding:20px 22px; grid-template-columns:1fr auto; align-items:center; gap:8px 24px; border:1px solid var(--rule); background:rgba(8,0,25,.55); box-shadow:inset 3px 0 var(--violet); }
.contact-section__label { margin:0; color:var(--muted); font-size:11px; font-weight:700; letter-spacing:.16em; }
.contact-link { color:#a95cff; font-size:clamp(15px,1.05vw,19px); font-weight:700; text-decoration-thickness:1px; text-underline-offset:5px; }
.language-switcher { display:flex; width:max-content; margin:0 auto; padding:7px 13px; align-items:center; gap:8px; border:1px solid var(--rule); background:rgba(8,0,28,.66); color:var(--gold); font-size:13px; }
.language-button { padding:4px 1px; border:0; color:inherit; background:transparent; cursor:pointer; }
.language-button[aria-pressed="true"] { color:var(--gold); }
.language-button[aria-pressed="false"] { color:white; }
.language-button:hover { color:#fff0a4; }
.site-footer { margin-top:22px; padding-top:17px; border-top:1px solid var(--rule); color:var(--muted); font-size:10px; line-height:1.5; text-align:center; }
.site-footer p { margin:0 0 5px; }

@media (min-width:900px) {
  .links-page { display:grid; height:100vh; min-height:720px; grid-template-columns:55% 45%; }
  .hero { min-height:0; height:100%; }
  .hero::before { background-size:auto clamp(860px,90vh,1080px); background-position:calc(100% + clamp(30px,3vw,90px)) bottom; }
  .hero__frame { inset:24px; }
  .hero__content { min-height:0; height:100%; padding:7vh 36% 7vh 9%; }
  .project-logo { width:min(600px,42vw); max-height:none; }
  [lang="uk"] .project-logo { width:min(390px,26vw); max-height:52vh; }
  .content-panel { height:100%; overflow:auto; }
  .content-panel__inner { width:min(100%,610px); padding:clamp(22px,3.3vh,38px) 42px 28px; }
  .link-section { margin-bottom:clamp(17px,2.5vh,30px); }
  .section-heading { min-height:30px; grid-template-columns:12px auto 1fr; gap:9px; }
  h2 { font-size:clamp(15px,1.18vw,21px); }
  .vertical-links,.comic-links { gap:8px; margin-top:13px; }
  .link-item { min-height:48px; padding:7px 14px; font-size:clamp(14px,.98vw,18px); }
  .link-item img { width:26px; height:26px; }
  .comic-links .link-item { min-height:45px; font-size:clamp(12px,.88vw,16px); }
  .contact-section { margin-bottom:15px; padding:13px 15px; }
  .contact-section__label { font-size:9px; }
  .contact-link { font-size:clamp(12px,.92vw,16px); }
  .site-footer { margin-top:16px; padding-top:12px; font-size:9px; }
}

@media (max-width:600px) {
  .hero { min-height:252px; }
  .hero::before { background-size:auto clamp(270px,78vw,330px); background-position:100% calc(100% + 58px); }
  .hero__frame { inset:10px; }
  .hero__content { min-height:252px; padding:49px 104px 14px 24px; justify-content:flex-start; }
  .hero__eyebrow { top:21px; left:22px; }
  .hero__eyebrow,.hero__callout { font-size:8.5px; letter-spacing:.11em; }
  .project-logo { width:min(224px,63vw); max-height:132px; margin-top:7px; }
  [lang="uk"] .project-logo { width:min(148px,40vw); max-height:120px; }
  .project-description { max-width:220px; margin-top:8px; font-size:13px; line-height:1.18; }
  .hero__callout { display:none; }
  .content-panel__inner { padding:24px 20px 22px; }
  .content-panel { background-image:linear-gradient(145deg,rgba(22,3,50,.42),transparent 35%),url("/assets/images/BACKGROUND Black.webp"); background-position:center bottom; background-size:cover; }
  .link-section { margin-bottom:24px; }
  .section-heading { min-height:27px; grid-template-columns:11px minmax(0,auto) 1fr; gap:7px; }
  .section-marker { width:6px; height:6px; }
  h2 { font-size:clamp(13px,3.9vw,15px); white-space:normal; }
  .section-rule { margin-left:2px; }
  .vertical-links,.comic-links { margin-top:11px; gap:7px; }
  .link-item { min-height:44px; padding:5px 12px; gap:12px; font-size:clamp(14px,3.8vw,15px); }
  .link-item img { width:24px; height:24px; }
  .comic-links { grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:8px; row-gap:7px; }
  .comic-links .link-item { min-height:43px; padding-inline:7px; font-size:clamp(12px,3.25vw,13.5px); }
  .contact-section { margin:0 0 17px; padding:14px; grid-template-columns:1fr; gap:6px; }
  .contact-section__label { font-size:9px; }
  .contact-link { font-size:13px; }
  .language-switcher { padding:6px 11px; font-size:12px; }
  .site-footer { margin-top:17px; padding-top:13px; font-size:8.5px; line-height:1.42; }
}

/* The stacked intermediate layout uses the same darker artwork as mobile. */
@media (min-width:601px) and (max-width:899px) {
  .content-panel { background-image:linear-gradient(145deg,rgba(22,3,50,.42),transparent 35%),url("/assets/images/BACKGROUND Black.webp"); background-position:center bottom; background-size:cover; }
  .hero::before { background-size:auto 520px; background-position:calc(100% + clamp(45px,calc(750px - 100vw),150px)) bottom; }
}

@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; } }