.lion{grid-template-columns:minmax(0,1fr);display:grid;position:relative}.lion .poem{font-size:clamp(1.15rem,5.2vw,1.45rem);line-height:1.4}@media (width>=720px){.lion .poem{font-size:clamp(1.4rem,1.9vw,1.9rem)}}.lion .stanza{margin:0}.lion .line{text-wrap:pretty;margin-bottom:.55em}.lion .author{color:var(--dim);letter-spacing:.2em;text-transform:uppercase;margin:2rem 0 0;font-size:.75rem}.lion__photo{margin:0}.lion__window{background:#0f0d0c;position:relative;overflow:hidden}.lion__window .kit-frame__drift{inset:calc(var(--kit-overhang,0%) * -1) 0;position:absolute}.lion__window picture,.lion__window img{width:100%;height:100%;display:block}.lion__window img{object-fit:cover;object-position:58% 30%}.lion__credit{color:var(--dim);margin:0;font-size:.8rem}.lion__credit a{color:inherit}@keyframes lion-line-in{0%{clip-path:inset(-.5em -1em calc(100% + .5em));transform:translateY(100%)}to{clip-path:inset(-.5em -1em);transform:none}}@keyframes lion-rise-in{0%{opacity:0;transform:translateY(.5em)}}@keyframes lion-fade-in{0%{opacity:0}}.motion:not(.calm) .lion[data-placement=a] :is(.line,.author):not([data-kit-lines]),.motion:not(.calm) .lion[data-placement=b] :is(.line,.author):not([data-kit-lines]){animation:lion-line-in .9s cubic-bezier(.215, .61, .355, 1) calc(.15s + var(--line,0) * 60ms) backwards}.motion:not(.calm) .lion[data-placement=c] .stanza:first-of-type .line:first-child{animation:.9s cubic-bezier(.215,.61,.355,1) .15s backwards lion-rise-in}.motion.calm .lion :is(.line,.author):not([data-kit-lines]){animation:.6s ease-out backwards lion-fade-in}@media (width>=720px){.motion:not(.calm) .lion[data-placement=a] :is(.line,.author):not([data-kit-lines]),.motion:not(.calm) .lion[data-placement=b] :is(.line,.author):not([data-kit-lines]){animation-duration:1s;animation-delay:calc(.15s + var(--line,0) * .1s)}}.motion:not(.calm) .lion[data-placement=a] .lion__window img,.motion:not(.calm) .lion[data-placement=c] .lion__window img{transform:scale(1.1)}@media (width>=720px){.motion:not(.calm) .lion[data-placement=a] .lion__window img,.motion:not(.calm) .lion[data-placement=c] .lion__window img{transform:scale(1.05)}}.lion[data-placement=a] .lion__body,.lion[data-placement=a] .lion__photo,.lion[data-placement=a] .lion__credit{grid-area:1/1}.lion[data-placement=a] .lion__photo{z-index:0;align-self:start;height:100lvh;position:sticky;top:0}.lion[data-placement=a] .lion__window{height:100%}.lion[data-placement=a] .lion__body{z-index:1;padding-bottom:80lvh;position:relative}.lion[data-placement=a] .poem{padding:56svh var(--gutter) 45svh;background:linear-gradient(#0706064d,#070606c7 calc(100% - 45svh),#07060600)}.lion[data-placement=a] .lion__credit,.lion[data-placement=c] .lion__credit{z-index:2;padding:0 var(--gutter) max(1.25rem, env(safe-area-inset-bottom));color:#e9e4dcc7;text-shadow:0 0 .75rem #070606e6;align-self:end;position:relative}@media (width>=720px){.lion[data-placement=a]{grid-template-columns:minmax(0,1fr) min(50%,75lvh)}.lion[data-placement=a] .lion__photo,.lion[data-placement=a] .lion__credit{grid-column:2}.lion[data-placement=a] .lion__window img{object-position:50% 100%;transform-origin:50% 100%}.lion[data-placement=a] .lion__body{padding-bottom:0}.lion[data-placement=a] .poem{padding:62svh 4vw 40svh max(var(--gutter), 8vw);background:0 0}}.lion[data-placement=b] .lion__body{min-height:100svh;padding:38svh var(--gutter) 14svh}.lion[data-placement=b] .lion__window{aspect-ratio:var(--ratio)}.lion[data-placement=b] .lion__credit{padding:.75rem var(--gutter) 24svh}@media (width>=720px){.lion[data-placement=b] .poem{max-width:30em;margin-inline:auto}.lion[data-placement=b] .lion__photo,.lion[data-placement=b] .lion__credit{width:min(100% - 2 * var(--gutter), 92vh * var(--wide));width:min(100% - 2 * var(--gutter), 92lvh * var(--wide));margin-inline:auto}.lion[data-placement=b] .lion__credit{padding-inline:0}}.lion[data-placement=c]{--rest:1.2}.lion[data-placement=c] .lion__body,.lion[data-placement=c] .lion__photo,.lion[data-placement=c] .lion__credit{grid-area:1/1}.lion[data-placement=c] .lion__photo{z-index:0;align-self:start;height:100lvh;position:sticky;top:0}.lion[data-placement=c] .lion__window{height:100%}.lion[data-placement=c] .lion__window:after{content:"";background:linear-gradient(#07060600 45%,#07060680 72%,#070606d1);position:absolute;inset:0}.lion[data-placement=c] .lion__body{z-index:1;padding-bottom:80lvh;position:relative}.lion[data-placement=c] .poem{padding:calc(100svh - 12rem) var(--gutter) 30svh;text-align:center;text-shadow:0 0 1.5rem #070606b3;background:linear-gradient(#07060600 calc(100svh - 16rem),#07060699 calc(100svh - 11rem) calc(100% - 26svh),#07060600);font-size:clamp(1.25rem,5.8vw,1.6rem)}.lion[data-placement=c] .poem>*{max-width:34em;margin-inline:auto}.lion[data-placement=c] .author{color:#e9e4dcb3}.motion:not(.calm) .lion[data-placement=c]{height:calc(100vh + (var(--lines) + var(--rest)) * 42vh);height:calc(100lvh + (var(--lines) + var(--rest)) * 42lvh)}.motion:not(.calm) .lion[data-placement=c] .lion__body{align-self:start;height:100lvh;padding:0;position:sticky;top:0}.motion:not(.calm) .lion[data-placement=c] .poem{right:var(--gutter);bottom:calc(5.5rem + 100lvh - 100svh);left:var(--gutter);background:0 0;padding:0;display:grid;position:absolute}.motion:not(.calm) .lion[data-placement=c] .stanza{display:contents}.motion:not(.calm) .lion[data-placement=c] .line{opacity:0;grid-area:1/1;align-self:end;margin:0}.motion:not(.calm) .lion[data-placement=c] .stanza:first-of-type .line:first-child{opacity:1}.motion:not(.calm) .lion[data-placement=c] .author{opacity:0;grid-area:2/1;margin-top:1.25rem}@media (width>=720px){.lion[data-placement=c] .lion__window{width:min(100%, 100vh * var(--wide));width:min(100%, 100lvh * var(--wide));margin-inline:auto;-webkit-mask-image:linear-gradient(90deg,#0000,#000 18% 82%,#0000);mask-image:linear-gradient(90deg,#0000,#000 18% 82%,#0000)}.lion[data-placement=c] .poem{font-size:clamp(1.5rem,2.2vw,2.2rem)}.motion:not(.calm) .lion[data-placement=c] .poem{max-width:34em;margin-inline:auto;bottom:11vh}}.lion[data-crossing][data-placement=b] .lion__body{grid-area:1/1}.lion[data-crossing][data-placement=b] :is(.lion__photo,.lion__credit){grid-area:2/1}.lion[data-crossing][data-placement=b] .lion__credit{z-index:1;padding:0 var(--gutter) .75rem;color:#e9e4dcc7;text-shadow:0 0 .75rem #070606e6;align-self:end;position:relative}@media (width>=720px){.lion[data-crossing][data-placement=b] .lion__credit{padding:0 1rem .75rem}}