:root{--bg:#0b0a14;--navy:#14121f;--white:#eef0f6;--silver:#aeb4c6;--gold:#e0b04c;--flame:#ef7d22;--glass:rgba(255,255,255,.06);--border:rgba(255,255,255,.14)}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-height:100vh;color:var(--white);font:16px/1.65 Inter,system-ui,-apple-system,sans-serif;position:relative}
body::before{content:"";position:fixed;inset:0;background-image:linear-gradient(180deg,rgba(11,10,20,.55),rgba(11,10,20,.45) 40%,rgba(11,10,20,.78)),radial-gradient(ellipse at 50% -10%,rgba(239,125,34,.18),transparent 55%),url(background.jpg?v=20261020);background-size:100% 100%,100% 100%,var(--W) auto;background-position:0 0,0 0,calc(50vw - .527*var(--W)) var(--Yt);background-repeat:no-repeat;background-color:var(--bg);pointer-events:none;z-index:0}
body::after{content:"";position:fixed;inset:0;background-image:url(stars.svg);background-size:600px 600px;opacity:.3;pointer-events:none;z-index:0}
main,header,footer{position:relative;z-index:1}
.wrap{max-width:880px;margin:0 auto;padding:0 20px}
header{padding:18px 0}
header .wrap{display:flex;align-items:center;gap:12px}
.brand{display:flex;align-items:center;gap:10px;font-family:Cinzel,Georgia,serif;font-weight:700;font-size:20px;color:var(--gold);text-decoration:none;letter-spacing:.04em}
.brand img{width:34px;height:34px;border-radius:8px}
.hero{text-align:center;padding:72px 0 28px}
.hero img{width:128px;height:128px;border-radius:28px;box-shadow:0 0 60px rgba(239,125,34,.35)}
h1,h2,h3{font-family:Cinzel,Georgia,serif;font-weight:700;line-height:1.25}
h1{font-size:clamp(34px,7vw,56px);margin:.4em 0 .2em;color:var(--white)}
.tag{font-size:clamp(18px,2.6vw,22px);color:var(--silver);max-width:620px;margin:0 auto}
.badge{display:inline-block;margin-top:26px;padding:12px 22px;border-radius:12px;background:rgba(11,10,20,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);color:var(--white);font-weight:600;line-height:1.2;text-align:center}
.badge small{display:block;font-size:11px;font-weight:500;color:var(--silver)}
h2{font-size:22px;color:var(--gold);margin:40px 0 14px}
.grid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px}
.card{flex:1 1 260px;max-width:calc(33.333% - 11px);min-height:230px;display:flex;flex-direction:column;justify-content:flex-end;background:linear-gradient(180deg,rgba(11,10,20,.04) 0%,rgba(11,10,20,.45) 40%,rgba(11,10,20,.90) 100%),var(--img) center/cover no-repeat,rgba(11,10,20,.4);border:1px solid var(--border);border-radius:16px;padding:18px 20px;overflow:hidden}
@media(max-width:820px){.card{max-width:none;flex-basis:100%}}
.card h3{margin:0 0 6px;font-size:17px;color:var(--flame);text-shadow:0 1px 6px rgba(0,0,0,.9)}
.card p{margin:0;color:#e6e6ee;text-shadow:0 1px 5px rgba(0,0,0,.9)}
.also{text-align:center;margin:44px 0 0;color:var(--silver)}
a{color:var(--gold)}
footer{margin-top:56px;padding:24px 0 40px;border-top:1px solid var(--border);color:var(--silver);font-size:14px;text-align:center}
footer p{margin:.3em 0}

.belief{max-width:680px;margin:0 auto 28px;text-align:left;padding:18px 22px;background:rgba(11,10,20,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border);border-radius:16px}
.belief h2{margin:0 0 10px;font-size:18px}
.belief p{margin:.5em 0;font-size:14.5px;line-height:1.6;color:var(--silver)}
h2.mid{text-align:center}
.card p{line-height:1.6;min-height:3.2em}
.card.tall p{min-height:4.8em}
.tag.closing{margin:34px auto 0;text-align:center}

/* THE FRAME (George 2026-10-20). The wedding picture is a fixed background sized and placed from these numbers, and the title and the
   'What's inside' heading are placed from the SAME numbers, so on opening the page: the title is the huppah roof just above the couple,
   the two flaming swords are the posts either side, and 'What's inside' sits just under the couple's feet, all centred on the swords.
   Picture fractions: poles' midpoint 0.527 of the width; couple's heads 0.477 and feet 0.667 of the height. */
:root{--W:max(106vw,67.3vh);--H:calc(var(--W)*1.4859);--T:max(46px,10vh);--F:clamp(30px,4.9vw,110px);
 --Yt:min(0px,max(calc(var(--T) - .435*var(--H)),calc(100vh - var(--H))))}
.hero{padding:calc(var(--T) - .625*var(--F)) 0 0;height:calc(var(--Yt) + .699*var(--H) - 54px);min-height:0}
.hero h1{position:relative;display:inline-block;margin:0;font-size:var(--F);line-height:1.25}
.hero img.mark{position:absolute;left:100%;top:50%;margin-left:.36em;width:.72em;height:.72em;transform:translateY(-50%);border-radius:22%;box-shadow:0 0 26px rgba(239,125,34,.35)}
/* the corner pill: same centre line and same height as the icon beside the title (George 2026-10-20); horizontal position unchanged */
.badge.soon{position:absolute;right:18px;margin:0;z-index:2;display:flex;flex-direction:column;justify-content:center;
 height:max(calc(.72*var(--F)),34px);top:calc(var(--T) - max(calc(.36*var(--F)),17px));padding:0 14px;border-radius:10px;
 font-size:clamp(12px,calc(.26*var(--F)),22px);line-height:1.1}
.badge.soon small{font-size:.72em}
/* phones: the wider 'iPhone · macOS · iPad' pill would sit on the title, so centre it just under the title (2026-10-22) */
@media(max-width:600px){.badge.soon{right:auto;left:50%;transform:translateX(-50%);top:calc(var(--T) + .9*var(--F));font-size:13px;height:38px}}