:root {
  --ink: #070605;
  --white: #f7f5f2;
  --mute: #b9b3ab;
  --orange: #c44716;
  --orange-hi: #e2602b;
  --teal: #16a9c4;
  --pad: clamp(22px, 5vw, 88px);
  --ease: cubic-bezier(.2, .7, .1, 1);
}

/*
* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  font-family: "Noto Sans", "Helvetica Neue", Arial, sans-serif;
  color: var(--white);
  background: var(--ink);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img { display: block; max-width: 100%; height: auto; }
*/

/* ---------- stage ---------- */
.film, .shade { position: fixed; inset: 0; width: 100%; height: 100%; }
.film { z-index: 0; overflow: hidden; background: var(--ink) url(../assets/film/poster-assemble.jpg) 34% 50% / cover no-repeat; }
.film video, .film img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* darker at the top for the bar and at the bottom for the copy, open in the middle for the picture */
.shade { z-index: 1; pointer-events: none; background: linear-gradient(rgb(7 6 5 / .5), transparent 20%, transparent 44%, rgb(7 6 5 / .72) 96%); }

/* ---------- top bar ---------- */
.bar { position: fixed; z-index: 6; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 44px; padding: 24px var(--pad); }
.logo img { height: 26px; width: auto; }
.bar-links { display: flex; gap: 30px; font-size: 15px; font-weight: 700; }
.bar-links a, .plain { opacity: .85; transition: opacity .25s; }
.bar-links a:hover, .plain:hover { opacity: 1; }
.bar-end { margin-left: auto; display: flex; align-items: center; gap: 26px; font-size: 15px; font-weight: 700; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 17px 30px; border-radius: 6px;
  font-family: Montserrat, sans-serif; font-weight: 700; font-size: 16px; line-height: 1; white-space: nowrap;
  transition: background .25s, color .25s, border-color .25s, transform .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn-sm { padding: 13px 20px; font-size: 14px; }
.btn-fill { background: var(--orange); color: #fff; }
.btn-fill:hover { background: var(--orange-hi); }
.btn-line { border: 1.5px solid rgb(247 245 242 / .6); }
.btn-line:hover { border-color: #fff; background: #fff; color: var(--ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 4px; }

/* ---------- chapters ---------- */
main { position: relative; z-index: 4; }
.ch { position: relative; height: calc(var(--h, 100) * 1svh); }
.stage {
  position: sticky; top: 0; height: 100svh;
  padding: clamp(104px, 15vh, 148px) var(--pad) clamp(40px, 8vh, 76px);
  display: flex; flex-direction: column; justify-content: flex-end; gap: clamp(20px, 3.6vh, 36px);
}

.hl { font-family: Montserrat, sans-serif; font-weight: 800; line-height: 1; letter-spacing: -.025em; text-wrap: balance; }
.hl-xl { font-size: clamp(38px, 6.6vw, 124px); }
.hl-lg { font-size: clamp(36px, 5.8vw, 108px); }
.hl .ln { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.hl .ln > span { display: block; }
.hl em { font-style: normal; color: var(--orange-hi); }
.thin { font-weight: 300; }
/* at the top of the frame the copy sits on the sunset sky, where the orange accent would disappear */
.stage-top { justify-content: flex-start; }
.stage-top .hl em { color: inherit; }
.stage-top .split { grid-template-columns: 1fr; gap: clamp(16px, 2.4vh, 26px); }
.stage-top .finds { grid-template-columns: repeat(3, 1fr); gap: 0 clamp(20px, 3vw, 48px); }

.lead { font-size: clamp(17px, 1.5vw, 23px); line-height: 1.5; color: #e8e3dc; }
.split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 5vw, 88px); align-items: end; }
.actions { display: flex; flex-wrap: wrap; gap: 14px; }
.split .actions { justify-content: flex-end; }
.actions-center { justify-content: center; }

.finds { display: grid; }
.finds a { display: block; padding: 13px 0 14px; border-top: 1px solid rgb(247 245 242 / .32); font-family: Montserrat, sans-serif; font-weight: 700; font-size: clamp(17px, 1.5vw, 22px); transition: color .25s; }
.finds a:hover { color: var(--orange-hi); }

/* closing */
.ch-end { height: 100svh; }
.ch-end .stage { position: relative; align-items: center; text-align: center; padding-top: clamp(96px, 13vh, 128px); gap: clamp(16px, 2.6vh, 26px); }
.ch-end .hl { font-size: clamp(34px, 5vw, 92px); }
.foot { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-wrap: wrap; gap: 12px 32px; padding: 24px var(--pad) 28px; font-size: 14px; color: var(--mute); background: rgb(7 6 5 / .74); }
.foot span { margin-right: auto; }
.foot a:hover { color: #fff; }

/* ---------- reveals (only when JS is running) ---------- */
/* With JS, copy is held in place on screen instead of riding its chapter, so it can stay up for as long
   a stretch of the scroll as its data-on window says, even past the end of its own chapter. */
.js .ch:not(.ch-end) .stage { position: fixed; inset: 0; height: auto; pointer-events: none; }
.js .ch:not(.ch-end) .r.on { pointer-events: auto; }
.js .r { opacity: 0; transform: translateY(22px) scale(.975); transform-origin: 50% 60%; transition: opacity .6s var(--ease), transform .9s var(--ease); }
.js .r.on { opacity: 1; transform: none; transition-delay: calc(var(--d, 0) * 90ms); }
.js .r.past { transform: scale(1.06); }
.js .hl.r { transform: none; }
.js .hl.r.past { transform: scale(1.05); transform-origin: 0 60%; }
.js .hl .ln > span { transform: translateY(108%); transition: transform 1s var(--ease); }
.js .hl.on .ln > span { transform: none; }
.js .hl.on .ln:nth-child(2) > span { transition-delay: 90ms; }
.rm .r, .rm .hl .ln > span { transition: none !important; }

/* ---------- small screens ---------- */
@media (max-width: 900px) {
  .bar-links, .plain { display: none; }
  .logo img { height: 22px; }
  .shade { background: linear-gradient(rgb(7 6 5 / .5), rgb(7 6 5 / .08) 16%, rgb(7 6 5 / .4) 42%, rgb(7 6 5 / .88) 80%); }
  /* on a phone the couple sit mid-screen, so this chapter's copy goes below them like the others */
  .ch:not(.ch-end) .stage-top { justify-content: flex-end; }
  .ch:not(.ch-end) .stage-top .hl { font-size: 28px; }
  .stage-top .finds a { padding: 9px 0 10px; }
  .split { grid-template-columns: 1fr; align-items: start; }
  .split .actions { justify-content: flex-start; }
  .foot { flex-direction: column; gap: 6px; padding-top: 16px; padding-bottom: 18px; }
  .stage-top .finds { grid-template-columns: 1fr; }
}