/* Skin Journal: a spatial editorial composition without before/after imagery. */
.skin-journal{background:#060606;padding:clamp(8rem,13vw,14rem) 0;overflow:hidden}
.journal-head{display:grid;grid-template-columns:.65fr 2.35fr;gap:2rem;align-items:start;position:relative;z-index:3}
.journal-head h2{font-family:var(--ff-d);font-size:clamp(4rem,8vw,8.8rem);font-weight:300;line-height:.74;letter-spacing:-.06em;color:var(--ivory);max-width:12ch}
.journal-head h2 em{color:var(--brass)}

.journal-stage{height:min(1080px,112vw);min-height:760px;max-width:1540px;margin:clamp(4rem,8vw,8rem) auto 0;position:relative;padding-inline:clamp(1.25rem,4vw,4.5rem)}
.journal-frame{position:absolute;margin:0;overflow:hidden;background:#0b0a08;z-index:2}
.journal-frame img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.48) sepia(.08) contrast(1.08) brightness(.7);transition:transform 1.1s cubic-bezier(.22,1,.36,1),filter .6s ease}
.journal-frame:hover img{transform:scale(1.025);filter:saturate(.78) sepia(.04) contrast(1.04) brightness(.78)}
.journal-frame figcaption{position:absolute;left:1rem;bottom:1rem;z-index:2;font-size:.47rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.82);max-width:24ch}
.journal-frame::after{content:"";position:absolute;inset:50% 0 0;background:linear-gradient(to top,rgba(0,0,0,.58),transparent);pointer-events:none}
.journal-frame-a{left:clamp(1.25rem,4vw,4.5rem);top:9%;width:27%;height:58%}
.journal-frame-b{left:34%;top:0;width:47%;height:44%}
.journal-frame-c{right:clamp(1.25rem,4vw,4.5rem);bottom:3%;width:31%;height:48%}
.journal-word{position:absolute;left:9%;bottom:4%;z-index:0;font-family:var(--ff-d);font-size:clamp(7rem,19vw,20rem);font-weight:300;line-height:.7;letter-spacing:-.08em;color:var(--brass);opacity:.12;white-space:nowrap}
.journal-quote{position:absolute;left:34%;top:51%;width:37%;z-index:3;font-family:var(--ff-d);font-size:clamp(2.4rem,4.5vw,5rem);font-weight:300;font-style:italic;line-height:.9;letter-spacing:-.04em;color:var(--ivory);margin:0}
.journal-quote::first-letter{color:var(--brass)}

.journal-notes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(2rem,7vw,8rem);padding-top:clamp(3rem,6vw,6rem)}
.journal-notes article{max-width:30ch}
.journal-notes span{display:block;font-size:.48rem;letter-spacing:.25em;text-transform:uppercase;color:var(--brass);margin-bottom:1rem}
.journal-notes h3{font-family:var(--ff-d);font-size:clamp(2.2rem,3.4vw,3.7rem);font-weight:300;line-height:.9;color:var(--ivory);margin-bottom:1rem}
.journal-notes p{font-size:.78rem;line-height:1.75;color:var(--muted)}

.js-experience .journal-frame,.js-experience .journal-quote,.js-experience .journal-notes article{opacity:0;transition:opacity .7s ease,transform 1s cubic-bezier(.22,1,.36,1)}
.js-experience .journal-frame{transform:translateY(36px)}
.js-experience .journal-quote{transform:translateX(32px)}
.js-experience .journal-notes article{transform:translateY(24px)}
.js-experience .journal-frame.is-seen,.js-experience .journal-quote.is-seen,.js-experience .journal-notes article.is-seen{opacity:1;transform:none}
.js-experience .journal-frame-b{transition-delay:.08s}.js-experience .journal-frame-c{transition-delay:.15s}

@media(max-width:800px){
  .journal-head{grid-template-columns:1fr;gap:1.5rem}.journal-head h2{font-size:clamp(3.8rem,15vw,6rem)}
  .journal-stage{height:auto;min-height:0;display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:54vw 38vw 48vw;gap:.75rem;margin-top:4rem;padding-inline:1.25rem}
  .journal-frame{position:relative;inset:auto;width:auto;height:auto}
  .journal-frame-a{grid-column:1;grid-row:1 / span 2}
  .journal-frame-b{grid-column:2;grid-row:1}
  .journal-frame-c{grid-column:2;grid-row:2 / span 2}
  .journal-frame figcaption{font-size:.39rem;letter-spacing:.11em;left:.7rem;bottom:.7rem}
  .journal-word{left:-2%;bottom:5%;font-size:34vw}
  .journal-quote{position:relative;inset:auto;width:auto;grid-column:1;grid-row:3;align-self:center;font-size:clamp(2rem,9vw,3.4rem);padding:0 .35rem}
  .journal-notes{grid-template-columns:1fr;gap:2.5rem;padding-top:5rem}.journal-notes article{max-width:36ch}
}

@media(prefers-reduced-motion:reduce){
  .js-experience .journal-frame,.js-experience .journal-quote,.js-experience .journal-notes article{opacity:1;transform:none;transition:none}
}