/* =============================================================
   MAGAZINES — full pebble leather, one pull
   The ground is the safelight red, every pixel a stone of hide.
   The word stays Instrument Serif. The halo is the lamp, and it
   moves with the pull. The issue opens on that same pull.
   ============================================================= */

html:has(body.w-mag),
body.w-mag,
body.w-mag #app,
body.w-mag #views,
#p-magazines.mgw{
  background:#8e110c;
  color:#f1e8d8;
  --mg-ink:#f1e8d8;
  --ink:#f1e8d8;
  --ink-2:rgba(241,232,216,.86);
  --ink-3:rgba(241,232,216,.64);
  --rule:rgba(241,232,216,.26);
  --guide:rgba(241,232,216,.5);
}
body.w-mag #hdr{--ink:#f1e8d8;--ink-2:rgba(241,232,216,.88);--ink-3:rgba(241,232,216,.7)}
body.w-mag .horb{background:#f1e8d8}
body.w-mag .hmark{color:#f1e8d8;text-shadow:none}
body.w-mag #hdr{background:linear-gradient(rgba(92,10,8,.72) 42%,rgba(92,10,8,0))}

.mg-ground{
  position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
  background:#8e110c;
}
.mg-fibre{position:absolute;inset:-2%;background-size:380px 380px;background-repeat:repeat;opacity:1}
.mg-mottle{position:absolute;inset:-4%;background-size:920px 920px;background-repeat:repeat;opacity:.18;mix-blend-mode:multiply}
.mg-lamp{position:absolute;inset:0;
  background:
    radial-gradient(70% 55% at calc(48% + var(--lx,-.4)*18%) calc(36% + var(--ly,-.6)*14%),rgba(255,170,130,.16),transparent 58%),
    radial-gradient(120% 100% at 50% 80%,rgba(40,0,0,0) 30%,rgba(32,0,0,.42));
}

.mg{position:relative;z-index:1;max-width:1680px;margin:0 auto;padding:0 var(--gut) clamp(64px,10vh,120px)}
.mg-run{position:relative;height:300vh}
.mg-stage{
  position:sticky;top:0;height:100vh;height:100dvh;box-sizing:border-box;
  display:flex;flex-direction:column;
  padding:104px var(--gut) 28px;
  z-index:1;
}
.mg-top{
  display:flex;justify-content:space-between;gap:16px;
  color:var(--ink-3);font-size:10px;letter-spacing:.22em;
}
.mg-h1{
  position:relative;overflow:visible;
  font:400 clamp(64px,10.2vw,164px)/.84 var(--display);
  letter-spacing:-.028em;color:var(--mg-ink);
  margin:.04em 0 .02em -.03em;padding-top:.08em;
  white-space:nowrap;max-width:100%;
  transform:translateY(calc(var(--word-lift,0) * -1.6vh)) rotate(-.55deg);
  transform-origin:0 80%;
}
.mg-halo{
  position:absolute;left:38%;top:58%;z-index:0;pointer-events:none;
  width:min(140vw,1600px);height:min(82vh,780px);
  transform:translate(calc(-40% + var(--hx,0px)),-56%) scale(var(--halo-s,1.7));
  background:
    radial-gradient(ellipse 42% 38% at 50% 46%,
      rgba(255,244,228,calc(var(--halo-a,1) * .92)) 0%,
      rgba(255,150,96,calc(var(--halo-a,1) * .55)) 24%,
      rgba(255,60,32,calc(var(--halo-a,1) * .22)) 48%,
      rgba(160,12,6,0) 74%);
  filter:blur(calc(var(--halo-b,48) * 1px));
}
.mg-word{
  position:relative;z-index:1;display:inline-block;
  text-shadow:
    0 0 calc(var(--halo-b,48) * 1.15px) rgba(255,196,160,calc(var(--halo-a,1) * .95)),
    0 0 calc(var(--halo-b,48) * 2.4px) rgba(255,54,28,calc(var(--halo-a,1) * .55)),
    0 1px 0 rgba(70,6,4,.4);
}
.mg-lede{
  position:relative;z-index:1;
  font:italic 400 clamp(22px,2.1vw,32px)/1.22 var(--display);
  letter-spacing:-.01em;max-width:14em;color:var(--mg-ink);
  margin:0 0 clamp(8px,1.4vh,18px);
  opacity:calc(0.55 + 0.4 * (1 - var(--word-lift,0)));
  text-shadow:0 0 18px rgba(255,80,48,calc(var(--halo-a,1) * .35));
}
.mg-read{
  flex:1;min-height:0;display:grid;place-items:center;
  opacity:var(--book,0);
  transform:translateY(calc((1 - var(--book,0)) * 42px));
}
.mg > .voyage{color:var(--mg-ink);border:0;margin-top:clamp(28px,5vh,64px)}
.mg > .voyage > .doorway{border:0;color:inherit}

@media (max-width:820px){
  .mg-run{height:260vh}
  .mg-stage{padding-top:92px}
  .mg-h1{white-space:normal;transform:translateY(calc(var(--word-lift,0) * -3vh))}
}
@media (prefers-reduced-motion:reduce){
  .mg-h1,.mg-read{transform:none !important}
  .mg-halo{filter:blur(18px);transform:translate(-40%,-56%) scale(1.05)}
  .mg-read{opacity:1}
  .silk-cover{display:none}
  .silk-book{width:min(92vw,720px);height:min(48vh,440px)}
}