/* ---------- Fonts ---------- */
@font-face {
  font-family: "CustomFont";
  src: url("./fonts/ABCMarist-Book-Trial.woff2");
  font-display: swap;
}
@font-face {
  font-family: "CustomFont2";
  src: url("./fonts/ABCDiatype-Regular-Trial.woff2");
  font-display: swap;
}

/* ---------- Global base ---------- */
:root{
  --nav-top: 20px;           /* distance from top */
  --nav-pad-x: 24px;         /* left/right breathing room */
  --nav-size-desktop: 1.8rem;
  --nav-size-mobile: 1.6rem;
}
html, body { height: 100%; margin: 0; overflow-x: hidden; }

/* Home (video) page background + default font */
.home-page { background-color:#A9A9A9; font-family:"CustomFont",serif; color:#fff; }

/* Studio page */
.studio-page { background-color:#fff; font-family:"CustomFont",serif; color:#000; }

/* ---------- Fade-in ---------- */
.fade-in { animation: fade-in 600ms ease both; }
@keyframes fade-in { from {opacity:0;} to {opacity:1;} }

/* ---------- Video background (home) ---------- */
.video-background{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  background: #000;
}

/* ---------- Navigation (shared) ---------- */
.nav-link{
  position: fixed;
  top: var(--nav-top);
  z-index: 10;
  text-decoration: none;
  color: currentColor;
  font-family: "CustomFont", serif;
  font-size: var(--nav-size-desktop);
  line-height: 1;
  padding: 0 var(--nav-pad-x);
  box-sizing: border-box;
}
.nav-left{ left: 0; text-align: left; }
.nav-right{ right: 0; text-align: right; }

.back-link{
  position: fixed;
  right: var(--nav-pad-x);
  bottom: max(var(--nav-pad-x), env(safe-area-inset-bottom));
  text-decoration: none;
  color: currentColor;
  font-family: "CustomFont", serif;
  font-size: var(--nav-size-desktop);
  line-height: 1;
  z-index: 1000;
  pointer-events: auto;
}

@media (max-width: 768px){
  .nav-link,
  .back-link{ font-size: var(--nav-size-mobile); padding: 0 16px; }
}

/* ---------- Studio page center content ---------- */
.studio-container{
  min-height: 100vh;
  display:grid;
  place-items:center;
  text-align:center;
  padding:0 20px;
}
.studio-content{
  max-width:820px;
  margin:0 auto;
  line-height:1.3;
  font-size:1rem;
  color:#000;
  font-family:"CustomFont2",serif;
}
.studio-content a{ color:#000; text-decoration:underline; }
.studio-content p{ margin:1.2rem 0; }

/* ---------- Pieces page (base) ---------- */
.pieces-page{ background:#fff; color:#000; font-family:"CustomFont",serif; }

/* space below fixed nav */
.pieces-wrap{ margin-top: calc(var(--nav-top) + 60px); margin-bottom: 80px; }

/* Grid container (desktop baseline) */
.pieces-grid{
  --gap: 24px;
  --row: 8px;
  --maxw: 1100px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: var(--row);
  gap: var(--gap);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--nav-pad-x);
}

/* Tiles */
.tile{ position: relative; overflow: visible; }
.tile img{ display:block; width:100%; height:auto; }

/* Column spans (desktop default) */
.tile--full{ grid-column: 1 / -1; }
.tile--xl{   grid-column: span 7; }
.tile--md{   grid-column: span 5; }
.tile--tall{ grid-column: span 4; }
.tile--solo{ grid-column: 2 / -2; }

/* ---------- Fade-in for media ---------- */
.tile img{
  opacity:0; transform:translateY(8px);
  transition: opacity .8s ease, transform .8s ease;
}
.tile img.loaded{ opacity:1; transform:translateY(0); }

.tile video{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  background:#f2f2f2;
  opacity:0;
  transform:translateY(8px);
  transition: opacity .8s ease, transform .8s ease;
}
.tile video.loaded{ opacity:1; transform:translateY(0); }

/* --- Fix Studio page scroll + perfect centering --- */
.studio-page, 
.studio-container {
  height: 100vh;
  overflow: hidden;
}
.studio-container {
  display: grid;
  place-items: center;
  padding: 0 16px;
  box-sizing: border-box;
}

a {
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
a:focus,
a:active {
  opacity: 0.6;
}

/* Back button: align with Studio padding on mobile */
@media (max-width: 768px){
  .back-link{
    right: max(16px, env(safe-area-inset-right));
    padding-right: 0;
    padding-left: 16px;
  }
}

/* --- Disable all collage overlaps everywhere --- */
.pieces-page .overlap-up-sm,
.pieces-page .overlap-up-md,
.pieces-page .overlap-left,
.pieces-page .overlap-right {
  margin-top: 0 !important;
  transform: none !important;
  z-index: auto !important;
}

/* ==========================================
   ≤1024px: 2-column playful collage layout
   ========================================== */
@media (max-width:1024px){
  .pieces-grid{
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: clamp(8px, 2vw, 16px) !important;
    padding: 0 clamp(12px, 3vw, 24px) !important;
    max-width: 100% !important;
  }

  .pieces-grid .tile{
    position: relative;
    grid-column: auto;
    z-index: auto;
    --inset-x: clamp(6px, 2vw, 20px);
    --inset-y: clamp(8px, 2vw, 18px);
    margin: 0 var(--inset-x) var(--inset-y) var(--inset-x);
  }

  .pieces-grid .tile img,
  .pieces-grid .tile video{
    width: 100%;
    height: auto;
    display: block;
    transition: transform .35s ease, width .35s ease;
  }

  .pieces-grid .tile:nth-child(6n),
  .pieces-grid .tile:nth-child(13n),
  .pieces-grid .tile:nth-child(21n){
    grid-column: 1 / -1 !important;
    max-width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .pieces-grid .tile:nth-child(3n) img,
  .pieces-grid .tile:nth-child(3n) video{
    width: 90%;
    margin-left: auto; margin-right: auto;
  }
  .pieces-grid .tile:nth-child(5n) img,
  .pieces-grid .tile:nth-child(5n) video{
    width: 85%;
    margin-left: auto; margin-right: auto;
  }

  .pieces-grid .tile:nth-child(4n) img,
  .pieces-grid .tile:nth-child(4n) video{ transform: translateX(3%); }
  .pieces-grid .tile:nth-child(5n+2) img,
  .pieces-grid .tile:nth-child(5n+2) video{ transform: translateX(-3%); }

  .pieces-grid .tile:nth-child(7n){ margin-top: clamp(12px, 3vw, 24px); }
  .pieces-grid .tile:nth-child(9n){ margin-bottom: clamp(18px, 4vw, 36px); }
}

/* ===== ≤1024px: solid 2-column playful layout (resets spans + row-heights) ===== */
@media (max-width:1024px){
  .pieces-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-rows: auto !important;
    gap: clamp(8px, 2vw, 16px) !important;
    padding: 0 clamp(12px, 3vw, 24px) !important;
    max-width: 100% !important;
  }

  .pieces-grid .tile{
    grid-column: auto !important;
    grid-row-end: auto !important;
    margin: 0 clamp(6px, 2vw, 18px) clamp(10px, 2.5vw, 22px) !important;
    z-index: auto !important;
  }

  .pieces-grid .tile img,
  .pieces-grid .tile video{
    display:block; width:100%; height:auto;
    transition: transform .3s ease, width .3s ease;
  }

  .pieces-grid .tile:nth-child(6n),
  .pieces-grid .tile:nth-child(13n),
  .pieces-grid .tile:nth-child(21n){
    grid-column: 1 / -1 !important;
    max-width: 90%;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .pieces-grid .tile:nth-child(3n) img,
  .pieces-grid .tile:nth-child(3n) video{ width: 92%; margin-left:auto; margin-right:auto; }
  .pieces-grid .tile:nth-child(5n) img,
  .pieces-grid .tile:nth-child(5n) video{ width: 85%; margin-left:auto; margin-right:auto; }

  .pieces-grid .tile:nth-child(4n) img,
  .pieces-grid .tile:nth-child(4n) video{ transform: translateX(3%); }
  .pieces-grid .tile:nth-child(5n+2) img,
  .pieces-grid .tile:nth-child(5n+2) video{ transform: translateX(-3%); }

  .pieces-grid .tile:nth-child(7n){  margin-top: clamp(12px, 3vw, 24px) !important; }
  .pieces-grid .tile:nth-child(9n){  margin-bottom: clamp(16px, 3.5vw, 34px) !important; }

  .pieces-page .overlap-up-sm,
  .pieces-page .overlap-up-md,
  .pieces-page .overlap-left,
  .pieces-page .overlap-right{
    margin-top: 0 !important;
    transform: none !important;
    z-index: auto !important;
  }
}

/* Normalize old "hero" tiles */
@media (max-width:1024px){
  .pieces-grid .tile.hero-start,
  .pieces-grid .tile.hero-left,
  .pieces-grid .tile.hero-right{
    grid-column: auto !important;
    grid-row-end: auto !important;
    margin: 0 clamp(6px, 2vw, 18px) clamp(10px, 2.5vw, 22px) clamp(6px, 2vw, 18px) !important;
    transform: none !important;
    max-width: 100% !important;
  }
  .pieces-grid .tile.hero-start img,
  .pieces-grid .tile.hero-start video,
  .pieces-grid .tile.hero-left img,
  .pieces-grid .tile.hero-left video,
  .pieces-grid .tile.hero-right img,
  .pieces-grid .tile.hero-right video{
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }
}

/* First two gallery items rhythm */
@media (max-width:1024px){
  .pieces-grid .tile:nth-child(2){
    margin-left: clamp(18px, 4vw, 36px) !important;
    margin-right: clamp(10px, 2vw, 20px) !important;
  }
  .pieces-grid .tile:nth-child(2) img,
  .pieces-grid .tile:nth-child(2) video{
    width: 92% !important;
    transform: translateX(2%);
  }
}

/* Second row: first item spans both columns */
@media (max-width:1024px){
  .pieces-grid .tile:nth-child(3){
    grid-column: 1 / -1 !important;
    max-width: 92%;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Occasionally touch page edge */
@media (max-width:1024px){
  .pieces-grid .tile:nth-child(8n),
  .pieces-grid .tile:nth-child(15n){ margin-left: 0 !important; }
  .pieces-grid .tile:nth-child(5n),
  .pieces-grid .tile:nth-child(18n){ margin-right: 0 !important; }

  .pieces-grid .tile:nth-child(8n) img,
  .pieces-grid .tile:nth-child(8n) video,
  .pieces-grid .tile:nth-child(15n) img,
  .pieces-grid .tile:nth-child(15n) video,
  .pieces-grid .tile:nth-child(5n) img,
  .pieces-grid .tile:nth-child(5n) video,
  .pieces-grid .tile:nth-child(18n) img,
  .pieces-grid .tile:nth-child(18n) video{
    width: 100% !important;
    transform: none !important;
  }
}

/* Lightbox core (only overlay) */
.lightbox{
  position: fixed; inset: 0; background:#fff; z-index:9999;
  opacity:0; pointer-events:none; transition:opacity .55s ease; touch-action:none;
}
.lightbox.open{ opacity:1; pointer-events:auto; }

.lightbox-inner{
  position:absolute; inset:0; display:grid; place-items:center; box-sizing:border-box;
  padding: var(--nav-top) max(var(--nav-pad-x), env(safe-area-inset-right))
           clamp(16px,4vw,40px) max(var(--nav-pad-x), env(safe-area-inset-left));
  overscroll-behavior: contain;
}
@media (max-width:768px){
  .lightbox-inner{
    padding: var(--nav-top) max(16px, env(safe-area-inset-right))
             clamp(16px,4vw,40px) max(16px, env(safe-area-inset-left));
  }
}

.lightbox-frame{ position:relative; width:max-content; }
.lightbox-media{
  display:block; width:auto; height:auto; max-width:min(92vw,1200px); max-height:82vh;
  opacity:0; transition:opacity .55s ease .05s;
  touch-action:none; user-select:none; -webkit-user-drag:none; will-change:transform;
}
.lightbox.open .lightbox-media{ opacity:1; }

@media (max-width: 768px) {
  .lightbox-close {
    padding-right: 0 !important;
    padding-left: 8px;
  }
}

.lightbox-close{
  z-index:10000; background:none; border:0; padding:8px; line-height:1; -webkit-tap-highlight-color:transparent;
}
.lightbox-close svg{ width:28px; height:28px; display:block; }

@media (min-width:769px){
  .lightbox-close{ position:fixed; top:var(--nav-top); right:max(var(--nav-pad-x), env(safe-area-inset-right)); }
}
@media (max-width:768px){
  .lightbox-close{
    position:fixed; top:var(--nav-top); right:max(16px, env(safe-area-inset-right));
  }
  .lightbox-close svg{ width:24px; height:24px; }
}

body.no-scroll{ overflow:hidden; }

@media (hover:hover) and (pointer:fine){
  .lightbox-media.cursor-zoom-in{  cursor: zoom-in; }
  .lightbox-media.cursor-zoom-out{ cursor: zoom-out; }
  .lightbox-media.is-grabbing{     cursor: grabbing; }
}

.pieces-grid img,
.pieces-grid video { cursor: pointer; }

@media (hover:hover) and (pointer:fine){
  .lightbox-media.cursor-zoom-in  { cursor: zoom-in; }
  .lightbox-media.cursor-zoom-out { cursor: zoom-out; }
  .lightbox-media.is-grabbing     { cursor: grabbing; }
}

.lightbox-close { color: #000 !important; -webkit-tap-highlight-color: transparent; }
.lightbox-close svg path { fill: #000 !important; stroke: none; }

/* Bottom-left "Author" link (site-wide) */
.author-link{
  position: fixed;
  left: var(--nav-pad-x);
  bottom: max(var(--nav-pad-x), env(safe-area-inset-bottom));
  text-decoration: none;
  color: currentColor;
  font-family: "CustomFont", serif;
  font-size: var(--nav-size-desktop);
  line-height: 1;
  z-index: 1000;
  pointer-events: auto;
}
@media (max-width: 768px){
  .author-link{ 
    font-size: var(--nav-size-mobile);
    left: max(16px, env(safe-area-inset-left));
    padding-left: 0;
    padding-right: 16px;
  }
}

/* ---------- Author page ---------- */
.author-page { background:#fff; font-family:"CustomFont",serif; color:#000; }

.author-wrap{
  margin-top: calc(var(--nav-top) + 60px);
  margin-bottom: 80px;
}

/* Grid: equal halves on desktop */
.author-grid{
  --gap: 32px;
  --maxw: 1100px;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gap);
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--nav-pad-x);
  align-items: start; /* image + text start on same top line */
}

.author-photo{ grid-column: 1 / span 6; }
.author-photo img{ display:block; width:100%; height:auto; }

.author-text{
  grid-column: 7 / span 6;
  line-height: 1.3;
  font-size: 1rem;
  color:#000;
  font-family:"CustomFont2",serif;
  align-self: start;
}
.author-text p{ margin:1.2rem 0; }
.author-text a{ color:#000; text-decoration:underline; }

/* First paragraph slightly tighter to align with image top */
.author-text p:first-of-type { margin-top: 0.8rem; }

/* Desktop: center the whole block vertically */
@media (min-width: 901px){
  .author-wrap{
    display: grid;
    min-height: calc(100vh - (var(--nav-top) + 80px));
    place-content: center;   /* centers the track (vertical + horizontal) */
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
  }
}

/* Mobile: stack, same width, centered image/text */
@media (max-width: 900px){
  .author-grid{
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 16px;
    justify-items: center;
  }
  .author-photo,
  .author-text{
    grid-column: 1 / -1;
    width: 90%;
    max-width: 520px;        /* keeps image narrower like previous version */
  }
  .author-photo{ text-align: center; }
  .author-photo img{ margin: 0 auto; display: block; width: 100%; height: auto; }
  .author-text{ align-self: auto; }
  .author-wrap{ margin-top: calc(var(--nav-top) + 48px); }
}
@media (min-width: 901px){
  .author-wrap{
    display: grid;
    place-items: center; /* centers the whole .author-grid vertically + horizontally */
    min-height: 100vh;   /* fills viewport for centering calculation */
    margin: 0;           /* remove top/bottom margins */
    padding: calc(var(--nav-top) + 20px) 0 40px; /* keep breathing room for nav/back */
    box-sizing: border-box;
  }

  /* Keep original layout and width of the grid */
  .author-grid{
    max-width: 1100px;   /* same as before */
    width: 100%;
    margin: 0 auto;      /* ensure centered horizontally */
  }
}

/* --- Centered and clickable X button --- */
.lightbox-close {
  position: fixed !important;
  top: calc(var(--nav-top) - 6px) !important; /* ↑ raises it slightly */
  left: 50% !important;
  right: auto !important;
  transform: translateX(-50%) !important;
  z-index: 100000 !important;
  pointer-events: auto !important;
  cursor: pointer;
  background: none;
  border: 0;
  padding: 12px;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.lightbox-close svg,
.lightbox-close svg * {
  pointer-events: none;
}

@media (min-width: 769px) {
  .lightbox-close {
    top: calc(var(--nav-top) - 32px) !important; /* desktop-specific: higher placement */
  }
  .lightbox-close svg {
    width: 28px;
    height: 28px;
  }
}

@media (max-width: 768px) {
  .lightbox-close {
    top: var(--nav-top) !important; /* normal spacing on mobile */
  }
  .lightbox-close svg {
    width: 24px;
    height: 24px;
  }
}
/* Center + raise the X (desktop), keep clickable */
@media (min-width: 769px) {
  .lightbox-close{
    position: fixed !important;
    top: 8px !important;               /* ← higher near the top */
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    z-index: 100000 !important;
    cursor: pointer;
    background: none;
    border: 0;
    padding: 12px;
    line-height: 1;
  }
  .lightbox-close svg,
  .lightbox-close svg * { pointer-events: none; }
}