/* Chronicles chapter pages, cinema style, in the manner of the Handloom Bridge site:
   the picture fills the whole page and drifts slowly, slides dissolve into one another,
   type sits straight on the picture, and the only controls are the logo and one button. */
@import url("/nav.css");

*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:#2A1E16;color:#F6EEE0}
body{font-family:var(--display);-webkit-font-smoothing:antialiased}
a{color:inherit}

.chapter{position:fixed;inset:0;opacity:0;transition:opacity 1s ease}
.chapter.ready{opacity:1}
.chapter.leaving{opacity:0;transition-duration:.5s}

/* ---------- slides: a slow dissolve with a gentle push, like cutting between films ---------- */
.stage{position:absolute;inset:0}
.slide{position:absolute;inset:0;overflow:hidden;opacity:0;visibility:hidden;
  transition:opacity 1.4s cubic-bezier(.4,0,.2,1),visibility 0s linear 1.4s}
.slide.on{opacity:1;visibility:visible;transition:opacity 1.4s cubic-bezier(.4,0,.2,1),visibility 0s}

/* behind everything: the same picture, only seen on tall phone screens */
.slide .glow{position:absolute;inset:-10%;background-size:cover;background-position:center;
  filter:blur(28px) brightness(.8) saturate(.95);transform:scale(1.08);opacity:0}
html.portrait .slide .glow,.slide.whole .glow{opacity:1}
.slide.on .glow{animation:drift 40s ease-in-out infinite alternate}

/* the picture: covers the whole page and moves as if filmed */
.frame{position:absolute;inset:0;overflow:hidden}
html.portrait .frame{top:calc(var(--nav-h) + 4px);bottom:118px}
.slide.whole .frame{top:calc(var(--nav-h) + 2px);bottom:26px;left:4vw;right:4vw}
html.portrait .slide.whole .frame{left:0;right:0;bottom:118px}
.slide.whole .card{box-shadow:0 30px 80px -30px rgba(0,0,0,.6)}
.slide.whole.on .card{animation:settle 1.4s cubic-bezier(.2,.7,.2,1) both}
.slide.whole .card{transform:none}
.card{position:absolute;line-height:0}
.card img{display:block}
.slide.on .card{animation:filmcard 30s ease-in-out infinite alternate}
.slide .card{transform:scale(1.01)}
html.portrait .slide.on .card{animation:settle 1.4s cubic-bezier(.2,.7,.2,1) both}
html.portrait .slide .card{transform:none}
.hs{position:absolute;display:block}
.hs:focus-visible{outline:2px solid #F6EEE0;outline-offset:3px}

/* only a breath of shade where the words sit, never a wash across the picture */
.shade{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(0deg,rgba(18,11,6,.62) 0%,rgba(18,11,6,.22) 22%,rgba(18,11,6,0) 42%)}

/* words straight on the picture */
.legend{position:absolute;left:max(24px,5vw);bottom:max(56px,9vh);max-width:min(62vw,820px);z-index:4;
  color:#F6EEE0;text-shadow:0 2px 18px rgba(0,0,0,.35)}
.legend .lk{font:500 11px/1 var(--caps);letter-spacing:.42em;text-transform:uppercase;color:#E3C991}
.legend .lt{margin-top:14px;font:400 clamp(40px,6.2vw,96px)/.95 var(--display);letter-spacing:.01em;text-transform:uppercase}
.legend .ll{margin-top:14px;font:italic 400 clamp(17px,1.6vw,23px)/1.35 var(--display);color:#F1E6D2;max-width:40em}
.legend.compact .lt{font-size:clamp(24px,2.6vw,38px);margin-top:10px}
.legend.compact .ll{font-size:clamp(15px,1.2vw,18px);margin-top:8px}
.slide.on .legend>*{animation:rise 1.2s cubic-bezier(.2,.7,.2,1) .5s both}
.slide.on .legend>*:nth-child(2){animation-delay:.65s}
.slide.on .legend>*:nth-child(3){animation-delay:.8s}

/* further ways in: quiet words, bottom right */
.more{position:absolute;right:0;bottom:0;z-index:4;display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:flex-end;gap:10px 28px;max-width:60vw;
  padding:90px max(24px,5vw) max(40px,6vh) 160px;background:radial-gradient(ellipse at 100% 100%,rgba(18,11,6,.86) 0%,rgba(18,11,6,.62) 34%,rgba(18,11,6,.2) 60%,rgba(18,11,6,0) 78%)}
.more a{font:500 11px/1 var(--caps);letter-spacing:.3em;text-transform:uppercase;color:#F6EEE0;text-decoration:none;
  padding-bottom:6px;border-bottom:1px solid rgba(246,238,224,.45);transition:border-color .3s,color .3s;text-shadow:0 1px 10px rgba(0,0,0,.4)}
.more a:hover{border-color:#E3C991;color:#E3C991}
.more.strip{left:0;right:0;max-width:none;justify-content:center;gap:10px 44px;padding:26px 24px 20px;
  background:linear-gradient(0deg,rgba(24,15,9,.84) 0%,rgba(24,15,9,.7) 50%,rgba(24,15,9,0) 100%)}
html.portrait .more.strip{justify-content:center;padding:34px 18px 16px}
.more a.first{font-size:12.5px;letter-spacing:.32em;border-bottom-color:#E3C991}
.more a .arr{font-family:var(--display);letter-spacing:0;display:inline-block;transition:transform .35s}
.more a:hover .arr{transform:translateX(4px)}
.slide.on .more{animation:rise 1.2s cubic-bezier(.2,.7,.2,1) .9s both}

/* ---------- designed slides: the photograph fills the page, words on a soft shadow ---------- */
.designed{position:absolute;inset:0}
.bleed{position:absolute;inset:0;overflow:hidden}
.bleed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.bleed.right img{object-position:70% center}
.bleed.left img{object-position:30% 30%}
.slide.on .bleed img{animation:film 30s ease-in-out infinite alternate}
.scrim{position:absolute;inset:0;pointer-events:none}
.bleed.right+.scrim{background:linear-gradient(90deg,rgba(18,11,6,.78) 0%,rgba(18,11,6,.6) 34%,rgba(18,11,6,.18) 58%,rgba(18,11,6,0) 72%)}
.bleed.left+.scrim{background:linear-gradient(270deg,rgba(18,11,6,.78) 0%,rgba(18,11,6,.6) 36%,rgba(18,11,6,.18) 60%,rgba(18,11,6,0) 74%)}
.bleed.full+.scrim{background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(18,11,6,.58) 0%,rgba(18,11,6,.72) 100%)}
.pad{position:absolute;top:calc(var(--nav-h) + 10px);bottom:72px;display:flex;flex-direction:column;justify-content:center}
.pad.l{left:max(24px,6vw);width:min(44%,580px)}
.pad.r{right:max(24px,6vw);width:min(40%,560px)}
.pad.c{left:50%;transform:translateX(-50%);width:min(92%,1080px)}
.words{text-shadow:0 1px 14px rgba(0,0,0,.3)}
.words .kick{font:500 11px/1 var(--caps);letter-spacing:.42em;text-transform:uppercase;color:#E3C991}
.words h1,.words h2{margin:16px 0 0;font:400 clamp(34px,4.4vw,64px)/1.02 var(--display);color:#F6EEE0;text-wrap:balance}
.words h1 em,.words h2 em{color:#E3C991}
.words .rule{width:64px;height:1px;background:#E3C991;margin:22px 0 6px}
.words p{margin:12px 0 0;font:400 clamp(16px,1.3vw,19.5px)/1.6 var(--display);color:#EFE3CD}
.words p.turn{font-style:italic;color:#E3C991}
.slide.on .words>*{animation:rise 1.1s cubic-bezier(.2,.7,.2,1) both}
.slide.on .words>*:nth-child(2){animation-delay:.12s}.slide.on .words>*:nth-child(3){animation-delay:.24s}
.slide.on .words>*:nth-child(4){animation-delay:.36s}.slide.on .words>*:nth-child(n+5){animation-delay:.48s}
.pad.c .words{text-align:center}
.pad.c .words .rule{margin-left:auto;margin-right:auto}

/* the second photograph melts in over the first */
.soft{position:absolute;left:36%;bottom:12%;width:min(20vw,280px);opacity:.95;
  -webkit-mask-image:radial-gradient(closest-side,#000 68%,transparent 100%);mask-image:radial-gradient(closest-side,#000 68%,transparent 100%)}
.slide.on .soft{animation:rise 1.6s cubic-bezier(.2,.7,.2,1) .7s both}

/* journey: words only, no boxes */
.moments{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 24px;margin:26px 0 0;padding:0;list-style:none}
.moments button{width:100%;height:100%;text-align:left;padding:12px 0;border:0;border-top:1px solid rgba(246,238,224,.28);background:transparent;
  cursor:pointer;font-family:var(--display);color:#F6EEE0;transition:border-color .35s,opacity .35s;opacity:.7}
.moments button:hover{opacity:1}
.moments button[aria-pressed="true"]{opacity:1;border-top-color:#E3C991}
.moments .yr{display:flex;justify-content:space-between;font:500 10.5px/1 var(--caps);letter-spacing:.26em;color:#E3C991}
.moments .yr b{font-weight:500;color:#D8C8AE}
.moments .t{display:block;margin-top:8px;font:italic 400 clamp(16px,1.3vw,20px)/1.15 var(--display);color:#F6EEE0}
.moments .n{display:block;margin-top:4px;font:400 13.5px/1.35 var(--display);color:#D8C8AE}
.taught{min-height:3.3em;margin:22px auto 0;text-align:center;max-width:52em;font:italic 400 clamp(17px,1.45vw,21px)/1.45 var(--display);color:#F1E6D2;transition:opacity .45s}
.taught.fade{opacity:0}
.taught small{display:block;margin-bottom:8px;font:500 10.5px/1 var(--caps);letter-spacing:.3em;color:#E3C991;font-style:normal}
.inline-list{display:flex;flex-wrap:wrap;justify-content:center;gap:14px 40px;margin:26px 0 4px;padding:0;list-style:none}
.inline-list li{font:400 clamp(22px,2.2vw,32px)/1 var(--display);letter-spacing:.08em;text-transform:uppercase;color:#F6EEE0}
.inline-list li small{display:block;margin-bottom:8px;font:500 10px/1 var(--caps);letter-spacing:.3em;color:#E3C991}

/* ---------- moving between pictures: faint arrows at the edges and a thread of progress ---------- */
.nav{position:absolute;top:50%;z-index:15;width:52px;height:52px;margin-top:-26px;border:0;border-radius:50%;
  background:transparent;color:rgba(246,238,224,.75);font:300 40px/1 var(--display);cursor:pointer;display:grid;place-items:center;
  transition:color .3s,opacity .3s;text-shadow:0 1px 12px rgba(0,0,0,.4)}
.nav:hover{color:#F6EEE0}
.nav.prev{left:max(8px,1.2vw)}.nav.next{right:max(8px,1.2vw)}
.nav[disabled]{opacity:0;pointer-events:none}
.nav:focus-visible{outline:2px solid #F6EEE0;outline-offset:2px}
.progress{position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(246,238,224,.14);z-index:15}
.progress span{display:block;height:100%;width:0;background:#E3C991;transition:width 1.2s cubic-bezier(.4,0,.2,1)}

/* reading overlay */
.reader{position:fixed;inset:0;z-index:80;background:rgba(18,11,6,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity .45s,visibility 0s linear .45s}
.reader.open{opacity:1;visibility:visible;transition:opacity .45s,visibility 0s}
.reader article{width:min(680px,92vw);max-height:84svh;overflow:auto;background:var(--paper);color:var(--ink);padding:36px 40px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.5);font:400 18px/1.6 var(--display)}
.reader article p{margin:0 0 12px}.reader blockquote{margin:0 0 12px;padding-left:14px;border-left:2px solid var(--brass);font-style:italic}
.reader .close{float:right;margin:-12px -16px 0 0}

@keyframes filmcard{from{transform:scale(1.01)}to{transform:scale(1.055)}}
@keyframes film{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.12) translate(-1.2%,-.8%)}}
@keyframes drift{from{transform:scale(1.08) translate(0,0)}to{transform:scale(1.16) translate(-1.5%,-1%)}}
@keyframes settle{from{opacity:0;transform:scale(.975) translateY(10px)}to{opacity:1;transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ---------- tall phone screens: the picture shown whole, words beneath ---------- */
html.portrait .shade{background:linear-gradient(0deg,rgba(18,11,6,.8) 0%,rgba(18,11,6,.4) 20%,rgba(18,11,6,0) 38%)}
html.portrait .legend{left:18px;right:18px;bottom:84px;max-width:none}
html.portrait .legend .lt{font-size:34px}
html.portrait .legend .ll{font-size:16px}
html.portrait .more{left:0;right:0;bottom:0;max-width:none;justify-content:flex-start;gap:8px 18px;padding:40px 18px 18px;background:linear-gradient(0deg,rgba(18,11,6,.55),rgba(18,11,6,0))}
html.portrait .legend + .more{bottom:12px}
@media (max-width:760px), (max-height:520px){
  .nav{display:none}
  .more a{font-size:10px;letter-spacing:.2em}
}
@media (max-width:760px){
  .bleed.right img,.bleed.left img{object-position:center 25%}
  .bleed.right+.scrim,.bleed.left+.scrim{background:linear-gradient(0deg,rgba(18,11,6,.86) 0%,rgba(18,11,6,.72) 48%,rgba(18,11,6,.15) 70%,rgba(18,11,6,0) 82%)}
  .pad.l,.pad.r,.pad.c{left:18px;right:18px;width:auto;transform:none;top:auto;bottom:28px;justify-content:flex-end}
  .words h1,.words h2{font-size:28px;margin-top:8px}
  .words p{font-size:15px;line-height:1.45;margin-top:8px}
  .soft{display:none}
  .pad.c{top:calc(var(--nav-h) + 4px);bottom:24px;justify-content:center}
  .moments{grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 14px;margin-top:12px}
  .moments button{padding:8px 0}
  .moments .t{font-size:14.5px}
  .moments .n{display:none}
  .taught{font-size:15px;min-height:4.6em;margin-top:10px}
}
@media (prefers-reduced-motion:reduce){
  .slide .glow,.slide.on .glow,.slide.on .bleed img,.slide.on .card{animation:none!important}
}