/* HAUS OF JJ — offline build. Plain header/footer; desktop scroll splash kept from the Squarespace custom CSS. */
:root{--hjj-gallery-white:#f7f6f2;--black:#000;--gap:24px;--font:"Helvetica Neue",Helvetica,Arial,sans-serif}
*{box-sizing:border-box}
html,body{margin:0;background:#fff;color:#000;font-family:var(--font);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
/* header */
#header{position:sticky;top:0;z-index:50;background:#fff}
.header-inner{max-width:1500px;margin:0 auto;padding:20px var(--gap);display:flex;align-items:center;justify-content:space-between;gap:24px}
.header-title-logo img{height:26px;width:auto}
.header-nav{display:flex;align-items:center;gap:28px;font-size:14px;letter-spacing:.02em}
.header-nav a:hover{opacity:.55}
.header-icon.hot{display:block;width:16px;height:25px;color:#000;transition:color 180ms ease}
.header-icon.hot svg{width:100%;height:100%;fill:currentColor}
.header-icon.hot:hover{color:var(--red,#d42a1f);opacity:1}
.menu-toggle{display:none;width:28px;height:28px;position:relative}
.menu-toggle span{position:absolute;left:3px;right:3px;top:50%;height:1.5px;background:#000;transition:transform 220ms ease}
.menu-toggle span:last-child{transform:rotate(90deg)}
.menu-open .menu-toggle span:first-child{transform:rotate(45deg)}
.menu-open .menu-toggle span:last-child{transform:rotate(135deg)}
.mobile-nav{display:none}
/* home masonry */
.masonry{columns:3;column-gap:var(--gap);padding:0 var(--gap) var(--gap);max-width:1500px;margin:0 auto}
.m-item{display:block;break-inside:avoid;margin-bottom:var(--gap)}
.m-item img{width:100%;transition:opacity 300ms}
a.m-item:hover img{opacity:.85}
/* index grids */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px var(--gap);padding:24px var(--gap) 60px;max-width:1500px;margin:0 auto}
.card-img{aspect-ratio:1/1;overflow:hidden;background:#eee}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform 600ms ease}
.card:hover .card-img img{transform:scale(1.03)}
.card h3{font-size:13px;font-weight:400;letter-spacing:.04em;margin:12px 0 0}
/* project */
.proj-title{font-size:13px;font-weight:400;letter-spacing:.04em;margin:0 auto;padding:12px var(--gap) 20px;max-width:1500px}
.gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap);padding:0 var(--gap);max-width:1500px;margin:0 auto}
.g-item{display:block;aspect-ratio:4/3;overflow:hidden;background:#eee}
.g-item img{width:100%;height:100%;object-fit:cover}
#itemPagination{display:flex;justify-content:space-between;max-width:1500px;margin:0 auto;padding:60px var(--gap);font-size:1.5rem}
#itemPagination a:hover{opacity:.55}
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(255,255,255,.97);display:flex;align-items:center;justify-content:center}
.lightbox[hidden]{display:none}
.lightbox img{max-width:calc(100vw - 160px);max-height:calc(100vh - 80px);width:auto;height:auto;object-fit:contain}
.lb-close{position:absolute;top:16px;right:24px;font-size:36px;line-height:1}
.lb-prev,.lb-next{position:absolute;top:50%;width:44px;height:44px;margin-top:-22px}
.lb-prev{left:16px}.lb-next{right:16px}
.lb-prev::before,.lb-next::before{content:"";position:absolute;top:50%;left:50%;width:12px;height:12px;border-left:2.25px solid #000;border-bottom:2.25px solid #000}
.lb-prev::before{transform:translate(-50%,-50%) rotate(45deg)}
.lb-next::before{transform:translate(-50%,-50%) rotate(225deg)}
/* about */
.about{display:grid;grid-template-columns:1fr 1fr;gap:48px;max-width:1500px;margin:0 auto;padding:24px var(--gap) 60px;align-items:start}
.about-img img{width:100%}
.about h1{font-size:13px;font-weight:400;letter-spacing:.04em;margin:0 0 20px}
.about p{font-size:15px;line-height:1.6;margin:0 0 1em;max-width:62ch}
/* footer */
#footer-sections{border-top:1px solid #000;margin:0 var(--gap)}
.footer-inner{max-width:1500px;margin:0 auto;padding:28px 0 36px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;font-size:12px;letter-spacing:.04em}
.footer-inner p{margin:0}
.footer-links{display:flex;gap:24px;flex-wrap:wrap}
.footer-links a:hover{opacity:.55}
/* mobile */
@media (max-width:767px){
  :root{--gap:16px}
  .header-inner{padding:14px var(--gap)}
  .header-nav{display:none}
  .menu-toggle{display:block}
  .menu-open .mobile-nav{display:flex;flex-direction:column;gap:18px;padding:12px var(--gap) 28px;font-size:22px;background:#fff;height:calc(100vh - 56px)}
  .masonry{columns:1}
  .grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr}
  .about{grid-template-columns:1fr;gap:24px}
  .lightbox img{max-width:100vw}
  #hjj-scroll-intro{display:none!important}
}
@media (min-width:768px) and (max-width:1100px){.masonry{columns:2}.grid{grid-template-columns:repeat(2,1fr)}}

/* ============ HOMEPAGE SPLASH SCREEN (ported) ============ */
html.hjj-intro-active,html.hjj-intro-active body{overflow:hidden!important;overscroll-behavior:none}
html.hjj-intro-active{background-color:var(--hjj-gallery-white)!important;color-scheme:light}
#hjj-scroll-intro{position:fixed;inset:0;z-index:2147483000;width:100vw;height:100vh;overflow:hidden;background-color:var(--hjj-gallery-white);opacity:1;transition:opacity 500ms ease}
#hjj-scroll-intro.is-complete{opacity:0;pointer-events:none}
#hjj-intro-logo{position:fixed;top:0;left:0;display:block;margin:0;opacity:0;transform-origin:top left;will-change:transform}
#hjj-scroll-intro.is-ready #hjj-intro-logo{animation:hjj-logo-fade-in 700ms ease-out forwards}
#hjj-intro-logo img{display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:contain}
@keyframes hjj-logo-fade-in{from{opacity:0}to{opacity:1}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ============ LIQUID-GLASS HEADER + FOOTER (ported) ============ */
:root{
  --hjj-glass-fill:rgba(255,255,255,.42);
  --hjj-glass-overlay:rgba(255,255,255,.14);
  --hjj-glass-blur:24px;
  --hjj-card-outer-gap:24px;
  --hjj-card-inner-gap:19.2px;
  --hjj-card-radius:18px;
  --hjj-card-shadow:0 8px 26px -12px rgba(0,0,0,.24),0 2px 8px -4px rgba(0,0,0,.12);
}
#header{position:fixed;top:0;left:0;right:0;background:transparent;padding:var(--hjj-card-outer-gap);pointer-events:none}
#header .header-inner,#header .mobile-nav{pointer-events:auto}
#header .header-inner{
  max-width:1500px;margin:0 auto;padding:var(--hjj-card-inner-gap);
  border-radius:var(--hjj-card-radius);
  background:linear-gradient(var(--hjj-glass-overlay),var(--hjj-glass-overlay)),var(--hjj-glass-fill);
  -webkit-backdrop-filter:blur(var(--hjj-glass-blur));backdrop-filter:blur(var(--hjj-glass-blur));
  box-shadow:var(--hjj-card-shadow);isolation:isolate}
/* push content below the floating header */
#page{padding-top:calc(var(--hjj-card-outer-gap) * 2 + var(--hjj-card-inner-gap) * 2 + 26px + var(--hjj-card-outer-gap))}
#footer-sections{border:0;margin:0;padding:var(--hjj-card-outer-gap);position:relative;z-index:20}
#footer-sections .footer-inner{
  max-width:1500px;margin:0 auto;padding:28px var(--hjj-card-inner-gap);
  border-radius:var(--hjj-card-radius);
  background:linear-gradient(var(--hjj-glass-overlay),var(--hjj-glass-overlay)),var(--hjj-glass-fill);
  -webkit-backdrop-filter:blur(var(--hjj-glass-blur));backdrop-filter:blur(var(--hjj-glass-blur));
  box-shadow:var(--hjj-card-shadow);overflow:hidden;isolation:isolate}
@media (max-width:767px){
  :root{
    --hjj-card-outer-gap:16px;--hjj-card-radius:14px;
    --hjj-card-shadow:0 6px 18px -9px rgba(0,0,0,.24),0 2px 6px -3px rgba(0,0,0,.12);
  }
  #header .header-inner{padding:12.8px 16px}
  #page{padding-top:calc(16px * 2 + 12.8px * 2 + 28px)}
  .menu-open .mobile-nav{margin-top:12px;height:auto;border-radius:var(--hjj-card-radius);
    background:rgba(255,255,255,.85);-webkit-backdrop-filter:blur(24px);backdrop-filter:blur(24px);
    box-shadow:var(--hjj-card-shadow);padding:20px 16px}
  #footer-sections{transition:opacity 220ms cubic-bezier(.22,.61,.36,1)}
  .menu-open #footer-sections{opacity:0;pointer-events:none}
}
@media (min-width:768px) and (max-width:1366px) and (any-pointer:coarse){
  :root{--hjj-card-inner-gap:16px}
}

/* ============ PROJECT TEXT ============ */
.proj-info{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;max-width:1500px;margin:0 auto;padding:0 var(--gap) 48px}
.proj-meta{margin:0;font-size:11px;line-height:1.5;letter-spacing:.04em}
.proj-meta div{display:grid;grid-template-columns:minmax(120px,40%) 1fr;gap:16px;padding:7px 0;border-top:1px solid rgba(0,0,0,.12)}
.proj-meta div:last-child{border-bottom:1px solid rgba(0,0,0,.12)}
.proj-meta dt{opacity:.55}
.proj-meta dd{margin:0}
.proj-desc p{font-size:13px;line-height:1.7;letter-spacing:.02em;margin:0 0 1.1em;max-width:70ch}
@media (max-width:900px){.proj-info{grid-template-columns:1fr;gap:28px}}

/* Explorations project galleries: natural aspect ratios, masonry columns */
.gallery--natural{display:block;columns:2;column-gap:var(--gap)}
.gallery--natural .g-item{aspect-ratio:auto;width:100%;margin:0 0 var(--gap);break-inside:avoid;background:none}
.gallery--natural .g-item img{height:auto;object-fit:initial}
@media (max-width:767px){.gallery--natural{columns:1}}

/* project galleries: 3 columns (2 on tablet, 1 on phone) */
.gallery{grid-template-columns:repeat(3,1fr)}
.gallery--natural{columns:3}
@media (max-width:1100px){.gallery{grid-template-columns:repeat(2,1fr)}.gallery--natural{columns:2}}
@media (max-width:767px){.gallery{grid-template-columns:1fr}.gallery--natural{columns:1}}

/* Works / Explorations index: natural image heights in masonry columns */
.grid{display:block!important;columns:3;column-gap:var(--gap)}
.grid .card{display:block;break-inside:avoid;margin:0 0 40px}
.grid .card-img{aspect-ratio:auto!important;height:auto}
.grid .card-img img{height:auto!important;object-fit:initial!important}
@media (max-width:1100px){.grid{columns:2}}
@media (max-width:767px){.grid{columns:1}}

/* mobile menu icon row: HOT glyph + email */
.mn-icons{display:flex}
.mn-icons a{flex:1;display:flex;align-items:center;justify-content:center;padding:16px}
.mn-icons svg{width:22px;height:22px;fill:currentColor}
.mn-hot svg{width:16px;height:25px}
.mn-mail svg{fill:none}