/* V14 — hierarchy, palette and social-density refinement */
:root{
  --cream:#f2eee7;
  --ink:#181613;
}

/* Global hierarchy: calm, editorial, legible */
.section-cream{background:#f2eee7}
.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:500;opacity:.62;margin-bottom:24px}
.explorer-head{padding-top:132px;padding-bottom:54px;align-items:end}
.explorer-title{font-size:clamp(48px,5vw,88px);line-height:.94;letter-spacing:-.058em;max-width:900px}
.concept-tabs{gap:8px;max-width:680px}
.concept-tab,.application-tab{
  padding:11px 16px;
  font-size:12px;
  line-height:1;
  border-color:rgba(29,25,21,.18);
  transition:background .35s var(--ease-silk),color .35s var(--ease-silk),border-color .35s var(--ease-silk),transform .35s var(--ease-silk);
}
.concept-tab:hover,.application-tab:hover{transform:translateY(-1px)}
.concept-tab.active{background:#201b17;color:#f7f3ed;border-color:#201b17}

.concept-canvas{padding-top:72px;padding-bottom:60px}
.concept-meta{align-items:end}
.concept-count{font-size:11px;letter-spacing:.12em;opacity:.56;margin-bottom:16px}
.concept-meta h3{font-size:clamp(58px,6vw,104px);line-height:.9;letter-spacing:-.065em}
.concept-meta p:not(.concept-count){font-size:17px;line-height:1.5;max-width:660px;opacity:.7;margin-top:17px}
.favorite-btn{font-size:12px;padding:12px 16px;opacity:.8}
.application-tabs{margin-top:56px;margin-bottom:26px}
.application-tab{border-color:color-mix(in srgb,var(--c-fg) 22%,transparent);opacity:.82}
.application-tab.active{opacity:1}

/* Brand world: more composed and less visually noisy */
.brand-cues-board{border-color:color-mix(in srgb,var(--c-fg) 12%,transparent)}
.brand-cues-copy{padding:clamp(34px,4vw,62px)}
.board-kicker{font-size:11px;letter-spacing:.12em;opacity:.58}
.brand-cues-copy h4{font-size:clamp(40px,4.2vw,72px);line-height:.94;letter-spacing:-.055em}
.brand-cues-copy p{font-size:16px;line-height:1.55;opacity:.68}
.brand-cues-type span{font-size:10px;letter-spacing:.14em;opacity:.52}
.brand-cues-type strong{letter-spacing:-.035em}
.brand-cues-palette{gap:5px}
.brand-cues-palette span{border-radius:999px}

/* Website direction */
.web-topline{font-size:11px;letter-spacing:.1em}
.web-copy-panel{padding:clamp(40px,5vw,78px)}
.web-eyebrow{font-size:11px;letter-spacing:.12em;opacity:.6}
.web-copy-panel h4{font-size:clamp(48px,5.1vw,88px);line-height:.91;letter-spacing:-.06em}
.web-copy-panel p{font-size:16px;line-height:1.55;max-width:520px;opacity:.68}
.web-editorial-strip article b{font-size:14px}
.web-editorial-strip article small{font-size:11px;opacity:.58}

/* Social: fuller mobile profile, 3 x 4 feed, denser visual rhythm */
.social-concept{
  min-height:760px;
  grid-template-columns:minmax(320px,.8fr) minmax(0,1.2fr);
  gap:clamp(55px,8vw,120px);
  padding:58px 7%;
}
.phone-shell{
  width:min(410px,94%);
  aspect-ratio:auto;
  border:8px solid var(--c-fg);
  border-radius:44px;
  padding:18px 8px 16px;
  background:color-mix(in srgb,var(--c-bg) 97%,var(--c-fg) 3%);
  box-shadow:0 36px 80px rgba(0,0,0,.2);
}
.phone-top{font-size:11px;padding:8px 8px 12px;opacity:.82}
.social-profile{
  display:grid;
  grid-template-columns:38px 1fr auto;
  align-items:center;
  gap:10px;
  padding:8px 8px 16px;
  color:var(--c-fg);
}
.social-avatar{
  width:38px;height:38px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid color-mix(in srgb,var(--c-fg) 25%,transparent);
  font-size:13px;font-weight:600;
}
.social-profile b{display:block;font-size:11px;font-weight:600;line-height:1.2}
.social-profile small{display:block;font-size:9px;opacity:.55;margin-top:3px}
.social-follow{font-size:9px;padding:6px 9px;border-radius:999px;background:var(--c-fg);color:var(--c-bg)}
.concept-social-grid{
  grid-template-columns:repeat(3,1fr)!important;
  grid-template-rows:repeat(4,1fr)!important;
  aspect-ratio:3/4!important;
  gap:2px!important;
  padding:0!important;
  background:transparent!important;
}
.concept-social-grid .tile{aspect-ratio:1/1!important;background:#eee}
.concept-social-grid .tile.image img{width:100%!important;height:100%!important;object-fit:cover!important;transform:scale(1.015)}
.concept-social-grid .tile.concept-color,.concept-social-grid .tile.concept-copy{
  font-size:clamp(9px,.72vw,11px);
  letter-spacing:.09em;
  line-height:1.18;
  font-weight:500;
}
.social-copy span{font-size:11px;letter-spacing:.12em;opacity:.58}
.social-copy h4{font-size:clamp(52px,5.2vw,92px);line-height:.91;letter-spacing:-.06em;margin:22px 0 20px}
.social-copy p{font-size:17px;line-height:1.55;max-width:540px;opacity:.7}

/* Communication: improve contrast and editorial alignment */
.communication-main{min-height:780px;padding:clamp(40px,4.5vw,72px)}
.communication-main:after{
  background:linear-gradient(90deg,rgba(13,10,8,.66) 0%,rgba(13,10,8,.38) 42%,rgba(13,10,8,.09) 72%),linear-gradient(180deg,rgba(0,0,0,.03) 46%,rgba(0,0,0,.42) 100%);
}
.communication-kicker{font-size:11px;letter-spacing:.13em;opacity:.78}
.communication-word{font-size:clamp(62px,7vw,124px);line-height:.88;letter-spacing:-.065em;margin-top:clamp(90px,10vw,165px)}
.communication-copy{max-width:620px}
.communication-copy h4{font-size:clamp(28px,2.6vw,44px);line-height:1;letter-spacing:-.04em;margin-bottom:13px}
.communication-copy p{font-size:16px;line-height:1.5;max-width:520px}
.communication-touchpoints{padding:34px 30px}
.communication-touchpoints>span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;opacity:.52}
.communication-touchpoints b{font-size:17px}
.communication-touchpoints small{font-size:11px;opacity:.56}

/* Seasonal: typographic overlay and more coherent image treatment */
.season-photo-stage .season-photo{inset:-3%;width:106%;height:106%}
.spring-frame .season-photo{object-position:center 50%}
.summer-frame .season-photo{object-position:center 48%}
.autumn-frame .season-photo{object-position:center 51%}
.season-photo-shade{background:linear-gradient(180deg,rgba(0,0,0,.01) 36%,rgba(0,0,0,.44) 100%)}
.season-ghost-overlay{font-size:clamp(62px,8vw,146px)!important;letter-spacing:-.055em!important;color:rgba(255,255,255,.76)!important}
.scene-index{background:rgba(8,8,8,.2);backdrop-filter:blur(8px)}

/* Warm neutral rhythm between image-led sections */
.palette-row{height:5px;opacity:.42}
.explorer-note{font-size:12px;line-height:1.5;opacity:.56;max-width:820px}

@media(max-width:1000px){
  .social-concept{grid-template-columns:1fr;gap:45px;padding:42px 4% 54px}
  .phone-shell{width:min(390px,88vw)}
  .social-copy{max-width:720px;margin:0 auto;width:min(88vw,720px)}
}

@media(max-width:650px){
  .explorer-title{font-size:48px}
  .concept-meta h3{font-size:50px}
  .concept-meta p:not(.concept-count){font-size:15px}
  .concept-tabs{gap:6px}.concept-tab,.application-tab{font-size:11px;padding:10px 13px}
  .social-concept{padding:26px 0 36px;gap:34px}
  .phone-shell{max-width:318px;width:88vw;border-width:7px;border-radius:36px}
  .social-profile{grid-template-columns:34px 1fr auto;padding:6px 6px 12px}
  .social-avatar{width:34px;height:34px}
  .social-copy{padding:0 6%;width:100%}
  .social-copy h4{font-size:44px}
  .social-copy p{font-size:15px}
  .communication-main{min-height:610px;padding:28px 24px}
  .communication-word{font-size:54px;margin-top:88px}
  .communication-copy h4{font-size:30px}
  .communication-copy p{font-size:14px}
}