:root {
  --signed-letter-accent: #8fdcff;
  --signed-letter-ink: #edf5f7;
  --signed-letter-muted: rgba(220, 232, 235, 0.68);
  --signed-letter-line: rgba(143, 220, 255, 0.28);
  --signed-letter-paper: rgba(4, 11, 16, 0.78);
  --signed-letter-rule: rgba(143, 220, 255, 0.09);
}

.signed-letter-surface {
  position: relative;
  isolation: isolate;
  --letter-accent: var(--signed-letter-accent);
  --letter-line: var(--signed-letter-line);
  --letter-paper-texture:
    radial-gradient(circle at 12% 7%, rgba(143, 220, 255, 0.085), transparent 32%),
    radial-gradient(circle at 88% 92%, rgba(88, 163, 194, 0.045), transparent 36%),
    repeating-linear-gradient(
      92deg,
      rgba(239, 248, 250, 0.022) 0,
      rgba(239, 248, 250, 0.022) 1px,
      transparent 1px,
      transparent 7px
    ),
    repeating-linear-gradient(
      4deg,
      rgba(143, 220, 255, 0.014) 0,
      rgba(143, 220, 255, 0.014) 1px,
      transparent 1px,
      transparent 13px
    ),
    linear-gradient(180deg, rgba(6, 17, 23, 0.96), rgba(2, 8, 12, 0.98));
}

.signed-letter-body {
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", Georgia, serif;
  letter-spacing: 0.015em;
  text-wrap: pretty;
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent calc(2em - 1px),
    var(--signed-letter-rule) calc(2em - 1px),
    var(--signed-letter-rule) 2em
  );
  background-position: 0 0.12em;
}

.signed-letter-signature {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: end;
  gap: 0.35rem;
  margin-top: clamp(2.75rem, 7vw, 4.75rem);
  padding-top: 1.25rem;
  border-top: 1px solid var(--letter-line, var(--signed-letter-line));
  color: var(--signed-letter-ink);
  font-style: normal;
  line-height: 1.4;
  text-align: right;
}

.signed-letter-signature::before {
  content: none !important;
}

.signed-letter-signature span {
  color: var(--signed-letter-muted);
  font: 600 0.68rem/1.45 system-ui, sans-serif;
  letter-spacing: 0.13em;
}

.signed-letter-signature strong {
  color: var(--signed-letter-ink);
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", Georgia, serif;
  font-size: clamp(1.15rem, 2.5vw, 1.5rem);
  font-weight: 500;
  letter-spacing: 0.08em;
}

.signed-letter-page {
  min-height: 100svh;
  color: var(--signed-letter-ink);
}

.signed-letter-page main {
  position: relative;
  z-index: 2;
  width: min(100% - 40px, 1120px);
  margin-inline: auto;
  padding-bottom: clamp(72px, 10vw, 132px);
}

.signed-letter-page .site-header {
  position: relative;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 76px;
  border-bottom: 1px solid rgba(143, 220, 255, 0.2);
}

.signed-letter-page .site-title {
  margin: 0;
  font: 600 0.78rem/1.2 system-ui, sans-serif;
  letter-spacing: 0.1em;
}

.signed-letter-page .site-title a {
  color: inherit;
  text-decoration: none;
}

.signed-letter-card {
  position: relative;
  box-sizing: border-box;
  overflow: hidden;
  width: min(100%, 820px);
  margin: clamp(82px, 13vw, 156px) auto 0;
  padding: clamp(34px, 7vw, 78px);
  border: 1px solid var(--signed-letter-line);
  background:
    linear-gradient(135deg, rgba(143, 220, 255, 0.075), transparent 34%),
    linear-gradient(180deg, var(--signed-letter-paper), rgba(2, 6, 10, 0.9));
  box-shadow: 0 34px 100px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(8px);
}

.signed-letter-card.signed-letter-surface,
.home-message.signed-letter-surface,
.founder-letter-paper.signed-letter-surface {
  border-color: var(--signed-letter-line);
  background: var(--letter-paper-texture);
  box-shadow:
    inset 0 0 0 1px rgba(237, 248, 250, 0.025),
    inset 0 0 80px rgba(0, 0, 0, 0.18),
    0 34px 100px rgba(0, 0, 0, 0.42);
}

.home-message.signed-letter-surface {
  box-sizing: border-box;
  padding: clamp(34px, 7vw, 72px);
  border: 1px solid var(--signed-letter-line);
}

.founder-letter-paper.signed-letter-surface {
  color: var(--signed-letter-ink);
}

.founder-letter-paper.signed-letter-surface::before {
  border-color: rgba(143, 220, 255, 0.18);
}

.founder-letter-paper.signed-letter-surface h2 {
  color: #f8fbfc;
}

.founder-letter-paper.signed-letter-surface .letter-overline {
  color: var(--signed-letter-accent);
}

.founder-letter-paper.signed-letter-surface .letter-thesis {
  border-color: var(--signed-letter-line);
  color: #cfefff;
}

.signed-letter-card::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    var(--signed-letter-accent),
    rgba(143, 220, 255, 0.08) 68%,
    transparent
  );
  content: "";
}

.signed-letter-card > * {
  position: relative;
  z-index: 1;
}

.signed-letter-overline {
  margin: 0 0 clamp(22px, 4vw, 38px);
  color: var(--signed-letter-accent);
  font: 700 0.64rem/1.4 system-ui, sans-serif;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.signed-letter-card h1 {
  max-width: 100%;
  margin: 0;
  color: #f8fbfc;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN",
    "Hiragino Mincho Pro", Georgia, serif;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  font-weight: 500;
  letter-spacing: -0.055em;
  line-height: 1.03;
  text-wrap: balance;
}

.signed-letter-card .signed-letter-body {
  max-width: 38em;
  margin-top: clamp(52px, 9vw, 92px);
  color: #e4edef;
  font-size: clamp(1.04rem, 1.55vw, 1.22rem);
  line-height: 2.08;
}

.signed-letter-card .signed-letter-body p {
  margin: 0;
}

.signed-letter-card .signed-letter-body p + p {
  margin-top: 2em;
}

.signed-letter-card .signed-letter-body a {
  color: inherit;
  text-decoration-color: var(--signed-letter-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.28em;
}

@media (max-width: 640px) {
  .signed-letter-page main {
    width: min(100% - 24px, 680px);
  }

  .signed-letter-page .site-header {
    min-height: 66px;
  }

  .signed-letter-card {
    margin-top: 54px;
    padding: 30px 22px 38px;
    backdrop-filter: blur(5px);
  }

  .home-message.signed-letter-surface {
    padding: 30px 22px 38px;
  }

  .signed-letter-card h1 {
    max-width: 100%;
    font-size: clamp(1.75rem, 9vw, 2.5rem);
    line-height: 1.12;
    text-wrap: balance;
  }

  .signed-letter-card .signed-letter-body {
    margin-top: 48px;
    font-size: 1rem;
    line-height: 2;
  }
}

@media (max-width: 340px) {
  .signed-letter-page main {
    width: calc(100% - 16px);
  }

  .signed-letter-card {
    padding-inline: 18px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .signed-letter-card {
    backdrop-filter: none;
  }
}