/* =========================================================
   Tata letak ART
   Lukisan latar menetap di belakang · teks selalu di kartu krem · sampul & penutup berbingkai lukis
   ========================================================= */
.art {
  --ink: #3B2117;
  --ink-2: #6A5444;
  --card: rgba(255, 252, 246, .93);
  --line: color-mix(in srgb, var(--acc) 40%, transparent);
  --f-art: var(--f-display, 'Cormorant Garamond'), 'Cormorant Garamond', Georgia, serif;
  background: #17110D;
  color: var(--ink);
  font-family: var(--f-body, 'Cormorant Garamond'), Georgia, serif;
}
.art .content { position: relative; max-width: 480px; background: transparent; isolation: isolate; padding-bottom: 5.5rem; }
.art .r { will-change: opacity, transform; }

/* latar lukisan menetap di belakang seluruh isi (seperti template aslinya) */
.art-backdrop { position: fixed; z-index: -1; top: 0; bottom: 0; left: 50%; width: min(480px, 100%); translate: -50% 0; overflow: hidden; background: #F4EEE2; }
.art-backdrop::before { content: ""; position: absolute; inset: -8% -4%; background: var(--art-scene) center / cover no-repeat; transform: translateY(var(--py, 0%)) scale(1.06); animation: art-kb 28s ease-in-out infinite alternate; }

/* ---------- tipografi ---------- */
.art-kicker { font: 600 .74rem/1.4 var(--f-art); letter-spacing: .3em; text-transform: uppercase; color: var(--acc); }
.art-names { display: grid; justify-items: center; font-family: var(--f-script); font-style: var(--name-style, italic); font-weight: 600; line-height: 1.15; color: var(--acc); }
.art-names > span { display: block; max-width: 100%; padding: .05em .15em .1em; font-size: clamp(2.3rem, 10.5vw, 3rem); overflow-wrap: anywhere; text-wrap: balance; }
.art-names > span.is-long { font-size: clamp(1.9rem, 8.6vw, 2.5rem); }
.art-names > span.is-xlong { font-size: clamp(1.55rem, 7vw, 2rem); }
.art-names > i { font-family: var(--f-art); font-style: italic; font-size: clamp(1.5rem, 6.5vw, 1.9rem); line-height: 1; opacity: .85; }
.art-names--sm > span { font-size: clamp(1.9rem, 8vw, 2.4rem); }
.art-date { margin-top: .6rem; font: 600 .86rem/1.4 var(--f-art); letter-spacing: .12em; text-transform: uppercase; color: var(--ink); }
.art-title { font-family: var(--f-script); font-style: var(--name-style, italic); font-weight: 600; font-size: clamp(2rem, 8.6vw, 2.5rem); line-height: 1.2; color: var(--acc); padding: 0 .15em .1em; overflow-wrap: anywhere; text-wrap: balance; }
.art-title__main { display: block; }
.art-title__sub { display: block; font: 600 .74rem/1.4 var(--f-art); font-style: normal; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-2); margin-top: .25rem; }
.art-title::after { content: ""; display: block; width: 0; height: 1px; margin: .7rem auto 0; background: linear-gradient(90deg, transparent, var(--acc), transparent); transition: width 1.2s cubic-bezier(.2,.8,.2,1) .5s; }
.art-title.in::after, .in .art-title::after { width: 86px; }
.art-lead { font-size: 1.05rem; line-height: 1.65; color: var(--ink); margin-top: .6rem; text-wrap: pretty; }
.art-rule { width: 64px; height: 1px; margin: .9rem auto; background: linear-gradient(90deg, transparent, var(--acc), transparent); }
/* latar gelap: teks di atas lukisan langsung memakai warna terang */
.is-light .art-kicker, .is-light .art-date, .is-light .art-lead { color: #FFF4DC; text-shadow: 0 1px 8px rgba(0,0,0,.75); }
.is-light .art-names, .is-light .art-title { color: #F3D891; text-shadow: 0 2px 10px rgba(0,0,0,.7); }

/* ---------- tombol & pil ---------- */
.art-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5em; padding: .85em 1.6em; border: 1px solid var(--acc); border-radius: 999px; background: var(--acc); color: #FFF8EC; font: 600 .88rem/1 var(--f-art); letter-spacing: .12em; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: 0 10px 22px -12px rgba(0,0,0,.55); }
.art-btn svg { width: 1.1em; height: 1.1em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.art-btn--line { background: transparent; color: var(--acc); box-shadow: none; }
.art-btn--sm { padding: .62em 1.15em; font-size: .74rem; }
.art-btn--block { width: 100%; }
.art-pill { display: inline-flex; margin-top: .6rem; padding: .45em 1em; border-radius: 999px; border: 1px solid var(--line); color: var(--acc); font: 600 .8rem/1 var(--f-art); text-decoration: none; }
.art-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: 1rem; }

/* ---------- kartu krem: semua teks isi undangan ---------- */
.art-sec { position: relative; padding: 2.2rem 1rem; display: grid; gap: 1rem; }
.art-card { position: relative; padding: 2rem 1.3rem; text-align: center; background: var(--card); border-radius: 26px; border: 1px solid var(--line);
  box-shadow: inset 0 0 0 5px var(--card), inset 0 0 0 6px color-mix(in srgb, var(--acc) 22%, transparent), 0 24px 50px -30px rgba(0,0,0,.6);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.art-card--slim { padding: 1.4rem 1.2rem; }
.art-ico { display: block; width: 84px; height: auto; margin: 0 auto .6rem; filter: drop-shadow(0 3px 4px rgba(0,0,0,.15)); }
.art-ico--sm { width: 62px; }
.art-ico--cover { width: clamp(70px, 20vw, 96px); margin-bottom: .8rem; }

/* ---------- sampul ---------- */
.art-cover { display: block; background: #F4EEE2; color: var(--ink); overflow: hidden; }
.art-cover__bg, .art-intro__bg, .art-closing__bg { position: absolute; inset: 0; background: var(--art-frame) center / cover no-repeat; }
.art-cover__bg { animation: art-zoom 8s ease-out both; }
.art-cover__center { position: absolute; z-index: 2; left: 16%; right: 16%; top: 14%; bottom: 36%; display: grid; align-content: center; justify-items: center; text-align: center; }
.art-cover__center > * { animation: art-up 1s cubic-bezier(.2,.8,.2,1) both; }
.art-cover__center > :nth-child(2) { animation-delay: .25s; }
.art-cover__center > :nth-child(3) { animation-delay: .45s; }
.art-cover__center > :nth-child(4) { animation-delay: .7s; }
.art-names--cover > span { font-size: clamp(2.1rem, 9.5vw, 2.8rem); }
.art-names--cover > span.is-long { font-size: clamp(1.8rem, 8vw, 2.3rem); }
.art-names--cover > span.is-xlong { font-size: clamp(1.45rem, 6.4vw, 1.85rem); }
.art-cover__guest { position: absolute; z-index: 3; left: 50%; bottom: max(1.2rem, env(safe-area-inset-bottom)); translate: -50% 0; width: min(310px, calc(100% - 2.4rem)); padding: 1rem 1.1rem 1.15rem; display: grid; justify-items: center; gap: .1rem; text-align: center;
  background: var(--card); border: 1px solid var(--line); border-radius: 20px; box-shadow: 0 20px 40px -22px rgba(0,0,0,.6); animation: art-up 1s cubic-bezier(.2,.8,.2,1) both .9s; }
.art-cover__to { font-size: .92rem; color: var(--ink-2); line-height: 1.35; }
.art-cover__name { font-weight: 700; font-size: 1.35rem; line-height: 1.25; color: var(--ink); overflow-wrap: anywhere; }
.art-cover__place { font-size: .88rem; color: var(--ink-2); margin-bottom: .6rem; }
.art-cover .art-btn { animation: art-bounce 2.4s ease-in-out infinite 2.4s; }
@media (max-height: 680px) { .art-cover__center { top: 10%; bottom: 40%; } .art-ico--cover { display: none; } }

/* ---------- intro (video) ---------- */
.art-intro { position: relative; height: 100svh; min-height: 560px; max-height: 940px; overflow: hidden; background: #F4EEE2; }
.art-intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.art-intro__text { position: absolute; inset: 15% 17% 30%; z-index: 2; display: grid; align-content: center; justify-items: center; text-align: center; gap: .2rem; }
.art-intro__text > * { opacity: 0; transform: translateY(14px); transition: opacity 1s ease, transform 1.2s cubic-bezier(.2,.8,.2,1); }
.art-intro.is-play:not(.art-intro--motion) .art-intro__text > *,
.art-intro--motion.is-text .art-intro__text > * { opacity: 1; transform: none; }
.art-intro__text > :nth-child(2) { transition-delay: .35s; }
.art-intro__text > :nth-child(3) { transition-delay: .7s; }
.art-intro__text > :nth-child(4) { transition-delay: 1s; }

/* ---------- ayat ---------- */
.art-quote--photo { min-height: 78svh; align-content: end; padding-top: 40svh; }
.art-quote__ph { position: absolute; inset: 0; z-index: 0; }
.art-card--quote { z-index: 1; }
.art-mono { font-family: var(--f-script); font-style: var(--name-style, italic); font-weight: 600; font-size: 2.2rem; line-height: 1.1; color: var(--acc); }
.art-card blockquote p { font-size: 1.05rem; line-height: 1.7; font-style: italic; color: var(--ink); margin-top: .5rem; }
.art-card blockquote cite { display: block; margin-top: .6rem; font: 600 .78rem/1 var(--f-art); letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: var(--acc); }

/* ---------- mempelai ---------- */
.art-person { display: grid; justify-items: center; margin-top: 1.6rem; }
.art-capsule { position: relative; width: min(220px, 68%); margin-bottom: 1rem; }
.art-capsule__in { aspect-ratio: 3 / 4.2; border-radius: 999px; overflow: hidden; border: 3px solid var(--acc); box-shadow: 0 0 0 6px var(--card), 0 0 0 7px var(--line), 0 18px 34px -18px rgba(0,0,0,.6); background: #EFE5D3; }
.art-capsule__in img { width: 100%; height: 100%; object-fit: cover; }
.art-capsule__mono { display: grid; place-items: center; height: 100%; font-family: var(--f-script); font-style: var(--name-style, italic); font-size: 4.4rem; color: var(--acc); }
.art-flower { position: absolute; width: 58%; height: auto; pointer-events: none; filter: drop-shadow(0 6px 8px rgba(0,0,0,.18)); }
.art-flower--tl { left: -30%; top: 6%; transform: rotate(-14deg); }
.art-flower--br { right: -30%; bottom: -6%; transform: scaleX(-1) rotate(-8deg); }
.art-nick { font-family: var(--f-script); font-style: var(--name-style, italic); font-weight: 600; font-size: clamp(2rem, 8.8vw, 2.5rem); line-height: 1.2; color: var(--acc); padding: 0 .15em .08em; overflow-wrap: anywhere; }
.art-nick.is-long { font-size: clamp(2rem, 8.6vw, 2.5rem); }
.art-nick.is-xlong { font-size: clamp(1.6rem, 7vw, 2rem); }
.art-fullname { font-weight: 700; font-size: 1.15rem; line-height: 1.35; letter-spacing: .04em; color: var(--ink); overflow-wrap: anywhere; }
.art-parents { margin-top: .35rem; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }
.art-amp { margin-top: 1.4rem; font-family: var(--f-art); font-style: italic; font-size: 3rem; line-height: 1; color: var(--acc); }

/* ---------- hitung mundur ---------- */
.art-cd { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin: 1rem 0; }
.art-cd div { padding: .75rem .2rem; border-radius: 14px; background: color-mix(in srgb, var(--acc) 9%, #fff); border: 1px solid var(--line); }
.art-cd b { display: block; font-size: 1.7rem; line-height: 1; color: var(--acc); font-weight: 600; }
.art-cd span { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }

/* ---------- acara ---------- */
.art-event__name { font-family: var(--f-script); font-style: var(--name-style, italic); font-weight: 600; font-size: clamp(1.8rem, 7.6vw, 2.2rem); line-height: 1.2; color: var(--acc); padding: 0 .15em .08em; overflow-wrap: anywhere; }
.art-event__date { margin-top: .3rem; font-weight: 700; font-size: 1.05rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); }
.art-event__time { font-size: 1rem; color: var(--ink-2); }
.art-event__venue { font-weight: 700; font-size: 1.05rem; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); line-height: 1.4; overflow-wrap: anywhere; }
.art-event__addr { margin-top: .2rem; font-size: 1rem; line-height: 1.5; color: var(--ink-2); }

/* ---------- kisah ---------- */
.art-timeline { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 1.1rem; text-align: left; }
.art-timeline li { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .9rem; align-items: start; }
.art-timeline li:not(:has(.art-timeline__ph)) { grid-template-columns: minmax(0, 1fr); }
.art-timeline__ph { padding: 0; border: 2px solid var(--acc); border-radius: 999px; overflow: hidden; aspect-ratio: 3 / 4; cursor: zoom-in; background: none; }
.art-timeline__ph img { width: 100%; height: 100%; object-fit: cover; }
.art-timeline__year { font: 700 .74rem/1 var(--f-art); letter-spacing: .2em; color: var(--acc); }
.art-timeline h3 { font-family: var(--f-script); font-style: var(--name-style, italic); font-weight: 600; font-size: 1.4rem; line-height: 1.2; color: var(--acc); }
.art-timeline p { font-size: .98rem; line-height: 1.55; color: var(--ink); }

/* ---------- galeri ---------- */
.art-masonry { columns: 2; column-gap: .5rem; margin-top: 1.1rem; }
.art-masonry__item { display: block; width: 100%; margin: 0 0 .5rem; padding: 0; border: 0; border-radius: 12px; overflow: hidden; cursor: zoom-in; break-inside: avoid; background: none; }
.art-masonry__item img { width: 100%; height: auto; display: block; }

/* ---------- amplop ---------- */
.art-acct { margin-top: 1rem; padding: 1.1rem 1rem; border-radius: 16px; background: color-mix(in srgb, var(--acc) 6%, #fff); border: 1px solid var(--line); display: grid; justify-items: center; gap: .25rem; }
.art-acct__no { font-weight: 700; font-size: 1.3rem; letter-spacing: .08em; color: var(--ink); }
.art-acct__holder { font-size: 1rem; color: var(--ink-2); line-height: 1.5; }
.art-acct__label { font: 700 .78rem/1 var(--f-art); letter-spacing: .2em; text-transform: uppercase; color: var(--acc); }
.art-acct .art-btn { margin-top: .4rem; }

/* ---------- rsvp ---------- */
.art-form { margin-top: 1.1rem; text-align: left; }
.art .field span, .art .field legend { color: var(--ink); font-family: var(--f-art); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .76rem; }
.art .field input, .art .field select, .art .field textarea { background: #fff; border: 1px solid var(--line); color: var(--ink); font-family: var(--f-art); font-size: 1.05rem; }
.art .seg label span { border-color: var(--line); color: var(--ink); font-family: var(--f-art); font-size: .92rem; }
.art .seg input:checked + span { background: var(--acc); border-color: var(--acc); color: #FFF8EC; }
.art-wishes { margin-top: 1.4rem; text-align: left; }
.art .wishes__list li { background: #fff; border: 1px solid var(--line); color: var(--ink); }

/* ---------- penutup ---------- */
.art-closing { position: relative; min-height: 100svh; max-height: 940px; overflow: hidden; }
.art-closing__text { position: absolute; inset: 15% 15% 26%; z-index: 2; display: grid; align-content: center; justify-items: center; text-align: center; gap: .3rem; }
.art-closing .art-lead { font-size: 1rem; margin-top: .3rem; }

/* ---------- dock, musik, kaki ---------- */
.art-dock { background: color-mix(in srgb, var(--acc) 88%, #000); border-color: color-mix(in srgb, #fff 30%, transparent); }
.art-dock a { color: rgba(255, 246, 228, .78); }
.art-dock a.is-on { background: #FFF6E4; color: var(--acc); }
.art .music { background: var(--acc); color: #FFF6E4; border-color: #FFF6E4; }
.art-made { position: relative; text-align: center; padding: 1.4rem 1rem 2rem; color: #FFF4DC; background: color-mix(in srgb, var(--acc) 80%, #000); font-size: .9rem; }
.art-made a { color: #FFE2A8; }

/* ---------- PC: undangan di tengah, lukisan buram di sisi ---------- */
@media (min-width: 1000px) {
  .art .stage { display: block; }
  .art .content.art-content { margin: 0 auto; box-shadow: 0 0 0 1px rgba(255,255,255,.15), 0 30px 90px -20px rgba(0,0,0,.8); }
  .art-aside { display: block; position: fixed; inset: 0; height: auto; z-index: -2; background: #17110D; }
  .art-aside__bg { position: absolute; inset: -40px; background: var(--art-scene) center / cover no-repeat; filter: blur(22px) brightness(.5) saturate(1.1); }
  .art .dock { left: 50%; right: auto; translate: -50% 140%; }
  body.art:not(.is-locked) .dock { translate: -50% 0; }
  .art .music { right: calc(50% - 240px + 16px); }
  .art .cover { left: 50%; right: auto; width: 480px; translate: -50% 0; box-shadow: 0 30px 90px -20px rgba(0,0,0,.8); }
}

@keyframes art-zoom { from { transform: scale(1.08); } }
@keyframes art-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes art-bounce { 0%, 100% { transform: none; } 50% { transform: translateY(-5px); } }
@media (prefers-reduced-motion: reduce) {
  .art *, .art *::before, .art *::after { animation: none !important; transition: none !important; }
  .art-intro__text > * { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   MOTION GRAPHIC
   ========================================================= */
/* kelopak & serbuk emas (canvas di atas semua, tak menghalangi sentuhan) */
.art-petals { position: fixed; z-index: 70; top: 0; bottom: 0; left: 50%; width: min(480px, 100%); height: 100%; translate: -50% 0; pointer-events: none; }

/* huruf muncul satu per satu */
.ch { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(6deg); filter: blur(5px); transition: opacity .7s ease, transform .9s cubic-bezier(.2,.8,.2,1), filter .8s ease; transition-delay: calc(var(--i) * 45ms + .15s); }
.art-cover .ch, .in .ch, .art-intro.is-text .ch, .art-intro.is-play:not(.art-intro--motion) .ch { opacity: 1; transform: none; filter: none; }
.art-cover .ch { transition: none; animation: art-ch .9s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--i) * 55ms + .5s); }
.art-cover .art-names span + i + span .ch { animation-delay: calc(var(--i) * 55ms + 1.1s); }

/* sampul: ikon melayang berkilau, kilau emas pada nama */
.art-ico--cover { animation: art-float 4.5s ease-in-out infinite, art-up 1s cubic-bezier(.2,.8,.2,1) both; }
.art-cover .art-names { position: relative; }
.art-cover__bg::after, .art-closing__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 60% at 50% 45%, transparent 55%, rgba(0,0,0,.08)); }
.art-closing__bg { animation: art-kb 22s ease-in-out infinite alternate; }

/* kartu: muncul lebih hidup */
.js .art-card.r { transform: translateY(34px) scale(.97); }
.js .art-card.r.in { transform: none; }

/* foto kapsul: zoom perlahan; bunga bergoyang & ikut arah gulir */
.art-capsule__in img { animation: art-kb 16s ease-in-out infinite alternate; }
.art-flower { transform-origin: 70% 90%; animation: art-sway 6s ease-in-out infinite; }
.art-flower--tl { --base: -14deg; }
.art-flower--br { --base: -8deg; animation-delay: -3s; }
.art-flower--br { transform: scaleX(-1) rotate(calc(var(--base) + var(--sway, 0deg))); }
.art-flower--tl { transform: rotate(calc(var(--base) - var(--sway, 0deg))); }
.in .art-flower, .art-person.in .art-flower { animation-name: art-sway, art-pop; animation-duration: 6s, 1.1s; animation-iteration-count: infinite, 1; animation-timing-function: ease-in-out, cubic-bezier(.2,.8,.2,1.3); }

/* kartu acara: miring 3D mengikuti jari + kilau */
.art-event { transform-style: preserve-3d; transition: transform .25s ease, opacity 1s, box-shadow .3s; }
.art-event.in { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.art-event::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 0%), rgba(255,255,255,.55), transparent 45%); opacity: .7; mix-blend-mode: soft-light; }
.art-event .art-ico { animation: art-float 5s ease-in-out infinite; }

/* hitung mundur membalik */
.art-cd b { display: block; transform-origin: 50% 60%; }
.art-cd b.is-flip { animation: art-flip .5s cubic-bezier(.2,.8,.2,1); }

/* tombol berkilau */
.art-btn { position: relative; overflow: hidden; }
.art-btn::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%); transform: translateX(-120%); animation: art-shine 4.5s ease-in-out infinite 2s; }
.art-btn--line::after { display: none; }

/* galeri di dalam kartu */
.art-card--gx { padding-inline: .8rem; }
.art-gx { margin-top: .8rem; text-align: left; }
.art-gx .gx-switch a.is-on, .art-gx .gx-ctrl button { background: var(--acc); color: #FFF8EC; border-color: var(--acc); }
.art-gx .gx-thumbs button.is-on { outline-color: var(--acc); }

@keyframes art-kb { from { transform: translateY(var(--py, 0%)) scale(1.06); } to { transform: translateY(var(--py, 0%)) scale(1.16) translateX(-1.5%); } }
@keyframes art-ch { from { opacity: 0; transform: translateY(.5em) rotate(8deg); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes art-float { 0%, 100% { transform: translateY(0); filter: drop-shadow(0 3px 4px rgba(0,0,0,.15)); } 50% { transform: translateY(-6px); filter: drop-shadow(0 10px 10px rgba(0,0,0,.12)) brightness(1.08); } }
@keyframes art-sway { 0%, 100% { rotate: -2deg; } 50% { rotate: 3deg; } }
@keyframes art-pop { from { scale: .4; opacity: 0; } to { scale: 1; opacity: 1; } }
@keyframes art-flip { 0% { transform: rotateX(70deg); } 100% { transform: none; } }
@keyframes art-shine { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@media (prefers-reduced-motion: reduce) { .art-petals { display: none; } .ch { opacity: 1 !important; transform: none !important; filter: none !important; } }
.art .content { overflow-x: clip; }
.art-gx .gx-track { margin: 0 -.8rem; padding: 6px 12%; }
.art-gx .gx-slide { border-radius: 18px; box-shadow: 0 16px 30px -18px rgba(0,0,0,.6); }
.art-gx.gallery--polaroid .gx--polaroid { height: 420px; margin-inline: 0; }
.art-sec { grid-template-columns: minmax(0, 1fr); }
.art-card { min-width: 0; }
.art-gx .gx-switch { flex-wrap: wrap; }
.wd { display: inline-block; white-space: nowrap; }
.art-cd div { text-align: center; }