/* The card page: one entry at a public link. Photos above, the words on a terracotta plate,
   the hour and the place, made with {{BRAND}}. Served at /c/:token and drawn in place by the demo. */
.cardpage{max-width:520px;margin:0 auto;padding:calc(22px + env(safe-area-inset-top)) 20px 60px;color:#000;font-family:Inter,-apple-system,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.45}
.cardpage .cbrand{font-family:"Inter Tight",Inter,sans-serif;font-weight:600;font-size:21px;letter-spacing:-.035em;display:flex;align-items:center;gap:8px;margin:0 0 22px}
.cardpage .st{display:inline-block;width:12px;height:12px;border-radius:50%;background:#e2553b}
.cardpage h1{font-family:"Inter Tight",Inter,sans-serif;font-weight:600;font-size:36px;letter-spacing:-.035em;line-height:1.04;margin:0 0 14px}
.cardpage .lede{font-size:18px;line-height:1.4;margin:0 0 24px}
.cardpage .cphotos{display:grid;gap:8px}
.cardpage .cphotos img,.cardpage .cphotos video{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:22px;background:#151515;display:block}
.cardpage .cphotos.two{grid-template-columns:1fr 1fr}
.cardpage .cphotos.two img,.cardpage .cphotos.two video{aspect-ratio:3/4}
.cardpage .cphotos.many{grid-template-columns:1fr 1fr}
.cardpage .cphotos.many>:first-child{grid-column:1/-1}
.cardpage .cphotos.many>:not(:first-child){aspect-ratio:1}
.cardpage .plate{background:#e2553b;color:#fff;border-radius:24px;padding:24px 22px 22px;margin-top:10px}
.cardpage .cwords{font-family:"Inter Tight",Inter,sans-serif;font-weight:500;font-size:25px;line-height:1.28;letter-spacing:-.02em;margin:0;white-space:pre-wrap;word-break:break-word}
.cardpage .cmeta{margin:20px 0 0;font-size:15px;font-weight:500;line-height:1.35}
.cardpage .cmeta b{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.cardpage .cmeta .pl{white-space:nowrap}
.cardpage .cwords+.cmeta{margin-top:20px}
.cardpage .pin{display:inline-block;width:9px;height:9px;border-radius:50% 50% 50% 0;background:#fff;transform:rotate(-45deg);margin:0 8px 0 2px;vertical-align:middle;position:relative;top:-1px}
.cardpage .aplay{position:relative;overflow:hidden;display:flex;align-items:center;gap:12px;width:100%;min-height:52px;margin-top:18px;padding:12px 18px 12px 16px;border:1.5px solid #fff;border-radius:999px;font:inherit;font-size:15px;font-weight:600;color:#fff;background:transparent;cursor:pointer;--p:0}
.cardpage .aplay .fill{position:absolute;left:0;top:0;bottom:0;width:calc(var(--p)*100%);background:rgba(255,255,255,.28);transition:width .25s linear}
.cardpage .aplay .ico{position:relative;width:0;height:0;border-left:11px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.cardpage .aplay.on .ico{width:9px;height:14px;border:0;border-left:3px solid #fff;border-right:3px solid #fff}
.cardpage .aplay .lbl{position:relative}
.cardpage .cfoot{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:28px;font-size:15px;font-weight:500}
.cardpage .cfoot a{color:#000}
.cardpage .btn{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:8px 14px;border:1.5px solid #000;border-radius:999px;background:#fff;color:#000;font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.cardpage .btn.black{background:#000;color:#fff}
.cardpage .cvoice{margin:14px 0 0;font-size:16px;line-height:1.45;font-style:italic;white-space:pre-wrap}