:root{
    --bg:#ffffff;          /* pure white background */
    --fg:#111111;
    --muted:#666;
    --bar:#ffffff;         /* side bars - changed to white */
    --nav-h:64px;          /* navigation and footer height */
    --arrow-width:64px;    /* width of arrow bars */
    --gap:0;
  }
  @font-face {
    font-family: 'PP Neue Machina Inktrap';
    src: url('fonts/PPNeueMachina-InktrapSemibold.woff2') format('woff2'),
         url('fonts/PPNeueMachina-InktrapSemibold.woff') format('woff'),
         url('fonts/PPNeueMachina-InktrapSemibold.otf') format('opentype'),
         url('fonts/PPNeueMachina-InktrapSemibold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'PP Mori';
    src: url('fonts/PPMori-SemiBold.woff2') format('woff2'),
         url('fonts/PPMori-SemiBold.woff') format('woff'),
         url('fonts/PPMori-SemiBold.otf') format('opentype'),
         url('fonts/PPMori-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }

  @font-face {
    font-family: 'PP Mori';
    src: url('fonts/PPMori-Regular.woff2') format('woff2'),
         url('fonts/PPMori-Regular.woff') format('woff'),
         url('fonts/PPMori-Regular.otf') format('opentype'),
         url('fonts/PPMori-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    background:var(--bg);
    color: var(--fg);
    font: 16px/1.4 'PP Mori', system-ui, -apple-system, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  /* Base text color */
  body {
    color: var(--fg);
  }
  
  /* Muted text */
  .footer > div:first-child {
    color: var(--muted);
  }
  
  /* Full opacity for interactive elements and captions */
  .logo, 
  .nav a, 
  .footer a, 
  .caption,
  .nav,
  .footer {
    color: #000000;
    opacity: 1 !important;
  }

  /* NAV */
  .nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 64px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    background: var(--bg);
    z-index: 1000;
    box-sizing: border-box;
  }
  .footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 64px;
    background: var(--bg);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    z-index: 1000;
    box-sizing: border-box;
    font-family: 'PP Mori', system-ui, -apple-system, sans-serif;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 0.01em;
  }
  .logo {
    font-family: 'PP Neue Machina Inktrap', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 1.9rem;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    margin: 2px 0 0 0;
    display: flex;
    align-items: center;
    height: 100%;
  }
  .logo-link, .logo-link:hover {
    color: inherit;
    text-decoration: none;
  }
  .nav a, .footer a{
    color:inherit;
    text-decoration:none;
  }
  .nav a:hover, .footer a:hover{ text-decoration: none; }
  .nav .links, .footer a { 
    display:flex; 
    gap:24px; 
    align-items:center;
    font-family: 'PP Mori', system-ui, -apple-system, sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.02em;
  }

  /* VIEWPORT SLIDESHOW (desktop/tablet) */
  .stage{
    height:calc(100dvh - var(--nav-h) - var(--nav-h));
    padding-bottom: var(--nav-h); /* Add space for the footer */
    position:relative;
  }
  .rail{
    height:100%;
    display:flex;
    gap:var(--gap);
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    -webkit-overflow-scrolling:touch;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
  }
  /* Hide scrollbar for Chrome, Safari and Opera */
  .rail::-webkit-scrollbar {
    display: none;
  }
  .slide{
    position:relative;
    flex:0 0 100vw;        /* each slide fills the viewport width */
    height:100%;
    scroll-snap-align:start;
    scroll-snap-stop:always;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background:#ffffff;     /* changed to pure white */
    padding: 0;
    box-sizing: border-box;
  }
  .slide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 0;
    flex: 1;
    padding: 5vh 0 0;
    box-sizing: border-box;
  }
  .slide img{
    max-width: 95vw;
    max-height: 80vh;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    opacity: 1 !important;
    margin: 0 auto;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform: translateZ(0) scale(1, 1);
    transform: translateZ(0);
    will-change: opacity;
    filter: none !important;
  }
  
  /* Ensure no parent elements are affecting opacity */
  .slide,
  .slide *,
  .slide-content,
  .rail,
  main {
    opacity: 1 !important;
  }
  .caption {
    margin: 0;
    text-align: center;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.4;
    color: var(--fg);
    padding: 0;
  }
  .caption .title {
    font-weight: 600;
    font-style: italic;
  }
  .caption .meta {
    opacity: 0.8 !important;
  }

  /* Side bars with arrow buttons (desktop only) */
  .nav-bars{
    position:absolute;
    inset:0;
    pointer-events:none; /* let clicks pass except on buttons */
  }
  .bar{
    position:absolute; 
    top:0; 
    bottom:0; 
    width:var(--arrow-width);
    background:var(--bar);
    opacity:1;
    transition:opacity 0.2s ease;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:auto;
    border: none;
  }
  .bar.left {
    border-right: 1px solid rgba(0, 0, 0, 0.3);
  }
  .bar.right {
    border-left: 1px solid rgba(0, 0, 0, 0.3);
  }
  .bar:hover{ opacity:.95; }
  .bar.left{ left:0; }
  .bar.right{ right:0; }
  .bar button{
    background:transparent; border:none; color:#fff; cursor:pointer;
    width:100%; height:100%;
    display:grid; place-items:center;
  }
  .bar svg{ width:28px; height:28px; }

  /* MOBILE: vertical feed, no snap, no bars */
  @media (max-width: 768px){
    .rail{
      display:block;
      overflow-x:hidden;
      overflow-y:auto;
      padding-top: 120px;
      scroll-snap-type:none;
    }
    .slide{
      width:100%;
      height:auto;
      padding:0; /* let explicit margins control inter-slide spacing */
      content-visibility: auto;
      contain-intrinsic-size: 1000px;
    }
    .slide:not(:last-child){ margin-bottom:120px; }
    .slide img{ width:100%; height:auto; }
    .nav-bars{ display:none; }
  }

  /* Simple focus styles */
  a:focus-visible, button:focus-visible{
    outline:2px solid #2a7cff;
    outline-offset:2px;
  }

  /* Layout for desktop (no vertical scrolling) */
  @media (min-width: 769px) {
    html, body {
      height: 100%;
      overflow: hidden; /* Prevent all scrolling */
    }
    .page {
      height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .stage {
      flex: 1;
      overflow: hidden; /* Hide any overflow from the stage */
    }
    .rail {
      height: 100%;
      overflow-y: hidden; /* Prevent vertical scrolling */
    }
    .footer {
      flex-shrink: 0;
      background: var(--bg);
      z-index: 1;
    }
  }

  /* Info page layout overrides */
  .info-page main {
    padding: calc(var(--nav-h) + 100px) 24px calc(var(--nav-h) + 24px);
    margin: 0 auto;
  }
  /* Allow vertical scrolling on desktop for info page */
  @media (min-width: 769px) {
    body.info-page {
      height: auto;
      overflow-y: auto;
    }
    .info-page main {
      width: 60vw;
      max-width: none;
    }
  }

  /* Info page typography */
  .info { 
    color: rgba(0, 0, 0, 0.85);
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .info .copy {
    font-family: 'PP Mori', system-ui, -apple-system, sans-serif;
    font-style: normal;
    font-weight: 500;
    padding: 0;
    margin: 0;
    color: rgba(0, 0, 0, 0.85);
    font-size: 1.5rem;
    line-height: 1.5;
  }
  .info .contact {
    font-size: 1rem;
    color: rgba(0, 0, 0, 0.75);
    font-family: 'PP Mori', system-ui, -apple-system, sans-serif;
    line-height: 1;
    font-style: normal;
    font-weight: 300;
    letter-spacing: .03em;
    margin-top: 40px;
  }
  .info .email {
    display: inline-block;
    font-size: 1.5rem;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.85);
    font-family: 'PP Mori', system-ui, -apple-system, sans-serif;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: normal;
    text-decoration: none;
  }
  .info .email:hover {
    text-decoration: none;
  }

  /* Mobile padding for info page */
  @media (max-width: 768px) {
    body.info-page {
      min-height: 100dvh;
      display: flex;
      flex-direction: column;
    }
    .info-page main {
      padding: calc(var(--nav-h) + 16px) 20px 0;
      min-height: calc(100dvh - var(--nav-h));
      display: flex;
      flex-direction: column;
      flex: 1 0 auto;
    }
    /* Ensure footer sits at the bottom without extra space */
    .info-page .footer {
      position: static;
    }
    .info { margin: 0 20px; }
    /* Info page mobile typography adjustments */
    .info .copy { font-size: 1em; }
    .info .contact { font-size: 0.75em; }
    .info .email { font-size: 1em; }
  }
  
  /* Keep mobile styles intact */
  @media (max-width: 768px) {
    html, body {
      height: auto;
      overflow-y: auto;
    }
    .page {
      min-height: 100vh;
      display: flex;
      flex-direction: column;
    }
    .stage { 
      flex: 1 0 auto;
      height: auto;           /* override desktop calc height */
      padding-bottom: 0;      /* prevent extra gap above sticky footer */
    }
    .footer { 
      position: sticky;
      bottom: 0;
      background: var(--bg);
      z-index: 1;
      height: var(--nav-h);
      padding: 0 20px;
    }
    /* Mobile nav sides padding */
    .nav {
      padding: 0 20px;
    }
    /* Mobile footer sides padding and link sizing */
    .footer {
      padding: 0 20px;
    }
    .footer a {
      font-size: 1rem;
    }
    /* Mobile footer copyright size */
    .footer > div:first-child {
      font-size: 0.875rem;
    }
    /* Mobile nav sizing */
    .logo {
      font-size: 1.2rem;
      letter-spacing: 0.005em;
      white-space: nowrap;
    }
    .nav .links {
      font-size: 1rem;
      gap: 10px;
      margin-left: 24px; /* ensure at least 24px spacing from logo */
    }
    .caption {
      font-size: 0.8rem;
      margin-top: 12px;
    }
    /* tighten slide content padding to reduce vertical space */
    .slide-content {
      padding: 8px 0 0;
    }
    /* extra space under the last image on the page */
    .slide:last-child {
      padding-bottom: calc(var(--nav-h) + 24px);
    }
    /* Replace 'Archive' with '•••' on mobile */
    .nav .links a[href$="#y2018"] {
      font-size: 0; /* hide original text */
    }
    .nav .links a[href$="#y2018"]::after {
      content: '•••';
      font-size: 1rem; /* restore size for replacement */
      letter-spacing: 0.12em;
      display: inline-block;
      line-height: 1;
    }
  }

      /* Image Viewer Styles */
    .image-viewer {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.85);
      z-index: 2000;
      margin: 0;
      padding: 0;
      opacity: 0;
      transition: opacity 0.3s ease;
      overflow: hidden;
    }

    .image-viewer.active {
      display: flex;
      opacity: 1;
    }

    .modal-image {
      position: fixed;
      top: 50%;
      left: 50%;
      width: 100%;
      height: 100%;
      object-fit: contain;
      margin: 0;
      padding: 0;
      cursor: pointer;
      object-position: center;
      will-change: transform;
      transform-origin: center center;
      transform: translate(-50%, -50%);
      transition: transform 0.25s ease-out;
    }

    /* When zoomed, use natural image dimensions to avoid inner letterboxing/cropping */
    .image-viewer.zoomed .modal-image {
      width: auto;
      height: auto;
      max-width: none;
      max-height: none;
    }

    .image-viewer-content.zoomed img:active {
      cursor: grabbing;
    }

    .close-btn {
      position: fixed;
      top: 20px;
      right: 30px;
      color: #fff;
      font-size: 40px;
      font-weight: 300;
      cursor: pointer;
      z-index: 2001;
      line-height: 1;
      text-shadow: 0 1px 3px rgba(0,0,0,0.3);
      transition: transform 0.2s ease, color 0.2s ease;
    }
    
    .close-btn:hover {
      color: #fff;
      transform: scale(1.1);
    }

    .close-btn:hover {
      color: #666;
    }

    /* Zoom/drag cursors for image viewer */
    .image-viewer.zoomed .modal-image {
      cursor: grab;
      touch-action: none;
    }
    .image-viewer.dragging .modal-image {
      cursor: grabbing;
    }