/* jaygalloway.photos: the old Squarespace look (white, 126px header, 3-across tiles),
   with an uncropped photo grid and a full-screen viewer on gallery pages. */
@font-face{font-family:"Archivo";font-weight:500;font-style:normal;font-display:swap;src:url(fonts/archivo-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:300;font-style:normal;font-display:swap;src:url(fonts/poppins-latin-300-normal.woff2) format("woff2")}
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/poppins-latin-400-normal.woff2) format("woff2")}

:root{
  color-scheme:light;
  --page:#fff; --ink:#000; --soft:#5b5f66; --navy:#253551; --rule:#e6e7ea; --well:#f3f3f1;
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --body:"Poppins","Helvetica Neue",Arial,sans-serif;
  --edge:16px; --gap:40px; --row:300px; --cellgap:14px;
}
@media (min-width:768px){:root{--edge:40px}}
@media (max-width:767px){:root{--row:170px; --cellgap:8px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html,body{background:var(--page);color:var(--ink)}
body{margin:0;font:300 16px/1.6 var(--body)}
a{color:inherit}
img{display:block;max-width:100%;height:auto}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:var(--page);padding:8px 12px;z-index:50}
.skip:focus{left:8px}

.site{padding-inline:max(var(--edge),env(safe-area-inset-left)) max(var(--edge),env(safe-area-inset-right))}

/* Header */
header.sh{position:sticky;top:0;z-index:5;background:var(--page);margin-inline:calc(-1*var(--edge));padding-inline:var(--edge);box-shadow:0 4px 18px rgba(0,0,0,.08)}
.sh-in{display:flex;align-items:center;justify-content:space-between;min-height:126px;gap:24px}
.brand{font:500 clamp(20px,2.4vw,32px)/1.4 var(--display);text-decoration:none;white-space:nowrap}
.nav{display:flex;align-items:center;gap:28px;font-size:16px}
.nav a{text-decoration:none;padding-bottom:3px;border-bottom:1px solid transparent}
.nav a:hover{border-bottom-color:var(--rule)}
.nav a[aria-current="page"]{border-bottom-color:var(--ink)}
.ig{display:inline-flex;width:20px;height:20px;border:0!important}
.ig svg{width:100%;height:100%}
.burger{display:none;background:none;border:0;padding:8px;margin-right:-8px;cursor:pointer;color:var(--ink)}
.burger span{display:block;width:26px;height:1px;background:currentColor;margin:7px 0}
.mnav{display:none}
@media (max-width:767px){
  .sh-in{min-height:76px}
  .nav{display:none}
  .burger{display:block}
  .mnav.open{display:flex;flex-direction:column;align-items:center;gap:22px;padding:24px 0 36px;font:500 26px/1.3 var(--display)}
  .mnav a{text-decoration:none}
}

main{padding-top:44px;min-height:60vh}

/* Home: tiles */
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:72px var(--gap)}
.tile{display:flex;flex-direction:column;gap:14px;text-decoration:none;text-align:center}
.tile h2{margin:0;font:500 clamp(20px,1.9vw,25.7px)/1.4 var(--display)}
.cover{aspect-ratio:3/2;overflow:hidden;background:var(--well)}
.cover img{width:100%;height:100%;object-fit:cover;transition:filter .2s}
.tile:hover .cover img{filter:brightness(1.06)}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 24px}}
@media (max-width:560px){.tiles{grid-template-columns:1fr;gap:40px}}

/* Gallery: justified rows, every photo at its own shape (no cropping) */
.gtitle{margin:0 0 40px;text-align:center;font:500 clamp(30px,3.4vw,45px)/1.3 var(--display);text-wrap:balance}
.grid{display:flex;flex-wrap:wrap;gap:var(--cellgap)}
.cell{flex-grow:calc(var(--r)*100);flex-basis:calc(var(--r)*var(--row));aspect-ratio:var(--r);background:var(--well);cursor:zoom-in;max-width:100%}
.cell img{width:100%;height:100%;object-fit:cover}
.cell:hover img{filter:brightness(1.05)}
.grid .fill{flex-grow:999999;flex-basis:0;height:0}
@media (max-width:420px){.cell{flex-basis:100%}}
.pager{display:flex;justify-content:space-between;gap:16px;padding-block:96px 0;font:500 clamp(18px,2.4vw,32px)/1.3 var(--display)}
.pager a{text-decoration:none;display:flex;align-items:center;gap:14px}
.pager svg{width:14px;height:26px;flex:none}

/* Contact */
.about{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:64px}
.about h1{margin:0 0 22px;font:500 clamp(20px,1.9vw,25.7px)/1.4 var(--display)}
.about p.big{margin:0 0 18px;font:300 clamp(17px,1.8vw,24px)/1.8 var(--body);max-width:34em}
.side p{margin:0 0 4px;line-height:1.8}
.side .grp{margin-bottom:28px}
.side .lbl{color:var(--soft)}
@media (max-width:767px){.about{grid-template-columns:1fr;gap:24px}}
.nf{text-align:center}

/* Footer */
footer.sf{display:flex;flex-direction:column;align-items:center;gap:20px;padding-block:96px 48px}
footer.sf .ig{width:24px;height:24px}
footer.sf a.c{color:var(--navy);font:500 clamp(19px,1.9vw,25.7px)/1.3 var(--display);text-underline-offset:5px;text-decoration-thickness:1px}
footer.sf .copy{margin:12px 0 0;font-size:13px;color:var(--soft)}

/* Full-screen viewer */
.lb{position:fixed;inset:0;z-index:20;background:rgba(255,255,255,.985);display:grid;grid-template-rows:auto 1fr auto;opacity:0;transition:opacity .18s}
.lb[hidden]{display:none}
.lb.on{opacity:1}
.lb-top{display:flex;justify-content:space-between;align-items:center;padding:12px max(16px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left));font-size:14px;color:var(--soft)}
.lb-stage{position:relative;display:flex;align-items:center;justify-content:center;min-height:0;padding:8px 64px;touch-action:pan-y pinch-zoom}
.lb-stage img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;user-select:none;-webkit-user-drag:none;background:var(--well)}
.lb-cap{min-height:48px;padding:8px 16px max(16px,env(safe-area-inset-bottom));text-align:center;font-size:15px}
.lb-cap:empty{min-height:24px}
.lb button{font:inherit;background:none;border:0;color:var(--ink);cursor:pointer;padding:10px;border-radius:999px}
.lb button:hover{background:var(--well)}
.lb-x svg,.lb-nav svg{display:block;width:22px;height:22px}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%)}
.lb-prev{left:8px}.lb-next{right:8px}
.lb-nav svg{width:18px;height:34px}
@media (max-width:767px){.lb-stage{padding:4px 0}.lb-nav{display:none}}
body.lb-open{overflow:hidden}
@media (prefers-reduced-motion:reduce){.lb{transition:none}}
/* With 2 or 4 galleries, two bigger tiles per row avoid a lone tile on the last row */
@media (min-width:561px){.tiles.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
