/* demo50 "Gallery Issue" — DEPO galleries as morphing compositions; a gallery opens as an issue.
   Composition, mask and caption styles adapted from blacklead-studio's CodePen "DICH™" (see the doc). */

:root {
  --bg: #FFFDF3;
  --ink: #0D0D0D;
  --muted: #5d5a52;
  --rule: rgba(13, 13, 13, .16);

  --dur: 1.5s;                          /* transition duration */
  --ease: cubic-bezier(.75, 0, 0, 1);   /* sharp start, long settle */
  --parallax-scale: 1.1;                /* image scale inside the mask */
  --hover: .3s;                         /* header micro-interactions */

  --sans: 'Inter Tight', 'Helvetica Neue', Arial, sans-serif;
  --serif: 'Newsreader', Georgia, serif;
}

* { box-sizing: border-box; margin: 0; padding: 0 }

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-family: var(--sans);
  text-transform: uppercase;
  font-weight: 600;
  background: var(--bg);
  color: var(--ink);
  font-size: max(0.9vw, 11px);
  line-height: 100%;
  letter-spacing: -0.02em;
  overflow: clip;
  position: relative;
}

img { display: block; max-width: 100% }
a { color: inherit }

.skip {
  position: absolute; left: 8px; top: -40px; z-index: 20000;
  background: var(--ink); color: var(--bg); padding: 8px 10px; text-decoration: none;
}
.skip:focus { top: 8px }

.page {
  margin: 0 auto;
  padding: 2.4vw 1.35vw 5.4vw;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

/* --- Header and footer --------------------------------------------------- */

.topbar {
  position: absolute;
  inset: 5px 6px auto 6px;
  z-index: 9999;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  color: var(--bg);
  mix-blend-mode: exclusion;
}

.topbar-title {
  position: absolute;
  top: 1px;
  left: var(--title-x, 38vw);
  transition: left var(--dur) var(--ease);
}
.topbar-title a { text-decoration: none }
.topbar-nums  { text-align: end }
.topbar-gap   { margin-right: 1.23vw }
.topbar-tail  { display: inline-block; margin-right: 2.3vw }

.t-topbar-text { display: inline-block }

.footer     { position: absolute; inset: auto 6px 6px auto; line-height: 70%; text-align: end }
.footer-gap { margin-right: 1.6vw }

/* --- Canvas -------------------------------------------------------------- */

.canvas {
  position: relative;
  width: 100%;
  height: 82vh;
  height: 82dvh;
  margin-top: auto;
}

/* One class kills every transition for a frame, so a composition can be
   repositioned without motion (mirror switch, resize). */
.canvas.no-anim .item,
.canvas.no-anim .item .img,
.canvas.no-anim .item .img-inner,
.canvas.no-anim .item .top-svg,
.canvas.no-anim .scroll-card .img { transition: none }

/* --- Cards --------------------------------------------------------------- */

.item {
  position: absolute;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  transition:
    top var(--dur) var(--ease),
    left var(--dur) var(--ease),
    width var(--dur) var(--ease),
    height var(--dur) var(--ease);
  will-change: top, left, width, height;
}
.item.on { display: flex }
.item.large { cursor: pointer }
.item.large:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px }

.item .img,
.scroll-card .img {
  position: relative;
  overflow: hidden;
  width: 100%;
  clip-path: inset(0 0 0 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  background: #e9e5d6;
}

.item .img {
  flex: 1;
  min-height: 0;
  contain: paint;
  transition:
    clip-path var(--dur) var(--ease),
    height var(--dur) var(--ease);
}

.scroll-card .img {
  height: 100%;
  contain: paint;
  will-change: clip-path;
}

.p-wrap {
  position: absolute;
  inset: 0;
  will-change: transform;
}

.img-inner,
.sc-inner,
.cover-ov {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  transform: scale(var(--parallax-scale));
  transform-origin: center;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
}

.img-inner,
.sc-inner {
  background-size: cover;
  background-position: 50% 30%;
  transition: transform var(--dur) var(--ease);
}

.cover-ov { z-index: 2; will-change: clip-path }

.cover-ov-inner {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 50% 30%;
}

/* the knocked-out masthead band on top of the large card */
.top-svg {
  width: calc(100% + 3px);
  min-width: calc(100% + 3px);
  height: auto;
  position: absolute;
  inset: -0.5px auto auto -0.5px;
  z-index: 50;
  clip-path: inset(0 0 99.9% 0);
  pointer-events: none;
  transition:
    clip-path var(--dur) var(--ease),
    top var(--dur) var(--ease);
}
.item.large .top-svg { clip-path: inset(0 0 0 0) }
.item.large.to-full .top-svg { clip-path: inset(0 0 99.9% 0) }

.cut-word { font-family: var(--sans); font-weight: 800; letter-spacing: -0.04em }
.cut-no   { font-family: var(--sans); font-weight: 600; letter-spacing: -0.02em }

/* --- Scroll columns ------------------------------------------------------ */

.scroll-col {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: visible;
  display: none;
  z-index: 3;
  will-change: transform;
}
.scroll-col.on { display: block }

.scroll-card { position: absolute; left: 0; width: 100% }

/* --- Text masks ---------------------------------------------------------- */

.t-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
}

.t-text {
  display: inline-block;
  transform: translateY(120%);
  pointer-events: none;
  will-change: transform;
  --capDir: 1;
}
.t-text.is-active { pointer-events: auto }

@keyframes textEnter {
  from { transform: translateY(calc(-120% * var(--capDir))) }
  to   { transform: translateY(0%) }
}
@keyframes textExit {
  from { transform: translateY(0%) }
  to   { transform: translateY(calc(120% * var(--capDir))) }
}

.idx-mask {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  width: 0.6em;
  text-align: right;
}
.index { display: inline-block; transform: translateY(0%) }

/* --- Captions ------------------------------------------------------------ */

.item .cap,
.scroll-card .cap {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  bottom: -3vw !important;
  padding-top: 1.2vw;
}

.scroll-card .cap { position: absolute; left: 0; right: 0 }

.cap .t-text      { transform: translateY(var(--capY, 120%)) }
.cap.show .t-text { --capY: 0%; animation: textEnter var(--dur) var(--ease) both }
.cap.hide .t-text { --capY: var(--capOut, 120%); animation: textExit var(--dur) var(--ease) both }
.cap.dir-up .t-text { --capDir: -1; --capOut: -120% }

/* the caption swap on photo change is shorter than a normal entry */
.item .cap.cover-swap .t-text { animation-duration: 700ms }

.cap .t-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.cap .t-col.r { align-items: flex-end; text-align: right }

.cap .t-mask {
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
}

/* --- Text layers --------------------------------------------------------- */

.text-wrapper {
  position: absolute;
  width: 56vw;
  height: 40vh;
  display: flex;
  flex-direction: column;
  z-index: 999;
  top: 1.5vw;
  pointer-events: none;
}

.text-wrapper--main   { right: 0 }
.text-wrapper--mirror { left: 0 }
.text-wrapper--mobile { display: none }

.top-row, .middle-row, .bottom-row {
  display: grid !important;
  grid-template-areas: "stack";
  width: 100%;
}

.middle-row { margin-top: 8.8vw; position: relative }
.bottom-row { margin-top: auto }

.text-wrapper--main   .bottom-row { padding-left: 9.55vw }
.text-wrapper--mirror .bottom-row { padding-right: 9.55vw }

/* Every block in a row shares one grid cell. The visible ones are those
   whose is--N class matches the current composition. */
.visibility {
  grid-area: stack;
  display: block !important;
  pointer-events: none;
}

.svg-arrow { width: 0.9vw; min-width: 11px }

.svg-arrows {
  width: 3vw;
  min-width: 38px;
  display: flex;
  justify-content: space-between;
  pointer-events: auto;
}

/* --- Buttons and micro-interactions -------------------------------------- */

.nav-btn {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  line-height: inherit;
  cursor: pointer;
}

.nav-btn:focus { outline: none }
.nav-btn:focus-visible {
  outline: 1px solid currentColor;
  outline-offset: 2px;
}

.nav-btn.is-current { text-decoration: underline; text-underline-offset: 2px }

.open-btn {
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
}
.open-btn:hover { border-bottom-style: dashed }

.nav-num-wrapper,
.svg-arrow-wrapper {
  position: relative;
  display: inline-block;
  overflow: hidden;
  cursor: pointer;
}

.nav-num-wrapper   { margin-top: -0.23vw; vertical-align: top }
.svg-arrow-wrapper { vertical-align: middle }

.nav-num  { display: inline-block }
.svg-arrow { display: inline-flex; align-items: center; justify-content: center }
.svg-arrow svg { width: 100%; height: auto }

.nav-num.duplicate,
.svg-arrow.duplicate { position: absolute; top: 0; left: 0 }

.nav-num.duplicate,
.is--prev .svg-arrow.duplicate { transform: translateX(105%) }
.is--next .svg-arrow.duplicate { transform: translateX(-105%) }

@keyframes outLeft  { from { transform: translateX(0) }       to { transform: translateX(-105%) } }
@keyframes outRight { from { transform: translateX(0) }       to { transform: translateX(105%) } }
@keyframes inRight  { from { transform: translateX(105%) }    to { transform: translateX(0) } }
@keyframes inLeft   { from { transform: translateX(-105%) }   to { transform: translateX(0) } }

.nav-num-wrapper:hover .original,
.svg-arrow-wrapper.is--prev:hover .original,
.nav-num-wrapper:not(:hover) .duplicate,
.svg-arrow-wrapper.is--prev:not(:hover) .duplicate {
  animation: outLeft var(--hover) forwards ease-in-out;
}

.nav-num-wrapper:hover .duplicate,
.svg-arrow-wrapper.is--prev:hover .duplicate,
.nav-num-wrapper:not(:hover) .original,
.svg-arrow-wrapper.is--prev:not(:hover) .original {
  animation: inRight var(--hover) forwards ease-in-out;
}

.svg-arrow-wrapper.is--next:hover .original,
.svg-arrow-wrapper.is--next:not(:hover) .duplicate {
  animation: outRight var(--hover) forwards ease-in-out;
}

.svg-arrow-wrapper.is--next:hover .duplicate,
.svg-arrow-wrapper.is--next:not(:hover) .original {
  animation: inLeft var(--hover) forwards ease-in-out;
}

/* =========================================================================
   THE ISSUE — a gallery opened as a magazine
   ========================================================================= */

.issue {
  --acc: #cdd43c;
  --acc-ink: #0D0D0D;
  position: fixed;
  inset: 0;
  z-index: 10000;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--bg);
  color: var(--ink);
  text-transform: none;
  letter-spacing: 0;
  line-height: 1.5;
  font-weight: 400;
  font-size: 16px;
  clip-path: inset(100% 0 0 0);
  transition: clip-path var(--dur) var(--ease);
  -webkit-overflow-scrolling: touch;
}
.issue[hidden] { display: none }
.issue.is-open    { clip-path: inset(0 0 0 0) }
.issue.is-closing { clip-path: inset(0 0 100% 0) }
.issue:focus { outline: none }

.lbl {
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 12px;
  line-height: 1.1;
}

/* the issue's own bar */
.ibar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  padding: 8px 10px;
  color: #fff;
  mix-blend-mode: difference;
  pointer-events: none;
}
.ibar > * { pointer-events: auto; justify-self: start }
.ibar > .ibar__mid { justify-self: center; text-align: center }
.ibar__end { justify-self: end; display: flex; gap: 18px; align-items: start }
.ibar .nav-btn { text-transform: uppercase }
.ibar__prog { font-variant-numeric: tabular-nums; min-width: 4ch; text-align: right }

/* reveal: lines rise out of a mask, blocks slide in, photos open */
.ln { display: block; overflow: hidden; padding-bottom: .04em; margin-bottom: -.04em }
.ln > span {
  display: inline-block;
  transform: translateY(112%);
  transition: transform 1.2s var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms));
}
.in .ln > span, .ln.in > span { transform: none }

.rv {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s ease, transform 1.2s var(--ease);
  transition-delay: var(--d, 0ms);
}
.rv.in { opacity: 1; transform: none }

/* the mask sits on the inner layer: IntersectionObserver ignores a target clipped to nothing */
.ph {
  position: relative;
  overflow: hidden;
}
.ph__in {
  position: absolute;
  inset: -8% 0;
  background: #e9e5d6;
  clip-path: inset(100% 0 0 0);
  transform: scale(1.18);
  transition: clip-path 1.4s var(--ease), transform 1.8s var(--ease);
  transition-delay: var(--d, 0ms);
}
.ph.in .ph__in { clip-path: inset(0 0 0 0); transform: scale(1) }
.ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform;
}

.cap-line {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 10px;
  color: var(--muted);
}

/* 1 — cover */
.icover {
  position: relative;
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
  color: #FFFDF3;
  overflow: hidden;
}
.icover .ph { position: absolute; inset: 0 }
.icover .ph__in { inset: -6% 0; clip-path: none; transition: transform 1.8s var(--ease) }
.icover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 8, 6, .62), rgba(8, 8, 6, 0) 52%),
              linear-gradient(to bottom, rgba(8, 8, 6, .28), rgba(8, 8, 6, 0) 30%);
  pointer-events: none;
}
.icover__mast {
  position: absolute;
  z-index: 2;
  left: 1.1vw;
  right: 1.1vw;
  top: 4.2vh;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 19vw;
  line-height: .78;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}
.icover__meta {
  position: absolute;
  z-index: 2;
  left: 1.35vw;
  right: 1.35vw;
  top: calc(4.2vh + 15.6vw);
  display: flex;
  justify-content: space-between;
}
.icover__title {
  position: absolute;
  z-index: 2;
  left: 1.1vw;
  bottom: 3.4vh;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 8.4vw;
  line-height: .84;
  letter-spacing: -0.055em;
  text-transform: uppercase;
}
.icover__lines {
  position: absolute;
  z-index: 2;
  right: 1.35vw;
  bottom: 3.6vh;
  list-style: none;
  text-align: right;
  display: grid;
  gap: 6px;
}
.icover__cue {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 3.6vh;
  transform: translateX(-50%);
}

/* 2 — contents */
.icont {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4vw;
  padding: 16vh 1.35vw 14vh;
  align-items: start;
}
.icont__cover { aspect-ratio: 4 / 5; box-shadow: 0 40px 60px -40px rgba(13, 13, 13, .55) }
.icont__side { padding-top: 2vh }
.icont__list { list-style: none; margin: 26px 0 0; border-top: 1px solid var(--ink) }
.icont__list li {
  display: grid;
  grid-template-columns: 4.5rem 1fr auto;
  gap: 12px;
  align-items: baseline;
  padding: 14px 0 13px;
  border-bottom: 1px solid var(--rule);
}
.icont__list .p { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--muted) }
.icont__list .t { font-family: var(--sans); font-weight: 600; font-size: clamp(18px, 2vw, 30px); letter-spacing: -0.035em; line-height: 1.05 }
.icont__list .k { color: var(--muted) }
.icont__stand {
  font-family: var(--serif);
  font-size: clamp(20px, 1.9vw, 30px);
  line-height: 1.3;
  margin-top: 8vh;
  max-width: 34ch;
}

/* 3 — feature opener */
.ifeat { padding: 6vh 1.35vw 10vh; border-top: 1px solid var(--ink) }
.ifeat__head { display: grid; grid-template-columns: 1fr; gap: 3vh; padding-top: 2vh }
.ifeat__top { display: flex; justify-content: space-between }
.ifeat__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 13.6vw;
  line-height: .82;
  letter-spacing: -0.065em;
  text-transform: uppercase;
}
.ifeat__deck {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(22px, 2.3vw, 38px);
  line-height: 1.2;
  max-width: 30ch;
  margin-left: auto;
  margin-right: 8vw;
}
.credits {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 18px;
  margin: 8vh 0 9vh;
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.credits div { display: grid; gap: 6px }
.credits dt { color: var(--muted) }
.credits dd { font-family: var(--serif); font-size: 17px; line-height: 1.25 }

.ifeat__body {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 4vw;
  align-items: start;
}
.prose {
  font-family: var(--serif);
  font-size: clamp(17px, 1.22vw, 20px);
  line-height: 1.6;
  columns: 2;
  column-gap: 2.6vw;
}
.prose p + p { text-indent: 1.6em }
.prose .drop::first-letter {
  float: left;
  font-family: var(--sans);
  font-weight: 800;
  font-size: 5.6em;
  line-height: .78;
  letter-spacing: -0.06em;
  padding: .05em .08em 0 0;
  color: var(--ink);
  background: var(--acc);
  margin: .04em .12em 0 0;
  padding: .08em .1em .02em .06em;
}
.ifeat__fig { position: sticky; top: 9vh }
.ifeat__fig .ph { aspect-ratio: 4 / 5 }

/* 4 — spread */
.ispread {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.3vw;
  padding: 6vh 1.35vw 14vh;
  align-items: start;
}
.ispread__a { grid-column: 1 / span 7 }
.ispread__b { grid-column: 9 / span 4; margin-top: 30vh }
.ispread__a .ph { aspect-ratio: 4 / 5 }
.ispread__b .ph { aspect-ratio: 4 / 5 }
.ispread__note {
  grid-column: 9 / span 4;
  grid-row: 1;
  font-family: var(--serif);
  font-size: clamp(18px, 1.4vw, 23px);
  line-height: 1.45;
  align-self: start;
}

/* 5 — pull quote */
.iquote {
  background: var(--acc);
  color: var(--acc-ink);
  padding: 18vh 1.35vw 16vh;
  display: grid;
  grid-template-columns: 2fr 10fr;
  gap: 1.3vw;
}
.iquote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 5.1vw;
  line-height: 1.02;
  letter-spacing: -0.02em;
}
.iquote figcaption { margin-top: 6vh }

/* 6 — full bleed */
.ibleed { position: relative; height: 118vh; color: #FFFDF3 }
.ibleed .ph { position: absolute; inset: 0 }
.ibleed .ph__in { inset: -14% 0 }
.ibleed__cap {
  position: absolute;
  z-index: 2;
  left: 1.35vw;
  right: 1.35vw;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  mix-blend-mode: difference;
  color: #fff;
}

/* 7 — interview */
.iqa {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 4vw;
  padding: 16vh 1.35vw 12vh;
}
.iqa__head h3 {
  font-family: var(--sans);
  font-weight: 600;
  text-transform: uppercase;
  font-size: 4.2vw;
  line-height: .9;
  letter-spacing: -0.05em;
  margin-top: 16px;
}
.iqa__head .ph { aspect-ratio: 1; width: 52%; margin-top: 5vh }
.iqa__list { display: grid; gap: 5vh }
.iqa__q {
  font-family: var(--sans);
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 24px);
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin-bottom: 12px;
}
.iqa__a {
  font-family: var(--serif);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.55;
  max-width: 52ch;
}
.iqa__more {
  font-family: var(--serif);
  font-size: clamp(17px, 1.3vw, 21px);
  line-height: 1.55;
  max-width: 52ch;
  border-top: 1px solid var(--rule);
  padding-top: 5vh;
}

/* 8 — more from the shoot */
.imore {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.3vw;
  padding: 4vh 1.35vw 16vh;
  align-items: start;
}
.imore__head { grid-column: 1 / -1; display: flex; justify-content: space-between; border-top: 1px solid var(--ink); padding-top: 10px; margin-bottom: 4vh }
.imore figure:nth-of-type(2) { margin-top: 18vh }
.imore figure:nth-of-type(3) { margin-top: 7vh }
.imore .ph { aspect-ratio: 4 / 5 }

/* 9 — next issue */
.inext {
  position: relative;
  border-top: 1px solid var(--ink);
  padding: 3vh 1.35vw 2vh;
  min-height: 92vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.inext__top { display: flex; justify-content: space-between }
.inext__go {
  display: grid;
  grid-template-columns: 1fr 22vw;
  gap: 2vw;
  align-items: end;
  text-align: left;
  width: 100%;
  margin-top: 6vh;
  text-transform: uppercase;
}
.inext__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 11vw;
  line-height: .84;
  letter-spacing: -0.065em;
}
.inext__go .ph { aspect-ratio: 4 / 5 }
.inext__go:hover .inext__title,
.inext__go:focus-visible .inext__title { font-style: italic }
.inext__foot {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-top: 4vh;
  color: var(--muted);
}
.inext__foot a { text-underline-offset: 2px }

/* --- Phones -------------------------------------------------------------- */

@media (max-width: 760px) {
  .page { padding: 34px 12px 44px }
  .topbar-title { left: 50%; transform: translateX(-50%) }
  .text-wrapper--main, .text-wrapper--mirror { display: none }
  .text-wrapper--mobile {
    display: flex;
    left: 0;
    right: 0;
    width: auto;
    top: calc(57% + 12px);
    height: calc(19% - 22px);
  }
  .text-wrapper--mobile .middle-row { margin-top: 10px }
  .text-wrapper--mobile .bottom-row { padding: 0 }
  .item .cap, .scroll-card .cap { display: none !important }
  .footer { display: none }

  .issue { font-size: 15px }
  .ibar__mid { display: none }
  .ibar { grid-template-columns: 1fr 1fr }
  .icover__mast { font-size: 22vw; top: 54px }
  .icover__meta { top: calc(54px + 18vw) }
  .icover__title { font-size: 14vw; bottom: 120px }
  .icover__lines { left: 1.35vw; text-align: left; bottom: 20px }
  .icover__cue { display: none }
  .icont, .ifeat__body, .iqa, .iquote { grid-template-columns: 1fr }
  .icont { padding: 10vh 14px 8vh }
  .ifeat, .ispread, .imore, .iqa, .inext { padding-left: 14px; padding-right: 14px }
  .iquote { padding: 12vh 14px }
  .ifeat__title { font-size: 17vw }
  .ifeat__deck { margin-right: 0 }
  .credits { grid-template-columns: 1fr 1fr }
  .prose { columns: 1 }
  .ifeat__fig { position: static }
  .ispread { grid-template-columns: 1fr 1fr; gap: 12px }
  .ispread__a { grid-column: 1 / -1 }
  .ispread__b { grid-column: 2; margin-top: 0 }
  .ispread__note { grid-column: 1; grid-row: auto }
  .iquote blockquote { font-size: 10vw }
  .iqa__head h3 { font-size: 11vw }
  .imore { grid-template-columns: 1fr 1fr }
  .imore figure:nth-of-type(3) { display: none }
  .inext__go { grid-template-columns: 1fr; }
  .inext__go .ph { width: 52%; justify-self: end }
  .inext__title { font-size: 17vw }
  .inext__foot { flex-direction: column }
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: .01s }
  .ln > span, .rv, .ph, .ph__in { transition-duration: .01s !important; transition-delay: 0s !important }
}