/* Newsletter signup: one-row card (home, About) and end-of-story box. */
/* Rice paper: light grained paper inside a slender deeper-beige frame. */
.nl-band { background: #fff; padding: 48px 24px; }
.nl-card, .nl-story {
  --nl-ink: #141414; --nl-muted: #5b554c; --nl-line: #a99f90; --nl-accent: #141414;
  box-sizing: border-box; color: var(--nl-ink); background: #f8f4ec url("newsletter-grain.png");
  border: 10px solid #e6dccb; border-radius: 2px;
  font-family: "Work Sans", "Helvetica Neue", Arial, "PingFang TC", "Noto Sans TC", sans-serif;
}
.nl-card { max-width: 1088px; margin: 0 auto; padding: 16px 28px; display: flex; align-items: center; gap: 28px; }
.nl-card { flex-wrap: wrap; }
.nl-card .nl-text { flex: 1 1 300px; min-width: 0; }
.nl-title {
  margin: 0 0 6px; padding: 0; color: var(--nl-ink); font-weight: 400; letter-spacing: 0; text-transform: none;
  font-family: "EB Garamond", Georgia, "Songti TC", "Noto Serif TC", serif; font-size: 26px; line-height: 1.15;
}
.nl-blurb { margin: 0; color: var(--nl-muted); font-size: 15px; line-height: 1.55; }
.nl-row { display: flex; gap: 12px; flex: 0 0 auto; }
.nl-card .nl-row { width: 420px; }
.nl-card .nl-title { margin-bottom: 2px; }
.nl-form .nl-input {
  flex: 1 1 auto; min-width: 0; height: 46px; box-sizing: border-box; margin: 0; padding: 0 18px !important;
  font: inherit; font-size: 16px; color: var(--nl-ink) !important; -webkit-text-fill-color: var(--nl-ink); caret-color: var(--nl-ink); background: transparent !important;
  border: 1px solid var(--nl-line) !important; border-radius: 2px; box-shadow: none; line-height: normal;
}
.nl-form .nl-input::placeholder { color: #8a8378; opacity: 1; }
.nl-form .nl-input:focus { outline: 2px solid var(--nl-accent); outline-offset: 2px; border-color: var(--nl-accent) !important; }
.nl-form .nl-btn {
  flex: 0 0 auto; height: 46px; margin: 0; padding: 0 24px; font-family: inherit; text-transform: none; line-height: 1; font-size: 15px; font-weight: 500;
  letter-spacing: 0.06em; color: #fff !important; background: var(--nl-accent); border: 0; border-radius: 2px; cursor: pointer;
}
.nl-form .nl-btn:hover { background: #b23a2e; }
.nl-form .nl-btn:focus-visible { outline: 2px solid var(--nl-ink); outline-offset: 2px; }
.nl-form .nl-btn[disabled] { opacity: 0.7; cursor: default; }
.nl-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nl-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.nl-form .nl-input:-webkit-autofill { -webkit-box-shadow: 0 0 0 100px #f8f4ec inset; -webkit-text-fill-color: var(--nl-ink); }
.nl-note { flex-basis: 100%; margin: 12px 0 0; text-align: inherit; font-size: 15px; line-height: 1.5; color: #a1321f; }
.nl-card .nl-note { margin: -16px 0 0; text-align: right; }
.nl-done { margin: 0; color: var(--nl-ink); font-size: 17px; line-height: 1.5; }

/* End of a story */
.nl-story-wrap { clear: both; padding-top: 48px; }
.nl-form.nl-story { max-width: 680px; margin: 0 auto 8px !important; padding: 28px 40px; text-align: center; }
.nl-story .nl-title { font-style: italic; margin-bottom: 12px; }
.nl-story .nl-blurb { max-width: 480px; margin: 0 auto 18px; }
.nl-story .nl-row { width: 100%; }

@media (max-width: 860px) {
  .nl-band { padding: 36px 16px; }
  .nl-card { flex-direction: column; align-items: stretch; gap: 14px; padding: 18px 18px; }
  .nl-card .nl-row { width: 100%; }
  .nl-card .nl-text { flex: none; }
  .nl-card .nl-note { margin: 0; text-align: left; }
  .nl-form.nl-story { padding: 22px 18px; }
}
@media (max-width: 480px) {
  .nl-row { flex-direction: column; }
  .nl-title { font-size: 24px; }
}