/* 02 · Thư Tay — giấy kem, mực đỏ son, chữ in lớn và lưới bất đối xứng. */
body[data-theme="ink"] {
  --bg: #f3eee6;
  --paper: #faf7f1;
  --ink: #1e1a17;
  --muted: #6e655e;
  --accent: #c0281c;
  --gold: #c0281c;
  --line: rgba(30, 26, 23, 0.14);
  --on-accent: #fbf6ee;
  --f-display: "Fraunces", Georgia, serif;
  --radius: 0px;
  --btn-radius: 0px;
  --ph-1: #e6ddd0;
  --ph-2: #bfb1a0;
  --ph-ink: rgba(30, 26, 23, 0.55);
  --backdrop:
    linear-gradient(90deg, rgba(30, 26, 23, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(rgba(30, 26, 23, 0.05) 1px, transparent 1px) 0 0 / 32px 32px,
    #e7e0d5;
}
body[data-theme="ink"] .kicker { color: var(--accent); }

.ink-cover {
  position: relative;
  min-height: min(100svh, 860px);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  padding: 72px 26px 34px;
}
.ink-top {
  display: flex;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--ink);
  font: 600 11px/1 var(--f-body);
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.ink-names {
  align-self: center;
  display: grid;
  margin: 24px 0;
  font: 300 112px/0.86 var(--f-display);
  letter-spacing: -0.025em;
}
.ink-names em { margin: 6px 0 0 4px; color: var(--accent); font-size: 64px; font-style: italic; }
.ink-names span:last-child { margin-left: 34px; }
.ink-stamp {
  position: absolute;
  top: 132px;
  right: 22px;
  width: 104px;
  fill: none;
  stroke: var(--accent);
  animation: ink-spin 40s linear infinite;
}
.ink-stamp circle { stroke-width: 1; }
.ink-stamp text { fill: var(--accent); stroke: none; font: 600 9.5px/1 var(--f-body); letter-spacing: 0.2em; }
.ink-stamp .ink-stamp-core { font: 700 26px/1 "Noto Serif TC", "SimSun", serif; letter-spacing: 0; }
@keyframes ink-spin { to { transform: rotate(360deg); } }

.ink-date { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0; border-top: 1px solid var(--ink); }
.ink-date div { padding: 12px 0 0; }
.ink-date div + div { padding-left: 14px; border-left: 1px solid var(--line); }
.ink-date dt { color: var(--muted); font: 600 10px/1 var(--f-body); letter-spacing: 0.22em; text-transform: uppercase; }
.ink-date dd { margin: 6px 0 0; color: var(--accent); font: 300 64px/1 var(--f-display); letter-spacing: -0.04em; }
.ink-date .ink-year { font-size: 40px; line-height: 1.6; letter-spacing: -0.02em; }
.ink-sub { margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; }

.ink-photo { padding: 0 0 8px; }
.ink-photo p { margin: 12px 26px 0; color: var(--muted); font: italic 300 15px/1.4 var(--f-display); text-align: right; }

.ink-letter, .ink-event { padding: 84px 26px; }
.ink-index { margin: 0 0 26px; color: var(--accent); font: 600 11px/1 var(--f-body); letter-spacing: 0.2em; text-transform: uppercase; }
.ink-letter h2, .ink-event h2 { margin: 0; font: 300 54px/1.04 var(--f-display); letter-spacing: -0.03em; }
.ink-letter h2 em { color: var(--accent); }
.ink-letter-body { margin: 34px 0 0 56px; }
.ink-letter-body p { margin: 0 0 16px; font-size: 15px; line-height: 1.75; }
.ink-sign { margin-top: 26px !important; color: var(--accent); font: italic 400 26px/1 var(--f-display) !important; }
.ink-event { border-top: 1px solid var(--ink); }
.ink-event h2 { color: var(--accent); }
.ink-facts { margin: 38px 0 0; }
.ink-facts div { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 16px 0; border-top: 1px solid var(--line); }
.ink-facts div:last-child { border-bottom: 1px solid var(--line); }
.ink-facts dt { padding-top: 5px; color: var(--muted); font: 600 11px/1.4 var(--f-body); letter-spacing: 0.2em; text-transform: uppercase; }
.ink-facts dd { margin: 0; font: 400 20px/1.35 var(--f-display); }

/* Phần dùng chung: căn trái, đánh số mục như một bức thư */
body[data-theme="ink"] .wedding-extras { counter-reset: ink-sec 2; }
body[data-theme="ink"] .x-section { counter-increment: ink-sec; border-top-color: var(--ink); text-align: left; }
body[data-theme="ink"] .x-kicker::before { content: "(" counter(ink-sec, decimal-leading-zero) ") — "; }
body[data-theme="ink"] .x-head h2 { font-weight: 300; font-size: 40px; line-height: 1.08; letter-spacing: -0.025em; }
body[data-theme="ink"] .x-family-grid { text-align: center; }
body[data-theme="ink"] .x-schedule-list { text-align: left; }
body[data-theme="ink"] .x-schedule-list li { padding-inline: 0; }
body[data-theme="ink"] .x-schedule-list p { margin: 0; }
body[data-theme="ink"] .x-schedule-list .is-main { padding: 28px 22px; }
body[data-theme="ink"] .x-lead, body[data-theme="ink"] .x-address { margin-left: 0; }
body[data-theme="ink"] .countdown > span { border: 0; border-left: 1px solid var(--ink); background: transparent; text-align: left; padding: 4px 0 4px 10px; }
body[data-theme="ink"] .countdown strong { color: var(--accent); font-weight: 300; font-size: 44px; }
body[data-theme="ink"] .x-wishes { background: var(--paper); }
body[data-theme="ink"] .x-field input, body[data-theme="ink"] .x-field textarea, body[data-theme="ink"] .x-field select { border-width: 0 0 1px; border-color: var(--ink); background: transparent; padding-inline: 0; }
body[data-theme="ink"] .x-field input:focus, body[data-theme="ink"] .x-field textarea:focus { box-shadow: none; border-color: var(--accent); }
body[data-theme="ink"] .form-status { text-align: left; }
body[data-theme="ink"] .x-field select { background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(-45deg, transparent 50%, var(--muted) 50%); background-position: calc(100% - 12px) 50%, calc(100% - 6px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
body[data-theme="ink"] .qr-code { outline-color: var(--ink); }

body[data-theme="ink"] .theme-close { border-top: 1px solid var(--ink); text-align: left; }
body[data-theme="ink"] .theme-close h2 { font-weight: 300; font-size: 76px; letter-spacing: -0.05em; }
body[data-theme="ink"] .theme-close h2 i { font-style: italic; }

/* Màn mở: tờ giấy gấp đôi tách theo chiều ngang */
body[data-theme="ink"] .invitation-gate {
  --ink-speckle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='92'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='3' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .93 0 0 0 0 .9 0 0 0 -16 6.4'/%3E%3C/filter%3E%3Crect width='92' height='92' filter='url(%23n)'/%3E%3C/svg%3E");
  --gate-bg: #f3eee6; --gate-ink: #1e1a17; --gate-gold: #c0281c; }
body[data-theme="ink"] .invitation-door-left { inset: 0 0 auto 0; width: auto; height: 50.5%; }
body[data-theme="ink"] .invitation-door-right { inset: auto 0 0 0; width: auto; height: 50.5%; }
body[data-theme="ink"] .invitation-gate.is-opening .invitation-door-left { transform: translateY(-101%); }
body[data-theme="ink"] .invitation-gate.is-opening .invitation-door-right { transform: translateY(101%); }
body[data-theme="ink"] .invitation-gate-card .gate-title { font-weight: 300; font-size: 60px; letter-spacing: -0.04em; }
body[data-theme="ink"] .invitation-gate-card .gate-title i { font-style: italic; }
body[data-theme="ink"] .invitation-gate-card { transition-delay: 1s; }
body[data-theme="ink"] .invitation-door { transition-duration: 0.85s; transition-delay: 1s; }
body[data-theme="ink"] .invitation-gate-card button { gap: 18px; }
/* Con dấu đang nhấc lên khỏi giấy: có bóng đổ bên dưới */
body[data-theme="ink"] .invitation-gate-card button span {
  position: relative;
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: #c0281c;
  box-shadow: inset 0 0 0 4px #c0281c, inset 0 0 0 5px rgba(251, 246, 238, 0.7), 0 10px 18px -6px rgba(30, 26, 23, 0.45);
  color: transparent;
  font-size: 0;
  animation: none;
  transform: translateY(-4px) rotate(-8deg);
}
body[data-theme="ink"] .invitation-gate-card button span::before {
  content: "囍";
  color: #fbf6ee;
  font: 700 40px/1 "Noto Serif TC", "SimSun", serif;
}
/* Vòng mực loang ra khi dấu chạm giấy */
body[data-theme="ink"] .invitation-gate-card button span::after {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid #c0281c;
  border-radius: 50%;
  opacity: 0;
}
body[data-theme="ink"] .invitation-gate-card button:hover span { transform: translateY(-8px) rotate(-4deg) scale(1.04); }
/* Bấm: nhấc dấu lên cao, đập xuống, để lại vết mực loang lổ trên giấy rồi tờ giấy mới tách */
body[data-theme="ink"] .invitation-gate.is-opening button span { animation: ink-press 0.8s cubic-bezier(0.3, 0, 0.3, 1) forwards; }
body[data-theme="ink"] .invitation-gate.is-opening button span::after { animation: ink-ring 0.7s 0.38s ease-out both; }
body[data-theme="ink"] .invitation-gate.is-opening .invitation-gate-card { animation: ink-jolt 0.24s 0.36s ease-out; }
body[data-theme="ink"] .opening-petals { display: none; }
@keyframes ink-press {
  0% { transform: translateY(-4px) rotate(-8deg) scale(1); }
  38% { transform: translateY(-46px) rotate(-16deg) scale(1.35); box-shadow: inset 0 0 0 4px #c0281c, inset 0 0 0 5px rgba(251, 246, 238, 0.7), 0 60px 34px -14px rgba(30, 26, 23, 0.28); animation-timing-function: cubic-bezier(0.6, 0, 1, 0.6); }
  48% { transform: translateY(0) rotate(-3deg) scale(0.9); box-shadow: inset 0 0 0 4px #c0281c, inset 0 0 0 5px rgba(251, 246, 238, 0.7), 0 0 0 0 rgba(30, 26, 23, 0); background-image: none; }
  49% { background-image: var(--ink-speckle); }
  58% { transform: translateY(0) rotate(-3deg) scale(1.05); }
  100% { transform: translateY(0) rotate(-3deg) scale(1); box-shadow: inset 0 0 0 4px #c0281c, inset 0 0 0 5px rgba(251, 246, 238, 0.7), 0 0 0 0 rgba(30, 26, 23, 0); background-image: var(--ink-speckle); }
}
@keyframes ink-ring {
  from { opacity: 0.8; transform: scale(1); }
  to { opacity: 0; transform: scale(2.1); }
}
@keyframes ink-jolt {
  0% { transform: translateY(0); }
  35% { transform: translateY(3px) scale(0.995); }
  100% { transform: translateY(0); }
}


@media (max-width: 360px) {
  .ink-names { font-size: 92px; }
  .ink-stamp { width: 86px; }
}