/* ==========================================================================
   Piet Gescher — portfolio stylesheet
   ==========================================================================
   This file is organised in sections. Every section that you are likely
   to want to tweak has a comment above it explaining what to change and
   where. Search for "ADJUST" to jump between the customisable spots.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. DESIGN TOKENS
   ADJUST: colours, spacing and font here to restyle the whole site at once.
   -------------------------------------------------------------------------- */
:root {
  --color-bg: #ffffff;        /* page background — ADJUST for a different background colour */
  --color-text: #000000;      /* main text colour  — ADJUST for a different text colour */
  --color-muted: #6b6b6b;     /* secondary text (captions, inactive nav) */
  --color-line: #e2e2e2;      /* hairline borders / dividers */
  --color-accent: #000000;    /* underline / active state colour, currently same as text */

  /* Avenir is a licensed font and is not installed on every device (it ships
     with macOS/iOS by default). The stack below tries Avenir first, then
     falls back to very similar-looking geometric sans-serif fonts, so the
     site still looks right on Windows/Linux/Android.
     ADJUST: replace "Avenir Next" with any other font you own the rights to. */
  --font-main: "Avenir Next", Avenir, "Nunito Sans", "Century Gothic",
               "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --nav-height: 88px;         /* height of the fixed top navigation bar */
  --gutter: 6vw;               /* left/right page margin, scales with viewport */
  --max-width: 1400px;        /* content never grows wider than this */

  --speed: 0.25s;             /* base transition speed used across the site */
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-main);
  font-weight: 400;
  line-height: 1.5;
  min-height: 100vh;
  /* Keeps the fixed nav from covering the top of every page's content */
  padding-top: var(--nav-height);
}

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

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

button {
  font-family: inherit;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

/* Visible keyboard focus state — kept for accessibility, do not remove.
   ADJUST: change outline colour/width if it clashes with your palette. */
:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   3. NAVIGATION
   ADJUST: --nav-height above controls the bar's height; type-related
   properties are set here (letter-spacing, size).
   -------------------------------------------------------------------------- */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-line);
  z-index: 100;
}

.site-nav .brand {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.site-nav .brand .brand-sub {
  font-weight: 400;
  color: var(--color-muted);
  margin-left: 0.5em;
}

.nav-links {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  list-style: none;
}

.nav-links a {
  position: relative;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  text-transform: lowercase;
  padding: 0.4em 0.1em;
}

/* Understated underline that grows in on hover/focus/active page.
   This is the site's one small signature detail — ADJUST height/colour
   via --color-accent above if you'd like a different underline colour. */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: var(--color-accent);
  transition: width var(--speed) ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a[aria-current="page"]::after {
  width: 100%;
}

.nav-links a[aria-current="page"] {
  color: var(--color-text);
}

/* Small hint shown once so visitors know arrow-key navigation exists.
   ADJUST: delete the .kbd-hint rule and its HTML if you don't want this. */
.kbd-hint {
  display: none;
  font-size: 0.75rem;
  color: var(--color-muted);
}

@media (min-width: 700px) {
  .kbd-hint {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   4. PAGE LAYOUT / SHARED
   -------------------------------------------------------------------------- */
main {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.page-enter {
  animation: fade-in 0.4s ease both;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   5. HOME PAGE
   ADJUST: font-size clamp() values control how the title scales between
   phone and desktop.
   -------------------------------------------------------------------------- */
.home-hero {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2rem;
}

.home-hero h1 {
  font-size: clamp(2.2rem, 7vw, 5.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.05;
}

.home-hero .home-sub {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--color-muted);
  font-weight: 400;
}

.home-links {
  display: flex;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: 1rem;
}

.home-links a {
  font-size: clamp(1rem, 2vw, 1.3rem);
  text-transform: lowercase;
  border-bottom: 1px solid var(--color-text);
  padding-bottom: 0.15em;
  transition: opacity var(--speed) ease;
}

.home-links a:hover,
.home-links a:focus-visible {
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   6. WERK PAGE — category filters
   ADJUST: gap/padding for the pill buttons.
   -------------------------------------------------------------------------- */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 2rem 0 1.5rem;
  border-bottom: 1px solid var(--color-line);
  margin-bottom: 2rem;
}

.filter-btn {
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  text-transform: lowercase;
  padding: 0.45em 1em;
  border: 1px solid var(--color-line);
  border-radius: 999px;
  transition: background var(--speed) ease, color var(--speed) ease,
              border-color var(--speed) ease;
}

.filter-btn:hover {
  border-color: var(--color-text);
}

.filter-btn[aria-pressed="true"] {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

/* The "random" button is an action, not a category, so it gets a dashed
   border to read as slightly different from the category pills.
   ADJUST: change border-style back to solid if you'd rather it match. */
.filter-btn-random {
  border-style: dashed;
  margin-left: 0.4rem;
}

/* --------------------------------------------------------------------------
   7. WERK PAGE — image grid
   ADJUST: --grid-min controls how small a column can get before wrapping
   to the next row (i.e. controls how many columns show on wide screens).
   -------------------------------------------------------------------------- */
.gallery {
  --grid-min: 260px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--grid-min), 1fr));
  gap: clamp(0.75rem, 2vw, 1.5rem);
  padding-bottom: 4rem;
}

.gallery-item {
  position: relative;
  aspect-ratio: 1 / 1;      /* ADJUST to 4/5, 3/4 etc. for taller thumbnails */
  overflow: hidden;
  background: #f4f4f4;      /* placeholder colour visible while an image loads */
}

.gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.gallery-item:hover img,
.gallery-item:focus-visible img {
  transform: scale(1.04);
}

.gallery-item figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.6em 0.8em;
  font-size: 0.75rem;
  color: #fff;
  background: linear-gradient(to top, rgba(0,0,0,0.55), rgba(0,0,0,0));
  opacity: 0;
  transition: opacity var(--speed) ease;
  pointer-events: none;
}

.gallery-item:hover figcaption,
.gallery-item:focus-visible figcaption {
  opacity: 1;
}

.gallery-empty {
  color: var(--color-muted);
  padding: 3rem 0;
}

/* --------------------------------------------------------------------------
   8. LIGHTBOX (fullscreen image viewer)
   Arrows are placed in the side margins outside the image itself, so they
   never sit on top of the artwork. On narrow screens they are hidden
   entirely and replaced by swipe gestures (see js/script.js).
   ADJUST: --lightbox-arrow-zone sets how much side margin is reserved.
   -------------------------------------------------------------------------- */
.lightbox {
  --lightbox-arrow-zone: 72px;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.98);
  display: grid;
  grid-template-columns: var(--lightbox-arrow-zone) 1fr var(--lightbox-arrow-zone);
  align-items: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--speed) ease;
}

.lightbox[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
}

.lightbox-figure {
  grid-column: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5rem 1rem 3rem;
  touch-action: pan-y; /* leaves horizontal gesture free for swipe navigation */
}

.lightbox-figure img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  user-select: none;
}

.lightbox-caption {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--color-muted);
  text-align: center;
}

/* Arrows live in the reserved side "zones" — never overlapping the image */
.lightbox-arrow {
  grid-row: 1;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  color: var(--color-text);
  opacity: 0.5;
  transition: opacity var(--speed) ease;
}

.lightbox-arrow:hover,
.lightbox-arrow:focus-visible {
  opacity: 1;
}

.lightbox-prev { grid-column: 1; }
.lightbox-next { grid-column: 3; }

/* Hide the click arrows on touch/narrow screens — swipe takes over instead.
   ADJUST the breakpoint if you want arrows to persist on tablets. */
@media (max-width: 700px) {
  .lightbox {
    grid-template-columns: 0 1fr 0;
  }
  .lightbox-arrow {
    display: none;
  }
}

.lightbox-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1.4rem;
  line-height: 1;
  padding: 0.5em;
  z-index: 2;
}

.lightbox-index {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-size: 0.8rem;
  color: var(--color-muted);
}

/* --------------------------------------------------------------------------
   9. WIE / WAAR PAGES
   -------------------------------------------------------------------------- */
.text-page {
  min-height: calc(100vh - var(--nav-height));
  display: flex;
  align-items: center;
  padding: 4rem 0;
}

.text-page .text-block {
  max-width: 640px;
}

.text-page h1 {
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 600;
  margin-bottom: 1.25rem;
}

.text-page p {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--color-text);
}

.text-page a.mail-link {
  border-bottom: 1px solid var(--color-text);
  transition: opacity var(--speed) ease;
}

.text-page a.mail-link:hover,
.text-page a.mail-link:focus-visible {
  opacity: 0.5;
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--color-line);
  padding: 1.5rem var(--gutter);
  font-size: 0.75rem;
  color: var(--color-muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* --------------------------------------------------------------------------
   11. RESPONSIVE — small phones
   ADJUST: this is where nav / hero sizing gets tightened up further for
   very small screens.
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root {
    --gutter: 5vw;
  }
  .site-nav .brand .brand-sub {
    display: none; /* saves space on very narrow screens */
  }
  .nav-links {
    gap: 1rem;
  }
}