:root {
  --max-width:1100px;
  --pad:16px;
  --gap:12px;
  --bg:#ffffff;
  --fg:#111418;
  --muted:#5b6776;
  --card:#f5f7fa;
  --accent:#0ea5e9;
  --link:#5b6776;
  --link-hover:#111418;
  --link-active:#0ea5e9;
  --thumb:112px;

  /* spacing for the home hero */
  --hero-pad: clamp(8px, 2vw, 20px);
}

@media (max-width:900px){ :root { --thumb: 96px; } }
@media (max-width:600px){ :root { --thumb: 84px; } }

*,*::before,*::after{ box-sizing:border-box; }

/* Make root non-scrollable; panes handle any scrolling */
html,body{
  height:100%;
  margin:0; padding:0;
  overflow:hidden;            /* was overflow-x only; now fully locked */
  background:var(--bg); color:var(--fg);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Noto Sans,Ubuntu,Cantarell,Helvetica Neue,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
}

/* Use dynamic viewport units so height matches the *visible* iOS viewport */
.page{
  display:flex; flex-direction:column;
  min-height:100vh; height:100vh;      /* fallback */
}
@supports (height: 100svh){
  .page{ min-height:100svh; height:100svh; }
}
@supports (height: 100dvh){
  .page{ min-height:100dvh; height:100dvh; }
}

header{
  border-bottom:1px solid color-mix(in oklab, var(--fg) 12%, transparent);
  background:color-mix(in oklab, var(--card) 90%, transparent);
  flex:0 0 auto;
}
.wrap{ max-width:var(--max-width); margin-inline:auto; padding:var(--pad); }
.topbar{ display:flex; justify-content:space-between; align-items:center; gap:var(--gap); flex-wrap:wrap; }
.brand img{ display:block; height:64px; width:auto; cursor:pointer; min-height:40px; }

.nav-inline{ display:none; align-items:center; gap:14px; flex-wrap:wrap; }
.nav-inline a{
  color:var(--link); text-decoration:none; font-size:16px; font-weight:500;
  padding:6px 8px; border-radius:8px; line-height:1.2; transition:color .15s, font-weight .15s, background .15s;
}
.nav-inline a:hover{ color:var(--link-hover); background:color-mix(in oklab, var(--accent) 20%, transparent); font-weight:700; }
.nav-inline a.active{ color:var(--link-active); border-bottom:2px solid var(--link-active); font-weight:700; }
.nav-inline img.icon{ height:18px; width:18px; vertical-align:middle; }

a:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:8px; }

details.nav-menu{ display:block; width:100%; flex:1 0 100%; margin-top:8px; }
details.nav-menu summary{
  list-style:none; cursor:pointer; user-select:none; border:1px solid color-mix(in oklab, var(--fg) 20%, transparent);
  padding:8px 12px; border-radius:10px; color:var(--link); font-weight:700; width:100%; display:block;
}
details.nav-menu[open] summary{ background:color-mix(in oklab, var(--accent) 14%, transparent); color:var(--link-hover); }
.nav-list{
  margin-top:10px; border:1px solid color-mix(in oklab, var(--fg) 12%, transparent); border-radius:12px; padding:10px;
  background:color-mix(in oklab, var(--card) 92%, transparent); display:grid; grid-template-columns:1fr; gap:6px; width:100%;
}
.nav-list a{ color:var(--link); text-decoration:none; font-size:17px; font-weight:500; padding:8px 10px; border-radius:8px; }
.nav-list a:hover{ color:var(--link-hover); background:color-mix(in oklab, var(--accent) 18%, transparent); font-weight:700; }
.nav-list a.active{ color:var(--link-active); border-bottom:2px solid var(--link-active); font-weight:700; }

main{ flex:1 1 auto; min-height:0; display:flex; overflow:hidden; }
.stage{ flex:1 1 auto; min-height:0; position:relative; display:flex; overflow:hidden; }

/* Scroll containers INSIDE the stage; outer page never scrolls */
.stage > .pane{ flex:1 1 auto; min-height:0; width:100%; overflow:auto; display:none; height:100%; overscroll-behavior:contain; }
.stage > .pane.active{ display:block; }
.pane-iframe.active{ display:flex; }
.pane-iframe{ display:flex; flex-direction:column; overflow:hidden; }

/* HOME pane never scrolls (prevents phantom bars when shrinking window) */
#pane-home{ overflow:hidden; }

/* Ensure the home section fills the pane completely */
#pane-home .portfolio{ 
  height: 100%; 
  width: 100%; 
  display: flex; 
  flex-direction: column; 
  padding: 0; 
  margin: 0; 
  max-width: none; 
}

/* iframe pane */
.pane-iframe iframe{
  flex:1 1 auto; min-height:0; width:100%; height:100%; border:0; display:block; background:var(--bg);
  -webkit-overflow-scrolling:touch; overflow:auto;
}

.loading-indicator{ position:absolute; inset:auto auto 8px 8px; color:var(--muted); font-size:12px; z-index:1; pointer-events:none; }
.loading-indicator.hidden{ display:none; }
.iframe-fallback{ display:none; padding:20px; text-align:center; color:var(--muted); background:var(--card); border-radius:8px; margin:20px; }
.iframe-fallback.show{ display:block; }

/* Footer is tiny, safe-area aware, and never overlapped by bottom browser chrome */
footer{
  border-top:1px solid color-mix(in oklab, var(--fg) 12%, transparent);
  background:color-mix(in oklab, var(--card) 90%, transparent);
  color:var(--muted); font-size:10px; text-align:center; letter-spacing:.2px;
  padding:2px 6px;
  line-height:1.1;
  flex:0 0 auto;
  padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)); /* key: visible above iOS bottom bar */
}
footer p{ margin:0; opacity:.85; padding:0; }

@media (min-width:640px){ .nav-inline{ display:flex; } details.nav-menu{ display:none; } }
@media (max-width:639px){
  .wrap{ padding:6px; }
  .brand img{ height:48px !important; min-height:44px !important; }
  details.nav-menu{ margin-top:4px; }
  details.nav-menu summary{ padding:4px 8px; font-size:12px; border-radius:6px; }
  footer{ font-size:10px; line-height:1.1; }
}

/* ===== HOME single-photo hero ===== */
#home-hero{
  /* Take up all available space in the home section */
  flex: 1 1 auto;
  min-height: 0;
  
  /* Use flexbox for centering */
  display: flex;
  align-items: center;
  justify-content: center;
  
  padding: var(--hero-pad);
  overflow: hidden;
  
  /* Ensure it doesn't grow beyond available space */
  width: 100%;
  box-sizing: border-box;
}

/* Fluid image: bounded by BOTH width and height of the hero box */
#home-photo{
  display: block;

  /* Let the image size naturally, but with better constraints */
  max-width: min(100%, 980px);
  min-width: min(280px, 80vw); /* Ensure minimum size on small screens */
  max-height: 100%;
  min-height: min(200px, 60vh); /* Ensure minimum height */
  
  /* Auto dimensions allow the image to maintain aspect ratio and size naturally */
  width: auto;
  height: auto;

  object-fit: contain;

  border-radius: 18px;
  margin: 0;
  box-shadow: 0 6px 18px color-mix(in oklab, var(--fg) 10%, transparent);
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  
  /* Ensure the image itself doesn't cause overflow */
  flex-shrink: 1;
}

/* ===== Portfolio grid (equal-size square thumbnails) ===== */
.portfolio{ max-width:var(--max-width); margin:0 auto; padding:var(--pad); }
.portfolio h2{ margin:0 0 12px; font-size:clamp(1.25rem, 2vw, 1.75rem); }

/* Override for non-home portfolio sections to restore normal behavior */
#pane-portfolio .portfolio {
  height: auto;
  width: auto;
  display: block;
  flex-direction: initial;
  padding: var(--pad);
  margin: 0 auto;
  max-width: var(--max-width);
}

.gallery{
  display:grid;
  grid-auto-rows: var(--thumb);
  grid-template-columns: repeat(auto-fill, minmax(var(--thumb), var(--thumb)));
  gap: 10px;
  justify-content:center; /* center last row */
}
.gallery-item{
  width: var(--thumb);
  height: var(--thumb);
  overflow:hidden;
  border-radius:8px;
  background:var(--card);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--fg) 10%, transparent) inset;
  transition: transform .12s ease, box-shadow .12s ease;
  display:block;
}
.gallery-item:focus-visible,
.gallery-item:hover{
  transform: translateY(-1px);
  box-shadow: 0 0 0 2px var(--accent) inset;
}
.gallery img{
  width:100%; height:100%; display:block; object-fit:cover; object-position:center;
  -webkit-user-drag: none; user-select:none; border:0;
  -webkit-touch-callout: none; /* iOS long-press save */
}
.gallery img[loading="lazy"]{ transform: translateZ(0); }

/* Make it easy to mark any region as "no-save" */
.no-save,
.no-save *{
  user-select: none !important;
  -webkit-user-drag: none !important;
  -webkit-touch-callout: none !important;
}

/* ===== PhotoSwipe Light Theme + no-save ===== */
.pswp,
.pswp__bg { background: #ffffff !important; }
.pswp__container { background: #ffffff !important; }
.pswp__img { background: #ffffff !important; }

.pswp,
.pswp *{
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}
.pswp__item img,
.pswp__zoom-wrap img{
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

.pswp__caption,
.pswp__top-bar,
.pswp__button { color: #111418 !important; }
.pswp__button { filter: invert(0) !important; }
:root{
  --pswp-bg: #ffffff;
  --pswp-placeholder-bg: #f0f2f4;
  --pswp-icon-color: #111418;
  --pswp-icon-stroke-color: #111418;
  --pswp-icon-stroke-width: 1.25px;
  --pswp-error-text-color: #111418;
}
.pswp__counter,
.pswp__caption__center,
.pswp__dynamic-caption{ color:#111418 !important; }
.pswp{ --pswp-bg: #ffffff !important; }
.pswp__bg{ background:#ffffff !important; }

/* Additional responsive adjustments */
@media (max-width: 480px) {
  .brand img{ height:44px !important; min-height:40px !important; }
  #home-photo {
    min-width: min(240px, 85vw);
    min-height: min(180px, 50vh);
  }
}

/* Motion sensitivity */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}