Rozwijany indeks magazynu architektury

<main class="arch-page" id="arch-home" data-nav-kind="desktop">
  <header><a class="arch-brand" href="#arch-home"><b>PRZEKRÓJ</b><span>magazyn architektury</span></a><p>NUMER 24 / JESIEŃ 2026</p></header>
  <nav class="arch-nav" aria-label="Działy magazynu">
    <ul class="arch-index">
      <li><button class="arch-trigger" type="button" data-arch="projects" aria-expanded="false" aria-controls="arch-detail-projects"><span>01</span><b>Projekty</b></button><div id="arch-detail-projects" class="arch-detail" hidden><p>Nowe budynki i przebudowy.</p><ul><li><a href="#arch-public" aria-current="page">Budynki publiczne</a></li><li><a href="#arch-homes">Domy</a></li></ul></div></li>
      <li><button class="arch-trigger" type="button" data-arch="research" aria-expanded="false" aria-controls="arch-detail-research"><span>02</span><b>Badania</b></button><div id="arch-detail-research" class="arch-detail" hidden><p>Analizy współczesnego miasta.</p><ul><li><a id="arch-research-housing" href="#arch-housing">Mieszkanie wspólne</a></li><li><a href="#arch-materials">Obieg materiałów</a></li></ul></div></li>
      <li><button class="arch-trigger" type="button" data-arch="people" aria-expanded="false" aria-controls="arch-detail-people"><span>03</span><b>Ludzie</b></button><div id="arch-detail-people" class="arch-detail" hidden><p>Rozmowy z projektantami.</p><ul><li><a href="#arch-interviews">Wywiady</a></li><li><a href="#arch-studios">Pracownie</a></li></ul></div></li>
      <li><button class="arch-trigger" type="button" data-arch="places" aria-expanded="false" aria-controls="arch-detail-places"><span>04</span><b>Miejsca</b></button><div id="arch-detail-places" class="arch-detail" hidden><p>Adresy warte uważnej wizyty.</p><ul><li><a href="#arch-walks">Spacery</a></li><li><a href="#arch-guides">Przewodniki</a></li></ul></div></li>
      <li><button class="arch-trigger" type="button" data-arch="archive" aria-expanded="false" aria-controls="arch-detail-archive"><span>05</span><b>Archiwum</b></button><div id="arch-detail-archive" class="arch-detail" hidden><p>Poprzednie numery i indeks autorów.</p><ul><li><a href="#arch-issues">Numery</a></li><li><a href="#arch-authors">Autorzy</a></li></ul></div></li>
    </ul>
  </nav>
  <section class="arch-lead" aria-labelledby="arch-title"><div><span>RAPORT</span><h1 id="arch-title">Miasto<br>do naprawy</h1></div><p>Jak modernizować budynki, nie usuwając tego, co działa.</p></section>
  <p id="arch-status" class="arch-status" role="status" aria-live="polite">Wybierz dział magazynu.</p>
  <section class="arch-targets" aria-label="Cele odnośników"><i id="arch-projects"></i><i id="arch-public"></i><i id="arch-homes"></i><i id="arch-research"></i><i id="arch-housing"></i><i id="arch-materials"></i><i id="arch-people"></i><i id="arch-interviews"></i><i id="arch-studios"></i><i id="arch-places"></i><i id="arch-walks"></i><i id="arch-guides"></i><i id="arch-archive"></i><i id="arch-issues"></i><i id="arch-authors"></i></section>
</main>

*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;min-width:320px;min-height:100vh;overflow-x:hidden;background:#deddd8;color:#202322;font:16px/1.45 Arial,sans-serif}.arch-page{width:min(100%,1280px);min-height:100vh;margin:auto;border-left:1px solid #898984;border-right:1px solid #898984}.arch-page>header{display:flex;justify-content:space-between;align-items:center;min-height:76px;padding:10px 22px;border-bottom:1px solid #202322}.arch-brand{display:flex;align-items:baseline;gap:10px;min-height:46px;color:#202322;text-decoration:none}.arch-brand b{font:900 24px "Arial Narrow",Arial,sans-serif;letter-spacing:-.04em}.arch-brand span,.arch-page>header p{font:11px "Courier New",monospace}.arch-page>header p{margin:0}.arch-index{display:flex;margin:0;padding:0;list-style:none;border-bottom:4px solid #202322}.arch-index>li{min-width:0;flex:1;border-right:1px solid #898984;transition:flex .16s linear}.arch-index>li:last-child{border-right:0}.arch-index>li.is-active{flex:2;background:#faf9f4}.arch-trigger{display:flex;width:100%;border:0;border-radius:0;background:transparent;text-align:left;cursor:pointer;font:inherit;flex-direction:column;justify-content:space-between;min-height:130px;padding:14px;color:#202322;text-decoration:none}.arch-trigger span{font:12px "Courier New",monospace;color:#6a6b67}.arch-trigger b{font:900 clamp(19px,2.3vw,34px)/.92 "Arial Narrow",Arial,sans-serif;overflow-wrap:anywhere}.arch-trigger:hover,.arch-trigger[aria-expanded=true]{background:#a63825;color:#fff}.arch-trigger[aria-expanded=true] span{color:#fff}.arch-detail{padding:14px;border-top:1px solid #898984}.arch-detail p{min-height:42px;margin:0 0 12px;font-size:13px}.arch-detail ul{margin:0;padding:0;list-style:none}.arch-detail a{display:flex;align-items:center;min-height:44px;border-top:1px solid #aaa9a3;color:#202322;text-decoration:none;font-size:13px}.arch-detail a:hover{color:#a63825}.arch-lead{display:grid;grid-template-columns:1.25fr .75fr;gap:35px;align-items:end;min-height:430px;padding:52px 34px;background:#faf9f4}.arch-lead span{font:12px "Courier New",monospace;color:#a63825}.arch-lead h1{margin:16px 0 0;font:900 clamp(72px,10vw,136px)/.72 "Arial Narrow",Arial,sans-serif;letter-spacing:-.075em}.arch-lead p{max-width:27ch;margin:0;border-top:5px solid #a63825;padding-top:14px;font-size:20px}.arch-status{min-height:50px;margin:0;padding:14px 24px;border-top:1px solid #898984;font-weight:700;color:#7c261b}.arch-targets{display:none}a:focus-visible,button:focus-visible{outline:4px solid #a63825;outline-offset:-4px}@media(max-width:720px){.arch-page{border:0}.arch-page>header{align-items:flex-start;gap:10px}.arch-page>header p{max-width:90px;text-align:right}.arch-index{display:block}.arch-index>li{border-right:0;border-bottom:1px solid #898984}.arch-trigger{min-height:64px;flex-direction:row;align-items:center;justify-content:flex-start;gap:18px}.arch-trigger b{font-size:25px}.arch-detail p{min-height:0}.arch-lead{grid-template-columns:1fr;min-height:390px;padding:38px 20px}.arch-lead h1{font-size:68px}.arch-lead p{font-size:17px}}@media(max-width:380px){.arch-brand{align-items:flex-start;flex-direction:column;gap:0}.arch-brand b{font-size:21px}.arch-page>header{padding:9px 14px}.arch-lead h1{font-size:59px}}@media(max-height:400px){.arch-trigger{min-height:54px}.arch-detail{max-height:190px;overflow:auto}.arch-lead{min-height:300px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

$(function(){const $triggers=$('.arch-trigger');let opener=null;function close(focus){$('.arch-index>li').removeClass('is-active').find('.arch-detail').prop('hidden',true);$triggers.attr('aria-expanded','false');if(focus&&opener)opener.focus();opener=null}function open(trigger){close(false);opener=trigger;const $li=$(trigger).closest('li');$li.addClass('is-active').find('.arch-detail').prop('hidden',false);$(trigger).attr('aria-expanded','true');$('#arch-status').text('Otwarto dział: '+$(trigger).find('b').text()+'.');const first=$li.find('.arch-detail a')[0];if(first)first.focus()}$triggers.on('click',function(event){event.preventDefault();$(this).attr('aria-expanded')==='true'?close(true):open(this)}).on('keydown',function(event){if(!['ArrowLeft','ArrowRight','Home','End'].includes(event.key))return;event.preventDefault();const list=$triggers.toArray();let index=list.indexOf(this);if(event.key==='Home')index=0;else if(event.key==='End')index=list.length-1;else index=(index+(event.key==='ArrowRight'?1:-1)+list.length)%list.length;list[index].focus()});$('.arch-detail').on('click','a',function(event){event.preventDefault();$('.arch-nav a[aria-current]').removeAttr('aria-current');$(this).attr('aria-current','page');$('#arch-status').text('Wybrano: '+$(this).text()+'.')});$(document).on('keydown',function(event){if(event.key==='Escape'&&opener){event.preventDefault();close(true)}}).on('pointerdown',function(event){if(opener&&!$(event.target).closest('.arch-nav').length)close(false)});$('nav a[href^="#"]').on('click',function(event){event.preventDefault();const nav=$(this).closest('nav');nav.find('[aria-current]').removeAttr('aria-current');$(this).attr('aria-current','page')});});