@font-face { font-family: 'Cormorant'; src: url(/fonts/cormorant-garamond-latin-wght-normal.woff2) format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant'; src: url(/fonts/cormorant-garamond-latin-wght-italic.woff2) format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url(/fonts/figtree-latin-wght-normal.woff2) format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;
  --pearl: #fbf6f5; --blush: #f6d3dc; --sage: #cfe3d4; --powder: #cfe1f1; --lilac: #e0d7f1; --peach: #fadfca;
  --ink: #3d2f42; --muted: #6b5c70; --line: rgba(61,47,66,.1);
  --rose: #c4607f; --rose-soft: #f3c4d1; --plum: #4a3652;
  --fill: rgba(61,47,66,.07); --blue: var(--rose); --red: #c8475f; --green: #6aa383; --orange: #d28a4f;
  --glass: rgba(255,255,255,.72); --shadow: 0 1px 1px rgba(74,54,82,.04), 0 10px 30px -8px rgba(120,80,110,.22);
  --serif: 'Cormorant', 'Iowan Old Style', Georgia, serif; --sans: 'Figtree', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --tab: 66px; --sat: env(safe-area-inset-top, 0px); --sab: env(safe-area-inset-bottom, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; min-height: 100%; background: var(--pearl); color: var(--ink); overscroll-behavior-y: none; font: 400 17px/1.4 var(--sans); }
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(90vmax 60vmax at 100% -10%, var(--blush) 0%, transparent 60%), radial-gradient(80vmax 50vmax at -10% 110%, var(--powder) 0%, transparent 60%); opacity: .85; }
button, input, textarea { font: inherit; color: inherit; }
button { border: 0; cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid #d98aa3; outline-offset: 2px; }
[hidden] { display: none !important; }

#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; max-width: 560px; margin: 0 auto; }
main { flex: 1; padding: calc(var(--sat) + 18px) 18px calc(var(--tab) + var(--sab) + 40px); }
h1, h3, .serif { font-family: var(--serif); }
h1 { font-size: clamp(36px, 11vw, 46px); font-weight: 500; letter-spacing: -.01em; margin: 6px 2px 6px; line-height: 1.08; }
.sub { color: var(--muted); font-size: 16px; margin: 0 2px 22px; max-width: 34ch; }
h2 { font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 24px; color: var(--plum); margin: 36px 4px 12px; }

.card { position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 22px; padding: 22px 20px; box-shadow: 0 1px 2px rgba(74,54,82,.03), 0 12px 28px -18px rgba(120,80,110,.25); margin-bottom: 14px; }
.card h3 { margin: 16px 0 4px; font-size: 27px; font-weight: 500; letter-spacing: -.005em; line-height: 1.1; }
.card p { margin: 0 0 14px; color: var(--muted); font-size: 15.5px; }
.card.dim { opacity: .6; }
.head { display: flex; justify-content: space-between; align-items: center; }
.badge { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--plum); background: var(--tint, var(--blush)); }
.badge svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.t0 { --tint: var(--blush); } .t1 { --tint: var(--sage); } .t2 { --tint: var(--powder); } .t3 { --tint: var(--lilac); } .t4 { --tint: var(--peach); }
.pill { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--muted); }
.pill::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.pill.live::before { background: var(--rose); animation: pulse 1.8s ease-in-out infinite; } .pill.upcoming::before { background: var(--green); } .pill.closed::before { background: var(--muted); }
@keyframes pulse { 50% { transform: scale(1.6); opacity: .4; } }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 54px; border-radius: 999px; text-decoration: none;
  background: var(--plum); color: #fff; font-weight: 600; font-size: 16px; letter-spacing: .01em; transition: transform .15s, opacity .15s; }
.btn:active { transform: scale(.97); opacity: .9; }
.btn[disabled] { background: rgba(61,47,66,.08); color: var(--muted); box-shadow: none; }
.btn.ghost { background: rgba(255,255,255,.85); color: var(--plum); box-shadow: inset 0 0 0 1px var(--line); } .btn.danger { background: var(--red); }
.btn.sm { width: auto; min-height: 44px; padding: 0 18px; font-size: 15px; }
.field { width: 100%; min-height: 54px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.9); font-size: 17px; outline: none; margin-bottom: 12px; text-align: inherit; }
.field:focus { border-color: var(--rose); box-shadow: 0 0 0 4px color-mix(in srgb, var(--rose) 20%, transparent); }

/* Barra di navigazione flottante */
nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 0 14px calc(var(--sab) + 12px); pointer-events: none; }
nav .in { pointer-events: auto; max-width: 420px; margin: 0 auto; display: flex; height: var(--tab); padding: 6px; gap: 4px; border-radius: 999px;
  background: rgba(255,255,255,.88); -webkit-backdrop-filter: saturate(160%) blur(20px); backdrop-filter: saturate(160%) blur(20px); border: 1px solid var(--line); box-shadow: 0 10px 30px -12px rgba(90,60,100,.3); }
nav button { flex: 1; background: none; color: var(--muted); border-radius: 999px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-size: 12px; font-weight: 600; transition: background .25s, color .25s; }
nav button svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
nav button.on { background: var(--blush); color: var(--plum); }

/* Benvenuto */
.welcome { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: calc(var(--sat) + 28px) 28px calc(var(--sab) + 28px); text-align: center; max-width: 420px; margin: 0 auto; }
.mono { position: relative; width: min(58vw, 230px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; margin-bottom: 34px; background: rgba(255,255,255,.7); border: 1px solid rgba(196,96,127,.35); }
.mono::after { content: ''; position: absolute; inset: 10px; border-radius: 50%; border: 1px solid rgba(196,96,127,.18); background: radial-gradient(circle at 50% 30%, var(--blush), transparent 70%); opacity: .8; }
.mono span { position: relative; z-index: 1; font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 14vw, 64px); letter-spacing: .02em; color: var(--plum); white-space: nowrap; }
.welcome h1 { font-size: clamp(38px, 12vw, 52px); font-weight: 500; margin: 0 0 12px; line-height: 1; }
.welcome .sub { margin: 0 auto 28px; font-size: 17px; }
.welcome .field { text-align: center; }

/* Votazioni a polaroid */
.deck { position: relative; width: 100%; height: min(66vh, 600px); height: min(66dvh, 600px); margin: 6px 0 20px; touch-action: none; }
.swipe { position: absolute; inset: 0; background: #fff; border-radius: 10px; padding: 14px 14px 0; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 50px -18px rgba(90,50,90,.45), 0 0 0 1px rgba(61,47,66,.05); will-change: transform; user-select: none; -webkit-user-select: none; }
.swipe img { flex: 1; min-height: 0; width: 100%; object-fit: cover; border-radius: 4px; pointer-events: none; -webkit-user-drag: none; background: var(--fill); }
.swipe .cap { padding: 12px 4px 16px; text-align: center; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 22px; line-height: 1.15; color: var(--plum); }
.swipe .cap small { display: block; font-family: var(--sans); font-style: normal; font-weight: 500; font-size: 13px; color: var(--muted); margin-top: 3px; }
.swipe .stamp { position: absolute; top: 30px; font-family: var(--serif); font-size: 24px; font-weight: 700; padding: 6px 16px; border-radius: 999px; opacity: 0; background: #fff; box-shadow: 0 8px 20px -6px rgba(0,0,0,.3); }
.stamp.yes { left: 24px; color: var(--rose); transform: rotate(-10deg); } .stamp.no { right: 24px; color: var(--muted); transform: rotate(10deg); }
.swipe.back { transform: scale(.95) translateY(14px) rotate(2deg); }
.actions { display: flex; justify-content: center; gap: 30px; }
.round { width: 70px; height: 70px; border-radius: 50%; background: #fff; box-shadow: var(--shadow); display: grid; place-items: center; transition: transform .15s; }
.round svg { width: 30px; height: 30px; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.round.no svg { stroke: var(--muted); } .round.yes { background: var(--rose-soft); } .round.yes svg { fill: var(--rose); stroke: var(--rose); }
.round:active { transform: scale(.9); }
.empty { text-align: center; color: var(--muted); padding: 56px 24px; } .empty .big { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%; background: var(--blush); display: grid; place-items: center; color: var(--plum); }
.empty .big svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* Classifica */
.row { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.row + .row { border-top: 1px solid var(--line); }
.row img { width: 54px; height: 54px; border-radius: 14px; object-fit: cover; flex: none; background: var(--fill); border: 2px solid #fff; box-shadow: 0 3px 8px -3px rgba(0,0,0,.25); }
.row .nm { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .v { color: var(--muted); font-size: 14px; font-weight: 600; white-space: nowrap; }
.medal { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--plum); background: var(--tint, var(--blush)); }
.row:nth-child(2) .medal { --tint: var(--powder); } .row:nth-child(3) .medal { --tint: var(--sage); }
.award { font-family: var(--serif); font-weight: 500; font-size: 24px; line-height: 1.1; margin-bottom: 8px; }

/* Mie foto */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.grid .it { position: relative; aspect-ratio: 1; border-radius: 6px; padding: 5px 5px 18px; background: #fff; box-shadow: var(--shadow); }
.grid .it:nth-child(odd) { transform: rotate(-1.5deg); } .grid .it:nth-child(even) { transform: rotate(1.5deg); }
.grid img { width: 100%; height: 100%; object-fit: cover; border-radius: 3px; display: block; }
.grid .it span { position: absolute; left: 0; right: 0; bottom: 1px; text-align: center; color: var(--plum); font-size: 12px; font-weight: 600; }
.grid .it button::after { content: ''; position: absolute; inset: -9px; }
.grid .it button { position: absolute; top: -6px; right: -6px; width: 28px; height: 28px; border-radius: 50%; background: var(--plum); color: #fff; font-size: 12px; box-shadow: 0 4px 8px -2px rgba(0,0,0,.4); }

.toast { position: fixed; left: 50%; bottom: calc(var(--tab) + var(--sab) + 36px); transform: translate(-50%, 20px); opacity: 0; z-index: 50;
  background: var(--plum); color: #fff; padding: 12px 22px; border-radius: 999px; font-size: 15px; font-weight: 600; max-width: 88vw; text-align: center; transition: .25s; pointer-events: none; box-shadow: 0 12px 30px -8px rgba(74,54,82,.6); }
.toast.on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 340px) { main { padding-left: 12px; padding-right: 12px; } .round { width: 60px; height: 60px; } nav button { font-size: 11px; } }
@media (max-height: 700px) { .deck { height: 46vh; height: 46dvh; } .sub { margin-bottom: 12px; }
  .mono { width: 42vw; margin-bottom: 18px; } }
@media (max-height: 0px) { .deck { height: 54dvh; } .mono { width: 42vw; margin-bottom: 18px; } }
@media (min-width: 700px) { main { padding-top: 40px; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* Home */
.welcome.home { justify-content: center; }
.mono.sm { width: min(40vw, 150px); margin-bottom: 22px; } .mono.sm span { font-size: clamp(40px, 12vw, 56px); }
.greet { font-family: var(--serif); font-style: italic; font-size: 22px; color: var(--rose); margin: 0 0 6px; }
.welcome.home h1 { font-size: clamp(34px, 10.5vw, 46px); max-width: 11ch; margin: 0 auto 30px; }
.stack { width: 100%; display: grid; gap: 12px; }
.tile { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px 18px; min-height: 76px; border-radius: 22px; background: #fff; border: 1px solid var(--line);
  box-shadow: 0 1px 2px rgba(74,54,82,.03), 0 12px 28px -18px rgba(120,80,110,.3); color: var(--ink); transition: transform .2s ease, box-shadow .2s ease; }
.tile:active { transform: scale(.98); }
.tile .ti { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--blush); color: var(--plum); flex: none; }
.tile .tx { flex: 1; min-width: 0; } .tile b { display: block; font-family: var(--serif); font-size: 24px; font-weight: 500; line-height: 1.1; } .tile small { color: var(--muted); font-size: 14px; }
.tile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.tile .ti svg { width: 24px; height: 24px; }
.tile.main { background: var(--plum); color: #fff; border-color: transparent; } .tile.main small { color: rgba(255,255,255,.78); } .tile.main .ti { background: rgba(255,255,255,.16); color: #fff; }
.switch-user { margin-top: 22px; padding: 12px; color: var(--muted); font-size: 15px; }
.back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px 0 8px; margin-left: -8px; background: none; color: var(--plum); font-weight: 600; font-size: 16px; }
.back svg { width: 20px; height: 20px; transform: rotate(180deg); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.rise { animation: rise .7s cubic-bezier(.2,.7,.2,1) both; animation-delay: var(--d, 0ms); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }

.link { display: block; width: 100%; margin-top: 4px; min-height: 44px; background: none; color: var(--muted); font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.row .win { font-style: normal; font-size: 12px; font-weight: 700; color: var(--plum); background: var(--blush); padding: 2px 9px; border-radius: 999px; margin-left: 8px; }

/* Album */
.agrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; border-radius: 16px; overflow: hidden; }
.atile { position: relative; aspect-ratio: 1; padding: 0; background: var(--fill); display: block; }
.atile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.atile .lk { position: absolute; left: 6px; bottom: 6px; font-size: 12px; font-weight: 700; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.sentinel { height: 1px; }

/* Lightbox */
.lb { position: fixed; inset: 0; z-index: 60; background: #fff; display: flex; flex-direction: column; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; } }
.lb-x { position: absolute; top: calc(var(--sat) + 10px); right: 10px; z-index: 2; width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.9); color: var(--plum); font-size: 28px; line-height: 1; box-shadow: 0 4px 14px rgba(0,0,0,.18); }
.lb-img { flex: 0 1 62%; min-height: 0; background: #f3ecee; display: grid; place-items: center; }
.lb-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lb-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 14px 18px calc(var(--sab) + 12px); max-width: 560px; width: 100%; margin: 0 auto; }
.lb-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; }
.lb-meta b { font-family: var(--serif); font-size: 22px; font-weight: 500; display: block; line-height: 1.1; } .lb-meta small { color: var(--muted); font-size: 13px; }
.lb-act { display: flex; gap: 8px; flex: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--fill); color: var(--plum); font-weight: 600; font-size: 15px; text-decoration: none; }
.chip svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chip.like.on { background: var(--blush); } .chip.like.on svg { fill: var(--rose); stroke: var(--rose); }
.cm-list { flex: 1; min-height: 40px; overflow-y: auto; padding: 4px 0; } .cm { margin: 0 0 8px; font-size: 15px; } .cm b { font-weight: 600; }
.cm-form { display: flex; gap: 8px; align-items: center; } .cm-form .field { margin: 0; min-height: 46px; flex: 1; }

/* Tasto foto libera e foglio azioni */
.fab { position: fixed; right: 18px; bottom: calc(var(--tab) + var(--sab) + 30px); z-index: 19; width: 58px; height: 58px; border-radius: 50%; background: var(--plum); color: #fff; display: grid; place-items: center; box-shadow: 0 14px 28px -10px rgba(74,54,82,.7); transition: transform .15s; }
.fab:active { transform: scale(.92); } .fab svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.sheet-bg { position: fixed; inset: 0; z-index: 70; background: rgba(40,25,45,.35); animation: fade .2s ease; }
.sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 71; max-width: 560px; margin: 0 auto; background: #fff; border-radius: 26px 26px 0 0; padding: 22px 20px calc(var(--sab) + 16px); animation: up .3s cubic-bezier(.2,.7,.2,1); }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet h3 { margin: 0 0 4px; font-size: 28px; font-weight: 500; } .sheet p { color: var(--muted); margin: 0 0 16px; font-size: 15px; }
.area { border-radius: 22px; padding: 16px 18px; min-height: 140px; resize: none; line-height: 1.4; display: block; }
.chip svg, .tile svg { flex: none; }

/* Conferma di partecipazione */
.welcome.rsvp { justify-content: flex-start; padding-top: calc(var(--sat) + 36px); }
.welcome.rsvp h1 { font-size: clamp(32px, 9.5vw, 42px); max-width: 12ch; }
.form { width: 100%; text-align: left; } .form .field { text-align: left; }
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 2px 0 12px; }
.choice { min-height: 58px; padding: 8px 12px; border-radius: 20px; background: rgba(255,255,255,.9); border: 1px solid var(--line); color: var(--plum); font-weight: 600; font-size: 16px; line-height: 1.2; transition: background .2s, border-color .2s, color .2s; }
.choice.on { background: var(--plum); border-color: transparent; color: #fff; }
.extra { display: grid; gap: 0; } .extra[hidden] { display: none; }
.stepper { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 4px 4px 14px; font-size: 15px; color: var(--plum); }
.stepper > div { display: flex; align-items: center; gap: 4px; flex: none; }
.stepper button { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.95); border: 1px solid var(--line); color: var(--plum); font-size: 24px; line-height: 1; }
.stepper .count { min-width: 34px; text-align: center; font-family: var(--serif); font-size: 28px; }
.links { display: flex; flex-direction: column; align-items: center; margin-top: 14px; } .links .switch-user { margin-top: 0; padding: 10px; }
* { font-variant-numeric: lining-nums; }
.stepper .count { font-family: var(--sans); font-weight: 600; font-size: 22px; }

/* Figli nel modulo di conferma */
.kids { margin: 0 0 10px; } .kids .q { margin: 4px 4px 8px; font-size: 15px; color: var(--plum); font-weight: 600; }
.qty { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 12px; } .qty .choice { min-height: 52px; font-size: 20px; }
.age { display: flex; align-items: center; gap: 12px; margin: 0 0 8px; } .age span { flex: none; width: 92px; font-size: 14px; color: var(--muted); } .age .field { margin: 0; min-height: 50px; }
select.field { appearance: none; -webkit-appearance: none; background: rgba(255,255,255,.9) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' fill='none' stroke='%236b5c70' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 18px center; padding-right: 44px; }
.field.invalid { border-color: var(--red); box-shadow: 0 0 0 3px color-mix(in srgb, var(--red) 18%, transparent); }

/* Caricatura degli sposi (al posto del logo) */
.art { position: relative; width: min(74vw, 300px, 38dvh); aspect-ratio: 640 / 738; margin: 0 auto 18px; }
.art::before { content: ''; position: absolute; inset: 4% -8% 0; z-index: 0; border-radius: 50%; background: radial-gradient(closest-side, rgba(246,211,220,.95), rgba(246,211,220,.45) 62%, transparent 100%); filter: blur(2px); }
.art img { position: relative; z-index: 1; display: block; width: 100%; height: 100%; object-fit: contain;
  -webkit-mask-image: linear-gradient(#000 84%, transparent 100%); mask-image: linear-gradient(#000 84%, transparent 100%); }
.art.sm { width: min(46vw, 190px, 26dvh); margin-bottom: 10px; }
@media (max-height: 640px) { .art { width: min(56vw, 30dvh); } .art.sm { width: min(36vw, 22dvh); } }

/* Regalo di nozze */
.gift-row { padding: 12px 0; } .gift-row + .gift-row { border-top: 1px solid var(--line); } .gift-row small { display: block; color: var(--muted); font-size: 13px; margin-bottom: 4px; }
.gift-val { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .gift-val span { font-weight: 600; font-size: 17px; word-break: break-word; min-width: 0; }
.gift-row:nth-child(2) .gift-val span { font-size: clamp(17px, 5vw, 20px); letter-spacing: .04em; font-variant-numeric: tabular-nums; }