/* Dust & Stardust site v17 (2026-11-11): the user's Acrobat comments, applied site-wide.
   Linked last in every page <head> (layout.js adds it too if a page forgets). Every rule starts with html[data-v17]
   (set by js/look.js) so it wins over the older layers (site, frame, gallery, border, accent, checkout ...).

   #10  one background for every page = the Locket Bag colours: page #F5E9E1 + a soft dusk wash at the top,
        header rgba(245,233,225,.84), footer #EAD9CF. No faint book-page patterns anywhere.
   #09/#10  every button = soft, muted pale lavender (light fill, thin edge, plum text); hover one step deeper.
   #04  links inside text: no underline, bold instead (focus ring kept).
   #07/#16  one handwriting accent font (Princess Sofia, "Keep it turning") for small accents that don't need to be read
        closely: eyebrows, signatures, short taglines, the Shop headline and the Shop category tags. Korean: --hand-ko
        (temporary: Gowun Batang, upright) until the user picks a Korean handwriting font.
   #06  only the main photo of a piece wears a gilt frame; thumbnails / other angles / cart = a simple square edge
        like the museum label card.
   #08/#12  calmer line breaks: balanced headings, "pretty" paragraphs, Korean never breaks inside a word.
   cursor: the standard system cursor (the cherub cursor is gone). */

html[data-v17] {
  --paper: #F5E9E1; --cream: #EAD9CF; --card: #FDF7F3; --bd-head: rgba(245, 233, 225, .84);
  --st-w1: rgba(221, 194, 195, .42); --st-w2: rgba(235, 193, 163, .20);
  /* buttons: pale muted lavender */
  --lv-bg: #ECE5F3; --lv-bg-h: #E0D5EC; --lv-edge: #CDBFDE; --lv-edge-h: #B9A8D0; --lv-ink: #574066; --lv-soft: #F4F0F8;
  --hand: "Princess Sofia", "Cormorant Garamond", cursive;
  --hand-ko: "Gowun Batang", var(--ko-font, "Gowun Batang"), serif;   /* temporary, see the Korean handwriting options board */
  --hand-ink: #5a4466;
}
/* no pattern tiles behind the pages or the footer (the colours above stay) */
:root[data-v17][data-border][data-bg][data-story] { --bg-tile: none; --bg-foot: none; --paper: #F5E9E1; --cream: #EAD9CF; --card: #FDF7F3; --bd-head: rgba(245, 233, 225, .84); --st-w1: rgba(221, 194, 195, .42); --st-w2: rgba(235, 193, 163, .20); }
html[data-v17] body {
  background: linear-gradient(180deg, var(--st-w1) 0, var(--st-w2) 46%, transparent 100%) 0 0 / 100% 820px no-repeat, #F5E9E1;
  cursor: auto;
}
html[data-v17] .site-header { background: rgba(245, 233, 225, .84); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
html[data-v17] .site-footer { background: #EAD9CF; }
html[data-v17] .bk-props { display: none; }
html[data-v17] a, html[data-v17] button, html[data-v17] label, html[data-v17] summary, html[data-v17] [role="tab"] { cursor: pointer; }
html[data-v17] input[type="text"], html[data-v17] input[type="email"], html[data-v17] textarea { cursor: text; }
html[data-v17] .star-trail, html[data-v17] .ds-cursor, html[data-v17] #stardust { display: none !important; }

/* ---------------- buttons ---------------- */
html[data-v17] .btn,
html[data-v17] .btn-solid,
html[data-v17] .btn-gold,
html[data-v17] .scene-cta,
html[data-v17] .btn-checkout,
html[data-v17] .pp-soon,
html[data-v17] .kr-pay {
  background: var(--lv-bg); color: var(--lv-ink); border: 1px solid var(--lv-edge);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 1px 3px rgba(87, 64, 102, .08);
  font-weight: 500; text-decoration: none;
}
html[data-v17] .btn:hover, html[data-v17] .btn:focus-visible,
html[data-v17] .btn-solid:hover, html[data-v17] .btn-gold:hover, html[data-v17] .scene-cta:hover {
  background: var(--lv-bg-h); color: var(--lv-ink); border-color: var(--lv-edge-h);
}
html[data-v17] .btn:focus-visible { outline: 2px solid var(--lv-edge-h); outline-offset: 3px; }
/* secondary buttons (plain .btn without -solid): same family, outline only */
html[data-v17] .btn:not(.btn-solid):not(.btn-gold):not(.scene-cta):not(.btn-checkout) { background: rgba(255, 255, 255, .35); }
html[data-v17] .btn:not(.btn-solid):not(.btn-gold):not(.scene-cta):not(.btn-checkout):hover { background: var(--lv-soft); }
html[data-v17] .btn[disabled], html[data-v17] .btn[aria-disabled="true"] { opacity: .55; background: var(--lv-soft); color: var(--lv-ink); border-color: var(--lv-edge); cursor: not-allowed; box-shadow: none; }
/* chips / small toggles that act like buttons */
html[data-v17] .chip.is-on, html[data-v17] .wchip input:checked + span, html[data-v17] .seg input:checked + label { background: var(--lv-bg); border-color: var(--lv-edge-h); color: var(--lv-ink); }

/* ---------------- links in text: bold, no underline ---------------- */
html[data-v17] main :is(p, li, dd, td, th, label, small, figcaption, blockquote, .prose, .lede, .lead, .note) a:not(.btn):not([class*="btn"]),
html[data-v17] .cart :is(p, li) a:not(.btn),
html[data-v17] .btn-link, html[data-v17] .pd-adopted a, html[data-v17] .policy a:not(.btn), html[data-v17] .toc a {
  text-decoration: none; font-weight: 700; color: inherit;
}
html[data-v17] main :is(p, li, dd, td, label, small, figcaption, blockquote, .prose, .lede, .lead, .note) a:not(.btn):hover,
html[data-v17] .btn-link:hover, html[data-v17] .policy a:not(.btn):hover { color: var(--lv-ink); text-decoration: none; }
html[data-v17] a:focus-visible { outline: 2px solid var(--lv-edge-h); outline-offset: 2px; border-radius: 2px; }
html[data-v17] .foot-col a:hover { text-decoration: none; color: var(--lv-ink); }
html[data-v17] .rm { text-decoration: none; font-weight: 700; }

/* ---------------- handwriting accents (EN) ---------------- */
html[data-v17] .hand, html[data-v17] .mem-hand { font-family: var(--hand); font-weight: 400; color: var(--hand-ink); line-height: 1.2; font-style: normal; }
html[data-v17][data-lang="en"] .eyebrow {
  font-family: var(--hand); font-size: 26px; line-height: 1.1; letter-spacing: 0; text-transform: none; font-variant: normal; color: var(--hand-ink); font-weight: 400;
}
html[data-v17][data-lang="en"] .foot-tag { font-family: var(--hand); font-size: 22px; line-height: 1.25; color: var(--hand-ink); }
/* Korean: the handwriting font is still to be chosen (one variable) */
html[data-v17][data-lang="ko"] :is(.hand, .mem-hand) { font-family: var(--hand-ko); font-style: normal; }
html[data-v17][data-lang="ko"] .eyebrow { font-family: var(--hand-ko); text-transform: none; letter-spacing: .02em; }

/* ---------------- Shop: headline + category tags ---------------- */
html[data-v17] .sh-head h1.sh-title { font-family: var(--hand); font-weight: 400; font-size: clamp(46px, 5.6vw, 76px); line-height: 1.05; color: var(--ink); margin: 4px 0 8px; letter-spacing: 0; }
html[data-v17][data-lang="ko"] .sh-head h1.sh-title { font-family: var(--serif); font-size: clamp(32px, 4.2vw, 50px); line-height: 1.3; }
html[data-v17] .sh-head .eyebrow { margin-bottom: 0; }
html[data-v17][data-lang="en"][data-look] .tk .tk-plate .tk-name, html[data-v17][data-lang="en"] .tk .tk-name { font-family: var(--hand); font-size: 25px; line-height: 1; letter-spacing: 0; text-transform: none; font-style: normal; }
html[data-v17][data-lang="ko"][data-look] .tk .tk-plate .tk-name, html[data-v17][data-lang="ko"] .tk .tk-name { font-family: var(--hand-ko); font-style: normal; }
html[data-v17] .tk.is-on .tk-plate { background: var(--lv-bg); border-color: var(--lv-edge-h); }
html[data-v17] .tk.is-on .tk-name { color: var(--lv-ink); }
html[data-v17] .sh-soon { display: none; text-align: center; font-size: 20px; margin: 10px auto 40px; color: var(--ink-soft); }
html[data-v17] .sh-soon.is-on { display: block; }

/* ---------------- simple square edge for every photo that is not the main one ---------------- */
html[data-v17] .thumb-sq,
html[data-v17] .pd-thumbs .gilt,
html[data-v17] .co-items .gilt,
html[data-v17] .cart-thumb {
  border: 1px solid rgba(180, 147, 90, .55) !important; border-image: none !important; background: #FDF7F3; padding: 3px;
  box-shadow: 0 1px 2px rgba(80, 60, 40, .08); border-radius: 0;
}
html[data-v17] .thumb-sq img, html[data-v17] .cart-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
html[data-v17] .cart-thumb { display: block; width: 64px; height: 64px; }
html[data-v17] .pd-thumbs button { opacity: .75; }
html[data-v17] .pd-thumbs button.is-on { opacity: 1; border-color: var(--lv-edge-h) !important; box-shadow: 0 0 0 2px var(--lv-bg); }

/* ---------------- calmer line breaks (#08, #12) ---------------- */
html[data-v17] :is(h1, h2, h3, h4, .eyebrow, .lede, .lead, .sub, figcaption, .foot-tag) { text-wrap: balance; }
html[data-v17] :is(p, li, dd, label) { text-wrap: pretty; }
html[data-v17][data-lang="ko"] :is(h1, h2, h3, h4, p, li, dd, label, span, a, button, figcaption) { word-break: keep-all; overflow-wrap: break-word; }
html[data-v17] .br-m { display: none; }
@media (max-width: 640px) {
  html[data-v17] .br-d { display: none; }
  html[data-v17] .br-m { display: inline; }
}

/* ---------------- footer: one small business line in the page's language ---------------- */
html[data-v17] .biz-line { margin: 26px 0 6px; font-size: 13px; line-height: 1.7; color: var(--ink-soft); text-align: center; text-wrap: balance; }
html[data-v17] .biz-line .sep { margin: 0 .5em; opacity: .6; }
html[data-v17] .site-footer .copy { font-size: 13px; text-align: center; margin: 0; color: var(--ink-soft); }
html[data-v17] .site-footer .biz { display: none; }
@media (max-width: 640px) { html[data-v17] .biz-line { font-size: 12px; } }

/* ---------------- Ask Madame: the letter (#03) ---------------- */
html[data-v17] .letter { position: relative; max-width: 720px; margin: 0 auto; padding: 40px clamp(20px, 5vw, 56px) 44px; background: #FFFCF8;
  border: 1px solid rgba(180, 147, 90, .45); box-shadow: 0 10px 30px rgba(80, 60, 40, .08);
  background-image: repeating-linear-gradient(180deg, transparent 0, transparent 41px, rgba(205, 191, 222, .35) 41px, rgba(205, 191, 222, .35) 42px); background-position: 0 128px; }
html[data-v17] .letter-dear { font-family: var(--hand); font-size: 52px; line-height: 1; color: var(--hand-ink); margin: 0 0 6px; font-weight: 400; }
html[data-v17][data-lang="ko"] .letter-dear { font-family: var(--hand-ko); font-size: 34px; }
html[data-v17] .letter-intro { font-size: 20px; line-height: 1.55; margin: 0 0 22px; color: var(--ink-soft); }
html[data-v17] .letter .f { margin: 0 0 20px; }
html[data-v17] .letter label, html[data-v17] .letter .lab { display: block; font-size: 19px; margin: 0 0 6px; }
html[data-v17] .letter .opt { font-style: italic; color: var(--ink-soft); font-size: 16px; }
html[data-v17] .letter input[type="text"], html[data-v17] .letter input[type="email"], html[data-v17] .letter select, html[data-v17] .letter textarea {
  width: 100%; font: inherit; font-size: 19px; padding: 10px 12px; border: 1px solid rgba(180, 147, 90, .45); border-radius: 4px; background: rgba(255, 255, 255, .75); color: var(--ink); }
html[data-v17] .letter textarea { min-height: 170px; resize: vertical; line-height: 1.5; }
html[data-v17] .letter .two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
html[data-v17] .letter .agree-one { display: grid; grid-template-columns: 22px 1fr; gap: 10px; align-items: start; font-size: 17px; line-height: 1.5; margin: 6px 0 20px; }
html[data-v17] .letter .agree-one input { width: 19px; height: 19px; margin-top: 4px; accent-color: var(--lv-ink); }
html[data-v17] .letter-sign { font-family: var(--hand); font-size: 30px; color: var(--hand-ink); text-align: center; margin: 22px 0 0; line-height: 1.2; }
html[data-v17] .letter-sign small { display: block; font-family: var(--serif); font-size: 16px; color: var(--ink-soft); margin-top: 4px; }
html[data-v17][data-lang="ko"] .letter-sign { font-family: var(--hand-ko); font-size: 22px; }
html[data-v17] .letter .files-note { font-size: 15px; color: var(--ink-soft); margin: 6px 0 0; }
@media (max-width: 640px) {
  html[data-v17] .letter .two { grid-template-columns: 1fr; gap: 0; }
  html[data-v17] .letter-dear { font-size: 42px; }
}

/* ---------------- Contact (#04) ---------------- */
html[data-v17] .contact-min { max-width: 560px; margin: 0 auto; text-align: center; }
html[data-v17] .contact-min .lines { list-style: none; padding: 0; margin: 26px 0; font-size: 22px; line-height: 1.9; }
html[data-v17] .contact-min .lines b { font-weight: 700; }
html[data-v17] .contact-min .short { text-align: left; font-size: 18px; line-height: 1.6; padding: 18px 22px; border: 1px solid rgba(180, 147, 90, .45); background: #FDF7F3; }
html[data-v17] .contact-min .short ul { margin: 0; padding-left: 1.1em; }

/* ---------------- Locket: the lenticular card turns by itself (#09) ---------------- */
html[data-v17] .auto-note { font-size: 15px; color: var(--ink-soft); }

/* thanks page: Madame's one handwritten line under the ticket (kept from v16) */
html[data-v17] .mem-line { text-align: center; font-size: 30px; margin: 18px auto 6px; }
html[data-v17][data-lang="ko"] .mem-line { font-size: 22px; }

/* more links that used to be underlined: bold instead (#04) */
html[data-v17] :is(.back-link, .foot-brand a, .ct-all, .lh-copy .btn-link, .cta-row .btn-link) { text-decoration: none; font-weight: 700; }
html[data-v17] :is(.back-link, .foot-brand a):hover { color: var(--lv-ink); }