/* Javan Studios / Honold — V10
   Deliberately lighter: conversation starters, not pre-designed answers. */

/* Explorer framing */
.explorer-title{max-width:760px}
.concept-canvas{padding-top:66px}
.application-stage{min-height:690px}
.explorer-note{max-width:760px;font-size:15px;opacity:.7}

/* Brand cues: one visual, a few cues, no pseudo-finished identity system */
.brand-cues-board{
  display:grid;
  grid-template-columns:1.15fr .95fr;
  grid-template-rows:auto auto;
  min-height:680px;
  border:1px solid color-mix(in srgb,var(--c-fg) 11%,transparent);
  background:var(--c-bg);
  color:var(--c-fg);
  overflow:hidden;
}
.brand-cues-copy{padding:clamp(42px,5vw,78px);display:flex;flex-direction:column;justify-content:center;border-right:1px solid color-mix(in srgb,var(--c-fg) 10%,transparent)}
.brand-cues-copy .board-kicker{font-size:11px;letter-spacing:.13em;opacity:.48}
.brand-cues-copy .brandworld-logo{width:104px;margin:46px 0 68px;filter:var(--logo-filter)}
.brand-cues-copy h4{font-size:clamp(48px,4.8vw,82px);line-height:.92;letter-spacing:-.06em;font-weight:500;margin:0 0 24px;max-width:620px}
.brand-cues-copy p{font-size:16px;line-height:1.55;opacity:.64;max-width:520px}
.brand-cues-copy small{margin-top:38px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:.44}
.brand-cues-visual{position:relative;display:grid;place-items:center;min-height:500px;background:color-mix(in srgb,var(--c-bg) 90%,var(--c-accent) 10%);overflow:hidden}
.brand-cues-visual img{width:58%;height:62%;object-fit:contain;position:relative;z-index:2;filter:drop-shadow(0 28px 32px rgba(0,0,0,.13));transition:.55s var(--ease-silk)}
.brand-cues-visual span{position:absolute;left:5%;top:6%;font-size:clamp(62px,7.4vw,128px);line-height:.8;letter-spacing:-.07em;font-weight:600;color:color-mix(in srgb,var(--c-fg) 9%,transparent);text-transform:uppercase;white-space:nowrap}
.brand-cues-type{padding:26px 34px;border-top:1px solid color-mix(in srgb,var(--c-fg) 10%,transparent);border-right:1px solid color-mix(in srgb,var(--c-fg) 10%,transparent);display:grid;grid-template-columns:90px 1fr;align-items:center;column-gap:20px}
.brand-cues-type>span{font-size:10px;letter-spacing:.12em;opacity:.42}
.brand-cues-type strong{font-size:25px;font-weight:500;letter-spacing:-.04em}
.brand-cues-type small{grid-column:2;font-size:12px;opacity:.52;margin-top:5px}
.brand-cues-palette{display:flex;min-height:112px;border-top:1px solid color-mix(in srgb,var(--c-fg) 10%,transparent)}
.brand-cues-palette span{flex:1}

/* Keep each territory subtle: tone changes, not full identities */
#conceptCanvas[data-concept="heritage"] .brand-cues-visual{background:radial-gradient(circle at 62% 42%,#563427 0%,#24140f 68%)}
#conceptCanvas[data-concept="heritage"] .brand-cues-copy h4{font-family:Georgia,"Times New Roman",serif;font-style:italic;font-weight:400;letter-spacing:-.045em}
#conceptCanvas[data-concept="product"] .brand-cues-visual{background:#fff}
#conceptCanvas[data-concept="product"] .brand-cues-visual img{width:52%;height:56%;filter:drop-shadow(0 18px 20px rgba(0,0,0,.08))}
#conceptCanvas[data-concept="editorial"] .brand-cues-visual{background:#2c1b15;color:#f2ebe2}
#conceptCanvas[data-concept="editorial"] .brand-cues-copy h4{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em}

/* Digital: intentionally one directional sketch */
.web-experience{min-height:690px}
.web-hero-experience{min-height:500px}
.web-copy-panel{padding:clamp(46px,5vw,78px)}
.web-copy-panel h4{font-size:clamp(48px,4.8vw,82px)}
.web-visual-panel>img{width:58%;height:62%}
.web-orbit{display:none}
.web-editorial-strip article{min-height:102px}
#conceptCanvas[data-concept="heritage"] .web-copy-panel h4,#conceptCanvas[data-concept="editorial"] .web-copy-panel h4{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em}
#conceptCanvas[data-concept="heritage"] .web-visual-panel{background:radial-gradient(circle at 65% 38%,#573526,#21130e 70%)}
#conceptCanvas[data-concept="product"] .web-visual-panel{background:#fff}
#conceptCanvas[data-concept="product"] .web-visual-panel>img{width:50%;height:55%;filter:drop-shadow(0 18px 20px rgba(0,0,0,.08))}
#conceptCanvas[data-concept="editorial"] .web-visual-panel{background:#2c1b15;color:#eee7df}

/* Social: real 3x3 proportions, but only a light cue */
.concept-social-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;background:transparent;padding:0;border-radius:0}
.concept-social-grid .tile{aspect-ratio:1;border-radius:0;min-width:0;overflow:hidden}
.concept-social-grid .tile.image img{width:82%;height:82%;object-fit:contain;padding:8%;filter:drop-shadow(0 8px 10px rgba(0,0,0,.07))}
.concept-social-grid .tile.concept-copy{padding:8px;font-size:9px;line-height:1.2;letter-spacing:.08em;text-transform:uppercase}
.monogram-tile{font-size:34px!important;font-weight:500;letter-spacing:-.06em}

/* Communication: message territory, not a finished campaign suite */
.communication-thought{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:12px;min-height:690px;color:var(--c-fg)}
.communication-main{position:relative;overflow:hidden;background:var(--c-bg);border:1px solid color-mix(in srgb,var(--c-fg) 11%,transparent);padding:clamp(34px,4vw,62px);isolation:isolate}
.communication-kicker{display:flex;justify-content:space-between;gap:24px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;opacity:.48;position:relative;z-index:3}
.communication-word{font-size:clamp(64px,8vw,142px);line-height:.8;letter-spacing:-.075em;font-weight:600;margin-top:clamp(65px,8vw,130px);max-width:850px;position:relative;z-index:1}
.communication-copy{position:relative;z-index:3;max-width:470px;margin-top:42px}
.communication-copy h4{font-size:clamp(34px,3.1vw,54px);line-height:.95;letter-spacing:-.055em;font-weight:500;margin:0 0 18px}
.communication-copy p{font-size:15px;line-height:1.52;opacity:.62}
.communication-main>img{position:absolute;right:3%;bottom:7%;width:40%;height:44%;object-fit:contain;z-index:2;filter:drop-shadow(0 25px 30px rgba(0,0,0,.13));transition:.55s var(--ease-silk)}
.communication-foot{position:absolute;left:clamp(34px,4vw,62px);right:clamp(34px,4vw,62px);bottom:24px;display:flex;justify-content:space-between;gap:20px;font-size:9px;letter-spacing:.11em;text-transform:uppercase;opacity:.45;z-index:4}
.communication-touchpoints{border:1px solid color-mix(in srgb,var(--c-fg) 11%,transparent);background:color-mix(in srgb,var(--c-bg) 95%,var(--c-fg) 5%);padding:clamp(28px,3vw,44px);display:flex;flex-direction:column;justify-content:center}
.communication-touchpoints>span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;opacity:.42;margin-bottom:30px}
.communication-touchpoints>div{padding:22px 0;border-top:1px solid color-mix(in srgb,var(--c-fg) 11%,transparent);display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.communication-touchpoints b{font-size:22px;font-weight:500;letter-spacing:-.035em}
.communication-touchpoints small{font-size:11px;opacity:.5;text-align:right}
#conceptCanvas[data-concept="heritage"] .communication-word,#conceptCanvas[data-concept="heritage"] .communication-copy h4,#conceptCanvas[data-concept="editorial"] .communication-word,#conceptCanvas[data-concept="editorial"] .communication-copy h4{font-family:Georgia,"Times New Roman",serif;font-weight:400;letter-spacing:-.045em}
#conceptCanvas[data-concept="heritage"] .communication-main{background:radial-gradient(circle at 82% 70%,#553326,#21130e 70%)}
#conceptCanvas[data-concept="product"] .communication-main{background:#f7f5f0}
#conceptCanvas[data-concept="editorial"] .communication-main{background:#2c1b15;color:#eee7df}

/* Make the disclaimer visible enough to prevent overclaiming */
.palette-row{margin-top:16px;height:6px;opacity:.55}

@media(max-width:1000px){
  .brand-cues-board{grid-template-columns:1fr}
  .brand-cues-copy{border-right:0;border-bottom:1px solid color-mix(in srgb,var(--c-fg) 10%,transparent)}
  .brand-cues-visual{min-height:440px}
  .brand-cues-type{border-right:0}
  .communication-thought{grid-template-columns:1fr}
  .communication-main{min-height:620px}
  .communication-touchpoints{min-height:250px}
}

@media(max-width:650px){
  .application-stage{min-height:560px}
  .brand-cues-copy{padding:38px 24px}
  .brand-cues-copy .brandworld-logo{margin:34px 0 48px;width:88px}
  .brand-cues-copy h4{font-size:44px}
  .brand-cues-visual{min-height:380px}
  .brand-cues-visual img{width:66%;height:66%}
  .brand-cues-visual span{font-size:62px}
  .brand-cues-type{grid-template-columns:1fr;padding:22px 24px}
  .brand-cues-type strong,.brand-cues-type small{grid-column:auto}.brand-cues-type strong{margin-top:12px}
  .brand-cues-palette{min-height:74px}
  .web-copy-panel h4{font-size:46px}
  .communication-main{min-height:560px;padding:34px 24px}
  .communication-word{font-size:58px;margin-top:70px}
  .communication-copy{max-width:82%}
  .communication-copy h4{font-size:36px}
  .communication-main>img{width:50%;height:36%;right:-5%;bottom:10%}
  .communication-foot{left:24px;right:24px;bottom:18px;flex-direction:column;gap:4px}
  .communication-touchpoints{padding:28px 24px}
}