/* A warmer, more tactile stationery system for the gift preview. */
.certificate {
  position:relative;
  background:linear-gradient(145deg,#1c2630,#0b121b 72%);
  border:1px solid #29343b;
  padding:clamp(20px,3vw,36px);
  box-shadow:0 28px 70px #10182035, inset 0 0 0 1px #ffffff08;
}
.certificate-inner,.preview-cert,.opened-gift {
  --cert-ink:#292622;
  --cert-secondary:#78694f;
  --cert-border:#bca681;
  position:relative;
  isolation:isolate;
  text-align:center;
  color:var(--cert-ink);
  background:linear-gradient(155deg,#fbf8f0,#f1ebdf 77%,#eae1d3);
  border:1px solid #dfd3be;
  outline:0;
  padding:42px 28px 32px;
  box-shadow:0 10px 32px #080c0d35;
  overflow-wrap:anywhere;
}
.certificate-inner::before,.preview-cert::before,.opened-gift::before {
  content:"";position:absolute;inset:12px;border:1px solid var(--cert-border);opacity:.65;pointer-events:none;z-index:-1;
}
.certificate-inner::after,.preview-cert::after,.opened-gift::after {
  content:"";position:absolute;inset:15px;border:1px solid var(--cert-border);opacity:.2;pointer-events:none;z-index:-1;
}
.certificate-inner[data-finish="champagne"],.preview-cert[data-finish="champagne"],.opened-gift[data-finish="champagne"] {
  --cert-ink:#352c23;--cert-secondary:#7b6240;--cert-border:#ad8e5b;
  background:linear-gradient(135deg,#f0e1c8,#e4d0b2 52%,#f2e5d3);border-color:#c8b08a;
}
.certificate-inner[data-finish="midnight"],.preview-cert[data-finish="midnight"],.opened-gift[data-finish="midnight"] {
  --cert-ink:#f5eddf;--cert-secondary:#d4b98d;--cert-border:#9b805c;
  background:radial-gradient(ellipse at 50% 35%,#1b2b3a,#0a1420 72%);border-color:#8d7655;
}
.certificate-inner .cert-brand,.preview-cert .cert-brand,.opened-gift .cert-brand {
  color:var(--cert-secondary);font:500 17px/1 var(--serif);letter-spacing:.31em;
  margin:0 0 22px;padding-left:.31em;
}
.cert-brand span {display:inline-block;font-size:16px;letter-spacing:0;margin-right:9px;color:var(--cert-secondary)}
.cert-divide {width:75%;max-width:245px;margin:0 auto 25px;display:flex;align-items:center;gap:9px;color:var(--cert-secondary);font-size:13px;line-height:1}
.cert-divide::before,.cert-divide::after {content:"";height:1px;background:var(--cert-border);opacity:.65;flex:1}
.cert-divide-bottom {margin:22px auto 0;width:50%}
.certificate-inner .cert-label,.preview-cert .cert-label,.opened-gift .cert-label {
  color:var(--cert-secondary);font:600 9px/1.5 var(--sans);letter-spacing:.19em;text-transform:uppercase;margin:0;
}
.certificate-inner .cert-name,.preview-cert .cert-name,.opened-gift .cert-name {
  color:var(--cert-ink);font:italic 45px/1.06 var(--serif);letter-spacing:-.015em;margin:12px auto 22px;max-width:100%;
}
.cert-sky,.unbox-star-map {
  display:block;width:min(100%,230px);height:auto;aspect-ratio:1/1;margin:0 auto 23px;
  background:#0b1625 url('assets/starlu-celestial-art.webp') center/cover no-repeat;
  border:1px solid #be9a62;border-radius:50%;box-shadow:0 0 0 4px #a58a6326,0 9px 20px #17233124;
}
.cert-meta,.preview-cert #modalMeta,.unbox-meta {
  color:var(--cert-secondary);font:600 9px/1.6 var(--sans);letter-spacing:.1em;text-transform:uppercase;margin:0 auto;max-width:90%;
}
.cert-message,.preview-cert #modalMessage,.unbox-message {
  color:var(--cert-ink);font:italic 18px/1.3 var(--serif);margin:14px auto 0;max-width:90%;white-space:pre-line;overflow-wrap:anywhere;
}
.cert-message:empty,.preview-cert #modalMessage:empty {display:none}
.certificate-inner .cert-foot,.preview-cert .cert-foot,.opened-gift .cert-foot {font-size:8px;letter-spacing:.14em;margin:13px auto 0}
.preview-cert {padding:33px 22px 27px;min-height:0}
.preview-cert .cert-brand {font-size:14px;margin:0 0 16px}
.preview-cert .cert-divide {margin-bottom:16px}
.preview-cert .cert-divide-bottom {margin:17px auto 0}
.preview-cert .cert-name {font-size:35px;margin:10px auto 17px}
.preview-cert .cert-sky {width:min(100%,170px);height:auto;margin:0 auto 19px}
.modal-preview {background:linear-gradient(140deg,#d8cdbb,#ebe4d9);padding:26px}
.modal-preview>.eyebrow {margin:0 0 18px}
.finish-selector {margin:0;padding:0;border:0;min-width:0}
.finish-selector legend {font-size:11px;font-weight:600;margin:0 0 9px}
.finish-options {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.form .finish-option {position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:76px;padding:9px 5px;border:1px solid #d1c5b4;background:#fbf8f2;text-align:center;cursor:pointer;font-size:10px;font-weight:500;overflow-wrap:anywhere}
.finish-option:has(input:checked) {border-color:#8e7047;box-shadow:inset 0 0 0 1px #8e7047}
.finish-option:has(input:focus-visible) {outline:2px solid #a97f4d;outline-offset:3px}
.finish-option input {position:absolute;width:1px!important;height:1px;opacity:0;padding:0!important}
.finish-swatch {width:28px;height:28px;border-radius:50%;border:1px solid #c0a87f;box-shadow:inset 0 0 0 3px #ffffff45}
.swatch-ivory {background:#f0e9db}.swatch-midnight {background:#142231}.swatch-champagne {background:#cdb28b}
.digital-visual {background:radial-gradient(circle at 50% 35%,#2a3740,#0e151d 75%)}
.digital-paper {position:relative;background:linear-gradient(145deg,#fbf7ed,#e9e1d3);border:1px solid #d4c7b1;box-shadow:0 15px 45px #0009;transform:rotate(-3deg)}
.digital-paper::before {content:"";position:absolute;inset:9px;border:1px solid #c2a980;opacity:.7}
.digital-paper>span,.digital-paper small {position:relative;z-index:1}
.digital-paper small {color:#756045;font-family:var(--serif);font-size:10px;letter-spacing:.23em}
.paper-circle {width:112px;height:112px;margin-top:19px;background:#101b28 url('assets/starlu-celestial-art.webp') center/cover no-repeat;color:transparent;border-color:#a98a60;box-shadow:0 0 0 3px #c2ac842f}
.unboxing {background:radial-gradient(ellipse at 50% 20%,#1b2937,#090f17 75%);border:1px solid #63533c}
.unboxing .unbox-stage {min-height:355px}
.closed-gift {position:relative;overflow:hidden;background:linear-gradient(125deg,#283746,#0c151f 75%);border:1px solid #a68b64;box-shadow:0 25px 50px #0009,inset 0 0 0 8px #121d29,inset 0 0 0 9px #a78b65}
.closed-gift::before {content:"";position:absolute;inset:17px;border:1px solid #9c815a;opacity:.45;pointer-events:none}
.closed-gift::after {content:"";position:absolute;width:170px;height:170px;border:1px solid #ad91695c;border-radius:50%;pointer-events:none}
.closed-gift .box-star,.closed-gift .box-brand,.closed-gift .box-action {position:relative;z-index:1}
.closed-gift .box-star {font-size:33px;color:#d9bd8e;text-shadow:0 0 14px #d2ac7444}
.closed-gift .box-brand {font-size:23px;color:#e9d3ae;letter-spacing:.2em}
.closed-gift .box-action {font-size:9px;color:#e2c99e;border-bottom:1px solid #b79a6f;padding-bottom:8px}
.opened-gift {width:min(440px,92%);padding:36px 25px 28px}
.opened-gift .cert-brand {margin:0 0 17px}
.opened-gift .cert-divide {margin-bottom:17px}
.opened-gift .cert-divide-bottom {margin:17px auto 0}
.unboxing .opened-gift .cert-name {color:var(--cert-ink);font-size:39px;margin:10px auto 17px}
.unboxing .opened-gift .cert-label {color:var(--cert-secondary)}
.unboxing .opened-gift .unbox-meta {color:var(--cert-secondary)}
.unboxing .opened-gift .unbox-message {color:var(--cert-ink)}
.opened-gift .unbox-star-map {width:min(100%,180px);height:auto;margin:0 auto 19px}
@media(max-width:760px) {
  .certificate {width:min(100%,500px);padding:22px}
  .certificate-inner {padding:38px 23px 31px}
  .certificate-inner .cert-name {font-size:clamp(34px,9vw,45px)}
  .cert-sky {width:min(100%,210px)}
  .modal-preview {padding:18px}
  .preview-cert {padding:30px 22px 25px}
  .preview-cert .cert-sky {width:min(100%,155px);height:auto}
  .preview-cert .cert-name {font-size:32px}
  .finish-selector legend {text-align:center;width:100%}
  .form .finish-option {font-size:10px}
  .unboxing .unbox-stage {min-height:300px}
  .opened-gift {padding:32px 22px 27px}
  .unboxing .opened-gift .cert-name {font-size:33px}
  .opened-gift .unbox-star-map {width:min(100%,155px);height:auto}
}
@media(prefers-reduced-motion:reduce) {
  .closed-gift,.opened-gift {transition:none!important;animation:none!important}
}
/* Override the surrounding section's paragraph styling inside the artwork. */
.personal .certificate-inner .cert-brand {font:500 17px/1 var(--serif);letter-spacing:.31em;color:var(--cert-secondary);margin:0 0 22px}
.personal .certificate-inner .cert-label {font:600 9px/1.5 var(--sans);letter-spacing:.19em;color:var(--cert-secondary);margin:0}
.personal .certificate-inner .cert-name {font:italic 45px/1.06 var(--serif);letter-spacing:-.015em;color:var(--cert-ink);margin:12px auto 22px}
.personal .certificate-inner .cert-meta {font:600 9px/1.6 var(--sans);letter-spacing:.1em;color:var(--cert-secondary);margin:0 auto}
.personal .certificate-inner .cert-message {font:italic 18px/1.3 var(--serif);color:var(--cert-ink);margin:14px auto 0}
.personal .certificate-inner .cert-foot {font-size:8px;letter-spacing:.14em;margin:13px auto 0}
@media(max-width:760px) {.personal .certificate-inner .cert-name {font-size:clamp(34px,9vw,45px)}}