/* ============================================================
   WJR FIXER — pages/wellyghan.css
   Estilos exclusivos da página Wellyghan (wellyghan.html).
   ============================================================ */

/* full-bleed hero */
.wj-hero{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; }
.wj-hero .bg{ position:absolute; inset:0; z-index:0; }
.wj-hero .bg img{ width:100%; height:100%; object-fit:cover; object-position:50% 30%; }
.wj-hero .bg::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,23,23,.55) 0%, transparent 28%, rgba(23,23,23,.5) 62%, var(--ink) 100%); }
.wj-hero .wrap{ position:relative; z-index:2; padding-bottom:clamp(3rem,7vw,6rem); }
.wj-hero-title{
  font-size:clamp(1.95rem,3.7vw,3.25rem); line-height:1.2;
  letter-spacing:-.022em; max-width:14ch; text-wrap:balance;
}
.wj-hero-title span{ display:block; }
.wj-hero-title .a{ font-weight:300; color:var(--off-90); }
.wj-hero-title .b{ font-weight:700; color:var(--sand); }
.wj-hero .label{ margin-bottom:1.4rem; }
.wj-hero__circular{
  position:absolute; right:clamp(3rem,10vw,8rem); top:50%;
  transform:translateY(-50%);
  width:300px; height:auto;
  opacity:.18; z-index:1; pointer-events:none;
}
@media(max-width:880px){ .wj-hero__circular{ display:none; } }

/* Quem é — Fundo 02 */
.wj-quem{
  position:relative; overflow:hidden; background:var(--ink);
  padding-block:clamp(3.75rem,7.5vw,6.5rem);
}
.wj-quem::before{
  content:""; position:absolute; inset:-1%; z-index:0; pointer-events:none;
  background:url("../../img/bg-fundo-2.jpg") center center / cover no-repeat;
}
.wj-quem::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--wjr-veil);
}
.wj-quem .wjr-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.12;
  mix-blend-mode:soft-light; background-image:var(--wjr-grain); background-size:180px 180px;
}
.wj-quem .wrap{ position:relative; z-index:1; }
.wj-quem__mark{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(1.5rem,4vw,2.5rem);
}
.wj-quem__mark img{
  width:min(68%,580px); height:auto; display:block;
  opacity:.22; filter:blur(.25px);
  -webkit-mask-image:radial-gradient(ellipse 78% 72% at 50% 50%, #000 28%, transparent 78%);
  mask-image:radial-gradient(ellipse 78% 72% at 50% 50%, #000 28%, transparent 78%);
}
@media(max-width:820px){
  .wj-quem__mark img{ width:min(92%,440px); opacity:.17; }
}

/* identity */
.wj-quem .eyebrow-row{ margin-bottom:1.2rem; }
.id-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2.5rem,6vw,5rem); }
.wj-quem .id-grid{ gap:clamp(2rem,4.5vw,3.75rem); }
.id-col h3{
  font-size:.72rem; letter-spacing:.2em; text-transform:uppercase;
  font-weight:600; color:var(--sand); margin-bottom:1.35rem;
}
.id-traits{
  list-style:none; display:flex; flex-direction:column; gap:.85rem;
}
.wj-quem .id-traits{ gap:.72rem; }
.id-traits li{
  display:flex; align-items:flex-start; gap:.9rem;
  font-size:clamp(.96rem,1.15vw,1.03rem); font-weight:300;
  line-height:1.58; color:var(--off-70);
}
.id-traits li::before{
  content:""; width:1.15em; height:1px; flex:none;
  background:var(--sand); opacity:.75; margin-top:.72em;
}
@media(max-width:820px){ .id-grid{ grid-template-columns:1fr; } }

/* manifesto — Fundo 01 · layout editorial */
.section.wj-mani{
  padding-block:clamp(3rem,6vw,4.75rem);
}
.wj-mani{
  position:relative; overflow:hidden; background:var(--ink); color:var(--off);
}
.wj-mani::before{
  content:""; position:absolute; inset:-1%; z-index:0; pointer-events:none;
  background:url("../../img/bg-fundo-1.jpg") center center / cover no-repeat;
}
.wj-mani::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background:var(--wjr-veil);
}
.wj-mani .wjr-grain{
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.12;
  mix-blend-mode:soft-light; background-image:var(--wjr-grain); background-size:180px 180px;
}
.wj-mani .wrap{ position:relative; z-index:1; }
.wj-mani-in{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,3.5vw,2.5rem);
  align-items:start;
  position:relative;
  min-height:clamp(400px,46vw,480px);
  padding-block:clamp(.75rem,2vw,1.25rem);
}
/* Arco de ponta a ponta na seção inteira */
.wj-mani__ring{
  position:absolute;
  top:50%; left:7.5%;
  height:155%; aspect-ratio:1;
  transform:translate(-50%,-50%);
  border:1px solid rgba(245,239,232,.3);
  border-radius:50%; pointer-events:none; z-index:0;
}
.wj-mani__copy{
  position:relative; z-index:1;
  max-width:42ch;
  padding-right:clamp(1rem,3vw,2rem);
}
.wj-mani .eyebrow-row{ margin-bottom:clamp(1rem,2vw,1.5rem); }
.wj-mani__body{
  display:flex; flex-direction:column;
  gap:clamp(1.5rem,2.8vw,2.25rem);
}
.wj-mani__body p{
  font-size:clamp(.94rem,1.08vw,1.02rem); font-weight:300;
  line-height:1.65; color:var(--off-70);
}
.wj-mani__aside{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:flex-end;
}
.wj-mani__callout{
  font-weight:300;
  font-size:clamp(1.05rem,1.65vw,1.42rem);
  line-height:1.22; letter-spacing:-.018em; text-wrap:balance;
  text-align:right; margin-left:auto;
}
.wj-mani__callout span{ display:block; }
.wj-mani__callout .a{ font-weight:300; color:var(--off-90); margin-left:0; }
.wj-mani__callout .b{
  font-weight:700; color:var(--sand);
  margin-left:clamp(1.35rem,2.8vw,2.15rem);
}
.wj-mani__callout .c{
  font-weight:300; color:var(--off-55);
  margin-left:clamp(2.65rem,5.6vw,4.35rem);
}
.wj-mani__sym{
  position:absolute; right:0; bottom:clamp(.5rem,1.5vw,1rem);
  width:clamp(22px,2vw,30px); height:auto; opacity:.88; z-index:2;
  pointer-events:none;
}
@media(max-width:900px){
  .wj-mani-in{
    grid-template-columns:1fr;
    gap:clamp(1.75rem,4vw,2.25rem);
    min-height:clamp(380px,80vw,480px);
  }
  .wj-mani__ring{ left:10%; }
  .wj-mani__copy{ max-width:none; }
  .wj-mani__aside{ align-items:flex-start; }
  .wj-mani__callout{ text-align:left; margin-left:0; }
}

/* instagram band */
.ig-band{ background:var(--off); color:var(--ink); }
.ig-in{ display:flex; align-items:center; justify-content:space-between; gap:1.25rem; flex-wrap:nowrap; }
.ig-in > *:first-child{ flex:0 1 auto; min-width:0; }
/* teto em 2.75rem (era 3rem): permite o título caber em 1 linha com os 3
   botões ao lado, o que encurta a faixa em ~80px */
.ig-in h2{ font-size:clamp(1.8rem,4vw,2.75rem); }
.ig-in .sub{ color:rgba(23,23,23,.6); margin-top:.6rem; }
.ig-in__actions{
  /* Colunas iguais dimensionadas pelo rótulo mais largo: os 3 saem simétricos sem
     largura fixa. flex:0 0 auto impede que encolham e caiam para a linha de baixo. */
  flex:0 0 auto;
  display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:.4rem;
  align-items:stretch;
}
.ig-in__actions .btn{
  width:100%; justify-content:center; text-align:center;
  font-size:.75rem; letter-spacing:.01em;
  padding-inline:.6rem;
  white-space:nowrap;
}
.ig-in__actions .btn svg{ width:16px; height:16px; flex:none; }
@media(max-width:900px){
  /* lado a lado nao cabe mais: empilha em largura total e devolve o tamanho do texto */
  .ig-in{ flex-wrap:wrap; gap:2rem; }
  .ig-in__actions{ grid-auto-flow:row; width:100%; }
  .ig-in__actions .btn{ font-size:.875rem; padding-inline:1.1rem; }
}


/* símbolo da marca no canto do hero */
.wj-hero > .brand-mark-corner{ position:absolute; bottom:2rem; right:var(--gut); z-index:3; }