:root {
color-scheme: light;
--bg: #faf8f5;
--paper: #fffdf9;
--deep: #f3efe8;
--ink: #1c1a17;
--body: #2b2722;
--soft: #4a443c;
--muted: #6f6a62;
--gold: #b17e31;
--gold-label: #8c6326;
--gold-fill: #e1c08e;
--gold-fill-hover: #d2b57c;
--line: #e8e2d8;
--hair: #ddd4c5;
--night: #16100b;
--night-2: #21170f;
--cream: #f8f1e5;
--cream-soft: #cdbfab;
--serif: "Noto Serif Hebrew", "David Libre", Georgia, serif;
--sans: "Assistant", "Heebo", system-ui, sans-serif;
--col: 680px;
--wide: 980px;
--gut: 20px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 52px; }
body {
margin: 0; background: var(--bg); color: var(--ink);
font-family: var(--sans); font-size: 17.5px; line-height: 1.7;
overflow-x: clip;
}
img, canvas { display: block; max-width: 100%; }
a { color: inherit; }
p, figure, ul, ol, h2, h3 { margin: 0; }
.ltr { direction: ltr; unicode-bidi: isolate; }
.nw { white-space: nowrap; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.disclose {
position: sticky; top: 0; z-index: 30;
display: flex; align-items: center; justify-content: center; gap: 10px;
height: 40px; padding: 0 var(--gut);
background: rgb(250 248 245 / 0.97);
-webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-bottom: 1px solid var(--hair);
font-size: 14px; font-weight: 600; letter-spacing: 0.04em; color: var(--ink);
}
.disclose .dia { width: 5px; height: 5px; background: var(--gold); rotate: 45deg; flex: none; }
.disclose .bar {
position: absolute; inset-inline: 0; bottom: -1px; height: 2px;
background: var(--gold-fill); transform-origin: right center; transform: scaleX(0);
}
.orn { display: flex; align-items: center; gap: 10px; height: 10px; margin: 0 0 8px; color: var(--gold); }
.orn::before { content: ""; width: 6px; height: 6px; background: currentColor; rotate: 45deg; flex: none; }
.orn::after { content: ""; width: 30px; height: 1px; background: currentColor; opacity: 0.55; }
h2 {
font-family: var(--serif); font-weight: 300;
font-size: clamp(27px, 8.4vw, 42px); line-height: 1.2; color: var(--ink);
text-wrap: balance;
}
.sec { max-width: var(--col); margin: 0 auto; padding: 40px var(--gut) 0; }
.cap {
margin: 12px auto 0; max-width: 34em; text-align: center;
font-size: 13.5px; line-height: 1.5; color: #5d574f; text-wrap: balance;
}
.ill {
display: inline-block; padding: 0 9px; border: 1px solid rgb(140 99 38 / 0.42); border-radius: 99px;
font-size: 12.5px; line-height: 20px; letter-spacing: 0.04em; color: var(--gold-label);
}
.cover {
position: relative; overflow: hidden; isolation: isolate;
padding: 20px var(--gut) 0; text-align: center; color: var(--cream);
background:
radial-gradient(85% 34% at 50% 58%, rgb(196 128 52 / 0.30), rgb(196 128 52 / 0) 72%),
radial-gradient(60% 24% at 50% 0%, rgb(120 80 40 / 0.28), transparent 70%),
linear-gradient(180deg, #120d09 0%, var(--night) 40%, var(--night-2) 100%);
}
.cover::before {
content: ""; position: absolute; inset: -10%; z-index: -1; pointer-events: none;
background:
radial-gradient(circle at 9% 40%, rgb(255 196 122 / 0.20) 0 16px, transparent 17px),
radial-gradient(circle at 92% 33%, rgb(255 196 122 / 0.16) 0 22px, transparent 23px),
radial-gradient(circle at 86% 62%, rgb(255 196 122 / 0.12) 0 12px, transparent 13px),
radial-gradient(circle at 12% 66%, rgb(255 196 122 / 0.12) 0 26px, transparent 27px),
radial-gradient(circle at 22% 16%, rgb(255 196 122 / 0.08) 0 10px, transparent 11px),
radial-gradient(circle at 76% 13%, rgb(255 196 122 / 0.08) 0 14px, transparent 15px);
filter: blur(7px);
}
.kick {
display: inline-flex; align-items: center; gap: 12px; margin: 0 0 10px;
font-family: var(--serif); font-weight: 400; font-size: 15px; letter-spacing: 0.1em; color: var(--gold-fill);
}
.kick::before, .kick::after { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.55; }
.cover h1 {
margin: 0 auto; max-width: 10em;
font-family: var(--serif); font-weight: 200;
font-size: clamp(40px, 11.4vw, 84px); line-height: 1.1; letter-spacing: -0.005em;
color: #fbf6ec; text-wrap: balance;
}
.by {
display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 12px;
margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--cream-soft);
}
.by b { font-family: var(--serif); font-weight: 400; font-size: 15px; color: var(--cream); }
.by .sep { width: 4px; height: 4px; background: rgb(225 192 142 / 0.7); rotate: 45deg; }
.stage {
--pw: min(48vw, 236px); --p: 0;
position: relative; margin: 12px auto 0;
height: calc(var(--pw) * 19 / 9 + 30px);
}
.set {
position: absolute; top: 12px; left: 50%; translate: -50% 0;
width: calc(var(--pw) * 1.76); height: calc(var(--pw) * 19 / 9);
}
.set::after {
content: ""; position: absolute; left: -8%; right: -10%; bottom: -24px; height: 50px; z-index: 0;
background: radial-gradient(closest-side, rgb(0 0 0 / 0.6), rgb(0 0 0 / 0));
}
.set::before {
content: ""; position: absolute; z-index: 0; left: -14%; width: calc(var(--pw) * 1.3); bottom: -32px; height: 70px;
background: radial-gradient(closest-side, rgb(242 172 86 / 0.42), rgb(242 172 86 / 0));
opacity: var(--p);
}
.glow {
position: absolute; z-index: 1; left: calc(var(--pw) * -0.35); top: 0;
width: calc(var(--pw) * 1.7); height: 100%; pointer-events: none;
background: radial-gradient(closest-side, rgb(242 172 86 / 0.55), rgb(242 172 86 / 0) 100%);
opacity: calc(0.28 + var(--p) * 0.72); filter: blur(6px);
}
.phone {
--r: calc(var(--pw) * 0.147);
position: relative; width: var(--pw); aspect-ratio: 9 / 19;
border-radius: var(--r); padding: calc(var(--pw) * 0.036);
background: linear-gradient(180deg, #2a2724 0%, #141210 18%, #0b0a09 50%, #141210 82%, #26221e 100%);
box-shadow:
0 0 0 1px rgb(255 226 180 / 0.16) inset,
0 0 0 2.5px rgb(0 0 0 / 0.55) inset,
0 1px 0 0 rgb(255 240 210 / 0.18) inset,
0 2px 4px -2px rgb(0 0 0 / 0.8),
0 30px 60px -30px rgb(0 0 0 / 0.9);
}
.phone::after {
content: ""; position: absolute; top: 3.3%; left: 50%; translate: -50% 0; z-index: 3;
width: 31%; aspect-ratio: 3.9; border-radius: 99px; pointer-events: none;
background: radial-gradient(circle at 78% 50%, #1c2530 0 16%, rgb(0 0 0 / 0) 17%), #08080a;
}
.screen {
position: relative; width: 100%; height: 100%; overflow: hidden;
border-radius: calc(var(--r) - var(--pw) * 0.036); background: #08080a;
container-type: inline-size;
}
.screen > img, .screen > canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.screen > canvas { opacity: 0; transition: opacity 0.25s; }
.screen > canvas.on { opacity: 1; }
.grade {
position: absolute; inset: 0; opacity: 0; transition: opacity 0.6s;
background:
radial-gradient(96% 40% at 50% 46%, rgb(26 16 8 / 0.62) 0%, rgb(26 16 8 / 0.26) 62%, transparent 100%),
linear-gradient(180deg, rgb(26 16 8 / 0.3), rgb(26 16 8 / 0) 30%, rgb(26 16 8 / 0) 62%, rgb(26 16 8 / 0.7));
}
.inv {
position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
text-align: center; color: #fffdf9; padding-bottom: 8cqw; line-height: 1.4;
opacity: 0; translate: 0 3cqw; transition: opacity 0.6s, translate 0.6s;
}
.inv .lab { font-size: 4.6cqw; letter-spacing: 0.14em; color: #f0d3a0; margin-bottom: 3cqw; }
.inv .nm { font-family: var(--serif); font-weight: 300; font-size: 16cqw; line-height: 1.08; }
.inv .amp { font-family: var(--serif); font-weight: 300; font-size: 8.5cqw; line-height: 1.2; color: #f0d3a0; }
.inv .dt { margin-top: 4cqw; font-size: 5cqw; letter-spacing: 0.12em; }
.inv .rsvp {
position: absolute; bottom: 9cqw; left: 50%; translate: -50% 0; white-space: nowrap;
padding: 2.6cqw 6.5cqw; border-radius: 2.6cqw; background: rgb(255 255 255 / 0.93); color: var(--ink);
font-size: 4.6cqw; letter-spacing: 0.04em; line-height: 1.4;
}
.stage.open .grade, .stage.open .inv { opacity: 1; translate: 0 0; }
.hint {
position: absolute; bottom: 20cqw; left: 50%; translate: -50% 0; white-space: nowrap;
padding: 3px 12px; border-radius: 99px; background: rgb(0 0 0 / 0.55);
color: #fff7ea; font-size: max(12px, 5.2cqw); letter-spacing: 0.04em; line-height: 1.5;
transition: opacity 0.4s;
}
.hint i { display: inline-block; font-style: normal; margin-inline-start: 4px; animation: nudge 1.6s ease-in-out 3; }
.stage.moved .hint { opacity: 0; }
.stage.moved .hint i { animation: none; }
@keyframes nudge { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }
.set .phone { position: absolute; left: 0; top: 0; rotate: -2.5deg; z-index: 3; }
.card {
position: absolute; right: 0; top: 13%; z-index: 2;
width: calc(var(--pw) * 0.92); aspect-ratio: 2 / 3; rotate: 6deg;
background: #fbf6ec; container-type: inline-size;
translate: calc(var(--p) * 5px) calc(var(--p) * 6px);
filter: brightness(calc(1 - var(--p) * 0.12));
box-shadow: 0 1px 1px rgb(0 0 0 / 0.25), 0 18px 30px -14px rgb(0 0 0 / 0.75);
}
.card .stk {
position: absolute; inset: 0; z-index: -1; background: #efe7d8;
box-shadow: 0 1px 1px rgb(0 0 0 / 0.2), 0 14px 22px -12px rgb(0 0 0 / 0.6);
}
.card .stk.a { rotate: -5deg; translate: 3% 2%; }
.card .stk.b { rotate: 5deg; translate: -1% 4%; background: #e6dccb; }
.card .face {
position: absolute; inset: 0; background: #fbf6ec;
display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
padding: 10cqw 8cqw; color: var(--ink); line-height: 1.4;
}
.card .face::before { content: ""; position: absolute; inset: 5.5cqw; border: 1px solid rgb(177 126 49 / 0.55); pointer-events: none; }
.card .lab { font-size: 4.6cqw; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 4cqw; }
.card .nm { font-family: var(--serif); font-weight: 300; font-size: 15cqw; line-height: 1.08; }
.card .amp { font-family: var(--serif); font-weight: 300; font-size: 8cqw; line-height: 1.2; color: var(--gold); }
.card .rule { display: flex; align-items: center; gap: 3cqw; width: 62%; margin: 5cqw 0 4cqw; }
.card .rule::before, .card .rule::after { content: ""; flex: 1; height: 1px; background: rgb(177 126 49 / 0.55); }
.card .rule i { width: 2.6cqw; height: 2.6cqw; background: var(--gold); rotate: 45deg; }
.card .dt { font-size: 5.2cqw; letter-spacing: 0.12em; color: var(--soft); }
.card .ln { width: 60%; height: 1.1cqw; border-radius: 2px; background: #e3d9c7; margin-top: 3.2cqw; }
.card .ln + .ln { width: 46%; }
.card .ln + .ln + .ln { width: 54%; }
.hero figcaption { max-width: 30em; margin: 6px auto 0; font-size: 13.5px; line-height: 1.55; color: var(--cream-soft); text-wrap: balance; }
.soft {
display: inline-block; line-height: 44px; margin-top: 2px; padding: 0 6px;
font-family: var(--serif); font-size: 17px; color: var(--gold-fill);
text-decoration: underline; text-decoration-color: rgb(225 192 142 / 0.45); text-underline-offset: 6px;
}
.soft:hover { text-decoration-color: currentColor; }
.soft:focus-visible { outline: 2px solid var(--gold-fill); outline-offset: 2px; border-radius: 4px; }
.offer { max-width: 22em; margin: 4px auto 0; font-size: 15px; line-height: 1.55; color: var(--cream-soft); text-align: center; text-wrap: balance; }
.lede {
margin: 14px calc(-1 * var(--gut)) 0; padding: 24px var(--gut) 0; background: var(--bg);
font-family: var(--serif); font-weight: 300; font-size: 21px; line-height: 1.5; color: var(--ink);
}
.lede span { display: block; max-width: 19em; margin: 0 auto; text-wrap: balance; }
.stat { display: flex; align-items: center; gap: 14px; margin-top: 4px; }
.stat .num {
flex: none; font-family: var(--serif); font-weight: 200; font-size: 76px; line-height: 0.95;
color: var(--gold); letter-spacing: -0.03em;
}
.stat .num small { font-size: 0.5em; font-weight: 300; letter-spacing: 0; margin-inline-start: 2px; vertical-align: 0.62em; }
.stat .t { font-size: 15px; line-height: 1.5; color: var(--soft); text-wrap: balance; }
.chat-fig { margin: 20px 0 0; }
.chat {
position: relative; width: 100%; max-width: 360px; height: 400px; margin: 0 auto;
border-radius: 24px; overflow: hidden; background: #ede7dd;
box-shadow: 0 0 0 1px rgb(28 26 23 / 0.08), 0 34px 56px -34px rgb(60 40 20 / 0.6);
color: var(--ink); line-height: 1.35;
}
.ch-top {
position: absolute; inset: 0 0 auto; z-index: 4; height: 56px;
background: #fbf8f3; border-bottom: 1px solid #e6dfd3;
}
.ch-head, .ch-url { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 12px; transition: opacity 0.35s; }
.ch-url { justify-content: center; opacity: 0; }
.ch-back { width: 10px; height: 10px; border-top: 1.8px solid var(--soft); border-right: 1.8px solid var(--soft); rotate: 45deg; flex: none; margin-inline: 4px 2px; }
.ch-av {
width: 36px; height: 36px; border-radius: 50%; flex: none;
display: grid; place-items: center;
background: linear-gradient(160deg, #3a2c1e, #15110c); color: #f0d3a0;
font-family: var(--serif); font-size: 13.5px;
}
.ch-who { font-family: var(--serif); font-size: 16.5px; color: var(--ink); }
.ch-top .ill { position: absolute; inset-inline-end: 12px; top: 17px; background: #fbf8f3; }
.ch-x {
position: absolute; inset-inline-start: 18px; width: 13px; height: 13px;
background:
linear-gradient(45deg, transparent 44%, var(--soft) 44% 56%, transparent 56%),
linear-gradient(-45deg, transparent 44%, var(--soft) 44% 56%, transparent 56%);
}
.ch-addr {
display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 14px; border-radius: 10px;
background: #eee8df; font-size: 14px; color: var(--body);
}
.ch-addr::before {
content: ""; flex: none; width: 9px; height: 11px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 11'%3E%3Cpath d='M2.2 5V3.5a2.3 2.3 0 0 1 4.6 0V5' fill='none' stroke='%236f6a62' stroke-width='1.3'/%3E%3Crect y='4.6' width='9' height='6.4' rx='1.4' fill='%236f6a62'/%3E%3C/svg%3E") center / contain no-repeat;
}
.chat.s2 .ch-head { opacity: 0; }
.chat.s2 .ch-url { opacity: 1; }
.ch-wall {
position: absolute; inset: 56px 0 52px;
background-color: #ede7dd;
background-image: radial-gradient(circle, rgb(120 100 70 / 0.08) 1.2px, transparent 1.6px);
background-size: 18px 18px;
padding: 12px 12px 0;
}
.ch-day {
display: block; width: fit-content; margin: 0 auto 10px; padding: 1px 10px;
border-radius: 8px; background: rgb(255 253 249 / 0.92); font-size: 12.5px; color: var(--muted);
}
.ch-msg {
position: relative; width: 82%; padding: 4px;
border-radius: 13px; border-start-start-radius: 3px; background: var(--paper);
box-shadow: 0 1px 1px rgb(60 40 20 / 0.14);
}
.ch-pic {
position: relative; aspect-ratio: 16 / 10; border-radius: 9px; overflow: hidden;
background: radial-gradient(70% 60% at 50% 55%, #8a7a5e, #2c2a1c);
}
.ch-pic canvas, .ch-inv canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.ch-pic::after {
content: ""; position: absolute; inset: 0;
background: radial-gradient(70% 66% at 50% 52%, rgb(22 14 7 / 0.62), rgb(22 14 7 / 0.22) 80%);
}
.ch-nm {
position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
color: #fffdf9; text-align: center; line-height: 1.2;
}
.ch-nm small { font-size: 11.5px; letter-spacing: 0.12em; color: #f0d3a0; }
.ch-nm b { margin: 2px 0; font-family: var(--serif); font-weight: 300; font-size: 25px; line-height: 1.15; }
.ch-nm b i { font-style: normal; color: #f0d3a0; font-size: 18px; margin: 0 5px; }
.ch-nm span { font-size: 11.5px; letter-spacing: 0.12em; }
.ch-prev { margin: 4px 0 0; padding: 6px 9px; border-radius: 7px; background: #f4f0ea; }
.ch-prev b { display: block; font-family: var(--serif); font-weight: 400; font-size: 14.5px; }
.ch-prev span { display: block; font-size: 12.5px; color: var(--muted); }
.ch-link { display: block; padding: 5px 6px 3px; font-size: 14px; color: var(--gold-label); text-decoration: underline; text-decoration-color: rgb(140 99 38 / 0.4); text-underline-offset: 3px; text-align: right; }
.ch-bar {
position: absolute; inset: auto 0 0; height: 52px; z-index: 1;
display: flex; align-items: center; gap: 8px; padding: 0 10px;
background: #fbf8f3; border-top: 1px solid #e6dfd3;
}
.ch-in { flex: 1; height: 34px; border-radius: 17px; background: var(--paper); border: 1px solid #e6dfd3; padding: 0 14px; font-size: 14px; line-height: 32px; color: var(--muted); }
.ch-mic { width: 34px; height: 34px; display: grid; place-items: center; flex: none; }
.ch-mic svg { width: 22px; height: 22px; fill: none; stroke: var(--muted); stroke-width: 1.6; stroke-linecap: round; }
.ch-inv {
position: absolute; inset: 56px 0 0; z-index: 2; overflow: hidden;
background: radial-gradient(70% 60% at 50% 50%, #8a7a5e, #2c2a1c);
translate: 0 101%; transition: translate 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
container-type: inline-size;
}
.chat.s2 .ch-inv { translate: 0 0; }
.ch-sb { position: absolute; z-index: 1; top: 12px; bottom: 12px; inset-inline-end: 5px; width: 3px; border-radius: 3px; background: rgb(255 255 255 / 0.18); }
.ch-sb::after { content: ""; position: absolute; inset-inline: 0; top: 0; height: 26%; border-radius: 3px; background: rgb(255 255 255 / 0.75); translate: 0 calc(var(--sp, 0) * 285%); }
.ch-inv .grade { opacity: 0.55; background: radial-gradient(90% 46% at 50% 44%, rgb(22 14 7 / 0.66), rgb(22 14 7 / 0.2) 70%, transparent), linear-gradient(180deg, rgb(22 14 7 / 0) 55%, rgb(22 14 7 / 0.6)); }
.ch-inv .inv { padding-bottom: 16cqw; }
.ch-inv .inv .lab { font-size: 4cqw; }
.ch-inv .inv .nm { font-size: 13cqw; }
.ch-inv .inv .amp { font-size: 7cqw; }
.ch-inv .inv .dt { font-size: 4cqw; }
.chat.s3 .ch-inv .grade { opacity: 1; }
.chat.s3 .ch-inv .inv { opacity: 1; translate: 0 0; }
.chat.s5 .ch-inv .inv { opacity: 0; }
.ch-rsvp {
position: absolute; bottom: 7cqw; left: 50%; translate: -50% 0; z-index: 1;
display: flex; align-items: center; gap: 8px; padding: 9px 22px; border-radius: 10px;
background: rgb(255 253 249 / 0.95); color: var(--ink);
font-size: 15px; line-height: 1.3; white-space: nowrap;
opacity: 0; transition: background 0.3s, opacity 0.4s;
}
.chat.s3 .ch-rsvp { opacity: 1; }
.ch-rsvp::before { content: ""; width: 9px; height: 5px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; rotate: -45deg; translate: 0 -2px; }
.chat.s4 .ch-rsvp { background: var(--gold-fill); color: #221a0e; }
.ch-veil { position: absolute; inset: 0; z-index: 2; background: rgb(12 8 4 / 0.42); opacity: 0; transition: opacity 0.4s; }
.ch-sheet {
position: absolute; inset: auto 0 0; z-index: 3;
display: grid; gap: 9px; padding: 15px 16px 16px;
border-radius: 18px 18px 0 0; background: var(--paper); color: var(--ink);
box-shadow: 0 -12px 30px -14px rgb(0 0 0 / 0.5);
translate: 0 101%; transition: translate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.chat.s5 .ch-veil { opacity: 1; }
.chat.s5 .ch-sheet { translate: 0 0; }
.sh-t { font-family: var(--serif); font-weight: 300; font-size: 19px; line-height: 1.3; text-align: center; }
.sh-chips { display: flex; justify-content: center; gap: 6px; }
.sh-chips span { padding: 3px 10px; border: 1px solid var(--hair); border-radius: 99px; font-size: 13px; line-height: 1.5; color: var(--soft); white-space: nowrap; }
.sh-chips .on { border-color: var(--gold); background: rgb(225 192 142 / 0.28); color: var(--ink); }
.sh-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13.5px; color: var(--soft); }
.sh-in { flex: 1; max-width: 62%; height: 34px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 9px; background: #fff; font-size: 13.5px; line-height: 32px; color: #77716a; }
.sh-step { display: flex; align-items: center; gap: 14px; font-size: 16px; color: var(--ink); }
.sh-step i { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--hair); border-radius: 50%; font-style: normal; line-height: 1; color: var(--soft); }
.sh-go { display: grid; place-items: center; height: 40px; border-radius: 10px; background: var(--gold-fill); color: #221a0e; font-size: 15px; }
.tap {
position: absolute; z-index: 5; width: 46px; height: 46px; border-radius: 50%;
background: rgb(255 255 255 / 0.45); border: 2px solid rgb(255 255 255 / 0.95);
box-shadow: 0 2px 10px rgb(0 0 0 / 0.25);
opacity: 0; pointer-events: none;
}
.tap.t1 { left: calc(50% - 23px); top: 26%; }
.tap.t2 { left: calc(50% - 23px); bottom: calc(7cqw - 4px); }
.chat.s1:not(.s2) .t1, .chat.s4:not(.s5) .t2 { animation: tap 0.9s ease-out both; }
@keyframes tap {
0% { opacity: 0; scale: 1.3; }
30% { opacity: 1; scale: 0.85; }
60% { opacity: 1; scale: 0.8; }
100% { opacity: 0; scale: 1.25; }
}
.band { margin-top: 40px; background: var(--deep); border-block: 1px solid var(--hair); }
.band-in { max-width: var(--col); margin: 0 auto; padding: 32px var(--gut) 28px; }
.rows { margin: 8px 0 0; }
.row { display: flex; align-items: baseline; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
.row:last-child { border-bottom: 1px solid var(--hair); }
.row b {
flex: none; min-width: 0; width: 2.9em;
font-family: var(--serif); font-weight: 300; font-size: 32px; line-height: 1.1; color: var(--gold);
}
.row span { font-size: 15px; line-height: 1.55; color: var(--body); text-wrap: balance; }
.lead2 { margin: 16px 0 12px; font-family: var(--serif); font-weight: 300; font-size: 21px; line-height: 1.4; color: var(--ink); }
.trio { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.trio li { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: 14px; line-height: 1.35; color: var(--body); text-wrap: balance; }
.ico {
display: grid; place-items: center; width: 48px; height: 48px; flex: none;
border-radius: 50%; background: var(--paper); border: 1px solid rgb(177 126 49 / 0.4); color: var(--gold);
}
.ico svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.ico svg.qr { width: 21px; height: 21px; fill: currentColor; stroke: none; }
.crowd {
position: relative; isolation: isolate; overflow: hidden;
margin-top: 0; padding: 36px var(--gut) 34px; text-align: center; color: #fffdf9;
background: radial-gradient(80% 60% at 50% 60%, #5a3a1c, #1a120a);
}
.crowd canvas {
position: absolute; inset: -6% 0; z-index: -2; width: 100%; height: 112%; max-width: none;
filter: blur(1.5px) saturate(1.05); opacity: 0; transition: opacity 0.6s;
}
.crowd canvas.on { opacity: 1; }
.crowd::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background:
radial-gradient(70% 58% at 50% 50%, rgb(20 13 7 / 0.74), rgb(20 13 7 / 0.46) 85%),
linear-gradient(180deg, rgb(20 13 7 / 0.35), rgb(20 13 7 / 0.1) 40%, rgb(20 13 7 / 0.5));
}
.crowd h2 { display: flex; flex-direction: column; align-items: center; color: #fffdf9; font-weight: 300; }
.crowd .c-a, .crowd .c-b { font-size: clamp(28px, 8.2vw, 34px); line-height: 1.2; }
.crowd .c-n {
font-weight: 200; font-size: clamp(116px, 37vw, 168px); line-height: 0.92; letter-spacing: -0.04em;
color: var(--gold-fill); margin: 2px 0 4px;
}
.c-cap { margin: 14px auto 0; max-width: 24em; text-wrap: balance; font-size: 14.5px; line-height: 1.5; color: rgb(255 253 249 / 0.86); }
.c-cap::before { content: ""; display: block; width: 36px; height: 1px; margin: 0 auto 12px; background: var(--gold-fill); }
.vs {
margin-top: 16px; border-radius: 18px; overflow: hidden; background: var(--paper);
border: 1px solid var(--line); box-shadow: 0 26px 46px -36px rgb(60 40 20 / 0.55);
}
.vs-col { position: relative; padding: 16px 18px 16px; }
.vs-col.print { background: var(--deep); }
.vs-col.link { border-top: 1px solid var(--line); }
.vs-col.link::before { content: ""; position: absolute; inset: 0 0 auto; height: 3px; background: var(--gold-fill); }
.vs-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.vs-col.link .vs-hd { align-items: center; }
.vs-k { font-family: var(--serif); font-size: 17px; line-height: 1.35; color: var(--soft); }
.vs-col.link .vs-k { color: var(--ink); }
.vs-p { flex: none; font-family: var(--serif); font-weight: 300; font-size: 36px; line-height: 1.05; color: var(--soft); white-space: nowrap; }
.vs-col.link .vs-p { font-size: 46px; color: var(--gold); }
.vs-s { margin-top: 2px; font-size: 14px; line-height: 1.45; color: var(--muted); text-wrap: balance; }
.vs-col.link .vs-s { display: block; margin-top: 2px; font-family: var(--serif); font-size: 15.5px; color: var(--gold-label); }
.vs-l { list-style: none; padding: 0; margin: 10px 0 0; }
.vs-col.link .vs-l { margin-top: 6px; }
.vs-l.plus { display: flex; flex-wrap: wrap; gap: 6px; }
.vs-l.plus li {
padding: 1px 10px; border: 1px solid var(--hair); border-radius: 99px;
font-size: 13.5px; line-height: 1.6; color: var(--soft); background: rgb(255 253 249 / 0.6);
}
.vs-l.plus li::before { content: "+ "; color: var(--muted); }
.vs-l.check li { position: relative; padding: 5px 0; padding-inline-start: 24px; border-top: 1px solid var(--line); font-size: 15.5px; line-height: 1.4; color: var(--body); }
.vs-l.check li:first-child { border-top: 0; }
.vs-l.check li::before {
content: ""; position: absolute; inset-inline-start: 3px; top: 0.72em; width: 10px; height: 5px;
border-left: 1.6px solid var(--gold); border-bottom: 1.6px solid var(--gold); rotate: -45deg;
}
.vs-foot {
padding: 13px 18px 14px; border-top: 1px solid var(--line); background: var(--paper);
text-align: center; font-family: var(--serif); font-weight: 300; font-size: 18px; line-height: 1.45; color: var(--ink);
text-wrap: balance;
}
.paper { margin-top: 40px; background: var(--deep); border-block: 1px solid var(--hair); }
.paper-in { max-width: var(--col); margin: 0 auto; padding: 32px var(--gut) 28px; }
.ringrow { display: grid; grid-template-columns: 136px 1fr; gap: 18px; align-items: center; margin-top: 12px; }
.ring { position: relative; width: 136px; height: 136px; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; overflow: visible; }
.ring .tr { stroke: #cfc4b2; stroke-width: 1; fill: none; }
.ring .arc { stroke: var(--gold); stroke-width: 4; stroke-linecap: butt; fill: none; stroke-dasharray: 16.6 100; }
.ring .n { font-family: var(--serif); font-weight: 200; font-size: 36px; line-height: 1; letter-spacing: -0.03em; color: var(--gold); }
.ring .n small { font-size: 0.55em; font-weight: 300; color: var(--gold-label); }
.ringrow p { font-size: 15.5px; line-height: 1.5; color: var(--body); text-wrap: balance; }
.ringrow .src { display: block; margin-top: 6px; font-size: 13.5px; color: var(--muted); }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.duo > div { padding: 11px 12px 11px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; }
.duo svg { width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.duo b { display: block; margin-top: 4px; font-family: var(--serif); font-weight: 300; font-size: clamp(24px, 7vw, 28px); line-height: 1.15; color: var(--gold); white-space: nowrap; }
.duo span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--soft); text-wrap: pretty; }
.moral {
margin: 16px 0 0;
font-family: var(--serif); font-weight: 300; font-size: 21px; line-height: 1.4; color: var(--ink); text-wrap: balance;
}
.night { position: relative; overflow: hidden; background: var(--night); color: var(--cream); }
.night::before {
content: ""; position: absolute; inset: 0; pointer-events: none;
background:
radial-gradient(42% 36% at 24% 56%, rgb(225 192 142 / 0.18), transparent 70%),
radial-gradient(70% 50% at 50% 0%, rgb(225 192 142 / 0.07), transparent 70%);
}
.night-in { position: relative; max-width: var(--col); margin: 0 auto; padding: 40px var(--gut) 28px; }
.night .orn { color: var(--gold-fill); }
.night h2 { color: #fbf6ec; }
.edit { display: grid; grid-template-columns: 1fr auto; gap: 16px; align-items: start; margin-top: 18px; }
.e-k { font-size: 15px; color: var(--cream-soft); }
.fields { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; width: max-content; justify-items: stretch; }
.fields li {
display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 14px 0 16px;
border: 1px solid rgb(251 247 240 / 0.24); border-radius: 99px;
font-family: var(--serif); font-size: 16.5px; color: var(--cream);
transition: border-color 0.35s, background 0.35s;
}
.fields svg { width: 15px; height: 15px; fill: none; stroke: rgb(251 247 240 / 0.55); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.35s; }
.fields li.on { border-color: var(--gold-fill); background: rgb(225 192 142 / 0.16); }
.fields li.on svg { stroke: var(--gold-fill); }
.e-no { margin-top: 14px; font-family: var(--serif); font-weight: 300; font-size: 19px; line-height: 1.35; color: #fbf6ec; text-wrap: balance; }
.e-yes { margin-top: 10px; font-size: 15px; line-height: 1.55; color: rgb(251 247 240 / 0.8); text-wrap: balance; }
.e-small { margin-top: 14px; padding-top: 10px; border-top: 1px solid rgb(251 247 240 / 0.16); font-size: 14.5px; line-height: 1.5; color: rgb(251 247 240 / 0.74); }
.film2 { --pw: 160px; }
.film2 .phone {
rotate: 2deg;
box-shadow: 0 0 0 1px rgb(255 226 180 / 0.16) inset, 0 0 0 2.5px rgb(0 0 0 / 0.55) inset, 0 30px 60px -20px rgb(0 0 0 / 0.9), 0 0 70px -14px rgb(225 192 142 / var(--halo, 0.2));
transition: box-shadow 0.5s;
}
.grade2 {
position: absolute; inset: 0;
background:
radial-gradient(120% 30% at 50% 58%, rgb(14 10 6 / 0.74), rgb(14 10 6 / 0.34) 70%, transparent),
linear-gradient(180deg, rgb(14 10 6 / 0.12), rgb(14 10 6 / 0) 30%, rgb(14 10 6 / 0.25) 60%, rgb(14 10 6 / 0.72));
}
.inv2 {
position: absolute; inset: auto 0 14cqw; display: flex; flex-direction: column; align-items: center;
text-align: center; color: #fffdf9; text-shadow: 0 1px 12px rgb(0 0 0 / 0.5);
}
.inv2 .nm { font-family: var(--serif); font-weight: 300; font-size: 14cqw; line-height: 1.08; }
.inv2 .amp { font-family: var(--serif); font-weight: 300; font-size: 8cqw; line-height: 1.2; color: #f0d3a0; }
.det {
display: grid; justify-items: center; gap: 2.8cqw; margin-top: 5cqw; padding: 3cqw 8cqw;
border-radius: 99px; transition: background 0.4s;
}
.det i { display: block; width: 34cqw; height: 1.3cqw; border-radius: 2px; background: rgb(255 253 249 / 0.62); transition: background 0.4s; }
.det i + i { width: 24cqw; }
.film2.upd .det { background: radial-gradient(closest-side, rgb(225 192 142 / 0.34), rgb(225 192 142 / 0)); }
.film2.upd .det i { background: var(--gold-fill); }
.night .cap { color: rgb(251 247 240 / 0.66); margin: 14px 0 0; text-align: start; }
.strip {
list-style: none; display: flex; gap: 12px;
margin: 14px calc(-1 * var(--gut)) -16px; padding: 4px var(--gut) 30px;
overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gut);
scrollbar-width: none; overscroll-behavior-x: contain;
}
.strip::-webkit-scrollbar { display: none; }
.strip li { flex: 0 0 auto; width: min(54vw, 240px); scroll-snap-align: start; }
.dz {
position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px;
padding: 0 14px 13px; aspect-ratio: 3 / 4; border-radius: 14px; overflow: hidden;
background: #2a2118; color: #fffdf9; text-decoration: none;
box-shadow: 0 18px 30px -22px rgb(40 26 10 / 0.7);
}
.dz img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: scale 0.6s; }
.dz::after {
content: ""; position: absolute; inset: 0;
background: linear-gradient(180deg, rgb(16 11 6 / 0) 38%, rgb(16 11 6 / 0.82));
}
.dz-n { position: relative; z-index: 1; font-family: var(--serif); font-weight: 300; font-size: 28px; line-height: 1.15; }
.dz-go { position: relative; z-index: 1; font-family: var(--serif); font-size: 15px; line-height: 1.4; color: #f0d3a0; }
.dz:hover img { scale: 1.04; }
.dz:focus-visible { outline: 2px solid var(--gold-label); outline-offset: 3px; }
.strip li:nth-child(3) .dz img { object-position: 50% 0; }
.cta {
position: relative; max-width: 520px; margin: 26px auto 0; padding: 32px 30px 26px; text-align: center;
background:
radial-gradient(80% 50% at 50% 0%, rgb(225 192 142 / 0.18), transparent 70%),
var(--paper);
box-shadow: 0 0 0 1px var(--line), 0 30px 50px -34px rgb(60 40 20 / 0.55);
}
.cta::before, .cta::after { content: ""; position: absolute; pointer-events: none; }
.cta::before { inset: 9px; border: 1px solid rgb(177 126 49 / 0.55); }
.cta::after { inset: 13px; border: 1px solid rgb(177 126 49 / 0.2); }
.cta .logo { width: 132px; height: auto; margin: 0 auto 10px; }
.cta h3 { margin: 0 0 8px; font-family: var(--serif); font-weight: 300; font-size: 26px; line-height: 1.3; color: var(--ink); text-wrap: balance; }
.cta p { margin: 0 auto 22px; max-width: 21em; font-size: 17px; line-height: 1.6; color: var(--soft); text-wrap: balance; }
.btn {
position: relative; z-index: 1;
display: flex; align-items: center; justify-content: center; gap: 10px;
width: 100%; max-width: 360px; min-height: 56px; margin: 0 auto; padding: 0 24px;
border-radius: 10px; background: var(--gold-fill); color: #221a0e;
font-size: 18px; font-weight: 600; letter-spacing: 0.03em; text-decoration: none;
box-shadow: 0 14px 28px -16px rgb(138 109 56 / 0.6);
transition: background 0.2s, transform 0.15s;
}
.btn:hover { background: var(--gold-fill-hover); }
.btn:active { transform: scale(0.985); }
.btn:focus-visible { outline: 2px solid var(--gold-label); outline-offset: 3px; }
.cta .facts {
display: flex; flex-wrap: wrap; justify-content: center; gap: 2px 12px;
margin: 14px auto 0; max-width: none; font-size: 13.5px; color: var(--muted);
}
.facts span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.facts span::before { content: ""; width: 4px; height: 4px; background: var(--gold); rotate: 45deg; }
.fine { max-width: var(--col); margin: 0 auto; padding: 26px var(--gut) 0; }
.note { padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.65; color: var(--muted); text-wrap: pretty; }
.sources { margin-top: 16px; border-block: 1px solid var(--line); }
.sources summary {
display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px;
cursor: pointer; list-style: none;
font-family: var(--serif); font-weight: 300; font-size: 21px; color: var(--ink);
}
.sources summary::-webkit-details-marker { display: none; }
.sources summary::after {
content: ""; width: 8px; height: 8px; margin-inline-end: 6px;
border-left: 1.5px solid var(--gold-label); border-bottom: 1.5px solid var(--gold-label);
rotate: -45deg; translate: 0 -2px; transition: rotate 0.2s;
}
.sources[open] summary::after { rotate: 135deg; translate: 0 2px; }
.sources summary:focus-visible { outline: 2px solid var(--gold-label); outline-offset: 2px; }
.sources h3 { margin: 14px 0 4px; font-family: var(--serif); font-size: 15px; font-weight: 400; color: var(--gold-label); }
.sources ul { list-style: none; margin: 0 0 14px; padding: 0; }
.sources li { padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13.5px; line-height: 1.55; color: #5d574f; }
.sources li:last-child { border-bottom: 0; }
.sources li a {
padding-block: 13px;
color: var(--gold-label); text-decoration: underline; text-decoration-color: rgb(140 99 38 / 0.35);
text-underline-offset: 3px; white-space: nowrap;
}
.sources li a:hover { text-decoration-color: currentColor; }
.foot { margin-top: 12px; padding: 14px var(--gut) 24px; text-align: center; font-size: 13.5px; color: var(--muted); }
.foot .who { margin: 0 0 4px; font-family: var(--serif); font-size: 15px; color: var(--ink); }
.foot nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 4px; }
.foot nav a {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px;
color: var(--gold-label); text-decoration: underline; text-decoration-color: rgb(140 99 38 / 0.3); text-underline-offset: 4px;
}
.dock {
position: fixed; inset: auto 0 0; z-index: 25;
display: flex; align-items: center; justify-content: space-between; gap: 12px;
padding: 6px var(--gut) calc(6px + env(safe-area-inset-bottom));
background: rgb(255 253 249 / 0.96);
-webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
border-top: 1px solid var(--hair); box-shadow: 0 -10px 24px -18px rgb(60 40 20 / 0.5);
translate: 0 110%; visibility: hidden;
transition: translate 0.35s ease, visibility 0s linear 0.35s;
}
.dock.on { translate: 0 0; visibility: visible; transition: translate 0.35s ease, visibility 0s; }
.dock p { display: flex; align-items: baseline; gap: 8px; font-size: 13.5px; line-height: 1.2; color: var(--muted); }
.dock p b { font-family: var(--serif); font-weight: 300; font-size: 24px; line-height: 1.1; color: var(--ink); }
.dock .btn { width: auto; min-height: 46px; margin: 0; padding: 0 22px; font-size: 16.5px; box-shadow: none; }
@media (max-width: 719px) {
html { scroll-padding-bottom: 72px; }
.set { translate: calc(-50% - 6px) 0; }
}
@media (max-width: 374px) {
.chat { height: 380px; }
.sec { padding-top: 32px; }
.cta h3 { font-size: 25px; }
}
@media (max-width: 359px) {
:root { --gut: 16px; }
.lede { font-size: 19px; }
.cta h3 { font-size: 22px; }
.cta { padding-inline: 26px; }
.vs-col.print .vs-p { font-size: 28px; }
.strip li { width: 64vw; }
.lead2 { font-size: 19px; }
.moral { font-size: 19px; }
.vs-k { font-size: 16px; }
.stat .num { font-size: 64px; }
.e-yes { font-size: 14px; }
.film2 { --pw: 140px; }
.fields li { padding-inline: 12px; font-size: 15.5px; }
.vs-col { padding-inline: 14px; }
.vs-col.link .vs-p { font-size: 40px; }
.vs-l.check li { font-size: 14.5px; }
.ringrow { grid-template-columns: 124px 1fr; gap: 14px; }
.ring { width: 124px; height: 124px; }
.ring .n { font-size: 32px; }
.ringrow p { font-size: 14.5px; }
.duo > div { padding-inline: 9px; }
.duo span { font-size: 13.5px; }
.dock .btn { padding: 0 16px; }
}
@media (min-width: 720px) {
:root { --gut: 32px; }
body { font-size: 18.5px; }
.cover { padding-top: 44px; }
.stage { --pw: 236px; margin-top: 24px; }
.lede { font-size: 24px; padding-top: 40px; }
.sec { padding-top: 76px; }
.stat .num { font-size: 92px; }
.stat .t { font-size: 17px; }
.band { margin-top: 76px; }
.band-in { padding-block: 60px 56px; }
.row b { font-size: 42px; }
.row span { font-size: 17px; }
.trio li { font-size: 16px; }
.crowd { padding-block: 84px 76px; }
.crowd h2 { flex-direction: row; align-items: baseline; justify-content: center; gap: 0 28px; }
.crowd .c-a, .crowd .c-b { font-size: 44px; }
.crowd .c-n { font-size: 210px; margin: 0; }
.c-cap { font-size: 17px; margin-top: 18px; }
.vs { display: grid; grid-template-columns: 1fr 1fr; }
.vs-col { padding: 26px 26px 22px; }
.vs-col.link { border-top: 0; border-inline-start: 1px solid var(--line); }
.vs-hd { display: block; }
.vs-p { margin-top: 6px; font-size: 46px; }
.vs-col.link .vs-p { font-size: 54px; }
.vs-s { font-size: 15px; }
.vs-l.plus { display: block; }
.vs-l.plus li { display: block; width: fit-content; margin-top: 8px; }
.vs-l.check li { font-size: 16.5px; }
.vs-foot { grid-column: 1 / -1; font-size: 20px; }
.paper { margin-top: 76px; }
.paper-in { padding-block: 60px 56px; }
.ringrow { grid-template-columns: 200px 1fr; gap: 32px; }
.ring { width: 200px; height: 200px; }
.ring .n { font-size: 54px; }
.ringrow p { font-size: 17.5px; }
.duo { gap: 16px; }
.duo > div { padding: 18px 18px 16px; }
.duo b { font-size: 32px; }
.duo span { font-size: 15.5px; }
.night-in { max-width: var(--wide); padding-block: 72px 60px; }
.film2 { --pw: 236px; }
.edit { gap: 56px; }
.e-yes { font-size: 17.5px; }
.e-no { font-size: 24px; }
.e-small { font-size: 16px; }
.fields li { height: 44px; font-size: 18px; }
.dock { display: none; }
.cta { padding: 46px 44px 34px; margin-top: 44px; }
.cta h3 { font-size: 32px; }
.strip { overflow: visible; justify-content: center; margin-inline: 0; padding-inline: 0; }
.strip li { width: 240px; }
}
@media (min-width: 960px) {
.wa { display: grid; grid-template-columns: 1fr 360px; gap: 72px; align-items: center; max-width: var(--wide); }
.wa .chat-fig { margin: 0; }
.band-in { max-width: var(--wide); display: grid; grid-template-columns: 1fr 1fr; gap: 0 72px; align-items: end; }
.band-in > .orn, .band-in > h2, .rows { grid-column: 1; }
.band-in .more { grid-column: 2; grid-row: 2 / span 2; align-self: center; }
.lead2 { margin-top: 0; }
.paper-in { max-width: var(--wide); display: grid; grid-template-columns: 1.15fr 1fr; gap: 0 64px; align-items: center; }
.paper-in > .orn, .paper-in > h2, .ringrow { grid-column: 1; }
.duo { grid-column: 2; grid-row: 1 / span 3; margin: 0; grid-template-columns: 1fr; align-self: center; }
.moral { grid-column: 1 / -1; text-align: center; }
.night-in { display: grid; grid-template-columns: 1fr auto; grid-template-rows: 1fr auto auto auto auto auto 1fr; gap: 0 96px; }
.night-in > .orn { grid-column: 1; grid-row: 2; }
.night-in > h2 { grid-column: 1; grid-row: 3; }
.edit { display: contents; }
.edit-t { grid-column: 1; grid-row: 4; margin-top: 18px; max-width: 30em; }
.e-small { grid-column: 1; grid-row: 5; max-width: 30em; }
.night .cap { grid-column: 1; grid-row: 6; margin: 18px 0 0; text-align: start; }
.film2 { grid-column: 2; grid-row: 1 / -1; }
.night::before { background: radial-gradient(30% 50% at 26% 52%, rgb(225 192 142 / 0.2), transparent 70%); }
}
@media (min-width: 980px) {
.cover { padding: 64px 48px 64px; }
.cover-in {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr;
column-gap: 56px; max-width: 1120px; margin: 0 auto; text-align: right;
}
.cover-txt { grid-column: 1; grid-row: 2; }
.hero { grid-column: 2; grid-row: 1 / -1; text-align: center; }
.cover .kick::after { display: none; }
.cover h1 { margin: 0; max-width: 8.5em; }
.by { justify-content: flex-start; }
.stage { --pw: 240px; margin-top: 0; }
.lede {
grid-column: 1; grid-row: 3; margin: 28px 0 0; padding: 26px 0 0; background: none;
border-top: 1px solid rgb(225 192 142 / 0.28); font-size: 23px; color: var(--cream);
}
.lede span { margin: 0; max-width: 20em; }
}
@media (prefers-reduced-motion: reduce) {
.hint i, .chat .tap { animation: none !important; }
.inv, .grade, .screen > canvas, .ch-inv, .ch-rsvp, .ch-head, .ch-url, .ch-veil, .ch-sheet, .fields li, .fields svg, .det, .det i, .film2 .phone, .crowd canvas, .dock, .dz img { transition: none !important; }
}