/* ============================================================
   灯后面 · 一封藏在夜色夹层里的房契
   不是新栏目：没有导航、没有卡片，只有一根线和一张会展开的纸。
   ============================================================ */

.light-page {
  min-height: 100svh;
  color: var(--night-ink);
  background:
    radial-gradient(circle at 13% 18%, rgba(223, 180, 103, .68) 0 1px, transparent 1.8px),
    radial-gradient(circle at 82% 13%, rgba(223, 180, 103, .4) 0 1px, transparent 1.7px),
    radial-gradient(circle at 91% 62%, rgba(223, 180, 103, .56) 0 1px, transparent 1.8px),
    radial-gradient(circle at 31% 77%, rgba(223, 180, 103, .34) 0 1px, transparent 1.7px),
    radial-gradient(ellipse at 50% 20%, #151d31 0, #0d1424 48%, #080e1b 100%);
}

.light-page::before { opacity: .065; mix-blend-mode: soft-light; }
.light-page::after {
  background:
    radial-gradient(80% 54% at 50% 42%, rgba(121, 143, 179, .08), transparent 72%),
    radial-gradient(120% 96% at 50% 20%, transparent 45%, rgba(0, 0, 0, .42) 125%);
}

.light-back {
  position: fixed;
  z-index: 120;
  left: clamp(1.2rem, 4vw, 4.2rem);
  top: clamp(1.15rem, 3.3vw, 3rem);
  min-height: 2.75rem;
  padding: .35rem .25rem;
  display: inline-flex;
  align-items: center;
  gap: .72rem;
  color: rgba(242, 232, 215, .76);
  font-family: var(--sans);
  font-size: .76rem;
  letter-spacing: .18em;
  transition: color .25s ease, transform .35s var(--ease-paper);
}

.light-back svg {
  width: 1.55rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.light-back:hover,
.light-back:focus-visible { color: var(--gold-soft); transform: translateX(-.3rem); }

.light-main { min-height: 100svh; }

.letter-scene {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  padding: clamp(7rem, 12vh, 9rem) var(--page-gutter) clamp(5rem, 10vh, 8rem);
  overflow: clip;
}

.letter-scene::before,
.letter-scene::after {
  content: "";
  position: absolute;
  z-index: -2;
  pointer-events: none;
  border-radius: 50%;
  filter: blur(1px);
}

.letter-scene::before {
  width: 38rem;
  height: 38rem;
  left: -24rem;
  top: 18%;
  border: 1px solid rgba(223, 180, 103, .1);
  box-shadow: 0 0 0 7rem rgba(223, 180, 103, .018), 0 0 0 14rem rgba(223, 180, 103, .012);
}

.letter-scene::after {
  width: 26rem;
  height: 26rem;
  right: -17rem;
  bottom: 5%;
  border: 1px solid rgba(201, 137, 138, .09);
  box-shadow: 0 0 0 6rem rgba(201, 137, 138, .014);
}

.light-heading {
  position: relative;
  z-index: 3;
  text-align: center;
}

.light-heading p {
  margin-bottom: .5rem;
  color: rgba(223, 180, 103, .7);
  font-family: var(--sans);
  font-size: clamp(.66rem, .9vw, .78rem);
  line-height: 1.4;
  letter-spacing: .34em;
}

.light-heading h1 {
  color: #f2e8d7;
  font-size: clamp(3.6rem, 7.5vw, 7.2rem);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: .18em;
  text-indent: .18em;
  text-shadow: 0 16px 45px rgba(0, 0, 0, .28);
}

.thread-sky {
  position: absolute;
  z-index: -1;
  left: 4.5%;
  right: 4.5%;
  top: clamp(8.5rem, 15vh, 11rem);
  height: min(31rem, 47vw);
  pointer-events: none;
  opacity: .9;
  transition: opacity .45s ease, transform .8s var(--ease-paper);
}

.thread-sky svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.thread-sky path {
  fill: none;
  stroke: var(--rose);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-dasharray: 1 6;
  opacity: .68;
  vector-effect: non-scaling-stroke;
}

.thread-star {
  position: absolute;
  z-index: 2;
  left: 2.25%;
  top: 4%;
  width: 1.05rem;
  aspect-ratio: 1;
  background: var(--gold);
  clip-path: polygon(50% 0, 58% 40%, 100% 50%, 58% 60%, 50% 100%, 42% 60%, 0 50%, 42% 40%);
  filter: drop-shadow(0 0 9px rgba(239, 211, 156, .6));
}

.thread-star::after {
  content: "";
  position: absolute;
  inset: 39%;
  border-radius: 50%;
  background: #fff4d8;
}

.sealed-letter {
  position: relative;
  z-index: 2;
  width: min(50rem, 74vw);
  max-height: 42rem;
  margin: clamp(4.5rem, 9vh, 7.2rem) auto 0;
  opacity: 1;
  transition:
    opacity .36s ease,
    transform .72s var(--ease-paper),
    max-height .68s var(--ease-paper),
    margin .68s var(--ease-paper);
}

.envelope-button { display: block; width: 100%; text-align: center; }

.envelope {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1.78 / 1;
  color: var(--ink);
  filter: drop-shadow(0 32px 35px rgba(0, 0, 0, .33));
  transform: rotate(-.75deg) translateZ(0);
  transform-origin: 50% 70%;
  transition: transform .65s var(--ease-paper), filter .65s ease;
}

.envelope-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background:
    linear-gradient(100deg, transparent 48%, rgba(109, 81, 60, .06) 49%, transparent 51%),
    linear-gradient(178deg, #eadfc9, #dfd0b8);
  border: 1px solid rgba(96, 70, 50, .22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38);
}

.envelope-back::before,
.envelope-back::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.envelope-back::before {
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='130' height='130'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.72' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

.envelope-back::after {
  background: radial-gradient(130% 120% at 50% 10%, rgba(255, 255, 255, .24), transparent 48%, rgba(93, 63, 41, .08));
}

.envelope-letter-edge {
  position: absolute;
  z-index: 1;
  left: 3.5%;
  right: 3.5%;
  top: 3%;
  height: 37%;
  background: linear-gradient(180deg, #f7f0e1, #e8dcc7);
  border: 1px solid rgba(103, 76, 53, .13);
  transform: translateY(-2.5%);
}

.envelope-flap {
  position: absolute;
  z-index: 5;
  left: 0;
  top: 0;
  width: 100%;
  height: 65%;
  background:
    linear-gradient(164deg, rgba(255, 255, 255, .3), transparent 46%),
    linear-gradient(180deg, #f2e8d6, #e2d3bb);
  border-top: 1px solid rgba(96, 70, 50, .18);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 3px 2px rgba(83, 58, 38, .1));
}

.envelope-fold {
  position: absolute;
  z-index: 3;
  bottom: 0;
  width: 58%;
  height: 72%;
  background: linear-gradient(145deg, #e9ddc7, #d9c8ae);
  filter: drop-shadow(0 -1px 0 rgba(98, 72, 51, .13));
}

.envelope-fold-left { left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.envelope-fold-right { right: 0; clip-path: polygon(100% 0, 0 100%, 100% 100%); }

.envelope-label {
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 31%;
  width: max-content;
  max-width: 70%;
  padding-bottom: .35rem;
  color: #3b332e;
  border-bottom: 1px solid rgba(157, 98, 109, .4);
  font-size: clamp(1rem, 2vw, 1.55rem);
  letter-spacing: .14em;
  transform: translateX(-50%) rotate(-1deg);
}

.wax-seal {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 55%;
  width: clamp(3.7rem, 6.2vw, 5.2rem);
  aspect-ratio: 1;
  border-radius: 48% 52% 46% 54% / 54% 47% 53% 46%;
  background:
    radial-gradient(circle at 38% 31%, rgba(255, 215, 216, .34), transparent 12%),
    radial-gradient(circle, #aa6b77 0 33%, #8e5662 35% 58%, #75434f 75%);
  box-shadow:
    inset 2px 2px 3px rgba(255, 225, 220, .2),
    inset -3px -4px 5px rgba(70, 27, 37, .25),
    0 4px 6px rgba(61, 37, 32, .28);
  transform: translate(-50%, -50%) rotate(7deg);
}

.wax-seal::before,
.wax-seal::after,
.wax-seal i {
  content: "";
  position: absolute;
  border: 1px solid rgba(246, 217, 201, .35);
  border-radius: 50%;
}

.wax-seal::before { inset: 18%; }
.wax-seal::after { inset: 30%; border-style: dashed; }
.wax-seal i { inset: 40% 26%; border-width: 0 1px; transform: rotate(39deg); }

.unseal-action {
  position: relative;
  width: max-content;
  margin: clamp(2.1rem, 4vw, 3.5rem) auto 0;
  padding: .5rem 0 .65rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  color: #f0e4d0;
  font-size: clamp(.95rem, 1.3vw, 1.12rem);
  letter-spacing: .13em;
}

.unseal-action::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: .2rem;
  height: 1px;
  background: linear-gradient(90deg, var(--rose), rgba(201, 137, 138, .12));
  transform-origin: left;
  transition: transform .42s var(--ease-paper);
}

.unseal-action svg,
.fold-letter svg {
  width: 1.7rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s var(--ease-paper);
}

.envelope-button:hover .envelope,
.envelope-button:focus-visible .envelope {
  filter: drop-shadow(0 40px 42px rgba(0, 0, 0, .4));
  transform: rotate(.2deg) translateY(-.65rem) scale(1.012);
}

.envelope-button:hover .unseal-action::after,
.envelope-button:focus-visible .unseal-action::after { transform: scaleX(.54); }
.envelope-button:hover .unseal-action svg,
.envelope-button:focus-visible .unseal-action svg { transform: translateX(.35rem); }
.envelope-button:focus-visible { outline-offset: .9rem; }

.opened-letter[hidden] { display: none; }

.opened-letter {
  position: relative;
  z-index: 4;
  width: min(88rem, 94vw);
  margin: clamp(3.6rem, 7vh, 5.5rem) auto 0;
  padding-top: 1rem;
  opacity: 0;
  transform: translateY(2.5rem) scale(.975);
  transform-origin: 50% 5%;
  transition: opacity .52s ease .12s, transform .82s var(--ease-paper) .08s;
  scroll-margin-top: 2rem;
}

.letter-scene.is-open { overflow: visible; }
.letter-scene.is-open .thread-sky { opacity: .38; transform: translateY(-1.5rem); }
.letter-scene.is-open .sealed-letter {
  max-height: 0;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-2rem) scale(.9);
}

.letter-scene.is-open .opened-letter { opacity: 1; transform: none; }

.accordion-paper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: stretch;
  color: var(--ink);
  background:
    linear-gradient(90deg, transparent 0 24.8%, rgba(87, 65, 47, .045) 25%, transparent 25.25% 74.75%, rgba(87, 65, 47, .045) 75%, transparent 75.25%),
    linear-gradient(176deg, #f8f1e4, #eee2cf 58%, #eadcc7);
  border: 1px solid rgba(105, 78, 56, .18);
  box-shadow: 0 42px 90px rgba(0, 0, 0, .42), 0 4px 4px rgba(0, 0, 0, .12);
  transform: rotate(.2deg);
}

.accordion-paper::before,
.accordion-paper::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
}

.accordion-paper::before {
  inset: 0;
  opacity: .12;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='145' height='145'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.63' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}

.accordion-paper::after {
  inset: .35rem;
  border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: inset 0 0 4rem rgba(82, 54, 34, .06);
}

.letter-panel {
  position: relative;
  z-index: 2;
  min-width: 0;
  padding: clamp(3.3rem, 5.5vw, 6.2rem) clamp(2.8rem, 5.5vw, 6rem) clamp(5rem, 7vw, 7.5rem);
}

.letter-front { background: linear-gradient(94deg, rgba(255, 255, 255, .12), transparent 18%, rgba(94, 68, 48, .025) 100%); }
.letter-back { background: linear-gradient(266deg, rgba(255, 255, 255, .1), transparent 18%, rgba(94, 68, 48, .03) 100%); }

.letter-eyebrow {
  margin-bottom: clamp(1.9rem, 4vw, 3.4rem);
  color: var(--rose-deep);
  font-family: var(--sans);
  font-size: .7rem;
  letter-spacing: .32em;
}

.letter-panel h2 {
  margin-bottom: clamp(2.3rem, 4vw, 3.8rem);
  color: #2f2926;
  font-size: clamp(1.85rem, 3.4vw, 3.25rem);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: .08em;
}

.letter-body {
  color: #49403a;
  font-size: clamp(.96rem, 1.17vw, 1.08rem);
  line-height: 2.08;
  letter-spacing: .055em;
}

.letter-body p { margin-bottom: 1.45em; break-inside: avoid; }
.letter-body p:last-child { margin-bottom: 0; }

.letter-signature {
  margin-top: clamp(3rem, 5vw, 5rem);
  color: #4d403a;
  font-size: clamp(.92rem, 1.16vw, 1.08rem);
  line-height: 2;
  text-align: right;
  letter-spacing: .07em;
}

.letter-front .letter-body { columns: 2 13.5rem; column-gap: clamp(2rem, 3vw, 3.6rem); }

.letter-back::after {
  content: "";
  position: absolute;
  right: 12%;
  bottom: 7rem;
  width: 5.5rem;
  height: 2.8rem;
  border-bottom: 1px solid rgba(157, 98, 109, .35);
  border-radius: 50%;
  transform: rotate(-9deg);
}

.center-fold {
  position: absolute;
  z-index: 5;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: linear-gradient(180deg, rgba(82, 57, 39, .15), rgba(255, 255, 255, .55) 15%, rgba(82, 57, 39, .13) 72%, transparent);
  box-shadow: -8px 0 18px rgba(75, 49, 30, .07), 6px 0 16px rgba(255, 255, 255, .28);
}

.fold-letter {
  min-height: 2.75rem;
  margin: clamp(2.3rem, 4vw, 3.6rem) auto 0;
  padding: .45rem .2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  color: rgba(242, 232, 215, .78);
  font-size: .9rem;
  letter-spacing: .13em;
  transition: color .25s ease;
}

.fold-letter:hover,
.fold-letter:focus-visible { color: var(--gold-soft); }
.fold-letter:hover svg,
.fold-letter:focus-visible svg { transform: translateX(-.3rem); }

@media (max-width: 980px) {
  .sealed-letter { width: min(43rem, 84vw); }
  .opened-letter { width: min(46rem, 90vw); }
  .accordion-paper { grid-template-columns: 1fr; }
  .letter-front .letter-body { columns: initial; }
  .letter-panel { padding-inline: clamp(2rem, 8vw, 5rem); }
  .letter-front { padding-bottom: 5.5rem; }
  .letter-back { padding-top: 5.5rem; }
  .center-fold {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    right: auto;
    width: 100%;
    height: 1px;
    box-shadow: 0 -8px 18px rgba(75, 49, 30, .07), 0 6px 16px rgba(255, 255, 255, .28);
  }
}

@media (max-width: 680px) {
  .light-back { position: absolute; }
  .letter-scene { padding: 6.8rem 1rem 4.5rem; }
  .light-heading p { letter-spacing: .24em; }
  .light-heading h1 { font-size: clamp(3.6rem, 18vw, 5.4rem); letter-spacing: .14em; text-indent: .14em; }
  .thread-sky { left: 1.5rem; right: 1.5rem; top: 7.4rem; height: 22rem; }
  .thread-star { left: 1%; top: 3%; width: .9rem; }
  .thread-sky path { stroke-width: 1; }
  .sealed-letter { width: min(31rem, 92vw); margin-top: clamp(6rem, 16vh, 9rem); }
  .envelope { aspect-ratio: 1.48 / 1; }
  .envelope-label { top: 29%; max-width: 78%; font-size: clamp(.92rem, 4.4vw, 1.18rem); line-height: 1.8; }
  .wax-seal { top: 57%; width: clamp(3.4rem, 15vw, 4.2rem); }
  .unseal-action { margin-top: 2.3rem; }
  .opened-letter { width: calc(100vw - 2rem); margin-top: 3rem; }
  .letter-panel { padding: 3.25rem clamp(1.6rem, 8vw, 3rem) 4.5rem; }
  .letter-front { padding-bottom: 5rem; }
  .letter-back { padding-top: 5rem; }
  .letter-panel h2 { font-size: clamp(1.75rem, 9vw, 2.5rem); }
  .letter-body { font-size: .98rem; line-height: 2; letter-spacing: .035em; }
  .letter-body br { display: none; }
  .letter-signature { max-width: 16rem; margin-left: auto; }
}

@media (max-width: 410px) {
  .letter-scene { padding-inline: .7rem; }
  .sealed-letter { width: 94vw; }
  .envelope-label { letter-spacing: .09em; }
  .opened-letter { width: calc(100vw - 1.4rem); }
  .letter-panel { padding-inline: 1.35rem; }
}

@media (prefers-reduced-motion: reduce) {
  .sealed-letter,
  .opened-letter,
  .thread-sky,
  .envelope,
  .unseal-action::after,
  .unseal-action svg,
  .fold-letter svg,
  .light-back { transition-duration: .01ms !important; transition-delay: 0ms !important; }
}