/* WINGLHOFER — lean stylesheet, no webfonts, no framework */

:root{
  --fg: #111;
  --bg: #fff;
  --muted: #767676;
  --font: "mr-eaves-xl-modern", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
}

*{ box-sizing: border-box; }

html{ height:100%; }

body{
  margin:0;
  min-height:100%;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--font);
  overflow-x:hidden;
  max-width:100vw;
}

img{ max-width:100%; display:block; }

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:underline; }

/* ---------- header ---------- */

.site-header{
  flex:0 0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:0.75rem 1.5rem;
  justify-content:space-between;
  align-items:center; /* vertically centers "home"/"about" on the logo's own middle height */
  padding: 2rem 2.5rem;
}

.logo{ line-height:0; }
.logo a{ display:block; }
.logo img{
  height:132px;
  width:auto;
  display:block;
}

.site-nav{
  display:flex;
  gap:1.25rem;
  font-size:1.14rem;
  text-transform:lowercase;
}
.site-nav a[aria-current="page"]{ font-weight:700; }

/* Desktop: logo and nav pinned to roughly 1/3 and 2/3 across the
   viewport, rather than hugging the left/right edges. Taken out of flow
   so the vw-based offsets are measured from the true viewport edge;
   min-height keeps the header's own height from collapsing once its
   children no longer contribute to flex flow. */
@media (min-width: 641px){
  .site-header{
    position:relative;
    min-height:196px;
  }
  .logo{
    position:absolute;
    left:8vw;
    top:50%;
    transform:translate(-50%, -50%);
  }
  .site-nav{
    position:absolute;
    left:92vw;
    top:50%;
    transform:translate(-50%, -50%);
  }
}

@media (max-width: 640px){
  .site-header{ padding:1.25rem; }
  .logo img{ height:108px; }
}

/* ---------- slideshow (home page) ----------
   Manual navigation only — no auto-advance, no fade timer. One photo on
   screen at a time, always at the same height (width follows its own
   aspect ratio), centered; arrows underneath step through the set. */

.slideshow-wrap{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  flex-direction:column;
}

#slideshow{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:var(--bg);
}

.photo{
  /* positioned absolutely (rather than centered via flex) on purpose: an
     in-flow <img> inside a flex column makes the flex item's own height
     grow to the image's full intrinsic size (a circular auto-height
     dependency), which blows the layout out to the photo's raw pixel
     height. Taking it out of flow with position:absolute sidesteps that
     — #slideshow then gets a real height purely from flex-grow, and the
     photo's height:86% resolves cleanly against it. */
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  height:95%;
  max-height:95%;
  width:auto;
  max-width:97%;
  object-fit:contain;
  /* purely a picture, on purpose — no click/enlarge behavior */
  pointer-events:none;
}

.slideshow-nav{
  flex:0 0 auto;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:2.5rem;
  padding:1rem 0 2rem;
}

.slideshow-nav button{
  appearance:none;
  background:none;
  border:none;
  margin:0;
  padding:0.4rem 1rem;
  font-family:var(--font);
  font-size:2rem;
  line-height:1;
  color:var(--fg);
  cursor:pointer;
}
.slideshow-nav button:hover{ opacity:0.55; }
.slideshow-nav button:disabled{ opacity:0.25; cursor:default; }

@media (max-width: 640px){
  .photo{ height:88%; max-height:88%; max-width:95%; }
  .slideshow-nav{ gap:2rem; padding:0.5rem 0 1.5rem; }
  .slideshow-nav button{ font-size:1.75rem; }
}

/* ---------- about page ----------
   Same horizontal centering as the home page's photo, but anchored nearer
   the top of the space below the header rather than dead-center. */

.about-wrap{
  flex:1 1 auto;
  min-height:0;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:auto;
  padding:4rem 2.5rem 2.5rem;
}

.about{
  max-width:640px;
  font-size:0.95rem;
  line-height:1.6;
}
.about h1{
  font-size:1.4rem;
  margin-bottom:1rem;
}
.about .contact{
  margin-top:2rem;
  font-size:0.9rem;
  color:var(--muted);
}

@media (max-width: 640px){
  .about-wrap{ padding:2rem 1.25rem 1.25rem; }
}