/* =========================================================
   Editorial / magazine layer (Readymag-inspired)
   Loaded after style.css. Freeform cover, pinned manifesto,
   horizontal works, page-like sheets, word reveals, parallax.
   ========================================================= */

/* ---------- split-word headline reveals ---------- */
.js-split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
.js-split .w>span{display:inline-block;transition:transform 1.2s var(--ease-out);transition-delay:calc(var(--i,0) * 55ms)}
.js .js-split:not(.is-in) .w>span{transform:translateY(108%) rotate(4deg)}

/* parallax uses the independent `translate` property so it composes with transforms */
[data-speed]{will-change:translate}

/* ---------- HERO: freeform cover ---------- */
.hero{display:block;position:relative;min-height:max(100vh,720px);min-height:max(100svh,720px);max-width:none;padding:0;margin:0;overflow:clip}
.hero::before{inset:0}
.hero__flowers{inset:0;width:100%}
.hero__issue{position:absolute;top:96px;right:var(--pad);display:flex;gap:28px;margin:0;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--muted);z-index:6}
.hero__issue span:first-child{color:var(--red)}
.hero__title{position:absolute;left:calc(var(--pad) - .04em);top:15vh;margin:0;z-index:5;font-size:clamp(96px,16.5vw,300px);line-height:.8;letter-spacing:-.045em;pointer-events:none;text-shadow:0 10px 60px rgba(13,15,36,.55)}
.hero__title .line--italic{padding-left:1.25em}
.hero__art{position:absolute;right:15vw;top:13vh;width:clamp(280px,29vw,470px);margin:0;z-index:3}
.hero__arch{aspect-ratio:4/5.2}
.hero__cap{text-align:left}
.hero__float{position:absolute;z-index:4;border-radius:3px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(0,0,0,.75)}
.hero__float img{width:100%}
.hero__float--a{width:clamp(120px,12vw,210px);left:41vw;bottom:9vh;rotate:-5deg;z-index:6}
.hero__float--b{width:clamp(140px,15vw,250px);right:var(--pad);top:56vh;rotate:4deg}
.hero__stamp{position:absolute;left:auto;bottom:auto;right:12.5vw;top:11vh;width:clamp(80px,8vw,124px);height:clamp(80px,8vw,124px);z-index:7}
.hero__text{position:absolute;left:var(--pad);bottom:10vh;width:min(34vw,470px);z-index:6}
.hero__lede{font-size:clamp(19px,1.6vw,25px);margin-bottom:28px}
.hero__scroll{left:auto;right:var(--pad);bottom:28px}

/* ---------- MANIFESTO: pinned, words light up ---------- */
.manifesto{position:relative;height:220vh}
.manifesto__pin{position:sticky;top:0;height:100vh;display:grid;place-items:center;padding:0 var(--pad);overflow:hidden}
.manifesto__text{font-family:var(--serif);font-weight:300;font-size:clamp(34px,5.6vw,96px);line-height:1.02;letter-spacing:-.02em;max-width:17ch;margin:0;text-wrap:balance}
.manifesto__text .mw{opacity:.13;transition:opacity .35s linear,color .35s}
.manifesto__text .mw.on{opacity:1}
.manifesto__text em .mw.on{color:var(--lilac)}
.manifesto__text .pop .mw{color:inherit}
.manifesto__stamp{position:absolute;right:9vw;bottom:12vh;width:clamp(70px,9vw,140px);height:clamp(70px,9vw,140px);color:var(--red);transform:rotate(calc(-14deg + var(--mp,0) * 20deg)) scale(calc(.6 + var(--mp,0) * .5));opacity:calc(var(--mp,0) * 1.4);filter:drop-shadow(0 6px 20px rgba(var(--red-glow),.5))}

/* ---------- page-like sheets ---------- */
.sheet{position:relative;z-index:2;background:var(--sheet,var(--navy));border-radius:clamp(22px,3vw,48px) clamp(22px,3vw,48px) 0 0;box-shadow:0 -50px 90px -30px rgba(0,0,0,.75);transform-origin:50% 0;transform:translateY(calc((1 - var(--e,1)) * 60px)) scale(calc(.93 + var(--e,1) * .07));margin-top:-4vh}
.sheet.is-flat{transform:none}
.sheet--charcoal{--sheet:#17151f}
.sheet--lilac{--sheet:#cdc1d9;color:var(--navy)}
.sheet::before{content:"";position:absolute;left:50%;top:14px;width:54px;height:4px;border-radius:4px;background:currentColor;opacity:.18;transform:translateX(-50%)}

/* ---------- WORKS: horizontal pinned scroll (desktop) ---------- */
.works{padding:0}
.works__pin{position:relative}
.works__head{margin:0;padding:0}
.works__head .display{font-size:clamp(90px,13vw,240px);line-height:.82}
.works__head .work-tabs{margin:34px 0 0;padding:0}
.works__head .fan-note{margin:18px 0 0;padding:0;max-width:30ch}
.works__progress{display:none}
@media (min-width: 961px){
  .works__pin{height:var(--pinh,400vh)}
  .works__sticky{position:sticky;top:0;height:100vh;overflow:hidden}
  .works__track{position:absolute;inset:0 auto 0 0;display:flex;align-items:center;gap:9vw;padding:0 14vw 0 var(--pad);transform:translate3d(var(--hx,0px),0,0);will-change:transform}
  .works__head{flex:0 0 auto;width:min(40vw,620px);position:relative;z-index:3}
  .works .gallery{display:flex;align-items:center;gap:10vw;padding:0;margin:0;max-width:none;height:100%;transition:opacity .45s var(--ease)}
  .works .gallery.is-swapping{transform:none}
  .works .work{flex:0 0 auto;position:relative;margin:0!important;--col:auto}
  .works .work__clip img{height:var(--ih,62vh);width:auto;max-width:none;transform:scale(1.14) translate3d(calc(var(--hp,0px) + var(--px,0px)),var(--py,0px),0)}
  .works .work__btn:hover img{transform:scale(1.18) translate3d(calc(var(--hp,0px) + var(--px,0px)),var(--py,0px),0)}
  .works .work:nth-child(3n+1){--ih:64vh;align-self:flex-start;margin-top:15vh!important}
  .works .work:nth-child(3n+2){--ih:50vh;align-self:flex-end;margin-bottom:13vh!important}
  .works .work:nth-child(3n+3){--ih:58vh;align-self:center}
  .works__progress{display:block;position:absolute;left:var(--pad);right:var(--pad);bottom:34px;height:1px;background:rgba(216,205,226,.15);z-index:4}
  .works__progress i{position:absolute;inset:0;background:var(--red);transform-origin:0 50%;transform:scaleX(var(--hp-all,0))}
}
/* giant numerals behind, titles overlapping the image */
.works .work{position:relative}
.works .work__meta{position:absolute;left:-2.2vw;bottom:-1.2em;z-index:4;display:block;margin:0;pointer-events:none;max-width:120%}
.works .work__title{font-size:clamp(46px,6.2vw,118px);line-height:.85;letter-spacing:-.03em;color:var(--ink);text-shadow:0 6px 40px rgba(13,15,36,.7);white-space:nowrap}
.works .work__no{position:absolute;left:auto;right:-.12em;top:-.56em;bottom:auto;font-family:var(--serif);font-size:clamp(90px,12vw,220px);line-height:1;font-weight:300;color:transparent;-webkit-text-stroke:1px rgba(216,205,226,.45);z-index:-1;letter-spacing:-.04em}
.works .work__medium{margin-top:10px;font-size:12px}
.works .tag{display:inline-block;margin-top:10px}
.works .work__meta>span:not([class]){display:none}

/* ---------- SKETCHBOOK ---------- */
.sketchbook{padding-top:clamp(110px,14vw,200px)}
.sketchbook .section-head{position:relative;z-index:3;margin-bottom:clamp(28px,3.5vw,56px)}
.sketchbook .display{font-size:clamp(84px,14vw,250px);line-height:.8}
.sketchbook .desk-tools{position:relative}
.sketchbook .desk{z-index:1}

/* ---------- ABOUT: lilac page, freeform overlap ---------- */
.about{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:clamp(16px,2.5vw,40px);align-items:start;max-width:none;padding:clamp(110px,15vw,220px) var(--pad) clamp(110px,14vw,200px)}
.about__headline{grid-column:1 / -1;grid-row:1;position:relative;z-index:4;margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(70px,10.5vw,200px);line-height:.84;letter-spacing:-.04em;color:var(--navy);max-width:11ch;pointer-events:none}
.about__headline em{color:var(--red)}
.about__visual{grid-column:1 / 7;grid-row:1 / 3;margin-top:clamp(140px,17vw,330px);max-width:none;justify-self:stretch;position:relative}
.about__img{transform:none;box-shadow:0 50px 90px -40px rgba(13,15,36,.6)}
.about__img--a{width:82%;rotate:-2deg}
.about__img--b{position:absolute;width:40%;right:0;bottom:-14%;rotate:5deg;border:8px solid var(--paper);border-radius:2px}
.about__stamp{right:auto;left:66%;top:-8%}
.about__text{grid-column:8 / -1;grid-row:2;padding-top:clamp(40px,6vw,110px)}
.sheet--lilac .eyebrow{color:#5b4a72}
.sheet--lilac .about__body p{color:#2b2640}
.sheet--lilac .facts{border-color:rgba(13,15,36,.18)}
.sheet--lilac .facts div{border-color:rgba(13,15,36,.18)}
.sheet--lilac .facts dt{color:#b0102a}
.sheet--lilac .genius{color:#b0102a;border-color:#b0102a}
.sheet--lilac ::selection{background:var(--navy);color:var(--lilac-2)}

/* ---------- CONTACT ---------- */
.contact__title{font-size:clamp(60px,10vw,190px);line-height:.86;max-width:12ch}

/* ---------- tablet / mobile ---------- */
@media (max-width: 960px){
  .hero{min-height:auto;padding:100px var(--pad) 90px;display:grid;grid-template-columns:repeat(6,1fr)}
  .hero__issue{position:static;grid-column:1 / -1;order:-1;margin-bottom:22px;justify-content:flex-start;gap:16px}
  .hero__title{position:relative;left:auto;top:auto;grid-column:1 / -1;grid-row:2;font-size:clamp(70px,19vw,170px);margin-bottom:-.32em}
  .hero__title .line--italic{padding-left:.7em}
  .hero__art{position:relative;right:auto;top:auto;grid-column:2 / -1;grid-row:3;width:100%;max-width:460px;justify-self:end}
  .hero__float--a{left:var(--pad);bottom:auto;top:calc(100px + 52vw);width:30vw}
  .hero__float--b{display:none}
  .hero__stamp{right:var(--pad);top:auto;bottom:auto;top:calc(110px + 30vw)}
  .hero__text{position:relative;left:auto;bottom:auto;width:auto;grid-column:1 / -1;grid-row:4;margin-top:34px}
  .manifesto{height:170vh}
  .works{padding:clamp(90px,14vw,140px) 0 80px}
  .works__head{padding:0 var(--pad);margin-bottom:50px}
  .works .gallery{display:grid;grid-template-columns:1fr;row-gap:110px}
  .works .work:nth-child(n){--col:1 / -1;margin-top:0;padding:0;width:84%}
  .works .work:nth-child(even){margin-left:auto}
  .works .work__meta{left:-4vw;bottom:-.9em}
  .works .work__title{font-size:clamp(44px,12vw,80px)}
  .about{display:block}
  .about__headline{margin-bottom:-.5em}
  .about__visual{margin:0 0 70px;max-width:520px}
}
@media (max-width: 720px){
  .hero__float--a{top:calc(100px + 78vw);width:34vw}
  .hero__stamp{top:calc(96px + 44vw);width:76px;height:76px}
  .hero__art{grid-column:2 / -1}
  .sketchbook .section-head{margin-bottom:0}
  .sketchbook .display{font-size:clamp(70px,20vw,120px)}
  .works .work__meta>.work__medium,.works .work__meta>.tag{display:none}
  .works .work__title{white-space:normal}
  .works .work__meta{bottom:-.6em}
}
@media (prefers-reduced-motion: reduce){
  [data-speed]{translate:none!important}
  .js .js-split .w>span{transform:none!important}
  .manifesto__text .mw{opacity:1}
  .sheet{transform:none!important}
  .manifesto__stamp{opacity:1;transform:rotate(-8deg)}
}