/* Earth Memory client */
:root {
  color-scheme: light;
  --paper: #f8f7f4;
  --ink: #1c1c1c;
  --muted: #7a7976;
  --line: #e3e0d9;
  --accent: #6f8fa8;
  --serif: "Iowan Old Style", "Songti SC", "Noto Serif CJK SC", Georgia, serif;
  --sans: Inter, "PingFang SC", "Microsoft YaHei", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-decoration: none; }

.site-header {
  position: absolute; z-index: 10; top: 0; left: 0; width: 100%; height: 86px;
  display: flex; align-items: center; justify-content: space-between; padding: 0 5vw;
  color: #f8f7f4; border-bottom: 1px solid rgba(255,255,255,.2);
}
.brand { display: flex; align-items: center; gap: 13px; font-family: var(--serif); font-size: 18px; letter-spacing: .04em; }
.logo-mark { display: inline-block; width: 29px; height: 29px; flex: none; background: currentColor; -webkit-mask: url("/logo.svg") center / contain no-repeat; mask: url("/logo.svg") center / contain no-repeat; }
.logo-mark.large { width: 64px; height: 64px; }
.site-header nav { display: flex; align-items: center; gap: 30px; font-size: 11px; text-transform: uppercase; letter-spacing: .18em; }
.site-header nav a { opacity: .78; }
.site-header nav a:hover { opacity: 1; }
.language-switch {
  position: relative; display: grid; grid-template-columns: repeat(2, 34px); padding: 3px;
  border: 1px solid rgba(255,255,255,.34); border-radius: 999px; background: rgba(18,18,18,.08);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.04); backdrop-filter: blur(10px);
}
.language-switch::before {
  content: ""; position: absolute; top: 3px; left: 3px; width: 34px; height: 28px;
  border-radius: 999px; background: #f8f7f4; box-shadow: 0 3px 12px rgba(13,20,23,.18);
  transition: transform .55s cubic-bezier(.22,.8,.3,1);
}
.language-switch.is-zh::before { transform: translateX(34px); }
.language-switch button {
  position: relative; z-index: 1; width: 34px; height: 28px; padding: 0; border: 0;
  color: rgba(255,255,255,.68); background: transparent; cursor: pointer;
  font-size: 9px; font-weight: 500; letter-spacing: .08em; transition: color .45s;
}
.language-switch button[aria-pressed="true"] { color: #243238; }
.theme-toggle { color: inherit; background: none; border: 0; cursor: pointer; font-size: 17px; }

.hero { min-height: 100svh; position: relative; overflow: hidden; color: #f8f7f4; background: #536d7c; }
.sky { position: absolute; inset: 0; background: linear-gradient(155deg, #9eb6bd 0%, #6d8a98 40%, #435764 72%, #27333a 100%); }
.sky::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13,22,27,.24), transparent 55%), linear-gradient(0deg, rgba(11,18,22,.35), transparent 55%); }
.sky span { position: absolute; border-radius: 50%; filter: blur(55px); background: rgba(255,255,255,.18); animation: drift 18s ease-in-out infinite alternate; }
.sky span:nth-child(1) { width: 55vw; height: 13vw; top: 24%; left: 32%; }
.sky span:nth-child(2) { width: 35vw; height: 10vw; top: 47%; left: -8%; animation-delay: -6s; }
.sky span:nth-child(3) { width: 28vw; height: 8vw; top: 13%; right: -5%; animation-delay: -11s; }
@keyframes drift { to { transform: translate3d(5vw, 2vh, 0) scale(1.12); opacity: .65; } }

.hero-content { position: relative; z-index: 1; min-height: 100svh; padding: 23vh 7vw 9vh; display: flex; flex-direction: column; align-items: flex-start; }
.eyebrow { margin: 0 0 25px; font-size: 10px; letter-spacing: .24em; text-transform: uppercase; }
.hero h1 { margin: 0; font: 400 clamp(62px, 10vw, 138px)/.78 var(--serif); letter-spacing: -.055em; }
.hero h1 span:last-child { font-size: .48em; letter-spacing: -.02em; font-style: italic; }
.weekday { margin: 32px 0 0; font: italic 20px var(--serif); }
.rule { width: min(490px, 70vw); border-top: 1px solid rgba(255,255,255,.4); margin: 42px 0 25px; }
.manifesto { margin: 0; font: 24px var(--serif); }
.manifesto-en { margin: 7px 0 0; font: italic 15px var(--serif); opacity: .7; }
.quiet-link { margin-top: auto; font-size: 11px; text-transform: uppercase; letter-spacing: .18em; }
.quiet-link span { margin-left: 10px; }

.closing { position: absolute; z-index: 2; right: 6vw; bottom: 8vh; text-align: center; }
.closing p, .closing time { display: block; font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.closing time { margin-top: 13px; font-variant-numeric: tabular-nums; }
.candle { height: 150px; width: 30px; margin: 20px auto; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.wax {
  position: relative; display: block; width: 15px; height: 110px; max-height: 110px;
  border-radius: 2px 2px 0 0; background: linear-gradient(90deg, #d9d1bd, #fffaf0 42%, #e9e0cb 78%, #cfc5ae);
  box-shadow: inset -2px 0 3px rgba(72,54,31,.16); transition: height 1s linear;
}
.wax::before { content: ""; position: absolute; z-index: 0; top: -8px; left: 6px; width: 3px; height: 9px; border-radius: 2px; background: linear-gradient(#6a4a2f, #211812); }
.wax::after { content: ""; position: absolute; top: -2px; left: 1px; right: 1px; height: 5px; border-radius: 50%; background: #f8f0dd; box-shadow: inset 0 1px 2px rgba(84,60,32,.2); }
.flame {
  position: relative; z-index: 1; display: block; width: 14px; height: 23px; margin-bottom: 6px;
  border-radius: 52% 48% 48% 52% / 68% 68% 32% 32%;
  background: linear-gradient(to top, #ff9e32 3%, #ffd36b 45%, #fff4b0 76%, rgba(255,255,255,.9));
  clip-path: polygon(50% 0, 72% 25%, 96% 58%, 78% 91%, 50% 100%, 22% 91%, 4% 58%, 28% 25%);
  filter: drop-shadow(0 0 5px #ffc35b) drop-shadow(0 0 13px rgba(255,177,63,.72)) drop-shadow(0 0 24px rgba(255,151,43,.35));
  transform-origin: 50% 100%; animation: candle-flicker 1.55s ease-in-out infinite alternate;
}
.flame::after {
  content: ""; position: absolute; left: 5px; bottom: 2px; width: 5px; height: 10px;
  border-radius: 50% 50% 45% 45%; background: linear-gradient(to top, #7cc5dc, #fff7ca 70%, transparent);
}
@keyframes candle-flicker {
  0% { transform: rotate(-3deg) scale(.96, 1.03) skewX(-1deg); opacity: .92; }
  18% { transform: rotate(4deg) scale(1.04, .94) skewX(3deg); }
  37% { transform: rotate(-1deg) scale(.92, 1.08) skewX(-3deg); opacity: 1; }
  61% { transform: rotate(5deg) scale(1.02, .97) skewX(2deg); }
  82% { transform: rotate(-4deg) scale(.97, 1.04) skewX(-2deg); }
  100% { transform: rotate(2deg) scale(1.05, .96); opacity: .96; }
}

.contribute { min-height: 100vh; padding: 12vh 6vw; }
.section-heading { max-width: 620px; margin: 0 auto 70px; text-align: center; }
.section-heading h2, .archive h2, .memory-form h2, .thank-you h2 { margin: 0 0 18px; font: 400 clamp(36px, 5vw, 68px)/1.08 var(--serif); letter-spacing: -.035em; }
.section-heading > p:last-child, .archive-intro > p:last-child { color: var(--muted); font-size: 13px; line-height: 1.9; }
.memory-cards { max-width: 900px; margin: auto; display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.memory-card {
  position: relative; min-height: 250px; padding: 42px; text-align: left; color: inherit;
  border: 0; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; cursor: pointer;
  display: flex; flex-direction: column; transition: background .8s, transform .8s, box-shadow .8s;
}
.memory-card:hover { z-index: 1; background: #fff; transform: translateY(-5px); box-shadow: 0 20px 45px rgba(40,35,25,.08); }
.memory-card .icon { height: 74px; font: 42px/1 var(--serif); }
.memory-card strong { font: 24px var(--serif); }
.memory-card small { margin-top: 13px; color: var(--muted); font-size: 11px; }
.memory-card i { position: absolute; top: 25px; right: 25px; color: #aaa8a2; font: normal 9px var(--sans); letter-spacing: .15em; }
.color-dot { width: 44px; height: 44px !important; border-radius: 50%; background: var(--accent); }

.memory-form, .thank-you { max-width: 680px; min-height: 570px; margin: auto; padding: 50px 0; text-align: center; }
.back { display: block; margin: 0 0 75px; padding: 0; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; }
.memory-form label { display: block; margin: 45px 0 12px; color: var(--muted); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; }
.memory-form textarea, .memory-form input[type="range"], .memory-form input[type="color"] { width: 100%; }
.memory-form textarea { resize: none; padding: 18px 0; border: 0; border-bottom: 1px solid var(--ink); outline: 0; background: transparent; font: 26px/1.5 var(--serif); text-align: center; }
.memory-form input[type="color"] { width: 120px; height: 120px; padding: 0; border: 0; border-radius: 50%; overflow: hidden; background: none; cursor: pointer; }
.memory-form input[type="range"] { accent-color: var(--accent); }
.choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 40px; }
.choices label { margin: 0; }
.choices input { position: absolute; opacity: 0; }
.choices span { display: block; padding: 12px 20px; border: 1px solid var(--line); border-radius: 30px; cursor: pointer; transition: .4s; }
.choices input:checked + span { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.temperature-output { margin: 35px 0; font: 72px var(--serif); }
.submit-memory { margin-top: 50px; padding: 15px 34px; color: #fff; border: 0; border-radius: 30px; background: var(--accent); cursor: pointer; letter-spacing: .06em; transition: transform .6s, opacity .6s; }
.submit-memory:hover { transform: translateY(2px); opacity: .85; }
.form-note { color: var(--muted); font-size: 10px; }
.thank-you { padding-top: 130px; }
.thank-you .logo-mark { margin-bottom: 45px; color: var(--accent); }

.insight { min-height: 72vh; padding: 15vh 7vw; text-align: center; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; }
.insight h2 { margin: 0; font: 400 clamp(34px, 5vw, 66px)/1.1 var(--serif); letter-spacing: -.035em; }
.insight blockquote { max-width: 780px; margin: 55px auto 18px; font: italic 400 clamp(24px, 3vw, 40px)/1.55 var(--serif); }
.insight blockquote::before { content: "“"; color: var(--accent); }
.insight blockquote::after { content: "”"; color: var(--accent); }
.insight > p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 10px; letter-spacing: .08em; }
.insight button { margin-top: 38px; padding: 12px 0; border: 0; border-bottom: 1px solid var(--ink); color: var(--ink); background: none; cursor: pointer; font-size: 10px; letter-spacing: .16em; text-transform: uppercase; }
.insight button:disabled { opacity: .45; }

.archive { min-height: 100vh; padding: 14vh 7vw; background: #171919; color: #efeee9; display: grid; grid-template-columns: 1fr 1.2fr; align-items: center; gap: 8vw; }
.archive-intro { max-width: 470px; }
.archive-intro > p:last-child { color: #929493; }
.archive-drawer { max-width: 560px; }
.drawer-label { height: 70px; padding: 0 24px; border: 1px solid #3d403f; display: flex; align-items: center; justify-content: space-between; }
.drawer-label span { font: 30px var(--serif); }
.drawer-label small, .sealed { color: #858887; font-size: 9px; letter-spacing: .18em; }
.archive-nav { margin: 16px 9% 0; display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; border: 1px solid #3d403f; }
.archive-nav button, .archive-nav input { height: 42px; border: 0; color: #b8bab8; background: transparent; }
.archive-nav button { cursor: pointer; font: 18px var(--serif); }
.archive-nav button:disabled { opacity: .2; cursor: default; }
.archive-nav input { min-width: 0; text-align: center; color-scheme: dark; font: 13px var(--serif); letter-spacing: .08em; }
.day-book { position: relative; aspect-ratio: 4 / 5; margin: 16px 9% 0; padding: 45px; overflow: hidden; color: #1f2729; background: linear-gradient(155deg, #d6e0de, #819ca3 48%, #e1c4a8); box-shadow: 0 30px 80px #080909; display: flex; flex-direction: column; justify-content: space-between; }
.day-book::after { content: ""; position: absolute; inset: 40% -10% -10%; background: linear-gradient(170deg, transparent 0 28%, rgba(46,67,71,.28) 29% 44%, rgba(238,218,193,.34) 45%); }
.day-book p { z-index: 1; margin: 0; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; }
.day-book .book-date { z-index: 1; align-self: center; text-align: center; }
.book-date span { display: block; font: italic 28px var(--serif); }
.book-date strong { display: block; font: 110px/.9 var(--serif); }
.book-foot { z-index: 1; max-width: 82%; min-height: 70px; }
.day-book .book-summary { margin-bottom: 15px; font: italic 18px/1.45 var(--serif); letter-spacing: .01em; text-transform: none; }
.book-foot small { font-size: 9px; letter-spacing: .18em; text-transform: uppercase; }
.book-sun { position: absolute; top: 12%; right: 13%; width: 55px; height: 55px; border: 1px solid rgba(31,39,41,.45); border-radius: 50%; transition: background 1.2s, box-shadow 1.2s; }
.book-sun::after { content: ""; position: absolute; left: 10px; right: 10px; top: 50%; border-top: 1px solid rgba(31,39,41,.45); }
.book-sun.has-color { background: var(--cover-color); border-color: rgba(255,255,255,.42); box-shadow: 0 0 28px color-mix(in srgb, var(--cover-color) 55%, transparent); }
.book-sun.has-color::after { border-color: rgba(255,255,255,.58); }
.sealed { text-align: center; margin-top: 25px; }
.archive-records { max-height: 360px; margin-top: 35px; overflow: auto; border-top: 1px solid #3d403f; }
.archive-record { padding: 24px 4px; border-bottom: 1px solid #303332; }
.archive-record small { color: #777b79; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.archive-record p, .archive-record blockquote { margin: 12px 0 0; color: #e5e4df; font: 22px/1.5 var(--serif); }
.archive-record blockquote { font-style: italic; }
.archive-record i { display: inline-block; width: 18px; height: 18px; margin-right: 12px; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; vertical-align: -3px; }
.archive-empty { padding: 32px 0; color: #777b79; text-align: center; font: italic 14px var(--serif); }

footer { min-height: 220px; padding: 55px 6vw; display: grid; grid-template-columns: 1fr 2fr 1fr; align-items: center; gap: 30px; font: 13px var(--serif); }
footer p { color: var(--muted); text-align: center; }
footer > span:last-child { text-align: right; }

body.dark { --paper: #121212; --ink: #f5f5f5; --muted: #8e8e8e; --line: #303030; color-scheme: dark; }
body.dark .memory-card:hover { background: #181818; box-shadow: 0 20px 45px #090909; }

[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; } }
@media (max-width: 760px) {
  .site-header { height: 70px; padding: 0 22px; }
  .site-header nav a { display: none; }
  .site-header nav { gap: 14px; }
  .hero-content { padding: 22vh 24px 7vh; }
  .hero h1 { font-size: 65px; }
  .closing { right: 23px; }
  .memory-cards { grid-template-columns: 1fr; }
  .memory-card { min-height: 190px; padding: 34px; }
  .archive { grid-template-columns: 1fr; padding: 12vh 24px; }
  .day-book { margin-inline: 3%; }
  footer { grid-template-columns: 1fr; text-align: center; }
  footer > span:last-child { text-align: center; }
}