/* fadetocolor.com, in the app's look (design/DIRECTION.md): the room with the lights down.
   Black, projector white, tungsten for the one thing that is yours to do, and the films'
   own colours as the only pictures. Timeless, as in the app. */

@font-face { font-family: Grotesk; src: url(/fonts/grotesk-bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: Sans; src: url(/fonts/sans-regular.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: Sans; src: url(/fonts/sans-medium.woff2) format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: Sans; src: url(/fonts/sans-semibold.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ground: #000; --raised: #141210; --raised2: #1E1B18;
  --ink: #F3EEE7; --ink2: #ABA399; --ink3: #857D74;
  --rule: rgba(243, 238, 231, .14); --accent: #F2A23C;
  --margin: clamp(20px, 5vw, 64px);
  --column: 680px;
  --edge: max(var(--margin), calc((100% - 1180px) / 2 + var(--margin))); /* the page's left and right, lined up with its sections */
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--ground); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--ink); background: var(--ground);
  font: 400 17px/1.5 Sans, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration-color: var(--ink3); text-underline-offset: .2em; }
a:hover { text-decoration-color: var(--ink); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { font-family: Grotesk, Sans, sans-serif; font-weight: 700; margin: 0; }
h1 { font-size: clamp(44px, 8.4vw, 104px); line-height: .98; letter-spacing: -.035em; }
h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.04; letter-spacing: -.03em; }
h3 { font-family: Sans, sans-serif; font-weight: 600; font-size: 19px; letter-spacing: -.02em; }
p { margin: 0; }
.meta { color: var(--ink2); font-size: 14px; line-height: 1.4; }
.dim { color: var(--ink3); }

/* The bar along the top: the name, and the two pages anyone needs */
.top {
  position: absolute; z-index: 2; inset: 0 0 auto; display: flex; align-items: center; gap: 24px;
  padding: 18px var(--edge); font-size: 15px;
}
.top .mark { display: inline-flex; align-items: center; gap: 11px; font-family: Grotesk, sans-serif; font-weight: 700; font-size: 18px; letter-spacing: -.015em; text-decoration: none; margin-right: auto; color: var(--ink); }
/* The mark (design/brand): the icon as tall as the cap height x 1.4, half its width from the word */
.top .mark .color { color: var(--accent); }
/* "Fade" in steps, each letter lighter, coming up out of the dark (design/brand) */
.top .mark .f1 { color: #7A7067; } .top .mark .f2 { color: #9A9086; } .top .mark .f3 { color: #BAB0A5; } .top .mark .f4 { color: #DAD1C7; }
.top a:not(.mark) { color: var(--ink2); text-decoration: none; }
.top a:not(.mark):hover { color: var(--ink); }
.top.page { position: static; }
/* Over the hero's bars the mark needs the dark behind it (its first letters are dark by design) */
.top:not(.page) { background: linear-gradient(rgba(0, 0, 0, .82), rgba(0, 0, 0, .55) 55%, transparent); padding-bottom: 34px; }
.top a { text-shadow: 0 1px 8px rgba(0, 0, 0, .6); }

/* The hero: one film across the screen, falling off into the floor, its light under it */
.hero { position: relative; min-height: min(100svh, 980px); display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; }
.hero .bars {
  position: absolute; inset: 0 0 34%; width: 100%; height: 66%; image-rendering: auto;
  -webkit-mask-image: linear-gradient(#000 0 62%, transparent 100%); mask-image: linear-gradient(#000 0 62%, transparent 100%);
}
.hero .glow {
  position: absolute; left: -10%; right: -10%; top: 48%; height: 46%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--key) 30%, transparent), transparent 70%);
  pointer-events: none;
}
.hero .words { position: relative; padding: 0 var(--margin) clamp(40px, 8vh, 88px); max-width: 1180px; width: 100%; margin: 0 auto; }
.hero .film { margin-top: 26px; text-shadow: 0 1px 12px rgba(0, 0, 0, .7); }
/* Wide: the film's name is a caption for the bars, at the right, level with the store buttons */
@media (min-width: 900px) {
  .hero .film { position: absolute; right: var(--margin); bottom: calc(clamp(40px, 8vh, 88px) + 15px); margin: 0; text-align: right; }
}
.hero .film b { font-weight: 600; color: var(--ink); }
.hero .lead { margin-top: 22px; max-width: 34em; color: var(--ink2); font-size: clamp(17px, 1.6vw, 20px); }

/* Where to get it: the stores' own buttons once the app is out; until then, the word */
.get { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; align-items: center; }
.store {
  display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px; border-radius: 26px;
  background: var(--ink); color: var(--ground); font-weight: 600; font-size: 16px; text-decoration: none;
}
/* The two stores' buttons the same width, side by side or one above the other */
.get .store { min-width: 230px; justify-content: center; }
.store.soon { background: var(--raised2); color: var(--ink2); border: 1px solid var(--rule); }
.store svg { width: 20px; height: 20px; }

/* What it does: a few short sections, the words in a column */
.section { padding: clamp(64px, 11vh, 128px) var(--margin) 0; max-width: 1180px; margin: 0 auto; }
.section > p, .section .lead { max-width: 34em; margin-top: 18px; color: var(--ink2); font-size: clamp(17px, 1.5vw, 19px); }
.points { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 28px 40px; margin: 44px 0 0; padding: 0; list-style: none; }
.points li { border-top: 1px solid var(--rule); padding-top: 18px; }
.points p { margin-top: 6px; color: var(--ink2); font-size: 16px; }

/* Films as the app shows them: tall bars, their light on the floor, the title under */
.films {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 40vw), 1fr)); gap: 34px 18px;
  margin: 44px 0 0; padding: 0; list-style: none;
}
.film { position: relative; }
.films .film img { display: block; width: 100%; aspect-ratio: 3 / 4.4; height: auto; border-radius: 2px; position: relative; z-index: 1; }
.films .film::before {
  content: ""; position: absolute; left: -20%; right: -20%; top: 62%; height: 34%;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--key) 34%, transparent), transparent 72%);
}
.films .name { position: relative; margin-top: 14px; font-weight: 600; font-size: 16px; line-height: 1.25; letter-spacing: -.02em; }
.films .meta { position: relative; margin-top: 2px; font-size: 13px; }

/* One film in each shape */
.shapes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 36px 22px; max-width: 980px; margin: 44px 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .shapes { grid-template-columns: repeat(3, 1fr); gap: 44px 32px; } }
.shapes img { display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 2px; }
.shapes h3 { margin-top: 14px; font-size: 16px; }
.shapes p { margin-top: 2px; color: var(--ink2); font-size: 14px; line-height: 1.35; }

/* Five frames, as Take Five shows them: three named, one missed, one to come */

/* A page of words: privacy, support */
.doc { max-width: calc(var(--column) + 2 * var(--margin)); margin: 0 auto; padding: clamp(40px, 8vh, 88px) var(--margin) 0; }
.doc h1 { font-size: clamp(40px, 6vw, 64px); }
.doc .updated { margin-top: 14px; }
.doc h2 { font-size: clamp(24px, 3vw, 30px); margin-top: 52px; }
.doc h3 { margin-top: 30px; }
.doc p, .doc ul { margin-top: 14px; color: var(--ink2); }
.doc li { margin-top: 6px; }
.doc strong { color: var(--ink); font-weight: 600; }
.doc .contact { margin-top: 26px; }
.button {
  display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 24px; border-radius: 26px;
  background: var(--ink); color: var(--ground); font-weight: 600; text-decoration: none;
}
.button.quiet { background: var(--raised2); color: var(--ink); border: 1px solid var(--rule); }
.qa { border-top: 1px solid var(--rule); margin-top: 22px; padding-top: 4px; }
.qa summary { cursor: pointer; font-weight: 600; color: var(--ink); padding: 14px 0 0; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: "+"; float: right; color: var(--ink3); font-weight: 400; }
.qa[open] summary::after { content: "–"; }
.qa p { margin-top: 10px; }

/* A link from the app: a shared list, a group's code */
.handoff { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; padding: 96px var(--margin) 64px; max-width: 760px; margin: 0 auto; }
.handoff .kicker { color: var(--accent); font-weight: 600; font-size: 15px; letter-spacing: .02em; }
.handoff h1 { font-size: clamp(40px, 8vw, 76px); margin-top: 14px; overflow-wrap: anywhere; }
.handoff .lead { margin-top: 18px; color: var(--ink2); font-size: 19px; }
.handoff .code { font-family: Grotesk, sans-serif; font-size: clamp(48px, 12vw, 96px); letter-spacing: .08em; margin-top: 26px; color: var(--ink); }
.handoff .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }
.handoff .steps { margin-top: 30px; color: var(--ink2); padding-left: 1.2em; }

footer {
  margin-top: clamp(80px, 14vh, 160px); padding: 28px var(--edge) 40px; border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: 10px 26px; color: var(--ink3); font-size: 14px;
}
footer a { color: var(--ink2); text-decoration: none; }
footer a:hover { color: var(--ink); }
footer .grow { margin-right: auto; }

/* The hero's film fades down as the page opens, a soft edge of light coming down it from the
   top; then the light comes up under it. Without Reduce Motion only. --fall is where the edge
   is, registered so it can be animated. */
@property --fall { syntax: '<percentage>'; inherits: false; initial-value: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .hero .bars {
    -webkit-mask-image: linear-gradient(#000 calc(var(--fall) - 30%), transparent var(--fall)), linear-gradient(#000 0 62%, transparent 100%);
    mask-image: linear-gradient(#000 calc(var(--fall) - 30%), transparent var(--fall)), linear-gradient(#000 0 62%, transparent 100%);
    -webkit-mask-composite: source-in; mask-composite: intersect;
    animation: fall 2.2s cubic-bezier(.3, 0, .2, 1) .1s both;
  }
  @keyframes fall { from { --fall: 0%; } to { --fall: 130%; } }
  .hero .glow { animation: up 1.4s ease-out 1.3s both; }
  @keyframes up { from { opacity: 0; } }
}

/* site.js: the shapes drawing themselves (a sweep from the top, or from the centre out) */
.roll-ring, .roll-nautilus {
  -webkit-mask-image: conic-gradient(#000 var(--a, 360deg), transparent 0); mask-image: conic-gradient(#000 var(--a, 360deg), transparent 0);
}
.roll-rings {
  -webkit-mask-image: radial-gradient(circle closest-side, #000 var(--r, 100%), transparent calc(var(--r, 100%) + 1%));
  mask-image: radial-gradient(circle closest-side, #000 var(--r, 100%), transparent calc(var(--r, 100%) + 1%));
}
/* site.js: films coming up out of the dark (--up: 0 dark, 1 there), their light after them */
.films .film { --up: 1; }
.films .film img { opacity: var(--up); }
.films .film::before { opacity: calc(var(--up) * var(--up)); }

/* site.js: the shapes section pinned. The six names on one side, lit in turn; one large shape on
   the other, the six stacked in it. Phones: the names above, the shape below. */
.shapes-section.pinned { display: grid; grid-template-columns: 1fr; align-content: center; min-height: 100svh; padding-top: 0; }
.shapes-section.pinned > h2, .shapes-section.pinned > p { grid-column: 1; }
.shapes-section.pinned .steps { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.shapes-section.pinned .steps li { color: var(--ink3); transition: color .3s; }
.shapes-section.pinned .steps li b { font-weight: 600; font-size: 17px; }
.shapes-section.pinned .steps li span { display: none; }
.shapes-section.pinned .steps li.on { color: var(--ink); }
.shapes-section.pinned .shapes { position: relative; display: block; width: min(78vw, 46svh); aspect-ratio: 1; margin: 28px auto 0; }
.shapes-section.pinned .shapes li { position: absolute; inset: 0; }
.shapes-section.pinned .shapes h3, .shapes-section.pinned .shapes p { display: none; }
@media (min-width: 900px) {
  .shapes-section.pinned { grid-template-columns: 1fr 1fr; column-gap: 64px; }
  .shapes-section.pinned .steps { display: block; margin-top: 36px; }
  .shapes-section.pinned .steps li { padding: 10px 0; border-top: 1px solid var(--rule); }
  .shapes-section.pinned .steps li span { display: block; font-size: 14px; color: inherit; opacity: .8; }
  .shapes-section.pinned .shapes { grid-column: 2; grid-row: 1 / span 3; width: min(100%, 72svh); margin: 0; align-self: center; }
}

/* A film under the pointer: the playhead over it (site.js) */
.films .playhead {
  position: absolute; top: 0; left: 0; width: 2px; margin-left: -1px; z-index: 2; pointer-events: none;
  background: rgba(243, 238, 231, .9); box-shadow: 0 0 12px rgba(243, 238, 231, .5); opacity: 0; transition: opacity .2s;
}
.films .film.scrub .playhead { opacity: 1; }

/* A film's own page (pages.py): its barcode across the top, what it is, and more films */
.kicker, .section > .kicker { color: var(--accent); font-weight: 600; font-size: 15px; letter-spacing: .02em; margin-bottom: 12px; }
.filmpage .barcode { display: block; width: 100%; height: clamp(200px, 38vw, 520px); }
.filmpage .section:first-of-type { padding-top: clamp(36px, 6vh, 64px); }
.filmpage h1 { font-size: clamp(40px, 6.4vw, 80px); overflow-wrap: anywhere; }
.filmpage .section > .meta { margin-top: 14px; font-size: 16px; }
.filmpage .get { margin-top: 26px; }
.films a { display: block; color: inherit; text-decoration: none; }
.films a:hover .name { text-decoration: underline; text-decoration-color: var(--ink3); }
.all { margin-top: 36px; }
.all a { color: var(--ink); font-weight: 600; }
main.section > h1 { font-size: clamp(40px, 6.4vw, 80px); }
main.section > .get { margin-top: 56px; }

/* Take Five's question (site.js): the film's colors, four titles, as the app asks it */
.quiz { margin-top: 44px; max-width: 640px; }
.quiz-ask { color: var(--ink2); font-size: 15px; }
.quiz-film { display: block; width: 100%; height: clamp(120px, 18vw, 180px); border-radius: 2px; margin-top: 14px; }
.quiz-choices { display: grid; gap: 10px; margin-top: 18px; }
.quiz .choice {
  font: 600 18px/1.3 Sans, sans-serif; letter-spacing: -.02em; color: var(--ink); text-align: left;
  background: var(--raised); border: 1px solid transparent; border-radius: 28px; min-height: 56px; padding: 12px 24px; cursor: pointer;
  transition: background-color .3s, color .3s;
}
.quiz .choice:hover:not(:disabled) { background: var(--raised2); }
.quiz .choice:disabled { cursor: default; }
.quiz .choice.lit { background: var(--ink); color: var(--ground); }
.quiz .choice.dark { background: var(--ground); border-color: var(--rule); color: var(--ink3); text-decoration: line-through; }
.quiz .reveal { display: block; font-weight: 400; font-size: 14px; color: rgba(0, 0, 0, .6); margin-top: 2px; }
.quiz-after { margin-top: 18px; color: var(--ink2); font-size: 17px; max-width: 34em; }
.quiz-after:empty { display: none; }
.quiz-again { margin-top: 18px; font: 600 16px Sans, sans-serif; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-decoration-color: var(--ink3); text-underline-offset: .2em; }