/* Dust & Stardust site v20 (2026-11-12): third round of Acrobat comments (site\_review\user-comments-3-2026-11-12.json, pages 15-31).
   Loaded after css/v18.css on every page. */

/* ---------------- one divider for the whole site (p21: the thin gold line with a small star under the Shop tags) ---------------- */
.ds-rule, .rule, .sh-rail {
  display: block; position: relative; height: 1px; border: 0; overflow: visible;
  width: min(560px, 80%); margin: 22px auto;
  background: linear-gradient(90deg, transparent 0, var(--gold-line) 15%, var(--gold-line) 45%, transparent 47%, transparent 53%, var(--gold-line) 55%, var(--gold-line) 85%, transparent 100%);
}
.ds-rule::after, .rule::after, .sh-rail::after {
  content: "\2726"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -52%);
  padding: 0; background: transparent; color: var(--gold); font-size: 15px; line-height: 1; font-style: normal;
}
.sh-rail { margin: 22px auto 64px; }
.orn { display: none !important; }          /* the old flourish (divider-collection.png) is retired everywhere */
.bd-foot { display: none !important; }      /* p24: no sun-and-moon border above the footer; the top border stays */

/* policy-style page titles: the line that started strong and faded out (p27) becomes the same divider, centred */
.policy .page-head, body[data-page="contact"] .page-head { text-align: center; }
.policy .page-head h1, body[data-page="contact"] .page-head h1 { padding-bottom: 30px; margin-bottom: 6px; }
.policy .page-head h1::after, body[data-page="contact"] .page-head h1::after {
  content: "\2726"; left: 50%; right: auto; bottom: 0; width: min(420px, 78vw); height: 16px; transform: translateX(-50%);
  font: normal 15px/16px var(--serif); color: var(--gold); text-align: center; letter-spacing: 0;
  background: linear-gradient(90deg, transparent 0, var(--gold-line) 15%, var(--gold-line) 45%, transparent 47%, transparent 53%, var(--gold-line) 55%, var(--gold-line) 85%, transparent 100%) center / 100% 1px no-repeat;
}

/* ---------------- handwriting accents: one colour (p21 "Keepsakes" had turned brown) ---------------- */
html[data-v17] .sh-head h1.sh-title { color: var(--hand-ink); }
/* p27: Contact gets its handwriting title too */
body[data-page="contact"] .page-head h1 { font-family: var(--hand); font-weight: 400; font-size: clamp(54px, 6vw, 76px); line-height: 1.05; color: var(--hand-ink); letter-spacing: 0; }
html[data-lang="ko"] body[data-page="contact"] .page-head h1 { font-family: var(--hand-ko); font-size: clamp(44px, 5vw, 60px); }

/* ---------------- Shop (p21, p22) ---------------- */
/* rail: round caps only at the two ends (the middle balls came from `.tk > span { display:flex }` catching the cap span) */
:root .sh-tickets .tk > .v18-cap { display: none !important; border: 0; margin: 0; padding: 0; }
:root[data-look="frame"][data-tabs="cord"] .sh-tickets .tk:first-child > .v18-cap,
:root[data-look="frame"][data-tabs="cord"] .sh-tickets .tk:last-child > .v18-cap { display: block !important; width: 15px; height: 15px; top: -5px; }
/* category numbers and tassels a size up */
:root[data-look="frame"][data-tabs="cord"] .sh-tickets .tk .tk-no { font-family: var(--serif); font-size: 17px; font-weight: 600; letter-spacing: .02em; color: #9a7a45; font-variant-numeric: lining-nums; }
:root[data-look="frame"][data-tabs="cord"] .sh-tickets .tk.is-on .tk-no { color: #8b5a6c; }
:root[data-look="frame"][data-tabs="cord"] .sh-tickets .tk-plate::after { width: 14px; height: 24px; margin: 1px 0 0 -7px; background-size: 100% 100%; background-repeat: no-repeat; }
:root[data-look="frame"][data-tabs="cord"] .sh-tickets .tk { padding-bottom: 26px; }
/* name labels: one size for every card, the two made-to-order bags included */
.sh-grid .sh-label { box-sizing: border-box; width: 100%; min-height: var(--lb-h, 108px); display: flex; flex-direction: column; justify-content: center; }
.sh-feature .sh-label .lb-meta { margin-top: auto; }

/* ---------------- home (p15-p18) ---------------- */
/* edge colours of the home art, retuned when new art lands */
.home-sections { --s1-bottom: #F6DBC6; --s2-top: #F1E5DD; --s2-bottom: #FCEBD9; --s3-top: #D7BED5; --s3-bottom: #F9DAC7; --gap12: clamp(48px, 7vw, 120px); --seep2: 9vw; --seep2b: 11vw; } /* sampled from img/home/v20 edges */
/* 1 -> 2: breathing room, then the sky seeps in (no hard line, not glued together) */
.home-sections .scene[data-sec="1"] { background: var(--s1-bottom); }
.home-sections .scene[data-sec="1"] picture img, .home-sections .scene[data-sec="1"] .hm {
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 3vw), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 3vw), transparent 100%); }
.home-sections .scene[data-sec="2"] { margin-top: var(--gap12); position: relative; z-index: 1; margin-bottom: calc(-1 * var(--seep2b)); background: linear-gradient(180deg, var(--s2-top) 0, var(--s2-top) 30%, transparent 70%); }
.home-sections .scene[data-sec="2"]::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: calc(var(--gap12) + 1px); background: linear-gradient(180deg, var(--s1-bottom) 0%, var(--s2-top) 100%); pointer-events: none; }
.home-sections .scene[data-sec="2"] picture img, .home-sections .scene[data-sec="2"] .hm {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 var(--seep2), #000 calc(100% - var(--seep2b)), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 var(--seep2), #000 calc(100% - var(--seep2b)), transparent 100%); }
/* 2 -> Locket: the clouds dissolve into the section below (same move as Theatre -> fairground, which the user liked) */
.home-sections .hf-locket { padding-top: calc(clamp(56px, 8vw, 120px) + var(--seep2b)); background: linear-gradient(180deg, var(--s2-bottom) 0%, var(--s2-bottom) calc(var(--seep2b) + 4vw), #F6E1DA 100%); }
.home-sections .scene[data-sec="2"] .scene-cta { z-index: 3; }
@media (max-width: 768px) {
  .home-sections { --s1-bottom: #EBD0B1; --s2-top: #EFDDCC; --s2-bottom: #FDE8D2; --s3-top: #DABDD6; --s3-bottom: #FCDCC8; --gap12: 56px; --seep2: 14vw; --seep2b: 16vw; }
}
/* the two bag sections use the same divider, aligned with their text */
.hf-copy .ds-rule { width: 260px; margin: 14px 0 18px; }
@media (max-width: 760px) { .hf-copy .ds-rule { margin: 14px auto 18px; } }

/* always a little movement on the home page (p17), even without a hover */
.hm-sign, .hm-card { animation: v20-idle 6.4s ease-in-out infinite alternate; }
.hm-card:nth-child(3n+1) { animation-duration: 7.2s; animation-delay: -1.7s; }
.hm-card:nth-child(3n+2) { animation-duration: 8.1s; animation-delay: -4.2s; }
.hm-card:nth-child(3n) { animation-duration: 6.8s; animation-delay: -2.9s; }
@keyframes v20-idle { 0% { transform: rotate(-.75deg); } 100% { transform: rotate(.75deg); } }
.hm-sign.is-sway, .hm-card.is-sway, .hm-card.is-sway:nth-child(n) { animation: hm-sway 1.6s cubic-bezier(.36, .07, .19, .97); }
.hm-glint i { animation: v20-glint 7.5s ease-out infinite; }
.hm-glint i:nth-child(2) { animation-delay: 2.6s; }
.hm-glint i:nth-child(3) { animation-delay: 5.1s; }
.hm-glint.is-sway i { animation: hm-glint 1.4s ease-out both; }
@keyframes v20-glint { 0%, 78% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0); } 86% { opacity: .9; transform: translate(-50%, -50%) scale(1) rotate(25deg); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(.5) rotate(60deg); } }
.hf-gilt { animation: v20-float 9s ease-in-out infinite alternate; }
.hf-theatre .hf-gilt { animation-duration: 10.5s; animation-delay: -3s; }
@keyframes v20-float { 0% { transform: translateY(-4px) rotate(-.35deg); } 100% { transform: translateY(4px) rotate(.3deg); } }
/* the Locket card on the home page plays like a GIF: a soft lenticular crossfade A <-> B */
.hf-lenti img.b { animation: v20-lenti 5.2s ease-in-out infinite; }
@keyframes v20-lenti { 0%, 28% { opacity: 0; } 44%, 78% { opacity: 1; } 94%, 100% { opacity: 0; } }
/* Reduced motion (this PC reports it, and site.css switches every animation off with `* { animation: none !important }`):
   the user explicitly asked for this constant small movement, so these loops stay on, only quieter and slower. */
@keyframes v20-idle-soft { 0% { transform: rotate(-.45deg); } 100% { transform: rotate(.45deg); } }
@keyframes v20-float-soft { 0% { transform: translateY(-2.5px); } 100% { transform: translateY(2.5px); } }
@media (prefers-reduced-motion: reduce) {
  .hm-sign, .hm-card { animation: v20-idle-soft 7.4s ease-in-out infinite alternate !important; }
  .hm-card:nth-child(3n+1) { animation-duration: 8.2s !important; animation-delay: -1.7s !important; }
  .hm-card:nth-child(3n+2) { animation-duration: 9.1s !important; animation-delay: -4.2s !important; }
  .hm-glint i { animation: v20-glint 8.5s ease-out infinite !important; }
  .hm-glint i:nth-child(2) { animation-delay: 2.8s !important; }
  .hm-glint i:nth-child(3) { animation-delay: 5.6s !important; }
  .hm-bulb { animation: hm-bulb 5.4s ease-in-out infinite alternate !important; }
  .hf-gilt { animation: v20-float-soft 10s ease-in-out infinite alternate !important; }
  .hf-lenti img.b { animation: v20-lenti 6.4s ease-in-out infinite !important; }
  html[data-v17] #wish-form-wrap::before { animation: v20-gild 11s ease-in-out infinite !important; }
  html[data-edge="torn"] #wish-form-wrap::before { animation: none !important; }
}
/* v20 art: Theatre -> fairground keeps the move the user liked, retuned to the new sky; fairground -> footer melts instead of a hard line */
.home-sections .hf-locket { background: linear-gradient(180deg, var(--s2-bottom) 0%, var(--s2-bottom) calc(var(--seep2b) + 4vw), #F6E1DA 100%); }
.home-sections .hf-theatre { background: linear-gradient(180deg, #F6E1DA 0%, #EAD3DA 55%, var(--s3-top) 100%); }
.home-sections .scene[data-sec="3"] { background: #F3DFD3; }
.home-sections .scene[data-sec="3"] picture img, .home-sections .scene[data-sec="3"] .hm {
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6vw, #000 calc(100% - 4vw), transparent 100%);
  mask-image: linear-gradient(180deg, transparent 0, #000 6vw, #000 calc(100% - 4vw), transparent 100%); }
html[data-v17] body[data-page="home"] .site-footer { border-top: 0; }
@media (max-width: 760px) {
  .home-sections .scene[data-sec="3"] picture img, .home-sections .scene[data-sec="3"] .hm {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 8vw, #000 calc(100% - 6vw), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 8vw, #000 calc(100% - 6vw), transparent 100%); }
}

/* ---------------- footer (p20, p24): warmer colour, one centred brand block, fewer links ---------------- */
html[data-v17] .site-footer { background: linear-gradient(180deg, #F3DFD3 0%, #EFD6C8 100%); border-top: 1px solid rgba(196, 165, 107, .35); padding: 58px 0 34px; }
.v20-foot .vf-brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.v20-foot .foot-logo { height: 78px; width: auto; margin: 0 0 12px; }
html[data-v17] .v20-foot .foot-tag { margin: 0; font-size: 25px; line-height: 1.2; text-align: center; }
html[data-v17][data-lang="ko"] .v20-foot .foot-tag { font-size: 22px; }
.v20-foot .ds-rule { width: min(380px, 72%); margin: 20px auto 18px; }
.v20-foot .vf-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px 30px; font-size: 17px; }
.v20-foot .vf-links a { text-decoration: none; color: var(--ink); }
.v20-foot .vf-links a:hover { color: var(--lv-ink, #574066); }
html[data-v17] .v20-foot .foot-ig { margin-top: 16px; font-size: 16px; font-weight: 600; color: var(--hand-ink); text-decoration: none; }
html[data-v17] .v20-foot .foot-ig img { width: 24px; height: 24px; }
html[data-v17] .v20-foot .biz-line { margin: 28px auto 6px; text-align: center; max-width: 980px; }
@media (max-width: 640px) {
  .v20-foot .vf-links { gap: 6px 20px; font-size: 16px; }
  .v20-foot .foot-logo { height: 64px; }
}

/* ---------------- cart (p28) ---------------- */
html[data-v17] .cart-empty .empty-t { display: none; }

/* ---------------- Custom Order letter (p26) ---------------- */
html[data-v17] #wish-form-wrap {
  --torn: polygon(0% 1.9px, 4% 1.7px, 8% 3.4px, 12% 3.8px, 16% 3.3px, 20% 3px, 24% 7.8px, 28% 4.3px, 32% 2.4px, 36% 7.4px, 40% 4.9px, 44% 4.6px, 48% 1px, 52% 6.8px, 56% 5.1px, 60% 2.9px, 64% 4px, 68% 2.1px, 72% 2.2px, 76% 3px, 80% 2.5px, 84% 2.8px, 88% 1.2px, 92% 3.2px, 96% 4.2px, 100% 1.7px, calc(100% - 3.5px) 3%, calc(100% - 6px) 6%, calc(100% - 4.1px) 9%, calc(100% - 4.5px) 12%, calc(100% - 6px) 15%, calc(100% - 2.2px) 18%, calc(100% - 4.2px) 21%, calc(100% - 3.6px) 24%, calc(100% - 6.6px) 27%, calc(100% - 4.3px) 30%, calc(100% - 6.6px) 33%, calc(100% - 4.9px) 36%, calc(100% - 3.6px) 39%, calc(100% - 2.1px) 42%, calc(100% - 2.9px) 45%, calc(100% - 5.3px) 48%, calc(100% - 3.5px) 51%, calc(100% - 2.9px) 54%, calc(100% - 3.4px) 57%, calc(100% - 4.9px) 60%, calc(100% - 3.8px) 63%, calc(100% - 5.4px) 66%, calc(100% - 6.4px) 69%, calc(100% - 4.6px) 72%, calc(100% - 4px) 75%, calc(100% - 6px) 78%, calc(100% - 5.2px) 81%, calc(100% - 1.9px) 84%, calc(100% - 5.8px) 87%, calc(100% - 6.2px) 90%, calc(100% - 1.4px) 93%, calc(100% - 1.2px) 96%, 100% calc(100% - 8.5px), 96% calc(100% - 2.8px), 92% calc(100% - 8px), 88% calc(100% - 2px), 84% calc(100% - 8.6px), 80% calc(100% - 6px), 76% calc(100% - 1.6px), 72% calc(100% - 3.9px), 68% calc(100% - 8.9px), 64% calc(100% - 5.5px), 60% calc(100% - 8.2px), 56% calc(100% - 1.3px), 52% calc(100% - 3.6px), 48% calc(100% - 7.2px), 44% calc(100% - 6.8px), 40% calc(100% - 8.9px), 36% calc(100% - 8.7px), 32% calc(100% - 4.9px), 28% calc(100% - 7.8px), 24% calc(100% - 6.8px), 20% calc(100% - 8.4px), 16% calc(100% - 7.5px), 12% calc(100% - 6.1px), 8% calc(100% - 6.4px), 4% calc(100% - 8.5px), 0% calc(100% - 8.3px), 1.5px 97%, 1px 94%, 4px 91%, 3.3px 88%, 4.8px 85%, 1.4px 82%, 3.9px 79%, 6.5px 76%, 5.3px 73%, 2.2px 70%, 2.8px 67%, 2.2px 64%, 5.6px 61%, 5.7px 58%, 2.4px 55%, 1.2px 52%, 5px 49%, 6.4px 46%, 6px 43%, 6.2px 40%, 2.6px 37%, 5.3px 34%, 1.6px 31%, 5.3px 28%, 2.2px 25%, 2.8px 22%, 1.1px 19%, 3px 16%, 1.6px 13%, 1.7px 10%, 4.5px 7%, 2.3px 4%);
  position: relative; padding: 3.5px; filter: drop-shadow(0 12px 24px rgba(96, 70, 40, .14)) drop-shadow(0 1px 1.5px rgba(96, 70, 40, .12));
}
/* the gilded edge: a band of real gold along the torn outline, with a slow travelling glint */
html[data-v17] #wish-form-wrap::before {
  content: ""; position: absolute; inset: 0; z-index: 0; clip-path: var(--torn); pointer-events: none;
  background:
    linear-gradient(105deg, transparent 0 38%, rgba(255, 252, 232, .95) 46%, transparent 54% 100%) 0 0 / 260% 100% no-repeat,
    linear-gradient(115deg, #a87b33 0%, #e8c978 9%, #c39342 18%, #f7e4a8 27%, #b88a3b 37%, #dcb867 48%, #fff0c2 55%, #b0823a 66%, #e9cd84 78%, #a57732 89%, #d9b464 100%);
  animation: v20-gild 7s ease-in-out infinite;
}
@keyframes v20-gild { 0% { background-position: 130% 0, 0 0; } 60%, 100% { background-position: -40% 0, 0 0; } }
html[data-v17] #wish-form-wrap > .letter { position: relative; z-index: 1; clip-path: var(--torn); }
/* option B (?edge=torn): no gold, the paper's own fibrous rim */
html[data-edge="torn"] #wish-form-wrap { padding: 2.2px; }
html[data-edge="torn"] #wish-form-wrap::before {
  animation: none;
  background: #fffdf9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.86  0 0 0 0 0.8  0 0 0 0 0.7  0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* light beige paper, like the memo boxes in the review PDF */
html[data-v17] .letter {
  background-color: #FBF6EE;
  background-image:
    linear-gradient(180deg, transparent calc(var(--ln) - 1px), rgba(150, 118, 80, .2) calc(var(--ln) - 1px)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.55  0 0 0 0 0.45  0 0 0 0 0.32  0 0 0 0.06 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(120% 90% at 50% 40%, rgba(255, 253, 248, .7), rgba(238, 224, 200, .22));
  background-size: 100% var(--ln), 220px 220px, 100% 100%;
  background-repeat: repeat, repeat, no-repeat;
}
/* "(optional)" sits beside its label, not on a line of its own */
html[data-v17] .letter :is(label, .lab) .opt { display: inline !important; margin: 0 0 0 .35em; padding: 0; border: 0; background: none; box-shadow: none; white-space: nowrap; }
html[data-v17] .letter :is(label, .lab):not(.agree-one) { white-space: nowrap; }
html[data-v17] .letter .agree-one, html[data-v17] .letter .agree-one * { white-space: normal; }