/* "A thought left behind": the footer link and the private note it opens. */
.site-foot .site-foot__thought { margin: 34px 0 0; }
.thought-link {
  appearance: none; border: 0; padding: 0; background: none; cursor: pointer;
  font: inherit; font-size: 17px; color: rgba(231, 232, 226, .82);
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px;
  text-decoration-color: rgba(231, 232, 226, .45); transition: color .25s ease, text-decoration-color .25s ease;
}
.thought-link:hover, .thought-link:focus-visible { color: var(--paper, #e7e8e2); text-decoration-color: var(--marigold, #f2a20c); }

.thought {
  --t-bg: #222839; --t-edge: rgba(231, 232, 226, .09); --t-line: rgba(231, 232, 226, .2); --t-text: #eceae4;
  --t-mute: rgba(231, 232, 226, .66); --t-faint: rgba(231, 232, 226, .42); --t-btn: #2c3244; --t-btn-on: #353d55;
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 16px; border: 0; background: transparent; color: var(--t-text); overflow: auto;
}
.thought[open] { display: grid; place-items: center; }
.thought::backdrop { background: rgba(6, 8, 18, .58); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); }
.thought__card {
  position: relative; width: min(520px, 100%); padding: 46px 30px 26px; border-radius: 18px;
  background: var(--t-bg); box-shadow: 0 0 0 1px var(--t-edge), 0 40px 90px rgba(0, 0, 0, .5);
  animation: t-in .38s cubic-bezier(.2, .9, .3, 1) both;
}
.thought.is-closing .thought__card { animation: t-out .22s ease forwards; }
.thought.is-closing::backdrop { opacity: 0; transition: opacity .22s ease; }
@keyframes t-in { from { opacity: 0; transform: translateY(14px) scale(.985); } }
@keyframes t-out { to { opacity: 0; transform: translateY(8px) scale(.985); } }

.thought__close {
  position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; padding: 9px; border: 0; border-radius: 50%;
  background: none; color: var(--t-mute); cursor: pointer; transition: background-color .2s ease, color .2s ease;
}
.thought__close:hover { background: rgba(231, 232, 226, .08); color: var(--t-text); }
.thought__close svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.thought__write { display: flex; flex-direction: column; transition: opacity .35s ease, transform .38s cubic-bezier(.4, 0, .2, 1); }
.thought__write.is-leaving { opacity: 0; transform: translateY(-10px) scale(.98); }
.thought__title { margin: 0; text-align: center; font-family: var(--sans); font-weight: 600; font-size: clamp(25px, 3.2vw, 30px); line-height: 1.15; letter-spacing: -.005em; }
.thought__sub { margin: 10px 0 24px; text-align: center; font-size: 17px; line-height: 1.45; color: var(--t-mute); }
.thought__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.thought__text {
  display: block; width: 100%; min-height: 150px; max-height: 46vh; resize: vertical; margin: 0; padding: 16px 18px;
  border: 1px solid var(--t-line); border-radius: 12px; background: transparent; color: var(--t-text);
  font-family: var(--serif); font-weight: 300; font-size: 19px; line-height: 1.6; caret-color: var(--marigold, #f2a20c);
  transition: border-color .25s ease, background-color .25s ease;
}
.thought__text::placeholder { color: var(--t-faint); font-family: var(--sans); font-weight: 400; font-size: 18px; }
.thought__text:focus { outline: none; border-color: rgba(231, 232, 226, .42); background: rgba(231, 232, 226, .025); }
.thought__hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.thought__fine { margin: 12px 0 16px; font-size: 14.5px; color: var(--t-mute); }
.thought__leave {
  width: 100%; padding: 14px 20px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--t-btn-on); color: var(--t-text); font: inherit; font-weight: 600; font-size: 17px;
  transition: background-color .25s ease, color .25s ease, opacity .25s ease;
}
.thought__leave span { color: var(--marigold, #f2a20c); }
.thought__leave:hover:not(:disabled) { background: #404969; }
.thought__leave:disabled { background: var(--t-btn); color: var(--t-faint); cursor: default; }
.thought__leave:disabled span { color: inherit; }
.thought__leave.is-busy { color: var(--t-mute); }

.thought__done { display: flex; flex-direction: column; justify-content: center; padding: 26px 0 30px; text-align: center; animation: t-in .5s cubic-bezier(.2, .9, .3, 1) both; }
.thought__done-line { margin: 0 auto; max-width: 14em; font-family: var(--hand); font-size: clamp(27px, 4vw, 32px); line-height: 1.3; text-wrap: balance; color: var(--t-text); transform: rotate(-2deg); }

@media (max-width: 560px) {
  .thought__card { padding: 44px 20px 20px; }
  .thought__sub { margin-bottom: 18px; }
  .thought__text { min-height: 130px; font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .thought__card, .thought__done { animation: none; }
}