/* ---------------------------------------------------------
   adrift — shared styles
   --------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#000;
  --bone:#e8e4dc;
  --bone-dim:#a49e94;
  --ox:#ff5c1a;
  --blue:#6f8ab7;
  --dim:#5e5a54;
  --rule:rgba(232,228,220,.14);
  --pad:7vw;
}

html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);
  color:var(--bone);
  font-family:Newsreader,Georgia,serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ============ INDEX ============ */
.hero{
  min-height:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:9vh var(--pad) 7vh;
  text-align:center;
}
.hero img{width:min(72vw,42rem);display:block}
.hero .sub{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;
  font-size:clamp(.7rem,1.4vw,.86rem);letter-spacing:.3em;text-transform:uppercase;
  color:#5f5a53;margin-top:1.6rem;
}

.stack{padding:2rem 0 8rem}
.stack a{
  display:block;text-decoration:none;position:relative;
  padding:1.1rem var(--pad);transition:color .22s;
}
.stack h2{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;line-height:.88;letter-spacing:-.004em;
  font-size:clamp(2.2rem,8vw,6.4rem);max-width:16ch;
  transition:color .22s,transform .4s cubic-bezier(.2,.7,.3,1);
}
/* the drift */
.stack a:nth-of-type(1)  h2{margin-left:0}
.stack a:nth-of-type(2)  h2{margin-left:3%}
.stack a:nth-of-type(3)  h2{margin-left:1%}
.stack a:nth-of-type(4)  h2{margin-left:6%}
.stack a:nth-of-type(5)  h2{margin-left:3.5%}
.stack a:nth-of-type(6)  h2{margin-left:8.5%}
.stack a:nth-of-type(7)  h2{margin-left:5%}
.stack a:nth-of-type(8)  h2{margin-left:11%}
.stack a:nth-of-type(9)  h2{margin-left:7.5%}
.stack a:nth-of-type(10) h2{margin-left:13.5%}
.stack a:nth-of-type(11) h2{margin-left:10%}
.stack a:nth-of-type(even) h2{color:var(--bone-dim)}
.stack a:hover h2{color:var(--ox);transform:translateX(.6rem)}
.stack .n{
  position:absolute;left:2.4vw;top:1.7rem;
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;
  font-size:.68rem;letter-spacing:.2em;color:#4a4640;
}
.colophon{
  padding:0 var(--pad) 8rem;
  font-style:italic;font-size:1.15rem;line-height:1.65;color:var(--dim);max-width:34ch;
}

/* ============ PIECE ============ */
.back{
  position:fixed;top:0;left:0;z-index:30;
  padding:1.5rem var(--pad);
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;
  font-size:.68rem;letter-spacing:.22em;text-transform:uppercase;
  color:#7a746b;text-decoration:none;transition:color .25s;
}
.back:hover{color:var(--ox)}

/* scroll progress */
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--ox);z-index:40}

/* full-bleed title */
.title{
  min-height:78vh;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:0 3vw 5vh;
  position:relative;
}
.title h1{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;
  text-transform:uppercase;
  font-size:clamp(3.4rem,15vw,13rem);
  line-height:.84;letter-spacing:-.018em;
  color:var(--bone);
}
.title .kicker{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;
  font-size:.7rem;letter-spacing:.26em;text-transform:uppercase;color:var(--ox);
  margin-bottom:1.6rem;
}

/* body */
article{
  max-width:52rem;
  margin:0 auto;
  padding:6vh 3vw 26vh;
}
article p{
  font-size:clamp(1.22rem,.7vw + 1.08rem,1.5rem);
  line-height:1.72;
  margin-bottom:1.9rem;
  opacity:0;transform:translateY(18px);
  transition:opacity 1.1s cubic-bezier(.2,.7,.3,1),transform 1.1s cubic-bezier(.2,.7,.3,1);
}
article p.in{opacity:1;transform:none}
article p:last-child{margin-bottom:0}
article .dropcap{
  float:left;
  font-family:"Barlow Semi Condensed",sans-serif;
  font-weight:600;
  font-size:4.9em;
  line-height:.76;
  padding:0 .08em 0 0;
  margin:.05em 0 -.06em 0;
  color:var(--ox);
}

/* verse / list-driven pieces (Standard Lines) */
.verse{margin:0 auto;max-width:34rem}
.verse{max-width:44rem;margin:0 auto}
.verse p{
  font-size:clamp(1.3rem,1.1vw + 1.05rem,1.75rem);
  line-height:1.46;margin-bottom:2.1rem;
}
.verse .movement{height:0;margin:5.5rem 0}

/* teacher reports */
.report{margin-bottom:2.6rem}
.report .who{
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;
  font-size:.66rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ox);
  margin-bottom:.55rem;
}
.report p{font-size:1.02rem;line-height:1.7;color:var(--bone-dim);margin-bottom:0}

/* footer nav on pieces */
.nextprev{
  max-width:52rem;margin:0 auto;
  padding:0 3vw 12rem;display:flex;justify-content:space-between;gap:2rem;
  font-family:"Barlow Semi Condensed",sans-serif;font-weight:600;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
}
.nextprev a{color:#6a655e;text-decoration:none;transition:color .25s}
.nextprev a:hover{color:var(--bone)}

@media(max-width:600px){
  :root{--pad:8vw}
  article{padding-top:18vh}
  .stack .n{display:none}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
  article p{opacity:1;transform:none}
}
/* if JS fails, never leave text invisible */
html.no-js article p{opacity:1;transform:none}