:root{--paper:#141311;--ink:#eee8dc;--muted:#b6afa3;--accent:#e2a579;--line:#eee8dc30;--art-mat:#211e19}

.header{position:absolute;z-index:5;inset:0 0 auto;height:100px;color:#fff4e6;padding-inline:4%}.header .wordmark{font-size:23px}.theme-toggle{border-color:#fff4e650;background:#19120d35}.theme-toggle:hover{background:#19120d80}.portrait-story{height:180svh;position:relative}.portrait-stage{height:100svh;min-height:650px;position:sticky;top:0;overflow:hidden;isolation:isolate;background:var(--paper)}.portrait-window{position:absolute;inset:0;clip-path:inset(var(--crop,0%) var(--crop-x,0%));overflow:hidden;z-index:-2}.portrait-window img{width:100%;height:100%;object-fit:cover;object-position:65% 33%;transform:scale(var(--zoom,1));filter:brightness(.87)}.portrait-shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#1c100dbb,transparent 70%),linear-gradient(0deg,#17120d99,transparent 30%);opacity:var(--shade,1);pointer-events:none}.portrait-brand{position:absolute;left:4%;top:19%;opacity:var(--intro,1)}.portrait-brand img{width:clamp(90px,12vw,180px)}.portrait-title{position:absolute;left:4%;bottom:17%;opacity:var(--intro,1);transform:translateY(var(--title-y,0px));color:#fff2df}.portrait-title h1{font-size:clamp(45px,6.9vw,100px);line-height:1.03;letter-spacing:-.04em}.portrait-title em,.chapter-word em{font-family:Georgia,serif;font-weight:400;letter-spacing:-.055em}.portrait-bottom{position:absolute;inset:auto 4% 30px;display:flex;align-items:center;justify-content:space-between;color:#fff2df;opacity:var(--intro,1);font-size:12px}.portrait-bottom>a{display:flex;gap:45px;align-items:center;border-bottom:1px solid #fff2df70;padding:12px 0}.portrait-bottom>a span{font-size:24px}.chapter-word{position:absolute;inset:20% auto auto 7%;font-size:clamp(70px,12vw,180px);line-height:.95;letter-spacing:-.04em;opacity:var(--outro,0);transform:translateY(var(--outro-y,30px));pointer-events:none;color:var(--ink)}.now-playing{margin:0 4%;padding:35px 0}.release{padding:100px 7% 140px}.release-grid{max-width:1400px;grid-template-columns:1.05fr 1fr;gap:12%}.artwork{padding:0;transform:rotate(-3deg)}.release-copy h2{font-size:clamp(60px,8vw,110px)}.release-description{margin-top:25px}.section-heading{margin-bottom:70px}.connect{padding-block:70px}.connect h2{font-family:Georgia,serif;font-style:italic;font-size:clamp(40px,5vw,70px)}
@media(width <= 700px){.header{height:78px;padding-inline:23px}.portrait-stage{min-height:680px}.portrait-window img{object-position:61% 30%}.portrait-title{left:24px;bottom:19%}.portrait-title h1{font-size:clamp(40px,10vw,64px)}.portrait-brand{left:24px;top:16%}.portrait-brand img{width:88px}.portrait-shade{background:linear-gradient(0deg,#1c100de0,transparent 85%),linear-gradient(90deg,#1c100d65,transparent 70%)}.portrait-bottom{inset:auto 24px 25px;font-size:10px;flex-wrap:wrap;gap:12px}.portrait-bottom>a{gap:16px}.portrait-bottom .motion{position:absolute;bottom:56px;right:0}.chapter-word{font-size:80px;inset:25% auto auto 24px}.release{padding:60px 24px 70px}.release-grid{grid-template-columns:1fr;gap:44px}.section-heading{margin-bottom:44px}.release-copy h2{font-size:65px}.now-playing{margin-inline:24px}.connect{padding-block:45px}}

body.motion-paused .portrait-story{height:100svh;min-height:680px}body.motion-paused .portrait-stage{position:relative}body.motion-paused .chapter-word{display:none}body.motion-paused .portrait-window{clip-path:none!important}body.motion-paused .portrait-title,body.motion-paused .portrait-brand,body.motion-paused .portrait-bottom,body.motion-paused .portrait-shade{opacity:1!important;transform:none!important}

/* The photograph and its peripheral colour share one full-bleed field. */
.portrait-window{clip-path:none;opacity:var(--photo-opacity,1);background:#75321b}

.portrait-window img{position:absolute;right:0;top:0;width:auto;height:125%;max-inline-size:none;object-fit:fill;filter:brightness(.92);transform-origin:75% 35%;mask-image:linear-gradient(90deg,transparent,#000 32%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 32%)}
.portrait-stage::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(0deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 97%,transparent) 5%,color-mix(in srgb,var(--paper) 70%,transparent) 19%,color-mix(in srgb,var(--paper) 24%,transparent) 40%,transparent 68%)}
.portrait-shade{background:linear-gradient(90deg,#20100a85 0%,#20100a38 35%,transparent 72%)}
.portrait-brand{mix-blend-mode:soft-light}
.portrait-brand img{opacity:1;filter:none;width:clamp(110px,13vw,185px)}
.portrait-title{right:4%}
.portrait-title h1{font-size:clamp(44px,5.7vw,82px);line-height:1.12;letter-spacing:-.025em}
.portrait-title em,.chapter-word em{font-family:Manrope,sans-serif;font-style:normal;letter-spacing:inherit}
.chapter-word{font-size:clamp(65px,9vw,130px);line-height:1.05;letter-spacing:-.025em}
.connect h2{font-family:Manrope,sans-serif;font-style:normal;font-size:clamp(36px,4.5vw,60px);letter-spacing:-.025em}
.release-copy h2{font-size:clamp(56px,7vw,96px);letter-spacing:-.025em}.artwork{transform:none}
.portrait-bottom{color:var(--ink)}.portrait-bottom>a{border-color:var(--line)}
.now-playing{border-bottom-color:var(--line);padding-top:24px}
@media(width <= 700px){.portrait-window img{right:-14%;top:0;width:128%;height:auto;mask-image:linear-gradient(#000 55%,transparent 100%);-webkit-mask-image:linear-gradient(#000 55%,transparent 100%)}.portrait-title{bottom:18%;right:24px}.portrait-title h1{font-size:clamp(30px,8.4vw,52px);overflow-wrap:normal}.portrait-brand{top:43%}.portrait-brand img{width:96px}.portrait-stage::after{background:linear-gradient(0deg,var(--paper) 0%,color-mix(in srgb,var(--paper) 95%,transparent) 10%,color-mix(in srgb,var(--paper) 55%,transparent) 35%,transparent 70%)}}

body.motion-paused .portrait-window{opacity:1!important}

/* A single editorial grid carries the image into the listening sections. */
:root{--gutter:clamp(24px,5vw,96px);--content:1440px;color-scheme:dark}
.portrait-window{background:radial-gradient(ellipse at 78% 30%,#d96924 0%,#a03a17 42%,#512819 80%)}
.portrait-brand{display:none}

.header{padding-inline:var(--gutter)}
.portrait-title{left:var(--gutter)}
.portrait-bottom{left:var(--gutter);right:var(--gutter)}
.now-playing,.release,.connect,footer{width:calc(100% - var(--gutter)*2);max-width:var(--content);margin-inline:auto;box-sizing:border-box}
.now-playing{padding-block:40px;border-top:0;border-bottom:1px solid var(--line);gap:32px}
.release{padding:64px 0 96px}
.section-heading{display:flex;justify-content:flex-end;margin:0 0 32px;padding:0}
.release-grid{width:100%;max-width:none;margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
.artwork{padding:0;width:100%;display:block}
.release-copy{padding:0;min-width:0}
.release-copy h2{margin:0;font-size:clamp(52px,5.5vw,88px)}
.release-description{max-width:none;margin:24px 0;font-size:15px;line-height:1.7}
.connect{padding:64px 0 72px;border-top:1px solid var(--line);gap:48px;background:transparent}
footer{padding:28px 0;border-top:1px solid var(--line)}
@media(width <= 700px){.now-playing{gap:20px;padding-block:28px}.release{padding:40px 0 56px}.release-grid{grid-template-columns:1fr;gap:32px}.section-heading{margin-bottom:24px}.connect{padding-block:40px;gap:28px}.header nav a:last-child{display:block}.portrait-title{right:var(--gutter)}}

/* Keep the brand in the backdrop, beneath the sharp portrait. */

.portrait-window img{z-index:1}
/* The release continues the immersive image-led composition. */
.release{position:relative;isolation:isolate;width:100%;max-width:none;min-height:850px;margin:0;padding:100px var(--gutter);overflow:hidden;display:flex;flex-direction:column;justify-content:center;background:#141311}
.release .section-heading{position:relative;z-index:2;margin:0 0 65px}
.release-grid{display:block;margin:0;max-width:1440px;margin-inline:auto}
.release .artwork{position:absolute;inset:0 0 0 22%;width:78%;z-index:-1;pointer-events:none;overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 42%),linear-gradient(transparent,#000 20%,#000 70%,transparent);mask-composite:intersect}
.release .artwork img{width:100%;height:100%;object-fit:cover;opacity:.48;transform:scale(1.08)}
.release-copy{position:relative;max-width:540px}
.release-copy h2{font-size:clamp(76px,12vw,180px);line-height:1;letter-spacing:-.04em;margin-left:-.04em}
.release-description{margin:30px 0;color:#d5cec0}
.release .preview-player{margin-top:30px;background:#14131140}
.release .release-link{margin-top:20px}
.release .release-date{margin-top:24px}
.connect{padding-block:80px;align-items:start}.connect h2{font-size:clamp(48px,6vw,90px);line-height:1.05;max-width:7ch}.socials{margin-top:8px;gap:30px 42px}
@media(min-width:1500px){.now-playing,.connect,footer{padding-inline:0}.header{padding-inline:var(--gutter)}}
@media(max-width:700px){.release{min-height:800px;padding:65px 24px}.release .section-heading{margin-bottom:90px}.release .artwork{inset:0;width:100%;mask-image:linear-gradient(transparent,#000 15%,#000 35%,transparent 90%);mask-composite:add}.release .artwork img{opacity:.33}.release-copy h2{font-size:clamp(66px,17vw,100px)}.release-copy{max-width:100%}.connect{padding-block:48px}.connect h2{max-width:none;font-size:46px}.socials{margin-top:32px}}
/* Match the hero's actual page edges at every viewport, including wide screens. */
.now-playing,.connect,footer{max-width:none;width:calc(100% - 2 * var(--gutter));margin-inline:var(--gutter);padding-inline:0}
.release-grid{max-width:none;margin:0;width:100%}
.release{min-height:820px;padding:80px var(--gutter) 110px;background:radial-gradient(ellipse at 80% 45%,#49372038,transparent 65%),var(--paper)}
.release .section-heading{margin-bottom:80px}
.release-copy{max-width:560px}
.release-copy h2{margin:0;font-size:clamp(72px,8vw,128px);line-height:1.06;letter-spacing:-.025em;color:#f0e5d0}
.release .artwork{inset:0 0 0 28%;width:72%;mask-image:linear-gradient(90deg,transparent,#000 55%),linear-gradient(transparent,#000 24%,#000 64%,transparent);mask-composite:intersect}
.release .artwork img{opacity:.66;transform:none;object-position:center}
.release-description{margin:32px 0 36px;max-width:38ch;line-height:1.9}
.release .preview-player{background:none;padding-block:24px;border-top-color:#e2a57945;border-bottom-color:#e2a57945}
.release .release-link{padding-block:26px 20px;border-bottom-color:#e2a57980}
.release .release-date{margin-top:28px}
.connect{display:block;padding-block:60px 76px;border-top:0}
.connect h2{max-width:none;font-size:clamp(46px,5.7vw,82px);letter-spacing:-.025em}
.connect .socials{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px;margin-top:50px;min-width:0}
.connect .socials a{font-size:14px;padding:0 0 20px;border-bottom-color:#e2a57950;transition:color .25s,border-color .25s}
.connect .socials a:hover{color:var(--accent);border-bottom-color:var(--accent)}
@media(max-width:700px){.release{min-height:740px;padding:48px var(--gutter) 70px}.release .section-heading{margin-bottom:65px}.release-copy h2{font-size:clamp(62px,17vw,90px)}.release .artwork{inset:0;width:100%;mask-image:linear-gradient(transparent,#000 20%,transparent 85%);mask-composite:add}.release .artwork img{opacity:.25}.release-copy{max-width:100%}.release-description{margin-block:25px 30px}.connect{padding-block:40px 55px}.connect h2{font-size:42px}.connect .socials{grid-template-columns:1fr 1fr;gap:30px;margin-top:32px}}

/* One page rail. The hero sets the edges; every section below sits on the same ones. */
:root{--rail:var(--gutter)}
.header{padding-inline:var(--rail)}
.portrait-title{left:var(--rail);right:var(--rail)}
.portrait-bottom{left:var(--rail);right:var(--rail)}
.chapter-word{inset:20% auto auto var(--rail)}
.now-playing,.connect,footer{width:calc(100% - 2 * var(--rail));max-width:none;margin-inline:var(--rail);padding-inline:0}
.release{padding-inline:var(--rail)}
.release .section-heading,.release-grid,.release-copy h2{margin-inline:0}

/* The monogram is backdrop light, not a sticker: it dissolves before it reaches him. */
.portrait-window::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  --stage-h:max(650px,100svh);
  --brand-stop:calc(100% - .78 * var(--stage-h));
  --brand-w:min(38vw,470px,max(0px,calc(var(--brand-stop) - var(--gutter) - 40px)));
  background:url('assets/logo.png') no-repeat;
  background-size:var(--brand-w) auto;
  background-position:var(--gutter) 22%;
  filter:blur(4px);
  opacity:.3;
  mix-blend-mode:soft-light;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(var(--brand-stop) - 26%),transparent var(--brand-stop));
  mask-image:linear-gradient(90deg,#000 0%,#000 calc(var(--brand-stop) - 26%),transparent var(--brand-stop));
}
@media(width <= 700px){
  /* The portrait covers the full frame here, so the monogram has nowhere to live. */
  .portrait-window::before{display:none}
}

/* Entrance cascade. Scripts opt the page in, so without JS everything is simply present. */
.portrait-title h1 .line,.chapter-word .line{display:block}
.cascade .fade-item{opacity:0;transform:translateY(22px);filter:blur(10px)}
.cascade .fade-item.is-in{opacity:1;transform:none;filter:none;
  transition:opacity .9s cubic-bezier(.16,1,.3,1) var(--d,0ms),
             transform 1.05s cubic-bezier(.16,1,.3,1) var(--d,0ms),
             filter .9s cubic-bezier(.16,1,.3,1) var(--d,0ms)}
.cascade .release .artwork.fade-item{transform:scale(1.04);filter:blur(14px)}
.cascade .release .artwork.fade-item.is-in{transform:none;filter:none}


/* Afterglow: an editorial release spread, using the cover as an object. */
.release{display:block;min-height:0;padding:84px var(--gutter) 100px;background:radial-gradient(ellipse at 82% 38%,#9b572533,transparent 56%),var(--paper);overflow:hidden}
.release .section-heading{margin:0 0 40px}
.release-display{position:relative;z-index:2;font-size:clamp(88px,13vw,196px);font-weight:400;line-height:.98;letter-spacing:-.04em;color:#eee8dc;margin:0 0 0 -.035em}
.release-display span{color:#d7a26d}
.release-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12%;align-items:end;margin-top:-30px;padding-bottom:25px}
.release .artwork{position:relative;inset:auto;grid-column:2;grid-row:1;width:100%;z-index:1;pointer-events:auto;mask-image:none;-webkit-mask-image:none;overflow:visible;padding:16px;background:#29231b;border:1px solid #c9a67740;transform:rotate(3deg);box-shadow:14px 35px 70px #0005}
.release .artwork img{width:100%;height:auto;aspect-ratio:1;object-fit:contain;opacity:1;transform:none}
.release .artwork:hover{transform:rotate(0deg)}
.release .artwork{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.release-copy{grid-column:1;grid-row:1;max-width:none;padding:100px 0 24px}
.release-description{font-size:17px;line-height:1.8;margin:0 0 52px;max-width:35ch;color:#e6dbca}
.release-description span{color:#bdb2a1}
.release .preview-player{padding-block:26px;border-top-color:#c9a67760;border-bottom-color:#c9a67730}
.release .play-preview{width:60px;height:60px;background:#e5bb8e;border:0;color:#22180f}
.release .release-link{margin-top:24px;padding-block:18px 22px;font-size:14px}
.release .release-date{margin-top:22px;font-size:11px}
.connect{position:relative;padding-block:70px 90px;border-top:1px solid #d6b28c40}
.connect h2{font-size:clamp(48px,7vw,110px);max-width:none;letter-spacing:-.035em}
.connect .socials{margin-top:52px;gap:42px}
.connect .socials a{font-size:16px;padding-bottom:24px}
@media(max-width:700px){.release{padding:50px var(--gutter) 65px}.release .section-heading{margin-bottom:35px}.release-display{font-size:clamp(60px,17vw,110px);margin:0}.release-grid{grid-template-columns:1fr;margin-top:28px;gap:35px;padding:0}.release .artwork{grid-column:1;grid-row:1;width:88%;justify-self:end;padding:10px;transform:rotate(2deg)}.release-copy{grid-column:1;grid-row:2;padding:0}.release-description{font-size:15px;margin-bottom:30px}.release .play-preview{width:50px;height:50px}.connect{padding-block:45px 60px}.connect h2{font-size:44px}.connect .socials{gap:28px;margin-top:36px}.connect .socials a{font-size:14px}}

/* More restrained scale for the release and closing section. */
.release{padding-block:60px 70px}
.release-display{font-size:clamp(56px,7.5vw,112px);letter-spacing:-.025em}
.release-grid{margin-top:24px;gap:10%;grid-template-columns:1.1fr .9fr}
.release .artwork{max-width:480px;justify-self:end;padding:10px}
.release-copy{padding:30px 0 12px}
.release-description{font-size:15px;margin-bottom:32px}
.release .play-preview{width:46px;height:46px}
.release .preview-player{padding-block:20px}
.connect{padding-block:45px 60px}
.connect h2{font-size:clamp(32px,3.8vw,56px)}
.connect .socials{margin-top:32px}
.connect .socials a{font-size:13px;padding-bottom:18px}
@media(max-width:700px){.release{padding-block:40px 50px}.release-display{font-size:clamp(48px,12vw,64px)}.release-grid{grid-template-columns:1fr;gap:30px}.release .artwork{max-width:280px;width:82%}.release-copy{padding:0}.connect h2{font-size:32px}}

/* A short dissolve directly into the listening section, without an interstitial. */
.portrait-story{height:130svh}.chapter-word{display:none}
@media(max-width:700px){.release .artwork{width:100%;max-width:none;justify-self:start;transform:none}.release .artwork.fade-item.is-in{transform:none}.release-description{width:100%;max-width:none;text-align:center;margin-inline:auto}.release-display{margin-left:0}.header nav{gap:16px;font-size:11px}}

/* Normal document flow prevents a blank sticky viewport after the portrait. */
.portrait-story{height:100svh;min-height:650px}.portrait-stage{position:relative;height:100%;min-height:650px}
@media(max-width:700px){.portrait-story,.portrait-stage{min-height:680px}}

/* Quiet, fine-weight portrait typography. */
.portrait-title h1,.portrait-title h1 em{font-family:Manrope,"Helvetica Neue",Arial,sans-serif;font-weight:300;font-style:normal;letter-spacing:-.045em;line-height:1.08}
.portrait-title h1 .line{text-transform:lowercase}
.portrait-title h1 .line:first-child::first-letter{text-transform:uppercase}

/* Now playing. The record is a link, and a change crossfades rather than
   snapping — the sleeve is preloaded so the art and the text arrive together. */
.np-track{display:flex;align-items:center;gap:13px;min-width:0;color:inherit;text-decoration:none}
.np-track[href]{cursor:pointer}
.np-track[href]:hover .np-title{color:var(--accent)}
.np-track[href]:hover .np-art{opacity:.86}
.np-info{display:block;min-width:0}
.np-title{display:block}
.np-artist{display:block}
.np-art{transition:opacity .25s ease}
.np-cover{position:relative;flex:none;display:inline-flex;width:40px;height:40px}
.np-cover[hidden]{display:none}
/* Three bars on the corner of the sleeve: enough to say "this is live" and no
   more. They run only while something is actually playing. */
.np-eq{position:absolute;right:3px;bottom:3px;display:none;align-items:flex-end;gap:2px;
  height:11px;padding:2px 3px;border-radius:2px;background:#0f0f0fb3}
.np-eq i{display:block;width:2px;height:3px;background:var(--accent);border-radius:1px;
  transform-origin:50% 100%}
.is-playing .np-eq{display:flex}
.is-playing .np-eq i{animation:np-bar .9s ease-in-out infinite alternate}
.is-playing .np-eq i:nth-child(2){animation-duration:.66s;animation-delay:-.22s}
.is-playing .np-eq i:nth-child(3){animation-duration:1.05s;animation-delay:-.45s}
@keyframes np-bar{from{height:3px}to{height:9px}}
@media(prefers-reduced-motion:reduce){
  /* Still an indicator, just not a moving one. */
  .is-playing .np-eq i{animation:none;height:8px}
  .is-playing .np-eq i:nth-child(2){height:4px}
  .is-playing .np-eq i:nth-child(3){height:6px}
}

/* On a phone the heading is the section's title, so it sits centred and reads
   a step up from the body around it. */
@media(max-width:700px){
  .np-source{justify-content:center;font-size:13px;font-weight:500;letter-spacing:-.01em}
  .np-source svg{width:18px;height:18px}
}
.np-content{transition:opacity .26s ease, transform .26s ease}
.np-content.is-swapping{opacity:0;transform:translateY(4px)}
@media(prefers-reduced-motion:reduce){
  .np-content{transition:opacity .2s ease}
  .np-content.is-swapping{transform:none}
}

/* The logo sits between the photograph and its subject, with one shared crop. */
.portrait-window::before{display:none}
.portrait-monogram{position:absolute;inset:0;z-index:2;width:100%;height:100%;opacity:.22;mix-blend-mode:soft-light;pointer-events:none;visibility:hidden}
.portrait-monogram.is-ready{visibility:visible}
.now-playing{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr)}
.np-cover,.np-art{width:46px;height:46px}
.np-title{font-size:14px;line-height:1.45;overflow-wrap:anywhere}
.np-artist{font-size:12px;line-height:1.5}
.np-content{min-width:0}
.np-link{justify-self:end;max-width:100%;font-size:12px;line-height:1.6}
.np-track{transition:opacity .22s ease;transform-origin:center}
.np-track.is-swapping{opacity:0}
.np-track.is-returning{animation:track-return .56s both}
@keyframes track-return{0%{opacity:0;transform:translateY(6px)}65%{opacity:1;transform:translateY(-1px)}100%{opacity:1;transform:translateY(0)}}
@media(max-width:700px){.now-playing{grid-template-columns:1fr}.np-link{justify-self:center}.np-content{width:100%}.np-track{justify-content:center}.np-title,.np-artist{text-align:center}}
@media(prefers-reduced-motion:reduce){.np-track.is-returning{animation-name:track-return-quiet}@keyframes track-return-quiet{from{opacity:0}to{opacity:1}}}

/* One continuously sized photograph; the mask follows its rendered geometry. */
.portrait-window > img{mask-image:linear-gradient(90deg,transparent,#000 28%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%)}
.portrait-monogram{opacity:.18}

.now-playing{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) minmax(0,1fr);align-items:center}
.np-content{justify-self:center;width:100%;border:0;padding-inline:0}
.np-track{justify-content:center;text-align:center}
.np-source{min-width:0;flex-wrap:wrap}
@media(max-width:760px){.now-playing{grid-template-columns:1fr;gap:18px;text-align:center}.np-source,.np-content,.np-link{justify-self:center;justify-content:center}.np-link{font-size:11px}}

.portrait-window > img{mask-image:linear-gradient(90deg,transparent,#000 28%),linear-gradient(#000 65%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent,#000 28%),linear-gradient(#000 65%,transparent 100%);mask-composite:intersect;-webkit-mask-composite:source-in}

.np-content{justify-content:center}

/* Fade the backdrop monogram away before the portrait becomes tightly cropped. */
.portrait-monogram{transition:opacity .45s ease}
@media(max-width:900px){.portrait-monogram{opacity:0}}

/* A quiet arrival inside the portrait mask; the subject itself stays still. */
.portrait-mark-image{opacity:0;transform-box:fill-box;transform-origin:center}
.portrait-monogram.is-ready .portrait-mark-image{animation:monogram-arrive 2.4s cubic-bezier(.22,1,.36,1) .35s both}
@keyframes monogram-arrive{from{opacity:0;transform:translateY(7px) scale(.985)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(prefers-reduced-motion:reduce){.portrait-monogram.is-ready .portrait-mark-image{animation-name:monogram-arrive-quiet}@keyframes monogram-arrive-quiet{from{opacity:0}to{opacity:1}}}

/* Mobile signature, beside the lower headline and clear of the face. */
.portrait-mobile-mark{display:none;position:absolute;right:8px;top:50%;bottom:auto;transform:translateY(-50%);width:clamp(52px,16vw,96px);pointer-events:none;z-index:2;opacity:.48}
.portrait-mobile-mark img{display:block;width:100%;height:auto;animation:monogram-arrive 2.4s cubic-bezier(.22,1,.36,1) .35s both}
@media(max-width:900px){.portrait-mobile-mark{display:block!important}}
@media(prefers-reduced-motion:reduce){.portrait-mobile-mark img{animation-name:monogram-arrive-quiet}}

/* The same quiet headline signature across desktop and mobile. */
.portrait-monogram{display:none}
.portrait-mobile-mark{display:block!important}