/* ══════════════════════════════════════
   BORNE HOME PAGE — page-specific styles
   Loaded only on front-page.php
   (auto-synced from borne-home.html)
══════════════════════════════════════ */

/* ══════════════════════════════════════
   NAV — home only: exclusion blend over hero gradient
   Transparent state uses mix-blend-mode so text stays
   readable on any colour behind it.
══════════════════════════════════════ */
nav:not(.sticky) .nav-logo,
nav:not(.sticky) .nav-ascii,
nav:not(.sticky) .nav-links,
nav:not(.sticky) .nav-toggle,
nav:not(.sticky) .nav-cta{
  color:var(--white);
  mix-blend-mode:exclusion;
}
nav.sticky .nav-logo,
nav.sticky .nav-ascii,
nav.sticky .nav-links,
nav.sticky .nav-toggle,
nav.sticky .nav-cta{
  color:var(--black);
  mix-blend-mode:normal;
}

/* ══════════════════════════════════════
   HERO — Sky gradient, exclusion blend on text
══════════════════════════════════════ */
.hero{
  position:relative;width:100%;height:100vh;min-height:600px;
  overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 var(--pad) 52px;
}
.hero-bg{
  position:absolute;inset:0;z-index:0;
  background:var(--sky);
  animation:bgPan 22s ease-in-out infinite alternate;
  transform-origin:center center;
}
@keyframes bgPan{
  0%  {transform:scale(1);}
  100%{transform:scale(1.06);}
}
.hero-content{
  position:relative;z-index:2;
  mix-blend-mode:exclusion;
}
.hero-name{
  font-family:var(--sans);
  font-size:clamp(26px,2vw,26px);
  font-weight:400;letter-spacing:-0.01em;
  color:var(--white);line-height:1.2;margin-bottom:4px;
}
.hero-tagline{
  font-family:var(--serif);font-style:italic;
  font-size:clamp(36px,5vw,70px);
  font-weight:400;letter-spacing:-0.02em;
  color:var(--white);line-height:1.1;
}

/* ══════════════════════════════════════
   SEVEN YEARS
══════════════════════════════════════ */

.sy-copyright{
  display:flex;
  justify-content:flex-start;
  padding:24px var(--pad) 0;
  font-size:26px;color:var(--black);
}
.sy-grid{
  display:grid;
  grid-template-columns:380px 1fr 330px;
  min-height:680px;
  padding:0;
}
.sy-col-running{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:0 32px 0 var(--pad);
}
.sy-running{font-size:26px;font-weight:400;color:var(--black);}
.sy-col-img{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:72px 0 64px;
}
.sy-label{font-size:26px;font-weight:400;color:var(--black);margin-bottom:20px !important;}
.sy-img{width:100%;aspect-ratio:1/1;overflow:hidden;}
.sy-img-inner{
  width:100%;height:100%;
  background:var(--sky);
  display:flex;align-items:center;justify-content:center;
}
.sy-col-meta{
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:72px var(--pad) 64px 48px;
}
.sy-year{font-size:26px;font-weight:400;color:#666;}
.sy-dynasty-rule{
  border:none;border-top:1px solid var(--rule);
  margin-bottom:20px;width:100%;
}
.sy-dynasty-link{
  display:flex;justify-content:space-between;align-items:center;
  font-size:26px;font-weight:400;color:var(--black);
  transition:opacity .2s;
}
.sy-dynasty-link:hover{opacity:.45;}

/* ══════════════════════════════════════
   FEATURED WORK
══════════════════════════════════════ */
.featured{padding:0 var(--pad);}
.feat-header{
  font-size:26px;color:var(--black);
  padding:40px 0 16px;
  border-bottom:1px solid var(--black);
}
.feat-row{
  display:block;border-bottom:1px solid var(--rule);
  position:relative;overflow:hidden;
}
.feat-row:first-child{border-top:1px solid var(--rule);}
.feat-row-inner{
  display:flex;align-items:center;justify-content:center;
  padding:2px 0;position:relative;z-index:2;
  min-height:clamp(70px,8.5vw,120px);
}
.feat-title{
  font-family:var(--serif);font-style:normal;
  font-size:clamp(42px,8.4vw,122px);
  font-weight:400;letter-spacing:-0.025em;line-height:1;
  color:var(--black);text-align:center;white-space:nowrap;
  display:flex;align-items:center;gap:16px;
  transition:color .28s,-webkit-text-stroke .28s;
  user-select:none;
}
.feat-row:hover .feat-title{color:transparent;-webkit-text-stroke:1px var(--black);}
.feat-inline-img{
  display:inline-flex;align-items:center;justify-content:center;
  width:clamp(42px,3.8vw,62px);height:clamp(28px,2.6vw,42px);
  flex-shrink:0;overflow:hidden;
  opacity:0;transform:scale(.86);
  transition:opacity .28s,transform .32s cubic-bezier(.16,1,.3,1);
  background:var(--sky);
}
.feat-row:hover .feat-inline-img{opacity:1;transform:scale(1);}
.feat-hover-img{
  position:absolute;
  width:clamp(180px,16vw,260px);height:clamp(118px,10.5vw,172px);
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(.86);
  opacity:0;pointer-events:none;z-index:10;overflow:hidden;
  transition:opacity .32s cubic-bezier(.16,1,.3,1),transform .38s cubic-bezier(.16,1,.3,1);
}
.feat-row:hover .feat-hover-img{opacity:1;transform:translate(-50%,-50%) scale(1);}
.feat-hover-bg{
  width:100%;height:100%;
  display:flex;align-items:center;justify-content:center;
  background:var(--sky);
  position:relative;overflow:hidden;
}
.feat-hover-bg>video,
.feat-hover-bg>img{width:100%;height:100%;object-fit:cover;display:block;}
.feat-hover-bg span{font-family:var(--sans);font-size:10px;color:rgba(255,255,255,.3);letter-spacing:.14em;text-transform:uppercase;}
.feat-allwork .feat-title{font-style:italic;}
.feat-allwork:hover .feat-title{color:transparent;-webkit-text-stroke:1px var(--black);}

/* ══════════════════════════════════════
   STATEMENT
══════════════════════════════════════ */
.statement{
  padding:72px var(--pad);
  display:flex;align-items:flex-start;gap:16px;
}
.unit-badge{
  flex-shrink:0;font-size:8px;font-weight:700;letter-spacing:.1em;
  border:1.5px solid var(--black);border-radius:999px;padding:3px 5px;line-height:1;margin-top:10px;
}
.stmt-text{
  font-family:var(--serif);
  font-size:clamp(22px,3.8vw,56px);
  font-weight:400;letter-spacing:-0.02em;line-height:1.18;
}

/* ══════════════════════════════════════
   ABOUT PREVIEW
══════════════════════════════════════ */
.about{
  padding:72px var(--pad);
  display:grid;grid-template-columns:1fr 1fr;gap:72px;
  align-items:start;
}
.about-img{width:100%;aspect-ratio:3/4;overflow:hidden;background:var(--sky);}
.about-img-cap{margin-top:12px;font-size:26px;color:var(--mid);font-style:italic;line-height:1.5;}
.about-img-cap span{display:block;text-align:right;}
.about-body{font-size:17px;line-height:1.65;color:#555;margin-bottom:32px;}
.about-links{border-top:1px solid var(--rule);}
.about-link{
  display:flex;justify-content:space-between;align-items:center;
  font-size:17px;padding:14px 0;
  border-bottom:1px solid var(--rule);transition:opacity .2s;
}
.about-link:hover{opacity:.45;}

/* ══════════════════════════════════════
   EXTRAS
══════════════════════════════════════ */
.extras-wrap{
  padding:0 var(--pad);
}
.extras-headline{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:56px 0 20px;
}
.extras-hl-title{
  font-family:var(--serif);
  font-size:clamp(56px,7vw,100px);
  font-weight:400;letter-spacing:-0.03em;line-height:1;color:var(--black);
}
.extras-hl-count{
  font-family:var(--serif);
  font-size:clamp(56px,7vw,100px);
  font-weight:400;letter-spacing:-0.03em;line-height:1;color:var(--mid);
}
.extras-divider{border:none;border-top:1px solid var(--black);margin:0;}
.extras-row{
  display:grid;grid-template-columns:1fr 1fr;
  border-bottom:1px solid var(--rule);
}
.extras-cat-cell{
  font-size:17px;font-weight:400;color:var(--mid);
  padding:16px 0;align-self:start;
}
.extras-items-cell{display:flex;flex-direction:column;}
.extras-item{
  display:block;font-size:17px;font-weight:400;color:var(--black);
  padding:14px 0;border-bottom:1px solid var(--rule);
  transition:opacity .2s;line-height:1.4;
}
.extras-item:last-child{border-bottom:none;}
.extras-item:hover{opacity:.45;}
.extras-store-row{display:grid;grid-template-columns:1fr 1fr;}
.extras-store-cat{font-size:17px;font-weight:400;color:var(--mid);padding:16px 0;align-self:center;}
.extras-store-cta{
  display:block;font-size:17px;font-weight:400;color:var(--black);
  padding:14px 0;transition:opacity .2s;
}
.extras-store-cta:hover{opacity:.45;}

/* ══════════════════════════════════════
   STORE PRODUCTS
══════════════════════════════════════ */
.store-products{
  display:grid;grid-template-columns:1fr 1fr;gap:0;
  border-bottom:1px solid var(--rule);
}
/* Divider as an overlay (not a border) so it doesn't shrink the first
   column by 1px — keeps both store images exactly equal height. */
.store-item{position:relative;}
.store-item:not(:last-child)::after{
  content:"";position:absolute;top:0;right:0;
  width:1px;height:100%;background:var(--rule);z-index:1;
}
.store-img{
  width:100%;aspect-ratio:5/6;background:var(--sky);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  transition:opacity .25s;
}
.store-item:hover .store-img{opacity:.88;}
.store-img span{font-size:11px;color:rgba(0,0,0,.15);letter-spacing:.1em;text-transform:uppercase;font-family:var(--sans);}
.store-meta{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:16px var(--pad) 0;
}
.store-name{font-size:17px;font-weight:400;color:var(--black);letter-spacing:-0.01em;}
.store-buy{font-size:17px;font-weight:400;color:var(--black);white-space:nowrap;transition:opacity .2s;}
.store-buy:hover{opacity:.45;}
.store-price{font-size:17px;color:var(--mid);padding:4px var(--pad) 24px;}

/* ══════════════════════════════════════
   RESPONSIVE — home-specific
══════════════════════════════════════ */
@media(max-width:1100px){
  .sy-grid{grid-template-columns:280px 1fr 280px;}
}
@media(max-width:900px){
  :root{--pad:20px;} /* home uses 20px at this breakpoint */
  .sy-grid{display:flex;flex-direction:column;padding:0 var(--pad) 48px;min-height:auto;}
  .sy-col-running{justify-content:flex-start;padding:20px 0 8px var(--pad);}
  .sy-col-img{padding:0 var(--pad);}
  .sy-col-meta{padding:20px var(--pad) 0;flex-direction:row;align-items:flex-end;justify-content:space-between;gap:32px;}
  /* "~20 years" label aligned to the right edge of the studio image (mobile only) */
  .sy-col-img .sy-label{text-align:right;}
  .sy-dynasty{flex-shrink:0;}
  .sy-dynasty-rule{width:160px;}
  .extras-row{grid-template-columns:1fr;}
  .extras-cat-cell{border-bottom:1px solid var(--rule);padding-bottom:12px;}
  .extras-item{padding-left:0;}
  .extras-store-row{grid-template-columns:1fr;}
  .extras-store-cat{border-bottom:1px solid var(--rule);padding-bottom:12px;}
  .about{grid-template-columns:1fr;gap:36px;}
}
@media(max-width:600px){
  .hero{padding:0 16px 28px;min-height:520px;}
  /* Studio meta: stack 'experience.' above the Contact us link with clear space */
  .sy-col-meta{flex-direction:column;align-items:flex-start;gap:28px;}
  .sy-dynasty{width:100%;}
  .sy-dynasty-rule{width:100%;}
  .sy-dynasty-link{font-size:18px;}
  .feat-title{font-size:clamp(28px,10vw,52px);white-space:normal;text-align:center;flex-wrap:wrap;justify-content:center;gap:8px;}
  .feat-hover-img{display:none;}
  .feat-row-inner{min-height:clamp(52px,13vw,76px);}
  .extras-hl-title,.extras-hl-count{font-size:clamp(40px,11vw,64px);}
  .store-products{grid-template-columns:1fr;}
  .store-item{border-bottom:1px solid var(--rule);}
  .store-item:not(:last-child)::after{display:none;} /* vertical divider off when stacked */
  .about{padding:40px 16px;}
  .statement{padding:48px 16px;}
}

/* ══════════════════════════════════════
   ACF MEDIA HELPERS — uploaded images & videos
   fill their blocks identically to placeholders
══════════════════════════════════════ */
.sy-img>img,.sy-img>video,
.about-img>img,.about-img>video,
.store-img>img,.store-img>video,
.trip-img>img,.trip-img>video,
.value-photo>img,.value-photo>video,
.hero-image>img,.hero-image>video,
.media-full>img,.media-full>video,
.media-item>img,.media-item>video,
.media-split-left>img,.media-split-left>video,
.work-next-image>img,.work-next-image>video{
  width:100%;height:100%;object-fit:cover;display:block;
}
.media-full,.hero-image,.value-photo,.trip-img,
.media-item,.media-split-left,.work-next-image,
.store-img,.sy-img,.about-img{position:relative;}
.borne-embed{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  min-width:100%;min-height:100%;width:auto;height:auto;
  aspect-ratio:16/9;border:0;pointer-events:none;
}

/* ── Hero background media (image / video / embed) ── */
.hero .hero-bg{position:absolute;inset:0;overflow:hidden;}
.hero .hero-bg>img,
.hero .hero-bg>video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;z-index:0;
}
.hero .hero-bg>.borne-embed{
  top:50%;left:50%;
  width:max(100%,177.78vh);height:max(100%,56.25vw);
  transform:translate(-50%,-50%);
}
.hero.has-media .hero-bg{animation:none;}
/* Keep hero text readable over photos/video */
.hero.has-media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.35) 100%);
  pointer-events:none;
}
/* Marquee glyph: force text (not emoji) presentation */
.marquee-sep{font-variant-emoji:text;}