*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img{max-width:100%}
a:focus-visible{outline:2px solid #C8102E;outline-offset:3px}
@media (max-width: 720px){
  [style*="grid-column: span 2"]{grid-column:auto !important}
  table{font-size:15px}
  [aria-label="Waar het genootschap voor staat"] > div{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:24px 16px !important}
  [aria-label="Waar het genootschap voor staat"] > div > div > span:nth-child(2){font-size:56px !important}
}
/* Mobiele navigatie: de knop verschijnt alleen met JavaScript en onder 720 px */
.menu-knop{display:none}
button:focus-visible{outline:2px solid #C8102E;outline-offset:3px}
@media (max-width: 720px){
  .js .menu-knop{display:inline-flex;align-items:center;gap:10px;font-family:'IBM Plex Mono',monospace;font-size:13px;color:#161414;background:transparent;border:1px solid #161414;padding:10px 14px;cursor:pointer}
  .menu-knop .menu-streep{display:inline-flex;flex-direction:column;gap:3px}
  .menu-knop .menu-streep span{display:block;width:16px;height:2px;background:currentColor}
  .js .menu-knop[aria-expanded="true"]{background:#161414;color:#F4EFE7}
  .js #hoofdmenu{display:none !important;flex-basis:100%;flex-direction:column;gap:0 !important;font-size:15px !important}
  .js #hoofdmenu.open{display:flex !important}
  .js #hoofdmenu a{padding:14px 0;border-top:1px solid #D9CFC0;text-decoration:none}
}
/* Erelijst op smalle schermen: per jaar een blok, prijscode als label */
@media (max-width: 720px){
  [aria-label="Erelijst per jaar"] > div{overflow-x:visible !important}
  [aria-label="Erelijst per jaar"] table{min-width:0 !important}
  [aria-label="Erelijst per jaar"] thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  [aria-label="Erelijst per jaar"] tr,[aria-label="Erelijst per jaar"] th[scope="row"],[aria-label="Erelijst per jaar"] td{display:block;width:auto !important}
  [aria-label="Erelijst per jaar"] tbody tr{padding:20px 0}
  [aria-label="Erelijst per jaar"] th[scope="row"]{padding:0 0 12px !important}
  [aria-label="Erelijst per jaar"] td{padding:6px 0 !important}
  [aria-label="Erelijst per jaar"] td::before{display:block;font-family:'IBM Plex Mono',monospace;font-size:11px;color:#5E5850;margin-bottom:2px;padding-left:26px;background:no-repeat left center/18px 10px}
  [aria-label="Erelijst per jaar"] td:nth-of-type(1)::before{content:"Coq de Grand Honneur";background-image:linear-gradient(#C8102E,#C8102E)}
  [aria-label="Erelijst per jaar"] td:nth-of-type(2)::before{content:"Coq d'Honneur";background-image:linear-gradient(#1E4C9A,#1E4C9A);background-size:12px 10px}
  [aria-label="Erelijst per jaar"] td:nth-of-type(3)::before{content:"Jonge Haan";background-image:linear-gradient(#F2C300,#F2C300);background-size:6px 10px}
  [aria-label="Erelijst per jaar"] td:empty{display:none}
}
/* Touchschermen (iPad, telefoon): ruimere tikvlakken in de navigatie */
@media (pointer: coarse) and (min-width: 721px){
  #hoofdmenu a,[aria-label="Jaargangen"] a{padding-top:10px;padding-bottom:10px}
}
/* Archieffoto's in de tijdlijn (geschiedenis.html): onder de tekst, links uitgelijnd.
   De breedte per figuur staat inline (hoort bij 380 px hoogte), zodat beide foto's even hoog zijn
   en het bijschrift niet breder wordt dan de foto. */
.tijdlijn-foto{margin:0;max-width:100%}
.tijdlijn-foto img{display:block;width:100%;height:auto;filter:grayscale(1) contrast(1.08)}
.tijdlijn-foto figcaption{padding-top:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#5E5850}
@media (max-width: 720px){
  .tijdlijn-foto{width:auto !important}
}
/* Header blijft bovenaan staan bij scrollen */
body > div > header{position:sticky;top:0;z-index:50;background:#F4EFE7}
/* Ankers (§01, §05, tijdperken) niet onder de vaste header laten landen */
[id]{scroll-margin-top:96px}
@media (min-width: 721px) and (max-width: 900px){
  [id]{scroll-margin-top:132px}
}
/* Home, De Hanen van ...: foto's naast elkaar, even hoog, elk in eigen verhouding (niets afgesneden).
   De flex-groei per figuur (inline) is de beeldverhouding: 0.75 staand, 1.5 liggend. */
.hanen-fotos{display:flex;gap:16px;align-items:flex-start}
.hanen-fotos figure{margin:0;min-width:0}
.hanen-fotos img{display:block;width:100%;height:auto}
.hanen-fotos figcaption{padding-top:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;color:#5E5850}
@media (max-width: 720px){
  .hanen-fotos{flex-direction:column}
  .hanen-fotos figure{flex:none !important;width:100%}
}
/* Fotoreeks in een verslag: raster van foto's, even hoog, bijschrift per foto */
.fotoreeks{max-width:1320px;margin:0 auto;padding:56px clamp(20px,4vw,48px) 0;box-sizing:border-box}
.fotoreeks > p{margin:0 0 16px;font-family:'IBM Plex Mono',monospace;font-size:13px}
.fotoreeks ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:24px 16px}
@media (max-width: 1100px){.fotoreeks ul{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width: 720px){.fotoreeks ul{grid-template-columns:repeat(2,minmax(0,1fr))}.fotoreeks img{aspect-ratio:3/2}}
.fotoreeks figure{margin:0}
.fotoreeks img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:50% 15%}
.fotoreeks figcaption{padding-top:8px;font-family:'IBM Plex Mono',monospace;font-size:12px;line-height:1.5;color:#5E5850}
/* Activiteiten: fieldtripfoto's op mobiel in twee kolommen */
@media (max-width: 1100px){.fieldtrip-fotos{grid-template-columns:repeat(3,minmax(0,1fr)) !important}}
@media (max-width: 720px){.fieldtrip-fotos{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.fieldtrip-fotos img{height:180px !important}}
/* Activiteiten: drie Hanendiner-kaarten op een rij, op mobiel onder elkaar */
@media (max-width: 720px){.hanen-kaarten{grid-template-columns:1fr !important}}