:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #000;
  background: #fff;
  font-synthesis: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, a:link, a:visited { color: #000; text-decoration: none; }
/* CONTACT is the only blue hyperlink on the website. */
a.contact-access, a.contact-access:visited,
a[href="/contact.html"], a[href="/contact.html"]:visited,
a[href="contact.html"], a[href="contact.html"]:visited { color: #0077cc; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
.home { overflow: hidden; }
.viewport {
  position: fixed;
  inset: 0;
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
  cursor: default;
  outline: none;
}
.viewport::-webkit-scrollbar { display: none; }
.viewport.is-grabbing { cursor: grabbing; user-select: none; }
.viewport:focus-visible { outline: 2px solid #777; outline-offset: -3px; }
.world {
  position: relative;
  width: 2600px;
  height: 2100px;
  overflow: hidden;
  user-select: none;
}
.piece { position: absolute; margin: 0; }
.piece img, .piece video { display: block; max-width: 100%; width: 100%; height: auto; border: 0; pointer-events: none; }
.image-neon { left: 610px; top: 360px; width: 340px; }
.image-shark { left: 1660px; top: 380px; width: 300px; }
.image-noland { left: 1390px; top: 1360px; width: 570px; }
/* Embedded YouTube/Vimeo footage is a floating artwork, not a fixed page widget. */
.youtube-piece {
  left: 1080px; top: 540px; width: 530px;
  aspect-ratio: 16 / 9; overflow: hidden; background: #111;
  isolation: isolate;
}
.youtube-frame,
.youtube-thumbnail,
.youtube-hitarea { position: absolute; inset: 0; width: 100%; height: 100%; }
.youtube-frame { z-index: 1; pointer-events: none; }
.youtube-frame iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.youtube-piece .youtube-thumbnail {
  z-index: 2; display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none;
  transition: opacity 120ms linear;
}
.youtube-piece.is-playing .youtube-thumbnail { opacity: 0; visibility: hidden; }
.youtube-hitarea {
  z-index: 3; padding: 0; border: 0; background: transparent;
  color: #fff; cursor: pointer; font: inherit; touch-action: manipulation;
}
.youtube-hitarea:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.youtube-touch-control { display: none; }
.pf1-piece {
  left: 260px; top: 1150px; width: 420px;
  aspect-ratio: var(--pf1-ratio, 1.4);
}
.pf1-link { display: block; width: 100%; height: 100%; cursor: pointer; }
.pf1-piece .pf1-preview { display: block; width: 100%; height: 100%; object-fit: contain; }
.pf1-link:focus-visible { outline: 2px solid #000; outline-offset: 4px; }
.artist-info { left: 1100px; top: 880px; font-size: 17px; line-height: 1.36; text-align: center; white-space: nowrap; }
.green-marker { left: 865px; top: 1200px; width: 60px; height: 60px; background: green; }
.site-footer {
  position: fixed;
  z-index: 5;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 14px 18px 16px;
  background: rgba(255,255,255,.96);
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  gap: 20px;
  font-size: 16px;
  line-height: 1.3;
}
.site-footer nav { display: flex; gap: 18px; flex: none; }

/* CV and legal pages intentionally retain the plain-text feel of the original. */
/* Non-canvas pages use normal document scrolling, including on mobile. */
body.secondary { position: static; height: auto; min-height: 100vh; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.secondary { min-height: 100vh; padding: 18px; font-size: 15px; line-height: 1.5; }
.secondary .back { display: inline-block; margin-bottom: 20px; }
.secondary-content { max-width: 900px; margin: 0 auto 70px; }
.cv-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 14px/1.5 "Courier New", Courier, monospace; }
.imprint { max-width: 700px; }
.imprint p { margin: 0 0 1.2em; }

@media (max-width: 600px) {
  .world { width: 1450px; height: 1950px; }
  .image-neon { left: 410px; top: 450px; width: 300px; }
  .image-shark { left: 840px; top: 350px; width: 180px; }
  .image-noland { left: 510px; top: 1370px; width: 420px; }
  .youtube-piece { left: 410px; top: 970px; width: 360px; }
  .pf1-piece { left: 970px; top: 1370px; width: 270px; }
  .artist-info { left: 645px; top: 850px; font-size: 15px; }
  .green-marker { left: 885px; top: 1180px; width: 45px; height: 45px; }
  .site-footer { padding: 11px 12px calc(11px + env(safe-area-inset-bottom)); flex-direction: row; align-items: flex-end; gap: 6px; font-size: 13px; }
  .site-footer nav { gap: 20px; }
  .secondary { padding: 12px; }
  .secondary-nav {font-size:11px;gap:8px 13px;margin-bottom:20px;}
  .cv-text { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .image-shark video { /* video is paused by the script for motion-sensitive users */ }
}

/* No hover on a phone: make the tappable play/pause affordance discoverable. */
@media (hover: none) and (pointer: coarse) {
  .youtube-touch-control {
    display: grid; place-items: center; position: absolute;
    left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 40px; height: 40px; background: rgba(0,0,0,.65);
    border-radius: 50%; font-size: 20px;
  }
  .youtube-piece.is-playing .youtube-touch-control,
  .youtube-piece.needs-gesture .youtube-touch-control { display: none; }
}

/* PF 1 / second layer: one complete image within each visible viewport. */
.pf1-page { min-height: 100vh; background: #fff; }
.pf1-back {
  position: fixed; top: 18px; left: 20px; z-index: 10;
  font: 15px/1.3 Arial, Helvetica, sans-serif;
  color: #000; background: rgba(255, 255, 255, .87);
  padding: 4px 6px;
}
.pf1-gallery {
  width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
}
.pf1-gallery figure {
  width: 100%;
  height: 100vh; /* Fallback for browsers without small viewport units */
  height: 100svh;
  margin: 0;
  padding: 48px 24px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
.pf1-gallery img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(100vh - 96px); /* Fallback */
  max-height: calc(100svh - 96px);
  object-fit: contain;
}
@media (max-width: 600px) {
  .pf1-back { top: 12px; left: 10px; font-size: 13px; }
  .pf1-gallery figure { padding: 42px 12px; }
  .pf1-gallery img {
    max-height: calc(100vh - 84px); /* Fallback */
    max-height: calc(100svh - 84px);
  }
}


/* CONTACT: a separate, deliberately plain navigational layer. */
.contact-content { max-width: 900px; }
.contact-content h1, .legal-content h1 {
  margin: 0 0 1.3em; font: inherit; font-weight: normal;
}
.contact-links { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
/* Same compact, functional menu typography as CV on the landing page. */
.secondary-nav {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap:8px clamp(10px, 3vw, 18px);
  margin:0 0 24px;
  font:12px/1.3 Arial, Helvetica, sans-serif;
}
.secondary-nav .back {margin:0;}
.secondary-nav a {white-space:nowrap; font:inherit;}
.pf1-contact {
  position: fixed; top: 22px; right: 24px; z-index: 10;
  font: 15px/1.3 Arial, Helvetica, sans-serif;
  background: rgba(255,255,255,.87); padding: 4px 6px;
}
.legal-content { max-width: 700px; }
.legal-content p { margin: 0 0 1.2em; }
@media (max-width: 600px) {
  .pf1-contact { top: 16px; right: 14px; font-size: 13px; }
}

/* V15: plain, readable legal pages, no design elements beyond typography. */
.legal-content section { margin: 0 0 2.1em; }
.legal-content h2 { font: inherit; font-weight: normal; margin: 0 0 .45em; }
.legal-content section p { margin: 0 0 1em; }
.legal-content .legal-draft-note { margin-bottom: 2em; }
.legal-meta { margin-top: 3em; font-size: 13px; }


.logout-form{display:inline;margin:0;padding:0;}
.logout-form button{border:0;background:none;color:#000;cursor:pointer;padding:0;font:inherit;}
.logout-form button:hover{text-decoration:underline;}

/* Keep secondary navigation as small as the landing-page CV link on phones. */
@media (max-width:600px) { .secondary-nav {font-size:11px; gap:8px 13px; margin-bottom:20px;} }

/* V23: All non-embedded-media artwork opens the PF 1 portfolio. */
.artwork-link { display: block; width: 100%; height: 100%; cursor: pointer; }
.artwork-link:focus-visible { outline: 2px solid #000; outline-offset: 4px; }


/* V29 / PF 1 series hanging: two horizontal groups in the final third.
   Ordinary portfolio images retain the existing one-image-per-viewport layout. */
.pf1-gallery .pf1-series-row {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  height: 100svh;
  margin: 0;
  padding: 72px clamp(24px, 5vw, 86px);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(10px, 1.6vw, 26px);
}
.pf1-gallery .pf1-series-row figure {
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  height: auto;
  max-width: 340px;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pf1-gallery .pf1-series-row img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: min(68svh, 760px);
  object-fit: contain;
}
@media (max-width: 700px) {
  .pf1-gallery .pf1-series-row {
    justify-content: flex-start;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 70px max(14vw, 24px);
    scroll-snap-type: x mandatory;
    scroll-padding-inline: max(14vw, 24px);
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pf1-gallery .pf1-series-row::-webkit-scrollbar { display: none; }
  .pf1-gallery .pf1-series-row figure {
    flex: 0 0 72vw;
    width: 72vw;
    max-width: 360px;
    height: auto;
    scroll-snap-align: center;
  }
  .pf1-gallery .pf1-series-row img {
    max-height: calc(100svh - 160px);
  }
}

/* V31: clustered image display and a self-contained Vimeo artwork in PF 1. */
.pf1-gallery .pf1-facebook-grid {
  box-sizing: border-box;
  width: 100%;
  height: 100vh;
  height: 100svh;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: clamp(10px, 2.2vw, 24px);
  max-width: 1040px;
  margin: 0 auto;
  padding: clamp(48px, 6vh, 80px) clamp(20px, 5vw, 60px);
  align-items: center;
}
.pf1-gallery .pf1-facebook-grid figure {
  width: 100%; height: 100%; min-width: 0;
  margin: 0; padding: 0;
  display: flex; justify-content: center; align-items: center;
}
.pf1-gallery .pf1-facebook-grid img {
  display: block; width: 100%; height: 100%;
  min-width: 0; min-height: 0; object-fit: contain;
  max-width: 100%; max-height: 100%;
}
.pf1-gallery .pf1-vimeo-section {
  width: 100%; height: 100vh; height: 100svh;
  display: flex; justify-content: center; align-items: center;
  padding: 60px clamp(15px, 5vw, 90px);
}
.pf1-gallery .pf1-vimeo-artwork {
  position: relative;
  width: min(100%, 1050px);
  aspect-ratio: 16 / 9;
  max-height: calc(100svh - 120px);
  background: #111;
  overflow: hidden;
}
.pf1-vimeo-frame, .pf1-vimeo-frame iframe,
.pf1-vimeo-interaction { position: absolute; inset: 0; width: 100%; height: 100%; }
.pf1-vimeo-frame iframe { display: block; border: 0; pointer-events: none; }
.pf1-vimeo-interaction {
  border: 0; background: transparent; color: #fff;
  cursor: pointer; touch-action: manipulation;
}
.pf1-vimeo-interaction:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
@media (max-width: 700px) {
 .pf1-gallery .pf1-facebook-grid { padding: 62px 12px; gap: 9px; }
 .pf1-gallery .pf1-vimeo-section { padding: 16px 12px; }
 .pf1-gallery .pf1-vimeo-artwork { width: 100%; }
}