/* =========================================================
   CASE STUDY: Hundred Languages Pendant (Outfyd). Extends main.css + case-study.css.
   Ported from the Breeze Web case study. The hero, intro, camera rig and stack stay in the
   portfolio look; everything inside .hl is set in the pendant page's own look
   (night, ivory and the three plated finishes; Italiana, Cormorant Garamond and Jost).
   ========================================================= */

/* ---------- hero: the studio shot on dark satin ---------- */
.hlp-hero .cs-hero-paint{background:#0d0b0a;overflow:hidden}
.hlp-hero .cs-hero-paint::before{content:"";position:absolute;top:-8%;bottom:-8%;right:-2%;aspect-ratio:1;min-width:58%;background:url(../images/pendant/hero-bg.webp) 50% 56%/cover no-repeat;
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 34%);mask:linear-gradient(90deg,transparent 0,#000 34%)}
.hlp-hero .cs-hero-paint::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(11,10,9,.6) 0%,rgba(11,10,9,.15) 45%,rgba(11,10,9,0) 65%),linear-gradient(0deg,rgba(11,10,9,.55),transparent 28%)}
.hlp-hero .cs-h1 .mg{color:#e7ab96}
@media (max-width:960px){.hlp-hero .cs-hero-paint::before{inset:0;aspect-ratio:auto;min-width:0;-webkit-mask:none;mask:none;background-position:50% 50%}
  .hlp-hero .cs-hero-paint::after{background:linear-gradient(0deg,rgba(11,10,9,.85) 0%,rgba(11,10,9,.2) 55%,rgba(11,10,9,.1) 100%)}}

/* the pendant's look runs full width between the portfolio's wrapped sections */
.hl-start{margin-top:clamp(64px,8vw,112px)}

/* ================= the pendant ================= */
.hl{
  --night:#0b0a09;--dark:#141210;--ivory:#efeae2;--ivory-2:#e6e0d6;--ink:#f3eee6;--ink-2:rgba(243,238,230,.66);--hair:rgba(243,238,230,.16);
  --d:#141210;--d-2:rgba(20,18,16,.64);--d-hair:rgba(20,18,16,.16);
  --rose:#d99c88;--gold:#cfa24c;--silver:#c7cad0;
  --f-mark:"Italiana","Didot",serif;--f-disp:"Cormorant Garamond","Garamond","Times New Roman",serif;--f-body:"Jost","Futura","Segoe UI",system-ui,sans-serif;
  --ease:cubic-bezier(.6,0,.2,1);
  position:relative;color:var(--ink);font:300 17px/1.7 var(--f-body);background:var(--night)}
.hl ::selection{background:var(--rose);color:var(--night)}
.hl :focus-visible{outline:1px solid currentColor;outline-offset:4px;box-shadow:none}
.hl img{display:block;max-width:100%;height:auto}

.hl-sec{position:relative;overflow-x:clip;padding-block:clamp(96px,10vw,160px);background:var(--sb,var(--night));color:var(--fg,var(--ink))}
.hl-night{--sb:var(--night)}
.hl-night::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(60% 40% at 82% 6%,rgba(217,156,136,.09),transparent 70%),radial-gradient(50% 35% at 8% 100%,rgba(207,162,76,.05),transparent 70%)}
.hl-dark{--sb:var(--dark)}
.hl-ivory{--sb:var(--ivory);--fg:var(--d)}
.hl-ivory2{--sb:var(--ivory-2);--fg:var(--d)}
.hl-sec > .wrap{position:relative}

.hl-label{display:flex;align-items:center;gap:16px;font:400 12px/1 var(--f-body);letter-spacing:.34em;text-transform:uppercase;color:var(--ink-2)}
.hl-label::before{content:"";width:44px;height:1px;background:currentColor;opacity:.7}
.hl-ivory .hl-label,.hl-ivory2 .hl-label{color:var(--d-2)}
.hl-h2{font:300 clamp(44px,6vw,92px)/1 var(--f-disp);letter-spacing:-.005em;margin:26px 0 0;text-wrap:balance}
.hl-h2 em{font-style:italic;font-weight:300}
.hl-lede{margin:0;color:var(--ink-2);font-size:clamp(16px,1.3vw,19px);line-height:1.75;max-width:40ch}
.hl-ivory .hl-lede,.hl-ivory2 .hl-lede{color:var(--d-2)}
.hl-head{margin-bottom:clamp(48px,6vw,88px)}
.hl-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.hl-split .hl-lede{padding-bottom:10px}
.hl-center{text-align:center;display:grid;justify-items:center;gap:0}
.hl-center .hl-lede{margin-top:28px;max-width:46ch}
.hl-mini{margin:0;font:400 11px/1.4 var(--f-body);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.hl-num{font:400 12px var(--f-body);letter-spacing:.34em;color:var(--ink-2)}

/* the idea */
.hl-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,34px)}
.hl-step{display:grid;gap:12px;align-content:start}
.hl-step-art{aspect-ratio:1/.82;overflow:hidden;background:#000;margin-bottom:14px}
.hl-step-art img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
.hl-step:hover .hl-step-art img{transform:scale(1.04)}
.hl-circ{display:grid;place-items:center}
.hl-circ img{width:74%;height:auto;aspect-ratio:1;border-radius:50%;box-shadow:0 0 70px rgba(255,140,60,.2)}
.hl-step h3{margin:0;font:300 clamp(28px,2.6vw,38px)/1.05 var(--f-disp)}
.hl-step p{margin:0;color:var(--ink-2);font-size:16px}
.hl-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:clamp(56px,6vw,88px);border-block:1px solid var(--hair)}
.hl-stats div{padding:clamp(28px,3.4vw,46px) 10px;text-align:center;display:grid;gap:12px}
.hl-stats div+div{border-left:1px solid var(--hair)}
.hl-stats b{font:300 clamp(40px,4.6vw,72px)/1 var(--f-disp);font-variant-numeric:lining-nums}
.hl-stats span{font:400 11px var(--f-body);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}

/* browser frames */
.hl-browser{border-radius:12px;overflow:hidden;background:#1b1916;border:1px solid rgba(243,238,230,.14);box-shadow:0 60px 120px -40px rgba(0,0,0,.85)}
.hl-chrome{height:46px;display:flex;align-items:center;gap:18px;padding:0 18px;border-bottom:1px solid rgba(243,238,230,.08)}
.hl-chrome .dots{display:flex;gap:7px}.hl-chrome .dots i{width:10px;height:10px;border-radius:50%;background:rgba(243,238,230,.2);display:block}
.hl-chrome .url{flex:0 1 460px;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:28px;border-radius:7px;background:rgba(243,238,230,.06);font:400 12.5px/28px var(--f-body);letter-spacing:.04em;color:rgba(243,238,230,.55);padding:0 14px}
.hl-browser > img{width:100%;aspect-ratio:16/10;object-fit:cover}
.hl-light{background:#f8f5f0;border-color:rgba(20,18,16,.12);box-shadow:0 50px 100px -40px rgba(40,30,20,.35)}
.hl-light .hl-chrome{border-color:rgba(20,18,16,.08)}
.hl-light .dots i{background:rgba(20,18,16,.16)}
.hl-light .url{background:rgba(20,18,16,.05);color:rgba(20,18,16,.5)}

/* scroll story */
.hl-story{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.8fr);gap:clamp(20px,3vw,48px);align-items:center}
.hl-tabs{display:grid;gap:4px}
.hl-tabs button{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:4px;text-align:left;background:none;border:0;border-top:1px solid var(--hair);color:var(--ink-2);padding:20px 0 22px;cursor:pointer;font:300 clamp(24px,2.2vw,32px)/1.1 var(--f-disp);transition:color .4s}
.hl-tabs button span{grid-row:span 2;font:400 11px/2.6 var(--f-body);letter-spacing:.3em}
.hl-tabs button small{font:300 14px/1.5 var(--f-body);color:var(--ink-2);opacity:.8}
.hl-tabs button[aria-selected="true"],.hl-tabs button:hover{color:var(--ink)}
.hl-bar{position:absolute;left:0;top:-1px;height:1px;width:0;background:var(--rose)}
.hl-tabs button[aria-selected="true"] .hl-bar{width:var(--p,100%)}
.hl-screen{position:relative;aspect-ratio:16/10;background:#0d0b0a}
.hl-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.03);transition:opacity .9s var(--ease),transform 1.6s var(--ease)}
.hl-screen img.on{opacity:1;transform:none}

/* look inside */
.hl-lens{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,6vw,96px);align-items:center}
.hl-eye{position:relative;aspect-ratio:1;border-radius:50%;overflow:hidden;box-shadow:0 0 120px rgba(255,140,60,.22),0 0 0 1px rgba(243,238,230,.08)}
.hl-eye img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);filter:blur(6px);transition:opacity .8s var(--ease),transform 1.2s var(--ease),filter .9s var(--ease)}
.hl-eye img.on{opacity:1;transform:none;filter:none}
.hl-lens-side{display:grid;gap:26px}
.hl-picks{display:flex;gap:14px;flex-wrap:wrap}
.hl-picks button{display:grid;justify-items:center;gap:10px;background:none;border:0;padding:0;cursor:pointer;color:var(--ink-2);font:400 10.5px var(--f-body);letter-spacing:.24em;text-transform:uppercase;transition:color .4s}
.hl-picks img{width:84px;height:84px;border-radius:50%;object-fit:cover;outline:1px solid transparent;outline-offset:5px;opacity:.6;transition:opacity .4s,outline-color .4s}
.hl-picks button[aria-pressed="true"],.hl-picks button:hover{color:var(--ink)}
.hl-picks button[aria-pressed="true"] img{opacity:1;outline-color:var(--ink)}
.hl-points{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--hair)}
.hl-points li{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:16px 0;border-bottom:1px solid var(--hair);color:var(--ink-2);font-size:15px}
.hl-points b{font:400 italic 22px/1.2 var(--f-disp);color:var(--ink)}
.hl-cta{margin:0;display:grid;gap:12px}
.hl-cta img{width:min(100%,420px);border-radius:3px}
.hl-cta figcaption{color:var(--ink-2);font-size:14px;max-width:44ch}

/* finishes */
.hl-fin-pics{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:clamp(12px,1.6vw,24px)}
.hl-fin-model,.hl-fin-close{position:relative;overflow:hidden;background:#0b0a09}
.hl-fin-model{aspect-ratio:1344/768}
.hl-fin-close{aspect-ratio:auto}
.hl-fin-model img,.hl-fin-close img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease)}
.hl-fin-model img.on,.hl-fin-close img.on{opacity:1}
.hl-swatches{display:flex;gap:30px;margin-top:30px;flex-wrap:wrap}
.hl-swatches button,.hl-swatches span{display:grid;justify-items:center;gap:12px;background:none;border:0;padding:0;cursor:pointer;color:inherit;font:400 11px var(--f-body);letter-spacing:.24em;text-transform:uppercase;opacity:.55;transition:opacity .4s}
.hl-swatches i{width:28px;height:28px;border-radius:50%;display:block;outline:1px solid transparent;outline-offset:6px;transition:outline-color .4s}
.hl-swatches [aria-pressed="true"],.hl-swatches .on,.hl-swatches button:hover{opacity:1}
.hl-swatches [aria-pressed="true"] i,.hl-swatches .on i{outline-color:currentColor}
.hl-swatches.static span{cursor:default}
.hl-swatches .rose i,.hl .m-rose{background:radial-gradient(circle at 35% 30%,#ffeee8,#d99c88 55%,#875344)}
.hl-swatches .gold i,.hl .m-gold{background:radial-gradient(circle at 35% 30%,#fff1c9,#cfa24c 55%,#7f5a1d)}
.hl-swatches .silver i,.hl .m-silver{background:radial-gradient(circle at 35% 30%,#ffffff,#c7cad0 55%,#6b6f78)}
.hl .m-glow{background:radial-gradient(circle at 50% 40%,#ffc478,#ff8c3c 58%,#8c2408)}

/* imagery */
.hl-flow{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr) 48px minmax(0,1fr);align-items:center}
.hl-flow figure{margin:0;display:grid;gap:18px}
.hl-ph{aspect-ratio:3/4;overflow:hidden;background:#0b0a09}
.hl-ph img{width:100%;height:100%;object-fit:cover}
.hl-white{background:#fff;border:1px solid var(--d-hair)}
.hl-white img{object-fit:contain}
.hl-flow figcaption{display:grid;gap:4px}
.hl-flow figcaption b{font:300 28px/1.1 var(--f-disp)}
.hl-flow figcaption span{font:400 11px var(--f-body);letter-spacing:.28em;text-transform:uppercase;color:var(--d-2)}
.hl-arrow{font:300 40px/1 var(--f-disp);text-align:center;color:var(--d-2);margin-bottom:60px}
.hl-samples{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,170px));gap:clamp(18px,3vw,44px);align-items:center;margin-top:clamp(56px,6vw,88px);padding-top:clamp(40px,5vw,64px);border-top:1px solid var(--d-hair)}
.hl-samples h3{margin:0 0 10px;font:300 36px/1.05 var(--f-disp)}
.hl-samples p{margin:0;color:var(--d-2);max-width:30ch}
.hl-samples img{width:100%;aspect-ratio:1;border-radius:50%;object-fit:cover}

/* brand */
.hl-pal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px 24px}
.hl-pal i{display:block;height:clamp(80px,9vw,130px);border:1px solid var(--hair)}
.hl-pal b{display:block;margin-top:16px;font:400 13px var(--f-body);letter-spacing:.2em;text-transform:uppercase}
.hl-pal span{font-size:14px;color:var(--ink-2);letter-spacing:.06em}
.hl-type{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:clamp(48px,5vw,72px)}
.hl-box{border:1px solid var(--hair);padding:clamp(28px,3.4vw,48px);display:grid;gap:14px;align-content:start}
.hl-box .hl-mini{margin-top:14px}
.hl-box .hl-mini:first-child{margin-top:0}
.hl-mark{margin:0;font:400 clamp(30px,3.4vw,48px)/1 var(--f-mark);letter-spacing:.36em;padding-left:.36em}
.hl-disp{margin:0;font:300 clamp(36px,3.6vw,56px)/1 var(--f-disp)}
.hl-disp em{font-style:italic}
.hl-body{margin:0;color:var(--ink)}
.hl-row{display:flex;gap:14px;flex-wrap:wrap}
.hl-btn{font:400 11px var(--f-body);letter-spacing:.3em;text-transform:uppercase;padding:18px 30px;border:1px solid var(--ink)}
.hl-btn.solid{background:var(--ink);color:var(--night)}

/* mobile */
.hl-phones{display:flex;justify-content:center;align-items:flex-start;gap:clamp(16px,4vw,56px);margin-top:20px}
.hl-phone{width:min(30%,330px);border-radius:clamp(26px,3.6vw,52px);padding:clamp(6px,.9vw,12px);background:#1d1b19;box-shadow:0 0 0 1px rgba(243,238,230,.14),0 60px 120px -30px rgba(0,0,0,.9)}
.hl-phone img{width:100%;border-radius:clamp(20px,2.9vw,41px);aspect-ratio:780/1688;object-fit:cover}
.hl-phone.up{margin-top:-48px}

/* outro */
.hl-outro{text-align:center;padding-block:clamp(110px,12vw,180px);background:var(--night)}
.hl-outro::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(40% 40% at 50% 18%,rgba(255,140,60,.10),transparent 70%)}
.hl-outro .wrap{position:relative}
.hl-o-lens{width:clamp(150px,16vw,220px);aspect-ratio:1;border-radius:50%;object-fit:cover;margin:0 auto 52px;box-shadow:0 0 100px rgba(255,140,60,.28)}
.hl-outro .hl-mark{font-size:clamp(22px,2.2vw,30px)}
.hl-outro .hl-h2{max-width:15ch;margin:30px auto 0}
.hl-o-facts{display:flex;justify-content:center;gap:clamp(24px,5vw,80px);flex-wrap:wrap;margin:64px auto 0;max-width:1000px;text-align:left;border-top:1px solid var(--hair);padding-top:44px}
.hl-o-facts dt{font:400 11px/1 var(--f-body);letter-spacing:.3em;text-transform:uppercase;color:var(--ink-2)}
.hl-o-facts dd{margin:12px 0 0;font:300 17px/1.55 var(--f-body);max-width:26ch}
.hl-o-facts a{color:var(--rose);font:300 italic 26px/1.2 var(--f-disp);text-decoration:none}
.hl-o-facts a:hover{text-decoration:underline}

/* ---------- responsive ---------- */
@media (max-width:980px){
  .hl-split{grid-template-columns:1fr;align-items:start}
  .hl-story{grid-template-columns:1fr}
  .hl-tabs{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px;order:2}
  .hl-lens{grid-template-columns:1fr}
  .hl-eye{max-width:520px;width:100%;margin-inline:auto}
  .hl-steps{grid-template-columns:1fr;max-width:560px}
  .hl-type{grid-template-columns:1fr}
  .hl-samples{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hl-samples > div{grid-column:1/-1}
}
@media (max-width:720px){
  .hl-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hl-stats div:nth-child(3){border-left:0}
  .hl-stats div:nth-child(n+3){border-top:1px solid var(--hair)}
  .hl-fin-pics{grid-template-columns:1fr}
  .hl-fin-close{aspect-ratio:1}
  .hl-flow{grid-template-columns:1fr;gap:12px}
  .hl-arrow{transform:rotate(90deg);margin:0}
  .hl-pal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hl-points li{grid-template-columns:1fr;gap:4px}
  .hl-phones{gap:10px}
  .hl-phone{width:32%}
  .hl-phone.up{margin-top:-24px}
  .hl-o-facts{flex-direction:column;align-items:center;text-align:center;gap:28px}
  .hl-o-facts dd{margin-inline:auto}
}
@media (max-width:520px){
  .hl-tabs{grid-template-columns:1fr}
  .hl-tabs button small{display:none}
  .hl-chrome .url{display:none}
}
@media (prefers-reduced-motion:reduce){

  .hl-screen img,.hl-eye img,.hl-fin-model img,.hl-fin-close img,.hl-step-art img{transition:none}
}

/* ---------- portfolio fit ---------- */
.hl .wrap{max-width:1440px;margin-inline:auto}
.hl h1,.hl h2,.hl h3,.hl p{text-transform:none}
.hl button{font:inherit}
.hl-outro{margin-top:clamp(72px,9vw,128px)}