:root{
  --bg:#000;
  --muted:#C0C0C0;
  --nav-bg:#C0C0C0;
  --text:#C0C0C0;
  --nav-width:180px;
  --gap:20px;
}
/* Reset-ish */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.45;
}
a{color:rgb(10,10,10); font-weight:bold; text-decoration:none}
a:hover{color:rgb(95,95,95);text-decoration: underline}
a.mailto{color:var(--text);text-decoration:none}
a.mailto:hover{text-decoration: underline}

/* Layout */
.app{
  display:flex;
  gap:var(--gap);
  align-items:flex-start;
  max-width:1400px;
  margin:0 auto;
  padding:20px;
}
nav{
  flex:0 0 var(--nav-width);
  background:var(--nav-bg);
  padding:18px;
  box-sizing:border-box;
  height:100vh;
  position:sticky;
  top:0;
  overflow:auto;
}
nav ul{padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
nav li{list-style:none}
main{flex:1}
header h1{margin:0 0 12px 0;color:var(--muted);font-size:1.6rem}
.intro{color:var(--muted)}

main, main p, .intro, section { 
  text-align: justify;
  text-justify: inter-word; /* better justification in some browsers */
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto; /* allow hyphenation for German */
}

header h1, nav ul, nav li, h3 {text-align: left}

/* Gallery grid */
.images{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:18px}
.images{grid-template-columns:1fr 1fr}
.images .cell{overflow:hidden;max-width: 400px;}
.images .cell img{width:100%;height:100%;object-fit:cover;display:block}

/* Composite (two images that look like one) with preserved width ratio 130:223 */
.composite{display:flex;height:100%}
.composite img{height:100%;display:block;object-fit:cover}
.composite img:first-child{width:36.826%;flex:0 0 36.826%}
.composite img:last-child{width:63.174%;flex:0 0 63.174%}

/* Bio image helper */
.profile{float:right;max-width:260px;margin-left:18px}
.profile img{width:100%;height:auto;display:block}

/* Small screens */
@media (max-width:800px){
    .app{flex-direction:column;padding:12px}
  nav{position:relative;flex:none;width:100%;height:auto;order:0}
    .images{grid-template-columns:1fr;grid-auto-rows:auto}
  nav ul{flex-direction:row;flex-wrap:wrap;gap:10px}
  nav li{display:inline-block}

  /* Make the bio/profile image stack above the text on small screens
     Remove the float and let the aside take full width so the section
     content appears below the image. */
  .profile{float:none;max-width:100%;margin:0 0 18px 0}
  .profile img{margin:0 auto;display:block}
}

/* small utility */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* Utility to hide content but keep it available to assistive technologies */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

main.container {
  max-width: 100%;
  min-width: 0;
}

main.container img {
  max-width: 100%;
  height: auto;
  display: block;
}

main.container pre {
  white-space: pre-wrap;
  overflow-wrap: break-word;
  max-width: 100%;
}