@font-face { font-family: 'Danylo'; src: url('fonts/Danylo-Regular.otf') format('opentype'); font-display: swap; }
@font-face { font-family: 'E-Ukraine'; src: url('fonts/E-Ukraine-Regular.otf') format('opentype'); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: 'E-Ukraine'; src: url('fonts/E-Ukraine-Bold.otf') format('opentype'); font-style: normal; font-weight: 700 900; font-display: swap; }

:root { --paper:#f2efe7; --white:#fbfaf6; --ink:#171714; --muted:#6e6b63; --line:#26251f; --signal:#e95335; --foil:#d8d6cf; --body:'E-Ukraine',Arial,sans-serif; --mono:'Courier New',monospace; }
* { box-sizing:border-box; }
html { background:var(--paper); scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--body); }
a { color:inherit; }
.skip-link { position:fixed; z-index:10; top:.75rem; left:.75rem; padding:.75rem 1rem; transform:translateY(-200%); background:var(--ink); color:var(--white); font:700 .8rem/1 var(--body); }
.skip-link:focus { transform:translateY(0); }

.hero,.films,.article,.voice,.gallery,.audio,footer { padding-inline:max(clamp(1rem,2.6vw,2.5rem),calc((100vw - 1680px) / 2)); }
.hero { display:grid; grid-template-columns:minmax(28rem,1.35fr) minmax(18rem,.65fr); gap:clamp(2.5rem,4vw,5rem); align-items:center; padding-block:clamp(2rem,4.5vw,4.5rem); border-bottom:1px solid var(--line); background:var(--white); }
.hero-copy { display:flex; flex-direction:column; gap:clamp(.7rem,1.4vw,1.2rem); align-items:flex-start; min-width:0; }
.hero-image { justify-self:end; width:min(100%,24rem); margin:0; }
.hero-image img { display:block; width:100%; height:auto; border:1px solid var(--line); }
.callsign { width:max-content; margin:0; padding:.24em .38em .2em; background:var(--signal); color:var(--white); font:400 clamp(2.4rem,3.7vw,4.5rem)/.72 'Danylo',cursive; letter-spacing:.015em; rotate:-1deg; }
h1 { margin:0; font-size:clamp(4rem,4.3vw,5.4rem); font-weight:700; line-height:.78; letter-spacing:-.067em; text-transform:uppercase; }
h1 span { display:block; width:max-content; max-width:100%; }
.section-title { margin:0; font:400 clamp(2.1rem,2.8vw,3.35rem)/.82 'Danylo',cursive; }

.films { padding-block:clamp(2.5rem,4.5vw,5rem); border-bottom:1px solid var(--line); }
.films > .section-title { margin-bottom:clamp(1.5rem,3vw,3rem); }
.films-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.25rem,2.5vw,3rem); }
.film-heading { position:relative; display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.7rem; padding-top:.8rem; }
.film-heading::before { position:absolute; top:0; left:0; width:4.5rem; height:.38rem; background:var(--signal); content:''; rotate:-1deg; }
.film-heading h3 { margin:0; font-size:clamp(1.7rem,2.4vw,2.8rem); line-height:.92; letter-spacing:-.05em; }
.film-heading span { font:400 .72rem/1 var(--mono); text-transform:uppercase; }
.film-frame { aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line); background:var(--ink); }
.film-frame iframe { display:block; width:100%; height:100%; border:0; }
.source-link { display:flex; align-items:center; justify-content:space-between; min-height:3rem; margin-top:.65rem; padding:.65rem 0; border-bottom:1px solid currentColor; font:700 clamp(.82rem,1vw,.95rem)/1 var(--mono); letter-spacing:.045em; text-decoration:none; text-transform:uppercase; }

.article,.voice,.audio { display:grid; grid-template-columns:minmax(10rem,.6fr) minmax(0,1.4fr); gap:clamp(2rem,6vw,8rem); padding-block:clamp(2.5rem,5.5vw,6rem); border-bottom:1px solid var(--line); }
.article-content > blockquote { max-width:28ch; margin:0; font-size:clamp(2rem,4.5vw,4.7rem); font-weight:700; line-height:.98; letter-spacing:-.05em; }
.article-details { width:min(100%,46rem); margin-top:clamp(2rem,4vw,4rem); }
.article-details summary { display:inline-flex; align-items:center; justify-content:space-between; gap:1.5rem; min-width:min(100%,15rem); min-height:3.8rem; padding:.55rem 0 .45rem; cursor:pointer; color:var(--ink); font:400 clamp(1.75rem,2.4vw,2.45rem)/.82 'Danylo',cursive; list-style:none; }
.article-details summary::-webkit-details-marker { display:none; }
.article-details summary::after { content:'+'; font:400 1.8rem/1 var(--body); }
.article-details[open] summary::after { content:'−'; }
.article-details summary:hover { color:var(--signal); }
.article-details summary:focus-visible { outline:.2rem solid var(--signal); outline-offset:.2rem; }
.article-body { padding:.75rem 0 1.5rem; border-top:1px solid rgba(23,23,20,.2); }
.article-body > p { margin:0 0 1.25rem; font-size:clamp(1rem,1.2vw,1.12rem); line-height:1.55; }
.notes { margin:2.5rem 0; padding-left:1.25rem; border-left:.35rem solid var(--signal); }
.notes p { margin:0 0 1rem; font:400 clamp(.95rem,1.15vw,1.08rem)/1.5 var(--mono); }
.article-body > a { display:inline-flex; align-items:center; min-height:2.75rem; font:700 clamp(.8rem,1vw,.9rem)/1.3 var(--mono); text-underline-offset:.3em; text-transform:uppercase; }

.voice { grid-template-columns:minmax(9rem,.34fr) minmax(24rem,1.66fr); position:relative; overflow:hidden; align-items:start; background:var(--foil); }
.voice::after { position:absolute; top:-20%; right:7%; width:1.2rem; height:145%; background:var(--signal); content:''; opacity:.9; rotate:7deg; }
.poem { position:relative; z-index:1; max-width:80rem; margin:0; font:400 clamp(3.5rem,6.2vw,7.5rem)/.74 'Danylo',cursive; rotate:-1deg; }
.poem span { display:block; }
.poem span:nth-child(2),.poem span:nth-child(4) { margin-left:9%; }
.poem .poem-force { max-width:28ch; margin-top:.24em; font-size:.48em; line-height:.95; }
.poem .poem-force + .poem-force { margin-top:.05em; margin-left:6%; }

.gallery { padding-block:clamp(2.5rem,4vw,4.5rem); overflow:hidden; border-bottom:1px solid var(--line); background:var(--white); }
.gallery > header { display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-bottom:clamp(1.5rem,3vw,3rem); }
.gallery-controls { display:flex; gap:.45rem; }
.gallery-controls button { display:grid; width:2.6rem; height:2.6rem; place-items:center; border:1px solid var(--line); border-radius:50%; background:transparent; color:var(--ink); font:700 1.15rem/1 var(--mono); cursor:pointer; }
.gallery-controls button:hover { background:var(--ink); color:var(--white); }
.gallery-strip { display:flex; gap:clamp(.5rem,1vw,1rem); overflow-x:auto; padding-bottom:.65rem; scrollbar-width:thin; scroll-snap-type:x proximity; touch-action:pan-x pan-y; overscroll-behavior-inline:contain; -webkit-overflow-scrolling:touch; }
.gallery-strip figure { flex:none; height:clamp(14rem,21vw,22rem); margin:0; scroll-snap-align:start; }
.gallery-item { display:block; height:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.gallery-item img { display:block; width:auto; height:100%; max-width:min(76vw,34rem); object-fit:cover; filter:saturate(.92); }
.gallery-item:focus-visible,.gallery-controls button:focus-visible { outline:.2rem solid var(--signal); outline-offset:.2rem; }

.audio { align-items:center; background:var(--white); }
.audio h2 { margin:0; font-size:clamp(2rem,4.5vw,4.5rem); line-height:.9; letter-spacing:-.055em; }
.audio-content > p { margin:.75rem 0 1.5rem; color:var(--muted); font:400 .8rem/1.2 var(--body); }
.audio audio { display:block; width:min(100%,42rem); accent-color:var(--signal); }
footer { padding-block:1.1rem; background:var(--ink); color:var(--white); font:700 .75rem/1 var(--body); letter-spacing:.06em; text-transform:uppercase; }

.gallery-dialog { width:100vw; max-width:none; height:100dvh; max-height:none; margin:0; padding:clamp(1rem,4vw,3rem); border:0; background:rgba(18,18,16,.96); color:var(--white); }
.gallery-dialog[open] { display:grid; place-items:center; }
.gallery-dialog::backdrop { background:rgba(18,18,16,.82); }
.gallery-dialog > img { display:block; width:auto; max-width:92vw; height:auto; max-height:88dvh; object-fit:contain; }
.gallery-close { position:fixed; z-index:1; top:max(.75rem,env(safe-area-inset-top)); right:max(.75rem,env(safe-area-inset-right)); display:grid; width:2.75rem; height:2.75rem; padding:0; place-items:center; border:1px solid var(--white); border-radius:50%; background:var(--white); color:var(--ink); font:400 2rem/1 var(--body); cursor:pointer; }

@media (min-width:761px) and (max-width:1050px) {
  .hero { grid-template-columns:minmax(0,1fr) minmax(12rem,.42fr); gap:clamp(1.25rem,2.5vw,2rem); align-items:end; }
  .hero-copy { gap:.7rem; }
  h1 { font-size:clamp(3rem,5.6vw,3.5rem); }
  .callsign { font-size:clamp(2.4rem,3.5vw,3.2rem); }
  .hero-image { width:min(100%,15.5rem); margin:0; }
  .article { grid-template-columns:10rem 1fr; }
  .voice { grid-template-columns:10rem 1fr; }
  .poem { grid-column:2; }
}
@media (max-width:760px) {
  .article,.voice,.audio { grid-template-columns:1fr; gap:2rem; }
  .hero { grid-template-columns:minmax(0,1fr) minmax(4.5rem,26vw); gap:clamp(.75rem,3vw,1.25rem); align-items:end; padding-block:1.75rem 2rem; }
  .hero-copy { gap:clamp(.55rem,2vw,.8rem); }
  .hero-image { grid-column:2; width:100%; margin:0; }
  h1 { font-size:clamp(2rem,9vw,3rem); }
  .callsign { font-size:clamp(2rem,7.5vw,3rem); }
  .films-grid { grid-template-columns:1fr; gap:3rem; }
  .voice::after { display:none; }
  .poem { grid-column:1; max-width:100%; font-size:clamp(2.6rem,14vw,4.8rem); rotate:0deg; }
  .poem span:nth-child(2),.poem span:nth-child(4) { margin-left:5%; }
  .poem .poem-force,.poem .poem-force + .poem-force { max-width:100%; margin-left:0; font-size:.5em; line-height:1.05; overflow-wrap:break-word; }
}
@media (prefers-reduced-motion:reduce) { html { scroll-behavior:auto; } }