:root{
  --black:#080a0a;
  --white:#f3f1ed;
  --paper:#f3f1ed;
  --muted:#a8a8a4;
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:Montserrat,Arial,sans-serif;
  --line:rgba(255,255,255,.18);
  --page-x:8.65%;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--black);color:var(--white);font-family:var(--sans);-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}

/* =========================================================
   GLOBAL HORIZONTAL GRID
   Every main section uses --page-x for both outer edges.
   ========================================================= */
.site-header,
.home-shell,
.home-about,
.home-instagram,
.site-footer,
.page-hero,
.gallery-title,
.portfolio-tabs,
.term-panel,
.masonry,
.gallery-back,
.about-page-grid,
.contact-wrap,
.legal{
  box-sizing:border-box;
}

/* HEADER */
.site-header{position:absolute;z-index:50;top:0;left:0;width:100%;height:94px;padding:22px var(--page-x);display:flex;align-items:flex-start;justify-content:space-between}
.brand{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;color:#fff;line-height:1;margin:0;padding:0}
.brand .custom-logo{display:block;width:auto;height:62px;max-width:none;margin:0;padding:0;object-fit:contain}
.logo-main{font-family:var(--serif);font-size:38px;letter-spacing:.03em}
.logo-sub{font-size:7px;letter-spacing:.35em;margin-top:2px}
.desktop-nav{padding-top:8px;margin-left:auto}
.desktop-nav ul{list-style:none;display:flex;gap:42px;margin:0;padding:0}
.desktop-nav a{font-size:8.5px;letter-spacing:.19em}
.menu-toggle{display:none}
.mobile-nav{display:none}

/* HERO */
.hero{height:50vw;min-height:620px;max-height:780px;position:relative;overflow:hidden}
.hero-image{position:absolute;inset:0;background:center 46%/cover no-repeat;will-change:opacity,transform;transform:scale(1.01)}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,7,8,.48) 0%,rgba(4,7,8,.16) 52%,rgba(4,7,8,.04) 100%),linear-gradient(180deg,rgba(5,6,8,.14),rgba(4,6,7,.28))}
.hero-copy{position:absolute;left:var(--page-x);top:37.7%;width:47%;z-index:2}
.eyebrow{font-size:9px;font-weight:600;letter-spacing:.24em;margin:0;color:inherit}
.hero h1{font-family:var(--serif);font-weight:400;font-size:64px;line-height:.95;letter-spacing:.035em;margin:15px 0 19px}
.hero-text{font-size:15px;line-height:1.55;max-width:290px;margin:0;color:#f2f2f1}
.short-rule,.dark-rule{display:block;width:24px;height:1px;background:currentColor;margin:14px 0 18px;opacity:.8}
.outline-btn{display:inline-block;border:1px solid rgba(255,255,255,.85);padding:13px 24px;font-size:9px;font-weight:500;letter-spacing:.2em;background:transparent;color:inherit;transition:.25s}
.outline-btn:hover{background:#fff;color:#090909}
.scroll-mark{position:absolute;right:3.1%;bottom:3.7%;writing-mode:vertical-rl;transform:rotate(180deg);font-size:7px;letter-spacing:.22em;z-index:2}
.scroll-mark span{display:inline-block;height:52px;width:1px;background:rgba(255,255,255,.7);margin-top:10px}

/* HOME PORTFOLIO — exact same left/right grid */
.home-portfolio{background:#080a0a;padding:49px 0 43px}
.home-shell{width:100%;margin:0;padding-left:var(--page-x);padding-right:var(--page-x)}
.portfolio-heading{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:12px}
.portfolio-heading h2{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1;margin:11px 0 0}
.view-all{font-size:8px;letter-spacing:.19em;margin-bottom:4px}
.view-all span{font-size:13px;margin-left:14px}
.four-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;width:100%}
.home-card{height:270px;position:relative;overflow:hidden}
.home-card img{height:100%;object-fit:cover}
.card-fade{position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.6))}
.card-label{position:absolute;left:17px;bottom:16px;font-size:8px;letter-spacing:.16em}

/* ABOUT — full background, inner content shares the global edges */
.home-about{background:var(--paper);color:#111;display:grid;grid-template-columns:45.3% 54.7%;padding:28px var(--page-x) 25px;align-items:center;width:100%}
.about-text{padding-right:11%;padding-left:0}
.about-text .eyebrow{font-size:8px}
.about-text h2{font-family:var(--serif);font-size:31px;line-height:1.08;font-weight:400;margin:13px 0 0;max-width:330px}
.dark-rule{margin:18px 0 21px;width:24px}
.about-text p:not(.eyebrow){font-size:10px;line-height:1.55;max-width:330px;color:#333}
.about-text>a{display:inline-block;margin-top:16px;font-size:8px;font-weight:600;letter-spacing:.14em}
.about-text>a span{font-size:12px;margin-left:14px}
.about-photo{height:253px;width:100%}
.about-photo img{height:100%;width:100%;object-fit:cover}

/* INSTAGRAM — same outer edges as About/Portfolio */
.home-instagram{display:grid;grid-template-columns:20% 80%;padding:24px var(--page-x);align-items:center;background:#080a0a;border-bottom:1px solid var(--line);width:100%}
.ig-copy{padding-right:18px;padding-left:0;display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ig-copy .ig-label,.ig-copy .ig-handle{font-family:var(--sans);font-size:8px;font-weight:500;line-height:1.4;letter-spacing:.16em;text-transform:uppercase;margin:0}
.ig-copy .ig-handle{display:inline-block}
.ig-feed{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;width:100%}
.ig-feed>a{aspect-ratio:1/1;overflow:hidden}
.ig-feed img{width:100%;height:100%;object-fit:cover}

/* FOOTER — same outer edges */
.site-footer{padding:26px var(--page-x) 14px;background:#080a0a;width:100%}
.footer-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr .9fr;gap:36px;align-items:start;width:100%}
.brand-footer .logo-main{font-size:34px}
.brand-footer .logo-sub{font-size:6px}
.brand-footer .custom-logo{height:56px}
.footer-title{font-size:7px;letter-spacing:.16em;margin-bottom:8px}
.footer-inner ul{list-style:none;margin:0;padding:0}
.footer-inner li,.footer-inner a{font-size:7px;line-height:1.9;letter-spacing:.08em}
.social-row{display:flex;gap:14px;font-size:18px}
.copyright{text-align:center;margin-top:20px;font-size:6px;letter-spacing:.15em;color:#777}

/* ALL INNER PAGES — global edges */
.page-hero,.gallery-title{width:100%;margin:0;padding:150px var(--page-x) 75px}
.page-hero h1,.gallery-title h1{font-family:var(--serif);font-weight:400;font-size:72px;line-height:1;margin:10px 0 20px}
.page-hero>p:not(.eyebrow),.gallery-title>p:not(.eyebrow){max-width:650px;color:#aaa;line-height:1.7}
.portfolio-tabs{width:100%;margin:0 0 38px;padding:0 var(--page-x) 14px;display:flex;gap:28px;border-bottom:1px solid var(--line)}
.portfolio-tabs button{background:none;border:0;color:#777;font-size:9px;letter-spacing:.2em;cursor:pointer}
.portfolio-tabs button.active{color:#fff}
.term-panel{display:none;width:100%;margin:0;padding:0 var(--page-x) 100px}
.term-panel.active{display:block}
.term-grid{columns:3 280px;column-gap:14px}
.term-card{display:block;break-inside:avoid;margin-bottom:14px;position:relative;overflow:hidden}
.term-card:after{content:"";position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(0,0,0,.7))}
.term-card span{position:absolute;left:18px;bottom:15px;z-index:2;font-size:9px;letter-spacing:.18em}
.masonry{columns:3 320px;column-gap:10px;width:100%;margin:0;padding:0 var(--page-x) 80px}
.masonry-item{break-inside:avoid;margin:0 0 10px;position:relative}
.masonry-item figcaption{position:absolute;bottom:8px;left:8px;background:rgba(0,0,0,.5);padding:5px 7px;font-size:8px;opacity:0}
.masonry-item:hover figcaption{opacity:1}
.gallery-back{width:calc(100% - (2 * var(--page-x)));margin:0 var(--page-x);padding:24px 0 80px;border-top:1px solid var(--line);font-size:8px;letter-spacing:.16em}
.about-page-grid{display:grid;grid-template-columns:1.1fr .9fr;width:calc(100% - (2 * var(--page-x)));margin:0 var(--page-x) 100px;background:#efede8;color:#111}
.about-page-grid>div:first-child img{height:100%;object-fit:cover}
.about-page-copy{padding:12%}
.about-page-copy h2{font-family:var(--serif);font-size:48px;font-weight:400}
.contact-wrap,.legal{width:calc(100% - (2 * var(--page-x)));margin:0 var(--page-x) 120px}
.contact-form{display:grid;gap:23px;max-width:820px}
.contact-form label{font-size:8px;letter-spacing:.15em}
.contact-form input,.contact-form textarea{width:100%;display:block;margin-top:8px;background:transparent;border:0;border-bottom:1px solid #444;color:#fff;padding:12px 0}
.contact-form textarea{height:160px}
.hp{position:absolute;left:-9999px}
.notice{border:1px solid #444;padding:12px;margin-bottom:20px;max-width:820px}
.legal{line-height:1.8;color:#ccc}
.legal>*{max-width:820px}
.legal h2{font-family:var(--serif);font-weight:400}
.note{padding-top:24px;border-top:1px solid #333;color:#888}
.nf{min-height:80vh;display:grid;place-items:center;text-align:center;padding-left:var(--page-x);padding-right:var(--page-x)}
.nf h1{font-family:var(--serif);font-size:72px}

/* LIGHTBOX */
.lightbox{display:none;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.98);place-items:center}
.lightbox.open{display:grid}
.lightbox img{max-width:92vw;max-height:88vh;width:auto}
.lightbox button{position:absolute;background:none;border:0;color:#fff;font-size:28px}
.lightbox .close{top:15px;right:20px}.lightbox .prev{left:15px;top:50%}.lightbox .next{right:15px;top:50%}
.lightbox .meta{position:absolute;bottom:14px;font-size:8px;letter-spacing:.12em;color:#aaa}

@media(min-width:1280px){
  .hero{height:51vw;max-height:820px}
  .home-card{height:340px}
  .about-photo{height:320px}
}

@media(max-width:900px){
  :root{--page-x:7%}
  .desktop-nav{display:none}
  .menu-toggle{display:block;background:none;border:0;padding:8px;margin-left:auto}
  .menu-toggle span{display:block;width:26px;height:1px;background:#fff;margin:6px}
  .mobile-nav{display:none;position:fixed;inset:0;z-index:40;background:#080a0a;padding:120px var(--page-x)}
  .mobile-nav.open{display:block}
  .mobile-nav ul{list-style:none;padding:0;margin:0}
  .mobile-nav li{margin:18px 0}
  .mobile-nav a{font-family:var(--serif);font-size:42px}
  .hero{height:100svh;max-height:none}
  .hero-copy{left:var(--page-x);top:42%;width:78%}
  .hero h1{font-size:58px}
  .four-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .home-card{height:45vw}
  .home-about{grid-template-columns:1fr;padding-top:55px;padding-bottom:55px}
  .about-text{padding:0 0 40px}
  .about-photo{height:55vw}
  .home-instagram{grid-template-columns:1fr;padding-top:45px;padding-bottom:45px}
  .ig-copy{margin-bottom:25px}
  .ig-feed{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer-inner{grid-template-columns:1fr 1fr}
  .term-grid,.masonry{columns:2 240px}
}

@media(max-width:520px){
  :root{--page-x:7%}
  .site-header{padding-top:20px;padding-bottom:20px}
  .brand .custom-logo{height:54px}
  .hero-copy{left:var(--page-x);top:43%;width:86%}
  .hero h1{font-size:48px}
  .hero-text{font-size:13px}
  .home-portfolio{padding:55px 0}
  .portfolio-heading{align-items:flex-start}
  .portfolio-heading h2{font-size:27px}
  .view-all{margin-top:22px}
  .four-cards{grid-template-columns:1fr 1fr;gap:7px}
  .home-card{height:62vw}
  .card-label{left:12px;bottom:11px}
  .home-about{padding-top:58px;padding-bottom:58px}
  .about-text h2{font-size:36px}
  .about-text p:not(.eyebrow){font-size:11px}
  .about-photo{height:62vw}
  .ig-feed{gap:5px}
  .site-footer{padding-top:38px;padding-bottom:18px}
  .footer-inner{grid-template-columns:1fr 1fr;gap:30px}
  .footer-brand{grid-column:1/-1}
  .page-hero,.gallery-title{padding-top:125px}
  .page-hero h1,.gallery-title h1{font-size:54px}
  .term-grid,.masonry{columns:2 145px;column-gap:6px}
  .term-card,.masonry-item{margin-bottom:6px}
}


/* =========================================================
   INSTAGRAM LIVE FEED — Smash Balloon integration
   Theme auto-renders feed 1 when the plugin is connected.
   These rules keep the live feed aligned with the JKB grid.
   ========================================================= */
.ig-feed-live{display:block;min-width:0}
.ig-feed-live #sb_instagram{width:100%!important;padding:0!important}
.ig-feed-live #sb_instagram #sbi_images{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:7px!important;padding:0!important;width:100%!important}
.ig-feed-live #sb_instagram .sbi_item{width:100%!important;height:auto!important;padding:0!important;margin:0!important;float:none!important;display:block!important}
.ig-feed-live #sb_instagram .sbi_photo_wrap{width:100%!important;height:100%!important}
.ig-feed-live #sb_instagram .sbi_photo{display:block!important;width:100%!important;height:auto!important;aspect-ratio:1/1!important;background-size:cover!important;background-position:center!important;overflow:hidden!important}
.ig-feed-live #sb_instagram .sbi_photo img{width:100%!important;height:100%!important;object-fit:cover!important}
.ig-feed-live #sb_instagram .sbi_info,.ig-feed-live #sb_instagram .sbi_caption_wrap,.ig-feed-live #sb_instagram .sbi_follow_btn,.ig-feed-live #sb_instagram .sbi_load_btn,.ig-feed-live #sb_instagram #sbi_load{display:none!important}
@media(max-width:900px){.ig-feed-live #sb_instagram #sbi_images{grid-template-columns:repeat(3,minmax(0,1fr))!important}}

/* =========================================================
   FOOTER CONNECT — larger email + Instagram icon
   ========================================================= */
.footer-socials{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:2px;
}
.footer-inner .footer-social{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  padding:0;
  line-height:1;
  color:var(--white);
  opacity:.92;
  transition:opacity .2s ease, transform .2s ease;
}
.footer-inner .footer-social:hover{
  opacity:1;
  transform:translateY(-1px);
}
.footer-inner .footer-social svg{
  display:block;
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.footer-inner .footer-email{
  width:32px;
  height:32px;
}
.footer-inner .footer-email svg{
  width:25px;
  height:25px;
}
.footer-inner .footer-instagram svg{
  width:21px;
  height:21px;
}
.footer-inner .footer-instagram .instagram-dot{
  fill:currentColor;
  stroke:none;
}
@media(max-width:520px){
  .footer-socials{gap:18px}
  .footer-inner .footer-email svg{width:27px;height:27px}
  .footer-inner .footer-instagram svg{width:23px;height:23px}
}


/* =========================================================
   v3.3 — RECENT MOMENTS: 6 POSTS, 4:3, NO PLUGIN CHROME
   ========================================================= */
/* Manual fallback tiles: 4:3 and show the complete image. */
.ig-feed-fallback > a{
  aspect-ratio:4/3!important;
  overflow:hidden!important;
  background:#080a0a!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.ig-feed-fallback > a:nth-child(n+7){display:none!important}
.ig-feed-fallback img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

/* Smash Balloon: always max. six images. */
.ig-feed-live #sb_instagram #sbi_images > .sbi_item:nth-child(n+7){display:none!important}
.ig-feed-live #sb_instagram #sbi_images{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:7px!important;
  width:100%!important;
  padding:0!important;
}
.ig-feed-live #sb_instagram .sbi_item{
  width:100%!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  float:none!important;
}
.ig-feed-live #sb_instagram .sbi_photo_wrap{
  width:100%!important;
  aspect-ratio:4/3!important;
  background:#080a0a!important;
  overflow:hidden!important;
}
.ig-feed-live #sb_instagram .sbi_photo{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:4/3!important;
  background-size:contain!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-color:#080a0a!important;
  overflow:hidden!important;
}
.ig-feed-live #sb_instagram .sbi_photo img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
}

/* Remove feed creator/profile header, captions, controls, plugin credits/footer. */
.ig-feed-live #sb_instagram .sb_instagram_header,
.ig-feed-live #sb_instagram .sbi_header_link,
.ig-feed-live #sb_instagram .sbi_header_text,
.ig-feed-live #sb_instagram .sbi_bio,
.ig-feed-live #sb_instagram .sbi_info,
.ig-feed-live #sb_instagram .sbi_caption_wrap,
.ig-feed-live #sb_instagram .sbi_follow_btn,
.ig-feed-live #sb_instagram .sbi_load_btn,
.ig-feed-live #sb_instagram #sbi_load,
.ig-feed-live #sb_instagram .sbi_footer,
.ig-feed-live #sb_instagram .sb_instagram_footer,
.ig-feed-live #sb_instagram [class*="powered"],
.ig-feed-live #sb_instagram [class*="credit"]{
  display:none!important;
}

@media(max-width:900px){
  .ig-feed-live #sb_instagram #sbi_images{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}


/* =========================================================
   v3.4 — CLEAN INSTAGRAM PRESENTATION
   Same typography, first/cover image only in the grid, no carousel/video badges.
   ========================================================= */
.ig-feed-live #sb_instagram .sbi_type_carousel .fa-clone,
.ig-feed-live #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-clone,
.ig-feed-live #sb_instagram .sbi_type_carousel .sbi_playbtn,
.ig-feed-live #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-play,
.ig-feed-live #sb_instagram .sbi_type_video .sbi_playbtn,
.ig-feed-live #sb_instagram .sbi_type_video .svg-inline--fa.fa-play,
.ig-feed-live #sb_instagram .sbi_video_icon,
.ig-feed-live #sb_instagram [class*="carousel-icon"]{display:none!important}

/* Keep the grid itself visually neutral: no hover metadata or overlay icons. */
.ig-feed-live #sb_instagram .sbi_link,
.ig-feed-live #sb_instagram .sbi_hover_top,
.ig-feed-live #sb_instagram .sbi_hover_bottom,
.ig-feed-live #sb_instagram .sbi_hover_inner{display:none!important}

@media(max-width:520px){
  .ig-copy{gap:9px}
  .ig-copy .ig-label,.ig-copy .ig-handle{font-size:8px}
}


/* =========================================================
   v3.5 — FOOTER CONNECT ALIGNMENT
   Equal 24px icon boxes; both start directly below LET'S CONNECT.
   ========================================================= */
.footer-socials{
  display:flex;
  align-items:flex-start;
  justify-content:flex-start;
  gap:14px;
  margin:4px 0 0 0;
  padding:0;
}
.footer-inner .footer-social,
.footer-inner .footer-email,
.footer-inner .footer-instagram{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 24px;
  width:24px;
  height:24px;
  margin:0;
  padding:0;
  line-height:0;
}
.footer-inner .footer-social svg,
.footer-inner .footer-email svg,
.footer-inner .footer-instagram svg{
  display:block;
  width:24px;
  height:24px;
  margin:0;
  padding:0;
}
@media(max-width:520px){
  .footer-socials{gap:14px}
  .footer-inner .footer-social,
  .footer-inner .footer-email,
  .footer-inner .footer-instagram{width:24px;height:24px;flex-basis:24px}
  .footer-inner .footer-social svg,
  .footer-inner .footer-email svg,
  .footer-inner .footer-instagram svg{width:24px;height:24px}
}

/* =========================================================
   v3.6 — INSTAGRAM + FOOTER POLISH
   ========================================================= */

/* Give the Instagram images a little more room while keeping the
   right edge on the global content grid. */
.home-instagram{
  grid-template-columns:17% 83%!important;
}

/* Tighter spacing between the six 4:3 images. */
.ig-feed{
  gap:4px!important;
}
.ig-feed-live #sb_instagram #sbi_images{
  gap:4px!important;
  justify-content:end!important;
}

/* Ensure every visible Instagram tile remains clickable. */
.ig-feed-fallback > a,
.ig-feed-live #sb_instagram .sbi_photo{
  pointer-events:auto!important;
  cursor:pointer!important;
}

/* Keep the feed flush with the same right-hand page grid used by
   Portfolio, About and Footer. */
.ig-feed,
.ig-feed-live,
.ig-feed-live #sb_instagram,
.ig-feed-live #sb_instagram #sbi_images{
  width:100%!important;
  margin-left:auto!important;
  margin-right:0!important;
}

/* The envelope SVG has internal viewBox whitespace. Shift only its
   visible artwork left; the Instagram icon keeps its current position. */
.footer-inner .footer-email{
  position:relative;
  left:-3px;
}

/* All explicit Instagram links should clearly behave like links. */
.ig-handle,
.footer-instagram{
  cursor:pointer;
}

@media(max-width:900px){
  .home-instagram{grid-template-columns:1fr!important}
  .ig-feed,
  .ig-feed-live #sb_instagram #sbi_images{gap:4px!important}
}

@media(max-width:520px){
  .ig-feed,
  .ig-feed-live #sb_instagram #sbi_images{gap:3px!important}
}


/* =========================================================
   JKB VISUALS v4 — FINAL GRID / INSTAGRAM / CONNECT POLISH
   These rules are authoritative over prior version overrides.
   ========================================================= */

/* Recent Moments: the whole section uses exactly the same content
   edges as Portfolio, About and Footer. No right-side inset exists. */
.home-instagram{
  display:grid!important;
  grid-template-columns:minmax(150px,17%) minmax(0,83%)!important;
  column-gap:0!important;
  width:100%!important;
  padding-left:var(--page-x)!important;
  padding-right:var(--page-x)!important;
  overflow:hidden;
}
.ig-copy{
  min-width:0;
  padding-left:0!important;
  padding-right:18px!important;
}
.ig-feed,
.ig-feed-live,
.ig-feed-fallback{
  min-width:0!important;
  width:100%!important;
  max-width:none!important;
  padding:0!important;
  margin:0!important;
  justify-self:stretch!important;
  align-self:center!important;
  box-sizing:border-box!important;
}

/* Smash Balloon has its own width/max-width/padding rules. Reset all
   feed wrappers so the sixth tile ends exactly on the global right edge. */
.ig-feed-live #sb_instagram,
.ig-feed-live #sb_instagram.sbi,
.ig-feed-live #sb_instagram .sbi,
.ig-feed-live #sb_instagram #sbi_images{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
  float:none!important;
  transform:none!important;
}
.ig-feed-live #sb_instagram #sbi_images{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  grid-auto-flow:row!important;
  gap:3px!important;
  align-items:stretch!important;
  justify-items:stretch!important;
}
.ig-feed-live #sb_instagram #sbi_images > .sbi_item{
  display:block!important;
  width:auto!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  float:none!important;
  box-sizing:border-box!important;
}
.ig-feed-live #sb_instagram #sbi_images > .sbi_item:nth-child(n+7){display:none!important}
.ig-feed-live #sb_instagram .sbi_photo_wrap,
.ig-feed-live #sb_instagram .sbi_photo_wrap > a,
.ig-feed-live #sb_instagram .sbi_photo{
  width:100%!important;
  max-width:none!important;
  min-width:0!important;
  height:auto!important;
  margin:0!important;
  padding:0!important;
  box-sizing:border-box!important;
}
.ig-feed-live #sb_instagram .sbi_photo_wrap{
  aspect-ratio:4/3!important;
  overflow:hidden!important;
  background:var(--black)!important;
}
.ig-feed-live #sb_instagram .sbi_photo{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  aspect-ratio:4/3!important;
  background-size:contain!important;
  background-position:center!important;
  background-repeat:no-repeat!important;
  background-color:var(--black)!important;
  overflow:hidden!important;
}
.ig-feed-live #sb_instagram .sbi_photo img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  margin:0!important;
  padding:0!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Manual fallback matches the live feed exactly. */
.ig-feed-fallback{
  display:grid!important;
  grid-template-columns:repeat(6,minmax(0,1fr))!important;
  gap:3px!important;
}
.ig-feed-fallback > a{
  width:100%!important;
  min-width:0!important;
  aspect-ratio:4/3!important;
  margin:0!important;
  padding:0!important;
  background:var(--black)!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}
.ig-feed-fallback > a:nth-child(n+7){display:none!important}
.ig-feed-fallback img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}

/* Remove every piece of plugin chrome / badges. */
.ig-feed-live #sb_instagram .sb_instagram_header,
.ig-feed-live #sb_instagram .sbi_header_link,
.ig-feed-live #sb_instagram .sbi_header_text,
.ig-feed-live #sb_instagram .sbi_bio,
.ig-feed-live #sb_instagram .sbi_info,
.ig-feed-live #sb_instagram .sbi_caption_wrap,
.ig-feed-live #sb_instagram .sbi_follow_btn,
.ig-feed-live #sb_instagram .sbi_load_btn,
.ig-feed-live #sb_instagram #sbi_load,
.ig-feed-live #sb_instagram .sbi_footer,
.ig-feed-live #sb_instagram .sb_instagram_footer,
.ig-feed-live #sb_instagram .sbi_type_carousel .fa-clone,
.ig-feed-live #sb_instagram .sbi_type_carousel .svg-inline--fa.fa-clone,
.ig-feed-live #sb_instagram .sbi_playbtn,
.ig-feed-live #sb_instagram .sbi_video_icon,
.ig-feed-live #sb_instagram [class*="carousel-icon"],
.ig-feed-live #sb_instagram [class*="powered"],
.ig-feed-live #sb_instagram [class*="credit"]{
  display:none!important;
}

/* LET'S CONNECT: make the title + icon pair one compact optical unit.
   Both icons share the same exact 24px box and SVG dimensions. */
.footer-connect{
  justify-self:start;
  width:max-content;
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.footer-connect .footer-title{
  width:100%;
  text-align:center;
  margin:0 0 8px!important;
}
.footer-socials{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:7px!important;
  margin:0!important;
  padding:0!important;
}
.footer-inner .footer-social,
.footer-inner .footer-email,
.footer-inner .footer-instagram{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 0 24px!important;
  width:24px!important;
  height:24px!important;
  margin:0!important;
  padding:0!important;
  line-height:0!important;
  transform:none!important;
}
.footer-inner .footer-social svg,
.footer-inner .footer-email svg,
.footer-inner .footer-instagram svg{
  display:block!important;
  width:22px!important;
  height:22px!important;
  margin:0!important;
  padding:0!important;
  overflow:visible;
}
.footer-inner .footer-social:hover{transform:none!important}

@media(max-width:900px){
  .home-instagram{grid-template-columns:1fr!important}
  .ig-copy{padding-right:0!important}
  .ig-feed-live #sb_instagram #sbi_images,
  .ig-feed-fallback{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:3px!important}
}
@media(max-width:520px){
  .footer-socials{gap:7px!important}
  .footer-inner .footer-social,
  .footer-inner .footer-email,
  .footer-inner .footer-instagram{width:24px!important;height:24px!important;flex-basis:24px!important}
  .footer-inner .footer-social svg,
  .footer-inner .footer-email svg,
  .footer-inner .footer-instagram svg{width:22px!important;height:22px!important}
}

/* =========================================================
   JKB VISUALS v4.1 — STICKY HEADER + MINIMAL FOOTER
   ========================================================= */

/* Header stays visible while scrolling. At the top it remains
   transparent; after scrolling it receives a subtle dark glass
   background so the white logo/navigation stay readable over the
   light About section and all other page backgrounds. */
.site-header{
  position:fixed!important;
  top:0;
  left:0;
  right:0;
  z-index:1000!important;
  transition:background-color .28s ease,backdrop-filter .28s ease,box-shadow .28s ease;
}
.site-header.is-scrolled{
  background:rgba(8,10,10,.90);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  box-shadow:0 1px 0 rgba(255,255,255,.08);
}

/* Keep the mobile menu underneath the fixed header. */
.mobile-nav{z-index:999!important}

/* Minimal footer: logo on the left, connection block on the right. */
.site-footer{
  padding-top:34px!important;
  padding-bottom:18px!important;
}
.footer-inner.footer-inner-minimal{
  display:grid!important;
  grid-template-columns:1fr auto!important;
  gap:40px!important;
  align-items:start!important;
  width:100%!important;
}
.footer-inner-minimal .footer-brand{justify-self:start}
.footer-inner-minimal .footer-connect{justify-self:end}

/* Preserve the centered social group beneath LET'S CONNECT. */
.footer-inner-minimal .footer-connect{
  width:max-content;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  text-align:center!important;
}
.footer-inner-minimal .footer-connect .footer-title{
  width:100%;
  text-align:center!important;
  margin-bottom:10px!important;
}
.footer-inner-minimal .footer-socials{
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  gap:8px!important;
  margin:0!important;
}
.footer-inner-minimal .footer-social,
.footer-inner-minimal .footer-email,
.footer-inner-minimal .footer-instagram{
  width:24px!important;
  height:24px!important;
  flex:0 0 24px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
}
.footer-inner-minimal .footer-social svg,
.footer-inner-minimal .footer-email svg,
.footer-inner-minimal .footer-instagram svg{
  display:block!important;
  width:22px!important;
  height:22px!important;
  margin:0!important;
  padding:0!important;
  stroke:currentColor;
  fill:none;
  stroke-width:1.4;
  vector-effect:non-scaling-stroke;
}
.footer-inner-minimal .instagram-dot{fill:currentColor!important;stroke:none!important}

/* Copyright + legal essentials only. No duplicated site navigation. */
.footer-bottom{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:24px;
  padding-top:14px;
  border-top:1px solid var(--line);
}
.footer-bottom .copyright{
  margin:0!important;
  text-align:left!important;
}
.footer-legal{
  display:flex;
  gap:20px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.footer-legal a{
  font-size:6px;
  line-height:1.4;
  letter-spacing:.15em;
  color:#777;
}
.footer-legal a:hover{color:var(--white)}

@media(max-width:900px){
  .footer-inner.footer-inner-minimal{
    grid-template-columns:1fr auto!important;
  }
}

@media(max-width:520px){
  .footer-inner.footer-inner-minimal{
    grid-template-columns:1fr!important;
    gap:28px!important;
  }
  .footer-inner-minimal .footer-brand,
  .footer-inner-minimal .footer-connect{
    justify-self:start!important;
  }
  .footer-inner-minimal .footer-connect{
    align-items:flex-start!important;
    text-align:left!important;
  }
  .footer-inner-minimal .footer-connect .footer-title{
    text-align:left!important;
  }
  .footer-bottom{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }
  .footer-legal{justify-content:flex-start}
}


/* =========================================================
   JKB VISUALS v4.2 — FINAL HOMEPAGE CARD PROPORTIONS
   ========================================================= */

/* Selected Galleries use a true portrait 3:4 ratio everywhere.
   No fixed card height: the ratio scales fluidly with the shared grid. */
.home-card{
  height:auto!important;
  aspect-ratio:3 / 4!important;
  position:relative;
  overflow:hidden;
}
.home-card img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Keep the four cards equal at every responsive breakpoint. */
@media(min-width:1280px){
  .home-card{height:auto!important;aspect-ratio:3 / 4!important}
}
@media(max-width:900px){
  .home-card{height:auto!important;aspect-ratio:3 / 4!important}
}
@media(max-width:520px){
  .home-card{height:auto!important;aspect-ratio:3 / 4!important}
}

/* Slightly refined label spacing for the taller editorial cards. */
.home-card .card-label{
  bottom:18px;
}

/* Subtle current-page state in the sticky header. WordPress adds
   current-menu-item/current_page_item automatically to menu entries. */
.desktop-nav .current-menu-item > a,
.desktop-nav .current_page_item > a,
.desktop-nav .current-menu-ancestor > a{
  position:relative;
}
.desktop-nav .current-menu-item > a::after,
.desktop-nav .current_page_item > a::after,
.desktop-nav .current-menu-ancestor > a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-7px;
  height:1px;
  background:currentColor;
  opacity:.75;
}

/* =========================================================
   JKB VISUALS v4.3 — EDGE ALIGNMENT / HERO / FOOTER RULE
   ========================================================= */

/* Slightly larger desktop hero while preserving the existing crop,
   text position and responsive mobile behavior. */
@media (min-width:901px){
  .hero{
    height:54vw!important;
    min-height:660px!important;
    max-height:880px!important;
  }
}
@media (min-width:1280px){
  .hero{
    height:54vw!important;
    max-height:900px!important;
  }
}

/* The Instagram grid itself already reaches the shared right content
   edge. Because images are intentionally not cropped (contain), a
   portrait/square final post can leave letterbox space on its right.
   Anchor only the final visible image to the right edge so the actual
   photograph meets the global right border while remaining uncropped. */
.ig-feed-live #sb_instagram #sbi_images > .sbi_item:nth-child(6) .sbi_photo{
  background-position:right center!important;
}
.ig-feed-live #sb_instagram #sbi_images > .sbi_item:nth-child(6) .sbi_photo img{
  object-position:right center!important;
}
.ig-feed-fallback > a:nth-child(6) img{
  object-position:right center!important;
}

/* Guard against plugin wrappers reintroducing a small right inset. */
.ig-feed-live,
.ig-feed-live #sb_instagram,
.ig-feed-live #sb_instagram #sbi_images{
  justify-self:stretch!important;
  margin-right:0!important;
  padding-right:0!important;
  right:auto!important;
}
.ig-feed-live #sb_instagram #sbi_images > .sbi_item:nth-child(6){
  margin-right:0!important;
  padding-right:0!important;
}

/* Full-width footer divider. The footer content remains on the shared
   page grid, but the line itself runs from viewport edge to viewport edge. */
.footer-bottom{
  position:relative!important;
  border-top:0!important;
}
.footer-bottom::before{
  content:"";
  position:absolute;
  top:0;
  left:calc(-1 * var(--page-x));
  width:calc(100% + (2 * var(--page-x)));
  height:1px;
  background:var(--line);
  pointer-events:none;
}

/* =========================================================
   JKB VISUALS v4.5 — EVEN INSTAGRAM GAPS + TRUE FULL-BLEED DIVIDER
   ========================================================= */

/* Keep every Instagram tile on the exact same grid gap. The small
   dynamic width compensation is applied by JS only to the whole feed,
   never to an individual tile, so spacing between posts stays equal. */
.ig-feed-live #sb_instagram #sbi_images{
  gap:3px!important;
  column-gap:3px!important;
  row-gap:3px!important;
  object-position:initial!important;
  overflow:visible!important;
}
.ig-feed-live #sb_instagram #sbi_images > .sbi_item{
  margin:0!important;
  padding:0!important;
}

/* Remove the previous single-tile compensation. All images are centered
   again; JS compensates the complete grid so the sixth visible image can
   still meet the shared right border without changing the 3px gaps. */
.ig-feed-live #sb_instagram #sbi_images > .sbi_item:nth-child(6) .sbi_photo{
  background-position:center center!important;
}
.ig-feed-live #sb_instagram #sbi_images > .sbi_item:nth-child(6) .sbi_photo img,
.ig-feed-fallback > a:nth-child(6) img{
  object-position:center center!important;
}

/* Allow the compensated live grid to extend invisibly into the right
   gutter. The visible sixth image still ends on the global content line. */
.ig-feed,
.ig-feed-live,
.ig-feed-live #sb_instagram{
  overflow:visible!important;
}

/* Truly viewport-wide divider: 100vw centered on the viewport rather
   than calculated from any container/padding value. This remains exact
   on ultrawide, 4K, tablet and phone displays. */
.site-footer{
  overflow:visible!important;
}
.footer-bottom{
  position:relative!important;
  border-top:0!important;
}
.footer-bottom::before{
  content:"";
  position:absolute!important;
  top:0!important;
  left:50%!important;
  width:100vw!important;
  max-width:none!important;
  height:1px!important;
  margin:0!important;
  padding:0!important;
  transform:translateX(-50%)!important;
  background:var(--line)!important;
  pointer-events:none!important;
}

/* =========================================================
   JKB VISUALS v4.5 — DESKTOP TYPOGRAPHY PASS
   Larger type for high-resolution/2K+ displays while
   preserving the existing visual hierarchy.
   ========================================================= */

/* Keep the new hero sentence on one line on desktop. */
@media (min-width: 901px) {
  .hero-text {
    max-width: none;
    width: max-content;
    white-space: nowrap;
  }
}

/* Scale the complete type system proportionally on larger screens. */
@media (min-width: 1200px) {
  .logo-main{font-size:47.5px}
  .logo-sub{font-size:8.75px}
  .desktop-nav a{font-size:10.625px}
  .eyebrow{font-size:11.25px}
  .hero h1{font-size:80px}
  .hero-text{font-size:18.75px}
  .outline-btn{font-size:11.25px}
  .scroll-mark{font-size:8.75px}
  .portfolio-heading h2{font-size:35px}
  .view-all{font-size:10px}
  .view-all span{font-size:16.25px}
  .card-label{font-size:10px}
  .about-text .eyebrow{font-size:10px}
  .about-text h2{font-size:38.75px}
  .about-text p:not(.eyebrow){font-size:12.5px}
  .about-text>a{font-size:10px}
  .about-text>a span{font-size:15px}
  .ig-copy .ig-label,.ig-copy .ig-handle{font-size:10px}
  .brand-footer .logo-main{font-size:42.5px}
  .brand-footer .logo-sub{font-size:7.5px}
  .footer-title{font-size:8.75px}
  .footer-inner li,.footer-inner a{font-size:8.75px}
  .copyright{font-size:7.5px}
  .page-hero h1,.gallery-title h1{font-size:90px}
  .page-hero>p:not(.eyebrow),.gallery-title>p:not(.eyebrow){font-size:1.25em}
  .portfolio-tabs button{font-size:11.25px}
  .term-card span{font-size:11.25px}
  .masonry-item figcaption{font-size:10px}
  .gallery-back{font-size:10px}
  .about-page-copy h2{font-size:60px}
  .contact-form label{font-size:10px}
  .legal,.contact-form input,.contact-form textarea{font-size:1.125rem}
  .nf h1{font-size:90px}
  .lightbox .meta{font-size:10px}
}

/* Additional upscale for very wide 2K/4K CSS viewports. */
@media (min-width: 2000px) {
  .logo-main{font-size:53px}
  .logo-sub{font-size:9.5px}
  .desktop-nav a{font-size:12px}
  .eyebrow{font-size:12px}
  .hero h1{font-size:90px}
  .hero-text{font-size:20px}
  .outline-btn{font-size:12px}
  .scroll-mark{font-size:9.5px}
  .portfolio-heading h2{font-size:39px}
  .view-all,.card-label,.about-text .eyebrow,.about-text>a,.ig-copy .ig-label,.ig-copy .ig-handle{font-size:11px}
  .about-text h2{font-size:43px}
  .about-text p:not(.eyebrow){font-size:14px}
  .footer-title,.footer-inner li,.footer-inner a{font-size:10px}
  .copyright{font-size:8.5px}
  .page-hero h1,.gallery-title h1{font-size:100px}
  .portfolio-tabs button,.term-card span{font-size:12px}
  .masonry-item figcaption,.gallery-back,.contact-form label,.lightbox .meta{font-size:11px}
  .about-page-copy h2{font-size:66px}
}

/* =========================================================
   JKB VISUALS FINAL — CLEAN HERO
   ========================================================= */
.hero-copy-final{
  top:40%;
  width:auto;
  max-width:70%;
}
.hero-copy-final h1{
  margin:0 0 18px;
}
.hero-copy-final .hero-categories{
  margin:0;
  white-space:nowrap;
  color:#f3f1ed;
}

@media(max-width:900px){
  .hero-copy-final{top:42%;width:86%;max-width:86%}
  .hero-copy-final .hero-categories{white-space:normal;line-height:1.55}
}
@media(max-width:520px){
  .hero-copy-final{top:43%}
}


/* =========================================================
   FINAL INSTAGRAM ROW FIX — equal visible gaps + flush right edge
   ========================================================= */
@media (min-width:901px){
  .home-instagram .ig-feed-live,
  .home-instagram .ig-feed-live #sb_instagram,
  .home-instagram .ig-feed-live #sb_instagram #sbi_images{
    width:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    transform:none!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  .home-instagram .ig-feed-live #sb_instagram #sbi_images{
    display:flex!important;
    gap:3px!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
  }
  .home-instagram .ig-feed-live #sb_instagram #sbi_images>.sbi_item{
    margin:0!important;
    padding:0!important;
    min-width:0!important;
    max-width:none!important;
    box-sizing:border-box!important;
  }
  .home-instagram .ig-feed-live #sb_instagram .sbi_photo_wrap,
  .home-instagram .ig-feed-live #sb_instagram .sbi_photo{
    margin:0!important;
    padding:0!important;
    max-width:none!important;
    overflow:hidden!important;
    background:var(--black)!important;
  }
  .home-instagram .ig-feed-live #sb_instagram .sbi_photo img{
    display:block!important;
    margin:0!important;
    padding:0!important;
    max-width:none!important;
    object-fit:contain!important;
  }
}

/* =========================================================
   FINAL INSTAGRAM SIZE TUNING — smaller row, more breathing room
   ========================================================= */
@media (min-width:901px){
  .home-instagram .ig-feed-live #sb_instagram #sbi_images{
    gap:9px!important;
    justify-content:flex-end!important;
  }
  .home-instagram .ig-feed-fallback{
    gap:9px!important;
  }
}
\n\n/* =========================================================\n   JKB VISUALS FINAL v5 — INSTAGRAM RHYTHM RESET\n   Stable geometry: modestly larger images, equal 14px gaps,\n   right edge remains flush. Vertical rhythm matches About.\n   ========================================================= */\n.home-instagram{\n  padding-top:28px!important;\n  padding-bottom:25px!important;\n}\n@media (min-width:901px){\n  .home-instagram .ig-feed-live #sb_instagram #sbi_images,\n  .home-instagram .ig-feed-fallback{\n    gap:14px!important;\n    column-gap:14px!important;\n    row-gap:0!important;\n    justify-content:flex-end!important;\n  }\n}\n@media (max-width:900px){\n  .home-instagram{padding-top:55px!important;padding-bottom:55px!important}\n}\n

/* =========================================================
   JKB VISUALS FINAL v6 — SCREENSHOT POLISH
   ========================================================= */

/* About image: true 2:1 landscape ratio at every viewport. */
.about-photo{
  width:100%!important;
  height:auto!important;
  aspect-ratio:2 / 1!important;
  overflow:hidden!important;
}
.about-photo img{
  width:100%!important;
  height:100%!important;
  aspect-ratio:2 / 1!important;
  object-fit:cover!important;
  object-position:center!important;
}

/* Instagram row is positioned by JS against Selected Galleries card #2.
   Keep the section itself clipped to the viewport to prevent horizontal scroll. */
@media(min-width:901px){
  .home-instagram{
    overflow:hidden!important;
    border-bottom:0!important;
  }
  .home-instagram .ig-feed-live{
    margin:0!important;
    padding:0!important;
    max-width:none!important;
  }
  .home-instagram .ig-feed-live #sb_instagram,
  .home-instagram .ig-feed-live #sb_instagram #sbi_images{
    max-width:none!important;
    margin:0!important;
    padding:0!important;
  }
}

/* Remove the divider between Instagram and footer completely. */
.home-instagram{border-bottom:0!important}
.site-footer{border-top:0!important}

/* Compact footer vertically without changing its horizontal alignment. */
.site-footer{
  padding-top:18px!important;
  padding-bottom:8px!important;
}
.footer-inner.footer-inner-minimal{
  align-items:center!important;
}
.footer-bottom{
  margin-top:12px!important;
  padding-top:8px!important;
}

@media(max-width:900px){
  .about-photo{height:auto!important;aspect-ratio:2 / 1!important}
  .site-footer{padding-top:16px!important;padding-bottom:8px!important}
}
\n\n/* =========================================================\n   FINAL v8 — CLICKABLE SELECTED GALLERIES\n   Entire 3:4 homepage card links directly to its filtered theme gallery.\n   ========================================================= */\n.home-card-link{\n  display:block!important;\n  color:inherit!important;\n  text-decoration:none!important;\n  cursor:pointer;\n}\n.home-card-link img{\n  transition:transform .4s ease, filter .4s ease;\n}\n.home-card-link:hover img,\n.home-card-link:focus-visible img{\n  transform:scale(1.025);\n}\n.home-card-link:focus-visible{\n  outline:1px solid rgba(255,255,255,.9);\n  outline-offset:4px;\n}\n

/* =========================================================
   JKB VISUALS FINAL v10 — INSTAGRAM DATA-ONLY ARCHITECTURE
   Smash Balloon is hidden and used only as the post source.
   The visible six-image row is owned entirely by this theme.
   ========================================================= */

/* Match the exact four-card content grid: copy in column 1,
   Instagram row begins where Selected Galleries card #2 begins. */
@media(min-width:901px){
  .home-instagram{
    display:grid!important;
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    column-gap:9px!important;
    align-items:center!important;
    padding-left:var(--page-x)!important;
    padding-right:var(--page-x)!important;
    overflow:hidden!important;
  }
  .home-instagram .ig-copy{
    grid-column:1!important;
    min-width:0!important;
    padding-right:18px!important;
  }
  .home-instagram .jkb-instagram-row{
    grid-column:2 / 5!important;
    width:100%!important;
    min-width:0!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    gap:14px!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .jkb-instagram-row > a{
    display:block!important;
    flex:0 0 auto!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    line-height:0!important;
  }
  .jkb-instagram-row > a > img{
    display:block!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:center!important;
    margin:0!important;
    padding:0!important;
  }
}

/* The plugin still loads/fetches normally, but its visual output never
   participates in layout, so its inline widths cannot move the visible row. */
.jkb-instagram-source{
  position:absolute!important;
  left:-10000px!important;
  top:auto!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
  contain:strict!important;
}

@media(max-width:900px){
  .home-instagram{
    display:block!important;
  }
  .jkb-instagram-row{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:8px!important;
    width:100%!important;
    margin-top:25px!important;
  }
  .jkb-instagram-row > a{
    display:block!important;
    aspect-ratio:4 / 3!important;
    overflow:hidden!important;
  }
  .jkb-instagram-row > a > img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    object-fit:contain!important;
  }
}

@media(max-width:520px){
  .jkb-instagram-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px!important}
}


/* =========================================================
   JKB VISUALS FINAL v11 — STABLE INSTAGRAM GRID
   Six equal 3:4 tiles, no JS sizing, no plugin layout influence.
   ========================================================= */
@media(min-width:901px){
  .home-instagram .jkb-instagram-row{
    grid-column:2 / 5!important;
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:14px!important;
    width:100%!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
    align-items:stretch!important;
  }
  .home-instagram .jkb-instagram-row > a{
    display:block!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:3 / 4!important;
    min-width:0!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    line-height:0!important;
    position:relative!important;
  }
  .home-instagram .jkb-instagram-row > a > img{
    display:block!important;
    position:static!important;
    width:100%!important;
    height:100%!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    object-fit:contain!important;
    object-position:center center!important;
    transform:none!important;
  }
}

/* =========================================================
   JKB VISUALS FINAL v13 — HARD-LOCK ABOUT IMAGE TO 2:1
   The wrapper owns the aspect ratio; the image is absolutely
   positioned inside it. This prevents intrinsic image size,
   breakpoints, browser zoom, or surrounding grid height from
   changing the displayed 2:1 proportion.
   ========================================================= */
.home-about .about-photo{
  position:relative!important;
  display:block!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:2 / 1!important;
  overflow:hidden!important;
  align-self:center!important;
}
.home-about .about-photo > img{
  position:absolute!important;
  inset:0!important;
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-width:100%!important;
  min-height:100%!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center center!important;
  margin:0!important;
  padding:0!important;
}

@media(max-width:900px){
  .home-about .about-photo{
    width:100%!important;
    height:auto!important;
    aspect-ratio:2 / 1!important;
  }
}

/* =========================================================
   JKB VISUALS FINAL v14 — HERO SIZE CONTROL
   Edit only --jkb-hero-height-desktop below to change the
   desktop hero height in future versions.
   ========================================================= */
:root{
  --jkb-hero-height-desktop:58vw;
  --jkb-hero-min-height-desktop:680px;
  --jkb-hero-max-height-desktop:960px;
}

@media (min-width:901px){
  .hero{
    height:var(--jkb-hero-height-desktop)!important;
    min-height:var(--jkb-hero-min-height-desktop)!important;
    max-height:var(--jkb-hero-max-height-desktop)!important;
  }
}

/* Mobile keeps the existing full-screen treatment. */
@media (max-width:900px){
  .hero{
    height:100svh!important;
    min-height:0!important;
    max-height:none!important;
  }
}

/* =========================================================
   JKB VISUALS 5.1 — SINGLE-PAGE PORTFOLIO BROWSER
   Hero is a hidden default theme; Places and Themes filter one gallery.
   ========================================================= */
.portfolio-page-hero{
  padding-bottom:64px!important;
}
.portfolio-browser{
  width:100%;
  padding:0 var(--page-x) 90px;
  display:grid;
  grid-template-columns:minmax(175px,18%) minmax(0,82%);
  column-gap:clamp(34px,5vw,92px);
  align-items:start;
}
.portfolio-sidebar{
  position:sticky;
  top:118px;
  display:grid;
  gap:42px;
  padding-top:8px;
}
.portfolio-filter-group h2{
  margin:0 0 16px;
  font-family:var(--sans);
  font-size:10px;
  font-weight:600;
  line-height:1;
  letter-spacing:.22em;
  color:var(--white);
}
.portfolio-filter-list{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:9px;
}
.portfolio-filter{
  position:relative;
  display:inline-block;
  padding:2px 0 4px;
  font-family:var(--sans);
  font-size:12px;
  line-height:1.25;
  letter-spacing:.025em;
  color:#aaa;
  transition:font-size .2s ease,color .2s ease,font-family .2s ease,transform .2s ease;
}
.portfolio-filter:hover{
  color:#fff;
}
.portfolio-filter:hover::after,
.portfolio-filter:focus-visible::after{
  width:100%;
}
.portfolio-filter::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1px;
  background:currentColor;
  transition:width .22s ease;
}
.portfolio-filter.is-active{
  font-family:var(--serif);
  font-size:18px;
  line-height:1.05;
  color:#fff;
  letter-spacing:.015em;
}
.portfolio-filter.is-active::after{
  width:100%;
}
.portfolio-filter-empty{
  max-width:165px;
  font-size:10px;
  line-height:1.5;
  color:#777;
}
.portfolio-gallery-stage{
  min-width:0;
  opacity:1;
  transition:opacity .16s ease;
}
.portfolio-gallery-stage.is-loading{
  opacity:.25;
}
.portfolio-gallery-heading{
  display:flex;
  align-items:baseline;
  gap:18px;
  margin:0 0 20px;
}
.portfolio-gallery-heading .eyebrow{
  margin:0;
  color:#777;
}
.portfolio-gallery-heading h2{
  margin:0;
  font-family:var(--serif);
  font-size:34px;
  line-height:1;
  font-weight:400;
}
.portfolio-masonry.masonry{
  width:100%!important;
  padding:0!important;
  margin:0!important;
  columns:3 280px;
  column-gap:12px;
}
.portfolio-masonry .masonry-item{
  margin-bottom:12px;
}
.portfolio-gallery-empty{
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.16);
  font-size:10px;
  letter-spacing:.12em;
  color:#777;
}
@media(min-width:1200px){
  .portfolio-filter-group h2{font-size:11px}
  .portfolio-filter{font-size:13px}
  .portfolio-filter.is-active{font-size:20px}
  .portfolio-gallery-heading h2{font-size:38px}
}
@media(max-width:900px){
  .portfolio-page-hero{padding-bottom:44px!important}
  .portfolio-browser{
    grid-template-columns:1fr;
    row-gap:42px;
    padding-bottom:70px;
  }
  .portfolio-sidebar{
    position:static;
    grid-template-columns:1fr 1fr;
    gap:28px;
  }
  .portfolio-filter-list{gap:8px}
  .portfolio-masonry.masonry{columns:2 220px}
}
@media(max-width:520px){
  .portfolio-sidebar{grid-template-columns:1fr 1fr}
  .portfolio-filter{font-size:11px}
  .portfolio-filter.is-active{font-size:17px}
  .portfolio-gallery-heading{gap:10px;margin-bottom:15px}
  .portfolio-gallery-heading h2{font-size:30px}
  .portfolio-masonry.masonry{columns:2 145px;column-gap:6px}
  .portfolio-masonry .masonry-item{margin-bottom:6px}
}


/* =========================================================
   JKB VISUALS 5.1.1 — PORTFOLIO MENU REFINEMENT
   Places + Themes side-by-side; gallery title/header removed.
   ========================================================= */
@media (min-width:901px){
  .portfolio-browser{
    grid-template-columns:minmax(300px,30%) minmax(0,70%)!important;
    column-gap:clamp(34px,4vw,72px)!important;
  }
  .portfolio-sidebar{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:clamp(28px,3vw,54px)!important;
    row-gap:0!important;
    align-items:start!important;
  }
}
.portfolio-gallery-heading{display:none!important;}
@media (max-width:900px){
  .portfolio-sidebar{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
    column-gap:28px!important;
    row-gap:0!important;
  }
}
@media (max-width:520px){
  .portfolio-sidebar{column-gap:20px!important;}
}


/* =========================================================
   JKB VISUALS 5.1.2 — PORTFOLIO WIDTH + SPACING
   Two 150px menu columns, 24px between menu columns, and
   exactly 24px from the menu block to the gallery.
   ========================================================= */
@media (min-width:901px){
  .portfolio-browser{
    grid-template-columns:324px minmax(0,1fr)!important;
    column-gap:24px!important;
  }
  .portfolio-sidebar{
    width:324px!important;
    grid-template-columns:150px 150px!important;
    column-gap:24px!important;
    row-gap:0!important;
  }
}


/* =========================================================
   v5.1.3 — portfolio image delivery + casual download deterrence
   ========================================================= */
.home-card img,
.about-photo img,
.masonry-item img,
.lightbox img{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
}
.masonry-item .lightbox-link{
  display:block;
  position:relative;
}


/* =========================================================
   v5.1.4 — HERO FOCAL POINT
   Preserve mountain peaks / sky when the cover crop changes.
   The hero uses a background image, so background-position is
   the authoritative focal-point control.
   ========================================================= */
.hero-image{
  background-position:center 22%!important;
}

/* Shorter desktop/laptop viewports: bias the crop further upward. */
@media (max-width:1400px){
  .hero-image{background-position:center 18%!important;}
}

/* Tablet */
@media (max-width:900px){
  .hero-image{background-position:center 15%!important;}
}

/* Phone */
@media (max-width:520px){
  .hero-image{background-position:center 12%!important;}
}

/* =========================================================
   JKB VISUALS 5.1.6 — HERO COMPOSITION REFINEMENT
   Lower-third text placement + slightly higher mountain focal point.
   These rules intentionally sit last so older hero rules cannot win.
   ========================================================= */
@media (min-width:901px){
  .hero-copy-final{
    top:62%!important;
    transform:translateY(-50%);
  }
  .hero-image{
    background-position:center 18%!important;
  }
}

/* Laptop / narrower desktop: retain the lower-third composition and
   protect a little more sky/peak area. */
@media (min-width:901px) and (max-width:1400px){
  .hero-copy-final{top:61%!important;}
  .hero-image{background-position:center 15%!important;}
}

/* Tablet: keep the copy lower than before without crowding the bottom. */
@media (max-width:900px){
  .hero-copy-final{
    top:58%!important;
    transform:translateY(-50%);
  }
  .hero-image{background-position:center 12%!important;}
}

/* Phone: slightly higher copy than tablet for safe breathing room. */
@media (max-width:520px){
  .hero-copy-final{top:56%!important;}
  .hero-image{background-position:center 10%!important;}
}


/* =========================================================
   JKB VISUALS 5.1.7 — AUTHORITATIVE HERO POSITION
   Cache-busted stylesheet + clearly visible lower-third copy placement.
   ========================================================= */
@media (min-width:1401px){
  .hero .hero-copy.hero-copy-final{
    top:67%!important;
    transform:translateY(-50%)!important;
  }
  .hero .hero-image{
    background-position:center 14%!important;
  }
}
@media (min-width:901px) and (max-width:1400px){
  .hero .hero-copy.hero-copy-final{
    top:65%!important;
    transform:translateY(-50%)!important;
  }
  .hero .hero-image{
    background-position:center 12%!important;
  }
}
@media (min-width:521px) and (max-width:900px){
  .hero .hero-copy.hero-copy-final{
    top:61%!important;
    transform:translateY(-50%)!important;
  }
  .hero .hero-image{
    background-position:center 10%!important;
  }
}
@media (max-width:520px){
  .hero .hero-copy.hero-copy-final{
    top:59%!important;
    transform:translateY(-50%)!important;
  }
  .hero .hero-image{
    background-position:center 8%!important;
  }
}


/* =========================================================
   JKB VISUALS 5.1.8 — HOMEPAGE ABOUT TEXT WIDTH
   Widen only the text inside the landing-page About section.
   The 2:1 photograph and the section grid stay unchanged.
   ========================================================= */
@media (min-width:901px){
  .home-about .about-text{
    padding-right:4%!important;
  }
  .home-about .about-text h2,
  .home-about .about-text p:not(.eyebrow){
    max-width:390px!important;
  }
}

/* On very wide displays, let the copy breathe a little further while
   retaining a readable editorial line length. */
@media (min-width:1800px){
  .home-about .about-text h2,
  .home-about .about-text p:not(.eyebrow){
    max-width:430px!important;
  }
}

/* =========================================================
   JKB VISUALS 5.1.9 — HOMEPAGE ABOUT DESKTOP BALANCE
   Pull the About photo left and use more of the available
   desktop width for the copy, reducing the large dead zone.
   ========================================================= */
@media (min-width:1200px){
  .home-about{
    grid-template-columns:40% 60%!important;
  }
  .home-about .about-text{
    padding-right:2%!important;
  }
  .home-about .about-text h2,
  .home-about .about-text p:not(.eyebrow){
    max-width:470px!important;
  }
}
@media (min-width:1800px){
  .home-about .about-text h2,
  .home-about .about-text p:not(.eyebrow){
    max-width:520px!important;
  }
}

/* =========================================================
   JKB VISUALS 5.1.10 — HOMEPAGE ABOUT REBALANCE
   Restore the About photograph to its earlier visual size while
   preserving the tighter text-to-image spacing from 5.1.9.
   ========================================================= */
@media (min-width:1200px){
  .home-about{
    grid-template-columns:45.3% 54.7%!important;
  }
  .home-about .about-text{
    padding-right:2%!important;
  }
  .home-about .about-text h2,
  .home-about .about-text p:not(.eyebrow){
    max-width:560px!important;
  }
}
@media (min-width:1800px){
  .home-about .about-text h2,
  .home-about .about-text p:not(.eyebrow){
    max-width:650px!important;
  }
}


/* =========================================================
   JKB VISUALS 5.1.11 — ABOUT / INSTAGRAM GRID ALIGNMENT
   On desktop, JS measures Instagram tile #3 and expands the
   2:1 About photo leftward while keeping its right edge fixed.
   This gives exact alignment across viewport sizes and zoom.
   ========================================================= */
@media (min-width:901px){
  .home-about .about-photo{
    justify-self:end!important;
    width:var(--jkb-about-photo-aligned-width,100%)!important;
    max-width:none!important;
  }
}

/* =========================================================
   JKB VISUALS 5.2.0 — TRUE NATIVE-ASPECT MASONRY
   Editorial three-column masonry inspired by the supplied reference.
   Photographs retain their real attachment aspect ratio: no crop,
   no stretch, no fixed tile height.
   ========================================================= */
.portfolio-masonry.masonry{
  display:block !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  column-count:3 !important;
  column-width:auto !important;
  column-gap:10px !important;
  column-fill:balance !important;
}
.portfolio-masonry .masonry-item{
  display:inline-block !important;
  width:100% !important;
  height:auto !important;
  margin:0 0 10px !important;
  padding:0 !important;
  break-inside:avoid !important;
  page-break-inside:avoid !important;
  vertical-align:top !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
}
.portfolio-masonry .masonry-item .lightbox-link{
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
  line-height:0 !important;
}
.portfolio-masonry .masonry-item img{
  display:block !important;
  width:100% !important;
  max-width:100% !important;
  height:auto !important;
  max-height:none !important;
  min-height:0 !important;
  margin:0 !important;
  padding:0 !important;
  aspect-ratio:auto !important;
  object-fit:initial !important;
  object-position:initial !important;
}

/* Keep the native dimensions in the legacy taxonomy masonry too. */
.masonry:not(.term-grid) .masonry-item,
.masonry:not(.term-grid) .masonry-item .lightbox-link{
  height:auto !important;
  aspect-ratio:auto !important;
}
.masonry:not(.term-grid) .masonry-item img{
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:initial !important;
}

@media (max-width:1100px){
  .portfolio-masonry.masonry{
    column-count:2 !important;
    column-gap:8px !important;
  }
  .portfolio-masonry .masonry-item{margin-bottom:8px !important;}
}
@media (max-width:620px){
  .portfolio-masonry.masonry{
    column-count:1 !important;
    column-gap:0 !important;
  }
  .portfolio-masonry .masonry-item{margin-bottom:8px !important;}
}

/* =========================================================
   ABOUT PAGE — v5.2.1 RESPONSIVE EDITORIAL LAYOUT
   ========================================================= */
.about-page-hero h1{
  font-size:clamp(54px,6.4vw,108px)!important;
  line-height:.94!important;
  max-width:1100px;
  text-wrap:balance;
}
.about-page-hero>p:last-child{
  max-width:720px;
}

.about-page-grid{
  grid-template-columns:minmax(0,1.08fr) minmax(420px,.92fr)!important;
  align-items:stretch;
  overflow:hidden;
}
.about-page-portrait{
  min-width:0;
  background:#171a19;
}
.about-page-portrait img{
  display:block!important;
  width:100%!important;
  height:100%!important;
  min-height:620px;
  object-fit:cover!important;
  object-position:center center;
}
.about-page-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(54px,7vw,120px)!important;
}
.about-page-eyebrow{
  margin:0 0 20px;
  color:#555;
}
.about-page-copy h2{
  margin:0 0 42px;
  font-size:clamp(44px,4.2vw,72px)!important;
  line-height:1.04;
  max-width:700px;
  text-wrap:balance;
}
.about-page-copy>p:not(.eyebrow){
  max-width:650px;
  margin:0;
  font-size:clamp(13px,1vw,17px);
  line-height:1.55;
}
.about-page-actions{
  display:flex;
  flex-wrap:wrap;
  gap:22px 40px;
  margin-top:38px;
}
.editorial-link{
  display:inline-flex;
  align-items:center;
  gap:18px;
  padding:0 0 5px;
  border:0!important;
  border-bottom:1px solid transparent!important;
  background:transparent!important;
  color:inherit!important;
  font-size:11px;
  font-weight:600;
  letter-spacing:.18em;
  line-height:1.3;
  text-decoration:none;
  transition:border-color .2s ease,opacity .2s ease;
}
.editorial-link span{
  font-size:17px;
  line-height:1;
  transform:translateY(-1px);
}
.editorial-link:hover,
.editorial-link:focus-visible{
  border-bottom-color:currentColor!important;
  opacity:.82;
}

.about-gear{
  width:calc(100% - (2 * var(--page-x)));
  margin:0 var(--page-x) 110px;
  padding:clamp(60px,7vw,110px) 0;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:minmax(280px,.8fr) minmax(0,1.5fr);
  gap:clamp(50px,7vw,130px);
}
.about-gear-intro h2{
  margin:14px 0 24px;
  font-family:var(--serif);
  font-weight:400;
  font-size:clamp(44px,4.3vw,72px);
  line-height:1;
}
.about-gear-intro>p:last-child{
  max-width:450px;
  color:#aaa;
  line-height:1.65;
}
.about-gear-grid{
  display:grid;
  grid-template-columns:.75fr 1.35fr 1fr;
  gap:clamp(28px,4vw,70px);
  align-content:start;
  padding-top:28px;
}
.gear-group h3{
  margin:0 0 20px;
  font-size:10px;
  font-weight:600;
  letter-spacing:.2em;
}
.gear-group p{
  margin:0;
  color:#aaa;
  font-size:13px;
  line-height:1.8;
}

@media(max-width:900px){
  .about-page-hero h1{
    font-size:clamp(50px,10vw,76px)!important;
    max-width:760px;
  }
  .about-page-grid{
    grid-template-columns:1fr!important;
    overflow:visible;
  }
  .about-page-portrait{
    order:0;
  }
  .about-page-portrait img{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    object-fit:contain!important;
  }
  .about-page-copy{
    order:1;
    padding:clamp(50px,9vw,85px) var(--page-x)!important;
  }
  .about-page-copy h2{
    max-width:650px;
  }
  .about-gear{
    grid-template-columns:1fr;
    gap:35px;
  }
  .about-gear-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    padding-top:0;
  }
}

@media(max-width:520px){
  .about-page-hero{
    padding-bottom:64px;
  }
  .about-page-hero h1{
    font-size:clamp(48px,14vw,64px)!important;
    line-height:.98!important;
    max-width:100%;
    overflow-wrap:normal;
    word-break:normal;
  }
  .about-page-hero>p:last-child{
    font-size:15px;
    line-height:1.55;
  }
  .about-page-grid{
    width:calc(100% - (2 * var(--page-x)))!important;
    margin-left:var(--page-x)!important;
    margin-right:var(--page-x)!important;
  }
  .about-page-portrait img{
    aspect-ratio:auto!important;
    width:100%!important;
    height:auto!important;
  }
  .about-page-copy{
    padding:48px 24px 52px!important;
  }
  .about-page-copy h2{
    font-size:clamp(38px,11vw,52px)!important;
    line-height:1.04;
    margin-bottom:28px;
  }
  .about-page-copy>p:not(.eyebrow){
    font-size:13px;
  }
  .about-page-actions{
    display:grid;
    gap:22px;
    margin-top:34px;
  }
  .editorial-link{
    width:max-content;
    max-width:100%;
  }
  .about-gear{
    margin-bottom:70px;
    padding:65px 0 20px;
  }
  .about-gear-grid{
    grid-template-columns:1fr;
    gap:36px;
  }
  .gear-group p{
    font-size:13px;
  }
}

/* JKB Visuals 6.0.1 — consistent editorial CTAs and balanced gear columns */
@media (min-width: 1100px){
  .about-gear{grid-template-columns:minmax(0,1.15fr) minmax(0,2.35fr)!important;column-gap:72px!important}
  .about-gear-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:64px!important}
}
.view-all,
.about-text>a,
.editorial-link{
  position:relative;
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding-bottom:7px;
  text-decoration:none!important;
}
.view-all::after,
.about-text>a::after,
.editorial-link::after{
  content:"";
  position:absolute;
  left:0;bottom:0;
  width:100%;height:1px;
  background:currentColor;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s ease;
}
.view-all:hover::after,.view-all:focus-visible::after,
.about-text>a:hover::after,.about-text>a:focus-visible::after,
.editorial-link:hover::after,.editorial-link:focus-visible::after{transform:scaleX(1)}


/* =========================================================
   JKB VISUALS 6.1.4 — ORDERED MASONRY WITH 12PX GUTTERS
   Restores the normal-flow masonry appearance from v6.0.x.
   JavaScript creates equal-width column stacks and distributes source
   order round-robin: 1-2-3 across, then 4-5-6 beneath.
   ========================================================= */
.portfolio-masonry.masonry{
  display:grid !important;
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:12px !important;
  columns:auto !important;
  column-count:auto !important;
  column-width:auto !important;
  column-gap:0 !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
  align-items:start !important;
}
.portfolio-masonry .jkb-masonry-column{
  display:flex;
  flex-direction:column;
  gap:12px;
  min-width:0;
}
.portfolio-masonry .masonry-item{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  margin:0 !important;
  padding:0 !important;
  break-inside:avoid !important;
  aspect-ratio:auto !important;
  overflow:hidden !important;
}
.portfolio-masonry .masonry-item .lightbox-link,
.portfolio-masonry .masonry-item img{
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:100% !important;
  max-height:none !important;
  aspect-ratio:auto !important;
  object-fit:initial !important;
}
@media (max-width:1100px){
  .portfolio-masonry.masonry{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:12px !important;}
  .portfolio-masonry .jkb-masonry-column{gap:12px;}
}
@media (max-width:620px){
  .portfolio-masonry.masonry{grid-template-columns:1fr !important;gap:12px !important;}
  .portfolio-masonry .jkb-masonry-column{gap:12px;}
}

/* JKB Visuals 6.1.4 — grouped gear layout with equal columns */
@media (min-width:1100px){
  .about-gear{
    grid-template-columns:minmax(430px,520px) minmax(0,1fr)!important;
    column-gap:clamp(200px,12vw,280px)!important;
  }
  .about-gear-grid{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    gap:clamp(36px,2.6vw,48px)!important;
    width:min(100%,780px)!important;
    justify-self:start!important;
  }
  .gear-group{
    min-width:0;
    width:100%;
  }
}

/* =========================================================
   JKB VISUALS 6.1.5 — ROBUST MASONRY GUTTERS + FLUID GEAR GAP
   ========================================================= */

/* Guaranteed 12px visual gutters between masonry photographs.
   Each column contributes 6px at its sides; adjacent columns therefore
   create a true 12px black gutter. Vertical separation is explicit too. */
.portfolio-masonry.masonry{
  gap:0 !important;
  margin-left:-6px !important;
  margin-right:-6px !important;
  width:calc(100% + 12px) !important;
}
.portfolio-masonry .jkb-masonry-column{
  gap:0 !important;
  padding-left:6px !important;
  padding-right:6px !important;
  box-sizing:border-box !important;
}
.portfolio-masonry .jkb-masonry-column > .masonry-item + .masonry-item{
  margin-top:12px !important;
}

/* Fluid About gear layout: generous separation when room exists, but never
   at the expense of readable, equal-width gear columns. */
@media (min-width:901px){
  .about-gear{
    grid-template-columns:minmax(260px,.9fr) minmax(0,1.65fr) !important;
    column-gap:clamp(44px,6vw,120px) !important;
  }
  .about-gear-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:clamp(20px,2.4vw,44px) !important;
    width:100% !important;
    max-width:780px !important;
    justify-self:start !important;
  }
  .gear-group{
    min-width:0 !important;
    width:100% !important;
    overflow-wrap:normal;
    word-break:normal;
  }
}
@media (min-width:901px) and (max-width:1250px){
  .about-gear{
    grid-template-columns:minmax(240px,.85fr) minmax(0,1.75fr) !important;
    column-gap:clamp(32px,4vw,56px) !important;
  }
  .about-gear-grid{
    gap:clamp(16px,1.8vw,26px) !important;
  }
}


/* =========================================================
   JKB VISUALS 6.2.2 — UNIFIED HEADER LINK UNDERLINE
   Same interaction language as editorial CTAs and Portfolio filters.
   ========================================================= */
.desktop-nav a,
.mobile-nav a{
  position:relative;
  text-decoration:none!important;
}
.desktop-nav a::after,
.mobile-nav a::after{
  content:"";
  position:absolute;
  left:0;
  right:auto;
  bottom:-7px;
  width:100%;
  height:1px;
  background:currentColor;
  opacity:.9;
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .22s ease;
}
.desktop-nav a:hover::after,
.desktop-nav a:focus-visible::after,
.mobile-nav a:hover::after,
.mobile-nav a:focus-visible::after,
.desktop-nav .current-menu-item > a::after,
.desktop-nav .current_page_item > a::after,
.desktop-nav .current-menu-ancestor > a::after,
.mobile-nav .current-menu-item > a::after,
.mobile-nav .current_page_item > a::after,
.mobile-nav .current-menu-ancestor > a::after{
  transform:scaleX(1);
}
@media(max-width:900px){
  .mobile-nav a::after{bottom:-5px;}
}

/* =========================================================
   JKB VISUALS 6.2.4 — STICKY PORTFOLIO NAVIGATION
   Desktop: Places/Themes stay anchored beside long galleries.
   Mobile/tablet portrait: compact sticky selector above gallery.
   ========================================================= */
.portfolio-page,
.portfolio-browser{
  overflow:visible!important;
}
.portfolio-mobile-filterbar{display:none;}
@media (min-width:901px){
  .portfolio-sidebar{
    position:sticky!important;
    top:118px!important;
    align-self:start!important;
    max-height:calc(100vh - 142px);
    overflow-y:auto;
    overflow-x:visible;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,.18) transparent;
  }
  .portfolio-sidebar::-webkit-scrollbar{width:4px}
  .portfolio-sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18)}
}
@media (max-width:900px){
  .portfolio-browser{
    row-gap:18px!important;
  }
  .portfolio-sidebar{
    display:none!important;
  }
  .portfolio-mobile-filterbar{
    display:block;
    position:sticky;
    top:94px;
    z-index:80;
    background:rgba(8,10,10,.96);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-top:1px solid rgba(255,255,255,.08);
    border-bottom:1px solid rgba(255,255,255,.12);
    margin:0 calc(-1 * var(--page-x));
    padding:0 var(--page-x);
  }
  .portfolio-mobile-tabs{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .portfolio-mobile-toggle{
    appearance:none;
    border:0;
    background:transparent;
    color:#fff;
    min-width:0;
    padding:12px 0 11px;
    text-align:left;
    cursor:pointer;
  }
  .portfolio-mobile-toggle + .portfolio-mobile-toggle{
    padding-left:18px;
    border-left:1px solid rgba(255,255,255,.12);
  }
  .portfolio-mobile-toggle span{
    display:block;
    font-family:var(--sans);
    font-size:8px;
    font-weight:600;
    letter-spacing:.20em;
    margin-bottom:5px;
  }
  .portfolio-mobile-toggle strong{
    display:block;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-family:var(--serif);
    font-size:18px;
    line-height:1;
    font-weight:400;
  }
  .portfolio-mobile-toggle[aria-expanded="true"] strong:after{
    content:"  ↑";
    font-family:var(--sans);
    font-size:9px;
  }
  .portfolio-mobile-toggle[aria-expanded="false"] strong:after{
    content:"  ↓";
    font-family:var(--sans);
    font-size:9px;
  }
  .portfolio-mobile-panel{
    position:absolute;
    left:0;
    right:0;
    top:100%;
    background:#080a0a;
    border-bottom:1px solid rgba(255,255,255,.16);
    padding:13px var(--page-x) 16px;
    max-height:min(52vh,420px);
    overflow:auto;
    box-shadow:0 14px 28px rgba(0,0,0,.25);
  }
  .portfolio-mobile-panel[hidden]{display:none!important;}
  .portfolio-mobile-option{
    position:relative;
    display:block;
    width:max-content;
    max-width:100%;
    padding:8px 0 5px;
    color:#aaa;
    font-family:var(--sans);
    font-size:13px;
    line-height:1.2;
  }
  .portfolio-mobile-option:after{
    content:"";
    position:absolute;
    left:0;
    bottom:1px;
    width:0;
    height:1px;
    background:currentColor;
    transition:width .22s ease;
  }
  .portfolio-mobile-option:hover,
  .portfolio-mobile-option:focus-visible,
  .portfolio-mobile-option.is-active{color:#fff;}
  .portfolio-mobile-option:hover:after,
  .portfolio-mobile-option:focus-visible:after,
  .portfolio-mobile-option.is-active:after{width:100%;}
  .portfolio-mobile-option.is-active{
    font-family:var(--serif);
    font-size:18px;
  }
}
@media (max-width:520px){
  .portfolio-mobile-filterbar{top:86px;}
  .portfolio-mobile-toggle strong{font-size:16px;}
}


/* JKB Visuals 6.3 — incremental portfolio loading */
.portfolio-load-sentinel{display:flex;justify-content:center;align-items:center;padding:36px 0 10px;min-height:70px}
.portfolio-load-more-button{appearance:none;border:0;background:transparent;color:inherit;font:500 11px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;position:relative;padding:8px 0}
.portfolio-load-more-button::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .22s ease}
.portfolio-load-more-button:hover::after,.portfolio-load-more-button:focus-visible::after{transform:scaleX(1)}
.portfolio-load-sentinel.is-loading .portfolio-load-more-button{opacity:.5;pointer-events:none}

/* =========================================================
   JKB VISUALS 6.3.1 — PERMANENT IMAGE PROTECTION
   Discourages casual saving on desktop and touch devices.
   ========================================================= */
.home-card img,
.about-photo img,
.portfolio-masonry .masonry-item img,
.masonry:not(.term-grid) .masonry-item img,
.lightbox img,
.home-card a,
.portfolio-masonry .lightbox-link,
.masonry:not(.term-grid) .lightbox-link{
  -webkit-touch-callout:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
  -webkit-user-drag:none !important;
}

/* The clickable wrapper handles taps; the image itself never needs pointer input.
   This prevents mobile browsers from treating a long press as a direct image action. */
.home-card img,
.portfolio-masonry .masonry-item img,
.masonry:not(.term-grid) .masonry-item img,
.lightbox img{
  pointer-events:none !important;
}

.lightbox,
.lightbox .lightbox-link,
.lightbox img{
  -webkit-touch-callout:none !important;
  -webkit-user-select:none !important;
  user-select:none !important;
}