:root {
  --bg: #131010;
  --paper: #efe7d2;
  --ink: #1a1814;
  --ink-soft: #4a4338;
  --faint: #9a8f79;
  --gold: #c8a86a;
  --gold-deep: #8c7d63;
  --edge: #2e2822;
  --rule: #c7bca2;
  --black:#1a1814; --red:#9e4636; --pink:#b06b78; --yellow:#c9a24a;
  --green:#4a6741; --blue:#3f5e79; --purple:#6b5a86; --orange:#b5703f;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  background: var(--bg);
  background-image: radial-gradient(ellipse 80% 50% at 50% -10%, rgba(200,168,106,0.06), transparent 60%);
  color: var(--paper);
  font-family: "Cormorant Garamond", Georgia, serif;
  -webkit-font-smoothing: antialiased;
}
.app {
  min-height: 100dvh; max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column;
  padding: max(18px, env(safe-area-inset-top)) 20px max(18px, env(safe-area-inset-bottom));
}
.top { display: flex; align-items: center; justify-content: space-between; }
.wordmark { font-family: "DM Serif Display", serif; font-size: 16px; letter-spacing: 0.2em; }
.wordmark .num { color: var(--gold); font-style: italic; }
.lnk {
  background: none; border: 0; cursor: pointer;
  font-family: "Inter", sans-serif; font-size: 10px; letter-spacing: 0.26em;
  text-transform: uppercase; color: var(--faint);
}
.lnk:hover { color: var(--gold); }
.lnk.quiet { font-size: 9.5px; }

.stage { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.pin {
  font-family: "Inter", sans-serif; font-size: 11px; letter-spacing: 0.12em;
  color: var(--gold); text-align: center; margin-bottom: 18px; line-height: 1.5;
}
.pin b { font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 500;
  font-size: 17px; letter-spacing: 0; color: var(--paper); text-transform: none; }

/* the card = a warm sheet on the dark surround */
.card {
  background: var(--paper);
  background-image: radial-gradient(ellipse at 25% 12%, rgba(255,255,255,0.5), transparent 55%);
  color: var(--ink);
  border-radius: 3px;
  padding: 30px 26px 26px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), 0 30px 70px rgba(0,0,0,0.55);
}
.card-date {
  font-family: "Inter", sans-serif; font-size: 10px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--faint); text-align: center; margin-bottom: 26px;
}
.field { margin-bottom: 26px; }
.flabel {
  display: block; font-family: "Inter", sans-serif; font-size: 9.5px;
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 10px;
}
.line {
  width: 100%; background: transparent; border: 0; border-bottom: 1px solid var(--rule);
  border-radius: 0; padding: 6px 2px 8px; outline: none;
  font-family: "Cormorant Garamond", serif; font-size: 22px; color: var(--ink);
}
.line:focus { border-bottom-color: var(--gold-deep); }

.colors { display: flex; gap: 0; justify-content: space-between; margin: 6px 0 24px; }
.dot {
  width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(26,24,20,0.25);
  cursor: pointer; padding: 0; background: var(--c); transition: transform .15s;
  position: relative;
}
.dot[aria-pressed="true"] { transform: scale(1.18); box-shadow: 0 0 0 2px var(--paper), 0 0 0 3px var(--ink); }
.colors.static { justify-content: flex-start; gap: 8px; margin: 14px 0 0; }
.colors.static .dot { width: 16px; height: 16px; cursor: default; }

.file {
  width: 100%; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  font-family: "Inter", sans-serif; font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; padding: 15px; cursor: pointer; transition: background .2s, color .2s;
}
.file:hover { background: transparent; color: var(--ink); }
.file:disabled { opacity: 0.4; cursor: default; }

/* filed state */
.card.filed { text-align: left; }
.filed-back { font-family: "Cormorant Garamond", serif; font-size: 21px; color: var(--ink); margin: 4px 0; }
.filed-back::before { content: "Thank you, yesterday, for "; font-family:"Inter",sans-serif; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:5px; }
.filed-fwd { font-family: "Cormorant Garamond", serif; font-size: 21px; color: var(--ink); margin: 20px 0 0; }
.filed-fwd::before { content: "One small thing for tomorrow "; font-family:"Inter",sans-serif; font-size:9px; letter-spacing:0.18em; text-transform:uppercase; color:var(--faint); display:block; margin-bottom:5px; }
.filed-mark { font-family:"Inter",sans-serif; font-size:10px; letter-spacing:0.3em; text-transform:uppercase; color:var(--green); margin-top:24px; }
.tomorrow { font-family:"Cormorant Garamond",serif; font-style:italic; font-size:14px; color:var(--faint); margin-top:20px; }
.card.filed .quiet { color: var(--gold-deep); margin-top: 14px; }

.offline { text-align:center; font-style:italic; font-size:13px; color:var(--gold); margin-top:16px; }

/* archive */
.arc-head { display:flex; align-items:baseline; justify-content:space-between; margin-bottom: 22px; }
.arc-count { font-family:"Inter",sans-serif; font-size:10px; letter-spacing:0.24em; text-transform:uppercase; color:var(--faint); }
.stack { display:flex; flex-direction:column; gap: 12px; }
.acard {
  background: var(--paper); color: var(--ink); border-radius: 2px; padding: 16px 18px;
  box-shadow: 0 10px 26px rgba(0,0,0,0.35); position: relative;
}
.acard .d { font-family:"Inter",sans-serif; font-size:9px; letter-spacing:0.24em; text-transform:uppercase; color:var(--faint); }
.acard .b { font-family:"Cormorant Garamond",serif; font-size:17px; margin-top:6px; }
.acard .f { font-family:"Cormorant Garamond",serif; font-style:italic; font-size:16px; color:var(--ink-soft); margin-top:4px; }
.acard .cdot { position:absolute; top:16px; right:16px; width:12px; height:12px; border-radius:50%; border:1px solid rgba(26,24,20,0.2); }
.acard .pg { font-family:"Inter",sans-serif; font-size:8.5px; letter-spacing:0.18em; text-transform:uppercase; color:var(--gold-deep); margin-top:8px; }
.arc-foot { margin-top: 26px; text-align: center; }
.linkbox { margin-top: 12px; font-family:"Inter",sans-serif; font-size:11px; word-break:break-all; color:var(--paper);
  background: var(--edge); border:1px solid var(--gold-deep); padding: 12px; border-radius:2px; }

.foot { margin-top: 28px; text-align: center; }
.foot-line { font-family:"Cormorant Garamond",serif; font-style:italic; font-size:13px; color:var(--gold-deep); }

@media (max-width: 380px) { .line, .filed-back, .filed-fwd { font-size: 19px; } .dot { width: 23px; height: 23px; } }