:root {
  --paper-white: #F8F7F1;
  --mist-blue: #DCEEFF;
  --quiet-cyan: #9FD7F3;
  --pencil-navy: #26394D;
  --blush-denial: #F4A7B9;
  --soft-graphite: #6F7782;
  --porcelain-shadow: #D8D5CB;
  --zen: "Zen Kaku Gothic New", "Hiragino Sans", system-ui, sans-serif;
  --noto: "Noto Sans JP", "Hiragino Kaku Gothic ProN", system-ui, sans-serif;
  --klee: "Klee One", "Yu Mincho", serif;
  --mono: "Space Mono", ui-monospace, monospace;
}

/* Design vocabulary: Interactions should tell a shy story: hover states deny attention first; Space Mono* Mono** in Regular for tiny calendar codes and card indexes. */

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--pencil-navy);
  background:
    radial-gradient(circle at 72% 11%, rgba(159, 215, 243, .34), transparent 30rem),
    radial-gradient(circle at 16% 54%, rgba(244, 167, 185, .13), transparent 22rem),
    linear-gradient(180deg, var(--paper-white), #fbfaf5 46%, var(--mist-blue) 145%);
  font-family: var(--noto);
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .5;
  mix-blend-mode: multiply;
  background-image:
    radial-gradient(circle at 10% 20%, rgba(38, 57, 77, .08) 0 1px, transparent 1.5px),
    radial-gradient(circle at 80% 40%, rgba(159, 215, 243, .16) 0 1px, transparent 1.6px),
    radial-gradient(circle at 42% 74%, rgba(216, 213, 203, .22) 0 1px, transparent 1.7px);
  background-size: 34px 31px, 47px 43px, 23px 29px;
}

.breath-field {
  position: fixed;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.float-card,
.bubble,
.ribbon-mark {
  position: absolute;
  display: block;
  filter: drop-shadow(0 20px 35px rgba(38, 57, 77, .07));
}

.float-card {
  width: 19vw;
  min-width: 180px;
  height: 25vw;
  min-height: 220px;
  border: 1px solid rgba(159, 215, 243, .45);
  border-radius: 4px;
  background: rgba(220, 238, 255, .34);
  backdrop-filter: blur(4px);
  animation: suspendedBreath 11s ease-in-out infinite alternate;
}

.float-card::after {
  content: "";
  position: absolute;
  top: -1px;
  right: 18%;
  width: 36px;
  height: 12px;
  border-radius: 0 0 7px 7px;
  background: rgba(159, 215, 243, .46);
}

.float-card-a { left: 12%; top: 8%; transform: rotate(-3deg); }
.float-card-b { right: 13%; top: 18%; transform: rotate(4deg); animation-duration: 14s; }
.float-card-c { left: 58%; top: 4%; width: 13vw; height: 16vw; transform: rotate(-8deg); animation-duration: 16s; }

.bubble { border: 1px solid rgba(159, 215, 243, .72); border-radius: 50%; background: rgba(248, 247, 241, .25); animation: floatBubble 9s ease-in-out infinite; }
.bubble-a { width: 28px; height: 28px; left: 8%; top: 38%; }
.bubble-b { width: 42px; height: 42px; right: 9%; top: 64%; animation-delay: -3s; }

.ribbon-mark { width: 88px; height: 13px; left: 72%; top: 47%; border-radius: 99px; background: rgba(244, 167, 185, .34); transform: rotate(-18deg); animation: floatBubble 13s ease-in-out infinite reverse; }

.daybook { position: relative; z-index: 1; }

.opening {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 8vh 8vw 28vh;
}

.calendar-holes {
  position: absolute;
  top: 7vh;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 34px;
}

.calendar-holes i {
  width: 12px;
  height: 12px;
  border: 1px solid rgba(111, 119, 130, .18);
  border-radius: 50%;
  background: rgba(248, 247, 241, .75);
  box-shadow: inset 0 2px 4px rgba(216, 213, 203, .6);
}

.tiny-label,
.timecode {
  font-family: var(--mono);
  color: var(--soft-graphite);
  letter-spacing: .05em;
  font-size: 11px;
}

.domain-title {
  margin: 12px 0 0;
  font-family: var(--zen);
  font-weight: 900;
  font-size: clamp(31px, 5vw, 76px);
  letter-spacing: .035em;
  line-height: 1;
}

.char {
  display: inline-block;
  opacity: 0;
  filter: blur(5px);
  transform: translate(var(--x), var(--y)) rotate(var(--r));
  animation: reluctantLetter .9s cubic-bezier(.25, 1.5, .45, 1) forwards;
  animation-delay: calc(var(--i) * 52ms + 120ms);
}

.opening-note {
  width: min(420px, 82vw);
  margin: 22px 0 0;
  color: var(--soft-graphite);
  font-size: 15px;
  line-height: 1.9;
}

.archive {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px;
  min-height: 150vh;
  padding: 12vh 7vw 18vh;
}

.refusal-line {
  position: absolute;
  inset: 4vh 4vw 2vh;
  width: 92vw;
  height: calc(100% - 6vh);
  overflow: visible;
  pointer-events: none;
}

.refusal-line path {
  fill: none;
  stroke: var(--quiet-cyan);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 24 18;
  opacity: .68;
  filter: drop-shadow(0 0 13px rgba(159, 215, 243, .35));
  animation: linePulse 5s ease-in-out infinite;
}

.moment {
  position: relative;
  min-height: 320px;
  padding: 30px;
  border: 1px solid rgba(216, 213, 203, .86);
  border-radius: 6px;
  background:
    linear-gradient(135deg, rgba(248, 247, 241, .92), rgba(248, 247, 241, .72)),
    radial-gradient(circle at 12% 18%, rgba(159, 215, 243, .14), transparent 22%);
  box-shadow: 0 24px 55px rgba(38, 57, 77, .08), inset 0 0 0 1px rgba(248, 247, 241, .8);
  transform: translateY(var(--drift)) rotate(var(--rot));
  transition: transform .72s cubic-bezier(.18, 1.4, .26, 1), box-shadow .55s ease, background .55s ease;
  opacity: 0;
  animation: cardEnter .9s cubic-bezier(.2, 1.55, .36, 1) forwards;
  animation-delay: var(--delay);
  overflow: hidden;
}

.moment::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .28;
  background-image: radial-gradient(circle, rgba(38, 57, 77, .09) 0 1px, transparent 1.3px);
  background-size: 19px 21px;
  pointer-events: none;
}

.moment::after {
  content: attr(data-scene);
  position: absolute;
  right: 22px;
  bottom: 18px;
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(111, 119, 130, .38);
  writing-mode: vertical-rl;
}

.moment:hover,
.moment.is-shy,
.moment.unfolded {
  transform: translateY(calc(var(--drift) - 18px)) rotate(calc(var(--rot) * -.45)) scale(1.018);
  box-shadow: 0 34px 70px rgba(38, 57, 77, .12);
}

.moment h2 {
  position: relative;
  margin: 30px 0 18px;
  font-family: var(--zen);
  font-weight: 900;
  font-size: clamp(36px, 5vw, 74px);
  line-height: .92;
  letter-spacing: -.025em;
}

.moment p,
.moment li {
  position: relative;
  max-width: 360px;
  color: var(--soft-graphite);
  line-height: 1.85;
  font-size: 15px;
}

.scribble {
  position: absolute;
  right: 34px;
  top: 28px;
  font-family: var(--klee);
  font-style: normal;
  color: var(--blush-denial);
  font-size: 20px;
  transform: rotate(-7deg) translateY(-8px);
  opacity: 0;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2, 1.6, .34, 1);
}

.moment:hover .scribble,
.moment.is-shy .scribble,
.moment.unfolded .scribble { opacity: 1; transform: rotate(-4deg) translateY(0); }

.fold {
  position: absolute;
  right: 0;
  top: 0;
  width: 58px;
  height: 58px;
  background: linear-gradient(135deg, rgba(216, 213, 203, .08) 49%, rgba(220, 238, 255, .8) 50%);
  border-left: 1px solid rgba(216, 213, 203, .7);
  border-bottom: 1px solid rgba(216, 213, 203, .7);
}

.card-morning { grid-column: 2 / span 4; grid-row: 1; }
.card-weather { grid-column: 7 / span 4; grid-row: 1; margin-top: 90px; }
.card-schedule { grid-column: 1 / span 5; grid-row: 2; margin-top: 30px; }
.card-message { grid-column: 8 / span 4; grid-row: 2; margin-top: -70px; }
.card-correction { grid-column: 4 / span 4; grid-row: 3; }
.card-night { grid-column: 8 / span 4; grid-row: 3; margin-top: 120px; }

.reluctant-weather { transform-style: preserve-3d; }
.weather-face { position: absolute; inset: 0; padding: 30px; backface-visibility: hidden; transition: transform .7s cubic-bezier(.2, 1.25, .35, 1); }
.weather-face.back { background: linear-gradient(135deg, rgba(244, 167, 185, .28), rgba(248, 247, 241, .92)); transform: rotateY(180deg); }
.reluctant-weather:hover .front,
.reluctant-weather.unfolded .front { transform: rotateY(180deg); }
.reluctant-weather:hover .back,
.reluctant-weather.unfolded .back { transform: rotateY(360deg); }

.schedule-lines { position: relative; padding: 0; margin: 20px 0 0; list-style: none; }
.schedule-lines li { display: flex; align-items: center; gap: 16px; }
.schedule-lines b { flex: 1; height: 1px; background: rgba(159, 215, 243, .9); transform: rotate(-1deg); }

.envelope-cloud { position: relative; width: 160px; height: 90px; margin: 20px 0; }
.envelope-cloud span { position: absolute; border: 1px solid rgba(159, 215, 243, .85); background: rgba(220, 238, 255, .58); }
.envelope-cloud span:nth-child(1) { width: 110px; height: 70px; left: 8px; top: 14px; transform: rotate(-4deg); }
.envelope-cloud span:nth-child(2) { width: 62px; height: 62px; border-radius: 50%; right: 0; top: 0; }
.envelope-cloud span:nth-child(3) { width: 85px; height: 1px; left: 21px; top: 48px; transform: rotate(28deg); background: var(--quiet-cyan); }

.crossed { text-decoration: line-through; text-decoration-color: var(--quiet-cyan); }
.pink-slip { display: inline-block; margin-top: 12px; padding: 12px 18px; background: rgba(244, 167, 185, .31); color: var(--pencil-navy); transform: rotate(-2deg); }

.card-night strong { position: relative; display: inline-block; margin-top: 22px; font-family: var(--klee); color: var(--pencil-navy); background: rgba(220, 238, 255, .7); padding: 8px 12px; border-radius: 999px; }

@keyframes reluctantLetter {
  0% { opacity: 0; filter: blur(8px); transform: translate(var(--x), var(--y)) rotate(var(--r)); }
  68% { opacity: 1; filter: blur(0); transform: translate(calc(var(--x) * -.08), -5px) rotate(calc(var(--r) * -.22)); }
  100% { opacity: 1; filter: blur(0); transform: translate(0, 0) rotate(0deg); }
}

@keyframes cardEnter {
  0% { opacity: 0; transform: translateY(calc(var(--drift) + 42px)) rotate(calc(var(--rot) - 3deg)) scale(.97); }
  70% { opacity: 1; transform: translateY(calc(var(--drift) - 8px)) rotate(calc(var(--rot) + .9deg)) scale(1.01); }
  100% { opacity: 1; transform: translateY(var(--drift)) rotate(var(--rot)) scale(1); }
}

@keyframes suspendedBreath { from { margin-top: -10px; margin-left: -4px; } to { margin-top: 24px; margin-left: 13px; } }
@keyframes floatBubble { 0%,100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(12px, -24px) rotate(9deg); } }
@keyframes linePulse { 0%,100% { stroke-dashoffset: 0; opacity: .46; } 50% { stroke-dashoffset: -42; opacity: .84; } }

@media (max-width: 820px) {
  .opening { padding: 7vh 7vw 22vh; }
  .archive { display: block; padding: 8vh 6vw 14vh; }
  .moment { min-height: 300px; margin: 0 0 34px !important; }
  .refusal-line { display: none; }
  .float-card { opacity: .55; }
}