/* ---------- nav ---------- */
header.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:.35s}
.nav::before{content:"";position:absolute;inset:0 0 -46px 0;pointer-events:none;z-index:-1;background:linear-gradient(180deg,rgba(247,244,236,.92) 0%,rgba(247,244,236,.6) 46%,rgba(247,244,236,0) 100%)}.nav.solid::before{opacity:0}
/* Above the sheet, which is its sibling: otherwise the close button is behind the panel it opens. */
.nav .wrap{position:relative;z-index:61;
display:flex;align-items:center;justify-content:space-between;gap:44px;height:104px}
/*
The wordmark must not be squeezed.
The header is a flex row and every other item has a hard minimum — Sign in, the gold CTA, the
hamburger — so the logo was the only thing that could give. `img{max-width:100%}` let it lose
width while the height stayed pinned, which flattens the letterforms rather than scaling them:
at 320px it rendered at 46% of its correct width. flex:0 0 auto takes it out of the negotiation.
*/
.nav .wrap > a{flex:0 0 auto}
.nav .logo{height:51px;width:auto;max-width:none;transition:.25s;filter:drop-shadow(0 1px 1px rgba(247,244,236,.9))}
.navlinks{display:flex;gap:40px;align-items:center}
.navlinks a.lnk{position:relative;font-size:.9rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
color:#383b32;transition:color .25s;white-space:nowrap;padding:6px 0}
.navlinks a.lnk::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;
background:var(--sage);transform:scaleX(0);transform-origin:left;transition:transform .32s cubic-bezier(.2,.7,.2,1)}
.navlinks a.lnk:hover{color:var(--sage)}
.navlinks a.lnk:hover::after{transform:scaleX(1)}
.navtools{display:flex;align-items:center;gap:22px}
/*
Sign in leaves the header on a phone. It only ever matched .navlinks a.lnk, so out here it had no
uppercase, no tracking and a 21px tap target — and the room it took is what was squeezing the
wordmark. The menu sheet carries it (site-nav), which is where it belongs at this width.
*/
@media(max-width:820px){ .navtools > .lnk{display:none} }
.lang{display:flex;align-items:center;gap:7px;font-size:.84rem;font-weight:500;letter-spacing:.1em;color:#383b32;cursor:pointer;transition:color .25s}
.lang:hover{color:var(--sage)}
.lang svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.3}
/*
The one gold thing in the bar.
Sage on cream is the page's own palette, so the single action in the header sat inside the background
rather than on top of it. Gold is the brand's accent and is spent nowhere else at this size — and it
takes ink, not ivory: white on champagne is under 3:1 and unreadable at this weight. Same recipe as
the top step of the pricing stair, so the two read as one decision.
*/
.navcta{font-size:.76rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;
color:#1F2A20;background:var(--gold-hi, #C4A968);
padding:14px 26px;border-radius:8px;transition:background .25s,transform .25s,box-shadow .25s;white-space:nowrap}
.navcta:hover{background:#D6BC7C;transform:translateY(-2px);box-shadow:0 12px 26px -12px rgba(172,146,76,.65)}
@media(max-width:1160px){.navlinks{display:none}}
/* ---------- the small-screen menu ---------- */
.navburger{display:none;position:relative;width:38px;height:38px;border:0;background:none;cursor:pointer;
padding:0;flex:0 0 auto}
.navburger i{position:absolute;left:9px;width:20px;height:1.5px;background:#38463C;border-radius:2px;
transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .2s}
.navburger i:first-child{top:16px}
.navburger i:last-child{top:22px}
.navburger.is-on i:first-child{transform:translateY(3px) rotate(45deg)}
.navburger.is-on i:last-child{transform:translateY(-3px) rotate(-45deg)}
@media(max-width:1160px){ .navburger{display:block} }
/* While the sheet is open the bar keeps only the mark and the close button. */
.nav.menu-open .navtools > :not(.navburger){display:none}
.nav.menu-open::before{opacity:0}
/*
The [hidden] attribute does not survive a class that sets display: an author rule beats the user
agent's regardless of specificity, so .navsheet{display:flex} kept the panel open on every screen,
desktop included. It is closed here explicitly, and the wide viewport closes it whatever the state.
*/
.navsheet[hidden]{display:none}
/*
The list starts under the bar and the air falls below it. Centring a short list inside a tall panel
that also carried a 110px top padding pushed everything into the bottom half, which reads as a
layout accident rather than a choice.
*/
.navsheet{position:fixed;inset:0;z-index:59;display:flex;flex-direction:column;
gap:clamp(26px,4vw,38px);padding:clamp(98px,15vh,128px) clamp(26px,7vw,64px) clamp(36px,7vw,56px);
overflow-y:auto;background:var(--ivory);
animation:navsheet-in .38s cubic-bezier(.2,.8,.2,1)}
@keyframes navsheet-in{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
/* Placed after the base rule on purpose: at equal specificity the later block wins. */
@media(min-width:1161px){ .navsheet{display:none} }
.navsheet__links{display:flex;flex-direction:column}
.navsheet__links a{display:block;padding:clamp(13px,2.2vw,18px) 0;text-decoration:none;
border-bottom:1px solid var(--line);
font-family:"Cormorant Garamond","Baskerville",Georgia,serif;
font-size:clamp(1.5rem,6vw,2.1rem);line-height:1.1;color:var(--sage)}
.navsheet__links a:first-child{border-top:1px solid var(--line)}
.navsheet__foot{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.navsheet__in{font-size:.86rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;
color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line);padding-bottom:3px}
.navsheet .navcta{padding:15px 24px}
@media(prefers-reduced-motion:reduce){ .navsheet{animation:none} }
/*
On a phone the header had no rules of its own: a 46px wordmark, a 44px gap and three tools laid out
for a desk. The flexbox resolved it by crushing the logo to nothing and letting the button run off the
right edge. So the bar is sized for the hand — shorter, tighter, and the language chip (which repeats
what the page already is) gives up its room to the two things that are actually actions.
*/
@media(max-width:820px){
.nav .wrap{gap:12px;height:76px}
.nav .logo{height:36px}
.navtools{gap:15px}
.navtools .lang{display:none}
.navcta{font-size:.6rem;letter-spacing:.09em;padding:11px 15px;border-radius:7px}
.navcta:hover{transform:none;box-shadow:none}
}
@media(max-width:400px){
.nav .wrap{gap:9px}
.nav .logo{height:31px}
.navtools{gap:11px}
.navtools .lnk{font-size:.8rem}
.navcta{font-size:.55rem;padding:10px 12px}
}
.nav.solid{background:rgba(249,247,242,.9);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
/* ---------- footer ----------
A sign-off, not a directory.
It was four thin columns of twelve links, eight of which pointed at "#": Our story, Contact, FAQ,
Order samples, For planners, Privacy, Terms, Refunds. A footer full of links that go nowhere is worse
than a short one, so this carries only destinations that exist, in one row, under the mark and the
two ways to actually reach a person.
*/
footer.ft{background:var(--sage);color:rgba(249,247,242,.72);
padding:clamp(56px,6vw,82px) 0 clamp(26px,3vw,34px)}
/* The floating stack is fixed to this corner; the last links need a lane it does not cover. */
@media(max-width:900px){ footer.ft{padding-bottom:calc(clamp(26px,3vw,34px) + 66px)} }
.ft__top{display:grid;gap:clamp(30px,4vw,64px);
padding-bottom:clamp(30px,3.4vw,44px);border-bottom:1px solid rgba(249,247,242,.16)}
@media(min-width:820px){ .ft__top{grid-template-columns:minmax(0,1.35fr) minmax(260px,.65fr);align-items:start} }
.ft__mark{height:29px;width:auto;margin-bottom:18px}
.ft__say{max-width:36ch;margin:0;font-size:.94rem;line-height:1.65}
.ft__line{margin:14px 0 0;font-family:"Cormorant Garamond","Baskerville",Georgia,serif;font-style:italic;
font-size:1.3rem;color:var(--sand)}
/* The same labelled rows the contact page uses, so the two read as one voice. */
.ft__reach{list-style:none;margin:0;padding:0}
.ft__reach li{padding:13px 0;border-top:1px solid rgba(249,247,242,.16)}
.ft__reach li:last-child{border-bottom:1px solid rgba(249,247,242,.16)}
.ft__reach span{display:block;font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;
color:rgba(249,247,242,.5);margin-bottom:4px}
.ft__reach a{display:inline-block;font-family:"Cormorant Garamond","Baskerville",Georgia,serif;
font-size:1.1rem;color:var(--sand);text-decoration:none;
border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.ft__reach a:hover{color:var(--ivory);border-bottom-color:var(--sand)}
.ft__nav{display:flex;flex-wrap:wrap;gap:10px clamp(20px,2.6vw,38px);
padding:clamp(22px,2.6vw,32px) 0}
.ft__nav a{font-size:.84rem;letter-spacing:.02em;color:rgba(249,247,242,.72);text-decoration:none;
transition:color .25s}
/*
Touch targets in the site's densest tap area: the footer link list was 21.8px tall with a 10px
row gap, and the reach links 28.5px. The visible type is unchanged.
*/
@media(max-width:900px){
.ft__nav a,.ft__reach a{display:inline-flex;align-items:center;min-height:44px}
.ft__nav{gap:2px clamp(20px,2.6vw,38px)}
}
.ft__nav a:hover{color:var(--ivory)}
/* The policies sit quieter than the nav above them, on their own line above the copyright. */
.ft__legal{display:flex;flex-wrap:wrap;gap:4px clamp(16px,2vw,28px);padding-bottom:clamp(14px,1.8vw,20px)}
.ft__legal a{font-size:.78rem;color:rgba(249,247,242,.5);text-decoration:none;transition:color .25s}
.ft__legal a:hover{color:rgba(249,247,242,.85)}
@media(max-width:900px){.ft__legal a{display:inline-flex;align-items:center;min-height:44px}}
.ft__end{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px 20px;
padding-top:clamp(16px,2vw,22px);border-top:1px solid rgba(249,247,242,.16);
font-size:.76rem;color:rgba(249,247,242,.5)}
.ft__end b{font-weight:400;font-family:"Cormorant Garamond","Baskerville",Georgia,serif;font-style:italic;
font-size:.95rem;color:var(--sand)}
/* ---------- the phone ----------
One device, everywhere.
The site had seven: the hero's (9/19.3, gradient bezel, notch), the guest-journey one (9/17.6), the
film band's (9/18.6), the collection card's pair (9/18.4, flat #20221c, no notch), the detail page's
(390/844, radius 52), the checkout summary's and the style strip's. Different proportions, different
corners, different bezels — the same product photographed on seven handsets.
This is the one. Its proportions are the invitation's own (390x844), so nothing a guest would see is
cropped, and every measurement derives from a single width so the same rule draws a 52px thumbnail
and a 760px hero without a second definition.
*/
.ph{--ph-w:320px;display:block;position:relative;width:var(--ph-w);aspect-ratio:390/844;
padding:calc(var(--ph-w) * .031);border-radius:calc(var(--ph-w) * .142);
background:linear-gradient(155deg,#6C7A6E 0%,#2B342E 42%,#1D241F 72%,#55624F 100%);
box-shadow:0 1px 2px rgba(20,26,22,.4),
0 calc(var(--ph-w) * .15) calc(var(--ph-w) * .26) calc(var(--ph-w) * -.12) rgba(20,26,22,.55),
inset 0 0 0 1px rgba(255,255,255,.15)}
.ph__s{display:block;position:relative;width:100%;height:100%;overflow:hidden;background:var(--sand-2);
border-radius:calc(var(--ph-w) * .112)}
.ph__s > img,.ph__s > video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
object-position:top center;display:block}
.ph__s > iframe{width:100%;height:100%;border:0;display:block}
/* The cut-out. Below ~90px wide it is a speck that reads as dirt, so it stops being drawn. */
.ph__n{position:absolute;top:calc(var(--ph-w) * .062);left:50%;transform:translateX(-50%);z-index:4;
width:calc(var(--ph-w) * .237);height:calc(var(--ph-w) * .064);border-radius:99px;background:#12170F}
.ph--bare .ph__n{display:none}
/*
Touch targets. A finger needs about 44px; these were 30-38px, which on a phone means a tap that
lands next to the control instead of on it. Sized by width rather than by pointer:coarse, so a
narrow window gets the same rule and a test can measure it.
*/
@media(max-width:900px){
.navburger{width:44px;height:44px}
.navcta{min-height:44px}
.navsheet a{min-height:44px;display:flex;align-items:center}
}
/* The two side buttons, drawn only once the device is big enough to have earned them. */
.ph--keys::before,.ph--keys::after{content:"";position:absolute;left:calc(var(--ph-w) * -.006);
width:calc(var(--ph-w) * .008);border-radius:2px;
background:linear-gradient(180deg,#7C8A7E,#2C352F);opacity:.9}
.ph--keys::before{top:calc(var(--ph-w) * .19);height:calc(var(--ph-w) * .085)}
.ph--keys::after{top:calc(var(--ph-w) * .30);height:calc(var(--ph-w) * .135)}
What we hold, why we hold it, and how to make us stop.
Last updated 28 September 2026.
This page is about two different sets of people. You, if you are planning a
celebration and thinking about ordering — or have ordered. And your guests, whose
names you type into your guest list and who reply to your invitation. We hold far more of theirs
than of yours, and they never agreed anything with us. That distinction runs through everything
below.
What we hold about you
What you tell us to order. Your names, your email address, your dates and
venues, your dress code, the notes you write for your designer, and any photographs or music you
upload. All of it is what the invitation is made of.
What you paid. The order, what was on it, and the amount. Card details never
reach us — they go to the payment provider and we are told only whether it worked.
What you write to us. Messages in your panel, and anything you send by email
or WhatsApp.
How you got here. Only if you agreed to cookies — see the
cookies page. If you declined, we hold none of it.
What we hold about your guests
Whatever you put on your guest list: a name, and sometimes a phone number, an email address or a
group. Then whatever they answer: coming or not, who they are bringing, what they cannot eat, and
any note they leave you.
Your guests gave that to you, not to us. We hold it so your invitation can work, we do
not use it for anything else, we never market to it, and we never sell or share it. You decide
what goes on the list and you can delete any of it from your panel at any time.
Dietary notes say something about a person's health or beliefs. We keep them because you need
them for your caterer, we show them only to you and to the person at the studio working on your
project, and we delete them with the rest of the list.
Why we are allowed to hold it
To do what you paid for. Making, delivering and running your invitation, and
handling your replies.
Because we have to. Orders, invoices and payments are kept as long as tax law
requires, which is longer than the wedding.
Because you said yes. Measurement cookies, and nothing else.
Who else sees it
Only the companies that make this work, and only the part each needs: the payment provider, the
company that sends our email, the company that hosts the servers, and the measurement services on
the cookies page if you agreed to them. Nobody buys anything from us, because nothing is for sale.
Our servers are in Europe. If a supplier moves data outside it, they do so under the standard
contractual clauses the EU publishes for exactly that.
How long
Guest lists and replies: until you delete them, or twelve months after your
celebration, whichever comes first. After that they go, and we do not keep a copy.
Your invitation and what you wrote for it: while your account is open.
Orders and payment records: as long as tax law requires.
Messages: three years, so we can still answer a question about an old order.
What you can ask for
A copy of everything we hold about you. A correction. Deletion. A machine-readable export. To
object to something we are doing. To withdraw a consent you gave, which takes effect immediately and
does not undo what was lawful before it. Write to us and we answer within thirty days.
A guest can ask us the same about themselves. We will usually point them to you first, because
the list is yours, and we will act ourselves if they ask us to.
If we get it wrong, you can complain to the data protection authority where you live.
Who you are dealing with
Our registered company details are not published on this page yet. Write to
support@briyd.com and we will send them to you.
We use cookies to see how this site is found and used. Nothing is measured until you say yes, and saying no changes nothing about how the site works for you. What we would collect.