/* Song of the Siren (/siren): the deck, slide by slide.
   Each section is one slide: its own blurred slide background, the deck's lettering
   (Metamorphous headings, EB Garamond text) and the deck's artworks, feathered into the ground. */
@font-face{font-family:'Metamorphous';font-weight:400;font-display:swap;src:url(../fonts/metamorphous-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:400;font-display:swap;src:url(../fonts/eb-garamond-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-weight:500;font-display:swap;src:url(../fonts/eb-garamond-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/eb-garamond-latin-400-italic.woff2) format('woff2')}
@font-face{font-family:'EB Garamond';font-style:italic;font-weight:600;font-display:swap;src:url(../fonts/eb-garamond-latin-600-italic.woff2) format('woff2')}

.sl{--ink:#F1E6CC;--txt:#E9DFCB;--eye:#B9C9C2;--gold:#E8C878;--sl-head:'Metamorphous','EB Garamond',Georgia,serif;--sl-body:'EB Garamond',Georgia,serif;
  position:relative;overflow:hidden;background:#0B1F24 var(--bg) center/cover no-repeat;color:var(--txt);font-family:var(--sl-body)}
.sl::before{content:"";position:absolute;inset:0;background:radial-gradient(1.5px 1.5px at 12% 22%,rgba(255,250,240,.55),transparent),radial-gradient(1px 1px at 33% 71%,rgba(255,250,240,.45),transparent),radial-gradient(1px 1px at 58% 14%,rgba(255,250,240,.5),transparent),radial-gradient(1.5px 1.5px at 81% 64%,rgba(255,250,240,.45),transparent),radial-gradient(1px 1px at 91% 31%,rgba(255,250,240,.4),transparent);pointer-events:none}
.sl-in{position:relative;max-width:1500px;margin:0 auto;padding:clamp(56px,6.5vw,104px) var(--pad) clamp(44px,5vw,72px)}
.sl-cover .sl-in{padding-top:calc(72px + clamp(20px,3vw,40px))}
.sl-teal{--eye:#A9CFC6;background-color:#0B2226}
.sl-wine{--eye:#D8A9B8;background-color:#2A0A1C}
.sl-violet{--eye:#C6B6EA;background-color:#191035}
.sl-amber{--eye:#DDAE86;background-color:#2B1408}
.sl-duo{--eye:#C9C2C9;background-color:#1C1424}
.sl-duo::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:rgba(232,200,120,.35)}
.sl-parch{--ink:#2A1E14;--txt:#3A2C1F;--eye:#7A5A3C;--gold:#6F4F2A;background-color:#E6D7B8}
.sl-parch::before{display:none}

.sl-eye{margin:0 0 10px;font-family:var(--sl-body);font-weight:500;font-size:clamp(14px,1.1vw,16px);letter-spacing:.24em;text-transform:uppercase;color:var(--eye)}
.sl-greek{margin:0 0 12px;font-family:var(--sans);font-weight:200;font-size:clamp(26px,3vw,40px);letter-spacing:.38em;color:var(--gold)}
.sl-greek-xl{font-size:clamp(46px,9vw,128px);letter-spacing:.28em;line-height:1;margin-bottom:clamp(24px,3vw,44px);color:rgba(232,200,120,.75)}
.sl-h1,.sl-h2,.sl-h3{font-family:var(--sl-head);font-weight:400;color:var(--ink);text-wrap:balance}
.sl-h1{margin:0;font-size:clamp(52px,7vw,104px);line-height:1}
.sl-h2{margin:0 0 clamp(22px,2.6vw,36px);font-size:clamp(36px,4.6vw,68px);line-height:1.05;max-width:1100px}
.sl-h2 i{font-family:var(--sl-body);font-style:italic;font-weight:400}
.sl-h3{margin:0 0 8px;font-size:clamp(24px,2.2vw,32px);line-height:1.1}
.sl-h3l{margin-top:14px}
.sl-p{margin:0 0 14px;font-size:clamp(19px,1.45vw,21px);line-height:1.5;color:var(--txt);max-width:720px}
.sl-gold{font-family:var(--sl-body);font-style:italic;font-weight:600;color:var(--gold)}
.sl-tag{margin:clamp(14px,1.6vw,22px) 0 clamp(14px,1.6vw,22px);font-size:clamp(23px,2.1vw,30px);line-height:1.25;max-width:900px}
.sl-small{margin:clamp(22px,2.6vw,34px) 0 0;font-size:clamp(17px,1.3vw,19px)}
.sl-by{margin-top:18px;color:var(--gold)}
.sl-foot{position:relative;margin:clamp(30px,3.6vw,52px) 0 0;font-family:var(--sl-body);font-size:14px;letter-spacing:.3em;text-transform:uppercase;color:var(--eye);opacity:.75}
.sl-center{text-align:center}
.sl-center .sl-p,.sl-center .sl-tag{margin-left:auto;margin-right:auto}
.sl-mint{color:#A9D9C8 !important}.sl-rose{color:#E9A9BC !important}

/* artworks feathered into the slide */
.sl img{display:block;max-width:100%;height:auto}
.sl-fig{margin:0}
.sl-fig figcaption{margin-top:8px;font-family:var(--sl-body);font-style:italic;font-size:16px;line-height:1.4;color:var(--txt);opacity:.85;text-align:center}
.sl-fig > img,.sl-obj,.sl-side{-webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 46%,rgba(0,0,0,.5) 66%,transparent 90%);mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 46%,rgba(0,0,0,.5) 66%,transparent 90%)}
.sl-fig > img{margin:0 auto}
.sl-obj{margin:0 auto}
.sl-parch .sl-fig > img{mix-blend-mode:multiply;-webkit-mask-image:none;mask-image:none}

.sl-split,.sl-cols2,.sl-cols3,.sl-cols4,.sl-grid2{display:grid;gap:clamp(24px,3vw,48px)}
.sl-in .sl-split{align-items:center}
@media (min-width:900px){
  .sl-in .sl-split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .sl-in .sl-split.sl-rev{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .sl-cols2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sl-cols3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sl-cols4{grid-template-columns:repeat(4,minmax(0,1fr))}
  .sl-grid2{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:600px) and (max-width:899px){.sl-cols3,.sl-cols4{grid-template-columns:repeat(2,minmax(0,1fr))}}
.sl-cover .sl-fig > img{max-height:640px;width:auto}
.sl-tallfig > img{max-height:600px;width:auto}
.sl-cols3 .sl-obj{height:clamp(150px,15vw,230px);width:auto;margin-bottom:12px}
.sl-vessels .sl-obj{height:clamp(180px,19vw,300px)}
.sl-grid2 > div{padding-top:12px;border-top:1px solid rgba(122,90,60,.45)}
.sl-muse .sl-fig > img{max-height:560px;width:auto}

.sl-tl,.sl-moves{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:22px 20px;margin:0;padding:0;list-style:none}
.sl-tlimg{display:flex;align-items:flex-end;justify-content:center;height:clamp(110px,10vw,150px);margin-bottom:10px;border-bottom:1px solid rgba(232,200,120,.45)}
.sl-tlimg .sl-obj{max-height:100%;width:auto}
.sl-tl b{display:block;margin-top:4px;font-family:var(--sl-head);font-weight:400;font-size:18px;letter-spacing:.06em;color:var(--ink)}
.sl-tl span{display:block;margin-top:6px;font-size:18px;line-height:1.4;color:var(--txt)}
.sl-moves li{display:flex;flex-direction:column}
.sl-moves .sl-num{font-family:var(--sl-body);font-size:18px;letter-spacing:.2em;color:var(--eye)}
.sl-moves .sl-p{font-size:18px}
.sl-moves .sl-eye{margin-top:auto;font-size:14px}
.sl-cols4 .sl-tlimg{height:clamp(130px,12vw,180px);border-bottom-color:rgba(200,182,234,.4)}

.sl-headrow{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 22px;margin-bottom:clamp(20px,2.4vw,34px)}
.sl-headrow .sl-h2{margin:0}.sl-headrow .sl-eye{margin:0}
.sl-artist{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:start}
@media (min-width:640px){.sl-artist{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.sl-photo{width:100%;-webkit-mask-image:radial-gradient(ellipse 66% 66% at 50% 45%,#000 52%,transparent 96%);mask-image:radial-gradient(ellipse 66% 66% at 50% 45%,#000 52%,transparent 96%)}
.sl-name{font-size:clamp(30px,2.8vw,40px)}
.sl-links{margin:0;font-size:17px}
.sl-links a,.sl-contacts a{color:var(--gold)}
.sl-icon{width:58px;height:58px;object-fit:cover;border-radius:50%}
.sl-ul{margin:0;padding-left:1.1em;font-size:clamp(18px,1.4vw,20px);line-height:1.6;color:var(--txt)}

.sl-close{display:grid;grid-template-columns:minmax(0,1fr);gap:24px;align-items:center}
@media (min-width:1000px){.sl-close{grid-template-columns:minmax(0,.55fr) minmax(0,1.5fr) minmax(0,.55fr)}}
@media (max-width:999px){.sl-paint{display:none}.sl-bronze{max-width:200px;margin:0 auto}}
.sl-paint{opacity:.55}
.sl-contacts{margin:16px 0 0;font-family:var(--sl-body);font-size:15px;line-height:2;letter-spacing:.22em;text-transform:uppercase;color:var(--eye)}
.sl-contacts a{text-decoration:none}
.sl-credit{position:relative;margin:clamp(24px,3vw,40px) 0 0;text-align:center;font-size:14px;color:var(--eye)}
.sl .btn-row{margin-top:clamp(18px,2vw,28px)}
.sl .crumbs a,.sl .crumbs{color:var(--eye)}
.sl-cover .sl-in > .sl-split{margin-top:8px}
.sl-parch .sl-fig > img{-webkit-mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 46%,rgba(0,0,0,.5) 66%,transparent 90%);mask-image:radial-gradient(ellipse 62% 62% at 50% 50%,#000 46%,rgba(0,0,0,.5) 66%,transparent 90%)}
.sl-end .sl-side{max-height:620px;width:auto;margin:0 auto}
@media (max-width:899px){.sl-fig > img{max-height:440px;width:auto}.sl-cover .sl-fig > img{max-height:380px}}
/* From singer to seductress: both artworks share one frame height, so the labels and captions sit on the same line */
.sl-duo .sl-cols2 .sl-fig{display:flex;flex-direction:column;align-items:center}
.sl-duo .sl-big{height:clamp(240px,26vw,380px);width:auto;max-width:100%;object-fit:contain}
.sl-duo .sl-cols2 .sl-h3{margin-top:14px}
@media (max-width:899px){.sl-duo .sl-big{height:260px}}
.sl-h2.sl-center{margin-left:auto;margin-right:auto}