/* THE WITH — the talk page, /talk.
   loaded after site.css. site.css gives it the ground, the grain, the
   wordmark's layers and the footer. this file only lays out the talk.
   every size, colour and position is a dial: assets/look.js, talk*,
   tuned in tune.html with the page switch on "talk".

   two rules from site.css hold here too:
   - nothing between the type and the ground may make a stacking context
     (transform, filter, opacity under 1, z-index), or the blend modes
     lose sight of the ground. pieces move with top, never transform.
   - body stays transparent. the ground colour is on html. */

/* ---------- one screen, like the front page. nothing scrolls.
   site.css already locks html and body and makes .frame 100dvh. if the
   words and the form are taller than the room between the top and the
   footer, talk.js sets --talk-fit under 1 and every size below shrinks
   by it, so the column fits. sizes, not transform: a transform would
   cut the blend modes off from the ground. */

/* and the photos. with talkBlock.avoid on, talk.js keeps every word off
   anna's and alexa's photos in the ground: it gives the heading pieces a
   max-width (and --talk-wfit under 1 if they must shrink to make it), and
   moves form pieces that sit beside a photo across with an inline margin.
   all of it is undone and worked out again on every layout. */

/* ---------- the snapshots ----------
   two polaroids, behind the words and above the ground. positioned but
   no z-index, and before <main>, so they paint over the ground and the
   grain and under every word, in the root stacking context with the
   rest (the words' blends still reach the ground through them).
   talk.js moves them: .snap is where one rests (--x --y --w --r),
   .snap__drop is the slap and the whip away, the img takes the knock. */
.snaps { position: fixed; inset: 0; pointer-events: none; overflow: hidden; }
/* with webgl, the crumple canvas draws them and the images are only its source */
.snaps__gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.snaps.is-gl .snap { display: none; }
.snap {
  position: absolute;
  left: var(--x, 50%);
  top: var(--y, 50%);
  width: var(--w, 15vw);
  margin: 0;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}
.snap__drop {
  opacity: 0;
  filter: drop-shadow(0 calc(var(--w, 200px) * 0.04) calc(var(--w, 200px) * 0.07) rgba(0, 0, 0, var(--shadow, 0.5)))
          brightness(calc(1 - var(--dim, 0.12)));
}
/* the slap: there at once, big and turned, driven straight down and
   stopped dead at its size. no squash, no rebound, nothing that grows
   after it lands. the shadow snaps from far to tight as it hits, and the
   photo takes a two-pixel knock. no fade in, none out: it's cut. */
.snap.is-in .snap__drop {
  opacity: 1;
  animation: snap-slap 0.17s cubic-bezier(0.55, 0, 1, 0.45) both;
}
@keyframes snap-slap {
  0% {
    transform: scale(1.45) rotate(var(--spin, 7deg));
    filter: drop-shadow(0 calc(var(--w, 200px) * 0.16) calc(var(--w, 200px) * 0.2) rgba(0, 0, 0, calc(var(--shadow, 0.5) * 0.55)))
            brightness(calc(1 - var(--dim, 0.12)));
  }
  100% {
    transform: none;
    filter: drop-shadow(0 calc(var(--w, 200px) * 0.04) calc(var(--w, 200px) * 0.07) rgba(0, 0, 0, var(--shadow, 0.5)))
            brightness(calc(1 - var(--dim, 0.12)));
  }
}
.snap.is-in img { animation: snap-knock 0.12s linear 0.17s both; }
@keyframes snap-knock {
  0%   { transform: translate(0, 0); }
  35%  { transform: translate(1.2%, 0.7%); }
  70%  { transform: translate(-0.6%, -0.3%); }
  100% { transform: translate(0, 0); }
}
/* someone is typing: whipped off the nearest edge */
.snap.is-away .snap__drop {
  opacity: 0;
  transform: translateX(var(--off, -120vw)) rotate(calc(var(--spin, 7deg) * -2));
  transition: transform 0.36s cubic-bezier(0.55, 0, 0.8, 0.2), opacity 0.12s linear 0.24s;
}
.snap img { display: block; width: 100%; height: auto; }
@media (prefers-reduced-motion: reduce) {
  .snap.is-in .snap__drop { animation: none; }
  .snap.is-away .snap__drop { transition: none; }
  .snap.is-in img { animation: none; }
}

/* ---------- the backing ----------
   a soft panel just behind the words: over the ground and the snapshots,
   under every letter. the first thing in .talk, so it paints before the
   words; no z-index, so the words' blends still see through it to what
   is behind. frosted like vellum: a blur of whatever passes behind,
   washed of some colour, a tint, and a paper tooth on top, with
   feathered edges. dials: look.js, talkBack. */
.talk__back {
  display: var(--talk-back-show, block);
  position: absolute;
  left: calc(var(--talk-back-pad, 3vw) * -1);
  right: calc(var(--talk-back-pad, 3vw) * -1);
  top: calc(var(--safe-t) + var(--talk-top, 24vh) - var(--talk-back-pad, 3vw));
  bottom: calc(var(--talk-back-pad, 3vw) * -1);
  pointer-events: none;
  background: var(--talk-back-bg, rgba(18, 12, 8, 0.4));
  -webkit-backdrop-filter: var(--talk-back-blur, none);
  backdrop-filter: var(--talk-back-blur, none);
  isolation: isolate;
  --f: var(--talk-back-feather, 4vw);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent),
                      linear-gradient(to bottom, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent),
              linear-gradient(to bottom, transparent, #000 var(--f), #000 calc(100% - var(--f)), transparent);
  mask-composite: intersect;
}
/* the paper in it: a fine grey tooth and a soft cloudy unevenness, like
   vellum or tracing paper over a photo. soft-light, so it reads as
   texture on whatever is behind rather than a grey film. */
.talk__back::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: var(--talk-back-tex, 0.5);
  mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23g%29'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008 0.012' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23m%29'/%3E%3C/svg%3E");
  background-size: var(--talk-back-tooth, 240px) var(--talk-back-tooth, 240px), 700px 700px;
}

/* the link home, laid exactly over the wordmark (its art is 1279.71 x 250.52) */
.talk__home {
  position: absolute;
  z-index: 3;
  top: calc(var(--safe-t) + var(--mark-top));
  left: var(--mark-l);
  width: var(--mark-w);
  aspect-ratio: 1279.71 / 250.52;
}
.talk__home:focus-visible { outline: 1px solid var(--talk-form-color, #ecd3b4); outline-offset: 6px; }

/* ---------- the column ---------- */
.talk {
  position: relative;
  width: var(--talk-w, 32vw);
  max-width: 100%;
  margin-left: calc((100% - var(--talk-w, 32vw)) / 2 + var(--talk-x, 0vw));
  padding-top: calc(var(--safe-t) + var(--talk-top, 24vh));
  display: flex;
  flex-direction: column;
  gap: calc(var(--talk-gap, 3.5vh) * var(--talk-fit, 1));
  text-align: var(--talk-align, left);
}
.talk p, .talk h1, .talk h2 { margin: 0; }

/* every piece of type that sits in the ground: the flat words, then
   the same words again as ::after, mixed into the ground (the lit layer),
   then ::before, the light catching it. same build as the front page. */
.talk-ink { position: relative; white-space: pre-line; }
.talk-ink::after,
.talk-ink::before,
.talk-sheen::before {
  content: attr(data-ink);
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  white-space: inherit;
  text-shadow: none;
  pointer-events: none;
}
.talk-ink::before,
.talk-sheen::before {
  color: transparent;
  background-image: radial-gradient(var(--sheen-r, 240px) circle at var(--sx, -999px) var(--sy, -999px), var(--sheen-c, #fff4ea), transparent 70%);
  -webkit-background-clip: text;
  background-clip: text;
  mix-blend-mode: plus-lighter;
  z-index: 1;
}
.talk-sheen { position: relative; white-space: pre-line; }

.talk__kicker {
  top: var(--talk-kick-y);
  font-size: calc(var(--talk-kick-size) * var(--talk-fit, 1) * var(--talk-wfit, 1));
  font-weight: var(--talk-kick-weight);
  letter-spacing: var(--talk-kick-track);
  line-height: var(--talk-kick-lead);
  margin-bottom: 1.4em !important;
}
.talk__title {
  top: var(--talk-title-y);
  font-size: calc(var(--talk-title-size) * var(--talk-fit, 1) * var(--talk-wfit, 1));
  font-weight: var(--talk-title-weight);
  letter-spacing: var(--talk-title-track);
  line-height: var(--talk-title-lead);
  color: var(--talk-title-flat);
  text-shadow: 0 1px 26px rgba(0, 0, 0, 0.45);
  margin-bottom: 0.55em !important;
}
.talk__title::after { color: var(--talk-title-lit); opacity: var(--talk-title-k); mix-blend-mode: var(--talk-title-blend); }
.talk__title::before { opacity: var(--talk-title-sheen, 0); }

.talk__info { position: relative; top: var(--talk-info-y); }
.talk__kicker,
.talk__line {
  color: var(--talk-info-flat);
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.5);
}
.talk__line {
  font-size: calc(var(--talk-info-size) * var(--talk-fit, 1) * var(--talk-wfit, 1));
  font-weight: var(--talk-info-weight);
  letter-spacing: var(--talk-info-track);
  line-height: var(--talk-info-lead);
}
.talk__kicker::after,
.talk__line::after { color: var(--talk-info-lit); opacity: var(--talk-info-k); mix-blend-mode: var(--talk-info-blend); }
.talk__kicker::before,
.talk__line::before { opacity: var(--talk-info-sheen, 0); }

/* ---------- the form ---------- */
.talk form {
  display: block;
  position: relative;
  top: var(--talk-form-y);
  width: 100%;
  color: var(--talk-form-color);
  mix-blend-mode: var(--talk-form-blend, normal);
}
.talk__field { display: block; position: relative; text-align: left; }
.talk__field + .talk__field { margin-top: calc(var(--talk-field-gap) * var(--talk-fit, 1)); }
.talk__label {
  display: block;
  font-size: calc(var(--talk-label-size) * var(--talk-fit, 1));
  font-weight: var(--talk-label-weight);
  letter-spacing: var(--talk-label-track);
  line-height: 1.4;
  opacity: var(--talk-label-op);
}
.talk__field input,
.talk__field select {
  display: block;
  width: 100%;
  margin: 0;
  background: transparent;
  border: 0;
  border-bottom: var(--talk-rule-w, 1px) solid var(--talk-rule);
  border-radius: 0;
  color: inherit;
  font: inherit;
  font-size: calc(var(--talk-input-size) * var(--talk-fit, 1));
  font-weight: var(--talk-input-weight);
  letter-spacing: var(--talk-input-track);
  text-transform: uppercase;
  line-height: 1.3;
  padding: 0.45em 0 0.5em;
  outline: 0;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.25s ease;
}
.talk__field input[type='email'] { text-transform: none; }
.talk__field input:focus,
.talk__field select:focus { border-bottom-color: var(--talk-rule-hot); }
.talk__field input:-webkit-autofill {
  -webkit-text-fill-color: currentColor;
  transition: background-color 9999s ease-in-out 0s;
}
.talk__field select {
  cursor: pointer;
  padding-right: 1.6em;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 0.7em) 55%, calc(100% - 0.35em) 55%;
  background-size: 0.35em 0.35em;
  background-repeat: no-repeat;
}
.talk__field select option { background: #1a120c; color: #ecd3b4; }
.talk__field.is-bad input { border-bottom-color: var(--line-bad, #e8b189); animation: talk-warn 0.5s ease; }
@keyframes talk-warn { 20% { transform: translateX(-4px); } 60% { transform: translateX(4px); } }

.talk__consent {
  display: flex;
  gap: 0.9em;
  /* the box sits on the middle of the words, however many lines they run to */
  align-items: center;
  text-align: left;
  position: relative;
  top: var(--talk-cons-y);
  margin-top: calc(var(--talk-field-gap) * 1.3 * var(--talk-fit, 1));
  font-size: calc(var(--talk-cons-size) * var(--talk-fit, 1));
  letter-spacing: var(--talk-cons-track);
  line-height: var(--talk-cons-lead);
  opacity: var(--talk-cons-op);
  cursor: pointer;
}
.talk__consent input {
  flex: 0 0 auto;
  -webkit-appearance: none;
  appearance: none;
  width: 1.35em;
  height: 1.35em;
  margin: 0;
  border: var(--talk-rule-w, 1px) solid currentColor;
  border-radius: 0;
  background: transparent;
  cursor: pointer;
}
.talk__consent input:checked { background: currentColor; box-shadow: inset 0 0 0 0.25em var(--ground, #130d09); }
.talk__consent input:focus-visible { outline: 1px solid currentColor; outline-offset: 3px; }
.talk__consent a { color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; }

.talk__trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.talk__go {
  display: block;
  position: relative;
  top: var(--talk-btn-y);
  width: var(--talk-btn-w, 100%);
  margin: calc(var(--talk-field-gap) * 1.6 * var(--talk-fit, 1)) 0 0;
  background: var(--talk-btn-bg, transparent);
  color: var(--talk-btn-fg, inherit);
  border: var(--talk-btn-border, 1px) solid var(--talk-form-color);
  border-radius: 0;
  font: inherit;
  font-size: calc(var(--talk-btn-size) * var(--talk-fit, 1) * var(--talk-wfit, 1));
  white-space: nowrap;
  overflow: hidden;
  font-weight: var(--talk-btn-weight);
  letter-spacing: var(--talk-btn-track);
  text-transform: uppercase;
  line-height: 1;
  padding: var(--talk-btn-pad, 1.4em) 0;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
html[data-page='talk'] .talk[data-align='center'] .talk__go { margin-left: auto; margin-right: auto; }
html[data-page='talk'] .talk[data-btn-side='right'] .talk__go { margin-left: auto; margin-right: 0; }
.talk__go:hover:not(:disabled),
.talk__go:focus-visible { background: var(--talk-btn-hbg); color: var(--talk-btn-hfg); outline: 0; }
.talk__go:disabled { opacity: 0.5; cursor: default; }

.talk__note {
  min-height: 1.7em;
  margin: 1.1em 0 0 !important;
  font-size: calc(var(--talk-cons-size) * var(--talk-fit, 1));
  letter-spacing: var(--note-track, 0.16em);
  font-weight: var(--note-weight, 300);
  color: var(--note-bad, #e8b189);
  text-align: left;
}

/* ---------- done ---------- */
.talk__done { display: none; position: relative; top: var(--talk-done-y); outline: 0; }
body.is-done .talk__done { display: block; }
body.is-done .talk form,
body.is-done #t-free { display: none; }
.talk__done-h,
.talk__done-p {
  color: var(--talk-done-color);
  mix-blend-mode: var(--talk-done-blend, normal);
  text-shadow: 0 1px 22px rgba(0, 0, 0, 0.35);
}
.talk__done-h {
  font-size: calc(var(--talk-done-size) * var(--talk-fit, 1) * var(--talk-wfit, 1));
  font-weight: var(--talk-done-weight);
  letter-spacing: var(--talk-done-track);
  line-height: var(--talk-done-lead);
  opacity: var(--talk-done-op, 1);
  margin-bottom: 0.6em !important;
}
.talk__done-p {
  font-size: calc(var(--talk-note-size) * var(--talk-fit, 1));
  line-height: var(--talk-note-lead);
  letter-spacing: var(--talk-note-track, 0.14em);
  opacity: calc(var(--talk-done-op, 1) * var(--talk-note-op, 0.82));
}
.talk__done-h::before,
.talk__done-p::before { opacity: var(--talk-done-sheen, 0); }
.talk__cal {
  display: inline-block;
  margin-top: 1.6em;
  font-size: calc(var(--talk-label-size) * var(--talk-fit, 1));
  letter-spacing: 0.26em;
  color: var(--talk-form-color);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 0.3em;
}
.talk__cal:hover { opacity: 0.72; }

/* ---------- phones ---------- */
@media (max-width: 860px) {
  /* under 16px, iOS zooms the page on focus and never zooms back */
  .talk__field input,
  .talk__field select { font-size: max(16px, calc(var(--talk-input-size) * var(--talk-fit, 1))); }
}

@media (prefers-reduced-motion: reduce) {
  .talk__field.is-bad input { animation: none; }
}