/* ==========================================================================
   taing.dev · "Sổ dán công nghệ" · Components v0.1.0
   Chỉ dùng token trong tokens.css. Không mã màu trực tiếp (kiểm bằng grep).
   Thứ tự ưu tiên: mobile trước → tablet (≥640) → desktop (≥1024).
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: var(--font-serif);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background-color: var(--bg);
  background-image: radial-gradient(var(--bg-dot) 1.2px, transparent 1.2px);
  background-size: 20px 20px;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--duration), color var(--duration);
}
::selection { background: var(--selection-bg); color: var(--selection-fg); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 100;
  background: var(--accent); color: var(--on-accent);
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-bold);
  padding: var(--sp-2) var(--sp-4);
}
.skip-link:focus { top: var(--sp-4); }

/* ---------- Icon (SVG qua mask, ăn theo màu chữ; không phụ thuộc glyph của font) ---------- */
.ico {
  display: inline-block; flex: none;
  width: 1.1em; height: 1.1em; vertical-align: -0.18em;
  background: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat;
}
.ico-arrow  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
.ico-back   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E"); }
.ico-clock  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='13' r='8'/%3E%3Cpath d='M12 9v4l2.5 2M10 2h4'/%3E%3C/svg%3E"); }
.ico-star   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2.5l2.9 6 6.6.9-4.8 4.6 1.2 6.5L12 17.4l-5.9 3.1 1.2-6.5L2.5 9.4l6.6-.9z'/%3E%3C/svg%3E"); }
.ico-search { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); }
.ico-menu   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); }
.ico-close  { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); }
.ico-sun    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E"); }
.ico-moon   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='black'%3E%3Cpath d='M17.3 13.3A8 8 0 0 1 6.7 2.7a8 8 0 1 0 10.6 10.6z'/%3E%3C/svg%3E"); }
.ico-chat   { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
.ico-cal    { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3.5' y='5' width='17' height='15' rx='1'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }
/* Icon thương hiệu: Simple Icons 16.35.0 (CC0), đơn sắc theo màu chữ */
.ico-facebook { --ico: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z%27/%3E%3C/svg%3E"); }
.ico-x { --ico: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z%27/%3E%3C/svg%3E"); }
.ico-threads { --ico: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M18.263 11.097c-.03-3.486-1.92-5.586-5.111-5.586-2.13 0-3.922.963-4.863 2.499l2.062 1.438c.535-.843 1.272-1.543 2.628-1.543 1.528 0 2.318.85 2.544 2.431a15 15 0 0 0-2.236-.173c-4.125 0-6.068 1.867-6.068 4.336s1.943 3.99 4.804 3.99c3.139 0 5.013-2.115 5.781-4.735.798.361 1.348 1.204 1.348 2.47 0 3.387-3.907 5.232-7.22 5.232-4.885 0-8.077-3.207-8.077-8.424 0-6.392 4.223-10.487 9.9-10.487 3.808 0 5.69 1.671 6.97 3.914l2.108-1.475C21.44 2.078 18.331 0 13.663 0 6.227 0 1.168 5.277 1.168 12.934c0 7 4.953 11.066 10.856 11.066 4.878 0 9.809-2.846 9.809-7.716 0-2.545-1.46-4.231-3.569-5.187m-6.33 4.855c-1.077 0-2.026-.512-2.026-1.453 0-1.483 1.822-1.934 3.606-1.934.678 0 1.34.045 1.927.173-.422 1.927-1.671 3.215-3.508 3.214Z%27/%3E%3C/svg%3E"); }
.ico-up     { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E"); }

/* ---------- Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 640px) { .container { padding-inline: var(--gutter); } }

/* Trang chủ: mobile là 1 cột, thẻ liên hệ xuống cuối (sau nội dung bài);
   desktop là lưới 12 cột, thẻ liên hệ đứng cạnh bài nổi bật. Thứ tự DOM = thứ tự đọc trên mobile. */
.home { display: flex; flex-direction: column; gap: var(--sp-10); }
@media (min-width: 1024px) {
  .home { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--sp-8); row-gap: var(--section-gap); }
  .home > * { grid-column: 1 / -1; min-width: 0; }
  .home > .home__hero { grid-row: 1; }
  .home > .home__featured { grid-row: 2; grid-column: 1 / 9; }
  .home > .home__contact { grid-row: 2; grid-column: 9 / 13; align-self: start; }
}

/* ---------- Typography primitives ---------- */
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  line-height: var(--lh-label);
}
.mono-label--sm { font-size: var(--fs-label-sm); letter-spacing: var(--track-label); }
.kicker { display: flex; align-items: center; gap: var(--sp-2); color: var(--kicker); margin-bottom: var(--sp-3); }
.kicker__dot { width: 10px; height: 10px; border-radius: var(--radius-full); background: currentColor; flex: none; }
.display, .h2, .h3-italic { font-variation-settings: "opsz" var(--opsz-heading); }
.display {
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  font-style: italic;
  font-variation-settings: "opsz" var(--opsz-display);
  letter-spacing: var(--track-tight);
  line-height: var(--lh-display);
  color: var(--text-strong);
  margin-bottom: var(--sp-4);
}
.display__plain {
  font-style: normal;
  text-decoration: underline wavy var(--wavy) 2px;
  text-underline-offset: 6px;
  text-decoration-skip-ink: none;
}
.h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  font-style: italic;
  line-height: var(--lh-heading);
  color: var(--text-strong);
}
.h3-italic { font-size: var(--fs-h3); font-weight: var(--fw-bold); font-style: italic; line-height: var(--lh-heading); }
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-body); color: var(--text); max-width: 36rem; }
@media (min-width: 640px) { .lead { font-size: var(--fs-lead); } }
.mark {
  font-style: normal;
  background: var(--highlight-bg);
  color: var(--highlight-fg);
  padding: 0.05em 0.3em;
  border-radius: var(--radius-sm);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ---------- Header ---------- */
.site-header { padding-top: var(--sp-4); padding-bottom: var(--sp-6); }
@media (min-width: 640px) { .site-header { padding-top: var(--sp-8); padding-bottom: var(--sp-8); } }
.site-header__inner { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.logo {
  display: inline-block; flex: none;
  background: var(--surface-chip);
  border: var(--border-thick) solid var(--line);
  color: var(--text-strong);
  font-family: var(--font-mono); font-weight: var(--fw-bold);
  font-size: var(--fs-label); letter-spacing: var(--track-wide);
  padding: var(--sp-2) var(--sp-3);
  box-shadow: var(--shadow-control);
  transition: border-color var(--duration);
}
@media (min-width: 640px) { .logo { font-size: var(--fs-body-sm); padding: var(--sp-2) var(--sp-4); } }
.logo:hover { border-color: var(--accent); }

.site-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: var(--tap); height: var(--tap); padding: 0 10px;
  background: var(--surface-chip); color: var(--text);
  border: var(--border-thin) solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-bold);
  box-shadow: var(--shadow-control);
  cursor: pointer;
  transition: color var(--duration), border-color var(--duration);
}
.icon-btn:hover { color: var(--text-strong); border-color: var(--accent); }
.icon-btn .ico { width: 18px; height: 18px; }
.icon-btn__text { display: none; }
@media (min-width: 640px) { .icon-btn__text { display: inline; } }

/* Menu: mobile/tablet là ngăn kéo mở bằng nút; desktop hiện thẳng trên header */
.site-nav { display: none; order: 3; width: 100%; }
.site-nav.is-open { display: block; }
.site-nav ul { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: 6px; }
.nav-chip {
  display: flex; align-items: center; min-height: var(--tap);
  background: var(--surface-chip);
  color: var(--text);
  border: var(--border-thin) solid var(--line);
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-semibold);
  letter-spacing: var(--track-label); text-transform: uppercase;
  padding: 6px 14px;
  box-shadow: var(--shadow-control);
  transition: color var(--duration), border-color var(--duration);
}
.nav-chip:hover, .nav-chip[aria-current="page"] { color: var(--text-strong); border-color: var(--accent); }
.menu-btn .ico-close, .menu-btn[aria-expanded="true"] .ico-menu { display: none; }
.menu-btn[aria-expanded="true"] .ico-close { display: inline-block; }
@media (min-width: 640px) { .site-nav ul { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .site-nav, .site-nav.is-open { display: block; order: 0; width: auto; margin-left: auto; }
  .site-nav ul { display: flex; margin: 0; gap: 6px; }
  .nav-chip { min-height: 0; height: var(--tap); }
  .site-tools { margin-left: var(--sp-2); }
  .menu-btn { display: none; }
}

.segmented {
  display: inline-flex; height: var(--tap); padding: 3px;
  background: var(--surface-track);
  border: var(--border-thin) solid var(--line);
  box-shadow: var(--shadow-inset);
}
.segmented button {
  border: 0; background: transparent; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-label-sm); font-weight: var(--fw-bold);
  color: var(--text-muted);
  padding: 0 var(--sp-2);
  min-width: 2rem;
}
.segmented button[aria-pressed="true"] { background: var(--surface-track-active); color: var(--text-strong); box-shadow: var(--shadow-control); }
.segmented button:hover { color: var(--text-strong); }

.theme-btn {
  background: var(--theme-btn-bg); color: var(--theme-btn-fg);
  border-color: var(--theme-btn-edge);
}
.theme-btn:hover { background: var(--theme-btn-hover); color: var(--theme-btn-fg); border-color: var(--theme-btn-edge); }
[data-theme="light"] .theme-btn .ico-sun,
:root:not([data-theme="light"]) .theme-btn .ico-moon { display: none; }

/* ---------- Search dialog (thay cho Pagefind UI, chỉ tìm trong ngôn ngữ đang đọc) ---------- */
.search-dialog {
  width: min(36rem, calc(100vw - 2rem)); max-height: min(36rem, calc(100vh - 4rem));
  margin: 4rem auto auto; padding: var(--sp-5);
  background: var(--surface-sheet); color: var(--text);
  border: var(--border-thin) solid var(--line-strong);
  box-shadow: var(--shadow-paper-lg);
}
.search-dialog::backdrop { background: var(--scrim); }
.search-dialog__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); color: var(--label); }
.search-dialog .field-help { margin-top: var(--sp-2); }
.search-results { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: grid; gap: var(--sp-2); }
.search-results a { display: block; padding: var(--sp-2) var(--sp-3); border: var(--border-thin) solid var(--line); background: var(--surface-inset); color: var(--text-strong); font-size: var(--fs-body-sm); }
.search-results a:hover { border-color: var(--accent); }
.search-results .empty { font-family: var(--font-mono); font-size: var(--fs-label-sm); color: var(--text-muted); }

/* ---------- Paper primitives ---------- */
.paper {
  position: relative;
  border-style: solid;
  border-width: var(--border-thin) var(--border-thick) var(--border-thick) var(--border-thin);
  transform: rotate(var(--tilt, 0deg));
}
.paper--sheet {
  background: var(--surface-sheet);
  border-color: var(--sheet-edge-hi) var(--sheet-edge-lo) var(--sheet-edge-lo) var(--sheet-edge-hi);
  box-shadow: var(--shadow-paper-md);
}
.paper--lined-surface {
  background-color: var(--paper-lined-bg);
  background-image: repeating-linear-gradient(transparent, transparent 31px, var(--paper-lined-rule) 31px, var(--paper-lined-rule) 32px);
  background-position: 0 16px;
}
.tilt-l-xs { --tilt: calc(var(--tilt-xs) * -1); }
.tilt-l-sm { --tilt: calc(var(--tilt-sm) * -1); }
.tilt-l-md { --tilt: calc(var(--tilt-md) * -1); }
.tilt-l-xl { --tilt: calc(var(--tilt-xl) * -1); }
.tilt-r-sm { --tilt: var(--tilt-sm); }
.tilt-r-md { --tilt: var(--tilt-md); }
.tilt-r-lg { --tilt: var(--tilt-lg); }
.tilt-r-xl { --tilt: var(--tilt-xl); }

/* MỘT quy tắc hover cho mọi thẻ bấm được (bài nổi bật, thẻ bài, thẻ hỏi đáp):
   cả thẻ là vùng bấm, rê chuột thì dựng thẳng + nhấc nhẹ + bóng đậm + gạch chân tiêu đề.
   Đồ trang trí (vé, tem, ghi chú) và thẻ nhiều nút (liên hệ, thư tay) đứng yên. */
/* .lift: cùng chuyển động với .card cho các tấm giấy không phải link (hero, vé, tem, ghi chú, liên hệ, thư tay) */
.card, .lift { transition: transform var(--duration), box-shadow var(--duration); }
.card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.card__link:focus-visible { outline: none; }
.card:focus-within { outline: 2px solid var(--focus); outline-offset: 4px; }
/* Lời gọi hành động trong thẻ ("Đọc cả bài", "Mở xem"): mũi tên nhích sang phải, nút đổi sang màu nhấn,
   chữ "Mở xem" gạch chân. Áp cho cả rê chuột lẫn focus bàn phím để hai cách dùng thấy cùng một phản hồi. */
.btn .ico-arrow, .scrap__more .ico-arrow { transition: transform var(--duration); }
.card:focus-within .btn--inverse { background: var(--accent); color: var(--on-accent); border-color: var(--accent-edge); }
.card:focus-within .btn .ico-arrow, .card:focus-within .scrap__more .ico-arrow { transform: translateX(4px); }
.card:focus-within .scrap__more > span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
@media (hover: hover) {
  .card:hover, .lift:hover { transform: translateY(var(--card-lift)) rotate(0deg); box-shadow: var(--shadow-paper-lg); }
  .card:hover .card__link { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
  .card:hover .btn--inverse { background: var(--accent); color: var(--on-accent); border-color: var(--accent-edge); }
  .card:hover .btn .ico-arrow, .card:hover .scrap__more .ico-arrow { transform: translateX(4px); }
  .card:hover .scrap__more > span { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
}

.tape {
  position: absolute; z-index: 2;
  height: var(--tape-height);
  top: -10px;
  background: var(--tape-color, var(--tape-kraft));
  box-shadow: var(--shadow-tape);
  transform: rotate(var(--tape-tilt, -2deg));
  pointer-events: none;
}
.tape::before, .tape::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 5px; background: inherit;
}
.tape::before { left: -4px; clip-path: polygon(100% 0, 0 25%, 80% 50%, 10% 75%, 100% 100%); }
.tape::after { right: -4px; clip-path: polygon(0 0, 90% 20%, 20% 50%, 100% 80%, 0 100%); }
.tape--kraft { --tape-color: var(--tape-kraft); }
.tape--sand { --tape-color: var(--tape-sand); }
.tape--rose { --tape-color: var(--tape-rose); }
.tape--plum { --tape-color: var(--tape-plum); }
.tape--mauve { --tape-color: var(--tape-mauve); }
.tape--amber { --tape-color: var(--tape-amber); }
.tape--brick { --tape-color: var(--tape-brick); }

/* Kẹp giấy: kẹp qua mép trên, điểm nhấn cho tấm giấy chính */
.clip {
  position: absolute; z-index: 3; top: -26px; right: 28px;
  width: 26px; height: 70px;
  fill: none; stroke: var(--clip); stroke-width: 2.4; stroke-linecap: round;
  filter: drop-shadow(var(--clip-shadow));
  transform: rotate(14deg);
  pointer-events: none;
}
@media (min-width: 640px) { .clip { top: -32px; right: 48px; width: 32px; height: 86px; } }
.staple {
  position: absolute; width: 16px; height: 4px; border-radius: 1px;
  background: var(--staple);
  box-shadow: var(--shadow-staple);
}

/* ---------- Hero ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
.hero-sheet { padding: var(--sp-8) var(--sp-5) var(--sp-6); }
@media (min-width: 640px) { .hero-sheet { padding: 2.75rem; } }
.hashtags { display: none; }
@media (min-width: 640px) { .hashtags { display: flex; flex-wrap: wrap; gap: 10px; padding-top: var(--sp-2); margin-top: var(--sp-6); } }
.hashtag {
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-medium);
  color: var(--text);
  background: var(--surface-inset);
  border: var(--border-thin) solid var(--line);
  box-shadow: var(--shadow-inset);
  padding: var(--sp-1) 10px;
}
.hashtag:hover { color: var(--text-strong); border-color: var(--accent); }

/* Cột đồ trang trí: mobile ẩn (người đọc vào thẳng bài), tablet xếp ngang vé + ghi chú, desktop đủ 3 món */
.hero-aside { display: none; }
@media (min-width: 640px) {
  .hero-aside { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--sp-8); padding-top: var(--sp-2); }
  .hero-aside .stamp { display: none; }
}
@media (min-width: 1024px) {
  .hero { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .hero-sheet { grid-column: span 8; }
  .hero-aside { grid-column: span 4; flex-direction: column; flex-wrap: nowrap; align-items: flex-end; gap: var(--sp-6); padding-top: 0; }
  .hero-aside .stamp { display: block; }
}

.ticket {
  position: relative; width: min(18rem, 100%);
  background: var(--ticket-bg); color: var(--ticket-fg);
  border: var(--border-thin) solid var(--ticket-edge);
  padding: var(--sp-4) 4.5rem var(--sp-4) var(--sp-5);
  box-shadow: var(--shadow-paper-md);
}
.ticket::before {
  content: ""; position: absolute; left: -9px; top: 50%; transform: translateY(-50%);
  width: 18px; height: 18px; border-radius: var(--radius-full); background: var(--bg);
}
.ticket::after {
  content: ""; position: absolute; right: 56px; top: 0; bottom: 0;
  border-right: 2px dashed var(--ticket-perforation);
}
.ticket__label { color: var(--ticket-fg-soft); }
.ticket__title { display: block; font-size: 1.5rem; font-weight: var(--fw-bold); font-style: italic; font-variation-settings: "opsz" var(--opsz-heading); line-height: 1.2; margin: 2px 0; }
.ticket__sub { font-family: var(--font-sans); font-size: var(--fs-label-sm); color: var(--ticket-fg-soft); }
.ticket__no {
  position: absolute; right: 8px; top: 0; bottom: 0; width: 44px;
  display: flex; align-items: center; justify-content: center;
  writing-mode: vertical-rl; color: var(--ticket-fg-soft);
}

.stamp {
  position: relative; width: 11rem; text-align: center;
  background: var(--stamp-bg); color: var(--stamp-fg);
  border: 3px dashed var(--stamp-dash);
  padding: var(--sp-5);
  box-shadow: var(--shadow-paper-md);
  font-family: var(--font-mono);
}
.stamp__label { color: var(--stamp-label); }
.stamp__main { display: block; font-size: var(--fs-lead); font-weight: var(--fw-bold); letter-spacing: var(--track-label); padding: var(--sp-1) 0; white-space: nowrap; }
.stamp__sub { color: var(--stamp-sub); }

.note {
  width: min(16rem, 100%);
  background: var(--note-bg); color: var(--note-fg);
  border-color: var(--note-edge);
  border-width: 0 var(--border-thick) var(--border-thick) 0;
  padding: var(--sp-5);
  font-size: var(--fs-body-sm); line-height: var(--lh-heading);
  box-shadow: var(--shadow-paper-sm);
}
.note__label { display: block; color: var(--note-label); margin-bottom: var(--sp-1); }
.note u { text-decoration-color: var(--note-label); font-weight: var(--fw-bold); }
.note .ico { width: 1em; height: 1em; vertical-align: -0.12em; }

/* ---------- Featured ---------- */
.featured { padding: var(--sp-8) var(--sp-5) var(--sp-6); box-shadow: var(--shadow-paper-md);
  border-color: var(--paper-lined-edge-hi) var(--paper-lined-edge-lo) var(--paper-lined-edge-lo) var(--paper-lined-edge-hi); }
@media (min-width: 640px) { .featured { padding: var(--sp-10); } }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--sp-2); margin-bottom: var(--sp-4); font-family: var(--font-mono); font-size: var(--fs-label); }
.meta-row .sep { display: none; color: var(--text-subtle); }
@media (min-width: 640px) { .meta-row .sep { display: inline; } }
.meta-row .date { color: var(--text-muted); }
.meta-row .pillar { color: var(--text-strong); font-weight: var(--fw-semibold); }
.reading-time { display: inline-flex; align-items: center; gap: 4px; color: var(--reading-time); font-weight: var(--fw-bold); }
.badge {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--badge-bg); color: var(--badge-fg);
  border-radius: var(--radius-sm);
  padding: 2px 10px;
}
.badge .ico { width: 0.9em; height: 0.9em; vertical-align: 0; }
.featured .h2 { margin-bottom: var(--sp-4); }
.featured__excerpt { font-size: var(--fs-body); color: var(--text); margin-bottom: var(--sp-6); }
@media (min-width: 640px) { .featured__excerpt { font-size: var(--fs-body-lg); margin-bottom: var(--sp-8); } }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap);
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-bold);
  text-transform: uppercase; letter-spacing: var(--track-label);
  padding: var(--sp-2) var(--sp-5);
  border: var(--border-thin) solid transparent;
  cursor: pointer;
  transition: background-color var(--duration), border-color var(--duration), color var(--duration);
}
/* Nhãn "Đọc tiếp" trong thẻ chỉ là gợi ý thị giác; vùng bấm là cả thẻ */
.btn--fake { pointer-events: none; }
.btn--inverse { background: var(--btn-inverse-bg); color: var(--btn-inverse-fg); border-color: var(--btn-inverse-edge); box-shadow: var(--shadow-paper-sm); }
.btn--inverse:hover { background: var(--btn-inverse-hover); }
.btn--accent {
  background: var(--accent); color: var(--on-accent);
  border-color: var(--accent-edge); border-width: 0 var(--border-thick) var(--border-thick) 0;
  white-space: nowrap; box-shadow: var(--shadow-control);
}
.btn--accent:hover { background: var(--accent-hover); }
.btn--accent:active { transform: translate(1px, 1px); }
.btn--ghost { background: transparent; color: var(--contact-title); border-color: var(--contact-rule); }
.btn--ghost:hover { border-color: var(--contact-label); }

/* ---------- Thẻ liên hệ / trò chuyện 1-1 (thay "Ẩn dụ của bài") ---------- */
.contact {
  background: var(--contact-bg); color: var(--contact-body);
  border-color: var(--contact-edge);
  border-width: 0 var(--border-thick) var(--border-thick) 0;
  padding: var(--sp-8) var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-paper-md);
  display: grid; gap: var(--sp-5);
}
@media (min-width: 640px) and (max-width: 1023px) {
  .contact { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; padding: var(--sp-8); column-gap: var(--sp-8); }
}
@media (min-width: 1024px) { .contact { padding: var(--sp-6); } }
.contact__label { display: flex; align-items: center; gap: 6px; color: var(--contact-label); margin-bottom: var(--sp-2); }
.contact__title { color: var(--contact-title); margin-bottom: var(--sp-3); }
.contact__body { font-size: var(--fs-body-sm); }
.contact__rows { margin: 0; display: grid; gap: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-label-sm); }
.contact__row { display: flex; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; background: var(--contact-row-bg); padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); box-shadow: var(--shadow-inset); }
.contact__row dt { color: var(--contact-row-key); }
.contact__row dd { margin: 0; font-weight: var(--fw-bold); color: var(--contact-row-val-1); }
.contact__actions { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.contact__actions .btn { width: 100%; }

/* ---------- Section title ---------- */
.section-title { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-6); }
@media (min-width: 640px) { .section-title { margin-bottom: var(--sp-8); } }
.section-title h2 {
  background: var(--surface-chip); color: var(--text-strong);
  border: var(--border-thin) solid var(--line);
  padding: var(--sp-2) var(--sp-4);
  box-shadow: var(--shadow-control);
}
.section-title__rule { flex: 1; height: 2px; background: var(--line-soft); }
.section-title__more { font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-bold); color: var(--text-muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.section-title__more:hover { color: var(--accent); }

/* ---------- Scrap cards (6 loại giấy) ---------- */
.scrap-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-8); }
@media (min-width: 640px) { .scrap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-6); } }
@media (min-width: 1024px) { .scrap-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.scrap {
  --p-bg: var(--paper-lined-bg); --p-title: var(--paper-lined-title); --p-body: var(--paper-lined-body);
  --p-label: var(--paper-lined-label); --p-meta: var(--paper-lined-meta);
  --p-hi: var(--paper-lined-edge-hi); --p-lo: var(--paper-lined-edge-lo); --p-dash: var(--paper-lined-dash);
  display: flex; flex-direction: column;
  background-color: var(--p-bg);
  border-color: var(--p-hi) var(--p-lo) var(--p-lo) var(--p-hi);
  padding: var(--sp-6) var(--sp-5) var(--sp-4);
  box-shadow: var(--shadow-paper-sm);
}
@media (min-width: 640px) { .scrap { padding: var(--sp-6); } }
.scrap--lined { background-image: repeating-linear-gradient(transparent, transparent 31px, var(--paper-lined-rule) 31px, var(--paper-lined-rule) 32px); background-position: 0 16px; }
.scrap--plum  { --p-bg: var(--paper-plum-bg);  --p-title: var(--paper-plum-title);  --p-body: var(--paper-plum-body);  --p-label: var(--paper-plum-label);  --p-meta: var(--paper-plum-meta);  --p-hi: var(--paper-plum-edge-hi);  --p-lo: var(--paper-plum-edge-lo);  --p-dash: var(--paper-plum-dash); }
.scrap--ivory { --p-bg: var(--paper-ivory-bg); --p-title: var(--paper-ivory-title); --p-body: var(--paper-ivory-body); --p-label: var(--paper-ivory-label); --p-meta: var(--paper-ivory-meta); --p-hi: var(--paper-ivory-edge-hi); --p-lo: var(--paper-ivory-edge-lo); --p-dash: var(--paper-ivory-dash); }
.scrap--clay  { --p-bg: var(--paper-clay-bg);  --p-title: var(--paper-clay-title);  --p-body: var(--paper-clay-body);  --p-label: var(--paper-clay-label);  --p-meta: var(--paper-clay-meta);  --p-hi: var(--paper-clay-edge-hi);  --p-lo: var(--paper-clay-edge-lo);  --p-dash: var(--paper-clay-dash); }
.scrap--honey { --p-bg: var(--paper-honey-bg); --p-title: var(--paper-honey-title); --p-body: var(--paper-honey-body); --p-label: var(--paper-honey-label); --p-meta: var(--paper-honey-meta); --p-hi: var(--paper-honey-edge-hi); --p-lo: var(--paper-honey-edge-lo); --p-dash: var(--paper-honey-dash); }
.scrap__head { display: flex; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-label-sm); }
.scrap__pillar { display: inline-flex; align-items: center; gap: 6px; color: var(--p-label); font-weight: var(--fw-bold); letter-spacing: var(--track-label); text-transform: uppercase; }
.scrap__pillar::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); background: var(--pillar-dot); flex: none; }
.scrap__date { color: var(--p-meta); white-space: nowrap; }
.scrap__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-heading); color: var(--p-title); margin-bottom: var(--sp-3); }
.scrap__title .card__link { text-decoration-color: var(--p-label); }
.scrap__excerpt {
  font-size: var(--fs-body-sm); color: var(--p-body); margin-bottom: var(--sp-5);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.scrap__foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); border-top: var(--border-thin) dashed var(--p-dash); padding-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-label-sm); }
.scrap__foot .reading-time { color: var(--p-label); }
.scrap__more { display: inline-flex; align-items: center; gap: 4px; color: var(--p-title); font-weight: var(--fw-bold); }

.scrap--draft {
  background: var(--paper-draft-bg);
  border: var(--border-thick) dashed var(--paper-draft-dash);
}
.scrap--draft .scrap__label { display: block; color: var(--paper-draft-label); margin: var(--sp-2) 0; }
.scrap--draft .scrap__title { font-size: var(--fs-body-lg); color: var(--paper-draft-title); }
.scrap--draft .scrap__excerpt { color: var(--paper-draft-body); margin-bottom: var(--sp-4); }
.scrap--draft .btn { margin-top: auto; background: var(--paper-draft-btn-bg); color: var(--paper-draft-btn-fg); border-color: var(--paper-draft-btn-edge); }
.scrap--draft.card:hover .btn { color: var(--text-strong); border-color: var(--accent); }

/* Pillar identity: mỗi chủ đề một chấm màu cố định */
[data-pillar="infra"]  { --pillar-dot: var(--pillar-infra-dot); }
[data-pillar="agent"]  { --pillar-dot: var(--pillar-agent-dot); }
[data-pillar="growth"] { --pillar-dot: var(--pillar-growth-dot); }
[data-pillar="learn"]  { --pillar-dot: var(--pillar-learn-dot); }

/* ---------- Pagination: mobile chỉ còn Trước · 1/14 · Sau ---------- */
.pager {
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6); align-items: center; justify-content: space-between;
  background: var(--surface-sheet);
  border: var(--border-thin) solid var(--line);
  padding: var(--sp-3) var(--sp-4);
  box-shadow: var(--shadow-paper-sm);
  font-family: var(--font-mono); font-size: var(--fs-label);
}
@media (min-width: 640px) { .pager { padding: var(--sp-5); } }
.pager__info { order: 2; color: var(--text); font-family: var(--font-serif); font-style: italic; font-size: var(--fs-body-sm); }
.pager__info b { font-family: var(--font-mono); font-style: normal; color: var(--text-strong); }
.pager__info .sect { color: var(--accent); font-family: var(--font-mono); font-weight: var(--fw-bold); font-style: normal; margin-right: 6px; }
.pager__prev { order: 1; display: inline-flex; align-items: center; gap: 4px; color: var(--text-subtle); font-style: italic; min-height: var(--tap); }
.pager__next { order: 3; display: inline-flex; align-items: center; gap: 4px; color: var(--text-strong); font-style: italic; font-weight: var(--fw-semibold); min-height: var(--tap); }
.pager__next:hover { color: var(--accent); }
.pager__pages { display: none; }
.pager__label { display: none; }
@media (min-width: 640px) {
  .pager__info { order: 0; margin-right: auto; }
  .pager__label { display: inline; }
  .pager__pages { order: 2; display: flex; align-items: center; gap: 6px; }
  .pager__next { order: 3; }
}
.pager__pages a, .pager__pages span[aria-current] {
  width: 2rem; height: 2rem; border-radius: var(--radius-full);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted); border: var(--border-thin) solid transparent;
}
.pager__pages a:hover { color: var(--text-strong); border-color: var(--line-strong); }
.pager__pages span[aria-current] { background: var(--page-current-bg); color: var(--page-current-fg); border-color: var(--page-current-edge); font-weight: var(--fw-bold); }
.pager__ellipsis { color: var(--text-subtle); }

/* ---------- Pillar stickers ---------- */
.stickers { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.stickers__title { width: 100%; font-size: 1.5rem; font-style: italic; font-weight: var(--fw-bold); font-variation-settings: "opsz" var(--opsz-heading); color: var(--text-strong); }
@media (min-width: 640px) { .stickers__title { width: auto; margin-right: var(--sp-2); } }
.sticker {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: var(--tap);
  font-family: var(--font-mono); font-size: var(--fs-label); font-weight: var(--fw-bold);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  border: var(--border-thin) solid var(--s-edge);
  background: var(--s-bg); color: var(--s-fg);
  box-shadow: var(--shadow-control);
  transition: transform var(--duration), box-shadow var(--duration);
}
@media (hover: hover) { .sticker:hover { transform: translateY(var(--card-lift)); box-shadow: var(--shadow-paper-sm); } }
.sticker::before { content: ""; width: 10px; height: 10px; border-radius: var(--radius-full); background: var(--pillar-dot); }
.sticker[data-pillar="infra"]  { --s-bg: var(--pillar-infra-bg);  --s-fg: var(--pillar-infra-fg);  --s-edge: var(--pillar-infra-edge); }
.sticker.sticker[data-pillar="agent"]  { --s-bg: var(--pillar-agent-bg);  --s-fg: var(--pillar-agent-fg);  --s-edge: var(--pillar-agent-edge); }
.sticker[data-pillar="growth"] { --s-bg: var(--pillar-growth-bg); --s-fg: var(--pillar-growth-fg); --s-edge: var(--pillar-growth-edge); }
.sticker[data-pillar="learn"]  { --s-bg: var(--pillar-learn-bg);  --s-fg: var(--pillar-learn-fg);  --s-edge: var(--pillar-learn-edge); }

/* ---------- Newsletter ---------- */
.envelope {
  background: var(--envelope-bg);
  border-color: var(--sheet-edge-hi) var(--sheet-edge-lo) var(--sheet-edge-lo) var(--sheet-edge-hi);
  padding: var(--sp-8) var(--sp-5) var(--sp-6);
  box-shadow: var(--shadow-paper-md);
}
@media (min-width: 640px) { .envelope { padding: var(--sp-10); } }
@media (min-width: 1024px) { .envelope { padding: var(--sp-12); } }
.envelope .tape { left: var(--sp-8); }
.envelope__grid { display: grid; gap: var(--sp-6); }
@media (min-width: 1024px) { .envelope__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-10); align-items: start; } }
.envelope__label { display: block; color: var(--label); margin-bottom: var(--sp-2); }
.envelope .h2 { margin-bottom: var(--sp-4); }
.envelope p { color: var(--text); max-width: 32rem; }
.field-label { display: block; color: var(--text); margin-bottom: 6px; }
.field-row { display: flex; flex-direction: column; gap: 10px; }
@media (min-width: 640px) { .field-row { flex-direction: row; } }
.input {
  width: 100%; min-width: 0; min-height: var(--tap);
  background: var(--input-bg); color: var(--input-fg);
  border: var(--border-thin) solid var(--input-edge);
  font-family: var(--font-mono); font-size: var(--fs-body);
  padding: 8px 14px;
  box-shadow: var(--shadow-inset);
}
@media (min-width: 640px) { .input { font-size: var(--fs-body-sm); } }
.input::placeholder { color: var(--input-placeholder); font-style: italic; }
.input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.field-help { margin-top: var(--sp-3); font-family: var(--font-mono); font-size: var(--fs-label-sm); color: var(--text-muted); line-height: var(--lh-label); }
.form-status { margin-top: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-label-sm); color: var(--label); min-height: 1.2em; }

.topic-picker { border: 0; padding: 0; margin: var(--sp-4) 0 0; min-width: 0; }
.topic-picker legend { padding: 0; margin-bottom: var(--sp-2); }
.topic-picker__list { display: flex; flex-wrap: wrap; gap: 6px; }
.topic-check { position: relative; }
.topic-check input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.topic-check span {
  display: inline-flex; align-items: center; gap: 6px; min-height: 2rem;
  padding: 4px 10px;
  font-family: var(--font-mono); font-size: var(--fs-label-sm); font-weight: var(--fw-semibold);
  background: var(--surface-inset); color: var(--text-muted);
  border: var(--border-thin) dashed var(--line-strong);
}
.topic-check span::before { content: ""; width: 8px; height: 8px; border-radius: var(--radius-full); border: 1.5px solid var(--pillar-dot); }
.topic-check input:checked + span { color: var(--text-strong); border-style: solid; border-color: var(--line-strong); background: var(--surface-chip); }
.topic-check input:checked + span::before { background: var(--pillar-dot); }
.topic-check input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: var(--sp-12);
  padding-block: var(--sp-8);
  border-top: var(--border-thin) solid var(--line-soft);
  display: flex; flex-direction: column; gap: var(--sp-4); align-items: center; justify-content: space-between;
  font-family: var(--font-mono); font-size: var(--fs-label); color: var(--text-muted);
  text-align: center;
}
@media (min-width: 640px) {
  .site-footer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); text-align: left; padding-block: var(--sp-12); }
  .site-footer__copy { justify-self: start; }
  .site-footer__links { justify-self: end; }
}
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-2) var(--sp-6); }
.site-footer nav a { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); min-width: var(--tap); padding-inline: 6px; }
.site-footer a:hover { color: var(--text-strong); }
.site-footer strong { color: var(--text); font-weight: var(--fw-semibold); }

/* ---------- Theo dõi trên mạng xã hội ---------- */
.social { display: flex; align-items: center; gap: 6px; }
.social__link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  color: var(--text-muted);
  border: var(--border-thin) solid var(--line);
  background: var(--surface-chip);
  box-shadow: var(--shadow-control);
  transition: color var(--duration), border-color var(--duration);
}
.social__link .ico { width: 14px; height: 14px; vertical-align: 0; }
.social__link:hover { color: var(--text-strong); border-color: var(--accent); }
.site-nav .social { margin-top: var(--sp-3); }
.site-nav .social__label { margin-right: auto; color: var(--text-muted); }
@media (min-width: 1024px) { .site-nav .social { display: none; } }

/* ---------- Nút lên đầu trang: hiện sau khi cuộn quá 1,5 màn hình ---------- */
.to-top {
  position: fixed; z-index: 40;
  right: max(var(--sp-4), env(safe-area-inset-right));
  bottom: max(var(--sp-4), env(safe-area-inset-bottom));
  width: 2.75rem; height: 2.75rem;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radius-full);
  background: var(--btn-inverse-bg); color: var(--btn-inverse-fg);
  border: var(--border-thin) solid var(--btn-inverse-edge);
  box-shadow: var(--shadow-paper-md);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--duration), transform var(--duration), visibility var(--duration), background-color var(--duration);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--btn-inverse-hover); }
.to-top .ico { width: 20px; height: 20px; vertical-align: 0; }
@media (min-width: 1024px) { .to-top { right: var(--sp-8); bottom: var(--sp-8); } }

/* ---------- Responsive & motion ---------- */
@media (max-width: 639px) {
  /* Giấy nghiêng trên màn hẹp dễ chạm mép và khó đọc: dựng thẳng, băng dính ngắn lại */
  .paper { --tilt: 0deg; }
  .tape { --tape-tilt: 0deg; max-width: 5rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .card:hover, .lift:hover, .sticker:hover { transform: rotate(var(--tilt, 0deg)); }
}