/* Javan Studios / Honold — V8 explorer refinement
   Equal Instagram grid, art-directed brand worlds and campaign systems. */

/* ---------- Brand world: show the system, not just a mockup ---------- */
.brandworld-board{
  height:740px;
  display:grid;
  grid-template-columns:1.05fr .9fr .72fr;
  grid-template-rows:1.25fr .75fr;
  gap:10px;
  color:var(--c-fg);
}
.brandworld-board>div{position:relative;overflow:hidden;border:1px solid color-mix(in srgb,var(--c-fg) 12%,transparent);background:color-mix(in srgb,var(--c-bg) 94%,var(--c-fg) 6%)}
.brandworld-intro{grid-row:1 / 3;padding:clamp(34px,4vw,70px);display:flex;flex-direction:column;align-items:flex-start}
.brandworld-logo{width:clamp(92px,9vw,150px);margin:clamp(42px,5vw,84px) 0 clamp(54px,6vw,104px);filter:var(--logo-filter)}
.brandworld-intro h4{font-size:clamp(38px,4vw,70px);line-height:.94;letter-spacing:-.06em;font-weight:500;max-width:560px;margin:0}
.brandworld-intro p{font-size:16px;line-height:1.55;opacity:.64;max-width:430px;margin:20px 0 0}
.brandworld-hero{display:grid;place-items:center;background:color-mix(in srgb,var(--c-bg) 88%,var(--c-accent) 12%)!important}
.brandworld-hero:after{content:"";position:absolute;width:68%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--c-accent) 20%,transparent),transparent 70%);filter:blur(8px)}
.brandworld-hero img{position:relative;z-index:2;width:70%;height:72%;object-fit:contain;filter:drop-shadow(0 34px 36px rgba(0,0,0,.16));transition:.6s var(--ease-silk)}
.brandworld-label{position:absolute;left:22px;top:20px;z-index:3;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.58}
.brandworld-type{padding:24px 26px;display:flex;flex-direction:column;justify-content:space-between}
.brandworld-type>span,.brandworld-system>span{font-size:10px;letter-spacing:.16em;opacity:.45}
.brandworld-type strong{font-size:clamp(27px,2.1vw,40px);line-height:.98;letter-spacing:-.05em;font-weight:500}
.brandworld-type small{font-size:11px;opacity:.5}
.brandworld-system{padding:24px 26px;display:flex;flex-direction:column;justify-content:space-between;background:var(--c-fg)!important;color:var(--c-bg)}
.brandworld-grid-demo{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;width:100%;height:52px;margin:12px 0}
.brandworld-grid-demo i{border:1px solid currentColor;opacity:.28}
.brandworld-system b{font-size:clamp(22px,1.8vw,32px);letter-spacing:-.04em;font-weight:500}
.brandworld-product{display:grid;place-items:center;background:color-mix(in srgb,var(--c-bg) 90%,var(--c-fg) 10%)!important}
.brandworld-product img{width:76%;height:78%;object-fit:contain;filter:drop-shadow(0 26px 28px rgba(0,0,0,.13));transition:.6s var(--ease-silk)}
.brandworld-palette{display:flex!important;align-items:stretch!important;position:absolute!important;left:22px;right:22px;bottom:18px;height:8px!important;z-index:4;border:0!important;background:transparent!important}
.brandworld-palette span{flex:1;border:0!important}

/* ---------- Social: true 3 × 3 Instagram rhythm ---------- */
.concept-social-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:1fr;
  gap:2px!important;
  padding:0!important;
  border-radius:0!important;
  background:transparent!important;
}
.concept-social-grid .tile{
  grid-column:auto!important;
  aspect-ratio:1 / 1!important;
  min-width:0;
  border-radius:0!important;
  overflow:hidden;
  display:grid;
  place-items:center;
}
.concept-social-grid .tile.image{background:color-mix(in srgb,var(--c-bg) 88%,var(--c-fg) 12%)}
.concept-social-grid .tile.image img{width:100%!important;height:100%!important;object-fit:contain!important;padding:9%}
.concept-social-grid .tile.concept-copy{padding:9%;font-size:9px;line-height:1.25;letter-spacing:.09em;text-transform:uppercase;text-align:left;align-content:end;justify-items:start}
.concept-social-grid .monogram-tile{font-size:clamp(22px,2vw,34px);font-weight:500;font-style:italic}

/* ---------- Campaign: campaign system rather than a decorated product card ---------- */
.campaign-system{
  min-height:740px;
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr);
  gap:12px;
  color:var(--c-fg);
}
.campaign-poster,.campaign-side>div{border:1px solid color-mix(in srgb,var(--c-fg) 12%,transparent);overflow:hidden}
.campaign-poster-primary{
  position:relative;
  min-height:740px;
  background:var(--c-bg);
  isolation:isolate;
}
.campaign-poster-primary:before{content:"";position:absolute;inset:0;background:linear-gradient(145deg,color-mix(in srgb,var(--c-accent) 16%,transparent),transparent 44%);z-index:0}
.campaign-kicker{position:absolute;left:5.4%;top:5.4%;font-size:11px;letter-spacing:.15em;text-transform:uppercase;z-index:3;opacity:.62}
.campaign-word{position:absolute;left:4.5%;top:16%;right:4%;font-size:clamp(58px,7.4vw,132px);line-height:.8;letter-spacing:-.075em;font-weight:500;text-transform:uppercase;z-index:1;overflow-wrap:anywhere}
.campaign-poster-primary>img{position:absolute;z-index:2;width:61%;height:55%;right:3%;bottom:10%;object-fit:contain;filter:drop-shadow(0 38px 42px rgba(0,0,0,.17));transition:.6s var(--ease-silk)}
.campaign-poster-footer{position:absolute;left:5.4%;right:5.4%;bottom:4.4%;display:flex;justify-content:space-between;gap:20px;font-size:10px;letter-spacing:.12em;z-index:3;opacity:.55}
.campaign-side{display:grid;grid-template-rows:1fr .78fr;gap:12px}
.campaign-copy{position:relative!important;left:auto!important;top:auto!important;width:auto!important;padding:clamp(30px,3.2vw,54px);background:color-mix(in srgb,var(--c-bg) 94%,var(--c-fg) 6%)}
.campaign-copy h4{font-size:clamp(38px,3.5vw,62px);line-height:.92;margin:38px 0 20px}
.campaign-copy p{font-size:16px;line-height:1.55;max-width:390px}
.campaign-frame{position:relative;padding:26px;background:var(--c-fg);color:var(--c-bg);display:flex;flex-direction:column;justify-content:space-between}
.campaign-frame>span{font-size:12px;line-height:1.3;max-width:210px;opacity:.72}
.campaign-frame-mark{width:94px;height:94px;border-radius:50%;display:grid;place-items:center;background:var(--c-bg)}
.campaign-frame-mark img{width:62px;filter:var(--logo-filter)}
.campaign-frame-lines{display:grid;grid-template-columns:1.8fr 1fr .6fr;gap:5px;height:8px}
.campaign-frame-lines i{background:var(--c-bg);opacity:.6}

/* Reduce the feeling of reusing current Honold campaign imagery. */
.moments-stack .moment-card:nth-child(1) .moment-media>img{filter:saturate(.82) contrast(1.03);transform:translate3d(0,var(--media-y,0px),0) scale(1.09)}
.moments-stack .moment-card:nth-child(2) .moment-media>img{filter:saturate(.78) contrast(1.02);transform:translate3d(0,var(--media-y,0px),0) scale(1.1)}
.season-photo{filter:saturate(.83) contrast(1.035)!important}
.season-object{filter:drop-shadow(0 32px 42px rgba(0,0,0,.18)) saturate(.95)}

@media(max-width:1000px){
  .brandworld-board{height:auto;grid-template-columns:1fr 1fr;grid-template-rows:auto 360px 240px}
  .brandworld-intro{grid-row:auto;grid-column:1 / 3;min-height:480px}
  .brandworld-hero{grid-column:1 / 2}.brandworld-product{grid-column:2 / 3}
  .brandworld-type,.brandworld-system{min-height:230px}
  .campaign-system{grid-template-columns:1fr;min-height:0}
  .campaign-poster-primary{min-height:680px}
  .campaign-side{grid-template-columns:1fr 1fr;grid-template-rows:auto}
}

@media(max-width:650px){
  .brandworld-board{grid-template-columns:1fr;grid-template-rows:auto}
  .brandworld-intro{grid-column:auto;min-height:480px;padding:34px 26px}
  .brandworld-hero,.brandworld-product{grid-column:auto;min-height:330px}
  .brandworld-type,.brandworld-system{min-height:190px}
  .brandworld-logo{margin:40px 0 56px}
  .brandworld-intro h4{font-size:42px}
  .campaign-poster-primary{min-height:560px}
  .campaign-word{font-size:clamp(52px,17vw,78px);top:17%}
  .campaign-poster-primary>img{width:80%;height:49%;right:-4%;bottom:10%}
  .campaign-side{grid-template-columns:1fr}
  .campaign-copy{padding:34px 26px}
  .campaign-copy h4{font-size:42px}
  .campaign-frame{min-height:250px}
  .concept-social-grid .tile.concept-copy{font-size:8px}
}

/* ---------- Editorial product staging: fewer legacy campaign images ---------- */
.concept-product-stage{display:grid;place-items:center;isolation:isolate;overflow:hidden}
.summer-concept-stage{background:linear-gradient(135deg,#d9eff5 0%,#9fd8e8 100%)}
.concept-stage-word{position:absolute;left:5%;bottom:5%;font-size:clamp(74px,11vw,190px);line-height:.75;letter-spacing:-.08em;font-weight:600;color:rgba(255,255,255,.54);z-index:0}
.concept-stage-product{position:relative;z-index:2;width:min(54%,620px);height:78%;object-fit:contain;filter:drop-shadow(0 45px 50px rgba(65,49,36,.20));transform:translate3d(0,var(--media-y,0px),0) rotate(7deg)}

/* ---------- Seasonal art direction: product-led, not existing campaign-led ---------- */
.season-art-stage{isolation:isolate;background:#ddd}
.spring-frame.season-art-stage{background:linear-gradient(145deg,#eadcf0 0%,#d9c9e7 46%,#f1e7f3 100%)}
.summer-frame.season-art-stage{background:linear-gradient(145deg,#c8eaf3 0%,#8fd3e6 52%,#e2f3f8 100%)}
.autumn-frame.season-art-stage{background:linear-gradient(145deg,#859879 0%,#66795f 48%,#bcc4a8 100%)}
.winter-frame.season-art-stage{background:linear-gradient(145deg,#173d36 0%,#0a2621 55%,#315a4e 100%)}
.season-art-stage:after{background:linear-gradient(to top,rgba(0,0,0,.14),transparent 32%)!important}
.season-art-stage:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 23%,rgba(255,255,255,.32),transparent 30%);z-index:0}
.season-ghost{position:absolute;left:4%;top:5%;z-index:0;font-size:clamp(74px,9vw,160px);line-height:.82;letter-spacing:-.075em;font-weight:600;color:rgba(255,255,255,.30);text-transform:uppercase;white-space:nowrap}
.season-orbit{position:absolute;border:1px solid rgba(255,255,255,.28);border-radius:50%;z-index:0}
.season-orbit.orbit-one{width:44%;aspect-ratio:1;right:8%;top:10%}
.season-orbit.orbit-two{width:24%;aspect-ratio:1;left:13%;bottom:8%}
.season-art-stage .season-object{z-index:3;filter:drop-shadow(0 42px 48px rgba(0,0,0,.18));transform:translate3d(0,var(--media-y,0px),0)}
.season-secondary{position:absolute;z-index:2;object-fit:contain;filter:drop-shadow(0 28px 32px rgba(0,0,0,.14));transform:translate3d(0,var(--media-y,0px),0)}
.season-art-stage .season-object-spring{width:48%;right:4%;bottom:2%}
.season-secondary-spring{width:29%;left:7%;bottom:7%;transform:translate3d(0,var(--media-y,0px),0) rotate(-8deg)}
.season-art-stage .season-object-summer{width:37%;right:10%;bottom:0;transform:translate3d(0,var(--media-y,0px),0) rotate(8deg)}
.season-secondary-summer{width:30%;left:14%;bottom:4%;transform:translate3d(0,var(--media-y,0px),0) rotate(-10deg)}
.season-art-stage .season-object-autumn{width:42%;right:6%;bottom:1%}
.season-secondary-autumn{width:25%;left:13%;bottom:11%}
.season-art-stage .season-object-winter{width:45%;right:4%;bottom:1%}
.season-secondary-winter{width:24%;left:12%;bottom:12%}

/* Concept-specific type behavior makes each brand world feel genuinely distinct. */
#conceptCanvas[data-concept="maison"] .brandworld-type strong,
#conceptCanvas[data-concept="maison"] .campaign-word{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.055em}
#conceptCanvas[data-concept="atelier"] .brandworld-type strong,
#conceptCanvas[data-concept="atelier"] .campaign-word{text-transform:uppercase;font-weight:600;letter-spacing:-.06em}
#conceptCanvas[data-concept="season"] .brandworld-type strong{font-weight:600}
#conceptCanvas[data-concept="editorial"] .brandworld-type strong,
#conceptCanvas[data-concept="editorial"] .campaign-word{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em}

@media(max-width:650px){
  .concept-stage-word{font-size:72px}
  .concept-stage-product{width:72%;height:72%}
  .season-ghost{font-size:58px;left:5%;top:6%}
  .season-art-stage .season-object-spring{width:62%;right:-5%}
  .season-secondary-spring{width:42%;left:-3%}
  .season-art-stage .season-object-summer{width:49%;right:3%}
  .season-secondary-summer{width:41%;left:2%}
  .season-art-stage .season-object-autumn{width:56%;right:-2%}
  .season-secondary-autumn{width:36%;left:5%}
  .season-art-stage .season-object-winter{width:60%;right:-5%}
  .season-secondary-winter{width:34%;left:4%}
}