@font-face{font-family:"EB Garamond";src:url(fonts/ebgx-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/ebgx-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"EB Garamond";src:url(fonts/ebgx-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

/* Direction C: one ink, like a toile or an old printed broadside. Every motif is a public-domain woodcut. */
:root{--paper:#f7f4ee;--ink:#3d4a6b;--text:#2c2f37;--soft:#8a8f9c;--rule:#dcd7cb}
*{box-sizing:border-box}
html,body{background:var(--paper)}
body{margin:0;color:var(--text);font:400 1.15rem/1.6 "EB Garamond",Garamond,"Times New Roman",serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;
  font-kerning:normal;font-feature-settings:"kern","liga","onum","pnum"}
a{color:var(--ink)}

.bar{display:flex;justify-content:center;padding:1.8rem 1rem .4rem;position:relative}
.lang{position:absolute;right:1.25rem;top:2.1rem;color:var(--soft);text-decoration:none;letter-spacing:.2em;font-size:.78rem;border:1px solid var(--rule);border-radius:2rem;padding:.35rem .7rem .3rem .85rem}
.lang:hover{color:var(--ink);border-color:var(--ink)}
.logo{color:var(--ink);text-transform:uppercase;font-weight:400;font-size:clamp(1.5rem,3.2vw,2.2rem);line-height:.86;letter-spacing:.03em;text-align:left}
.logo span{display:block}.logo span+span{padding-left:1.3em}

/* hero: the title in the middle, motifs scattered loosely around it like a toile */
.hero{position:relative;height:min(86vh,52rem);margin:0 1rem;overflow:hidden}
.hero img{position:absolute;height:auto;will-change:translate}
.m1{width:13%;right:9%;top:-3%;rotate:-6deg}                /* lily, small, leaning in from the top right */
.m2{width:24%;left:-3%;bottom:-9%;rotate:-3deg}              /* seraph, big, cropped off the bottom left */
.m3{width:11%;left:21%;top:7%;rotate:11deg}                  /* rose, upper left */
.m4{width:7%;left:30%;top:2%;scale:-1 1;rotate:-18deg}       /* vine, tiny, next to the rose */
.m5{width:17%;right:-2%;bottom:6%;rotate:8deg}               /* lily, larger, low right edge */
.m6{width:8%;right:27%;bottom:9%;rotate:-14deg;opacity:.8}   /* rose, small, drifting low */
.title{position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(76rem,94%);text-align:center;z-index:1}
.title h1{margin:0}
/* hero epigraph, set like the motto on a book's half-title */
.epi{margin:0}
.epi p{margin:0;font-style:italic;color:var(--ink);font-size:clamp(2.3rem,5.8vw,4.6rem);line-height:1.1;
  font-feature-settings:"kern","liga","dlig","swsh"}
.epi.short p{font-size:clamp(3.6rem,10.5vw,9.5rem);line-height:1.02}   /* a three-word epigraph can afford to be bigger */
.epi cite{display:block;margin-top:1.4rem;font-style:normal;font-variant-caps:all-small-caps;letter-spacing:.12em;font-size:1.1rem;color:var(--text)}
.epi cite i{font-variant-caps:normal;letter-spacing:0;font-size:.95em}
.epi::before{content:"❧";display:block;color:var(--ink);font-size:1.6rem;margin-bottom:1rem}
.date{color:var(--ink);letter-spacing:.14em;font-size:clamp(.72rem,2.6vw,1rem);white-space:nowrap;margin-top:1.2rem}
@media (max-width:46rem){
  .hero{height:78vh;margin:0 .5rem}
  .m1{width:24%;right:6%;top:0;rotate:-6deg}.m2{width:42%;left:-8%;bottom:-6%}
  .m3{width:22%;left:6%;top:4%}.m4{width:13%;left:32%;top:1%}.m5{width:30%;right:-5%;bottom:4%}.m6{display:none}
}
h1{color:var(--ink);font-weight:400;text-transform:uppercase;text-align:center;letter-spacing:.01em;line-height:.95;
  font-size:clamp(2.7rem,9.5vw,7.2rem);margin:1.6rem 1rem 0}
.statement{max-width:44rem;margin:4.5rem auto 0;padding:0 1.25rem;font-size:clamp(1.35rem,3.2vw,1.85rem);line-height:1.32;color:var(--text)}
.statement p{margin:0 0 1rem}
.statement .soft{color:var(--soft)}
.statement .first{margin-bottom:1rem}
.statement .first::after{content:"";display:block;clear:both}
.statement .initial{font-size:2.6em;margin-top:.14em}
.kicker{max-width:44rem;margin:1.2rem auto 0;padding:0 1.25rem;text-transform:uppercase;letter-spacing:.16em;font-size:.78rem;color:var(--soft)}

/* the programme */
.programme{max-width:68rem;margin:6rem auto 0;padding:0 1.25rem}
.piece{display:grid;grid-template-columns:1.15fr 1fr;gap:3rem;align-items:center;padding:3.2rem 0;border-top:1px solid var(--rule)}
.piece.flip .art{order:2}
.art{margin:0}
.art img{display:block;width:100%;max-height:30rem;object-fit:contain}
.art figcaption{font-size:.8rem;color:var(--soft);font-style:italic;margin-top:.5rem;text-align:center}
.art.empty{aspect-ratio:4/3;border:1px dashed var(--rule)}
.txt .n{color:var(--ink);letter-spacing:.16em;font-size:.95rem}
.txt h3{font-weight:400;font-style:italic;color:var(--ink);font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.02;margin:.5rem 0 .9rem}
.txt .src{margin:0;color:var(--text)}
.txt .len{margin:.2rem 0 0;color:var(--soft);font-variant-numeric:tabular-nums}
.play{margin-top:1.3rem;border:1px solid var(--ink);background:none;color:var(--ink);border-radius:2rem;cursor:pointer;
  font:500 .72rem/1 "EB Garamond",serif;letter-spacing:.2em;text-transform:uppercase;padding:.7rem 1.1rem}
.play:hover{background:var(--ink);color:var(--paper)}
@media (max-width:46rem){.piece{grid-template-columns:1fr;gap:1.4rem}.piece.flip .art{order:0}.art img{max-height:22rem}}

footer{text-align:center;color:var(--ink);padding:6rem 1rem 4rem;letter-spacing:.12em;font-size:.95rem}



/* ---- floating audio bar ---- */
.play.on{background:var(--ink);color:var(--paper)}
.abar{position:fixed;left:50%;bottom:1rem;translate:-50% 0;z-index:20;width:min(40rem,calc(100% - 1.5rem));
  display:grid;grid-template-columns:auto 1fr auto auto auto;grid-template-areas:"pp meta time lp nx" "pp seek seek seek seek";
  align-items:center;column-gap:.8rem;row-gap:.15rem;padding:.6rem .9rem .55rem .6rem;
  background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid var(--rule);border-radius:2.2rem;box-shadow:0 6px 24px rgba(40,50,80,.10);animation:rise .5s ease}
.abar[hidden]{display:none}
@keyframes rise{from{translate:-50% 1.5rem;opacity:0}}
.abar .pp{grid-area:pp;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--ink);background:var(--ink);cursor:pointer;position:relative}
.abar .pp::before{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;translate:2px 0;
  border-left:.75rem solid var(--paper);border-top:.45rem solid transparent;border-bottom:.45rem solid transparent}
.abar.playing .pp::before{width:.7rem;height:.8rem;translate:0;border:0;
  background:linear-gradient(90deg,var(--paper) 0 35%,transparent 35% 65%,var(--paper) 65%)}
.abar .meta{grid-area:meta;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1rem}
.abar .meta .n{color:var(--soft);letter-spacing:.12em;font-size:.8rem}
.abar .meta .t{font-style:italic;text-decoration:none}
.abar .meta .t:hover{text-decoration:underline}
.abar .time{grid-area:time;color:var(--soft);font-size:.8rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.abar .lp{grid-area:lp;border:0;background:none;color:var(--soft);cursor:pointer;padding:.25rem;line-height:0;border-radius:50%}
.abar .lp svg{display:block}
.abar .lp:hover{color:var(--ink)}
.abar .lp[aria-pressed="true"]{color:var(--paper);background:var(--ink)}
.abar .nx{grid-area:nx;border:0;background:none;color:var(--ink);font-size:1.5rem;line-height:1;cursor:pointer;padding:0 .2rem}
.abar .seek{grid-area:seek;width:100%;height:1rem;margin:0;accent-color:var(--ink);cursor:pointer}
body.has-abar footer{padding-bottom:8rem}

/* ---- titles link to song pages ---- */
.txt h3 a{color:inherit;text-decoration:none;background:linear-gradient(var(--ink),var(--ink)) 0 100%/0 1px no-repeat;transition:background-size .5s}
.txt h3 a:hover{background-size:100% 1px}
.more{display:inline-block;margin:1.3rem 0 0 .9rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);text-decoration:none}
.more:hover{color:var(--ink)}

/* ---- song page: header laid out like a home piece, then private-press typography ---- */
.bar a.logo{text-decoration:none}
.piece.head{max-width:68rem;margin:.4rem auto 0;padding:1.2rem 1.25rem 2.2rem;border-top:0}
.piece.head h1{text-align:left;text-transform:none;font-style:italic;color:var(--ink);font-size:clamp(2.2rem,4.6vw,3.6rem);line-height:1.02;margin:.5rem 0 .9rem;
  font-feature-settings:"kern","liga","dlig","swsh"}
@media (max-width:46rem){.piece.head .art{order:2;max-width:15rem;margin:1.2rem auto 0}.piece.head .art img{max-height:17rem}}
.song{max-width:40rem;margin:0 auto;padding:0 1.25rem}
.story{font-size:1.2rem;line-height:1.58;hyphens:auto;font-feature-settings:"kern","liga","dlig","onum"}
.story p{margin:0;text-align:justify;text-align-last:left}
.story p+p{text-indent:1.5em}
.story .first{margin-bottom:0}
.story .first::after{content:"";display:block;clear:both}
.initial{float:left;width:1.42em;height:1.42em;margin:.12em .22em 0 0;display:grid;place-items:center;padding-top:.06em;
  font-size:3.2em;line-height:1;color:var(--ink);border:1.5px solid var(--ink);outline:1px solid var(--ink);outline-offset:3px;
  background:radial-gradient(circle,color-mix(in srgb,var(--ink) 20%,transparent) 1.1px,transparent 1.4px) 0 0/8px 8px}
.sc{font-variant-caps:small-caps;letter-spacing:.05em}
.q{margin:1.6rem 2rem;text-align:center}
.q p{font-style:italic;color:var(--ink);text-align:center;text-indent:0}
.q::before{content:"❧";display:block;color:var(--ink);font-size:1.3rem;margin-bottom:.4rem;font-style:normal}
.q + p{text-indent:0}
.fleuron{text-align:center;color:var(--ink);font-size:1.6rem;margin:2.6rem 0 0}
.video{position:relative;aspect-ratio:16/9;margin:2.4rem 0 3rem;background:#ebe7de}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.song h2{font-weight:400;font-variant-caps:all-small-caps;letter-spacing:.22em;font-size:1.15rem;color:var(--ink);text-align:center;margin:3.2rem 0 1.5rem}
.verse{display:grid;grid-template-columns:1fr 1fr;gap:.35rem 2rem;font-size:1.05rem;line-height:1.45}
.verse p{margin:0;padding-left:1.2em;text-indent:-1.2em}
.verse.solo{grid-template-columns:1fr;max-width:28rem;margin:0 auto}
.verse .la{font-style:italic;color:var(--ink)}
@media (max-width:34rem){.verse{grid-template-columns:1fr}.verse .en{margin-bottom:.7rem}.q{margin:1.4rem .5rem}}
.pager{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;margin-top:4rem;padding-top:1.4rem;border-top:1px solid var(--rule)}
.pager a{text-decoration:none;font-style:italic}.pager .r{text-align:right}
.folio{color:var(--ink);font-size:1.1rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.epi p,.epi cite{text-wrap:balance}
@media (max-width:46rem){
  .epi p{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .epi.short p{font-size:clamp(3rem,15vw,4.8rem)}
  .epi p br{display:none}
  .epi cite{font-size:.95rem}
  .m2{width:34%;left:-8%;bottom:-14%}
}
.statement .next{color:var(--ink);font-style:italic}